Bring in latest unstable changes from checkout (#1145)

.changeset/little-sheep-join.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions-react': patch
+---
+
+Allow passing target name to `useApi()` for type inference

.changeset/neat-vans-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add `Extension.target` field for checkout UI extensions to read the current extension target being rendered.

.changeset/odd-craps-eat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions-react': minor
+---
+
+Make `@shopify/ui-extensions` a peer dependency for the React library

.changeset/pink-poets-confess.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Preserve generic type argument for `I18nTranslate` function

.changeset/slimy-timers-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions-react': patch
+---
+
+Allow React extensions to return asynchronous results

.changeset/smart-actors-argue.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': minor
+'@shopify/ui-extensions-react': minor
+---
+
+Add `customer-account` entrypoints for order status page extensions

.changeset/thin-wasps-hide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': major
+---
+
+Update API type names to match new extension target names

.changeset/unlucky-papayas-remember.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': minor
+'@shopify/ui-extensions-react': minor
+---
+
+Add support for new extension target names

packages/ui-extensions-react/README.md

@@ -18,7 +18,9 @@ import {
   TextField,
 } from '@shopify/ui-extensions-react/checkout';
 
-export default reactExtension('Checkout::Dynamic::Render', () => <GiftNote />);
+export default reactExtension('purchase.checkout.block.render', () => (
+  <GiftNote />
+));
 
 function GiftNote() {
   const {i18n, metafields, applyMetafieldChange} = useApi();

packages/ui-extensions-react/src/surfaces/checkout.ts

@@ -39,8 +39,8 @@ export type {
   DisclosureActivatorProps,
   DisclosureOpen,
   DisabledDate,
-  ExtensionPoint,
-  ExtensionPoints,
+  ExtensionTarget,
+  ExtensionTargets,
   Fit,
   GridItemSize,
   I18nTranslate,

packages/ui-extensions-react/src/surfaces/checkout/components/Banner/examples/basic-banner.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, Banner} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Banner,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/BlockLayout/examples/basic-blocklayout.example.tsx

@@ -4,7 +4,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/BlockSpacer/examples/basic-blockspacer.example.tsx

@@ -4,7 +4,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/BlockStack/examples/basic-blockstack.example.tsx

@@ -4,7 +4,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/Button/examples/basic-button.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, Button} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Button,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

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

@@ -1,6 +1,12 @@
-import {reactExtension, Checkbox} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Checkbox,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/Choice/examples/basic-choice.example.tsx

@@ -6,7 +6,10 @@ import {
   InlineStack,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (
@@ -15,7 +18,9 @@ function Extension() {
         name="choice"
         value="first"
         onChange={(value) => {
-          console.log(`onChange event with value: ${value}`);
+          console.log(
+            `onChange event with value: ${value}`,
+          );
         }}
       >
         <BlockStack>
@@ -28,12 +33,18 @@ function Extension() {
         name="choiceMultiple"
         value={['multipleFirst']}
         onChange={(value) => {
-          console.log(`onChange event with value: ${value}`);
+          console.log(
+            `onChange event with value: ${value}`,
+          );
         }}
       >
         <BlockStack>
-          <Choice id="multipleFirst">Gift message</Choice>
-          <Choice id="multipleSecond">Gift wrapping</Choice>
+          <Choice id="multipleFirst">
+            Gift message
+          </Choice>
+          <Choice id="multipleSecond">
+            Gift wrapping
+          </Choice>
         </BlockStack>
       </ChoiceList>
     </InlineStack>

packages/ui-extensions-react/src/surfaces/checkout/components/ChoiceList/examples/basic-choicelist.example.tsx

@@ -6,7 +6,10 @@ import {
   InlineStack,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (
@@ -15,7 +18,9 @@ function Extension() {
         name="choice"
         value="first"
         onChange={(value) => {
-          console.log(`onChange event with value: ${value}`);
+          console.log(
+            `onChange event with value: ${value}`,
+          );
         }}
       >
         <BlockStack>
@@ -28,12 +33,18 @@ function Extension() {
         name="choiceMultiple"
         value={['multipleFirst']}
         onChange={(value) => {
-          console.log(`onChange event with value: ${value}`);
+          console.log(
+            `onChange event with value: ${value}`,
+          );
         }}
       >
         <BlockStack>
-          <Choice id="multipleFirst">Gift message</Choice>
-          <Choice id="multipleSecond">Gift wrapping</Choice>
+          <Choice id="multipleFirst">
+            Gift message
+          </Choice>
+          <Choice id="multipleSecond">
+            Gift wrapping
+          </Choice>
         </BlockStack>
       </ChoiceList>
     </InlineStack>

packages/ui-extensions-react/src/surfaces/checkout/components/DateField/examples/basic-datefield.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, DateField} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  DateField,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return <DateField label="Select a date" />;

packages/ui-extensions-react/src/surfaces/checkout/components/DatePicker/examples/basic-datepicker.example.tsx

@@ -3,7 +3,10 @@ import {
   DatePicker,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return <DatePicker selected="2021-06-01" />;

packages/ui-extensions-react/src/surfaces/checkout/components/Disclosure/examples/basic-disclosure.example.tsx

@@ -5,7 +5,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/Divider/examples/basic-divider.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, Divider} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Divider,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return <Divider />;

packages/ui-extensions-react/src/surfaces/checkout/components/Form/examples/basic-form.example.tsx

@@ -9,12 +9,22 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (
-    <Form onSubmit={() => console.log('onSubmit event')}>
-      <Grid columns={['50%', '50%']} spacing="base">
+    <Form
+      onSubmit={() =>
+        console.log('onSubmit event')
+      }
+    >
+      <Grid
+        columns={['50%', '50%']}
+        spacing="base"
+      >
         <View>
           <TextField label="First name" />
         </View>
@@ -26,7 +36,9 @@ function Extension() {
         </GridItem>
       </Grid>
       <BlockSpacer spacing="base" />
-      <Button accessibilityRole="submit">Submit</Button>
+      <Button accessibilityRole="submit">
+        Submit
+      </Button>
     </Form>
   );
 }

packages/ui-extensions-react/src/surfaces/checkout/components/Grid/examples/basic-grid.example.tsx

@@ -4,7 +4,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/GridItem/examples/basic-griditem.example.tsx

@@ -5,7 +5,10 @@ import {
   View,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/Heading/examples/basic-heading.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, Heading} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Heading,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return <Heading>Store name</Heading>;

packages/ui-extensions-react/src/surfaces/checkout/components/HeadingGroup/examples/basic-headinggroup.example.tsx

@@ -4,7 +4,10 @@ import {
   Heading,
 } from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return (

packages/ui-extensions-react/src/surfaces/checkout/components/Icon/examples/basic-icon.example.tsx

@@ -1,6 +1,12 @@
-import {reactExtension, Icon} from '@shopify/ui-extensions-react/checkout';
+import {
+  reactExtension,
+  Icon,
+} from '@shopify/ui-extensions-react/checkout';
 
-reactExtension('Checkout::Dynamic::Render', () => <Extension />);
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
 
 function Extension() {
   return <Icon source="discount" />;