ublo-lib 1.24.4 → 1.25.1

package/es/common/components/cross-selling-editor/override-trigger-form.js

@@ -0,0 +1,156 @@
+import * as React from "react";
+import Input from "dt-design-system/es/input";
+import * as Icons from "dt-design-system/es/icons";
+import styles from "./override-trigger-form.module.css";
+import Select from "dt-design-system/es/select";
+import Tooltip from "dt-design-system/es/tooltip";
+import NumberPicker from "dt-design-system/es/number-picker";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function OverrideTriggerForm({
+  currentOffer,
+  override,
+  setConfig
+}) {
+  const triggers = override?.triggers || {};
+  const {
+    stayFrom,
+    stayTo,
+    stayDuration = 0,
+    merchant,
+    skiPassDuration,
+    skiPassDurationOperator = ">"
+  } = triggers;
+  const updateEntry = (key, value) => {
+    setConfig((config = {}) => {
+      const itemConfig = config[currentOffer] || {};
+      const itemOverrides = itemConfig.overrides || [];
+      const newConfig = {
+        ...config,
+        [currentOffer]: {
+          ...itemConfig,
+          overrides: [...itemOverrides.map(o => {
+            if (o.id === override.id) {
+              const triggersConfig = o.triggers || {};
+              return {
+                ...o,
+                triggers: {
+                  ...triggersConfig,
+                  [key]: value
+                }
+              };
+            }
+            return o;
+          })]
+        }
+      };
+      return newConfig;
+    });
+  };
+  const submitForm = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const stopPropagation = e => {
+    e.stopPropagation();
+  };
+  const operatorOptions = [{
+    value: ">",
+    label: "Supérieur à"
+  }, {
+    value: ">=",
+    label: "Supérieur ou égal à"
+  }, {
+    value: "<",
+    label: "Inférieur à"
+  }, {
+    value: "<=>",
+    label: "Inférieur ou égal à"
+  }, {
+    value: "=",
+    label: "Égal à"
+  }];
+  return _jsxs("form", {
+    className: styles.form,
+    onSubmit: submitForm,
+    onClick: stopPropagation,
+    children: [_jsx("div", {
+      className: styles.title,
+      children: "D\xE9clencheur(s)"
+    }), _jsx("div", {
+      className: styles.subTitle,
+      children: "S\xE9jour"
+    }), _jsx(Input, {
+      className: styles.input,
+      type: "date",
+      label: "Inclu entre",
+      value: stayFrom || "",
+      onValueChange: value => updateEntry("stayFrom", value),
+      compact: true
+    }), _jsx(Input, {
+      className: styles.input,
+      type: "date",
+      label: "et",
+      value: stayTo || "",
+      onValueChange: value => updateEntry("stayTo", value),
+      compact: true
+    }), _jsx(NumberPicker, {
+      label: _jsxs(_Fragment, {
+        children: ["Nombre de jour(s)", _jsx(Tooltip, {
+          content: "S\xE9jour d'une dur\xE9e sup\xE9rieur ou \xE9gal \xE0...",
+          children: _jsx("span", {
+            className: styles.labelIconContainer,
+            children: _jsx(Icons.Info, {
+              className: styles.labelIcon
+            })
+          })
+        })]
+      }),
+      min: 0,
+      max: 40,
+      value: stayDuration || 0,
+      onChange: value => updateEntry("stayDuration", value),
+      withInput: true,
+      compact: true
+    }), _jsx("div", {
+      className: styles.subTitle,
+      children: "G\xE9n\xE9ral"
+    }), _jsx(Input, {
+      className: styles.input,
+      label: _jsxs(_Fragment, {
+        children: ["Code(s) marchand(s)", _jsx(Tooltip, {
+          content: "Si plusieurs codes marchands, les s\xE9parer par une virgule",
+          children: _jsx("span", {
+            className: styles.labelIconContainer,
+            children: _jsx(Icons.Info, {
+              className: styles.labelIcon
+            })
+          })
+        })]
+      }),
+      value: merchant || "",
+      onValueChange: value => updateEntry("merchant", value),
+      compact: true
+    }), _jsx("div", {
+      className: styles.subTitle,
+      children: "Forfaits"
+    }), _jsx(NumberPicker, {
+      className: styles.input,
+      label: "Dur\xE9e",
+      min: 0,
+      max: 40,
+      value: skiPassDuration || 0,
+      onChange: value => updateEntry("skiPassDuration", value),
+      withInput: true,
+      compact: true
+    }), _jsx(Select, {
+      className: styles.input,
+      label: "Op\xE9rateur de comparaison",
+      options: operatorOptions,
+      value: skiPassDurationOperator || ">",
+      onValueChange: value => updateEntry("skiPassDurationOperator", value),
+      compact: true
+    })]
+  });
+}

