ublo-lib 1.38.45 → 1.39.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 (56) hide show
  1. package/es/common/components/gesco-contact-form/gesco-contact-form.d.ts +1 -2
  2. package/es/common/components/gesco-contact-form/gesco-contact-form.d.ts.map +1 -1
  3. package/es/common/components/gesco-contact-form/gesco-contact-form.js +7 -7
  4. package/es/market-place/components/instant-search/google-results.d.ts +9 -0
  5. package/es/market-place/components/instant-search/google-results.d.ts.map +1 -0
  6. package/es/market-place/components/instant-search/google-results.js +24 -0
  7. package/es/market-place/components/instant-search/google-results.module.css +109 -0
  8. package/es/market-place/components/instant-search/hooks/use-constant.d.ts +2 -0
  9. package/es/market-place/components/instant-search/hooks/use-constant.d.ts.map +1 -0
  10. package/es/market-place/components/instant-search/hooks/use-constant.js +8 -0
  11. package/es/market-place/components/instant-search/hooks/use-debounced-search.d.ts +7 -0
  12. package/es/market-place/components/instant-search/hooks/use-debounced-search.d.ts.map +1 -0
  13. package/es/market-place/components/instant-search/hooks/use-debounced-search.js +11 -0
  14. package/es/market-place/components/instant-search/hooks/use-google-search.d.ts +7 -0
  15. package/es/market-place/components/instant-search/hooks/use-google-search.d.ts.map +1 -0
  16. package/es/market-place/components/instant-search/hooks/use-google-search.js +7 -0
  17. package/es/market-place/components/instant-search/hooks/use-search.d.ts +17 -0
  18. package/es/market-place/components/instant-search/hooks/use-search.d.ts.map +1 -0
  19. package/es/market-place/components/instant-search/hooks/use-search.js +10 -0
  20. package/es/market-place/components/instant-search/i18n.json +67 -0
  21. package/es/market-place/components/instant-search/index.d.ts +3 -0
  22. package/es/market-place/components/instant-search/index.d.ts.map +1 -0
  23. package/es/market-place/components/instant-search/index.js +2 -0
  24. package/es/market-place/components/instant-search/instant-search.d.ts +14 -0
  25. package/es/market-place/components/instant-search/instant-search.d.ts.map +1 -0
  26. package/es/market-place/components/instant-search/instant-search.js +66 -0
  27. package/es/market-place/components/instant-search/instant-search.module.css +16 -0
  28. package/es/market-place/components/instant-search/links.d.ts +11 -0
  29. package/es/market-place/components/instant-search/links.d.ts.map +1 -0
  30. package/es/market-place/components/instant-search/links.js +31 -0
  31. package/es/market-place/components/instant-search/links.module.css +97 -0
  32. package/es/market-place/components/instant-search/no-product.d.ts +6 -0
  33. package/es/market-place/components/instant-search/no-product.d.ts.map +1 -0
  34. package/es/market-place/components/instant-search/no-product.js +4 -0
  35. package/es/market-place/components/instant-search/products.d.ts +13 -0
  36. package/es/market-place/components/instant-search/products.d.ts.map +1 -0
  37. package/es/market-place/components/instant-search/products.js +54 -0
  38. package/es/market-place/components/instant-search/products.module.css +169 -0
  39. package/es/market-place/components/instant-search/results.d.ts +20 -0
  40. package/es/market-place/components/instant-search/results.d.ts.map +1 -0
  41. package/es/market-place/components/instant-search/results.js +47 -0
  42. package/es/market-place/components/instant-search/results.module.css +95 -0
  43. package/es/market-place/components/instant-search/search-input.d.ts +15 -0
  44. package/es/market-place/components/instant-search/search-input.d.ts.map +1 -0
  45. package/es/market-place/components/instant-search/search-input.js +56 -0
  46. package/es/market-place/components/instant-search/search-input.module.css +87 -0
  47. package/es/market-place/components/instant-search/services/api.d.ts +17 -0
  48. package/es/market-place/components/instant-search/services/api.d.ts.map +1 -0
  49. package/es/market-place/components/instant-search/services/api.js +24 -0
  50. package/es/market-place/components/instant-search/services/messages.d.ts +2 -0
  51. package/es/market-place/components/instant-search/services/messages.d.ts.map +1 -0
  52. package/es/market-place/components/instant-search/services/messages.js +5 -0
  53. package/es/market-place/components/instant-search/services/utils.d.ts +4 -0
  54. package/es/market-place/components/instant-search/services/utils.d.ts.map +1 -0
  55. package/es/market-place/components/instant-search/services/utils.js +44 -0
  56. package/package.json +1 -1
