@anker-in/shopify-react 1.1.2 → 1.2.0-beta.1

package/dist/hooks/index.js

@@ -797,15 +797,23 @@ var trackAddToCartGA = ({
       currency: currencyCode,
       value: totalPrice,
       position: gtmParams?.position || "",
-      items: lineItems.map(({ variant: variant2, quantity }) => ({
-        item_id: variant2?.sku,
-        item_name: variant2?.product?.title || variant2?.product?.title,
-        item_brand: gtmParams?.brand || "",
-        item_category: variant2?.product?.productType || "",
-        item_variant: variant2?.title || variant2?.title,
-        price: variant2?.compareAtPrice?.amount ?? variant2?.price?.amount,
-        quantity: quantity || 1
-      })),
+      items: lineItems.map((item) => {
+        const imageUrl = item.variant?.image?.url || item.variant?.product?.images?.[0]?.url;
+        const itemCategoryId = item.gtmParams?.item_category_id;
+        const itemVariantId = item.variant?.id ? shopifyCore.atobID(item.variant.id) : void 0;
+        return {
+          item_id: item.variant?.sku,
+          item_name: item.variant?.product?.title || item.variant?.product?.title,
+          item_brand: gtmParams?.brand || "",
+          item_category: item.variant?.product?.productType || "",
+          item_variant: item.variant?.title || item.variant?.title,
+          price: item.variant?.compareAtPrice?.amount ?? item.variant?.price?.amount,
+          quantity: item.quantity || 1,
+          ...imageUrl && { image_url: imageUrl },
+          ...itemCategoryId && { item_category_id: itemCategoryId },
+          ...itemVariantId && { item_variant_id: itemVariantId }
+        };
+      }),
       ...gtmParams?.ga4Params
     }
   });
@@ -833,19 +841,73 @@ var trackBuyNowGA = ({
       position: gtmParams?.position,
       currency: currencyCode,
       value: totalPrice,
-      items: lineItems.map((item) => ({
-        item_id: item.variant?.sku,
-        item_name: item.variant?.product?.title || item.variant?.title,
-        item_brand: gtmParams?.brand || "",
-        item_category: item.variant?.product?.productType || "",
-        item_variant: item.variant?.title,
-        price: item.variant?.compareAtPrice?.amount ?? item.variant?.price?.amount,
-        quantity: item.quantity || 1
-      })),
+      items: lineItems.map((item) => {
+        const imageUrl = item.variant?.image?.url || item.variant?.product?.images?.[0]?.url;
+        const itemCategoryId = item.gtmParams?.item_category_id;
+        const itemVariantId = item.variant?.id ? shopifyCore.atobID(item.variant.id) : void 0;
+        return {
+          item_id: item.variant?.sku,
+          item_name: item.variant?.product?.title || item.variant?.title,
+          item_brand: gtmParams?.brand || "",
+          item_category: item.variant?.product?.productType || "",
+          item_variant: item.variant?.title,
+          price: item.variant?.compareAtPrice?.amount ?? item.variant?.price?.amount,
+          quantity: item.quantity || 1,
+          ...imageUrl && { image_url: imageUrl },
+          ...itemCategoryId !== void 0 && { item_category_id: itemCategoryId },
+          ...itemVariantId && { item_variant_id: itemVariantId }
+        };
+      }),
       ...gtmParams?.ga4Params
     }
   });
 };
