@shopify/shop-minis-react 0.3.4 → 0.4.1

package/src/internal/reactQuery/useShopActionQuery.ts

@@ -0,0 +1,74 @@
+import {useCallback} from 'react'
+
+import {ShopActionResult} from '@shopify/shop-minis-platform/actions'
+import {useQuery} from '@tanstack/react-query'
+
+import {DataHookFetchPolicy} from '../../types'
+
+import {useShopMinisQueryClient} from './queryClient'
+
+/**
+ * Helper to use React Query with Shop Actions (non-paginated)
+ * Replaces useShopActionsDataFetching
+ *
+ * @example
+ * ```ts
+ * const { data, loading, error, refetch } = useShopActionQuery(
+ *   ['product', id],
+ *   getProduct,
+ *   { id },
+ *   { skip: false }
+ * )
+ * ```
+ */
+export function useShopActionQuery<
+  TData,
+  TParams extends {fetchPolicy?: DataHookFetchPolicy},
+>(
+  queryKey: unknown[],
+  action: (params: TParams) => Promise<ShopActionResult<{data: TData}>>,
+  params: TParams,
+  options?: {
+    skip?: boolean
+  }
+) {
+  const {skip = false} = options ?? {}
+
+  // Always use our SDK's QueryClient for isolation
+  const queryClient = useShopMinisQueryClient()
+
+  const {
+    data,
+    error,
+    isLoading,
+    refetch: reactQueryRefetch,
+  } = useQuery(
+    {
+      queryKey,
+      queryFn: async () => {
+        const result = await action(params)
+
+        if (!result.ok) {
+          throw result.error
+        }
+
+        return result.data.data
+      },
+      enabled: !skip,
+      // Caching disabled by default (handled by Apollo)
+      // fetchPolicy param is passed through to the action (Apollo layer)
+    },
+    queryClient
+  )
+
+  const refetch = useCallback(async () => {
+    await reactQueryRefetch()
+  }, [reactQueryRefetch])
+
+  return {
+    data: data ?? null,
+    loading: isLoading,
+    error: error as Error | null,
+    refetch,
+  }
+}

package/src/internal/utils/resizeImage.test.ts

@@ -0,0 +1,314 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {resizeImage} from './resizeImage'
+
+describe('resizeImage', () => {
+  let mockCanvas: any
+  let mockContext: any
+  let mockImage: any
+
+  beforeEach(() => {
+    // Mock canvas context
+    mockContext = {
+      drawImage: vi.fn(),
+    }
+
+    // Mock canvas
+    mockCanvas = {
+      width: 0,
+      height: 0,
+      getContext: vi.fn(() => mockContext),
+      toBlob: vi.fn(),
+    }
+
+    // Mock document.createElement
+    const originalCreateElement = document.createElement
+    document.createElement = vi.fn((tag: string) => {
+      if (tag === 'canvas') {
+        return mockCanvas as any
+      }
+      return originalCreateElement(tag)
+    })
+
+    // Mock URL methods
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+
+    // Mock Image constructor
+    mockImage = {
+      width: 3000,
+      height: 4000,
+      onload: null as any,
+      onerror: null as any,
+      src: '',
+    }
+
+    global.Image = vi.fn(() => mockImage) as any
+  })
+
+  describe('Quality settings', () => {
+    it('returns original file for "original" quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'original',
+      })
+
+      expect(result).toBe(originalFile)
+      expect(global.Image).not.toHaveBeenCalled()
+      expect(document.createElement).not.toHaveBeenCalled()
+    })
+
+    it('resizes to 1080px for low quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set up canvas toBlob to call callback
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      // Trigger image load after src is set
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const resultPromise = resizeImage({
+        file: originalFile,
+        quality: 'low',
+      })
+
+      await new Promise(resolve => setTimeout(resolve, 10))
+
+      const result = await resultPromise
+
+      expect(result).toBeInstanceOf(File)
+      expect(result.type).toBe('image/jpeg')
+      expect(result.name).toBe('test.jpg')
+
+      // Check canvas dimensions were set correctly (maintaining aspect ratio)
+      expect(mockCanvas.width).toBe(810) // 1080 * (3000/4000)
+      expect(mockCanvas.height).toBe(1080)
+    })
+
+    it('resizes to 1600px for medium quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'medium',
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(1200) // 1600 * (3000/4000)
+      expect(mockCanvas.height).toBe(1600)
+    })
+
+    it('resizes to 2048px for high quality', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'high',
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(1536) // 2048 * (3000/4000)
+      expect(mockCanvas.height).toBe(2048)
+    })
+  })
+
+  describe('Custom quality', () => {
+    it('uses custom size when provided', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      const result = await resizeImage({
+        file: originalFile,
+        quality: 'low',
+        customQuality: {size: 500, compression: 0.6},
+      })
+
+      expect(result).toBeInstanceOf(File)
+      expect(mockCanvas.width).toBe(375) // 500 * (3000/4000)
+      expect(mockCanvas.height).toBe(500)
+    })
+  })
+
+  describe('Aspect ratio handling', () => {
+    it('maintains aspect ratio for landscape images', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set landscape dimensions
+      mockImage.width = 4000
+      mockImage.height = 3000
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'low',
+      })
+
+      expect(mockCanvas.width).toBe(1080)
+      expect(mockCanvas.height).toBe(810) // 1080 * (3000/4000)
+    })
+
+    it('does not resize if image is smaller than target size', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Set small dimensions
+      mockImage.width = 800
+      mockImage.height = 600
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'high',
+      })
+
+      // Should maintain original dimensions
+      expect(mockCanvas.width).toBe(800)
+      expect(mockCanvas.height).toBe(600)
+    })
+  })
+
+  describe('Error handling', () => {
+    it('rejects when image fails to load', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onerror) img.onerror()
+        }, 0)
+        return img
+      }) as any
+
+      await expect(
+        resizeImage({
+          file: originalFile,
+          quality: 'medium',
+        })
+      ).rejects.toThrow('Failed to load image')
+
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+  })
+
+  describe('Resource cleanup', () => {
+    it('revokes object URL after successful resize', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      mockCanvas.toBlob.mockImplementation((callback: any) => {
+        const blob = new Blob(['resized'], {type: 'image/jpeg'})
+        callback(blob)
+      })
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onload) img.onload()
+        }, 0)
+        return img
+      }) as any
+
+      await resizeImage({
+        file: originalFile,
+        quality: 'medium',
+      })
+
+      expect(URL.createObjectURL).toHaveBeenCalledWith(originalFile)
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+
+    it('revokes object URL even when error occurs', async () => {
+      const originalFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      global.Image = vi.fn(() => {
+        const img = mockImage
+        setTimeout(() => {
+          if (img.onerror) img.onerror()
+        }, 0)
+        return img
+      }) as any
+
+      try {
+        await resizeImage({
+          file: originalFile,
+          quality: 'medium',
+        })
+      } catch {
+        // Expected to throw
+      }
+
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
+    })
+  })
+})

