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

package/dist/settings/NotificationSettingsWidget.es.js

@@ -0,0 +1,32 @@
+import { useAppConfig as m } from "../common/context/hooks.es.js";
+import { WidgetContainer as s } from "../common/components/WidgetContainer.es.js";
+import { NotificationSettings as e } from "./components/notifications/NotificationSettings.es.js";
+import { observer as a } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { ChevronLeft as f } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import p from "@mui/material/IconButton";
+var x = a((t) => {
+  const { clientConfig: i } = m(), r = i?.master?.deep_link_params?.view, c = i?.master?.show_back_button;
+  return r ? /* @__PURE__ */ l(n, { children: [c && t.onBackClick && /* @__PURE__ */ o(p, {
+    color: "primary",
+    onClick: t.onBackClick,
+    sx: {
+      p: 10,
+      alignSelf: "flex-start"
+    },
+    children: /* @__PURE__ */ o(f, { size: 24 })
+  }), /* @__PURE__ */ o(e, { view: r })] }) : /* @__PURE__ */ o(s, {
+    ...t,
+    showAccountFilter: !1,
+    children: /* @__PURE__ */ o(n, {
+      my: 24,
+      children: /* @__PURE__ */ o(e, {})
+    })
+  });
+});
+export {
+  x as NotificationSettingsWidget
+};
+
+//# sourceMappingURL=NotificationSettingsWidget.es.js.map

