Add code examples of POS subscriptions UI extension

Author: janezhu918

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

@@ -0,0 +1,89 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+// [START modal.fetch]
+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();
+}
+// [END modal.fetch]
+
+export default function extension() {
+  render(<Modal />, document.body);
+}
+
+function Modal() {
+  // For this sample, 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]
+
+  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>
+  );
+}

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

@@ -0,0 +1,32 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default function extension() {
+  render(<Tile />, document.body);
+}
+
+function Tile() {
+  const [sellingPlanEligible, setSellingPlanEligible] = useState(false);
+
+  // [START tile.subscribe]
+  shopify.cart.current.subscribe(cart => {
+    const sellingPlanEligibleLineItems = cart.lineItems.filter(lineItem => lineItem.hasSellingPlanGroups === true)
+
+    setSellingPlanEligible(sellingPlanEligibleLineItems.length > 0)
+  })
+  // [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,15 @@
+api_version = "2025-10"
+
+[[extensions]]
+type = "ui_extension"
+name = "Subscription Tutorial"
+handle = "subscription-tutorial"
+description = "POS UI extension subscription tutorial"
+
+[[extensions.targeting]]
+module = "./src/Tile.jsx"
+target = "pos.home.tile.render"
+
+[[extensions.targeting]]
+module = "./src/Modal.jsx"
+target = "pos.home.modal.render"