Add new TYP target: purchase.thank-you.announcment.render

Author: dnagoda

.changeset/clever-olives-hang.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add Checkout Thank You page announcement extension target

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

@@ -0,0 +1,71 @@
+import {
+  BlockStack,
+  Button,
+  InlineStack,
+  Link,
+  Modal,
+  TextField,
+  Text,
+  extension,
+} from '@shopify/ui-extensions/checkout';
+
+export default extension(
+  'purchase.thank-you.announcement.render',
+  (root, {shop}) => {
+    const modalFragment = root.createFragment();
+    modalFragment.appendChild(
+      root.createComponent(
+        Modal,
+        {
+          title:
+            'Tell us about your shopping experience',
+          padding: true,
+        },
+        [
+          root.createComponent(
+            BlockStack,
+            undefined,
+            [
+              root.createComponent(
+                Text,
+                undefined,
+                `We'd love to hear about your shopping experience at ${shop.name}`,
+              ),
+              root.createComponent(TextField, {
+                multiline: 4,
+                label:
+                  'How can we make your shopping experience better?',
+              }),
+              root.createComponent(
+                Button,
+                undefined,
+                'Submit',
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+
+    root.appendChild(
+      root.createComponent(
+        InlineStack,
+        undefined,
+        [
+          root.createComponent(
+            Text,
+            undefined,
+            'Check our latest offers',
+          ),
+          root.createComponent(
+            Link,
+            {
+              overlay: modalFragment,
+            },
+            'Fill out the survey',
+          ),
+        ],
+      ),
+    );
+  },
+);

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

@@ -0,0 +1,51 @@
+import {
+  BlockStack,
+  Button,
+  InlineStack,
+  Link,
+  Modal,
+  reactExtension,
+  TextField,
+  Text,
+  useApi,
+} from '@shopify/ui-extensions-react/checkout';
+
+// 1. Choose an extension target
+export default reactExtension(
+  'purchase.thank-you.announcement.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  // 2. Use the extension API to gather context from the shop
+  const {shop} = useApi();
+
+  // 3. Render a UI
+  return (
+    <InlineStack>
+      <Text>Check our latest offers</Text>
+      <Link
+        overlay={
+          <Modal
+            title="Tell us about your shopping experience"
+            padding
+          >
+            <BlockStack>
+              <Text>
+                We'd love to hear about your
+                shopping experience at {shop.name}
+              </Text>
+              <TextField
+                multiline={4}
+                label="How can we make your shopping experience better?"
+              ></TextField>
+              <Button>Submit</Button>
+            </BlockStack>
+          </Modal>
+        }
+      >
+        Fill out the survey
+      </Link>
+    </InlineStack>
+  );
+}

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

@@ -152,6 +152,7 @@ export function getExamples(
     ...createExample('purchase.thank-you.footer.render-after/default'),
     ...createExample('purchase.checkout.chat.render/default'),
     ...createExample('purchase.thank-you.chat.render/default'),
+    ...createExample('purchase.thank-you.announcement.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.',

packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.announcement.render.doc.ts

@@ -0,0 +1,16 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getExample, getLinksByTag, THANK_YOU_API} from '../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'purchase.thank-you.announcment.render',
+  description: `A static extension target that is rendered on top of the **Thank you page** as a dismissable announcement.`,
+  defaultExample: getExample('purchase.thank-you.announcement.render/default', [
+    'jsx',
+    'js',
+  ]),
+  related: getLinksByTag('targets'),
+  ...THANK_YOU_API,
+};
+
+export default data;

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

@@ -647,6 +647,14 @@ export interface RenderExtensionTargets {
     OrderConfirmationApi & StandardApi<'purchase.thank-you.chat.render'>,
     AllowedComponents<'Chat'>
   >;
+  /**
+   * A static extension target that is rendered on top of the **Thank you page** as a dismissable announcement.
+   */
+  'purchase.thank-you.announcement.render': RenderExtension<
+    OrderConfirmationApi &
+      StandardApi<'purchase.thank-you.announcement.render'>,
+    AnyComponent
+  >;
 }
 
 export interface RunnableExtensionTargets {