@depict-ai/ui 1.1.4 → 1.2.0

package/dist/client/module.js

@@ -1,8 +1,8 @@
-import {add_to_version_info as $gco9i$add_to_version_info, observer as $gco9i$observer, catchify as $gco9i$catchify, fetch_recs as $gco9i$fetch_recs, snakeCasifyObject as $gco9i$snakeCasifyObject, instant_exec_on_suspect_history_change as $gco9i$instant_exec_on_suspect_history_change, base_url as $gco9i$base_url, dlog as $gco9i$dlog, get_depict_id as $gco9i$get_depict_id, get_user_id as $gco9i$get_user_id, get_session_id as $gco9i$get_session_id, make_url_with_query_params as $gco9i$make_url_with_query_params, fetch_retry as $gco9i$fetch_retry, add_version_query_params as $gco9i$add_version_query_params, sort_obj as $gco9i$sort_obj, report as $gco9i$report, javascript_media_query as $gco9i$javascript_media_query, standard_price_format as $gco9i$standard_price_format, make_random_classname as $gco9i$make_random_classname, n_col_styling_with_dist as $gco9i$n_col_styling_with_dist, useExpandingContainer as $gco9i$useExpandingContainer, Amazing_Slider as $gco9i$Amazing_Slider, slider_snap_css as $gco9i$slider_snap_css, slider_fading_factory as $gco9i$slider_fading_factory, hsl_to_rgb as $gco9i$hsl_to_rgb, relative_luminance_from_rgb as $gco9i$relative_luminance_from_rgb, base64_encode_unicode as $gco9i$base64_encode_unicode, base64_decode_unicode as $gco9i$base64_decode_unicode, queueMacroTask as $gco9i$queueMacroTask, is_debug as $gco9i$is_debug, dwarn as $gco9i$dwarn, Layout as $gco9i$Layout, async_iterable_ipns as $gco9i$async_iterable_ipns, make_asyncIterable_exiter as $gco9i$make_asyncIterable_exiter, href_change_ipns as $gco9i$href_change_ipns, ContainedImage as $gco9i$ContainedImage, buildThresholdList as $gco9i$buildThresholdList, deparallelize_no_drop as $gco9i$deparallelize_no_drop, insert_surfaces as $gco9i$insert_surfaces} from "@depict-ai/utilishared";
+import {add_to_version_info as $gco9i$add_to_version_info, observer as $gco9i$observer, catchify as $gco9i$catchify, fetch_recs as $gco9i$fetch_recs, snakeCasifyObject as $gco9i$snakeCasifyObject, instant_exec_on_suspect_history_change as $gco9i$instant_exec_on_suspect_history_change, base_url as $gco9i$base_url, dlog as $gco9i$dlog, get_depict_id as $gco9i$get_depict_id, get_user_id as $gco9i$get_user_id, get_session_id as $gco9i$get_session_id, sort_obj as $gco9i$sort_obj, fetch_retry as $gco9i$fetch_retry, add_version_query_params as $gco9i$add_version_query_params, dwarn as $gco9i$dwarn, make_url_with_query_params as $gco9i$make_url_with_query_params, report as $gco9i$report, javascript_media_query as $gco9i$javascript_media_query, standard_price_format as $gco9i$standard_price_format, make_random_classname as $gco9i$make_random_classname, n_col_styling_with_dist as $gco9i$n_col_styling_with_dist, useExpandingContainer as $gco9i$useExpandingContainer, Amazing_Slider as $gco9i$Amazing_Slider, slider_snap_css as $gco9i$slider_snap_css, slider_fading_factory as $gco9i$slider_fading_factory, hsl_to_rgb as $gco9i$hsl_to_rgb, relative_luminance_from_rgb as $gco9i$relative_luminance_from_rgb, base64_encode_unicode as $gco9i$base64_encode_unicode, base64_decode_unicode as $gco9i$base64_decode_unicode, queueMacroTask as $gco9i$queueMacroTask, is_debug as $gco9i$is_debug, Layout as $gco9i$Layout, async_iterable_ipns as $gco9i$async_iterable_ipns, make_asyncIterable_exiter as $gco9i$make_asyncIterable_exiter, href_change_ipns as $gco9i$href_change_ipns, ContainedImage as $gco9i$ContainedImage, buildThresholdList as $gco9i$buildThresholdList, deparallelize_no_drop as $gco9i$deparallelize_no_drop, insert_surfaces as $gco9i$insert_surfaces} from "@depict-ai/utilishared";
 import {createRoot as $gco9i$createRoot, createSignal as $gco9i$createSignal, getOwner as $gco9i$getOwner, runWithOwner as $gco9i$runWithOwner, onCleanup as $gco9i$onCleanup, createComputed as $gco9i$createComputed, createRenderEffect as $gco9i$createRenderEffect, createEffect as $gco9i$createEffect, untrack as $gco9i$untrack, batch as $gco9i$batch, createResource as $gco9i$createResource, createMemo as $gco9i$createMemo, Show as $gco9i$Show, createReaction as $gco9i$createReaction, Suspense as $gco9i$Suspense, on as $gco9i$on, ErrorBoundary as $gco9i$ErrorBoundary, For as $gco9i$For, Index as $gco9i$Index} from "solid-js";
 import {template as $gco9i$template, getNextElement as $gco9i$getNextElement, spread as $gco9i$spread, mergeProps as $gco9i$mergeProps, runHydrationEvents as $gco9i$runHydrationEvents, effect as $gco9i$effect, setAttribute as $gco9i$setAttribute, insert as $gco9i$insert, isServer as $gco9i$isServer, createComponent as $gco9i$createComponent, getNextMarker as $gco9i$getNextMarker, use as $gco9i$use, memo as $gco9i$memo, addEventListener as $gco9i$addEventListener, delegateEvents as $gco9i$delegateEvents, classList as $gco9i$classList, style as $gco9i$style, className as $gco9i$className, Dynamic as $gco9i$Dynamic} from "solid-js/web";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.1.4";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.2.0";
 
 
 
