@shopify/shop-minis-react 0.0.1 → 0.0.2

package/src/hooks/storage/useImageUpload.example.tsx

@@ -0,0 +1,20 @@
+import {useCallback} from 'react'
+
+import {useImageUpload, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {uploadImage} = useImageUpload()
+
+  const handleUpload = useCallback(async () => {
+    const result = await uploadImage([
+      {
+        mimeType: 'image/jpeg',
+        fileSize: 1024 * 1024, // 1MB
+        uri: 'file://path/to/image.jpg',
+      },
+    ])
+    console.log('Uploaded image:', result[0])
+  }, [uploadImage])
+
+  return <Button onPress={handleUpload} text="Upload image" />
+}

package/src/hooks/storage/useImageUpload.ts

@@ -0,0 +1,135 @@
+import {useCallback} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {UploadTarget} from '../../types'
+
+export interface UploadImageParams {
+  /**
+   * The MIME type of the image.
+   */
+  mimeType: string
+  /**
+   * The size of the image in bytes.
+   */
+  fileSize: number
+  /**
+   * The URI of the image to upload.
+   */
+  uri: string
+}
+
+export interface UploadedImage {
+  /**
+   * The ID of the uploaded image.
+   */
+  id: string
+  /**
+   * The URL of the uploaded image.
+   */
+  imageUrl?: string
+  /**
+   * The resource URL of the uploaded image.
+   */
+  resourceUrl?: string
+}
+
+interface UseImageUploadReturns {
+  /**
+   * Upload an image attached to the current user.
+   */
+  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>
+}
+
+const uploadFileToGCS = async (
+  image: UploadImageParams,
+  target: UploadTarget
+) => {
+  const formData = new FormData()
+  target.parameters.forEach(({name, value}) => {
+    formData.append(name, value)
+  })
+  // Append the actual file data last
+  formData.append('file', new Blob([image.uri], {type: image.mimeType}))
+
+  const uploadResponse = await fetch(target.url, {
+    method: 'POST',
+    body: formData,
+  })
+
+  if (!uploadResponse.ok) {
+    console.error('Failed to upload image', {
+      response: await uploadResponse.text(),
+    })
+    return {error: 'Failed to upload image'}
+  }
+
+  return {}
+}
+
+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 links = await createImageUploadLink({
+        input: params.map(image => ({
+          mimeType: image.mimeType,
+          fileSize: image.fileSize,
+        })),
+      })
+
+      if (!links.ok) {
+        throw new Error(links.error.message)
+      }
+
+      // Upload single file to GCS
+      // TODO: Upload multiple files to GCS
+      const {error: uploadError} = await uploadFileToGCS(
+        params[0],
+        links?.data?.targets?.[0]!
+      )
+
+      if (uploadError) {
+        throw new Error(uploadError)
+      }
+
+      // 10 second polling for image upload
+      let count = 0
+      while (count < 30) {
+        const result = await completeImageUpload({
+          resourceUrls:
+            links?.data?.targets?.map(target => target.resourceUrl) || [],
+        })
+
+        if (!result.ok) {
+          throw new Error(result.error.message)
+        }
+
+        // TODO: Add support for multiple files
+        if (result.data?.files?.[0]?.fileStatus === 'READY') {
+          return [
+            {
+              id: result.data.files[0].id,
+              imageUrl: result.data.files[0].image?.url,
+              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,
+            },
+          ]
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        count++
+      }
+
+      throw new Error('Image upload completion timed out')
+    },
+    [createImageUploadLink, completeImageUpload]
+  )
+
+  return {
+    uploadImage,
+  }
+}

