@shopify/shop-minis-react 0.0.19 → 0.0.21

package/dist/components/MinisContainer.js

@@ -1,29 +1,31 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { useState as m, useEffect as l } from "react";
-import { ImagePickerProvider as u } from "../providers/ImagePickerProvider.js";
-function p({ children: s }) {
-  const [a, t] = m(!1);
+import { injectMocks as u } from "../mocks.js";
+import { ImagePickerProvider as f } from "../providers/ImagePickerProvider.js";
+u();
+function S({ children: a }) {
+  const [i, t] = m(!1);
   return l(() => {
     const n = () => window.minisSDK ? (t(!0), !0) : !1;
     if (n())
       return;
     const e = (o) => {
-      const { type: d } = JSON.parse(o.data);
-      d === "MINIS_SDK_READY" && t(!0);
+      const { type: c } = JSON.parse(o.data);
+      c === "MINIS_SDK_READY" && t(!0);
     };
     window.addEventListener("message", e), document.addEventListener("message", e);
-    const i = setInterval(() => {
-      n() && clearInterval(i);
+    const s = setInterval(() => {
+      n() && clearInterval(s);
     }, 100);
     return () => {
-      window.removeEventListener("message", e), document.removeEventListener("message", e);
+      clearInterval(s), window.removeEventListener("message", e), document.removeEventListener("message", e);
     };
-  }, []), a ? /* @__PURE__ */ r(u, { children: s }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ c("div", { className: "text-center", children: [
+  }, []), i ? /* @__PURE__ */ r(f, { children: a }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ d("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 {
-  p as MinisContainer
+  S 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, {useEffect, useState} from 'react'\n\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\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 <ImagePickerProvider>{children}</ImagePickerProvider>\n}\n"],"names":["MinisContainer","children","isSDKReady","setIsSDKReady","useState","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","jsx","ImagePickerProvider","jsxs"],"mappings":";;;AAIgB,SAAAA,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK;AA8ClD,SA5CAC,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTH,EAAc,EAAI,GACX,MAEF;AAIT,QAAIG;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXN,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWI,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AAEJ,aAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAL,IAWE,gBAAAS,EAACC,KAAqB,UAAAX,GAAS,sBATjC,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAY,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;AAKN;"}
+{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react'\n\nimport {injectMocks} from '../mocks'\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\ninjectMocks()\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\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 <ImagePickerProvider>{children}</ImagePickerProvider>\n}\n"],"names":["injectMocks","MinisContainer","children","isSDKReady","setIsSDKReady","useState","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","jsx","ImagePickerProvider","jsxs"],"mappings":";;;;AAKAA,EAAY;AAEI,SAAAC,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK;AA8ClD,SA5CAC,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTH,EAAc,EAAI,GACX,MAEF;AAIT,QAAIG;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXN,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWI,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,GAGAL,IAWE,gBAAAS,EAACC,KAAqB,UAAAX,GAAS,sBATjC,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAY,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;AAKN;"}

package/dist/components/atoms/list.js

@@ -0,0 +1,52 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useCallback as f } from "react";
+import { VariableSizeList as V } from "../../shop-minis-react/node_modules/.pnpm/react-window@1.8.11_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-window/dist/index.esm.js";
+import { cn as j } from "../../lib/utils.js";
+/* empty css                         */
+import { Pagination as C } from "./pagination.js";
+const N = V;
+function q({
+  items: r,
+  height: p,
+  renderItem: l,
+  className: m,
+  showScrollbar: v = !1,
+  header: t,
+  headerHeight: n,
+  itemSizeForRow: s,
+  fetchMore: a,
+  overscanCount: b,
+  ...L
+}) {
+  const g = f(
+    ({ index: i, style: c }) => t && i === 0 ? /* @__PURE__ */ u("div", { style: c, children: [
+      t,
+      /* @__PURE__ */ o("div", { style: { top: n }, children: l(r[0], 0) })
+    ] }) : a && i === r.length - 1 ? /* @__PURE__ */ u("div", { style: c, children: [
+      l(r[i], i),
+      /* @__PURE__ */ o("div", { style: { bottom: 0 }, children: /* @__PURE__ */ o(C, { fetchMore: a }) })
+    ] }) : /* @__PURE__ */ o("div", { style: c, children: l(r[i], i) }),
+    [r, l, t, a, n]
+  ), z = f(
+    (i) => t && i === 0 ? (n || 0) + s(i) : s(i),
+    [s, t, n]
+  ), S = j(v ? void 0 : "no-scrollbars", m);
+  return /* @__PURE__ */ o(
+    N,
+    {
+      className: S,
+      height: p,
+      direction: "vertical",
+      width: "100%",
+      itemCount: r.length,
+      overscanCount: b,
+      itemSize: z,
+      ...L,
+      children: g
+    }
+  );
+}
+export {
+  q as List
+};
+//# sourceMappingURL=list.js.map

package/dist/components/atoms/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sources":["../../../src/components/atoms/list.tsx"],"sourcesContent":["import {ComponentType, useCallback} from 'react'\n\nimport {\n  VariableSizeList as _VariableSizeList,\n  VariableSizeListProps,\n} from 'react-window'\n\nimport {cn} from '../../lib/utils'\nimport '../../styles/utilities.css'\n\nimport {Pagination} from './pagination'\n\nconst VariableSizeList =\n  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>\n\ninterface Props<T = any>\n  extends Omit<\n    VariableSizeListProps<T>,\n    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'\n  > {\n  items: T[]\n  renderItem: (item: T, index: number) => React.ReactNode\n  itemSizeForRow: (index: number) => number\n  showScrollbar?: boolean\n  header?: React.ReactNode\n  headerHeight?: number\n  fetchMore?: () => void\n}\n\nexport function List<T = any>({\n  items,\n  height,\n  renderItem,\n  className,\n  showScrollbar = false,\n  header,\n  headerHeight,\n  itemSizeForRow,\n  fetchMore,\n  overscanCount,\n  ...listProps\n}: Props<T>) {\n  const rowRenderer = useCallback(\n    ({index, style}: {index: number; style: React.CSSProperties}) => {\n      // prepend the header to the first row if it exists\n      if (header && index === 0) {\n        return (\n          <div style={style}>\n            {header}\n            <div style={{top: headerHeight}}>{renderItem(items[0], 0)}</div>\n          </div>\n        )\n      }\n\n      // append the pagination spinner to the last row if fetchMore exists\n      if (fetchMore && index === items.length - 1) {\n        return (\n          <div style={style}>\n            {renderItem(items[index], index)}\n            <div style={{bottom: 0}}>\n              <Pagination fetchMore={fetchMore} />\n            </div>\n          </div>\n        )\n      }\n\n      return <div style={style}>{renderItem(items[index], index)}</div>\n    },\n    [items, renderItem, header, fetchMore, headerHeight]\n  )\n\n  const getItemSize = useCallback(\n    (index: number) => {\n      // include the header height in the first row height\n      if (header && index === 0) {\n        const _headerHeight = headerHeight || 0\n        return _headerHeight + itemSizeForRow(index)\n      }\n\n      return itemSizeForRow(index)\n    },\n    [itemSizeForRow, header, headerHeight]\n  )\n\n  const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)\n\n  return (\n    <VariableSizeList\n      className={classNames}\n      height={height}\n      direction=\"vertical\"\n      width=\"100%\"\n      itemCount={items.length}\n      overscanCount={overscanCount}\n      itemSize={getItemSize}\n      {...listProps}\n    >\n      {rowRenderer}\n    </VariableSizeList>\n  )\n}\n"],"names":["VariableSizeList","_VariableSizeList","List","items","height","renderItem","className","showScrollbar","header","headerHeight","itemSizeForRow","fetchMore","overscanCount","listProps","rowRenderer","useCallback","index","style","jsxs","jsx","Pagination","getItemSize","classNames","cn"],"mappings":";;;;;;AAYA,MAAMA,IACJC;AAgBK,SAASC,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GAAa;AACX,QAAMC,IAAcC;AAAA,IAClB,CAAC,EAAC,OAAAC,GAAO,OAAAC,QAEHT,KAAUQ,MAAU,IAEpB,gBAAAE,EAAC,SAAI,OAAAD,GACF,UAAA;AAAA,MAAAT;AAAA,MACA,gBAAAW,EAAA,OAAA,EAAI,OAAO,EAAC,KAAKV,EAAA,GAAgB,UAAAJ,EAAWF,EAAM,CAAC,GAAG,CAAC,EAAE,CAAA;AAAA,IAAA,GAC5D,IAKAQ,KAAaK,MAAUb,EAAM,SAAS,IAEtC,gBAAAe,EAAC,SAAI,OAAAD,GACF,UAAA;AAAA,MAAWZ,EAAAF,EAAMa,CAAK,GAAGA,CAAK;AAAA,MAC/B,gBAAAG,EAAC,OAAI,EAAA,OAAO,EAAC,QAAQ,KACnB,UAAA,gBAAAA,EAACC,GAAW,EAAA,WAAAT,EAAsB,CAAA,EACpC,CAAA;AAAA,IAAA,GACF,IAIG,gBAAAQ,EAAC,SAAI,OAAAF,GAAe,UAAAZ,EAAWF,EAAMa,CAAK,GAAGA,CAAK,GAAE;AAAA,IAE7D,CAACb,GAAOE,GAAYG,GAAQG,GAAWF,CAAY;AAAA,EACrD,GAEMY,IAAcN;AAAA,IAClB,CAACC,MAEKR,KAAUQ,MAAU,KACAP,KAAgB,KACfC,EAAeM,CAAK,IAGtCN,EAAeM,CAAK;AAAA,IAE7B,CAACN,GAAgBF,GAAQC,CAAY;AAAA,EACvC,GAEMa,IAAaC,EAAGhB,IAAgB,SAAY,iBAAiBD,CAAS;AAG1E,SAAA,gBAAAa;AAAA,IAACnB;AAAA,IAAA;AAAA,MACC,WAAWsB;AAAA,MACX,QAAAlB;AAAA,MACA,WAAU;AAAA,MACV,OAAM;AAAA,MACN,WAAWD,EAAM;AAAA,MACjB,eAAAS;AAAA,MACA,UAAUS;AAAA,MACT,GAAGR;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/atoms/pagination.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Skeleton as e } from "../ui/skeleton.js";
+import { TrackingPixel as i } from "./tracking-pixel.js";
+function c({ loadingComponent: r, fetchMore: n }) {
+  return /* @__PURE__ */ o(i, { onImpression: n, children: r ?? /* @__PURE__ */ o(e, { className: "h-10 w-full p-8" }) });
+}
+export {
+  c as Pagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/atoms/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../../src/components/atoms/pagination.tsx"],"sourcesContent":["import {Skeleton} from '../ui/skeleton'\n\nimport {TrackingPixel} from './tracking-pixel'\n\ninterface Props {\n  loadingComponent?: React.ReactNode\n  isFetchingMore?: boolean\n  fetchMore: () => void\n}\n\nexport function Pagination({loadingComponent, fetchMore}: Props) {\n  const loadingPlaceholder = loadingComponent ?? (\n    <Skeleton className=\"h-10 w-full p-8\" />\n  )\n\n  return (\n    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>\n  )\n}\n"],"names":["Pagination","loadingComponent","fetchMore","jsx","TrackingPixel","Skeleton"],"mappings":";;;AAUO,SAASA,EAAW,EAAC,kBAAAC,GAAkB,WAAAC,KAAmB;AAK/D,SACG,gBAAAC,EAAAC,GAAA,EAAc,cAAcF,GAAY,UALhBD,KACxB,gBAAAE,EAAAE,GAAA,EAAS,WAAU,mBAAkB,GAIsB;AAEhE;"}

package/dist/components/atoms/tracking-pixel.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as n } from "react";
+import { InView as c } from "../../shop-minis-react/node_modules/.pnpm/react-intersection-observer@9.16.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-intersection-observer/dist/index.js";
+const x = ({
+  children: o,
+  onImpression: r,
+  triggerOnce: i = !1,
+  threshold: t,
+  className: a
+}) => {
+  const e = n(
+    (f) => {
+      f && r?.();
+    },
+    [r]
+  );
+  return /* @__PURE__ */ m(
+    c,
+    {
+      as: "div",
+      onChange: e,
+      triggerOnce: i,
+      className: a,
+      threshold: t,
+      children: o
+    }
+  );
+};
+export {
+  x as TrackingPixel
+};
+//# sourceMappingURL=tracking-pixel.js.map

package/dist/components/atoms/tracking-pixel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-pixel.js","sources":["../../../src/components/atoms/tracking-pixel.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {InView} from 'react-intersection-observer'\n\ninterface Props {\n  children: React.ReactNode\n  onImpression?: () => void\n  triggerOnce?: boolean\n  threshold?: number\n  className?: string\n}\n\nexport const TrackingPixel = ({\n  children,\n  onImpression,\n  triggerOnce = false,\n  threshold,\n  className,\n}: Props) => {\n  const onChange = useCallback(\n    (inView: boolean) => {\n      if (inView) {\n        onImpression?.()\n      }\n    },\n    [onImpression]\n  )\n\n  return (\n    <InView\n      as=\"div\"\n      onChange={onChange}\n      triggerOnce={triggerOnce}\n      className={className}\n      threshold={threshold}\n    >\n      {children}\n    </InView>\n  )\n}\n"],"names":["TrackingPixel","children","onImpression","triggerOnce","threshold","className","onChange","useCallback","inView","jsx","InView"],"mappings":";;;AAYO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AACF,MAAa;AACX,QAAMC,IAAWC;AAAA,IACf,CAACC,MAAoB;AACnB,MAAIA,KACaN,IAAA;AAAA,IAEnB;AAAA,IACA,CAACA,CAAY;AAAA,EACf;AAGE,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAAJ;AAAA,MACA,aAAAH;AAAA,MACA,WAAAE;AAAA,MACA,WAAAD;AAAA,MAEC,UAAAH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/hooks/storage/useImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {UploadTarget} from '../../types'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams,\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}) => {\n    formData.append(name, value)\n  })\n  // Append the actual file data last\n  formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const links = await createImageUploadLink({\n        input: params.map(image => ({\n          mimeType: image.mimeType,\n          fileSize: image.fileSize,\n        })),\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      // TODO: Upload multiple files to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        params[0],\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        // TODO: Add support for multiple files\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA0CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAAW;AAClC,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
+{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams,\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n  // Append the actual file data last\n  formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const links = await createImageUploadLink({\n        input: params.map(image => ({\n          mimeType: image.mimeType,\n          fileSize: image.fileSize,\n        })),\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      // TODO: Upload multiple files to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        params[0],\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        // TODO: Add support for multiple files\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA2CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}

package/dist/hooks/util/useErrorScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {useShopActions} from '../../internal/useShopActions'\nimport {ShopActions} from '../../types'\n\ninterface UseErrorScreenReturns {\n  /**\n   * Show an error screen with the given error message.\n   */\n  showErrorScreen: ShopActions['showErrorScreen']\n}\n\nexport const useErrorScreen = (): UseErrorScreenReturns => {\n  const {showErrorScreen} = useShopActions()\n\n  return {showErrorScreen}\n}\n"],"names":["useErrorScreen","showErrorScreen","useShopActions"],"mappings":";AAUO,MAAMA,IAAiB,MAA6B;AACnD,QAAA,EAAC,iBAAAC,EAAe,IAAIC,EAAe;AAEzC,SAAO,EAAC,iBAAAD,EAAe;AACzB;"}
+{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorScreenReturns {\n  /**\n   * Show an error screen with the given error message.\n   */\n  showErrorScreen: ShopActions['showErrorScreen']\n}\n\nexport const useErrorScreen = (): UseErrorScreenReturns => {\n  const {showErrorScreen} = useShopActions()\n\n  return {showErrorScreen}\n}\n"],"names":["useErrorScreen","showErrorScreen","useShopActions"],"mappings":";AAWO,MAAMA,IAAiB,MAA6B;AACnD,QAAA,EAAC,iBAAAC,EAAe,IAAIC,EAAe;AAEzC,SAAO,EAAC,iBAAAD,EAAe;AACzB;"}

package/dist/hooks/util/useErrorToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {useShopActions} from '../../internal/useShopActions'\nimport {ShopActions} from '../../types'\n\ninterface UseErrorToastReturns {\n  /**\n   * Show an error toast with the given error message.\n   */\n  showErrorToast: ShopActions['showErrorToast']\n}\n\nexport const useErrorToast = (): UseErrorToastReturns => {\n  const {showErrorToast} = useShopActions()\n\n  return {showErrorToast}\n}\n"],"names":["useErrorToast","showErrorToast","useShopActions"],"mappings":";AAUO,MAAMA,IAAgB,MAA4B;AACjD,QAAA,EAAC,gBAAAC,EAAc,IAAIC,EAAe;AAExC,SAAO,EAAC,gBAAAD,EAAc;AACxB;"}
+{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorToastReturns {\n  /**\n   * Show an error toast with the given error message.\n   */\n  showErrorToast: ShopActions['showErrorToast']\n}\n\nexport const useErrorToast = (): UseErrorToastReturns => {\n  const {showErrorToast} = useShopActions()\n\n  return {showErrorToast}\n}\n"],"names":["useErrorToast","showErrorToast","useShopActions"],"mappings":";AAWO,MAAMA,IAAgB,MAA4B;AACjD,QAAA,EAAC,gBAAAC,EAAc,IAAIC,EAAe;AAExC,SAAO,EAAC,gBAAAD,EAAc;AACxB;"}