@wix/himalaya-cli 0.1608.0 → 0.1610.0

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

@@ -79085,6 +79085,20 @@ const SCREENS = runtimeSetting({
                                                                           "collapseWhenEmpty": true
                                                                         }
                                                                       }
+                                                                    },
+                                                                    {
+                                                                      "id": "",
+                                                                      "body": {
+                                                                        "package": "himalaya",
+                                                                        "type": "Text",
+                                                                        "props": {
+                                                                          "text": "$item.priceLine",
+                                                                          "style": "caption",
+                                                                          "color": "textOnAccent",
+                                                                          "maxLines": 1,
+                                                                          "collapseWhenEmpty": true
+                                                                        }
+                                                                      }
                                                                     }
                                                                   ]
                                                                 }
@@ -79163,6 +79177,20 @@ const SCREENS = runtimeSetting({
                                                   "collapseWhenEmpty": true
                                                 }
                                               }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.priceLine",
+                                                  "style": "caption",
+                                                  "color": "accentPrimary",
+                                                  "maxLines": 1,
+                                                  "collapseWhenEmpty": true
+                                                }
+                                              }
                                             }
                                           ]
                                         }
@@ -81541,7 +81569,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"
@@ -81715,6 +81745,20 @@ const SCREENS = runtimeSetting({
                                           "collapseWhenEmpty": true
                                         }
                                       }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Text",
+                                        "props": {
+                                          "text": "$item.priceLine",
+                                          "style": "footnote",
+                                          "color": "accentPrimary",
+                                          "maxLines": 1,
+                                          "collapseWhenEmpty": true
+                                        }
+                                      }
                                     }
                                   ]
                                 }
