@shopify/shop-minis-react 0.2.1 → 0.2.2

package/dist/internal/useReportInteraction.js

@@ -0,0 +1,21 @@
+import { useCallback as n } from "react";
+import { getWindowLocationPathname as a } from "../utils/getWindowLocationPathname.js";
+import { useHandleAction as c } from "./useHandleAction.js";
+import { useShopActions as i } from "./useShopActions.js";
+const d = () => {
+  const { reportInteraction: r } = i(), o = c(r);
+  return { reportInteraction: n(
+    (t) => {
+      const e = {
+        ...t,
+        pageValue: t.pageValue || a()
+      };
+      return o(e);
+    },
+    [o]
+  ) };
+};
+export {
+  d as useReportInteraction
+};
+//# sourceMappingURL=useReportInteraction.js.map

package/dist/internal/useReportInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReportInteraction.js","sources":["../../src/internal/useReportInteraction.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {ReportInteractionParams} from '@shopify/shop-minis-platform/actions'\n\nimport {getWindowLocationPathname} from '../utils/getWindowLocationPathname'\n\nimport {useHandleAction} from './useHandleAction'\nimport {useShopActions} from './useShopActions'\n\ninterface UseReportInteractionReturns {\n  /**\n   * Report a user interaction event for analytics.\n   */\n  reportInteraction: (params: ReportInteractionParams) => Promise<void>\n}\n\nexport const useReportInteraction = (): UseReportInteractionReturns => {\n  const {reportInteraction} = useShopActions()\n  const handleAction = useHandleAction(reportInteraction)\n\n  const report = useCallback(\n    (params: ReportInteractionParams) => {\n      const enrichedParams = {\n        ...params,\n        pageValue: params.pageValue || getWindowLocationPathname(),\n      }\n      return handleAction(enrichedParams)\n    },\n    [handleAction]\n  )\n\n  return {reportInteraction: report}\n}\n"],"names":["useReportInteraction","reportInteraction","useShopActions","handleAction","useHandleAction","useCallback","params","enrichedParams","getWindowLocationPathname"],"mappings":";;;;AAgBO,MAAMA,IAAuB,MAAmC;AAC/D,QAAA,EAAC,mBAAAC,EAAiB,IAAIC,EAAe,GACrCC,IAAeC,EAAgBH,CAAiB;AAa/C,SAAA,EAAC,mBAXOI;AAAA,IACb,CAACC,MAAoC;AACnC,YAAMC,IAAiB;AAAA,QACrB,GAAGD;AAAA,QACH,WAAWA,EAAO,aAAaE,EAA0B;AAAA,MAC3D;AACA,aAAOL,EAAaI,CAAc;AAAA,IACpC;AAAA,IACA,CAACJ,CAAY;AAAA,EACf,EAEiC;AACnC;"}

package/dist/providers/ImagePickerProvider.js

@@ -1,108 +1,167 @@
-import { jsxs as x, jsx as m } from "react/jsx-runtime";
-import { useRef as i, useCallback as s, useEffect as R, useMemo as I, createContext as b, useContext as A } from "react";
+import { jsxs as x, jsx as h } from "react/jsx-runtime";
+import { useRef as p, useCallback as d, useEffect as I, useMemo as V, createContext as b, useContext as A } from "react";
 import { useRequestPermissions as L } from "../hooks/util/useRequestPermissions.js";