package/es/common/components/cross-selling-editor/override-trigger-form.module.css

@@ -0,0 +1,58 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 14px;
+  text-align: center;
+}
+
+.subTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.subTitle::after {
+  content: "";
+  flex: 1 1 100%;
+  height: 1px;
+  background-color: var(--ds-grey-200, #ededed);
+}
+
+.input > label {
+  flex-direction: row;
+}
+
+.labelIconContainer {
+  display: inline-block;
+  transform: translate(4px, 3px);
+}
+
+.input .labelIconContainer {
+  transform: translate(-2px, 3px);
+}
+
+.labelIcon {
+  flex: 0 0 13px;
+  width: 13px;
+  height: 13px;
+}
+
+.input > label > span {
+  flex: 0 0 auto;
+  padding-left: 0;
+}
+
+.input > label > div {
+  flex: 1 1 100%;
+}
+
+.submit {
+  align-self: flex-end;
+  margin-top: 10px;
+}

package/es/common/components/cross-selling-editor/override.js

@@ -0,0 +1,124 @@
+import * as React from "react";
+import classNames from "classnames";
+import Popover from "dt-design-system/es/popover";
+import Button from "dt-design-system/es/button";
+import Input from "dt-design-system/es/input";
+import Tooltip from "dt-design-system/es/tooltip";
+import * as Icons from "dt-design-system/es/icons";
+import OverrideTriggerForm from "./override-trigger-form";
+import styles from "./override.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Override({
+  currentOffer,
+  override,
+  currentOverride,
+  setCurrentOverride,
+  config,
+  setConfig,
+  closeCreationForm
+}) {
+  const [formOpen, setFormOpen] = React.useState(false);
+  const toggleFormOpen = e => {
+    e.stopPropagation();
+    setFormOpen(formOpen => !formOpen);
+  };
+  const updateFormOpen = open => {
+    setFormOpen(open);
+  };
+  const updateCurrentOverride = () => {
+    const isSelected = currentOverride && override.id === currentOverride.id;
+    setCurrentOverride(isSelected ? null : override);
+    closeCreationForm();
+  };
+  const removeOverride = () => {
+    if (currentOverride === override) {
+      setCurrentOverride(null);
+    }
+    setConfig((config = {}) => {
+      const itemConfig = config[currentOffer] || {};
+      const itemOverrides = itemConfig.overrides || [];
+      const newConfig = {
+        ...config,
+        [currentOffer]: {
+          ...itemConfig,
+          overrides: itemOverrides.filter(o => o.id !== override.id)
+        }
+      };
+      return newConfig;
+    });
+    closeCreationForm();
+  };
+  const stopPropagation = e => {
+    e.stopPropagation();
+  };
+  const updateOverrideName = e => {
+    e.stopPropagation();
+    const target = e.target;
+    const allOverrides = config[currentOffer].overrides;
+    const isADuplicate = allOverrides.some(o => o.name === target.value);
+    if (isADuplicate) {
+      e.preventDefault();
+    } else {
+      setConfig((config = {}) => {
+        const itemConfig = config[currentOffer] || {};
+        const itemOverrides = itemConfig.overrides || [];
+        const newConfig = {
+          ...config,
+          [currentOffer]: {
+            ...itemConfig,
+            overrides: itemOverrides.map(o => {
+              if (o.id === override.id) {
+                return {
+                  ...o,
+                  name: target.value
+                };
+              }
+              return o;
+            })
+          }
+        };
+        return newConfig;
+      });
+    }
+    closeCreationForm();
+  };
+  const classes = classNames(styles.override, {
+    [styles.current]: currentOverride && override.id === currentOverride.id
+  });
+  return _jsxs("div", {
+    className: classes,
+    onClick: updateCurrentOverride,
+    children: [_jsx(Input, {
+      className: styles.input,
+      value: override.name,
+      onChange: updateOverrideName,
+      onClick: stopPropagation,
+      onBlur: updateOverrideName,
+      compact: true
+    }), _jsx(Popover, {
+      trigger: _jsx(Button, {
+        className: styles.edit,
+        compact: true,
+        onClick: toggleFormOpen,
+        children: _jsx(Icons.Tune, {})
+      }),
+      open: formOpen,
+      onOpenChange: updateFormOpen,
+      children: _jsx(OverrideTriggerForm, {
+        currentOffer: currentOffer,
+        override: override,
+        setConfig: setConfig
+      })
+    }), _jsx(Tooltip, {
+      content: "Supprimer",
+      children: _jsx(Button, {
+        className: styles.delete,
+        variant: "danger",
+        compact: true,
+        onClick: removeOverride,
+        children: _jsx(Icons.Bin, {})
+      })
+    })]
+  });
+}

