ublo-lib 1.38.45 → 1.39.1
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/es/common/components/gesco-contact-form/gesco-contact-form.d.ts +1 -2
- package/es/common/components/gesco-contact-form/gesco-contact-form.d.ts.map +1 -1
- package/es/common/components/gesco-contact-form/gesco-contact-form.js +7 -7
- package/es/market-place/components/instant-search/google-results.d.ts +9 -0
- package/es/market-place/components/instant-search/google-results.d.ts.map +1 -0
- package/es/market-place/components/instant-search/google-results.js +24 -0
- package/es/market-place/components/instant-search/google-results.module.css +109 -0
- package/es/market-place/components/instant-search/hooks/use-constant.d.ts +2 -0
- package/es/market-place/components/instant-search/hooks/use-constant.d.ts.map +1 -0
- package/es/market-place/components/instant-search/hooks/use-constant.js +8 -0
- package/es/market-place/components/instant-search/hooks/use-debounced-search.d.ts +7 -0
- package/es/market-place/components/instant-search/hooks/use-debounced-search.d.ts.map +1 -0
- package/es/market-place/components/instant-search/hooks/use-debounced-search.js +11 -0
- package/es/market-place/components/instant-search/hooks/use-google-search.d.ts +7 -0
- package/es/market-place/components/instant-search/hooks/use-google-search.d.ts.map +1 -0
- package/es/market-place/components/instant-search/hooks/use-google-search.js +7 -0
- package/es/market-place/components/instant-search/hooks/use-search.d.ts +17 -0
- package/es/market-place/components/instant-search/hooks/use-search.d.ts.map +1 -0
- package/es/market-place/components/instant-search/hooks/use-search.js +10 -0
- package/es/market-place/components/instant-search/i18n.json +67 -0
- package/es/market-place/components/instant-search/images/lodging-placeholder.png +0 -0
- package/es/market-place/components/instant-search/images/page-placeholder.png +0 -0
- package/es/market-place/components/instant-search/index.d.ts +3 -0
- package/es/market-place/components/instant-search/index.d.ts.map +1 -0
- package/es/market-place/components/instant-search/index.js +2 -0
- package/es/market-place/components/instant-search/instant-search.d.ts +14 -0
- package/es/market-place/components/instant-search/instant-search.d.ts.map +1 -0
- package/es/market-place/components/instant-search/instant-search.js +66 -0
- package/es/market-place/components/instant-search/instant-search.module.css +16 -0
- package/es/market-place/components/instant-search/links.d.ts +11 -0
- package/es/market-place/components/instant-search/links.d.ts.map +1 -0
- package/es/market-place/components/instant-search/links.js +31 -0
- package/es/market-place/components/instant-search/links.module.css +97 -0
- package/es/market-place/components/instant-search/no-product.d.ts +6 -0
- package/es/market-place/components/instant-search/no-product.d.ts.map +1 -0
- package/es/market-place/components/instant-search/no-product.js +4 -0
- package/es/market-place/components/instant-search/products.d.ts +13 -0
- package/es/market-place/components/instant-search/products.d.ts.map +1 -0
- package/es/market-place/components/instant-search/products.js +54 -0
- package/es/market-place/components/instant-search/products.module.css +169 -0
- package/es/market-place/components/instant-search/results.d.ts +20 -0
- package/es/market-place/components/instant-search/results.d.ts.map +1 -0
- package/es/market-place/components/instant-search/results.js +47 -0
- package/es/market-place/components/instant-search/results.module.css +95 -0
- package/es/market-place/components/instant-search/search-input.d.ts +15 -0
- package/es/market-place/components/instant-search/search-input.d.ts.map +1 -0
- package/es/market-place/components/instant-search/search-input.js +56 -0
- package/es/market-place/components/instant-search/search-input.module.css +87 -0
- package/es/market-place/components/instant-search/services/api.d.ts +17 -0
- package/es/market-place/components/instant-search/services/api.d.ts.map +1 -0
- package/es/market-place/components/instant-search/services/api.js +24 -0
- package/es/market-place/components/instant-search/services/messages.d.ts +2 -0
- package/es/market-place/components/instant-search/services/messages.d.ts.map +1 -0
- package/es/market-place/components/instant-search/services/messages.js +5 -0
- package/es/market-place/components/instant-search/services/utils.d.ts +4 -0
- package/es/market-place/components/instant-search/services/utils.d.ts.map +1 -0
- package/es/market-place/components/instant-search/services/utils.js +44 -0
- package/package.json +2 -2
|
@@ -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,
|
|
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;
|
|
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
|
|
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 = {},
|
|
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 })),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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 @@
|
|
|
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,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,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 @@
|
|
|
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,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
|
+
}
|