@@ -12,8 +12,7 @@ type Props = {
12
12
  fr?: Record<string, string>;
13
13
  en?: Record<string, string>;
14
14
  };
15
- hideOptionalStayFields?: boolean;
16
15
  };
17
- export default function GescoContactForm({ lang, channel, resort, merchant, categories, subject, facet, host, onSubmit, messagesOverrides, hideOptionalStayFields, }: Props): import("react/jsx-runtime").JSX.Element;
16
+ export default function GescoContactForm({ lang, channel, resort, merchant, categories, subject, facet, host, onSubmit, messagesOverrides, }: Props): import("react/jsx-runtime").JSX.Element;
18
17
  export {};
19
18
  //# sourceMappingURL=gesco-contact-form.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"gesco-contact-form.d.ts","sourceRoot":"","sources":["../../../../src/common/components/gesco-contact-form/gesco-contact-form.tsx"],"names":[],"mappings":"AAgBA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EACD,0CAA0C,GAC1C,sDAAsD,GACtD,8CAA8C,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE;QAClB,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5B,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC7B,CAAC;IACF,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAW,EACX,OAAe,EACf,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,KAAgB,EAChB,IAAiD,EACjD,QAAQ,EACR,iBAAsB,EACtB,sBAAsB,GACvB,EAAE,KAAK,2CAkQP"}
1
+ {"version":3,"file":"gesco-contact-form.d.ts","sourceRoot":"","sources":["../../../../src/common/components/gesco-contact-form/gesco-contact-form.tsx"],"names":[],"mappings":"AAgBA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EACD,0CAA0C,GAC1C,sDAAsD,GACtD,8CAA8C,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE;QAClB,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5B,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAW,EACX,OAAe,EACf,MAAM,EACN,QAAQ,EACR,UAAU,EACV,OAAO,EACP,KAAgB,EAChB,IAAiD,EACjD,QAAQ,EACR,iBAAsB,GACvB,EAAE,KAAK,2CAgQP"}
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import Select, { formatOptions } from "dt-design-system/es/select";
4
4
  import Input from "dt-design-system/es/input";
@@ -14,7 +14,7 @@ import * as Form from "./services/form";
14
14
  import * as API from "./services/api";
15
15
  import * as Plausible from "./services/plausible";
16
16
  import styles from "./gesco-contact-form.module.css";
