@mx-cartographer/experiences 9.3.1-alpha.al0 → 9.3.1

package/dist/goals/components/actions/BirthdayAction.es.js

@@ -4,8 +4,8 @@ import { ListItemAction as v } from "../../../common/components/ListItemAction.e
 import i from "react";
 import { observer as A } from "mobx-react-lite";
 import { jsx as o } from "react/jsx-runtime";
-import { getUnixTime as T } from "date-fns/getUnixTime";
 import { fromUnixTime as s } from "date-fns/fromUnixTime";
+import { getUnixTime as T } from "date-fns/getUnixTime";
 import { AdapterDateFns as x } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { DatePicker as D } from "@mui/x-date-pickers";
 import { LocalizationProvider as g } from "@mui/x-date-pickers/LocalizationProvider";

package/dist/recurringtransactions/components/RecurringTransactionList.es.js

@@ -10,8 +10,8 @@ import { MerchantLogo as P, Text as a } from "@mxenabled/mxui";
 import { Cancel as U, CheckCircle as B, Icon as Y } from "@mxenabled/mx-icons";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import F from "@mui/material/IconButton";
-import { getUnixTime as H } from "date-fns/getUnixTime";
-import { fromUnixTime as W } from "date-fns/fromUnixTime";
+import { fromUnixTime as H } from "date-fns/fromUnixTime";
+import { getUnixTime as W } from "date-fns/getUnixTime";
 import $ from "@mui/material/Divider";
 import K from "@mui/material/List";
 import V from "@mui/material/ListItemText";