package/src/hooks/storage/useSecureStorage.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useSecureStorage',
+  category: 'hooks',
+  subCategory: 'storage',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useSecureStorage` hook provides functions to interact with secure storage. It allows you to store, retrieve, and manage sensitive data that requires encryption and secure handling. You can currently only set one secret per Mini.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useSecureStorage.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseSecureStorageGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/storage/useSecureStorage.example.tsx

@@ -0,0 +1,23 @@
+import {useEffect} from 'react'
+
+import {useSecureStorage} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {getSecret, setSecret, removeSecret} = useSecureStorage()
+
+  useEffect(() => {
+    async function handleSecureStorageOperations() {
+      // Get a secret from secure storage
+      const secret = await getSecret()
+      console.log({secret})
+
+      // Set a secret in secure storage
+      await setSecret({value: 'Sensitive Data'})
+
+      // Remove a secret from secure storage
+      await removeSecret()
+    }
+
+    handleSecureStorageOperations()
+  }, [getSecret, setSecret, removeSecret])
+}

package/src/hooks/storage/useSecureStorage.ts

@@ -0,0 +1,28 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {SetSecretParams} from '../../types'
+
+interface UseSecureStorageReturns {
+  /**
+   * Get the secret from the secure storage.
+   */
+  getSecret: () => Promise<string | null>
+  /**
+   * Set a secret in the secure storage.
+   */
+  setSecret: (params: SetSecretParams) => Promise<void>
+  /**
+   * Remove the secret from the secure storage.
+   */
+  removeSecret: () => Promise<void>
+}
+
+export function useSecureStorage(): UseSecureStorageReturns {
+  const {getSecret, setSecret, removeSecret} = useShopActions()
+
+  return {
+    getSecret: useHandleAction(getSecret),
+    setSecret: useHandleAction(setSecret),
+    removeSecret: useHandleAction(removeSecret),
+  }
+}

package/src/hooks/user/useBuyerAttributes.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useBuyerAttributes',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useBuyerAttributes` hook fetches the current buyer attributes, such as gender affinity and category affinities.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useBuyerAttributes.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'UseBuyerAttributesGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useBuyerAttributes.example.tsx

@@ -0,0 +1,14 @@
+import {useEffect} from 'react'
+
+import {useBuyerAttributes} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {buyerAttributes} = useBuyerAttributes()
+
+  useEffect(() => {
+    if (buyerAttributes) {
+      const {genderAffinity, categoryAffinities} = buyerAttributes
+      console.log({genderAffinity, categoryAffinities})
+    }
+  }, [buyerAttributes])
+}

package/src/hooks/user/useBuyerAttributes.ts

@@ -0,0 +1,34 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {
+  DataHookOptionsBase,
+  DataHookReturnsBase,
+  BuyerAttributes,
+} from '../../types'
+
+export interface UseBuyerAttributesParams extends DataHookOptionsBase {}
+
+export interface UseBuyerAttributesReturns extends DataHookReturnsBase {
+  buyerAttributes: BuyerAttributes | null
+}
+
+export const useBuyerAttributes = (
+  params?: UseBuyerAttributesParams
+): UseBuyerAttributesReturns => {
+  const {skip, ...shopActionParams} = params || {}
+  const {getBuyerAttributes} = useShopActions()
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getBuyerAttributes,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useBuyerAttributes',
+    }
+  )
+
+  return {
+    ...rest,
+    buyerAttributes: data,
+  }
+}

package/src/hooks/user/useCurrentUser.doc.ts

@@ -0,0 +1,31 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useCurrentUser',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description: 'The `useCurrentUser` hook fetches the current user.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useCurrentUser.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseCurrentUserGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useCurrentUser.example.tsx

@@ -0,0 +1,7 @@
+import {useCurrentUser} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {currentUser} = useCurrentUser()
+
+  console.log(currentUser)
+}

package/src/hooks/user/useCurrentUser.ts

@@ -0,0 +1,37 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {
+  DataHookOptionsBase,
+  DataHookReturnsBase,
+  UserProfile,
+} from '../../types'
+
+export interface UseCurrentUserParams extends DataHookOptionsBase {}
+
+export interface UseCurrentUserReturns extends DataHookReturnsBase {
+  currentUser: UserProfile | null
+}
+
+/**
+ * Hook to fetch the current user's profile.
+ */
+export const useCurrentUser = (
+  params?: UseCurrentUserParams
+): UseCurrentUserReturns => {
+  const {skip, ...shopActionParams} = params || {}
+  const {getCurrentUser} = useShopActions()
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getCurrentUser,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useCurrentUser',
+    }
+  )
+
+  return {
+    ...rest,
+    currentUser: data,
+  }
+}

package/src/hooks/user/useFollowedShopsActions.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useFollowedShopsActions',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useFollowedShopsActions` hook allows following and unfollowing shops for the current user.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useFollowedShopsActions.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseUpdateFollowedShopsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useFollowedShopsActions.example.tsx