-const k = b(null);
-function H() {
-  const f = A(k);
-  if (!f)
+import { useReportInteraction as M } from "../internal/useReportInteraction.js";
+const R = b(null);
+function F() {
+  const g = A(R);
+  if (!g)
     throw new Error(
       "useImagePickerContext must be used within an ImagePickerProvider"
     );
-  return f;
+  return g;
 }
-function U({ children: f }) {
-  const C = i(null), h = i(null), g = i(null), n = i(null), e = i(null), a = i(null), { requestPermission: p } = L(), r = s(() => {
-    if (a.current) {
-      const { input: u, handler: c } = a.current;
-      u.removeEventListener("cancel", c), a.current = null;
+function N({ children: g }) {
+  const k = p(null), _ = p(null), E = p(null), t = p(null), e = p(null), f = p(null), n = p(null), { requestPermission: y } = L(), { reportInteraction: r } = M(), a = d(() => {
+    if (f.current) {
+      const { input: c, handler: i } = f.current;
+      c.removeEventListener("cancel", i), f.current = null;
     }
-  }, []), o = s(() => {
-    e.current && (e.current(
-      new Error("New file picker opened before previous completed")
-    ), n.current = null, e.current = null);
-  }, []), d = s(
-    (u) => {
-      const c = u.target.files?.[0];
-      c && n.current && (n.current(c), n.current = null, e.current = null, r()), u.target.value = "";
+  }, []), m = d(() => {
+    if (e.current) {
+      const c = new Error(
+        "New file picker opened before previous completed"
+      );
+      n.current === "gallery" ? r({
+        interactionType: "image_picker_error",
+        interactionValue: c.message
+      }) : n.current === "camera" && r({
+        interactionType: "camera_error",
+        interactionValue: c.message
+      }), e.current(c), t.current = null, e.current = null, n.current = null;
+    }
+  }, [r]), C = d(
+    (c) => {
+      const i = c.target.files?.[0];
+      i && t.current && (n.current === "gallery" ? r({
+        interactionType: "image_picker_success"
+      }) : n.current === "camera" && r({
+        interactionType: "camera_success"
+      }), t.current(i), t.current = null, e.current = null, n.current = null, a()), c.target.value = "";
     },
-    [r]
-  ), E = s(() => new Promise((u, c) => {
-    o(), r(), n.current = u, e.current = c;
-    const t = C.current;
-    if (!t) {
-      c(new Error("Gallery input not found")), n.current = null, e.current = null;
+    [a, r]
+  ), P = d(() => new Promise((c, i) => {
+    m(), a(), t.current = c, e.current = i, n.current = "gallery";
+    const u = k.current;
+    if (!u) {
+      const o = new Error("Gallery input not found");
+      r({
+        interactionType: "image_picker_error",
+        interactionValue: o.message
+      }), i(o), t.current = null, e.current = null, n.current = null;
       return;
     }
-    const l = () => {
-      e.current && (e.current(new Error("User cancelled file selection")), n.current = null, e.current = null), r();
+    const s = () => {
+      if (e.current) {
+        const o = new Error("User cancelled file selection");
+        r({
+          interactionType: "image_picker_error",
+          interactionValue: o.message
+        }), e.current(o), t.current = null, e.current = null, n.current = null;
+      }
+      a();
     };
-    t.addEventListener("cancel", l), a.current = { input: t, handler: l }, p({ permission: "CAMERA" }).then(() => {
-      t.click();
+    u.addEventListener("cancel", s), f.current = { input: u, handler: s }, r({
+      interactionType: "image_picker_open"
+    }), y({ permission: "CAMERA" }).then(() => {
+      u.click();
     }).catch(() => {
-      t.click();
+      u.click();
     });
-  }), [o, r, p]), P = s(
-    (u = "back") => new Promise((c, t) => {
-      o(), r(), n.current = c, e.current = t;
-      const l = u === "front" ? h.current : g.current;
-      if (!l) {
-        t(new Error("Camera input not found")), n.current = null, e.current = null;
+  }), [
+    m,
+    a,
+    y,
+    r
+  ]), v = d(
+    (c = "back") => new Promise((i, u) => {
+      m(), a(), t.current = i, e.current = u, n.current = "camera";
+      const s = c === "front" ? _.current : E.current;
+      if (!s) {
+        const l = new Error("Camera input not found");
+        r({
+          interactionType: "camera_error",
+          interactionValue: l.message
+        }), u(l), t.current = null, e.current = null, n.current = null;
         return;
       }
-      const w = () => {
-        e.current && (e.current(new Error("User cancelled camera")), n.current = null, e.current = null), r();
+      const o = () => {
+        if (e.current) {
+          const l = new Error("User cancelled camera");
+          r({
+            interactionType: "camera_error",
+            interactionValue: l.message
+          }), e.current(l), t.current = null, e.current = null, n.current = null;
+        }
+        a();
       };
-      l.addEventListener("cancel", w), a.current = { input: l, handler: w }, p({ permission: "CAMERA" }).then(({ granted: y }) => {
-        y ? l.click() : (t(new Error("Camera permission not granted")), n.current = null, e.current = null);
+      s.addEventListener("cancel", o), f.current = { input: s, handler: o }, r({
+        interactionType: "camera_open"
+      }), y({ permission: "CAMERA" }).then(({ granted: l }) => {
+        if (l)
+          s.click();
+        else {
+          const w = new Error("Camera permission not granted");
+          r({
+            interactionType: "camera_error",
+            interactionValue: w.message
+          }), u(w), t.current = null, e.current = null, n.current = null;
+        }
       }).catch(() => {
-        t(new Error("Camera permission not granted")), n.current = null, e.current = null;
+        const l = new Error("Camera permission not granted");
+        u(l), t.current = null, e.current = null, n.current = null;
       });
     }),
-    [o, r, p]
+    [
+      m,
+      a,
+      y,
+      r
+    ]
   );
-  R(() => () => {
-    o(), r();
-  }, [o, r]);
-  const v = I(
+  I(() => () => {
+    m(), a();
+  }, [m, a]);
+  const T = V(
     () => ({
-      openCamera: P,
-      openGallery: E
+      openCamera: v,
+      openGallery: P
     }),
-    [P, E]
+    [v, P]
   );
-  return /* @__PURE__ */ x(k.Provider, { value: v, children: [
-    f,
-    /* @__PURE__ */ m(
+  return /* @__PURE__ */ x(R.Provider, { value: T, children: [
+    g,
+    /* @__PURE__ */ h(
       "input",
       {
-        ref: C,
+        ref: k,
         type: "file",
         accept: "image/*",
-        onChange: d,
+        onChange: C,
         style: { display: "none" },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ h(
       "input",
       {
-        ref: h,
+        ref: _,
         type: "file",
         accept: "image/*",
         capture: "user",
-        onChange: d,
+        onChange: C,
         style: { display: "none" },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ h(
       "input",
       {
-        ref: g,
+        ref: E,
         type: "file",
         accept: "image/*",
         capture: "environment",
-        onChange: d,
+        onChange: C,
         style: { display: "none" },
         "aria-hidden": "true"
       }
@@ -110,7 +169,7 @@ function U({ children: f }) {
   ] });
 }
 export {
-  U as ImagePickerProvider,
-  H as useImagePickerContext
+  N as ImagePickerProvider,
+  F as useImagePickerContext
 };
 //# sourceMappingURL=ImagePickerProvider.js.map

package/dist/providers/ImagePickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\n\nexport type CameraFacing = 'front' | 'back'\n\ninterface ImagePickerContextValue {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue | null>(null)\n\nexport function useImagePickerContext() {\n  const context = useContext(ImagePickerContext)\n  if (!context) {\n    throw new Error(\n      'useImagePickerContext must be used within an ImagePickerProvider'\n    )\n  }\n  return context\n}\n\ninterface ImagePickerProviderProps {\n  children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n  const galleryInputRef = useRef<HTMLInputElement>(null)\n  const frontCameraInputRef = useRef<HTMLInputElement>(null)\n  const backCameraInputRef = useRef<HTMLInputElement>(null)\n  const resolveRef = useRef<((file: File) => void) | null>(null)\n  const rejectRef = useRef<((reason: Error) => void) | null>(null)\n  const activeCancelHandlerRef = useRef<{\n    input: HTMLInputElement\n    handler: () => void\n  } | null>(null)\n\n  const {requestPermission} = useRequestPermissions()\n\n  const cleanupCancelHandler = useCallback(() => {\n    if (activeCancelHandlerRef.current) {\n      const {input, handler} = activeCancelHandlerRef.current\n      input.removeEventListener('cancel', handler)\n      activeCancelHandlerRef.current = null\n    }\n  }, [])\n\n  const rejectPendingPromise = useCallback(() => {\n    if (rejectRef.current) {\n      rejectRef.current(\n        new Error('New file picker opened before previous completed')\n      )\n      resolveRef.current = null\n      rejectRef.current = null\n    }\n  }, [])\n\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0]\n\n      if (file && resolveRef.current) {\n        resolveRef.current(file)\n\n        resolveRef.current = null\n        rejectRef.current = null\n\n        cleanupCancelHandler()\n      }\n\n      event.target.value = ''\n    },\n    [cleanupCancelHandler]\n  )\n\n  const openGallery = useCallback(() => {\n    return new Promise<File>((resolve, reject) => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n\n      resolveRef.current = resolve\n      rejectRef.current = reject\n\n      const input = galleryInputRef.current\n\n      if (!input) {\n        reject(new Error('Gallery input not found'))\n        resolveRef.current = null\n        rejectRef.current = null\n        return\n      }\n\n      const handleCancel = () => {\n        if (rejectRef.current) {\n          rejectRef.current(new Error('User cancelled file selection'))\n          resolveRef.current = null\n          rejectRef.current = null\n        }\n        cleanupCancelHandler()\n      }\n\n      input.addEventListener('cancel', handleCancel)\n      activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n      requestPermission({permission: 'CAMERA'})\n        .then(() => {\n          // This will show both Camera and Gallery\n          input.click()\n        })\n        .catch(() => {\n          // Show only Gallery\n          input.click()\n        })\n    })\n  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])\n\n  const openCamera = useCallback(\n    (cameraFacing: CameraFacing = 'back') => {\n      return new Promise<File>((resolve, reject) => {\n        rejectPendingPromise()\n        cleanupCancelHandler()\n\n        resolveRef.current = resolve\n        rejectRef.current = reject\n\n        const input =\n          cameraFacing === 'front'\n            ? frontCameraInputRef.current\n            : backCameraInputRef.current\n\n        if (!input) {\n          reject(new Error('Camera input not found'))\n          resolveRef.current = null\n          rejectRef.current = null\n          return\n        }\n\n        const handleCancel = () => {\n          if (rejectRef.current) {\n            rejectRef.current(new Error('User cancelled camera'))\n            resolveRef.current = null\n            rejectRef.current = null\n          }\n          cleanupCancelHandler()\n        }\n\n        input.addEventListener('cancel', handleCancel)\n        activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n        requestPermission({permission: 'CAMERA'})\n          .then(({granted}) => {\n            if (granted) {\n              input.click()\n            } else {\n              reject(new Error('Camera permission not granted'))\n              resolveRef.current = null\n              rejectRef.current = null\n            }\n          })\n          .catch(() => {\n            reject(new Error('Camera permission not granted'))\n            resolveRef.current = null\n            rejectRef.current = null\n          })\n      })\n    },\n    [rejectPendingPromise, cleanupCancelHandler, requestPermission]\n  )\n\n  useEffect(() => {\n    return () => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n    }\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const contextValue: ImagePickerContextValue = useMemo(\n    () => ({\n      openCamera,\n      openGallery,\n    }),\n    [openCamera, openGallery]\n  )\n\n  return (\n    <ImagePickerContext.Provider value={contextValue}>\n      {children}\n      <input\n        ref={galleryInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={frontCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"user\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={backCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n    </ImagePickerContext.Provider>\n  )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","requestPermission","useRequestPermissions","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\nimport {useReportInteraction} from '../internal/useReportInteraction'\n\nexport type CameraFacing = 'front' | 'back'\n\ninterface ImagePickerContextValue {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue | null>(null)\n\nexport function useImagePickerContext() {\n  const context = useContext(ImagePickerContext)\n  if (!context) {\n    throw new Error(\n      'useImagePickerContext must be used within an ImagePickerProvider'\n    )\n  }\n  return context\n}\n\ninterface ImagePickerProviderProps {\n  children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n  const galleryInputRef = useRef<HTMLInputElement>(null)\n  const frontCameraInputRef = useRef<HTMLInputElement>(null)\n  const backCameraInputRef = useRef<HTMLInputElement>(null)\n  const resolveRef = useRef<((file: File) => void) | null>(null)\n  const rejectRef = useRef<((reason: Error) => void) | null>(null)\n  const activeCancelHandlerRef = useRef<{\n    input: HTMLInputElement\n    handler: () => void\n  } | null>(null)\n  const activeOperationRef = useRef<'gallery' | 'camera' | null>(null)\n\n  const {requestPermission} = useRequestPermissions()\n  const {reportInteraction} = useReportInteraction()\n\n  const cleanupCancelHandler = useCallback(() => {\n    if (activeCancelHandlerRef.current) {\n      const {input, handler} = activeCancelHandlerRef.current\n      input.removeEventListener('cancel', handler)\n      activeCancelHandlerRef.current = null\n    }\n  }, [])\n\n  const rejectPendingPromise = useCallback(() => {\n    if (rejectRef.current) {\n      const error = new Error(\n        'New file picker opened before previous completed'\n      )\n      if (activeOperationRef.current === 'gallery') {\n        reportInteraction({\n          interactionType: 'image_picker_error',\n          interactionValue: error.message,\n        })\n      } else if (activeOperationRef.current === 'camera') {\n        reportInteraction({\n          interactionType: 'camera_error',\n          interactionValue: error.message,\n        })\n      }\n\n      rejectRef.current(error)\n      resolveRef.current = null\n      rejectRef.current = null\n      activeOperationRef.current = null\n    }\n  }, [reportInteraction])\n\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0]\n\n      if (file && resolveRef.current) {\n        // Report success based on the active operation\n        if (activeOperationRef.current === 'gallery') {\n          reportInteraction({\n            interactionType: 'image_picker_success',\n          })\n        } else if (activeOperationRef.current === 'camera') {\n          reportInteraction({\n            interactionType: 'camera_success',\n          })\n        }\n\n        resolveRef.current(file)\n\n        resolveRef.current = null\n        rejectRef.current = null\n        activeOperationRef.current = null\n\n        cleanupCancelHandler()\n      }\n\n      event.target.value = ''\n    },\n    [cleanupCancelHandler, reportInteraction]\n  )\n\n  const openGallery = useCallback(() => {\n    return new Promise<File>((resolve, reject) => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n\n      resolveRef.current = resolve\n      rejectRef.current = reject\n      activeOperationRef.current = 'gallery'\n\n      const input = galleryInputRef.current\n\n      if (!input) {\n        const error = new Error('Gallery input not found')\n        reportInteraction({\n          interactionType: 'image_picker_error',\n          interactionValue: error.message,\n        })\n        reject(error)\n        resolveRef.current = null\n        rejectRef.current = null\n        activeOperationRef.current = null\n        return\n      }\n\n      const handleCancel = () => {\n        if (rejectRef.current) {\n          const error = new Error('User cancelled file selection')\n          reportInteraction({\n            interactionType: 'image_picker_error',\n            interactionValue: error.message,\n          })\n          rejectRef.current(error)\n          resolveRef.current = null\n          rejectRef.current = null\n          activeOperationRef.current = null\n        }\n        cleanupCancelHandler()\n      }\n\n      input.addEventListener('cancel', handleCancel)\n      activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n      reportInteraction({\n        interactionType: 'image_picker_open',\n      })\n\n      requestPermission({permission: 'CAMERA'})\n        .then(() => {\n          // This will show both Camera and Gallery\n          input.click()\n        })\n        .catch(() => {\n          // Show only Gallery\n          input.click()\n        })\n    })\n  }, [\n    rejectPendingPromise,\n    cleanupCancelHandler,\n    requestPermission,\n    reportInteraction,\n  ])\n\n  const openCamera = useCallback(\n    (cameraFacing: CameraFacing = 'back') => {\n      return new Promise<File>((resolve, reject) => {\n        rejectPendingPromise()\n        cleanupCancelHandler()\n\n        resolveRef.current = resolve\n        rejectRef.current = reject\n        activeOperationRef.current = 'camera'\n\n        const input =\n          cameraFacing === 'front'\n            ? frontCameraInputRef.current\n            : backCameraInputRef.current\n\n        if (!input) {\n          const error = new Error('Camera input not found')\n          reportInteraction({\n            interactionType: 'camera_error',\n            interactionValue: error.message,\n          })\n          reject(error)\n          resolveRef.current = null\n          rejectRef.current = null\n          activeOperationRef.current = null\n          return\n        }\n\n        const handleCancel = () => {\n          if (rejectRef.current) {\n            const error = new Error('User cancelled camera')\n            reportInteraction({\n              interactionType: 'camera_error',\n              interactionValue: error.message,\n            })\n            rejectRef.current(error)\n            resolveRef.current = null\n            rejectRef.current = null\n            activeOperationRef.current = null\n          }\n          cleanupCancelHandler()\n        }\n\n        input.addEventListener('cancel', handleCancel)\n        activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n        reportInteraction({\n          interactionType: 'camera_open',\n        })\n\n        requestPermission({permission: 'CAMERA'})\n          .then(({granted}) => {\n            if (granted) {\n              input.click()\n            } else {\n              const error = new Error('Camera permission not granted')\n              reportInteraction({\n                interactionType: 'camera_error',\n                interactionValue: error.message,\n              })\n              reject(error)\n              resolveRef.current = null\n              rejectRef.current = null\n              activeOperationRef.current = null\n            }\n          })\n          .catch(() => {\n            const error = new Error('Camera permission not granted')\n            reject(error)\n            resolveRef.current = null\n            rejectRef.current = null\n            activeOperationRef.current = null\n          })\n      })\n    },\n    [\n      rejectPendingPromise,\n      cleanupCancelHandler,\n      requestPermission,\n      reportInteraction,\n    ]\n  )\n\n  useEffect(() => {\n    return () => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n    }\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const contextValue: ImagePickerContextValue = useMemo(\n    () => ({\n      openCamera,\n      openGallery,\n    }),\n    [openCamera, openGallery]\n  )\n\n  return (\n    <ImagePickerContext.Provider value={contextValue}>\n      {children}\n      <input\n        ref={galleryInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={frontCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"user\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={backCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n    </ImagePickerContext.Provider>\n  )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","activeOperationRef","requestPermission","useRequestPermissions","reportInteraction","useReportInteraction","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","error","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}

package/dist/utils/getWindowLocationPathname.js

@@ -0,0 +1,7 @@
+function n() {
+  return typeof window < "u" && window.location ? window.location.pathname || "/" : "";
+}
+export {
+  n as getWindowLocationPathname
+};
+//# sourceMappingURL=getWindowLocationPathname.js.map

package/dist/utils/getWindowLocationPathname.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getWindowLocationPathname.js","sources":["../../src/utils/getWindowLocationPathname.ts"],"sourcesContent":["export function getWindowLocationPathname(): string {\n  if (typeof window !== 'undefined' && window.location) {\n    return window.location.pathname || '/'\n  }\n  return ''\n}\n"],"names":["getWindowLocationPathname"],"mappings":"AAAO,SAASA,IAAoC;AAClD,SAAI,OAAO,SAAW,OAAe,OAAO,WACnC,OAAO,SAAS,YAAY,MAE9B;AACT;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -79,7 +79,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.54.2",
-    "@shopify/generate-docs": "^0.16.6",
     "@storybook/addon-docs": "^9.0.16",
     "@storybook/react-vite": "^9.0.16",
     "@testing-library/jest-dom": "^6.6.4",

package/src/providers/ImagePickerProvider.test.tsx

@@ -17,6 +17,14 @@ vi.mock('../hooks/util/useRequestPermissions', () => ({
   }),
 }))
 
+// Mock useReportInteraction hook
+const mockReportInteraction = vi.fn()
+vi.mock('../internal/useReportInteraction', () => ({
+  useReportInteraction: () => ({
+    reportInteraction: mockReportInteraction,
+  }),
+}))
+
 describe('ImagePickerProvider', () => {
   const originalMinisParams = window.minisParams
 
@@ -24,6 +32,8 @@ describe('ImagePickerProvider', () => {
     vi.clearAllMocks()
     // Default to granting permission
     mockRequestPermission.mockResolvedValue({granted: true})
+    // Clear interaction reporting mock
+    mockReportInteraction.mockClear()
   })
 
   afterEach(() => {
@@ -716,4 +726,385 @@ describe('ImagePickerProvider', () => {
       expect(galleryInput.value).toBe('')
     })
   })
+
+  describe('Interaction Reporting', () => {
+    describe('Gallery interactions', () => {
+      it('reports image_picker_open when gallery is opened', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openGallery().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Gallery
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Gallery')
+        fireEvent.click(button)
+
+        // Wait for interaction to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+      })
+
+      it('reports image_picker_success when file is selected', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openGallery().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Gallery
+            </button>
+          )
+        }
+
+        const {container} = render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const galleryInput = container.querySelector(
+          'input[type="file"]:not([capture])'
+        ) as HTMLInputElement
+
+        const button = screen.getByText('Open Gallery')
+        fireEvent.click(button)
+
+        // Wait for permission and initial interaction
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+
+        // Clear mock to check only for success interaction
+        mockReportInteraction.mockClear()
+
+        // Simulate file selection
+        const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+        Object.defineProperty(galleryInput, 'files', {
+          value: [file],
+          configurable: true,
+        })
+
+        await act(async () => {
+          fireEvent.change(galleryInput)
+        })
+
+        // Check success was reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_success',
+          })
+        })
+      })
+
+      it('reports image_picker_error when interrupted by new picker', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openGallery, openCamera} = useImagePickerContext()
+
+          return (
+            <>
+              <button
+                type="button"
+                onClick={() =>
+                  openGallery().catch(() => {
+                    // Expected to fail
+                  })
+                }
+              >
+                Open Gallery
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  openCamera().catch(() => {
+                    // Ignore errors
+                  })
+                }
+              >
+                Open Camera
+              </button>
+            </>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        // Open gallery first
+        const galleryButton = screen.getByText('Open Gallery')
+        fireEvent.click(galleryButton)
+
+        // Wait for gallery open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Open camera to interrupt gallery
+        const cameraButton = screen.getByText('Open Camera')
+        fireEvent.click(cameraButton)
+
+        // Check error was reported for interrupted gallery operation
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'image_picker_error',
+            interactionValue:
+              'New file picker opened before previous completed',
+          })
+        })
+      })
+    })
+
+    describe('Camera interactions', () => {
+      it('reports camera_open when camera is opened', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for interaction to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+      })
+
+      it('reports camera_success when photo is captured', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        const {container} = render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const cameraInput = container.querySelector(
+          'input[capture="environment"]'
+        ) as HTMLInputElement
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for camera open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Simulate photo capture
+        const file = new File(['photo'], 'photo.jpg', {type: 'image/jpeg'})
+        Object.defineProperty(cameraInput, 'files', {
+          value: [file],
+          configurable: true,
+        })
+
+        await act(async () => {
+          fireEvent.change(cameraInput)
+        })
+
+        // Check success was reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_success',
+          })
+        })
+      })
+
+      it('reports camera_error when interrupted by new picker', async () => {
+        mockRequestPermission.mockResolvedValue({granted: true})
+
+        const TestComponent = () => {
+          const {openCamera, openGallery} = useImagePickerContext()
+
+          return (
+            <>
+              <button
+                type="button"
+                onClick={() =>
+                  openCamera().catch(() => {
+                    // Expected to fail
+                  })
+                }
+              >
+                Open Camera
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  openGallery().catch(() => {
+                    // Ignore errors
+                  })
+                }
+              >
+                Open Gallery
+              </button>
+            </>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        // Open camera first
+        const cameraButton = screen.getByText('Open Camera')
+        fireEvent.click(cameraButton)
+
+        // Wait for camera open to be reported
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_open',
+          })
+        })
+
+        mockReportInteraction.mockClear()
+
+        // Open gallery to interrupt camera
+        const galleryButton = screen.getByText('Open Gallery')
+        fireEvent.click(galleryButton)
+
+        // Check error was reported for interrupted camera operation
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_error',
+            interactionValue:
+              'New file picker opened before previous completed',
+          })
+        })
+      })
+
+      it('reports camera_error when permission is denied', async () => {
+        mockRequestPermission.mockResolvedValue({granted: false})
+
+        const TestComponent = () => {
+          const {openCamera} = useImagePickerContext()
+
+          return (
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Expected to fail
+                })
+              }
+            >
+              Open Camera
+            </button>
+          )
+        }
+
+        render(
+          <ImagePickerProvider>
+            <TestComponent />
+          </ImagePickerProvider>
+        )
+
+        const button = screen.getByText('Open Camera')
+        fireEvent.click(button)
+
+        // Wait for permission request
+        await vi.waitFor(() => {
+          expect(mockRequestPermission).toHaveBeenCalled()
+        })
+
+        // Camera open should be reported
+        expect(mockReportInteraction).toHaveBeenCalledWith({
+          interactionType: 'camera_open',
+        })
+
+        // Error interaction should be reported for permission denial
+        await vi.waitFor(() => {
+          expect(mockReportInteraction).toHaveBeenCalledWith({
+            interactionType: 'camera_error',
+            interactionValue: 'Camera permission not granted',
+          })
+        })
+      })
+    })
+  })
 })

