Merge pull request #2478 from Shopify/internal-2023-11-update

Internal November 2023 update

Author: vividviolet

.changeset/fuzzy-trainers-work.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+Release a new Chat component, chat.render targets and preloads.chat configuration

.changeset/hot-shirts-clean.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Make POS UI Ext PrintAPI async

.changeset/hot-years-relate.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+POS UI Ext PrintAPI src non-optional

.changeset/shiny-dingos-battle.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': patch
+'@shopify/ui-extensions': patch
+---
+
+Fix RenderExtension interface to support synchronous renders and make the clean up function optional

packages/ui-extensions-react/src/surfaces/checkout/components/Chat/examples/basic-chat.example.tsx

@@ -0,0 +1,16 @@
+import {
+  reactExtension,
+  Chat,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.chat.render',
+  () => <Extension />,
+);
+
+// This component requires the configuration of the `extensions.targeting.preloads.chat` in the extensions configuration file.
+// Its value will be used as the `src` attribute of the Chat component.
+
+function Extension() {
+  return <Chat inlineSize={100} blockSize={50} />;
+}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.chat.render/default.example.ts

@@ -0,0 +1,18 @@
+import {
+  Chat,
+  extension,
+} from '@shopify/ui-extensions/checkout';
+
+// 1. Choose an extension target
+export default extension(
+  'purchase.checkout.chat.render',
+  (root) => {
+    // 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
+    root.appendChild(
+      root.createComponent(Chat, {
+        inlineSize: 100,
+        blockSize: 50,
+      }),
+    );
+  },
+);

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

@@ -0,0 +1,15 @@
+import {
+  Chat,
+  reactExtension,
+} from '@shopify/ui-extensions-react/checkout';
+
+// 1. Choose an extension target
+export default reactExtension(
+  'purchase.checkout.chat.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  // 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
+  return <Chat inlineSize={100} blockSize={50} />;
+}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.chat.render/default.example.ts

@@ -0,0 +1,18 @@
+import {
+  Chat,
+  extension,
+} from '@shopify/ui-extensions/checkout';
+
+// 1. Choose an extension target
+export default extension(
+  'purchase.thank-you.chat.render',
+  (root) => {
+    // 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
+    root.appendChild(
+      root.createComponent(Chat, {
+        inlineSize: 100,
+        blockSize: 50,
+      }),
+    );
+  },
+);

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

@@ -0,0 +1,15 @@
+import {
+  Chat,
+  reactExtension,
+} from '@shopify/ui-extensions-react/checkout';
+
+// 1. Choose an extension target
+export default reactExtension(
+  'purchase.thank-you.chat.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  // 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
+  return <Chat inlineSize={100} blockSize={50} />;
+}

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

@@ -145,6 +145,8 @@ export function getExamples(
     ...createExample('purchase.checkout.footer.render-after/default'),
     ...createExample('purchase.thank-you.header.render-after/default'),
     ...createExample('purchase.thank-you.footer.render-after/default'),
+    ...createExample('purchase.checkout.chat.render/default'),
+    ...createExample('purchase.thank-you.chat.render/default'),
     'analytics-publish': {
       description:
         'You can publish analytics events to the Shopify analytics frameworks and they will be propagated to all web pixels on the page.',