@shopify/shop-minis-react 0.0.10 → 0.0.12

package/src/hooks/product/useCuratedProducts.ts

@@ -0,0 +1,41 @@
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  Product,
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+} from '../../types'
+
+interface UseCuratedProductsParams extends PaginatedDataHookOptionsBase {
+  handle: string
+  requiredTags?: string[]
+  anyOfTags?: string[]
+}
+
+interface UseCuratedProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * @param options - The options for the query
+ */
+export const useCuratedProducts = (
+  params: UseCuratedProductsParams
+): UseCuratedProductsReturns => {
+  const {getCuratedProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getCuratedProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useCuratedProducts',
+    }
+  )
+
+  return {
+    ...rest,
+    products: data,
+  }
+}

package/src/hooks/product/useProduct.ts

@@ -0,0 +1,45 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
+
+export interface UseProductParams extends DataHookOptionsBase {
+  /**
+   * The product ID to fetch.
+   */
+  id: string
+}
+
+interface UseProductReturns extends DataHookReturnsBase {
+  /**
+   * The product returned from the query.
+   */
+  product: Product | null
+}
+
+export const useProduct = (params: UseProductParams): UseProductReturns => {
+  const {getProduct} = useShopActions()
+  const {id, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getProduct,
+    {
+      id,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProduct',
+    }
+  )
+
+  const product = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    product,
+  }
+}

package/src/hooks/product/useProductMedia.ts

@@ -0,0 +1,51 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  ProductMedia,
+} from '../../types'
+
+export interface UseProductMediaParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The product ID to fetch media for.
+   */
+  id: string
+}
+
+interface UseProductMediaReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The product media returned from the query.
+   */
+  media: ProductMedia[] | null
+}
+
+export const useProductMedia = (
+  params: UseProductMediaParams
+): UseProductMediaReturns => {
+  const {getProductMedia} = useShopActions()
+  const {id, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductMedia,
+    {
+      id,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProductMedia',
+    }
+  )
+
+  const media = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    media,
+  }
+}

package/src/hooks/product/useProductSearch.doc.ts