package/src/providers/ImagePickerProvider.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react'
 
 import {useRequestPermissions} from '../hooks/util/useRequestPermissions'
+import {useReportInteraction} from '../internal/useReportInteraction'
 
 export type CameraFacing = 'front' | 'back'
 
@@ -42,8 +43,10 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
     input: HTMLInputElement
     handler: () => void
   } | null>(null)
+  const activeOperationRef = useRef<'gallery' | 'camera' | null>(null)
 
   const {requestPermission} = useRequestPermissions()
+  const {reportInteraction} = useReportInteraction()
 
   const cleanupCancelHandler = useCallback(() => {
     if (activeCancelHandlerRef.current) {
@@ -55,30 +58,56 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
 
   const rejectPendingPromise = useCallback(() => {
     if (rejectRef.current) {
-      rejectRef.current(
-        new Error('New file picker opened before previous completed')
+      const error = new Error(
+        'New file picker opened before previous completed'
       )
+      if (activeOperationRef.current === 'gallery') {
+        reportInteraction({
+          interactionType: 'image_picker_error',
+          interactionValue: error.message,
+        })
+      } else if (activeOperationRef.current === 'camera') {
+        reportInteraction({
+          interactionType: 'camera_error',
+          interactionValue: error.message,
+        })
+      }
+
+      rejectRef.current(error)
       resolveRef.current = null
       rejectRef.current = null
+      activeOperationRef.current = null
     }
-  }, [])
+  }, [reportInteraction])
 
   const handleFileChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0]
 
       if (file && resolveRef.current) {
+        // Report success based on the active operation
+        if (activeOperationRef.current === 'gallery') {
+          reportInteraction({
+            interactionType: 'image_picker_success',
+          })
+        } else if (activeOperationRef.current === 'camera') {
+          reportInteraction({
+            interactionType: 'camera_success',
+          })
+        }
+
         resolveRef.current(file)
 
         resolveRef.current = null
         rejectRef.current = null
+        activeOperationRef.current = null
 
         cleanupCancelHandler()
       }
 
       event.target.value = ''
     },
