@shopify/shop-minis-react 0.1.1 → 0.1.3

package/src/mocks.ts

@@ -1,4 +1,9 @@
-import {Product, Gender, UserState} from '@shopify/shop-minis-platform'
+import {
+  Product,
+  Gender,
+  UserState,
+  MinisContentStatus,
+} from '@shopify/shop-minis-platform'
 import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
 // Helper functions for common data structures
@@ -440,6 +445,7 @@ export function makeMockActions(): ShopActions {
           },
           title: 'Mock Content',
           visibility: ['DISCOVERABLE'],
+          status: MinisContentStatus.READY,
         },
       ],
     },
@@ -451,6 +457,9 @@ export function makeMockActions(): ShopActions {
       },
     },
     navigateToCart: undefined,
+    requestPermission: {
+      granted: true,
+    },
   } as const
 
   const mock: Partial<ShopActions> = {}

package/src/providers/ImagePickerProvider.test.tsx

@@ -5,13 +5,30 @@ import {
   renderHook,
   act,
 } from '@testing-library/react'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
 
 import {ImagePickerProvider, useImagePickerContext} from './ImagePickerProvider'
 
+// Mock useRequestPermissions hook
+const mockRequestPermission = vi.fn()
+vi.mock('../hooks/util/useRequestPermissions', () => ({
+  useRequestPermissions: () => ({
+    requestPermission: mockRequestPermission,
+  }),
+}))
+
 describe('ImagePickerProvider', () => {
+  const originalMinisParams = window.minisParams
+
   beforeEach(() => {
     vi.clearAllMocks()
+    // Default to granting permission
+    mockRequestPermission.mockResolvedValue({granted: true})
+  })
+
+  afterEach(() => {
+    // Restore original minisParams
+    window.minisParams = originalMinisParams
   })
 
   describe('Context', () => {
@@ -30,7 +47,7 @@ describe('ImagePickerProvider', () => {
 
     it('provides context value when used within provider', () => {
       const {result} = renderHook(() => useImagePickerContext(), {
-        wrapper: ({children}) => (
+        wrapper: ({children}: {children: React.ReactNode}) => (
           <ImagePickerProvider>{children}</ImagePickerProvider>
         ),
       })
@@ -72,7 +89,7 @@ describe('ImagePickerProvider', () => {
   })
 
   describe('openGallery', () => {
-    it('triggers gallery input click and resolves with selected file', async () => {
+    it('triggers gallery input click directly on non-Android platforms', async () => {
       const TestComponent = () => {
         const {openGallery} = useImagePickerContext()
 
@@ -181,10 +198,106 @@ describe('ImagePickerProvider', () => {
         expect(cancelMessage?.textContent).toBe('User cancelled file selection')
       })
     })
+
+    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
+      mockRequestPermission.mockRejectedValue(new Error('Permission denied'))
+
+      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 still be clicked even after permission rejection
+      await vi.waitFor(() => {
+        expect(clickSpy).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 
   describe('openCamera', () => {
-    it('triggers back camera input click by default', async () => {
+    it('triggers back camera input click directly on non-Android platforms', async () => {
       const TestComponent = () => {
         const {openCamera} = useImagePickerContext()
 
@@ -356,6 +469,218 @@ describe('ImagePickerProvider', () => {
         expect(cancelMessage?.textContent).toBe('User cancelled camera')
       })
     })
+
+    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
+      mockRequestPermission.mockResolvedValue({granted: false})
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'permission-error')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            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 NOT be clicked when permission is denied
+      expect(clickSpy).not.toHaveBeenCalled()
+
+      // Should show error message
+      await vi.waitFor(() => {
+        const errorMessage = document.querySelector(
+          '[data-testid="permission-error"]'
+        )
+        expect(errorMessage?.textContent).toBe('Camera permission not granted')
+      })
+    })
+
+    it('rejects with error on Android if permission request fails', async () => {
+      window.minisParams = {...window.minisParams, platform: 'android'} as any
+      mockRequestPermission.mockRejectedValue(
+        new Error('Permission request failed')
+      )
+
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'permission-error')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            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 NOT be clicked when permission request fails
+      expect(clickSpy).not.toHaveBeenCalled()
+
+      // Should show error message
+      await vi.waitFor(() => {
+        const errorMessage = document.querySelector(
+          '[data-testid="permission-error"]'
+        )
+        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', () => {

package/src/providers/ImagePickerProvider.tsx

@@ -7,6 +7,8 @@ import React, {
   useMemo,
 } from 'react'
 
+import {useRequestPermissions} from '../hooks/util/useRequestPermissions'
+
 export type CameraFacing = 'front' | 'back'
 
 interface ImagePickerContextValue {
@@ -30,6 +32,8 @@ 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)
@@ -41,6 +45,8 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
     handler: () => void
   } | null>(null)
 
+  const {requestPermission} = useRequestPermissions()
+
   const cleanupCancelHandler = useCallback(() => {
     if (activeCancelHandlerRef.current) {
       const {input, handler} = activeCancelHandlerRef.current
@@ -106,9 +112,22 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       input.addEventListener('cancel', handleCancel)
       activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-      input.click()
+      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()
+      }
     })
-  }, [rejectPendingPromise, cleanupCancelHandler])
+  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])
 
   const openCamera = useCallback(
     (cameraFacing: CameraFacing = 'back') => {
@@ -143,10 +162,29 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         input.addEventListener('cancel', handleCancel)
         activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-        input.click()
+        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(() => {
+              reject(new Error('Camera permission not granted'))
+              resolveRef.current = null
+              rejectRef.current = null
+            })
+        } else {
+          input.click()
+        }
       })
     },
-    [rejectPendingPromise, cleanupCancelHandler]
+    [rejectPendingPromise, cleanupCancelHandler, requestPermission]
   )
 
   useEffect(() => {

package/dist/shop-minis-platform/src/types/permissions.js

@@ -1,15 +0,0 @@
-const n = {
-  MiniConsent: "mini_consent",
-  CameraConsent: "camera_consent",
-  PhotoLibraryConsent: "photo_library_consent",
-  MicrophoneConsent: "microphone_consent"
-}, e = {
-  Granted: "granted",
-  Dismissed: "dismissed",
-  Idle: "idle"
-};
-export {
-  n as Consent,
-  e as ConsentStatus
-};
-//# sourceMappingURL=permissions.js.map

package/dist/shop-minis-platform/src/types/permissions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"permissions.js","sources":["../../../../../shop-minis-platform/src/types/permissions.ts"],"sourcesContent":["export type Permission = 'CAMERA' | 'GALLERY' | 'MICROPHONE'\n\nexport interface MiniManifest {\n  trusted_domains?: string[]\n  permissions?: string[]\n  [key: string]: any\n}\n\nexport const Consent = {\n  MiniConsent: 'mini_consent',\n  CameraConsent: 'camera_consent',\n  PhotoLibraryConsent: 'photo_library_consent',\n  MicrophoneConsent: 'microphone_consent',\n} as const\n\nexport const ConsentStatus = {\n  Granted: 'granted',\n  Dismissed: 'dismissed',\n  Idle: 'idle',\n} as const\n\nexport type ConsentType = (typeof Consent)[keyof typeof Consent]\nexport type ConsentStatusType =\n  (typeof ConsentStatus)[keyof typeof ConsentStatus]\n"],"names":["Consent","ConsentStatus"],"mappings":"AAQO,MAAMA,IAAU;AAAA,EACrB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AACrB,GAEaC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AACR;"}