ublo-lib 1.24.3 → 1.25.0

package/es/common/components/msem-preset-editor/editors/lodgings.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import Checkbox from "dt-design-system/es/checkbox";
 import NumberPicker from "dt-design-system/es/number-picker";
@@ -7,195 +6,328 @@ import MultipleSelect from "dt-design-system/es/multiple-select";
 import Form from "../components/form";
 import * as API from "../services/api";
 import css from "./lodgings.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULT_DATA = {
-    adults: 0,
-    children: 0,
-    lodging: "",
+  adults: 0,
+  children: 0,
+  lodging: "",
+  standings: [],
+  options: [],
+  districts: [],
+  nbRooms: [],
+  roomType: "",
+  type: "",
+  openPage: false
+};
+export default function Lodgings({
+  preset,
+  setPreset,
+  setShowPresetDialog,
+  testPreset,
+  onChange,
+  baseUrl,
+  noLodgingPage
+}) {
+  const savedPreset = React.useRef(preset);
+  const [ready, setReady] = React.useState(false);
+  const [lodgings, setLogings] = React.useState([]);
+  const [filters, setFilters] = React.useState({
     standings: [],
     options: [],
-    districts: [],
-    nbRooms: [],
-    roomType: "",
-    type: "",
-    openPage: false,
-};
-export default function Lodgings({ preset, setPreset, setShowPresetDialog, testPreset, onChange, baseUrl, noLodgingPage, }) {
-    const savedPreset = React.useRef(preset);
-    const [ready, setReady] = React.useState(false);
-    const [lodgings, setLogings] = React.useState([]);
-    const [filters, setFilters] = React.useState({
-        standings: [],
-        options: [],
-        districts: [],
+    districts: []
+  });
+  const [rooms, setRooms] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [data, setData] = React.useState(getDefaultData(preset));
+  const kinds = [...new Set(lodgings.map(({
+    kind
+  }) => kind))];
+  const {
+    channel,
+    resort,
+    facet
+  } = preset?.options || {};
+  const showLodgingPageCheckbox = !noLodgingPage && !!data.lodging;
+  const showFilters = !data.lodging;
+  const updateField = field => value => {
+    setData({
+      ...data,
+      [field]: value
     });
-    const [rooms, setRooms] = React.useState([]);
-    const [loading, setLoading] = React.useState(false);
-    const [data, setData] = React.useState(getDefaultData(preset));
-    const kinds = [...new Set(lodgings.map(({ kind }) => kind))];
-    const { channel, resort, facet } = preset?.options || {};
-    const showLodgingPageCheckbox = !noLodgingPage && !!data.lodging;
-    const showFilters = !data.lodging;
-    const updateField = (field) => (value) => {
-        setData({ ...data, [field]: value });
-    };
-    const updateRoomNb = (value) => {
-        setData({ ...data, nbRooms: value ? [value] : DEFAULT_DATA.nbRooms });
-    };
-    const updateFilter = (kind) => (newValue) => {
-        setData((data) => ({ ...data, [kind]: newValue.map((v) => v.value) }));
-    };
-    const formatedLodgings = lodgings.map((lodging) => ({
-        value: lodging.slug,
-        label: lodging.name,
-    }));
-    const formatedRooms = rooms.map((room) => ({
-        label: room.title,
-        value: room.type,
+  };
+  const updateRoomNb = value => {
+    setData({
+      ...data,
+      nbRooms: value ? [value] : DEFAULT_DATA.nbRooms
+    });
+  };
+  const updateFilter = kind => newValue => {
+    setData(data => ({
+      ...data,
+      [kind]: newValue.map(v => v.value)
     }));
-    // const selectedStandings = data.standings?.map((standing) =>
-    //   filters?.standings?.find((d) => d.value === standing)
-    // );
-    const selectedOptions = data.options?.map((option) => filters?.options?.find((d) => d.value === option));
-    const selectedDistricts = data.districts?.map((district) => filters?.districts?.find((d) => d.value === district));
-    const cancelPreset = () => {
-        setPreset(savedPreset.current);
-        setShowPresetDialog(false);
-    };
-    const confirmPreset = () => {
-        setShowPresetDialog(false);
-    };
-    React.useEffect(() => {
-        if (!ready) {
-            const init = async () => {
-                try {
-                    setLoading(true);
-                    const filters = await API.getLodgingFilters(channel, resort, facet);
-                    const formatedFilters = Object.keys(filters).reduce((acc, key) => {
-                        if (key === "accomodations")
-                            return acc;
-                        const filter = filters[key];
-                        if (key === "districts") {
-                            const entries = filter.map((entry) => ({
-                                value: entry.id,
-                                label: entry.name,
-                            }));
-                            return { ...acc, [key]: entries };
-                        }
-                        else {
-                            const entries = filter.map((entry) => ({
-                                value: entry.code,
-                                label: entry.label,
-                            }));
-                            return { ...acc, [key]: entries };
-                        }
-                    }, {});
-                    setLogings(filters.accomodations);
-                    setFilters(formatedFilters);
-                    setReady(true);
-                }
-                catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.error(e);
-                }
-                finally {
-                    setLoading(false);
-                }
-            };
-            init();
+  };
+  const formatedLodgings = lodgings.map(lodging => ({
+    value: lodging.slug,
+    label: lodging.name
+  }));
+  const formatedRooms = rooms.map(room => ({
+    label: room.title,
+    value: room.type
+  }));
+  const selectedOptions = data.options?.map(option => filters?.options?.find(d => d.value === option));
+  const selectedDistricts = data.districts?.map(district => filters?.districts?.find(d => d.value === district));
+  const cancelPreset = () => {
+    setPreset(savedPreset.current);
+    setShowPresetDialog(false);
+  };
+  const confirmPreset = () => {
+    setShowPresetDialog(false);
+  };
+  React.useEffect(() => {
+    if (!ready) {
+      const init = async () => {
+        try {
+          setLoading(true);
+          const filters = await API.getLodgingFilters(channel, resort, facet);
+          const formatedFilters = Object.keys(filters).reduce((acc, key) => {
+            if (key === "accomodations") return acc;
+            const filter = filters[key];
+            if (key === "districts") {
+              const entries = filter.map(entry => ({
+                value: entry.id,
+                label: entry.name
+              }));
+              return {
+                ...acc,
+                [key]: entries
+              };
+            } else {
+              const entries = filter.map(entry => ({
+                value: entry.code,
+                label: entry.label
+              }));
+              return {
+                ...acc,
+                [key]: entries
+              };
+            }
+          }, {});
+          setLogings(filters.accomodations);
+          setFilters(formatedFilters);
+          setReady(true);
+        } catch (e) {
+          console.error(e);
+        } finally {
+          setLoading(false);
         }
-    }, [channel, facet, ready, resort]);
-    React.useEffect(() => {
-        if (!data.lodging) {
-            setData((data) => ({ ...data, openPage: false }));
+      };
+      init();
+    }
+  }, [channel, facet, ready, resort]);
+  React.useEffect(() => {
+    if (!data.lodging) {
+      setData(data => ({
+        ...data,
+        openPage: false
+      }));
+    } else {
+      const getRoomTypes = async () => {
+        try {
+          setLoading(true);
+          const id = lodgings.find(lodging => lodging.slug === data.lodging)?.id;
+          if (id) {
+            const {
+              rooms
+            } = await API.getLodgingRooms(id, resort, facet);
+            if (rooms) {
+              setRooms(rooms);
+            }
+          }
+        } catch (e) {
+          console.error(e);
+        } finally {
+          setLoading(false);
         }
-        else {
-            const getRoomTypes = async () => {
-                try {
-                    setLoading(true);
-                    const id = lodgings.find((lodging) => lodging.slug === data.lodging)?.id;
-                    if (id) {
-                        const { rooms } = await API.getLodgingRooms(id, resort, facet);
-                        if (rooms) {
-                            setRooms(rooms);
-                        }
-                    }
-                }
-                catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.error(e);
-                }
-                finally {
-                    setLoading(false);
-                }
-                setData((data) => ({
-                    ...data,
-                    openPage: data.openPage ?? true,
-                    // standings: DEFAULT_DATA.standings,
-                    options: DEFAULT_DATA.options,
-                    districts: DEFAULT_DATA.districts,
-                    type: DEFAULT_DATA.type,
-                }));
-            };
-            getRoomTypes();
-        }
-    }, [data.lodging, facet, lodgings, resort]);
-    React.useEffect(() => {
-        setPreset((current = {}) => {
-            const { lodging } = data;
-            const adults = parseInt(data.adults);
-            const children = parseInt(data.children);
-            const accomodation = lodging || undefined;
-            const openPage = lodging ? data.openPage : undefined;
-            const agesChildren = [...new Array(children)].map((_) => 12);
-            const paxPlan = adults ? { adults, children, agesChildren } : undefined;
-            // const standings = data.standings?.length ? data.standings : undefined;
-            const options = data.options?.length ? data.options : undefined;
-            const districts = data.districts?.length ? data.districts : undefined;
-            const type = data.type || undefined;
-            const roomType = data.roomType || undefined;
-            const nbRooms = data.nbRooms[0] > 0 ? data.nbRooms : undefined;
-            const previewDetails = { paxPlan, roomType };
-            const presets = {
-                accomodation,
-                // standings,
-                options,
-                districts,
-                nbRooms,
-                type,
-            };
-            const newPreset = {
-                ...current,
-                options: { ...(current?.options || {}), previewDetails },
-                presets: { ...(current?.presets || {}), ...presets },
-                openPage,
-                url: baseUrl || undefined,
-            };
-            onChange?.(newPreset);
-            return newPreset;
-        });
-    }, [data, onChange, baseUrl, setPreset]);
-    return (_jsxs(Form, { title: "Presets h\u00E9bergements", width: 580, preset: preset, buttonsActions: {
-            testPreset,
-            cancelPreset,
-            confirmPreset,
-        }, children: [_jsx("div", { className: css.label, children: "Nombre de personnes" }), _jsxs("div", { className: css.row, children: [_jsx(NumberPicker, { className: css.peopleInput, label: "Adultes", min: 0, max: 20, value: data.adults, onChange: updateField("adults"), withInput: true }), _jsx(NumberPicker, { className: css.peopleInput, label: "Enfants", min: 0, max: 9, value: data.children, onChange: updateField("children"), withInput: true })] }), _jsx("div", { className: css.label, children: "H\u00E9bergement" }), _jsx(Select, { placeholder: "S\u00E9lectionnez un h\u00E9bergement", options: formatedLodgings, value: data.lodging, onValueChange: updateField("lodging"), loading: loading }), showLodgingPageCheckbox && (_jsx(Checkbox, { label: "Ouvrir la page du site", checked: data.openPage, disabled: !showLodgingPageCheckbox, onCheckedChange: updateField("openPage") })), !showFilters && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.label, children: "Chambres" }), (formatedRooms?.length > 0 || loading) && (_jsx(Select, { label: "Type de bien", placeholder: "S\u00E9lectionnez un type de bien", value: data.roomType, options: formatedRooms, loading: loading, onValueChange: updateField("roomType") })), _jsx(NumberPicker, { label: "Nombre de chambres", min: 0, max: 20, value: data.nbRooms?.[0] || 0, onChange: updateRoomNb, withInput: true })] })), showFilters && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.label, children: "Filtres" }), kinds.length > 1 && (_jsx(Select, { label: "Type", placeholder: "S\u00E9lectionnez un type", options: kinds, value: data.type, onValueChange: updateField("type"), loading: loading })), filters?.options && filters?.options?.length > 1 && (_jsx(MultipleSelect, { placeholder: "Selectionnez une ou plusieurs options", label: "Options", options: filters.options, values: selectedOptions, onChange: updateFilter("options"), loading: loading })), filters?.districts && filters?.districts?.length > 1 && (_jsx(MultipleSelect, { placeholder: "Selectionnez une ou plusieurs options", label: "Quartiers", options: filters.districts, values: selectedDistricts, onChange: updateFilter("districts"), loading: loading }))] }))] }));
+        setData(data => ({
+          ...data,
+          openPage: data.openPage ?? true,
+          options: DEFAULT_DATA.options,
+          districts: DEFAULT_DATA.districts,
+          type: DEFAULT_DATA.type
+        }));
+      };
+      getRoomTypes();
+    }
+  }, [data.lodging, facet, lodgings, resort]);
+  React.useEffect(() => {
+    setPreset((current = {}) => {
+      const {
+        lodging
+      } = data;
+      const adults = parseInt(data.adults);
+      const children = parseInt(data.children);
+      const accomodation = lodging || undefined;
+      const openPage = lodging ? data.openPage : undefined;
+      const agesChildren = [...new Array(children)].map(_ => 12);
+      const paxPlan = adults ? {
+        adults,
+        children,
+        agesChildren
+      } : undefined;
+      const options = data.options?.length ? data.options : undefined;
+      const districts = data.districts?.length ? data.districts : undefined;
+      const type = data.type || undefined;
+      const roomType = data.roomType || undefined;
+      const nbRooms = data.nbRooms[0] > 0 ? data.nbRooms : undefined;
+      const previewDetails = {
+        paxPlan,
+        roomType
+      };
+      const presets = {
+        accomodation,
+        options,
+        districts,
+        nbRooms,
+        type
+      };
+      const newPreset = {
+        ...current,
+        options: {
+          ...(current?.options || {}),
+          previewDetails
+        },
+        presets: {
+          ...(current?.presets || {}),
+          ...presets
+        },
+        openPage,
+        url: baseUrl || undefined
+      };
+      onChange?.(newPreset);
+      return newPreset;
+    });
+  }, [data, onChange, baseUrl, setPreset]);
+  return _jsxs(Form, {
+    title: "Presets h\xE9bergements",
+    width: 580,
+    preset: preset,
+    buttonsActions: {
+      testPreset,
+      cancelPreset,
+      confirmPreset
+    },
+    children: [_jsx("div", {
+      className: css.label,
+      children: "Nombre de personnes"
+    }), _jsxs("div", {
+      className: css.row,
+      children: [_jsx(NumberPicker, {
+        className: css.peopleInput,
+        label: "Adultes",
+        min: 0,
+        max: 20,
+        value: data.adults,
+        onChange: updateField("adults"),
+        withInput: true
+      }), _jsx(NumberPicker, {
+        className: css.peopleInput,
+        label: "Enfants",
+        min: 0,
+        max: 9,
+        value: data.children,
+        onChange: updateField("children"),
+        withInput: true
+      })]
+    }), _jsx("div", {
+      className: css.label,
+      children: "H\xE9bergement"
+    }), _jsx(Select, {
+      placeholder: "S\xE9lectionnez un h\xE9bergement",
+      options: formatedLodgings,
+      value: data.lodging,
+      onValueChange: updateField("lodging"),
+      loading: loading
+    }), showLodgingPageCheckbox && _jsx(Checkbox, {
+      label: "Ouvrir la page du site",
+      checked: data.openPage,
+      disabled: !showLodgingPageCheckbox,
+      onCheckedChange: updateField("openPage")
+    }), !showFilters && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: css.label,
+        children: "Chambres"
+      }), (formatedRooms?.length > 0 || loading) && _jsx(Select, {
+        label: "Type de bien",
+        placeholder: "S\xE9lectionnez un type de bien",
+        value: data.roomType,
+        options: formatedRooms,
+        loading: loading,
+        onValueChange: updateField("roomType")
+      }), _jsx(NumberPicker, {
+        label: "Nombre de chambres",
+        min: 0,
+        max: 20,
+        value: data.nbRooms?.[0] || 0,
+        onChange: updateRoomNb,
+        withInput: true
+      })]
+    }), showFilters && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: css.label,
+        children: "Filtres"
+      }), kinds.length > 1 && _jsx(Select, {
+        label: "Type",
+        placeholder: "S\xE9lectionnez un type",
+        options: kinds,
+        value: data.type,
+        onValueChange: updateField("type"),
+        loading: loading
+      }), filters?.options && filters?.options?.length > 1 && _jsx(MultipleSelect, {
+        placeholder: "Selectionnez une ou plusieurs options",
+        label: "Options",
+        options: filters.options,
+        values: selectedOptions,
+        onChange: updateFilter("options"),
+        loading: loading
+      }), filters?.districts && filters?.districts?.length > 1 && _jsx(MultipleSelect, {
+        placeholder: "Selectionnez une ou plusieurs options",
+        label: "Quartiers",
+        options: filters.districts,
+        values: selectedDistricts,
+        onChange: updateFilter("districts"),
+        loading: loading
+      })]
+    })]
+  });
 }
 function getDefaultData(preset) {
-    if (!preset?.presets && !preset?.options)
-        return DEFAULT_DATA;
-    const { accomodation, nbRooms, /* standings, */ options, districts, type } = preset?.presets || {};
-    const { openPage } = preset;
-    const { paxPlan, roomType } = preset?.options?.previewDetails || {};
-    return {
-        adults: paxPlan?.adults || DEFAULT_DATA.adults,
-        children: paxPlan?.children || DEFAULT_DATA.children,
-        lodging: accomodation || DEFAULT_DATA.lodging,
-        nbRooms: nbRooms || DEFAULT_DATA.nbRooms,
-        roomType: roomType || DEFAULT_DATA.roomType,
-        // standings: standings || DEFAULT_DATA.standings,
-        options: options || DEFAULT_DATA.options,
-        districts: districts || DEFAULT_DATA.districts,
-        type: type || DEFAULT_DATA.type,
-        openPage: openPage ?? DEFAULT_DATA.openPage,
-    };
-}
+  if (!preset?.presets && !preset?.options) return DEFAULT_DATA;
+  const {
+    accomodation,
+    nbRooms,
+    options,
+    districts,
+    type
+  } = preset?.presets || {};
+  const {
+    openPage
+  } = preset;
+  const {
+    paxPlan,
+    roomType
+  } = preset?.options?.previewDetails || {};
+  return {
+    adults: paxPlan?.adults || DEFAULT_DATA.adults,
+    children: paxPlan?.children || DEFAULT_DATA.children,
+    lodging: accomodation || DEFAULT_DATA.lodging,
+    nbRooms: nbRooms || DEFAULT_DATA.nbRooms,
+    roomType: roomType || DEFAULT_DATA.roomType,
+    options: options || DEFAULT_DATA.options,
+    districts: districts || DEFAULT_DATA.districts,
+    type: type || DEFAULT_DATA.type,
+    openPage: openPage ?? DEFAULT_DATA.openPage
+  };
+}