@edifice.io/react 2.6.6-develop-b2school.20260925172645 → 2.6.6-develop-b2school.20260928135750

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/Layout/Layout.js +17 -5
  2. package/dist/hooks/useZendeskGuide/useZendeskGuide.d.ts +3 -1
  3. package/dist/hooks/useZendeskGuide/useZendeskGuide.js +9 -1
  4. package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.js +36 -26
  5. package/package.json +6 -6
package/dist/components/Layout/Layout.js CHANGED
@@ -14,16 +14,22 @@ import useZendeskGuide from "../../hooks/useZendeskGuide/useZendeskGuide.js";
14
14
  import useCantoo from "../../hooks/useCantoo/useCantoo.js";
15
15
  import Alert from "../Alert/Alert.js";
16
16
  import ButtonBeta from "../ButtonBeta/ButtonBeta.js";
17
- const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/components/Header/Header.js")), Layout = ({
17
+ import HelpZone from "../../modules/HelpZone/HelpZone.js";
18
+ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/components/Header/Header.js"));
19
+ function getHeaderColor() {
20
+ return getComputedStyle(document.documentElement).getPropertyValue("--primitive-blue-400").trim();
21
+ }
22
+ const Layout = ({
18
23
  children,
19
24
  headless = !1,
20
25
  whiteBg = !0,
21
26
  className,
22
27
  ...restProps
23
28
  }) => {
29
+ var _a;
24
30
  const {
25
31
  theme
26
- } = useEdificeTheme(), override = useUiOverride("layout.header"), isHeaderV2 = (override == null ? void 0 : override.variant) === "v2", {
32
+ } = useEdificeTheme(), override = useUiOverride("layout.header"), isHeaderV2 = (override == null ? void 0 : override.variant) === "v2", isEdificeInProductHelp = ((_a = useUiOverride("layout.helpzone")) == null ? void 0 : _a.variant) === "edifice-in-product", {
27
33
  productOverride,
28
34
  background,
29
35
  isBackgroundImageOverridden
@@ -35,8 +41,13 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
35
41
  showCookiesConsent,
36
42
  handleConsultCookies,
37
43
  handleCloseCookiesConsent
38
- } = useCookiesConsent();
39
- useZendeskGuide(), useCantoo();
44
+ } = useCookiesConsent(), {
45
+ isReady: isHelpZoneReady,
46
+ isOpen: isHelpZoneOpen,
47
+ open: openHelpZone,
48
+ close: closeHelpZone
49
+ } = useZendeskGuide(isEdificeInProductHelp ? getHeaderColor() : void 0);
50
+ useCantoo();
40
51
  const classes = clsx("d-flex flex-column", {
41
52
  "bg-white": whiteBg,
42
53
  "container-fluid": !headless,
@@ -50,7 +61,8 @@ const HeaderV2 = /* @__PURE__ */ lazy(() => import("../../modules/homepage/compo
50
61
  renderNotificationsOverlay,
51
62
  /* @__PURE__ */ jsx("main", { className: classes, ...restProps, children }),
52
63
  renderToaster,
53
- renderCookies
64
+ renderCookies,
65
+ isEdificeInProductHelp && /* @__PURE__ */ jsx(HelpZone, { isReady: isHelpZoneReady, isOpen: isHelpZoneOpen, onOpen: openHelpZone, onClose: closeHelpZone })
54
66
  ] });
55
67
  };
56
68
  export {
package/dist/hooks/useZendeskGuide/useZendeskGuide.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface UseZendeskGuideAPI {
9
9
  /**
10
10
  * Add Zendesk Guide
11
11
  *
12
- * @param headerColor Overrides the widget panel's theme color.
12
+ * @param headerColor Overrides the widget panel's theme color. Can change
13
+ * across renders (e.g. once resolved from async platform config) — the
14
+ * widget is updated in place, no need to keep it stable.
13
15
  */
14
16
  export default function useZendeskGuide(headerColor?: string): UseZendeskGuideAPI;
package/dist/hooks/useZendeskGuide/useZendeskGuide.js CHANGED
@@ -116,7 +116,15 @@ function useZendeskGuide(headerColor) {
116
116
  };
117
117
  }
118
118
  })();