@@ -0,0 +1,18 @@
+import {useFollowedShopsActions, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {followShop, unfollowShop} = useFollowedShopsActions()
+
+  return (
+    <>
+      <Button
+        onPress={() => followShop({shopId: 'gid://shopify/Shop/123'})}
+        text="Follow shop"
+      />
+      <Button
+        onPress={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}
+        text="Unfollow shop"
+      />
+    </>
+  )
+}

package/src/hooks/user/useFollowedShopsActions.ts

@@ -0,0 +1,23 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {FollowShopParams, UnfollowShopParams} from '../../types'
+
+interface UseFollowedShopsActionsReturns {
+  /**
+   * Follow a shop.
+   */
+  followShop: (params: FollowShopParams) => Promise<boolean>
+  /**
+   * Unfollow a shop.
+   */
+  unfollowShop: (params: UnfollowShopParams) => Promise<boolean>
+}
+
+export const useFollowedShopsActions = (): UseFollowedShopsActionsReturns => {
+  const {followShop, unfollowShop} = useShopActions()
+
+  return {
+    followShop: useHandleAction(followShop),
+    unfollowShop: useHandleAction(unfollowShop),
+  }
+}

package/src/hooks/user/useOrders.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useOrders',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useOrders` hook returns a set of recent Shopify orders for the current user.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useOrders.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseOrdersGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useOrders.example.tsx

@@ -0,0 +1,7 @@
+import {useOrders} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {orders, loading, error} = useOrders()
+
+  console.log({orders, loading, error})
+}

package/src/hooks/user/useOrders.ts

@@ -0,0 +1,32 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Order,
+} from '../../types'
+
+export interface UseOrdersParams extends PaginatedDataHookOptionsBase {}
+
+export interface UseOrdersReturns extends PaginatedDataHookReturnsBase {
+  orders: Order[] | null
+}
+
+export const useOrders = (params?: UseOrdersParams): UseOrdersReturns => {
+  const {skip, ...shopActionParams} = params || {}
+  const {getOrders} = useShopActions()
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getOrders,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useOrders',
+    }
+  )
+
+  return {
+    ...rest,
+    orders: data,
+  }
+}

package/src/hooks/user/useSavedProductsActions.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useSavedProductsActions',
+  category: 'hooks',
+  subCategory: 'user',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useSavedProductsActions` hook allows saving and unsaving products for the current user.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useSavedProductsActions.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseUpdateSavedProductsGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/user/useSavedProductsActions.example.tsx

@@ -0,0 +1,30 @@
+import {useSavedProductsActions, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {saveProduct, unsaveProduct} = useSavedProductsActions()
+
+  return (
+    <>
+      <Button
+        onPress={() =>
+          saveProduct({
+            productId: 'gid://shopify/Product/123',
+            productVariantId: 'gid://shopify/ProductVariant/456',
+            shopId: 'gid://shopify/Shop/42',
+          })
+        }
+        text="Save product"
+      />
+      <Button
+        onPress={() =>
+          unsaveProduct({
+            productId: 'gid://shopify/Product/123',
+            productVariantId: 'gid://shopify/ProductVariant/456',
+            shopId: 'gid://shopify/Shop/42',
+          })
+        }
+        text="Unsave product"
+      />
+    </>
+  )
+}

package/src/hooks/user/useSavedProductsActions.ts

@@ -0,0 +1,23 @@
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {FavoriteParams, UnfavoriteParams} from '../../types'
+
+interface UseSavedProductsActionsReturns {
+  /**
+   * Save a product.
+   */
+  saveProduct: (params: FavoriteParams) => Promise<void>
+  /**
+   * Unsave a product.
+   */
+  unsaveProduct: (params: UnfavoriteParams) => Promise<void>
+}
+
+export const useSavedProductsActions = (): UseSavedProductsActionsReturns => {
+  const {favorite, unfavorite} = useShopActions()
+
+  return {
+    saveProduct: useHandleAction(favorite),
+    unsaveProduct: useHandleAction(unfavorite),
+  }
+}

package/src/hooks/util/useErrorScreen.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useErrorScreen',
+  category: 'hooks',
+  subCategory: 'util',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useErrorScreen` hook provides functionality for showing error screens. It returns a function that can be used to display an error screen with a given error message.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useErrorScreen.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseErrorScreenGeneratedType',
+      description: 'A hook that returns a function to show an error screen.',
+    },
+  ],
+}
+
+export default data