@askdialog/dialog-react 2.3.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/components/DialogSearch/searchDisplay.d.ts +1 -2
  3. package/dist/components/DialogSearch/useDialogSearch.d.ts +1 -1
  4. package/dist/dialog-react.css +1 -1
  5. package/dist/dialog-react.js +170 -179
  6. package/dist/dialog-react.umd.cjs +1 -1
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -140,7 +140,7 @@ Creates one search controller per hook instance and disposes it on unmount.
140
140
  - `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
141
141
  - `debounceMs` (number, optional) - Keystroke debounce (default: 250)
142
142
  - `hitsPerPage` (number, optional) - Results per page (default: 12)
143
- - `locale` (string, optional) - Locale forwarded to the search request
143
+ - `locale` (string, optional) - Storefront locale naming the searched index (`products_fr`); defaults to the client's
144
144
 
145
145
  **Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
146
146
 
package/dist/components/DialogSearch/searchDisplay.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { SearchPriceRange, SearchProduct } from '@askdialog/dialog-sdk';
1
+ import { SearchPriceRange } from '@askdialog/dialog-sdk';
2
2
  export declare const formatSearchPrice: (priceRange: SearchPriceRange | undefined, locale?: string) => string;
3
- export declare const formatSearchCompareAtPrice: (product: SearchProduct, locale?: string) => string;
4
3
  export declare const safeProductHref: (url: string) => string | undefined;
package/dist/components/DialogSearch/useDialogSearch.d.ts CHANGED
@@ -7,8 +7,8 @@ export interface UseDialogSearchOptions {
7
7
  navigate?: (url: string, hit: SearchHit) => void;
8
8
  debounceMs?: number;
9
9
  hitsPerPage?: number;
10
+ /** Storefront locale for the searched index (`products_fr`); defaults to the client's. */
10
11
  locale?: string;
11
- countryCode?: string;
12
12
  }
13
13
  export interface DialogSearch {
14
14
  controller: SearchController;
package/dist/dialog-react.css CHANGED
@@ -1 +1 @@
1
- .dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font:inherit;color:inherit;cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:#fafafa}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-card-body{display:flex;align-items:center;gap:8px;border-radius:12px;color:inherit;text-decoration:none}a.dialog-search-card-body:hover{background:#00000008}.dialog-search-card-image{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f2f2f2}.dialog-search-card-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#00000008;pointer-events:none}.dialog-search-card-image img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-card-info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:4px}.dialog-search-card-title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-search-card-price{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-card-compare-at{color:#a3a3a3;text-decoration:line-through}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 14px;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-status{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#a3a3a3}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.dialog-search-retry{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#737373;cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:#fafafa}.dialog-search-results{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;max-height:480px;min-height:0;overflow-y:auto}
1
+ .dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font:inherit;color:inherit;cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:#fafafa}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-card-body{display:flex;align-items:center;gap:8px;border-radius:12px;color:inherit;text-decoration:none}a.dialog-search-card-body:hover{background:#00000008}.dialog-search-card-image{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f2f2f2}.dialog-search-card-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#00000008;pointer-events:none}.dialog-search-card-image img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-card-info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:4px}.dialog-search-card-title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-search-card-price{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 14px;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-status{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#a3a3a3}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.dialog-search-retry{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#737373;cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:#fafafa}.dialog-search-results{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;max-height:480px;min-height:0;overflow-y:auto}
package/dist/dialog-react.js CHANGED
@@ -1,14 +1,14 @@
1
- import { jsxs as g, jsx as n, Fragment as y } from "react/jsx-runtime";
2
- import { useRef as v, useState as C, useEffect as f, useMemo as S, useLayoutEffect as D, useCallback as N, useSyncExternalStore as M } from "react";
3
- import { registerDialogInstallation as A, addAuditCapability as I, resolveTextDirection as B, SearchStatus as b, DialogSearchError as _, createSearchController as H } from "@askdialog/dialog-sdk";
4
- import { createPortal as K } from "react-dom";
5
- const O = ({
1
+ import { jsxs as h, jsx as n, Fragment as y } from "react/jsx-runtime";
2
+ import { useRef as v, useState as C, useEffect as f, useMemo as w, useLayoutEffect as D, useCallback as N, useSyncExternalStore as x } from "react";
3
+ import { registerDialogInstallation as R, addAuditCapability as A, resolveTextDirection as I, SearchStatus as b, DialogSearchError as M, createSearchController as B } from "@askdialog/dialog-sdk";
4
+ import { createPortal as _ } from "react-dom";
5
+ const H = ({
6
6
  title: e = "Your expert",
7
7
  description: t = "A question about this product?"
8
- }) => /* @__PURE__ */ g("div", { className: "dialog-block-header-container", children: [
8
+ }) => /* @__PURE__ */ h("div", { className: "dialog-block-header-container", children: [
9
9
  /* @__PURE__ */ n("div", { className: "dialog-block-title", children: e }),
10
10
  /* @__PURE__ */ n("div", { className: "dialog-block-description", children: t })
11
- ] }), $ = ({ color: e = "#181825" }) => /* @__PURE__ */ g(
11
+ ] }), K = ({ color: e = "#181825" }) => /* @__PURE__ */ h(
12
12
  "svg",
13
13
  {
14
14
  width: "20",
@@ -17,7 +17,7 @@ const O = ({
17
17
  fill: "none",
18
18
  xmlns: "http://www.w3.org/2000/svg",
19
19
  children: [
20
- /* @__PURE__ */ g("g", { clipPath: "url(#clip0_466_934)", children: [
20
+ /* @__PURE__ */ h("g", { clipPath: "url(#clip0_466_934)", children: [
21
21
  /* @__PURE__ */ n(
22
22
  "path",
23
23
  {
@@ -42,7 +42,7 @@ const O = ({
42
42
  /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ n("rect", { width: "20", height: "20", fill: "white" }) }) })
43
43
  ]
44
44
  }
45
- ), T = ({
45
+ ), j = ({
46
46
  client: e,
47
47
  questions: t,
48
48
  productId: s,
@@ -58,31 +58,31 @@ const O = ({
58
58
  fromQuestionSuggestion: !0
59
59
  });
60
60
  };
61
- return /* @__PURE__ */ n(y, { children: t.map((l) => /* @__PURE__ */ g(
61
+ return /* @__PURE__ */ n(y, { children: t.map((l) => /* @__PURE__ */ h(
62
62
  "button",
63
63
  {
64
64
  className: "dialog-block-suggestions-item",
65
65
  onClick: () => c(l.question),
66
66
  children: [
67
- /* @__PURE__ */ n($, { color: e.theme.primaryColor }),
67
+ /* @__PURE__ */ n(K, { color: e.theme.primaryColor }),
68
68
  /* @__PURE__ */ n("span", { className: "dialog-block-suggestions-item-label", children: l.question })
69
69
  ]
70
70
  },
71
71
  l.question
72
72
  )) });
73
- }, V = () => /* @__PURE__ */ g(y, { children: [
73
+ }, O = () => /* @__PURE__ */ h(y, { children: [
74
74
  /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" }),
75
75
  /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" }),
76
76
  /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" })
77
- ] }), j = ({
77
+ ] }), $ = ({
78
78
  client: e,
79
79
  questions: t,
80
80
  isLoading: s,
81
81
  productId: r,
82
82
  productTitle: a,
83
83
  selectedVariantId: c
84
- }) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(V, {}) : /* @__PURE__ */ n(
85
- T,
84
+ }) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(O, {}) : /* @__PURE__ */ n(
85
+ j,
86
86
  {
87
87
  client: e,
88
88
  questions: t,
@@ -90,7 +90,7 @@ const O = ({
90
90
  productTitle: a,
91
91
  selectedVariantId: c
92
92
  }
93
- ) }), q = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
93
+ ) }), T = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
94
94
  "svg",
95
95
  {
96
96
  width: "20",
@@ -109,17 +109,17 @@ const O = ({
109
109
  }
110
110
  )
111
111
  }
112
- ), F = ({
112
+ ), V = ({
113
113
  client: e,
114
114
  placeholder: t = "Ask anything...",
115
115
  productId: s,
116
116
  productTitle: r,
117
117
  selectedVariantId: a
118
118
  }) => {
119
- const c = v(null), [l, o] = C(""), i = () => {
119
+ const c = v(null), [l, i] = C(""), o = () => {
120
120
  var d;
121
121
  (d = c.current) == null || d.focus();
122
- }, h = () => {
122
+ }, u = () => {
123
123
  const d = l;
124
124
  d.trim() && (e.sendProductMessage({
125
125
  productId: s,
@@ -127,20 +127,20 @@ const O = ({
127
127
  selectedVariantId: a,
128
128
  question: d,
129
129
  fromQuestionSuggestion: !0
130
- }), o(""));
130
+ }), i(""));
131
131
  };
132
- return /* @__PURE__ */ g("div", { className: "dialog-input-wrapper", onClick: i, children: [
132
+ return /* @__PURE__ */ h("div", { className: "dialog-input-wrapper", onClick: o, children: [
133
133
  /* @__PURE__ */ n(
134
134
  "input",
135
135
  {
136
136
  id: "dialog-ask-anything-input-ai-input",
137
137
  ref: c,
138
138
  value: l,
139
- onChange: (d) => o(d.target.value),
139
+ onChange: (d) => i(d.target.value),
140
140
  className: "dialog-ask-anything-input-ai-input",
141
141
  placeholder: t,
142
142
  onKeyDown: (d) => {
143
- d.key === "Enter" && h();
143
+ d.key === "Enter" && u();
144
144
  }
145
145
  }
146
146
  ),
@@ -150,27 +150,27 @@ const O = ({
150
150
  id: "send-message-button-ai-input",
151
151
  className: "dialog-input-submit",
152
152
  disabled: !l.trim(),
153
- onClick: h,
154
- children: /* @__PURE__ */ n(q, { color: e.theme.ctaTextColor })
153
+ onClick: u,
154
+ children: /* @__PURE__ */ n(T, { color: e.theme.ctaTextColor })
155
155
  }
156
156
  )
157
157
  ] });
158
- }, R = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), Q = (e) => {
158
+ }, P = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), q = (e) => {
159
159
  if (!e) return;
160
160
  const t = document.body;
161
161
  Object.keys(e).forEach((s) => {
162
- const r = s, a = R(s);
162
+ const r = s, a = P(s);
163
163
  if (e[r] !== void 0) {
164
164
  if (typeof e[r] == "object") {
165
165
  Object.keys(e[r]).forEach(
166
166
  (c) => {
167
- var o;
167
+ var i;
168
168
  const l = c;
169
169
  if (l !== void 0) {
170
- const i = R(c), h = e[r];
170
+ const o = P(c), u = e[r];
171
171
  t.style.setProperty(
172
- `--dialog-theme-${a}-${i}`,
173
- (o = h[l]) == null ? void 0 : o.toString()
172
+ `--dialog-theme-${a}-${o}`,
173
+ (i = u[l]) == null ? void 0 : i.toString()
174
174
  );
175
175
  }
176
176
  }
@@ -188,68 +188,68 @@ const O = ({
188
188
  );
189
189
  }
190
190
  });
191
- }, U = ({ theme: e, children: t }) => (f(() => {
192
- e && Q(e);
193
- }, [e]), /* @__PURE__ */ n(y, { children: t })), ge = ({
191
+ }, F = ({ theme: e, children: t }) => (f(() => {
192
+ e && q(e);
193
+ }, [e]), /* @__PURE__ */ n(y, { children: t })), he = ({
194
194
  client: e,
195
195
  productId: t,
196
196
  productTitle: s,
197
197
  selectedVariantId: r,
198
198
  enableInput: a = !0
199
199
  }) => {
200
- const [c, l] = C(!0), [o, i] = C(
200
+ const [c, l] = C(!0), [i, o] = C(
201
201
  void 0
202
202
  );
203
203
  f(() => {
204
- A({
204
+ R({
205
205
  method: "react",
206
- version: "2.3.1"
207
- }), I("pdp-block");
206
+ version: "2.4.0"
207
+ }), A("pdp-block");
208
208
  }, []);
209
- const h = S(
210
- () => c ? "" : o == null ? void 0 : o.assistantName,
211
- [o, c]
212
- ), m = S(
213
- () => c ? "" : o == null ? void 0 : o.description,
214
- [o, c]
215
- ), d = S(
216
- () => c ? "" : o == null ? void 0 : o.inputPlaceholder,
217
- [o, c]
218
- ), p = S(
209
+ const u = w(
210
+ () => c ? "" : i == null ? void 0 : i.assistantName,
211
+ [i, c]
212
+ ), p = w(
213
+ () => c ? "" : i == null ? void 0 : i.description,
214
+ [i, c]
215
+ ), d = w(
216
+ () => c ? "" : i == null ? void 0 : i.inputPlaceholder,
217
+ [i, c]
218
+ ), m = w(
219
219
  () => {
220
- var u;
221
- return B((u = e.getLocalizationInformations()) == null ? void 0 : u.languageCode);
220
+ var g;
221
+ return I((g = e.getLocalizationInformations()) == null ? void 0 : g.languageCode);
222
222
  },
223
223
  [e]
224
224
  );
225
225
  return f(() => {
226
- let u = !0;
226
+ let g = !0;
227
227
  return (async () => {
228
- l(!0), i(void 0);
228
+ l(!0), o(void 0);
229
229
  try {
230
- const w = await e.getSuggestions(t);
231
- u && i(w);
232
- } catch (w) {
233
- console.error("error", w);
230
+ const k = await e.getSuggestions(t);
231
+ g && o(k);
232
+ } catch (k) {
233
+ console.error("error", k);
234
234
  } finally {
235
- u && l(!1);
235
+ g && l(!1);
236
236
  }
237
237
  })(), () => {
238
- u = !1;
238
+ g = !1;
239
239
  };
240
- }, [e, t]), /* @__PURE__ */ n(U, { theme: e.theme, children: /* @__PURE__ */ g(
240
+ }, [e, t]), /* @__PURE__ */ n(F, { theme: e.theme, children: /* @__PURE__ */ h(
241
241
  "div",
242
242
  {
243
243
  id: "dialog-instant",
244
244
  className: "dialog-block-container",
245
- dir: p,
245
+ dir: m,
246
246
  children: [
247
- /* @__PURE__ */ n(O, { title: h, description: m }),
247
+ /* @__PURE__ */ n(H, { title: u, description: p }),
248
248
  /* @__PURE__ */ n(
249
- j,
249
+ $,
250
250
  {
251
251
  client: e,
252
- questions: o == null ? void 0 : o.questions,
252
+ questions: i == null ? void 0 : i.questions,
253
253
  isLoading: c,
254
254
  productId: t,
255
255
  productTitle: s,
@@ -257,7 +257,7 @@ const O = ({
257
257
  }
258
258
  ),
259
259
  a && /* @__PURE__ */ n(
260
- F,
260
+ V,
261
261
  {
262
262
  client: e,
263
263
  placeholder: d,
@@ -269,7 +269,7 @@ const O = ({
269
269
  ]
270
270
  }
271
271
  ) });
272
- }, W = () => /* @__PURE__ */ n(
272
+ }, Q = () => /* @__PURE__ */ n(
273
273
  "svg",
274
274
  {
275
275
  width: 16,
@@ -289,7 +289,7 @@ const O = ({
289
289
  }
290
290
  )
291
291
  }
292
- ), z = "M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z", Z = ({
292
+ ), U = "M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z", W = ({
293
293
  color: e = "currentColor"
294
294
  }) => /* @__PURE__ */ n(
295
295
  "svg",
@@ -300,20 +300,20 @@ const O = ({
300
300
  fill: "none",
301
301
  xmlns: "http://www.w3.org/2000/svg",
302
302
  "aria-hidden": "true",
303
- children: /* @__PURE__ */ n("path", { d: z, fill: e })
303
+ children: /* @__PURE__ */ n("path", { d: U, fill: e })
304
304
  }
305
- ), me = ({
305
+ ), ge = ({
306
306
  controller: e,
307
307
  placeholder: t = "Search products...",
308
308
  autoFocus: s = !1,
309
309
  submitAriaLabel: r = "Search"
310
310
  }) => {
311
311
  const [a, c] = C("");
312
- return /* @__PURE__ */ g("form", { className: "dialog-search-bar", role: "search", onSubmit: (o) => {
313
- o.preventDefault(), e.submit(a);
312
+ return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (i) => {
313
+ i.preventDefault(), e.submit(a);
314
314
  }, children: [
315
- /* @__PURE__ */ g("div", { className: "dialog-search-bar-field", children: [
316
- /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(Z, {}) }),
315
+ /* @__PURE__ */ h("div", { className: "dialog-search-bar-field", children: [
316
+ /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(W, {}) }),
317
317
  /* @__PURE__ */ n(
318
318
  "input",
319
319
  {
@@ -324,8 +324,8 @@ const O = ({
324
324
  "aria-label": t,
325
325
  placeholder: t,
326
326
  autoFocus: s,
327
- onChange: (o) => {
328
- c(o.target.value), e.setQuery(o.target.value);
327
+ onChange: (i) => {
328
+ c(i.target.value), e.setQuery(i.target.value);
329
329
  }
330
330
  }
331
331
  )
@@ -336,16 +336,16 @@ const O = ({
336
336
  type: "submit",
337
337
  className: "dialog-search-bar-submit",
338
338
  "aria-label": r,
339
- children: /* @__PURE__ */ n(W, {})
339
+ children: /* @__PURE__ */ n(Q, {})
340
340
  }
341
341
  )
342
342
  ] });
343
- }, X = ({
343
+ }, z = ({
344
344
  controller: e,
345
345
  state: t
346
346
  }) => {
347
347
  const s = t.response;
348
- return s === void 0 || s.nbPages <= 1 ? null : /* @__PURE__ */ g("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
348
+ return s === void 0 || s.nbPages <= 1 ? null : /* @__PURE__ */ h("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
349
349
  /* @__PURE__ */ n(
350
350
  "button",
351
351
  {
@@ -355,7 +355,7 @@ const O = ({
355
355
  children: "Previous"
356
356
  }
357
357
  ),
358
- /* @__PURE__ */ g("span", { children: [
358
+ /* @__PURE__ */ h("span", { children: [
359
359
  "Page ",
360
360
  s.page + 1,
361
361
  " / ",
@@ -371,34 +371,25 @@ const O = ({
371
371
  }
372
372
  )
373
373
  ] });
374
- }, L = ({ amount: e, currencyCode: t }, s) => new Intl.NumberFormat(s, {
374
+ }, L = ({ amount: e, currencyCode: t }, s) => t === void 0 ? new Intl.NumberFormat(s).format(Number(e)) : new Intl.NumberFormat(s, {
375
375
  style: "currency",
376
376
  currency: t
377
- }).format(Number(e)), x = ({ min: e, max: t }, s) => e.amount === t.amount ? L(e, s) : `${L(e, s)} – ${L(t, s)}`, G = (e, t) => {
377
+ }).format(Number(e)), Z = ({ min: e, max: t }, s) => e.amount === t.amount ? L(e, s) : `${L(e, s)} – ${L(t, s)}`, X = (e, t) => {
378
378
  if (e === void 0)
379
379
  return "";
380
380
  try {
381
- return x(e, t);
381
+ return Z(e, t);
382
382
  } catch {
383
383
  return "";
384
384
  }
385
- }, Y = (e, t) => {
386
- const s = e.priceRange, r = e.compareAtPriceRange;
387
- if (s === void 0 || r === void 0 || Number(r.min.amount) <= Number(s.min.amount))
388
- return "";
389
- try {
390
- return x(r, t);
391
- } catch {
392
- return "";
393
- }
394
- }, J = (e) => {
385
+ }, G = (e) => {
395
386
  try {
396
387
  const { protocol: t } = new URL(e, window.location.href);
397
388
  return t === "http:" || t === "https:" ? e : void 0;
398
389
  } catch {
399
390
  return;
400
391
  }
401
- }, ee = ({
392
+ }, Y = ({
402
393
  controller: e,
403
394
  hit: t,
404
395
  index: s,
@@ -408,104 +399,98 @@ const O = ({
408
399
  f(() => {
409
400
  a.current !== null && e.observeResult(a.current, s);
410
401
  }, [e, t, s]);
411
- const c = (u) => {
412
- const P = u.metaKey || u.ctrlKey || u.shiftKey || u.altKey;
413
- e.selectResult(s, { navigate: !P }) && u.preventDefault();
414
- }, l = (u) => {
415
- u.button === 1 && e.selectResult(s, { navigate: !1 });
416
- }, { product: o } = t, i = o.title ?? o.id, h = G(o.priceRange, r), m = Y(o, r), d = o.url === void 0 ? void 0 : J(o.url), p = /* @__PURE__ */ g(y, { children: [
417
- /* @__PURE__ */ n("div", { className: "dialog-search-card-image", children: o.imageUrl !== void 0 && /* @__PURE__ */ n("img", { src: o.imageUrl, alt: i, loading: "lazy" }) }),
418
- /* @__PURE__ */ g("div", { className: "dialog-search-card-info", children: [
402
+ const c = (d) => {
403
+ const m = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
404
+ e.selectResult(s, { navigate: !m }) && d.preventDefault();
405
+ }, l = (d) => {
406
+ d.button === 1 && e.selectResult(s, { navigate: !1 });
407
+ }, i = t.title ?? t.objectID, o = X(t.priceRange, r), u = t.url === void 0 ? void 0 : G(t.url), p = /* @__PURE__ */ h(y, { children: [
408
+ /* @__PURE__ */ n("div", { className: "dialog-search-card-image", children: t.imageUrl !== void 0 && /* @__PURE__ */ n("img", { src: t.imageUrl, alt: i, loading: "lazy" }) }),
409
+ /* @__PURE__ */ h("div", { className: "dialog-search-card-info", children: [
419
410
  /* @__PURE__ */ n("p", { className: "dialog-search-card-title", children: i }),
420
- h !== "" && /* @__PURE__ */ g("p", { className: "dialog-search-card-price", children: [
421
- h,
422
- m !== "" && /* @__PURE__ */ g("s", { className: "dialog-search-card-compare-at", children: [
423
- " ",
424
- m
425
- ] })
426
- ] })
411
+ o !== "" && /* @__PURE__ */ n("p", { className: "dialog-search-card-price", children: o })
427
412
  ] })
428
413
  ] });
429
- return /* @__PURE__ */ n("li", { ref: a, className: "dialog-search-card", children: d === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: p }) : /* @__PURE__ */ n(
414
+ return /* @__PURE__ */ n("li", { ref: a, className: "dialog-search-card", children: u === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: p }) : /* @__PURE__ */ n(
430
415
  "a",
431
416
  {
432
417
  className: "dialog-search-card-body",
433
- href: d,
418
+ href: u,
434
419
  onClick: c,
435
420
  onAuxClick: l,
436
421
  children: p
437
422
  }
438
423
  ) });
439
- }, te = (e) => {
424
+ }, J = (e) => {
440
425
  const t = v(null), [s, r] = C(void 0), [a, c] = C(0);
441
426
  return D(() => {
442
427
  if (!e)
443
428
  return;
444
429
  const l = () => {
445
- const o = t.current;
446
- if (o === null)
430
+ const i = t.current;
431
+ if (i === null)
447
432
  return;
448
- const i = o.previousElementSibling ?? o, { top: h, bottom: m, left: d, width: p } = i.getBoundingClientRect();
433
+ const o = i.previousElementSibling ?? i, { top: u, bottom: p, left: d, width: m } = o.getBoundingClientRect();
449
434
  c(window.innerHeight), r(
450
- (u) => u !== void 0 && u.top === h && u.bottom === m && u.left === d && u.width === p ? u : { top: h, bottom: m, left: d, width: p }
435
+ (g) => g !== void 0 && g.top === u && g.bottom === p && g.left === d && g.width === m ? g : { top: u, bottom: p, left: d, width: m }
451
436
  );
452
437
  };
453
438
  return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
454
439
  window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
455
440
  };
456
441
  }, [e]), { anchorRef: t, rect: s, viewportHeight: a };
457
- }, re = (e, t) => {
442
+ }, ee = (e, t) => {
458
443
  const [s, r] = C(!1), a = v(null), c = e.status !== b.IDLE && !s;
459
444
  return f(() => {
460
445
  r(!1);
461
446
  }, [e.query]), f(() => {
462
447
  if (!c)
463
448
  return;
464
- const l = (o) => {
465
- var p, u;
466
- const i = o.target;
467
- if (!(i instanceof Node))
449
+ const l = (i) => {
450
+ var m, g;
451
+ const o = i.target;
452
+ if (!(o instanceof Node))
468
453
  return;
469
- const h = (p = t.current) == null ? void 0 : p.previousElementSibling, m = ((u = a.current) == null ? void 0 : u.contains(i)) ?? !1, d = (h == null ? void 0 : h.contains(i)) ?? !1;
470
- !m && !d && r(!0);
454
+ const u = (m = t.current) == null ? void 0 : m.previousElementSibling, p = ((g = a.current) == null ? void 0 : g.contains(o)) ?? !1, d = (u == null ? void 0 : u.contains(o)) ?? !1;
455
+ !p && !d && r(!0);
471
456
  };
472
457
  return document.addEventListener("pointerdown", l), () => document.removeEventListener("pointerdown", l);
473
458
  }, [c, t]), f(() => {
474
- var i;
475
- const l = (i = t.current) == null ? void 0 : i.previousElementSibling;
459
+ var o;
460
+ const l = (o = t.current) == null ? void 0 : o.previousElementSibling;
476
461
  if (l == null)
477
462
  return;
478
- const o = () => r(!1);
479
- return l.addEventListener("focusin", o), () => l.removeEventListener("focusin", o);
463
+ const i = () => r(!1);
464
+ return l.addEventListener("focusin", i), () => l.removeEventListener("focusin", i);
480
465
  }, [t]), { isOpen: c, panelRef: a };
481
- }, k = 8, E = 16, se = 200, ne = (e) => e instanceof _ ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", oe = (e, t) => e.bottom > 0 && e.top < t, ie = (e, t) => {
482
- const s = t - e.bottom - k - E, r = e.top - k - E, a = { left: e.left, width: e.width };
483
- return s < se && r > s ? {
466
+ }, S = 8, E = 16, te = 200, se = (e) => e instanceof M ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", re = (e, t) => e.bottom > 0 && e.top < t, ne = (e, t) => {
467
+ const s = t - e.bottom - S - E, r = e.top - S - E, a = { left: e.left, width: e.width };
468
+ return s < te && r > s ? {
484
469
  ...a,
485
- bottom: t - e.top + k,
470
+ bottom: t - e.top + S,
486
471
  maxHeight: Math.max(r, 0)
487
472
  } : {
488
473
  ...a,
489
- top: e.bottom + k,
474
+ top: e.bottom + S,
490
475
  maxHeight: Math.max(s, 0)
491
476
  };
492
- }, ae = (e, t, s) => {
477
+ }, oe = (e, t, s) => {
493
478
  const r = t.response;
494
479
  switch (t.status) {
495
480
  case b.LOADING:
496
- return /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
481
+ return /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
497
482
  "Searching “",
498
483
  t.query,
499
484
  "”…"
500
485
  ] });
501
486
  case b.ERROR:
502
- return /* @__PURE__ */ g("div", { className: "dialog-search-error", children: [
487
+ return /* @__PURE__ */ h("div", { className: "dialog-search-error", children: [
503
488
  /* @__PURE__ */ n(
504
489
  "p",
505
490
  {
506
491
  role: "alert",
507
492
  className: "dialog-search-status dialog-search-status-error",
508
- children: ne(t.error)
493
+ children: se(t.error)
509
494
  }
510
495
  ),
511
496
  /* @__PURE__ */ n(
@@ -519,120 +504,126 @@ const O = ({
519
504
  )
520
505
  ] });
521
506
  case b.EMPTY:
522
- return /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
507
+ return /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
523
508
  "No products match “",
524
509
  r == null ? void 0 : r.query,
525
510
  "”."
526
511
  ] });
527
512
  case b.SUCCESS:
528
- return r === void 0 ? null : /* @__PURE__ */ g(y, { children: [
529
- /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
513
+ return r === void 0 ? null : /* @__PURE__ */ h(y, { children: [
514
+ /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
530
515
  r.nbHits,
531
516
  " result",
532
517
  r.nbHits > 1 ? "s" : ""
533
518
  ] }),
534
519
  /* @__PURE__ */ n("ul", { className: "dialog-search-results", children: r.hits.map((a, c) => /* @__PURE__ */ n(
535
- ee,
520
+ Y,
536
521
  {
537
522
  controller: e,
538
523
  hit: a,
539
524
  index: c,
540
525
  locale: s
541
526
  },
542
- a.id
527
+ a.objectID
543
528
  )) }),
544
- /* @__PURE__ */ n(X, { controller: e, state: t })
529
+ /* @__PURE__ */ n(z, { controller: e, state: t })
545
530
  ] });
546
531
  default:
547
532
  return null;
548
533
  }
549
- }, pe = ({
534
+ }, me = ({
550
535
  controller: e,
551
536
  state: t,
552
537
  locale: s
553
538
  }) => {
554
- const r = t.status !== b.IDLE, { anchorRef: a, rect: c, viewportHeight: l } = te(r), { isOpen: o, panelRef: i } = re(t, a);
555
- return /* @__PURE__ */ g(y, { children: [
539
+ const r = t.status !== b.IDLE, { anchorRef: a, rect: c, viewportHeight: l } = J(r), { isOpen: i, panelRef: o } = ee(t, a);
540
+ return /* @__PURE__ */ h(y, { children: [
556
541
  /* @__PURE__ */ n("div", { ref: a }),
557
- o && c !== void 0 && oe(c, l) && K(
542
+ i && c !== void 0 && re(c, l) && _(
558
543
  /* @__PURE__ */ n(
559
544
  "div",
560
545
  {
561
- ref: i,
546
+ ref: o,
562
547
  className: "dialog-search-panel",
563
- style: ie(c, l),
564
- children: ae(e, t, s)
548
+ style: ne(c, l),
549
+ children: oe(e, t, s)
565
550
  }
566
551
  ),
567
552
  document.body
568
553
  )
569
554
  ] });
570
- }, ce = {
555
+ }, ie = {
571
556
  status: b.IDLE,
572
557
  query: "",
573
558
  page: 0
574
- }, fe = (e) => {
559
+ }, pe = (e) => {
575
560
  const t = v(e);
576
561
  t.current = e;
577
562
  const s = v(void 0), r = N(() => {
578
563
  if (s.current === void 0) {
579
- const { client: i, surface: h = "search_page", ...m } = t.current;
580
- s.current = H({
581
- search: (d, p) => i.search(d, p),
564
+ const {
565
+ client: o,
566
+ surface: u = "search_page",
567
+ locale: p = o.locale,
568
+ ...d
569
+ } = t.current;
570
+ s.current = B({
571
+ search: (m, g) => o.search(m, g),
572
+ locale: p,
582
573
  analytics: {
583
- surface: h,
584
- trackViewSearchResults: (d) => i.trackViewSearchResults(d),
585
- trackSelectSearchResult: (d) => i.trackSelectSearchResult(d)
574
+ surface: u,
575
+ trackViewSearchResults: (m) => o.trackViewSearchResults(m),
576
+ trackSelectSearchResult: (m) => o.trackSelectSearchResult(m)
586
577
  },
587
- ...m
578
+ ...d
588
579
  });
589
580
  }
590
581
  return s.current;
591
582
  }, []), a = v(void 0);
592
583
  a.current ?? (a.current = {
593
- setQuery: (i) => r().setQuery(i),
594
- submit: (i) => r().submit(i),
595
- setPage: (i) => r().setPage(i),
584
+ setQuery: (o) => r().setQuery(o),
585
+ submit: (o) => r().submit(o),
586
+ setPage: (o) => r().setPage(o),
596
587
  retry: () => r().retry(),
597
- observeResult: (i, h) => r().observeResult(i, h),
598
- selectResult: (i, h) => r().selectResult(i, h),
599
- subscribe: (i) => r().subscribe(i),
588
+ observeResult: (o, u) => r().observeResult(o, u),
589
+ selectResult: (o, u) => r().selectResult(o, u),
590
+ subscribe: (o) => r().subscribe(o),
600
591
  getState: () => r().getState(),
601
592
  // Clear the ref so the next access creates a fresh controller instead of
602
593
  // dispatching into the disposed one; never create a controller here.
603
594
  dispose: () => {
604
- var i;
605
- (i = s.current) == null || i.dispose(), s.current = void 0;
595
+ var o;
596
+ (o = s.current) == null || o.dispose(), s.current = void 0;
606
597
  }
607
598
  }), f(() => {
608
- A({
599
+ R({
609
600
  method: "react",
610
- version: "2.3.1"
601
+ version: "2.4.0"
611
602
  });
612
- const i = r();
603
+ const o = r();
613
604
  return () => {
614
- i.dispose(), s.current === i && (s.current = void 0);
605
+ o.dispose(), s.current === o && (s.current = void 0);
615
606
  };
616
607
  }, [r]);
617
608
  const c = N(
618
- (i) => r().subscribe(i),
609
+ (o) => r().subscribe(o),
619
610
  [r]
620
611
  ), l = N(
621
612
  () => r().getState(),
622
613
  [r]
623
- ), o = M(
614
+ ), i = x(
624
615
  c,
625
616
  l,
626
- () => ce
617
+ () => ie
627
618
  );
628
- return { controller: a.current, state: o };
619
+ return { controller: a.current, state: i };
629
620
  };
630
621
  export {
631
- F as DialogInput,
632
- ge as DialogProductBlock,
633
- me as DialogSearchBar,
634
- X as DialogSearchPagination,
635
- ee as DialogSearchProductCard,
636
- pe as DialogSearchResults,
637
- fe as useDialogSearch
622
+ V as DialogInput,
623
+ he as DialogProductBlock,
624
+ ge as DialogSearchBar,
625
+ z as DialogSearchPagination,
626
+ Y as DialogSearchProductCard,
627
+ me as DialogSearchResults,
628
+ pe as useDialogSearch
638
629
  };
package/dist/dialog-react.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,t,d,p,E){"use strict";const L=({title:e="Your expert",description:s="A question about this product?"})=>t.jsxs("div",{className:"dialog-block-header-container",children:[t.jsx("div",{className:"dialog-block-title",children:e}),t.jsx("div",{className:"dialog-block-description",children:s})]}),A=({color:e="#181825"})=>t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[t.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),t.jsx("defs",{children:t.jsx("clipPath",{id:"clip0_466_934",children:t.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),_=({client:e,questions:s,productId:o,productTitle:r,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return t.jsx(t.Fragment,{children:s.map(c=>t.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[t.jsx(A,{color:e.theme.primaryColor}),t.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),M=({client:e,questions:s,isLoading:o,productId:r,productTitle:i,selectedVariantId:l})=>t.jsx("div",{className:"dialog-block-suggestions-container",children:o||!s?t.jsx(D,{}):t.jsx(_,{client:e,questions:s,productId:r,productTitle:i,selectedVariantId:l})}),I=({color:e="#ffffff"})=>t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:s="Ask anything...",productId:o,productTitle:r,selectedVariantId:i})=>{const l=d.useRef(null),[c,a]=d.useState(""),n=()=>{var u;(u=l.current)==null||u.focus()},g=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),a(""))},b=u=>{u.key==="Enter"&&g()};return t.jsxs("div",{className:"dialog-input-wrapper",onClick:n,children:[t.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>a(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:s,onKeyDown:b}),t.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:g,children:t.jsx(I,{color:e.theme.ctaTextColor})})]})},m=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),F=e=>{if(!e)return;const s=document.body;Object.keys(e).forEach(o=>{const r=o,i=m(o);if(e[r]!==void 0){if(typeof e[r]=="object"){Object.keys(e[r]).forEach(l=>{var a;const c=l;if(c!==void 0){const n=m(l),g=e[r];s.style.setProperty(`--dialog-theme-${i}-${n}`,(a=g[c])==null?void 0:a.toString())}});return}if(r==="ctaBorderType"){const l=e[r]==="rounded"?"24px":"0";s.style.setProperty(`--dialog-theme-${i}`,l);return}s.style.setProperty(`--dialog-theme-${i}`,e[r].toString())}})},O=({theme:e,children:s})=>(d.useEffect(()=>{e&&F(e)},[e]),t.jsx(t.Fragment,{children:s})),T=({client:e,productId:s,productTitle:o,selectedVariantId:r,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[a,n]=d.useState(void 0);d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.1"}),p.addAuditCapability("pdp-block")},[]);const g=d.useMemo(()=>l?"":a==null?void 0:a.assistantName,[a,l]),b=d.useMemo(()=>l?"":a==null?void 0:a.description,[a,l]),u=d.useMemo(()=>l?"":a==null?void 0:a.inputPlaceholder,[a,l]),S=d.useMemo(()=>{var h;return p.resolveTextDirection((h=e.getLocalizationInformations())==null?void 0:h.languageCode)},[e]);return d.useEffect(()=>{let h=!0;return(async()=>{c(!0),n(void 0);try{const C=await e.getSuggestions(s);h&&n(C)}catch(C){console.error("error",C)}finally{h&&c(!1)}})(),()=>{h=!1}},[e,s]),t.jsx(O,{theme:e.theme,children:t.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[t.jsx(L,{title:g,description:b}),t.jsx(M,{client:e,questions:a==null?void 0:a.questions,isLoading:l,productId:s,productTitle:o,selectedVariantId:r}),i&&t.jsx(y,{client:e,placeholder:u,productId:s,productTitle:o,selectedVariantId:r})]})})},B=()=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),q="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",H=({color:e="currentColor"})=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:q,fill:e})}),V=({controller:e,placeholder:s="Search products...",autoFocus:o=!1,submitAriaLabel:r="Search"})=>{const[i,l]=d.useState(""),c=a=>{a.preventDefault(),e.submit(i)};return t.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[t.jsxs("div",{className:"dialog-search-bar-field",children:[t.jsx("span",{className:"dialog-search-bar-icon",children:t.jsx(H,{})}),t.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":s,placeholder:s,autoFocus:o,onChange:a=>{l(a.target.value),e.setQuery(a.target.value)}})]}),t.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":r,children:t.jsx(B,{})})]})},w=({controller:e,state:s})=>{const o=s.response;return o===void 0||o.nbPages<=1?null:t.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[t.jsx("button",{type:"button",disabled:o.page===0,onClick:()=>e.setPage(o.page-1),children:"Previous"}),t.jsxs("span",{children:["Page ",o.page+1," / ",o.nbPages]}),t.jsx("button",{type:"button",disabled:o.page>=o.nbPages-1,onClick:()=>e.setPage(o.page+1),children:"Next"})]})},v=({amount:e,currencyCode:s},o)=>new Intl.NumberFormat(o,{style:"currency",currency:s}).format(Number(e)),N=({min:e,max:s},o)=>e.amount===s.amount?v(e,o):`${v(e,o)} – ${v(s,o)}`,x=(e,s)=>{if(e===void 0)return"";try{return N(e,s)}catch{return""}},K=(e,s)=>{const o=e.priceRange,r=e.compareAtPriceRange;if(o===void 0||r===void 0||Number(r.min.amount)<=Number(o.min.amount))return"";try{return N(r,s)}catch{return""}},$=e=>{try{const{protocol:s}=new URL(e,window.location.href);return s==="http:"||s==="https:"?e:void 0}catch{return}},P=({controller:e,hit:s,index:o,locale:r})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,o)},[e,s,o]);const l=h=>{const k=h.metaKey||h.ctrlKey||h.shiftKey||h.altKey;e.selectResult(o,{navigate:!k})&&h.preventDefault()},c=h=>{h.button===1&&e.selectResult(o,{navigate:!1})},{product:a}=s,n=a.title??a.id,g=x(a.priceRange,r),b=K(a,r),u=a.url===void 0?void 0:$(a.url),S=t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-search-card-image",children:a.imageUrl!==void 0&&t.jsx("img",{src:a.imageUrl,alt:n,loading:"lazy"})}),t.jsxs("div",{className:"dialog-search-card-info",children:[t.jsx("p",{className:"dialog-search-card-title",children:n}),g!==""&&t.jsxs("p",{className:"dialog-search-card-price",children:[g,b!==""&&t.jsxs("s",{className:"dialog-search-card-compare-at",children:[" ",b]})]})]})]});return t.jsx("li",{ref:i,className:"dialog-search-card",children:u===void 0?t.jsx("div",{className:"dialog-search-card-body",children:S}):t.jsx("a",{className:"dialog-search-card-body",href:u,onClick:l,onAuxClick:c,children:S})})},X=e=>{const s=d.useRef(null),[o,r]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const a=s.current;if(a===null)return;const n=a.previousElementSibling??a,{top:g,bottom:b,left:u,width:S}=n.getBoundingClientRect();l(window.innerHeight),r(h=>h!==void 0&&h.top===g&&h.bottom===b&&h.left===u&&h.width===S?h:{top:g,bottom:b,left:u,width:S})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:s,rect:o,viewportHeight:i}},j=(e,s)=>{const[o,r]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!o;return d.useEffect(()=>{r(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=a=>{var S,h;const n=a.target;if(!(n instanceof Node))return;const g=(S=s.current)==null?void 0:S.previousElementSibling,b=((h=i.current)==null?void 0:h.contains(n))??!1,u=(g==null?void 0:g.contains(n))??!1;!b&&!u&&r(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,s]),d.useEffect(()=>{var n;const c=(n=s.current)==null?void 0:n.previousElementSibling;if(c==null)return;const a=()=>r(!1);return c.addEventListener("focusin",a),()=>c.removeEventListener("focusin",a)},[s]),{isOpen:l,panelRef:i}},W=e=>e instanceof p.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",Q=(e,s)=>e.bottom>0&&e.top<s,U=(e,s)=>{const o=s-e.bottom-8-16,r=e.top-8-16,i={left:e.left,width:e.width};return o<200&&r>o?{...i,bottom:s-e.top+8,maxHeight:Math.max(r,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(o,0)}},z=(e,s,o)=>{const r=s.response;switch(s.status){case p.SearchStatus.LOADING:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",s.query,"”…"]});case p.SearchStatus.ERROR:return t.jsxs("div",{className:"dialog-search-error",children:[t.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:W(s.error)}),t.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case p.SearchStatus.EMPTY:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",r==null?void 0:r.query,"”."]});case p.SearchStatus.SUCCESS:return r===void 0?null:t.jsxs(t.Fragment,{children:[t.jsxs("p",{role:"status",className:"dialog-search-status",children:[r.nbHits," result",r.nbHits>1?"s":""]}),t.jsx("ul",{className:"dialog-search-results",children:r.hits.map((i,l)=>t.jsx(P,{controller:e,hit:i,index:l,locale:o},i.id))}),t.jsx(w,{controller:e,state:s})]});default:return null}},G=({controller:e,state:s,locale:o})=>{const r=s.status!==p.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=X(r),{isOpen:a,panelRef:n}=j(s,i);return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:i}),a&&l!==void 0&&Q(l,c)&&E.createPortal(t.jsx("div",{ref:n,className:"dialog-search-panel",style:U(l,c),children:z(e,s,o)}),document.body)]})},Z={status:p.SearchStatus.IDLE,query:"",page:0},Y=e=>{const s=d.useRef(e);s.current=e;const o=d.useRef(void 0),r=d.useCallback(()=>{if(o.current===void 0){const{client:n,surface:g="search_page",...b}=s.current;o.current=p.createSearchController({search:(u,S)=>n.search(u,S),analytics:{surface:g,trackViewSearchResults:u=>n.trackViewSearchResults(u),trackSelectSearchResult:u=>n.trackSelectSearchResult(u)},...b})}return o.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:n=>r().setQuery(n),submit:n=>r().submit(n),setPage:n=>r().setPage(n),retry:()=>r().retry(),observeResult:(n,g)=>r().observeResult(n,g),selectResult:(n,g)=>r().selectResult(n,g),subscribe:n=>r().subscribe(n),getState:()=>r().getState(),dispose:()=>{var n;(n=o.current)==null||n.dispose(),o.current=void 0}}),d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.1"});const n=r();return()=>{n.dispose(),o.current===n&&(o.current=void 0)}},[r]);const l=d.useCallback(n=>r().subscribe(n),[r]),c=d.useCallback(()=>r().getState(),[r]),a=d.useSyncExternalStore(l,c,()=>Z);return{controller:i.current,state:a}};f.DialogInput=y,f.DialogProductBlock=T,f.DialogSearchBar=V,f.DialogSearchPagination=w,f.DialogSearchProductCard=P,f.DialogSearchResults=G,f.useDialogSearch=Y,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(f,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],s):(f=typeof globalThis<"u"?globalThis:f||self,s(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,s,d,b,P){"use strict";const m=({title:e="Your expert",description:t="A question about this product?"})=>s.jsxs("div",{className:"dialog-block-header-container",children:[s.jsx("div",{className:"dialog-block-title",children:e}),s.jsx("div",{className:"dialog-block-description",children:t})]}),E=({color:e="#181825"})=>s.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[s.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),s.jsx("defs",{children:s.jsx("clipPath",{id:"clip0_466_934",children:s.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),L=({client:e,questions:t,productId:r,productTitle:o,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return s.jsx(s.Fragment,{children:t.map(c=>s.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[s.jsx(E,{color:e.theme.primaryColor}),s.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),_=({client:e,questions:t,isLoading:r,productId:o,productTitle:i,selectedVariantId:l})=>s.jsx("div",{className:"dialog-block-suggestions-container",children:r||!t?s.jsx(D,{}):s.jsx(L,{client:e,questions:t,productId:o,productTitle:i,selectedVariantId:l})}),A=({color:e="#ffffff"})=>s.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:t="Ask anything...",productId:r,productTitle:o,selectedVariantId:i})=>{const l=d.useRef(null),[c,n]=d.useState(""),a=()=>{var u;(u=l.current)==null||u.focus()},h=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),n(""))},S=u=>{u.key==="Enter"&&h()};return s.jsxs("div",{className:"dialog-input-wrapper",onClick:a,children:[s.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>n(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:S}),s.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:h,children:s.jsx(A,{color:e.theme.ctaTextColor})})]})},w=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),I=e=>{if(!e)return;const t=document.body;Object.keys(e).forEach(r=>{const o=r,i=w(r);if(e[o]!==void 0){if(typeof e[o]=="object"){Object.keys(e[o]).forEach(l=>{var n;const c=l;if(c!==void 0){const a=w(l),h=e[o];t.style.setProperty(`--dialog-theme-${i}-${a}`,(n=h[c])==null?void 0:n.toString())}});return}if(o==="ctaBorderType"){const l=e[o]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${i}`,l);return}t.style.setProperty(`--dialog-theme-${i}`,e[o].toString())}})},M=({theme:e,children:t})=>(d.useEffect(()=>{e&&I(e)},[e]),s.jsx(s.Fragment,{children:t})),F=({client:e,productId:t,productTitle:r,selectedVariantId:o,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[n,a]=d.useState(void 0);d.useEffect(()=>{b.registerDialogInstallation({method:"react",version:"2.4.0"}),b.addAuditCapability("pdp-block")},[]);const h=d.useMemo(()=>l?"":n==null?void 0:n.assistantName,[n,l]),S=d.useMemo(()=>l?"":n==null?void 0:n.description,[n,l]),u=d.useMemo(()=>l?"":n==null?void 0:n.inputPlaceholder,[n,l]),p=d.useMemo(()=>{var g;return b.resolveTextDirection((g=e.getLocalizationInformations())==null?void 0:g.languageCode)},[e]);return d.useEffect(()=>{let g=!0;return(async()=>{c(!0),a(void 0);try{const C=await e.getSuggestions(t);g&&a(C)}catch(C){console.error("error",C)}finally{g&&c(!1)}})(),()=>{g=!1}},[e,t]),s.jsx(M,{theme:e.theme,children:s.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:p,children:[s.jsx(m,{title:h,description:S}),s.jsx(_,{client:e,questions:n==null?void 0:n.questions,isLoading:l,productId:t,productTitle:r,selectedVariantId:o}),i&&s.jsx(y,{client:e,placeholder:u,productId:t,productTitle:r,selectedVariantId:o})]})})},O=()=>s.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:s.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),T="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",B=({color:e="currentColor"})=>s.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:s.jsx("path",{d:T,fill:e})}),q=({controller:e,placeholder:t="Search products...",autoFocus:r=!1,submitAriaLabel:o="Search"})=>{const[i,l]=d.useState(""),c=n=>{n.preventDefault(),e.submit(i)};return s.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[s.jsxs("div",{className:"dialog-search-bar-field",children:[s.jsx("span",{className:"dialog-search-bar-icon",children:s.jsx(B,{})}),s.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":t,placeholder:t,autoFocus:r,onChange:n=>{l(n.target.value),e.setQuery(n.target.value)}})]}),s.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":o,children:s.jsx(O,{})})]})},N=({controller:e,state:t})=>{const r=t.response;return r===void 0||r.nbPages<=1?null:s.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[s.jsx("button",{type:"button",disabled:r.page===0,onClick:()=>e.setPage(r.page-1),children:"Previous"}),s.jsxs("span",{children:["Page ",r.page+1," / ",r.nbPages]}),s.jsx("button",{type:"button",disabled:r.page>=r.nbPages-1,onClick:()=>e.setPage(r.page+1),children:"Next"})]})},v=({amount:e,currencyCode:t},r)=>t===void 0?new Intl.NumberFormat(r).format(Number(e)):new Intl.NumberFormat(r,{style:"currency",currency:t}).format(Number(e)),H=({min:e,max:t},r)=>e.amount===t.amount?v(e,r):`${v(e,r)} – ${v(t,r)}`,V=(e,t)=>{if(e===void 0)return"";try{return H(e,t)}catch{return""}},x=e=>{try{const{protocol:t}=new URL(e,window.location.href);return t==="http:"||t==="https:"?e:void 0}catch{return}},k=({controller:e,hit:t,index:r,locale:o})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,r)},[e,t,r]);const l=u=>{const p=u.metaKey||u.ctrlKey||u.shiftKey||u.altKey;e.selectResult(r,{navigate:!p})&&u.preventDefault()},c=u=>{u.button===1&&e.selectResult(r,{navigate:!1})},n=t.title??t.objectID,a=V(t.priceRange,o),h=t.url===void 0?void 0:x(t.url),S=s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"dialog-search-card-image",children:t.imageUrl!==void 0&&s.jsx("img",{src:t.imageUrl,alt:n,loading:"lazy"})}),s.jsxs("div",{className:"dialog-search-card-info",children:[s.jsx("p",{className:"dialog-search-card-title",children:n}),a!==""&&s.jsx("p",{className:"dialog-search-card-price",children:a})]})]});return s.jsx("li",{ref:i,className:"dialog-search-card",children:h===void 0?s.jsx("div",{className:"dialog-search-card-body",children:S}):s.jsx("a",{className:"dialog-search-card-body",href:h,onClick:l,onAuxClick:c,children:S})})},K=e=>{const t=d.useRef(null),[r,o]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const n=t.current;if(n===null)return;const a=n.previousElementSibling??n,{top:h,bottom:S,left:u,width:p}=a.getBoundingClientRect();l(window.innerHeight),o(g=>g!==void 0&&g.top===h&&g.bottom===S&&g.left===u&&g.width===p?g:{top:h,bottom:S,left:u,width:p})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:t,rect:r,viewportHeight:i}},$=(e,t)=>{const[r,o]=d.useState(!1),i=d.useRef(null),l=e.status!==b.SearchStatus.IDLE&&!r;return d.useEffect(()=>{o(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=n=>{var p,g;const a=n.target;if(!(a instanceof Node))return;const h=(p=t.current)==null?void 0:p.previousElementSibling,S=((g=i.current)==null?void 0:g.contains(a))??!1,u=(h==null?void 0:h.contains(a))??!1;!S&&!u&&o(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,t]),d.useEffect(()=>{var a;const c=(a=t.current)==null?void 0:a.previousElementSibling;if(c==null)return;const n=()=>o(!1);return c.addEventListener("focusin",n),()=>c.removeEventListener("focusin",n)},[t]),{isOpen:l,panelRef:i}},X=e=>e instanceof b.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",j=(e,t)=>e.bottom>0&&e.top<t,W=(e,t)=>{const r=t-e.bottom-8-16,o=e.top-8-16,i={left:e.left,width:e.width};return r<200&&o>r?{...i,bottom:t-e.top+8,maxHeight:Math.max(o,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(r,0)}},Q=(e,t,r)=>{const o=t.response;switch(t.status){case b.SearchStatus.LOADING:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",t.query,"”…"]});case b.SearchStatus.ERROR:return s.jsxs("div",{className:"dialog-search-error",children:[s.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:X(t.error)}),s.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case b.SearchStatus.EMPTY:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",o==null?void 0:o.query,"”."]});case b.SearchStatus.SUCCESS:return o===void 0?null:s.jsxs(s.Fragment,{children:[s.jsxs("p",{role:"status",className:"dialog-search-status",children:[o.nbHits," result",o.nbHits>1?"s":""]}),s.jsx("ul",{className:"dialog-search-results",children:o.hits.map((i,l)=>s.jsx(k,{controller:e,hit:i,index:l,locale:r},i.objectID))}),s.jsx(N,{controller:e,state:t})]});default:return null}},U=({controller:e,state:t,locale:r})=>{const o=t.status!==b.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=K(o),{isOpen:n,panelRef:a}=$(t,i);return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:i}),n&&l!==void 0&&j(l,c)&&P.createPortal(s.jsx("div",{ref:a,className:"dialog-search-panel",style:W(l,c),children:Q(e,t,r)}),document.body)]})},z={status:b.SearchStatus.IDLE,query:"",page:0},G=e=>{const t=d.useRef(e);t.current=e;const r=d.useRef(void 0),o=d.useCallback(()=>{if(r.current===void 0){const{client:a,surface:h="search_page",locale:S=a.locale,...u}=t.current;r.current=b.createSearchController({search:(p,g)=>a.search(p,g),locale:S,analytics:{surface:h,trackViewSearchResults:p=>a.trackViewSearchResults(p),trackSelectSearchResult:p=>a.trackSelectSearchResult(p)},...u})}return r.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:a=>o().setQuery(a),submit:a=>o().submit(a),setPage:a=>o().setPage(a),retry:()=>o().retry(),observeResult:(a,h)=>o().observeResult(a,h),selectResult:(a,h)=>o().selectResult(a,h),subscribe:a=>o().subscribe(a),getState:()=>o().getState(),dispose:()=>{var a;(a=r.current)==null||a.dispose(),r.current=void 0}}),d.useEffect(()=>{b.registerDialogInstallation({method:"react",version:"2.4.0"});const a=o();return()=>{a.dispose(),r.current===a&&(r.current=void 0)}},[o]);const l=d.useCallback(a=>o().subscribe(a),[o]),c=d.useCallback(()=>o().getState(),[o]),n=d.useSyncExternalStore(l,c,()=>z);return{controller:i.current,state:n}};f.DialogInput=y,f.DialogProductBlock=F,f.DialogSearchBar=q,f.DialogSearchPagination=N,f.DialogSearchProductCard=k,f.DialogSearchResults=U,f.useDialogSearch=G,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@askdialog/dialog-react",
3
- "version": "2.3.1",
3
+ "version": "2.4.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/dialog-react.umd.js",
@@ -26,7 +26,7 @@
26
26
  "devDependencies": {
27
27
  "@types/react": "^19.2.7",
28
28
  "@types/react-dom": "^19.2.3",
29
- "@askdialog/dialog-sdk": "2.9.0"
29
+ "@askdialog/dialog-sdk": "2.10.0"
30
30
  },
31
31
  "author": "Dialog",
32
32
  "publishConfig": {