@mx-cartographer/experiences 9.4.62 → 9.4.64

package/dist/help/components/content/section/LoginIssues.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SectionProps } from '../../../../core/types/Help';
+declare const LoginIssues: React.FC<SectionProps>;
+export default LoginIssues;

package/dist/help/components/content/section/LoginIssues.es.js

@@ -0,0 +1,69 @@
+import { NoImageContent as s } from "../NoImageContent.es.js";
+import { List as c, Text as t } from "../ContentItem.es.js";
+import i from "react";
+import { jsx as _, jsxs as p } from "react/jsx-runtime";
+var f = ({ topicKey: n, copy: r }) => {
+  const e = r.login_issues, o = {
+    "not-receiving-code": {
+      summary: e.not_receiving_code_summary,
+      steps: [
+        e.not_receiving_code_step_1,
+        e.not_receiving_code_step_2,
+        e.not_receiving_code_step_3,
+        e.not_receiving_code_step_4,
+        e.not_receiving_code_step_5
+      ],
+      footer: e.not_receiving_code_footer
+    },
+    "wrong-phone-number": {
+      summary: e.wrong_phone_number_summary,
+      steps: [
+        e.wrong_phone_number_step_1,
+        e.wrong_phone_number_step_2,
+        e.wrong_phone_number_step_3,
+        e.wrong_phone_number_step_4
+      ],
+      footer: e.wrong_phone_number_footer
+    },
+    "outdated-contact-info": {
+      summary: e.outdated_contact_info_summary,
+      steps: [
+        e.outdated_contact_info_step_1,
+        e.outdated_contact_info_step_2,
+        e.outdated_contact_info_step_3,
+        e.outdated_contact_info_step_4
+      ],
+      footer: e.outdated_contact_info_footer
+    },
+    "new-code-or-token": {
+      summary: e.new_code_or_token_summary,
+      steps: [
+        e.new_code_or_token_step_1,
+        e.new_code_or_token_step_2,
+        e.new_code_or_token_step_3,
+        e.new_code_or_token_step_4,
+        e.new_code_or_token_step_5
+      ],
+      footer: e.new_code_or_token_footer
+    }
+  }[n];
+  return o ? /* @__PURE__ */ _(s, {
+    hasDivider: !1,
+    content: /* @__PURE__ */ p(i.Fragment, { children: [
+      /* @__PURE__ */ _(t, { content: o.summary }),
+      /* @__PURE__ */ _(c, {
+        items: [...o.steps],
+        listType: "ol"
+      }),
+      /* @__PURE__ */ _(t, {
+        content: o.footer,
+        sx: { pt: 12 }
+      })
+    ] })
+  }) : null;
+};
+export {
+  f as default
+};
+
+//# sourceMappingURL=LoginIssues.es.js.map

