Merge pull request #2371 from Shopify/checkout-unstable-release

Unstable Release (checkout)

.changeset/breezy-mangos-fry.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+Adds `type` property to `selectedPaymentOption`

packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   reactExtension,
   ConsentCheckbox,

packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/with-consent-phone-field-consent-checkbox.example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   reactExtension,
   BlockStack,

packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/basic-consent-phone-field.example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   reactExtension,
   ConsentPhoneField,

packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/with-consent-checkbox-consent-phone-field.example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   reactExtension,
   BlockStack,

packages/ui-extensions-react/src/surfaces/checkout/components/Select/examples/time-picking-select.example.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   reactExtension,
   Select,

packages/ui-extensions-react/src/surfaces/checkout/hooks/payment-options.ts

@@ -1,8 +1,8 @@
 import type {
   RenderExtensionTarget,
   PaymentOption,
+  SelectedPaymentOption,
 } from '@shopify/ui-extensions/checkout';
-import {useMemo} from 'react';
 
 import {ExtensionHasNoMethodError} from '../errors';
 
@@ -32,34 +32,15 @@ export function useAvailablePaymentOptions<
  */
 export function useSelectedPaymentOptions<
   Target extends RenderExtensionTarget = RenderExtensionTarget,
->(): PaymentOption[] {
+>(): SelectedPaymentOption[] {
   const api = useApi<Target>();
 
-  if (
-    !('selectedPaymentOptions' in api) ||
-    !('availablePaymentOptions' in api)
-  ) {
-    throw new ExtensionHasNoMethodError(
-      'selectedPaymentOptions',
-      api.extension.target,
-    );
+  if ('selectedPaymentOptions' in api) {
+    return useSubscription(api.selectedPaymentOptions);
   }
 
-  const selectedPaymentOptions = useSubscription(api.selectedPaymentOptions);
-  const availablePaymentOptions = useSubscription(api.availablePaymentOptions);
-
-  return useMemo(() => {
-    const availablePaymentOptionsMap: Record<string, PaymentOption> = {};
-
-    for (const option of availablePaymentOptions) {
-      availablePaymentOptionsMap[option.handle] = option;
-    }
-
-    return selectedPaymentOptions.map((paymentOption) => {
-      return {
-        handle: paymentOption.handle,
-        type: availablePaymentOptionsMap[paymentOption.handle]?.type,
-      };
-    });
-  }, [availablePaymentOptions, selectedPaymentOptions]);
+  throw new ExtensionHasNoMethodError(
+    'selectedPaymentOptions',
+    api.extension.target,
+  );
 }

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {createRender} from '@quilted/react-testing';
 import type {
   ApiForExtension,

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/payment-options.test.tsx

@@ -40,10 +40,10 @@ describe('Payment Methods API hooks', () => {
       ];
 
       const selectedPaymentOptionHandles: SelectedPaymentOption[] = [
-        {handle: 'bogus'},
+        {handle: 'bogus', type: 'other'},
       ];
 
-      const selectedPaymentOptions: PaymentOption[] = [
+      const selectedPaymentOptions: SelectedPaymentOption[] = [
         {handle: 'bogus', type: 'other'},
       ];
 
@@ -70,11 +70,11 @@ describe('Payment Methods API hooks', () => {
       ];
 
       const selectedPaymentOptionHandles: SelectedPaymentOption[] = [
-        {handle: 'bogus'},
-        {handle: 'direct'},
+        {handle: 'bogus', type: 'other'},
+        {handle: 'direct', type: 'creditCard'},
       ];
 
-      const selectedPaymentOptions: PaymentOption[] = [
+      const selectedPaymentOptions: SelectedPaymentOption[] = [
         {handle: 'bogus', type: 'other'},
         {handle: 'direct', type: 'creditCard'},
       ];

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/translate.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {useTranslate} from '../translate';
 
 import {mount} from './mount';

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["./**/*"],
   "exclude": []

packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts

@@ -1,6 +1,7 @@
 import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 import {
+  getExample,
   getLinksByTag,
   STANDARD_API_PROPERTIES_DESCRIPTION,
 } from '../helper.docs';
@@ -24,6 +25,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'UseStorageGeneratedType',
     },
   ],
+  defaultExample: getExample('storage', ['jsx']),
   related: getLinksByTag('apis'),
 };
 

packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {
   Banner,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import {
   Banner,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/customer-privacy/default.example.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {
   reactExtension,
   useCustomerPrivacy,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.footer.render-after/default.example.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   BlockStack,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.header.render-after/default.example.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   BlockStack,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   BlockStack,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.header.render-after/default.example.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   BlockStack,
   reactExtension,

packages/ui-extensions/docs/surfaces/checkout/reference/examples/storage.example.tsx

@@ -0,0 +1,45 @@
+import {useEffect, useState} from 'react';
+import {
+  reactExtension,
+  Checkbox,
+  useApi,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  const {storage} = useApi();
+  const [tosConsent, setTosConsent] =
+    useState(false);
+
+  useEffect(() => {
+    async function readFromStorage() {
+      const tosConsent = await storage.read(
+        'tos-consent',
+      );
+
+      setTosConsent(Boolean(tosConsent));
+    }
+
+    readFromStorage();
+  }, [storage]);
+
+  async function cacheConsent(value: boolean) {
+    setTosConsent(value);
+    await storage.write('tos-consent', value);
+  }
+
+  return (
+    <Checkbox
+      id="tos"
+      name="tos"
+      onChange={cacheConsent}
+      checked={tosConsent}
+    >
+      I agree with the terms of service
+    </Checkbox>
+  );
+}

packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts

@@ -456,6 +456,13 @@ The contents of the token are signed using your shared app secret.  The optional
         ],
       },
     },
+    storage: {
+      description: '',
+      codeblock: {
+        title: 'Storage',
+        tabs: getExtensionCodeTabs('storage'),
+      },
+    },
     'delivery-groups': {
       description: '',
       codeblock: {

packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts

@@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = {
   name: 'purchase.thank-you.cart-line-item.render-after',
   description: `A static extension target that renders on every line item, inside the details under the line item properties element.
 
-    > Caution:
-    > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice.
-    `,
+  > Caution:
+  > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice.
+  `,
   defaultExample: getExample(
     'purchase.thank-you.cart-line-item.render-after/default',
     ['jsx', 'js'],

packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts

@@ -1167,17 +1167,7 @@ export interface PaymentOption {
   handle: string;
 }
 
-/**
- * A payment option selected by the buyer.
- */
-export interface SelectedPaymentOption {
-  /**
-   * The unique handle referencing `PaymentOption.handle`.
-   *
-   * Refer to [availablePaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/apis/payments#standardapi-propertydetail-availablepaymentoptions).
-   */
-  handle: string;
-}
+export type SelectedPaymentOption = PaymentOption;
 
 export interface CartDiscountCode {
   /**