@nuskin/react-search-sdk 1.0.0-trying-again.1 → 1.0.0-trying-again.3
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/README.md +59 -8
- package/dist/index.d.mts +43 -635
- package/dist/index.d.ts +43 -635
- package/dist/index.js +206 -213
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +203 -176
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,16 +1,66 @@
|
|
|
1
1
|
# @nuskin/react-search-sdk
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The search experience for the NuSkin storefront: typeahead and recent searches over the Equinox
|
|
4
|
+
catalog, and the NUi agent when a signed-in shopper searches for something with no products.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
A host renders one component, `CommerceSearch`, and gives it the market, who the customer is, how to
|
|
7
|
+
navigate, and its logo. The package works out the rest itself: the market's catalog lookup, the
|
|
8
|
+
minimum search length, which NUi app to use, the panel's text and the analytics events. The panel UI
|
|
9
|
+
comes from [`@nuskin/react-search-components`](../react-search-components) and the agent from
|
|
10
|
+
`@nuskin/react-nui-chat-sdk`.
|
|
9
11
|
|
|
10
12
|
## Requirements
|
|
11
13
|
|
|
12
|
-
- Node.js `>=22.0.0 <
|
|
13
|
-
-
|
|
14
|
+
- Node.js `>=22.0.0 <25.0.0`
|
|
15
|
+
- Peer dependencies: `react` and `react-dom` `^18.2.0`, `@mui/material`, `@emotion/react`,
|
|
16
|
+
`@emotion/styled`, `@nuskin/foundation-theme`, `@nuskin/foundation-ui-components` `4.x`, and
|
|
17
|
+
`@nuskin/configuration-sdk` `^3.1.0` (it reads the market configuration and tells the package
|
|
18
|
+
which environment it is in).
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { CommerceSearch } from '@nuskin/react-search-sdk';
|
|
24
|
+
|
|
25
|
+
<CommerceSearch
|
|
26
|
+
isOpen={isOpen}
|
|
27
|
+
onClose={() => setIsOpen(false)}
|
|
28
|
+
navigate={(target) =>
|
|
29
|
+
target.type === 'external'
|
|
30
|
+
? window.location.assign(target.url)
|
|
31
|
+
: router.push(target.path)
|
|
32
|
+
}
|
|
33
|
+
customer={{
|
|
34
|
+
isAuthenticated: true,
|
|
35
|
+
accountType: 'Brand Affiliate', // optional, defaults to 'guest'
|
|
36
|
+
userId: 'cust-123', // optional, for analytics
|
|
37
|
+
}}
|
|
38
|
+
country="US"
|
|
39
|
+
language="en"
|
|
40
|
+
logo={<Brand />} // optional
|
|
41
|
+
/>;
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
| Prop | Required | Notes |
|
|
45
|
+
| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| `isOpen` | yes | The host owns whether the panel is showing. |
|
|
47
|
+
| `onClose` | yes | Called for Cancel, Escape, the backdrop, and after `navigate`. |
|
|
48
|
+
| `navigate` | yes | Receives `{ type: 'internal', path }` (for the router, market prefix already removed) or `{ type: 'external', url }` (full page load). The panel closes afterwards. |
|
|
49
|
+
| `customer` | yes | `{ isAuthenticated, accountType?, userId? }`. Read on every request, so a change after sign-in is picked up. The agent is for signed-in visitors only. |
|
|
50
|
+
| `country` | yes | ISO 3166-1 alpha-2 market, for example `US`. |
|
|
51
|
+
| `language` | yes | ISO 639-1 language, for example `en`. |
|
|
52
|
+
| `logo` | no | An element shown at the top of the panel. |
|
|
53
|
+
|
|
54
|
+
The NUi agent also needs the `enableNuiSearch` cookie, or `?enableNuiSearch=true` in the URL, while
|
|
55
|
+
that is the on/off switch.
|
|
56
|
+
|
|
57
|
+
### Known gaps
|
|
58
|
+
|
|
59
|
+
- The panel text is English only. It will be read from Contentstack once its content model exists.
|
|
60
|
+
- Analytics events send `page_type` as `NA` until the data team defines its values.
|
|
61
|
+
- The NUi settings and the Equinox client id are fixed values for the test environment in this
|
|
62
|
+
package, to be replaced by a configuration store.
|
|
63
|
+
- The `accountType` values are a best guess and need confirming against the suggestions API.
|
|
14
64
|
|
|
15
65
|
## Scripts
|
|
16
66
|
|
|
@@ -24,4 +74,5 @@ This package is a pure TypeScript library (no JSX, no framework coupling). UI li
|
|
|
24
74
|
|
|
25
75
|
## Public API
|
|
26
76
|
|
|
27
|
-
|
|
77
|
+
`CommerceSearch` and the types `CommerceSearchProps`, `CommerceSearchCustomer`, `CustomerAccountType` and
|
|
78
|
+
`NavigationTarget`; see [`src/index.ts`](src/index.ts). Everything else is internal.
|