Make set up cookie banner by default to false (#2588)

.changeset/olive-fishes-reflect.md

@@ -0,0 +1,21 @@
+---
+'skeleton': patch
+'@shopify/hydrogen': patch
+---
+
+Change `<Analytics.Provider>` to set up Customer Privacy without the Shopify's cookie banner by default.
+
+# Breaking Change
+
+If you are using `<Analytics.Provider>` in your app, you need to add `withPrivacyBanner={true}` to the `<AnalyticsProvider>` component if you are using the Shopify's cookie banner. Without this props, the Shopify cookie banner will not appear.
+
+```diff
+  <Analytics.Provider
+    cart={data.cart}
+    shop={data.shop}
+    consent={data.consent}
++    withPrivacyBanner={true}
+  >
+  ...
+</Analytics.Provider>
+```

packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx

@@ -336,7 +336,7 @@ function AnalyticsProvider({
       }
 
       if (consent.withPrivacyBanner === undefined) {
-        consent.withPrivacyBanner = true;
+        consent.withPrivacyBanner = false;
       }
     }
   }

packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx

@@ -127,7 +127,7 @@ function logMissingConfig(fieldName: string) {
 
 export function useCustomerPrivacy(props: CustomerPrivacyApiProps) {
   const {
-    withPrivacyBanner = true,
+    withPrivacyBanner = false,
     onVisitorConsentCollected,
     onReady,
     ...consentConfig

packages/hydrogen/src/customer-privacy/useCustomerPrivacy.test.tsx

@@ -12,7 +12,8 @@ let body: HTMLBodyElement;
 
 const CUSTOMER_PRIVACY_PROPS = {
   checkoutDomain: 'checkout.shopify.com',
-  storefrontAccessToken: 'test-token',
+  storefrontAccessToken: '3b580e70970c4528da70c98e097c2fa0',
+  withPrivacyBanner: true,
 };
 
 describe(`useCustomerPrivacy`, () => {
@@ -42,25 +43,25 @@ describe(`useCustomerPrivacy`, () => {
     document.querySelectorAll('script').forEach((node) => node.remove());
   });
 
-  it('loads the customerPrivacy with privacyBanner script', () => {
-    renderHook(() => useCustomerPrivacy(CUSTOMER_PRIVACY_PROPS));
-    const script = html.querySelector('body script');
-    expect(script).toContainHTML(`src="${CONSENT_API_WITH_BANNER}"`);
-    expect(script).toContainHTML('type="text/javascript"');
-  });
-
-  it('loads just the customerPrivacy script', () => {
+  it('By default, loads just the customerPrivacy script', () => {
     renderHook(() =>
       useCustomerPrivacy({
-        ...CUSTOMER_PRIVACY_PROPS,
-        withPrivacyBanner: false,
+        checkoutDomain: 'checkout.shopify.com',
+        storefrontAccessToken: '3b580e70970c4528da70c98e097c2fa0',
       }),
     );
     const script = html.querySelector('body script');
     expect(script).toContainHTML(`src="${CONSENT_API}"`);
     expect(script).toContainHTML('type="text/javascript"');
   });
 
+  it('loads the customerPrivacy with privacyBanner script', () => {
+    renderHook(() => useCustomerPrivacy(CUSTOMER_PRIVACY_PROPS));
+    const script = html.querySelector('body script');
+    expect(script).toContainHTML(`src="${CONSENT_API_WITH_BANNER}"`);
+    expect(script).toContainHTML('type="text/javascript"');
+  });
+
   it('returns just customerPrivacy initiallly as null', () => {
     let cp;
     renderHook(() => {
@@ -75,10 +76,7 @@ describe(`useCustomerPrivacy`, () => {
   it('returns both customerPrivacy and privacyBanner initially as null', async () => {
     let cp;
     renderHook(() => {
-      cp = useCustomerPrivacy({
-        ...CUSTOMER_PRIVACY_PROPS,
-        withPrivacyBanner: true,
-      });
+      cp = useCustomerPrivacy(CUSTOMER_PRIVACY_PROPS);
     });
 
     // Wait until idle

templates/skeleton/app/root.tsx

@@ -73,7 +73,7 @@ export async function loader(args: LoaderFunctionArgs) {
     consent: {
       checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
       storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      withPrivacyBanner: true,
+      withPrivacyBanner: false,
       // localize the privacy banner
       country: args.context.storefront.i18n.country,
       language: args.context.storefront.i18n.language,