@@ -203,26 +203,77 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     #get_metadata;
     #get_user_id;
     #get_session_id;
-    constructor({ get_metadata: get_metadata , get_user_id: get_user_id , get_session_id: get_session_id  } = {}){
-        this.#get_metadata = get_metadata;
-        this.#get_user_id = get_user_id;
-        this.#get_session_id = get_session_id;
+    #guard_url_creator_length(expected, received) {
+        if (expected.length !== received.length) {
+            const e = new Error("Page URL creator returned wrong number of page URLs, got " + received.length + ", expected " + expected.length);
+            queueMicrotask(()=>{
+                throw e;
+            });
+            throw e;
+        }
     }
-    async suggest(input_req) {
-        const request = this.#add_ids_to_request(input_req);
-        const url = (0, $gco9i$make_url_with_query_params)($7fa23e2a0079eca4$var$search_base_url + "suggestions", request);
-        const results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(url));
-        attempt_to_return_api_response: {
-            if (!results) break attempt_to_return_api_response;
-            const decoded_json = await results.json();
-            if (!Array.isArray(decoded_json?.suggestions)) break attempt_to_return_api_response;
-            return decoded_json;
+    async #run_url_creator_for_suggest(merchant, market, response) {
+        if (!this.page_url_creator) return response;
+        // find category suggestions, run thing with them, and then replace them
+        const category_suggestions = response.suggestions.filter((suggestion)=>suggestion.type === "category");
+        const page_urls = await this.page_url_creator({
+            type: "categories",
+            market: market,
+            merchant: merchant,
+            data: [
+                ...category_suggestions
+            ]
+        });
+        this.#guard_url_creator_length(category_suggestions, page_urls);
+        while(page_urls.length)Object.assign(category_suggestions.pop(), page_urls.pop());
+        return response;
+    }
+    async #run_url_creator_for_rest(merchant1, market1, input_data) {
+        if (!this.page_url_creator) return input_data;
+        const displays = input_data.displays;
+        const breadcrumb = input_data.breadcrumb;
+        const quick_links = input_data.quick_links;
+        if (displays) {
+            const page_urls = await this.page_url_creator({
+                type: "products",
+                merchant: merchant1,
+                market: market1,
+                displays: [
+                    ...input_data.displays
+                ]
+            });
+            this.#guard_url_creator_length(displays, page_urls);
+            for(let i = 0; i < displays.length; i++){
+                const new_display_or_page_url = page_urls[i];
+                const old_display = displays[i];
+                if ("page_url" in new_display_or_page_url && Object.keys(new_display_or_page_url).length === 1) {
+                    // they only returned page_url, let's put it into the display
+                    const old_display_was_modern = "variant_index" in old_display;
+                    if (old_display_was_modern) {
+                        const variant_displays = old_display.variant_displays;
+                        for(let i = 0; i < variant_displays.length; i++)variant_displays[i].page_url = new_display_or_page_url.page_url;
+                    } else old_display.page_url = new_display_or_page_url.page_url;
+                } else // We got a whole new display, let's replace it
+                displays[i] = new_display_or_page_url;
+            }
         }