package/es/common/components/cross-selling-editor/override.module.css

@@ -0,0 +1,65 @@
+.override {
+  --ds-input-font-size: 12px;
+  --ds-input-radius: var(--ds-radius-100, 4px);
+  --ds-input-compact-padding: 2px;
+  --ds-input-border: 0;
+  --ds-input-foreground: currentColor;
+  --ds-input-background: transparent;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: var(--ds-radius-100, 4px);
+  transition: color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+  user-select: none;
+}
+
+.override:not(.current):hover {
+  background-color: var(--ds-grey-200, #ededed);
+}
+
+.current {
+  color: var(--ds-grey-000, #fff);
+  background-color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
+}
+
+.override::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  width: 18px;
+  height: 2px;
+  background-color: var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+.input input {
+  font-size: 13px !important;
+  user-select: auto;
+}
+
+.input input:hover {
+  background-color: var(--ds-grey-300, #d7d7d7);
+}
+
+.current .input input:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.edit {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.delete {
+  flex: 0 0 auto;
+}

package/es/common/components/cross-selling-editor/overrides-list.js

@@ -0,0 +1,111 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import Collapsible from "dt-design-system/es/collapsible";
+import Popover from "dt-design-system/es/popover";
+import Input from "dt-design-system/es/input";
+import * as Icons from "dt-design-system/es/icons";
+import Override from "./override";
+import styles from "./overrides-list.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function OverridesList({
+  currentOffer,
+  overrides,
+  currentOverride,
+  setCurrentOverride,
+  config,
+  setConfig
+}) {
+  const [opened, setOpened] = React.useState(false);
+  const [newOverride, setNewOverride] = React.useState("");
+  const [creationFormOpened, setCreationFormOpened] = React.useState(false);
+  const hasOverrides = overrides.length > 0;
+  const newOverrideAlreadyExists = overrides.some(o => o.name === newOverride);
+  const newOverrideIsEmpty = newOverride.trim() === "";
+  const newOverrideIsInvalid = newOverrideAlreadyExists || newOverrideIsEmpty;
+  const error = newOverrideAlreadyExists && "Ce nom est déjà utilisé";
+  const closeCreationForm = () => {
+    setCreationFormOpened(false);
+  };
+  const toggleCreationForm = () => {
+    setCreationFormOpened(!creationFormOpened);
+  };
+  const createOverride = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setConfig((config = {}) => {
+      const itemConfig = config[currentOffer] || {};
+      const itemOverrides = itemConfig.overrides || [];
+      const newId = itemOverrides.length ? Math.max(...itemOverrides.map(({
+        id
+      }) => id)) + 1 : 0;
+      const newOverrideName = newOverride.trim();
+      const newConfig = {
+        ...config,
+        [currentOffer]: {
+          ...itemConfig,
+          overrides: [...itemOverrides, {
+            id: newId,
+            name: newOverrideName,
+            trigger: {},
+            rules: {}
+          }]
+        }
+      };
+      return newConfig;
+    });
+    setOpened(true);
+    setNewOverride("");
+    closeCreationForm();
+  };
+  return _jsxs("div", {
+    className: styles.overrides,
+    children: [hasOverrides ? _jsx(Collapsible, {
+      title: `${overrides.length} surcharges`,
+      className: styles.collapsible,
+      compact: true,
+      open: opened,
+      toggleTooltip: "Afficher toutes les surcharges",
+      onOpenChange: setOpened,
+      hiddenContent: overrides.map(override => {
+        return _jsx(Override, {
+          currentOffer: currentOffer,
+          override: override,
+          currentOverride: currentOverride,
+          setCurrentOverride: setCurrentOverride,
+          config: config,
+          setConfig: setConfig,
+          closeCreationForm: closeCreationForm
+        }, override.id);
+      })
+    }) : null, _jsxs("div", {
+      className: styles.addOverride,
+      children: ["Ajouter une surcharge", " ", _jsx(Popover, {
+        className: styles.popover,
+        trigger: _jsx(Button, {
+          compact: true,
+          onClick: toggleCreationForm,
+          children: _jsx(Icons.Plus, {})
+        }),
+        open: creationFormOpened,
+        children: _jsxs("form", {
+          className: styles.createForm,
+          onSubmit: createOverride,
+          children: [_jsx(Input, {
+            placeholder: "Nom",
+            value: newOverride,
+            onValueChange: setNewOverride,
+            error: error,
+            compact: true,
+            autoFocus: true
+          }), _jsx(Button, {
+            className: styles.createSubmit,
+            type: "submit",
+            disabled: newOverrideIsInvalid,
+            children: "Ajouter"
+          })]
+        })
+      })]
+    })]
+  });
+}

package/es/common/components/cross-selling-editor/overrides-list.module.css

@@ -0,0 +1,56 @@
+.overrides {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.overrides:not(:has(.addOverride:only-child)) {
+  position: relative;
+  padding-left: 20px;
+}
+
+.overrides:not(:has(.addOverride:only-child))::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 2px;
+  width: 2px;
+  height: calc(100% - 66px);
+  background-color: var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+.addOverride {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 6px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  font-size: 13px;
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+.collapsible {
+  --ds-collapsible-header-font-weight: 700;
+}
+
+.collapsible > div:last-child {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.popover {
+  pointer-events: auto;
+}
+
+.createForm {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.createSubmit {
+}

package/es/common/components/cross-selling-editor/rule.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import classNames from "classnames";
+import Checkbox from "dt-design-system/es/checkbox";
+import NumberPicker from "dt-design-system/es/number-picker";
+import styles from "./rule.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Rule({
+  title,
+  uuid,
+  uuids,
+  currentOffer,
+  currentOverride,
+  config,
+  setConfig
+}) {
+  const defaultConfig = config[currentOffer]?.default;
+  const isDefault = currentOverride === null;
+  const override = isDefault ? defaultConfig : config[currentOffer]?.overrides?.find(o => o.id === currentOverride?.id);
+  const currentValue = override?.rules?.[uuid]?.weight || 0;
+  const currentHidden = override?.rules?.[uuid]?.hidden || false;
+  const updateConfig = (key, value) => {
+    setConfig((config = {}) => {
+      const itemConfig = config[currentOffer] || {};
+      const newValue = key === "hidden" ? !value : Number(value);
+      if (isDefault) {
+        const defaultRules = defaultConfig?.rules || {};
+        const newConfig = {
+          ...config,
+          [currentOffer]: {
+            ...itemConfig,
+            default: {
+              ...defaultConfig,
+              rules: {
+                ...defaultRules,
+                [uuid]: {
+                  ...defaultRules?.[uuid],
+                  [key]: newValue
+                }
+              }
+            }
+          }
+        };
+        return newConfig;
+      } else {
+        const itemOverrides = itemConfig.overrides || [];
+        const overrideConfig = itemOverrides.find(o => o.id === override.id);
+        const rulesConfig = overrideConfig?.rules || {};
+        const offerConfig = overrideConfig?.[uuid] || {};
+        const cleanedRulesConfig = Object.keys(rulesConfig).reduce((acc, key) => {
+          if (uuids.includes(key)) {
+            return {
+              ...acc,
+              [key]: rulesConfig[key]
+            };
+          }
+          return acc;
+        }, {});
+        const newConfig = {
+          ...config,
+          [currentOffer]: {
+            ...itemConfig,
+            overrides: [...itemOverrides.map(o => {
+              if (o.id === override.id) {
+                return {
+                  ...o,
+                  rules: {
+                    ...cleanedRulesConfig,
+                    [uuid]: {
+                      ...offerConfig,
+                      [key]: newValue
+                    }
+                  }
+                };
+              }
+              return o;
+            })]
+          }
+        };
+        return newConfig;
+      }
+    });
+  };
+  const classes = classNames(styles.rule, {
+    [styles.disabled]: currentHidden
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsx(Checkbox, {
+      className: styles.checkbox,
+      checked: !currentHidden,
+      onCheckedChange: value => updateConfig("hidden", value)
+    }), _jsx("div", {
+      className: styles.title,
+      children: title
+    }), _jsx(NumberPicker, {
+      className: styles.valuePicker,
+      value: currentValue,
+      onChange: value => updateConfig("weight", value),
+      min: -10,
+      max: 10,
+      disabled: !currentOffer
+    })]
+  }, uuid);
+}

package/es/common/components/cross-selling-editor/rule.module.css

@@ -0,0 +1,37 @@
+.rule {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  border-radius: var(--ds-radius-100, 4px);
+  transition: background-color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.checkbox {
+  flex: 0 0 24px;
+  margin-right: 4px;
+}
+
+.title {
+  flex: 0 0 100px;
+  width: 100px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.select {
+  flex: 0 0 160px;
+  width: 160px;
+}
+
+.valuePicker {
+  width: fit-content;
+  margin-left: auto;
+}