Add code examples of POS subscriptions UI extension

[janezhu918]

Background

This PR adds example code for a Point of Sale UI extension that demos how to implement subscription functionality.

Related to https://github.com/Shopify/shopify-dev/pull/64603 - planning to reference these codeRefs in the doc, but I can't link them until they are actually published.

Solution

Added three new files to demonstrate a complete subscription example for Point of Sale UI extensions:

1. Modal.jsx - Implements a modal that:
   • Fetches selling plans for a product variant using GraphQL
   • Displays available subscription options
   • Handles selection of a subscription plan
2. Tile.jsx - Creates a tile component that:
   • Subscribes to cart updates to detect subscription-eligible items
   • Enables/disables the tile based on whether subscription options are available
   • Opens the modal when clicked
3. shopify.extension.toml - Configuration file that:
   • Defines the extension targeting both the POS home tile and modal render targets

The example demonstrates best practices for implementing subscription functionality in POS UI extensions, including proper data fetching, state management, and user interaction patterns.

🎩

• Run the example in a development environment
• Add a subscription-eligible product to the cart
• Verify the subscription tile becomes enabled
• Click the tile and confirm the modal displays available subscription options
• Select a subscription plan and verify it's applied to the cart item

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[janezhu918]

• Add code examples of POS subscriptions UI extension #3550 👈 (View in Graphite)
• 2025-10

This stack of pull requests is managed by Graphite. Learn more about stacking.

[NathanJolly]

Generally supportive: Just want to keep in mind that every new addition to examples introduces maintenance load, so let's make sure the examples are of good quality and provide value we don't already provide somewhere else.

In this case, I'd argue this does provide unique value in that our other examples do not showcase any direct API usage.

[NathanJolly]

Curious: What does the key prop do in this context?

[janezhu918]

Because we're looping through the selling plans here, it's good practice to include a unique key to tell these components apart.

[janezhu918]

Closing this branch in favor of https://app.graphite.com/github/pr/Shopify/ui-extensions/3552/Add-code-examples-of-POS-subscriptions-UI-extension (needed to fix branch name to properly reference them in my shopify-dev branch). This branch has the "/" (extra slash) that breaks parsing.