@salesforce/commerce-sdk-react 1.0.0-preview.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +10 -0
- package/CHANGELOG.md +35 -0
- package/LICENSE +14 -0
- package/README.md +327 -0
- package/auth/index.d.ts +220 -0
- package/auth/index.js +472 -0
- package/auth/storage.d.ts +48 -0
- package/auth/storage.js +122 -0
- package/components/ShopperExperience/Component/index.d.ts +17 -0
- package/components/ShopperExperience/Component/index.js +49 -0
- package/components/ShopperExperience/Page/index.d.ts +28 -0
- package/components/ShopperExperience/Page/index.js +97 -0
- package/components/ShopperExperience/Region/index.d.ts +41 -0
- package/components/ShopperExperience/Region/index.js +64 -0
- package/components/ShopperExperience/index.d.ts +5 -0
- package/components/ShopperExperience/index.js +49 -0
- package/components/ShopperExperience/prop-types.d.ts +39 -0
- package/components/ShopperExperience/prop-types.js +46 -0
- package/components/ShopperExperience/types.d.ts +8 -0
- package/components/ShopperExperience/types.js +5 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +16 -0
- package/hooks/ShopperBaskets/cache.d.ts +5 -0
- package/hooks/ShopperBaskets/cache.js +351 -0
- package/hooks/ShopperBaskets/index.d.ts +3 -0
- package/hooks/ShopperBaskets/index.js +27 -0
- package/hooks/ShopperBaskets/mutation.d.ts +381 -0
- package/hooks/ShopperBaskets/mutation.js +380 -0
- package/hooks/ShopperBaskets/query.d.ts +55 -0
- package/hooks/ShopperBaskets/query.js +215 -0
- package/hooks/ShopperBaskets/queryKeyHelpers.d.ts +72 -0
- package/hooks/ShopperBaskets/queryKeyHelpers.js +49 -0
- package/hooks/ShopperContexts/cache.d.ts +5 -0
- package/hooks/ShopperContexts/cache.js +45 -0
- package/hooks/ShopperContexts/index.d.ts +3 -0
- package/hooks/ShopperContexts/index.js +27 -0
- package/hooks/ShopperContexts/mutation.d.ts +35 -0
- package/hooks/ShopperContexts/mutation.js +68 -0
- package/hooks/ShopperContexts/query.d.ts +15 -0
- package/hooks/ShopperContexts/query.js +59 -0
- package/hooks/ShopperContexts/queryKeyHelpers.d.ts +30 -0
- package/hooks/ShopperContexts/queryKeyHelpers.js +25 -0
- package/hooks/ShopperCustomers/cache.d.ts +5 -0
- package/hooks/ShopperCustomers/cache.js +387 -0
- package/hooks/ShopperCustomers/index.d.ts +3 -0
- package/hooks/ShopperCustomers/index.js +27 -0
- package/hooks/ShopperCustomers/mutation.d.ts +163 -0
- package/hooks/ShopperCustomers/mutation.js +203 -0
- package/hooks/ShopperCustomers/query.d.ts +115 -0
- package/hooks/ShopperCustomers/query.js +489 -0
- package/hooks/ShopperCustomers/queryKeyHelpers.d.ts +142 -0
- package/hooks/ShopperCustomers/queryKeyHelpers.js +91 -0
- package/hooks/ShopperExperience/index.d.ts +2 -0
- package/hooks/ShopperExperience/index.js +16 -0
- package/hooks/ShopperExperience/query.d.ts +31 -0
- package/hooks/ShopperExperience/query.js +104 -0
- package/hooks/ShopperExperience/queryKeyHelpers.d.ts +38 -0
- package/hooks/ShopperExperience/queryKeyHelpers.js +31 -0
- package/hooks/ShopperGiftCertificates/index.d.ts +2 -0
- package/hooks/ShopperGiftCertificates/index.js +16 -0
- package/hooks/ShopperGiftCertificates/query.d.ts +15 -0
- package/hooks/ShopperGiftCertificates/query.js +70 -0
- package/hooks/ShopperGiftCertificates/queryKeyHelpers.d.ts +29 -0
- package/hooks/ShopperGiftCertificates/queryKeyHelpers.js +25 -0
- package/hooks/ShopperLogin/cache.d.ts +3 -0
- package/hooks/ShopperLogin/cache.js +33 -0
- package/hooks/ShopperLogin/index.d.ts +3 -0
- package/hooks/ShopperLogin/index.js +27 -0
- package/hooks/ShopperLogin/mutation.d.ts +119 -0
- package/hooks/ShopperLogin/mutation.js +138 -0
- package/hooks/ShopperLogin/query.d.ts +45 -0
- package/hooks/ShopperLogin/query.js +176 -0
- package/hooks/ShopperLogin/queryKeyHelpers.d.ts +53 -0
- package/hooks/ShopperLogin/queryKeyHelpers.js +43 -0
- package/hooks/ShopperOrders/cache.d.ts +5 -0
- package/hooks/ShopperOrders/cache.js +54 -0
- package/hooks/ShopperOrders/index.d.ts +3 -0
- package/hooks/ShopperOrders/index.js +27 -0
- package/hooks/ShopperOrders/mutation.d.ts +54 -0
- package/hooks/ShopperOrders/mutation.js +83 -0
- package/hooks/ShopperOrders/query.d.ts +37 -0
- package/hooks/ShopperOrders/query.js +139 -0
- package/hooks/ShopperOrders/queryKeyHelpers.d.ts +50 -0
- package/hooks/ShopperOrders/queryKeyHelpers.js +37 -0
- package/hooks/ShopperProducts/index.d.ts +2 -0
- package/hooks/ShopperProducts/index.js +16 -0
- package/hooks/ShopperProducts/query.d.ts +47 -0
- package/hooks/ShopperProducts/query.js +178 -0
- package/hooks/ShopperProducts/queryKeyHelpers.d.ts +55 -0
- package/hooks/ShopperProducts/queryKeyHelpers.js +43 -0
- package/hooks/ShopperPromotions/index.d.ts +2 -0
- package/hooks/ShopperPromotions/index.js +16 -0
- package/hooks/ShopperPromotions/query.d.ts +29 -0
- package/hooks/ShopperPromotions/query.js +102 -0
- package/hooks/ShopperPromotions/queryKeyHelpers.d.ts +38 -0
- package/hooks/ShopperPromotions/queryKeyHelpers.js +31 -0
- package/hooks/ShopperSearch/index.d.ts +2 -0
- package/hooks/ShopperSearch/index.js +16 -0
- package/hooks/ShopperSearch/query.d.ts +26 -0
- package/hooks/ShopperSearch/query.js +99 -0
- package/hooks/ShopperSearch/queryKeyHelpers.d.ts +37 -0
- package/hooks/ShopperSearch/queryKeyHelpers.js +31 -0
- package/hooks/index.d.ts +18 -0
- package/hooks/index.js +188 -0
- package/hooks/types.d.ts +128 -0
- package/hooks/types.js +5 -0
- package/hooks/useAccessToken.d.ts +11 -0
- package/hooks/useAccessToken.js +43 -0
- package/hooks/useAuthContext.d.ts +9 -0
- package/hooks/useAuthContext.js +30 -0
- package/hooks/useAuthHelper.d.ts +23 -0
- package/hooks/useAuthHelper.js +66 -0
- package/hooks/useAuthorizationHeader.d.ts +9 -0
- package/hooks/useAuthorizationHeader.js +45 -0
- package/hooks/useCommerceApi.d.ts +9 -0
- package/hooks/useCommerceApi.js +26 -0
- package/hooks/useConfig.d.ts +7 -0
- package/hooks/useConfig.js +24 -0
- package/hooks/useCustomerId.d.ts +7 -0
- package/hooks/useCustomerId.js +38 -0
- package/hooks/useCustomerType.d.ts +21 -0
- package/hooks/useCustomerType.js +43 -0
- package/hooks/useEncUserId.d.ts +9 -0
- package/hooks/useEncUserId.js +36 -0
- package/hooks/useLocalStorage.d.ts +8 -0
- package/hooks/useLocalStorage.js +40 -0
- package/hooks/useMutation.d.ts +12 -0
- package/hooks/useMutation.js +38 -0
- package/hooks/useQuery.d.ts +15 -0
- package/hooks/useQuery.js +57 -0
- package/hooks/useUsid.d.ts +7 -0
- package/hooks/useUsid.js +34 -0
- package/hooks/utils.d.ts +32 -0
- package/hooks/utils.js +125 -0
- package/index.d.ts +5 -0
- package/index.js +40 -0
- package/package.json +88 -0
- package/provider.d.ts +36 -0
- package/provider.js +124 -0
- package/scripts/build-and-release-docs.js +48 -0
- package/scripts/version.js +22 -0
- package/utils.d.ts +5 -0
- package/utils.js +18 -0
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2021, salesforce.com, inc.
|
|
3
|
+
* All rights reserved.
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
module.exports = {
|
|
9
|
+
extends: [require.resolve('@salesforce/pwa-kit-dev/configs/eslint')]
|
|
10
|
+
}
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
## v1.0.0-preview.0 (May 31, 2023)
|
|
2
|
+
## v1.0.0-dev (May 29, 2023)
|
|
3
|
+
## v3.0.0-dev (May 12, 2023)
|
|
4
|
+
|
|
5
|
+
- Add missing cache invalidation for contexts/customers/login/order [#1073](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1073)
|
|
6
|
+
|
|
7
|
+
- Upgrade React 18, React DOM 18, @types/react@18, @types/react-dom@v18 Testing library 14 [#1166](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1166)
|
|
8
|
+
|
|
9
|
+
## v2.7.1 (May 11, 2023)
|
|
10
|
+
|
|
11
|
+
- Re-generate lock files and fix hook lib tests [#1186](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1186)
|
|
12
|
+
- Add additional properties to ShopperLogin test types [#1185](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1185)
|
|
13
|
+
- Add missing cache invalidation for contexts/customers/login/order [#1073](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1073)
|
|
14
|
+
- Fix Shopper Baskets Test case [#1082](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1082)
|
|
15
|
+
- Implement remaining Shopper Baskets cache logic [#1070](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1070)
|
|
16
|
+
- Decode pre-fetched token and save auth data in storage [#1052](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1052)
|
|
17
|
+
- Allow query hook parameters to be null. [#1046](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1046)
|
|
18
|
+
- Implement updateCustomerPassword as no-op. [#1031](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1031)
|
|
19
|
+
|
|
20
|
+
## v2.7.0 (Mar 03, 2023)
|
|
21
|
+
|
|
22
|
+
- Add Page/Region/Component components for shopper experience/page designer page rendering [#963](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/963)
|
|
23
|
+
- Namespace `Auth` storage keys with site identifier to allow multi-site support [#911](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/911)
|
|
24
|
+
- Add Shopper Experience `usePage` and `usePages` hooks[#958](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/958)
|
|
25
|
+
|
|
26
|
+
## v2.6.0 (Jan 25, 2023)
|
|
27
|
+
|
|
28
|
+
## v2.5.0 (Jan 05, 2023)
|
|
29
|
+
|
|
30
|
+
- Exclude test files in package file to avoid publishing them [#856](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/856)
|
|
31
|
+
- Pass in 'headers' and 'rawResponse' options to mutation hooks [#845](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/845)
|
|
32
|
+
- Commerce hooks: basket mutations [#834](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/834)
|
|
33
|
+
- Remove overriding of params in mutation hooks [#859](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/859)
|
|
34
|
+
|
|
35
|
+
## v2.4.0 (Dec 01, 2022)
|
package/LICENSE
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
BSD 3-Clause License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023, Salesforce.com, Inc.
|
|
4
|
+
All rights reserved.
|
|
5
|
+
|
|
6
|
+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
7
|
+
|
|
8
|
+
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
9
|
+
|
|
10
|
+
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
11
|
+
|
|
12
|
+
3. Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
13
|
+
|
|
14
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
package/README.md
ADDED
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
# Commerce SDK React
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
A collection of <a href="https://tanstack.com/query/latest/docs/react/overview">react-query</a> hooks for <b>fetching</b>, <b>caching</b>, and <b>mutating data</b> from the <b><a href="https://developer.salesforce.com/docs/commerce/commerce-api/overview">Salesforce B2C Commerce API</a></b> (SCAPI).</p>
|
|
5
|
+
|
|
6
|
+
## 🎯 Features
|
|
7
|
+
|
|
8
|
+
- Shopper authentication & token management via [SLAS](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-login)
|
|
9
|
+
- Server side data fetching (in conjuction with PWA Kit)
|
|
10
|
+
- Phased Launch support ([plugin_slas](https://github.com/SalesforceCommerceCloud/plugin_slas) compatible)
|
|
11
|
+
- Built-in caching for easy state management
|
|
12
|
+
- automatic cache invalidations/updates via the library's built-in mutations
|
|
13
|
+
- automatic cache key generation
|
|
14
|
+
|
|
15
|
+
## ⚙️ Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @salesforce/commerce-sdk-react @tanstack/react-query
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## ⚡️ Quickstart (PWA Kit v2.3.0+)
|
|
22
|
+
|
|
23
|
+
To integrate this library with your PWA Kit application you can use the `CommerceApiProvider` directly assuming that you use the `withReactQuery` higher order component to wrap your `AppConfig` component. Below is a snippet of how this is accomplished.
|
|
24
|
+
|
|
25
|
+
```jsx
|
|
26
|
+
// app/components/_app-config/index.jsx
|
|
27
|
+
|
|
28
|
+
import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
|
|
29
|
+
import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
|
|
30
|
+
|
|
31
|
+
const AppConfig = ({children}) => {
|
|
32
|
+
return (
|
|
33
|
+
<CommerceApiProvider
|
|
34
|
+
clientId="12345678-1234-1234-1234-123412341234"
|
|
35
|
+
organizationId="f_ecom_aaaa_001"
|
|
36
|
+
proxy="localhost:3000/mobify/proxy/api"
|
|
37
|
+
redirectURI="localhost:3000/callback"
|
|
38
|
+
siteId="RefArch"
|
|
39
|
+
shortCode="12345678"
|
|
40
|
+
locale="en-US"
|
|
41
|
+
currency="USD"
|
|
42
|
+
>
|
|
43
|
+
{children}
|
|
44
|
+
</CommerceApiProvider>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Set configuration options for react query.
|
|
49
|
+
// NOTE: This configuration will be used both on the server-side and client-side.
|
|
50
|
+
const options = {
|
|
51
|
+
queryClientConfig: {
|
|
52
|
+
defaultOptions: {
|
|
53
|
+
queries: {
|
|
54
|
+
retry: false
|
|
55
|
+
},
|
|
56
|
+
mutations: {
|
|
57
|
+
retry: false
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export default withReactQuery(AppConfig, options)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## ⚡️ Quickstart (Generic React App)
|
|
67
|
+
|
|
68
|
+
You can use this library in any React application by creating a new QueryClient and wrap your application with `QueryClientProvider`. For example:
|
|
69
|
+
|
|
70
|
+
```jsx
|
|
71
|
+
import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
|
|
72
|
+
import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
const App = ({children}) => {
|
|
76
|
+
const queryClient = new QueryClient()
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<QueryClientProvider client={queryClient}>
|
|
80
|
+
<CommerceApiProvider
|
|
81
|
+
clientId="12345678-1234-1234-1234-123412341234"
|
|
82
|
+
organizationId="f_ecom_aaaa_001"
|
|
83
|
+
proxy="localhost:3000/mobify/proxy/api"
|
|
84
|
+
redirectURI="localhost:3000/callback"
|
|
85
|
+
siteId="RefArch"
|
|
86
|
+
shortCode="12345678"
|
|
87
|
+
locale="en-US"
|
|
88
|
+
currency="USD"
|
|
89
|
+
>
|
|
90
|
+
{children}
|
|
91
|
+
</CommerceApiProvider>
|
|
92
|
+
</QueryClientProvider>
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export default App
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Shopper Authentication and Token Management
|
|
100
|
+
|
|
101
|
+
_💡 This section assumes you have read and completed the [Authorization for Shopper APIs](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html) guide._
|
|
102
|
+
|
|
103
|
+
To help reduce boilerplate code for managing shopper authentication, by default, this library automatically initializes shopper session and manages the tokens for developers. Currently, the library supports the [Public Client login flow](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-public-client.html).
|
|
104
|
+
|
|
105
|
+
### Shopper Session Initialization
|
|
106
|
+
|
|
107
|
+
On `CommerceApiProvider` mount, the provider initializes shopper session by initiating the SLAS __Public Client__ login flow. The tokens are stored/managed/refreshed by the library.
|
|
108
|
+
|
|
109
|
+
### Authenticate request queue
|
|
110
|
+
|
|
111
|
+
While the library is fetching/refreshing the access token, the network requests will queue up until there is a valid access token.
|
|
112
|
+
|
|
113
|
+
### Login helpers
|
|
114
|
+
|
|
115
|
+
To leverage the managed shopper authentication feature, use the `useAuthHelper` hook for shopper login.
|
|
116
|
+
|
|
117
|
+
Example:
|
|
118
|
+
|
|
119
|
+
```jsx
|
|
120
|
+
import {AuthHelpers, useAuthHelper} from '@salesforce/commerce-sdk-react'
|
|
121
|
+
|
|
122
|
+
const Example = () => {
|
|
123
|
+
const register = useAuthHelper(AuthHelpers.Register)
|
|
124
|
+
const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
|
|
125
|
+
const logout = useAuthHelper(AuthHelpers.LogOut)
|
|
126
|
+
|
|
127
|
+
return <button onClick={() => {
|
|
128
|
+
login.mutate({username: 'kevin', password: 'pa$$word'})
|
|
129
|
+
}}>
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Externally Managed Shopper Authentication
|
|
134
|
+
|
|
135
|
+
You have the option of handling shopper authentication externally, by providing a SLAS access token. This is useful if you plan on using this library in an application where the authentication mechanism is different.
|
|
136
|
+
|
|
137
|
+
```jsx
|
|
138
|
+
const MyComponent = ({children}) => {
|
|
139
|
+
return (
|
|
140
|
+
<CommerceApiProvider fetchedToken="xxxxxxxxxxxx">
|
|
141
|
+
{children}
|
|
142
|
+
</CommerceApiProvider>
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## Hooks
|
|
148
|
+
|
|
149
|
+
The majority of hooks provided in this library are built on top of the [useQuery](https://tanstack.com/query/latest/docs/react/reference/useQuery) and the [useMutation](https://tanstack.com/query/latest/docs/react/reference/useMutation) hook from [react-query](https://tanstack.com/query/latest). React-query provides a declarative way for fetching and updating data. This library takes advantage of the features provided by react-query and combine with the [commerce-sdk-isomorphic](https://github.com/SalesforceCommerceCloud/commerce-sdk-isomorphic) API client to create a collection of hooks to simplify data fetching for SCAPI.
|
|
150
|
+
|
|
151
|
+
The hooks can be categorized into __Query hooks__ and __Mutation hooks__.
|
|
152
|
+
|
|
153
|
+
### Query hooks
|
|
154
|
+
|
|
155
|
+
The query hooks correspond to the http GET endpoints from the SCAPI. The query hooks follow the signature pattern:
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
use<EntityName>(CommerceClientOptions, ReactQueryOptions)
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Both the __required__ and __optional__ parameters for the underlying `commerce-sdk-isomorphic` call is passed as the first parameter:
|
|
162
|
+
|
|
163
|
+
```jsx
|
|
164
|
+
import {useProduct} from '@salesforce/commerce-sdk-react'
|
|
165
|
+
|
|
166
|
+
const Example = () => {
|
|
167
|
+
const query = useProduct({
|
|
168
|
+
parameters: {
|
|
169
|
+
id: '25592770M',
|
|
170
|
+
locale: 'en-US'
|
|
171
|
+
}
|
|
172
|
+
})
|
|
173
|
+
|
|
174
|
+
return <>
|
|
175
|
+
<p>isLoading: {query.isLoading}</p>
|
|
176
|
+
<p>name: {query.data?.name}</p>
|
|
177
|
+
</>
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
The second parameter is the react-query query options, for more detail, read [useQuery reference](https://tanstack.com/query/latest/docs/react/reference/useQuery).
|
|
182
|
+
|
|
183
|
+
```jsx
|
|
184
|
+
import {useBasket} from '@salesforce/commerce-sdk-react'
|
|
185
|
+
|
|
186
|
+
const onServer = typeof window === undefined
|
|
187
|
+
|
|
188
|
+
const Example = ({basketId}) => {
|
|
189
|
+
const query = useBasket({
|
|
190
|
+
parameters: {
|
|
191
|
+
basketId: basketId
|
|
192
|
+
},
|
|
193
|
+
}, {
|
|
194
|
+
// A common use case for `enabled` is
|
|
195
|
+
// to conditionally fetch based on environment
|
|
196
|
+
enabled: !onServer && basketId
|
|
197
|
+
})
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Mutation hooks
|
|
202
|
+
|
|
203
|
+
The query hooks correspond to the http POST, PUT, PATCH, DELETE endpoints from the SCAPI. The mutation hooks follow the signature pattern:
|
|
204
|
+
|
|
205
|
+
```
|
|
206
|
+
use<ApiName>Mutation(EndpointName)
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
For example, the [ShopperBaskets API](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=Summary) has a number of endpoints, one of them being the [addItemToBasket](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=addItemToBasket) endpoint (`POST /baskets/{basketId}/items`).
|
|
210
|
+
|
|
211
|
+
```jsx
|
|
212
|
+
import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
|
|
213
|
+
|
|
214
|
+
const Example = ({basketId}) => {
|
|
215
|
+
// Typescript IDE intellisense for available options
|
|
216
|
+
const addItemToBasket = useShopperBasketsMutation('addItemToBasket')
|
|
217
|
+
|
|
218
|
+
return <button onClick={() => addItemToBasket.mutate({
|
|
219
|
+
parameters: {
|
|
220
|
+
basketId
|
|
221
|
+
},
|
|
222
|
+
body: {
|
|
223
|
+
productId: '25592770M',
|
|
224
|
+
price: 55,
|
|
225
|
+
quantity: 1
|
|
226
|
+
}
|
|
227
|
+
})} />
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
You could also import the mutation options as a constant like:
|
|
232
|
+
|
|
233
|
+
```jsx
|
|
234
|
+
import {useShopperBasketsMutation, ShopperBasketsMutations} from '@salesforce/commerce-sdk-react'
|
|
235
|
+
|
|
236
|
+
const Example = ({basketId}) => {
|
|
237
|
+
const addItemToBasket = useShopperBasketsMutation(ShopperBasketsMutations.AddItemToBasket)
|
|
238
|
+
return ...
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
### Cache Invalidations and Updates
|
|
243
|
+
|
|
244
|
+
Since mutations changes data on the server, the cache entries that are potentially affected by the mutation is automatically invalidated.
|
|
245
|
+
|
|
246
|
+
For example, an `addItemToBasket` mutation automatically update `useBasket` and `useCustomerBaskets` query cache, because the mutation result contains the information for the updated basket. In other cases, when the mutation response do not have the updated data, the library will invalidate the cache and trigger a re-fetch. For the DELETE endpoints, the library removes the cache entries on successful mutations.
|
|
247
|
+
|
|
248
|
+
_💡 Debugging hint: install and include `@tanstack/react-query-devtools` in your React app to see the queries (inspect the query states and cache keys)._
|
|
249
|
+
|
|
250
|
+
## Ultilities
|
|
251
|
+
|
|
252
|
+
Besides the collection of query hooks and mutation hooks, here are some ultility hooks to help you interact with SCAPI.
|
|
253
|
+
|
|
254
|
+
### `useCommerceApi()`
|
|
255
|
+
|
|
256
|
+
This hook returns a set of SCAPI clients, which are already initialized using the configurations passed to the provider. Note: this hook doesn't automatically include auth headers.
|
|
257
|
+
|
|
258
|
+
```jsx
|
|
259
|
+
import {useCommerceApi, useAccessToken} from '@salesforce/commerce-sdk-react'
|
|
260
|
+
|
|
261
|
+
const Example = () => {
|
|
262
|
+
const api = useCommerceApi()
|
|
263
|
+
const {getTokenWhenReady} = useAccessToken()
|
|
264
|
+
|
|
265
|
+
const fetchProducts = async () => {
|
|
266
|
+
const token = await getTokenWhenReady()
|
|
267
|
+
const products = await api.shopperProducts.getProducts({
|
|
268
|
+
parameters: {ids: ids.join(',')},
|
|
269
|
+
headers: {
|
|
270
|
+
Authorization: `Bearer ${token}`
|
|
271
|
+
}
|
|
272
|
+
})
|
|
273
|
+
return products
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### `useAccessToken()`
|
|
280
|
+
|
|
281
|
+
```ts
|
|
282
|
+
useAccessToken() => {token: String, getTokenWhenReady: Promise}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
This ultility hook give access to the managed SLAS access token.
|
|
286
|
+
|
|
287
|
+
### `useCustomerId()`
|
|
288
|
+
|
|
289
|
+
```ts
|
|
290
|
+
useCustomerId() => null | string
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### `useCustomerType()`
|
|
294
|
+
|
|
295
|
+
```ts
|
|
296
|
+
useCustomerId() => null | 'guest' | 'registered'
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
### `useEncUserId()`
|
|
300
|
+
|
|
301
|
+
```ts
|
|
302
|
+
useEncUserId() => null | string
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
### `useUsid()`
|
|
306
|
+
|
|
307
|
+
```ts
|
|
308
|
+
useUsid() => null | string
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
## Roadmap
|
|
312
|
+
- Optimistic update support
|
|
313
|
+
- SLAS private client support
|
|
314
|
+
|
|
315
|
+
## Useful Links:
|
|
316
|
+
|
|
317
|
+
- [Get Started](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html)
|
|
318
|
+
- [Skills for Success](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/skills-for-success.html)
|
|
319
|
+
- [Set Up API Access](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html)
|
|
320
|
+
- [Configuration Options](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options.html)
|
|
321
|
+
- [Proxy Requests](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/proxying-requests.html)
|
|
322
|
+
- [Push and Deploy Bundles](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html)
|
|
323
|
+
- [The Retail React App](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html)
|
|
324
|
+
- [Rendering](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/rendering.html)
|
|
325
|
+
- [Routing](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/routing.html)
|
|
326
|
+
- [Phased Headless Rollouts](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/phased-headless-rollouts.html)
|
|
327
|
+
- [Launch Your Storefront](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/launching-your-storefront.html)
|
package/auth/index.d.ts
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import { helpers, ShopperLoginTypes, ShopperCustomersTypes } from 'commerce-sdk-isomorphic';
|
|
2
|
+
import { ApiClientConfigParams, Prettify, RemoveStringIndex } from '../hooks/types';
|
|
3
|
+
import { CustomerType } from '../hooks/useCustomerType';
|
|
4
|
+
declare type TokenResponse = ShopperLoginTypes.TokenResponse;
|
|
5
|
+
declare type Helpers = typeof helpers;
|
|
6
|
+
interface AuthConfig extends ApiClientConfigParams {
|
|
7
|
+
redirectURI: string;
|
|
8
|
+
proxy: string;
|
|
9
|
+
fetchOptions?: ShopperLoginTypes.FetchOptions;
|
|
10
|
+
fetchedToken?: string;
|
|
11
|
+
OCAPISessionsURL?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* The extended field is not from api response, we manually store the auth type,
|
|
15
|
+
* so we don't need to make another API call when we already have the data.
|
|
16
|
+
* Plus, the getCustomer endpoint only works for registered user, it returns a 404 for a guest user,
|
|
17
|
+
* and it's not easy to grab this info in user land, so we add it into the Auth object, and expose it via a hook
|
|
18
|
+
*/
|
|
19
|
+
export declare type AuthData = Prettify<RemoveStringIndex<TokenResponse> & {
|
|
20
|
+
customer_type: CustomerType;
|
|
21
|
+
idp_access_token: string;
|
|
22
|
+
}>;
|
|
23
|
+
/** A shopper could be guest or registered, so we store the refresh tokens individually. */
|
|
24
|
+
declare type AuthDataKeys = Exclude<keyof AuthData, 'refresh_token'> | 'refresh_token_guest' | 'refresh_token_registered';
|
|
25
|
+
/**
|
|
26
|
+
* This class is used to handle shopper authentication.
|
|
27
|
+
* It is responsible for initializing shopper session, manage access
|
|
28
|
+
* and refresh tokens on server/browser environments. As well as providing
|
|
29
|
+
* a mechanism to queue network calls before having a valid access token.
|
|
30
|
+
*
|
|
31
|
+
* @Internal
|
|
32
|
+
*/
|
|
33
|
+
declare class Auth {
|
|
34
|
+
private client;
|
|
35
|
+
private shopperCustomersClient;
|
|
36
|
+
private redirectURI;
|
|
37
|
+
private pendingToken;
|
|
38
|
+
private REFRESH_TOKEN_EXPIRATION_DAYS;
|
|
39
|
+
private stores;
|
|
40
|
+
private fetchedToken;
|
|
41
|
+
private OCAPISessionsURL;
|
|
42
|
+
constructor(config: AuthConfig);
|
|
43
|
+
get(name: AuthDataKeys): string;
|
|
44
|
+
private set;
|
|
45
|
+
private clearStorage;
|
|
46
|
+
/**
|
|
47
|
+
* Every method in this class that returns a `TokenResponse` constructs it via this getter.
|
|
48
|
+
*/
|
|
49
|
+
private get data();
|
|
50
|
+
/**
|
|
51
|
+
* Used to validate JWT token expiration.
|
|
52
|
+
*/
|
|
53
|
+
private isTokenExpired;
|
|
54
|
+
/**
|
|
55
|
+
* This method stores the TokenResponse object retrived from SLAS, and
|
|
56
|
+
* store the data in storage.
|
|
57
|
+
*/
|
|
58
|
+
private handleTokenResponse;
|
|
59
|
+
/**
|
|
60
|
+
* This method queues the requests and handles the SLAS token response.
|
|
61
|
+
*
|
|
62
|
+
* It returns the queue.
|
|
63
|
+
*
|
|
64
|
+
* @Internal
|
|
65
|
+
*/
|
|
66
|
+
queueRequest(fn: () => Promise<TokenResponse>, isGuest: boolean): Promise<ShopperLoginTypes.TokenResponse>;
|
|
67
|
+
/**
|
|
68
|
+
* The ready function returns a promise that resolves with valid ShopperLogin
|
|
69
|
+
* token response.
|
|
70
|
+
*
|
|
71
|
+
* When this method is called for the very first time, it initializes the session
|
|
72
|
+
* by following the public client auth flow to get access token for the user.
|
|
73
|
+
* The flow:
|
|
74
|
+
* 1. If we have valid access token - use it
|
|
75
|
+
* 2. If we have valid refresh token - refresh token flow
|
|
76
|
+
* 3. PKCE flow
|
|
77
|
+
*/
|
|
78
|
+
ready(): Promise<ShopperLoginTypes.TokenResponse>;
|
|
79
|
+
/**
|
|
80
|
+
* Creates a function that only executes after a session is initialized.
|
|
81
|
+
* @param fn Function that needs to wait until the session is initialized.
|
|
82
|
+
* @returns Wrapped function
|
|
83
|
+
*/
|
|
84
|
+
whenReady<Args extends unknown[], Data>(fn: (...args: Args) => Promise<Data>): (...args: Args) => Promise<Data>;
|
|
85
|
+
/**
|
|
86
|
+
* A wrapper method for commerce-sdk-isomorphic helper: loginGuestUser.
|
|
87
|
+
*
|
|
88
|
+
*/
|
|
89
|
+
loginGuestUser(): Promise<ShopperLoginTypes.TokenResponse>;
|
|
90
|
+
/**
|
|
91
|
+
* This is a wrapper method for ShopperCustomer API registerCustomer endpoint.
|
|
92
|
+
*
|
|
93
|
+
*/
|
|
94
|
+
register(body: ShopperCustomersTypes.CustomerRegistration): Promise<{
|
|
95
|
+
addresses?: ({
|
|
96
|
+
address1?: string | undefined;
|
|
97
|
+
address2?: string | undefined;
|
|
98
|
+
addressId: string;
|
|
99
|
+
city?: string | undefined;
|
|
100
|
+
companyName?: string | undefined;
|
|
101
|
+
countryCode: string;
|
|
102
|
+
creationDate?: any;
|
|
103
|
+
firstName?: string | undefined;
|
|
104
|
+
fullName?: string | undefined;
|
|
105
|
+
jobTitle?: string | undefined;
|
|
106
|
+
lastModified?: any;
|
|
107
|
+
lastName: string;
|
|
108
|
+
phone?: string | undefined;
|
|
109
|
+
postBox?: string | undefined;
|
|
110
|
+
postalCode?: string | undefined;
|
|
111
|
+
preferred?: boolean | undefined;
|
|
112
|
+
salutation?: string | undefined;
|
|
113
|
+
secondName?: string | undefined;
|
|
114
|
+
stateCode?: string | undefined;
|
|
115
|
+
suffix?: string | undefined;
|
|
116
|
+
suite?: string | undefined;
|
|
117
|
+
title?: string | undefined;
|
|
118
|
+
} & {
|
|
119
|
+
[key: string]: any;
|
|
120
|
+
})[] | undefined;
|
|
121
|
+
authType?: string | undefined;
|
|
122
|
+
birthday?: any;
|
|
123
|
+
companyName?: string | undefined;
|
|
124
|
+
creationDate?: any;
|
|
125
|
+
customerId?: string | undefined;
|
|
126
|
+
customerNo?: string | undefined;
|
|
127
|
+
email?: string | undefined;
|
|
128
|
+
enabled?: boolean | undefined;
|
|
129
|
+
fax?: string | undefined;
|
|
130
|
+
firstName?: string | undefined;
|
|
131
|
+
gender?: number | undefined;
|
|
132
|
+
jobTitle?: string | undefined;
|
|
133
|
+
lastLoginTime?: any;
|
|
134
|
+
lastModified?: any;
|
|
135
|
+
lastName?: string | undefined;
|
|
136
|
+
lastVisitTime?: any;
|
|
137
|
+
login?: string | undefined;
|
|
138
|
+
note?: string | undefined;
|
|
139
|
+
paymentInstruments?: ({
|
|
140
|
+
bankRoutingNumber?: string | undefined;
|
|
141
|
+
creationDate?: any;
|
|
142
|
+
lastModified?: any;
|
|
143
|
+
maskedGiftCertificateCode?: string | undefined;
|
|
144
|
+
paymentBankAccount: {
|
|
145
|
+
driversLicenseLastDigits?: string | undefined;
|
|
146
|
+
driversLicenseStateCode?: string | undefined;
|
|
147
|
+
holder?: string | undefined;
|
|
148
|
+
maskedDriversLicense?: string | undefined;
|
|
149
|
+
maskedNumber?: string | undefined;
|
|
150
|
+
numberLastDigits?: string | undefined;
|
|
151
|
+
} & {
|
|
152
|
+
[key: string]: any;
|
|
153
|
+
};
|
|
154
|
+
paymentCard: {
|
|
155
|
+
cardType: string;
|
|
156
|
+
creditCardExpired?: boolean | undefined;
|
|
157
|
+
creditCardToken?: string | undefined;
|
|
158
|
+
expirationMonth?: number | undefined;
|
|
159
|
+
expirationYear?: number | undefined;
|
|
160
|
+
holder?: string | undefined;
|
|
161
|
+
issueNumber?: string | undefined;
|
|
162
|
+
maskedNumber?: string | undefined;
|
|
163
|
+
numberLastDigits?: string | undefined;
|
|
164
|
+
validFromMonth?: number | undefined;
|
|
165
|
+
validFromYear?: number | undefined;
|
|
166
|
+
} & {
|
|
167
|
+
[key: string]: any;
|
|
168
|
+
};
|
|
169
|
+
paymentInstrumentId: string;
|
|
170
|
+
paymentMethodId: string;
|
|
171
|
+
} & {
|
|
172
|
+
[key: string]: any;
|
|
173
|
+
})[] | undefined;
|
|
174
|
+
phoneBusiness?: string | undefined;
|
|
175
|
+
phoneHome?: string | undefined;
|
|
176
|
+
phoneMobile?: string | undefined;
|
|
177
|
+
preferredLocale?: string | undefined;
|
|
178
|
+
previousLoginTime?: any;
|
|
179
|
+
previousVisitTime?: any;
|
|
180
|
+
salutation?: string | undefined;
|
|
181
|
+
secondName?: string | undefined;
|
|
182
|
+
suffix?: string | undefined;
|
|
183
|
+
title?: string | undefined;
|
|
184
|
+
} & {
|
|
185
|
+
[key: string]: any;
|
|
186
|
+
}>;
|
|
187
|
+
/**
|
|
188
|
+
* A wrapper method for commerce-sdk-isomorphic helper: loginRegisteredUserB2C.
|
|
189
|
+
*
|
|
190
|
+
*/
|
|
191
|
+
loginRegisteredUserB2C(credentials: Parameters<Helpers['loginRegisteredUserB2C']>[1]): Promise<helpers.TokenResponse>;
|
|
192
|
+
/**
|
|
193
|
+
* A wrapper method for commerce-sdk-isomorphic helper: logout.
|
|
194
|
+
*
|
|
195
|
+
*/
|
|
196
|
+
logout(): Promise<ShopperLoginTypes.TokenResponse>;
|
|
197
|
+
/**
|
|
198
|
+
* Make a post request to the OCAPI /session endpoint to bridge the session.
|
|
199
|
+
*
|
|
200
|
+
* The HTTP response contains a set-cookie header which sets the dwsid session cookie.
|
|
201
|
+
* This cookie is used on SFRA, and it allows shoppers to navigate between SFRA and
|
|
202
|
+
* this PWA site seamlessly; this is often used to enable hybrid deployment.
|
|
203
|
+
*
|
|
204
|
+
* (Note: this method is client side only, b/c MRT doesn't support set-cookie header right now)
|
|
205
|
+
*
|
|
206
|
+
* @returns {Promise}
|
|
207
|
+
*/
|
|
208
|
+
createOCAPISession(): Promise<Response>;
|
|
209
|
+
/**
|
|
210
|
+
* Decode SLAS JWT and extract information such as customer id, usid, etc.
|
|
211
|
+
*
|
|
212
|
+
*/
|
|
213
|
+
parseSlasJWT(jwt: string): {
|
|
214
|
+
isGuest: boolean;
|
|
215
|
+
customerId: string;
|
|
216
|
+
usid: string;
|
|
217
|
+
};
|
|
218
|
+
}
|
|
219
|
+
export default Auth;
|
|
220
|
+
//# sourceMappingURL=index.d.ts.map
|