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

package/dist/index.mjs

@@ -1,7 +1,11 @@
-import { lazy, useState, useRef, useCallback, useEffect, Suspense, Component } from 'react';
+import { lazy, useState, useEffect, useRef, useMemo, useCallback, Suspense, Component } from 'react';
+import configurationSdk from '@nuskin/configuration-sdk';
 import { SearchModal } from '@nuskin/react-search-components';
 import { jsx } from 'react/jsx-runtime';
 
+// src/components/CommerceSearch/CommerceSearch.tsx
+var { getConfiguration, getEnvironmentCode } = configurationSdk;
+
 // src/constants.ts
 var STOREFRONT_SHOPPING_CONTEXT = "storefront";
 var CATALOG_SUGGESTIONS_PATH = "/storefront/catalogs/search/suggestions";
@@ -11,13 +15,77 @@ var DEFAULT_SUGGESTION_PAGE = 1;
 var DEFAULT_SUGGESTION_SIZE = 6;
 var DEFAULT_SEARCH_PATH = "/search";
 var DEBOUNCE_MS = 220;
+var MINIMUM_SEARCH_CHAR_LENGTH = 2;
 var MAX_VISIBLE_SUGGESTIONS = 6;
-var SEARCH_PLACEHOLDER = "Search by product name, ingredient, benefits, or SKU";
-var TRIGGER_PLACEHOLDER = "Product Search";
+var EQUINOX_MARKETS_MAP = "Equinox_Markets";
+var DEFAULT_EQUINOX_CLIENT_ID = "63056848d7532f9923f3d08cb48c423b";
+
+// src/config/commerceSearchConfig.ts
+var COMMERCE_SEARCH_CONFIG_DEFAULTS = Object.freeze({
+  minimumSearchLength: MINIMUM_SEARCH_CHAR_LENGTH
+});
+var TEST_ENVIRONMENT_VALUES = {
+  agent: {
+    appKey: "pk_commerce_product_advisor_624aea4305b09240e8c8f41d0f6527b2",
+    apiBaseUrl: "https://nui.tst.nuskin.ai/"
+  }
+};
+function nonEmptyString(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+function normalizeCommerceSearchConfig(raw, { language } = {}) {
+  const minimumSearchLength = Number(raw?.minimumSearchLength);
+  const appKey = nonEmptyString(raw?.agent?.appKey);
+  const apiBaseUrl = nonEmptyString(raw?.agent?.apiBaseUrl);
+  return {
+    minimumSearchLength: Number.isInteger(minimumSearchLength) && minimumSearchLength >= 1 ? minimumSearchLength : COMMERCE_SEARCH_CONFIG_DEFAULTS.minimumSearchLength,
+    ...appKey && apiBaseUrl ? {
+      agent: {
+        appKey,
+        apiBaseUrl,
+        ...language ? { language } : {}
+      }
+    } : {}
+  };
+}
+async function fetchCommerceSearchConfig({
+  language
+} = {}) {
+  const raw = getEnvironmentCode() === "test" ? TEST_ENVIRONMENT_VALUES : {};
+  return normalizeCommerceSearchConfig(raw, language ? { language } : {});
+}
+
+// src/hooks/useCommerceSearchConfig.ts
+function useCommerceSearchConfig({
+  country,
+  language,
+  enabled
+}) {
+  const [config, setConfig] = useState(
+    COMMERCE_SEARCH_CONFIG_DEFAULTS
+  );
+  useEffect(() => {
+    if (!enabled) return void 0;
+    let isStale = false;
+    fetchCommerceSearchConfig({
+      ...country ? { country } : {},
+      ...language ? { language } : {}
+    }).then((next) => {
+      if (!isStale) setConfig(next);
+    }).catch((error) => {
+      console.warn(
+        "[search] Could not load the product search configuration:",
+        error
+      );
+    });
+    return () => {
+      isStale = true;
+    };
+  }, [enabled, country, language]);
+  return config;
+}
 
 // src/services/SearchApiService.ts
-var DEFAULT_SEARCH_PLACEHOLDER = TRIGGER_PLACEHOLDER;
-var DEFAULT_INPUT_ARIA_LABEL = SEARCH_PLACEHOLDER;
 function canUseStorage(storage) {
   return Boolean(storage) && typeof storage.getItem === "function";
 }
@@ -36,7 +104,7 @@ function normalizeLocaleParts({
   country,
   language,
   locale
-} = {}) {
+}) {
   const normalizedCountry = String(country ?? "").trim().toUpperCase();
   const normalizedLanguage = String(language ?? "").trim().toLowerCase();
   const normalizedLocale = String(locale ?? "").trim() || "UNKNOWN";
@@ -227,14 +295,18 @@ function resolveOptionHref(option, localeParts) {
   }
   return "";
 }