+function waitForGtagReady(timeout = 1e4) {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    function check() {
+      if (typeof window !== "undefined" && typeof window.gtag !== "undefined") {
+        resolve();
+      } else if (Date.now() - start > timeout) {
+        reject(new Error("GA4 gtag not loaded"));
+      } else {
+        setTimeout(check, 50);
+      }
+    }
+    check();
+  });
+}
+var getGA4Data = async (measurementId = "G-R0BRMRK4CY") => {
+  try {
+    await waitForGtagReady();
+    const timeoutPromise = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ clientId: "", sessionId: "" });
+      }, 300);
+    });
+    const dataPromise = new Promise((resolve) => {
+      if (!window.gtag) {
+        resolve({ clientId: "", sessionId: "" });
+        return;
+      }
+      window.gtag("get", measurementId, "client_id", (clientId) => {
+        window.gtag("get", measurementId, "session_id", (sessionId) => {
+          resolve({
+            clientId: clientId || "",
+            sessionId: sessionId || ""
+          });
+        });
+      });
+    });
+    return Promise.race([dataPromise, timeoutPromise]);
+  } catch (error) {
+    console.error("Failed to get GA4 data:", error);
+    return {
+      clientId: "",
+      sessionId: ""
+    };
+  }
+};
 
 // src/tracking/fbq.ts
 var trackAddToCartFBQ = ({ lineItems = [] }) => {
@@ -1028,16 +1090,155 @@ var getLinesWithAttributes = ({
     return functionLine;
   });
 };
