@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

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":";;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,KAA4D,EAAA,CACtE,EACC,mBAAA,IAAoB,CAAC,EAAkB,UAAU,EAAkB,OAAO,GAC1E,qBAAA,IAAsB,IACtB,MAAA,EAAA,MACI;AACJ,QAAM,EAAE,QAAA,EAAA,IAAW,EAAa,GAC1B,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,EAAgB,GAC3D,EAAE,4BAA4B,GAAK,0BAAA,EAAA,IAA6B,EAAiB,GACjF,IAAoB,EAAmB,GAEvC,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,EAAK,GAC9C,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAClD,MACF;AAsBA,MApBI,EAAkB,SAAS,KAAK,KAClC,EAAkB,KAAK,EAAkB,QAAQ,GAEnD,EAAmB;AAAA,IACjB,YAAY;AAAA,IACF,UAAA;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAI,KACF,EAAyB,EAAE,QAAA,MAAc,EAAY,EAAI,CAAC;AAAA,EAE9D,GAAG,CAAC,CAAa,CAAC,GAEd,CAAC,EACH,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAGlB,MAAI,IAAc,EAAK;AACvB,EAAI,MAAoB,EAAkB,UACxC,IAAc,EAAK,8BACV,MAAoB,EAAkB,aAC/C,IAAc,EAAK;AAGrB,QAAM,EACJ,6BAA6B,GAC7B,2BAA2B,GAC3B,4BAA4B,EAAA,IAC1B,GAEE,IAAqB,KAAgB,KAAc;AAEzD,MAAI,MAAS,WACX,QAAO,gBAAA,EAAC,GAAD,CAA8B,CAAA;AAChC,MAAI,MAAS,UAClB,QAAO,gBAAA,EAAC,GAAD,CAA6B,CAAA;AAC/B,MAAI,MAAS,WAClB,QAAO,gBAAA,EAAC,GAAD,CAA+B,CAAA;AAGxC,QAAM,IACJ,EAAO,wCAAwC,EAAO,oCAClD,IACJ,KAAuB,EAAI,yBAAyB;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,IAAqB,IAAI,GAAG;AAAA,cAA7C;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI,EAAE,IAAI,GAAG;AAAA,kBAApB,CACG,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAkB,CAAA,GAClB,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA,CAC1B,EAAA,CAAA,GAGJ,gBAAA,EAAC,GAAD;AAAA,UAAI,IAAI,EAAE,IAAI,EAAE;AAAA,oBAAI,EAAK;AAAA,QAA6B,CAAA,CACjD;AAAA;MACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QACG,EAAkB,SAAS,EAAkB,QAAQ,KACpD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAgB,SAAA,MAAe,EAAmB,EAAkB,QAAQ;AAAA,oBAA5E,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,SAAS,EAAK;AAAA,YAAgB,WAAW,EAAK;AAAA,UAAoB,CAAA,GAChF,gBAAA,EAAC,GAAD,CAAe,CAAA,CACD;AAAA,WACR,CAAA;AAAA,QAEX,EAAkB,SAAS,EAAkB,OAAO,KACnD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAgB,SAAA,MAAe,EAAmB,EAAkB,OAAO;AAAA,oBAA3E,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,SAAS,EAAK;AAAA,YAAe,WAAW,EAAK;AAAA,UAAmB,CAAA,GAC9E,gBAAA,EAAC,GAAD,CAAe,CAAA,CACD;AAAA,WACR,CAAA;AAAA,QAEX,EAAkB,SAAS,EAAkB,QAAQ,KACpD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAgB,SAAA,MAAe,EAAmB,EAAkB,QAAQ;AAAA,oBAA5E,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,SAAS,EAAK;AAAA,YAAgB,WAAW,EAAK;AAAA,UAAoB,CAAA,GAChF,gBAAA,EAAC,GAAD,CAAe,CAAA,CACD;AAAA,WACR,CAAA;AAAA,MAER,EAAA,CAAA;AAAA,MAEL,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI,EAAE,IAAI,GAAG;AAAA,kBAClB,gBAAA,EAAC,GAAD,CAAkB,CAAA;AAAA,MACb,CAAA;AAAA,MAGT,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,EAAQ;AAAA,QAChB,SAAA,MAAe,EAAmB,MAAS;AAAA,QAC3C,OAAO;AAAA,kBAEP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,UACG,MAAoB,EAAkB,YAAY,gBAAA,EAAC,GAAD,CAA8B,CAAA;AAAA,UAChF,MAAoB,EAAkB,WAAW,gBAAA,EAAC,GAAD,CAA6B,CAAA;AAAA,UAC9E,MAAoB,EAAkB,YAAY,gBAAA,EAAC,GAAD,CAA+B,CAAA;AAAA,QAC7E,EAAA,CAAA;AAAA,MACD,CAAA;AAAA,IACH;AAAA;AAEX,CACF"}

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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"}

