@askdialog/dialog-react 0.0.0-beta-20260909090007 → 0.0.0-beta-20260911075342
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.
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ import '@askdialog/dialog-react/style.css';
|
|
|
38
38
|
|
|
39
39
|
const client = new Dialog({
|
|
40
40
|
apiKey: 'your-api-key',
|
|
41
|
-
locale: 'en',
|
|
41
|
+
locale: 'en', currency: 'EUR',
|
|
42
42
|
callbacks: {
|
|
43
43
|
addToCart: () => Promise.resolve(),
|
|
44
44
|
getProduct: () => Promise.resolve({
|
|
@@ -105,7 +105,7 @@ Standalone input component for asking questions.
|
|
|
105
105
|
|
|
106
106
|
### Storefront search
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
`useDialogSearch` binds the SDK controller to component state. The controller manages requests and analytics; components handle rendering and navigation.
|
|
109
109
|
|
|
110
110
|
```tsx
|
|
111
111
|
import { Dialog } from '@askdialog/dialog-sdk';
|
|
@@ -116,10 +116,10 @@ import {
|
|
|
116
116
|
} from '@askdialog/dialog-react';
|
|
117
117
|
import '@askdialog/dialog-react/style.css';
|
|
118
118
|
|
|
119
|
-
const client = new Dialog({ apiKey: 'your-api-key', locale: 'en' });
|
|
119
|
+
const client = new Dialog({ apiKey: 'your-api-key', locale: 'en-US', currency: 'USD' });
|
|
120
120
|
|
|
121
121
|
function SearchPage() {
|
|
122
|
-
const { controller, state } = useDialogSearch({ client });
|
|
122
|
+
const { controller, state } = useDialogSearch({ client, language: 'en', currency: client.currency });
|
|
123
123
|
|
|
124
124
|
return (
|
|
125
125
|
<>
|
|
@@ -136,11 +136,14 @@ Creates one search controller per hook instance and disposes it on unmount.
|
|
|
136
136
|
|
|
137
137
|
**Options:**
|
|
138
138
|
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
139
|
+
- `language` (string, required) - Lowercase ISO 639-1 language code, e.g. `fr`
|
|
140
|
+
- `currency` (string, required) - ISO 4217 currency, e.g. `EUR`
|
|
139
141
|
- `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)
|
|
140
142
|
- `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
143
|
- `debounceMs` (number, optional) - Keystroke debounce (default: 250)
|
|
142
144
|
- `hitsPerPage` (number, optional) - Results per page (default: 12)
|
|
143
|
-
|
|
145
|
+
|
|
146
|
+
Search language and currency are explicit and independent of `client.locale`, which can be a regional locale such as `fr-FR`.
|
|
144
147
|
|
|
145
148
|
**Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
|
|
146
149
|
|
|
@@ -161,7 +164,6 @@ Floating results panel overlaying the page content: portaled to `document.body`
|
|
|
161
164
|
**Props:**
|
|
162
165
|
- `controller` (SearchController) - From `useDialogSearch` (required)
|
|
163
166
|
- `state` (SearchControllerState) - From `useDialogSearch` (required)
|
|
164
|
-
- `locale` (string, optional) - BCP 47 locale used to format the card prices via `Intl.NumberFormat` (browser default when omitted)
|
|
165
167
|
|
|
166
168
|
#### DialogSearchPagination
|
|
167
169
|
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { Dialog, SearchController, SearchControllerState, SearchHit, SearchSurface } from '@askdialog/dialog-sdk';
|
|
2
2
|
export interface UseDialogSearchOptions {
|
|
3
3
|
client: Dialog;
|
|
4
|
-
/**
|
|
4
|
+
/** Lowercase ISO 639-1 language code, e.g. `fr`. */
|
|
5
|
+
language: string;
|
|
6
|
+
/** ISO 4217 currency, independent of language. */
|
|
7
|
+
currency: string;
|
|
8
|
+
/** UI surface used in search analytics. */
|
|
5
9
|
surface?: SearchSurface;
|
|
6
|
-
/**
|
|
10
|
+
/** Navigate after recording selection; omit to use native links. */
|
|
7
11
|
navigate?: (url: string, hit: SearchHit) => void;
|
|
8
12
|
debounceMs?: number;
|
|
9
13
|
hitsPerPage?: number;
|
|
10
|
-
/** Storefront locale for the searched index (`products_fr`); defaults to the client's. */
|
|
11
|
-
locale?: string;
|
|
12
14
|
}
|
|
13
15
|
export interface DialogSearch {
|
|
14
16
|
controller: SearchController;
|
|
15
17
|
state: SearchControllerState;
|
|
16
18
|
}
|
|
17
|
-
/** Options are
|
|
19
|
+
/** Options are fixed when the controller is created. */
|
|
18
20
|
export declare const useDialogSearch: (options: UseDialogSearchOptions) => DialogSearch;
|
package/dist/dialog-react.js
CHANGED
|
@@ -47,13 +47,13 @@ const H = ({
|
|
|
47
47
|
questions: t,
|
|
48
48
|
productId: s,
|
|
49
49
|
productTitle: r,
|
|
50
|
-
selectedVariantId:
|
|
50
|
+
selectedVariantId: a
|
|
51
51
|
}) => {
|
|
52
52
|
const c = (l) => {
|
|
53
53
|
e.sendProductMessage({
|
|
54
54
|
productId: s,
|
|
55
55
|
productTitle: r,
|
|
56
|
-
selectedVariantId:
|
|
56
|
+
selectedVariantId: a,
|
|
57
57
|
question: l,
|
|
58
58
|
fromQuestionSuggestion: !0
|
|
59
59
|
});
|
|
@@ -79,7 +79,7 @@ const H = ({
|
|
|
79
79
|
questions: t,
|
|
80
80
|
isLoading: s,
|
|
81
81
|
productId: r,
|
|
82
|
-
productTitle:
|
|
82
|
+
productTitle: a,
|
|
83
83
|
selectedVariantId: c
|
|
84
84
|
}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(O, {}) : /* @__PURE__ */ n(
|
|
85
85
|
j,
|
|
@@ -87,7 +87,7 @@ const H = ({
|
|
|
87
87
|
client: e,
|
|
88
88
|
questions: t,
|
|
89
89
|
productId: r,
|
|
90
|
-
productTitle:
|
|
90
|
+
productTitle: a,
|
|
91
91
|
selectedVariantId: c
|
|
92
92
|
}
|
|
93
93
|
) }), T = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
|
|
@@ -114,9 +114,9 @@ const H = ({
|
|
|
114
114
|
placeholder: t = "Ask anything...",
|
|
115
115
|
productId: s,
|
|
116
116
|
productTitle: r,
|
|
117
|
-
selectedVariantId:
|
|
117
|
+
selectedVariantId: a
|
|
118
118
|
}) => {
|
|
119
|
-
const c = v(null), [l,
|
|
119
|
+
const c = v(null), [l, i] = C(""), o = () => {
|
|
120
120
|
var d;
|
|
121
121
|
(d = c.current) == null || d.focus();
|
|
122
122
|
}, u = () => {
|
|
@@ -124,10 +124,10 @@ const H = ({
|
|
|
124
124
|
d.trim() && (e.sendProductMessage({
|
|
125
125
|
productId: s,
|
|
126
126
|
productTitle: r,
|
|
127
|
-
selectedVariantId:
|
|
127
|
+
selectedVariantId: a,
|
|
128
128
|
question: d,
|
|
129
129
|
fromQuestionSuggestion: !0
|
|
130
|
-
}),
|
|
130
|
+
}), i(""));
|
|
131
131
|
};
|
|
132
132
|
return /* @__PURE__ */ h("div", { className: "dialog-input-wrapper", onClick: o, children: [
|
|
133
133
|
/* @__PURE__ */ n(
|
|
@@ -136,7 +136,7 @@ const H = ({
|
|
|
136
136
|
id: "dialog-ask-anything-input-ai-input",
|
|
137
137
|
ref: c,
|
|
138
138
|
value: l,
|
|
139
|
-
onChange: (d) =>
|
|
139
|
+
onChange: (d) => i(d.target.value),
|
|
140
140
|
className: "dialog-ask-anything-input-ai-input",
|
|
141
141
|
placeholder: t,
|
|
142
142
|
onKeyDown: (d) => {
|
|
@@ -159,18 +159,18 @@ const H = ({
|
|
|
159
159
|
if (!e) return;
|
|
160
160
|
const t = document.body;
|
|
161
161
|
Object.keys(e).forEach((s) => {
|
|
162
|
-
const 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
|
|
167
|
+
var i;
|
|
168
168
|
const l = c;
|
|
169
169
|
if (l !== void 0) {
|
|
170
170
|
const o = P(c), u = e[r];
|
|
171
171
|
t.style.setProperty(
|
|
172
|
-
`--dialog-theme-${
|
|
173
|
-
(
|
|
172
|
+
`--dialog-theme-${a}-${o}`,
|
|
173
|
+
(i = u[l]) == null ? void 0 : i.toString()
|
|
174
174
|
);
|
|
175
175
|
}
|
|
176
176
|
}
|
|
@@ -179,11 +179,11 @@ const H = ({
|
|
|
179
179
|
}
|
|
180
180
|
if (r === "ctaBorderType") {
|
|
181
181
|
const c = e[r] === "rounded" ? "24px" : "0";
|
|
182
|
-
t.style.setProperty(`--dialog-theme-${
|
|
182
|
+
t.style.setProperty(`--dialog-theme-${a}`, c);
|
|
183
183
|
return;
|
|
184
184
|
}
|
|
185
185
|
t.style.setProperty(
|
|
186
|
-
`--dialog-theme-${
|
|
186
|
+
`--dialog-theme-${a}`,
|
|
187
187
|
e[r].toString()
|
|
188
188
|
);
|
|
189
189
|
}
|
|
@@ -195,27 +195,27 @@ const H = ({
|
|
|
195
195
|
productId: t,
|
|
196
196
|
productTitle: s,
|
|
197
197
|
selectedVariantId: r,
|
|
198
|
-
enableInput:
|
|
198
|
+
enableInput: a = !0
|
|
199
199
|
}) => {
|
|
200
|
-
const [c, l] = C(!0), [
|
|
200
|
+
const [c, l] = C(!0), [i, o] = C(
|
|
201
201
|
void 0
|
|
202
202
|
);
|
|
203
203
|
f(() => {
|
|
204
204
|
R({
|
|
205
205
|
method: "react",
|
|
206
|
-
version: "0.0.0-beta-
|
|
206
|
+
version: "0.0.0-beta-20260911075342"
|
|
207
207
|
}), A("pdp-block");
|
|
208
208
|
}, []);
|
|
209
209
|
const u = w(
|
|
210
|
-
() => c ? "" :
|
|
211
|
-
[
|
|
212
|
-
), p = w(
|
|
213
|
-
() => c ? "" : a == null ? void 0 : a.description,
|
|
214
|
-
[a, c]
|
|
215
|
-
), d = w(
|
|
216
|
-
() => c ? "" : a == null ? void 0 : a.inputPlaceholder,
|
|
217
|
-
[a, c]
|
|
210
|
+
() => c ? "" : i == null ? void 0 : i.assistantName,
|
|
211
|
+
[i, c]
|
|
218
212
|
), m = 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
|
+
), p = w(
|
|
219
219
|
() => {
|
|
220
220
|
var g;
|
|
221
221
|
return I((g = e.getLocalizationInformations()) == null ? void 0 : g.languageCode);
|
|
@@ -242,21 +242,21 @@ const H = ({
|
|
|
242
242
|
{
|
|
243
243
|
id: "dialog-instant",
|
|
244
244
|
className: "dialog-block-container",
|
|
245
|
-
dir:
|
|
245
|
+
dir: p,
|
|
246
246
|
children: [
|
|
247
|
-
/* @__PURE__ */ n(H, { title: u, description:
|
|
247
|
+
/* @__PURE__ */ n(H, { title: u, description: m }),
|
|
248
248
|
/* @__PURE__ */ n(
|
|
249
249
|
$,
|
|
250
250
|
{
|
|
251
251
|
client: e,
|
|
252
|
-
questions:
|
|
252
|
+
questions: i == null ? void 0 : i.questions,
|
|
253
253
|
isLoading: c,
|
|
254
254
|
productId: t,
|
|
255
255
|
productTitle: s,
|
|
256
256
|
selectedVariantId: r
|
|
257
257
|
}
|
|
258
258
|
),
|
|
259
|
-
|
|
259
|
+
a && /* @__PURE__ */ n(
|
|
260
260
|
V,
|
|
261
261
|
{
|
|
262
262
|
client: e,
|
|
@@ -308,9 +308,9 @@ const H = ({
|
|
|
308
308
|
autoFocus: s = !1,
|
|
309
309
|
submitAriaLabel: r = "Search"
|
|
310
310
|
}) => {
|
|
311
|
-
const [
|
|
312
|
-
return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (
|
|
313
|
-
|
|
311
|
+
const [a, c] = C("");
|
|
312
|
+
return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (i) => {
|
|
313
|
+
i.preventDefault(), e.submit(a);
|
|
314
314
|
}, children: [
|
|
315
315
|
/* @__PURE__ */ h("div", { className: "dialog-search-bar-field", children: [
|
|
316
316
|
/* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(W, {}) }),
|
|
@@ -320,12 +320,12 @@ const H = ({
|
|
|
320
320
|
type: "text",
|
|
321
321
|
name: "dialog-search-query",
|
|
322
322
|
className: "dialog-search-bar-input",
|
|
323
|
-
value:
|
|
323
|
+
value: a,
|
|
324
324
|
"aria-label": t,
|
|
325
325
|
placeholder: t,
|
|
326
326
|
autoFocus: s,
|
|
327
|
-
onChange: (
|
|
328
|
-
c(
|
|
327
|
+
onChange: (i) => {
|
|
328
|
+
c(i.target.value), e.setQuery(i.target.value);
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
)
|
|
@@ -395,64 +395,64 @@ const H = ({
|
|
|
395
395
|
index: s,
|
|
396
396
|
locale: r
|
|
397
397
|
}) => {
|
|
398
|
-
const
|
|
398
|
+
const a = v(null);
|
|
399
399
|
f(() => {
|
|
400
|
-
|
|
400
|
+
a.current !== null && e.observeResult(a.current, s);
|
|
401
401
|
}, [e, t, s]);
|
|
402
402
|
const c = (d) => {
|
|
403
|
-
const
|
|
404
|
-
e.selectResult(s, { navigate: !
|
|
403
|
+
const p = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
|
|
404
|
+
e.selectResult(s, { navigate: !p }) && d.preventDefault();
|
|
405
405
|
}, l = (d) => {
|
|
406
406
|
d.button === 1 && e.selectResult(s, { navigate: !1 });
|
|
407
|
-
},
|
|
408
|
-
/* @__PURE__ */ n("div", { className: "dialog-search-card-image", children: t.imageUrl !== void 0 && /* @__PURE__ */ n("img", { src: t.imageUrl, alt:
|
|
407
|
+
}, i = t.title ?? t.objectID, o = X(t.priceRange, r), u = t.url === void 0 ? void 0 : G(t.url), m = /* @__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
409
|
/* @__PURE__ */ h("div", { className: "dialog-search-card-info", children: [
|
|
410
|
-
/* @__PURE__ */ n("p", { className: "dialog-search-card-title", children:
|
|
410
|
+
/* @__PURE__ */ n("p", { className: "dialog-search-card-title", children: i }),
|
|
411
411
|
o !== "" && /* @__PURE__ */ n("p", { className: "dialog-search-card-price", children: o })
|
|
412
412
|
] })
|
|
413
413
|
] });
|
|
414
|
-
return /* @__PURE__ */ n("li", { ref:
|
|
414
|
+
return /* @__PURE__ */ n("li", { ref: a, className: "dialog-search-card", children: u === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: m }) : /* @__PURE__ */ n(
|
|
415
415
|
"a",
|
|
416
416
|
{
|
|
417
417
|
className: "dialog-search-card-body",
|
|
418
418
|
href: u,
|
|
419
419
|
onClick: c,
|
|
420
420
|
onAuxClick: l,
|
|
421
|
-
children:
|
|
421
|
+
children: m
|
|
422
422
|
}
|
|
423
423
|
) });
|
|
424
424
|
}, J = (e) => {
|
|
425
|
-
const t = v(null), [s, r] = C(void 0), [
|
|
425
|
+
const t = v(null), [s, r] = C(void 0), [a, c] = C(0);
|
|
426
426
|
return D(() => {
|
|
427
427
|
if (!e)
|
|
428
428
|
return;
|
|
429
429
|
const l = () => {
|
|
430
|
-
const
|
|
431
|
-
if (
|
|
430
|
+
const i = t.current;
|
|
431
|
+
if (i === null)
|
|
432
432
|
return;
|
|
433
|
-
const o =
|
|
433
|
+
const o = i.previousElementSibling ?? i, { top: u, bottom: m, left: d, width: p } = o.getBoundingClientRect();
|
|
434
434
|
c(window.innerHeight), r(
|
|
435
|
-
(g) => g !== void 0 && g.top === u && g.bottom ===
|
|
435
|
+
(g) => g !== void 0 && g.top === u && g.bottom === m && g.left === d && g.width === p ? g : { top: u, bottom: m, left: d, width: p }
|
|
436
436
|
);
|
|
437
437
|
};
|
|
438
438
|
return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
|
|
439
439
|
window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
|
|
440
440
|
};
|
|
441
|
-
}, [e]), { anchorRef: t, rect: s, viewportHeight:
|
|
441
|
+
}, [e]), { anchorRef: t, rect: s, viewportHeight: a };
|
|
442
442
|
}, ee = (e, t) => {
|
|
443
|
-
const [s, r] = C(!1),
|
|
443
|
+
const [s, r] = C(!1), a = v(null), c = e.status !== b.IDLE && !s;
|
|
444
444
|
return f(() => {
|
|
445
445
|
r(!1);
|
|
446
446
|
}, [e.query]), f(() => {
|
|
447
447
|
if (!c)
|
|
448
448
|
return;
|
|
449
|
-
const l = (
|
|
450
|
-
var
|
|
451
|
-
const o =
|
|
449
|
+
const l = (i) => {
|
|
450
|
+
var p, g;
|
|
451
|
+
const o = i.target;
|
|
452
452
|
if (!(o instanceof Node))
|
|
453
453
|
return;
|
|
454
|
-
const u = (
|
|
455
|
-
!
|
|
454
|
+
const u = (p = t.current) == null ? void 0 : p.previousElementSibling, m = ((g = a.current) == null ? void 0 : g.contains(o)) ?? !1, d = (u == null ? void 0 : u.contains(o)) ?? !1;
|
|
455
|
+
!m && !d && r(!0);
|
|
456
456
|
};
|
|
457
457
|
return document.addEventListener("pointerdown", l), () => document.removeEventListener("pointerdown", l);
|
|
458
458
|
}, [c, t]), f(() => {
|
|
@@ -460,17 +460,17 @@ const H = ({
|
|
|
460
460
|
const l = (o = t.current) == null ? void 0 : o.previousElementSibling;
|
|
461
461
|
if (l == null)
|
|
462
462
|
return;
|
|
463
|
-
const
|
|
464
|
-
return l.addEventListener("focusin",
|
|
465
|
-
}, [t]), { isOpen: c, panelRef:
|
|
463
|
+
const i = () => r(!1);
|
|
464
|
+
return l.addEventListener("focusin", i), () => l.removeEventListener("focusin", i);
|
|
465
|
+
}, [t]), { isOpen: c, panelRef: a };
|
|
466
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,
|
|
467
|
+
const s = t - e.bottom - S - E, r = e.top - S - E, a = { left: e.left, width: e.width };
|
|
468
468
|
return s < te && r > s ? {
|
|
469
|
-
...
|
|
469
|
+
...a,
|
|
470
470
|
bottom: t - e.top + S,
|
|
471
471
|
maxHeight: Math.max(r, 0)
|
|
472
472
|
} : {
|
|
473
|
-
...
|
|
473
|
+
...a,
|
|
474
474
|
top: e.bottom + S,
|
|
475
475
|
maxHeight: Math.max(s, 0)
|
|
476
476
|
};
|
|
@@ -516,15 +516,15 @@ const H = ({
|
|
|
516
516
|
" result",
|
|
517
517
|
r.nbHits > 1 ? "s" : ""
|
|
518
518
|
] }),
|
|
519
|
-
/* @__PURE__ */ n("ul", { className: "dialog-search-results", children: r.hits.map((
|
|
519
|
+
/* @__PURE__ */ n("ul", { className: "dialog-search-results", children: r.hits.map((a, c) => /* @__PURE__ */ n(
|
|
520
520
|
Y,
|
|
521
521
|
{
|
|
522
522
|
controller: e,
|
|
523
|
-
hit:
|
|
523
|
+
hit: a,
|
|
524
524
|
index: c,
|
|
525
525
|
locale: s
|
|
526
526
|
},
|
|
527
|
-
|
|
527
|
+
a.objectID
|
|
528
528
|
)) }),
|
|
529
529
|
/* @__PURE__ */ n(z, { controller: e, state: t })
|
|
530
530
|
] });
|
|
@@ -536,10 +536,10 @@ const H = ({
|
|
|
536
536
|
state: t,
|
|
537
537
|
locale: s
|
|
538
538
|
}) => {
|
|
539
|
-
const r = t.status !== b.IDLE, { anchorRef:
|
|
539
|
+
const r = t.status !== b.IDLE, { anchorRef: a, rect: c, viewportHeight: l } = J(r), { isOpen: i, panelRef: o } = ee(t, a);
|
|
540
540
|
return /* @__PURE__ */ h(y, { children: [
|
|
541
|
-
/* @__PURE__ */ n("div", { ref:
|
|
542
|
-
|
|
541
|
+
/* @__PURE__ */ n("div", { ref: a }),
|
|
542
|
+
i && c !== void 0 && re(c, l) && _(
|
|
543
543
|
/* @__PURE__ */ n(
|
|
544
544
|
"div",
|
|
545
545
|
{
|
|
@@ -552,7 +552,7 @@ const H = ({
|
|
|
552
552
|
document.body
|
|
553
553
|
)
|
|
554
554
|
] });
|
|
555
|
-
},
|
|
555
|
+
}, ie = {
|
|
556
556
|
status: b.IDLE,
|
|
557
557
|
query: "",
|
|
558
558
|
page: 0
|
|
@@ -561,26 +561,20 @@ const H = ({
|
|
|
561
561
|
t.current = e;
|
|
562
562
|
const s = v(void 0), r = N(() => {
|
|
563
563
|
if (s.current === void 0) {
|
|
564
|
-
const {
|
|
565
|
-
client: o,
|
|
566
|
-
surface: u = "search_page",
|
|
567
|
-
locale: p = o.locale,
|
|
568
|
-
...d
|
|
569
|
-
} = t.current;
|
|
564
|
+
const { client: o, surface: u = "search_page", ...m } = t.current;
|
|
570
565
|
s.current = B({
|
|
571
|
-
search: (
|
|
572
|
-
locale: p,
|
|
566
|
+
search: (d, p) => o.search(d, p),
|
|
573
567
|
analytics: {
|
|
574
568
|
surface: u,
|
|
575
|
-
trackViewSearchResults: (
|
|
576
|
-
trackSelectSearchResult: (
|
|
569
|
+
trackViewSearchResults: (d) => o.trackViewSearchResults(d),
|
|
570
|
+
trackSelectSearchResult: (d) => o.trackSelectSearchResult(d)
|
|
577
571
|
},
|
|
578
|
-
...
|
|
572
|
+
...m
|
|
579
573
|
});
|
|
580
574
|
}
|
|
581
575
|
return s.current;
|
|
582
|
-
}, []),
|
|
583
|
-
|
|
576
|
+
}, []), a = v(void 0);
|
|
577
|
+
a.current ?? (a.current = {
|
|
584
578
|
setQuery: (o) => r().setQuery(o),
|
|
585
579
|
submit: (o) => r().submit(o),
|
|
586
580
|
setPage: (o) => r().setPage(o),
|
|
@@ -589,8 +583,7 @@ const H = ({
|
|
|
589
583
|
selectResult: (o, u) => r().selectResult(o, u),
|
|
590
584
|
subscribe: (o) => r().subscribe(o),
|
|
591
585
|
getState: () => r().getState(),
|
|
592
|
-
//
|
|
593
|
-
// dispatching into the disposed one; never create a controller here.
|
|
586
|
+
// Create a replacement on next access after disposal.
|
|
594
587
|
dispose: () => {
|
|
595
588
|
var o;
|
|
596
589
|
(o = s.current) == null || o.dispose(), s.current = void 0;
|
|
@@ -598,7 +591,7 @@ const H = ({
|
|
|
598
591
|
}), f(() => {
|
|
599
592
|
R({
|
|
600
593
|
method: "react",
|
|
601
|
-
version: "0.0.0-beta-
|
|
594
|
+
version: "0.0.0-beta-20260911075342"
|
|
602
595
|
});
|
|
603
596
|
const o = r();
|
|
604
597
|
return () => {
|
|
@@ -611,12 +604,12 @@ const H = ({
|
|
|
611
604
|
), l = N(
|
|
612
605
|
() => r().getState(),
|
|
613
606
|
[r]
|
|
614
|
-
),
|
|
607
|
+
), i = x(
|
|
615
608
|
c,
|
|
616
609
|
l,
|
|
617
|
-
() =>
|
|
610
|
+
() => ie
|
|
618
611
|
);
|
|
619
|
-
return { controller:
|
|
612
|
+
return { controller: a.current, state: i };
|
|
620
613
|
};
|
|
621
614
|
export {
|
|
622
615
|
V as DialogInput,
|
|
@@ -1 +1 @@
|
|
|
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:"0.0.0-beta-20260909090007"}),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:"0.0.0-beta-20260909090007"});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"})}));
|
|
1
|
+
(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,s(g["dialog-react"]={},g["react/jsx-runtime"],g.React,g.dialogSdk,g.ReactDOM))})(this,(function(g,s,d,p,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(""))},b=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:b}),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(()=>{p.registerDialogInstallation({method:"react",version:"0.0.0-beta-20260911075342"}),p.addAuditCapability("pdp-block")},[]);const h=d.useMemo(()=>l?"":n==null?void 0:n.assistantName,[n,l]),b=d.useMemo(()=>l?"":n==null?void 0:n.description,[n,l]),u=d.useMemo(()=>l?"":n==null?void 0:n.inputPlaceholder,[n,l]),S=d.useMemo(()=>{var f;return p.resolveTextDirection((f=e.getLocalizationInformations())==null?void 0:f.languageCode)},[e]);return d.useEffect(()=>{let f=!0;return(async()=>{c(!0),a(void 0);try{const C=await e.getSuggestions(t);f&&a(C)}catch(C){console.error("error",C)}finally{f&&c(!1)}})(),()=>{f=!1}},[e,t]),s.jsx(M,{theme:e.theme,children:s.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[s.jsx(m,{title:h,description:b}),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 S=u.metaKey||u.ctrlKey||u.shiftKey||u.altKey;e.selectResult(r,{navigate:!S})&&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),b=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:b}):s.jsx("a",{className:"dialog-search-card-body",href:h,onClick:l,onAuxClick:c,children:b})})},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:b,left:u,width:S}=a.getBoundingClientRect();l(window.innerHeight),o(f=>f!==void 0&&f.top===h&&f.bottom===b&&f.left===u&&f.width===S?f:{top:h,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:t,rect:r,viewportHeight:i}},$=(e,t)=>{const[r,o]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!r;return d.useEffect(()=>{o(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=n=>{var S,f;const a=n.target;if(!(a instanceof Node))return;const h=(S=t.current)==null?void 0:S.previousElementSibling,b=((f=i.current)==null?void 0:f.contains(a))??!1,u=(h==null?void 0:h.contains(a))??!1;!b&&!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 p.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 p.SearchStatus.LOADING:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",t.query,"”…"]});case p.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 p.SearchStatus.EMPTY:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",o==null?void 0:o.query,"”."]});case p.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!==p.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:p.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",...b}=t.current;r.current=p.createSearchController({search:(u,S)=>a.search(u,S),analytics:{surface:h,trackViewSearchResults:u=>a.trackViewSearchResults(u),trackSelectSearchResult:u=>a.trackSelectSearchResult(u)},...b})}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(()=>{p.registerDialogInstallation({method:"react",version:"0.0.0-beta-20260911075342"});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}};g.DialogInput=y,g.DialogProductBlock=F,g.DialogSearchBar=q,g.DialogSearchPagination=N,g.DialogSearchProductCard=k,g.DialogSearchResults=U,g.useDialogSearch=G,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@askdialog/dialog-react",
|
|
3
|
-
"version": "0.0.0-beta-
|
|
3
|
+
"version": "0.0.0-beta-20260911075342",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/dialog-react.umd.js",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@askdialog/dialog-sdk": "0.0.0-beta-
|
|
22
|
+
"@askdialog/dialog-sdk": "0.0.0-beta-20260911075342",
|
|
23
23
|
"react": "^19.0.0",
|
|
24
24
|
"react-dom": "^19.0.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "^19.2.7",
|
|
28
28
|
"@types/react-dom": "^19.2.3",
|
|
29
|
-
"@askdialog/dialog-sdk": "0.0.0-beta-
|
|
29
|
+
"@askdialog/dialog-sdk": "0.0.0-beta-20260911075342"
|
|
30
30
|
},
|
|
31
31
|
"author": "Dialog",
|
|
32
32
|
"publishConfig": {
|