@depict-ai/ui 3.0.6 → 3.0.8

package/server/latest/index.d.ts

@@ -2,7 +2,7 @@ import { ColsAtSize, Display, ModernDisplay, Amazing_Slider, Node_Array, report,
 import { JSX, Signal, Accessor, Setter } from "solid-js";
 import { SearchFilter, SortModel, SearchRequestV3 } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
+import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
 import { ProductListing, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
 import { ProductListingResponseV3 } from "@depict-ai/types/api/ProductListingResponseV3";
 import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.6";
+export const version = "3.0.8";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -40,11 +40,15 @@ type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends u
 type DisplayTransformerAlwaysThereData = {
   merchant: string;
   market: string;
+  locale: string;
 };
 type CanBePromiseWrapped<T> = T | Promise<T>;
 export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
   page_url: string;
 })[] : T[K] };
+type ProductListingWithAncestors = ProductListing & {
+  ancestors: Ancestors;
+};
 /**
  * DisplayTransformers supersede pageURLCreator
  * DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
@@ -53,7 +57,7 @@ export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDispla
   products?: (options: DisplayTransformerAlwaysThereData & {
     displays: InputDisplay[];
   }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
-  categories?: <T extends ProductListing | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
+  categories?: <T extends ProductListingWithAncestors | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
     data: T[];
   }) => CanBePromiseWrapped<(T & {
     page_url: string;
@@ -825,7 +829,11 @@ type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
 type ProductListingResponseAfterDisplayTransformer = { [K in keyof ProductListingResponseV3]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV3[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
-type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponse]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponse[K] };
+type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponseWithQuicklinksAndBreadcrumbs]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponseWithQuicklinksAndBreadcrumbs[K] };
+type GetListingResponseWithQuicklinksAndBreadcrumbs = Omit<GetListingResponse, "siblings" | "ancestors" | "children"> & {
+  quick_links: ProductListingWithAncestors[];
+  breadcrumbs: ProductListingWithAncestors[];
+};
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -957,7 +965,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   category_title: typeof CategoryTitle | typeof embedded_num_products;
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1109,7 +1117,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.8";
 const $fbbadcb080ad1d4a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return $i7OB2$ssr($fbbadcb080ad1d4a$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("width", $i7OB2$escape(props.width_, true) ?? 14, false) + $i7OB2$ssrAttribute("height", $i7OB2$escape(props.height_, true) ?? 26, false));
@@ -4389,6 +4389,65 @@ function $e5014ccd0b76d9f4$export$967e966fca9515e(api_response) {
 // Why not use const enum? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/9223#note_1675965260
 const $c20599a0d81d953a$export$74ee7529ce0f8a00 = "listingId";
 const $c20599a0d81d953a$export$5aae649db1b959fc = "externalId";
+
+/**
+ * Converts a v3 API response into something that has quick_links and breadcrumbs that behave as in v2 instead of ancestors, children and siblings, but gives every quicklink and breadcrumb's transformer the ancestors of the listing they are for.
+ */
+async function $23f4eb8487f328d9$export$d9792230b7c0203e({
+  input_data_: {
+    ancestors: ancestors,
+    children: children,
+    siblings: siblings,
+    ...clonedInputData
+  },
+  category_transformer_ = v => v.data,
+  merchant_:
+  // in case no display transformer just pass the data through, so we don't break
+  merchant_,
+  market_: market_,
+  locale_: locale_
+}) {
+  const breadcrumbs = [];
+  const clonedAncestors = [...ancestors];
+  while (clonedAncestors.length) {
+    const ancestor = clonedAncestors.pop();
+    if (!ancestor.show_in_breadcrumbs) continue;
+    breadcrumbs.push({
+      ...ancestor,
+      ancestors: [...clonedAncestors]
+    });
+  }
+  breadcrumbs.reverse();
+  const quicklinksIsChildren = children.length;
+  const quickLinks = (quicklinksIsChildren ? children : siblings).filter(({
+    show_in_quicklinks: show_in_quicklinks
+  }) => show_in_quicklinks).map(productListing => {
+    const ancestorsForUs = [...ancestors];
+    if (quicklinksIsChildren) ancestorsForUs.push({
+      ...clonedInputData
+    });
+    return {
+      ...productListing,
+      ancestors: ancestorsForUs
+    };
+  });
+  const [transformedBreadcrumbs, transformedQuickLinks] = await Promise.all([category_transformer_({
+    merchant: merchant_,
+    market: market_,
+    locale: locale_,
+    data: breadcrumbs
+  }), category_transformer_({
+    merchant: merchant_,
+    market: market_,
+    locale: locale_,
+    data: quickLinks
+  })]);
+  return {
+    ...clonedInputData,
+    breadcrumbs: transformedBreadcrumbs,
+    quick_links: transformedQuickLinks
+  };
+}
 const $7fa23e2a0079eca4$var$v3_base_url = (0, $i7OB2$base_url) + "/v3/";
 const $7fa23e2a0079eca4$var$search_base_url = $7fa23e2a0079eca4$var$v3_base_url + "search/";
 class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