package/dist/settings/components/profile/ProfileTab.es.js

@@ -0,0 +1,178 @@
+import { useAppConfig as L, useGlobalCopyStore as z, useSettingsStore as I, useUserStore as R } from "../../../common/context/hooks.es.js";
+import { useScreenSize as N } from "../../../common/hooks/useScreenSize.es.js";
+import j from "../../../common/components/dialog/Dialog.es.js";
+import H from "./actions/VerifyEmailAction.es.js";
+import J from "./actions/VerifyPhoneAction.es.js";
+import p from "react";
+import { observer as O } from "mobx-react-lite";
+import d from "@mui/material/Stack";
+import { H3 as $, P as G } from "@mxenabled/mxui";
+import K from "@mui/material/Button";
+import { Fragment as Y, jsx as t, jsxs as i } from "react/jsx-runtime";
+import { alpha as b, useTheme as q } from "@mui/material/styles";
+import Q from "@mui/material/Box";
+import { getUnixTime as W } from "date-fns/getUnixTime";
+import m from "@mui/material/TextField";
+import { AdapterDateFns as X } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DatePicker as Z } from "@mui/x-date-pickers";
+import { LocalizationProvider as ee } from "@mui/x-date-pickers/LocalizationProvider";
+var te = ({ availableWidth: T, handleOnLeavClick: u }) => {
+  const f = q(), { common: U, settings: o } = z(), { isDesktop: y, isMobile: s, isSmallMobile: h, isTablet: v } = N(T), { config: x } = L(), { updateUser: D } = I(), { user: a } = R(), [r, V] = p.useState({
+    first_name: a.first_name,
+    last_name: a.last_name,
+    email: a.email,
+    phone: a.phone,
+    birthday: a.birthday,
+    postal_code: a.postal_code,
+    credit_score: a.credit_score
+  }), [c, C] = p.useState(!1), [k, g] = p.useState(!1), _ = p.useRef(null), w = r.email && !a.email_is_verified && !c, S = r.phone && !a.phone_is_verified && !c;
+  p.useEffect(() => {
+    if (u) {
+      const e = (l) => {
+        _.current && !_.current.contains(l.target) && c && g(!0);
+      };
+      return document.addEventListener("mousedown", e), () => {
+        document.removeEventListener("mousedown", e);
+      };
+    }
+  }, [c]);
+  const P = () => {
+    if (r.birthday) {
+      const e = /* @__PURE__ */ new Date(r.birthday * 1e3), l = e.getUTCFullYear(), F = e.getUTCMonth(), M = e.getUTCDate();
+      return new Date(l, F, M);
+    }
+  }, E = async () => {
+    await D({
+      ...a,
+      ...r
+    }), C(!1);
+  }, A = () => {
+    g(!1), u && u();
+  }, B = () => {
+    g(!1);
+  }, n = (e) => {
+    const l = {
+      ...r,
+      ...e
+    };
+    V(l), C(JSON.stringify({
+      ...a,
+      ...l
+    }) !== JSON.stringify(a));
+  };
+  return /* @__PURE__ */ i(Y, { children: [/* @__PURE__ */ i(Q, {
+    component: "form",
+    ref: _,
+    sx: {
+      backgroundColor: "background.paper",
+      p: 24,
+      width: h ? 320 : v ? 680 : y ? 990 : 400,
+      "& .MuiTextField-root": { width: h ? 272 : v ? 328 : y ? 483 : 352 }
+    },
+    children: [
+      /* @__PURE__ */ t($, { children: o.personal_details }),
+      /* @__PURE__ */ t(G, {
+        variant: "body1",
+        children: o.update_information
+      }),
+      /* @__PURE__ */ i(d, {
+        direction: s ? "column" : "row",
+        spacing: s ? 44 : 24,
+        sx: {
+          mb: 44,
+          pt: 32
+        },
+        children: [/* @__PURE__ */ t(m, {
+          defaultValue: r.first_name,
+          label: o.first_name,
+          onChange: (e) => n({ first_name: e.target.value })
+        }), /* @__PURE__ */ t(m, {
+          defaultValue: r.last_name,
+          label: o.last_name,
+          onChange: (e) => n({ last_name: e.target.value })
+        })]
+      }),
+      /* @__PURE__ */ i(d, {
+        direction: s ? "column" : "row",
+        children: [x.display_email_edit_field_in_settings && /* @__PURE__ */ i(d, {
+          sx: {
+            mb: w ? 20 : 44,
+            mr: s ? 0 : 24
+          },
+          children: [/* @__PURE__ */ t(m, {
+            defaultValue: r.email,
+            label: o.email_address,
+            onChange: (e) => n({ email: e.target.value })
+          }), w && /* @__PURE__ */ t(H, {})]
+        }), x.display_sms_edit_field_in_settings && /* @__PURE__ */ i(d, {
+          sx: { mb: S ? 20 : 44 },
+          children: [/* @__PURE__ */ t(m, {
+            defaultValue: r.phone,
+            label: o.mobile_number,
+            onChange: (e) => n({ phone: e.target.value }),
+            type: "tel"
+          }), S && /* @__PURE__ */ t(J, {})]
+        })]
+      }),
+      /* @__PURE__ */ i(d, {
+        direction: s ? "column" : "row",
+        spacing: s ? 44 : 24,
+        sx: { mb: 44 },
+        children: [/* @__PURE__ */ t(ee, {
+          dateAdapter: X,
+          children: /* @__PURE__ */ t(Z, {
+            label: o.birthdate,
+            onChange: (e) => n({ birthday: W(e) }),
+            slotProps: {
+              nextIconButton: { sx: {
+                color: "primary.main",
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
+              } },
+              previousIconButton: { sx: {
+                color: "primary.main",
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
+              } }
+            },
+            sx: {
+              width: "100%",
+              "& .MuiIconButton-edgeEnd": {
+                color: "primary.main",
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
+              }
+            },
+            value: P()
+          })
+        }), /* @__PURE__ */ t(m, {
+          defaultValue: r.postal_code,
+          label: o.zip_code,
+          onChange: (e) => n({ postal_code: e.target.value })
+        })]
+      }),
+      /* @__PURE__ */ i(d, { children: [/* @__PURE__ */ t(m, {
+        defaultValue: r.credit_score,
+        label: o.credit_score,
+        onChange: (e) => n({ credit_score: Number(e.target.value) }),
+        sx: { mb: 44 }
+      }), /* @__PURE__ */ t(K, {
+        disabled: !c,
+        onClick: E,
+        sx: { width: h ? 272 : 124 },
+        variant: "contained",
+        children: U.save_button
+      })] })
+    ]
+  }), /* @__PURE__ */ t(j, {
+    copy: { title: o.discard_changes },
+    isOpen: k,
+    onClose: B,
+    onSecondaryAction: A,
+    primaryText: o.keep_editing,
+    secondaryText: o.leave,
+    children: o.discard_changes_message
+  })] });
+}, ve = O(te);
+export {
+  ve as default
+};
+
+//# sourceMappingURL=ProfileTab.es.js.map