-        return {
-            "suggestions_request_id": "error",
-            "suggestions": [],
-            failed: true
-        };
+        for (const category_display_array of [
+            breadcrumb,
+            quick_links
+        ]){
+            if (!category_display_array) continue;
+            const page_urls = await this.page_url_creator({
+                type: "categories",
+                merchant: merchant1,
+                market: market1,
+                data: [
+                    ...category_display_array
+                ]
+            });
+            this.#guard_url_creator_length(category_display_array, page_urls);
+            for(let i = 0; i < category_display_array.length; i++)Object.assign(category_display_array[i], page_urls[i]);
+        }
+        return input_data;
     }
     async #cached_post_request(endpoint1, input_req, fallback_response) {
         const cache_obj = this.#get_cache_obj_for_endpoint(endpoint1);
@@ -239,66 +290,101 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
         let resolve_in_progress;
         cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
         try {
-            let search_results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
+            let api_response = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
                 method: "POST",
                 body: body
             });
             if ("query_id" in request && request.type === "collection") // FIXME: Remove. Backwards compatibility layer
             // This will retry the request without the collection type if the first request fails
             {
-                if (!search_results || search_results?.status === 404) {
+                if (!api_response || api_response?.status === 404) {
                     (0, $gco9i$dlog)("Fallback request for collections due to failure");
                     const fallback_body = JSON.parse(body);
                     delete fallback_body.type;
-                    search_results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
+                    api_response = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
                         method: "POST",
                         body: JSON.stringify(fallback_body)
                     });
                 }
             }