@@ -33,7 +33,7 @@ var X = (d, u) => {
     key: `missed-${e.expectedDate.getTime()}`,
     name: e.name,
     amount: e.amount,
-    date: H(e.expectedDate),
+    date: W(e.expectedDate),
     merchantGuid: e.merchantGuid,
     categoryGuid: e.categoryGuid,
     category: "",
@@ -88,7 +88,7 @@ var X = (d, u) => {
                   justifyContent: "space-between",
                   children: [/* @__PURE__ */ r(a, {
                     variant: "caption",
-                    children: E(W(t.date), A.MONTH_DAY_YEAR)
+                    children: E(H(t.date), A.MONTH_DAY_YEAR)
                   }), /* @__PURE__ */ i(l, {
                     alignItems: "center",
                     direction: "row",

package/dist/settings/components/profile/ProfileTab.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 interface ProfileFormProps {
     availableWidth?: number;
-    handleOnLeaveClick?: () => void;
+    handleOnLeavClick?: () => void;
 }
 declare const _default: React.FunctionComponent<ProfileFormProps>;
 export default _default;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileTab.es.js","names":[],"sources":["../../../../src/settings/components/profile/ProfileTab.tsx"],"sourcesContent":["import 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 ResetPasswordAction from './actions/ResetPasswordAction'\nimport VerifyEmailAction from './actions/VerifyEmailAction'\nimport VerifyPhoneAction from './actions/VerifyPhoneAction'\n\ninterface ProfileFormProps {\n  availableWidth?: number\n  handleOnLeaveClick?: () => void\n}\n\ntype UserInput = {\n  [U in keyof EditableUser]: EditableUser[U]\n}\n\nconst ProfileForm: React.FC<ProfileFormProps> = ({ availableWidth, handleOnLeaveClick }) => {\n  const theme = useTheme()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { isMobile } = 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 (handleOnLeaveClick) {\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 (handleOnLeaveClick) {\n      handleOnLeaveClick()\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          '& .MuiTextField-root': {\n            flex: 1,\n          },\n        }}\n      >\n        <H3>{settingsCopy.personal_details}</H3>\n        <P variant=\"body1\">{settingsCopy.update_information}</P>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={24} sx={{ mb: 24, pt: 24 }}>\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={{ flex: 1, mb: showVerifyEmail ? 20 : 24, 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={{ flex: 1, mb: showVerifyPhone ? 20 : 24 }}>\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={24} sx={{ mb: 24 }}>\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          />\n          {config.display_password_options_in_settings && <ResetPasswordAction />}\n          <Button\n            disabled={!hasUnsavedChanges}\n            onClick={handleSave}\n            sx={{ width: isMobile ? '100%' : 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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"}
+{"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

@@ -4,35 +4,46 @@ 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 v from "@mui/material/Button";
-import { ChevronRight as b } from "@mxenabled/mx-icons";
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+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 V = y(() => {
-  const { common: s, settings: t } = f(), { sendEmailVerification: c } = h(), { user: m } = u(), l = C(), [p, i] = a.useState(!1), n = () => {
+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(v, {
+  return /* @__PURE__ */ r(a.Fragment, { children: [/* @__PURE__ */ r(b, {
     onClick: d,
     sx: {
       height: "auto",
       p: 4,
       width: "fit-content"
     },
-    children: [/* @__PURE__ */ e(o, {
+    children: [/* @__PURE__ */ t(o, {
       variant: "body2",
-      children: t.verify_email
-    }), /* @__PURE__ */ e(b, {})]
-  }), /* @__PURE__ */ e(x, {
-    copy: { title: t.confirm_your_email },
+      children: e.verify_email
+    }), /* @__PURE__ */ t(v, {})]
+  }), /* @__PURE__ */ t(x, {
+    copy: { title: "" },
     isOpen: p,
     onClose: n,
     onPrimaryAction: c,
     onSecondaryAction: n,
-    primaryText: t.send_verification,
+    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: {
@@ -41,31 +52,37 @@ var V = y(() => {
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ e(o, {
+        /* @__PURE__ */ t(o, {
+          bold: !0,
+          truncate: !1,
+          variant: "body1",
+          children: e.confirm_your_email
+        }),
+        /* @__PURE__ */ t(o, {
           truncate: !1,
           variant: "body2",
-          children: t.confirm_email
+          children: e.confirm_email
         }),
-        /* @__PURE__ */ e(o, {
+        /* @__PURE__ */ t(o, {
           sx: {
-            border: `1px solid ${l.palette.neutral.light}`,
+            border: `1px solid ${m.palette.neutral.light}`,
             borderRadius: "4px",
             p: "16px 32px"
           },
           variant: "h3",
-          children: m.email
+          children: l.email
         }),
-        /* @__PURE__ */ e(o, {
+        /* @__PURE__ */ t(o, {
           truncate: !1,
           variant: "body2",
-          children: t.verification_notice_email
+          children: e.verification_notice_email
         })
       ]
     })
   })] });
 });
 export {
-  V as default
+  E as default
 };
 
 //# sourceMappingURL=VerifyEmailAction.es.js.map

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

@@ -1 +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: settingsCopy.confirm_your_email }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={sendEmailVerification}\n        onSecondaryAction={handleClose}\n        primaryText={settingsCopy.send_verification}\n        secondaryText={commonCopy.back}\n      >\n        <Stack spacing={16} sx={{ px: 40, textAlign: 'center', width: '100%' }}>\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,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,MAAS,UAAA,EAAa;AAAA,IAAmB,CAAA,GACvD,gBAAA,EAAC,GAAD,CAAe,CAAA,CACT;AAAA,EACR,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM,EAAE,OAAO,EAAa,mBAAmB;AAAA,IACvC,QAAA;AAAA,IACR,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,aAAa,EAAa;AAAA,IAC1B,eAAe,EAAW;AAAA,IAE1B,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,SAAS;AAAA,MAAI,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,WAAW;AAAA,QAAU,OAAO;AAAA,MAAO;AAAA,MAArE,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,UAC5B,UAAA,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,UAEP,UAAA,EAAK;AAAA,QACF,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,UAC5B,UAAA,EAAa;AAAA,QACV,CAAA;AAAA,MACD;AAAA;EACD,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}
+{"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,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,MAAS,UAAA,EAAa;AAAA,IAAmB,CAAA,GACvD,gBAAA,EAAC,GAAD,CAAe,CAAA,CACT;AAAA,EACR,CAAA,GAAA,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,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,SAAS;AAAA,MAAI,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,WAAW;AAAA,QAAU,OAAO;AAAA,MAAO;AAAA,MAArE,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,UACxC,UAAA,EAAa;AAAA,QACV,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,UAC5B,UAAA,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,UAEP,UAAA,EAAK;AAAA,QACF,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,UAAU;AAAA,UAAO,SAAQ;AAAA,UAC5B,UAAA,EAAa;AAAA,QACV,CAAA;AAAA,MACD;AAAA;EACD,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}

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

@@ -1,5 +1,5 @@
-import { useGlobalCopyStore as v, useSettingsStore as C, useUserStore as T } from "../../../../common/context/hooks.es.js";
-import b from "../../../../common/components/dialog/Dialog.es.js";
+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";
@@ -10,10 +10,10 @@ 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 } = C(), { user: f } = T(), h = A(), [m, s] = r.useState(!1), [d, n] = r.useState(!1), a = () => {
-    s(!1);
+  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 = () => {
-    s(!0);
+    a(!0);
   }, u = () => {
     l().finally(() => {
       n(!0);
@@ -36,12 +36,12 @@ var $ = k(() => {
         children: o.verify_phone
       }), /* @__PURE__ */ e(w, {})]
     }),
-    /* @__PURE__ */ e(b, {
-      copy: { title: o.confirm_your_phone },
-      isOpen: m,
-      onClose: a,
+    /* @__PURE__ */ e(T, {
+      copy: { title: "" },
+      isOpen: d,
+      onClose: s,
       onPrimaryAction: u,
-      onSecondaryAction: a,
+      onSecondaryAction: s,
       primaryText: o.send_verification,
       secondaryText: c.back,
       sx: {
@@ -63,6 +63,12 @@ var $ = k(() => {
           width: "100%"
         },
         children: [
+          /* @__PURE__ */ e(t, {
+            bold: !0,
+            truncate: !1,
+            variant: "body1",
+            children: o.confirm_your_phone
+          }),
           /* @__PURE__ */ e(t, {
             truncate: !1,
             variant: "body2",
@@ -88,7 +94,7 @@ var $ = k(() => {
     /* @__PURE__ */ e(S, {
       handleClose: () => n(!1),
       handleVerify: x,
-      isOpen: d
+      isOpen: m
     })
   ] });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"VerifyPhoneAction.es.js","names":[],"sources":["../../../../../src/settings/components/profile/actions/VerifyPhoneAction.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'\nimport { Dialog, useGlobalCopyStore, useSettingsStore, useUserStore } from '../../../../common'\nimport VerifyTokenAction from './VerifyTokenAction'\n\nconst VerifyPhoneAction = observer(() => {\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { sendPhoneVerification, verifyPhoneToken } = useSettingsStore()\n  const { user } = useUserStore()\n  const theme = useTheme()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [showVerifyToken, setShowVerifyToken] = React.useState(false)\n\n  const handleClose = (): void => {\n    setIsOpen(false)\n  }\n\n  const handleOpen = (): void => {\n    setIsOpen(true)\n  }\n\n  const handlePhoneVerify = () => {\n    sendPhoneVerification().finally(() => {\n      setShowVerifyToken(true)\n    })\n  }\n\n  const handleTokenVerify = (token: string) => {\n    verifyPhoneToken(token).finally(() => {\n      setShowVerifyToken(false)\n    })\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_phone}</Text>\n        <ChevronRight />\n      </Button>\n      <Dialog\n        copy={{ title: settingsCopy.confirm_your_phone }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={handlePhoneVerify}\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 truncate={false} variant=\"body2\">\n            {settingsCopy.confirm_phone}\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.phone}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.verification_notice_phone}\n          </Text>\n        </Stack>\n      </Dialog>\n      <VerifyTokenAction\n        handleClose={() => setShowVerifyToken(false)}\n        handleVerify={handleTokenVerify}\n        isOpen={showVerifyToken}\n      />\n    </React.Fragment>\n  )\n})\n\nexport default VerifyPhoneAction\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAoB,EAAA,MAAe;AACvC,QAAM,EAAE,QAAQ,GAAY,UAAU,EAAA,IAAiB,EAAmB,GACpE,EAAE,uBAAA,GAAuB,kBAAA,EAAA,IAAqB,EAAiB,GAC/D,EAAE,MAAA,EAAA,IAAS,EAAa,GACxB,IAAQ,EAAS,GAEjB,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAC1C,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAE5D,IAAA,MAA0B;AAC9B,IAAA,EAAU,EAAK;AAAA,EACjB,GAEM,IAAA,MAAyB;AAC7B,IAAA,EAAU,EAAI;AAAA,EAChB,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAsB,EAAE,QAAA,MAAc;AACpC,MAAA,EAAmB,EAAI;AAAA,IACzB,CAAC;AAAA,EACH,GAEM,IAAA,CAAqB,MAAkB;AAC3C,IAAA,EAAiB,CAAK,EAAE,QAAA,MAAc;AACpC,MAAA,EAAmB,EAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,SAAS;AAAA,MAAY,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAQ,GAAG;AAAA,QAAG,OAAO;AAAA,MAAc;AAAA,MAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAS,UAAA,EAAa;AAAA,MAAmB,CAAA,GACvD,gBAAA,EAAC,GAAD,CAAe,CAAA,CACT;AAAA;IACR,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAE,OAAO,EAAa,mBAAmB;AAAA,MACvC,QAAA;AAAA,MACR,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,aAAa,EAAa;AAAA,MAC1B,eAAe,EAAW;AAAA,MAC1B,IAAI;AAAA,QACF,4BAA4B;AAAA,UAAE,IAAI;AAAA,UAAG,OAAO;AAAA,QAAI;AAAA,QAEhD,iCAAiC;AAAA,UAC/B,KAAK;AAAA,UACL,SAAS;AAAA,UACT,gBAAgB;AAAA,QAClB;AAAA,MACF;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAO,SAAS;AAAA,QAAI,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,WAAW;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAArE,UAAA;AAAA,UACE,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,YAC5B,UAAA,EAAa;AAAA,UACV,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YACE,IAAI;AAAA,cACF,QAAQ,aAAa,EAAM,QAAQ,QAAQ,KAAA;AAAA,cAC3C,cAAc;AAAA,cACd,GAAG;AAAA,YACL;AAAA,YACA,SAAQ;AAAA,YAEP,UAAA,EAAK;AAAA,UACF,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,YAC5B,UAAA,EAAa;AAAA,UACV,CAAA;AAAA,QACD;AAAA;IACD,CAAA;AAAA,IACR,gBAAA,EAAC,GAAD;AAAA,MACE,aAAA,MAAmB,EAAmB,EAAK;AAAA,MAC3C,cAAc;AAAA,MACd,QAAQ;AAAA,IACT,CAAA;AAAA,EACa,EAAA,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"VerifyPhoneAction.es.js","names":[],"sources":["../../../../../src/settings/components/profile/actions/VerifyPhoneAction.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'\nimport { Dialog, useGlobalCopyStore, useSettingsStore, useUserStore } from '../../../../common'\nimport VerifyTokenAction from './VerifyTokenAction'\n\nconst VerifyPhoneAction = observer(() => {\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { sendPhoneVerification, verifyPhoneToken } = useSettingsStore()\n  const { user } = useUserStore()\n  const theme = useTheme()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [showVerifyToken, setShowVerifyToken] = React.useState(false)\n\n  const handleClose = (): void => {\n    setIsOpen(false)\n  }\n\n  const handleOpen = (): void => {\n    setIsOpen(true)\n  }\n\n  const handlePhoneVerify = () => {\n    sendPhoneVerification().finally(() => {\n      setShowVerifyToken(true)\n    })\n  }\n\n  const handleTokenVerify = (token: string) => {\n    verifyPhoneToken(token).finally(() => {\n      setShowVerifyToken(false)\n    })\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_phone}</Text>\n        <ChevronRight />\n      </Button>\n      <Dialog\n        copy={{ title: '' }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={handlePhoneVerify}\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_phone}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.confirm_phone}\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.phone}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.verification_notice_phone}\n          </Text>\n        </Stack>\n      </Dialog>\n      <VerifyTokenAction\n        handleClose={() => setShowVerifyToken(false)}\n        handleVerify={handleTokenVerify}\n        isOpen={showVerifyToken}\n      />\n    </React.Fragment>\n  )\n})\n\nexport default VerifyPhoneAction\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAoB,EAAA,MAAe;AACvC,QAAM,EAAE,QAAQ,GAAY,UAAU,EAAA,IAAiB,EAAmB,GACpE,EAAE,uBAAA,GAAuB,kBAAA,EAAA,IAAqB,EAAiB,GAC/D,EAAE,MAAA,EAAA,IAAS,EAAa,GACxB,IAAQ,EAAS,GAEjB,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAC1C,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAE5D,IAAA,MAA0B;AAC9B,IAAA,EAAU,EAAK;AAAA,EACjB,GAEM,IAAA,MAAyB;AAC7B,IAAA,EAAU,EAAI;AAAA,EAChB,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAsB,EAAE,QAAA,MAAc;AACpC,MAAA,EAAmB,EAAI;AAAA,IACzB,CAAC;AAAA,EACH,GAEM,IAAA,CAAqB,MAAkB;AAC3C,IAAA,EAAiB,CAAK,EAAE,QAAA,MAAc;AACpC,MAAA,EAAmB,EAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,SAAS;AAAA,MAAY,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAQ,GAAG;AAAA,QAAG,OAAO;AAAA,MAAc;AAAA,MAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAS,UAAA,EAAa;AAAA,MAAmB,CAAA,GACvD,gBAAA,EAAC,GAAD,CAAe,CAAA,CACT;AAAA;IACR,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAE,OAAO,GAAG;AAAA,MACV,QAAA;AAAA,MACR,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,aAAa,EAAa;AAAA,MAC1B,eAAe,EAAW;AAAA,MAC1B,IAAI;AAAA,QACF,4BAA4B;AAAA,UAAE,IAAI;AAAA,UAAG,OAAO;AAAA,QAAI;AAAA,QAEhD,iCAAiC;AAAA,UAC/B,KAAK;AAAA,UACL,SAAS;AAAA,UACT,gBAAgB;AAAA,QAClB;AAAA,MACF;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAO,SAAS;AAAA,QAAI,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,WAAW;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAArE,UAAA;AAAA,UACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,YACxC,UAAA,EAAa;AAAA,UACV,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,YAC5B,UAAA,EAAa;AAAA,UACV,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YACE,IAAI;AAAA,cACF,QAAQ,aAAa,EAAM,QAAQ,QAAQ,KAAA;AAAA,cAC3C,cAAc;AAAA,cACd,GAAG;AAAA,YACL;AAAA,YACA,SAAQ;AAAA,YAEP,UAAA,EAAK;AAAA,UACF,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,YAC5B,UAAA,EAAa;AAAA,UACV,CAAA;AAAA,QACD;AAAA;IACD,CAAA;AAAA,IACR,gBAAA,EAAC,GAAD;AAAA,MACE,aAAA,MAAmB,EAAmB,EAAK;AAAA,MAC3C,cAAc;AAAA,MACd,QAAQ;AAAA,IACT,CAAA;AAAA,EACa,EAAA,CAAA;AAEpB,CAAC"}