simplify useCustomerPrivacy internals and rework onReady logic

Shopify · Aug 23, 2024 · 536e1e7 · 536e1e7
1 parent 5b93804
commit 536e1e7
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 164 deletions.
diff --git a/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx b/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx
@@ -6,8 +6,6 @@ import {
   createContext,
   useContext,
   useRef,
-  useReducer,
-  useCallback,
 } from 'react';
 import {type CartReturn} from '../cart/queries/cart-types';
 import {
@@ -122,8 +120,8 @@ export const defaultAnalyticsContext: AnalyticsContextValue = {
   shop: null,
   subscribe: () => {},
   register: () => ({ready: () => {}}),
-  privacyBanner: null,
   customerPrivacy: null,
+  privacyBanner: null,
 };
 
 const AnalyticsContext = createContext<AnalyticsContextValue>(
@@ -298,16 +296,13 @@ function AnalyticsProvider({
 }: AnalyticsProviderProps): JSX.Element {
   const listenerSet = useRef(false);
   const {shop} = useShopAnalytics(shopProp);
-  const [consentLoaded, setConsentLoaded] = useState(
+  const [analyticsLoaded, setAnalyticsLoaded] = useState(
     customCanTrack ? true : false,
   );
   const [carts, setCarts] = useState<Carts>({cart: null, prevCart: null});
   const [canTrack, setCanTrack] = useState<() => boolean>(
     customCanTrack ? () => customCanTrack : () => shopifyCanTrack,
   );
-  const privacyBanner = getPrivacyBanner();
-  const customerPrivacy = getCustomerPrivacy();
-  const forceUpdate = useReducer(() => ({}), {})[1] as () => void;
 
   if (!!shop) {
     // If mock shop is used, log error instead of throwing
@@ -339,6 +334,10 @@ function AnalyticsProvider({
       if (!consent?.language) {
         consent.language = 'EN';
       }
+
+      if (consent.withPrivacyBanner === undefined) {
+        consent.withPrivacyBanner = true;
+      }
     }
   }
 
@@ -351,14 +350,12 @@ function AnalyticsProvider({
       shop,
       subscribe,
       register,
-      customerPrivacy,
-      privacyBanner,
+      customerPrivacy: getCustomerPrivacy(),
+      privacyBanner: getPrivacyBanner()
     };
   }, [
-    consentLoaded,
-    canTrack(),
+    analyticsLoaded,
     canTrack,
-    JSON.stringify(canTrack),
     carts,
     carts.cart?.updatedAt,
     carts.prevCart,
@@ -368,8 +365,8 @@ function AnalyticsProvider({
     shop,
     register,
     JSON.stringify(registers),
-    customerPrivacy,
-    privacyBanner,
+    getCustomerPrivacy,
+    getPrivacyBanner,
   ]);
 
   return (
@@ -384,7 +381,7 @@ function AnalyticsProvider({
           consent={consent}
           onReady={() => {
             listenerSet.current = true;
-            setConsentLoaded(true);
+            setAnalyticsLoaded(true);
             setCanTrack(() => shopifyCanTrack);
           }}
           domain={cookieDomain}

diff --git a/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx b/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx
@@ -64,41 +64,27 @@ export function ShopifyAnalytics({
   const [shopifyReady, setShopifyReady] = useState(false);
   const [privacyReady, setPrivacyReady] = useState(false);
   const init = useRef(false);
-  const {ready: shopifyAnalyticsReady} = register('Internal_Shopify_Analytics');
-  const {ready: customerPrivacyReady} = register(
-    'Internal_Shopify_CustomerPrivacy',
-  );
-  const analyticsReady = () => {
-    shopifyReady && privacyReady && onReady();
-  };
-
-  const setCustomerPrivacyReady = () => {
-    setPrivacyReady(true);
-    customerPrivacyReady();
-    analyticsReady();
-  };
-
   const {checkoutDomain, storefrontAccessToken, language} = consent;
+  const {ready: shopifyAnalyticsReady} = register(
+    'Internal_Shopify_Analytics',
+  );
 
+  // load customer privacy and (optionally) the privacy banner APIs
   useCustomerPrivacy({
     ...consent,
     locale: language,
     checkoutDomain: !checkoutDomain ? 'mock.shop' : checkoutDomain,
     storefrontAccessToken: !storefrontAccessToken
       ? 'abcdefghijklmnopqrstuvwxyz123456'
       : storefrontAccessToken,
-    onVisitorConsentCollected: setCustomerPrivacyReady,
-    onReady: () => {
-      // Set customer privacy ready 3 seconds after load
-      setTimeout(setCustomerPrivacyReady, 3000);
-    },
+    onVisitorConsentCollected: () => setPrivacyReady(true),
+    onReady: () => setPrivacyReady(true)
   });
 
-  useShopifyCookies({
-    hasUserConsent: shopifyReady && privacyReady ? canTrack() : true,
-    domain,
-    checkoutDomain,
-  });
+  const hasUserConsent = privacyReady ? canTrack() : false;
+
+  // set up shopify_Y and shopify_S cookies
+  useShopifyCookies({ hasUserConsent, domain, checkoutDomain });
 
   useEffect(() => {
     if (init.current) return;
@@ -113,10 +99,15 @@ export function ShopifyAnalytics({
     // Cart
     subscribe(AnalyticsEvent.PRODUCT_ADD_TO_CART, productAddedToCartHandler);
 
-    shopifyAnalyticsReady();
     setShopifyReady(true);
-    analyticsReady();
-  }, [subscribe, shopifyAnalyticsReady]);
+  }, [subscribe]);
+
+  useEffect(() => {
+    if (shopifyReady && privacyReady) {
+      shopifyAnalyticsReady();
+      onReady();
+    }
+  }, [shopifyReady, privacyReady, onReady]);
 
   return null;
 }