@@ -4414,20 +4473,32 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
   };
   #get_metadata;
   #get_session_id;
-  async #run_url_creator_for_suggest(merchant, market, response) {
+  async #run_url_creator_for_suggest(merchant, market, locale, response) {
     const category_transformer = this.display_transformers?.categories;
     if (!category_transformer) return response;
+    const incoming_suggestions = response.suggestions;
+    const type_to_transform = "listing";
     // find category suggestions, run thing with them, and then replace them
-    const category_suggestions = response.suggestions.filter(suggestion => suggestion.type === "listing");
-    const transformed_category_suggestions = await category_transformer({
+    const category_suggestions = incoming_suggestions.filter(suggestion => suggestion.type === type_to_transform);
+    const transformed_suggestions = [...(await category_transformer({
       market: market,
       merchant: merchant,
+      locale: locale,
       data: [...category_suggestions]
-    });
-    response.suggestions = transformed_category_suggestions;
+    }))];
+    // Then add-back query suggestions at their original indices
+    for (let i = 0; i < incoming_suggestions.length; i++) {
+      const item = incoming_suggestions[i];
+      if (item.type === type_to_transform) continue;
+      transformed_suggestions.splice(i, 0, item);
+    }
+    response.suggestions = transformed_suggestions;
     return response;
   }
-  async #run_display_transformers_for_rest(merchant, market, input_data) {
+  /**
+  * rest = everything except query suggestions
+  */
+  async #run_display_transformers_for_rest(merchant, market, locale, input_data) {
     const {
       display_transformers: display_transformers
     } = this;
@@ -4443,25 +4514,24 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
       const transformed_displays = await product_transformer({
         merchant: merchant,
         market: market,
+        locale: locale,
         displays: [...displays]
       });
       input_data.displays = transformed_displays;
     }
-    if (category_transformer) for (const key of ["breadcrumbs", "quick_links"]) {
-      const category_display_array = input_data[key];
-      if (!category_display_array) continue;
-      const transformed_category_displays = await category_transformer({
-        merchant: merchant,
-        market: market,
-        data: [...category_display_array]
-      });
-      input_data[key] = transformed_category_displays;
-    }
     if (content_search_links?.length && content_result_transformer) input_data.content_search_links = await content_result_transformer({
       merchant: merchant,
       market: market,
+      locale: locale,
       data: [...content_search_links]
     });
+    if (input_data.ancestors) return await $23f4eb8487f328d9$export$d9792230b7c0203e({
+      input_data_: input_data,
+      category_transformer_: category_transformer,
+      merchant_: merchant,
+      market_: market,
+      locale_: locale
+    });
     return input_data;
   }
   async #cached_request({