package/dist/settings/components/profile/ProfileTab.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileTab.es.js","names":[],"sources":["../../../../src/settings/components/profile/ProfileTab.tsx"],"sourcesContent":["/* eslint-disable no-nested-ternary */\n\nimport React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { alpha, useTheme } from '@mui/material/styles'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { H3, P } from '@mxenabled/mxui'\n\nimport {\n  useAppConfig,\n  useGlobalCopyStore,\n  useScreenSize,\n  useSettingsStore,\n  useUserStore,\n  Dialog,\n} from '../../../common'\nimport { type EditableUser } from '../../../core'\nimport VerifyEmailAction from './actions/VerifyEmailAction'\nimport VerifyPhoneAction from './actions/VerifyPhoneAction'\n\ninterface ProfileFormProps {\n  availableWidth?: number\n  handleOnLeavClick?: () => void\n}\n\ntype UserInput = {\n  [U in keyof EditableUser]: EditableUser[U]\n}\n\nconst ProfileForm: React.FC<ProfileFormProps> = ({ availableWidth, handleOnLeavClick }) => {\n  const theme = useTheme()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { isDesktop, isMobile, isSmallMobile, isTablet } = useScreenSize(availableWidth)\n  const { config } = useAppConfig()\n  const { updateUser } = useSettingsStore()\n  const { user } = useUserStore()\n\n  const [modifiedUser, setModifiedUser] = React.useState<EditableUser>({\n    first_name: user.first_name,\n    last_name: user.last_name,\n    email: user.email,\n    phone: user.phone,\n    birthday: user.birthday,\n    postal_code: user.postal_code,\n    credit_score: user.credit_score,\n  })\n  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)\n  const [showLeaveDialog, setShowLeaveDialog] = React.useState(false)\n  const boxRef = React.useRef<HTMLDivElement>(null)\n\n  const showVerifyEmail = modifiedUser.email && !user.email_is_verified && !hasUnsavedChanges\n  const showVerifyPhone = modifiedUser.phone && !user.phone_is_verified && !hasUnsavedChanges\n\n  React.useEffect(() => {\n    if (handleOnLeavClick) {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (boxRef.current && !boxRef.current.contains(event.target as Node) && hasUnsavedChanges) {\n          setShowLeaveDialog(true)\n        }\n      }\n\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside)\n      }\n    }\n    return undefined\n  }, [hasUnsavedChanges])\n\n  // eslint-disable-next-line consistent-return\n  const formatReadableBirthday = () => {\n    if (modifiedUser.birthday) {\n      const utc = new Date(modifiedUser.birthday * 1000)\n      const year = utc.getUTCFullYear()\n      const month = utc.getUTCMonth()\n      const day = utc.getUTCDate()\n      return new Date(year, month, day)\n    }\n  }\n\n  const handleSave = async () => {\n    await updateUser({ ...user, ...modifiedUser })\n    setHasUnsavedChanges(false)\n  }\n\n  const handleLeaveDialog = () => {\n    setShowLeaveDialog(false)\n\n    if (handleOnLeavClick) {\n      handleOnLeavClick()\n    }\n  }\n\n  const handleKeepEditing = () => {\n    setShowLeaveDialog(false)\n  }\n\n  const handleInput = (update: UserInput) => {\n    const changedUser = {\n      ...modifiedUser,\n      ...update,\n    }\n    setModifiedUser(changedUser)\n    setHasUnsavedChanges(JSON.stringify({ ...user, ...changedUser }) !== JSON.stringify(user))\n  }\n\n  return (\n    <>\n      <Box\n        component=\"form\"\n        ref={boxRef}\n        sx={{\n          backgroundColor: 'background.paper',\n          p: 24,\n          width: isSmallMobile ? 320 : isTablet ? 680 : isDesktop ? 990 : 400,\n          '& .MuiTextField-root': {\n            width: isSmallMobile ? 272 : isTablet ? 328 : isDesktop ? 483 : 352,\n          },\n        }}\n      >\n        <H3>{settingsCopy.personal_details}</H3>\n        <P variant=\"body1\">{settingsCopy.update_information}</P>\n        <Stack\n          direction={isMobile ? 'column' : 'row'}\n          spacing={isMobile ? 44 : 24}\n          sx={{ mb: 44, pt: 32 }}\n        >\n          <TextField\n            defaultValue={modifiedUser.first_name}\n            label={settingsCopy.first_name}\n            onChange={(e) => handleInput({ first_name: e.target.value })}\n          />\n          <TextField\n            defaultValue={modifiedUser.last_name}\n            label={settingsCopy.last_name}\n            onChange={(e) => handleInput({ last_name: e.target.value })}\n          />\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'}>\n          {config.display_email_edit_field_in_settings && (\n            <Stack sx={{ mb: showVerifyEmail ? 20 : 44, mr: isMobile ? 0 : 24 }}>\n              <TextField\n                defaultValue={modifiedUser.email}\n                label={settingsCopy.email_address}\n                onChange={(e) => handleInput({ email: e.target.value })}\n              />\n              {showVerifyEmail && <VerifyEmailAction />}\n            </Stack>\n          )}\n          {config.display_sms_edit_field_in_settings && (\n            <Stack sx={{ mb: showVerifyPhone ? 20 : 44 }}>\n              <TextField\n                defaultValue={modifiedUser.phone}\n                label={settingsCopy.mobile_number}\n                onChange={(e) => handleInput({ phone: e.target.value })}\n                type=\"tel\"\n              />\n              {showVerifyPhone && <VerifyPhoneAction />}\n            </Stack>\n          )}\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={isMobile ? 44 : 24} sx={{ mb: 44 }}>\n          <LocalizationProvider dateAdapter={AdapterDateFns}>\n            <DatePicker\n              label={settingsCopy.birthdate}\n              onChange={(value) => handleInput({ birthday: getUnixTime(value as Date) })}\n              slotProps={{\n                nextIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n                previousIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n              }}\n              sx={{\n                width: '100%',\n                '& .MuiIconButton-edgeEnd': {\n                  color: 'primary.main',\n                  '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              }}\n              value={formatReadableBirthday()}\n            />\n          </LocalizationProvider>\n          <TextField\n            defaultValue={modifiedUser.postal_code}\n            label={settingsCopy.zip_code}\n            onChange={(e) => handleInput({ postal_code: e.target.value })}\n          />\n        </Stack>\n        <Stack>\n          <TextField\n            defaultValue={modifiedUser.credit_score}\n            label={settingsCopy.credit_score}\n            onChange={(e) => handleInput({ credit_score: Number(e.target.value) })}\n            sx={{ mb: 44 }}\n          />\n          <Button\n            disabled={!hasUnsavedChanges}\n            onClick={handleSave}\n            sx={{ width: isSmallMobile ? 272 : 124 }}\n            variant=\"contained\"\n          >\n            {commonCopy.save_button}\n          </Button>\n        </Stack>\n      </Box>\n      <Dialog\n        copy={{ title: settingsCopy.discard_changes }}\n        isOpen={showLeaveDialog}\n        onClose={handleKeepEditing}\n        onSecondaryAction={handleLeaveDialog}\n        primaryText={settingsCopy.keep_editing}\n        secondaryText={settingsCopy.leave}\n      >\n        {settingsCopy.discard_changes_message}\n      </Dialog>\n    </>\n  )\n}\n\nexport default observer(ProfileForm)\n"],"mappings":"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"}

