Unstable Release (checkout)

.changeset/chatty-mugs-appear.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': minor
+'@shopify/ui-extensions': minor
+---
+
+New UI component `ClipboardItem`. `activateTarget` and `activateAction` properties added to action components.

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

@@ -123,6 +123,9 @@ export type {ChoiceProps} from './checkout/components/Choice/Choice';
 export {ChoiceList} from './checkout/components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './checkout/components/ChoiceList/ChoiceList';
 
+export {ClipboardItem} from './checkout/components/ClipboardItem/ClipboardItem';
+export type {ClipboardItemProps} from './checkout/components/ClipboardItem/ClipboardItem';
+
 export {DateField} from './checkout/components/DateField/DateField';
 export type {DateFieldProps} from './checkout/components/DateField/DateField';
 

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

@@ -0,0 +1,9 @@
+import {ClipboardItem as BaseClipboardItem} from '@shopify/ui-extensions/checkout';
+import {createRemoteReactComponent} from '@remote-ui/react';
+import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
+
+export type ClipboardItemProps = ReactPropsFromRemoteComponentType<
+  typeof BaseClipboardItem
+>;
+
+export const ClipboardItem = createRemoteReactComponent(BaseClipboardItem);

packages/ui-extensions-react/src/surfaces/checkout/components/ClipboardItem/examples/basic-clipboarditem.example.tsx

@@ -0,0 +1,27 @@
+import {
+  reactExtension,
+  Button,
+  ClipboardItem,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <>
+      <Button
+        activateTarget="discount-code"
+        activateAction="copy"
+      >
+        Copy discount code
+      </Button>
+      <ClipboardItem
+        text="SAVE 25"
+        id="discount-code"
+      />
+    </>
+  );
+}

packages/ui-extensions-react/src/surfaces/checkout/components/QRCode/examples/basic-qrcode.example.tsx

@@ -1,6 +1,8 @@
 import {
   reactExtension,
+  Link,
   QRCode,
+  TextBlock,
 } from '@shopify/ui-extensions-react/checkout';
 
 export default reactExtension(
@@ -9,5 +11,16 @@ export default reactExtension(
 );
 
 function Extension() {
-  return <QRCode content="https://shopify.com" />;
+  return (
+    <>
+      <QRCode content="https://shopify.com" />
+
+      <TextBlock>
+        Scan to visit{' '}
+        <Link to="https://shopify.com">
+          Shopify.com
+        </Link>
+      </TextBlock>
+    </>
+  );
 }

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/clipboarditem-oncopy.example.ts

@@ -0,0 +1,63 @@
+import {
+  extension,
+  Button,
+  ClipboardItem,
+  Icon,
+  InlineStack,
+  Text,
+} from '@shopify/ui-extensions/checkout';
+
+export default extension(
+  'purchase.checkout.block.render',
+  (root) => {
+    const button = root.createComponent(Button, {
+      activateTarget: 'sample-id',
+    });
+
+    const inlineStack = root.createComponent(
+      InlineStack,
+      {},
+    );
+
+    const text = root.createComponent(
+      Text,
+      {},
+      'Copy to clipboard',
+    );
+
+    const icon = root.createComponent(Icon, {
+      source: 'clipboard',
+      appearance: 'monochrome',
+    });
+
+    const clipboardItem = root.createComponent(
+      ClipboardItem,
+      {
+        text: 'This text will be copied to the clipboard',
+        id: 'sample-id',
+        onCopy: () => {
+          icon.updateProps({source: 'success'});
+          setTimeout(() => {
+            icon.updateProps({
+              source: 'clipboard',
+            });
+          }, 2500);
+        },
+        onCopyError: () => {
+          icon.updateProps({source: 'error'});
+          setTimeout(() => {
+            icon.updateProps({
+              source: 'clipboard',
+            });
+          }, 2500);
+        },
+      },
+    );
+
+    button.appendChild(inlineStack);
+    inlineStack.appendChild(text);
+    inlineStack.appendChild(icon);
+    root.appendChild(button);
+    root.appendChild(clipboardItem);
+  },
+);

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/clipboarditem-oncopy.example.tsx

@@ -0,0 +1,51 @@
+import {useState} from 'react';
+import {
+  reactExtension,
+  Button,
+  ClipboardItem,
+  Icon,
+  InlineStack,
+  Text,
+} from '@shopify/ui-extensions-react/checkout';
+
+import type {IconProps} from '@shopify/ui-extensions/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  const [iconSource, setIconSource] =
+    useState<IconProps['source']>('clipboard');
+
+  return (
+    <>
+      <Button activateTarget="sample-id">
+        <InlineStack>
+          <Text>Copy to clipboard</Text>
+          <Icon
+            source={iconSource}
+            appearance="monochrome"
+          />
+        </InlineStack>
+      </Button>
+      <ClipboardItem
+        text="This text will be copied to the clipboard"
+        id="sample-id"
+        onCopy={() => {
+          setIconSource('success');
+          setTimeout(() => {
+            setIconSource('clipboard');
+          }, 2500);
+        }}
+        onCopyError={() => {
+          setIconSource('error');
+          setTimeout(() => {
+            setIconSource('clipboard');
+          }, 2500);
+        }}
+      />
+    </>
+  );
+}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/clipboarditem-qrcode.example.ts

