@shopify/shop-minis-react 0.1.8 → 0.2.1

package/src/providers/ImagePickerProvider.test.tsx

@@ -89,7 +89,9 @@ describe('ImagePickerProvider', () => {
   })
 
   describe('openGallery', () => {
-    it('triggers gallery input click directly on non-Android platforms', async () => {
+    it('requests CAMERA permission before showing picker', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openGallery} = useImagePickerContext()
 
@@ -129,7 +131,17 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Gallery')
       fireEvent.click(button)
 
-      expect(clickSpy).toHaveBeenCalledTimes(1)
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should be clicked after permission request
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
 
       // Simulate file selection
       const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
@@ -152,6 +164,8 @@ describe('ImagePickerProvider', () => {
     })
 
     it('handles cancel event', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openGallery} = useImagePickerContext()
 
@@ -185,6 +199,13 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Gallery')
       fireEvent.click(button)
 
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
       // Simulate cancel event
       await act(async () => {
         const cancelEvent = new Event('cancel', {bubbles: true})
@@ -199,56 +220,7 @@ describe('ImagePickerProvider', () => {
       })
     })
 
-    it('requests CAMERA permission on Android before showing picker', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
-      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 clickSpy = vi.spyOn(galleryInput, 'click')
-
-      const button = screen.getByText('Open Gallery')
-      fireEvent.click(button)
-
-      // Wait for permission request to complete
-      await vi.waitFor(() => {
-        expect(mockRequestPermission).toHaveBeenCalledWith({
-          permission: 'CAMERA',
-        })
-      })
-
-      // Input should be clicked after permission request
-      await vi.waitFor(() => {
-        expect(clickSpy).toHaveBeenCalledTimes(1)
-      })
-    })
-
-    it('still opens picker on Android even if CAMERA permission is denied', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
+    it('still opens picker even if CAMERA permission is denied', async () => {
       mockRequestPermission.mockRejectedValue(new Error('Permission denied'))
 
       const TestComponent = () => {
@@ -297,7 +269,9 @@ describe('ImagePickerProvider', () => {
   })
 
   describe('openCamera', () => {
-    it('triggers back camera input click directly on non-Android platforms', async () => {
+    it('requests CAMERA permission and opens camera if granted', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -329,10 +303,22 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Camera')
       fireEvent.click(button)
 
-      expect(clickSpy).toHaveBeenCalledTimes(1)
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Input should be clicked after permission is granted
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
     })
 
     it('triggers front camera input click when specified', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -364,10 +350,22 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Front Camera')
       fireEvent.click(button)
 
-      expect(clickSpy).toHaveBeenCalledTimes(1)
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
+      // Front camera input should be clicked after permission is granted
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
     })
 
     it('resolves with selected file from camera', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -405,6 +403,13 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Camera')
       fireEvent.click(button)
 
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
       // Simulate file capture
       const file = new File(['photo'], 'photo.jpg', {type: 'image/jpeg'})
       Object.defineProperty(cameraInput, 'files', {
@@ -423,6 +428,8 @@ describe('ImagePickerProvider', () => {
     })
 
     it('handles cancel event for camera', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -456,6 +463,13 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Camera')
       fireEvent.click(button)
 
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
       // Simulate cancel event
       await act(async () => {
         const cancelEvent = new Event('cancel', {bubbles: true})
@@ -470,56 +484,7 @@ describe('ImagePickerProvider', () => {
       })
     })
 
-    it('requests CAMERA permission on Android and opens camera if granted', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
-      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 clickSpy = vi.spyOn(cameraInput, 'click')
-
-      const button = screen.getByText('Open Camera')
-      fireEvent.click(button)
-
-      // Wait for permission request to complete
-      await vi.waitFor(() => {
-        expect(mockRequestPermission).toHaveBeenCalledWith({
-          permission: 'CAMERA',
-        })
-      })
-
-      // Input should be clicked after permission is granted
-      await vi.waitFor(() => {
-        expect(clickSpy).toHaveBeenCalledTimes(1)
-      })
-    })
-
-    it('rejects with error on Android if CAMERA permission is not granted', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
+    it('rejects with error if CAMERA permission is not granted', async () => {
       mockRequestPermission.mockResolvedValue({granted: false})
 
       const TestComponent = () => {
@@ -575,8 +540,7 @@ describe('ImagePickerProvider', () => {
       })
     })
 
-    it('rejects with error on Android if permission request fails', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
+    it('rejects with error if permission request fails', async () => {
       mockRequestPermission.mockRejectedValue(
         new Error('Permission request failed')
       )
@@ -633,58 +597,12 @@ describe('ImagePickerProvider', () => {
         expect(errorMessage?.textContent).toBe('Camera permission not granted')
       })
     })
-
-    it('requests permission for front camera on Android', async () => {
-      window.minisParams = {...window.minisParams, platform: 'android'} as any
-      mockRequestPermission.mockResolvedValue({granted: true})
-
-      const TestComponent = () => {
-        const {openCamera} = useImagePickerContext()
-
-        return (
-          <button
-            type="button"
-            onClick={() =>
-              openCamera('front').catch(() => {
-                // Ignore errors from cleanup
-              })
-            }
-          >
-            Open Front Camera
-          </button>
-        )
-      }
-
-      const {container} = render(
-        <ImagePickerProvider>
-          <TestComponent />
-        </ImagePickerProvider>
-      )
-
-      const frontCameraInput = container.querySelector(
-        'input[capture="user"]'
-      ) as HTMLInputElement
-      const clickSpy = vi.spyOn(frontCameraInput, 'click')
-
-      const button = screen.getByText('Open Front Camera')
-      fireEvent.click(button)
-
-      // Wait for permission request to complete
-      await vi.waitFor(() => {
-        expect(mockRequestPermission).toHaveBeenCalledWith({
-          permission: 'CAMERA',
-        })
-      })
-
-      // Front camera input should be clicked after permission is granted
-      await vi.waitFor(() => {
-        expect(clickSpy).toHaveBeenCalledTimes(1)
-      })
-    })
   })
 
   describe('Multiple Picker Handling', () => {
     it('rejects previous promise when new picker is opened', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openCamera, openGallery} = useImagePickerContext()
 
@@ -744,6 +662,8 @@ describe('ImagePickerProvider', () => {
 
   describe('Cleanup', () => {
     it('clears input value after file selection', async () => {
+      mockRequestPermission.mockResolvedValue({granted: true})
+
       const TestComponent = () => {
         const {openGallery} = useImagePickerContext()
 
@@ -774,6 +694,13 @@ describe('ImagePickerProvider', () => {
       const button = screen.getByText('Open Gallery')
       fireEvent.click(button)
 
+      // Wait for permission request to complete
+      await vi.waitFor(() => {
+        expect(mockRequestPermission).toHaveBeenCalledWith({
+          permission: 'CAMERA',
+        })
+      })
+
       // Set file and trigger change
       const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
       Object.defineProperty(galleryInput, 'files', {

package/src/providers/ImagePickerProvider.tsx

@@ -32,8 +32,6 @@ interface ImagePickerProviderProps {
   children: React.ReactNode
 }
 
-const isAndroid = () => window?.minisParams?.platform === 'android'
-
 export function ImagePickerProvider({children}: ImagePickerProviderProps) {
   const galleryInputRef = useRef<HTMLInputElement>(null)
   const frontCameraInputRef = useRef<HTMLInputElement>(null)
@@ -112,20 +110,15 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       input.addEventListener('cancel', handleCancel)
       activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-      if (isAndroid()) {
-        // Android requires explicit camera permission for camera picker
-        requestPermission({permission: 'CAMERA'})
-          .then(() => {
-            // This will show both Camera and Gallery
-            input.click()
-          })
-          .catch(() => {
-            // Show only Gallery
-            input.click()
-          })
-      } else {
-        input.click()
-      }
+      requestPermission({permission: 'CAMERA'})
+        .then(() => {
+          // This will show both Camera and Gallery
+          input.click()
+        })
+        .catch(() => {
+          // Show only Gallery
+          input.click()
+        })
     })
   }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])
 
@@ -162,26 +155,21 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         input.addEventListener('cancel', handleCancel)
         activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-        if (isAndroid()) {
-          // Android requires explicit camera permission
-          requestPermission({permission: 'CAMERA'})
-            .then(({granted}) => {
-              if (granted) {
-                input.click()
-              } else {
-                reject(new Error('Camera permission not granted'))
-                resolveRef.current = null
-                rejectRef.current = null
-              }
-            })
-            .catch(() => {
+        requestPermission({permission: 'CAMERA'})
+          .then(({granted}) => {
+            if (granted) {
+              input.click()
+            } else {
               reject(new Error('Camera permission not granted'))
               resolveRef.current = null
               rejectRef.current = null
-            })
-        } else {
-          input.click()
-        }
+            }
+          })
+          .catch(() => {
+            reject(new Error('Camera permission not granted'))
+            resolveRef.current = null
+            rejectRef.current = null
+          })
       })
     },
     [rejectPendingPromise, cleanupCancelHandler, requestPermission]

package/src/utils/getWindowLocationPathname.ts

@@ -0,0 +1,6 @@
+export function getWindowLocationPathname(): string {
+  if (typeof window !== 'undefined' && window.location) {
+    return window.location.pathname || '/'
+  }
+  return ''
+}