@@ -4498,7 +4568,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
         let result;
         try {
           const unmodified_result = await api_response.json();
-          result = await this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, unmodified_result);
+          result = await this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, input_req_.locale, unmodified_result);
         } catch (e) {
           $i7OB2$dwarn("displayTransformer or json decoding failed", e);
           break return_successfully;
@@ -4548,7 +4618,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
       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.merchant, input_req.market, decoded_json);
+        return await this.#run_url_creator_for_suggest(input_req.merchant, input_req.market, input_req.locale, decoded_json);
       } catch (e) {
         $i7OB2$dwarn("displayTransformer failed", e);
       }
@@ -4584,13 +4654,12 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
       fallback_response_: () => ({
         listing_id: "",
         listing_type: "category",
-        "title": "",
-        "description": "string",
-        "replace_meta_tags": true,
-        "slug": "",
-        "updated_at": new Date().toISOString(),
-        "breadcrumbs": [],
-        "quick_links": [],
+        title: "",
+        slug: "",
+        show_in_breadcrumbs: false,
+        show_in_quicklinks: false,
+        breadcrumbs: [],
+        quick_links: [],
         failed: true
       }),
       method_: "GET"
@@ -6757,7 +6826,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   })));
   const available_filters_ = $i7OB2$createMemo(() => plp_products_()?.filters);
   const title = $i7OB2$createMemo(() => plp_meta()?.title);
-  const crumb_data_ = $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title);
+  const crumb_data_ = $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta);
   const quicklinks_data_ = $i7OB2$createMemo(() => plp_meta()?.quick_links);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $i7OB2$createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $i7OB2$createSignal();
@@ -6986,31 +7055,16 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
 /**
  * Adds the current page as last breadcrumb to the breadcrumb trail
  */
-function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title) {
+function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta) {
   const href_accessor = $i7OB2$use_href_accessor();
   return $i7OB2$createMemo(() => {
     const api_value = plp_meta()?.breadcrumbs;
     if (!api_value) return api_value;
-    return [...api_value, {
-      get listing_id() {
-        return plp_meta().listing_id;
-      },
-      get title() {
-        return title();
-      },
+    return [...api_value, $i7OB2$mergeProps1(plp_meta(), {
       get page_url() {
         return href_accessor();
-      },
-      get slug() {
-        return plp_meta().slug;
-      },
-      get listing_type() {
-        return plp_meta().listing_type;
-      },
-      get external_id() {
-        return plp_meta().external_id;
       }
-    }];
+    })];
   });
 }
 function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