-            if (!search_results || search_results.status !== 200) {
-                const retval = fallback_response(input_req);
-                resolve_in_progress(retval);
-                return retval;
+            return_successfully: {
+                if (!api_response || api_response.status !== 200) break return_successfully;
+                let result;
+                try {
+                    const unmodified_result = await api_response.json();
+                    result = await this.#run_url_creator_for_rest(input_req.tenant, input_req.market, unmodified_result);
+                } catch (e) {
+                    (0, $gco9i$dwarn)("URL creator or json decoding failed", e);
+                    break return_successfully;
+                }
+                cache_obj.cache_[body] = new WeakRef(result);
+                resolve_in_progress(result);
+                setTimeout((0, $gco9i$catchify)(()=>{
+                    if (this.#supports_finalization_registry) cache_obj.finalization_registry_.register(result, body); // delete key from cache when value (WeakRefs) are collected
+                    else // delete things from cache after 5 minutes, so it doesn't get too heavy
+                    setTimeout((0, $gco9i$catchify)(()=>delete cache_obj.cache_[body]), 300000);
+                }), 60000 // cache values for at least 60 seconds
+                );
+                return result;
             }
-            const result = await search_results.json();
-            cache_obj.cache_[body] = new WeakRef(result);
-            resolve_in_progress(result);
-            setTimeout((0, $gco9i$catchify)(()=>{
-                if (this.#supports_finalization_registry) cache_obj.finalization_registry_.register(result, body); // delete key from cache when value (WeakRefs) are collected
-                else // delete things from cache after 5 minutes, so it doesn't get too heavy
-                setTimeout((0, $gco9i$catchify)(()=>delete cache_obj.cache_[body]), 300000);
-            }), 30000 // cache values for at least 30 seconds
-            );
-            return result;
+            // If we get here, the request failed
+            const retval = fallback_response(input_req);
+            resolve_in_progress(retval);
+            return retval;
         } finally{
             delete cache_obj.in_progress_[body];
         }
     }
+    constructor(options){
+        const { get_metadata: get_metadata , get_user_id: get_user_id , get_session_id: get_session_id , page_url_creator: page_url_creator  } = options ?? {};
+        this.#get_metadata = get_metadata;
+        this.#get_user_id = get_user_id;
+        this.#get_session_id = get_session_id;
+        this.page_url_creator = page_url_creator;
+    }
+    async suggest(input_req) {
+        const request = this.#add_ids_to_request(input_req);
+        const url = (0, $gco9i$make_url_with_query_params)($7fa23e2a0079eca4$var$search_base_url + "suggestions", request);
+        const results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(url));
+        attempt_to_return_api_response: {
+            if (!results) break attempt_to_return_api_response;
+            const decoded_json = await results.json();
+            if (!Array.isArray(decoded_json?.suggestions)) break attempt_to_return_api_response;
+            try {
+                return await this.#run_url_creator_for_suggest(input_req.tenant, input_req.market, decoded_json);
+            } catch (e) {
+                (0, $gco9i$dwarn)("URL creator failed", e);
+            }
+        }
+        return {
+            "suggestions_request_id": "error",
+            "suggestions": [],
+            failed: true
+        };
+    }
     async query(input_req) {
-        return await this.#cached_post_request($7fa23e2a0079eca4$var$search_base_url + "results", input_req, (request)=>({
+        return await this.#cached_post_request($7fa23e2a0079eca4$var$search_base_url + "results", input_req, ()=>({
                 "n_hits": 0,
-                "page": request.page ?? 1,
                 "displays": [],
-                "facets": [],
-                "suggestions": [],
+                "sorts": [],
+                "filters": [],
                 "search_request_id": "error",
                 failed: true
             }));
     }
     async list(input_req) {
-        return await this.#cached_post_request($7fa23e2a0079eca4$var$v2_base_url + "product-listing", input_req, (request)=>({
+        return await this.#cached_post_request($7fa23e2a0079eca4$var$v2_base_url + "product-listing", input_req, ()=>({
                 "n_hits": 0,
-                "page": request.page ?? 1,
                 "displays": [],
-                "facets": [],
-                "suggestions": [],
+                "sorts": [],
+                "filters": [],
+                "breadcrumb": [],
+                "quick_links": [],
                 "product_listing_request_id": "error",
                 failed: true
             }));
     }
     async get_recommended(input_req) {
-        // @ts-ignore ModernDisplay doesn't have arbitrary string access, and we'd like it to stay that way
         return await this.#cached_post_request($7fa23e2a0079eca4$var$search_base_url + "related", input_req, ()=>({
                 displays: []
             }));