+function useRemoveCartLines(options) {
+  const { client, locale, cartCookieAdapter } = useShopify();
+  const { mutateCart, metafieldIdentifiers } = useCartContext();
+  const removeLines = react.useCallback(
+    async (_key, { arg }) => {
+      const { autoRemoveInvalidCodes = true, onCodesRemoved, cartId, lineIds } = arg;
+      let updatedCart = await shopifySdk.removeCartLines(client, {
+        cartId,
+        lineIds,
+        metafieldIdentifiers,
+        cookieAdapter: cartCookieAdapter
+      });
+      if (updatedCart && autoRemoveInvalidCodes) {
+        const unApplicableCodes = updatedCart.discountCodes.filter((item) => !item.applicable).map((item) => item.code);
+        if (unApplicableCodes.length > 0) {
+          if (onCodesRemoved) {
+            const handledCart = await onCodesRemoved(updatedCart, unApplicableCodes);
+            if (handledCart) {
+              updatedCart = handledCart;
+            }
+          } else {
+            updatedCart = await shopifySdk.updateCartCodes(client, {
+              cartId: updatedCart.id,
+              discountCodes: updatedCart.discountCodes.filter((item) => item.applicable).map((item) => item.code),
+              metafieldIdentifiers,
+              cookieAdapter: cartCookieAdapter
+            }) || updatedCart;
+          }
+        }
+      }
+      if (updatedCart) {
+        mutateCart(updatedCart);
+      }
+      return updatedCart;
+    },
+    [client, locale, cartCookieAdapter, mutateCart, metafieldIdentifiers]
+  );
+  return useSWRMutation__default.default("remove-cart-lines", removeLines, options);
+}
+
+// src/hooks/cart/feature/use-auto-remove-free-gifts.ts
+function useAutoRemoveFreeGifts(options = {}) {
+  const {
+    removeFunctionGifts = true,
+    removeScriptGifts = true,
+    isGiftLineItem
+  } = options;
+  const [isRemoving, setIsRemoving] = react.useState(false);
+  const { cart } = useCartContext();
+  const { trigger: removeCartLines2 } = useRemoveCartLines();
+  const giftsToRemove = react.useMemo(() => {
+    if (!cart?.lineItems) {
+      return [];
+    }
+    return cart.lineItems.filter((item) => {
+      if (removeFunctionGifts) {
+        const functionAttr = item.customAttributes?.find(
+          (attr) => attr.key === "_discounts_function_env"
+        )?.value;
+        if (functionAttr) {
+          try {
+            const functionAttrObj = JSON.parse(functionAttr);
+            if (functionAttrObj.is_gift && functionAttrObj.rule_id && functionAttrObj.spend_sum_money) {
+              return true;
+            }
+          } catch (error) {
+            console.error("Failed to parse _discounts_function_env:", error);
+          }
+        }
+      }
+      if (removeScriptGifts) {
+        const scriptGiftAttr = item.customAttributes?.find(
+          (attr) => attr.key === "_giveaway_gradient_gifts"
+        );
+        if (scriptGiftAttr) {
+          return true;
+        }
+      }
+      if (isGiftLineItem && isGiftLineItem(item)) {
+        return true;
+      }
+      return false;
+    });
+  }, [cart, removeFunctionGifts, removeScriptGifts, isGiftLineItem]);
+  react.useEffect(() => {
+    if (isRemoving || giftsToRemove.length === 0) {
+      return;
+    }
+    const performRemoval = async () => {
+      setIsRemoving(true);
+      try {
+        await removeCartLines2({
+          lineIds: giftsToRemove.map((item) => item.id)
+        });
+      } catch (error) {
+        console.error("Failed to remove free gifts:", error);
+      } finally {
+        setIsRemoving(false);
+      }
+    };
+    performRemoval();
+  }, [
+    isRemoving,
+    giftsToRemove,
+    removeCartLines2
+  ]);
+  return {
+    isRemoving
+  };
+}
+function isFunctionGift(line) {
+  const functionAttr = line.customAttributes?.find(
+    (attr) => attr.key === "_discounts_function_env"
+  )?.value;
+  if (!functionAttr) {
+    return false;
+  }
+  try {
+    const functionAttrObj = JSON.parse(functionAttr);
+    return Boolean(
+      functionAttrObj.is_gift && functionAttrObj.rule_id && functionAttrObj.spend_sum_money
+    );
+  } catch {
+    return false;
+  }
+}
+function isScriptGift(line) {
+  return line.customAttributes?.some(
+    (attr) => attr.key === "_giveaway_gradient_gifts"
+  ) ?? false;
+}
+function isBuyGetGift(line) {
+  return line.customAttributes?.some(
+    (attr) => attr.key === "_freegift_related_handlesku"
+  ) ?? false;
+}
+function isAnyGift(line) {
+  return isFunctionGift(line) || isScriptGift(line) || isBuyGetGift(line);
+}
 function useCalcGiftsFromLines({
   lines,
   customer,
   scriptGiveawayKey = CUSTOMER_SCRIPT_GIFT_KEY
 }) {
   const { locale } = useShopify();
-  const { cart, autoFreeGiftConfig, gradientGiftsConfig } = useCartContext();
-  const functionGift = useCalcAutoFreeGift(cart, autoFreeGiftConfig || [], customer, lines);
+  const { cart, functionAutoFreeGiftConfig, scriptAutoFreeGiftConfig } = useCartContext();
+  const functionGift = useCalcAutoFreeGift(cart, functionAutoFreeGiftConfig || [], customer, lines);
   const scriptGift = useScriptAutoFreeGift({
-    campaign: gradientGiftsConfig || null,
+    campaign: scriptAutoFreeGiftConfig,
     _giveaway: scriptGiveawayKey,
     cart,
     locale,
@@ -1072,7 +1273,9 @@ function useCalcGiftsFromLines({
       const variants = product?.variants;
       const variant = Array.isArray(variants) ? variants.find((v) => v.sku === item.sku) : void 0;
       if (!variant) {
-        console.warn(`Script gift: Variant not found for handle=${item.handle}, sku=${item.sku}`);
+        console.warn(
+          `Script gift: Variant not found for handle=${item.handle}, sku=${item.sku}`
+        );
         return null;
       }
       return {
@@ -1215,6 +1418,19 @@ var getReferralAttributes = () => {
   }
   return [];
 };
+var getOperatingSystem = () => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return "Unknown";
+  }
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+    return "IOS";
+  }
+  if (/android/i.test(userAgent)) {
+    return "Android";
+  }
+  return "Unknown";
+};
 var getUserType = (customer) => {
   let userInfo = Cookies5__default.default.get("userInfo");
   if (userInfo) {
@@ -1236,12 +1452,42 @@ var getUserType = (customer) => {
   }
   return "new_user_login";
 };
-function getCartAttributes({
+function getGA4Attributes(ga4Data) {
+  if (!ga4Data?.clientId && !ga4Data?.sessionId) {
+    return [];
+  }
+  const attributes = [];
+  if (ga4Data.clientId) {
+    attributes.push({
+      key: "_ga4_client_id",
+      value: ga4Data.clientId
+    });
+  }
+  if (ga4Data.sessionId) {
+    attributes.push({
+      key: "_ga4_session_id",
+      value: ga4Data.sessionId
+    });
+  }
+  return attributes;
+}
+async function getGA4AttributesAsync() {
+  try {
+    const ga4Data = await getGA4Data();
+    return getGA4Attributes(ga4Data);
+  } catch (error) {
+    console.error("Failed to get GA4 attributes:", error);
+    return [];
+  }
+}
+function getCartBasicAttributes({
   profile,
   customer,
   cart,
   memberType,
-  currentUrl = ""
+  currentUrl = "",
+  appContext,
+  buyPath
 }) {
   const userType = getUserType(customer);
   const memberAttributes = [
@@ -1268,12 +1514,10 @@ function getCartAttributes({
       value: "1"
     });
   }
-  const discountCodes = cart?.discountCodes.map((item) => item.code).filter((code) => code) || [];
   const functionAttributes = [
     {
       key: CUSTOMER_ATTRIBUTE_KEY,
       value: JSON.stringify({
-        discount_code: discountCodes,
         user_tags: customer?.tags || []
       })
     }
@@ -1281,26 +1525,38 @@ function getCartAttributes({
   const presellAttributes = [
     {
       key: "_presale",
-      value: cart?.lineItems.some((item) => item?.variant?.metafields?.presell === "presell")
+      value: cart?.lineItems?.some((item) => item?.variant?.metafields?.presell === "presell")
     }
   ];
   const weightAttributes = [
     {
       key: "_weight",
-      value: cart?.lineItems.reduce((acc, item) => {
+      value: cart?.lineItems?.reduce((acc, item) => {
         const itemWeight = new Decimal2__default.default(item.variant.weight ?? 0).times(item.quantity);
         return new Decimal2__default.default(acc).plus(itemWeight).toNumber();
       }, 0).toString()
-    },
-    {
-      key: "_app_source_name",
-      value: "dtc"
     }
   ];
   const trackingAttributes = [
     {
       key: "utm_params",
       value: currentUrl
+    },
+    {
+      key: "_app_source_name",
+      value: appContext?.isInApp && appContext?.appName ? appContext.appName : "dtc"
+    },
+    {
+      key: "_operating_system",
+      value: getOperatingSystem()
+    },
+    {
+      key: "_cart_id",
+      value: cart?.id
+    },
+    {
+      key: "_buy_path",
+      value: buyPath
     }
   ];
   const commonAttributes = [
@@ -1320,21 +1576,41 @@ var useCartAttributes = ({
   profile,
   customer,
   cart,
-  memberType
+  memberType,
+  appContext,
+  buyPath
 }) => {
   const [currentUrl, setCurrentUrl] = react.useState("");
+  const [ga4Data, setGa4Data] = react.useState(null);
   react.useEffect(() => {
     setCurrentUrl(window.location.href);
   }, []);
+  react.useEffect(() => {
+    let isMounted = true;
+    getGA4Data().then((data) => {
+      if (isMounted) {
+        setGa4Data(data);
+      }
+    }).catch((error) => {
+      console.error("Failed to get GA4 data in useCartAttributes:", error);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
   const attributes = react.useMemo(() => {
-    return getCartAttributes({
+    const basicAttributes = getCartBasicAttributes({
       profile,
       customer,
       cart,
       memberType,
-      currentUrl
+      currentUrl,
+      appContext,
+      buyPath
     });
-  }, [profile, customer, cart, memberType, currentUrl]);
+    const ga4Attributes = getGA4Attributes(ga4Data);
+    return [...basicAttributes, ...ga4Attributes];
+  }, [profile, customer, cart, memberType, currentUrl, appContext, buyPath, ga4Data]);
   return react.useMemo(
     () => ({
       attributes
@@ -1397,12 +1673,9 @@ var useUpdateLineCodeAmountAttributes = ({
       const codeDiscount = line.discountAllocations?.find(
         (allocation) => mainProductDiscountCodes?.includes(allocation.code)
       );
-      const hasFunctionEnvAttribute = line.customAttributes?.find(
-        (attr) => attr.key === CUSTOMER_ATTRIBUTE_KEY
-      );
       const functionEnvValue = getDiscountEnvAttributeValue(line.customAttributes);
       const hasSameFunctionEnvAttribute = Number(functionEnvValue.discounted_amount) === Number(line.totalAmount);
-      if (!hasSameFunctionEnvAttribute && hasFunctionEnvAttribute && !functionEnvValue.is_gift) {
+      if (!hasSameFunctionEnvAttribute && !functionEnvValue.is_gift) {
         attrNeedUpdate.push({
           key: CUSTOMER_ATTRIBUTE_KEY,
           value: JSON.stringify({
@@ -1823,47 +2096,6 @@ var usePlusMemberCheckoutCustomAttributes = ({
     return checkoutCustomAttributes;
   }, [profile, selectedShippingMethod, selectedPlusMemberMode, isPresaleContains]);
 };
-function useRemoveCartLines(options) {
-  const { client, locale, cartCookieAdapter } = useShopify();
-  const { mutateCart, metafieldIdentifiers } = useCartContext();
-  const removeLines = react.useCallback(
-    async (_key, { arg }) => {
-      const { autoRemoveInvalidCodes = true, onCodesRemoved, cartId, lineIds } = arg;
-      let updatedCart = await shopifySdk.removeCartLines(client, {
-        cartId,
-        lineIds,
-        metafieldIdentifiers,
-        cookieAdapter: cartCookieAdapter
-      });
-      if (updatedCart && autoRemoveInvalidCodes) {
-        const unApplicableCodes = updatedCart.discountCodes.filter((item) => !item.applicable).map((item) => item.code);
-        if (unApplicableCodes.length > 0) {
-          if (onCodesRemoved) {
-            const handledCart = await onCodesRemoved(updatedCart, unApplicableCodes);
-            if (handledCart) {
-              updatedCart = handledCart;
-            }
-          } else {
-            updatedCart = await shopifySdk.updateCartCodes(client, {
-              cartId: updatedCart.id,
-              discountCodes: updatedCart.discountCodes.filter((item) => item.applicable).map((item) => item.code),
-              metafieldIdentifiers,
-              cookieAdapter: cartCookieAdapter
-            }) || updatedCart;
-          }
-        }
-      }
-      if (updatedCart) {
-        mutateCart(updatedCart);
-      }
-      return updatedCart;
-    },
-    [client, locale, cartCookieAdapter, mutateCart, metafieldIdentifiers]
-  );
-  return useSWRMutation__default.default("remove-cart-lines", removeLines, options);
-}
-
-// src/hooks/member/plus/use-auto-remove-plus-member-in-cart.ts
 function useAutoRemovePlusMemberInCart({
   cart,
   profile,
@@ -2078,7 +2310,8 @@ function useAddToCart({ withTrack = true } = {}, swrOptions) {
     profile,
     customer,
     cart,
-    memberType: hasPlusMember ? "2" : String(profile?.memberType ?? 0)
+    memberType: hasPlusMember ? "2" : String(profile?.memberType ?? 0),
+    buyPath: "hasCart"
   });
   const addToCart = react.useCallback(
     async (_key, { arg }) => {
@@ -2251,7 +2484,7 @@ function useUpdateBuyerIdentity({
 }
 function useBuyNow({ withTrack = true } = {}, swrOptions) {
   const { client, config, locale, cartCookieAdapter, userAdapter } = useShopify();
-  const { profile, customer, memberSetting } = useCartContext();
+  const { profile, customer, memberSetting, appContext } = useCartContext();
   const isLoggedIn = userAdapter?.isLoggedIn || false;
   const buyNow = react.useCallback(
     async (_key, { arg }) => {
@@ -2273,12 +2506,6 @@ function useBuyNow({ withTrack = true } = {}, swrOptions) {
         lines: lineItems
       });
       const memberType = hasPlusMember ? "2" : String(profile?.memberType ?? 0);
-      const cartAttributes = getCartAttributes({
-        profile,
-        customer,
-        memberType,
-        currentUrl: window.location.href
-      });
       const linesWithFunctionAttributes = getLinesWithAttributes({
         lineItems
       });
@@ -2291,13 +2518,23 @@ function useBuyNow({ withTrack = true } = {}, swrOptions) {
       if (lines.length === 0) {
         return;
       }
+      const basicCartAttributes = getCartBasicAttributes({
+        profile,
+        customer,
+        memberType,
+        cart: { lineItems },
+        currentUrl: window.location.href,
+        appContext,
+        buyPath: "buyNow"
+      });
+      const ga4Attributes = await getGA4AttributesAsync();
       const resultCart = await shopifySdk.createCart(client, {
         lines,
         metafieldIdentifiers,
         cookieAdapter: cartCookieAdapter,
         buyerIdentity,
         discountCodes,
-        customAttributes: [...cartAttributes, ...customAttributes || []]
+        customAttributes: [...basicCartAttributes, ...ga4Attributes, ...customAttributes || []]
       });
       if (!resultCart) {
         throw new Error("Failed to create cart for buy now");
@@ -2322,7 +2559,17 @@ function useBuyNow({ withTrack = true } = {}, swrOptions) {
       }
       return resultCart;
     },
-    [client, locale, isLoggedIn, cartCookieAdapter, withTrack, customer, profile, memberSetting]
+    [
+      client,
+      locale,
+      isLoggedIn,
+      cartCookieAdapter,
+      withTrack,
+      customer,
+      profile,
+      memberSetting,
+      appContext
+    ]
   );
   return useSWRMutation__default.default("buy-now", buyNow, swrOptions);
 }
@@ -3141,14 +3388,21 @@ exports.defaultSWRMutationConfiguration = defaultSWRMutationConfiguration;
 exports.formatFunctionAutoFreeGift = formatFunctionAutoFreeGift;
 exports.formatScriptAutoFreeGift = formatScriptAutoFreeGift;
 exports.getCachedGeoLocation = getCachedGeoLocation;
-exports.getCartAttributes = getCartAttributes;
+exports.getCartBasicAttributes = getCartBasicAttributes;
 exports.getDiscountEnvAttributeValue = getDiscountEnvAttributeValue;
+exports.getGA4Attributes = getGA4Attributes;
+exports.getGA4AttributesAsync = getGA4AttributesAsync;
 exports.getMatchedMainProductSubTotal = getMatchedMainProductSubTotal;
+exports.getOperatingSystem = getOperatingSystem;
 exports.getQuery = getQuery;
 exports.getReferralAttributes = getReferralAttributes;
 exports.getUserType = getUserType;
 exports.hasPlusMemberInCart = hasPlusMemberInCart;
 exports.hasPlusMemberInLines = hasPlusMemberInLines;
+exports.isAnyGift = isAnyGift;
+exports.isBuyGetGift = isBuyGetGift;
+exports.isFunctionGift = isFunctionGift;
+exports.isScriptGift = isScriptGift;
 exports.normalizeAddToCartLines = normalizeAddToCartLines;
 exports.preCheck = preCheck;
 exports.safeParse = safeParse;
@@ -3161,6 +3415,7 @@ exports.useApplyCartCodes = useApplyCartCodes;
 exports.useArticle = useArticle;
 exports.useArticles = useArticles;
 exports.useArticlesInBlog = useArticlesInBlog;
+exports.useAutoRemoveFreeGifts = useAutoRemoveFreeGifts;
 exports.useAutoRemovePlusMemberInCart = useAutoRemovePlusMemberInCart;
 exports.useAvailableDeliveryCoupon = useAvailableDeliveryCoupon;
 exports.useBlog = useBlog;