@nuskin/react-search-sdk 1.0.1-code-cleanup.2 → 1.1.0-pa-1255.2

package/dist/index.d.mts

@@ -46,17 +46,24 @@ interface CommerceSearchProps {
     country: string;
     /** ISO 639-1 language, for example `en`. */
     language: string;
+    /**
+     * The client id the configuration service knows the host by. Without one the Configuration
+     * SDK uses its own (the run config's), and the search's plain suggestions fail where there is
+     * none, so a host that cannot rely on the run config should pass it.
+     */
+    clientId?: string;
     /** Shown at the top of the panel, for example the brand logo. */
     logo?: ReactNode;
 }
 /**
  * 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 (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.
+ * product catalog today, with the NUi agent taking over in the same panel when a shopper the
+ * configuration enables it for 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,
- * which NUi app to use, the panel's text and the analytics fields.
+ * The package works out the rest itself: the market's catalog lookup, the minimum search length
+ * and the number of suggestions, which NUi app to use and for whom, the panel's text and the
+ * analytics fields.
  */
 declare function CommerceSearch(props: Readonly<CommerceSearchProps>): ReactElement | null;
 

package/dist/index.d.ts

@@ -46,17 +46,24 @@ interface CommerceSearchProps {
     country: string;
     /** ISO 639-1 language, for example `en`. */
     language: string;
+    /**
+     * The client id the configuration service knows the host by. Without one the Configuration
+     * SDK uses its own (the run config's), and the search's plain suggestions fail where there is
+     * none, so a host that cannot rely on the run config should pass it.
+     */
+    clientId?: string;
     /** Shown at the top of the panel, for example the brand logo. */
     logo?: ReactNode;
 }
 /**
  * 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 (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.
+ * product catalog today, with the NUi agent taking over in the same panel when a shopper the
+ * configuration enables it for 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,
- * which NUi app to use, the panel's text and the analytics fields.
+ * The package works out the rest itself: the market's catalog lookup, the minimum search length
+ * and the number of suggestions, which NUi app to use and for whom, the panel's text and the
+ * analytics fields.
  */
 declare function CommerceSearch(props: Readonly<CommerceSearchProps>): ReactElement | null;
 

package/dist/index.js

@@ -23,36 +23,53 @@ var CATALOG_SUGGESTIONS_PATH = "/storefront/catalogs/search/suggestions";
 var RECENT_SEARCHES_PREFIX = "nuskin:header:recentSearches";
 var RECENT_SEARCHES_DEFAULT_LIMIT = 10;
 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 DEFAULT_MAX_SUGGESTIONS = 6;
+var MAX_SUGGESTIONS_CEILING = 20;
 var EQUINOX_MARKETS_MAP = "Equinox_Markets";
-var DEFAULT_EQUINOX_CLIENT_ID = "63056848d7532f9923f3d08cb48c423b";
+var COMMERCE_SEARCH_MAP = "Commerce_Search";
 
 // src/config/commerceSearchConfig.ts
 var COMMERCE_SEARCH_CONFIG_DEFAULTS = Object.freeze({
-  minimumSearchLength: MINIMUM_SEARCH_CHAR_LENGTH
+  minimumSearchLength: MINIMUM_SEARCH_CHAR_LENGTH,
+  maxSuggestions: DEFAULT_MAX_SUGGESTIONS,
+  agentEnabledFor: Object.freeze({
+    guest: false,
+    brandAffiliate: false,
+    preferredCustomer: false,
+    retailCustomer: false
+  })
 });
-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
+var FIELDS = {
+  minimumLength: "commerceSearchMinimumLength",
+  maxSuggestions: "commerceSearchMaxSuggestions",
+  agentAppKey: "commerceSearchAgentAppKey",
+  agentApiBaseUrl: "commerceSearchAgentApiBaseUrl",
+  enabledGuest: "commerceSearchAgentEnabledGuest",
+  enabledBrandAffiliate: "commerceSearchAgentEnabledBrandAffiliate",
+  enabledPreferredCustomer: "commerceSearchAgentEnabledPreferredCustomer",
+  enabledRetailCustomer: "commerceSearchAgentEnabledRetailCustomer"
 };
 function nonEmptyString(value) {
   return typeof value === "string" ? value.trim() : "";
 }