17
- export default function GescoContactForm({ lang = "fr", channel = "ESF", resort, merchant, categories, subject, facet = "WINTER", host = "https://admin.mon-sejour-en-montagne.com", onSubmit, messagesOverrides = {}, hideOptionalStayFields, }) {
17
+ export default function GescoContactForm({ lang = "fr", channel = "ESF", resort, merchant, categories, subject, facet = "WINTER", host = "https://admin.mon-sejour-en-montagne.com", onSubmit, messagesOverrides = {}, }) {
18
18
  const { params, error } = useParams({
19
19
  lang,
20
20
  channel,
@@ -100,9 +100,9 @@ export default function GescoContactForm({ lang = "fr", channel = "ESF", resort,
100
100
  }), disabled: Boolean(error) || loading, required: true }), _jsx(Input, { name: "lastname", type: "text", icon: "User", label: messages.lastname, pattern: ".{2,}", patternError: Messages.format(messages.lengthError, {
101
101
  label: messages.lastname,
102
102
  length: "1",
103
- }), disabled: Boolean(error) || loading, required: true }), _jsx(Input, { name: "email", type: "email", icon: "Mail", label: messages.email, pattern: "[^@\\s]+@[^@\\s]+\\.[^@\\s]+", patternError: messages.emailError, disabled: Boolean(error) || loading, required: true }), _jsxs("div", { className: styles.phoneGroup, children: [_jsx(PhoneCodeSelect, { messages: messages, disabled: Boolean(error) || loading }), _jsx(Input, { name: "phone", type: "phone", className: styles.phoneField, label: messages.phone, inputMode: "numeric", pattern: "[0-9 ]{9,15}$", patternError: messages.phoneError, disabled: Boolean(error) || loading, required: true })] }), _jsx(Select, { name: "country", icon: "Globe", label: messages.country, className: styles.fullWidthField, placeholder: messages.defaultCountry, options: countryOptions, disabled: Boolean(error) || loading, required: true }), needCategory && (_jsx(Select, { name: "category", icon: "Plane", label: messages.category, className: styles.fullWidthField, placeholder: messages.defaultCategory, options: categoryOptions, disabled: Boolean(error) || loading, required: true })), !hideOptionalStayFields && (_jsxs(_Fragment, { children: [_jsx(Input, { name: "stayFrom", className: styles.stayField, type: "date", label: messages.stayFromDate, placeholder: messages.dateFormat, onValueChange: updateStayToMin, hint: stayFromMax, min: stayMin, max: stayFromMax, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
104
- label: messages.stayFrom,
105
- }), required: stayNeeded, extended: true }), _jsx(Input, { name: "stayTo", className: styles.stayField, type: "date", label: messages.stayToDate, placeholder: messages.dateFormat, onValueChange: updateStayFromMax, hint: stayToMin, min: stayToMin || stayMin, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
106
- label: messages.stayTo,
107
- }), required: stayNeeded, extended: true })] })), _jsx(Textarea, { name: "message", className: styles.fullWidthField, label: messages.message, disabled: Boolean(error) || loading, required: true, autoSizing: true }), _jsx("div", { className: styles.send, children: _jsxs(Button, { type: "submit", disabled: Boolean(error) || loading || submiting, children: [submiting ? _jsx(Loader, { className: styles.loader }) : _jsx(Icons.Plane, {}), messages.submit] }) }), sendSuccess && (_jsx(Information, { className: styles.response, type: "success", close: hideSuccess, children: messages.sendSucesss })), sendError && (_jsx(Information, { className: styles.response, type: "error", close: hideError, children: messages.sendError })), error && (_jsx(Information, { className: styles.error, type: "warning", children: messages.parametersError }))] }, formKey));
103
+ }), disabled: Boolean(error) || loading, required: true }), _jsx(Input, { name: "email", type: "email", icon: "Mail", label: messages.email, pattern: "[^@\\s]+@[^@\\s]+\\.[^@\\s]+", patternError: messages.emailError, disabled: Boolean(error) || loading, required: true }), _jsxs("div", { className: styles.phoneGroup, children: [_jsx(PhoneCodeSelect, { messages: messages, disabled: Boolean(error) || loading }), _jsx(Input, { name: "phone", type: "phone", className: styles.phoneField, label: messages.phone, inputMode: "numeric", pattern: "[0-9 ]{9,15}$", patternError: messages.phoneError, disabled: Boolean(error) || loading, required: true })] }), _jsx(Select, { name: "country", icon: "Globe", label: messages.country, className: styles.fullWidthField, placeholder: messages.defaultCountry, options: countryOptions, disabled: Boolean(error) || loading, required: true }), needCategory && (_jsx(Select, { name: "category", icon: "Plane", label: messages.category, className: styles.fullWidthField, placeholder: messages.defaultCategory, options: categoryOptions, disabled: Boolean(error) || loading, required: true })), _jsx(Input, { name: "stayFrom", className: styles.stayField, type: "date", label: messages.stayFromDate, placeholder: messages.dateFormat, onValueChange: updateStayToMin, hint: stayFromMax, min: stayMin, max: stayFromMax, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
104
+ label: messages.stayFrom,
105
+ }), required: true, extended: true }), _jsx(Input, { name: "stayTo", className: styles.stayField, type: "date", label: messages.stayToDate, placeholder: messages.dateFormat, onValueChange: updateStayFromMax, hint: stayToMin, min: stayToMin || stayMin, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
106
+ label: messages.stayTo,
107
+ }), required: true, extended: true }), _jsx(Textarea, { name: "message", className: styles.fullWidthField, label: messages.message, disabled: Boolean(error) || loading, required: true, autoSizing: true }), _jsx("div", { className: styles.send, children: _jsxs(Button, { type: "submit", disabled: Boolean(error) || loading || submiting, children: [submiting ? _jsx(Loader, { className: styles.loader }) : _jsx(Icons.Plane, {}), messages.submit] }) }), sendSuccess && (_jsx(Information, { className: styles.response, type: "success", close: hideSuccess, children: messages.sendSucesss })), sendError && (_jsx(Information, { className: styles.response, type: "error", close: hideError, children: messages.sendError })), error && (_jsx(Information, { className: styles.error, type: "warning", children: messages.parametersError }))] }, formKey));
108
108
  }
