@constructor-io/constructorio-ui-autocomplete 1.23.26 → 1.23.29

package/lib/types/utils/features.d.ts

@@ -0,0 +1,9 @@
+import { AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript';
+declare const AUTOSUGGEST_CUSTOM_UI_VARIANTS: string[];
+export type CustomAutosuggestUiVariant = (typeof AUTOSUGGEST_CUSTOM_UI_VARIANTS)[number];
+export declare function getFeatures(request: Partial<AutocompleteRequestType>): {
+    featureDisplaySearchSuggestionImages: boolean;
+    featureDisplaySearchSuggestionResultCounts: boolean;
+    featureDisplayZeroStateRecommendations: boolean;
+};
+export {};

package/lib/types/utils/format.d.ts

@@ -0,0 +1,5 @@
+type CamelToStartCase = (camelCaseString: string) => string;
+export declare const camelToStartCase: CamelToStartCase;
+export declare const toKebabCase: (str: string) => string;
+export declare const stringifyWithDefaults: (obj: any) => string;
+export {};

package/lib/types/{utils.d.ts → utils/helpers.d.ts}

@@ -1,6 +1,6 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { AutocompleteRequestType, Nullable, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { Item, Section, UserDefinedSection, SectionsData, Translations, PodData } from './types';
+import { ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { Item, Section, UserDefinedSection, SectionsData, Translations, PodData } from '../types';
 export type GetItemPosition = (args: {
     item: Item;
     items: Item[];
@@ -8,16 +8,7 @@ export type GetItemPosition = (args: {
     index: number;
     sectionId: string;
 };
-export declare function getFeatures(request: Partial<AutocompleteRequestType>): {
-    featureDisplaySearchSuggestionImages: boolean;
-    featureDisplaySearchSuggestionResultCounts: boolean;
-    featureDisplayZeroStateRecommendations: boolean;
-};
 export declare const getItemPosition: GetItemPosition;
-type CamelToStartCase = (camelCaseString: string) => string;
-export declare const camelToStartCase: CamelToStartCase;
-export declare const toKebabCase: (str: string) => string;
-export declare function isTrackingRequestSent(trackingRequestUrl: string): any;
 export declare function clearConstructorRequests(): void;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare const getStoryParams: (storyCode: any, templateCode: any, importCode: any) => {
@@ -34,15 +25,10 @@ export declare const functionStrings: {
     onSubmit: string;
     renderItem: string;
 };
-export declare const stringifyWithDefaults: (obj: any) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
 export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionsResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>, podsData: Record<string, PodData>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
-export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
 export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];
 export declare const translate: (word: string, translations?: Translations) => any;
-export declare const trackSearchSubmit: (cioClient: any, term: any, autocompleteData?: {}) => void;
-export declare const trackAutocompleteSelect: (cioClient: any, itemName: any, autocompleteData?: any) => void;
 export declare const logger: (error: any) => void;
-export {};

package/lib/types/utils/storage.d.ts

@@ -0,0 +1,5 @@
+export declare const getStorageEngine: (scope: any) => Storage;
+export declare const storageGetItem: (key: any) => string | null;
+export declare const storageGetArray: (key: any) => any;
+export declare const storageSetItem: (key: any, value: any) => void | null;
+export declare const storageRemoveItem: (key: any) => void | null;

package/lib/types/utils/tracking.d.ts

@@ -0,0 +1,7 @@
+import { Nullable } from '@constructor-io/constructorio-client-javascript';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript/lib/types/constructorio';
+import { Section } from '../types';
+export declare function isTrackingRequestSent(trackingRequestUrl: string): any;
+export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
+export declare const trackSearchSubmit: (cioClient: any, term: any, autocompleteData?: {}) => void;
+export declare const trackAutocompleteSelect: (cioClient: any, itemName: any, autocompleteData?: any) => void;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.26";
+declare const _default: "1.23.29";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.23.26",
+  "version": "1.23.29",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/lib/cjs/utils.js

@@ -1,259 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.logger = exports.trackAutocompleteSelect = exports.trackSearchSubmit = exports.translate = exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.toKebabCase = exports.camelToStartCase = exports.getItemPosition = exports.getFeatures = void 0;
-const tslib_1 = require("tslib");
-const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
-// eslint-disable-next-line import/no-cycle
-const beaconUtils_1 = require("./beaconUtils");
-const typeGuards_1 = require("./typeGuards");
-const version_1 = tslib_1.__importDefault(require("./version"));
-function getFeatures(request) {
-    var _a, _b;
-    let featureDisplaySearchSuggestionImages = false;
-    let featureDisplaySearchSuggestionResultCounts = false;
-    let featureDisplayZeroStateRecommendations = true;
-    if (((_a = request === null || request === void 0 ? void 0 : request.features) === null || _a === void 0 ? void 0 : _a.custom_autosuggest_ui) === true) {
-        switch ((_b = request === null || request === void 0 ? void 0 : request.feature_variants) === null || _b === void 0 ? void 0 : _b.custom_autosuggest_ui) {
-            case 'custom_autosuggest_ui_result_count':
-                featureDisplaySearchSuggestionResultCounts = true;
-                break;
-            case 'custom_autosuggest_ui_image':
-                featureDisplaySearchSuggestionImages = true;
-                break;
-            case 'custom_autosuggest_ui_image_result_count':
-                featureDisplaySearchSuggestionImages = true;
-                featureDisplaySearchSuggestionResultCounts = true;
-                break;
-            case 'custom_autosuggest_ui_disable_recommendations_in_zero_state':
-                featureDisplayZeroStateRecommendations = false;
-                break;
-            default:
-                break;
-        }
-    }
-    return {
-        featureDisplaySearchSuggestionImages,
-        featureDisplaySearchSuggestionResultCounts,
-        featureDisplayZeroStateRecommendations,
-    };
-}
-exports.getFeatures = getFeatures;
-const getItemPosition = ({ item, items }) => {
-    var _a;
-    const index = items.findIndex((itemInFlatList) => (itemInFlatList === null || itemInFlatList === void 0 ? void 0 : itemInFlatList.id) === (item === null || item === void 0 ? void 0 : item.id));
-    const sectionId = (_a = items[index]) === null || _a === void 0 ? void 0 : _a.section;
-    return { sectionId, index };
-};
-exports.getItemPosition = getItemPosition;
-const camelToStartCase = (camelCaseString) => camelCaseString
-    // insert a space between lower & upper
-    .replace(/([a-z])([A-Z])/g, '$1 $2')
-    // space before last upper in a sequence followed by lower
-    .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
-    // uppercase the first letter
-    .replace(/([a-zA-Z])/, (str) => str.toUpperCase());
-exports.camelToStartCase = camelToStartCase;
-const toKebabCase = (str) => str
-    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    .replace(/[\s_]+/g, '-')
-    .toLowerCase();
-exports.toKebabCase = toKebabCase;
-function isTrackingRequestSent(trackingRequestUrl) {
-    var _a, _b;
-    // eslint-disable-next-line
-    const trackingRequestsQueue = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a._constructorio_requests;
-    return (trackingRequestsQueue &&
-        ((_b = JSON.parse(trackingRequestsQueue)) === null || _b === void 0 ? void 0 : _b.some((request) => { var _a; return (_a = request === null || request === void 0 ? void 0 : request.url) === null || _a === void 0 ? void 0 : _a.includes(trackingRequestUrl); })));
-}
-exports.isTrackingRequestSent = isTrackingRequestSent;
-function clearConstructorRequests() {
-    var _a;
-    // eslint-disable-next-line
-    if ((_a = window.localStorage) === null || _a === void 0 ? void 0 : _a._constructorio_requests) {
-        window.localStorage.removeItem('_constructorio_requests');
-    }
-}
-exports.clearConstructorRequests = clearConstructorRequests;
-// Function to emulate pausing between interactions
-function sleep(ms) {
-    // eslint-disable-next-line
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-exports.sleep = sleep;
-// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-const getStoryParams = (storyCode, templateCode, importCode) => {
-    const code = `
-${importCode}
-${storyCode}
-${templateCode}
-`;
-    return {
-        docs: {
-            source: {
-                code,
-                language: 'jsx',
-                format: true,
-                type: 'code',
-            },
-        },
-    };
-};
-exports.getStoryParams = getStoryParams;
-exports.functionStrings = {
-    onSubmit: `(submitEvent) => console.dir(submitEvent)`,
-    renderItem: `({ item, query, getItemProps }) => (
-                      <div {...getItemProps(item)}>
-                          <a href={item.data?.url}>
-                            <h3>{item.value}</h3>
-                            <img src={item.data?.image_url} alt={item.value} />
-                          </a>
-                          <p>{item.data?.price}</p>
-                      </div>
-                    )`,
-};
-const stringifyWithDefaults = (obj) => {
-    // Stringify non-function values normally. Add a template block for functions to be replaced later
-    let res = JSON.stringify(obj, (key, value) => (value instanceof Function ? `${key}_CODE` : value), '  ');
-    // Replace template blocks with function strings
-    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
-        const [codePlaceholder, key] = match;
-        const functionString = exports.functionStrings[key];
-        if (functionString) {
-            res = res.replaceAll(codePlaceholder, functionString);
-        }
-        else {
-            console.error(`Function string for ${key} not found.`); // eslint-disable-line
-        }
-    });
-    return res;
-};
-exports.stringifyWithDefaults = stringifyWithDefaults;
-const disableStoryActions = (story) => {
-    // eslint-disable-next-line
-    story.parameters.actions = { argTypesRegex: null };
-};
-exports.disableStoryActions = disableStoryActions;
-const getCioClient = (apiKey, cioJsClientOptions) => {
-    if (apiKey && typeof window !== 'undefined') {
-        const cioClient = new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-autocomplete-${version_1.default}` }, cioJsClientOptions));
-        // eslint-disable-next-line no-console
-        cioClient.tracker.on('error', (error) => console.error(error));
-        return cioClient;
-    }
-    return null;
-};
-exports.getCioClient = getCioClient;
-const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs, podsData) => {
-    const activeSectionsWithData = [];
-    const getSectionData = (sectionConfig) => {
-        const { type } = sectionConfig;
-        let sectionData;
-        switch (type) {
-            case 'recommendations':
-                sectionData = sectionsResults[sectionConfig.podId];
-                break;
-            case 'custom':
-                // Copy id from data to the top level
-                sectionData = sectionConfig.data.map((item) => {
-                    var _a;
-                    return (Object.assign(Object.assign({}, item), { id: (item === null || item === void 0 ? void 0 : item.id) || ((_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id) }));
-                });
-                break;
-            default:
-                // Autocomplete
-                sectionData = sectionsResults[sectionConfig.indexSectionName];
-        }
-        return sectionData;
-    };
-    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
-        const sectionData = getSectionData(sectionConfig);
-        if (Array.isArray(sectionData)) {
-            const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
-            if (sectionConfig.type === 'recommendations') {
-                section.displayName =
-                    sectionConfig.displayName || podsData[sectionConfig.podId].displayName;
-            }
-            // If ref passed as part of `SectionConfiguration`, use it.
-            // Otherwise, use the ref from our library generated refs array
-            const userDefinedSectionRef = sectionConfig.ref;
-            const libraryGeneratedSectionRef = sectionsRefs.current[index];
-            section.ref = userDefinedSectionRef || libraryGeneratedSectionRef;
-            activeSectionsWithData.push(section);
-        }
-    });
-    return activeSectionsWithData;
-};
-exports.getActiveSectionsWithData = getActiveSectionsWithData;
-const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-exports.escapeRegExp = escapeRegExp;
-const trackRecommendationView = (target, activeSectionsWithData, cioClient) => {
-    if (target.dataset.cnstrcRecommendationsPodId) {
-        // Pull recommendations from activeSectionsWithData by podId surfaced on target
-        const recommendationSection = activeSectionsWithData.find((section) => (0, typeGuards_1.isRecommendationsSection)(section) &&
-            section.podId === target.dataset.cnstrcRecommendationsPodId);
-        const recommendationItems = recommendationSection === null || recommendationSection === void 0 ? void 0 : recommendationSection.data.map((item) => {
-            var _a, _b;
-            return ({
-                itemId: (_a = item.data) === null || _a === void 0 ? void 0 : _a.id,
-                itemName: item.value,
-                variationId: (_b = item.data) === null || _b === void 0 ? void 0 : _b.variation_id,
-            });
-        });
-        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationView({
-            podId: target.dataset.cnstrcRecommendationsPodId,
-            numResultsViewed: (recommendationItems === null || recommendationItems === void 0 ? void 0 : recommendationItems.length) || 0,
-            url: window.location.href,
-            section: target.dataset.cnstrcSection,
-            items: recommendationItems,
-        });
-    }
-};
-exports.trackRecommendationView = trackRecommendationView;
-const getItemsForActiveSections = (activeSectionsWithData) => {
-    const items = [];
-    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
-        if (config === null || config === void 0 ? void 0 : config.data) {
-            items.push(...config.data);
-        }
-    });
-    return items;
-};
-exports.getItemsForActiveSections = getItemsForActiveSections;
-const translate = (word, translations) => {
-    const localTranslations = {
-        in: 'in',
-        'show all results': 'show all results',
-    };
-    if (translations)
-        return translations[word];
-    return localTranslations[word] || word;
-};
-exports.translate = translate;
-const trackSearchSubmit = (cioClient, term, autocompleteData = {}) => {
-    cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackSearchSubmit(term, autocompleteData);
-    (0, beaconUtils_1.storageSetItem)(beaconUtils_1.CONSTANTS.SEARCH_TERM_STORAGE_KEY, term);
-    (0, beaconUtils_1.storeRecentSearch)(term, {});
-    (0, beaconUtils_1.storeRecentAction)(beaconUtils_1.CONSTANTS.SEARCH_SUBMIT);
-};
-exports.trackSearchSubmit = trackSearchSubmit;
-const trackAutocompleteSelect = (cioClient, itemName, autocompleteData = {}) => {
-    cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(itemName, autocompleteData);
-    if ((autocompleteData === null || autocompleteData === void 0 ? void 0 : autocompleteData.section) === 'Products') {
-        (0, beaconUtils_1.storageRemoveItem)(beaconUtils_1.CONSTANTS.SEARCH_TERM_STORAGE_KEY);
-    }
-};
-exports.trackAutocompleteSelect = trackAutocompleteSelect;
-const logger = (error) => {
-    var _a;
-    try {
-        if (typeof process !== 'undefined' && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.LOGGER)) {
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    }
-    catch (e) {
-        // process variable is not available and logger should not be active
-    }
-};
-exports.logger = logger;