package/dist/settings/components/profile/actions/VerifyEmailAction.es.js

@@ -0,0 +1,88 @@
+import { useGlobalCopyStore as f, useSettingsStore as h, useUserStore as u } from "../../../../common/context/hooks.es.js";
+import x from "../../../../common/components/dialog/Dialog.es.js";
+import a from "react";
+import { observer as y } from "mobx-react-lite";
+import g from "@mui/material/Stack";
+import { Text as o } from "@mxenabled/mxui";
+import b from "@mui/material/Button";
+import { ChevronRight as v } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useTheme as C } from "@mui/material/styles";
+var E = y(() => {
+  const { common: s, settings: e } = f(), { sendEmailVerification: c } = h(), { user: l } = u(), m = C(), [p, i] = a.useState(!1), n = () => {
+    i(!1);
+  }, d = () => {
+    i(!0);
+  };
+  return /* @__PURE__ */ r(a.Fragment, { children: [/* @__PURE__ */ r(b, {
+    onClick: d,
+    sx: {
+      height: "auto",
+      p: 4,
+      width: "fit-content"
+    },
+    children: [/* @__PURE__ */ t(o, {
+      variant: "body2",
+      children: e.verify_email
+    }), /* @__PURE__ */ t(v, {})]
+  }), /* @__PURE__ */ t(x, {
+    copy: { title: "" },
+    isOpen: p,
+    onClose: n,
+    onPrimaryAction: c,
+    onSecondaryAction: n,
+    primaryText: e.send_verification,
+    secondaryText: s.back,
+    sx: {
+      "& .MuiDialogContent-root": {
+        pt: 0,
+        width: 400
+      },
+      "& .MuiToolbar-root:last-child": {
+        gap: 16,
+        padding: "32px 60px 48px",
+        justifyContent: "center"
+      }
+    },
+    children: /* @__PURE__ */ r(g, {
+      spacing: 16,
+      sx: {
+        px: 40,
+        textAlign: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ t(o, {
+          bold: !0,
+          truncate: !1,
+          variant: "body1",
+          children: e.confirm_your_email
+        }),
+        /* @__PURE__ */ t(o, {
+          truncate: !1,
+          variant: "body2",
+          children: e.confirm_email
+        }),
+        /* @__PURE__ */ t(o, {
+          sx: {
+            border: `1px solid ${m.palette.neutral.light}`,
+            borderRadius: "4px",
+            p: "16px 32px"
+          },
+          variant: "h3",
+          children: l.email
+        }),
+        /* @__PURE__ */ t(o, {
+          truncate: !1,
+          variant: "body2",
+          children: e.verification_notice_email
+        })
+      ]
+    })
+  })] });
+});
+export {
+  E as default
+};
+
+//# sourceMappingURL=VerifyEmailAction.es.js.map