@@ -1148,6 +1234,7 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({ plp_results_: plp_results_
             const record = records[i];
             const { target: target , intersectionRatio: intersectionRatio  } = record;
             const index_of_target = target_to_index_map.get(target);
+            if (index_of_target == undefined) return; // It seems like it can happen that we get IntersectionObserverEntries after the onCleanup function for a recommendation card has run, in Firefox. Probably a bug in Firefox? If I understood the bug correctly, this is a workaround.
             const is_in_set = currently_intersecting.has(index_of_target);
             if (intersectionRatio > 0) {
                 if (!is_in_set) currently_intersecting.add(index_of_target);
@@ -5067,23 +5154,30 @@ function $641bba2917fe862b$export$6e49da55e449af7c({ scroll_restoration_data_: [
         ]); // get rid of old data the browser saves the old state and will restore it later on
     };
     (0, $gco9i$createComputed)((0, $gco9i$catchify)(()=>{
-        const r = get_last_result_in_viewport_();
-        if (r == undefined || r <= 0 || r == Infinity) return;
+        const last_result = get_last_result_in_viewport_();
+        if (last_result == undefined || last_result <= 0 || last_result == Infinity) return;
+        if (isNaN(last_result)) {
+            // if last_result is NaN there's an issue somewhere, but if we store something here that's not a number the for loop further down will break, and we won't be able to load results at all, so let's just continue
+            (0, $gco9i$report)(new Error("last_result is NaN, this should not happen"), "error", {
+                last_result: last_result
+            });
+            return;
+        }
         // We can push to history.state max 100 times per 30 seconds (Safari) so we have to debounce/cap this at 300ms for aggressive scrolling.
         // Pushing to history.state right before we leave the page (onunload etc.) is unreliable, as it has to occur *before* the next page is pushed to history.
-        // Instead we delay our push with a timeout set to the next acceptable interval to the previous one, when necessary
+        // Instead, we delay our push with a timeout set to the next acceptable interval to the previous one, when necessary
         const now = +new Date();
         const time_since_last_ran = now - last_time_history_changed;
         if (time_since_last_ran > $641bba2917fe862b$var$max_history_change_frequency) {
             // If the interval to the previous push is already long enough, it's fine to push the next value directly.
-            set_min_results_loaded(r);
+            set_min_results_loaded(last_result);
             last_time_history_changed = now;
             // Even though the interval has passed, there could still be a delayed push timeout in flight (browser can delay timeouts at will).
             // We've already written the guaranteed-to-be-freshest value so we can just cancel it.
             clearTimeout(timeout);
             return;
         }
-        set_to_later = r;
+        set_to_later = last_result;
         // If a delayed push timeout is already running, just changing the value that will be pushed is sufficient
         if (timeout) return;
         timeout = setTimeout((0, $gco9i$catchify)(()=>{
@@ -5960,7 +6054,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
     set on_navigation(new_function) {
         this.#router.on_navigation_ = new_function;
     }
-    constructor({ api: api , on_navigation: on_navigation , ...props_on_class }){
+    constructor({ api: api , on_navigation: on_navigation , page_url_creator: page_url_creator , ...props_on_class }){
         const owner = (0, $gco9i$getOwner)() || (0, $gco9i$createRoot)(()=>(0, $gco9i$getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $gco9i$runWithOwner)(owner, ()=>{
             if ($961b5c64bef4662f$export$f34314aa9505732e.#has_been_constructed && !(0, $gco9i$isServer)) // on the server we can't write stuff to history.state anyway so can have multiple
@@ -5988,7 +6082,9 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
                 quicklinks_signal_: (0, $gco9i$createSignal)(),
                 i18n_: i18n_,
                 reset_history_state_: reset_history_state_,
-                depict_api_: api ?? new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)(),
+                depict_api_: api ?? new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)({
+                    page_url_creator: page_url_creator
+                }),
                 router_: this.#router,
                 selected_filters_: selected_filters_,
                 current_sorting_: current_sorting_,
@@ -8389,7 +8485,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     #modal_open_signal = (0, $gco9i$createSignal)(false);
     static #has_been_constructed = false;
     #router = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation");
-    constructor({ search_query_url_param_name: search_query_url_param_name_ = "query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
+    constructor({ search_query_url_param_name: search_query_url_param_name_ = "query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , page_url_creator: page_url_creator , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
     disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal: bottom_distance_under_modal , render_instant_card: render_instant_card , ...props_on_class }){
         const owner = (0, $gco9i$getOwner)() || (0, $gco9i$createRoot)(()=>(0, $gco9i$getOwner)()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
         (0, $gco9i$runWithOwner)(owner, ()=>{
@@ -8418,7 +8514,9 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                 if (get_search_query_updating_blocked()) return previous_value;
                 else return raw_search_query_accessor();
             });
-            const depict_api_ = api ?? new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)();
+            const depict_api_ = api ?? new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)({
+                page_url_creator: page_url_creator
+            });
             const previous_searches = (0, $21f51c14cb3f586f$export$84bba84a7b837187)(get_search_query_);
             const [, set_search_showing_recommendation_rows] = state_.search_showing_recommendation_rows;
             const after_submit_ = ()=>set_search_showing_recommendation_rows((0, $172e1b898d457050$export$1c8c715550dc689d)); // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state