119
- }, [hasSupportWorkflow]), {
119
+ }, [hasSupportWorkflow]), useEffect(() => {
120
+ !isReady || headerColor === void 0 || window.zE("webWidget", "updateSettings", {
121
+ webWidget: {
122
+ color: {
123
+ theme: headerColor
124
+ }
125
+ }
126
+ });
127
+ }, [headerColor, isReady]), {
120
128
  isReady,
121
129
  isOpen,
122
130
  open,
package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
- import { useState } from "react";
3
+ import { useState, useRef, useMemo, useEffect } from "react";
4
4
  import { useTranslation } from "react-i18next";
5
5
  import SvgIconCheck from "../../../../icons/components/IconCheck.js";
6
6
  import { getAppCodeAndI18nKey } from "./notificationAdapter.js";
7
7
  import Modal from "../../../../../components/Modal/Modal.js";
8
8
  import Flex from "../../../../../components/Flex/Flex.js";
9
- import Checkbox from "../../../../../components/Checkbox/Checkbox.js";
10
9
  import AppIcon from "../../../../../components/AppIcon/AppIcon.js";
11
10
  import ButtonBeta from "../../../../../components/ButtonBeta/ButtonBeta.js";
12
11
  const NotificationFilterModal = ({
@@ -17,48 +16,59 @@ const NotificationFilterModal = ({
17
16
  onApply
18
17
  }) => {
19
18
  const {
20
- t
21
- } = useTranslation(), [selected, setSelected] = useState(appliedTypes), toggleType = (type) => {
19
+ t,
20
+ i18n
21
+ } = useTranslation(), [selected, setSelected] = useState(appliedTypes), refSelectAllCheckbox = useRef(null), allTypesSorted = useMemo(() => allTypes.map((type) => {
22
+ const [appCode, appI18nKey] = getAppCodeAndI18nKey(type), label = t(appI18nKey, {
23
+ defaultValue: appCode
24
+ });
25
+ return {
26
+ type,
27
+ appCode,
28
+ appI18nKey,
29
+ label
30
+ };
31
+ }).sort((a, b) => a.label.localeCompare(b.label, i18n.language, {
32
+ sensitivity: "base"
33
+ })), [allTypes, t, i18n.language]), toggleType = (type) => {
22
34
  setSelected((current) => current.includes(type) ? current.filter((value) => value !== type) : [...current, type]);
23
35
  }, toggleAll = () => {
24
36
  setSelected(selected.length === allTypes.length ? [] : allTypes);
25
37
  };
26
- return /* @__PURE__ */ jsxs(Modal, { id: "notification-filter-modal", size: "lg", scrollable: !0, isOpen, onModalClose: onCancel, children: [
27
- /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.filter-modal.title", {
28
- defaultValue: "Filtrer les notifications"
29
- }) }),
30
- /* @__PURE__ */ jsx(Modal.Subtitle, { children: t("homepage.notifications.filter-modal.subtitle", {
31
- defaultValue: "Sélectionnez seulement les notifications importantes pour vous"
32
- }) }),
38
+ return useEffect(() => {
39
+ refSelectAllCheckbox.current && (refSelectAllCheckbox.current.indeterminate = selected.length > 0 && selected.length < allTypes.length);
40
+ }, [selected.length, allTypes.length]), /* @__PURE__ */ jsxs(Modal, { id: "notification-filter-modal", size: "lg", scrollable: !0, isOpen, onModalClose: onCancel, children: [
41
+ /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.filter-modal.title") }),
42
+ /* @__PURE__ */ jsx(Modal.Subtitle, { children: t("homepage.notifications.filter-modal.subtitle") }),
33
43
  /* @__PURE__ */ jsxs(Modal.Body, { children: [
34
- /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "mb-16", children: [
35
- /* @__PURE__ */ jsx("div", { className: "notification-filter-select-all", children: /* @__PURE__ */ jsx(Checkbox, { label: t("homepage.notifications.filter-modal.select-all", {
36
- defaultValue: "Tout sélectionner"
37
- }), checked: selected.length === allTypes.length, indeterminate: selected.length > 0 && selected.length < allTypes.length, onChange: toggleAll }) }),
44
+ /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "mb-24", children: [
45
+ /* @__PURE__ */ jsxs("label", { className: "notification-filter-select-all notification-filter-chip", children: [
46
+ /* @__PURE__ */ jsx("span", { children: t("homepage.notifications.filter-modal.select-all") }),
47
+ /* @__PURE__ */ jsx("input", { type: "checkbox", ref: refSelectAllCheckbox, checked: selected.length === allTypes.length, className: "notification-filter-checkbox", onChange: toggleAll })
48
+ ] }),
38
49
  /* @__PURE__ */ jsx("span", { className: "notification-filter-count", children: t("homepage.notifications.filter-modal.count", {
39
50
  selected: selected.length,
40
- total: allTypes.length,
41
- defaultValue: "[[selected]] / [[total]] sélectionnées"
51
+ total: allTypes.length
42
52
  }) })
43
53
  ] }),
44
- /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "8", className: "notification-filter-options", children: allTypes.map((type) => {
45
- const [appCode, appI18nKey] = getAppCodeAndI18nKey(type), checked = selected.includes(type);
54
+ /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "16", className: "notification-filter-options", children: allTypesSorted.map(({
55
+ type,
56
+ label,
57
+ appCode
58
+ }) => {
59
+ const checked = selected.includes(type);
46
60
  return /* @__PURE__ */ jsxs("label", { className: clsx("notification-filter-chip", {
47
61
  "is-checked": checked
48
62
  }), children: [
49
63
  /* @__PURE__ */ jsx(AppIcon, { app: appCode, size: "24", iconFit: "contain" }),
50
- /* @__PURE__ */ jsx("span", { children: t(appI18nKey, {
51
- defaultValue: appCode
52
- }) }),
53
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "form-check-input", checked, onChange: () => toggleType(type) })
64
+ /* @__PURE__ */ jsx("span", { children: label }),
65
+ /* @__PURE__ */ jsx("input", { type: "checkbox", className: "notification-filter-checkbox", checked, onChange: () => toggleType(type) })
54
66
  ] }, type);
55
67
  }) })
56
68
  ] }),
57
69
  /* @__PURE__ */ jsxs(Modal.Footer, { children: [
58
70
  /* @__PURE__ */ jsx(ButtonBeta, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("cancel") }),
59
- /* @__PURE__ */ jsx(ButtonBeta, { color: "default", onClick: () => onApply(selected), type: "button", variant: "filled", rightIcon: /* @__PURE__ */ jsx(SvgIconCheck, {}), children: t("homepage.notifications.filter-modal.confirm", {
60
- defaultValue: "Enregistrer"
61
- }) })
71
+ /* @__PURE__ */ jsx(ButtonBeta, { color: "default", onClick: () => onApply(selected), type: "button", variant: "filled", rightIcon: /* @__PURE__ */ jsx(SvgIconCheck, {}), children: t("homepage.notifications.filter-modal.confirm") })
62
72
  ] })
63
73
  ] });
