Add code examples of POS subscriptions UI extension

Author: janezhu918

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/Action.jsx

@@ -0,0 +1,56 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+import {fetchSellingPlans} from './FetchSellingPlans';
+
+export default function extension() {
+  render(<Action />, document.body);
+}
+
+function Action() {
+  const [response, setResponse] = useState(undefined);
+
+  useEffect(() => {
+    async function getSellingPlans() {
+      setResponse(await fetchSellingPlans(shopify.cartLineItem?.variantId));
+    }
+    getSellingPlans();
+  }, [shopify.cartLineItem]);
+
+  const handleClick = (plan) => {
+    shopify.cart.addLineItemSellingPlan({
+      lineItemUuid: shopify.cartLineItem.uuid,
+      sellingPlanId: Number(plan.id.split('/').pop()),
+      sellingPlanName: plan.name,
+    });
+    window.close();
+  };
+
+  return (
+    <s-page heading="Subscriptions">
+      <s-scroll-box>
+        <s-box padding="small">
+          {response?.data.productVariant.sellingPlanGroups.nodes.map(
+            (group) => {
+              return (
+                <s-section key={`${group.name}-section`} heading={group.name}>
+                  {group.sellingPlans.nodes.map((plan) => {
+                    return (
+                      <s-clickable
+                        key={`${plan.name}-clickable`}
+                        onClick={() => {
+                          handleClick(plan);
+                        }}
+                      >
+                        <s-text key={`${plan.name}-text`}>{plan.name}</s-text>
+                      </s-clickable>
+                    );
+                  })}
+                </s-section>
+              );
+            },
+          )}
+        </s-box>
+      </s-scroll-box>
+    </s-page>
+  );
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/FetchSellingPlans.js

@@ -0,0 +1,30 @@
+export async function fetchSellingPlans(variantId) {
+  const requestBody = {
+    query: `#graphql
+        query GetSellingPlans($variantId: ID!) {
+          productVariant(id: $variantId) {
+            sellingPlanGroups(first: 10) {
+              nodes {
+                name
+                sellingPlans(first: 10) {
+                  nodes {
+                    id
+                    name
+                    category
+                  }
+                }
+              }
+            }
+          }
+        }
+      `,
+    variables: {variantId: `gid://shopify/ProductVariant/${variantId}`},
+  };
+
+  const res = await fetch('shopify:admin/api/graphql.json', {
+    method: 'POST',
+    body: JSON.stringify(requestBody),
+  });
+  return res.json();
+}
+

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/MenuItem.jsx

@@ -0,0 +1,21 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<MenuItem />, document.body);
+}
+
+function MenuItem() {
+  const handleButtonPress = () => {
+    shopify.action.presentModal();
+  };
+
+  const hasSellingPlanGroups = shopify.cartLineItem?.hasSellingPlanGroups;
+
+  return (
+    <s-button
+      onClick={handleButtonPress}
+      disabled={!hasSellingPlanGroups}
+      variant="secondary"
+    />
+  );
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/Modal.jsx

@@ -0,0 +1,66 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+import {fetchSellingPlans} from './FetchSellingPlans';
+
+export default function extension() {
+  render(<Modal />, document.body);
+}
+
+function Modal() {
+  // For this example, we'll just use the first selling plan item
+  const sellingPlanItem = shopify.cart.current.value.lineItems.find(
+    (lineItem) => lineItem.hasSellingPlanGroups === true,
+  );
+
+  const [response, setResponse] = useState(undefined);
+
+  useEffect(() => {
+    async function getSellingPlans() {
+      setResponse(await fetchSellingPlans(sellingPlanItem?.variantId));
+    }
+    getSellingPlans();
+  }, [sellingPlanItem]);
+
+  // [START modal.handle-click]
+  const handleClick = (plan) => {
+    shopify.cart.addLineItemSellingPlan({
+      lineItemUuid: sellingPlanItem.uuid,
+      // convert from GID to ID
+      sellingPlanId: Number(plan.id.split('/').pop()),
+      sellingPlanName: plan.name,
+    });
+    window.close();
+  };
+  // [END modal.handle-click]
+
+  // [START modal.display]
+  return (
+    <s-page heading="POS modal">
+      <s-scroll-box>
+        <s-box padding="small">
+          {response?.data.productVariant.sellingPlanGroups.nodes.map(
+            (group) => {
+              return (
+                <s-section key={`${group.name}-section`} heading={group.name}>
+                  {group.sellingPlans.nodes.map((plan) => {
+                    return (
+                      <s-clickable
+                        key={`${plan.name}-clickable`}
+                        onClick={() => {
+                          handleClick(plan);
+                        }}
+                      >
+                        <s-text key={`${plan.name}-text`}>{plan.name}</s-text>
+                      </s-clickable>
+                    );
+                  })}
+                </s-section>
+              );
+            },
+          )}
+        </s-box>
+      </s-scroll-box>
+    </s-page>
+  );
+  // [END modal.display]
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/Tile.jsx

@@ -0,0 +1,38 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default function extension() {
+  render(<Tile />, document.body);
+}
+
+function Tile() {
+  const [sellingPlanEligible, setSellingPlanEligible] = useState(false);
+
+  // [START tile.subscribe]
+  useEffect(() => {
+    const unsubscribe = shopify.cart.current.subscribe((cart) => {
+      const sellingPlanEligibleLineItems = cart.lineItems.filter(
+        (lineItem) => lineItem.hasSellingPlanGroups === true,
+      );
+
+      setSellingPlanEligible(sellingPlanEligibleLineItems.length > 0);
+    });
+    return unsubscribe;
+  }, []);
+  // [END tile.subscribe]
+
+  return (
+    <s-tile
+      heading={'Subscriptions'}
+      subheading={
+        sellingPlanEligible
+          ? 'Subscriptions available'
+          : 'Subscriptions not available'
+      }
+      // [START tile.disabled]
+      disabled={!sellingPlanEligible}
+      // [END tile.disabled]
+      onClick={() => shopify.action.presentModal()}
+    />
+  );
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/subscription-example/shopify.extension.toml

@@ -0,0 +1,28 @@
+api_version = "2025-10"
+
+# [START toml.description]
+[[extensions]]
+type = "ui_extension"
+name = "Subscription Tutorial"
+handle = "subscription-tutorial"
+description = "POS UI extension subscription tutorial"
+# [END toml.description]
+
+[[extensions.targeting]]
+module = "./src/Tile.jsx"
+target = "pos.home.tile.render"
+
+[[extensions.targeting]]
+module = "./src/Modal.jsx"
+target = "pos.home.modal.render"
+
+# [START toml.optional_targets]
+# Optional additional targets for line item details screen
+[[extensions.targeting]]
+module = "./src/Action.jsx"
+target = "pos.cart.line-item-details.action.render"
+
+[[extensions.targeting]]
+module = "./src/MenuItem.jsx"
+target = "pos.cart.line-item-details.action.menu-item.render"
+# [END toml.optional_targets]