+function wholeNumber(value) {
+  const number = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+  return typeof number === "number" && Number.isInteger(number) ? number : void 0;
+}
+function positiveWholeNumber(value) {
+  const number = wholeNumber(value);
+  return number !== void 0 && number >= 1 ? number : void 0;
+}
 function normalizeCommerceSearchConfig(raw, { language } = {}) {
-  const minimumSearchLength = Number(raw?.minimumSearchLength);
-  const appKey = nonEmptyString(raw?.agent?.appKey);
-  const apiBaseUrl = nonEmptyString(raw?.agent?.apiBaseUrl);
+  const appKey = nonEmptyString(raw?.[FIELDS.agentAppKey]);
+  const apiBaseUrl = nonEmptyString(raw?.[FIELDS.agentApiBaseUrl]);
+  const maxSuggestions = positiveWholeNumber(raw?.[FIELDS.maxSuggestions]);
   return {
-    minimumSearchLength: Number.isInteger(minimumSearchLength) && minimumSearchLength >= 1 ? minimumSearchLength : COMMERCE_SEARCH_CONFIG_DEFAULTS.minimumSearchLength,
+    minimumSearchLength: positiveWholeNumber(raw?.[FIELDS.minimumLength]) ?? COMMERCE_SEARCH_CONFIG_DEFAULTS.minimumSearchLength,
+    maxSuggestions: maxSuggestions === void 0 ? COMMERCE_SEARCH_CONFIG_DEFAULTS.maxSuggestions : Math.min(maxSuggestions, MAX_SUGGESTIONS_CEILING),
     ...appKey && apiBaseUrl ? {
       agent: {
         appKey,
@@ -60,13 +77,36 @@ function normalizeCommerceSearchConfig(raw, { language } = {}) {
         ...language ? { language } : {}
       }
     } : {},
-    ...raw?.allowGuestAgent === true ? { allowGuestAgent: true } : {}
+    agentEnabledFor: {
+      guest: raw?.[FIELDS.enabledGuest] === true,
+      brandAffiliate: raw?.[FIELDS.enabledBrandAffiliate] === true,
+      preferredCustomer: raw?.[FIELDS.enabledPreferredCustomer] === true,
+      retailCustomer: raw?.[FIELDS.enabledRetailCustomer] === true
+    }
   };
 }
 async function fetchCommerceSearchConfig({
-  language
-} = {}) {
-  const raw = getEnvironmentCode() === "test" ? TEST_ENVIRONMENT_VALUES : {};
+  country,
+  language,
+  clientId
+}) {
+  const configuration = await getConfiguration([COMMERCE_SEARCH_MAP], {
+    country: country.trim().toUpperCase(),
+    ...clientId ? { clientId } : {}
+  });
+  const raw = configuration?.[COMMERCE_SEARCH_MAP];
+  if (!raw || Object.keys(raw).length === 0) {
+    throw new Error(
+      `the configuration service returned no ${COMMERCE_SEARCH_MAP} for market ${country}`
+    );
+  }
+  const hasKey = nonEmptyString(raw[FIELDS.agentAppKey]) !== "";
+  const hasUrl = nonEmptyString(raw[FIELDS.agentApiBaseUrl]) !== "";
+  if (hasKey !== hasUrl) {
+    console.warn(
+      `[search] The agent is half configured: ${FIELDS.agentAppKey} and ${FIELDS.agentApiBaseUrl} must both be set, or both empty. Using plain search.`
+    );
+  }
   return normalizeCommerceSearchConfig(raw, language ? { language } : {});
 }
 
@@ -74,30 +114,39 @@ async function fetchCommerceSearchConfig({
 function useCommerceSearchConfig({
   country,
   language,
-  enabled
+  clientId,
+  isOpen
 }) {
-  const [config, setConfig] = react.useState(
-    COMMERCE_SEARCH_CONFIG_DEFAULTS
-  );
+  const market = `${country}|${language}|${clientId ?? ""}`;
+  const [loaded, setLoaded] = react.useState(null);
+  const currentMarket = react.useRef(market);
   react.useEffect(() => {
-    if (!enabled) return void 0;
-    let isStale = false;
+    currentMarket.current = market;
+  }, [market]);
+  const reading = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen || loaded?.market === market || reading.current === market) {
+      return;
+    }
+    reading.current = market;
     fetchCommerceSearchConfig({
-      ...country ? { country } : {},
-      ...language ? { language } : {}
-    }).then((next) => {
-      if (!isStale) setConfig(next);
+      country,
+      language,
+      ...clientId ? { clientId } : {}
+    }).then((config) => {
+      if (currentMarket.current === market) {
+        setLoaded({ market, config });
+      }
     }).catch((error) => {
       console.warn(
         "[search] Could not load the product search configuration:",
         error
       );
+    }).finally(() => {
+      if (reading.current === market) reading.current = null;
     });
-    return () => {
-      isStale = true;
-    };
-  }, [enabled, country, language]);
-  return config;
+  }, [isOpen, market, loaded, country, language, clientId]);
+  return loaded?.market === market ? loaded.config : COMMERCE_SEARCH_CONFIG_DEFAULTS;
 }
 
 // src/copy/searchPanelCopy.ts