package/dist/settings/NotificationSettingsWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationSettingsWidget.es.js","names":[],"sources":["../../src/settings/NotificationSettingsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronLeft } from '@mxenabled/mx-icons'\n\nimport { useAppConfig, WidgetContainer } from '../common'\nimport { WidgetProps } from '../core'\n\nimport { NotificationSettings } from './components/notifications/NotificationSettings'\n\nexport const NotificationSettingsWidget = observer((props: WidgetProps) => {\n  const { clientConfig } = useAppConfig()\n\n  const view = clientConfig?.master?.deep_link_params?.view\n  const showBackButton = clientConfig?.master?.show_back_button\n\n  if (view) {\n    return (\n      <Stack>\n        {showBackButton && props.onBackClick && (\n          <IconButton\n            color=\"primary\"\n            onClick={props.onBackClick}\n            sx={{ p: 10, alignSelf: 'flex-start' }}\n          >\n            <ChevronLeft size={24} />\n          </IconButton>\n        )}\n        <NotificationSettings view={view} />\n      </Stack>\n    )\n  }\n\n  return (\n    <WidgetContainer {...props} showAccountFilter={false}>\n      <Stack my={24}>\n        <NotificationSettings />\n      </Stack>\n    </WidgetContainer>\n  )\n})\n"],"mappings":";;;;;;;;AAYA,IAAa,IAA6B,EAAA,CAAU,MAAuB;AACzE,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAa,GAEhC,IAAO,GAAc,QAAQ,kBAAkB,MAC/C,IAAiB,GAAc,QAAQ;AAE7C,SAAI,IAEA,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,KAAkB,EAAM,eACvB,gBAAA,EAAC,GAAD;AAAA,IACE,OAAM;AAAA,IACN,SAAS,EAAM;AAAA,IACf,IAAI;AAAA,MAAE,GAAG;AAAA,MAAI,WAAW;AAAA,IAAa;AAAA,cAErC,gBAAA,EAAC,GAAD,EAAa,MAAM,GAAK,CAAA;AAAA,EACd,CAAA,GAEd,gBAAA,EAAC,GAAD,EAA4B,MAAA,EAAO,CAAA,CAC9B,EAAA,CAAA,IAKT,gBAAA,EAAC,GAAD;AAAA,IAAiB,GAAI;AAAA,IAAO,mBAAmB;AAAA,cAC7C,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,gBACT,gBAAA,EAAC,GAAD,CAAuB,CAAA;AAAA,IAClB,CAAA;AAAA,EACQ,CAAA;AAErB,CAAC"}

package/dist/settings/SettingsWidget.es.js

@@ -0,0 +1,82 @@
+import { useAppConfig as E, useCategoryStore as w, useGlobalCopyStore as L, useGlobalUiStore as W } from "../common/context/hooks.es.js";
+import { useScreenSize as R } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as D } from "../common/hooks/useWidgetLoadTimer.es.js";
+import N from "../common/components/Loader.es.js";
+import { WidgetContainer as P } from "../common/components/WidgetContainer.es.js";
+import { SettingsWidgetContents as j } from "./components/SettingsWidgetContents.es.js";
+import d from "react";
+import { observer as k } from "mobx-react-lite";
+import z from "@mui/material/Stack";
+import { jsx as l, jsxs as A } from "react/jsx-runtime";
+import G from "@mui/material/Tab";
+import H from "@mui/material/Tabs";
+var X = /* @__PURE__ */ (function(e) {
+  return e[e.Profile = 0] = "Profile", e[e.Devices = 1] = "Devices", e[e.Notifications = 2] = "Notifications", e[e.TransactionRules = 3] = "TransactionRules", e[e.Help = 4] = "Help", e;
+})({}), Y = k(({ onBackClick: e, onMenuClick: c, sx: f }) => {
+  const { settings: o } = L(), { isCopyLoaded: t, isInitialized: n } = W(), { config: m } = E(), { isMobile: p } = R(), { categoriesLoaded: b, loadCategories: _ } = w();
+  D({
+    widgetName: "SettingsWidget",
+    isLoaded: n && t
+  }), d.useEffect(() => {
+    b || _().finally();
+  }, []);
+  const { display_user_profile_in_settings: u, display_mobile_devices_in_settings: g, display_notification_settings_in_settings: x, display_user_transaction_rules_in_settings: v, show_help_widget_in_master: h } = m, r = [
+    {
+      enabled: u,
+      index: 0,
+      label: o?.profile_label
+    },
+    {
+      enabled: g,
+      index: 1,
+      label: o?.mobile_devices_label
+    },
+    {
+      enabled: x,
+      index: 2,
+      label: o?.notifications_label
+    },
+    {
+      enabled: v,
+      index: 3,
+      label: o?.transaction_rules_label
+    },
+    {
+      enabled: h,
+      index: 4,
+      label: o?.help_label
+    }
+  ], a = r.find((i) => i.enabled), [s, y] = d.useState(a ? a.index : -1);
+  return !t || !n ? /* @__PURE__ */ l(N, {}) : /* @__PURE__ */ l(P, {
+    onBackClick: e,
+    onMenuClick: c,
+    showAccountFilter: !1,
+    sx: {
+      height: "calc(100dvh - 24px)",
+      overflow: "auto",
+      ...f
+    },
+    title: o.title,
+    children: /* @__PURE__ */ A(z, {
+      mx: p ? 0 : 48,
+      my: 24,
+      children: [/* @__PURE__ */ l(H, {
+        onChange: (i, C) => y(C),
+        sx: { bgcolor: "background.paper" },
+        textColor: "primary",
+        value: s,
+        variant: "scrollable",
+        children: r.map((i) => i.enabled && /* @__PURE__ */ l(G, {
+          label: i.label,
+          value: i.index
+        }, i.index))
+      }), /* @__PURE__ */ l(j, { selectedTab: s })]
+    })
+  });
+});
+export {
+  X as SettingsTabs,
+  Y as SettingsWidget
+};
+
+//# sourceMappingURL=SettingsWidget.es.js.map

package/dist/settings/SettingsWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsWidget.es.js","names":[],"sources":["../../src/settings/SettingsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport {\n  Loader,\n  useAppConfig,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { WidgetProps } from '../core'\n\nimport { SettingsWidgetContents } from './components/SettingsWidgetContents'\n\nexport enum SettingsTabs {\n  Profile = 0,\n  Devices = 1,\n  Notifications = 2,\n  TransactionRules = 3,\n  Help = 4,\n}\n\nexport const SettingsWidget = observer(({ onBackClick, onMenuClick, sx }: WidgetProps) => {\n  const { settings: copy } = useGlobalCopyStore()\n  const { isCopyLoaded, isInitialized } = useGlobalUiStore()\n  const { config } = useAppConfig()\n  const { isMobile } = useScreenSize()\n  const { categoriesLoaded, loadCategories } = useCategoryStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'SettingsWidget',\n    isLoaded: isInitialized && isCopyLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n  }, [])\n\n  const {\n    display_user_profile_in_settings: userProfileEnabled,\n    display_mobile_devices_in_settings: mobileDevicesEnabled,\n    display_notification_settings_in_settings: notificationsEnabled,\n    display_user_transaction_rules_in_settings: transactionRulesEnabled,\n    show_help_widget_in_master: helpEnabled,\n  } = config\n\n  const tabs = [\n    { enabled: userProfileEnabled, index: 0, label: copy?.profile_label },\n    { enabled: mobileDevicesEnabled, index: 1, label: copy?.mobile_devices_label },\n    { enabled: notificationsEnabled, index: 2, label: copy?.notifications_label },\n    { enabled: transactionRulesEnabled, index: 3, label: copy?.transaction_rules_label },\n    { enabled: helpEnabled, index: 4, label: copy?.help_label },\n  ]\n\n  const firstEnabledTab = tabs.find((tab) => tab.enabled)\n  const [selectedTab, setSelectedTab] = React.useState(firstEnabledTab ? firstEnabledTab.index : -1)\n\n  if (!isCopyLoaded || !isInitialized) {\n    return <Loader />\n  }\n\n  return (\n    <WidgetContainer\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      showAccountFilter={false}\n      sx={{ height: 'calc(100dvh - 24px)', overflow: 'auto', ...sx }}\n      title={copy.title}\n    >\n      <Stack mx={isMobile ? 0 : 48} my={24}>\n        <Tabs\n          onChange={(_, newValue) => setSelectedTab(newValue)}\n          sx={{ bgcolor: 'background.paper' }}\n          textColor=\"primary\"\n          value={selectedTab}\n          variant=\"scrollable\"\n        >\n          {tabs.map(\n            (tab) => tab.enabled && <Tab key={tab.index} label={tab.label} value={tab.index} />,\n          )}\n        </Tabs>\n\n        <SettingsWidgetContents selectedTab={selectedTab} />\n      </Stack>\n    </WidgetContainer>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,EAAA,UAAA,CAAA,IAAA,WACA,EAAA,EAAA,UAAA,CAAA,IAAA,WACA,EAAA,EAAA,gBAAA,CAAA,IAAA,iBACA,EAAA,EAAA,mBAAA,CAAA,IAAA,oBACA,EAAA,EAAA,OAAA,CAAA,IAAA;AACF,GAAA,CAAA,CAAA,GAEa,IAAiB,EAAA,CAAU,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,EAAA,MAAsB;AACxF,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EAAE,cAAA,GAAc,eAAA,EAAA,IAAkB,EAAiB,GACnD,EAAE,QAAA,EAAA,IAAW,EAAa,GAC1B,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,kBAAA,GAAkB,gBAAA,EAAA,IAAmB,EAAiB;AAE9D,EAAA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU,KAAiB;AAAA,EAC7B,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAe,EAAE,QAAQ;AAAA,EAE7B,GAAG,CAAC,CAAC;AAEL,QAAM,EACJ,kCAAkC,GAClC,oCAAoC,GACpC,2CAA2C,GAC3C,4CAA4C,GAC5C,4BAA4B,EAAA,IAC1B,GAEE,IAAO;AAAA,IACX;AAAA,MAAE,SAAS;AAAA,MAAoB,OAAO;AAAA,MAAG,OAAO,GAAM;AAAA,IAAc;AAAA,IACpE;AAAA,MAAE,SAAS;AAAA,MAAsB,OAAO;AAAA,MAAG,OAAO,GAAM;AAAA,IAAqB;AAAA,IAC7E;AAAA,MAAE,SAAS;AAAA,MAAsB,OAAO;AAAA,MAAG,OAAO,GAAM;AAAA,IAAoB;AAAA,IAC5E;AAAA,MAAE,SAAS;AAAA,MAAyB,OAAO;AAAA,MAAG,OAAO,GAAM;AAAA,IAAwB;AAAA,IACnF;AAAA,MAAE,SAAS;AAAA,MAAa,OAAO;AAAA,MAAG,OAAO,GAAM;AAAA,IAAW;AAAA,EAC5D,GAEM,IAAkB,EAAK,KAAA,CAAM,MAAQ,EAAI,OAAO,GAChD,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,IAAkB,EAAgB,QAAQ,EAAE;AAEjG,SAAI,CAAC,KAAgB,CAAC,IACb,gBAAA,EAAC,GAAD,CAAS,CAAA,IAIhB,gBAAA,EAAC,GAAD;AAAA,IACe,aAAA;AAAA,IACA,aAAA;AAAA,IACb,mBAAmB;AAAA,IACnB,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAuB,UAAU;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC7D,OAAO,EAAK;AAAA,cAEZ,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,IAAW,IAAI;AAAA,MAAI,IAAI;AAAA,gBAAlC,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,UAAA,CAAW,GAAG,MAAa,EAAe,CAAQ;AAAA,QAClD,IAAI,EAAE,SAAS,mBAAmB;AAAA,QAClC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAQ;AAAA,kBAEP,EAAK,IAAA,CACH,MAAQ,EAAI,WAAW,gBAAA,EAAC,GAAD;AAAA,UAAqB,OAAO,EAAI;AAAA,UAAO,OAAO,EAAI;AAAA,QAAQ,GAAhD,EAAI,KAA4C,CACpF;AAAA,MACI,CAAA,GAEN,gBAAA,EAAC,GAAD,EAAqC,aAAA,EAAc,CAAA,CAC9C;AAAA;EACQ,CAAA;AAErB,CAAC"}

package/dist/settings/TransactionRulesWidget.es.js

@@ -0,0 +1,28 @@
+import { useCategoryStore as a } from "../common/context/hooks.es.js";
+import { useScreenSize as m } from "../common/hooks/useScreenSize.es.js";
+import { WidgetContainer as s } from "../common/components/WidgetContainer.es.js";
+import n from "./components/transactionrules/TransactionRulesTab.es.js";
+import c from "react";
+import f from "@mui/material/Stack";
+import { jsx as o } from "react/jsx-runtime";
+var h = (r) => {
+  const { isMobile: e } = m(), { categoriesLoaded: t, loadCategories: i } = a();
+  return c.useEffect(() => {
+    t || i().finally();
+  }), /* @__PURE__ */ o(s, {
+    ...r,
+    showAccountFilter: !1,
+    children: /* @__PURE__ */ o(f, {
+      sx: {
+        mx: e ? 0 : 48,
+        my: 24
+      },
+      children: /* @__PURE__ */ o(n, {})
+    })
+  });
+};
+export {
+  h as TransactionRulesWidget
+};
+
+//# sourceMappingURL=TransactionRulesWidget.es.js.map

package/dist/settings/TransactionRulesWidget.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionRulesWidget.es.js","names":[],"sources":["../../src/settings/TransactionRulesWidget.tsx"],"sourcesContent":["import React from 'react'\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useScreenSize, WidgetContainer } from '../common'\nimport { WidgetProps } from '../core'\n\nimport TransactionRulesTab from './components/transactionrules/TransactionRulesTab'\n\nexport const TransactionRulesWidget = (props: WidgetProps) => {\n  const { isMobile } = useScreenSize()\n  const { categoriesLoaded, loadCategories } = useCategoryStore()\n\n  React.useEffect(() => {\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n  })\n\n  return (\n    <WidgetContainer {...props} showAccountFilter={false}>\n      <Stack sx={{ mx: isMobile ? 0 : 48, my: 24 }}>\n        <TransactionRulesTab />\n      </Stack>\n    </WidgetContainer>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,IAAA,CAA0B,MAAuB;AAC5D,QAAM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,kBAAA,GAAkB,gBAAA,EAAA,IAAmB,EAAiB;AAE9D,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAe,EAAE,QAAQ;AAAA,EAE7B,CAAC,GAGC,gBAAA,EAAC,GAAD;AAAA,IAAiB,GAAI;AAAA,IAAO,mBAAmB;AAAA,cAC7C,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI,IAAW,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACzC,gBAAA,EAAC,GAAD,CAAsB,CAAA;AAAA,IACjB,CAAA;AAAA,EACQ,CAAA;AAErB"}

package/dist/settings/components/SettingsWidgetContents.es.js

@@ -0,0 +1,47 @@
+import { useAppConfig as s, useSettingsStore as m } from "../../common/context/hooks.es.js";
+import { Help as a } from "../../help/components/Help.es.js";
+import f from "./profile/ProfileTab.es.js";
+import { DeviceTab as l } from "./devices/DeviceTab.es.js";
+import p from "./transactionrules/TransactionRulesTab.es.js";
+import { NotificationSettings as c } from "./notifications/NotificationSettings.es.js";
+import { SettingsTabs as i } from "../SettingsWidget.es.js";
+import { observer as g } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import { Fragment as h, jsx as o, jsxs as v } from "react/jsx-runtime";
+import S from "@mui/material/Alert";
+import d from "@mui/material/Snackbar";
+var R = g(({ selectedTab: r }) => {
+  const { alert: t, setAlert: e } = m(), { config: { display_user_profile_in_settings: n } } = s();
+  return /* @__PURE__ */ v(h, { children: [
+    r === i.Profile && /* @__PURE__ */ o(f, {}),
+    r === i.Devices && /* @__PURE__ */ o(l, {}),
+    r === i.Notifications && /* @__PURE__ */ o(c, { showPersonalDetails: !n }),
+    r === i.TransactionRules && /* @__PURE__ */ o(p, {}),
+    r === i.Help && /* @__PURE__ */ o(u, {
+      sx: { px: 24 },
+      children: /* @__PURE__ */ o(a, {})
+    }),
+    /* @__PURE__ */ o(d, {
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      autoHideDuration: 3500,
+      onClose: () => e(""),
+      open: !!t.message,
+      children: /* @__PURE__ */ o(S, {
+        onClose: () => {
+          e("");
+        },
+        severity: t.severity,
+        variant: "filled",
+        children: t.message
+      })
+    })
+  ] });
+});
+export {
+  R as SettingsWidgetContents
+};
+
+//# sourceMappingURL=SettingsWidgetContents.es.js.map

package/dist/settings/components/SettingsWidgetContents.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsWidgetContents.es.js","names":[],"sources":["../../../src/settings/components/SettingsWidgetContents.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\n\nimport { useAppConfig, useSettingsStore } from '../../common'\n\nimport ProfileTab from './profile/ProfileTab'\nimport DeviceTab from './devices/DeviceTab'\nimport TransactionRulesTab from './transactionrules/TransactionRulesTab'\nimport { NotificationSettings } from './notifications/NotificationSettings'\nimport { SettingsTabs } from '../SettingsWidget'\nimport { Help } from '../../help'\nimport Stack from '@mui/material/Stack'\n\ninterface SettingsWidgetContentsProps {\n  selectedTab: SettingsTabs\n}\n\nexport const SettingsWidgetContents = observer(({ selectedTab }: SettingsWidgetContentsProps) => {\n  const { alert, setAlert } = useSettingsStore()\n  const {\n    config: { display_user_profile_in_settings },\n  } = useAppConfig()\n\n  return (\n    <>\n      {selectedTab === SettingsTabs.Profile && <ProfileTab />}\n      {selectedTab === SettingsTabs.Devices && <DeviceTab />}\n      {selectedTab === SettingsTabs.Notifications && (\n        <NotificationSettings showPersonalDetails={!display_user_profile_in_settings} />\n      )}\n      {selectedTab === SettingsTabs.TransactionRules && <TransactionRulesTab />}\n      {selectedTab === SettingsTabs.Help && (\n        <Stack sx={{ px: 24 }}>\n          <Help />\n        </Stack>\n      )}\n\n      <Snackbar\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        autoHideDuration={3500}\n        onClose={() => setAlert('')}\n        open={Boolean(alert.message)}\n      >\n        <Alert\n          onClose={() => {\n            setAlert('')\n          }}\n          severity={alert.severity}\n          variant=\"filled\"\n        >\n          {alert.message}\n        </Alert>\n      </Snackbar>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,IAAyB,EAAA,CAAU,EAAE,aAAA,EAAA,MAA+C;AAC/F,QAAM,EAAE,OAAA,GAAO,UAAA,EAAA,IAAa,EAAiB,GACvC,EACJ,QAAQ,EAAE,kCAAA,EAAA,EAAA,IACR,EAAa;AAEjB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACG,MAAgB,EAAa,WAAW,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,IACrD,MAAgB,EAAa,WAAW,gBAAA,EAAC,GAAD,CAAY,CAAA;AAAA,IACpD,MAAgB,EAAa,iBAC5B,gBAAA,EAAC,GAAD,EAAsB,qBAAqB,CAAC,EAAmC,CAAA;AAAA,IAEhF,MAAgB,EAAa,oBAAoB,gBAAA,EAAC,GAAD,CAAsB,CAAA;AAAA,IACvE,MAAgB,EAAa,QAC5B,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,IAAI,GAAG;AAAA,gBAClB,gBAAA,EAAC,GAAD,CAAO,CAAA;AAAA,IACF,CAAA;AAAA,IAGT,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc;AAAA,QAAE,UAAU;AAAA,QAAU,YAAY;AAAA,MAAQ;AAAA,MACxD,kBAAkB;AAAA,MAClB,SAAA,MAAe,EAAS,EAAE;AAAA,MAC1B,MAAM,EAAQ,EAAM;AAAA,gBAEpB,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe;AACb,UAAA,EAAS,EAAE;AAAA,QACb;AAAA,QACA,UAAU,EAAM;AAAA,QAChB,SAAQ;AAAA,kBAEP,EAAM;AAAA,MACF,CAAA;AAAA,IACC,CAAA;AAAA,EACV,EAAA,CAAA;AAEN,CAAC"}

package/dist/settings/components/devices/DeviceDialog.es.js

@@ -0,0 +1,127 @@
+import { buildDynamicCopy as l } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as A, useSettingsStore as C } from "../../../common/context/hooks.es.js";
+import E from "../../../common/components/dialog/Dialog.es.js";
+import { DialogType as e } from "../../constants/Settings.es.js";
+import f from "react";
+import { observer as j } from "mobx-react-lite";
+import b from "@mui/material/Stack";
+import { P as p, Text as m } from "@mxenabled/mxui";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { useTheme as P } from "@mui/material/styles";
+import T from "@mui/material/TextField";
+var B = ({ dialogType: t, isOpen: x, onClose: n, device: r, deviceToken: D = "" }) => {
+  const v = P(), { common: a, settings: o } = A(), { updateDevice: y, deleteDevice: g, setAlert: c, loadDevices: u } = C(), [d, _] = f.useState("");
+  f.useEffect(() => {
+    r && _(r.name);
+  }, [r, t]);
+  const S = () => {
+    switch (t) {
+      case e.Edit:
+        return o.mobile_devices_edit_label;
+      case e.Delete:
+        return o.mobile_devices_delete_label;
+      default:
+        return "";
+    }
+  }, k = () => {
+    switch (t) {
+      case e.Token:
+        return a.done_button;
+      case e.Edit:
+        return a.save_button;
+      case e.Delete:
+        return a.delete_button;
+      default:
+        return "";
+    }
+  }, w = () => {
+    const s = { "& .MuiDialogContent-root": {
+      width: 400,
+      pt: 0
+    } };
+    return t === e.Token ? {
+      ...s,
+      "& .MuiToolbar-root:last-child": {
+        padding: "32px 60px 48px",
+        justifyContent: "center"
+      },
+      "& .MuiButton-root:first-of-type": { display: "none" },
+      "& .MuiButton-root:last-child": { flex: 1 }
+    } : {
+      ...s,
+      "& .MuiToolbar-root:last-child": {
+        gap: 8,
+        padding: 24,
+        justifyContent: "flex-end"
+      },
+      ...t === e.Delete && { "& .MuiTypography-body1": { padding: 0 } }
+    };
+  }, M = async () => {
+    if (t === e.Token && n(), t === e.Edit && r) {
+      const s = {
+        ...r,
+        name: d
+      };
+      (await y(s)).success ? (c(o.mobile_devices_edit_success, "success"), u()) : c(l(o.mobile_devices_edit_error, r.name), "error"), n();
+    }
+    t === e.Delete && r && ((await g(r.guid)).success ? (c(l(o.mobile_devices_delete_success, r.name), "success"), u()) : c(l(o.mobile_devices_delete_error, r.name), "error"), n());
+  };
+  return /* @__PURE__ */ h(E, {
+    copy: { title: S() },
+    isOpen: x,
+    onClose: n,
+    onPrimaryAction: M,
+    onSecondaryAction: n,
+    primaryColor: t === e.Delete ? "error" : void 0,
+    primaryText: k(),
+    secondaryText: t === e.Token ? a.back : a.cancel_button,
+    sx: w(),
+    children: [
+      t === e.Token && /* @__PURE__ */ h(b, {
+        spacing: 16,
+        sx: {
+          px: 40,
+          textAlign: "center",
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ i(m, {
+            bold: !0,
+            truncate: !1,
+            variant: "body1",
+            children: o.mobile_devices_access_label
+          }),
+          /* @__PURE__ */ i(m, {
+            truncate: !1,
+            variant: "body2",
+            children: o.mobile_devices_access_info_1
+          }),
+          /* @__PURE__ */ i(p, {
+            sx: {
+              border: `1px solid ${v.palette.neutral.light}`,
+              borderRadius: "4px",
+              p: "16px 32px"
+            },
+            variant: "h1",
+            children: D
+          }),
+          /* @__PURE__ */ i(m, {
+            truncate: !1,
+            variant: "body2",
+            children: o.mobile_devices_access_info_2
+          })
+        ]
+      }),
+      t === e.Edit && /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i(T, {
+        onChange: (s) => _(s.target.value),
+        value: d
+      }) }),
+      t === e.Delete && /* @__PURE__ */ i(p, { children: o.mobile_devices_delete_info })
+    ]
+  });
+}, L = j(B);
+export {
+  L as default
+};
+
+//# sourceMappingURL=DeviceDialog.es.js.map

package/dist/settings/components/devices/DeviceDialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceDialog.es.js","names":[],"sources":["../../../../src/settings/components/devices/DeviceDialog.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useTheme } from '@mui/material/styles'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useSettingsStore } from '../../../common'\nimport { Device } from '../../../core'\nimport { Dialog } from '../../../common/components'\nimport { DialogType } from '../../constants/Settings'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface DeviceDialogProps {\n  dialogType: string\n  isOpen: boolean\n  onClose: () => void\n  device?: Device\n  deviceToken?: string\n}\n\nconst DeviceDialog: React.FC<DeviceDialogProps> = ({\n  dialogType,\n  isOpen,\n  onClose,\n  device,\n  deviceToken = '',\n}) => {\n  const theme = useTheme()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { updateDevice, deleteDevice, setAlert, loadDevices } = useSettingsStore()\n\n  const [deviceName, setDeviceName] = React.useState('')\n\n  React.useEffect(() => {\n    if (device) setDeviceName(device.name)\n  }, [device, dialogType])\n\n  const getDialogTitle = () => {\n    switch (dialogType) {\n      case DialogType.Edit:\n        return settingsCopy.mobile_devices_edit_label\n      case DialogType.Delete:\n        return settingsCopy.mobile_devices_delete_label\n      default:\n        return ''\n    }\n  }\n\n  const getDialogPrimaryText = () => {\n    switch (dialogType) {\n      case DialogType.Token:\n        return commonCopy.done_button\n      case DialogType.Edit:\n        return commonCopy.save_button\n      case DialogType.Delete:\n        return commonCopy.delete_button\n      default:\n        return ''\n    }\n  }\n\n  const getDialogStyles = () => {\n    const baseStyles = {\n      '& .MuiDialogContent-root': {\n        width: 400,\n        pt: 0,\n      },\n    }\n\n    if (dialogType === DialogType.Token) {\n      return {\n        ...baseStyles,\n        '& .MuiToolbar-root:last-child': {\n          padding: '32px 60px 48px',\n          justifyContent: 'center',\n        },\n        '& .MuiButton-root:first-of-type': {\n          display: 'none',\n        },\n        '& .MuiButton-root:last-child': {\n          flex: 1,\n        },\n      }\n    }\n\n    return {\n      ...baseStyles,\n      '& .MuiToolbar-root:last-child': {\n        gap: 8,\n        padding: 24,\n        justifyContent: 'flex-end',\n      },\n      ...(dialogType === DialogType.Delete && {\n        '& .MuiTypography-body1': {\n          padding: 0,\n        },\n      }),\n    }\n  }\n\n  const handlePrimaryAction = async () => {\n    if (dialogType === DialogType.Token) {\n      onClose()\n    }\n\n    if (dialogType === DialogType.Edit && device) {\n      const updatedDevice = { ...device, name: deviceName }\n      const res = await updateDevice(updatedDevice)\n\n      if (res.success) {\n        setAlert(settingsCopy.mobile_devices_edit_success, 'success')\n        loadDevices()\n      } else {\n        setAlert(\n          buildDynamicCopy(settingsCopy.mobile_devices_edit_error, device.name) as string,\n          'error',\n        )\n      }\n      onClose()\n    }\n\n    if (dialogType === DialogType.Delete && device) {\n      const res = await deleteDevice(device.guid)\n\n      if (res.success) {\n        setAlert(\n          buildDynamicCopy(settingsCopy.mobile_devices_delete_success, device.name) as string,\n          'success',\n        )\n        loadDevices()\n      } else {\n        setAlert(\n          buildDynamicCopy(settingsCopy.mobile_devices_delete_error, device.name) as string,\n          'error',\n        )\n      }\n      onClose()\n    }\n  }\n\n  return (\n    <Dialog\n      copy={{ title: getDialogTitle() }}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPrimaryAction={handlePrimaryAction}\n      onSecondaryAction={onClose}\n      primaryColor={dialogType === DialogType.Delete ? 'error' : undefined}\n      primaryText={getDialogPrimaryText()}\n      secondaryText={dialogType === DialogType.Token ? commonCopy.back : commonCopy.cancel_button}\n      sx={getDialogStyles()}\n    >\n      {dialogType === DialogType.Token && (\n        <Stack spacing={16} sx={{ px: 40, textAlign: 'center', width: '100%' }}>\n          <Text bold={true} truncate={false} variant=\"body1\">\n            {settingsCopy.mobile_devices_access_label}\n          </Text>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.mobile_devices_access_info_1}\n          </Text>\n          <P\n            sx={{\n              border: `1px solid ${theme.palette.neutral.light}`,\n              borderRadius: '4px',\n              p: '16px 32px',\n            }}\n            variant=\"h1\"\n          >\n            {deviceToken}\n          </P>\n          <Text truncate={false} variant=\"body2\">\n            {settingsCopy.mobile_devices_access_info_2}\n          </Text>\n        </Stack>\n      )}\n      {dialogType === DialogType.Edit && (\n        <Stack>\n          <TextField onChange={(e) => setDeviceName(e.target.value)} value={deviceName} />\n        </Stack>\n      )}\n      {dialogType === DialogType.Delete && <P>{settingsCopy.mobile_devices_delete_info}</P>}\n    </Dialog>\n  )\n}\n\nexport default observer(DeviceDialog)\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,IAAA,CAA6C,EACjD,YAAA,GACA,QAAA,GACA,SAAA,GACA,QAAA,GACA,aAAA,IAAc,GAAA,MACV;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,QAAQ,GAAY,UAAU,EAAA,IAAiB,EAAmB,GACpE,EAAE,cAAA,GAAc,cAAA,GAAc,UAAA,GAAU,aAAA,EAAA,IAAgB,EAAiB,GAEzE,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAE;AAErD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAQ,EAAc,EAAO,IAAI;AAAA,EACvC,GAAG,CAAC,GAAQ,CAAU,CAAC;AAEvB,QAAM,IAAA,MAAuB;AAC3B,YAAQ,GAAR;AAAA,MACE,KAAK,EAAW;AACd,eAAO,EAAa;AAAA,MACtB,KAAK,EAAW;AACd,eAAO,EAAa;AAAA,MACtB;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAEM,IAAA,MAA6B;AACjC,YAAQ,GAAR;AAAA,MACE,KAAK,EAAW;AACd,eAAO,EAAW;AAAA,MACpB,KAAK,EAAW;AACd,eAAO,EAAW;AAAA,MACpB,KAAK,EAAW;AACd,eAAO,EAAW;AAAA,MACpB;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAEM,IAAA,MAAwB;AAC5B,UAAM,IAAa,EACjB,4BAA4B;AAAA,MAC1B,OAAO;AAAA,MACP,IAAI;AAAA,IACN,EACF;AAEA,WAAI,MAAe,EAAW,QACrB;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC;AAAA,QAC/B,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA,mCAAmC,EACjC,SAAS,OACX;AAAA,MACA,gCAAgC,EAC9B,MAAM,EACR;AAAA,IACF,IAGK;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC;AAAA,QAC/B,KAAK;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,MACA,GAAI,MAAe,EAAW,UAAU,EACtC,0BAA0B,EACxB,SAAS,EACX,EACF;AAAA,IACF;AAAA,EACF,GAEM,IAAsB,YAAY;AAKtC,QAJI,MAAe,EAAW,SAC5B,EAAQ,GAGN,MAAe,EAAW,QAAQ,GAAQ;AAC5C,YAAM,IAAgB;AAAA,QAAE,GAAG;AAAA,QAAQ,MAAM;AAAA,MAAW;AAGpD,OAAI,MAFc,EAAa,CAAa,GAEpC,WACN,EAAS,EAAa,6BAA6B,SAAS,GAC5D,EAAY,KAEZ,EACE,EAAiB,EAAa,2BAA2B,EAAO,IAAI,GACpE,OACF,GAEF,EAAQ;AAAA,IACV;AAEA,IAAI,MAAe,EAAW,UAAU,OAGlC,MAFc,EAAa,EAAO,IAAI,GAElC,WACN,EACE,EAAiB,EAAa,+BAA+B,EAAO,IAAI,GACxE,SACF,GACA,EAAY,KAEZ,EACE,EAAiB,EAAa,6BAA6B,EAAO,IAAI,GACtE,OACF,GAEF,EAAQ;AAAA,EAEZ;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM,EAAE,OAAO,EAAe,EAAE;AAAA,IACxB,QAAA;AAAA,IACC,SAAA;AAAA,IACT,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,cAAc,MAAe,EAAW,SAAS,UAAU;AAAA,IAC3D,aAAa,EAAqB;AAAA,IAClC,eAAe,MAAe,EAAW,QAAQ,EAAW,OAAO,EAAW;AAAA,IAC9E,IAAI,EAAgB;AAAA,cATtB;AAAA,MAWG,MAAe,EAAW,SACzB,gBAAA,EAAC,GAAD;AAAA,QAAO,SAAS;AAAA,QAAI,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,WAAW;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,kBAArE;AAAA,UACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,sBACxC,EAAa;AAAA,UACV,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,sBAC5B,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,sBAEP;AAAA,UACA,CAAA;AAAA,UACH,gBAAA,EAAC,GAAD;AAAA,YAAM,UAAU;AAAA,YAAO,SAAQ;AAAA,sBAC5B,EAAa;AAAA,UACV,CAAA;AAAA,QACD;AAAA;MAER,MAAe,EAAW,QACzB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAW,UAAA,CAAW,MAAM,EAAc,EAAE,OAAO,KAAK;AAAA,QAAG,OAAO;AAAA,MAAa,CAAA,EAC1E,CAAA;AAAA,MAER,MAAe,EAAW,UAAU,gBAAA,EAAC,GAAD,EAAA,UAAI,EAAa,2BAA8B,CAAA;AAAA,IAC9E;AAAA;AAEZ,GAEA,IAAe,EAAS,CAAY"}

package/dist/settings/components/devices/DeviceList.es.js

@@ -0,0 +1,125 @@
+import { buildDynamicCopy as f } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as u } from "../../../common/context/hooks.es.js";
+import y from "react";
+import d from "@mui/material/Stack";
+import { Icon as l, Text as t } from "@mxenabled/mxui";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+import _ from "@mui/material/Box";
+import c from "@mui/material/IconButton";
+import { fromUnixTime as C } from "date-fns/fromUnixTime";
+import k from "@mui/material/Accordion";
+import w from "@mui/material/AccordionDetails";
+import v from "@mui/material/AccordionSummary";
+import { formatDistanceToNow as D } from "date-fns/formatDistanceToNow";
+var q = ({ devices: n, onClickDeviceEdit: m, onClickDeviceDelete: p }) => {
+  const r = g(), { settings: a } = u(), [s, b] = y.useState(!1), x = (e) => (S, h) => {
+    b(h ? e : !1);
+  };
+  return /* @__PURE__ */ i(d, {
+    mx: -28,
+    sx: { "& .MuiAccordion-root": {
+      mb: 0,
+      mt: 0
+    } },
+    children: [n.map((e) => /* @__PURE__ */ i(k, {
+      expanded: s === e.guid,
+      onChange: x(e.guid),
+      sx: { boxShadow: "none" },
+      children: [/* @__PURE__ */ o(v, {
+        expandIcon: /* @__PURE__ */ o(l, {
+          color: "secondary",
+          name: "keyboard_arrow_down",
+          size: 24
+        }),
+        sx: {
+          padding: "14px 24px",
+          borderBottom: "1px solid",
+          borderColor: r.palette.divider
+        },
+        children: /* @__PURE__ */ i(d, {
+          gap: 4,
+          children: [
+            /* @__PURE__ */ o(t, {
+              bold: !0,
+              variant: "body1",
+              children: e.name
+            }),
+            /* @__PURE__ */ o(t, {
+              color: r.palette.text.secondary,
+              variant: "body2",
+              children: `${e.make} ${e.model}`
+            }),
+            /* @__PURE__ */ o(t, {
+              color: r.palette.text.secondary,
+              variant: "body2",
+              children: D(C(e.created_at), { addSuffix: !0 })
+            })
+          ]
+        })
+      }), /* @__PURE__ */ i(w, {
+        sx: {
+          backgroundColor: r.palette.background.default,
+          p: "0 0 0 24px"
+        },
+        children: [/* @__PURE__ */ i(d, {
+          onClick: () => m(e),
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            width: "100%",
+            gap: 12,
+            py: 16,
+            cursor: "pointer",
+            borderBottom: "1px solid",
+            borderColor: r.palette.divider
+          },
+          children: [/* @__PURE__ */ o(c, {
+            "aria-label": a.mobile_devices_edit_label,
+            color: "secondary",
+            children: /* @__PURE__ */ o(l, { name: "edit" })
+          }), /* @__PURE__ */ o(t, {
+            variant: "body1",
+            children: a.mobile_devices_edit_label
+          })]
+        }), /* @__PURE__ */ i(d, {
+          onClick: () => p(e),
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            width: "100%",
+            gap: 12,
+            py: 16,
+            cursor: "pointer"
+          },
+          children: [/* @__PURE__ */ o(c, {
+            "aria-label": a.mobile_devices_delete_label,
+            color: "secondary",
+            children: /* @__PURE__ */ o(l, { name: "delete" })
+          }), /* @__PURE__ */ o(t, {
+            variant: "body1",
+            children: a.mobile_devices_delete_label
+          })]
+        })]
+      })]
+    }, e.guid)), /* @__PURE__ */ o(_, {
+      sx: {
+        backgroundColor: r.palette.background.default,
+        borderTop: "1px solid",
+        borderColor: r.palette.divider,
+        p: "12px 16px"
+      },
+      children: /* @__PURE__ */ o(t, {
+        color: r.palette.text.secondary,
+        variant: "body2",
+        children: f(a.mobile_devices_count, /* @__PURE__ */ o("b", { children: n.length }), /* @__PURE__ */ o("b", { children: n.length }))
+      })
+    })]
+  });
+};
+export {
+  q as DeviceList,
+  q as default
+};
+
+//# sourceMappingURL=DeviceList.es.js.map

package/dist/settings/components/devices/DeviceList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceList.es.js","names":[],"sources":["../../../../src/settings/components/devices/DeviceList.tsx"],"sourcesContent":["import React from 'react'\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\n\nimport { useTheme } from '@mui/material/styles'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Box from '@mui/material/Box'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { Device } from '../../../core'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface DeviceListProps {\n  devices: Device[]\n  onClickDeviceEdit: (device: Device) => void\n  onClickDeviceDelete: (device: Device) => void\n}\n\nexport const DeviceList: React.FC<DeviceListProps> = ({\n  devices,\n  onClickDeviceEdit,\n  onClickDeviceDelete,\n}) => {\n  const theme = useTheme()\n  const { settings: settingsCopy } = useGlobalCopyStore()\n  const [expanded, setExpanded] = React.useState<string | false>(false)\n\n  const handleChange = (guid: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {\n    setExpanded(isExpanded ? guid : false)\n  }\n\n  return (\n    <Stack mx={-28} sx={{ '& .MuiAccordion-root': { mb: 0, mt: 0 } }}>\n      {devices.map((device) => (\n        <Accordion\n          expanded={expanded === device.guid}\n          key={device.guid}\n          onChange={handleChange(device.guid)}\n          sx={{ boxShadow: 'none' }}\n        >\n          <AccordionSummary\n            expandIcon={<Icon color={'secondary'} name=\"keyboard_arrow_down\" size={24} />}\n            sx={{\n              padding: '14px 24px',\n              borderBottom: '1px solid',\n              borderColor: theme.palette.divider,\n            }}\n          >\n            <Stack gap={4}>\n              <Text bold={true} variant=\"body1\">\n                {device.name}\n              </Text>\n              <Text color={theme.palette.text.secondary} variant=\"body2\">\n                {`${device.make} ${device.model}`}\n              </Text>\n              <Text color={theme.palette.text.secondary} variant=\"body2\">\n                {formatDistanceToNow(fromUnixTime(device.created_at), { addSuffix: true })}\n              </Text>\n            </Stack>\n          </AccordionSummary>\n          <AccordionDetails\n            sx={{ backgroundColor: theme.palette.background.default, p: '0 0 0 24px' }}\n          >\n            <Stack\n              onClick={() => onClickDeviceEdit(device)}\n              sx={{\n                alignItems: 'center',\n                flexDirection: 'row',\n                width: '100%',\n                gap: 12,\n                py: 16,\n                cursor: 'pointer',\n                borderBottom: '1px solid',\n                borderColor: theme.palette.divider,\n              }}\n            >\n              <IconButton aria-label={settingsCopy.mobile_devices_edit_label} color=\"secondary\">\n                <Icon name=\"edit\" />\n              </IconButton>\n              <Text variant=\"body1\">{settingsCopy.mobile_devices_edit_label}</Text>\n            </Stack>\n            <Stack\n              onClick={() => onClickDeviceDelete(device)}\n              sx={{\n                alignItems: 'center',\n                flexDirection: 'row',\n                width: '100%',\n                gap: 12,\n                py: 16,\n                cursor: 'pointer',\n              }}\n            >\n              <IconButton aria-label={settingsCopy.mobile_devices_delete_label} color=\"secondary\">\n                <Icon name=\"delete\" />\n              </IconButton>\n              <Text variant=\"body1\">{settingsCopy.mobile_devices_delete_label}</Text>\n            </Stack>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n      <Box\n        sx={{\n          backgroundColor: theme.palette.background.default,\n          borderTop: '1px solid',\n          borderColor: theme.palette.divider,\n          p: '12px 16px',\n        }}\n      >\n        <Text color={theme.palette.text.secondary} variant=\"body2\">\n          {\n            buildDynamicCopy(\n              settingsCopy.mobile_devices_count,\n              <b>{devices.length}</b>,\n              <b>{devices.length}</b>,\n            ) as string\n          }\n        </Text>\n      </Box>\n    </Stack>\n  )\n}\n\nexport default DeviceList\n"],"mappings":"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"}

package/dist/settings/components/devices/DeviceTab.es.js

@@ -0,0 +1,107 @@
+import { useGlobalCopyStore as T, useGlobalUiStore as x, useSettingsStore as E } from "../../../common/context/hooks.es.js";
+import { useScreenSize as G } from "../../../common/hooks/useScreenSize.es.js";
+import L from "../../../common/components/Loader.es.js";
+import { DialogType as s } from "../../constants/Settings.es.js";
+import { DeviceTable as j } from "./DeviceTable.es.js";
+import { DeviceList as z } from "./DeviceList.es.js";
+import I from "./DeviceDialog.es.js";
+import c from "react";
+import { observer as w } from "mobx-react-lite";
+import l from "@mui/material/Stack";
+import { H3 as A, P as D, Text as B } from "@mxenabled/mxui";
+import H from "@mui/material/Button";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var X = w(() => {
+  const { isMobile: f } = G(), { settings: i } = T(), { isCopyLoaded: u, isInitialized: r } = x(), { setAlert: b, devices: d, loadDevices: g, generateDeviceToken: _ } = E(), [p, t] = c.useState({
+    open: !1,
+    type: ""
+  }), [k, n] = c.useState(), [y, C] = c.useState("");
+  c.useEffect(() => {
+    r && g();
+  }, [r]);
+  const h = async () => {
+    const o = await _();
+    o ? (C(o), t({
+      open: !0,
+      type: s.Token
+    })) : b(i.mobile_devices_access_error, "error");
+  }, m = (o) => {
+    n(o), t({
+      open: !0,
+      type: s.Edit
+    });
+  }, v = (o) => {
+    n(o), t({
+      open: !0,
+      type: s.Delete
+    });
+  }, S = () => {
+    t({
+      open: !1,
+      type: ""
+    }), n(void 0);
+  };
+  return !u || !r ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ a(l, {
+    sx: {
+      backgroundColor: "background.paper",
+      p: 24,
+      gap: 24
+    },
+    children: [
+      /* @__PURE__ */ a(l, {
+        gap: 4,
+        children: [/* @__PURE__ */ e(A, { children: i.mobile_devices_title }), /* @__PURE__ */ e(D, {
+          variant: "body1",
+          children: i.mobile_devices_info
+        })]
+      }),
+      f ? /* @__PURE__ */ e(z, {
+        devices: d,
+        onClickDeviceDelete: v,
+        onClickDeviceEdit: m
+      }) : /* @__PURE__ */ e(j, {
+        devices: d,
+        onClickDeviceDelete: v,
+        onClickDeviceEdit: m
+      }),
+      /* @__PURE__ */ a(l, {
+        sx: {
+          alignItems: "center",
+          px: 24,
+          py: 12,
+          gap: 4
+        },
+        children: [
+          /* @__PURE__ */ e(B, {
+            bold: !0,
+            variant: "body1",
+            children: i.mobile_devices_access_title
+          }),
+          /* @__PURE__ */ e(D, {
+            align: "center",
+            variant: "body2",
+            children: i.mobile_devices_access_description
+          }),
+          /* @__PURE__ */ e(H, {
+            onClick: h,
+            variant: "text",
+            children: i.mobile_devices_access_cta
+          })
+        ]
+      }),
+      /* @__PURE__ */ e(I, {
+        device: k,
+        deviceToken: y,
+        dialogType: p.type,
+        isOpen: p.open,
+        onClose: S
+      })
+    ]
+  });
+});
+export {
+  X as DeviceTab,
+  X as default
+};
+
+//# sourceMappingURL=DeviceTab.es.js.map

package/dist/settings/components/devices/DeviceTab.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceTab.es.js","names":[],"sources":["../../../../src/settings/components/devices/DeviceTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { H3, P, Text } from '@mxenabled/mxui'\n\nimport {\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useSettingsStore,\n} from '../../../common'\n\nimport type { Device } from '../../../core'\n\nimport { DialogType } from '../../constants/Settings'\nimport DeviceTable from './DeviceTable'\nimport DeviceList from './DeviceList'\nimport DeviceDialog from './DeviceDialog'\n\nexport const DeviceTab = observer(() => {\n  const { isMobile } = useScreenSize()\n  const { settings: settingsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded, isInitialized } = useGlobalUiStore()\n  const { setAlert, devices, loadDevices, generateDeviceToken } = useSettingsStore()\n\n  const [dialog, setDialog] = React.useState({ open: false, type: '' })\n  const [selectedDevice, setSelectedDevice] = React.useState<Device | undefined>()\n  const [deviceToken, setDeviceToken] = React.useState('')\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadDevices()\n    }\n  }, [isInitialized])\n\n  const handleGenerateDeviceToken = async () => {\n    const token = await generateDeviceToken()\n    if (token) {\n      setDeviceToken(token)\n      setDialog({ open: true, type: DialogType.Token })\n    } else {\n      setAlert(settingsCopy.mobile_devices_access_error, 'error')\n    }\n  }\n\n  const handleClickDeviceEdit = (device: Device) => {\n    setSelectedDevice(device)\n    setDialog({ open: true, type: DialogType.Edit })\n  }\n\n  const handleClickDeviceDelete = (device: Device) => {\n    setSelectedDevice(device)\n    setDialog({ open: true, type: DialogType.Delete })\n  }\n\n  const handleCloseDialog = () => {\n    setDialog({ open: false, type: '' })\n    setSelectedDevice(undefined)\n  }\n\n  if (!isCopyLoaded || !isInitialized) {\n    return <Loader />\n  }\n\n  return (\n    <Stack\n      sx={{\n        backgroundColor: 'background.paper',\n        p: 24,\n        gap: 24,\n      }}\n    >\n      <Stack gap={4}>\n        <H3>{settingsCopy.mobile_devices_title}</H3>\n        <P variant=\"body1\">{settingsCopy.mobile_devices_info}</P>\n      </Stack>\n\n      {/* Device Table/List */}\n      {isMobile ? (\n        <DeviceList\n          devices={devices}\n          onClickDeviceDelete={handleClickDeviceDelete}\n          onClickDeviceEdit={handleClickDeviceEdit}\n        />\n      ) : (\n        <DeviceTable\n          devices={devices}\n          onClickDeviceDelete={handleClickDeviceDelete}\n          onClickDeviceEdit={handleClickDeviceEdit}\n        />\n      )}\n\n      {/* Token CTA */}\n      <Stack sx={{ alignItems: 'center', px: 24, py: 12, gap: 4 }}>\n        <Text bold={true} variant=\"body1\">\n          {settingsCopy.mobile_devices_access_title}\n        </Text>\n        <P align=\"center\" variant=\"body2\">\n          {settingsCopy.mobile_devices_access_description}\n        </P>\n        <Button onClick={handleGenerateDeviceToken} variant=\"text\">\n          {settingsCopy.mobile_devices_access_cta}\n        </Button>\n      </Stack>\n\n      {/* Dialogs (Token, Edit, or Delete) */}\n      <DeviceDialog\n        device={selectedDevice}\n        deviceToken={deviceToken}\n        dialogType={dialog.type}\n        isOpen={dialog.open}\n        onClose={handleCloseDialog}\n      />\n    </Stack>\n  )\n})\n\nexport default DeviceTab\n"],"mappings":"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"}