package/dist/help/components/content/section/LoginIssues.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginIssues.es.js","names":[],"sources":["../../../../../src/help/components/content/section/LoginIssues.tsx"],"sourcesContent":["import React from 'react'\n\nimport { NoImageContent } from '..'\nimport { SectionProps } from '../../../../core/types/Help'\nimport { List, Text } from '../ContentItem'\n\n// One render fun, keyed by lookup; unknown keys return null.\nconst LoginIssues: React.FC<SectionProps> = ({ topicKey, copy }) => {\n  const c = copy.login_issues\n\n  const articles = {\n    'not-receiving-code': {\n      summary: c.not_receiving_code_summary,\n      steps: [\n        c.not_receiving_code_step_1,\n        c.not_receiving_code_step_2,\n        c.not_receiving_code_step_3,\n        c.not_receiving_code_step_4,\n        c.not_receiving_code_step_5,\n      ],\n      footer: c.not_receiving_code_footer,\n    },\n    'wrong-phone-number': {\n      summary: c.wrong_phone_number_summary,\n      steps: [\n        c.wrong_phone_number_step_1,\n        c.wrong_phone_number_step_2,\n        c.wrong_phone_number_step_3,\n        c.wrong_phone_number_step_4,\n      ],\n      footer: c.wrong_phone_number_footer,\n    },\n    'outdated-contact-info': {\n      summary: c.outdated_contact_info_summary,\n      steps: [\n        c.outdated_contact_info_step_1,\n        c.outdated_contact_info_step_2,\n        c.outdated_contact_info_step_3,\n        c.outdated_contact_info_step_4,\n      ],\n      footer: c.outdated_contact_info_footer,\n    },\n    'new-code-or-token': {\n      summary: c.new_code_or_token_summary,\n      steps: [\n        c.new_code_or_token_step_1,\n        c.new_code_or_token_step_2,\n        c.new_code_or_token_step_3,\n        c.new_code_or_token_step_4,\n        c.new_code_or_token_step_5,\n      ],\n      footer: c.new_code_or_token_footer,\n    },\n  } as const\n\n  const entry = articles[topicKey as keyof typeof articles]\n  if (!entry) return null\n\n  return (\n    <NoImageContent\n      hasDivider={false}\n      content={\n        <React.Fragment>\n          <Text content={entry.summary} />\n          <List items={[...entry.steps]} listType=\"ol\" />\n          <Text content={entry.footer} sx={{ pt: 12 }} />\n        </React.Fragment>\n      }\n    />\n  )\n}\n\nexport default LoginIssues\n"],"mappings":";;;;AAOA,IAAM,IAAA,CAAuC,EAAE,UAAA,GAAU,MAAA,EAAA,MAAW;AAClE,QAAM,IAAI,EAAK,cA+CT,IAAQ;AAAA,IA5CZ,sBAAsB;AAAA,MACpB,SAAS,EAAE;AAAA,MACX,OAAO;AAAA,QACL,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,MACJ;AAAA,MACA,QAAQ,EAAE;AAAA,IACZ;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,EAAE;AAAA,MACX,OAAO;AAAA,QACL,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,MACJ;AAAA,MACA,QAAQ,EAAE;AAAA,IACZ;AAAA,IACA,yBAAyB;AAAA,MACvB,SAAS,EAAE;AAAA,MACX,OAAO;AAAA,QACL,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,MACJ;AAAA,MACA,QAAQ,EAAE;AAAA,IACZ;AAAA,IACA,qBAAqB;AAAA,MACnB,SAAS,EAAE;AAAA,MACX,OAAO;AAAA,QACL,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,QACF,EAAE;AAAA,MACJ;AAAA,MACA,QAAQ,EAAE;AAAA,IACZ;AAAA,EAGY,EAAS,CAAA;AACvB,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,YAAY;AAAA,IACZ,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAM,SAAS,EAAM,QAAU,CAAA;AAAA,MAC/B,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAO,CAAC,GAAG,EAAM,KAAK;AAAA,QAAG,UAAS;AAAA,MAAM,CAAA;AAAA,MAC9C,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAS,EAAM;AAAA,QAAQ,IAAI,EAAE,IAAI,GAAG;AAAA,MAAI,CAAA;AAAA,IAChC,EAAA,CAAA;AAAA,EAEnB,CAAA,IAZgB;AAcrB"}

package/dist/help/components/content/section/index.d.ts

