ublo-lib 1.44.0 → 1.44.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/future/components/msem-preset-editor/editors/ski-passes.d.ts.map +1 -1
- package/es/future/components/msem-preset-editor/editors/ski-passes.js +11 -11
- package/package.json +1 -5
- package/es/future/components/faqs/config.d.ts +0 -6
- package/es/future/components/faqs/config.d.ts.map +0 -1
- package/es/future/components/faqs/config.js +0 -20
- package/es/future/components/faqs/config.module.css +0 -3
- package/es/future/components/faqs/editor.d.ts +0 -11
- package/es/future/components/faqs/editor.d.ts.map +0 -1
- package/es/future/components/faqs/editor.js +0 -71
- package/es/future/components/faqs/editor.module.css +0 -219
- package/es/future/components/faqs/faqs.d.ts +0 -12
- package/es/future/components/faqs/faqs.d.ts.map +0 -1
- package/es/future/components/faqs/faqs.js +0 -26
- package/es/future/components/faqs/faqs.module.css +0 -12
- package/es/future/components/faqs/index.d.ts +0 -3
- package/es/future/components/faqs/index.d.ts.map +0 -1
- package/es/future/components/faqs/index.js +0 -2
- package/es/future/components/faqs/services/api.d.ts +0 -2
- package/es/future/components/faqs/services/api.d.ts.map +0 -1
- package/es/future/components/faqs/services/api.js +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ski-passes.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-preset-editor/editors/ski-passes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5E,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAiFF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,eAAe,EACf,MAAM,EACN,SAAS,EACT,IAAI,EACJ,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ski-passes.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-preset-editor/editors/ski-passes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5E,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAiFF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,eAAe,EACf,MAAM,EACN,SAAS,EACT,IAAI,EACJ,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,EAAE,KAAK,2CA2UP"}
|
|
@@ -9,10 +9,10 @@ import NumberPicker from "dt-design-system/es/number-picker";
|
|
|
9
9
|
import Form from "../components/form";
|
|
10
10
|
import * as API from "../services/api";
|
|
11
11
|
import css from "./ski-passes.module.css";
|
|
12
|
-
const ALLOWED_FILTERS = ["domains", "durations", "
|
|
12
|
+
const ALLOWED_FILTERS = ["domains", "durations", "pax"];
|
|
13
13
|
const DEFAULT_DATA = {
|
|
14
14
|
firstSkiDate: "",
|
|
15
|
-
|
|
15
|
+
pax: [],
|
|
16
16
|
activities: [],
|
|
17
17
|
domains: [],
|
|
18
18
|
durations: [],
|
|
@@ -142,9 +142,9 @@ export default function SkiPasses({ msemServicesUrl, preset, setPreset, stay, se
|
|
|
142
142
|
updateField("domains")(value);
|
|
143
143
|
};
|
|
144
144
|
const updateSkiers = (code) => (value) => {
|
|
145
|
-
const filteredSkiers = data.
|
|
145
|
+
const filteredSkiers = data.pax.filter((skier) => skier !== code);
|
|
146
146
|
const newSkiers = !value ? [] : new Array(Number(value)).fill(code);
|
|
147
|
-
setData({ ...data,
|
|
147
|
+
setData({ ...data, pax: [...filteredSkiers, ...newSkiers] });
|
|
148
148
|
};
|
|
149
149
|
const updateMinimalistLiftScreen = (value) => {
|
|
150
150
|
setData({ ...data, minimalistLiftScreen: value });
|
|
@@ -193,7 +193,7 @@ export default function SkiPasses({ msemServicesUrl, preset, setPreset, stay, se
|
|
|
193
193
|
React.useEffect(() => {
|
|
194
194
|
setPreset((current = {}) => {
|
|
195
195
|
const firstSkiDate = data.firstSkiDate || undefined;
|
|
196
|
-
const
|
|
196
|
+
const pax = data.pax?.length ? data.pax : undefined;
|
|
197
197
|
const activities = data.activities?.length ? data.activities : undefined;
|
|
198
198
|
const domains = data.domains?.length ? data.domains : undefined;
|
|
199
199
|
const durations = data.durations?.length ? data.durations : undefined;
|
|
@@ -208,7 +208,7 @@ export default function SkiPasses({ msemServicesUrl, preset, setPreset, stay, se
|
|
|
208
208
|
};
|
|
209
209
|
const presets = {
|
|
210
210
|
...(current?.presets || {}),
|
|
211
|
-
|
|
211
|
+
pax,
|
|
212
212
|
firstSkiDate,
|
|
213
213
|
activities,
|
|
214
214
|
domains,
|
|
@@ -223,11 +223,11 @@ export default function SkiPasses({ msemServicesUrl, preset, setPreset, stay, se
|
|
|
223
223
|
testPreset,
|
|
224
224
|
cancelPreset,
|
|
225
225
|
confirmPreset: hasCatalog ? confirmPreset : undefined,
|
|
226
|
-
}, children: [_jsx("div", { className: css.title, children: "Options d'affichage" }), _jsx(MultipleSelect, { label: "Cacher", placeholder: "Selectionnez une ou plusieurs options", options: HIDE_OPTIONS, values: selectedHideOptions, onChange: updateField("hide") }), _jsx(Checkbox, { label: "Ecran de forfaits minimaliste", checked: data.minimalistLiftScreen, onCheckedChange: updateMinimalistLiftScreen }), _jsx("div", { className: css.title, children: "Preset" }), _jsx(Select, { label: "Catalogue", value: catalog, options: catalogs ? ["", ...catalogs] : [], onValueChange: setCatalog, loading: !isReady }), loading && _jsx(Loader, { className: css.loader }), hasCatalog && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "date", label: "1er jour", value: data.firstSkiDate, onValueChange: updateFirstSkiDate, defaultMonth: firstSkiDateDefaultMonth, min: stay?.from || undefined, max: stay?.to || undefined }), filters?.
|
|
226
|
+
}, children: [_jsx("div", { className: css.title, children: "Options d'affichage" }), _jsx(MultipleSelect, { label: "Cacher", placeholder: "Selectionnez une ou plusieurs options", options: HIDE_OPTIONS, values: selectedHideOptions, onChange: updateField("hide") }), _jsx(Checkbox, { label: "Ecran de forfaits minimaliste", checked: data.minimalistLiftScreen, onCheckedChange: updateMinimalistLiftScreen }), _jsx("div", { className: css.title, children: "Preset" }), _jsx(Select, { label: "Catalogue", value: catalog, options: catalogs ? ["", ...catalogs] : [], onValueChange: setCatalog, loading: !isReady }), loading && _jsx(Loader, { className: css.loader }), hasCatalog && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "date", label: "1er jour", value: data.firstSkiDate, onValueChange: updateFirstSkiDate, defaultMonth: firstSkiDateDefaultMonth, min: stay?.from || undefined, max: stay?.to || undefined }), filters?.pax && filters?.pax?.length > 1 && (_jsxs("div", { className: css.skiers, children: [_jsx("div", { className: css.label, children: "Skieurs" }), filters.pax.map((skier) => {
|
|
227
227
|
const { code, label, ageMin, ageMax } = skier;
|
|
228
228
|
const title = `${label} (de ${ageMin} à ${ageMax} ans)`;
|
|
229
|
-
const value = data.
|
|
230
|
-
|
|
229
|
+
const value = data.pax?.filter((skier) => skier === code)?.length ||
|
|
230
|
+
0;
|
|
231
231
|
return (_jsx(NumberPicker, { label: title, min: 0, max: 20, value: value, disabled: false, onChange: updateSkiers(code), withInput: true }, code));
|
|
232
232
|
})] })), _jsx("div", { className: css.label, children: "Filtres" }), (activities?.length > 0 || loading) && (_jsx(MultipleSelect, { label: "Activit\u00E9s", placeholder: "Selectionnez une ou plusieurs options", options: activities, values: selectedActivities, onChange: updateField("activities"), loading: loading })), _jsxs("div", { className: css.row, children: [((filteredDomains && filteredDomains.length > 0) || loading) && (_jsx(MultipleSelect, { label: "Domaines", placeholder: "Selectionnez une ou plusieurs options", options: filteredDomains || [], values: selectedDomains, onChange: updateDomains, loading: loading })), ((filteredDurations && filteredDurations?.length > 0) ||
|
|
233
233
|
loading) && (_jsx(MultipleSelect, { label: "Dur\u00E9es", placeholder: "Selectionnez une ou plusieurs options", options: filteredDurations || [], values: selectedDurations, onChange: updateField("durations"), loading: loading }))] })] }))] }));
|
|
@@ -235,10 +235,10 @@ export default function SkiPasses({ msemServicesUrl, preset, setPreset, stay, se
|
|
|
235
235
|
function getDefaultData(preset) {
|
|
236
236
|
if (!preset?.options && !preset?.presets)
|
|
237
237
|
return DEFAULT_DATA;
|
|
238
|
-
const {
|
|
238
|
+
const { pax, firstSkiDate, activities, domains, durations } = preset.presets || {};
|
|
239
239
|
const { hide, minimalistLiftScreen } = preset.options || {};
|
|
240
240
|
return {
|
|
241
|
-
|
|
241
|
+
pax: pax || DEFAULT_DATA.pax,
|
|
242
242
|
firstSkiDate: firstSkiDate || DEFAULT_DATA.firstSkiDate,
|
|
243
243
|
activities: activities || DEFAULT_DATA.activities,
|
|
244
244
|
domains: domains || DEFAULT_DATA.domains,
|
package/package.json
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ublo-lib",
|
|
3
|
-
"version": "1.44.
|
|
3
|
+
"version": "1.44.1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"classnames": "^2.5.1",
|
|
6
6
|
"dt-design-system": "^3.12.0",
|
|
7
7
|
"framer-motion": "^11.11.9",
|
|
8
8
|
"next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
9
|
-
"node-html-parser": "",
|
|
10
9
|
"react": "^18.2.0 || ^19.0.0",
|
|
11
10
|
"react-dom": "^18.2.0 || ^19.0.0",
|
|
12
11
|
"ublo": "^2.0.0 || ^3.0.0"
|
|
@@ -14,9 +13,6 @@
|
|
|
14
13
|
"peerDependenciesMeta": {
|
|
15
14
|
"framer-motion": {
|
|
16
15
|
"optional": true
|
|
17
|
-
},
|
|
18
|
-
"node-html-parser": {
|
|
19
|
-
"optional": true
|
|
20
16
|
}
|
|
21
17
|
},
|
|
22
18
|
"dependencies": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/future/components/faqs/config.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,2CAkB/C"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import Zone from "ublo/zone";
|
|
4
|
-
import styles from "./config.module.css";
|
|
5
|
-
export default function Config({ config }) {
|
|
6
|
-
const ref = React.useRef(null);
|
|
7
|
-
const [initialized, setInitialized] = React.useState(false);
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
const container = ref.current;
|
|
10
|
-
if (initialized) {
|
|
11
|
-
if (container) {
|
|
12
|
-
container.innerHTML = JSON.stringify(config);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
setInitialized(true);
|
|
17
|
-
}
|
|
18
|
-
}, [config, initialized]);
|
|
19
|
-
return _jsx(Zone, { ref: ref, id: "faqs-config", className: styles.config, readOnly: true });
|
|
20
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
type Props = {
|
|
3
|
-
currentFaqs: string;
|
|
4
|
-
faqUrl: string;
|
|
5
|
-
faqZoneId: string;
|
|
6
|
-
config: string[];
|
|
7
|
-
setConfig: React.Dispatch<React.SetStateAction<string[]>>;
|
|
8
|
-
};
|
|
9
|
-
export default function Editor({ currentFaqs, faqUrl, faqZoneId, config, setConfig, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
11
|
-
//# sourceMappingURL=editor.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../../src/future/components/faqs/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,KAAK,2CAmJP"}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { useUbloContext } from "ublo/with-ublo";
|
|
4
|
-
import { fetchZone } from "ublo/fetcher";
|
|
5
|
-
import Button from "dt-design-system/es/button";
|
|
6
|
-
import * as Icons from "dt-design-system/es/icons";
|
|
7
|
-
import Dialog from "dt-design-system/es/dialog";
|
|
8
|
-
import styles from "./editor.module.css";
|
|
9
|
-
export default function Editor({ currentFaqs, faqUrl, faqZoneId, config, setConfig, }) {
|
|
10
|
-
const previousConfig = React.useRef(config);
|
|
11
|
-
const { ubloApi, site, lang } = useUbloContext();
|
|
12
|
-
const [opened, setOpened] = React.useState(false);
|
|
13
|
-
const [faqs, setFaqs] = React.useState();
|
|
14
|
-
const [selectedFaqs, setSelectedFaqs] = React.useState([]);
|
|
15
|
-
const [othersFaqs, setOthersFaqs] = React.useState([]);
|
|
16
|
-
const openEditor = async () => {
|
|
17
|
-
const content = await fetchZone(ubloApi, site, lang, faqUrl, faqZoneId);
|
|
18
|
-
setFaqs(content);
|
|
19
|
-
setOpened(true);
|
|
20
|
-
};
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
if (faqs) {
|
|
23
|
-
const dom = new DOMParser().parseFromString(faqs, "text/html");
|
|
24
|
-
const sections = Array.from(dom.querySelectorAll("section[data-class]"));
|
|
25
|
-
const { selected, others } = sections.reduce((acc, element) => {
|
|
26
|
-
const uuid = element.getAttribute("data-uuid");
|
|
27
|
-
const html = element.outerHTML;
|
|
28
|
-
if (config.includes(uuid)) {
|
|
29
|
-
return { ...acc, selected: [...acc.selected, html] };
|
|
30
|
-
}
|
|
31
|
-
return { ...acc, others: [...acc.others, html] };
|
|
32
|
-
}, { selected: [], others: [] });
|
|
33
|
-
setSelectedFaqs(selected);
|
|
34
|
-
setOthersFaqs(others);
|
|
35
|
-
}
|
|
36
|
-
}, [config, faqs]);
|
|
37
|
-
const closeEditor = () => {
|
|
38
|
-
setOpened(false);
|
|
39
|
-
setSelectedFaqs([]);
|
|
40
|
-
setOthersFaqs([]);
|
|
41
|
-
setFaqs(undefined);
|
|
42
|
-
};
|
|
43
|
-
const cancelAndClose = () => {
|
|
44
|
-
setConfig(previousConfig.current);
|
|
45
|
-
closeEditor();
|
|
46
|
-
};
|
|
47
|
-
const addAll = () => {
|
|
48
|
-
const dom = new DOMParser().parseFromString(faqs, "text/html");
|
|
49
|
-
const uuids = Array.from(dom.querySelectorAll("section[data-uuid]")).map((element) => element.getAttribute("data-uuid"));
|
|
50
|
-
setConfig(uuids);
|
|
51
|
-
};
|
|
52
|
-
const removeAll = () => {
|
|
53
|
-
setConfig([]);
|
|
54
|
-
};
|
|
55
|
-
const updateSelected = (action) => (e) => {
|
|
56
|
-
e.preventDefault();
|
|
57
|
-
const target = e.target;
|
|
58
|
-
const section = target.closest("section");
|
|
59
|
-
if (!section)
|
|
60
|
-
return;
|
|
61
|
-
const uuid = section.getAttribute("data-uuid");
|
|
62
|
-
setConfig((current) => {
|
|
63
|
-
if (action === "add") {
|
|
64
|
-
return [...current, uuid];
|
|
65
|
-
}
|
|
66
|
-
return current.filter((id) => id !== uuid);
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
const editorButtonLabel = config.length > 0 ? `Modifier la sélection de F.A.Q` : "Ajouter une F.A.Q";
|
|
70
|
-
return (_jsxs("div", { className: styles.editor, children: [_jsxs("div", { className: styles.count, children: [_jsx("b", { children: config.length }), " \u00E9l\u00E9ment", config.length > 1 ? "s" : "", " s\u00E9lectionn\u00E9", config.length > 1 ? "s" : ""] }), currentFaqs ? (_jsx("div", { className: styles.currentFaqs, dangerouslySetInnerHTML: { __html: currentFaqs } })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.placeholder }), _jsx("div", { className: styles.placeholder })] })), _jsx("div", { className: styles.actions, children: _jsxs("div", { className: styles.actionsInner, children: ["Ajouter, modifier ou supprimer des F.A.Q", _jsx(Button, { onClick: openEditor, children: editorButtonLabel })] }) }), _jsxs(Dialog, { className: styles.dialog, isOpened: opened, close: closeEditor, children: [_jsxs("div", { className: styles.inner, children: [_jsxs("div", { className: styles.others, children: [_jsxs("div", { className: styles.columnTitle, children: ["Toutes les F.A.Q", " ", _jsxs(Button, { variant: "secondary", onClick: addAll, compact: true, children: [_jsx(Icons.Plus, {}), "Tout ajouter"] })] }), _jsx("div", { onClick: updateSelected("add"), className: styles.columnInner, dangerouslySetInnerHTML: { __html: othersFaqs.join("") } })] }), _jsxs("div", { className: styles.controls, children: [_jsx(Icons.ArrowRight, { className: styles.control }), _jsx(Icons.ArrowLeft, { className: styles.control })] }), _jsxs("div", { className: styles.selected, children: [_jsxs("div", { className: styles.columnTitle, children: ["F.A.Q s\u00E9lectionn\u00E9e(s)", " ", _jsxs(Button, { variant: "secondary", onClick: removeAll, compact: true, children: [_jsx(Icons.Bin, {}), "Tout supprimer"] })] }), _jsx("div", { onClick: updateSelected("remove"), className: styles.columnInner, dangerouslySetInnerHTML: { __html: selectedFaqs.join("") } })] })] }), _jsxs("div", { className: styles.dialogButtons, children: [_jsx(Button, { variant: "transparent", onClick: cancelAndClose, children: "Annuler" }), _jsx(Button, { variant: "success", onClick: closeEditor, children: "Confirmer" })] })] })] }));
|
|
71
|
-
}
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
/* stylelint-disable selector-class-pattern */
|
|
2
|
-
.editor {
|
|
3
|
-
position: relative;
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
gap: 16px;
|
|
7
|
-
padding: 10px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.count {
|
|
11
|
-
text-align: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.placeholder {
|
|
15
|
-
position: relative;
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
justify-content: space-between;
|
|
19
|
-
padding: 16px;
|
|
20
|
-
flex: 0 0 100px;
|
|
21
|
-
border: 1px solid var(--ds-grey-200, #ededed);
|
|
22
|
-
border-radius: var(--ds-radius-200, 8px);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.placeholder::before {
|
|
26
|
-
content: "";
|
|
27
|
-
display: block;
|
|
28
|
-
width: 180px;
|
|
29
|
-
height: 20px;
|
|
30
|
-
background-color: var(--ds-grey-800, #000);
|
|
31
|
-
border-radius: var(--ds-radius-100, 4px);
|
|
32
|
-
opacity: 15%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.placeholder:nth-child(3)::before {
|
|
36
|
-
width: 280px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.placeholder::after {
|
|
40
|
-
content: "";
|
|
41
|
-
display: block;
|
|
42
|
-
width: 30px;
|
|
43
|
-
height: 30px;
|
|
44
|
-
background-color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
|
|
45
|
-
border-radius: var(--ds-radius-100, 4px);
|
|
46
|
-
opacity: 25%;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.actions {
|
|
50
|
-
position: absolute;
|
|
51
|
-
top: 0;
|
|
52
|
-
left: 0;
|
|
53
|
-
width: 100%;
|
|
54
|
-
height: 100%;
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
justify-content: center;
|
|
58
|
-
border-radius: var(--ds-radius-200, 8px);
|
|
59
|
-
opacity: 0;
|
|
60
|
-
transition: opacity 160ms var(--transition-easing);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.actions:is(:hover, :focus-within) {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.actions::before {
|
|
68
|
-
content: "";
|
|
69
|
-
position: absolute;
|
|
70
|
-
top: 0;
|
|
71
|
-
left: 0;
|
|
72
|
-
width: 100%;
|
|
73
|
-
height: 100%;
|
|
74
|
-
background: var(
|
|
75
|
-
--ds-grey-gradient,
|
|
76
|
-
linear-gradient(
|
|
77
|
-
100deg,
|
|
78
|
-
var(--ds-grey-200, #ededed) 0%,
|
|
79
|
-
var(--ds-grey-300, #d7d7d7) 100%
|
|
80
|
-
)
|
|
81
|
-
);
|
|
82
|
-
border-radius: inherit;
|
|
83
|
-
opacity: 45%;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.actionsInner {
|
|
87
|
-
position: relative;
|
|
88
|
-
display: flex;
|
|
89
|
-
flex-direction: column;
|
|
90
|
-
align-items: center;
|
|
91
|
-
justify-content: center;
|
|
92
|
-
gap: 8px;
|
|
93
|
-
padding: 16px;
|
|
94
|
-
font-size: 15px;
|
|
95
|
-
background-color: hsl(var(--background));
|
|
96
|
-
border-radius: var(--ds-radius-200, 8px);
|
|
97
|
-
box-shadow: var(--shadow-300);
|
|
98
|
-
transform: scale(0.98);
|
|
99
|
-
transition: transform 160ms 70ms var(--transition-easing);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.actions:is(:hover, :focus-within) .actionsInner {
|
|
103
|
-
transform: none;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.dialog {
|
|
107
|
-
width: 1200px;
|
|
108
|
-
height: 100%;
|
|
109
|
-
display: flex;
|
|
110
|
-
flex-direction: column;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.inner {
|
|
114
|
-
flex: 1 1 100%;
|
|
115
|
-
display: flex;
|
|
116
|
-
gap: 14px;
|
|
117
|
-
padding: 16px;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.controls {
|
|
121
|
-
display: flex;
|
|
122
|
-
flex-direction: column;
|
|
123
|
-
justify-content: center;
|
|
124
|
-
gap: 6px;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.control {
|
|
128
|
-
flex: 0 0 26px;
|
|
129
|
-
width: 26px;
|
|
130
|
-
fill: var(--ds-grey-300, #d7d7d7);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
:is(.selected, .others) {
|
|
134
|
-
flex: 1 1 100%;
|
|
135
|
-
display: flex;
|
|
136
|
-
flex-direction: column;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.columnTitle {
|
|
140
|
-
margin-bottom: 10px;
|
|
141
|
-
display: flex;
|
|
142
|
-
align-items: center;
|
|
143
|
-
gap: 10px;
|
|
144
|
-
font-style: 18px;
|
|
145
|
-
font-weight: 700;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.columnInner {
|
|
149
|
-
flex: 1 1 100%;
|
|
150
|
-
display: flex;
|
|
151
|
-
flex-direction: column;
|
|
152
|
-
padding: 10px;
|
|
153
|
-
background-color: var(--ds-grey-100, #f8f8f8);
|
|
154
|
-
border-radius: var(--ds-radius-200, 8px);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.selected .columnInner:empty {
|
|
158
|
-
align-items: center;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
padding: 26px;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.selected .columnInner:empty::after {
|
|
164
|
-
content: "Aucune FAQ sélectionnée, cliquez sur n'importe quelle question fréquente en colonne de gauche pour l'ajouter à cette page.";
|
|
165
|
-
color: var(--ds-grey-500, #7c7b7b);
|
|
166
|
-
font-size: 15px;
|
|
167
|
-
text-align: center;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.columnInner section {
|
|
171
|
-
position: relative;
|
|
172
|
-
width: 100%;
|
|
173
|
-
cursor: pointer;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.columnInner section::after {
|
|
177
|
-
content: "";
|
|
178
|
-
position: absolute;
|
|
179
|
-
top: 0;
|
|
180
|
-
left: 0;
|
|
181
|
-
width: 100%;
|
|
182
|
-
height: 100%;
|
|
183
|
-
background-color: var(--ds-grey-800, #000);
|
|
184
|
-
opacity: 0;
|
|
185
|
-
border-radius: var(--ds-radius-200, 8px);
|
|
186
|
-
transition: opacity 160ms
|
|
187
|
-
var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.columnInner section:hover::after {
|
|
191
|
-
opacity: 0.1;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.selected section {
|
|
195
|
-
animation: section-appearance 160ms
|
|
196
|
-
var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.others section {
|
|
200
|
-
animation: section-appearance 160ms
|
|
201
|
-
var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
@keyframes section-appearance {
|
|
205
|
-
from {
|
|
206
|
-
opacity: 0;
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.dialogButtons {
|
|
211
|
-
position: sticky;
|
|
212
|
-
bottom: 0;
|
|
213
|
-
display: flex;
|
|
214
|
-
justify-content: flex-end;
|
|
215
|
-
gap: 10px;
|
|
216
|
-
padding: 10px;
|
|
217
|
-
background-color: var(--ds-grey-000, #fff);
|
|
218
|
-
border-top: 1px solid var(--ds-grey-200, #ededed);
|
|
219
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
type Props = {
|
|
2
|
-
className?: string;
|
|
3
|
-
faqs: string;
|
|
4
|
-
faqUrl: string;
|
|
5
|
-
faqZoneId: string;
|
|
6
|
-
};
|
|
7
|
-
declare function Faqs({ className, faqs, faqUrl, faqZoneId }: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
declare namespace Faqs {
|
|
9
|
-
var get: (api: string, site: string, lang: string, path: string, zone: string) => Promise<string>;
|
|
10
|
-
}
|
|
11
|
-
export default Faqs;
|
|
12
|
-
//# sourceMappingURL=faqs.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"faqs.d.ts","sourceRoot":"","sources":["../../../../src/future/components/faqs/faqs.tsx"],"names":[],"mappings":"AAUA,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,iBAAwB,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAyCzE;kBAzCuB,IAAI;mBA4CrB,MAAM,QACL,MAAM,QACN,MAAM,QACN,MAAM,QACN,MAAM;;eAhDU,IAAI"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
import Zone from "ublo/zone";
|
|
5
|
-
import { useUbloContext } from "ublo/with-ublo";
|
|
6
|
-
import { parse } from "node-html-parser";
|
|
7
|
-
import Config from "./config";
|
|
8
|
-
import Editor from "./editor";
|
|
9
|
-
import styles from "./faqs.module.css";
|
|
10
|
-
import * as API from "./services/api";
|
|
11
|
-
export default function Faqs({ className, faqs, faqUrl, faqZoneId }) {
|
|
12
|
-
const { cmsMode, zones } = useUbloContext();
|
|
13
|
-
const defaultConfig = JSON.parse(zones["faqs-config"] || "[]");
|
|
14
|
-
const [config, setConfig] = React.useState(defaultConfig);
|
|
15
|
-
const classes = classNames(styles.faqs, className);
|
|
16
|
-
const parsedFaqs = parse(faqs);
|
|
17
|
-
const selector = config.map((uuid) => `[data-uuid="${uuid}"]`).join(",");
|
|
18
|
-
const currentFaqs = parsedFaqs
|
|
19
|
-
.querySelectorAll(selector)
|
|
20
|
-
.map((faq) => faq.outerHTML)
|
|
21
|
-
.join("");
|
|
22
|
-
return (_jsxs("div", { className: classes, children: [_jsx(Config, { config: config }), _jsxs("div", { className: styles.inner, children: [_jsx(Zone, { id: "faqs-title", className: styles.title, tooltip: "Zone d'\u00E9dition : Titre des faqs", section: "title-2,title-3,title-4,rich-text" }), cmsMode === "editing" ? (_jsx(Editor, { currentFaqs: currentFaqs, faqUrl: faqUrl, faqZoneId: faqZoneId, config: config, setConfig: setConfig })) : (_jsx("div", { className: styles.content, dangerouslySetInnerHTML: { __html: currentFaqs } }))] })] }));
|
|
23
|
-
}
|
|
24
|
-
Faqs.get = (api, site, lang, path, zone) => {
|
|
25
|
-
return API.get(api, site, lang, path, zone);
|
|
26
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/future/components/faqs/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,eAAe,IAAI,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/faqs/services/api.ts"],"names":[],"mappings":"AAEA,wBAAsB,GAAG,CACvB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,mBAGb"}
|