@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

package/dist/settings/components/notifications/AccountNotificationProfiles.es.js

@@ -0,0 +1,44 @@
+import { useSettingsStore as c } from "../../../common/context/hooks.es.js";
+import m from "../../../common/components/drawer/Drawer.es.js";
+import { ToggleButtonListItem as f } from "../../../common/components/listitems/ToggleButtonListItem.es.js";
+import { AccountNotificationProfile as u } from "./AccountNotificationProfile.es.js";
+import s from "react";
+import { observer as g } from "mobx-react-lite";
+import b from "@mui/material/Stack";
+import { ChevronRight as h } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+var w = g(() => {
+  const { accountProfiles: i, updateNotificationProfile: r } = c(), [n, a] = s.useState(""), o = s.useMemo(() => i.find((e) => e.guid === n), [i, n]), l = async (e) => {
+    await r({
+      ...e,
+      is_enabled: !e.is_enabled
+    });
+  }, d = async (e) => {
+    await r(e);
+  };
+  return /* @__PURE__ */ p(b, {
+    sx: { backgroundColor: "background.paper" },
+    children: [i.filter((e) => e.children && e.children.length > 0).map((e) => /* @__PURE__ */ t(f, {
+      endIcon: /* @__PURE__ */ t(h, {}),
+      isChecked: e.is_enabled,
+      isDisabled: !e.is_enabled,
+      onClick: () => a(e.guid),
+      onToggle: () => l(e),
+      primaryText: e.label,
+      secondaryText: e.is_enabled ? e.deliveryMethodsLabel : void 0
+    }, e.guid)), /* @__PURE__ */ t(m, {
+      isOpen: !!o,
+      onClose: () => a(""),
+      title: o ? o.label : "",
+      children: o && /* @__PURE__ */ t(u, {
+        onUpdateProfile: d,
+        profile: o
+      })
+    })]
+  });
+});
+export {
+  w as AccountNotificationProfiles
+};
+
+//# sourceMappingURL=AccountNotificationProfiles.es.js.map

