diff --git a/.changeset/olive-fishes-reflect.md b/.changeset/olive-fishes-reflect.md new file mode 100644 index 0000000000..ae9d78bce3 --- /dev/null +++ b/.changeset/olive-fishes-reflect.md @@ -0,0 +1,21 @@ +--- +'skeleton': patch +'@shopify/hydrogen': patch +--- + +Change `` to set up Customer Privacy without the Shopify's cookie banner by default. + +# Breaking Change + +If you are using `` in your app, you need to add `withPrivacyBanner={true}` to the `` component if you are using the Shopify's cookie banner. Without this props, the Shopify cookie banner will not appear. + +```diff + + ... + +``` diff --git a/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx b/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx index 91ad25035b..29846602cc 100644 --- a/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx +++ b/packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx @@ -336,7 +336,7 @@ function AnalyticsProvider({ } if (consent.withPrivacyBanner === undefined) { - consent.withPrivacyBanner = true; + consent.withPrivacyBanner = false; } } } diff --git a/packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx b/packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx index 01461ccde5..3df4738f7e 100644 --- a/packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx +++ b/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 diff --git a/packages/hydrogen/src/customer-privacy/useCustomerPrivacy.test.tsx b/packages/hydrogen/src/customer-privacy/useCustomerPrivacy.test.tsx index 8f22a500e4..53f919f444 100644 --- a/packages/hydrogen/src/customer-privacy/useCustomerPrivacy.test.tsx +++ b/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,18 +43,11 @@ 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'); @@ -61,6 +55,13 @@ describe(`useCustomerPrivacy`, () => { 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 diff --git a/templates/skeleton/app/root.tsx b/templates/skeleton/app/root.tsx index e0f69874db..c741eabed4 100644 --- a/templates/skeleton/app/root.tsx +++ b/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,