-    [cleanupCancelHandler]
+    [cleanupCancelHandler, reportInteraction]
   )
 
   const openGallery = useCallback(() => {
@@ -88,21 +117,34 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
 
       resolveRef.current = resolve
       rejectRef.current = reject
+      activeOperationRef.current = 'gallery'
 
       const input = galleryInputRef.current
 
       if (!input) {
-        reject(new Error('Gallery input not found'))
+        const error = new Error('Gallery input not found')
+        reportInteraction({
+          interactionType: 'image_picker_error',
+          interactionValue: error.message,
+        })
+        reject(error)
         resolveRef.current = null
         rejectRef.current = null
+        activeOperationRef.current = null
         return
       }
 
       const handleCancel = () => {
         if (rejectRef.current) {
-          rejectRef.current(new Error('User cancelled file selection'))
+          const error = new Error('User cancelled file selection')
+          reportInteraction({
+            interactionType: 'image_picker_error',
+            interactionValue: error.message,
+          })
+          rejectRef.current(error)
           resolveRef.current = null
           rejectRef.current = null
+          activeOperationRef.current = null
         }
         cleanupCancelHandler()
       }
@@ -110,6 +152,10 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       input.addEventListener('cancel', handleCancel)
       activeCancelHandlerRef.current = {input, handler: handleCancel}
 
+      reportInteraction({
+        interactionType: 'image_picker_open',
+      })
+
       requestPermission({permission: 'CAMERA'})
         .then(() => {
           // This will show both Camera and Gallery
@@ -120,7 +166,12 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
           input.click()
         })
     })
