@shopify/ui-extensions 2025.10.0-rc.35 → 2025.10.0-rc.36

package/src/surfaces/admin/components/patterns/examples/settings.jsx

@@ -1,4 +1,3 @@
-
 // ===
 // Settings page pattern
 // ===
@@ -24,59 +23,81 @@ export default function SettingsPage() {
         {/* Store Information */}
         {/* === */}
         <s-section heading="Store Information">
-            <s-text-field
-              label="Store name"
-              name="store-name"
-              value="Puzzlify Store"
-              placeholder="Enter store name"
-            />
-            <s-text-field
-              label="Business address"
-              name="business-address"
-              value="123 Main St, Anytown, USA"
-              placeholder="Enter business address"
-            />
-            <s-text-field
-              label="Store phone"
-              name="store-phone"
-              value="+1 (555) 123-4567"
-              placeholder="Enter phone number"
-            />
-            <s-choice-list label="Primary currency" name="currency">
-              <s-choice label="US Dollar ($)" value="usd" selected></s-choice>
-              <s-choice label="Canadian Dollar (CAD)" value="cad"></s-choice>
-              <s-choice label="Euro (€)" value="eur"></s-choice>
-            </s-choice-list>
+          <s-text-field
+            label="Store name"
+            name="store-name"
+            value="Puzzlify Store"
+            placeholder="Enter store name"
+          />
+          <s-text-field
+            label="Business address"
+            name="business-address"
+            value="123 Main St, Anytown, USA"
+            placeholder="Enter business address"
+          />
+          <s-text-field
+            label="Store phone"
+            name="store-phone"
+            value="+1 (555) 123-4567"
+            placeholder="Enter phone number"
+          />
+          <s-choice-list label="Primary currency" name="currency">
+            <s-choice value="usd" selected>
+              US Dollar ($)
+            </s-choice>
+            <s-choice value="cad">Canadian Dollar (CAD)</s-choice>
+            <s-choice value="eur">Euro (€)</s-choice>
+          </s-choice-list>
         </s-section>
 
         {/* === */}
         {/* Notifications */}
         {/* === */}
         <s-section heading="Notifications">
-            <s-select label="Notification frequency" name="notification-frequency">
-              <s-option value="immediately" selected>Immediately</s-option>
-              <s-option value="hourly">Hourly digest</s-option>
-              <s-option value="daily">Daily digest</s-option>
-            </s-select>
-            <s-choice-list label="Notification types" name="notifications-type" multiple>
-              <s-choice label="New order notifications" value="new-order" selected></s-choice>
-              <s-choice label="Low stock alerts" value="low-stock"></s-choice>
-              <s-choice label="Customer review notifications" value="customer-review"></s-choice>
-              <s-choice label="Shipping updates" value="shipping-updates"></s-choice>
-            </s-choice-list>
+          <s-select
+            label="Notification frequency"
+            name="notification-frequency"
+          >
+            <s-option value="immediately" selected>
+              Immediately
+            </s-option>
+            <s-option value="hourly">Hourly digest</s-option>
+            <s-option value="daily">Daily digest</s-option>
+          </s-select>
+          <s-choice-list
+            label="Notification types"
+            name="notifications-type"
+            multiple
+          >
+            <s-choice value="new-order" selected>
+              New order notifications
+            </s-choice>
+            <s-choice value="low-stock">Low stock alerts</s-choice>
+            <s-choice value="customer-review">
+              Customer review notifications
+            </s-choice>
+            <s-choice value="shipping-updates">Shipping updates</s-choice>
+          </s-choice-list>
         </s-section>
 
         {/* === */}
         {/* Preferences */}
         {/* === */}
         <s-section heading="Preferences">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+        <s-box
+            border="base"
+            borderRadius="base"
+          >
             <s-clickable
               padding="small-100"
               href="/app/settings/shipping"
               accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Shipping & fulfillment</s-heading>
                   <s-paragraph color="subdued">
@@ -95,11 +116,16 @@ export default function SettingsPage() {
               href="/app/settings/products_catalog"
               accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Products & catalog</s-heading>
                   <s-paragraph color="subdued">
-                    Product defaults, customer experience, and catalog display options.
+                    Product defaults, customer experience, and catalog display
+                    options.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
@@ -114,30 +140,45 @@ export default function SettingsPage() {
               href="/app/settings/customer_support"
               accessibilityLabel="Manage customer support settings and help resources"
             >
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Customer support</s-heading>
                   <s-paragraph color="subdued">
-                    Support settings, help resources, and customer service tools.
+                    Support settings, help resources, and customer service
+                    tools.
                   </s-paragraph>
                 </s-box>
                 <s-icon type="chevron-right"></s-icon>
               </s-grid>
             </s-clickable>
-          </s-stack>
+          </s-box>
         </s-section>
 
         {/* === */}
         {/* Tools */}
         {/* === */}
         <s-section heading="Tools">
-          <s-stack gap="none" border="base" borderRadius="base" overflow="hidden">
+          <s-stack
+            gap="none"
+            border="base"
+            borderRadius="base"
+            overflow="hidden"
+          >
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Reset app settings</s-heading>
                   <s-paragraph color="subdued">
-                    Reset all settings to their default values. This action cannot be undone.
+                    Reset all settings to their default values. This action
+                    cannot be undone.
                   </s-paragraph>
                 </s-box>
                 <s-button tone="critical">Reset</s-button>
@@ -148,7 +189,11 @@ export default function SettingsPage() {
             </s-box>
 
             <s-box padding="small-100">
-              <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
                 <s-box>
                   <s-heading>Export settings</s-heading>
                   <s-paragraph color="subdued">
@@ -163,4 +208,4 @@ export default function SettingsPage() {
       </s-page>
     </form>
   );
-}
+}

package/src/surfaces/admin/components/patterns/examples/setupGuide.html

@@ -0,0 +1,91 @@
+<s-section>
+  <s-grid gap="base">
+    <s-grid gap="small-200">
+      <s-grid gridTemplateColumns="1fr auto auto" gap="small-300" alignItems="center">
+        <s-heading>Setup Guide</s-heading>
+        <s-button
+          accessibilityLabel="Dismiss Guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="x"
+        ></s-button>
+        <s-button
+          accessibilityLabel="Toggle setup guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="chevron-up"
+        ></s-button>
+      </s-grid>
+      <s-paragraph>
+        Use this personalized guide to get your store ready for sales.
+      </s-paragraph>
+        <s-paragraph tone="subdued">0 out of 3 steps completed</s-paragraph>
+    </s-grid>
+    <s-box borderRadius="base" border="base" background="base">
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Upload an image for your puzzle"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 1 details"
+              variant="tertiary"
+              icon="chevron-up"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none">
+          <s-box padding="base" background="subdued" borderRadius="base">
+            <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+              <s-grid gap="small-200">
+                <s-paragraph>
+                  Start by uploading a high-quality image that will be used to create your
+                  puzzle. For best results, use images that are at least 1200x1200 pixels.
+                </s-paragraph>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button variant="primary">
+                    Upload image
+                  </s-button>
+                  <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
+                </s-stack>
+              </s-grid>
+              <s-box maxBlockSize="80px" maxInlineSize="80px">
+                <s-image
+                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                  alt="Customize checkout illustration"
+                ></s-image>
+              </s-box>
+            </s-grid>
+          </s-box>
+        </s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Choose a puzzle template"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 2 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Customize puzzle piece shapes"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 3 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+    </s-box>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -6,10 +6,10 @@ const data: ReferenceEntityTemplateSchema = {
     'Manage objects efficiently with dynamic table actions.',
   description: `The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected
 
-  | Used to    | Examples |
-| -------- | ------- |
-| View all objects at once  | Products, orders, customers, discounts    |
-| Perform bulk actions | Delete products, pause/activate campaigns      |
+  | Used to | Examples |
+  | --- | --- |
+  | View all objects at once | Products, orders, customers, discounts |
+  | Perform bulk actions | Delete products, pause/activate campaigns |
 
   ![Preview of the index pattern](/assets/templated-apis-screenshots/admin/patterns/index-example.png)
 
@@ -47,6 +47,7 @@ const data: ReferenceEntityTemplateSchema = {
   </style>`,
   isVisualComponent: true,
   category: 'Patterns',
+  subCategory: 'Templates',
   thumbnail: '/assets/templated-apis-screenshots/admin/patterns/index.png',
   defaultExample: {
     codeblock: {

package/src/surfaces/admin/components/shared.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.16.0 **/
+/** VERSION: 1.18.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 

package/src/surfaces/admin/components.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.16.0 **/
+/** VERSION: 1.18.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -6041,8 +6041,17 @@ export type RequiredAlignedModalProps = Required<ModalProps$1>;
 export interface ModalProps
   extends Pick<
     RequiredAlignedModalProps,
-    'accessibilityLabel' | 'heading' | 'padding' | 'size'
+    | 'accessibilityLabel'
+    | 'heading'
+    | 'padding'
+    | 'size'
+    | 'hideOverlay'
+    | 'showOverlay'
+    | 'toggleOverlay'
   > {
+  /**
+   * Adjust the size of the Modal.
+   */
   size: Extract<
     ModalProps$1['size'],
     'small-100' | 'small' | 'base' | 'large' | 'large-100'
@@ -6129,13 +6138,13 @@ export interface ModalJSXProps
    *
    * Only a `Button` with a variant of `primary` is allowed.
    */
-  primaryAction: ComponentChild;
+  primaryAction?: ComponentChild;
   /**
    * The secondary actions to perform.
    *
    * Only `ButtonGroup` or `Button` with a variant of `secondary` or `auto` are allowed.
    */
-  secondaryActions: ComponentChild;
+  secondaryActions?: ComponentChild;
   onHide?: ((event: CallbackEvent<typeof tagName$z>) => void) | null;
   onShow?: ((event: CallbackEvent<typeof tagName$z>) => void) | null;
   onAfterHide?: ((event: CallbackEvent<typeof tagName$z>) => void) | null;
@@ -7853,13 +7862,13 @@ export interface ModalSlots {
    *
    * Only a `Button` with a variant of `primary` is allowed.
    */
-  'primary-action': HTMLElement;
+  'primary-action'?: HTMLElement;
   /**
    * The secondary actions to perform.
    *
    * Only `ButtonGroup` or `Button` with a variant of `secondary` or `auto` are allowed.
    */
-  'secondary-actions': HTMLElement;
+  'secondary-actions'?: HTMLElement;
 }
 
 export interface MoneyFieldEvents {

package/src/surfaces/point-of-sale/types/cart.ts

@@ -1,5 +1,6 @@
 import {CountryCode} from './country-code';
 import {TaxLine} from './tax-line';
+import {DiscountAllocation} from './discount-allocation';
 
 export interface Cart {
   /**
@@ -40,6 +41,7 @@ export interface LineItem {
   variantId?: number;
   productId?: number;
   discounts: Discount[];
+  discountAllocations?: DiscountAllocation[];
   taxable: boolean;
   taxLines: TaxLine[];
   sku?: string;

package/src/surfaces/point-of-sale/types/discount-allocation.ts

@@ -0,0 +1,5 @@
+import type {MoneyV2} from './money';
+
+export interface DiscountAllocation {
+  allocatedAmount: MoneyV2;
+}

package/src/surfaces/point-of-sale/types/money.ts

@@ -2,3 +2,8 @@ export interface Money {
   amount: number;
   currency: string;
 }
+
+export interface MoneyV2 {
+  amount: string;
+  currencyCode: string;
+}