@nuskin/react-search-sdk 1.0.0-trying-again.3 → 1.0.0-trying-again.4

package/README.md

@@ -7,7 +7,28 @@ A host renders one component, `CommerceSearch`, and gives it the market, who the
 navigate, and its logo. The package works out the rest itself: the market's catalog lookup, the
 minimum search length, which NUi app to use, the panel's text and the analytics events. The panel UI
 comes from [`@nuskin/react-search-components`](../react-search-components) and the agent from
-`@nuskin/react-nui-chat-sdk`.
+`@nu-skin-enterprises/chat-widget`, the platform-owned chat widget published from
+`sales-ai-platform` to AWS CodeArtifact (see [Installing](#installing)).
+
+## Installing
+
+`@nu-skin-enterprises/chat-widget` is not on npmjs. `.npmrc` routes only that scope to the
+`npm-sdks` repository of the `ai-spr-sdk` CodeArtifact domain (account 105371274045, us-west-2) and
+reads a token from `CODEARTIFACT_AUTH_TOKEN`. CI mints it in `.gitlab-ci.yml`; locally, with an AWS
+identity that may read the domain (the `nse-dev` and `nse-nnp` developer permission sets can):
+
+```sh
+export CODEARTIFACT_AUTH_TOKEN="$(aws codeartifact get-authorization-token \
+  --domain ai-spr-sdk --domain-owner 105371274045 --region us-west-2 \
+  --query authorizationToken --output text)"   # valid 12 hours
+yarn install
+```
+
+The domain owner matters: the dev account has an unrelated domain of the same name.
+
+The variable must exist for yarn to start at all, even with the package already installed: yarn
+refuses an `.npmrc` that references an unset variable. An empty value is enough for commands that
+do not fetch (`export CODEARTIFACT_AUTH_TOKEN=`).
 
 ## Requirements
 
@@ -52,7 +73,9 @@ import { CommerceSearch } from '@nuskin/react-search-sdk';
 | `logo`     | no       | An element shown at the top of the panel.                                                                                                                           |
 
 The NUi agent also needs the `enableNuiSearch` cookie, or `?enableNuiSearch=true` in the URL, while
-that is the on/off switch.
+that is the on/off switch. It is for signed-in visitors only, unless the configuration sets
+`allowGuestAgent` (today only the test environment does, so the handoff can be tried where signing in
+is not possible).
 
 ### Known gaps
 

package/dist/index.d.mts

@@ -22,7 +22,10 @@ type NavigationTarget = {
 type CustomerAccountType = 'guest' | 'Brand Affiliate' | 'Retail Customer' | 'Preferred Customer/Member';
 /** Who is searching. */
 interface CommerceSearchCustomer {
-    /** Whether the visitor is signed in. The NUi agent is for signed-in visitors only. */
+    /**
+     * Whether the visitor is signed in. The NUi agent is for signed-in visitors only, unless the
+     * package's configuration allows guests.
+     */
     isAuthenticated: boolean;
     /** Defaults to `guest`. Ignored for a visitor who is not signed in. */
     accountType?: CustomerAccountType;
@@ -49,7 +52,7 @@ interface CommerceSearchProps {
 /**
  * The commerce website's single search entry point: typeahead and recent searches over the
  * product catalog today, with the NUi agent taking over in the same panel when a signed-in
- * shopper searches for something with no products. What it can answer is not limited to
+ * shopper (guests too, where the configuration allows it) searches for something with no products. What it can answer is not limited to
  * products — it is the commerce site's search, not a product-only search box.
  *
  * The package works out the rest itself: the market's catalog lookup, the minimum search length,

package/dist/index.d.ts

@@ -22,7 +22,10 @@ type NavigationTarget = {
 type CustomerAccountType = 'guest' | 'Brand Affiliate' | 'Retail Customer' | 'Preferred Customer/Member';
 /** Who is searching. */
 interface CommerceSearchCustomer {
-    /** Whether the visitor is signed in. The NUi agent is for signed-in visitors only. */
+    /**
+     * Whether the visitor is signed in. The NUi agent is for signed-in visitors only, unless the
+     * package's configuration allows guests.
+     */
     isAuthenticated: boolean;
     /** Defaults to `guest`. Ignored for a visitor who is not signed in. */
     accountType?: CustomerAccountType;
@@ -49,7 +52,7 @@ interface CommerceSearchProps {
 /**
  * The commerce website's single search entry point: typeahead and recent searches over the
  * product catalog today, with the NUi agent taking over in the same panel when a signed-in
- * shopper searches for something with no products. What it can answer is not limited to
+ * shopper (guests too, where the configuration allows it) searches for something with no products. What it can answer is not limited to
  * products — it is the commerce site's search, not a product-only search box.
  *
  * The package works out the rest itself: the market's catalog lookup, the minimum search length,

package/dist/index.js

@@ -3,11 +3,14 @@
 var react = require('react');
 var configurationSdk = require('@nuskin/configuration-sdk');
 var reactSearchComponents = require('@nuskin/react-search-components');
+var reactProductSdk = require('@nuskin/react-product-sdk');
+var styled = require('@emotion/styled');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var configurationSdk__default = /*#__PURE__*/_interopDefault(configurationSdk);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 // src/components/CommerceSearch/CommerceSearch.tsx
 var { getConfiguration, getEnvironmentCode } = configurationSdk__default.default;
@@ -34,7 +37,10 @@ var TEST_ENVIRONMENT_VALUES = {
   agent: {
     appKey: "pk_commerce_product_advisor_624aea4305b09240e8c8f41d0f6527b2",
     apiBaseUrl: "https://nui.tst.nuskin.ai/"
-  }
+  },
+  // Open to visitors who are not signed in, so the handoff can be tried where signing in is not
+  // possible (for example local development). Sign-in stays required everywhere else.
+  allowGuestAgent: true
 };
 function nonEmptyString(value) {
   return typeof value === "string" ? value.trim() : "";
@@ -51,7 +57,8 @@ function normalizeCommerceSearchConfig(raw, { language } = {}) {
         apiBaseUrl,
         ...language ? { language } : {}
       }
-    } : {}
+    } : {},
+    ...raw?.allowGuestAgent === true ? { allowGuestAgent: true } : {}
   };
 }
 async function fetchCommerceSearchConfig({
@@ -305,6 +312,16 @@ function resolveCustomerTypeHeaders(getCustomerType) {
   const customerType = getCustomerType?.()?.trim();
   return customerType ? { "X-Customer-Type": customerType } : void 0;
 }
+var NO_RESULTS_ERROR_CODE = "SFOSER002";
+async function isNoResultsResponse(response) {
+  if (response.status !== 404) return false;
+  try {
+    const body = await response.json();
+    return body?.code === NO_RESULTS_ERROR_CODE;
+  } catch {
+    return false;
+  }
+}
 async function fetchJsonFromCandidates(fetchImpl, requestUrls, requestHeaders = {}) {
   let lastError;
   for (const requestUrl of requestUrls) {
@@ -315,6 +332,7 @@ async function fetchJsonFromCandidates(fetchImpl, requestUrls, requestHeaders =
         headers: { Accept: "application/json", ...requestHeaders }
       });
       if (!response.ok) {
+        if (await isNoResultsResponse(response)) return null;
         lastError = new Error(
           `Request failed with status ${response.status}`
         );
@@ -481,6 +499,19 @@ function toNavigationTarget(path) {
   return /^https?:\/\//i.test(path) ? { type: "external", url: path } : { type: "internal", path };
 }
 
+// src/utils/productEnvironment.ts
+var PRODUCT_ENVIRONMENTS = ["dev", "test", "prod"];
+function toProductEnvironment(environmentCode) {
+  return environmentCode && PRODUCT_ENVIRONMENTS.includes(environmentCode) ? environmentCode : void 0;
+}
+function getProductEnvironment() {
+  try {
+    return toProductEnvironment(getEnvironmentCode());
+  } catch {
+    return void 0;
+  }
+}
+
 // src/utils/catalogHelpers.ts
 var CART_DISABLED_PRODUCT_STATUSES = /* @__PURE__ */ new Set([
   "discontinued",
@@ -1010,9 +1041,10 @@ function resolveNuiSearchFlag(env = {}) {
 }
 function isNuiSearchEnabled({
   isAuthenticated,
-  flag
+  flag,
+  allowGuests = false
 }) {
-  return isAuthenticated === true && flag === true;
+  return flag === true && (isAuthenticated === true || allowGuests);
 }
 
 // src/utils/searchRouting.ts
@@ -1026,15 +1058,69 @@ function decideSearchRoute({
   if (snapshot.suggestionFetchFailed) return "search";
   return snapshot.suggestions.length > 0 ? "search" : "handoff";
 }
+
+// src/utils/cachedProductClient.ts
+function withProductCache(client) {
+  const lookups = /* @__PURE__ */ new Map();
+  return {
+    getProductById(productId) {
+      let lookup = lookups.get(productId);
+      if (!lookup) {
+        lookup = client.getProductById(productId);
+        lookups.set(productId, lookup);
+      }
+      return lookup;
+    },
+    getProductsByIds: (productIds) => client.getProductsByIds(productIds)
+  };
+}
+var AgentProductSlot = styled__default.default.div`
+    && {
+        flex: 0 0 240px;
+        overflow: hidden;
+        width: 240px;
+    }
+`;
+var SalesAIChatWidget = react.lazy(
+  () => Promise.all([
+    import('@nu-skin-enterprises/chat-widget'),
+    import('@nu-skin-enterprises/chat-widget/styles.css')
+  ]).then(([mod]) => ({ default: mod.SalesAIChatWidget }))
+);
 var HANDLE_POLL_MS = 50;
 var HANDLE_TIMEOUT_MS = 15e3;
-var SalesAIChatWidget = react.lazy(async () => {
-  const [widget] = await Promise.all([
-    import('@nuskin/react-nui-chat-sdk'),
-    import('@nuskin/react-nui-chat-sdk/styles.css')
-  ]);
-  return { default: widget.SalesAIChatWidget };
-});
+function AgentProductCard({ sku }) {
+  const { product, isLoading, error } = reactProductSdk.useProductById(sku);
+  if (!isLoading && (error || !product?.seoInformation?.canonicalURL)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentProductSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(reactProductSdk.ProductCard, { productId: sku }) });
+}
+var renderAgentProduct = (product) => /* @__PURE__ */ jsxRuntime.jsx(AgentProductCard, { sku: product.sku });
+function AgentWidget({
+  widgetProps,
+  products
+}) {
+  const environment = products?.environment;
+  const market = products?.market;
+  const language = products?.language;
+  const client = react.useMemo(
+    () => environment && market && language ? withProductCache(
+      reactProductSdk.createProductClient({ environment, market, language })
+    ) : void 0,
+    [environment, market, language]
+  );
+  if (!client) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(SalesAIChatWidget, { ...widgetProps }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactProductSdk.ProductProvider, { client, children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SalesAIChatWidget,
+    {
+      renderProduct: renderAgentProduct,
+      ...widgetProps
+    }
+  ) }) });
+}
 function getSalesAIHandle() {
   return window.SalesAI;
 }
@@ -1090,6 +1176,7 @@ function NuiAgentPanel({
   agent,
   query,
   handoffContext,
+  products,
   onUnavailable
 }) {
   useHandoff({
@@ -1098,19 +1185,22 @@ function NuiAgentPanel({
     agentContext: agent.context,
     onUnavailable
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentErrorBoundary, { onError: onUnavailable, children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-    SalesAIChatWidget,
+  const widgetProps = {
+    appKey: agent.appKey,
+    apiBaseUrl: agent.apiBaseUrl,
+    theme: agent.theme ?? "nui-light",
+    defaultOpen: true,
+    hideFab: true,
+    placement: "host",
+    ...agent.language === void 0 ? {} : { language: agent.language }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentErrorBoundary, { onError: onUnavailable, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AgentWidget,
     {
-      appKey: agent.appKey,
-      apiBaseUrl: agent.apiBaseUrl,
-      theme: agent.theme ?? "nui-light",
-      defaultOpen: true,
-      hideFab: true,
-      placement: "host",
-      ...agent.language === void 0 ? {} : { language: agent.language },
-      ...agent.renderProduct === void 0 ? {} : { renderProduct: agent.renderProduct }
+      widgetProps,
+      ...products ? { products } : {}
     }
-  ) }) });
+  ) });
 }
 var SUBMIT_WAIT_TIMEOUT_MS = 2e3;
 function uniqueRecentSearches(queries) {
@@ -1129,6 +1219,8 @@ function CommerceSearchView({
   navigate,
   isAuthenticated,
   agent,
+  allowGuestAgent = false,
+  agentProducts,
   logo,
   minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH,
   gtmContext
@@ -1154,7 +1246,11 @@ function CommerceSearchView({
     suggestions,
     updateQuery
   } = search;
-  const enabled = agent !== void 0 && isNuiSearchEnabled({ isAuthenticated, flag });
+  const enabled = agent !== void 0 && isNuiSearchEnabled({
+    isAuthenticated,
+    flag,
+    allowGuests: allowGuestAgent
+  });
   const items = getVisibleSuggestions({
     didYouMean,
     suggestions
@@ -1324,6 +1420,22 @@ function CommerceSearchView({
     if (agentQuery !== null)
       navigateTo(service.submitProductSearch(agentQuery));
   }, [agentQuery, navigateTo, service]);
+  const agentProductsProps = agentProducts ? { products: agentProducts } : {};
+  const agentPanel = handoff === null || agent === void 0 ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
+    NuiAgentPanel,
+    {
+      agent,
+      query: handoff.query,
+      handoffContext: {
+        source: "storefront_search",
+        trigger: "zero_results",
+        query: handoff.query,
+        did_you_mean: handoff.didYouMean
+      },
+      ...agentProductsProps,
+      onUnavailable: handleAgentUnavailable
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactSearchComponents.SearchModal,
     {
@@ -1351,20 +1463,7 @@ function CommerceSearchView({
         onSelect: handleRecentSelect,
         onClear: handleClearRecent
       },
-      agentPanel: handoff === null || agent === void 0 ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
-        NuiAgentPanel,
-        {
-          agent,
-          query: handoff.query,
-          handoffContext: {
-            source: "storefront_search",
-            trigger: "zero_results",
-            query: handoff.query,
-            did_you_mean: handoff.didYouMean
-          },
-          onUnavailable: handleAgentUnavailable
-        }
-      )
+      agentPanel
     }
   );
 }
@@ -1382,7 +1481,7 @@ function CommerceSearch({
   react.useEffect(() => {
     if (isOpen) setHasOpened(true);
   }, [isOpen]);
-  const { minimumSearchLength, agent } = useCommerceSearchConfig({
+  const { minimumSearchLength, agent, allowGuestAgent } = useCommerceSearchConfig({
     country,
     language,
     enabled: hasOpened
@@ -1415,6 +1514,14 @@ function CommerceSearch({
     }),
     [country, language, isAuthenticated, accountType, userId]
   );
+  const agentProducts = react.useMemo(() => {
+    const environment = getProductEnvironment();
+    return environment ? {
+      environment,
+      market: country.toUpperCase(),
+      language: language.toLowerCase()
+    } : void 0;
+  }, [country, language]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     CommerceSearchView,
     {
@@ -1424,6 +1531,8 @@ function CommerceSearch({
       navigate: navigateToPath,
       isAuthenticated,
       ...agent ? { agent } : {},
+      ...allowGuestAgent ? { allowGuestAgent } : {},
+      ...agentProducts ? { agentProducts } : {},
       logo,
       minimumSearchLength,
       gtmContext