-async function fetchJsonFromCandidates(fetchImpl, requestUrls) {
+function resolveCustomerTypeHeaders(getCustomerType) {
+  const customerType = getCustomerType?.()?.trim();
+  return customerType ? { "X-Customer-Type": customerType } : void 0;
+}
+async function fetchJsonFromCandidates(fetchImpl, requestUrls, requestHeaders = {}) {
   let lastError;
   for (const requestUrl of requestUrls) {
     try {
       const response = await fetchImpl(requestUrl, {
         method: "GET",
         credentials: "include",
-        headers: { Accept: "application/json" }
+        headers: { Accept: "application/json", ...requestHeaders }
       });
       if (!response.ok) {
         lastError = new Error(
@@ -259,9 +331,9 @@ function createSearchService(options = {}) {
     country,
     language,
     locale,
-    searchPlaceholder = DEFAULT_SEARCH_PLACEHOLDER,
-    inputAriaLabel = DEFAULT_INPUT_ARIA_LABEL,
-    getMarketConfig
+    getMarketConfig,
+    getCustomerType,
+    minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH
   } = options;
   const fetchImpl = fetchImplOption !== void 0 ? fetchImplOption : typeof fetch === "function" ? fetch.bind(globalThis) : null;
   const locationLike = getBrowserLocation(providedLocation);
@@ -276,20 +348,21 @@ 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;
   }
   const service = {
-    async getSearchChromeCopy() {
-      return {
-        placeholder: searchPlaceholder || DEFAULT_SEARCH_PLACEHOLDER,
-        inputAriaLabel: inputAriaLabel || DEFAULT_INPUT_ARIA_LABEL
-      };
-    },
     async fetchSuggestions(searchTerm) {
       const trimmedSearchTerm = String(searchTerm ?? "").trim();
-      if (!trimmedSearchTerm || !fetchImpl) {
+      if (!trimmedSearchTerm || trimmedSearchTerm.length < minimumSearchLength || !fetchImpl) {
         return {
           suggestions: [],
           didYouMean: [],
@@ -314,7 +387,8 @@ function createSearchService(options = {}) {
       const requestUrls = [`${suggestionsUrl}?${queryParams.toString()}`];
       const responsePayload = await fetchJsonFromCandidates(
         fetchImpl,
-        requestUrls
+        requestUrls,
+        resolveCustomerTypeHeaders(getCustomerType)
       );
       const suggestionsField = Array.isArray(responsePayload?.suggestions) ? responsePayload?.suggestions : [];
       const productField = Array.isArray(responsePayload?.product) ? responsePayload?.product : null;
@@ -346,33 +420,6 @@ function createSearchService(options = {}) {
       return stripLocalePrefix(targetPath, localeParts);
     },
     activateSuggestionAction(option) {
-      if (options.onSuggestionAction) {
-        const result = options.onSuggestionAction(option);
-        if (result instanceof Promise) {
-          result.then((handled) => {
-            if (!handled) {
-              const optionHref2 = resolveOptionHref(
-                option,
-                localeParts
-              );
-              if (!optionHref2) {
-                const optionQuery2 = option?.value ?? option?.label ?? option?.identifier ?? "";
-                service.submitProductSearch(
-                  String(optionQuery2)
-                );
-              }
-            }
-          }).catch((error) => {
-            console.error(
-              "Error in onSuggestionAction:",
-              error
-            );
-          });
-          return "action-pending";
-        } else if (result === true) {
-          return "action-handled";
-        }
-      }
       const optionHref = resolveOptionHref(option, localeParts);
       if (optionHref) {
         return stripLocalePrefix(optionHref, localeParts);
@@ -399,6 +446,35 @@ function createSearchService(options = {}) {
   return service;
 }
 
+// src/services/marketConfig.ts
+var fetchMarketConfig = async ({ country }) => {
+  const countryCode = String(country ?? "").trim().toUpperCase() || "US";
+  const configuration = await getConfiguration([EQUINOX_MARKETS_MAP], {
+    country: countryCode,
+    ...getEnvironmentCode() ? { environment: getEnvironmentCode() } : {},
+    clientId: DEFAULT_EQUINOX_CLIENT_ID,
+    shoppingContext: STOREFRONT_SHOPPING_CONTEXT
+  });
+  return configuration?.[EQUINOX_MARKETS_MAP] ?? null;
+};
+
+// src/utils/gtmConstants.ts
+var SEARCH_GTM_EVENTS = {
+  CHAT_ENTRY_POINT: "Begin_chat",
+  PRODUCT_SEARCH: "ProductSearch"};
+var SEARCH_GTM_SEARCH_TYPES = {
+  SEMANTIC: "semantic search"};
+var SEARCH_GTM_USER_STATUS = {
+  GUEST: "guest",
+  LOGGED_IN: "logged_in"
+};
+var GTM_FALLBACK_NA = "NA";
+
+// src/utils/navigationTarget.ts
+function toNavigationTarget(path) {
+  return /^https?:\/\//i.test(path) ? { type: "external", url: path } : { type: "internal", path };
+}
+
 // src/utils/catalogHelpers.ts
 var CART_DISABLED_PRODUCT_STATUSES = /* @__PURE__ */ new Set([
   "discontinued",
@@ -414,9 +490,6 @@ var CART_DISABLED_PRODUCT_STATUSES = /* @__PURE__ */ new Set([
 function normalizeProductStatusValue(value) {
   return String(value ?? "").trim().toLowerCase().replace(/\s+/g, "");
 }
-function isSellableProductStatus(productStatus) {
-  return normalizeProductStatusValue(productStatus) === "sellable";
-}
 function resolveSkuStatusValues(suggestionOption) {
   return [
     suggestionOption["productStatus"],
@@ -661,14 +734,6 @@ function getVisibleSuggestions(opts) {
   }
   return opts.suggestions;
 }
-function getSeeMoreResultsPayload(query, totalResultsCount, suggestions) {
-  return {
-    query,
-    source: "autocomplete-footer",
-    totalResultsCount,
-    visibleResultsCount: suggestions.length
-  };
-}
 
 // src/hooks/useSearchSuggestions.ts
 function normalizeSuggestionsResponse(response) {
@@ -826,26 +891,6 @@ function useSearchSuggestions({
   };
 }
 
-// src/utils/gtmConstants.ts
-var SEARCH_GTM_EVENTS = {
-  CHAT_ENTRY_POINT: "Begin_chat",
-  SEARCH_TYPE: "Search_Type",
-  PRODUCT_SEARCH: "ProductSearch",
-  ERROR_POPUP: "Error_popup"
-};
-var SEARCH_GTM_SEARCH_TYPES = {
-  SEMANTIC: "semantic search",
-  AI_AGENT: "AI agent"
-};
-var SEARCH_GTM_USER_STATUS = {
-  GUEST: "guest",
-  LOGGED_IN: "logged_in"
-};
-var IS_AUTHENTICATED_KEY = "IsAuthenticated";
-var ACCOUNT_TYPE_KEY = "accountType";
-var NUSKIN_ACCOUNT_DATA_KEY = "nuskin.account.data";
-var GTM_FALLBACK_NA = "NA";
-
 // src/utils/commonUtils.ts
 var IS_BROWSER = typeof window !== "undefined";
 function toEventString(value, fallback = " ") {
@@ -853,84 +898,24 @@ function toEventString(value, fallback = " ") {
   const str = String(value).trim();
   return str.length > 0 ? str : fallback;
 }
-function getLocaleFromUrl(pathname) {
-  const path = pathname ?? (IS_BROWSER ? window.location.pathname : "");
-  const [country, language] = path.split("/").filter(Boolean);
-  if (!/^[a-z]{2}$/i.test(country ?? "") || !/^[a-z]{2}$/i.test(language ?? "")) {
-    return {};
-  }
-  return {
-    countryCode: country.toUpperCase(),
-    language: language.toLowerCase()
-  };
-}
-function safeParse(raw) {
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return raw;
-  }
-}
-function getLocalStorage(key) {
-  if (!IS_BROWSER) return void 0;
-  try {
-    const raw = window.localStorage.getItem(key);
-    return raw === null ? void 0 : safeParse(raw);
-  } catch {
-    return void 0;
-  }
-}
 
 // src/utils/gtmTracking.ts
-function readUserStatusFromStorage() {
-  const value = getLocalStorage(IS_AUTHENTICATED_KEY);
-  if (value === void 0) return void 0;
-  if (value === SEARCH_GTM_USER_STATUS.GUEST || value === SEARCH_GTM_USER_STATUS.LOGGED_IN) {
-    return value;
-  }
-  const isAuthenticated = value === true || typeof value === "string" && ["true", "1", "yes", "y"].includes(value.toLowerCase().trim());
-  return isAuthenticated ? SEARCH_GTM_USER_STATUS.LOGGED_IN : SEARCH_GTM_USER_STATUS.GUEST;
-}
-function readAccountTypeFromStorage() {
-  const value = getLocalStorage(ACCOUNT_TYPE_KEY);
-  return typeof value === "string" && value.trim().length > 0 ? value : void 0;
-}
-function readUserIdFromStorage() {
-  const raw = getLocalStorage(NUSKIN_ACCOUNT_DATA_KEY);
-  if (!raw || typeof raw !== "object") return void 0;
-  const user = raw.user;
-  if (!user || typeof user !== "object") return void 0;
-  const id = user.id;
-  return typeof id === "string" && id.trim().length > 0 ? id : void 0;
-}
 function resolveUserId(explicit) {
-  return toEventString(explicit ?? readUserIdFromStorage(), GTM_FALLBACK_NA);
+  return toEventString(explicit, GTM_FALLBACK_NA);
 }
 function baseEventPayload(ctx) {
-  const urlLocale = getLocaleFromUrl();
-  const userStatus = ctx.userStatus ?? readUserStatusFromStorage();
-  const accountType = ctx.accountType ?? readAccountTypeFromStorage();
-  const resolvedUserStatus = userStatus ?? SEARCH_GTM_USER_STATUS.GUEST;
-  const documentTitle = IS_BROWSER && typeof document?.title === "string" ? document.title : void 0;
   return {
     Chat_ID: toEventString(ctx.chatId, GTM_FALLBACK_NA),
-    page_type: toEventString(
-      ctx.pageType ?? documentTitle,
-      GTM_FALLBACK_NA
-    ),
-    country_code: toEventString(
-      ctx.countryCode ?? urlLocale.countryCode,
-      GTM_FALLBACK_NA
-    ),
-    language: toEventString(
-      ctx.language ?? urlLocale.language,
-      GTM_FALLBACK_NA
-    ),
+    // TODO: COMX-3277 puts `page_type` in every event but defines no values. Send `NA` until
+    // the data team says what it should hold (perhaps the page path).
+    page_type: GTM_FALLBACK_NA,
+    country_code: toEventString(ctx.countryCode, GTM_FALLBACK_NA),
+    language: toEventString(ctx.language, GTM_FALLBACK_NA),
     user_status: toEventString(
-      resolvedUserStatus,
+      ctx.userStatus ?? SEARCH_GTM_USER_STATUS.GUEST,
       SEARCH_GTM_USER_STATUS.GUEST
     ),
-    account_type: toEventString(accountType, GTM_FALLBACK_NA)
+    account_type: toEventString(ctx.accountType, GTM_FALLBACK_NA)
   };
 }
 function serializeProductResults(productResultsData, productResults) {
@@ -963,15 +948,6 @@ function trackChatEntryPoint(ctx) {
     ...baseEventPayload(ctx)
   });
 }
-function trackSearchType(input) {
-  pushGtmEvent({
-    event: SEARCH_GTM_EVENTS.SEARCH_TYPE,
-    ...baseEventPayload(input),
-    id: resolveUserId(input.userId),
-    type: input.searchType ?? SEARCH_GTM_SEARCH_TYPES.SEMANTIC,
-    search_response: toEventString(input.searchResponse, GTM_FALLBACK_NA)
-  });
-}
 function trackProductSearch(input) {
   pushGtmEvent({
     event: SEARCH_GTM_EVENTS.PRODUCT_SEARCH,
@@ -984,14 +960,6 @@ function trackProductSearch(input) {
     )
   });
 }
-function trackErrorPopup(input) {
-  pushGtmEvent({
-    event: SEARCH_GTM_EVENTS.ERROR_POPUP,
-    ...baseEventPayload(input),
-    id: resolveUserId(input.userId),
-    search_type: input.searchType ?? SEARCH_GTM_SEARCH_TYPES.SEMANTIC
-  });
-}
 
 // src/utils/nuiSearchGate.ts
 var NUI_SEARCH_FLAG = "enableNuiSearch";
@@ -1148,7 +1116,7 @@ function uniqueRecentSearches(queries) {
     return true;
   });
 }
-function ProductSearch({
+function CommerceSearchView({
   isOpen,
   onClose,
   service,
@@ -1156,9 +1124,7 @@ function ProductSearch({
   isAuthenticated,
   agent,
   logo,
-  cancelLabel,
-  fallbackImageUrl,
-  copy,
+  minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH,
   gtmContext
 }) {
   const [flag, setFlag] = useState(void 0);
@@ -1182,7 +1148,7 @@ function ProductSearch({
     suggestions,
     updateQuery
   } = search;
-  const enabled = isNuiSearchEnabled({ isAuthenticated, flag });
+  const enabled = agent !== void 0 && isNuiSearchEnabled({ isAuthenticated, flag });
   const items = getVisibleSuggestions({
     didYouMean,
     suggestions
@@ -1213,9 +1179,7 @@ function ProductSearch({
   }, [isOpen, clearQuery]);
   const navigateTo = useCallback(
     (path) => {
-      if (!path || path === "action-handled" || path === "action-pending") {
-        return;
-      }
+      if (!path) return;
       navigate(path);
       close();
     },
@@ -1270,6 +1234,10 @@ function ProductSearch({
     (value) => {
       const term = value.trim();
       if (!term) return;
+      if (term.length < minimumSearchLength) {
+        runSearch(term);
+        return;
+      }
       const route = decide(term);
       if (route === "wait") {
         setPendingTerm(term);
@@ -1277,7 +1245,7 @@ function ProductSearch({
       }
       act(term, route);
     },
-    [act, decide]
+    [act, decide, minimumSearchLength, runSearch]
   );
   const latest = useRef({ act, decide });
   latest.current = { act, decide };
@@ -1356,9 +1324,6 @@ function ProductSearch({
       isOpen,
       onClose: close,
       logo,
-      ...cancelLabel === void 0 ? {} : { cancelLabel },
-      ...fallbackImageUrl === void 0 ? {} : { fallbackImageUrl },
-      ...copy === void 0 ? {} : { copy },
       input: {
         value: query,
         onChange: updateQuery,
@@ -1380,7 +1345,7 @@ function ProductSearch({
         onSelect: handleRecentSelect,
         onClear: handleClearRecent
       },
-      agentPanel: handoff === null ? void 0 : /* @__PURE__ */ jsx(
+      agentPanel: handoff === null || agent === void 0 ? void 0 : /* @__PURE__ */ jsx(
         NuiAgentPanel,
         {
           agent,
@@ -1397,7 +1362,69 @@ function ProductSearch({
     }
   );
 }
+var GUEST = "guest";
+function CommerceSearch({
+  isOpen,
+  onClose,
+  navigate,
+  customer,
+  country,
+  language,
+  logo
+}) {
+  const [hasOpened, setHasOpened] = useState(false);
+  useEffect(() => {
+    if (isOpen) setHasOpened(true);
+  }, [isOpen]);
+  const { minimumSearchLength, agent } = useCommerceSearchConfig({
+    country,
+    language,
+    enabled: hasOpened
+  });
+  const customerTypeRef = useRef(GUEST);
+  customerTypeRef.current = customer.isAuthenticated ? customer.accountType ?? GUEST : GUEST;
+  const service = useMemo(
+    () => createSearchService({
+      country,
+      language,
+      locale: `${country.toUpperCase()}-${language.toLowerCase()}`,
+      getMarketConfig: fetchMarketConfig,
+      minimumSearchLength,
+      getCustomerType: () => customerTypeRef.current
+    }),
+    [country, language, minimumSearchLength]
+  );
+  const navigateToPath = useCallback(
+    (path) => navigate(toNavigationTarget(path)),
+    [navigate]
+  );
+  const { isAuthenticated, accountType, userId } = customer;
+  const gtmContext = useMemo(
+    () => ({
+      countryCode: country,
+      language,
+      userStatus: isAuthenticated ? SEARCH_GTM_USER_STATUS.LOGGED_IN : SEARCH_GTM_USER_STATUS.GUEST,
+      ...isAuthenticated && accountType ? { accountType } : {},
+      ...isAuthenticated && userId ? { userId } : {}
+    }),
+    [country, language, isAuthenticated, accountType, userId]
+  );
+  return /* @__PURE__ */ jsx(
+    CommerceSearchView,
+    {
+      isOpen,
+      onClose,
+      service,
+      navigate: navigateToPath,
+      isAuthenticated,
+      ...agent ? { agent } : {},
+      logo,
+      minimumSearchLength,
+      gtmContext
+    }
+  );
+}
 
-export { CATALOG_SUGGESTIONS_PATH, DEBOUNCE_MS, DEFAULT_SEARCH_PATH, DEFAULT_SUGGESTION_PAGE, DEFAULT_SUGGESTION_SIZE, MAX_VISIBLE_SUGGESTIONS, NUI_SEARCH_FLAG, ProductSearch, RECENT_SEARCHES_DEFAULT_LIMIT, RECENT_SEARCHES_PREFIX, SEARCH_GTM_EVENTS, SEARCH_GTM_SEARCH_TYPES, SEARCH_GTM_USER_STATUS, SEARCH_PLACEHOLDER, STOREFRONT_SHOPPING_CONTEXT, SUBMIT_WAIT_TIMEOUT_MS, TRIGGER_PLACEHOLDER, createSearchService, decideSearchRoute, getImageFromProperty, getIngredientTerms, getLocaleFromUrl, getSeeMoreResultsPayload, getVisibleSuggestions, isCartActionDisabled, isNuiSearchEnabled, isSellableProductStatus, isSuggestionDisabled, mapCatalogProductToSuggestion, normalizeDidYouMean, pushGtmEvent, resolveApiGatewayPath, resolveNuiSearchFlag, resolveSuggestionImageSrc, trackChatEntryPoint, trackErrorPopup, trackProductSearch, trackSearchType, useSearchSuggestions };
+export { CommerceSearch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map