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

package/dist/index.mjs

@@ -1,6 +1,8 @@
-import { lazy, useState, useEffect, useRef, useMemo, useCallback, Suspense, Component } from 'react';
+import { lazy, useState, useEffect, useRef, useMemo, useCallback, Component, Suspense } from 'react';
 import configurationSdk from '@nuskin/configuration-sdk';
 import { SearchModal } from '@nuskin/react-search-components';
+import { createProductClient, ProductProvider, useProductById, ProductCard } from '@nuskin/react-product-sdk';
+import styled from '@emotion/styled';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/CommerceSearch/CommerceSearch.tsx
@@ -28,7 +30,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() : "";
@@ -45,7 +50,8 @@ function normalizeCommerceSearchConfig(raw, { language } = {}) {
         apiBaseUrl,
         ...language ? { language } : {}
       }
-    } : {}
+    } : {},
+    ...raw?.allowGuestAgent === true ? { allowGuestAgent: true } : {}
   };
 }
 async function fetchCommerceSearchConfig({
@@ -299,6 +305,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) {
@@ -309,6 +325,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}`
         );
@@ -348,6 +365,13 @@ function createSearchService(options = {}) {
         locationLike,
         country: localeParts.country,
         getMarketConfig
+      }).catch((error) => {
+        catalogRequestConfigPromise = null;
+        console.warn(
+          "[search] Could not load the market configuration for the suggestions:",
+          error
+        );
+        throw error;
       });
     }
     return catalogRequestConfigPromise;
@@ -468,6 +492,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",
@@ -997,9 +1034,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
@@ -1013,15 +1051,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.div`
+    && {
+        flex: 0 0 240px;
+        overflow: hidden;
+        width: 240px;
+    }
+`;
+var SalesAIChatWidget = 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 = 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 } = useProductById(sku);
+  if (!isLoading && (error || !product?.seoInformation?.canonicalURL)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AgentProductSlot, { children: /* @__PURE__ */ jsx(ProductCard, { productId: sku }) });
+}
+var renderAgentProduct = (product) => /* @__PURE__ */ jsx(AgentProductCard, { sku: product.sku });
+function AgentWidget({
+  widgetProps,
+  products
+}) {
+  const environment = products?.environment;
+  const market = products?.market;
+  const language = products?.language;
+  const client = useMemo(
+    () => environment && market && language ? withProductCache(
+      createProductClient({ environment, market, language })
+    ) : void 0,
+    [environment, market, language]
+  );
+  if (!client) {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(SalesAIChatWidget, { ...widgetProps }) });
+  }
+  return /* @__PURE__ */ jsx(ProductProvider, { client, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+    SalesAIChatWidget,
+    {
+      renderProduct: renderAgentProduct,
+      ...widgetProps
+    }
+  ) }) });
+}
 function getSalesAIHandle() {
   return window.SalesAI;
 }
@@ -1077,6 +1169,7 @@ function NuiAgentPanel({
   agent,
   query,
   handoffContext,
+  products,
   onUnavailable
 }) {
   useHandoff({
@@ -1085,19 +1178,22 @@ function NuiAgentPanel({
     agentContext: agent.context,
     onUnavailable
   });
-  return /* @__PURE__ */ jsx(AgentErrorBoundary, { onError: onUnavailable, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ 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__ */ jsx(AgentErrorBoundary, { onError: onUnavailable, children: /* @__PURE__ */ 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) {
@@ -1116,6 +1212,8 @@ function CommerceSearchView({
   navigate,
   isAuthenticated,
   agent,
+  allowGuestAgent = false,
+  agentProducts,
   logo,
   minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH,
   gtmContext
@@ -1141,7 +1239,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
@@ -1311,6 +1413,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__ */ 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__ */ jsx(
     SearchModal,
     {
@@ -1338,20 +1456,7 @@ function CommerceSearchView({
         onSelect: handleRecentSelect,
         onClear: handleClearRecent
       },
-      agentPanel: handoff === null || agent === void 0 ? void 0 : /* @__PURE__ */ jsx(
-        NuiAgentPanel,
-        {
-          agent,
-          query: handoff.query,
-          handoffContext: {
-            source: "storefront_search",
-            trigger: "zero_results",
-            query: handoff.query,
-            did_you_mean: handoff.didYouMean
-          },
-          onUnavailable: handleAgentUnavailable
-        }
-      )
+      agentPanel
     }
   );
 }
@@ -1369,7 +1474,7 @@ function CommerceSearch({
   useEffect(() => {
     if (isOpen) setHasOpened(true);
   }, [isOpen]);
-  const { minimumSearchLength, agent } = useCommerceSearchConfig({
+  const { minimumSearchLength, agent, allowGuestAgent } = useCommerceSearchConfig({
     country,
     language,
     enabled: hasOpened
@@ -1402,6 +1507,14 @@ function CommerceSearch({
     }),
     [country, language, isAuthenticated, accountType, userId]
   );
+  const agentProducts = useMemo(() => {
+    const environment = getProductEnvironment();
+    return environment ? {
+      environment,
+      market: country.toUpperCase(),
+      language: language.toLowerCase()
+    } : void 0;
+  }, [country, language]);
   return /* @__PURE__ */ jsx(
     CommerceSearchView,
     {
@@ -1411,6 +1524,8 @@ function CommerceSearch({
       navigate: navigateToPath,
       isAuthenticated,
       ...agent ? { agent } : {},
+      ...allowGuestAgent ? { allowGuestAgent } : {},
+      ...agentProducts ? { agentProducts } : {},
       logo,
       minimumSearchLength,
       gtmContext