@@ -7589,7 +7643,7 @@ function $897bd4a76f611b38$export$d757d54550ebfb3d({
   category_suggestion_: category_suggestion_,
   router_: router_
 }) {
-  const parentTitle = $i7OB2$createMemo(() => category_suggestion_().breadcrumbs.at(-1)?.title);
+  const parentTitle = $i7OB2$createMemo(() => category_suggestion_().ancestors.at(-1)?.title);
   return $i7OB2$ssr($897bd4a76f611b38$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("href", $i7OB2$escape(category_suggestion_().page_url, true), false), $i7OB2$escape(category_suggestion_().title), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return parentTitle();
@@ -8052,7 +8106,7 @@ function $7ad3a93cbe6fa208$export$a146ac6fa8346a25({
   currently_showing_suggestions_[1](value => {
     value[0] = $i7OB2$createMemo(() => previous_searches_().map(result => ({
       type: (0, $a0eb8b431ec1f87b$export$3cf9497e790da491),
-      title: result,
+      query: result,
       suggestions_result_id: "history"
     })));
     return value;
@@ -8115,10 +8169,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
   submit_query_: submit_query_,
   get_content_results_: get_content_results_
 }) {
-  const queries_memo = $i7OB2$createMemo(() => suggestion_memo_().filter(({
-    type: type,
-    title: title
-  }) => type === (0, $a0eb8b431ec1f87b$export$3cf9497e790da491) && !filtered_previous_searches_().includes(title) // don't show the ones we already show from the history
+  const queries_memo = $i7OB2$createMemo(() => suggestion_memo_().filter(suggestion => suggestion.type === (0, $a0eb8b431ec1f87b$export$3cf9497e790da491) && !filtered_previous_searches_().includes(suggestion.query) // don't show the ones we already show from the history
   ) // + limit to three query suggestions, API sends more sometimes
   .slice(0, 3));
   const not_queries_memo = $i7OB2$createMemo(() => {
@@ -8134,15 +8185,15 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
     const is_query = $i7OB2$createMemo(() => input_obj().type === (0, $a0eb8b431ec1f87b$export$3cf9497e790da491));
     const href_with_changed_params_accessor = $i7OB2$createMemo(() => is_query() ? $a36cbc4f68bfd590$export$91c3b6774e8be0f5({
       param_: search_query_url_param_name_,
-      value_: $i7OB2$createMemo(() => input_obj().title),
+      value_: $i7OB2$createMemo(() => input_obj().query),
       url_transformer_: url_transformer_
     }) : undefined);
     const href = $i7OB2$createMemo(() => is_query() ? href_with_changed_params_accessor()() : input_obj().page_url);
     const is_selected = $i7OB2$createMemo(() => read_selected_index_()?.[0] === autocomplete_data_index && read_selected_index_()?.[1] === index);
     const parent_title_if_exists = $i7OB2$createMemo(() => {
       const item = input_obj();
-      if (!("breadcrumbs" in item)) return;
-      return item.breadcrumbs.at(-1)?.title;
+      if (!("ancestors" in item)) return;
+      return item.ancestors.at(-1)?.title;
     });
     return $i7OB2$ssr($cea52f6b24092f05$var$_tmpl$, $i7OB2$ssrHydrationKey(), `suggestion ${is_selected() ? "selected" : ""} ${is_history ? "history" : ""} ${$i7OB2$escape($i7OB2$escape("type-" + input_obj().type, true), true)}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false), is_query() ? $i7OB2$escape([$i7OB2$createComponent((0, $i7OB2$Show), {
       when: is_history,
@@ -8155,7 +8206,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
     }), $i7OB2$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
       class_: "value line-clamp",
       get whole_text_to_display_() {
-        return $i7OB2$createMemo(() => input_obj().title);
+        return $i7OB2$createMemo(() => input_obj().query);
       },
       searching_for_value_: searching_for_value_
     })]) : $i7OB2$escape([parent_title_if_exists() ? $i7OB2$ssr($cea52f6b24092f05$var$_tmpl$4, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
@@ -8224,7 +8275,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
               return (() => {
                 const mapped_history_results = $i7OB2$createMemo(() => filtered_previous_searches_().map(result => ({
                   type: (0, $a0eb8b431ec1f87b$export$3cf9497e790da491),
-                  title: result,
+                  query: result,
                   suggestions_result_id: "history" // worthless to fix typing
                 })));
 
@@ -8384,16 +8435,16 @@ function $15f380f0ce2812cc$var$actual_navigation_working_on_fake_data({
     // update text field value if needed
     if (selected_entry?.type == "query") {
       const {
-        title: title
+        query: query
       } = selected_entry;
       $i7OB2$runWithOwner(owner, block_updating_for_one_change);
-      set_search_field_value(title);
+      set_search_field_value(query);
       $i7OB2$runWithOwner(owner, () => override_on_enter_for_this_entry(e => {
         // Open search query in new tab on cmd+enter
         // If it's not cmd+enter, pressing enter will just submit the value that was put into the field while selecting with the arrow keys ;)
         const url = new URL(location);
         url_transformer_?.(url);
-        url.searchParams.set(search_query_param_name_, title);
+        url.searchParams.set(search_query_param_name_, query);
         return $92a48aea6a9364d8$export$1efe1013da60d0e4(e, url.href);
       }));
     } else if (selected_entry?.type == "listing" || selected_entry?.type === "content") $i7OB2$runWithOwner(owner, () => override_on_enter_for_this_entry(e => {