+ )
+}
+const tests = [
+ {
+ hook: 'useProducts',
+ cases: [
+ {
+ name: 'returns data',
+ assertions: withMocks(async () => {
+ const ids = '25502228M,25503045M'
+ renderWithProviders()
+ const productNames = ['Dot Pattern Cardigan', 'Belted Cardigan With Studs']
+
+ expect(screen.queryByText(productNames[0])).toBeNull()
+ expect(screen.queryByText(productNames[1])).toBeNull()
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText(productNames[0]))
+ expect(screen.getByText(productNames[0])).toBeInTheDocument()
+ expect(screen.getByText(productNames[1])).toBeInTheDocument()
+ expect(screen.getByText(`Total: ${productNames.length}`)).toBeInTheDocument()
+ })
+ },
+ {
+ name: 'returns error',
+ assertions: withMocks(async () => {
+ // limit of id is 25, generating 26 random ids here to get an 400 error from server
+ const fakeIds = [...new Array(26)]
+ .map((i) => Math.floor(Math.random() * 26))
+ .join(',')
+ renderWithProviders()
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText('error'))
+ expect(screen.getByText('error')).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ }
+ ]
+ },
+ {
+ hook: 'useProduct',
+ cases: [
+ {
+ name: 'returns data',
+ assertions: withMocks(async () => {
+ const id = '25502228M'
+ renderWithProviders()
+ const productName = 'Belted Cardigan With Studs'
+
+ expect(screen.queryByText(productName)).toBeNull()
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+ await waitFor(() => screen.getByText(productName))
+
+ expect(screen.getByText(productName)).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ },
+ {
+ name: 'returns error',
+ assertions: withMocks(async () => {
+ renderWithProviders()
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText('error'))
+ expect(screen.getByText('error')).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ }
+ ]
+ },
+ {
+ hook: 'useCategories',
+ cases: [
+ {
+ name: 'returns data',
+ assertions: withMocks(async () => {
+ const catIds = ['womens-clothing', 'mens-clothing']
+ renderWithProviders()
+
+ expect(screen.queryByText(catIds[0])).toBeNull()
+ expect(screen.queryByText(catIds[1])).toBeNull()
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText(`Total: 2`))
+ expect(screen.getByText(catIds[0])).toBeInTheDocument()
+ expect(screen.getByText(catIds[1])).toBeInTheDocument()
+ expect(screen.getByText(`Total: ${catIds.length}`)).toBeInTheDocument()
+ })
+ },
+ {
+ name: 'returns error',
+ assertions: withMocks(async () => {
+ // limit of id is 50, generating 51 random ids here to get an 400 error from server
+ const fakeIds = [...new Array(51)]
+ .map((i) => Math.floor(Math.random() * 26))
+ .join(',')
+ renderWithProviders()
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText('error'))
+ expect(screen.getByText('error')).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ }
+ ]
+ },
+ {
+ hook: 'useCategory',
+ cases: [
+ {
+ name: 'returns data',
+ assertions: withMocks(async () => {
+ const id = 'newarrivals'
+ renderWithProviders()
+ const categoryName = 'New Arrivals'
+
+ expect(screen.queryByText(categoryName)).toBeNull()
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+ await waitFor(() => screen.getByText(categoryName))
+
+ expect(screen.getByText(categoryName)).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ },
+ {
+ name: 'returns error',
+ assertions: withMocks(async () => {
+ renderWithProviders()
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ await waitFor(() => screen.getByText('error'))
+ expect(screen.getByText('error')).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ })
+ }
+ ]
+ }
+]
+
+tests.forEach(({hook, cases}) => {
+ describe(hook, () => {
+ cases.forEach(({name, assertions}) => {
+ test(name, assertions)
+ })
+ })
+})
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
index 84e9f52f4e..e413110630 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
@@ -7,10 +7,13 @@
import {ApiClients, Argument, DataType} from '../types'
import {useAsync} from '../useAsync'
import useCommerceApi from '../useCommerceApi'
-import {UseQueryResult} from '@tanstack/react-query'
+import {UseQueryOptions, UseQueryResult} from '@tanstack/react-query'
type Client = ApiClients['shopperProducts']
+type UseProductsParameters = NonNullable>['parameters']
+type UseProductsHeaders = NonNullable>['headers']
+type UseProductsArg = {headers?: UseProductsHeaders; rawResponse?: boolean} & UseProductsParameters
/**
* A hook for `ShopperProducts#getProducts`.
* Allows access to multiple products by a single request. Only products that are online and assigned to a site catalog are returned. The maximum number of productIDs that can be requested are 24. Along with product details, the availability, images, price, promotions, and variations for the valid products will be included, as appropriate.
@@ -18,12 +21,33 @@ type Client = ApiClients['shopperProducts']
* @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperproducts.shopperproducts-1.html#getproducts} for more information on the parameters and returned data type.
* @returns An object describing the state of the request.
*/
-export const useProducts = (
- arg: Argument
-): UseQueryResult, Error> => {
+function useProducts(
+ arg: Omit & {rawResponse?: false},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult, Error>
+function useProducts(
+ arg: Omit & {rawResponse: true},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult
+function useProducts(
+ arg: UseProductsArg,
+ options?: UseQueryOptions | Response, Error>
+) {
+ if (!arg.ids) {
+ throw new Error('ids is required for useProducts')
+ }
const {shopperProducts: client} = useCommerceApi()
- return useAsync(['products', arg], () => client.getProducts(arg))
+ const {headers, rawResponse, ...parameters} = arg
+ return useAsync(
+ ['products', arg],
+ () => client.getProducts({parameters, headers}, rawResponse),
+ options
+ )
}
+
+type UseProductParameters = NonNullable>['parameters']
+type UseProductHeaders = NonNullable>['headers']
+type UseProductArg = {headers?: UseProductHeaders; rawResponse?: boolean} & UseProductParameters
/**
* A hook for `ShopperProducts#getProduct`.
* Allows access to product details for a single product ID. Only products that are online and assigned to a site catalog are returned. Along with product details, the availability, images, price, bundled_products, set_products, recommedations, product options, variations, and promotions for the products will be included, as appropriate.
@@ -31,12 +55,36 @@ export const useProducts = (
* @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperproducts.shopperproducts-1.html#getproduct} for more information on the parameters and returned data type.
* @returns An object describing the state of the request.
*/
-export const useProduct = (
- arg: Argument
-): UseQueryResult, Error> => {
+function useProduct(
+ arg: Omit & {rawResponse?: false},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult, Error>
+function useProduct(
+ arg: Omit & {rawResponse: true},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult
+function useProduct(
+ arg: UseProductArg,
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult | Response, Error> {
+ if (!arg.id) {
+ throw new Error('id is required for useProduct.')
+ }
+ const {headers, rawResponse, ...parameters} = arg
const {shopperProducts: client} = useCommerceApi()
- return useAsync(['product', arg], () => client.getProduct(arg))
+ return useAsync(
+ ['product', arg],
+ () => client.getProduct({parameters, headers}, rawResponse),
+ options
+ )
}
+
+type UseCategoriesParameters = NonNullable>['parameters']
+type UseCategoriesHeaders = NonNullable>['headers']
+type UseCategoriesArg = {
+ headers?: UseCategoriesHeaders
+ rawResponse?: boolean
+} & UseCategoriesParameters
/**
* A hook for `ShopperProducts#getCategories`.
* When you use the URL template, the server returns multiple categories (a result object of category documents). You can use this template as a convenient way of obtaining multiple categories in a single request, instead of issuing separate requests for each category. You can specify up to 50 multiple IDs. You must enclose the list of IDs in parentheses. If a category identifier contains parenthesis or the separator sign, you must URL encode the character. The server only returns online categories.
@@ -44,24 +92,66 @@ export const useProduct = (
* @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperproducts.shopperproducts-1.html#getcategories} for more information on the parameters and returned data type.
* @returns An object describing the state of the request.
*/
-export const useCategories = (
- arg: Argument
-): UseQueryResult, Error> => {
+function useCategories(
+ arg: Omit & {rawResponse?: false},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult, Error>
+function useCategories(
+ arg: Omit & {rawResponse: true},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult
+function useCategories(
+ arg: UseCategoriesArg,
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult | Response, Error> {
+ if (!arg.ids) {
+ throw new Error('ids is required for useCategories')
+ }
+ const {headers, rawResponse, ...parameters} = arg
+
const {shopperProducts: client} = useCommerceApi()
- return useAsync(['categories'], () => client.getCategories(arg))
+ return useAsync(
+ ['categories', arg],
+ () => client.getCategories({parameters, headers}, rawResponse),
+ options
+ )
}
+
+type UseCategoryParameters = NonNullable>['parameters']
+type UseCategoryHeaders = NonNullable>['headers']
+type UseCategoryArg = {
+ headers?: UseCategoryHeaders
+ rawResponse?: boolean
+} & UseCategoryParameters
/**
* A hook for `ShopperProducts#getCategory`.
* When you use the URL template below, the server returns a category identified by its ID; by default, the server
-also returns the first level of subcategories, but you can specify another level by setting the levels
-parameter. The server only returns online categories.
+ also returns the first level of subcategories, but you can specify another level by setting the levels
+ parameter. The server only returns online categories.
* @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-products?meta=getCategory} for more information about the API endpoint.
* @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperproducts.shopperproducts-1.html#getcategory} for more information on the parameters and returned data type.
* @returns An object describing the state of the request.
*/
-export const useCategory = (
- arg: Argument
-): UseQueryResult, Error> => {
+function useCategory(
+ arg: Omit & {rawResponse?: false},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult, Error>
+function useCategory(
+ arg: Omit & {rawResponse: true},
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult
+function useCategory(
+ arg: UseCategoryArg,
+ options?: UseQueryOptions | Response, Error>
+): UseQueryResult | Response, Error> {
+ const {headers, rawResponse, ...parameters} = arg
+
const {shopperProducts: client} = useCommerceApi()
- return useAsync(['category'], () => client.getCategory(arg))
+ return useAsync(
+ ['category', arg],
+ () => client.getCategory({parameters, headers}, rawResponse),
+ options
+ )
}
+
+export {useProducts, useProduct, useCategories, useCategory}
diff --git a/packages/commerce-sdk-react/tsconfig.json b/packages/commerce-sdk-react/tsconfig.json
index f0c5a6b9d4..767fe15366 100644
--- a/packages/commerce-sdk-react/tsconfig.json
+++ b/packages/commerce-sdk-react/tsconfig.json
@@ -47,7 +47,7 @@
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
"sourceMap": true /* Create source map files for emitted JavaScript files. */,
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
- "outDir": "../commerce-sdk-react/dist"
+ "outDir": "./dist"
/* Specify an output folder for all emitted files. */,
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
diff --git a/packages/template-typescript-minimal/tsconfig.json b/packages/template-typescript-minimal/tsconfig.json
index f0c5a6b9d4..767fe15366 100644
--- a/packages/template-typescript-minimal/tsconfig.json
+++ b/packages/template-typescript-minimal/tsconfig.json
@@ -47,7 +47,7 @@
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
"sourceMap": true /* Create source map files for emitted JavaScript files. */,
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
- "outDir": "../commerce-sdk-react/dist"
+ "outDir": "./dist"
/* Specify an output folder for all emitted files. */,
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
diff --git a/packages/test-commerce-sdk-react/app/components/Json.tsx b/packages/test-commerce-sdk-react/app/components/Json.tsx
index 60e465b914..b0fbdfda11 100644
--- a/packages/test-commerce-sdk-react/app/components/Json.tsx
+++ b/packages/test-commerce-sdk-react/app/components/Json.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2022, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
diff --git a/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx b/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx
index eedb437d82..a82f6920c9 100644
--- a/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx
+++ b/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx
@@ -1,10 +1,11 @@
/*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2022, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
import React, {ReactElement} from 'react'
+// @ts-ignore
import {CommerceApiProvider} from 'commerce-sdk-react'
interface AppConfigProps {
@@ -18,7 +19,7 @@ const AppConfig = (props: AppConfigProps): ReactElement => {
shortCode="8o7m175y"
clientId="c9c45bfd-0ed3-4aa2-9971-40f88962b836"
organizationId="f_ecom_zzrf_001"
- proxy="/mobify/proxy/api"
+ proxy="http://localhost:3000/mobify/proxy/api"
locale="en-US"
currency="USD"
>
diff --git a/packages/test-commerce-sdk-react/app/components/_app/index.tsx b/packages/test-commerce-sdk-react/app/components/_app/index.tsx
new file mode 100644
index 0000000000..664ff38e5d
--- /dev/null
+++ b/packages/test-commerce-sdk-react/app/components/_app/index.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2022, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React, {ReactElement} from 'react'
+import {Link} from 'react-router-dom'
+interface AppProps {
+ children: React.ReactNode
+}
+function App(props: AppProps): ReactElement {
+ return (
+
+
+ Home
+
+ {props.children}
+
+ )
+}
+
+export default App
diff --git a/packages/test-commerce-sdk-react/app/main.tsx b/packages/test-commerce-sdk-react/app/main.tsx
index 94bc1f1e3a..19b850b5cb 100644
--- a/packages/test-commerce-sdk-react/app/main.tsx
+++ b/packages/test-commerce-sdk-react/app/main.tsx
@@ -1,9 +1,10 @@
/*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2022, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
+// @ts-ignore
import {start} from 'pwa-kit-react-sdk/ssr/browser/main'
start()
diff --git a/packages/test-commerce-sdk-react/app/pages/home.tsx b/packages/test-commerce-sdk-react/app/pages/home.tsx
index 84dfac3ae2..8c3696ce16 100644
--- a/packages/test-commerce-sdk-react/app/pages/home.tsx
+++ b/packages/test-commerce-sdk-react/app/pages/home.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2022, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
@@ -19,7 +19,9 @@ const Home = () => {
Happy coding.
Hooks
- useShopperProducts
+ useShopperProducts
+
+ useCategories
)
}
diff --git a/packages/test-commerce-sdk-react/app/pages/use-shopper-categories.tsx b/packages/test-commerce-sdk-react/app/pages/use-shopper-categories.tsx
new file mode 100644
index 0000000000..5a695e83aa
--- /dev/null
+++ b/packages/test-commerce-sdk-react/app/pages/use-shopper-categories.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2022, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+// @ts-ignore
+import {useCategories} from 'commerce-sdk-react'
+
+import React from 'react'
+import Json from '../components/Json'
+import {Link} from 'react-router-dom'
+import {flatten} from '../utils/utils'
+
+function UseShopperCategories() {
+ // how to get the categories type
+ const {isLoading, error, data: result} = useCategories({
+ ids: 'root',
+ levels: 2
+ })
+ if (isLoading) {
+ return (
+