@@ -0,0 +1,32 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useProductSearch',
+  category: 'hooks',
+  subCategory: 'product',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useProductSearch` hook fetches products based on a search query.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useProductSearch.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseProductSearchGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/product/useProductSearch.example.tsx

@@ -0,0 +1,13 @@
+import {useProductSearch} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, loading} = useProductSearch({
+    query: 'shirt',
+    first: 10,
+    filters: {
+      color: ['RED'],
+    },
+  })
+
+  console.log({products, loading})
+}

package/src/hooks/product/useProductSearch.ts

@@ -0,0 +1,95 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import debounce from 'lodash/debounce'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Product,
+  ProductFilters,
+  ProductSearchSortBy,
+} from '../../types'
+
+export interface UseProductSearchParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The search query.
+   */
+  query: string
+  /**
+   * The filters to apply to the search.
+   */
+  filters?: ProductFilters
+  /**
+   * The sort order of the results.
+   */
+  sortBy?: ProductSearchSortBy
+  /**
+   * Whether to include sensitive products.
+   */
+  includeSensitive?: boolean
+}
+
+interface UseProductSearchReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The products returned from the query.
+   */
+  products: Product[] | null
+}
+
+export const useProductSearch = (
+  params: UseProductSearchParams
+): UseProductSearchReturns => {
+  const {getProductSearch} = useShopActions()
+  const {
+    query,
+    filters,
+    sortBy,
+    includeSensitive = false,
+    skip = false,
+    ...restParams
+  } = params ?? {}
+
+  const [debouncedQuery, setDebouncedQuery] = useState<string>(query)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSetQuery = useCallback(
+    debounce((newQuery: string) => {
+      setDebouncedQuery(newQuery)
+    }, 300),
+    []
+  )
+
+  useEffect(() => {
+    debouncedSetQuery(query)
+
+    return () => {
+      debouncedSetQuery.cancel()
+    }
+  }, [query, debouncedSetQuery])
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductSearch,
+    {
+      query: debouncedQuery,
+      filters,
+      sortBy,
+      includeSensitive,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useProductSearch',
+    }
+  )
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/product/useProductVariants.ts

@@ -0,0 +1,48 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  ProductVariant,
+} from '../../types'
+
+export interface UseProductVariantsParams extends PaginatedDataHookOptionsBase {
+  /**
+   * The product ID to fetch variants for.
+   */
+  id: string
+}
+
+interface UseProductVariantsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The product variants returned from the query.
+   */
+  variants: ProductVariant[] | null
+}
+
+export const useProductVariants = (
+  params: UseProductVariantsParams
+): UseProductVariantsReturns => {
+  const {getProductVariants} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getProductVariants,
+    restParams,
+    {
+      skip,
+      hook: 'useProductVariants',
+    }
+  )
+
+  const variants = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    variants,
+  }
+}

package/src/hooks/product/useProducts.ts

@@ -0,0 +1,38 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Product} from '../../types'
+
+export interface UseProductsParams extends DataHookOptionsBase {
+  /**
+   * The product IDs to fetch.
+   */
+  ids: string[]
+}
+
+interface UseProductsReturns extends DataHookReturnsBase {
+  /**
+   * The products returned from the query.
+   */
+  products: Product[] | null
+}
+
+export const useProducts = (params: UseProductsParams): UseProductsReturns => {
+  const {getProducts} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(getProducts, restParams, {
+    skip,
+    hook: 'useProducts',
+  })
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/shop/useShop.doc.ts

@@ -0,0 +1,31 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useShop',
+  category: 'hooks',
+  subCategory: 'shop',
+  isVisualComponent: false,
+  related: [],
+  description: 'The `useShop` hook enables fetching a shop by its ID.',
+  type: 'hook',
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          code: './useShop.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: '',
+      type: 'UseShopGeneratedType',
+      description: '',
+    },
+  ],
+}
+
+export default data

package/src/hooks/shop/useShop.example.tsx

@@ -0,0 +1,7 @@
+import {useShop} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {shop, loading, error} = useShop({id: 'gid://shopify/Shop/1234567890'})
+
+  console.log({shop, loading, error})
+}

package/src/hooks/shop/useShop.ts

@@ -0,0 +1,38 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {DataHookOptionsBase, DataHookReturnsBase, Shop} from '../../types'
+
+export interface UseShopParams extends DataHookOptionsBase {
+  /**
+   * The shop ID to fetch.
+   */
+  id: string
+}
+
+interface UseShopReturns extends DataHookReturnsBase {
+  /**
+   * The shop returned from the query.
+   */
+  shop: Shop | null
+}
+
+export const useShop = (params: UseShopParams): UseShopReturns => {
+  const {getShop} = useShopActions()
+  const {skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(getShop, restParams, {
+    skip,
+    hook: 'useShop',
+  })
+
+  const shop = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shop,
+  }
+}

package/src/hooks/user/useFollowedShops.ts

@@ -0,0 +1,43 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Shop,
+} from '../../types'
+
+export interface UseFollowedShopsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseFollowedShopsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The followed shops returned from the query.
+   */
+  shops: Shop[] | null
+}
+
+export const useFollowedShops = (
+  params?: UseFollowedShopsParams
+): UseFollowedShopsReturns => {
+  const {getFollowedShops} = useShopActions()
+  const {skip = false, ...restParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getFollowedShops,
+    restParams,
+    {
+      skip,
+      hook: 'useFollowedShops',
+    }
+  )
+
+  const shops = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shops,
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+
+import {useRecentProducts, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, fetchMore} = useRecentProducts({first: 10})
+
+  useEffect(() => {
+    console.log(products)
+  }, [products])
+
+  return <Button onClick={fetchMore}>Fetch more</Button>
+}

package/src/hooks/user/useRecentProducts.ts

@@ -0,0 +1,46 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Product,
+} from '../../types'
+
+export interface UseRecentProductsParams extends PaginatedDataHookOptionsBase {
+  includeSensitive?: boolean
+}
+
+export interface UseRecentProductsReturns extends PaginatedDataHookReturnsBase {
+  products: Product[] | null
+}
+
+/**
+ * Hook to fetch recently viewed products.
+ * @param params - Options for the hook.
+ */
+export const useRecentProducts = (
+  params?: UseRecentProductsParams
+): UseRecentProductsReturns => {
+  const {getRecentProducts} = useShopActions()
+  const {skip, ...shopActionParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecentProducts,
+    shopActionParams,
+    {
+      skip,
+      hook: 'useRecentProducts',
+    }
+  )
+
+  const products = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    products,
+  }
+}

package/src/hooks/user/useRecentShops.ts

@@ -0,0 +1,43 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
+import {
+  PaginatedDataHookOptionsBase,
+  PaginatedDataHookReturnsBase,
+  Shop,
+} from '../../types'
+
+export interface UseRecentShopsParams extends PaginatedDataHookOptionsBase {}
+
+interface UseRecentShopsReturns extends PaginatedDataHookReturnsBase {
+  /**
+   * The recent shops returned from the query.
+   */
+  shops: Shop[] | null
+}
+
+export const useRecentShops = (
+  params?: UseRecentShopsParams
+): UseRecentShopsReturns => {
+  const {getRecentShops} = useShopActions()
+  const {skip = false, ...restParams} = params ?? {}
+
+  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+    getRecentShops,
+    restParams,
+    {
+      skip,
+      hook: 'useRecentShops',
+    }
+  )
+
+  const shops = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    shops,
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+
+import {useSavedProducts, Button} from '@shopify/shop-minis-react'
+
+export default function MyComponent() {
+  const {products, fetchMore} = useSavedProducts({first: 10})
+
+  useEffect(() => {
+    console.log(products)
+  }, [products])
+
+  return <Button onClick={fetchMore}>Fetch more</Button>
+}