@@ -81947,7 +81991,9 @@ const SCREENS = runtimeSetting({
       "integrity": "",
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
-        "wix_api"
+        "wix_api",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "1.2.0",
       "bundleVersion": "0.0.1"
@@ -82036,6 +82082,62 @@ const SCREENS = runtimeSetting({
                 }
               }
             },
+            {
+              "id": "himi_video.price",
+              "body": {
+                "package": "himalaya",
+                "type": "Text",
+                "props": {
+                  "text": "$service:himiBrandedVideo.priceText",
+                  "style": "title2",
+                  "color": "accentPrimary",
+                  "collapseWhenEmpty": true
+                }
+              }
+            },
+            {
+              "id": "himi_video.price_note",
+              "body": {
+                "package": "himalaya",
+                "type": "Text",
+                "props": {
+                  "text": "$service:himiBrandedVideo.priceNote",
+                  "style": "caption",
+                  "color": "textSecondary",
+                  "collapseWhenEmpty": true
+                }
+              }
+            },
+            {
+              "id": "himi_video.purchase_note",
+              "body": {
+                "package": "himalaya",
+                "type": "Text",
+                "props": {
+                  "text": "$service:himiBrandedVideo.purchaseNote",
+                  "style": "footnote",
+                  "color": "textSecondary",
+                  "collapseWhenEmpty": true
+                }
+              }
+            },
+            {
+              "id": "himi_video.price_retry",
+              "body": {
+                "package": "himalaya",
+                "type": "Button",
+                "props": {
+                  "title": "Try again",
+                  "style": "secondary",
+                  "action": {
+                    "actionId": "tier5.himiBrandedVideo.refreshPrice"
+                  }
+                }
+              },
+              "modifiers": {
+                "hiddenPath": "$service:himiBrandedVideo.hidePriceRetry"
+              }
+            },
             {
               "id": "",
               "body": {
@@ -82232,7 +82334,9 @@ const SCREENS = runtimeSetting({
       "integrity": "",
       "contentType": "application/javascript+ts-bundle",
       "declaredCapabilities": [
-        "wix_api"
+        "wix_api",
+        "iap",
+        "app_info"
       ],
       "minBinaryVersion": "1.2.0",
       "bundleVersion": "0.0.1"

package/templates/branded-lite/tier5-src/himi-branded-lite-video/index.ts

@@ -1,5 +1,11 @@
+// App Store prices come from the shared IAP catalog layer (@himalaya/iap): a video with a one-time Sale
+// price, in a channel that does not require a subscription, is priced as `wixVideo` under its id. Prices
+// only: buying a video stays off (VIDEOS_APPLE_SALES_ENABLED), so the screen says so instead of a Buy.
 import { descriptionBody } from "../_shared/rich-body.js";
 import { defineService } from "@himalaya/state";
+import { iapPriceFields, wixVideoItem, type IapCatalogItem } from "@himalaya/iap";
+import { createIapCommerce } from "@himalaya/iap-checkout";
+import { iapPriceCopy, resetUnhydratedKeysOnOlderRuntime } from "../_shared/iap-worker.js";
 import { LOADING, loaded, loadFailed, needsSignIn, type LoadFlags } from "../_shared/branded-load-state.js";
 import { copyParam, stashCopy } from "../_shared/himi-copy.js";
 import {
@@ -7,12 +13,14 @@ import {
 } from "@himalaya/wix-video";
 import type { MediaItem } from "@himalaya/core";
 
-interface VideoRow { id: string; channelId: string; title: string; subtitle: string; meta: string; coverUrl: string; hasCover: boolean; noCover: boolean }
+interface VideoRow { id: string; channelId: string; title: string; subtitle: string; meta: string; coverUrl: string; hasCover: boolean; noCover: boolean; priceLine: string }
 interface S extends LoadFlags {
   id: string; channelId: string;
   title: string; description: string; videos: VideoRow[];
   items: MediaItem[]; hidePlayer: boolean; hideNotFound: boolean; noEntity: boolean; hideRefresh: boolean; emptyText: string; message: string;
   playbackState: "loading" | "ready" | "processing" | "denied" | "unavailable" | "error";
+  /** This run's App Store price of the video, its loading/unavailable label, or "". */
+  priceText: string; priceNote: string; purchaseNote: string; hidePriceRetry: boolean;
 }
 const COPY = { prefix: "video", empty: "No videos in this channel yet.", error: "Videos couldn't be loaded.", signIn: "Sign in to watch videos.", sample: () => [] };
 function input(key: string): string {
@@ -20,21 +28,56 @@ function input(key: string): string {
   return typeof value === "string" ? value : "";
 }
 let generation = 0;
-const initial: S = { ...LOADING, id: "", channelId: "", title: "", description: "", videos: [], items: [], hidePlayer: true, hideNotFound: true, noEntity: false, hideRefresh: false, emptyText: "", message: "", playbackState: "loading" };
+const initial: S = { ...LOADING, id: "", channelId: "", title: "", description: "", videos: [], items: [], hidePlayer: true, hideNotFound: true, noEntity: false, hideRefresh: false, emptyText: "", message: "", playbackState: "loading",
+  priceText: "", priceNote: "", purchaseNote: "", hidePriceRetry: true };
+
+// ── App Store prices ─────
+// One writer: `load` keeps what it read in `shown` and the priced items here; every repaint goes
+// through the synchronous `publish`, which reads the latest content and prices together.
+const commerce = createIapCommerce({ onChange: () => { void svc.publish(); } });
+const pricing = commerce.pricing;
+let shown: S = { ...initial };
+/** The item the detail prices: a locked video sold once. Rows carry their own. */
+let detailItem: IapCatalogItem | undefined;
+let rowItems: Array<IapCatalogItem | undefined> = [];
+
+async function priceContent(): Promise<void> {
+  const items = [...(detailItem ? [detailItem] : []), ...rowItems.flatMap((item) => item ?? [])];
+  if (items.length) await commerce.loadPrices(items);
+  void svc.publish();
+}
+
+function priced(state: S): S {
+  const copy = iapPriceCopy("video");
+  const videos = state.videos.map((row, i) => ({ ...row, priceLine: rowItems[i] ? iapPriceFields(pricing.view(rowItems[i]!.reference), copy).priceText : "" }));
+  if (!detailItem) return { ...state, videos, priceText: "", priceNote: "", purchaseNote: "", hidePriceRetry: true };
+  const view = pricing.view(detailItem.reference);
+  if (view.route === "disabled") return { ...state, videos, priceText: "", priceNote: "", purchaseNote: "", hidePriceRetry: true };
+  const fields = iapPriceFields(view, copy);
+  return { ...state, videos, priceText: fields.priceText, priceNote: fields.priceNote, purchaseNote: fields.actionNote,
+    // An incomplete host scope (a failed app-identity read) reads as non-retryable; Retry re-reads it.
+    hidePriceRetry: fields.hidePriceRetry && commerce.scopeComplete() };
+}
 function unavailable(s: S, kind: S["playbackState"], message: string): S {
   return { ...s, ...loaded("videos", [], { ...COPY, empty: "" }), items: [], hidePlayer: true, hideNotFound: kind !== "unavailable", noEntity: kind === "unavailable", hideRefresh: kind === "unavailable", emptyText: "", message, playbackState: kind };
 }
-const svc = defineService<S, { reset: (s: S) => S; load: (s: S, arg?: unknown) => Promise<S | undefined> }>("himiBrandedVideo", {
+type Actions = { reset: (s: S) => S; publish: (s: S) => S; refreshPrice: (s: S) => Promise<undefined>; start: (s: S) => S; load: (s: S, arg?: unknown) => Promise<undefined> };
+const svc = defineService<S, Actions>("himiBrandedVideo", {
   state: initial,
   notHydrated: Object.keys(initial) as (keyof S & string)[],
   actions: {
-    reset: () => ({ ...initial }),
+    reset: () => { shown = { ...initial }; detailItem = undefined; rowItems = []; return { ...initial }; },
+    publish: () => priced(shown),
+    start: () => ({ ...priced(shown), _poll: pricing.pollDirective("himiBrandedVideo.refreshPrice") } as S),
+    refreshPrice: async () => { await priceContent(); return undefined; },
     load: async (_s, arg) => {
       stashCopy(arg);
       const request = ++generation;
       // Revoke the previous item immediately while current access is rechecked.
       await svc.reset();
       let next: S = { ...initial, id: input("id"), channelId: input("channelId") };
+      let nextDetail: IapCatalogItem | undefined;
+      let nextRows: Array<IapCatalogItem | undefined> = [];
       try {
         const { id, channelId } = next;
         const channelScreen = input("screenId") === "himi_video_channel";
@@ -45,9 +88,11 @@ const svc = defineService<S, { reset: (s: S) => S; load: (s: S, arg?: unknown) =
           const untitled = copyParam("video.untitled", "Video");
           next = { ...next, ...loaded("videos", videos.map(v => {
             const card = videoCard({ channel, video: v }, untitled);
-            return { id: v.id, channelId: id, title: card.title, meta: card.duration, coverUrl: card.coverUrl, hasCover: card.hasCover, noCover: card.noCover, subtitle:
+            return { id: v.id, channelId: id, title: card.title, meta: card.duration, coverUrl: card.coverUrl, hasCover: card.hasCover, noCover: card.noCover, priceLine: "", subtitle:
               v.content?.status !== "READY" ? copyParam("video.processingText", "Video is processing.") : "" };
           }), COPY), playbackState: "ready" };
+          // A video the viewer can already watch (bought, rented, or through the channel) is not priced.
+          nextRows = next.videos.map((row) => { const v = videos.find((video) => video.id === row.id); return v && !canWatchVideo(channel, v) ? wixVideoItem(channel, v) : undefined; });
         } else {
           const data = await getVideo(channelId, id);
           const channel = data?.channel;
@@ -59,7 +104,10 @@ const svc = defineService<S, { reset: (s: S) => S; load: (s: S, arg?: unknown) =
             if (video.content?.status !== "READY") next = isVideoProcessing(video) ?
               unavailable(next, "processing", copyParam("video.processingText", "Video is processing. Try again later.")) :
               unavailable(next, "unavailable", copyParam("video.unavailableText", "This video is unavailable."));
-            else if (!canWatchVideo(channel, video)) next = unavailable(next, "denied", copyParam("video.deniedText", "Your current membership or purchase does not allow this video."));
+            else if (!canWatchVideo(channel, video)) {
+              next = unavailable(next, "denied", copyParam("video.deniedText", "Your current membership or purchase does not allow this video."));
+              nextDetail = wixVideoItem(channel, video);
+            }
             else {
               let item: MediaItem | undefined;
               if (video.source === "YOUTUBE") {
@@ -81,10 +129,17 @@ const svc = defineService<S, { reset: (s: S) => S; load: (s: S, arg?: unknown) =
           denied ? unavailable(next, "denied", copyParam("video.deniedText", "Your current membership or purchase does not allow this video.")) :
           { ...next, ...loadFailed("videos", error, COPY), playbackState: "error", items: [], hidePlayer: true };
       }
-      if (request === generation) return next;
+      if (request !== generation) return undefined;
+      shown = next;
+      detailItem = nextDetail;
+      rowItems = nextRows;
+      void svc.publish();
+      void priceContent();
       return undefined;
     },
   },
 });
+resetUnhydratedKeysOnOlderRuntime(svc, initial, Object.keys(initial) as (keyof S & string)[]);
+void svc.start();
 svc.load();
 export { svc };

package/templates/branded-lite/tier5-src/himi-branded-lite-videos/index.ts

@@ -8,11 +8,19 @@
 // channels taking turns). A failed query is an error with Retry (or Sign in), an
 // empty one a real empty state; sample channels appear only in the host's explicit
 // sample preview (_shared/branded-load-state.ts).
-import { defineService } from "../_shared/collection-service.js";
+//
+// App Store prices come from the shared IAP catalog layer (@himalaya/iap): a carousel video with a
+// one-time Sale price is priced as `wixVideo`. An app that sells nothing through the App Store reads
+// every video as `disabled` and shows no price line. The list sells nothing.
+import { defineService as register } from "@himalaya/state";
+import { decorateCollection } from "../_shared/collection-service.js";
 import { LOADING, loaded, loadFailed, type LoadCopy, type LoadFlags } from "../_shared/branded-load-state.js";
 import { copyParam } from "../_shared/himi-copy.js";
+import { iapPriceCopy, resetUnhydratedKeysOnOlderRuntime } from "../_shared/iap-worker.js";
 import { videoCaptionOf, withCaption, type CaptionFlags, type VideoCaption } from "../_shared/video-caption.js";
-import { channelCoverUrl, latestVideos, listChannels, videoCard, type WixVideoCard, type WixVideoChannel } from "@himalaya/wix-video";
+import { iapPriceFields, wixVideoItem, type IapCatalogItem } from "@himalaya/iap";
+import { createIapCommerce } from "@himalaya/iap-checkout";
+import { canWatchVideo, channelCoverUrl, latestVideos, listChannels, videoCard, type WixVideoCard, type WixVideoChannel, type WixVideoInChannel } from "@himalaya/wix-video";
 
 interface Row { id: string; title: string; subtitle: string; coverUrl: string; hasCover: boolean; noCover: boolean }
 interface S extends LoadFlags {
@@ -21,7 +29,7 @@ interface S extends LoadFlags {
   noChannels: boolean;
   /** The carousel section: up to CAROUSEL_SIZE ready videos across the channels, each
    *  stamped with the caption placement the descriptor asked for (`videoCaption`). */
-  latestVideos: (WixVideoCard & CaptionFlags)[]; noLatestVideos: boolean;
+  latestVideos: (WixVideoCard & CaptionFlags & { priceLine: string })[]; noLatestVideos: boolean;
   isMock: boolean; notMock: boolean; /** #2849 — hiddenWhen() hides on TRUE, so these are inverted: the empty-state banner
    *  shows only when the site really has none, and the unavailable one only when the
    *  query failed. A failed query must never render the sentence that claims the
@@ -57,33 +65,81 @@ const COPY: LoadCopy<Row> = {
   sample: () => MOCK.map((r) => ({ ...r })),
 };
 
+const SERVICE = "himiBrandedVideos";
 let generation = 0;
 /** The latest placement an appear asked for; a param-less reload keeps it. */
 let caption: VideoCaption = "overlay";
-const svc = defineService<S, { load: (s: S, arg?: unknown) => Promise<S | undefined> }>("himiBrandedVideos", {
-  state: { ...LOADING, channels: [], emptyText: "", noChannels: true, latestVideos: [], noLatestVideos: true },
-  actions: {
-    load: async (s, arg) => {
-      const request = ++generation;
-      const asked = (arg as { videoCaption?: unknown } | undefined)?.videoCaption;
-      if (asked !== undefined) caption = videoCaptionOf(asked);
-      try {
-        const entities = await listChannels({ videosPerChannel: PER_CHANNEL });
-        const untitled = copyParam("videos.untitledVideo", "Video");
-        const cards = withCaption(latestVideos(entities, CAROUSEL_SIZE).map((entry) => videoCard(entry, untitled)), caption);
-        if (request === generation) {
-          const rows = loaded("channels", entities.map(norm), COPY);
-          return { ...s, ...rows, noChannels: rows.channels.length === 0, latestVideos: cards, noLatestVideos: cards.length === 0 };
-        }
-      } catch (err) {
-        if (request === generation) {
-          const rows = loadFailed("channels", err, COPY);
-          return { ...s, ...rows, noChannels: rows.channels.length === 0, latestVideos: [], noLatestVideos: true };
-        }
+
+// ── Content and App Store prices ─────
+// One writer: `load` keeps the carousel here and every repaint goes through the synchronous
+// `pricingPublish`, which reads the latest content and prices together.
+const commerce = createIapCommerce({ onChange: () => { void svc.pricingPublish(); } });
+const pricing = commerce.pricing;
+const PRICING_NOT_HYDRATED = ["latestVideos"] as const;
+let carousel: Array<{ card: WixVideoCard & CaptionFlags; item?: IapCatalogItem }> = [];
+
+function carouselOf(entries: WixVideoInChannel[], untitled: string) {
+  const cards = withCaption(entries.map((entry) => videoCard(entry, untitled)), caption);
+  // A video the viewer can already watch (bought, rented, or through the channel) is not priced.
+  return cards.map((card, i) => {
+    const { channel, video } = entries[i];
+    return { card, item: canWatchVideo(channel, video) ? undefined : wixVideoItem(channel, video) };
+  });
+}
+
+async function priceCarousel(): Promise<void> {
+  const items = carousel.flatMap((entry) => entry.item ?? []);
+  if (items.length) await commerce.loadPrices(items);
+  void svc.pricingPublish();
+}
+
+function pricedState(state: S): S {
+  const copy = iapPriceCopy("videos");
+  const cards = carousel.map(({ card, item }) => ({ ...card, priceLine: item ? iapPriceFields(pricing.view(item.reference), copy).priceText : "" }));
+  return { ...state, latestVideos: cards, noLatestVideos: cards.length === 0 };
+}
+
+type Actions = {
+  load: (s: S, arg?: unknown) => Promise<S | undefined>;
+  pricingPublish: (s: S) => S;
+  pricingStart: (s: S) => S;
+  pricingRefresh: (s: S) => Promise<undefined>;
+};
+
+const actions: Actions = {
+  load: async (s, arg) => {
+    const request = ++generation;
+    const asked = (arg as { videoCaption?: unknown } | undefined)?.videoCaption;
+    if (asked !== undefined) caption = videoCaptionOf(asked);
+    try {
+      const entities = await listChannels({ videosPerChannel: PER_CHANNEL });
+      const untitled = copyParam("videos.untitledVideo", "Video");
+      if (request === generation) {
+        carousel = carouselOf(latestVideos(entities, CAROUSEL_SIZE), untitled);
+        void priceCarousel();
+        const rows = loaded("channels", entities.map(norm), COPY);
+        return pricedState({ ...s, ...rows, noChannels: rows.channels.length === 0 });
       }
-      return undefined;
-    },
+    } catch (err) {
+      if (request === generation) {
+        carousel = [];
+        const rows = loadFailed("channels", err, COPY);
+        return pricedState({ ...s, ...rows, noChannels: rows.channels.length === 0 });
+      }
+    }
+    return undefined;
   },
-});
+  pricingPublish: pricedState,
+  pricingStart: (s) => ({ ...pricedState(s), _poll: pricing.pollDirective(`${SERVICE}.pricingRefresh`) }),
+  pricingRefresh: async () => { await priceCarousel(); return undefined; },
+};
+
+const INITIAL: S = { ...LOADING, channels: [], emptyText: "", noChannels: true, latestVideos: [], noLatestVideos: true } as S;
+// The collection decorator's own `defineService` drops `notHydrated`, so the decorated definition is
+// registered directly: this run's prices must never be restored from a cold-boot snapshot.
+const decorated = decorateCollection(SERVICE, { state: INITIAL, actions } as unknown as Parameters<typeof decorateCollection>[1]);
+const svc = register<S, Actions>(SERVICE, { ...decorated, notHydrated: [...PRICING_NOT_HYDRATED] } as unknown as Parameters<typeof register<S, Actions>>[1]);
+resetUnhydratedKeysOnOlderRuntime(svc, decorated.state as unknown as S, PRICING_NOT_HYDRATED);
+void svc.pricingStart();
 svc.load();
 export { svc };