@shopify/shop-minis-react 0.0.33 → 0.0.35

package/src/hooks/storage/useImageUpload.test.ts

@@ -0,0 +1,322 @@
+import {renderHook, act} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {useShopActions} from '../../internal/useShopActions'
+
+import {useImageUpload} from './useImageUpload'
+
+// Mock dependencies
+vi.mock('../../internal/useShopActions', () => ({
+  useShopActions: vi.fn(() => ({
+    createImageUploadLink: vi.fn(),
+    completeImageUpload: vi.fn(),
+  })),
+}))
+
+vi.mock('../../utils', () => ({
+  fileToDataUri: vi.fn((file: File) =>
+    Promise.resolve(`data:${file.type};base64,mockbase64data`)
+  ),
+}))
+
+// Mock fetch globally
+global.fetch = vi.fn()
+
+describe('useImageUpload', () => {
+  let mockCreateImageUploadLink: ReturnType<typeof vi.fn>
+  let mockCompleteImageUpload: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Reset fetch mock with proper blob() implementation
+    ;(global.fetch as any).mockImplementation(async (url: string) => {
+      // For data URI fetch (fileToDataUri result)
+      if (url.startsWith('data:')) {
+        return {
+          blob: async () => new Blob(['test image data'], {type: 'image/jpeg'}),
+        }
+      }
+      // Default for other fetches
+      return {
+        ok: true,
+        text: async () => 'Upload successful',
+      }
+    })
+
+    // Set up mock actions with proper implementations
+    mockCreateImageUploadLink = vi.fn().mockResolvedValue({
+      ok: true,
+      data: {
+        targets: [
+          {
+            url: 'https://storage.googleapis.com/upload',
+            resourceUrl: 'https://storage.googleapis.com/resource/123',
+            parameters: [
+              {name: 'key', value: 'test-key'},
+              {name: 'policy', value: 'test-policy'},
+            ],
+          },
+        ],
+      },
+    })
+
+    mockCompleteImageUpload = vi.fn().mockResolvedValue({
+      ok: true,
+      data: {
+        files: [
+          {
+            id: 'uploaded-image-id',
+            fileStatus: 'READY',
+            image: {
+              url: 'https://example.com/image.jpg',
+            },
+          },
+        ],
+      },
+    })
+
+    // Update the mocks to return our mock actions
+    ;(useShopActions as any).mockReturnValue({
+      createImageUploadLink: mockCreateImageUploadLink,
+      completeImageUpload: mockCompleteImageUpload,
+    })
+  })
+
+  describe('uploadImage', () => {
+    it('successfully uploads an image', async () => {
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test image'], 'test.jpg', {
+        type: 'image/jpeg',
+      })
+
+      let uploadedImages: any
+      await act(async () => {
+        uploadedImages = await result.current.uploadImage(testFile)
+      })
+
+      // Verify the upload flow
+      expect(mockCreateImageUploadLink).toHaveBeenCalledWith({
+        input: [
+          {
+            mimeType: 'image/jpeg',
+            fileSize: 10, // 'test image'.length
+          },
+        ],
+      })
+
+      // Verify GCS upload
+      expect(global.fetch).toHaveBeenCalledWith(
+        'https://storage.googleapis.com/upload',
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+        })
+      )
+
+      expect(mockCompleteImageUpload).toHaveBeenCalledWith({
+        resourceUrls: ['https://storage.googleapis.com/resource/123'],
+      })
+
+      expect(uploadedImages).toEqual([
+        {
+          id: 'uploaded-image-id',
+          imageUrl: 'https://example.com/image.jpg',
+          resourceUrl: 'https://storage.googleapis.com/resource/123',
+        },
+      ])
+    })
+
+    it('throws error when createImageUploadLink fails', async () => {
+      mockCreateImageUploadLink.mockResolvedValue({
+        ok: false,
+        error: {
+          message: 'Failed to create upload link',
+        },
+      })
+
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      await expect(
+        act(async () => {
+          await result.current.uploadImage(testFile)
+        })
+      ).rejects.toThrow('Failed to create upload link')
+    })
+
+    it('throws error when GCS upload fails', async () => {
+      // Mock failed fetch for GCS upload
+      ;(global.fetch as any).mockImplementation(async (url: string) => {
+        if (url.startsWith('data:')) {
+          return {
+            blob: async () => new Blob(['test'], {type: 'image/jpeg'}),
+          }
+        }
+        // GCS upload fails
+        return {
+          ok: false,
+          text: async () => 'Upload failed',
+        }
+      })
+
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      await expect(
+        act(async () => {
+          await result.current.uploadImage(testFile)
+        })
+      ).rejects.toThrow('Failed to upload image')
+    })
+
+    it('throws error when completeImageUpload fails', async () => {
+      mockCompleteImageUpload.mockResolvedValue({
+        ok: false,
+        error: {
+          message: 'Failed to complete upload',
+        },
+      })
+
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      await expect(
+        act(async () => {
+          await result.current.uploadImage(testFile)
+        })
+      ).rejects.toThrow('Failed to complete upload')
+    })
+
+    it('polls until image is ready', async () => {
+      // First two calls return PROCESSING, third returns READY
+      mockCompleteImageUpload
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            files: [
+              {
+                id: 'uploaded-image-id',
+                fileStatus: 'PROCESSING',
+              },
+            ],
+          },
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            files: [
+              {
+                id: 'uploaded-image-id',
+                fileStatus: 'PROCESSING',
+              },
+            ],
+          },
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          data: {
+            files: [
+              {
+                id: 'uploaded-image-id',
+                fileStatus: 'READY',
+                image: {
+                  url: 'https://example.com/processed.jpg',
+                },
+              },
+            ],
+          },
+        })
+
+      // Speed up test by mocking setTimeout
+      vi.useFakeTimers()
+
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      // Start the upload without awaiting
+      let uploadPromise: Promise<any>
+      await act(async () => {
+        uploadPromise = result.current.uploadImage(testFile)
+      })
+
+      // Advance timers for polling
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2000)
+      })
+
+      const uploadedImages = await uploadPromise!
+
+      expect(mockCompleteImageUpload).toHaveBeenCalledTimes(3)
+      expect(uploadedImages).toEqual([
+        {
+          id: 'uploaded-image-id',
+          imageUrl: 'https://example.com/processed.jpg',
+          resourceUrl: 'https://storage.googleapis.com/resource/123',
+        },
+      ])
+
+      vi.useRealTimers()
+    })
+
+    it('handles file without initial size', async () => {
+      const {result} = renderHook(() => useImageUpload())
+
+      // Create a file without size property set
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      let uploadedImages: any
+      await act(async () => {
+        uploadedImages = await result.current.uploadImage(testFile)
+      })
+
+      expect(uploadedImages).toEqual([
+        {
+          id: 'uploaded-image-id',
+          imageUrl: 'https://example.com/image.jpg',
+          resourceUrl: 'https://storage.googleapis.com/resource/123',
+        },
+      ])
+    })
+
+    it('includes all form data parameters in GCS upload', async () => {
+      let capturedFormData: FormData | undefined
+      ;(global.fetch as any).mockImplementation(
+        async (url: string, options: any) => {
+          if (url.startsWith('data:')) {
+            return {
+              blob: async () => new Blob(['test'], {type: 'image/jpeg'}),
+            }
+          }
+          // eslint-disable-next-line jest/no-if
+          if (url === 'https://storage.googleapis.com/upload') {
+            capturedFormData = options.body
+          }
+          return {
+            ok: true,
+            text: async () => 'Upload successful',
+          }
+        }
+      )
+
+      const {result} = renderHook(() => useImageUpload())
+
+      const testFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+
+      await act(async () => {
+        await result.current.uploadImage(testFile)
+      })
+
+      // Verify FormData contains all expected fields
+      expect(capturedFormData).toBeDefined()
+      expect(capturedFormData?.get('key')).toBe('test-key')
+      expect(capturedFormData?.get('policy')).toBe('test-policy')
+      expect(capturedFormData?.get('file')).toBeDefined()
+    })
+  })
+})