package/dist/settings/components/profile/actions/VerifyEmailAction.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmailAction.es.js","names":[],"sources":["../../../../../src/settings/components/profile/actions/VerifyEmailAction.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { Dialog, useGlobalCopyStore, useSettingsStore, useUserStore } from '../../../../common'\n\nconst VerifyEmailAction = observer(() => {\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { sendEmailVerification } = useSettingsStore()\n  const { user } = useUserStore()\n  const theme = useTheme()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const handleClose = (): void => {\n    setIsOpen(false)\n  }\n\n  const handleOpen = (): void => {\n    setIsOpen(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button onClick={handleOpen} sx={{ height: 'auto', p: 4, width: 'fit-content' }}>\n        <Text variant=\"body2\">{settingsCopy.verify_email}</Text>\n        <ChevronRight />\n      </Button>\n      <Dialog\n        copy={{ title: '' }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={sendEmailVerification}\n        onSecondaryAction={handleClose}\n        primaryText={settingsCopy.send_verification}\n        secondaryText={commonCopy.back}\n        sx={{\n          '& .MuiDialogContent-root': { pt: 0, width: 400 },\n\n          '& .MuiToolbar-root:last-child': {\n            gap: 16,\n            padding: '32px 60px 48px',\n            justifyContent: 'center',\n          },\n        }}\n      >\n        <Stack spacing={16} sx={{ px: 40, textAlign: 'center', width: '100%' }}>\n          <Text bold={true} truncate={false} variant=\"body1\">\n            {settingsCopy.confirm_your_email}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.confirm_email}\n          </Text>\n          <Text\n            sx={{\n              border: `1px solid ${theme.palette.neutral.light}`,\n              borderRadius: '4px',\n              p: '16px 32px',\n            }}\n            variant=\"h3\"\n          >\n            {user.email}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.verification_notice_email}\n          </Text>\n        </Stack>\n      </Dialog>\n    </React.Fragment>\n  )\n})\n\nexport default VerifyEmailAction\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAoB,EAAA,MAAe;AACvC,QAAM,EAAE,QAAQ,GAAY,UAAU,EAAA,IAAiB,EAAmB,GACpE,EAAE,uBAAA,EAAA,IAA0B,EAAiB,GAC7C,EAAE,MAAA,EAAA,IAAS,EAAa,GACxB,IAAQ,EAAS,GAEjB,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAE1C,IAAA,MAA0B;AAC9B,IAAA,EAAU,EAAK;AAAA,EACjB,GAEM,IAAA,MAAyB;AAC7B,IAAA,EAAU,EAAI;AAAA,EAChB;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAQ,SAAS;AAAA,IAAY,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,MAAG,OAAO;AAAA,IAAc;AAAA,cAA9E,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,gBAAS,EAAa;AAAA,IAAmB,CAAA,GACvD,gBAAA,EAAC,GAAD,CAAe,CAAA,CACT;AAAA,MACR,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM,EAAE,OAAO,GAAG;AAAA,IACV,QAAA;AAAA,IACR,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,aAAa,EAAa;AAAA,IAC1B,eAAe,EAAW;AAAA,IAC1B,IAAI;AAAA,MACF,4BAA4B;AAAA,QAAE,IAAI;AAAA,QAAG,OAAO;AAAA,MAAI;AAAA,MAEhD,iCAAiC;AAAA,QAC/B,KAAK;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,cAEA,gBAAA,EAAC,GAAD;AAAA,MAAO,SAAS;AAAA,MAAI,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,WAAW;AAAA,QAAU,OAAO;AAAA,MAAO;AAAA,gBAArE;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,oBACxC,EAAa;AAAA,QACV,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,oBAC5B,EAAa;AAAA,QACV,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,QAAQ,aAAa,EAAM,QAAQ,QAAQ,KAAA;AAAA,YAC3C,cAAc;AAAA,YACd,GAAG;AAAA,UACL;AAAA,UACA,SAAQ;AAAA,oBAEP,EAAK;AAAA,QACF,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,oBAC5B,EAAa;AAAA,QACV,CAAA;AAAA,MACD;AAAA;EACD,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}

package/dist/settings/components/profile/actions/VerifyPhoneAction.es.js

@@ -0,0 +1,105 @@
+import { useGlobalCopyStore as v, useSettingsStore as b, useUserStore as C } from "../../../../common/context/hooks.es.js";
+import T from "../../../../common/components/dialog/Dialog.es.js";
+import S from "./VerifyTokenAction.es.js";
+import r from "react";
+import { observer as k } from "mobx-react-lite";
+import V from "@mui/material/Stack";
+import { Text as t } from "@mxenabled/mxui";
+import _ from "@mui/material/Button";
+import { ChevronRight as w } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useTheme as A } from "@mui/material/styles";
+var $ = k(() => {
+  const { common: c, settings: o } = v(), { sendPhoneVerification: l, verifyPhoneToken: p } = b(), { user: f } = C(), h = A(), [d, a] = r.useState(!1), [m, n] = r.useState(!1), s = () => {
+    a(!1);
+  }, y = () => {
+    a(!0);
+  }, u = () => {
+    l().finally(() => {
+      n(!0);
+    });
+  }, x = (g) => {
+    p(g).finally(() => {
+      n(!1);
+    });
+  };
+  return /* @__PURE__ */ i(r.Fragment, { children: [
+    /* @__PURE__ */ i(_, {
+      onClick: y,
+      sx: {
+        height: "auto",
+        p: 4,
+        width: "fit-content"
+      },
+      children: [/* @__PURE__ */ e(t, {
+        variant: "body2",
+        children: o.verify_phone
+      }), /* @__PURE__ */ e(w, {})]
+    }),
+    /* @__PURE__ */ e(T, {
+      copy: { title: "" },
+      isOpen: d,
+      onClose: s,
+      onPrimaryAction: u,
+      onSecondaryAction: s,
+      primaryText: o.send_verification,
+      secondaryText: c.back,
+      sx: {
+        "& .MuiDialogContent-root": {
+          pt: 0,
+          width: 400
+        },
+        "& .MuiToolbar-root:last-child": {
+          gap: 16,
+          padding: "32px 60px 48px",
+          justifyContent: "center"
+        }
+      },
+      children: /* @__PURE__ */ i(V, {
+        spacing: 16,
+        sx: {
+          px: 40,
+          textAlign: "center",
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ e(t, {
+            bold: !0,
+            truncate: !1,
+            variant: "body1",
+            children: o.confirm_your_phone
+          }),
+          /* @__PURE__ */ e(t, {
+            truncate: !1,
+            variant: "body2",
+            children: o.confirm_phone
+          }),
+          /* @__PURE__ */ e(t, {
+            sx: {
+              border: `1px solid ${h.palette.neutral.light}`,
+              borderRadius: "4px",
+              p: "16px 32px"
+            },
+            variant: "h3",
+            children: f.phone
+          }),
+          /* @__PURE__ */ e(t, {
+            truncate: !1,
+            variant: "body2",
+            children: o.verification_notice_phone
+          })
+        ]
+      })
+    }),
+    /* @__PURE__ */ e(S, {
+      handleClose: () => n(!1),
+      handleVerify: x,
+      isOpen: m
+    })
+  ] });
+});
+export {
+  $ as default
+};
+
+//# sourceMappingURL=VerifyPhoneAction.es.js.map