64
74
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edifice.io/react",
3
- "version": "2.6.6-develop-b2school.20260925172645",
3
+ "version": "2.6.6-develop-b2school.20260928135750",
4
4
  "description": "Edifice React Library",
5
5
  "keywords": [
6
6
  "react",
@@ -140,9 +140,9 @@
140
140
  "swiper": "10.1.0",
141
141
  "ua-parser-js": "1.0.36",
142
142
  "zustand": "4.5.7",
143
- "@edifice.io/bootstrap": "2.6.6-develop-b2school.20260925172645",
144
- "@edifice.io/tiptap-extensions": "2.6.6-develop-b2school.20260925172645",
145
- "@edifice.io/utilities": "2.6.6-develop-b2school.20260925172645"
143
+ "@edifice.io/tiptap-extensions": "2.6.6-develop-b2school.20260928135750",
144
+ "@edifice.io/utilities": "2.6.6-develop-b2school.20260928135750",
145
+ "@edifice.io/bootstrap": "2.6.6-develop-b2school.20260928135750"
146
146
  },
147
147
  "devDependencies": {
148
148
  "@babel/plugin-transform-react-pure-annotations": "7.27.1",
@@ -173,8 +173,8 @@
173
173
  "vite": "5.4.14",
174
174
  "vite-plugin-dts": "4.5.4",
175
175
  "vite-tsconfig-paths": "5.1.4",
176
- "@edifice.io/client": "2.6.6-develop-b2school.20260925172645",
177
- "@edifice.io/config": "2.6.6-develop-b2school.20260925172645"
176
+ "@edifice.io/client": "2.6.6-develop-b2school.20260928135750",
177
+ "@edifice.io/config": "2.6.6-develop-b2school.20260928135750"
178
178
  },
179
179
  "peerDependencies": {
180
180
  "@react-spring/web": "9.7.5",