package/src/hooks/storage/useImageUpload.ts

@@ -1,10 +1,18 @@
 import {useCallback} from 'react'
 
 import {useShopActions} from '../../internal/useShopActions'
+import {fileToDataUri} from '../../utils'
 
 import type {UploadTarget} from '@shopify/shop-minis-platform/actions'
 
 export interface UploadImageParams {
+  /**
+   * The file to upload.
+   */
+  image: File
+}
+
+interface ProcessedImage {
   /**
    * The MIME type of the image.
    */
@@ -12,11 +20,11 @@ export interface UploadImageParams {
   /**
    * The size of the image in bytes.
    */
-  fileSize?: number
+  fileSize: number
   /**
-   * The URI of the image to upload.
+   * The file blob of the image.
    */
-  uri: string
+  fileBlob: Blob
 }
 
 export interface UploadedImage {
@@ -36,28 +44,27 @@ export interface UploadedImage {
 
 interface UseImageUploadReturns {
   /**
-   * Upload an image attached to the current user.
+   * Upload an image which will be attached to the current user.
    */
-  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>
+  uploadImage: (image: File) => Promise<UploadedImage[]>
 }
 
 // Fetch file data and detect file sizes if not provided
 // Works with file://, data:, and http(s):// URIs
-const processFileData = async (image: UploadImageParams) => {
-  const response = await fetch(image.uri)
+const processFileData = async (image: File): Promise<ProcessedImage> => {
+  const uri = await fileToDataUri(image)
+
+  const response = await fetch(uri)
   const blob = await response.blob()
 
   return {
-    ...image,
-    fileSize: image.fileSize ?? blob.size,
+    mimeType: image.type,
+    fileSize: image.size ?? blob.size,
     fileBlob: blob,
   }
 }
 
-const uploadFileToGCS = async (
-  image: UploadImageParams & {fileSize: number; fileBlob: Blob},
-  target: UploadTarget
-) => {
+const uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {
   const formData = new FormData()
   target.parameters.forEach(({name, value}: {name: string; value: string}) => {
     formData.append(name, value)
@@ -84,13 +91,8 @@ export const useImageUpload = (): UseImageUploadReturns => {
   const {createImageUploadLink, completeImageUpload} = useShopActions()
 
   const uploadImage = useCallback(
-    async (params: UploadImageParams[]) => {
-      if (params.length > 1) {
-        throw new Error('Multiple image upload is not supported yet')
-      }
-
-      const imageParams = params[0]
-      const processedImageParams = await processFileData(imageParams)
+    async (image: File) => {
+      const processedImageParams = await processFileData(image)
 
       const links = await createImageUploadLink({
         input: [

package/src/hooks/util/useKeyboardAvoidingView.ts

@@ -0,0 +1,37 @@
+import {RefObject, useCallback} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+
+export interface UseKeyboardAvoidingViewReturns {
+  /**
+   * function to call when the input is focused
+   */
+  onFocus: (ref: RefObject<HTMLElement | null>) => void
+  /**
+   * function to call when the input is blurred
+   */
+  onBlur: () => void
+}
+
+export const useKeyboardAvoidingView = (): UseKeyboardAvoidingViewReturns => {
+  const {translateContentUp, translateContentDown} = useShopActions()
+
+  const onFocus = useCallback(
+    (ref: RefObject<HTMLElement | null>) => {
+      if (ref.current) {
+        const rect = ref.current.getBoundingClientRect()
+        translateContentUp({inputYPosition: rect.bottom})
+      }
+    },
+    [translateContentUp]
+  )
+
+  const onBlur = useCallback(() => {
+    translateContentDown()
+  }, [translateContentDown])
+
+  return {
+    onFocus,
+    onBlur,
+  }
+}

package/src/internal/useHandleAction.test.ts

@@ -0,0 +1,265 @@
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {useHandleAction} from './useHandleAction'
+
+import type {ShopActionResult} from '@shopify/shop-minis-platform/actions'
+
+describe('useHandleAction', () => {
+  describe('Success Case', () => {
+    it('returns data when action succeeds', async () => {
+      const mockData = {id: '123', name: 'Test'}
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: mockData,
+        } as ShopActionResult<typeof mockData>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const data = await result.current()
+
+      expect(data).toEqual(mockData)
+      expect(mockAction).toHaveBeenCalledTimes(1)
+    })
+
+    it('passes arguments to the action correctly', async () => {
+      const mockData = {success: true}
+      const mockAction = vi.fn((_arg1: string, _arg2: number) =>
+        Promise.resolve({
+          ok: true as const,
+          data: mockData,
+        } as ShopActionResult<typeof mockData>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      await result.current('test', 42)
+
+      expect(mockAction).toHaveBeenCalledWith('test', 42)
+    })
+
+    it('handles complex data structures', async () => {
+      const complexData = {
+        user: {
+          id: '1',
+          name: 'John',
+          addresses: [
+            {street: '123 Main St', city: 'New York'},
+            {street: '456 Oak Ave', city: 'Boston'},
+          ],
+        },
+        metadata: {
+          timestamp: '2024-01-01',
+          version: 2,
+        },
+      }
+
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: complexData,
+        } as ShopActionResult<typeof complexData>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const data = await result.current()
+
+      expect(data).toEqual(complexData)
+    })
+
+    it('handles null/undefined data', async () => {
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: null,
+        } as ShopActionResult<null>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const data = await result.current()
+
+      expect(data).toBeNull()
+    })
+  })
+
+  describe('Error Case', () => {
+    it('throws error when action fails', async () => {
+      const mockError = {
+        code: 'ERROR_CODE',
+        message: 'Something went wrong',
+      }
+
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: false as const,
+          error: mockError,
+        } as ShopActionResult<any>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      await expect(result.current()).rejects.toEqual(mockError)
+      expect(mockAction).toHaveBeenCalledTimes(1)
+    })
+
+    it('preserves error structure', async () => {
+      const complexError = {
+        code: 'VALIDATION_ERROR',
+        message: 'Validation failed',
+        details: {
+          fields: ['email', 'password'],
+          reasons: ['Invalid format', 'Too short'],
+        },
+      }
+
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: false as const,
+          error: complexError,
+        } as unknown as ShopActionResult<any>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      await expect(result.current()).rejects.toEqual(complexError)
+    })
+
+    it('handles string errors', async () => {
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: false as const,
+          error: 'Simple error message',
+        } as unknown as ShopActionResult<any>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      await expect(result.current()).rejects.toBe('Simple error message')
+    })
+  })
+
+  describe('Function Stability', () => {
+    it('maintains reference equality across renders', () => {
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: 'test',
+        } as ShopActionResult<string>)
+      )
+
+      const {result, rerender} = renderHook(() => useHandleAction(mockAction))
+
+      const firstRender = result.current
+      rerender()
+      const secondRender = result.current
+
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('updates when action changes', () => {
+      const mockAction1 = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: 'action1',
+        } as ShopActionResult<string>)
+      )
+
+      const mockAction2 = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: 'action2',
+        } as ShopActionResult<string>)
+      )
+
+      const {result, rerender} = renderHook(
+        ({action}) => useHandleAction(action),
+        {initialProps: {action: mockAction1}}
+      )
+
+      const firstRender = result.current
+
+      rerender({action: mockAction2})
+      const secondRender = result.current
+
+      expect(firstRender).not.toBe(secondRender)
+    })
+  })
+
+  describe('Multiple Calls', () => {
+    it('handles multiple concurrent calls', async () => {
+      let callCount = 0
+      const mockAction = vi.fn(async () => {
+        const currentCall = ++callCount
+        await new Promise(resolve => setTimeout(resolve, 10))
+        return {
+          ok: true as const,
+          data: currentCall,
+        } as ShopActionResult<number>
+      })
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const [result1, result2, result3] = await Promise.all([
+        result.current(),
+        result.current(),
+        result.current(),
+      ])
+
+      expect(result1).toBe(1)
+      expect(result2).toBe(2)
+      expect(result3).toBe(3)
+      expect(mockAction).toHaveBeenCalledTimes(3)
+    })
+
+    it('handles sequential calls', async () => {
+      let counter = 0
+      const mockAction = vi.fn(
+        async () =>
+          ({
+            ok: true as const,
+            data: ++counter,
+          }) as ShopActionResult<number>
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const result1 = await result.current()
+      const result2 = await result.current()
+      const result3 = await result.current()
+
+      expect(result1).toBe(1)
+      expect(result2).toBe(2)
+      expect(result3).toBe(3)
+    })
+  })
+
+  describe('Promise Behavior', () => {
+    it('returns a promise', () => {
+      const mockAction = vi.fn(() =>
+        Promise.resolve({
+          ok: true as const,
+          data: 'test',
+        } as ShopActionResult<string>)
+      )
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      const returnValue = result.current()
+
+      expect(returnValue).toBeInstanceOf(Promise)
+    })
+
+    it('handles rejected promises from action', async () => {
+      const networkError = new Error('Network error')
+      const mockAction = vi.fn(() => Promise.reject(networkError))
+
+      const {result} = renderHook(() => useHandleAction(mockAction))
+
+      await expect(result.current()).rejects.toThrow('Network error')
+    })
+  })
+})