@@ -7,6 +7,7 @@ declare const contentSection: {
     general: import('react').FC<import('../../../../core').SectionProps>;
     goals: import('react').FC<import('../../../../core').SectionProps>;
     insights: import('react').FC<import('../../../../core').SectionProps>;
+    login_issues: import('react').FC<import('../../../../core').SectionProps>;
     investments: import('react').FC<import('../../../../core').SectionProps>;
     mobile: import('react').FC<import('../../../../core').SectionProps>;
     networth: import('react').FC<import('../../../../core').SectionProps>;

package/dist/help/components/content/section/index.es.js

@@ -2,36 +2,38 @@ import o from "./Accounts.es.js";
 import r from "./Budgets.es.js";
 import t from "./CashFlow.es.js";
 import i from "./Debts.es.js";
-import m from "./General.es.js";
-import n from "./Goals.es.js";
-import s from "./Investments.es.js";
+import s from "./General.es.js";
+import m from "./Goals.es.js";
+import n from "./Investments.es.js";
 import e from "./Mobile.es.js";
-import a from "./NetWorth.es.js";
-import p from "./Notifications.es.js";
+import p from "./NetWorth.es.js";
+import a from "./Notifications.es.js";
 import f from "./RecurringTransactions.es.js";
 import c from "./Spending.es.js";
 import g from "./Transactions.es.js";
 import l from "./Trends.es.js";
-import d from "./Insights.es.js";
-var F = {
+import u from "./Insights.es.js";
+import d from "./LoginIssues.es.js";
+var L = {
   accounts: o,
-  alerts: p,
+  alerts: a,
   budgets: r,
   cashflow: t,
   debts: i,
-  general: m,
-  goals: n,
-  insights: d,
-  investments: s,
+  general: s,
+  goals: m,
+  insights: u,
+  login_issues: d,
+  investments: n,
   mobile: e,
-  networth: a,
+  networth: p,
   recurring_transactions: f,
   spending: c,
   transactions: g,
   trends: l
 };
 export {
-  F as contentSection
+  L as contentSection
 };
 
 //# sourceMappingURL=index.es.js.map

package/dist/help/components/content/section/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/help/components/content/section/index.ts"],"sourcesContent":["import Accounts from './Accounts'\nimport Budgets from './Budgets'\nimport CashFlow from './CashFlow'\nimport Debts from './Debts'\nimport General from './General'\nimport Goals from './Goals'\nimport Investments from './Investments'\nimport Mobile from './Mobile'\nimport NetWorth from './NetWorth'\nimport Notifications from './Notifications'\nimport RecurringTransactions from './RecurringTransactions'\nimport Spending from './Spending'\nimport Transactions from './Transactions'\nimport Trends from './Trends'\nimport Insights from './Insights'\n\nconst contentSection = {\n  accounts: Accounts,\n  alerts: Notifications,\n  budgets: Budgets,\n  cashflow: CashFlow,\n  debts: Debts,\n  general: General,\n  goals: Goals,\n  insights: Insights,\n  investments: Investments,\n  mobile: Mobile,\n  networth: NetWorth,\n  recurring_transactions: RecurringTransactions,\n  spending: Spending,\n  transactions: Transactions,\n  trends: Trends,\n}\n\nexport { contentSection }\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AACV"}
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/help/components/content/section/index.ts"],"sourcesContent":["import Accounts from './Accounts'\nimport Budgets from './Budgets'\nimport CashFlow from './CashFlow'\nimport Debts from './Debts'\nimport General from './General'\nimport Goals from './Goals'\nimport Investments from './Investments'\nimport Mobile from './Mobile'\nimport NetWorth from './NetWorth'\nimport Notifications from './Notifications'\nimport RecurringTransactions from './RecurringTransactions'\nimport Spending from './Spending'\nimport Transactions from './Transactions'\nimport Trends from './Trends'\nimport Insights from './Insights'\nimport LoginIssues from './LoginIssues'\n\nconst contentSection = {\n  accounts: Accounts,\n  alerts: Notifications,\n  budgets: Budgets,\n  cashflow: CashFlow,\n  debts: Debts,\n  general: General,\n  goals: Goals,\n  insights: Insights,\n  login_issues: LoginIssues,\n  investments: Investments,\n  mobile: Mobile,\n  networth: NetWorth,\n  recurring_transactions: RecurringTransactions,\n  spending: Spending,\n  transactions: Transactions,\n  trends: Trends,\n}\n\nexport { contentSection }\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAM,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AACV"}

package/dist/help/components/requestsupport/HelpByCategoryList.d.ts

@@ -1,18 +1,23 @@
 import { default as React } from 'react';
-import { HelpType } from '../../../core';
+import { HelpCopy, HelpType, SelectedTopic } from '../../../core';
 interface HelpByCategory {
+    description?: string;
     guid: string;
     icon: string;
     title: string;
     topics: Topic[];
 }
 interface HelpByCategoryListProps {
+    copy: HelpCopy;
     helpByCategory: HelpByCategory[];
     onClick: (label: string, type: HelpType) => void;
+    onOpenCase: (topic: string) => void;
+    onTopicSelect: (topic: SelectedTopic) => void;
 }
 interface Topic {
     label: string;
     type: HelpType;
+    topicKey?: string;
 }
 export declare const HelpByCategoryList: React.FC<HelpByCategoryListProps>;
 export {};

package/dist/help/components/requestsupport/HelpByCategoryList.es.js

@@ -1,68 +1,113 @@
-import { useEvent as g } from "../../../common/context/hooks.es.js";
-import { ANALYTICS_EVENTS as m } from "../../../common/constants/Analytics.es.js";
-import y from "react";
-import p from "@mui/material/Stack";
-import { Icon as E, Text as a } from "@mxenabled/mxui";
-import { ExpandMore as b } from "@mxenabled/mx-icons";
+import { useEvent as S } from "../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as a } from "../../../common/constants/Analytics.es.js";
+import { SupportPrompt as v } from "../SupportPrompt.es.js";
+import m from "react";
+import l from "@mui/material/Stack";
+import { Icon as A, Text as d } from "@mxenabled/mxui";
+import { ExpandMore as T } from "@mxenabled/mx-icons";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import R from "@mui/material/Divider";
-import A from "@mui/material/List";
-import C from "@mui/material/ListItemButton";
-import L from "@mui/material/Accordion";
-import v from "@mui/material/AccordionDetails";
-import I from "@mui/material/AccordionSummary";
-var w = ({ helpByCategory: t, onClick: s }) => {
-  const [l, x] = y.useState(null), { onEvent: d } = g();
-  return /* @__PURE__ */ r(p, {
+import P from "@mui/material/Divider";
+import f from "@mui/material/List";
+import N from "@mui/material/ListItem";
+import O from "@mui/material/ListItemButton";
+import B from "@mui/material/Accordion";
+import D from "@mui/material/AccordionDetails";
+import H from "@mui/material/AccordionSummary";
+var Z = ({ copy: n, helpByCategory: g, onClick: y, onOpenCase: E, onTopicSelect: _ }) => {
+  const [b, C] = m.useState(null), u = m.useRef([]), { onEvent: s } = S();
+  return /* @__PURE__ */ r(l, {
     sx: {
       flex: 1,
       gap: 12,
       p: 12
     },
-    children: t.map(({ icon: u, topics: f, title: e }, i) => /* @__PURE__ */ c(L, {
+    children: g.map(({ description: x, guid: L, icon: I, title: o, topics: t }, i) => /* @__PURE__ */ c(B, {
       disableGutters: !0,
-      expanded: i === l,
-      onChange: (o, n) => {
-        d(m.HELP_EXPAND_CATEGORY, { category: e }), x(n ? i : null);
+      expanded: i === b,
+      onChange: (e, p) => {
+        s(a.HELP_EXPAND_CATEGORY, { category: o }), C(p ? i : null);
       },
-      sx: B,
+      ref: (e) => {
+        u.current[i] = e;
+      },
+      slotProps: { transition: { onEntered: () => u.current[i]?.scrollIntoView(G) } },
+      sx: M,
       children: [
-        /* @__PURE__ */ r(I, {
-          expandIcon: /* @__PURE__ */ r(b, { sx: { color: "text.primary" } }),
+        /* @__PURE__ */ r(H, {
+          expandIcon: /* @__PURE__ */ r(T, { sx: { color: "text.primary" } }),
           sx: {
             p: "14px 24px",
             height: 64
           },
-          children: /* @__PURE__ */ c(p, {
+          children: /* @__PURE__ */ c(l, {
             sx: {
               alignItems: "center",
               flexDirection: "row",
               gap: 12
             },
-            children: [/* @__PURE__ */ r(E, {
-              name: u,
+            children: [/* @__PURE__ */ r(A, {
+              name: I,
               size: 24
-            }), /* @__PURE__ */ r(a, {
+            }), /* @__PURE__ */ r(d, {
               variant: "body1",
-              children: e
+              children: o
             })]
           })
         }),
-        /* @__PURE__ */ r(R, {}),
-        /* @__PURE__ */ r(v, {
+        /* @__PURE__ */ r(P, {}),
+        /* @__PURE__ */ r(D, {
           sx: {
             ml: 56,
             p: 0
           },
-          children: /* @__PURE__ */ r(A, {
+          children: x ? /* @__PURE__ */ c(l, {
+            sx: {
+              gap: 12,
+              py: 16,
+              pr: 24
+            },
+            children: [/* @__PURE__ */ r(d, {
+              color: "text.secondary",
+              variant: "subtitle2",
+              children: x
+            }), t.length > 0 && /* @__PURE__ */ r(f, {
+              dense: !0,
+              disablePadding: !0,
+              sx: {
+                listStyleType: "disc",
+                pl: 20
+              },
+              children: t.map(({ label: e }) => /* @__PURE__ */ r(N, {
+                disableGutters: !0,
+                sx: {
+                  display: "list-item",
+                  py: 2
+                },
+                children: /* @__PURE__ */ r(d, {
+                  color: "text.secondary",
+                  variant: "subtitle2",
+                  children: e
+                })
+              }, e))
+            })]
+          }) : /* @__PURE__ */ c(m.Fragment, { children: [t.length > 0 && /* @__PURE__ */ r(f, {
             sx: { "& .MuiListItemButton-root": { pl: 6 } },
-            children: f.map(({ label: o, type: n }, h) => /* @__PURE__ */ r(C, {
+            children: t.map(({ label: e, type: p, topicKey: h }, R) => /* @__PURE__ */ r(O, {
               divider: !0,
               onClick: () => {
-                d(m.HELP_CLICK_CATEGORY, {
-                  category: e,
-                  helpTopic: o
-                }), s(o, n);
+                if (s(a.HELP_CLICK_CATEGORY, {
+                  category: o,
+                  helpTopic: e
+                }), h) {
+                  _({
+                    guid: L,
+                    category: o,
+                    pageTitle: e,
+                    topicKey: h
+                  });
+                  return;
+                }
+                y(e, p);
               },
               sx: {
                 borderColor: "neutral.light",
@@ -71,19 +116,40 @@ var w = ({ helpByCategory: t, onClick: s }) => {
                   borderBottomRightRadius: 7
                 }
               },
-              children: /* @__PURE__ */ r(a, {
+              children: /* @__PURE__ */ r(d, {
                 color: "text.secondary",
                 variant: "body2",
-                children: o
+                children: e
               })
-            }, h))
-          })
+            }, R))
+          }), t.every(({ topicKey: e }) => !e) && /* @__PURE__ */ r(v, {
+            actionText: n.request_support_footer_button,
+            onAction: () => {
+              s(a.HELP_CLICK_OPEN_CASE, {
+                source: "category",
+                topic: o
+              }), E(o);
+            },
+            onPrompt: () => s(a.HELP_CLICK_NEED_MORE_ASSISTANCE, {
+              source: "category",
+              topic: o
+            }),
+            promptText: n.need_more_assistance,
+            sx: {
+              alignItems: "flex-start",
+              pb: 16,
+              pt: 4
+            }
+          })] })
         })
       ]
     }, i))
   });
-}, B = (t) => ({
-  border: `1px solid ${t.palette.neutral?.light}`,
+}, G = {
+  behavior: "smooth",
+  block: "nearest"
+}, M = (n) => ({
+  border: `1px solid ${n.palette.neutral?.light}`,
   borderRadius: "8px",
   "&:first-of-type": { borderRadius: "8px" },
   "&:before": { opacity: 0 },
@@ -93,7 +159,7 @@ var w = ({ helpByCategory: t, onClick: s }) => {
   }
 });
 export {
-  w as HelpByCategoryList
+  Z as HelpByCategoryList
 };
 
 //# sourceMappingURL=HelpByCategoryList.es.js.map

package/dist/help/components/requestsupport/HelpByCategoryList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpByCategoryList.es.js","names":[],"sources":["../../../../src/help/components/requestsupport/HelpByCategoryList.tsx"],"sourcesContent":["import React from 'react'\n\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nimport { ANALYTICS_EVENTS, useEvent } from '../../../common'\nimport { type HelpType } from '../../../core'\n\ninterface HelpByCategory {\n  guid: string\n  icon: string\n  title: string\n  topics: Topic[]\n}\n\ninterface HelpByCategoryListProps {\n  helpByCategory: HelpByCategory[]\n  onClick: (label: string, type: HelpType) => void\n}\n\ninterface Topic {\n  label: string\n  type: HelpType\n}\n\nexport const HelpByCategoryList: React.FC<HelpByCategoryListProps> = ({\n  helpByCategory,\n  onClick,\n}) => {\n  const [expanded, setExpanded] = React.useState<number | null>(null)\n\n  const { onEvent } = useEvent()\n\n  return (\n    <Stack sx={{ flex: 1, gap: 12, p: 12 }}>\n      {helpByCategory.map(({ icon, topics, title }, i) => (\n        <Accordion\n          disableGutters={true}\n          expanded={i === expanded}\n          key={i}\n          onChange={(_, isExpanded) => {\n            onEvent(ANALYTICS_EVENTS.HELP_EXPAND_CATEGORY, {\n              category: title,\n            })\n\n            setExpanded(isExpanded ? i : null)\n          }}\n          sx={accordionStyles}\n        >\n          <AccordionSummary\n            expandIcon={<ExpandMore sx={{ color: 'text.primary' }} />}\n            sx={{ p: '14px 24px', height: 64 }}\n          >\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 12 }}>\n              <Icon name={icon} size={24} />\n              <Text variant=\"body1\">{title}</Text>\n            </Stack>\n          </AccordionSummary>\n          <Divider />\n          <AccordionDetails\n            sx={{\n              ml: 56,\n              p: 0,\n            }}\n          >\n            <List sx={{ '& .MuiListItemButton-root': { pl: 6 } }}>\n              {topics.map(({ label, type }, i) => (\n                <ListItemButton\n                  divider={true}\n                  key={i}\n                  onClick={() => {\n                    onEvent(ANALYTICS_EVENTS.HELP_CLICK_CATEGORY, {\n                      category: title,\n                      helpTopic: label,\n                    })\n\n                    onClick(label, type)\n                  }}\n                  sx={{\n                    borderColor: 'neutral.light',\n                    '&:last-child': {\n                      border: 'none',\n                      borderBottomRightRadius: 7,\n                    },\n                  }}\n                >\n                  <Text color=\"text.secondary\" variant=\"body2\">\n                    {label}\n                  </Text>\n                </ListItemButton>\n              ))}\n            </List>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </Stack>\n  )\n}\n\nconst accordionStyles = (theme: any) => {\n  return {\n    border: `1px solid ${theme.palette.neutral?.light}`,\n    borderRadius: '8px',\n    '&:first-of-type': { borderRadius: '8px' },\n    '&:before': {\n      opacity: 0,\n    },\n    '& .MuiAccordion-region': {\n      borderBottomLeftRadius: 8,\n      borderBottomRightRadius: 8,\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAa,IAAA,CAAyD,EACpE,gBAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,CAAC,GAAU,CAAA,IAAe,EAAM,SAAwB,IAAI,GAE5D,EAAE,SAAA,EAAA,IAAY,EAAS;AAE7B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,MAAM;AAAA,MAAG,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IAClC,UAAA,EAAe,IAAA,CAAK,EAAE,MAAA,GAAM,QAAA,GAAQ,OAAA,EAAA,GAAS,MAC5C,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB;AAAA,MAChB,UAAU,MAAM;AAAA,MAEhB,UAAA,CAAW,GAAG,MAAe;AAC3B,QAAA,EAAQ,EAAiB,sBAAsB,EAC7C,UAAU,EACZ,CAAC,GAED,EAAY,IAAa,IAAI,IAAI;AAAA,MACnC;AAAA,MACA,IAAI;AAAA,MAXN,UAAA;AAAA,QAaE,gBAAA,EAAC,GAAD;AAAA,UACE,YAAY,gBAAA,EAAC,GAAD,EAAY,IAAI,EAAE,OAAO,eAAe,EAAI,CAAA;AAAA,UACxD,IAAI;AAAA,YAAE,GAAG;AAAA,YAAa,QAAQ;AAAA,UAAG;AAAA,UAEjC,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,YAAY;AAAA,cAAU,eAAe;AAAA,cAAO,KAAK;AAAA,YAAG;AAAA,YAAjE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,cAAM,MAAM;AAAA,cAAM,MAAM;AAAA,YAAK,CAAA,GAC7B,gBAAA,EAAC,GAAD;AAAA,cAAM,SAAQ;AAAA,cAAS,UAAA;AAAA,YAAY,CAAA,CAC9B;AAAA;QACS,CAAA;AAAA,QAClB,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,QACV,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,IAAI;AAAA,YACJ,GAAG;AAAA,UACL;AAAA,UAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,6BAA6B,EAAE,IAAI,EAAE,EAAE;AAAA,YAChD,UAAA,EAAO,IAAA,CAAK,EAAE,OAAA,GAAO,MAAA,EAAA,GAAQ,MAC5B,gBAAA,EAAC,GAAD;AAAA,cACE,SAAS;AAAA,cAET,SAAA,MAAe;AACb,gBAAA,EAAQ,EAAiB,qBAAqB;AAAA,kBAC5C,UAAU;AAAA,kBACV,WAAW;AAAA,gBACb,CAAC,GAED,EAAQ,GAAO,CAAI;AAAA,cACrB;AAAA,cACA,IAAI;AAAA,gBACF,aAAa;AAAA,gBACb,gBAAgB;AAAA,kBACd,QAAQ;AAAA,kBACR,yBAAyB;AAAA,gBAC3B;AAAA,cACF;AAAA,cAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,gBAAM,OAAM;AAAA,gBAAiB,SAAQ;AAAA,gBAClC,UAAA;AAAA,cACG,CAAA;AAAA,YACQ,GApBT,CAoBS,CACjB;AAAA,UACG,CAAA;AAAA,QACU,CAAA;AAAA,MACT;AAAA,IAtDJ,GAAA,CAsDI,CACZ;AAAA,EACI,CAAA;AAEX,GAEM,IAAA,CAAmB,OAChB;AAAA,EACL,QAAQ,aAAa,EAAM,QAAQ,SAAS,KAAA;AAAA,EAC5C,cAAc;AAAA,EACd,mBAAmB,EAAE,cAAc,MAAM;AAAA,EACzC,YAAY,EACV,SAAS,EACX;AAAA,EACA,0BAA0B;AAAA,IACxB,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AACF"}
+{"version":3,"file":"HelpByCategoryList.es.js","names":[],"sources":["../../../../src/help/components/requestsupport/HelpByCategoryList.tsx"],"sourcesContent":["import React from 'react'\n\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nimport { ANALYTICS_EVENTS, useEvent } from '../../../common'\nimport type { HelpCopy, HelpType, SelectedTopic } from '../../../core'\nimport { SupportPrompt } from '../SupportPrompt'\n\ninterface HelpByCategory {\n  description?: string\n  guid: string\n  icon: string\n  title: string\n  topics: Topic[]\n}\n\ninterface HelpByCategoryListProps {\n  copy: HelpCopy\n  helpByCategory: HelpByCategory[]\n  onClick: (label: string, type: HelpType) => void\n  onOpenCase: (topic: string) => void\n  onTopicSelect: (topic: SelectedTopic) => void\n}\n\ninterface Topic {\n  label: string\n  type: HelpType\n  topicKey?: string\n}\n\nexport const HelpByCategoryList: React.FC<HelpByCategoryListProps> = ({\n  copy,\n  helpByCategory,\n  onClick,\n  onOpenCase,\n  onTopicSelect,\n}) => {\n  const [expanded, setExpanded] = React.useState<number | null>(null)\n  const accordionRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n  const { onEvent } = useEvent()\n\n  return (\n    <Stack sx={{ flex: 1, gap: 12, p: 12 }}>\n      {helpByCategory.map(({ description, guid, icon, title, topics }, i) => (\n        <Accordion\n          disableGutters={true}\n          expanded={i === expanded}\n          key={i}\n          onChange={(_, isExpanded) => {\n            onEvent(ANALYTICS_EVENTS.HELP_EXPAND_CATEGORY, {\n              category: title,\n            })\n\n            setExpanded(isExpanded ? i : null)\n          }}\n          ref={(el: HTMLDivElement | null) => {\n            accordionRefs.current[i] = el\n          }}\n          slotProps={{\n            // Bring the newly expanded card fully into view once it has opened,\n            // so content near the bottom of the drawer isn't cropped.\n            transition: {\n              onEntered: () => accordionRefs.current[i]?.scrollIntoView(SCROLL_OPTIONS),\n            },\n          }}\n          sx={accordionStyles}\n        >\n          <AccordionSummary\n            expandIcon={<ExpandMore sx={{ color: 'text.primary' }} />}\n            sx={{ p: '14px 24px', height: 64 }}\n          >\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 12 }}>\n              <Icon name={icon} size={24} />\n              <Text variant=\"body1\">{title}</Text>\n            </Stack>\n          </AccordionSummary>\n          <Divider />\n          <AccordionDetails\n            sx={{\n              ml: 56,\n              p: 0,\n            }}\n          >\n            {description ? (\n              <Stack sx={{ gap: 12, py: 16, pr: 24 }}>\n                <Text color=\"text.secondary\" variant=\"subtitle2\">\n                  {description}\n                </Text>\n                {topics.length > 0 && (\n                  <List dense={true} disablePadding={true} sx={{ listStyleType: 'disc', pl: 20 }}>\n                    {topics.map(({ label }) => (\n                      <ListItem\n                        disableGutters={true}\n                        key={label}\n                        sx={{ display: 'list-item', py: 2 }}\n                      >\n                        <Text color=\"text.secondary\" variant=\"subtitle2\">\n                          {label}\n                        </Text>\n                      </ListItem>\n                    ))}\n                  </List>\n                )}\n              </Stack>\n            ) : (\n              <React.Fragment>\n                {topics.length > 0 && (\n                  <List sx={{ '& .MuiListItemButton-root': { pl: 6 } }}>\n                    {topics.map(({ label, type, topicKey }, i) => (\n                      <ListItemButton\n                        divider={true}\n                        key={i}\n                        onClick={() => {\n                          onEvent(ANALYTICS_EVENTS.HELP_CLICK_CATEGORY, {\n                            category: title,\n                            helpTopic: label,\n                          })\n\n                          if (topicKey) {\n                            onTopicSelect({\n                              guid,\n                              category: title,\n                              pageTitle: label,\n                              topicKey,\n                            })\n                            return\n                          }\n                          onClick(label, type)\n                        }}\n                        sx={{\n                          borderColor: 'neutral.light',\n                          '&:last-child': {\n                            border: 'none',\n                            borderBottomRightRadius: 7,\n                          },\n                        }}\n                      >\n                        <Text color=\"text.secondary\" variant=\"body2\">\n                          {label}\n                        </Text>\n                      </ListItemButton>\n                    ))}\n                  </List>\n                )}\n                {topics.every(({ topicKey }) => !topicKey) && (\n                  <SupportPrompt\n                    actionText={copy.request_support_footer_button}\n                    onAction={() => {\n                      onEvent(ANALYTICS_EVENTS.HELP_CLICK_OPEN_CASE, {\n                        source: 'category',\n                        topic: title,\n                      })\n\n                      onOpenCase(title)\n                    }}\n                    onPrompt={() =>\n                      onEvent(ANALYTICS_EVENTS.HELP_CLICK_NEED_MORE_ASSISTANCE, {\n                        source: 'category',\n                        topic: title,\n                      })\n                    }\n                    promptText={copy.need_more_assistance}\n                    sx={{ alignItems: 'flex-start', pb: 16, pt: 4 }}\n                  />\n                )}\n              </React.Fragment>\n            )}\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </Stack>\n  )\n}\n\nconst SCROLL_OPTIONS: ScrollIntoViewOptions = { behavior: 'smooth', block: 'nearest' }\n\nconst accordionStyles = (theme: any) => {\n  return {\n    border: `1px solid ${theme.palette.neutral?.light}`,\n    borderRadius: '8px',\n    '&:first-of-type': { borderRadius: '8px' },\n    '&:before': {\n      opacity: 0,\n    },\n    '& .MuiAccordion-region': {\n      borderBottomLeftRadius: 8,\n      borderBottomRightRadius: 8,\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/help/components/requestsupport/RequestSupport.d.ts

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
-import { HelpCopy } from '../../../core';
+import { HelpCopy, SelectedTopic } from '../../../core';
 interface RequestSupportProps {
+    caseTopic?: string;
     copy: HelpCopy;
     isOpen: boolean;
+    onTopicSelect: (topic: SelectedTopic) => void;
     onClose: () => void;
 }
 export declare const RequestSupport: React.FC<RequestSupportProps>;