Implement shopper products

packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts

@@ -5,6 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import {ApiClients, Argument, DataType, QueryResponse} from '../types'
+import {ShopperProductsTypes} from 'commerce-sdk-isomorphic'
 import {useAsync} from '../useAsync'
 import useCommerceApi from '../useCommerceApi'
 
@@ -18,10 +19,22 @@ type Client = ApiClients['shopperProducts']
  * @returns An object describing the state of the request.
  */
 export const useProducts = (
-    arg: Argument<Client['getProducts']>
+    arg: Argument<Client['getProducts']>,
+    deps: unknown[] = []
 ): QueryResponse<DataType<Client['getProducts']>> => {
+    if (!arg) {
+        throw new Error('Missing ids in parameters to make request')
+    }
     const {shopperProducts: client} = useCommerceApi()
-    return useAsync(() => client.getProducts(arg), [arg])
+    const {
+        parameters: {ids}
+    } = arg
+    // by default the source is the ids string
+    let source: unknown[] = [ids]
+    if (deps.length) {
+        source = deps
+    }
+    return useAsync(() => client.getProducts(arg), source)
 }
 /**
  * A hook for `ShopperProducts#getProduct`.
@@ -31,10 +44,23 @@ export const useProducts = (
  * @returns An object describing the state of the request.
  */
 export const useProduct = (
-    arg: Argument<Client['getProduct']>
+    arg: Argument<Client['getProduct']>,
+    deps: unknown[] = []
 ): QueryResponse<DataType<Client['getProduct']>> => {
+    if (!arg) {
+        throw new Error('useProducts requires product id in parameters ')
+    }
+    const {
+        parameters: {id}
+    } = arg
+    // by default the source is the ids string
+    let source: unknown[] = [id]
+    if (deps.length) {
+        source = deps
+    }
+    console.log('source', source)
     const {shopperProducts: client} = useCommerceApi()
-    return useAsync(() => client.getProduct(arg), [arg])
+    return useAsync(() => client.getProduct(arg), source)
 }
 /**
  * A hook for `ShopperProducts#getCategories`.
@@ -44,10 +70,21 @@ export const useProduct = (
  * @returns An object describing the state of the request.
  */
 export const useCategories = (
-    arg: Argument<Client['getCategories']>
+    arg: Argument<Client['getCategories']>,
+    deps: unknown[] = []
 ): QueryResponse<DataType<Client['getCategories']>> => {
+    if (!arg) {
+        throw new Error('useCategories requires categories ids string in parameters ')
+    }
+    const {
+        parameters: {ids, levels = 1}
+    } = arg
+    let source: unknown[] = [ids, levels]
+    if (deps.length) {
+        source = deps
+    }
     const {shopperProducts: client} = useCommerceApi()
-    return useAsync(() => client.getCategories(arg), [arg])
+    return useAsync(() => client.getCategories(arg), source)
 }
 /**
  * A hook for `ShopperProducts#getCategory`.

packages/commerce-sdk-react/src/hooks/useAsync.ts

@@ -4,25 +4,44 @@
  * 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 {useState} from 'react'
+import {useState, useEffect} from 'react'
 import {ActionResponse, QueryResponse} from './types'
 
-export const useAsync = <T>(fn: () => Promise<T>, deps?: unknown[]): QueryResponse<T> => {
-    // This is a stub implementation to validate the types.
-    // The real implementation will be more React-y.
-    const result: QueryResponse<T> = {
-        isLoading: true
-    }
-    fn()
-        .then((data) => {
-            result.isLoading = false
-            result.data = data
-        })
-        .catch((error) => {
-            result.isLoading = false
-            result.error = error
-        })
-    return result
+export const useAsync = <T>(fn: () => Promise<T>, deps: unknown[] = []): QueryResponse<T> => {
+    const [data, setData] = useState<T | undefined>()
+    const [error, setError] = useState<Error | undefined>()
+    const [isLoading, setIsLoading] = useState(true)
+    useEffect(() => {
+        // use this variable to avoid race condition
+        let subscribe = true
+        setIsLoading(true)
+
+        const runAsync = async () => {
+            try {
+                if (subscribe) {
+                    const res = await fn()
+                    setData(res)
+                    setIsLoading(false)
+                }
+            } catch (error) {
+                if (subscribe) {
+                    setIsLoading(false)
+                    if (error instanceof Error) {
+                        setError(error)
+                    }
+                }
+            }
+        }
+
+        runAsync()
+
+        // clean up
+        return () => {
+            subscribe = false
+        }
+    }, deps)
+
+    return {data, isLoading, error}
 }
 
 export const useAsyncCallback = <Args extends unknown[], Ret>(

packages/commerce-sdk-react/src/provider.tsx

@@ -4,7 +4,7 @@
  * 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 React, {useState, ReactElement, useEffect} from 'react'
 import {
     ShopperBaskets,
     ShopperContexts,
@@ -15,7 +15,8 @@ import {
     ShopperPromotions,
     ShopperDiscoverySearch,
     ShopperGiftCertificates,
-    ShopperSearch
+    ShopperSearch,
+    helpers
 } from 'commerce-sdk-isomorphic'
 
 import {ApiClientConfigParams, ApiClients} from './hooks/types'
@@ -32,18 +33,37 @@ export interface CommerceApiProviderProps extends ApiClientConfigParams {
  */
 export const CommerceApiContext = React.createContext({} as ApiClients)
 