@@ -0,0 +1,50 @@
+import {
+  extension,
+  BlockStack,
+  Button,
+  ClipboardItem,
+  QRCode,
+} from '@shopify/ui-extensions/checkout';
+
+export default extension(
+  'purchase.checkout.block.render',
+  (root) => {
+    const bitcoinAddress =
+      '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';
+    const qrCodeContent = `bitcoin:${bitcoinAddress}`;
+
+    const qrCode = root.createComponent(QRCode, {
+      content: qrCodeContent,
+      size: 'fill',
+    });
+
+    const clipboardItem = root.createComponent(
+      ClipboardItem,
+      {
+        text: bitcoinAddress,
+        id: 'bitcoin-address',
+      },
+    );
+
+    const button = root.createComponent(
+      Button,
+      {
+        activateTarget: 'bitcoin-address',
+      },
+      'Copy Bitcoin address',
+    );
+
+    const blockStack = root.createComponent(
+      BlockStack,
+      {
+        maxInlineSize: 200,
+      },
+    );
+
+    blockStack.appendChild(qrCode);
+    blockStack.appendChild(button);
+    blockStack.appendChild(clipboardItem);
+
+    root.appendChild(blockStack);
+  },
+);

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/clipboarditem-qrcode.example.tsx

@@ -0,0 +1,33 @@
+import {
+  reactExtension,
+  BlockStack,
+  Button,
+  ClipboardItem,
+  QRCode,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  const bitcoinAddress =
+    '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';
+
+  return (
+    <BlockStack maxInlineSize={200}>
+      <QRCode
+        size="fill"
+        content={`bitcoin:${bitcoinAddress}`}
+      />
+      <Button activateTarget="bitcoin-address">
+        Copy Bitcoin address
+      </Button>
+      <ClipboardItem
+        text={bitcoinAddress}
+        id="bitcoin-address"
+      />
+    </BlockStack>
+  );
+}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/qrcode-image.example.ts

@@ -1,6 +1,8 @@
 import {
   extension,
   QRCode,
+  TextBlock,
+  Link,
 } from '@shopify/ui-extensions/checkout';
 
 export default extension(
@@ -11,6 +13,20 @@ export default extension(
       logo: 'https://cdn.shopify.com/YOUR_IMAGE_HERE',
     });
 
+    const textBlock = root.createComponent(
+      TextBlock,
+      null,
+      [
+        'Scan to visit ',
+        root.createComponent(
+          Link,
+          {to: 'https://shopify.com'},
+          'Shopify.com',
+        ),
+      ],
+    );
+
     root.appendChild(qrCode);
+    root.appendChild(textBlock);
   },
 );

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/qrcode-image.example.tsx

@@ -1,6 +1,8 @@
 import {
   reactExtension,
+  Link,
   QRCode,
+  TextBlock,
 } from '@shopify/ui-extensions-react/checkout';
 
 export default reactExtension(
@@ -10,9 +12,18 @@ export default reactExtension(
 
 function Extension() {
   return (
-    <QRCode
-      content="https://shopify.com"
-      logo="https://cdn.shopify.com/YOUR_IMAGE_HERE"
-    />
+    <>
+      <QRCode
+        content="https://shopify.com"
+        logo="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+      />
+
+      <TextBlock>
+        Scan to visit{' '}
+        <Link to="https://shopify.com">
+          Shopify.com
+        </Link>
+      </TextBlock>
+    </>
   );
 }

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

@@ -209,7 +209,7 @@ export type {
   ViewportSizeCondition,
 } from './checkout/style/types';
 
-export type {IdProps} from './checkout/components/shared';
+export type {IdProps, InteractionProps} from './checkout/components/shared';
 
 export * from './checkout/globals';
 

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

@@ -37,6 +37,9 @@ export type {ChoiceProps} from './components/Choice/Choice';
 export {ChoiceList} from './components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
 
+export {ClipboardItem} from './components/ClipboardItem/ClipboardItem';
+export type {ClipboardItemProps} from './components/ClipboardItem/ClipboardItem';
+
 export {DatePicker} from './components/DatePicker/DatePicker';
 export type {
   DatePickerProps,

packages/ui-extensions/src/surfaces/checkout/components/Button/Button.ts

@@ -7,11 +7,13 @@ import type {
   IdProps,
   OverlayActivatorProps,
   DisclosureActivatorProps,
+  InteractionProps,
 } from '../shared';
 
 export interface ButtonProps
   extends OverlayActivatorProps,
     DisclosureActivatorProps,
+    InteractionProps,
     IdProps {
   /**
    * The type of button that will be rendered. The visual presentation of the button type