fix: simplify logic core-charge

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/cart/line-item.tsx

@@ -17,23 +17,17 @@ type MerchandiseSearchParams = {
   [key: string]: string;
 };
 
-const CoreCharge = ({
-  coreCharge,
-  quantity
-}: {
-  coreCharge: CartItem['coreCharge'];
-  quantity: number;
-}) => {
+const CoreCharge = ({ coreCharge, quantity }: { coreCharge?: CartItem; quantity: number }) => {
   if (!coreCharge) return null;
 
   return (
     <div className="ml-20 mt-2 flex flex-row items-center">
       <PlusIcon className="mr-1.5 size-3" />
       <div className="flex flex-row items-center justify-start gap-2">
-        {coreCharge.selectedOptions[0] ? (
+        {coreCharge.merchandise.selectedOptions[0] ? (
           <Price
             className="text-xs font-medium"
-            amount={coreCharge.selectedOptions[0].value}
+            amount={coreCharge.merchandise.selectedOptions[0].value}
             currencyCode="USD"
           />
         ) : (

lib/shopify/fragments/cart.ts

@@ -40,6 +40,9 @@ const cartFragment = /* GraphQL */ `
               product {
                 ...product
               }
+              coreVariantId: metafield(key: "coreVariant", namespace: "custom") {
+                value
+              }
             }
           }
         }

lib/shopify/index.ts

@@ -35,14 +35,12 @@ import { getPageQuery, getPagesQuery } from './queries/page';
 import {
   getProductQuery,
   getProductRecommendationsQuery,
-  getProductVariantQuery,
   getProductsQuery
 } from './queries/product';
 import {
   Cart,
   CartAttributeInput,
   CartItem,
-  CartProductVariant,
   Collection,
   Connection,
   Filter,
@@ -54,7 +52,6 @@ import {
   PageInfo,
   Product,
   ProductVariant,
-  ProductVariantOperation,
   ShopifyAddToCartOperation,
   ShopifyCart,
   ShopifyCartOperation,
@@ -398,45 +395,22 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
   }
 
   const cart = reshapeCart(res.body.data.cart);
-  let extendedCartLines = cart.lines;
 
-  const lineIdMap = {} as { [key: string]: string };
-  // get product variants details including core charge variant data
-  const productVariantPromises =
-    cart?.lines.map((line) => {
-      lineIdMap[line.merchandise.id] = line.id;
-      return getProductVariant(line?.merchandise.id);
-    }) || [];
+  // attach core charge as an additional attribute of a cart line, and remove the core charge line from cart
+  const extendedCartLines = cart?.lines.reduce((lines, item) => {
+    const coreVariantId = item.merchandise.coreVariantId?.value;
+    if (coreVariantId) {
+      const relatedCoreCharge = cart.lines.find((line) => line.merchandise.id === coreVariantId);
+      return lines.concat([
+        {
+          ...item,
+          coreCharge: relatedCoreCharge
+        }
+      ]);
+    }
 
-  if (productVariantPromises.length) {
-    const productVariantsById = (await Promise.allSettled(productVariantPromises))
-      .filter((result) => result.status === 'fulfilled')
-      .reduce(
-        (acc, result) => {
-          const _result = result as PromiseFulfilledResult<CartProductVariant>;
-          return {
-            ...acc,
-            [_result.value.id]: { ..._result.value, lineId: lineIdMap[_result.value.id] }
-          };
-        },
-        {} as { [key: string]: CartProductVariant & { lineId?: string } }
-      );
-
-    // add core charge field to cart line item if any
-    extendedCartLines = cart?.lines.reduce((lines, item) => {
-      const productVariant = productVariantsById[item.merchandise.id];
-      if (productVariant && productVariant.coreVariantId) {
-        const coreCharge = productVariantsById[productVariant.coreVariantId];
-        return lines.concat([
-          {
-            ...item,
-            coreCharge
-          }
-        ]);
-      }
-      return lines;
-    }, [] as CartItem[]);
-  }
+    return lines;
+  }, [] as CartItem[]);
 
   const totalQuantity = extendedCartLines.reduce((sum, line) => sum + line.quantity, 0);
 
@@ -636,19 +610,6 @@ export async function getProduct(handle: string): Promise<Product | undefined> {
   return reshapeProduct(res.body.data.product, false);
 }
 
-export async function getProductVariant(id: string) {
-  const res = await shopifyFetch<ProductVariantOperation>({
-    query: getProductVariantQuery,
-    tags: [TAGS.products],
-    variables: {
-      id
-    }
-  });
-
-  const variant = res.body.data.node;
-  return { ...variant, coreVariantId: variant.coreVariantId?.value || null };
-}
-
 export async function getProductRecommendations(productId: string): Promise<Product[]> {
   const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
     query: getProductRecommendationsQuery,

lib/shopify/queries/product.ts

@@ -35,21 +35,3 @@ export const getProductRecommendationsQuery = /* GraphQL */ `
   }
   ${productFragment}
 `;
-
-export const getProductVariantQuery = /* GraphQL */ `
-  query getProductVariant($id: ID!) {
-    node(id: $id) {
-      ... on ProductVariant {
-        id
-        title
-        selectedOptions {
-          name
-          value
-        }
-        coreVariantId: metafield(namespace: "custom", key: "coreVariant") {
-          value
-        }
-      }
-    }
-  }
-`;

lib/shopify/types.ts

@@ -26,16 +26,9 @@ export type CartItem = {
       value: string;
     }[];
     product: Product;
+    coreVariantId: { value: string } | null;
   };
-  coreCharge?: {
-    id: string;
-    title: string;
-    lineId?: string;
-    selectedOptions: {
-      name: string;
-      value: string;
-    }[];
-  };
+  coreCharge?: CartItem;
 };
 
 export type Collection = ShopifyCollection & {