@shopify/shop-minis-react 0.0.33 → 0.0.35

package/dist/components/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Input({className, type, ...props}: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","className","type","props","jsx","cn"],"mappings":";;AAIA,SAASA,EAAM,EAAC,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAuC;AAEvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\n// using the default ref doesn't seem to set the parent's ref object when mounted\n// Since this is a shadCN component, we need to make sure to add back the innerRef prop,\n// whenever the component is updated.\nfunction Input({\n  innerRef,\n  className,\n  type,\n  ...props\n}: React.ComponentProps<'input'> & {innerRef?: React.Ref<HTMLInputElement>}) {\n  return (\n    <input\n      ref={innerRef}\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {Input}\n"],"names":["Input","innerRef","className","type","props","jsx","cn"],"mappings":";;AAOA,SAASA,EAAM;AAAA,EACb,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,GAA6E;AAEzE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,MAAAE;AAAA,MACA,aAAU;AAAA,MACV,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/hooks/content/useCreateImageContent.js

@@ -1,40 +1,34 @@
-import { useState as u, useCallback as g } from "react";
+import { useState as g, useCallback as p } from "react";
 import { useHandleAction as f } from "../../internal/useHandleAction.js";
 import { useShopActions as d } from "../../internal/useShopActions.js";
-import { useImageUpload as w } from "../storage/useImageUpload.js";
-import { fileToDataUri as I } from "../../utils/imageToDataUri.js";
-const E = () => {
-  const { createContent: t } = d(), { uploadImage: a } = w(), [i, o] = u(!1), n = g(
-    async (m) => {
+import { useImageUpload as I } from "../storage/useImageUpload.js";
+const U = () => {
+  const { createContent: t } = d(), { uploadImage: a } = I(), [r, o] = g(!1), i = p(
+    async (s) => {
       o(!0);
-      const { image: e, contentTitle: s, visibility: l } = m;
+      const { image: e, contentTitle: l, visibility: m } = s;
       if (!e.type)
         throw new Error("Unable to determine file type");
       if (!e.type.startsWith("image/"))
         throw new Error("Invalid file type: must be an image");
-      const [c] = await a([
-        {
-          mimeType: e.type,
-          uri: await I(e)
-        }
-      ]), r = c.imageUrl;
-      if (!r)
+      const [c] = await a(e), n = c.imageUrl;
+      if (!n)
         throw new Error("Image upload failed");
-      const p = await t({
-        title: s,
-        imageUrl: r,
-        visibility: l
+      const u = await t({
+        title: l,
+        imageUrl: n,
+        visibility: m
       });
-      return o(!1), p;
+      return o(!1), u;
     },
     [t, a]
   );
   return {
-    createImageContent: f(n),
-    loading: i
+    createImageContent: f(i),
+    loading: r
   };
 };
 export {
-  E as useCreateImageContent
+  U as useCreateImageContent
 };
 //# sourceMappingURL=useCreateImageContent.js.map

package/dist/hooks/content/useCreateImageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateImageContent.js","sources":["../../../src/hooks/content/useCreateImageContent.ts"],"sourcesContent":["import {useCallback, useState} from 'react'\n\nimport {\n  ContentVisibility,\n  Content,\n  ContentCreateUserErrors,\n} from '@shopify/shop-minis-platform'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\nimport {fileToDataUri} from '../../utils'\nimport {useImageUpload} from '../storage/useImageUpload'\n\ninterface CreateImageContentParams {\n  image: File\n  contentTitle: string\n  visibility?: ContentVisibility[] | null\n}\n\ninterface UseCreateImageContentReturns {\n  /**\n   * Upload an image and create content.\n   */\n  createImageContent: (\n    params: CreateImageContentParams\n  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>\n  /**\n   * Whether the content is being created.\n   */\n  loading: boolean\n}\n\nexport const useCreateImageContent = (): UseCreateImageContentReturns => {\n  const {createContent} = useShopActions()\n  const {uploadImage} = useImageUpload()\n  const [loading, setLoading] = useState(false)\n\n  const createImageContent = useCallback(\n    async (params: CreateImageContentParams) => {\n      setLoading(true)\n\n      const {image, contentTitle, visibility} = params\n\n      if (!image.type) {\n        throw new Error('Unable to determine file type')\n      }\n      if (!image.type.startsWith('image/')) {\n        throw new Error('Invalid file type: must be an image')\n      }\n\n      const [uploadImageResult] = await uploadImage([\n        {\n          mimeType: image.type,\n          uri: await fileToDataUri(image),\n        },\n      ])\n      const uploadImageUrl = uploadImageResult.imageUrl\n\n      if (!uploadImageUrl) {\n        throw new Error('Image upload failed')\n      }\n\n      const createContentResult = await createContent({\n        title: contentTitle,\n        imageUrl: uploadImageUrl,\n        visibility,\n      })\n\n      setLoading(false)\n\n      return createContentResult\n    },\n    [createContent, uploadImage]\n  )\n\n  return {\n    createImageContent: useHandleAction(createImageContent),\n    loading,\n  }\n}\n"],"names":["useCreateImageContent","createContent","useShopActions","uploadImage","useImageUpload","loading","setLoading","useState","createImageContent","useCallback","params","image","contentTitle","visibility","uploadImageResult","fileToDataUri","uploadImageUrl","createContentResult","useHandleAction"],"mappings":";;;;;AAgCO,MAAMA,IAAwB,MAAoC;AACjE,QAAA,EAAC,eAAAC,EAAa,IAAIC,EAAe,GACjC,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAC/B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAqBC;AAAA,IACzB,OAAOC,MAAqC;AAC1C,MAAAJ,EAAW,EAAI;AAEf,YAAM,EAAC,OAAAK,GAAO,cAAAC,GAAc,YAAAC,EAAc,IAAAH;AAEtC,UAAA,CAACC,EAAM;AACH,cAAA,IAAI,MAAM,+BAA+B;AAEjD,UAAI,CAACA,EAAM,KAAK,WAAW,QAAQ;AAC3B,cAAA,IAAI,MAAM,qCAAqC;AAGvD,YAAM,CAACG,CAAiB,IAAI,MAAMX,EAAY;AAAA,QAC5C;AAAA,UACE,UAAUQ,EAAM;AAAA,UAChB,KAAK,MAAMI,EAAcJ,CAAK;AAAA,QAAA;AAAA,MAChC,CACD,GACKK,IAAiBF,EAAkB;AAEzC,UAAI,CAACE;AACG,cAAA,IAAI,MAAM,qBAAqB;AAGjC,YAAAC,IAAsB,MAAMhB,EAAc;AAAA,QAC9C,OAAOW;AAAA,QACP,UAAUI;AAAA,QACV,YAAAH;AAAA,MAAA,CACD;AAED,aAAAP,EAAW,EAAK,GAETW;AAAA,IACT;AAAA,IACA,CAAChB,GAAeE,CAAW;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL,oBAAoBe,EAAgBV,CAAkB;AAAA,IACtD,SAAAH;AAAA,EACF;AACF;"}
+{"version":3,"file":"useCreateImageContent.js","sources":["../../../src/hooks/content/useCreateImageContent.ts"],"sourcesContent":["import {useCallback, useState} from 'react'\n\nimport {\n  ContentVisibility,\n  Content,\n  ContentCreateUserErrors,\n} from '@shopify/shop-minis-platform'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useImageUpload} from '../storage/useImageUpload'\n\ninterface CreateImageContentParams {\n  image: File\n  contentTitle: string\n  visibility?: ContentVisibility[] | null\n}\n\ninterface UseCreateImageContentReturns {\n  /**\n   * Upload an image and create content.\n   */\n  createImageContent: (\n    params: CreateImageContentParams\n  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>\n  /**\n   * Whether the content is being created.\n   */\n  loading: boolean\n}\n\nexport const useCreateImageContent = (): UseCreateImageContentReturns => {\n  const {createContent} = useShopActions()\n  const {uploadImage} = useImageUpload()\n  const [loading, setLoading] = useState(false)\n\n  const createImageContent = useCallback(\n    async (params: CreateImageContentParams) => {\n      setLoading(true)\n\n      const {image, contentTitle, visibility} = params\n\n      if (!image.type) {\n        throw new Error('Unable to determine file type')\n      }\n      if (!image.type.startsWith('image/')) {\n        throw new Error('Invalid file type: must be an image')\n      }\n\n      const [uploadImageResult] = await uploadImage(image)\n      const uploadImageUrl = uploadImageResult.imageUrl\n\n      if (!uploadImageUrl) {\n        throw new Error('Image upload failed')\n      }\n\n      const createContentResult = await createContent({\n        title: contentTitle,\n        imageUrl: uploadImageUrl,\n        visibility,\n      })\n\n      setLoading(false)\n\n      return createContentResult\n    },\n    [createContent, uploadImage]\n  )\n\n  return {\n    createImageContent: useHandleAction(createImageContent),\n    loading,\n  }\n}\n"],"names":["useCreateImageContent","createContent","useShopActions","uploadImage","useImageUpload","loading","setLoading","useState","createImageContent","useCallback","params","image","contentTitle","visibility","uploadImageResult","uploadImageUrl","createContentResult","useHandleAction"],"mappings":";;;;AA+BO,MAAMA,IAAwB,MAAoC;AACjE,QAAA,EAAC,eAAAC,EAAa,IAAIC,EAAe,GACjC,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAC/B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAqBC;AAAA,IACzB,OAAOC,MAAqC;AAC1C,MAAAJ,EAAW,EAAI;AAEf,YAAM,EAAC,OAAAK,GAAO,cAAAC,GAAc,YAAAC,EAAc,IAAAH;AAEtC,UAAA,CAACC,EAAM;AACH,cAAA,IAAI,MAAM,+BAA+B;AAEjD,UAAI,CAACA,EAAM,KAAK,WAAW,QAAQ;AAC3B,cAAA,IAAI,MAAM,qCAAqC;AAGvD,YAAM,CAACG,CAAiB,IAAI,MAAMX,EAAYQ,CAAK,GAC7CI,IAAiBD,EAAkB;AAEzC,UAAI,CAACC;AACG,cAAA,IAAI,MAAM,qBAAqB;AAGjC,YAAAC,IAAsB,MAAMf,EAAc;AAAA,QAC9C,OAAOW;AAAA,QACP,UAAUG;AAAA,QACV,YAAAF;AAAA,MAAA,CACD;AAED,aAAAP,EAAW,EAAK,GAETU;AAAA,IACT;AAAA,IACA,CAACf,GAAeE,CAAW;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL,oBAAoBc,EAAgBT,CAAkB;AAAA,IACtD,SAAAH;AAAA,EACF;AACF;"}

package/dist/hooks/storage/useImageUpload.js

@@ -1,51 +1,50 @@
 import { useCallback as m } from "react";
-import { useShopActions as u } from "../../internal/useShopActions.js";
+import { useShopActions as c } from "../../internal/useShopActions.js";
+import { fileToDataUri as u } from "../../utils/image.js";
 const d = async (e) => {
-  const r = await (await fetch(e.uri)).blob();
+  const r = await u(e), o = await (await fetch(r)).blob();
   return {
-    ...e,
-    fileSize: e.fileSize ?? r.size,
-    fileBlob: r
+    mimeType: e.type,
+    fileSize: e.size ?? o.size,
+    fileBlob: o
   };
-}, f = async (e, o) => {
-  const r = new FormData();
-  o.parameters.forEach(({ name: l, value: t }) => {
-    r.append(l, t);
-  }), r.append("file", e.fileBlob);
-  const a = await fetch(o.url, {
+}, f = async (e, r) => {
+  const t = new FormData();
+  r.parameters.forEach(({ name: s, value: a }) => {
+    t.append(s, a);
+  }), t.append("file", e.fileBlob);
+  const o = await fetch(r.url, {
     method: "POST",
-    body: r
+    body: t
   });
-  return a.ok ? {} : (console.error("Failed to upload image", {
-    response: await a.text()
+  return o.ok ? {} : (console.error("Failed to upload image", {
+    response: await o.text()
   }), { error: "Failed to upload image" });
-}, h = () => {
-  const { createImageUploadLink: e, completeImageUpload: o } = u();
+}, U = () => {
+  const { createImageUploadLink: e, completeImageUpload: r } = c();
   return {
     uploadImage: m(
-      async (a) => {
-        if (a.length > 1)
-          throw new Error("Multiple image upload is not supported yet");
-        const l = a[0], t = await d(l), s = await e({
+      async (o) => {
+        const s = await d(o), a = await e({
           input: [
             {
-              mimeType: t.mimeType,
-              fileSize: t.fileSize
+              mimeType: s.mimeType,
+              fileSize: s.fileSize
             }
           ]
         });
-        if (!s.ok)
-          throw new Error(s.error.message);
-        const { error: p } = await f(
-          t,
-          s?.data?.targets?.[0]
+        if (!a.ok)
+          throw new Error(a.error.message);
+        const { error: n } = await f(
+          s,
+          a?.data?.targets?.[0]
         );
-        if (p)
-          throw new Error(p);
-        let c = 0;
-        for (; c < 30; ) {
-          const i = await o({
-            resourceUrls: s?.data?.targets?.map((n) => n.resourceUrl) || []
+        if (n)
+          throw new Error(n);
+        let p = 0;
+        for (; p < 30; ) {
+          const i = await r({
+            resourceUrls: a?.data?.targets?.map((l) => l.resourceUrl) || []
           });
           if (!i.ok)
             throw new Error(i.error.message);
@@ -54,18 +53,18 @@ const d = async (e) => {
               {
                 id: i.data.files[0].id,
                 imageUrl: i.data.files[0].image?.url,
-                resourceUrl: s?.data?.targets?.[0]?.resourceUrl
+                resourceUrl: a?.data?.targets?.[0]?.resourceUrl
               }
             ];
-          await new Promise((n) => setTimeout(n, 1e3)), c++;
+          await new Promise((l) => setTimeout(l, 1e3)), p++;
         }
         throw new Error("Image upload completion timed out");
       },
-      [e, o]
+      [e, r]
     )
   };
 };
 export {
-  h as useImageUpload
+  U as useImageUpload
 };
 //# sourceMappingURL=useImageUpload.js.map

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'\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\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: UploadImageParams) => {\n  const response = await fetch(image.uri)\n  const blob = await response.blob()\n\n  return {\n    ...image,\n    fileSize: image.fileSize ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams & {fileSize: number; fileBlob: Blob},\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\n  formData.append('file', image.fileBlob)\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 imageParams = params[0]\n      const processedImageParams = await processFileData(imageParams)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\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        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":["processFileData","image","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","imageParams","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;AA6CA,MAAMA,IAAkB,OAAOC,MAA6B;AAEpD,QAAAC,IAAO,OADI,MAAM,MAAMD,EAAM,GAAG,GACV,KAAK;AAE1B,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,UAAUA,EAAM,YAAYC,EAAK;AAAA,IACjC,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OACtBF,GACAG,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,GAEQF,EAAA,OAAO,QAAQJ,EAAM,QAAQ;AAEtC,QAAMO,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;AAiE7D,SAAA;AAAA,IACL,aAhEkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAcD,EAAO,CAAC,GACtBE,IAAuB,MAAMhB,EAAgBe,CAAW,GAExDE,IAAQ,MAAMP,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUM,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMf;AAAA,UACjCa;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMT,EAAoB;AAAA,YACvC,cACEM,GAAO,MAAM,SAAS,IAAI,CAAUb,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACgB,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,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,CAACT,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'\nimport {fileToDataUri} from '../../utils'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The file to upload.\n   */\n  image: File\n}\n\ninterface ProcessedImage {\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 file blob of the image.\n   */\n  fileBlob: Blob\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 which will be attached to the current user.\n   */\n  uploadImage: (image: File) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: File): Promise<ProcessedImage> => {\n  const uri = await fileToDataUri(image)\n\n  const response = await fetch(uri)\n  const blob = await response.blob()\n\n  return {\n    mimeType: image.type,\n    fileSize: image.size ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\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 (image: File) => {\n      const processedImageParams = await processFileData(image)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\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        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":["processFileData","image","uri","fileToDataUri","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;;AAqDA,MAAMA,IAAkB,OAAOC,MAAyC;AAChE,QAAAC,IAAM,MAAMC,EAAcF,CAAK,GAG/BG,IAAO,OADI,MAAM,MAAMF,CAAG,GACJ,KAAK;AAE1B,SAAA;AAAA,IACL,UAAUD,EAAM;AAAA,IAChB,UAAUA,EAAM,QAAQG,EAAK;AAAA,IAC7B,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OAAOJ,GAAuBK,MAAyB;AACvE,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQN,EAAM,QAAQ;AAEtC,QAAMS,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;AA4D7D,SAAA;AAAA,IACL,aA3DkBC;AAAA,MAClB,OAAOd,MAAgB;AACf,cAAAe,IAAuB,MAAMhB,EAAgBC,CAAK,GAElDgB,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUI,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMb;AAAA,UACjCW;AAAA,UACAC,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;AAGtC,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/useKeyboardAvoidingView.js

@@ -0,0 +1,23 @@
+import { useCallback as e } from "react";
+import { useShopActions as i } from "../../internal/useShopActions.js";
+const l = () => {
+  const { translateContentUp: t, translateContentDown: o } = i(), r = e(
+    (n) => {
+      if (n.current) {
+        const c = n.current.getBoundingClientRect();
+        t({ inputYPosition: c.bottom });
+      }
+    },
+    [t]
+  ), s = e(() => {
+    o();
+  }, [o]);
+  return {
+    onFocus: r,
+    onBlur: s
+  };
+};
+export {
+  l as useKeyboardAvoidingView
+};
+//# sourceMappingURL=useKeyboardAvoidingView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardAvoidingView.js","sources":["../../../src/hooks/util/useKeyboardAvoidingView.ts"],"sourcesContent":["import {RefObject, useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nexport interface UseKeyboardAvoidingViewReturns {\n  /**\n   * function to call when the input is focused\n   */\n  onFocus: (ref: RefObject<HTMLElement | null>) => void\n  /**\n   * function to call when the input is blurred\n   */\n  onBlur: () => void\n}\n\nexport const useKeyboardAvoidingView = (): UseKeyboardAvoidingViewReturns => {\n  const {translateContentUp, translateContentDown} = useShopActions()\n\n  const onFocus = useCallback(\n    (ref: RefObject<HTMLElement | null>) => {\n      if (ref.current) {\n        const rect = ref.current.getBoundingClientRect()\n        translateContentUp({inputYPosition: rect.bottom})\n      }\n    },\n    [translateContentUp]\n  )\n\n  const onBlur = useCallback(() => {\n    translateContentDown()\n  }, [translateContentDown])\n\n  return {\n    onFocus,\n    onBlur,\n  }\n}\n"],"names":["useKeyboardAvoidingView","translateContentUp","translateContentDown","useShopActions","onFocus","useCallback","ref","rect","onBlur"],"mappings":";;AAeO,MAAMA,IAA0B,MAAsC;AAC3E,QAAM,EAAC,oBAAAC,GAAoB,sBAAAC,EAAoB,IAAIC,EAAe,GAE5DC,IAAUC;AAAA,IACd,CAACC,MAAuC;AACtC,UAAIA,EAAI,SAAS;AACT,cAAAC,IAAOD,EAAI,QAAQ,sBAAsB;AAC/C,QAAAL,EAAmB,EAAC,gBAAgBM,EAAK,OAAA,CAAO;AAAA,MAAA;AAAA,IAEpD;AAAA,IACA,CAACN,CAAkB;AAAA,EACrB,GAEMO,IAASH,EAAY,MAAM;AACV,IAAAH,EAAA;AAAA,EAAA,GACpB,CAACA,CAAoB,CAAC;AAElB,SAAA;AAAA,IACL,SAAAE;AAAA,IACA,QAAAI;AAAA,EACF;AACF;"}