-  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])
+  }, [
+    rejectPendingPromise,
+    cleanupCancelHandler,
+    requestPermission,
+    reportInteraction,
+  ])
 
   const openCamera = useCallback(
     (cameraFacing: CameraFacing = 'back') => {
@@ -130,6 +181,7 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
 
         resolveRef.current = resolve
         rejectRef.current = reject
+        activeOperationRef.current = 'camera'
 
         const input =
           cameraFacing === 'front'
@@ -137,17 +189,29 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
             : backCameraInputRef.current
 
         if (!input) {
-          reject(new Error('Camera input not found'))
+          const error = new Error('Camera input not found')
+          reportInteraction({
+            interactionType: 'camera_error',
+            interactionValue: error.message,
+          })
+          reject(error)
           resolveRef.current = null
           rejectRef.current = null
+          activeOperationRef.current = null
           return
         }
 
         const handleCancel = () => {
           if (rejectRef.current) {
-            rejectRef.current(new Error('User cancelled camera'))
+            const error = new Error('User cancelled camera')
+            reportInteraction({
+              interactionType: 'camera_error',
+              interactionValue: error.message,
+            })
+            rejectRef.current(error)
             resolveRef.current = null
             rejectRef.current = null
+            activeOperationRef.current = null
           }
           cleanupCancelHandler()
         }
@@ -155,24 +219,41 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         input.addEventListener('cancel', handleCancel)
         activeCancelHandlerRef.current = {input, handler: handleCancel}
 
+        reportInteraction({
+          interactionType: 'camera_open',
+        })
+
         requestPermission({permission: 'CAMERA'})
           .then(({granted}) => {
             if (granted) {
               input.click()
             } else {
-              reject(new Error('Camera permission not granted'))
+              const error = new Error('Camera permission not granted')
+              reportInteraction({
+                interactionType: 'camera_error',
+                interactionValue: error.message,
+              })
+              reject(error)
               resolveRef.current = null
               rejectRef.current = null
+              activeOperationRef.current = null
             }
           })
           .catch(() => {
-            reject(new Error('Camera permission not granted'))
+            const error = new Error('Camera permission not granted')
+            reject(error)
             resolveRef.current = null
             rejectRef.current = null
+            activeOperationRef.current = null
           })
       })
     },
-    [rejectPendingPromise, cleanupCancelHandler, requestPermission]
+    [
+      rejectPendingPromise,
+      cleanupCancelHandler,
+      requestPermission,
+      reportInteraction,
+    ]
   )
 
   useEffect(() => {