package/dist/settings/components/notifications/AccountNotificationProfiles.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountNotificationProfiles.es.js","names":[],"sources":["../../../../src/settings/components/notifications/AccountNotificationProfiles.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { Drawer, ToggleButtonListItem, useSettingsStore } from '../../../common'\nimport { DetailedNotificationProfile } from '../../../core'\n\nimport { AccountNotificationProfile } from './AccountNotificationProfile'\n\nexport const AccountNotificationProfiles = observer(() => {\n  const { accountProfiles, updateNotificationProfile } = useSettingsStore()\n\n  const [selectedProfileGuid, setSelectedProfileGuid] = React.useState('')\n\n  const selectedProfile = React.useMemo(\n    () => accountProfiles.find((profile) => profile.guid === selectedProfileGuid),\n    [accountProfiles, selectedProfileGuid],\n  )\n\n  const handleProfileToggle = async (profile: DetailedNotificationProfile) => {\n    await updateNotificationProfile({\n      ...profile,\n      is_enabled: !profile.is_enabled,\n    })\n  }\n\n  const handleProfileUpdate = async (profile: DetailedNotificationProfile) => {\n    await updateNotificationProfile(profile)\n  }\n\n  return (\n    <Stack sx={{ backgroundColor: 'background.paper' }}>\n      {accountProfiles\n        // Don't show notification profiles that have no associated accounts (children)\n        .filter((profile) => profile.children && profile.children.length > 0)\n        .map((profile) => (\n          <ToggleButtonListItem\n            endIcon={<ChevronRight />}\n            isChecked={profile.is_enabled}\n            isDisabled={!profile.is_enabled}\n            key={profile.guid}\n            onClick={() => setSelectedProfileGuid(profile.guid)}\n            onToggle={() => handleProfileToggle(profile)}\n            primaryText={profile.label}\n            secondaryText={profile.is_enabled ? profile.deliveryMethodsLabel : undefined}\n          />\n        ))}\n      <Drawer\n        isOpen={Boolean(selectedProfile)}\n        onClose={() => setSelectedProfileGuid('')}\n        title={selectedProfile ? selectedProfile.label : ''}\n      >\n        {selectedProfile && (\n          <AccountNotificationProfile\n            onUpdateProfile={handleProfileUpdate}\n            profile={selectedProfile}\n          />\n        )}\n      </Drawer>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;AAYA,IAAa,IAA8B,EAAA,MAAe;AACxD,QAAM,EAAE,iBAAA,GAAiB,2BAAA,EAAA,IAA8B,EAAiB,GAElE,CAAC,GAAqB,CAAA,IAA0B,EAAM,SAAS,EAAE,GAEjE,IAAkB,EAAM,QAAA,MACtB,EAAgB,KAAA,CAAM,MAAY,EAAQ,SAAS,CAAmB,GAC5E,CAAC,GAAiB,CAAmB,CACvC,GAEM,IAAsB,OAAO,MAAyC;AAC1E,UAAM,EAA0B;AAAA,MAC9B,GAAG;AAAA,MACH,YAAY,CAAC,EAAQ;AAAA,IACvB,CAAC;AAAA,EACH,GAEM,IAAsB,OAAO,MAAyC;AAC1E,UAAM,EAA0B,CAAO;AAAA,EACzC;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,iBAAiB,mBAAmB;AAAA,cAAjD,CACG,EAEE,OAAA,CAAQ,MAAY,EAAQ,YAAY,EAAQ,SAAS,SAAS,CAAC,EACnE,IAAA,CAAK,MACJ,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,MACxB,WAAW,EAAQ;AAAA,MACnB,YAAY,CAAC,EAAQ;AAAA,MAErB,SAAA,MAAe,EAAuB,EAAQ,IAAI;AAAA,MAClD,UAAA,MAAgB,EAAoB,CAAO;AAAA,MAC3C,aAAa,EAAQ;AAAA,MACrB,eAAe,EAAQ,aAAa,EAAQ,uBAAuB;AAAA,IACpE,GALM,EAAQ,IAKd,CACF,GACH,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAQ;AAAA,MAChB,SAAA,MAAe,EAAuB,EAAE;AAAA,MACxC,OAAO,IAAkB,EAAgB,QAAQ;AAAA,gBAEhD,KACC,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACV,CAAA;AAAA,IAEG,CAAA,CACH;AAAA;AAEX,CAAC"}

package/dist/settings/components/notifications/AccountProfileListItem.es.js

@@ -0,0 +1,84 @@
+import { buildDynamicCopy as D } from "../../../core/utils/Localization.es.js";
+import { useAccountStore as A, useGlobalCopyStore as C } from "../../../common/context/hooks.es.js";
+import x from "../../../common/components/dialog/Dialog.es.js";
+import { AccountNotificationTypes as P } from "../../../core/types/Notification.es.js";
+import { formatCurrency as T, formatOrdinal as v } from "../../../core/utils/NumberFormatting.es.js";
+import I from "../../../common/components/CurrencyInput.es.js";
+import { ToggleButtonListItem as w } from "../../../common/components/listitems/ToggleButtonListItem.es.js";
+import i from "react";
+import { observer as S } from "mobx-react-lite";
+import O from "@mui/material/Stack";
+import { InstitutionLogo as k } from "@mxenabled/mxui";
+import { endOfMonth as L } from "date-fns/endOfMonth";
+import { startOfMonth as M } from "date-fns/startOfMonth";
+import { ChevronRight as R } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as B } from "react/jsx-runtime";
+import { AdapterDateFns as N } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DateCalendar as j } from "@mui/x-date-pickers/DateCalendar";
+import { LocalizationProvider as z } from "@mui/x-date-pickers/LocalizationProvider";
+var nt = S(({ onProfileUpdated: r, profile: t }) => {
+  const { common: m, recurring: d, settings: n } = C(), { updateAccount: y } = A(), e = t.notification_type === P.DebtPaymentReminder, [_, c] = i.useState(!1), [s, l] = i.useState(t.threshold || 0), [u, p] = i.useState(t.account?.day_payment_is_due || 0), h = t.account?.name || t.account?.feed_name || "", b = t.account?.day_payment_is_due ? D(n.notification_debt_payment_date, v(t.account?.day_payment_is_due)) : n.notification_debt_payment_zero_state, f = e ? b : T(t.threshold ?? 0, "0,0"), g = async () => {
+    e && t.account ? await y({
+      ...t.account,
+      day_payment_is_due: u
+    }) : r({
+      ...t,
+      threshold: s
+    });
+  };
+  return /* @__PURE__ */ B(O, { children: [/* @__PURE__ */ o(w, {
+    avatar: t.account?.institution_guid ? /* @__PURE__ */ o(k, {
+      alt: t.label,
+      institutionGuid: t.account?.institution_guid
+    }) : void 0,
+    endIcon: /* @__PURE__ */ o(R, {}),
+    isChecked: t.is_enabled,
+    isDisabled: !t.is_enabled,
+    isPrimaryTextBold: !0,
+    onClick: () => c(!0),
+    onToggle: () => r({
+      ...t,
+      is_enabled: !t.is_enabled
+    }),
+    primaryText: h,
+    secondaryText: t.is_enabled ? f : n.notification_disabled
+  }), /* @__PURE__ */ o(x, {
+    copy: {
+      title: e ? d.day_of_the_month : n.notification_threshold_label,
+      close_aria: m.close_aria
+    },
+    disablePrimaryButton: e && u === 0,
+    isOpen: _,
+    onClose: () => c(!1),
+    onPrimaryAction: g,
+    primaryText: m.save_button,
+    children: e ? /* @__PURE__ */ o(z, {
+      dateAdapter: N,
+      children: /* @__PURE__ */ o(j, {
+        maxDate: L(/* @__PURE__ */ new Date()),
+        minDate: M(/* @__PURE__ */ new Date()),
+        onChange: (a) => {
+          p(a.getDate());
+        },
+        slots: {
+          leftArrowIcon: () => null,
+          rightArrowIcon: () => null
+        },
+        sx: { "& .MuiPickersDay-today": { color: "primary.main" } },
+        views: ["day"]
+      })
+    }) : /* @__PURE__ */ o(I, {
+      amount: s,
+      autoFocus: !0,
+      fullWidth: !0,
+      minAmount: 0,
+      setAmount: (a) => l(Number(a) || 0),
+      sx: { ".MuiTypography-body1": { p: 0 } }
+    })
+  })] });
+});
+export {
+  nt as AccountProfileListItem
+};
+
+//# sourceMappingURL=AccountProfileListItem.es.js.map

package/dist/settings/components/notifications/AccountProfileListItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountProfileListItem.es.js","names":[],"sources":["../../../../src/settings/components/notifications/AccountProfileListItem.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Stack from '@mui/material/Stack'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { InstitutionLogo } from '@mxenabled/mxui'\n\nimport {\n  CurrencyInput,\n  Dialog,\n  ToggleButtonListItem,\n  useAccountStore,\n  useGlobalCopyStore,\n} from '../../../common'\nimport { AccountNotificationTypes, DetailedNotificationProfile } from '../../../core'\nimport { formatCurrency, formatOrdinal } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface AccountProfileListItemProps {\n  onProfileUpdated: (profile: DetailedNotificationProfile) => void\n  profile: DetailedNotificationProfile\n}\n\nexport const AccountProfileListItem = observer(\n  ({ onProfileUpdated, profile }: AccountProfileListItemProps) => {\n    const { common: commonCopy, recurring: recurringCopy, settings: copy } = useGlobalCopyStore()\n    const { updateAccount } = useAccountStore()\n\n    const isPaymentReminder =\n      profile.notification_type === AccountNotificationTypes.DebtPaymentReminder\n\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [amount, setAmount] = React.useState<number>(profile.threshold || 0)\n    const [paymentDay, setPaymentDay] = React.useState<number>(\n      profile.account?.day_payment_is_due || 0,\n    )\n\n    const accountName = profile.account?.name || profile.account?.feed_name || ''\n    const accountPaymentDate = profile.account?.day_payment_is_due\n      ? (buildDynamicCopy(\n          copy.notification_debt_payment_date,\n          formatOrdinal(profile.account?.day_payment_is_due),\n        ) as string)\n      : copy.notification_debt_payment_zero_state\n\n    const secondaryText = isPaymentReminder\n      ? accountPaymentDate\n      : formatCurrency(profile.threshold ?? 0, '0,0')\n\n    const handleUpdateProfile = async () => {\n      if (isPaymentReminder && profile.account) {\n        await updateAccount({ ...profile.account, day_payment_is_due: paymentDay })\n      } else {\n        onProfileUpdated({ ...profile, threshold: amount })\n      }\n    }\n\n    return (\n      <Stack>\n        <ToggleButtonListItem\n          avatar={\n            profile.account?.institution_guid ? (\n              <InstitutionLogo\n                alt={profile.label}\n                institutionGuid={profile.account?.institution_guid}\n              />\n            ) : undefined\n          }\n          endIcon={<ChevronRight />}\n          isChecked={profile.is_enabled}\n          isDisabled={!profile.is_enabled}\n          isPrimaryTextBold={true}\n          onClick={() => setIsOpen(true)}\n          onToggle={() =>\n            onProfileUpdated({\n              ...profile,\n              is_enabled: !profile.is_enabled,\n            })\n          }\n          primaryText={accountName}\n          secondaryText={!profile.is_enabled ? copy.notification_disabled : secondaryText}\n        />\n\n        <Dialog\n          copy={{\n            title: isPaymentReminder\n              ? recurringCopy.day_of_the_month\n              : copy.notification_threshold_label,\n            close_aria: commonCopy.close_aria,\n          }}\n          disablePrimaryButton={isPaymentReminder && paymentDay === 0}\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          onPrimaryAction={handleUpdateProfile}\n          primaryText={commonCopy.save_button}\n        >\n          {isPaymentReminder ? (\n            <LocalizationProvider dateAdapter={AdapterDateFns}>\n              <DateCalendar\n                maxDate={endOfMonth(new Date())}\n                minDate={startOfMonth(new Date())}\n                onChange={(date: Date) => {\n                  setPaymentDay(date.getDate())\n                }}\n                slots={{\n                  // Hides the arrows\n                  leftArrowIcon: () => null,\n                  rightArrowIcon: () => null,\n                }}\n                sx={{\n                  // TODO: Needs to be updated in MXUI\n                  '& .MuiPickersDay-today': {\n                    color: 'primary.main',\n                  },\n                }}\n                views={['day']}\n              />\n            </LocalizationProvider>\n          ) : (\n            <CurrencyInput\n              amount={amount}\n              autoFocus={true}\n              fullWidth={true}\n              minAmount={0}\n              setAmount={(value) => setAmount(Number(value) || 0)}\n              sx={{ '.MuiTypography-body1': { p: 0 } }}\n            />\n          )}\n        </Dialog>\n      </Stack>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/settings/components/notifications/BudgetNotificationProfiles.es.js

@@ -0,0 +1,14 @@
+import { useSettingsStore as i } from "../../../common/context/hooks.es.js";
+import { NotificationProfile as e } from "./NotificationProfile.es.js";
+import { observer as m } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { jsx as r } from "react/jsx-runtime";
+var u = m(() => {
+  const { budgetProfiles: t } = i();
+  return /* @__PURE__ */ r(f, { children: t.map((o) => /* @__PURE__ */ r(e, { profile: o }, o.guid)) });
+});
+export {
+  u as BudgetNotificationProfiles
+};
+
+//# sourceMappingURL=BudgetNotificationProfiles.es.js.map

package/dist/settings/components/notifications/BudgetNotificationProfiles.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetNotificationProfiles.es.js","names":[],"sources":["../../../../src/settings/components/notifications/BudgetNotificationProfiles.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { NotificationProfile } from './NotificationProfile'\n\nimport { useSettingsStore } from '../../../common'\n\nexport const BudgetNotificationProfiles = observer(() => {\n  const { budgetProfiles } = useSettingsStore()\n\n  return (\n    <Stack>\n      {budgetProfiles.map((profile) => (\n        <NotificationProfile key={profile.guid} profile={profile} />\n      ))}\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAQA,IAAa,IAA6B,EAAA,MAAe;AACvD,QAAM,EAAE,gBAAA,EAAA,IAAmB,EAAiB;AAE5C,SACE,gBAAA,EAAC,GAAD,EAAA,UACG,EAAe,IAAA,CAAK,MACnB,gBAAA,EAAC,GAAD,EAAiD,SAAA,EAAU,GAAjC,EAAQ,IAAyB,CAC5D,EACI,CAAA;AAEX,CAAC"}

package/dist/settings/components/notifications/DeliveryMethods.es.js

@@ -0,0 +1,78 @@
+import { useEvent as b, useGlobalCopyStore as g, useSettingsStore as y, useUserStore as x } from "../../../common/context/hooks.es.js";
+import { ToggleListItem as r } from "../../../common/components/listitems/ToggleListItem.es.js";
+import { observer as v } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { H3 as C, Text as T } from "@mxenabled/mxui";
+import { Star as P } from "@mxenabled/mx-icons";
+import { Fragment as f, jsx as i, jsxs as s } from "react/jsx-runtime";
+import S from "@mui/material/Card";
+import k from "@mui/material/CardContent";
+import p from "@mui/material/Divider";
+var M = v(() => {
+  const { onEvent: a } = b(), { settings: o } = g(), { clientCommunicationProfile: e, updateUserCommunicationProfile: u, userCommunicationsProfile: t } = y(), { user: n } = x(), _ = async (d, l) => {
+    const h = {
+      ...t,
+      [d]: l
+    };
+    if (a) {
+      const m = d.split("_")[3];
+      l === !1 ? a("opt_in_notification_method", { notificationType: m }) : a("opt_out_notification_method", { notificationType: m });
+    }
+    await u(h);
+  };
+  return /* @__PURE__ */ s(c, { children: [
+    /* @__PURE__ */ i(C, {
+      sx: { mt: 24 },
+      children: o.delivery_method_title
+    }),
+    e.email_notifications_enabled && /* @__PURE__ */ s(f, { children: [/* @__PURE__ */ i(r, {
+      isChecked: !!n.email && !t.opted_out_of_email_notifications,
+      isDisabled: !n.email,
+      onToggle: () => _("opted_out_of_email_notifications", !t.opted_out_of_email_notifications),
+      primaryText: o.delivery_method_email_title,
+      secondaryText: n.email && !t.opted_out_of_email_notifications ? o.notification_enabled : o.notification_disabled,
+      useExtraPadding: !1
+    }), (e.sms_notifications_enabled || e.push_notifications_enabled) && /* @__PURE__ */ i(p, {})] }),
+    e.sms_notifications_enabled && /* @__PURE__ */ s(f, { children: [/* @__PURE__ */ i(r, {
+      isChecked: !!n.phone && !t.opted_out_of_sms_notifications,
+      isDisabled: !n.phone,
+      onToggle: () => _("opted_out_of_sms_notifications", !t.opted_out_of_sms_notifications),
+      primaryText: o.delivery_method_sms_title,
+      secondaryText: n.phone && !t.opted_out_of_sms_notifications ? o.notification_enabled : o.notification_disabled,
+      useExtraPadding: !1
+    }), e.push_notifications_enabled && /* @__PURE__ */ i(p, {})] }),
+    e.push_notifications_enabled && /* @__PURE__ */ i(r, {
+      isChecked: !t.opted_out_of_push_notifications,
+      isDisabled: !0,
+      onToggle: () => {
+      },
+      primaryText: o.delivery_method_push_title,
+      secondaryText: o.delivery_method_push_subtitle,
+      useExtraPadding: !1
+    }),
+    e.sms_notifications_enabled && /* @__PURE__ */ i(S, {
+      sx: {
+        backgroundColor: "background.default",
+        mt: 12
+      },
+      variant: "outlined",
+      children: /* @__PURE__ */ i(k, { children: /* @__PURE__ */ s(c, {
+        alignItems: "flex-start",
+        direction: "row",
+        gap: 6,
+        children: [/* @__PURE__ */ i(P, {
+          color: "primary",
+          filled: !0
+        }), /* @__PURE__ */ i(T, {
+          variant: "caption",
+          children: o.delivery_method_sms_note_1
+        })]
+      }) })
+    })
+  ] });
+});
+export {
+  M as DeliveryMethods
+};
+
+//# sourceMappingURL=DeliveryMethods.es.js.map

package/dist/settings/components/notifications/DeliveryMethods.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeliveryMethods.es.js","names":[],"sources":["../../../../src/settings/components/notifications/DeliveryMethods.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Star } from '@mxenabled/mx-icons'\n\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport {\n  ToggleListItem,\n  useEvent,\n  useGlobalCopyStore,\n  useSettingsStore,\n  useUserStore,\n} from '../../../common'\nimport { type UserCommunicationProfile } from '../../../core'\n\nexport const DeliveryMethods = observer(() => {\n  const { onEvent } = useEvent()\n  const { settings: copy } = useGlobalCopyStore()\n  const {\n    clientCommunicationProfile: ccp,\n    updateUserCommunicationProfile,\n    userCommunicationsProfile: ucp,\n  } = useSettingsStore()\n  const { user } = useUserStore()\n\n  const onProfileChange = async <K extends keyof UserCommunicationProfile>(\n    key: K,\n    value: UserCommunicationProfile[K],\n  ) => {\n    const updatedProfile = { ...ucp, [key]: value }\n\n    if (onEvent) {\n      const keyParts = key.split('_')\n      const notificationType = keyParts[3] // e.g., 'email', 'sms', 'push' 'all'\n      if (value === false) {\n        onEvent('opt_in_notification_method', { notificationType })\n      } else {\n        onEvent('opt_out_notification_method', { notificationType })\n      }\n    }\n\n    await updateUserCommunicationProfile(updatedProfile)\n  }\n\n  return (\n    <Stack>\n      <H3 sx={{ mt: 24 }}>{copy.delivery_method_title}</H3>\n\n      {ccp.email_notifications_enabled && (\n        <>\n          <ToggleListItem\n            isChecked={!!user.email && !ucp.opted_out_of_email_notifications}\n            isDisabled={!user.email}\n            onToggle={() =>\n              onProfileChange(\n                'opted_out_of_email_notifications',\n                !ucp.opted_out_of_email_notifications,\n              )\n            }\n            primaryText={copy.delivery_method_email_title}\n            secondaryText={\n              !!user.email && !ucp.opted_out_of_email_notifications\n                ? copy.notification_enabled\n                : copy.notification_disabled\n            }\n            useExtraPadding={false}\n          />\n\n          {(ccp.sms_notifications_enabled || ccp.push_notifications_enabled) && <Divider />}\n        </>\n      )}\n\n      {ccp.sms_notifications_enabled && (\n        <>\n          <ToggleListItem\n            isChecked={!!user.phone && !ucp.opted_out_of_sms_notifications}\n            isDisabled={!user.phone}\n            onToggle={() =>\n              onProfileChange('opted_out_of_sms_notifications', !ucp.opted_out_of_sms_notifications)\n            }\n            primaryText={copy.delivery_method_sms_title}\n            secondaryText={\n              !!user.phone && !ucp.opted_out_of_sms_notifications\n                ? copy.notification_enabled\n                : copy.notification_disabled\n            }\n            useExtraPadding={false}\n          />\n\n          {ccp.push_notifications_enabled && <Divider />}\n        </>\n      )}\n\n      {ccp.push_notifications_enabled && (\n        <ToggleListItem\n          isChecked={!ucp.opted_out_of_push_notifications}\n          isDisabled={true}\n          onToggle={() => {}}\n          primaryText={copy.delivery_method_push_title}\n          secondaryText={copy.delivery_method_push_subtitle}\n          useExtraPadding={false}\n        />\n      )}\n\n      {ccp.sms_notifications_enabled && (\n        <Card sx={{ backgroundColor: 'background.default', mt: 12 }} variant=\"outlined\">\n          <CardContent>\n            <Stack alignItems=\"flex-start\" direction=\"row\" gap={6}>\n              <Star color=\"primary\" filled={true} />\n              <Text variant=\"caption\">{copy.delivery_method_sms_note_1}</Text>\n            </Stack>\n          </CardContent>\n        </Card>\n      )}\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAAkB,EAAA,MAAe;AAC5C,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EACJ,4BAA4B,GAC5B,gCAAA,GACA,2BAA2B,EAAA,IACzB,EAAiB,GACf,EAAE,MAAA,EAAA,IAAS,EAAa,GAExB,IAAkB,OACtB,GACA,MACG;AACH,UAAM,IAAiB;AAAA,MAAE,GAAG;AAAA,OAAM,CAAA,GAAM;AAAA,IAAM;AAE9C,QAAI,GAAS;AAEX,YAAM,IADW,EAAI,MAAM,GACF,EAAS,CAAA;AAClC,MAAI,MAAU,KACZ,EAAQ,8BAA8B,EAAE,kBAAA,EAAiB,CAAC,IAE1D,EAAQ,+BAA+B,EAAE,kBAAA,EAAiB,CAAC;AAAA,IAE/D;AAEA,UAAM,EAA+B,CAAc;AAAA,EACrD;AAEA,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAI,IAAI,EAAE,IAAI,GAAG;AAAA,gBAAI,EAAK;AAAA,IAA0B,CAAA;AAAA,IAEnD,EAAI,+BACH,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,CAAC,CAAC,EAAK,SAAS,CAAC,EAAI;AAAA,MAChC,YAAY,CAAC,EAAK;AAAA,MAClB,UAAA,MACE,EACE,oCACA,CAAC,EAAI,gCACP;AAAA,MAEF,aAAa,EAAK;AAAA,MAClB,eACI,EAAK,SAAS,CAAC,EAAI,mCACjB,EAAK,uBACL,EAAK;AAAA,MAEX,iBAAiB;AAAA,IAClB,CAAA,IAEC,EAAI,6BAA6B,EAAI,+BAA+B,gBAAA,EAAC,GAAD,CAAU,CAAA,CAChF,EAAA,CAAA;AAAA,IAGH,EAAI,6BACH,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,CAAC,CAAC,EAAK,SAAS,CAAC,EAAI;AAAA,MAChC,YAAY,CAAC,EAAK;AAAA,MAClB,UAAA,MACE,EAAgB,kCAAkC,CAAC,EAAI,8BAA8B;AAAA,MAEvF,aAAa,EAAK;AAAA,MAClB,eACI,EAAK,SAAS,CAAC,EAAI,iCACjB,EAAK,uBACL,EAAK;AAAA,MAEX,iBAAiB;AAAA,IAClB,CAAA,GAEA,EAAI,8BAA8B,gBAAA,EAAC,GAAD,CAAU,CAAA,CAC7C,EAAA,CAAA;AAAA,IAGH,EAAI,8BACH,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,CAAC,EAAI;AAAA,MAChB,YAAY;AAAA,MACZ,UAAA,MAAgB;AAAA,MAAC;AAAA,MACjB,aAAa,EAAK;AAAA,MAClB,eAAe,EAAK;AAAA,MACpB,iBAAiB;AAAA,IAClB,CAAA;AAAA,IAGF,EAAI,6BACH,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,iBAAiB;AAAA,QAAsB,IAAI;AAAA,MAAG;AAAA,MAAG,SAAQ;AAAA,gBACnE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAa,WAAU;AAAA,QAAM,KAAK;AAAA,kBAApD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAU,QAAQ;AAAA,QAAO,CAAA,GACrC,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW,EAAK;AAAA,QAAiC,CAAA,CAC1D;AAAA,SACI,CAAA;AAAA,IACT,CAAA;AAAA,EAEH,EAAA,CAAA;AAEX,CAAC"}

package/dist/settings/components/notifications/InsightsNotificationProfiles.es.js

@@ -0,0 +1,14 @@
+import { useSettingsStore as t } from "../../../common/context/hooks.es.js";
+import { NotificationProfile as m } from "./NotificationProfile.es.js";
+import { observer as s } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { jsx as r } from "react/jsx-runtime";
+var g = s(() => {
+  const { insightsProfiles: i } = t();
+  return /* @__PURE__ */ r(e, { children: i.map((o) => /* @__PURE__ */ r(m, { profile: o }, o.guid)) });
+});
+export {
+  g as InsightsNotificationProfiles
+};
+
+//# sourceMappingURL=InsightsNotificationProfiles.es.js.map

package/dist/settings/components/notifications/InsightsNotificationProfiles.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightsNotificationProfiles.es.js","names":[],"sources":["../../../../src/settings/components/notifications/InsightsNotificationProfiles.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useSettingsStore } from '../../../common'\n\nimport { NotificationProfile } from './NotificationProfile'\n\nexport const InsightsNotificationProfiles = observer(() => {\n  const { insightsProfiles } = useSettingsStore()\n\n  return (\n    <Stack>\n      {insightsProfiles.map((profile) => (\n        <NotificationProfile key={profile.guid} profile={profile} />\n      ))}\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAQA,IAAa,IAA+B,EAAA,MAAe;AACzD,QAAM,EAAE,kBAAA,EAAA,IAAqB,EAAiB;AAE9C,SACE,gBAAA,EAAC,GAAD,EAAA,UACG,EAAiB,IAAA,CAAK,MACrB,gBAAA,EAAC,GAAD,EAAiD,SAAA,EAAU,GAAjC,EAAQ,IAAyB,CAC5D,EACI,CAAA;AAEX,CAAC"}

package/dist/settings/components/notifications/NotificationProfile.es.js

@@ -0,0 +1,80 @@
+import { useGlobalCopyStore as T, useSettingsStore as v, useUserStore as D } from "../../../common/context/hooks.es.js";
+import { ToggleButtonListItem as C } from "../../../common/components/listitems/ToggleButtonListItem.es.js";
+import { ToggleListItem as m } from "../../../common/components/listitems/ToggleListItem.es.js";
+import k from "react";
+import { observer as P } from "mobx-react-lite";
+import { ExpandMore as S } from "@mxenabled/mx-icons";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import r from "@mui/material/Divider";
+import p from "@mui/material/List";
+import w from "@mui/material/Collapse";
+var q = P(({ profile: e }) => {
+  const { settings: n } = T(), { clientCommunicationProfile: { email_notifications_enabled: l, push_notifications_enabled: o, sms_notifications_enabled: i }, updateNotificationProfile: x, userCommunicationsProfile: { opted_out_of_email_notifications: c, opted_out_of_push_notifications: _, opted_out_of_sms_notifications: h } } = v(), { user: a } = D(), [d, u] = k.useState(!1), f = async () => {
+    await t({
+      ...e,
+      is_enabled: !e.is_enabled
+    }), e.is_enabled && u(!1);
+  }, t = async (y) => {
+    await x(y);
+  }, b = l || i || o;
+  return /* @__PURE__ */ g(p, {
+    sx: { bgcolor: "background.paper" },
+    children: [
+      /* @__PURE__ */ s(C, {
+        endIcon: b ? /* @__PURE__ */ s(S, { sx: {
+          transition: "transform 0.3s ease-in-out",
+          transform: d ? "rotate(180deg)" : "rotate(0deg)"
+        } }) : void 0,
+        isChecked: e.is_enabled,
+        isDisabled: !e.is_enabled,
+        onClick: () => u(!d),
+        onToggle: () => f(),
+        primaryText: e.label,
+        secondaryText: e.is_enabled ? e.deliveryMethodsLabel : void 0
+      }, e.guid),
+      b && /* @__PURE__ */ s(w, {
+        in: d,
+        children: /* @__PURE__ */ g(p, {
+          sx: { bgcolor: "background.paper" },
+          children: [
+            l && /* @__PURE__ */ s(m, {
+              isChecked: !c && e.email_channel && !!a.email,
+              isDisabled: c || !a.email,
+              onToggle: () => t({
+                ...e,
+                email_channel: !e.email_channel
+              }),
+              primaryText: n.delivery_method_email_label
+            }),
+            l && (i || o) && /* @__PURE__ */ s(r, { sx: { ml: 48 } }),
+            i && /* @__PURE__ */ s(m, {
+              isChecked: !h && e.sms_channel && !!a.phone,
+              isDisabled: h || !a.phone,
+              onToggle: () => t({
+                ...e,
+                sms_channel: !e.sms_channel
+              }),
+              primaryText: n.delivery_method_sms_label
+            }),
+            i && o && /* @__PURE__ */ s(r, { sx: { ml: 48 } }),
+            o && /* @__PURE__ */ s(m, {
+              isChecked: !_ && e.push_channel,
+              isDisabled: _,
+              onToggle: () => t({
+                ...e,
+                push_channel: !e.push_channel
+              }),
+              primaryText: n.delivery_method_push_label
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ s(r, {})
+    ]
+  }, e.guid);
+});
+export {
+  q as NotificationProfile
+};
+
+//# sourceMappingURL=NotificationProfile.es.js.map

package/dist/settings/components/notifications/NotificationProfile.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationProfile.es.js","names":[],"sources":["../../../../src/settings/components/notifications/NotificationProfile.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Collapse from '@mui/material/Collapse'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nimport {\n  ToggleButtonListItem,\n  ToggleListItem,\n  useGlobalCopyStore,\n  useSettingsStore,\n  useUserStore,\n} from '../../../common'\nimport { type DetailedNotificationProfile } from '../../../core'\n\ninterface BudgetNotificationProfileProps {\n  profile: DetailedNotificationProfile\n}\n\nexport const NotificationProfile = observer(({ profile }: BudgetNotificationProfileProps) => {\n  const { settings: copy } = useGlobalCopyStore()\n  const {\n    clientCommunicationProfile: {\n      email_notifications_enabled: showEmail,\n      push_notifications_enabled: showPush,\n      sms_notifications_enabled: showSms,\n    },\n    updateNotificationProfile,\n    userCommunicationsProfile: {\n      opted_out_of_email_notifications: emailDisabled,\n      opted_out_of_push_notifications: pushDisabled,\n      opted_out_of_sms_notifications: smsDisabled,\n    },\n  } = useSettingsStore()\n\n  const { user: userDetails } = useUserStore()\n\n  const [isExpanded, setIsExpanded] = React.useState(false)\n\n  const handleProfileToggle = async () => {\n    await handleUpdateProfile({ ...profile, is_enabled: !profile.is_enabled })\n\n    if (profile.is_enabled) {\n      setIsExpanded(false)\n    }\n  }\n\n  const handleUpdateProfile = async (updatedProfile: DetailedNotificationProfile) => {\n    await updateNotificationProfile(updatedProfile)\n  }\n\n  const hasDeliveryMethods = showEmail || showSms || showPush\n\n  return (\n    <List key={profile.guid} sx={{ bgcolor: 'background.paper' }}>\n      <ToggleButtonListItem\n        endIcon={\n          hasDeliveryMethods ? (\n            <ExpandMore\n              sx={{\n                transition: 'transform 0.3s ease-in-out',\n                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n              }}\n            />\n          ) : undefined\n        }\n        isChecked={profile.is_enabled}\n        isDisabled={!profile.is_enabled}\n        key={profile.guid}\n        onClick={() => setIsExpanded(!isExpanded)}\n        onToggle={() => handleProfileToggle()}\n        primaryText={profile.label}\n        secondaryText={profile.is_enabled ? profile.deliveryMethodsLabel : undefined}\n      />\n      {hasDeliveryMethods && (\n        <Collapse in={isExpanded}>\n          <List sx={{ bgcolor: 'background.paper' }}>\n            {showEmail && (\n              <ToggleListItem\n                isChecked={!emailDisabled && profile.email_channel && !!userDetails.email}\n                isDisabled={emailDisabled || !userDetails.email}\n                onToggle={() =>\n                  handleUpdateProfile({\n                    ...profile,\n                    email_channel: !profile.email_channel,\n                  })\n                }\n                primaryText={copy.delivery_method_email_label}\n              />\n            )}\n\n            {showEmail && (showSms || showPush) && <Divider sx={{ ml: 48 }} />}\n\n            {showSms && (\n              <ToggleListItem\n                isChecked={!smsDisabled && profile.sms_channel && !!userDetails.phone}\n                isDisabled={smsDisabled || !userDetails.phone}\n                onToggle={() =>\n                  handleUpdateProfile({\n                    ...profile,\n                    sms_channel: !profile.sms_channel,\n                  })\n                }\n                primaryText={copy.delivery_method_sms_label}\n              />\n            )}\n\n            {showSms && showPush && <Divider sx={{ ml: 48 }} />}\n\n            {showPush && (\n              <ToggleListItem\n                isChecked={!pushDisabled && profile.push_channel}\n                isDisabled={pushDisabled}\n                onToggle={() =>\n                  handleUpdateProfile({\n                    ...profile,\n                    push_channel: !profile.push_channel,\n                  })\n                }\n                primaryText={copy.delivery_method_push_label}\n              />\n            )}\n          </List>\n        </Collapse>\n      )}\n      <Divider />\n    </List>\n  )\n})\n"],"mappings":";;;;;;;;;;AAsBA,IAAa,IAAsB,EAAA,CAAU,EAAE,SAAA,EAAA,MAA8C;AAC3F,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EACJ,4BAA4B,EAC1B,6BAA6B,GAC7B,4BAA4B,GAC5B,2BAA2B,EAAA,GAE7B,2BAAA,GACA,2BAA2B,EACzB,kCAAkC,GAClC,iCAAiC,GACjC,gCAAgC,EAAA,EAAA,IAEhC,EAAiB,GAEf,EAAE,MAAM,EAAA,IAAgB,EAAa,GAErC,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAElD,IAAsB,YAAY;AACtC,UAAM,EAAoB;AAAA,MAAE,GAAG;AAAA,MAAS,YAAY,CAAC,EAAQ;AAAA,IAAW,CAAC,GAErE,EAAQ,cACV,EAAc,EAAK;AAAA,EAEvB,GAEM,IAAsB,OAAO,MAAgD;AACjF,UAAM,EAA0B,CAAc;AAAA,EAChD,GAEM,IAAqB,KAAa,KAAW;AAEnD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAyB,IAAI,EAAE,SAAS,mBAAmB;AAAA,cAA3D;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,SACE,IACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,WAAW,IAAa,mBAAmB;AAAA,QAC7C,EACD,CAAA,IACC;AAAA,QAEN,WAAW,EAAQ;AAAA,QACnB,YAAY,CAAC,EAAQ;AAAA,QAErB,SAAA,MAAe,EAAc,CAAC,CAAU;AAAA,QACxC,UAAA,MAAgB,EAAoB;AAAA,QACpC,aAAa,EAAQ;AAAA,QACrB,eAAe,EAAQ,aAAa,EAAQ,uBAAuB;AAAA,MACpE,GALM,EAAQ,IAKd;AAAA,MACA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAU,IAAI;AAAA,kBACZ,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,SAAS,mBAAmB;AAAA,oBAAxC;AAAA,YACG,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,WAAW,CAAC,KAAiB,EAAQ,iBAAiB,CAAC,CAAC,EAAY;AAAA,cACpE,YAAY,KAAiB,CAAC,EAAY;AAAA,cAC1C,UAAA,MACE,EAAoB;AAAA,gBAClB,GAAG;AAAA,gBACH,eAAe,CAAC,EAAQ;AAAA,cAC1B,CAAC;AAAA,cAEH,aAAa,EAAK;AAAA,YACnB,CAAA;AAAA,YAGF,MAAc,KAAW,MAAa,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA;AAAA,YAEhE,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,WAAW,CAAC,KAAe,EAAQ,eAAe,CAAC,CAAC,EAAY;AAAA,cAChE,YAAY,KAAe,CAAC,EAAY;AAAA,cACxC,UAAA,MACE,EAAoB;AAAA,gBAClB,GAAG;AAAA,gBACH,aAAa,CAAC,EAAQ;AAAA,cACxB,CAAC;AAAA,cAEH,aAAa,EAAK;AAAA,YACnB,CAAA;AAAA,YAGF,KAAW,KAAY,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA;AAAA,YAEjD,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,WAAW,CAAC,KAAgB,EAAQ;AAAA,cACpC,YAAY;AAAA,cACZ,UAAA,MACE,EAAoB;AAAA,gBAClB,GAAG;AAAA,gBACH,cAAc,CAAC,EAAQ;AAAA,cACzB,CAAC;AAAA,cAEH,aAAa,EAAK;AAAA,YACnB,CAAA;AAAA,UAEC;AAAA;MACE,CAAA;AAAA,MAEZ,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,IACN;AAAA,KAxEK,EAAQ,IAwEb;AAEV,CAAC"}

package/dist/settings/components/notifications/NotificationSettings.es.js

@@ -0,0 +1,94 @@
+import { useAccountStore as j, useAppConfig as w, useGlobalCopyStore as F, useGlobalUiStore as G, useSettingsStore as M } from "../../../common/context/hooks.es.js";
+import { useInsightsEnabled as R } from "../../../common/hooks/useInsightsEnabled.es.js";
+import { useWidgetLoadTimer as T } from "../../../common/hooks/useWidgetLoadTimer.es.js";
+import W from "../../../common/components/drawer/Drawer.es.js";
+import { NotificationTypes as i } from "../../../core/types/Notification.es.js";
+import z from "../../../common/components/Loader.es.js";
+import { AccountNotificationProfiles as y } from "./AccountNotificationProfiles.es.js";
+import { BudgetNotificationProfiles as I } from "./BudgetNotificationProfiles.es.js";
+import { DeliveryMethods as H } from "./DeliveryMethods.es.js";
+import { InsightsNotificationProfiles as x } from "./InsightsNotificationProfiles.es.js";
+import U from "./PersonalDetails.es.js";
+import c from "react";
+import { observer as $ } from "mobx-react-lite";
+import l from "@mui/material/Stack";
+import { H3 as q } from "@mxenabled/mxui";
+import { ChevronRight as f } from "@mxenabled/mx-icons";
+import { Fragment as J, jsx as t, jsxs as o } from "react/jsx-runtime";
+import K from "@mui/material/Divider";
+import Q from "@mui/material/List";
+import u from "@mui/material/ListItem";
+import p from "@mui/material/ListItemButton";
+import g from "@mui/material/ListItemText";
+var bt = $(({ notificationTypes: n = [i.Accounts, i.Budgets], showPersonalDetails: S = !1, view: a }) => {
+  const { config: h } = w(), { settings: e } = F(), { isInitialized: d } = G(), { isAccountDataLoaded: A, loadAccountData: L } = j(), { clientCommunicationProfile: _, loadNotificationProfiles: B } = M(), C = R(), [D, E] = c.useState(!1), [s, r] = c.useState(void 0);
+  if (n.length > 0 && C && n.push(i.Insights), T({
+    widgetName: "NotificationSettingsWidget",
+    isLoaded: D
+  }), c.useEffect(() => {
+    A || L().finally();
+  }, []), c.useEffect(() => {
+    d && B().finally(() => E(!0));
+  }, [d]), !d) return /* @__PURE__ */ t(z, {});
+  let m = e.manage_account_notifications;
+  s === i.Budgets ? m = e.manage_budget_notifications : s === i.Insights && (m = e.manage_insights_notifications);
+  const { email_notifications_enabled: N, sms_notifications_enabled: P, push_notifications_enabled: v } = _, b = N || P || v;
+  if (a === "accounts") return /* @__PURE__ */ t(y, {});
+  if (a === "budgets") return /* @__PURE__ */ t(I, {});
+  if (a === "insights") return /* @__PURE__ */ t(x, {});
+  const k = h.display_email_edit_field_in_settings || h.display_sms_edit_field_in_settings, O = S && _.can_edit_contact_info && k;
+  return /* @__PURE__ */ o(l, {
+    sx: { pt: b ? 0 : 24 },
+    children: [
+      /* @__PURE__ */ o(l, {
+        sx: { px: 24 },
+        children: [b && /* @__PURE__ */ o(J, { children: [/* @__PURE__ */ t(H, {}), /* @__PURE__ */ t(K, { sx: { my: 24 } })] }), /* @__PURE__ */ t(q, {
+          sx: { mb: 4 },
+          children: e.notification_types_title
+        })]
+      }),
+      /* @__PURE__ */ o(Q, { children: [
+        n.includes(i.Accounts) && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ o(p, {
+          onClick: () => r(i.Accounts),
+          children: [/* @__PURE__ */ t(g, {
+            primary: e.accounts_title,
+            secondary: e.accounts_subtitle
+          }), /* @__PURE__ */ t(f, {})]
+        }) }),
+        n.includes(i.Budgets) && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ o(p, {
+          onClick: () => r(i.Budgets),
+          children: [/* @__PURE__ */ t(g, {
+            primary: e.budgets_title,
+            secondary: e.budgets_subtitle
+          }), /* @__PURE__ */ t(f, {})]
+        }) }),
+        n.includes(i.Insights) && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ o(p, {
+          onClick: () => r(i.Insights),
+          children: [/* @__PURE__ */ t(g, {
+            primary: e.insights_title,
+            secondary: e.insights_subtitle
+          }), /* @__PURE__ */ t(f, {})]
+        }) })
+      ] }),
+      O && /* @__PURE__ */ t(l, {
+        sx: { px: 24 },
+        children: /* @__PURE__ */ t(U, {})
+      }),
+      /* @__PURE__ */ t(W, {
+        isOpen: !!s,
+        onClose: () => r(void 0),
+        title: m,
+        children: /* @__PURE__ */ o(l, { children: [
+          s === i.Accounts && /* @__PURE__ */ t(y, {}),
+          s === i.Budgets && /* @__PURE__ */ t(I, {}),
+          s === i.Insights && /* @__PURE__ */ t(x, {})
+        ] })
+      })
+    ]
+  });
+});
+export {
+  bt as NotificationSettings
+};
+
+//# sourceMappingURL=NotificationSettings.es.js.map

package/dist/settings/components/notifications/NotificationSettings.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationSettings.es.js","names":[],"sources":["../../../../src/settings/components/notifications/NotificationSettings.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemText from '@mui/material/ListItemText'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  Loader,\n  useAccountStore,\n  useAppConfig,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useSettingsStore,\n  useWidgetLoadTimer,\n} from '../../../common'\nimport { NotificationTypes } from '../../../core'\n\nimport { AccountNotificationProfiles } from './AccountNotificationProfiles'\nimport { BudgetNotificationProfiles } from './BudgetNotificationProfiles'\nimport { DeliveryMethods } from './DeliveryMethods'\nimport { InsightsNotificationProfiles } from './InsightsNotificationProfiles'\nimport PersonalDetails from './PersonalDetails'\n\nexport interface NotificationSettingsProps {\n  notificationTypes?: NotificationTypes[]\n  showPersonalDetails?: boolean\n  view?: string | undefined\n}\n\nexport const NotificationSettings: React.FC<NotificationSettingsProps> = observer(\n  ({\n    notificationTypes = [NotificationTypes.Accounts, NotificationTypes.Budgets],\n    showPersonalDetails = false,\n    view,\n  }) => {\n    const { config } = useAppConfig()\n    const { settings: copy } = useGlobalCopyStore()\n    const { isInitialized } = useGlobalUiStore()\n    const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n    const { clientCommunicationProfile: ccp, loadNotificationProfiles } = useSettingsStore()\n    const isInsightsEnabled = useInsightsEnabled()\n\n    const [isLoaded, setIsLoaded] = React.useState(false)\n    const [profileTypeOpen, setProfileTypeOpen] = React.useState<NotificationTypes | undefined>(\n      undefined,\n    )\n\n    if (notificationTypes.length > 0 && isInsightsEnabled)\n      notificationTypes.push(NotificationTypes.Insights)\n\n    useWidgetLoadTimer({\n      widgetName: 'NotificationSettingsWidget',\n      isLoaded: isLoaded,\n    })\n\n    React.useEffect(() => {\n      if (!isAccountDataLoaded) {\n        loadAccountData().finally()\n      }\n    }, [])\n\n    React.useEffect(() => {\n      if (isInitialized) {\n        loadNotificationProfiles().finally(() => setIsLoaded(true))\n      }\n    }, [isInitialized])\n\n    if (!isInitialized) {\n      return <Loader />\n    }\n\n    let drawerTitle = copy.manage_account_notifications\n    if (profileTypeOpen === NotificationTypes.Budgets) {\n      drawerTitle = copy.manage_budget_notifications\n    } else if (profileTypeOpen === NotificationTypes.Insights) {\n      drawerTitle = copy.manage_insights_notifications\n    }\n\n    const {\n      email_notifications_enabled: emailEnabled,\n      sms_notifications_enabled: smsEnabled,\n      push_notifications_enabled: pushEnabled,\n    } = ccp\n\n    const hasDeliveryMethods = emailEnabled || smsEnabled || pushEnabled\n\n    if (view === 'accounts') {\n      return <AccountNotificationProfiles />\n    } else if (view === 'budgets') {\n      return <BudgetNotificationProfiles />\n    } else if (view === 'insights') {\n      return <InsightsNotificationProfiles />\n    }\n\n    const canEditFields =\n      config.display_email_edit_field_in_settings || config.display_sms_edit_field_in_settings\n    const shouldShowPersonalDetails =\n      showPersonalDetails && ccp.can_edit_contact_info && canEditFields\n\n    return (\n      <Stack sx={{ pt: hasDeliveryMethods ? 0 : 24 }}>\n        <Stack sx={{ px: 24 }}>\n          {hasDeliveryMethods && (\n            <>\n              <DeliveryMethods />\n              <Divider sx={{ my: 24 }} />\n            </>\n          )}\n\n          <H3 sx={{ mb: 4 }}>{copy.notification_types_title}</H3>\n        </Stack>\n        <List>\n          {notificationTypes.includes(NotificationTypes.Accounts) && (\n            <ListItem>\n              <ListItemButton onClick={() => setProfileTypeOpen(NotificationTypes.Accounts)}>\n                <ListItemText primary={copy.accounts_title} secondary={copy.accounts_subtitle} />\n                <ChevronRight />\n              </ListItemButton>\n            </ListItem>\n          )}\n          {notificationTypes.includes(NotificationTypes.Budgets) && (\n            <ListItem>\n              <ListItemButton onClick={() => setProfileTypeOpen(NotificationTypes.Budgets)}>\n                <ListItemText primary={copy.budgets_title} secondary={copy.budgets_subtitle} />\n                <ChevronRight />\n              </ListItemButton>\n            </ListItem>\n          )}\n          {notificationTypes.includes(NotificationTypes.Insights) && (\n            <ListItem>\n              <ListItemButton onClick={() => setProfileTypeOpen(NotificationTypes.Insights)}>\n                <ListItemText primary={copy.insights_title} secondary={copy.insights_subtitle} />\n                <ChevronRight />\n              </ListItemButton>\n            </ListItem>\n          )}\n        </List>\n\n        {shouldShowPersonalDetails && (\n          <Stack sx={{ px: 24 }}>\n            <PersonalDetails />\n          </Stack>\n        )}\n\n        <Drawer\n          isOpen={Boolean(profileTypeOpen)}\n          onClose={() => setProfileTypeOpen(undefined)}\n          title={drawerTitle}\n        >\n          <Stack>\n            {profileTypeOpen === NotificationTypes.Accounts && <AccountNotificationProfiles />}\n            {profileTypeOpen === NotificationTypes.Budgets && <BudgetNotificationProfiles />}\n            {profileTypeOpen === NotificationTypes.Insights && <InsightsNotificationProfiles />}\n          </Stack>\n        </Drawer>\n      </Stack>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/settings/components/notifications/PersonalDetails.es.js

@@ -0,0 +1,111 @@
+import { useAppConfig as w, useGlobalCopyStore as V, useSettingsStore as D, useUserStore as B } from "../../../common/context/hooks.es.js";
+import { useDimensions as P } from "../../../common/hooks/useDimensions.es.js";
+import A from "../profile/actions/VerifyEmailAction.es.js";
+import H from "../profile/actions/VerifyPhoneAction.es.js";
+import p from "react";
+import { observer as M } from "mobx-react-lite";
+import t from "@mui/material/Stack";
+import { H3 as j } from "@mxenabled/mxui";
+import k from "@mui/material/Button";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import f from "@mui/material/Box";
+import E from "@mui/material/Divider";
+import h from "@mui/material/TextField";
+var J = () => {
+  const { config: a } = w(), [c, { width: u }] = P(), { common: g, settings: r } = V(), { updateUser: x } = D(), { user: e } = B(), [s, l] = p.useState(!1), [n, _] = p.useState({
+    email: e.email,
+    phone: e.phone
+  }), v = n.email && !e.email_is_verified && !s, b = n.phone && !e.phone_is_verified && !s, m = (C) => {
+    const { name: S, value: U } = C.target, d = {
+      ...n,
+      [S]: U
+    };
+    _(d), l(JSON.stringify({
+      ...e,
+      ...d
+    }) !== JSON.stringify(e));
+  }, y = async () => {
+    await x({
+      ...e,
+      ...n
+    }), l(!1);
+  };
+  return /* @__PURE__ */ i(t, {
+    ref: c,
+    children: [/* @__PURE__ */ o(E, {}), /* @__PURE__ */ i(t, {
+      sx: { pt: 12 },
+      children: [
+        /* @__PURE__ */ o(j, {
+          sx: {
+            lineHeight: "20px",
+            pb: 4,
+            pt: 16
+          },
+          children: r.personal_details
+        }),
+        /* @__PURE__ */ i(t, {
+          sx: {
+            flexDirection: u <= 768 ? "column" : "row",
+            gap: 24,
+            py: 16
+          },
+          children: [a.display_email_edit_field_in_settings && /* @__PURE__ */ i(t, {
+            sx: {
+              flex: 1,
+              pb: 14
+            },
+            children: [/* @__PURE__ */ o(h, {
+              defaultValue: e.email,
+              fullWidth: !0,
+              label: r.email_address,
+              name: "email",
+              onChange: m
+            }), v && /* @__PURE__ */ o(f, {
+              sx: {
+                height: 20,
+                ".MuiButton-root": {
+                  px: 0,
+                  ":hover": { bgcolor: "transparent" }
+                }
+              },
+              children: /* @__PURE__ */ o(A, {})
+            })]
+          }), a.display_sms_edit_field_in_settings && /* @__PURE__ */ i(t, {
+            sx: {
+              flex: 1,
+              pb: 14
+            },
+            children: [/* @__PURE__ */ o(h, {
+              defaultValue: e.phone,
+              fullWidth: !0,
+              label: r.mobile_number,
+              name: "phone",
+              onChange: m
+            }), b && /* @__PURE__ */ o(f, {
+              sx: {
+                height: 20,
+                ".MuiButton-root": {
+                  px: 0,
+                  ":hover": { bgcolor: "transparent" }
+                }
+              },
+              children: /* @__PURE__ */ o(H, {})
+            })]
+          })]
+        }),
+        /* @__PURE__ */ o(k, {
+          disabled: !s,
+          onClick: y,
+          sx: { width: 84 },
+          variant: "contained",
+          children: g.save_button
+        })
+      ]
+    })]
+  });
+}, Q = M(J);
+export {
+  Q as default
+};
+
+//# sourceMappingURL=PersonalDetails.es.js.map

package/dist/settings/components/notifications/PersonalDetails.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonalDetails.es.js","names":[],"sources":["../../../../src/settings/components/notifications/PersonalDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport { useAppConfig, useGlobalCopyStore, useSettingsStore, useUserStore } from '../../../common'\nimport { type EditableUser } from '../../../core'\nimport { useDimensions } from '../../../common/hooks/useDimensions'\n\nimport VerifyEmailAction from '../profile/actions/VerifyEmailAction'\nimport VerifyPhoneAction from '../profile/actions/VerifyPhoneAction'\n\nconst PersonalDetails = () => {\n  const { config } = useAppConfig()\n  const [containerRef, { width }] = useDimensions()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { updateUser } = useSettingsStore()\n  const { user } = useUserStore()\n\n  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)\n  const [modifiedUser, setModifiedUser] = React.useState<EditableUser>({\n    email: user.email,\n    phone: user.phone,\n  })\n\n  const showVerifyEmail = modifiedUser.email && !user.email_is_verified && !hasUnsavedChanges\n  const showVerifyPhone = modifiedUser.phone && !user.phone_is_verified && !hasUnsavedChanges\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { name, value } = event.target\n    const changedUser = { ...modifiedUser, [name]: value }\n\n    setModifiedUser(changedUser)\n    setHasUnsavedChanges(JSON.stringify({ ...user, ...changedUser }) !== JSON.stringify(user))\n  }\n\n  const handleSave = async () => {\n    await updateUser({ ...user, ...modifiedUser })\n    setHasUnsavedChanges(false)\n  }\n\n  return (\n    <Stack ref={containerRef}>\n      <Divider />\n      <Stack sx={{ pt: 12 }}>\n        <H3 sx={{ lineHeight: '20px', pb: 4, pt: 16 }}>{settingsCopy.personal_details}</H3>\n        <Stack sx={{ flexDirection: width <= 768 ? 'column' : 'row', gap: 24, py: 16 }}>\n          {config.display_email_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, pb: 14 }}>\n              <TextField\n                defaultValue={user.email}\n                fullWidth={true}\n                label={settingsCopy.email_address}\n                name=\"email\"\n                onChange={handleChange}\n              />\n              {showVerifyEmail && (\n                <Box\n                  sx={{\n                    height: 20,\n                    '.MuiButton-root': {\n                      px: 0,\n                      ':hover': {\n                        bgcolor: 'transparent',\n                      },\n                    },\n                  }}\n                >\n                  <VerifyEmailAction />\n                </Box>\n              )}\n            </Stack>\n          )}\n          {config.display_sms_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, pb: 14 }}>\n              <TextField\n                defaultValue={user.phone}\n                fullWidth={true}\n                label={settingsCopy.mobile_number}\n                name=\"phone\"\n                onChange={handleChange}\n              />\n              {showVerifyPhone && (\n                <Box\n                  sx={{\n                    height: 20,\n                    '.MuiButton-root': {\n                      px: 0,\n                      ':hover': {\n                        bgcolor: 'transparent',\n                      },\n                    },\n                  }}\n                >\n                  <VerifyPhoneAction />\n                </Box>\n              )}\n            </Stack>\n          )}\n        </Stack>\n        <Button\n          disabled={!hasUnsavedChanges}\n          onClick={handleSave}\n          sx={{ width: 84 }}\n          variant=\"contained\"\n        >\n          {commonCopy.save_button}\n        </Button>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default observer(PersonalDetails)\n"],"mappings":"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"}