+interface configType {
+    proxy: string
+    headers: {
+        authorization?: string
+    }
+    parameters: {
+        clientId: string
+        organizationId: string
+        shortCode: string
+        siteId: string
+    }
+    throwOnBadResponse: boolean
+}
 /**
  * Initialize a set of Commerce API clients and make it available to all of descendant components
  *
  * @param props
  * @returns Provider to wrap your app with
  */
+const localhost = 'http://localhost:3000'
+// Input your token here to for the apiClients to work
+// this is a temporary solution to implement hooks while waiting for slas hook
+const token = ''
 const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
-    const {children, clientId, organizationId, shortCode, siteId, proxy} = props
-
-    const config = {
-        proxy,
-        headers: {},
+    const {children, clientId, organizationId, shortCode, siteId} = props
+    const defaultConfig: configType = {
+        proxy: `${localhost}${props.proxy}`,
+        headers: {
+            // mock a token to use
+            authorization: `Bearer ${token}`
+        },
         parameters: {
             clientId,
             organizationId,
@@ -52,10 +72,66 @@ const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
         },
         throwOnBadResponse: true
     }
+    const [config, setConfig] = useState(defaultConfig)
+
+    //NOTE: this logic is for temporary use to grab the access token
+    // token handling session should be provided by SLAS hook which is still in implementation
+    useEffect(() => {
+        const origin = 'http://localhost:3000'
+        // only for temporary use until slas hook is ready
+        const setupToken = async (config: configType) => {
+            if (typeof window !== 'undefined') {
+                const shopperLogin = new ShopperLogin(config)
+
+                const access_token = window.localStorage.getItem('token')
+                const refresh_token = window.localStorage.getItem('refresh_token')
+                console.log('access_token', access_token)
+                console.log('refresh_token', refresh_token)
+                if (access_token) {
+                    // const data = new URLSearchParams()
+                    // data.append('grant_type', 'refresh_token')
+                    // data.append('refresh_token', refresh_token)
+                    // data.append('client_id', clientId)
+                    //
+                    // const options = {
+                    //     headers: {
+                    //         'Content-Type': `application/x-www-form-urlencoded`
+                    //     },
+                    //     body: data
+                    // }
+                    // this code here is not important and will be deleted, do not need to care about typescript error
+                    // @ts-ignore
+                    // const res = await shopperLogin.getAccessToken(options)
+                    // console.log('res', res)
+                    // window.localStorage.setItem('token', res.access_token)
+                    // window.localStorage.setItem('refresh_token', res.refresh_token)
+                    return access_token
+                } else {
+                    console.log('shopperLogin>>>>>>>>>>>>>>>>>>>>>>>')
+                    const {access_token, refresh_token, ...rest} = await helpers.loginGuestUser(
+                        shopperLogin,
+                        {redirectURI: `${origin}/callback`} // Callback URL must be configured in SLAS Admin
+                    )
+                    console.log('access_token', access_token)
+                    setConfig({
+                        ...config,
+                        headers: {
+                            authorization: `Bearer ${access_token}`
+                        }
+                    })
+                    console.log('refresh_token', refresh_token)
+                    console.log('...rest', rest)
+                    window.localStorage.setItem('token', access_token)
+                    window.localStorage.setItem('refresh_token', refresh_token)
+                }
+            }
+        }
+        setupToken(config)
+    }, [])
 
-    // TODO: Initialize the api clients immediately, without waiting for an access token.
-    // See template-retail-react-app/app/commerce-api/index.js for inspiration
-    // especially how Proxy class can be used to wait for the access token and inject it to each request header.
+    // // TODO: Initialize the api clients immediately, without waiting for an access token.
+    // // See template-retail-react-app/app/commerce-api/index.js for inspiration
+    // // especially how Proxy class can be used to wait for the access token and inject it to each request header.
     const apiClients: ApiClients = {
         shopperBaskets: new ShopperBaskets(config),
         shopperContexts: new ShopperContexts(config),

packages/test-commerce-sdk-react/app/components/_app-config/index.tsx

@@ -5,8 +5,10 @@
  * 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 {
     children: React.ReactNode
 }

packages/test-commerce-sdk-react/app/main.tsx

@@ -4,6 +4,7 @@
  * 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()

packages/test-commerce-sdk-react/app/pages/home.tsx

@@ -19,7 +19,9 @@ const Home = () => {
             </p>
             <p>Happy coding.</p>
             <h2>Hooks</h2>
-            <Link to="/useShopperProducts">useShopperProducts</Link>
+            <Link to="/use-shopper-products">useShopperProducts</Link>
+            <br />
+            <Link to="/use-shopper-categories">useCategories</Link>
         </>
     )
 }

packages/test-commerce-sdk-react/app/pages/use-shopper-categories.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021, 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, {useState} 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({
+        parameters: {
+            ids: 'root',
+            levels: 2
+        }
+    })
+    if (isLoading) {
+        return (
+            <div>
+                <h1>useShopperCategories page</h1>
+                <div style={{background: 'yellow'}}>Loading...</div>
+            </div>
+        )
+    }
+    if (error) {
+        return <div>Something is wrong</div>
+    }
+    let flattened: Record<string, any> = {}
+    if (result) {
+        flattened = flatten(result.data[0], 'categories')
+    }
+    return (
+        <div>
+            <h1>useShopperCategories page</h1>
+            {result &&
+                Object.keys(flattened).map((key) => (
+                    <div key={key}>
+                        <Link to={`/use-shopper-categories/${key}`}>Category {key}</Link>
+                    </div>
+                ))}
+
+            <hr />
+            <div>
+                <div>Returning data</div>
+                <Json data={result} />
+            </div>
+        </div>
+    )
+}
+
+export default UseShopperCategories