Add localization support for privacy banner + useCustomerPrivacy updates

[juanpprieto]

analytics.mp4

Included on this PR:

1. Adds consent banner localization support to the AnalyticsProvider and useCustomerPrivacy

To enable it simply pass country and language to the consent config returned from the loader

2. Reworks the previously fragile customerPrivacy and privacyBanner onReady logic removing a not ideal 3s setTimeout and relying on Object.defineProperty on the window instead to detect when these SDKs are actually available.

Banner will show when ready instead of after 3 secs.

3. Deprecates a getCustomerPrivacy utility

Now that we have privacyBanner and customerPrivacy returned from both useAnalytics and useCustomerPrivacy we don't need getCustomerPrivacy

4. Adds privacyBanner and customerPrivacy to the useAnalytics and useCustomerPrivacy returns, so users can now use any of these SDK methods programmatically

const {customerPrivacy, privacyBanner} = useAnalytics() // or useCustomerPrivacy(..)

if (privacyBanner) {
  // load the consent banner programmatically
  privacyBanner.loadBanner() 
  // or  
  privacyBanner.loadBanner({ country: "CA", locale: "FR" })
 
  // load preferences banner programmatically
  privacyBanner.showPreferences();
  // or
  privacyBanner.showPreferences({ country: "CA", locale: "FR" })
}

if (customerPrivacy) {
 const analyticsProcessingAllowed = customerPrivacy.analyticsProcessingAllowed()
 // ....
}

Used in the demo videos header buttons.

5. Fixed an issue where tracking was temporarily allowed for a few milliseconds while the consent check was being performed by the customerPrivacy SDK

Tophat instructions:

• Return difference country and language combinations from the root loader consent.
• test the different methods of privacyBanner (showBanner, showPreferences) and customerPrivacy (analyticsProcessingAllowed, setTrackingConsent) returned by useAnalytics and/or useCustomerPrivacy

TODO

• Update existing tests and add new tests for useCustomerPrivacy
• Update docs
• Test snapshot in a 3P consent environment

[shopify]

Oxygen deployed a preview of your juanpprieto/international-privacy-banner branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM
sitemap	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM
classic-remix	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 4, 2024 6:52 PM

Learn more about Hydrogen's GitHub integration.

[juanpprieto]

/snapit

[github-actions]

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20240903172745",
"@shopify/hydrogen": "0.0.0-snapshot-20240903172745",
"@shopify/mini-oxygen": "0.0.0-snapshot-20240903172745",
"@shopify/remix-oxygen": "0.0.0-snapshot-20240903172745"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.

[juanpprieto]

/snapit

[github-actions]

🫰✨ Thanks @juanpprieto! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/cli-hydrogen": "0.0.0-snapshot-20240903233028",
"@shopify/hydrogen": "0.0.0-snapshot-20240903233028",
"@shopify/mini-oxygen": "0.0.0-snapshot-20240903233028",
"@shopify/remix-oxygen": "0.0.0-snapshot-20240903233028"

Create a new project with all the released packages running npm create @shopify/hydrogen@<snapshot_version>
To try a new CLI plugin version, add @shopify/cli-hydrogen as a dependency to your project using the snapshot version.