@@ -0,0 +1,9 @@
1
+ import { type GoogleSearchResult } from "./services/api";
2
+ type Props = {
3
+ links: GoogleSearchResult[];
4
+ loading: boolean;
5
+ sendPlausibleGoal: (path: string) => void;
6
+ };
7
+ export default function OTLinks({ links, loading, sendPlausibleGoal }: Props): import("react/jsx-runtime").JSX.Element;
8
+ export {};
9
+ //# sourceMappingURL=google-results.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"google-results.d.ts","sourceRoot":"","sources":["../../../../src/market-place/components/instant-search/google-results.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IAEjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,KAAK,2CAoD3E"}
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Link from "ublo/link";
3
+ import * as Icons from "dt-design-system/es/icons";
4
+ import Loader from "dt-design-system/es/loader";
5
+ import * as Ripple from "dt-design-system/es/ripple";
6
+ import css from "./google-results.module.css";
7
+ const PLACEHOLDERS = [...new Array(4)];
8
+ export default function OTLinks({ links, loading, sendPlausibleGoal }) {
9
+ if (!loading && (!links || links.length === 0))
10
+ return null;
11
+ const createRipple = (e) => {
12
+ Ripple.create(e);
13
+ };
14
+ const linksTitle = "Office du tourisme";
15
+ return (_jsxs("div", { className: css.linksSection, children: [_jsx("div", { className: css.linksTitle, children: linksTitle }), _jsxs("div", { className: css.links, children: [loading &&
16
+ PLACEHOLDERS.map((_, i) => {
17
+ return (_jsx("div", { className: css.loaderContainer, children: _jsx(Loader, { variant: "overlay" }) }, i));
18
+ }), !loading &&
19
+ links.map((product, i) => {
20
+ const { htmlTitle, link } = product;
21
+ const productTitle = htmlTitle.toLowerCase();
22
+ return (_jsxs(Link, { className: css.link, href: link, target: "_blank", onClick: sendPlausibleGoal(link), onMouseDown: createRipple, children: [_jsx(Icons.Globe, { className: css.linkIcon }), _jsx("div", { className: css.linkContent, children: _jsxs("div", { className: css.linkTitleContainer, children: [_jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: productTitle } }), _jsx(Icons.ExternalLink, { className: css.linkIcon })] }) })] }, i));
23
+ })] })] }));
24
+ }
@@ -0,0 +1,109 @@
1
+ .linksSection {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 6px;
5
+ }
6
+
7
+ .linksTitle {
8
+ position: sticky;
9
+ top: 16px;
10
+ font-size: 17px;
11
+ font-weight: 700;
12
+ padding: 3px 8px;
13
+ background-color: var(--ds-grey-200, #efefef);
14
+ border-radius: var(--ds-radius-200, 8px);
15
+ z-index: 1;
16
+ }
17
+
18
+ @media (min-width: 730px) {
19
+ .linksTitle {
20
+ top: 0;
21
+ }
22
+ }
23
+
24
+ .links {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 10px;
28
+ }
29
+
30
+ .loaderContainer {
31
+ position: relative;
32
+ width: 100%;
33
+ height: 44px;
34
+ border-radius: var(--ds-radius-100, 6px);
35
+ }
36
+
37
+ a.link {
38
+ position: relative;
39
+ display: flex;
40
+ gap: 10px;
41
+ padding: 6px;
42
+ color: var(--ds-grey-700, #262626);
43
+ border-radius: var(--ds-radius-100, 6px);
44
+ transition: background-color 160ms
45
+ var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
46
+ }
47
+
48
+ .link:is(:hover, :focus) {
49
+ background-color: var(--ds-grey-100, #f5f5f5);
50
+ }
51
+
52
+ .linkIcon {
53
+ flex: 0 0 16px;
54
+ width: 16px;
55
+ height: 16px;
56
+ margin-top: 2px;
57
+ fill: currentColor;
58
+ }
59
+
60
+ .linkContent {
61
+ flex: 1 1 auto;
62
+ }
63
+
64
+ .linkTitleContainer {
65
+ display: flex;
66
+ flex-direction: row;
67
+ align-items: flex-start;
68
+ justify-content: space-between;
69
+ gap: 4px;
70
+ }
71
+
72
+ .linkTitle {
73
+ font-size: 15px;
74
+ font-weight: 700;
75
+ }
76
+
77
+ .linkTitle:first-letter {
78
+ text-transform: uppercase;
79
+ }
80
+
81
+ .link b {
82
+ position: relative;
83
+ display: inline-block;
84
+ font-weight: 700;
85
+ color: var(--ds-primary, var(--ds-blue-500, #002dcc));
86
+ background-color: transparent;
87
+ }
88
+
89
+ .link b::before {
90
+ content: "";
91
+ position: absolute;
92
+ top: 0;
93
+ left: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ background-color: var(--ds-primary, var(--ds-blue-500, #002dcc));
97
+ border-radius: calc(var(--ds-radius-100, 6px) / 3);
98
+ opacity: 0.15;
99
+ }
100
+
101
+ .linkParent {
102
+ text-transform: uppercase;
103
+ font-size: 10px;
104
+ }
105
+
106
+ .linkText {
107
+ font-size: 14px;
108
+ white-space: pre-wrap;
109
+ }
@@ -0,0 +1,2 @@
1
+ export default function useConstant(fn: any): any;
2
+ //# sourceMappingURL=use-constant.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-constant.d.ts","sourceRoot":"","sources":["../../../../../src/market-place/components/instant-search/hooks/use-constant.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,EAAE,GAAG,OAQ1C"}
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ export default function useConstant(fn) {
3
+ const ref = React.useRef();
4
+ if (!ref.current) {
5
+ ref.current = { v: fn() };
6
+ }
7
+ return ref.current.v;
8
+ }
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export default function useDebouncedSearch(searchFunction: (text: string) => Promise<any>): {
3
+ text: string;
4
+ setText: React.Dispatch<React.SetStateAction<string>>;
5
+ search: import("react-async-hook").UseAsyncReturn<any, any[]>;
6
+ };
7
+ //# sourceMappingURL=use-debounced-search.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-debounced-search.d.ts","sourceRoot":"","sources":["../../../../../src/market-place/components/instant-search/hooks/use-debounced-search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAExC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC;;;;EAY/C"}
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import debouncePromise from "awesome-debounce-promise";
3
+ import { useAsync } from "react-async-hook";
4
+ import useConstant from "./use-constant";
5
+ const DEBOUNCE_AMOUNT = 400;
6
+ export default function useDebouncedSearch(searchFunction) {
7
+ const [text, setText] = React.useState("");
8
+ const debouncedSearchFunction = useConstant(() => debouncePromise(searchFunction, DEBOUNCE_AMOUNT));
9
+ const search = useAsync(async () => (text.length === 0 ? undefined : debouncedSearchFunction(text)), [debouncedSearchFunction, text], { setLoading: (state) => ({ ...state, loading: true }) });
10
+ return { text, setText, search };
11
+ }
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ export default function useGoogleSearch(lang: string): {
3
+ text: string;
4
+ setText: import("react").Dispatch<import("react").SetStateAction<string>>;
5
+ search: import("react-async-hook").UseAsyncReturn<any, any[]>;
6
+ };
7
+ //# sourceMappingURL=use-google-search.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-google-search.d.ts","sourceRoot":"","sources":["../../../../../src/market-place/components/instant-search/hooks/use-google-search.ts"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,IAAI,EAAE,MAAM;;;;EAInD"}
@@ -0,0 +1,7 @@
1
+ import useDebouncedSearch from "./use-debounced-search";
2
+ import * as API from "../services/api";
3
+ export default function useGoogleSearch(lang) {
4
+ return useDebouncedSearch(async (query) => {
5
+ return API.fetchOTResults(query, lang);
6
+ });
7
+ }
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ export type SearchOptions = {
3
+ groupLimit?: number;
4
+ page?: number;
5
+ perPage?: number;
6
+ queryBy?: string;
7
+ queryByWeights?: string;
8
+ filterBy?: string;
9
+ sortBy?: string;
10
+ semantic?: boolean;
11
+ };
12
+ export default function useSearch(lang: string, options?: SearchOptions): {
13
+ text: string;
14
+ setText: import("react").Dispatch<import("react").SetStateAction<string>>;
15
+ search: import("react-async-hook").UseAsyncReturn<any, any[]>;
16
+ };
17
+ //# sourceMappingURL=use-search.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-search.d.ts","sourceRoot":"","sources":["../../../../../src/market-place/components/instant-search/hooks/use-search.ts"],"names":[],"mappings":";AAOA,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;;;;EAY1E"}
@@ -0,0 +1,10 @@
1
+ import getConfig from "next/config";
2
+ import useDebouncedSearch from "./use-debounced-search";
3
+ import * as API from "../services/api";
4
+ const { publicRuntimeConfig } = getConfig();
5
+ const { site } = publicRuntimeConfig;
6
+ export default function useSearch(lang, options = {}) {
7
+ return useDebouncedSearch(async (query) => {
8
+ return API.fetchResults(site, lang, query, options.groupLimit, options.queryBy, options.queryByWeights, options.semantic);
9
+ });
10
+ }
@@ -0,0 +1,67 @@
1
+ {
2
+ "fr": {
3
+ "search-placeholder": "Que recherchez-vous ?",
4
+ "try": "Essayez",
5
+ "pages": "Pages",
6
+ "page": "Page",
7
+ "faqs": "Questions fréquentes",
8
+ "information": "Informations",
9
+ "instructors": "Moniteurs",
10
+ "noProducts": "Pas de produit correspondant",
11
+ "lodging": "Hébergement",
12
+ "showOtherResults": "Afficher les autres résultats"
13
+ },
14
+ "en": {
15
+ "search-placeholder": "What are you looking for?",
16
+ "try": "Try",
17
+ "pages": "Pages",
18
+ "page": "Page",
19
+ "faqs": "FAQs",
20
+ "information": "Information",
21
+ "instructors": "Instructors",
22
+ "noProducts": "No matching product",
23
+ "lodging": "Lodging",
24
+ "showOtherResults": "Show other results"
25
+ },
26
+ "es": {
27
+ "search-placeholder": "¿Qué estás buscando?",
28
+ "pages": "Paginas",
29
+ "page": "Página",
30
+ "faqs": "Preguntas frecuentes",
31
+ "information": "Informaciones",
32
+ "instructors": "Instructores",
33
+ "noProducts": "Ningún producto coincidente",
34
+ "lodging": "Alojamiento",
35
+ "showOtherResults": "Mostrar otros resultados"
36
+ },
37
+ "it": {
38
+ "search-placeholder": "Cosa stai cercando?",
39
+ "pages": "Pagine",
40
+ "faqs": "Domande frequenti",
41
+ "information": "Informazioni",
42
+ "instructors": "Insegnanti",
43
+ "noProducts": "Nessun prodotto corrispondente",
44
+ "lodging": "Alloggio",
45
+ "showOtherResults": "Mostra altri risultati"
46
+ },
47
+ "nl": {
48
+ "search-placeholder": "Waar ben je naar op zoek?",
49
+ "pages": "Pagina's",
50
+ "faqs": "Veel Gestelde Vragen",
51
+ "information": "Informatie",
52
+ "instructors": "Instructeurs",
53
+ "noProducts": "Geen bijpassend product",
54
+ "lodging": "Accommodatie",
55
+ "showOtherResults": "Toon andere resultaten"
56
+ },
57
+ "ru": {
58
+ "search-placeholder": "Что вы ищете?",
59
+ "pages": "Страницы",
60
+ "faqs": "Часто задаваемые вопросы",
61
+ "information": "Информация",
62
+ "instructors": "Преподаватели",
63
+ "noProducts": "Нет подходящего продукта",
64
+ "lodging": "Проживание",
65
+ "showOtherResults": "Показать другие результаты"
66
+ }
67
+ }
@@ -0,0 +1,3 @@
1
+ import InstantSearch from "./instant-search";
2
+ export default InstantSearch;
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/market-place/components/instant-search/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,eAAe,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ import InstantSearch from "./instant-search";
2
+ export default InstantSearch;
@@ -0,0 +1,14 @@
1
+ import { SearchOptions } from "./hooks/use-search";
2
+ type Props = {
3
+ lang: string;
4
+ className?: string;
5
+ suggestions?: {
6
+ fr?: string[];
7
+ en?: string[];
8
+ };
9
+ options?: SearchOptions;
10
+ weekNumber: number | null;
11
+ };
12
+ export default function InstantSearch({ lang, suggestions, className, options, weekNumber, }: Props): import("react/jsx-runtime").JSX.Element;
13
+ export {};
14
+ //# sourceMappingURL=instant-search.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"instant-search.d.ts","sourceRoot":"","sources":["../../../../src/market-place/components/instant-search/instant-search.tsx"],"names":[],"mappings":"AAOA,OAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAK9D,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE;QACZ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAY,EACZ,UAAU,GACX,EAAE,KAAK,2CAmGP"}
@@ -0,0 +1,66 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import classNames from "classnames";
4
+ import Router from "next/router";
5
+ import Input from "dt-design-system/es/input";
6
+ import Dialog from "dt-design-system/es/dialog";
7
+ import SearchInput from "./search-input";
8
+ import Results from "./results";
9
+ import useSearch from "./hooks/use-search";
10
+ import * as Plausible from "../../../common/components/plausible";
11
+ import message from "./services/messages";
12
+ import css from "./instant-search.module.css";
13
+ export default function InstantSearch({ lang, suggestions, className, options = {}, weekNumber, }) {
14
+ const [opened, setOpened] = React.useState(false);
15
+ const { text, setText, search } = useSearch(lang, options);
16
+ const classes = classNames(css.search, className);
17
+ const openSearch = () => {
18
+ setOpened(true);
19
+ };
20
+ const closeSearch = (skipEvent) => {
21
+ setOpened(false);
22
+ setText("");
23
+ document.body.style.removeProperty("overflow");
24
+ if (!skipEvent) {
25
+ const event = search?.result?.grouped_hits?.length === 0
26
+ ? "Search failed"
27
+ : "Search canceled";
28
+ if (text.length > 0) {
29
+ Plausible.sendGoal(event, {
30
+ Terms: text,
31
+ });
32
+ }
33
+ }
34
+ };
35
+ const sendPlausibleGoal = (path) => () => {
36
+ Plausible.sendGoal("Search", {
37
+ "Terms - Destination": `${text} - ${path}`,
38
+ });
39
+ };
40
+ Router.ready(() => {
41
+ Router.events.on("routeChangeStart", () => {
42
+ if (opened) {
43
+ closeSearch(true);
44
+ }
45
+ });
46
+ });
47
+ const handleKeyPresses = React.useCallback((e) => {
48
+ const allowedKeys = ["k"];
49
+ const { code, ctrlKey, key, metaKey } = e;
50
+ const isAllowed = (ctrlKey || metaKey) &&
51
+ (allowedKeys.includes(code) || allowedKeys.includes(key));
52
+ if (!isAllowed)
53
+ return;
54
+ e.preventDefault();
55
+ if (key === "k" && (ctrlKey || metaKey)) {
56
+ openSearch();
57
+ }
58
+ }, []);
59
+ React.useEffect(() => {
60
+ window.addEventListener("keydown", handleKeyPresses);
61
+ return () => {
62
+ window.removeEventListener("keydown", handleKeyPresses);
63
+ };
64
+ }, [handleKeyPresses]);
65
+ return (_jsxs(_Fragment, { children: [_jsx(Input, { icon: "Search", placeholder: message(lang, "search-placeholder"), className: classes, onClick: openSearch, readOnly: true }), _jsxs(Dialog, { className: css.dialog, isOpened: opened, showCloseButton: false, close: () => closeSearch(), container: "body", children: [_jsx(SearchInput, { lang: lang, text: text, setText: setText, closeSearch: closeSearch, loading: search.loading === true, suggestions: suggestions }), _jsx(Results, { lang: lang, text: text, results: search.result, weekNumber: weekNumber, loading: search.loading === true && search.result === undefined, sendPlausibleGoal: sendPlausibleGoal })] })] }));
66
+ }
@@ -0,0 +1,16 @@
1
+ .search {
2
+ flex: 1 1 auto;
3
+ }
4
+
5
+ .search input:placeholder {
6
+ color: var(--ds-grey-600, #484848);
7
+ }
8
+
9
+ .dialog {
10
+ width: 1100px;
11
+ max-width: calc(100% - 6px);
12
+ max-height: calc(100% - 6px);
13
+ background-color: transparent;
14
+ box-shadow: none;
15
+ pointer-events: auto;
16
+ }
@@ -0,0 +1,11 @@
1
+ type Props = {
2
+ linksTitle: string;
3
+ icon: "FileText" | "Info" | "Question" | "User";
4
+ links: Hit[];
5
+ pageTitleAsTitle?: boolean;
6
+ loading: boolean;
7
+ sendPlausibleGoal: (path: string) => void;
8
+ };
9
+ export default function Links({ icon, linksTitle, links, pageTitleAsTitle, loading, sendPlausibleGoal, }: Props): import("react/jsx-runtime").JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=links.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../../src/market-place/components/instant-search/links.tsx"],"names":[],"mappings":"AAQA,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IAEjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,iBAAiB,GAClB,EAAE,KAAK,2CAoEP"}
@@ -0,0 +1,31 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Link from "ublo/link";
3
+ import Loader from "dt-design-system/es/loader";
4
+ import * as Icons from "dt-design-system/es/icons";
5
+ import * as Ripple from "dt-design-system/es/ripple";
6
+ import * as Utils from "./services/utils";
7
+ import css from "./links.module.css";
8
+ const PLACEHOLDERS = [...new Array(3)];
9
+ export default function Links({ icon, linksTitle, links, pageTitleAsTitle, loading, sendPlausibleGoal, }) {
10
+ const Icon = Icons[icon];
11
+ const noResult = !loading && !links.length;
12
+ const createRipple = (e) => {
13
+ Ripple.create(e);
14
+ };
15
+ if (noResult)
16
+ return null;
17
+ return (_jsxs("div", { className: css.linksSection, children: [_jsx("div", { className: css.linksTitle, children: linksTitle }), _jsxs("div", { className: css.links, children: [loading &&
18
+ PLACEHOLDERS.map((_, i) => {
19
+ return (_jsx("div", { className: css.loaderContainer, children: _jsx(Loader, { className: css.loader, variant: "overlay" }) }, i));
20
+ }), !loading &&
21
+ links.map((link) => {
22
+ const { id, text, parentTitle, path } = link.document;
23
+ const decodedPath = decodeURIComponent(path);
24
+ const titleProperty = pageTitleAsTitle ? "pageTitle" : "title";
25
+ const linkTitle = Utils.getHighlight(titleProperty, link.highlight) ||
26
+ link.document[titleProperty];
27
+ const linkText = Utils.getHighlight("text", link.highlight, true) ||
28
+ Utils.sliceText(text);
29
+ return (_jsxs(Link, { href: decodedPath, className: css.link, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Icon, { className: css.linkIcon }), _jsxs("div", { className: css.linkContent, children: [parentTitle && (_jsx("div", { className: css.linkParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: linkTitle } }), linkText && (_jsx("div", { className: css.linkText, dangerouslySetInnerHTML: { __html: linkText } }))] })] }, id));
30
+ })] })] }));
31
+ }
@@ -0,0 +1,97 @@
1
+ .linksSection {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 6px;
5
+ }
6
+
7
+ .linksTitle {
8
+ position: sticky;
9
+ top: 16px;
10
+ font-size: 17px;
11
+ font-weight: 700;
12
+ padding: 3px 8px;
13
+ background-color: var(--ds-grey-200, #efefef);
14
+ border-radius: var(--ds-radius-100, 6px);
15
+ z-index: 1;
16
+ }
17
+
18
+ @media (min-width: 730px) {
19
+ .linksTitle {
20
+ top: 0;
21
+ }
22
+ }
23
+
24
+ .links {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 6px;
28
+ }
29
+
30
+ .loaderContainer {
31
+ position: relative;
32
+ width: 100%;
33
+ height: 44px;
34
+ border-radius: var(--ds-radius-100, 6px);
35
+ }
36
+
37
+ .link {
38
+ position: relative;
39
+ display: flex;
40
+ gap: 10px;
41
+ padding: 6px;
42
+ color: var(--ds-grey-700, #262626);
43
+ border-radius: var(--ds-radius-100, 6px);
44
+ transition: background-color 160ms
45
+ var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
46
+ }
47
+
48
+ .link:is(:hover, :focus) {
49
+ background-color: var(--ds-grey-100, #f5f5f5);
50
+ }
51
+
52
+ .linkIcon {
53
+ flex: 0 0 16px;
54
+ width: 16px;
55
+ height: 16px;
56
+ margin-top: 2px;
57
+ fill: currentColor;
58
+ }
59
+
60
+ .linkContent {
61
+ flex: 1 1 auto;
62
+ }
63
+
64
+ .linkTitle {
65
+ font-size: 15px;
66
+ font-weight: 700;
67
+ }
68
+
69
+ .link mark {
70
+ position: relative;
71
+ display: inline-block;
72
+ font-weight: 700;
73
+ color: var(--ds-primary, var(--ds-blue-500, #002dcc));
74
+ background-color: transparent;
75
+ }
76
+
77
+ .link mark::before {
78
+ content: "";
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ background-color: var(--ds-primary, var(--ds-blue-500, #002dcc));
85
+ border-radius: calc(var(--ds-radius-100, 6px) / 3);
86
+ opacity: 0.15;
87
+ }
88
+
89
+ .linkParent {
90
+ text-transform: uppercase;
91
+ font-size: 10px;
92
+ }
93
+
94
+ .linkText {
95
+ font-size: 14px;
96
+ white-space: pre-wrap;
97
+ }
@@ -0,0 +1,6 @@
1
+ type Props = {
2
+ className?: string;
3
+ };
4
+ export default function NoProduct({ className }: Props): import("react/jsx-runtime").JSX.Element;
5
+ export {};
6
+ //# sourceMappingURL=no-product.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"no-product.d.ts","sourceRoot":"","sources":["../../../../src/market-place/components/instant-search/no-product.tsx"],"names":[],"mappings":"AAAA,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,2CA2FrD"}