[Customer account UI extensions 2025-01]: Set up component sidebar

packages/ui-extensions-react/src/surfaces/customer-account/components/Badge/examples/basic-badge.example.tsx

@@ -0,0 +1,13 @@
+import {
+  reactExtension,
+  Badge,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return <Badge>Available</Badge>;
+}

packages/ui-extensions-react/src/surfaces/customer-account/components/Badge/examples/status-badge.example.tsx

@@ -0,0 +1,38 @@
+import {
+  reactExtension,
+  Badge,
+  BlockStack,
+  Text,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <BlockStack
+      border="base"
+      padding="large200"
+      spacing="base"
+      borderRadius="large"
+    >
+      <BlockStack spacing="none">
+        <Text size="large" emphasis="bold">
+          Subscription
+        </Text>
+        <Text>Mini garden seeds</Text>
+      </BlockStack>
+      <BlockStack
+        spacing="none"
+        inlineAlignment="start"
+      >
+        <Text emphasis="bold">
+          $35.00 monthly
+        </Text>
+        <Badge tone="subdued">Paused</Badge>
+      </BlockStack>
+    </BlockStack>
+  );
+}

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

@@ -0,0 +1,18 @@
+import {
+  reactExtension,
+  Banner,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <Banner
+      status="critical"
+      title="Your payment details couldn’t be verified. Check your card details and try again."
+    />
+  );
+}

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

@@ -0,0 +1,23 @@
+import {
+  reactExtension,
+  BlockLayout,
+  View,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <BlockLayout rows={[60, 'fill']}>
+      <View border="base" padding="base">
+        60
+      </View>
+      <View border="base" padding="base">
+        fill
+      </View>
+    </BlockLayout>
+  );
+}

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

@@ -0,0 +1,24 @@
+import {
+  reactExtension,
+  BlockSpacer,
+  View,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <>
+      <View border="base" padding="base">
+        View
+      </View>
+      <BlockSpacer spacing="loose" />
+      <View border="base" padding="base">
+        View
+      </View>
+    </>
+  );
+}

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

@@ -0,0 +1,26 @@
+import {
+  reactExtension,
+  BlockStack,
+  View,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <BlockStack>
+      <View border="base" padding="base">
+        View
+      </View>
+      <View border="base" padding="base">
+        View
+      </View>
+      <View border="base" padding="base">
+        View
+      </View>
+    </BlockStack>
+  );
+}

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

@@ -0,0 +1,21 @@
+import {
+  reactExtension,
+  Button,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <Button
+      onPress={() => {
+        console.log('onPress event');
+      }}
+    >
+      Pay now
+    </Button>
+  );
+}

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

@@ -0,0 +1,16 @@
+import {
+  reactExtension,
+  Chat,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.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-react/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.tsx

@@ -0,0 +1,17 @@
+import {
+  reactExtension,
+  Checkbox,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <Checkbox id="checkbox" name="checkbox">
+      Save this information for next time
+    </Checkbox>
+  );
+}

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

@@ -0,0 +1,43 @@
+import {
+  reactExtension,
+  Choice,
+  ChoiceList,
+  InlineStack,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <InlineStack>
+      <ChoiceList
+        name="ship"
+        value="ship-1"
+        onChange={(value) => {
+          console.log(
+            `onChange event with value: ${value}`,
+          );
+        }}
+      >
+        <Choice id="ship-1">Ship</Choice>
+      </ChoiceList>
+
+      <ChoiceList
+        name="gift"
+        value={['gift-1']}
+        onChange={(value) => {
+          console.log(
+            `onChange event with value: ${value}`,
+          );
+        }}
+      >
+        <Choice id="multipleFirst">
+          Gift message
+        </Choice>
+      </ChoiceList>
+    </InlineStack>
+  );
+}

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

@@ -0,0 +1,76 @@
+import {
+  reactExtension,
+  BlockStack,
+  Choice,
+  ChoiceList,
+  Icon,
+  InlineStack,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <InlineStack>
+      <ChoiceList
+        name="group-single"
+        variant="group"
+        value="ship"
+        onChange={(value) => {
+          console.log(
+            `onChange event with value: ${value}`,
+          );
+        }}
+      >
+        <Choice
+          secondaryContent={
+            <Icon source="truck" />
+          }
+          id="ship"
+        >
+          Ship
+        </Choice>
+        <Choice
+          secondaryContent={
+            <Icon source="marker" />
+          }
+          id="ship-to-pickup-point"
+        >
+          Ship to pickup point
+        </Choice>
+        <Choice
+          secondaryContent={
+            <Icon source="store" />
+          }
+          id="pick-up"
+        >
+          Pick up in store
+        </Choice>
+      </ChoiceList>
+      <ChoiceList
+        name="base-multiple"
+        value={['remember-me']}
+        onChange={(value) => {
+          console.log(
+            `onChange event with value: ${value}`,
+          );
+        }}
+      >
+        <BlockStack>
+          <Choice id="remember-me">
+            Save this information for next time
+          </Choice>
+          <Choice id="email-me">
+            Email me with news and offers
+          </Choice>
+          <Choice id="text-me">
+            Text me with news and offers
+          </Choice>
+        </BlockStack>
+      </ChoiceList>
+    </InlineStack>
+  );
+}

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

@@ -0,0 +1,27 @@
+import {
+  reactExtension,
+  Button,
+  ClipboardItem,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.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/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx

@@ -0,0 +1,17 @@
+import {
+  reactExtension,
+  ConsentCheckbox,
+} from '@shopify/ui-extensions-react/customer-account';
+
+export default reactExtension(
+  'customer-account.page.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <ConsentCheckbox policy="sms-marketing">
+      Text me with news and offers
+    </ConsentCheckbox>
+  );
+}