@shopify/shop-minis-react 0.2.1 → 0.2.3

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(() => {