package/src/internal/utils/resizeImage.ts

@@ -0,0 +1,108 @@
+import type {
+  ImageQuality,
+  CustomImageQuality,
+} from '../../providers/ImagePickerProvider'
+
+interface ResizeSettings {
+  size: number
+  compression: number
+}
+
+export interface ResizeImageParams {
+  file: File
+  quality: ImageQuality
+  customQuality?: CustomImageQuality
+}
+
+const QUALITY_SETTINGS: {
+  [key in Exclude<ImageQuality, 'original'>]: ResizeSettings
+} = {
+  low: {
+    size: 1080,
+    compression: 0.7,
+  },
+  medium: {
+    size: 1600,
+    compression: 0.85,
+  },
+  high: {
+    size: 2048,
+    compression: 0.92,
+  },
+} as const
+
+export function resizeImage({
+  file,
+  quality,
+  customQuality,
+}: ResizeImageParams): Promise<File> {
+  if (quality === 'original') {
+    return Promise.resolve(file)
+  }
+
+  const defaultSettings = QUALITY_SETTINGS[quality]
+  const settings: ResizeSettings = customQuality
+    ? {
+        size: customQuality.size ?? defaultSettings.size,
+        compression: customQuality.compression ?? defaultSettings.compression,
+      }
+    : defaultSettings
+  const maxSize = settings.size
+
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('Failed to load image'))
+    }
+
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+
+      const canvas = document.createElement('canvas')
+      let width = img.width
+      let height = img.height
+
+      // Resize image dimensions maintaining aspect ratio
+      if (width > height) {
+        if (width > maxSize) {
+          height *= maxSize / width
+          width = maxSize
+        }
+      } else if (height > maxSize) {
+        width *= maxSize / height
+        height = maxSize
+      }
+
+      canvas.width = width
+      canvas.height = height
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'))
+        return
+      }
+      ctx.drawImage(img, 0, 0, width, height)
+
+      canvas.toBlob(
+        blob => {
+          if (!blob) {
+            reject(new Error('Failed to create blob'))
+            return
+          }
+          const resizedFile = new File([blob], file.name, {
+            type: 'image/jpeg',
+            lastModified: Date.now(),
+          })
+          resolve(resizedFile)
+        },
+        'image/jpeg',
+        settings.compression
+      )
+    }
+
+    img.src = url
+  })
+}

package/src/providers/ImagePickerProvider.test.tsx

@@ -34,6 +34,37 @@ describe('ImagePickerProvider', () => {
     mockRequestPermission.mockResolvedValue({granted: true})
     // Clear interaction reporting mock
     mockReportInteraction.mockClear()
+
+    // Mock URL.createObjectURL and URL.revokeObjectURL for jsdom
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+    global.URL.revokeObjectURL = vi.fn()
+
+    // Mock Image constructor for resizing
+    global.Image = class MockImage {
+      width = 1920
+      height = 1080
+      onload = null as any
+      onerror = null as any
+      src = ''
+
+      constructor() {
+        setTimeout(() => {
+          if (this.onload) {
+            this.onload()
+          }
+        }, 0)
+      }
+    } as any
+
+    // Mock canvas methods
+    HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+      drawImage: vi.fn(),
+    })) as any
+
+    HTMLCanvasElement.prototype.toBlob = vi.fn(callback => {
+      const blob = new Blob(['mock'], {type: 'image/jpeg'})
+      callback(blob)
+    }) as any
   })
 
   afterEach(() => {
@@ -334,7 +365,7 @@ describe('ImagePickerProvider', () => {
           <button
             type="button"
             onClick={() =>
-              openCamera('front').catch(() => {
+              openCamera({cameraFacing: 'front'}).catch(() => {
                 // Ignore errors from cleanup
               })
             }