@shopify/shop-minis-react 0.3.2 → 0.4.0

package/dist/components/MinisContainer.js

@@ -4,12 +4,13 @@ import { useShopActions as v } from "../internal/useShopActions.js";
 import { injectMocks as y } from "../mocks.js";
 import { ImagePickerProvider as h } from "../providers/ImagePickerProvider.js";
 import { ErrorBoundary as E } from "./ErrorBoundary.js";
+import { MinisQueryProvider as g } from "../internal/reactQuery/MinisQueryProvider.js";
 y();
-function b({ children: a }) {
-  const [i, o] = u(!1), t = v(), c = f(
-    async (n) => {
+function N({ children: a }) {
+  const [i, n] = u(!1), t = v(), c = f(
+    async (o) => {
       try {
-        t && t.reportError && await t.reportError(n);
+        t && t.reportError && await t.reportError(o);
       } catch (e) {
         console.error("Failed to report error to app:", e);
       }
@@ -17,26 +18,26 @@ function b({ children: a }) {
     [t]
   );
   return p(() => {
-    const n = () => window.minisSDK ? (o(!0), !0) : !1;
-    if (n())
+    const o = () => window.minisSDK ? (n(!0), !0) : !1;
+    if (o())
       return;
     const e = (d) => {
       const { type: m } = JSON.parse(d.data);
-      m === "MINIS_SDK_READY" && o(!0);
+      m === "MINIS_SDK_READY" && n(!0);
     };
     window.addEventListener("message", e), document.addEventListener("message", e);
     const s = setInterval(() => {
-      n() && clearInterval(s);
+      o() && clearInterval(s);
     }, 100);
     return () => {
       clearInterval(s), window.removeEventListener("message", e), document.removeEventListener("message", e);
     };
-  }, []), i ? /* @__PURE__ */ r(E, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
+  }, []), i ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(E, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
     /* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
     /* @__PURE__ */ r("p", { className: "text-gray-600", children: "Loading..." })
   ] }) });
 }
 export {
-  b as MinisContainer
+  N as MinisContainer
 };
 //# sourceMappingURL=MinisContainer.js.map

package/dist/components/MinisContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const actions = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        if (actions && actions.reportError) {\n          await actions.reportError(params)\n        }\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [actions]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <ErrorBoundary onError={handleError}>\n      <ImagePickerProvider>{children}</ImagePickerProvider>\n    </ErrorBoundary>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","actions","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","ErrorBoundary","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;;;AAUAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAUC,EAAe,GAEzBC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACE,QAAAJ,KAAWA,EAAQ,eACf,MAAAA,EAAQ,YAAYI,CAAM;AAAA,eAE3BC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAO;AAAA,EACV;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,sBAYFe,GAAc,EAAA,SAASV,GACtB,UAAC,gBAAAW,EAAAC,GAAA,EAAqB,UAAAlB,GAAS,EACjC,CAAA,sBAZG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AASN;"}
+{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react'\n\nimport {ReportErrorParams} from '@shopify/shop-minis-platform/actions'\n\nimport {MinisQueryProvider} from '../internal/reactQuery'\nimport {useShopActions} from '../internal/useShopActions'\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nimport {ErrorBoundary} from './ErrorBoundary'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n  const actions = useShopActions()\n\n  const handleError = useCallback(\n    async (params: ReportErrorParams) => {\n      try {\n        if (actions && actions.reportError) {\n          await actions.reportError(params)\n        }\n      } catch (error) {\n        // If reporting fails, at least log to console\n        console.error('Failed to report error to app:', error)\n      }\n    },\n    [actions]\n  )\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      clearInterval(pollInterval)\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <MinisQueryProvider>\n      <ErrorBoundary onError={handleError}>\n        <ImagePickerProvider>{children}</ImagePickerProvider>\n      </ErrorBoundary>\n    </MinisQueryProvider>\n  )\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","actions","useShopActions","handleError","useCallback","params","error","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","jsx","MinisQueryProvider","ErrorBoundary","ImagePickerProvider","jsxs"],"mappings":";;;;;;;AAWAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAUC,EAAe,GAEzBC,IAAcC;AAAA,IAClB,OAAOC,MAA8B;AAC/B,UAAA;AACE,QAAAJ,KAAWA,EAAQ,eACf,MAAAA,EAAQ,YAAYI,CAAM;AAAA,eAE3BC,GAAO;AAEN,gBAAA,MAAM,kCAAkCA,CAAK;AAAA,MAAA;AAAA,IAEzD;AAAA,IACA,CAACL,CAAO;AAAA,EACV;AA8CA,SA5CAM,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTT,EAAc,EAAI,GACX,MAEF;AAIT,QAAIS;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXZ,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWU,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AACX,oBAAcA,CAAY,GACnB,OAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAX,IAYH,gBAAAe,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAc,EAAA,SAASZ,GACtB,UAAC,gBAAAU,EAAAG,GAAA,EAAqB,UAAAnB,EAAS,CAAA,EACjC,CAAA,GACF,sBAdG,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAoB,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AAWN;"}

package/dist/components/atoms/content-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/atoms/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n    skip: !publicId && !externalId,\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,GAAW;AAAA,IACpC,MAAM,CAACD,KAAY,CAACC;AAAA,EAAA,CACrB,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}
+{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/atoms/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => React.JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n    skip: !publicId && !externalId,\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,GAAW;AAAA,IACpC,MAAM,CAACD,KAAY,CAACC;AAAA,EAAA,CACrB,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}