@@ -236,13 +285,14 @@ function buildCatalogSuggestionsUrl(apiBaseUrl) {
 function buildSuggestionsRequestUrl({
   suggestionsUrl,
   searchTerm,
+  size,
   storeId,
   localeParts
 }) {
   const queryParams = new URLSearchParams({
     searchTerm,
     page: String(DEFAULT_SUGGESTION_PAGE),
-    size: String(DEFAULT_SUGGESTION_SIZE),
+    size: String(size),
     locale: toCatalogLocale(localeParts),
     storeId
   });
@@ -483,7 +533,8 @@ function createSearchService(options) {
     language,
     getMarketConfig,
     getCustomerType,
-    minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH
+    minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH,
+    maxSuggestions = DEFAULT_MAX_SUGGESTIONS
   } = options;
   const locationLike = getBrowserLocation(providedLocation);
   const storage = getSessionStorage(providedStorage);
@@ -518,6 +569,7 @@ function createSearchService(options) {
         buildSuggestionsRequestUrl({
           suggestionsUrl,
           searchTerm: trimmedSearchTerm,
+          size: maxSuggestions,
           storeId,
           localeParts
         }),
@@ -567,12 +619,15 @@ function createSearchService(options) {
 }
 
 // src/services/marketConfig.ts
-var fetchMarketConfig = async ({ country }) => {
+var fetchMarketConfig = async ({
+  country,
+  clientId
+}) => {
   const countryCode = country.trim().toUpperCase();
   const configuration = await getConfiguration([EQUINOX_MARKETS_MAP], {
     country: countryCode,
     ...getEnvironmentCode() ? { environment: getEnvironmentCode() } : {},
-    clientId: DEFAULT_EQUINOX_CLIENT_ID,
+    ...clientId ? { clientId } : {},
     shoppingContext: STOREFRONT_SHOPPING_CONTEXT
   });
   return configuration?.[EQUINOX_MARKETS_MAP] ?? null;
@@ -690,29 +745,23 @@ function resolveNuiSearchFlag(env = {}) {
   return parseFlagValue(new URLSearchParams(search).get(NUI_SEARCH_FLAG)) ?? readCookieFlag(cookie);
 }
 function isNuiSearchEnabled({
-  isAuthenticated,
   flag,
-  allowGuests = false
+  enabledForCustomer
 }) {
-  return flag === true && (isAuthenticated === true || allowGuests);
+  return flag ?? enabledForCustomer;
 }
 
 // src/hooks/useNuiAgentGate.ts
 function useNuiAgentGate({
   hasAgent,
   isOpen,
-  isAuthenticated,
-  allowGuestAgent
+  enabledForCustomer
 }) {
   const [flag, setFlag] = react.useState(void 0);
   react.useEffect(() => {
     if (isOpen) setFlag(resolveNuiSearchFlag());
   }, [isOpen]);
-  return hasAgent && isNuiSearchEnabled({
-    isAuthenticated,
-    flag,
-    allowGuests: allowGuestAgent
-  });
+  return hasAgent && isNuiSearchEnabled({ flag, enabledForCustomer });
 }
 function uniqueRecentSearches(queries) {
   const seen = /* @__PURE__ */ new Set();
@@ -1046,7 +1095,7 @@ var FETCH_FAILED = {
   emptyFetched: true,
   failed: true
 };
-function toSettledResults(response) {
+function toSettledResults(response, maxSuggestions) {
   const { suggestions: allSuggestions, didYouMean } = normalizeSuggestionsResponse(response);
   if (didYouMean.length > 0) {
     return {
@@ -1061,18 +1110,19 @@ function toSettledResults(response) {
     resolveTotalResultsCount2(response, allSuggestions.length),
     allSuggestions.length
   );
-  const suggestions = allSuggestions.slice(0, MAX_VISIBLE_SUGGESTIONS);
+  const suggestions = allSuggestions.slice(0, maxSuggestions);
   return {
     suggestions,
     didYouMean,
-    hasMoreResults: total > MAX_VISIBLE_SUGGESTIONS,
+    hasMoreResults: total > maxSuggestions,
     emptyFetched: suggestions.length === 0,
     failed: false
   };
 }
 function useSearchSuggestions({
   service,
-  enabled = true
+  enabled = true,
+  maxSuggestions = DEFAULT_MAX_SUGGESTIONS
 }) {
   const [query, setQuery] = react.useState("");
   const [suggestions, setSuggestions] = react.useState([]);
@@ -1129,7 +1179,8 @@ function useSearchSuggestions({
       let results;
       try {
         results = toSettledResults(
-          await service.fetchSuggestions(trimmedQuery)
+          await service.fetchSuggestions(trimmedQuery),
+          maxSuggestions
         );
       } catch (error) {
         console.warn("[search] Could not load suggestions:", error);
@@ -1139,7 +1190,7 @@ function useSearchSuggestions({
       settle(results, trimmedQuery);
       setLoading(false);
     },
-    [enabled, service, resetSuggestionsState, settle]
+    [enabled, maxSuggestions, service, resetSuggestionsState, settle]
   );
   react.useEffect(() => {
     latestRequestId.current += 1;
@@ -1496,12 +1547,12 @@ function CommerceSearchView({
   onClose,
   service,
   navigate,
-  isAuthenticated,
   agent,
-  allowGuestAgent = false,
+  agentEnabledForCustomer,
   agentProducts,
   logo,
   minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH,
+  maxSuggestions = DEFAULT_MAX_SUGGESTIONS,
   gtmContext
 }) {
   const [handoff, setHandoff] = react.useState(null);
@@ -1509,6 +1560,7 @@ function CommerceSearchView({
   const [pendingTerm, setPendingTerm] = react.useState(null);
   const search = useSearchSuggestions({
     service,
+    maxSuggestions,
     enabled: isOpen && agentQuery === null
   });
   const {
@@ -1524,8 +1576,7 @@ function CommerceSearchView({
   const agentEnabled = useNuiAgentGate({
     hasAgent: agent !== void 0,
     isOpen,
-    isAuthenticated,
-    allowGuestAgent
+    enabledForCustomer: agentEnabledForCustomer
   });
   const { recentSearches, clearRecentSearches } = useRecentSearches({
     service,
@@ -1683,6 +1734,15 @@ function CommerceSearchView({
   );
 }
 var GUEST = "guest";
+var AGENT_SWITCH_FOR = {
+  guest: "guest",
+  "Brand Affiliate": "brandAffiliate",
+  "Retail Customer": "retailCustomer",
+  "Preferred Customer/Member": "preferredCustomer"
+};
+var AGENT_SWITCHES = new Map(
+  Object.entries(AGENT_SWITCH_FOR)
+);
 function CommerceSearch(props) {
   if (!isValidMarket(props.country, props.language)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1705,32 +1765,45 @@ function ValidMarketSearch({
   customer,
   country,
   language,
+  clientId,
   logo
 }) {
-  const [hasOpened, setHasOpened] = react.useState(false);
-  react.useEffect(() => {
-    if (isOpen) setHasOpened(true);
-  }, [isOpen]);
   const copy = useSearchPanelCopy({ language });
-  const { minimumSearchLength, agent, allowGuestAgent } = useCommerceSearchConfig({
+  const { minimumSearchLength, maxSuggestions, agent, agentEnabledFor } = useCommerceSearchConfig({
     country,
     language,
-    enabled: hasOpened
+    ...clientId ? { clientId } : {},
+    isOpen
   });
   const customerType = customer.isAuthenticated ? customer.accountType ?? GUEST : GUEST;
   const customerTypeRef = react.useRef(customerType);
   react.useEffect(() => {
     customerTypeRef.current = customerType;
   }, [customerType]);
+  const agentEnabledForCustomer = agentEnabledFor[AGENT_SWITCHES.get(customerType) ?? "guest"];
+  const getMarketConfig = react.useCallback(
+    (context) => fetchMarketConfig({
+      ...context,
+      ...clientId ? { clientId } : {}
+    }),
+    [clientId]
+  );
   const service = react.useMemo(
     () => createSearchService({
       country,
       language,
-      getMarketConfig: fetchMarketConfig,
+      getMarketConfig,
       minimumSearchLength,
+      maxSuggestions,
       getCustomerType: () => customerTypeRef.current
     }),
-    [country, language, minimumSearchLength]
+    [
+      country,
+      language,
+      getMarketConfig,
+      minimumSearchLength,
+      maxSuggestions
+    ]
   );
   const navigateToPath = react.useCallback(
     (path) => {
@@ -1773,13 +1846,13 @@ function ValidMarketSearch({
       onClose,
       service,
       navigate: navigateToPath,
-      isAuthenticated,
       ...agent ? { agent } : {},
-      ...allowGuestAgent ? { allowGuestAgent } : {},
+      agentEnabledForCustomer,
       ...agentProducts ? { agentProducts } : {},
       copy,
       logo,
       minimumSearchLength,
+      maxSuggestions,
       gtmContext
     }
   );