@wix/himalaya-cli 0.1324.0 → 0.1326.0

package/templates/beauty-salon/tier5-src/himi-store-product/index.ts

@@ -1,5 +1,7 @@
 // Tier-5 bundle: himi-store — product detail.
-import { defineService } from "@himalaya/state";
+import { withIapPresentation } from "../_shared/iap-presentation.js";
+import { type IapCommerce } from "@himalaya/iap-checkout";
+import { iapPriceCopy } from "../_shared/iap-worker.js";
 import { share as shareSheet } from "@himalaya/share";
 import { addToCurrentCart, getCurrentCart } from "@himalaya/wix-ecom";
 import { get, upsert, enqueue, type DbEntity } from "@himalaya/local-db";
@@ -74,6 +76,7 @@ let lastProduct: StoreProduct | undefined;
  *  `refreshServices()` → `load()`, so this is what tells a genuine navigation to a
  *  DIFFERENT product (drop the picks) from the same product coming back (keep them). */
 let lastLoadedId: string | undefined;
+let productLoadSequence = 0;
 
 interface OptionSlots {
   opt1Label: string; opt1Chips: OptionChip[]; opt1Selected: string[]; noOpt1: boolean;
@@ -136,6 +139,7 @@ interface S {
   status: "loading" | "ready" | "error";
   name: string;
   price: string;
+  commercePrice?: string;
   /** The plain-text description: RichContent's fallback, and what shows with no document. */
   description: string;
   /** [rico] #3372 — a V3 product's Ricos `description` (read with `fields=DESCRIPTION`) as ONE document string
@@ -305,6 +309,14 @@ function derive(s: S): S {
 // read answering late — must not replace the badge the add set (#3468 review).
 let cartBadgeEpoch = 0;
 
+let productPricing: IapCommerce;
+const defineService = withIapPresentation<S>({
+  onCreate: commerce => { productPricing = commerce; }, prefix: "product", transientKeys: ["price", "optionsIncomplete"], contentActions: ["load", "paintCached"],
+  items: state => inputId() ? [{ reference: { kind: "storesProduct", id: inputId() }, commerceDisplayPrice: state.price }] : [],
+  present: (state, price, allowed) => ({ ...state, price: price(inputId()), optionsIncomplete: derive(state).optionsIncomplete || !allowed(inputId()) || lastProduct?.productType?.toLowerCase() === "digital",
+    cartHint: lastProduct?.productType?.toLowerCase() === "digital" || (!state.optionsUnknown && !allowed(inputId())) ? iapPriceCopy("product").purchaseUnavailable : state.cartHint === iapPriceCopy("product").purchaseUnavailable ? "" : state.cartHint }),
+});
+
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => Promise<S>;
   setQuantity: (s: S, arg?: unknown) => S;
@@ -365,8 +377,10 @@ const svc = defineService<S, {
     opt3Label: "", opt3Chips: [], opt3Selected: [], noOpt3: true,
   }),
   actions: {
-    load: async (s, arg) => {
+    load: async (s, arg): Promise<S> => {
       stashCopy(arg);
+      const sequence = ++productLoadSequence;
+      lastProduct = undefined;
       const id = inputId();
       // Storage problems must not prevent browsing or buying a product.
       let saved = false;
@@ -403,6 +417,7 @@ const svc = defineService<S, {
         painted = true;
       }
       const outcome = await live;
+      if (sequence !== productLoadSequence || id !== inputId()) return svc.getState() as S;
       // Once painted the page is INTERACTIVE while the live read is on the wire: the visitor may
       // save, change the quantity or add to cart. Build on the state as it is NOW, and keep what
       // they did — overwriting it would untick a stored save, reset the quantity, and drop the
@@ -448,6 +463,7 @@ const svc = defineService<S, {
           optionsUnknown: false,
           name,
           price: productPrice(p),
+          commercePrice: productPrice(p),
           ...productBody(p),
           image,
           gallery: productGallery(p),
@@ -543,6 +559,7 @@ const svc = defineService<S, {
         status: "ready",
         name,
         price: String(row.subtitle ?? ""),
+        commercePrice: String(row.subtitle ?? ""),
         description: "",
         descriptionJson: "",
         image: String(row.image ?? ""),
@@ -559,6 +576,7 @@ const svc = defineService<S, {
     },
     addToCart: async (s) => {
       const id = inputId();
+      if (!productPricing.pricing.checkoutGuard({ kind: "storesProduct", id }).allowed || lastProduct?.productType?.toLowerCase() === "digital") return derive({ ...s, cartHint: iapPriceCopy("product").purchaseUnavailable });
       if (!id) return derive({ ...s, cartHint: copyParam("product.cartHintNoProduct", "No product to add.") });
       // A second tap while the first write is in flight must not add the line twice.
       if (s.adding) return s;
@@ -571,6 +589,9 @@ const svc = defineService<S, {
           ? copyParam("product.cartHintOffline", "Reconnect to choose options and add this to your cart.")
           : optionsHint(s.optionGroups, s.selection) || copyParam("product.cartHintNoVariant", "That combination is not available. Try another.") });
       }
+      if (lastLoadedId !== id || lastProduct?.productType?.toLowerCase() !== "physical") {
+        return derive({ ...s, cartHint: copyParam("product.cartHintOffline", "Reconnect to choose options and add this to your cart.") });
+      }
       // Which variant the choice resolves to is the SDK's job — V3 addresses the
       // choice by variantId, V1 by a name→choice map, and it throws rather than
       // hand back a payload that would add a line with no variant.
@@ -613,7 +634,7 @@ const svc = defineService<S, {
     toggleSave: (s) => {
       if (s.status !== "ready" || !s.name || !inputId()) return s;
       try {
-        const saved = toggleSavedProduct({ id: inputId(), name: s.name, price: s.price, image: s.image });
+        const saved = toggleSavedProduct({ id: inputId(), name: s.name, price: lastProduct ? productPrice(lastProduct) : s.commercePrice ?? "", image: s.image });
         return derive({ ...s, saved, saveHint: saved
           ? copyParam("product.saveSuccess", "Saved on this device.")
           : copyParam("product.saveRemoved", "Removed from saved products.") });

package/templates/beauty-salon/tier5-src/himi-store-saved/index.ts

@@ -1,9 +1,9 @@
-import { defineService } from "@himalaya/state";
+import { withIapPresentation } from "../_shared/iap-presentation.js";
 import { withEmptyFlags } from "../_shared/empty-flags.js";
 import { readSavedProducts, removeSavedProduct, type SavedProduct } from "../_shared/himi-store-saved.js";
 import { stashCopy, copyParam } from "../_shared/himi-copy.js";
 
-interface Row extends SavedProduct { initial: string; noImage: boolean; hasImage: boolean; detailScreenId: string }
+interface Row extends SavedProduct { commercePrice?: string; initial: string; noImage: boolean; hasImage: boolean; detailScreenId: string }
 interface S {
   status: "loading" | "ready" | "error";
   rows: Row[];
@@ -18,11 +18,16 @@ function shape(s: Pick<S, "status" | "rows" | "error">): S {
   return { ...s, isLoading: s.status === "loading", notLoading: s.status !== "loading", notErrored: s.status !== "error", noEmpty: s.status !== "ready" || s.rows.length > 0, emptyText: copyParam("savedProducts.empty", "Save a product to find it here later.") };
 }
 function loadRows(): Row[] {
-  return readSavedProducts().map(row => ({ ...row, initial: row.name.slice(0, 1).toUpperCase(), hasImage: !!row.image, noImage: !row.image, detailScreenId: "himi_product" }));
+  return readSavedProducts().map(row => ({ ...row, commercePrice: row.price, initial: row.name.slice(0, 1).toUpperCase(), hasImage: !!row.image, noImage: !row.image, detailScreenId: "himi_product" }));
 }
 function failed(s: S): S {
   return shape({ ...s, status: "error", error: copyParam("savedProducts.error", "Could not update saved products. Try again.") });
 }
+const defineService = withIapPresentation<S>({
+  prefix: "savedProducts", transientKeys: ["rows"], contentActions: ["load", "remove"],
+  items: state => state.rows.map(row => ({ reference: { kind: "storesProduct", id: row.id }, commerceDisplayPrice: row.commercePrice ?? row.price })),
+  present: (state, price) => ({ ...state, rows: state.rows.map(row => ({ ...row, price: price(row.id, row.commercePrice ?? row.price) })) }),
+});
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => S;
   remove: (s: S, arg?: unknown) => S;

package/templates/beauty-salon/tier5-src/himi-store-shop/index.ts

@@ -1,4 +1,5 @@
 // Tier-5 bundle: himi-store — product catalog.
+import { withIapPresentation } from "../_shared/iap-presentation.js";
 import { storeCollectionSaving } from "../_shared/himi-store-collection.js";
 import { defineBackendCollection } from "../_shared/collection-service.js";
 import { getCurrentCart } from "@himalaya/wix-ecom";
@@ -37,6 +38,7 @@ interface Row {
   id: string;
   name: string;
   subtitle: string;
+  commercePrice: string;
   image: string;
   initial: string;
   hasImage: boolean;
@@ -53,6 +55,7 @@ interface S {
   fromCache?: boolean;
   query: string;
   all: Row[];
+  collection?: { items: Array<Row & { collectionSubtitle: string }> };
   results: Row[];
   /** RFC 0008 cursor paging — non-empty while more pages exist ("" ⇒ exhausted). */
   nextCursor: string;
@@ -74,6 +77,7 @@ function row(p: StoreProduct): Row {
     id,
     name,
     subtitle: productPrice(p),
+    commercePrice: productPrice(p),
     image,
     initial: initials(name),
     hasImage: !!image,
@@ -99,6 +103,12 @@ function derive(s: S): S {
 
 let cacheWrite = Promise.resolve();
 const svc = defineBackendCollection("himiStoreShop", {
+  register: withIapPresentation<S>({
+    prefix: "shop", transientKeys: ["all", "results", "collection"], contentActions: ["collectionDataChanged"],
+    items: state => state.results.map(row => ({ reference: { kind: "storesProduct", id: row.id }, commerceDisplayPrice: row.commercePrice ?? row.subtitle })),
+    present: (state, price) => ({ ...state, results: state.results.map(row => ({ ...row, subtitle: price(row.id) })), all: state.all.map(row => ({ ...row, subtitle: price(row.id) })),
+      ...(state.collection ? { collection: { ...state.collection, items: state.collection.items.map(row => ({ ...row, collectionSubtitle: price(row.id) })) } } : {}) }),
+  }),
   state: derive({ status: "loading", query: "", all: [], results: [], nextCursor: "",
     emptyText: "", countLabel: "", cartCount: 0, isLoading: true, notLoading: false,
     isErrored: false, notErrored: true, noEmpty: true }),

package/templates/beauty-salon/tier5-src/wix-spaces-plan-detail/index.ts

@@ -1,17 +1,22 @@
 // Tier-5 bundle: Wix Spaces clone — Pricing plan detail (ON-DEVICE, site-scoped).
 // himalaya.input.id carries the plan id; fetched via getPlan.
-import { defineService } from "@himalaya/state";
+import { withIapPresentation } from "../_shared/iap-presentation.js";
 import { getPlan, type WixPlan } from "@himalaya/wix-pricing-plans";
 import { presence, presenceAfterError, detailInputId, type PresenceFlags } from "../_shared/detail-presence.js";
 
 interface S extends PresenceFlags { status: "loading" | "ready"; name: string; price: string; description: string; perks: string }
 
 function priceOf(p: WixPlan): string {
-  const m = p.pricing?.price as unknown as { formattedAmount?: string; amount?: string; currency?: string } | undefined;
+  const m = p.pricing?.price as unknown as { formattedAmount?: string; amount?: string; value?: string; currency?: string } | undefined;
   if (!m) return p.pricing?.freeTrialDays ? "Free trial" : "";
-  return m.formattedAmount || [m.amount, m.currency].filter(Boolean).join(" ");
+  return m.formattedAmount || [m.amount ?? m.value, m.currency].filter(Boolean).join(" ");
 }
 
+const defineService = withIapPresentation<S>({
+  prefix: "plans", transientKeys: ["price"], contentActions: ["load"],
+  items: state => detailInputId() ? [{ reference: { kind: "pricingPlan", id: detailInputId() }, commerceDisplayPrice: state.price }] : [],
+  present: (state, price) => ({ ...state, price: price(detailInputId()) }),
+});
 const svc = defineService<S, { load: (s: S) => Promise<S> }>("spacesPlanDetail", {
   state: { status: "loading", name: "", price: "", description: "", perks: "", ...presence("loading") },
   actions: {

package/templates/beauty-salon-owner/tier5-src/_shared/collection-contract.ts

@@ -87,7 +87,7 @@ export const COLLECTIONS: Record<string, CollectionConfig> = {
   himiBrandedOrders: { rows: 'rows', title: 'title', subtitle: 'subtitle', view: 'list', backendQuery: true,
     searchPlaceholder: 'Search by order number', countNoun: ['order', 'orders'], filterValues: ['Not fulfilled', 'Partially fulfilled', 'Fulfilled'],
     sortLabels: { default: 'Newest', az: 'Oldest', za: 'Order # ↓' } },
-  himiBrandedPlans: { rows: 'rows', title: 'name', subtitle: 'description', metadata: ['badge', 'priceLine', 'periodLine', 'trialBadge', 'perk1', 'perk2', 'perk3'], view: 'grid', gridColumns: 1, metaMaxLines: 8, countNoun: ['plan', 'plans'] },
+  himiBrandedPlans: { rows: 'rows', title: 'name', subtitle: 'description', metadata: ['badge', 'priceLine', 'periodLine', 'trialBadge', 'perk1', 'perk2', 'perk3', 'joinNote'], view: 'grid', gridColumns: 1, metaMaxLines: 8, countNoun: ['plan', 'plans'] },
   himiBrandedPrograms: { rows: 'rows', title: 'name', subtitle: 'description', image: 'image', view: 'grid' },
   himiBrandedCoupons: { rows: 'coupons', title: 'name', subtitle: 'subtitle', view: 'list', primaryVerb: { label: 'Get code' } },
   himiBrandedNotifications: { rows: 'items', title: 'name', subtitle: 'subtitle', image: 'photo', metadata: ['unreadDot'], view: 'list' },

package/templates/beauty-salon-owner/tier5-src/_shared/collection-service.ts

@@ -323,6 +323,7 @@ export function decorateCollection(name: string, def: { state: State; actions?:
 /** Domain-owned page source with shared query controls. Publishing uses a normal
  * reducer and reads the private controller snapshot, never an SDUI payload. */
 export function defineBackendCollection<S extends object, Row extends object>(name: string, options: {
+  register?: typeof register;
   /** Revalidate already opened pages on navigation return; explicit refresh resets. */
   restorePagesOnLoad?: boolean;
   /** The load action's argument (onAppear params beyond `copy`), before the query runs — for a
@@ -342,7 +343,7 @@ export function defineBackendCollection<S extends object, Row extends object>(na
     controller: controller as unknown as BackendCollection['controller'],
     apply: (state, page) => options.apply(state as S, page as unknown as CollectionQueryState<Row>) as State,
   });
-  const handle = register(name, definition);
+  const handle = (options.register ?? register)(name, definition);
   publish = () => handle.collectionDataChanged();
   return handle;
 }
@@ -350,7 +351,7 @@ export function defineBackendCollection<S extends object, Row extends object>(na
 /** Keep the domain service's existing TypeScript API. Extra collection verbs are
  * dispatched through SDUI and do not widen the native capability surface. */
 export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) =>
-  register(name, decorateCollection(name, def as unknown as { state: State; actions?: Record<string, Reducer> }))) as typeof register;
+  register(name, { ...def, ...decorateCollection(name, def as unknown as { state: State; actions?: Record<string, Reducer> }) } as ServiceDefinition<State>)) as typeof register;
 
 /** Domains can supply their existing saved-items store without putting domain
  * data or mutations in the shared collection layer. */

package/templates/beauty-salon-owner/tier5-src/_shared/home-service.ts

@@ -87,4 +87,5 @@ export function decorateHome(def: { state: State; actions?: Record<string, Actio
   actions.homeMoveDown = change(id => { const index = prefs.order.indexOf(id); if (index >= 0 && index < prefs.order.length - 1) [prefs.order[index], prefs.order[index + 1]] = [prefs.order[index + 1], prefs.order[index]]; });
   return { state: derive(def.state), actions };
 }
-export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) => register(name, decorateHome(def as unknown as { state: State; actions?: Record<string, Action> }))) as typeof register;
+export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) =>
+  register(name, { ...def, ...decorateHome(def as unknown as { state: State; actions?: Record<string, Action> }) })) as typeof register;

package/templates/branded-lite/config.ts

@@ -37,7 +37,7 @@ export default defineApp({
     actions: "http://localhost:8190/v1/actions",
     sync: "http://localhost:8190/v1/sync",
   },
-  capabilities: ["live_activity","push","share","secure_storage","open_url","calendar","local_database","media_playback","wix_api","wix_platform","app_info","release_control","clipboard","motion"],
+  capabilities: ["live_activity","push","share","secure_storage","open_url","calendar","local_database","media_playback","wix_api","wix_platform","app_info","iap","release_control","clipboard","motion"],
   designTokensPath: "./tokens.json",
   navigation: {
     "navKind": "responsive",

package/templates/branded-lite/dev/index.ts

@@ -2971,7 +2971,9 @@ const SCREENS = runtimeSetting({
       "integrity": "",
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
-        "wix_api"
+        "wix_api",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.2.0",
       "bundleVersion": "0.0.1"
@@ -8896,7 +8898,9 @@ const SCREENS = runtimeSetting({
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
         "wix_api",
-        "local_database"
+        "local_database",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
@@ -9364,7 +9368,11 @@ const SCREENS = runtimeSetting({
       "url": "http://localhost:8190/v1/bundles/himi-store-saved",
       "integrity": "",
       "contentType": "application/javascript+ts-bundle",
-      "declaredCapabilities": [],
+      "declaredCapabilities": [
+        "wix_api",
+        "iap",
+        "app_info"
+      ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
     }
@@ -10890,7 +10898,9 @@ const SCREENS = runtimeSetting({
         "wix_cashier",
         "open_url",
         "local_database",
-        "wix_platform"
+        "wix_platform",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
@@ -25546,7 +25556,8 @@ const SCREENS = runtimeSetting({
                                                 "package": "himalaya",
                                                 "type": "Button",
                                                 "props": {
-                                                  "title": "Join on website",
+                                                  "title": "$item.joinLabel",
+                                                  "disabledPath": "$item.joinDisabled",
                                                   "style": "primary",
                                                   "fullWidth": true,
                                                   "action": {
@@ -25567,7 +25578,8 @@ const SCREENS = runtimeSetting({
                                                 "package": "himalaya",
                                                 "type": "Button",
                                                 "props": {
-                                                  "title": "Join on website",
+                                                  "title": "$item.joinLabel",
+                                                  "disabledPath": "$item.joinDisabled",
                                                   "style": "secondary",
                                                   "fullWidth": true,
                                                   "action": {
@@ -25748,7 +25760,8 @@ const SCREENS = runtimeSetting({
                                                         "package": "himalaya",
                                                         "type": "Button",
                                                         "props": {
-                                                          "title": "Join on website",
+                                                          "title": "$item.joinLabel",
+                                                          "disabledPath": "$item.joinDisabled",
                                                           "style": "primary",
                                                           "fullWidth": true,
                                                           "action": {
@@ -25769,7 +25782,8 @@ const SCREENS = runtimeSetting({
                                                         "package": "himalaya",
                                                         "type": "Button",
                                                         "props": {
-                                                          "title": "Join on website",
+                                                          "title": "$item.joinLabel",
+                                                          "disabledPath": "$item.joinDisabled",
                                                           "style": "secondary",
                                                           "fullWidth": true,
                                                           "action": {
@@ -26174,7 +26188,8 @@ const SCREENS = runtimeSetting({
                                                 "package": "himalaya",
                                                 "type": "Button",
                                                 "props": {
-                                                  "title": "Join on website",
+                                                  "title": "$item.joinLabel",
+                                                  "disabledPath": "$item.joinDisabled",
                                                   "style": "primary",
                                                   "fullWidth": true,
                                                   "action": {
@@ -26195,7 +26210,8 @@ const SCREENS = runtimeSetting({
                                                 "package": "himalaya",
                                                 "type": "Button",
                                                 "props": {
-                                                  "title": "Join on website",
+                                                  "title": "$item.joinLabel",
+                                                  "disabledPath": "$item.joinDisabled",
                                                   "style": "secondary",
                                                   "fullWidth": true,
                                                   "action": {
@@ -26376,7 +26392,8 @@ const SCREENS = runtimeSetting({
                                                         "package": "himalaya",
                                                         "type": "Button",
                                                         "props": {
-                                                          "title": "Join on website",
+                                                          "title": "$item.joinLabel",
+                                                          "disabledPath": "$item.joinDisabled",
                                                           "style": "primary",
                                                           "fullWidth": true,
                                                           "action": {
@@ -26397,7 +26414,8 @@ const SCREENS = runtimeSetting({
                                                         "package": "himalaya",
                                                         "type": "Button",
                                                         "props": {
-                                                          "title": "Join on website",
+                                                          "title": "$item.joinLabel",
+                                                          "disabledPath": "$item.joinDisabled",
                                                           "style": "secondary",
                                                           "fullWidth": true,
                                                           "action": {
@@ -26975,7 +26993,8 @@ const SCREENS = runtimeSetting({
                                               "package": "himalaya",
                                               "type": "Button",
                                               "props": {
-                                                "title": "Join on website",
+                                                "title": "$item.joinLabel",
+                                                "disabledPath": "$item.joinDisabled",
                                                 "style": "primary",
                                                 "fullWidth": true,
                                                 "action": {
@@ -26996,7 +27015,8 @@ const SCREENS = runtimeSetting({
                                               "package": "himalaya",
                                               "type": "Button",
                                               "props": {
-                                                "title": "Join on website",
+                                                "title": "$item.joinLabel",
+                                                "disabledPath": "$item.joinDisabled",
                                                 "style": "secondary",
                                                 "fullWidth": true,
                                                 "action": {
@@ -27271,7 +27291,9 @@ const SCREENS = runtimeSetting({
         "wix_api",
         "wix_cashier",
         "open_url",
-        "wix_platform"
+        "wix_platform",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
@@ -27527,7 +27549,9 @@ const SCREENS = runtimeSetting({
       "integrity": "",
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
-        "wix_api"
+        "wix_api",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
@@ -81851,7 +81875,9 @@ const TEMPLATED: { pattern: string; display: string; liveSeed?: LiveSeed; static
       "declaredCapabilities": [
         "wix_api",
         "local_database",
-        "live_activity"
+        "live_activity",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"
@@ -82733,7 +82759,9 @@ const TEMPLATED: { pattern: string; display: string; liveSeed?: LiveSeed; static
         "wix_api",
         "share",
         "local_database",
-        "open_url"
+        "open_url",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "0.1.0",
       "bundleVersion": "0.0.1"

package/templates/branded-lite/tier5-src/_shared/collection-contract.ts

@@ -87,7 +87,7 @@ export const COLLECTIONS: Record<string, CollectionConfig> = {
   himiBrandedOrders: { rows: 'rows', title: 'title', subtitle: 'subtitle', view: 'list', backendQuery: true,
     searchPlaceholder: 'Search by order number', countNoun: ['order', 'orders'], filterValues: ['Not fulfilled', 'Partially fulfilled', 'Fulfilled'],
     sortLabels: { default: 'Newest', az: 'Oldest', za: 'Order # ↓' } },
-  himiBrandedPlans: { rows: 'rows', title: 'name', subtitle: 'description', metadata: ['badge', 'priceLine', 'periodLine', 'trialBadge', 'perk1', 'perk2', 'perk3'], view: 'grid', gridColumns: 1, metaMaxLines: 8, countNoun: ['plan', 'plans'] },
+  himiBrandedPlans: { rows: 'rows', title: 'name', subtitle: 'description', metadata: ['badge', 'priceLine', 'periodLine', 'trialBadge', 'perk1', 'perk2', 'perk3', 'joinNote'], view: 'grid', gridColumns: 1, metaMaxLines: 8, countNoun: ['plan', 'plans'] },
   himiBrandedPrograms: { rows: 'rows', title: 'name', subtitle: 'description', image: 'image', view: 'grid' },
   himiBrandedCoupons: { rows: 'coupons', title: 'name', subtitle: 'subtitle', view: 'list', primaryVerb: { label: 'Get code' } },
   himiBrandedNotifications: { rows: 'items', title: 'name', subtitle: 'subtitle', image: 'photo', metadata: ['unreadDot'], view: 'list' },

package/templates/branded-lite/tier5-src/_shared/collection-service.ts

@@ -323,6 +323,7 @@ export function decorateCollection(name: string, def: { state: State; actions?:
 /** Domain-owned page source with shared query controls. Publishing uses a normal
  * reducer and reads the private controller snapshot, never an SDUI payload. */
 export function defineBackendCollection<S extends object, Row extends object>(name: string, options: {
+  register?: typeof register;
   /** Revalidate already opened pages on navigation return; explicit refresh resets. */
   restorePagesOnLoad?: boolean;
   /** The load action's argument (onAppear params beyond `copy`), before the query runs — for a
@@ -342,7 +343,7 @@ export function defineBackendCollection<S extends object, Row extends object>(na
     controller: controller as unknown as BackendCollection['controller'],
     apply: (state, page) => options.apply(state as S, page as unknown as CollectionQueryState<Row>) as State,
   });
-  const handle = register(name, definition);
+  const handle = (options.register ?? register)(name, definition);
   publish = () => handle.collectionDataChanged();
   return handle;
 }
@@ -350,7 +351,7 @@ export function defineBackendCollection<S extends object, Row extends object>(na
 /** Keep the domain service's existing TypeScript API. Extra collection verbs are
  * dispatched through SDUI and do not widen the native capability surface. */
 export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) =>
-  register(name, decorateCollection(name, def as unknown as { state: State; actions?: Record<string, Reducer> }))) as typeof register;
+  register(name, { ...def, ...decorateCollection(name, def as unknown as { state: State; actions?: Record<string, Reducer> }) } as ServiceDefinition<State>)) as typeof register;
 
 /** Domains can supply their existing saved-items store without putting domain
  * data or mutations in the shared collection layer. */

package/templates/branded-lite/tier5-src/_shared/himi-store-collection.ts

@@ -8,7 +8,7 @@ export const storeCollectionSaving: CollectionSaving = {
     for (const row of rows) {
       if (typeof row.id !== 'string' || typeof row.name !== 'string') continue;
       products.set(row.id, { id: row.id, name: row.name,
-        price: typeof row.subtitle === 'string' ? row.subtitle : '',
+        price: typeof row.commercePrice === 'string' ? row.commercePrice : typeof row.subtitle === 'string' ? row.subtitle : '',
         image: typeof row.image === 'string' ? row.image : '' });
     }
     const selected = ids.map(id => products.get(id));

package/templates/branded-lite/tier5-src/_shared/home-service.ts

@@ -87,4 +87,5 @@ export function decorateHome(def: { state: State; actions?: Record<string, Actio
   actions.homeMoveDown = change(id => { const index = prefs.order.indexOf(id); if (index >= 0 && index < prefs.order.length - 1) [prefs.order[index], prefs.order[index + 1]] = [prefs.order[index + 1], prefs.order[index]]; });
   return { state: derive(def.state), actions };
 }
-export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) => register(name, decorateHome(def as unknown as { state: State; actions?: Record<string, Action> }))) as typeof register;
+export const defineService: typeof register = ((name: string, def: ServiceDefinition<unknown>) =>
+  register(name, { ...def, ...decorateHome(def as unknown as { state: State; actions?: Record<string, Action> }) })) as typeof register;

package/templates/branded-lite/tier5-src/_shared/iap-presentation.ts

@@ -0,0 +1,53 @@
+import { defineService, type ServiceDefinition } from "@himalaya/state";
+import { createIapCommerce, type IapCommerce } from "@himalaya/iap-checkout";
+import { iapPriceFields, type IapCatalogItem } from "@himalaya/iap";
+import { iapPriceCopy, resetUnhydratedKeysOnOlderRuntime } from "./iap-worker.js";
+
+// Presentation only. Checkout, mapping, cache, session and refresh policy stay in the shared flow.
+export function withIapPresentation<S extends object>(options: {
+  register?: typeof defineService;
+  onCreate?(commerce: IapCommerce): void;
+  onContent?(state: S): void;
+  items(state: S): IapCatalogItem[];
+  present(state: S, price: (id: string, commercePrice?: string) => string, allowed: (id: string) => boolean): S;
+  contentActions: string[];
+  transientKeys: (keyof S & string)[];
+  prefix: string;
+}): typeof defineService {
+  return ((name: string, definition: ServiceDefinition<S>) => {
+    const commerce = createIapCommerce({ onChange: () => { void service.iapPublish(); } });
+    options.onCreate?.(commerce);
+    let items: IapCatalogItem[] = [];
+    let contentVersion = 0;
+    const project = (state: S): S => {
+      const price = (id: string, commercePrice?: string) => {
+        const item = items.find(item => item.reference.id === id);
+        if (!item) return "";
+        const view = commerce.pricing.view(item.reference);
+        return view.route === "disabled" || view.route === "regular" ? commercePrice ?? item.commerceDisplayPrice ?? "" : iapPriceFields(view, iapPriceCopy(options.prefix)).priceText;
+      };
+      const allowed = (id: string) => commerce.pricing.checkoutGuard({ kind: "storesProduct", id }).allowed;
+      const poll = commerce.pollDirective(`${name}.iapPoll`);
+      return { ...options.present(state, price, allowed), ...(poll ? { _poll: poll } : {}) };
+    };
+    const actions = Object.fromEntries(Object.entries(definition.actions ?? {}).map(([action, reduce]) => [action, async (state: S, ...args: never[]) => {
+      const content = options.contentActions.includes(action);
+      const version = action === "load" ? ++contentVersion : contentVersion;
+      const next = await reduce(state, ...args);
+      if (!next || (content && version !== contentVersion)) return undefined;
+      if (content) {
+        options.onContent?.(next);
+        items = options.items(next);
+        void commerce.loadPrices(items);
+      }
+      return project(next);
+    }]));
+    const service = (options.register ?? defineService)(name, {
+      ...definition, notHydrated: [...(definition.notHydrated ?? []), ...options.transientKeys],
+      actions: { ...actions, iapPublish: project, iapPoll: async () => { await commerce.poll(); return undefined; },
+        iapRefresh: async () => { await commerce.loadPrices(items); return undefined; } },
+    });
+    resetUnhydratedKeysOnOlderRuntime(service, definition.state, options.transientKeys);
+    return service;
+  }) as unknown as typeof defineService;
+}