package/dist/components/atoms/video-player.js

@@ -1,24 +1,24 @@
 import { jsx as t, jsxs as E } from "react/jsx-runtime";
-import { forwardRef as k, useRef as C, useState as I, useImperativeHandle as B, useMemo as D, useEffect as i, useCallback as M } from "react";
+import { forwardRef as k, useRef as C, useState as D, useImperativeHandle as I, useMemo as B, useEffect as a, useCallback as M } from "react";
 import R from "../../shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js";
 /* empty css                                                                                                */
 const W = k(
   ({
-    src: u,
-    format: f = "video/mp4",
-    poster: d,
-    muted: p,
+    src: f,
+    format: d = "video/mp4",
+    poster: p,
+    muted: l,
     autoplay: m,
-    width: l,
+    width: s,
     height: v,
     playButtonComponent: N,
     onPlay: y,
     onPause: h,
     onEnded: j,
-    onReady: s
+    onReady: c
   }, b) => {
-    const a = C(null), e = C(null), [o, n] = I(!1);
-    B(
+    const i = C(null), e = C(null), [o, n] = D(!1);
+    I(
       b,
       () => ({
         play: async () => {
@@ -35,7 +35,7 @@ const W = k(
       }),
       []
     );
-    const x = D(
+    const x = B(
       () => ({
         controls: !1,
         controlBar: {
@@ -44,28 +44,28 @@ const W = k(
           }
         },
         preload: "auto",
-        muted: p,
+        muted: l,
         // This makes sure that the video player does not take over the whole screen
         preferFullWindow: !1,
         playsinline: !0,
-        poster: d,
+        poster: p,
         height: v,
-        width: l,
+        width: s,
         sources: [
           {
-            src: u,
-            type: f
+            src: f,
+            type: d
           }
         ]
       }),
-      [p, d, v, l, u, f]
+      [l, p, v, s, f, d]
     );
-    i(() => {
+    a(() => {
       const r = e.current;
       return () => {
         r && !r.isDisposed() && (r.dispose(), e.current = null);
       };
-    }, [e]), i(() => {
+    }, [e]), a(() => {
       if (!e.current) return;
       const r = () => {
         y?.(), n(!0);
@@ -78,28 +78,30 @@ const W = k(
         e.current && (e.current.off("play", r), e.current.off("pause", P), e.current.off("ended", g));
       };
     }, [j, h, y]);
-    const c = M(() => {
+    const u = M(() => {
       o ? (e.current?.pause(), n(!1)) : (e.current?.play(), n(!0));
     }, [o]);
-    i(() => {
+    a(() => {
       if (!e.current) {
         const r = document.createElement("video-js");
-        a.current?.appendChild(r), e.current = R(r, x, () => {
-          s && s(), m && c();
+        i.current?.appendChild(r), e.current = R(r, x, () => {
+          c && c(), m && u();
         });
       }
-    }, [x, a, m, s, c]);
+    }, [x, i, m, c, u]), a(() => {
+      e.current && !e.current.isDisposed() && e.current.muted(l ?? !1);
+    }, [l]);
     const w = [
-      l ? `w-${l}` : void 0,
+      s ? `w-${s}` : void 0,
       "relative"
     ].join(" ");
     return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ E("div", { "data-vjs-player": !0, className: w, children: [
-      /* @__PURE__ */ t("div", { ref: a }),
+      /* @__PURE__ */ t("div", { ref: i }),
       /* @__PURE__ */ t(
         "div",
         {
           className: "absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer",
-          onClick: c,
+          onClick: u,
           "aria-hidden": !0,
           children: o ? null : N ?? /* @__PURE__ */ t(z, {})
         }

package/dist/components/atoms/video-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-player.js","sources":["../../../src/components/atoms/video-player.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n} from 'react'\n\nimport videojs from 'video.js'\nimport Player from 'video.js/dist/types/player'\nimport 'video.js/dist/video-js.css'\n\nexport interface VideoPlayerRef {\n  play: () => Promise<void>\n  pause: () => void\n}\n\ninterface VideoPlayerProps {\n  src: string\n  /**\n   * The format/MIME type of the video.\n   * @default 'video/mp4'\n   */\n  format?: string\n  muted?: boolean\n  poster?: string\n  autoplay?: boolean\n  width?: number\n  height?: number\n  playButtonComponent?: React.ReactNode\n  onPlay?: () => void\n  onPause?: () => void\n  onEnded?: () => void\n  onReady?: () => void\n}\n\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n  VideoPlayerProps & React.RefAttributes<VideoPlayerRef>\n> = forwardRef<VideoPlayerRef, VideoPlayerProps>(\n  (\n    {\n      src,\n      format = 'video/mp4',\n      poster,\n      muted,\n      autoplay,\n      width,\n      height,\n      playButtonComponent,\n      onPlay,\n      onPause,\n      onEnded,\n      onReady,\n    },\n    ref\n  ) => {\n    const videoContainerRef = useRef<HTMLDivElement>(null)\n    const playerRef = useRef<Player | null>(null)\n\n    const [isPlaying, setIsPlaying] = useState(false)\n\n    // Expose imperative methods to parent components\n    useImperativeHandle(\n      ref,\n      () => ({\n        play: async () => {\n          if (playerRef.current) {\n            try {\n              await playerRef.current.play()\n              setIsPlaying(true)\n            } catch (error) {\n              console.error('Error playing video:', error)\n            }\n          }\n        },\n        pause: () => {\n          if (playerRef.current) {\n            playerRef.current.pause()\n            setIsPlaying(false)\n          }\n        },\n      }),\n      []\n    )\n\n    const options = useMemo(\n      () => ({\n        controls: false,\n        controlBar: {\n          volumePanel: {\n            inline: false,\n          },\n        },\n        preload: 'auto',\n        muted,\n        // This makes sure that the video player does not take over the whole screen\n        preferFullWindow: false,\n        playsinline: true,\n        poster,\n        height,\n        width,\n        sources: [\n          {\n            src,\n            type: format,\n          },\n        ],\n      }),\n      [muted, poster, height, width, src, format]\n    )\n\n    useEffect(() => {\n      const player = playerRef.current\n\n      return () => {\n        if (player && !player.isDisposed()) {\n          player.dispose()\n          playerRef.current = null\n        }\n      }\n    }, [playerRef])\n\n    useEffect(() => {\n      if (!playerRef.current) return\n\n      const handlePlay = () => {\n        onPlay?.()\n        setIsPlaying(true)\n      }\n      const handlePause = () => {\n        onPause?.()\n        setIsPlaying(false)\n      }\n      const handleEnded = () => {\n        onEnded?.()\n        setIsPlaying(false)\n      }\n\n      playerRef.current.on('play', handlePlay)\n      playerRef.current.on('pause', handlePause)\n      playerRef.current.on('ended', handleEnded)\n\n      return () => {\n        if (playerRef.current) {\n          playerRef.current.off('play', handlePlay)\n          playerRef.current.off('pause', handlePause)\n          playerRef.current.off('ended', handleEnded)\n        }\n      }\n    }, [onEnded, onPause, onPlay])\n\n    const togglePlayPause = useCallback(() => {\n      if (isPlaying) {\n        playerRef.current?.pause()\n        setIsPlaying(false)\n      } else {\n        playerRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [isPlaying])\n\n    useEffect(() => {\n      if (!playerRef.current) {\n        const videoElement = document.createElement('video-js')\n\n        // The Video.js player needs to be _inside_ the component element for React 18 Strict Mode.\n        videoContainerRef.current?.appendChild(videoElement)\n\n        playerRef.current = videojs(videoElement, options, () => {\n          onReady && onReady()\n\n          if (autoplay) {\n            togglePlayPause()\n          }\n        })\n      }\n    }, [options, videoContainerRef, autoplay, onReady, togglePlayPause])\n\n    const containerClassName = [\n      width ? `w-${width}` : undefined,\n      'relative',\n    ].join(' ')\n\n    return (\n      <div className=\"flex\">\n        <div data-vjs-player className={containerClassName}>\n          <div ref={videoContainerRef} />\n          <div\n            className=\"absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer\"\n            onClick={togglePlayPause}\n            aria-hidden\n          >\n            {isPlaying ? null : (playButtonComponent ?? <DefaultPlayIcon />)}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nconst DefaultPlayIcon = () => (\n  <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200\">\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"w-10 h-10 text-white\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M8 5v14l11-7z\" />\n    </svg>\n  </div>\n)\n"],"names":["VideoPlayer","forwardRef","src","format","poster","muted","autoplay","width","height","playButtonComponent","onPlay","onPause","onEnded","onReady","ref","videoContainerRef","useRef","playerRef","isPlaying","setIsPlaying","useState","useImperativeHandle","error","options","useMemo","useEffect","player","handlePlay","handlePause","handleEnded","togglePlayPause","useCallback","videoElement","videojs","containerClassName","jsx","DefaultPlayIcon"],"mappings":"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"}
+{"version":3,"file":"video-player.js","sources":["../../../src/components/atoms/video-player.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n} from 'react'\n\nimport videojs from 'video.js'\nimport Player from 'video.js/dist/types/player'\nimport 'video.js/dist/video-js.css'\n\nexport interface VideoPlayerRef {\n  play: () => Promise<void>\n  pause: () => void\n}\n\ninterface VideoPlayerProps {\n  src: string\n  /**\n   * The format/MIME type of the video.\n   * @default 'video/mp4'\n   */\n  format?: string\n  muted?: boolean\n  poster?: string\n  autoplay?: boolean\n  width?: number\n  height?: number\n  playButtonComponent?: React.ReactNode\n  onPlay?: () => void\n  onPause?: () => void\n  onEnded?: () => void\n  onReady?: () => void\n}\n\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n  VideoPlayerProps & React.RefAttributes<VideoPlayerRef>\n> = forwardRef<VideoPlayerRef, VideoPlayerProps>(\n  (\n    {\n      src,\n      format = 'video/mp4',\n      poster,\n      muted,\n      autoplay,\n      width,\n      height,\n      playButtonComponent,\n      onPlay,\n      onPause,\n      onEnded,\n      onReady,\n    },\n    ref\n  ) => {\n    const videoContainerRef = useRef<HTMLDivElement>(null)\n    const playerRef = useRef<Player | null>(null)\n\n    const [isPlaying, setIsPlaying] = useState(false)\n\n    // Expose imperative methods to parent components\n    useImperativeHandle(\n      ref,\n      () => ({\n        play: async () => {\n          if (playerRef.current) {\n            try {\n              await playerRef.current.play()\n              setIsPlaying(true)\n            } catch (error) {\n              console.error('Error playing video:', error)\n            }\n          }\n        },\n        pause: () => {\n          if (playerRef.current) {\n            playerRef.current.pause()\n            setIsPlaying(false)\n          }\n        },\n      }),\n      []\n    )\n\n    const options = useMemo(\n      () => ({\n        controls: false,\n        controlBar: {\n          volumePanel: {\n            inline: false,\n          },\n        },\n        preload: 'auto',\n        muted,\n        // This makes sure that the video player does not take over the whole screen\n        preferFullWindow: false,\n        playsinline: true,\n        poster,\n        height,\n        width,\n        sources: [\n          {\n            src,\n            type: format,\n          },\n        ],\n      }),\n      [muted, poster, height, width, src, format]\n    )\n\n    useEffect(() => {\n      const player = playerRef.current\n\n      return () => {\n        if (player && !player.isDisposed()) {\n          player.dispose()\n          playerRef.current = null\n        }\n      }\n    }, [playerRef])\n\n    useEffect(() => {\n      if (!playerRef.current) return\n\n      const handlePlay = () => {\n        onPlay?.()\n        setIsPlaying(true)\n      }\n      const handlePause = () => {\n        onPause?.()\n        setIsPlaying(false)\n      }\n      const handleEnded = () => {\n        onEnded?.()\n        setIsPlaying(false)\n      }\n\n      playerRef.current.on('play', handlePlay)\n      playerRef.current.on('pause', handlePause)\n      playerRef.current.on('ended', handleEnded)\n\n      return () => {\n        if (playerRef.current) {\n          playerRef.current.off('play', handlePlay)\n          playerRef.current.off('pause', handlePause)\n          playerRef.current.off('ended', handleEnded)\n        }\n      }\n    }, [onEnded, onPause, onPlay])\n\n    const togglePlayPause = useCallback(() => {\n      if (isPlaying) {\n        playerRef.current?.pause()\n        setIsPlaying(false)\n      } else {\n        playerRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [isPlaying])\n\n    useEffect(() => {\n      if (!playerRef.current) {\n        const videoElement = document.createElement('video-js')\n\n        // The Video.js player needs to be _inside_ the component element for React 18 Strict Mode.\n        videoContainerRef.current?.appendChild(videoElement)\n\n        playerRef.current = videojs(videoElement, options, () => {\n          onReady && onReady()\n\n          if (autoplay) {\n            togglePlayPause()\n          }\n        })\n      }\n    }, [options, videoContainerRef, autoplay, onReady, togglePlayPause])\n\n    // Update muted state when prop changes after initial render\n    useEffect(() => {\n      if (playerRef.current && !playerRef.current.isDisposed()) {\n        playerRef.current.muted(muted ?? false)\n      }\n    }, [muted])\n\n    const containerClassName = [\n      width ? `w-${width}` : undefined,\n      'relative',\n    ].join(' ')\n\n    return (\n      <div className=\"flex\">\n        <div data-vjs-player className={containerClassName}>\n          <div ref={videoContainerRef} />\n          <div\n            className=\"absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer\"\n            onClick={togglePlayPause}\n            aria-hidden\n          >\n            {isPlaying ? null : (playButtonComponent ?? <DefaultPlayIcon />)}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nconst DefaultPlayIcon = () => (\n  <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200\">\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"w-10 h-10 text-white\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M8 5v14l11-7z\" />\n    </svg>\n  </div>\n)\n"],"names":["VideoPlayer","forwardRef","src","format","poster","muted","autoplay","width","height","playButtonComponent","onPlay","onPause","onEnded","onReady","ref","videoContainerRef","useRef","playerRef","isPlaying","setIsPlaying","useState","useImperativeHandle","error","options","useMemo","useEffect","player","handlePlay","handlePause","handleEnded","togglePlayPause","useCallback","videoElement","videojs","containerClassName","jsx","DefaultPlayIcon"],"mappings":"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"}

package/dist/components/commerce/product-card.js

@@ -1,17 +1,18 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import * as N from "react";
-import { useState as A, useCallback as C, useMemo as k, useContext as z } from "react";
-import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import * as F from "react";
+import { useState as R, useCallback as C, useMemo as k, useContext as z } from "react";
+import { useShopNavigation as S } from "../../hooks/navigation/useShopNavigation.js";
 import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as j } from "../../lib/formatMoney.js";
-import { cn as s } from "../../lib/utils.js";
+import { ProductReviewStars as j } from "../../internal/components/product-review-stars.js";
+import { formatMoney as B } from "../../lib/formatMoney.js";
+import { cn as d } from "../../lib/utils.js";
 import { Image as T } from "../atoms/image.js";
 import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
 import { Touchable as O } from "../atoms/touchable.js";
-import { Badge as S } from "../ui/badge.js";
-import { FavoriteButton as L } from "./favorite-button.js";
-const b = N.createContext(void 0);
-function u() {
+import { Badge as L } from "../ui/badge.js";
+import { FavoriteButton as M } from "./favorite-button.js";
+const b = F.createContext(void 0);
+function s() {
   const t = z(b);
   if (!t)
     throw new Error(
@@ -19,14 +20,14 @@ function u() {
     );
   return t;
 }
-function M({
+function q({
   className: t,
   ...e
 }) {
-  const { touchable: r, onClick: a } = u(), n = /* @__PURE__ */ o(
+  const { touchable: r, onClick: a } = s(), n = /* @__PURE__ */ o(
     "div",
     {
-      className: s(
+      className: d(
         "relative size-full overflow-hidden rounded-xl border-0",
         t
       ),
@@ -45,16 +46,16 @@ function M({
     }
   ) : n;
 }
-function R({
+function D({
   className: t,
   ...e
 }) {
-  const { variant: r } = u();
+  const { variant: r } = s();
   return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "product-card-image-container",
-      className: s(
+      className: d(
         "relative overflow-hidden rounded-xl border border-gray-200",
         "aspect-square",
         r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
@@ -64,18 +65,18 @@ function R({
     }
   );
 }
-function q({ className: t, ...e }) {
-  const { product: r, selectedProductVariant: a } = u(), n = a?.image || r.featuredImage, i = n?.url, d = n?.altText || r.title, c = r.featuredImage?.thumbhash, p = C(
+function G({ className: t, ...e }) {
+  const { product: r, selectedProductVariant: a } = s(), n = a?.image || r.featuredImage, i = n?.url, u = n?.altText || r.title, c = r.featuredImage?.thumbhash, p = C(
     (l) => c ? /* @__PURE__ */ o(
       T,
       {
         "data-slot": "product-card-image",
         src: l,
-        alt: d,
+        alt: u,
         aspectRatio: 1,
         thumbhash: c,
         objectFit: "cover",
-        className: s("size-full", t),
+        className: d("size-full", t),
         ...e
       }
     ) : /* @__PURE__ */ o(
@@ -83,36 +84,36 @@ function q({ className: t, ...e }) {
       {
         "data-slot": "product-card-image",
         src: l,
-        alt: d,
-        className: s("size-full object-cover", t),
+        alt: u,
+        className: d("size-full object-cover", t),
         ...e
       }
     ),
-    [d, t, e, c]
+    [u, t, e, c]
   );
   return /* @__PURE__ */ o("div", { className: "bg-gray-100 flex items-center justify-center size-full", children: i ? p(i) : /* @__PURE__ */ o("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
 }
-function w({
+function N({
   className: t,
   position: e = "bottom-left",
   variant: r,
   children: a,
   ...n
 }) {
-  const { badgeText: i, badgeVariant: d } = u(), c = a || i;
+  const { badgeText: i, badgeVariant: u } = s(), c = a || i;
   return c ? /* @__PURE__ */ o(
     "div",
     {
-      className: s(
+      className: d(
         "absolute z-10",
         e === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
       ),
       children: /* @__PURE__ */ o(
-        S,
+        L,
         {
-          variant: r ?? d ?? "none",
-          className: s(
-            !d && !r && "bg-black/50 text-white border-transparent",
+          variant: r ?? u ?? "none",
+          className: d(
+            !u && !r && "bg-black/50 text-white border-transparent",
             "rounded",
             t
           ),
@@ -123,35 +124,35 @@ function w({
     }
   ) : null;
 }
-function D({
+function H({
   className: t,
   ...e
 }) {
-  const { isFavorited: r, isFavoriteButtonDisabled: a, onFavoriteToggle: n } = u();
-  return a ? null : /* @__PURE__ */ o("div", { className: s("absolute bottom-3 right-3 z-10", t), ...e, children: /* @__PURE__ */ o(L, { onClick: n, filled: r }) });
+  const { isFavorited: r, favoriteButtonDisabled: a, onFavoriteToggle: n } = s();
+  return a ? null : /* @__PURE__ */ o("div", { className: d("absolute bottom-3 right-3 z-10", t), ...e, children: /* @__PURE__ */ o(M, { onClick: n, filled: r }) });
 }
-function G({ className: t, ...e }) {
-  const { variant: r } = u();
+function J({ className: t, ...e }) {
+  const { variant: r } = s();
   return r !== "default" ? null : /* @__PURE__ */ o(
     "div",
     {
-      "data-slot": "product-card-info",
-      className: s("px-1 pt-2 pb-0 space-y-1", t),
+      "data-testid": "product-card-info",
+      className: d("px-1 pt-2 pb-0 space-y-1", t),
       ...e
     }
   );
 }
-function H({
+function K({
   className: t,
   children: e,
   ...r
 }) {
-  const { product: a } = u();
+  const { product: a } = s();
   return /* @__PURE__ */ o(
     "h3",
     {
       "data-slot": "product-card-title",
-      className: s(
+      className: d(
         "text-sm font-medium leading-tight text-gray-900",
         "truncate overflow-hidden whitespace-nowrap text-ellipsis",
         t
@@ -161,8 +162,29 @@ function H({
     }
   );
 }
-function J({ className: t }) {
-  const { product: e, selectedProductVariant: r } = u(), a = r?.price || e?.price, n = r?.compareAtPrice || e?.compareAtPrice;
+function Q({
+  className: t,
+  ...e
+}) {
+  const { product: r, reviewsDisabled: a } = s(), n = r.reviewAnalytics;
+  return a || !n?.averageRating ? null : /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "product-card-review-stars",
+      className: d("", t),
+      ...e,
+      children: /* @__PURE__ */ o(
+        j,
+        {
+          averageRating: n.averageRating,
+          reviewCount: n.reviewCount
+        }
+      )
+    }
+  );
+}
+function U({ className: t }) {
+  const { product: e, selectedProductVariant: r } = s(), a = r?.price || e?.price, n = r?.compareAtPrice || e?.compareAtPrice;
   return /* @__PURE__ */ o(
     E,
     {
@@ -174,43 +196,44 @@ function J({ className: t }) {
     }
   );
 }
-function K() {
-  const { product: t, selectedProductVariant: e, variant: r } = u();
+function W() {
+  const { product: t, selectedProductVariant: e, variant: r } = s();
   if (r !== "priceOverlay") return null;
   const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
-  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
+  return !n || !i ? null : /* @__PURE__ */ o(N, { position: "top-left", children: B(i, n) });
 }
-function at({
+function dt({
   product: t,
   selectedProductVariant: e,
   variant: r = "default",
   touchable: a = !0,
   badgeText: n,
   badgeVariant: i,
-  onProductClick: d,
+  onProductClick: u,
   onFavoriteToggled: c,
   children: p,
-  favoriteButtonDisabled: l = !1
+  favoriteButtonDisabled: l = !1,
+  reviewsDisabled: v = !1
 }) {
-  const { navigateToProduct: h } = B(), { saveProduct: g, unsaveProduct: P } = V(), [f, y] = A(t.isFavorited), x = C(() => {
-    a && (d?.(), h({
+  const { navigateToProduct: g } = S(), { saveProduct: P, unsaveProduct: y } = V(), [f, x] = R(t.isFavorited), w = C(() => {
+    a && (u?.(), g({
       productId: t.id
     }));
-  }, [h, t.id, a, d]), I = C(async () => {
+  }, [g, t.id, a, u]), I = C(async () => {
     const m = f;
-    y(!m), c?.(!m);
+    x(!m), c?.(!m);
     try {
-      m ? await P({
+      m ? await y({
         productId: t.id,
         shopId: t.shop.id,
         productVariantId: e?.id || t.defaultVariantId
-      }) : await g({
+      }) : await P({
         productId: t.id,
         shopId: t.shop.id,
         productVariantId: e?.id || t.defaultVariantId
       });
     } catch {
-      y(m), c?.(m);
+      x(m), c?.(m);
     }
   }, [
     f,
@@ -218,10 +241,10 @@ function at({
     t.shop.id,
     t.defaultVariantId,
     e?.id,
-    g,
     P,
+    y,
     c
-  ]), F = k(
+  ]), A = k(
     () => ({
       // Core data
       product: t,
@@ -231,11 +254,12 @@ function at({
       touchable: a,
       badgeText: n,
       badgeVariant: i,
+      favoriteButtonDisabled: l,
+      reviewsDisabled: v,
       // State
       isFavorited: f,
-      isFavoriteButtonDisabled: l,
       // Actions
-      onClick: x,
+      onClick: w,
       onFavoriteToggle: I
     }),
     [
@@ -246,33 +270,36 @@ function at({
       n,
       i,
       f,
-      x,
+      w,
       I,
-      l
+      l,
+      v
     ]
   );
-  return /* @__PURE__ */ o(b.Provider, { value: F, children: p ?? /* @__PURE__ */ v(M, { children: [
-    /* @__PURE__ */ v(R, { children: [
-      /* @__PURE__ */ o(q, {}),
-      r === "priceOverlay" && /* @__PURE__ */ o(K, {}),
-      /* @__PURE__ */ o(w, {}),
-      /* @__PURE__ */ o(D, {})
+  return /* @__PURE__ */ o(b.Provider, { value: A, children: p ?? /* @__PURE__ */ h(q, { children: [
+    /* @__PURE__ */ h(D, { children: [
+      /* @__PURE__ */ o(G, {}),
+      r === "priceOverlay" && /* @__PURE__ */ o(W, {}),
+      /* @__PURE__ */ o(N, {}),
+      /* @__PURE__ */ o(H, {})
     ] }),
-    r === "default" && /* @__PURE__ */ v(G, { children: [
-      /* @__PURE__ */ o(H, {}),
-      /* @__PURE__ */ o(J, {})
+    r === "default" && /* @__PURE__ */ h(J, { children: [
+      /* @__PURE__ */ o(K, {}),
+      /* @__PURE__ */ o(Q, {}),
+      /* @__PURE__ */ o(U, {})
     ] })
   ] }) });
 }
 export {
-  at as ProductCard,
-  w as ProductCardBadge,
-  M as ProductCardContainer,
-  D as ProductCardFavoriteButton,
-  q as ProductCardImage,
-  R as ProductCardImageContainer,
-  G as ProductCardInfo,
-  J as ProductCardPrice,
-  H as ProductCardTitle
+  dt as ProductCard,
+  N as ProductCardBadge,
+  q as ProductCardContainer,
+  H as ProductCardFavoriteButton,
+  G as ProductCardImage,
+  D as ProductCardImageContainer,
+  J as ProductCardInfo,
+  U as ProductCardPrice,
+  Q as ProductCardReviewStars,
+  K as ProductCardTitle
 };
 //# sourceMappingURL=product-card.js.map