add docs for customer privacy API

Author: brianshen1990

packages/ui-extensions/docs/surfaces/customer-account/reference/apis/customer-privacy.doc.ts

@@ -0,0 +1,74 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {
+  CUSTOMER_ACCOUNT_STANDARD_API_DEFINITION,
+  REQUIRES_PROTECTED_CUSTOMER_DATA,
+} from '../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Customer Privacy',
+  description:
+    "The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy).",
+  isVisualComponent: false,
+  requires: REQUIRES_PROTECTED_CUSTOMER_DATA,
+  category: 'APIs',
+  type: 'API',
+  definitions: [
+    {
+      title: CUSTOMER_ACCOUNT_STANDARD_API_DEFINITION.title,
+      description: CUSTOMER_ACCOUNT_STANDARD_API_DEFINITION.description,
+      type: 'Docs_Standard_CustomerPrivacyApi',
+    },
+    {
+      title: 'useCustomerPrivacy',
+      description:
+        'Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change.',
+      type: 'UseCustomerPrivacyGeneratedType',
+    },
+  ],
+  defaultExample: {
+    codeblock: {
+      title: 'Read Customer Privacy',
+      tabs: [
+        {
+          code: '../examples/apis/customer-privacy.example.tsx',
+          language: 'jsx',
+          title: 'React',
+        },
+        {
+          code: '../examples/apis/customer-privacy.example.ts',
+          language: 'js',
+          title: 'JavaScript',
+        },
+      ],
+    },
+  },
+  examples: {
+    description: '',
+    examples: [
+      {
+        description: `
+        You can apply changes to customer consent by using the \`applyTrackingConsentChanges\` API.
+        
+> Note: Requires the [\`customer_privacy\` capability](/docs/api/customer-account-ui-extensions/configuration#collect-buyer-consent) to be set to \`true\`.`,
+        codeblock: {
+          title: 'Use a Sheet to manage customer privacy consent',
+          tabs: [
+            {
+              code: '../examples/apis/sheet-consent-banner-with-form.example.tsx',
+              language: 'jsx',
+              title: 'React',
+            },
+            {
+              code: '../examples/apis/sheet-consent-banner-with-form.example.ts',
+              language: 'js',
+              title: 'JavaScript',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  related: [],
+};
+
+export default data;

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/customer-privacy.example.ts

@@ -0,0 +1,45 @@
+import {extension} from '@shopify/ui-extensions/customer-account';
+
+// 1. Choose an extension target
+export default extension(
+  'customer-account.order-status.block.render',
+  (root, {customerPrivacy}) => {
+    const {
+      visitorConsent: {
+        analytics,
+        marketing,
+        preferences,
+        saleOfData,
+      },
+    } = customerPrivacy.current;
+
+    // 2. Use consent values
+    console.log('initialValues');
+    console.log('analytics', analytics);
+    console.log('marketing', marketing);
+    console.log('preferences', preferences);
+    console.log('saleOfData', saleOfData);
+
+    // 3. Update component state when customerPrivacy changes
+    customerPrivacy.subscribe((value) => {
+      if (!value) {
+        return;
+      }
+
+      const {
+        visitorConsent: {
+          analytics,
+          marketing,
+          preferences,
+          saleOfData,
+        },
+      } = value;
+
+      console.log('updatedValues');
+      console.log('analytics', analytics);
+      console.log('marketing', marketing);
+      console.log('preferences', preferences);
+      console.log('saleOfData', saleOfData);
+    });
+  },
+);

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/customer-privacy.example.tsx

@@ -0,0 +1,29 @@
+import {useState} from 'react';
+import {
+  reactExtension,
+  useCustomerPrivacy,
+} from '@shopify/ui-extensions-react/customer-account';
+
+// 1. Choose an extension target
+export default reactExtension(
+  'customer-account.order-status.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  // 2. Subscribe to customer privacy consent values
+  const {
+    visitorConsent: {
+      analytics,
+      marketing,
+      preferences,
+      saleOfData,
+    },
+  } = useCustomerPrivacy();
+
+  // 3. Use consent values
+  console.log('analytics', analytics);
+  console.log('marketing', marketing);
+  console.log('preferences', preferences);
+  console.log('saleOfData', saleOfData);
+}