@nuskin/react-search-sdk 1.0.1-code-cleanup.1 → 1.0.1

package/README.md

@@ -1,12 +1,12 @@
-# @nuskin/react-search-sdk
+# @nuskin/react-search-sdk
 
-The search experience for the NuSkin storefront: typeahead and recent searches over the Equinox
+The search experience for the Nu Skin storefront: typeahead and recent searches over the Equinox
 catalog, and the NUi agent when a signed-in shopper searches for something with no products.
 
 A host renders one component, `CommerceSearch`, and gives it the market, who the customer is, how to
 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
+comes from `@nuskin/react-search-components` and the agent from
 `@nuskin/react-nui-chat-sdk`.
 
 ## Requirements

package/dist/index.d.mts

@@ -16,8 +16,8 @@ type NavigationTarget = {
 /**
  * The account types the suggestions API distinguishes, sent as `X-Customer-Type`.
  *
- * TODO: this set is a best guess from the values the storefront sends. Confirm what the
- * suggestions API accepts, experimentally, once the search runs against it.
+ * TODO: PA-1254 validates this set, which is a best guess from the values the storefront sends,
+ * against the storefront's customer types and what the suggestions API accepts.
  */
 type CustomerAccountType = 'guest' | 'Brand Affiliate' | 'Retail Customer' | 'Preferred Customer/Member';
 /** Who is searching. */
@@ -58,6 +58,6 @@ interface CommerceSearchProps {
  * 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.
  */
-declare function CommerceSearch({ isOpen, onClose, navigate, customer, country, language, logo, }: Readonly<CommerceSearchProps>): ReactElement | null;
+declare function CommerceSearch(props: Readonly<CommerceSearchProps>): ReactElement | null;
 
 export { CommerceSearch, type CommerceSearchCustomer, type CommerceSearchProps, type CustomerAccountType, type NavigationTarget };

package/dist/index.d.ts

@@ -16,8 +16,8 @@ type NavigationTarget = {
 /**
  * The account types the suggestions API distinguishes, sent as `X-Customer-Type`.
  *
- * TODO: this set is a best guess from the values the storefront sends. Confirm what the
- * suggestions API accepts, experimentally, once the search runs against it.
+ * TODO: PA-1254 validates this set, which is a best guess from the values the storefront sends,
+ * against the storefront's customer types and what the suggestions API accepts.
  */
 type CustomerAccountType = 'guest' | 'Brand Affiliate' | 'Retail Customer' | 'Preferred Customer/Member';
 /** Who is searching. */
@@ -58,6 +58,6 @@ interface CommerceSearchProps {
  * 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.
  */
-declare function CommerceSearch({ isOpen, onClose, navigate, customer, country, language, logo, }: Readonly<CommerceSearchProps>): ReactElement | null;
+declare function CommerceSearch(props: Readonly<CommerceSearchProps>): ReactElement | null;
 
 export { CommerceSearch, type CommerceSearchCustomer, type CommerceSearchProps, type CustomerAccountType, type NavigationTarget };

package/dist/index.js

@@ -3,11 +3,11 @@
 var react = require('react');
 var configurationSdk = require('@nuskin/configuration-sdk');
 var reactSearchComponents = require('@nuskin/react-search-components');
+var jsxRuntime = require('react/jsx-runtime');
 var reactNuiChatSdk = require('@nuskin/react-nui-chat-sdk');
 require('@nuskin/react-nui-chat-sdk/styles.css');
 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 }; }
 
@@ -180,25 +180,38 @@ function useSearchPanelCopy({
 }
 
 // src/services/localeParts.ts
-function normalizeLocaleParts({
+var TWO_LETTERS = /^[A-Za-z]{2}$/;
+function marketProblem(country, language) {
+  const countryText = String(country ?? "").trim();
+  const languageText = String(language ?? "").trim();
+  if (TWO_LETTERS.test(countryText) && TWO_LETTERS.test(languageText)) {
+    return void 0;
+  }
+  return `the market is not valid (country ${JSON.stringify(countryText)}, language ${JSON.stringify(languageText)}): each must be two letters, for example US and en`;
+}
+function isValidMarket(country, language) {
+  return marketProblem(country, language) === void 0;
+}
+function createLocaleParts({
   country,
-  language,
-  locale
+  language
 }) {
-  const normalizedCountry = String(country ?? "").trim().toUpperCase();
-  const normalizedLanguage = String(language ?? "").trim().toLowerCase();
-  const normalizedLocale = String(locale ?? "").trim() || "UNKNOWN";
+  const problem = marketProblem(country, language);
+  if (problem) throw new Error(problem);
+  const normalizedCountry = country.trim().toUpperCase();
+  const normalizedLanguage = language.trim().toLowerCase();
   return {
-    country: normalizedCountry || "UNKNOWN",
-    language: normalizedLanguage || "unknown",
-    locale: normalizedLocale
+    country: normalizedCountry,
+    language: normalizedLanguage,
+    locale: `${normalizedCountry}-${normalizedLanguage}`
   };
 }
-function toCatalogLocale(localeParts) {
-  const language = String(localeParts.language ?? "en").toLowerCase();
-  const country = String(localeParts.country ?? "US").toUpperCase();
+function toCatalogLocale({ country, language }) {
   return `${language}_${country}`;
 }
+function toPathPrefix({ country, language }) {
+  return `/${country.toLowerCase()}/${language}`;
+}
 
 // src/services/catalogRequest.ts
 function resolveApiGatewayPath(apiGatewayPath, apiName = STOREFRONT_SHOPPING_CONTEXT) {
@@ -241,12 +254,21 @@ async function resolveCatalogRequestConfig({
   getMarketConfig
 }) {
   const marketConfig = getMarketConfig ? await getMarketConfig({ locationLike, country }) ?? null : null;
-  return {
-    suggestionsUrl: buildCatalogSuggestionsUrl(
-      resolveCatalogApiBaseUrl(marketConfig)
-    ),
-    storeId: resolveCatalogStoreId(marketConfig)
-  };
+  const suggestionsUrl = buildCatalogSuggestionsUrl(
+    resolveCatalogApiBaseUrl(marketConfig)
+  );
+  if (!suggestionsUrl) {
+    throw new Error(
+      `no suggestions API for market ${country}: the market configuration has no gateway`
+    );
+  }
+  const storeId = resolveCatalogStoreId(marketConfig);
+  if (!storeId) {
+    throw new Error(
+      `no suggestions API for market ${country}: the market configuration has no store`
+    );
+  }
+  return { suggestionsUrl, storeId };
 }
 function resolveCustomerTypeHeaders(getCustomerType) {
   const customerType = getCustomerType?.()?.trim();
@@ -291,7 +313,7 @@ function getSessionStorage(providedStorage) {
   return null;
 }
 function getRecentHeaderSearchesStorageKey(localeParts) {
-  const { country, language, locale } = normalizeLocaleParts(localeParts);
+  const { country, language, locale } = localeParts;
   return `${RECENT_SEARCHES_PREFIX}:${locale}:${country}:${language}`;
 }
 function getRecentHeaderSearches(localeParts, storage) {
@@ -354,13 +376,14 @@ function buildSearchResultsPath(query, localeParts) {
     /%2D/gi,
     "-"
   );
-  const country = localeParts.country.toLowerCase();
-  const language = localeParts.language.toLowerCase();
-  return `/${country}/${language}${DEFAULT_SEARCH_PATH}/${encodedQuery}`;
+  return `${toPathPrefix(localeParts)}${DEFAULT_SEARCH_PATH}/${encodedQuery}`;
 }
+var SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 function normalizeOptionUrl(rawValue) {
   if (typeof rawValue !== "string") return "";
-  return rawValue.trim();
+  const value = rawValue.trim();
+  if (!value || value.startsWith("/") || SCHEME.test(value)) return value;
+  return `/${value}`;
 }
 function safeDecodeURIComponent(value) {
   try {
@@ -390,16 +413,14 @@ function slugifyPathSegment(value) {
 function buildProductSlugPath(slugValue, localeParts) {
   const slug = slugifyPathSegment(slugValue);
   if (!slug) return "";
-  const country = String(localeParts.country ?? "US").toLowerCase();
-  const language = String(localeParts.language ?? "en").toLowerCase();
-  return `/${country}/${language}/product/${slug}`;
+  return `${toPathPrefix(localeParts)}/product/${slug}`;
 }
 function isNavigableUrl(value) {
   if (!value) return false;
   return value.startsWith("/") || /^https?:\/\//i.test(value);
 }
 function stripLocalePrefix(path, localeParts) {
-  const prefix = `/${localeParts.country.toLowerCase()}/${localeParts.language.toLowerCase()}`;
+  const prefix = toPathPrefix(localeParts);
   return path.startsWith(prefix) ? path.slice(prefix.length) || "/" : path;
 }
 function resolveOptionHref(option, localeParts) {
@@ -453,26 +474,20 @@ function getBrowserLocation(providedLocation) {
     return window.location;
   return null;
 }
-function resolveFetch(fetchImplOption) {
-  if (fetchImplOption !== void 0) return fetchImplOption;
-  return typeof fetch === "function" ? fetch.bind(globalThis) : null;
-}
-function createSearchService(options = {}) {
+function createSearchService(options) {
   const {
     fetchImpl: fetchImplOption,
     location: providedLocation,
     storage: providedStorage,
     country,
     language,
-    locale,
     getMarketConfig,
     getCustomerType,
     minimumSearchLength = MINIMUM_SEARCH_CHAR_LENGTH
   } = options;
-  const fetchImpl = resolveFetch(fetchImplOption);
   const locationLike = getBrowserLocation(providedLocation);
   const storage = getSessionStorage(providedStorage);
-  const localeParts = normalizeLocaleParts({ country, language, locale });
+  const localeParts = createLocaleParts({ country, language });
   let catalogRequestConfigPromise = null;
   function loadCatalogRequestConfig() {
     if (!catalogRequestConfigPromise) {
@@ -494,13 +509,12 @@ function createSearchService(options = {}) {
   const service = {
     async fetchSuggestions(searchTerm) {
       const trimmedSearchTerm = String(searchTerm ?? "").trim();
-      if (!trimmedSearchTerm || trimmedSearchTerm.length < minimumSearchLength || !fetchImpl) {
+      if (!trimmedSearchTerm || trimmedSearchTerm.length < minimumSearchLength) {
         return emptySuggestions();
       }
       const { suggestionsUrl, storeId } = await loadCatalogRequestConfig();
-      if (!suggestionsUrl || !storeId) return emptySuggestions();
       const responsePayload = await fetchJson(
-        fetchImpl,
+        fetchImplOption ?? fetch.bind(globalThis),
         buildSuggestionsRequestUrl({
           suggestionsUrl,
           searchTerm: trimmedSearchTerm,
@@ -554,7 +568,7 @@ function createSearchService(options = {}) {
 
 // src/services/marketConfig.ts
 var fetchMarketConfig = async ({ country }) => {
-  const countryCode = String(country ?? "").trim().toUpperCase() || "US";
+  const countryCode = country.trim().toUpperCase();
   const configuration = await getConfiguration([EQUINOX_MARKETS_MAP], {
     country: countryCode,
     ...getEnvironmentCode() ? { environment: getEnvironmentCode() } : {},
@@ -577,14 +591,25 @@ var SEARCH_GTM_USER_STATUS = {
 var GTM_FALLBACK_NA = "NA";
 
 // src/utils/navigationTarget.ts
+var EXTERNAL_URL = /^https?:\/\//i;
+var INTERNAL_PATH = /^\/(?![/\\])[^\t\n\r]*$/;
 function toNavigationTarget(path) {
-  return /^https?:\/\//i.test(path) ? { type: "external", url: path } : { type: "internal", path };
+  if (EXTERNAL_URL.test(path)) return { type: "external", url: path };
+  if (INTERNAL_PATH.test(path)) return { type: "internal", path };
+  return void 0;
 }
 
 // src/utils/productEnvironment.ts
-var PRODUCT_ENVIRONMENTS = ["dev", "test", "prod"];
+var PRODUCT_ENVIRONMENTS = {
+  dev: true,
+  test: true,
+  prod: true
+};
+function isProductEnvironment(code) {
+  return Object.keys(PRODUCT_ENVIRONMENTS).includes(code);
+}
 function toProductEnvironment(environmentCode) {
-  return environmentCode && PRODUCT_ENVIRONMENTS.includes(environmentCode) ? environmentCode : void 0;
+  return environmentCode !== void 0 && isProductEnvironment(environmentCode) ? environmentCode : void 0;
 }
 function getProductEnvironment() {
   try {
@@ -593,6 +618,47 @@ function getProductEnvironment() {
     return void 0;
   }
 }
+var NOTHING = () => void 0;
+function CommerceSearchUnavailable({
+  isOpen,
+  onClose,
+  country,
+  language,
+  logo
+}) {
+  react.useEffect(() => {
+    console.error(
+      `[search] Search is unavailable: ${marketProblem(country, language)}`
+    );
+  }, [country, language]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSearchComponents.SearchPanel,
+    {
+      isOpen,
+      onClose,
+      copy: SEARCH_PANEL_COPY_EN,
+      logo,
+      input: { value: "", onChange: NOTHING, onSubmit: NOTHING },
+      suggestions: {
+        items: [],
+        loading: false,
+        showNoResults: false,
+        showDidYouMean: false,
+        hasMore: false,
+        query: "",
+        onSelect: NOTHING,
+        onRunAction: NOTHING,
+        onSeeMore: NOTHING
+      },
+      recentSearches: {
+        items: [],
+        onSelect: NOTHING,
+        onClear: NOTHING
+      },
+      agentPanel: /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: "Search is unavailable right now." })
+    }
+  );
+}
 
 // src/utils/nuiSearchGate.ts
 var NUI_SEARCH_FLAG = "enableNuiSearch";
@@ -1076,6 +1142,7 @@ function useSearchSuggestions({
     [enabled, service, resetSuggestionsState, settle]
   );
   react.useEffect(() => {
+    latestRequestId.current += 1;
     if (!enabled) {
       resetSuggestionsState();
       return void 0;
@@ -1083,7 +1150,6 @@ function useSearchSuggestions({
     if (fetchDebounced.current) {
       clearTimeout(fetchDebounced.current);
     }
-    latestRequestId.current += 1;
     fetchDebounced.current = setTimeout(() => {
       void runFetch(query);
     }, DEBOUNCE_MS);
@@ -1365,11 +1431,11 @@ function useHandoff({
     onUnavailableRef.current = onUnavailable;
   });
   react.useEffect(() => {
-    let cancelled = false;
+    let canceled = false;
     let timer;
     const startedAt = Date.now();
     const tryOpen = () => {
-      if (cancelled) return;
+      if (canceled) return;
       const handle = getSalesAIHandle();
       if (handle) {
         handle.open({
@@ -1389,7 +1455,7 @@ function useHandoff({
     };
     tryOpen();
     return () => {
-      cancelled = true;
+      canceled = true;
       if (timer !== void 0) clearTimeout(timer);
     };
   }, [query]);
@@ -1617,7 +1683,22 @@ function CommerceSearchView({
   );
 }
 var GUEST = "guest";
-function CommerceSearch({
+function CommerceSearch(props) {
+  if (!isValidMarket(props.country, props.language)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommerceSearchUnavailable,
+      {
+        isOpen: props.isOpen,
+        onClose: props.onClose,
+        country: props.country,
+        language: props.language,
+        logo: props.logo
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ValidMarketSearch, { ...props });
+}
+function ValidMarketSearch({
   isOpen,
   onClose,
   navigate,
@@ -1645,7 +1726,6 @@ function CommerceSearch({
     () => createSearchService({
       country,
       language,
-      locale: `${country.toUpperCase()}-${language.toLowerCase()}`,
       getMarketConfig: fetchMarketConfig,
       minimumSearchLength,
       getCustomerType: () => customerTypeRef.current
@@ -1653,7 +1733,17 @@ function CommerceSearch({
     [country, language, minimumSearchLength]
   );
   const navigateToPath = react.useCallback(
-    (path) => navigate(toNavigationTarget(path)),
+    (path) => {
+      const target = toNavigationTarget(path);
+      if (target) {
+        navigate(target);
+      } else {
+        console.warn(
+          "[search] Not navigating to a path the SDK does not recognize:",
+          path
+        );
+      }
+    },
     [navigate]
   );
   const { isAuthenticated, accountType, userId } = customer;