@mx-cartographer/experiences 7.0.23-alpha.al4 → 7.0.23-alpha.al5

package/dist/trends/index.es.js

@@ -56,14 +56,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }
 ), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
   const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), d = i.useMemo(() => {
-    const c = Z(
+    const l = Z(
       n.start,
       s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
-    ), l = Z(
+    ), c = Z(
       n.end,
       s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
-    return `${c} - ${l}`;
+    return `${l} - ${c}`;
   }, [n, s]);
   return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
@@ -119,8 +119,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   height: a = "100dvh",
   sx: h = {}
 }) => {
-  const { onEvent: d } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [l, m] = i.useState([
-    { field: c, sort: "desc" }
+  const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = i.useState([
+    { field: l, sort: "desc" }
   ]), C = i.useMemo(() => Rt(o.start, o.end), [o]), u = [
     {
       field: "category",
@@ -176,7 +176,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: l } },
+      initialState: { sorting: { sortModel: c } },
       onRowClick: (r) => {
         s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
           ...A,
@@ -188,7 +188,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       },
       rows: b,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: l,
+      sortModel: c,
       sortingOrder: ["asc", "desc"]
     }
   ) });
@@ -200,12 +200,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   isOpen: t,
   onClose: s
 }) => {
-  const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: c, sortedTransactions: l } = ae(), [m, C] = i.useState(""), u = i.useMemo(
-    () => l.find((r) => r.guid === m),
-    [m, l]
+  const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ae(), [m, C] = i.useState(""), u = i.useMemo(
+    () => c.find((r) => r.guid === m),
+    [m, c]
   );
   i.useEffect(() => {
-    c({
+    l({
       accounts: h,
       dateRange: o,
       custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
@@ -229,14 +229,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Nt = M(Ht), Wt = ({ onBackClick: n, sx: o }) => {
-  const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: l, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
+  const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
   i.useEffect(() => {
     const S = () => ce(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
   }, []), i.useEffect(() => {
     p(d);
   }, [d]), i.useEffect(() => {
-    g && c(
+    g && l(
       T,
       u.start,
       u.end
@@ -247,7 +247,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   const te = i.useMemo(() => {
     if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
     const S = Ke(
-      l,
+      c,
       u.start,
       u.end
     ), W = L.length ? S.filter(
@@ -257,7 +257,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       stackedDatasets: W.filter(Ze),
       unstackedDatasets: W.filter(Qe)
     };
-  }, [l, L, u]), ne = (S, W) => {
+  }, [c, L, u]), ne = (S, W) => {
     x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
   }, oe = (S) => {
     const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
@@ -338,7 +338,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 N === "Table" && /* @__PURE__ */ e(
                   Ve,
                   {
-                    monthlyCategoryTotals: l,
+                    monthlyCategoryTotals: c,
                     onClickRow: se,
                     selectedCategory: L,
                     selectedDateRange: u
@@ -379,12 +379,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Vt = M(Ot), Gt = ({ onPrimaryCtaClick: n, sx: o }) => {
-  const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: c, selectedAccounts: l, setSelectedAccounts: m } = P();
+  const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = P();
   return i.useEffect(() => {
     m(t);
   }, [t]), i.useEffect(() => {
-    h && s(l).finally();
-  }, [h, l]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+    h && s(c).finally();
+  }, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
     it,
     {
       onPrimaryCtaClick: n,
@@ -403,10 +403,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   secondaryLabel: a,
   shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: d } = tt(), c = i.useRef(null), l = i.useRef(null), m = gt(Number(Math.abs(s)), {
+  const { availableWidth: d } = tt(), l = i.useRef(null), c = i.useRef(null), m = gt(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
+  }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
   return /* @__PURE__ */ f(
     _,
     {
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         /* @__PURE__ */ f(
           _,
           {
-            ref: l,
+            ref: c,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -460,7 +460,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 O,
                 {
-                  ref: c,
+                  ref: l,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                   children: /* @__PURE__ */ e(De, { children: C })
                 }
@@ -492,16 +492,16 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), d = {
     start: ct(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: c } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: C } = P();
+  }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = P();
   i.useEffect(() => {
     m(o);
   }, [o]), i.useEffect(() => {
-    C && a(l, d.start).then(() => {
+    C && a(c, d.start).then(() => {
       t(y.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
-  }, [C, l]);
+  }, [C, c]);
   const { spendingData: u, incomeData: b } = i.useMemo(
     () => ({
       spendingData: Le(s, d),
@@ -517,10 +517,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     pt,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: c.micro_primary_cta_label,
+      ctaLabel: l.micro_primary_cta_label,
       onCTAClick: k,
-      subHeader: I ? void 0 : c.micro_subheader,
-      title: c.title,
+      subHeader: I ? void 0 : l.micro_subheader,
+      title: l.title,
       children: I ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ f(
         _,
         {
@@ -534,9 +534,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               Se,
               {
                 percentage: E,
-                secondaryLabel: c.micro_secondary_label,
+                secondaryLabel: l.micro_secondary_label,
                 shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
-                title: c.spending_label,
+                title: l.spending_label,
                 totalAmount: g.y,
                 transactionType: "spending"
               }
@@ -545,9 +545,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               Se,
               {
                 percentage: w,
-                secondaryLabel: c.micro_secondary_label,
+                secondaryLabel: l.micro_secondary_label,
                 shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
-                title: c.income_label,
+                title: l.income_label,
                 totalAmount: p.y,
                 transactionType: "income"
               }
@@ -589,8 +589,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     isLastItem: h = !1,
     showDivider: d = !0
   }) => {
-    const { trends: c } = R(), { onEvent: l } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
-      a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
+    const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
+      a?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
         ...A,
         listItem: t
       });
@@ -612,18 +612,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }
 ), Pt = M(
   ({ availableHeight: n = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: c } = R(), { onEvent: l } = H(), [m, C] = i.useState(!1), u = d || h;
+    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [m, C] = i.useState(!1), u = d || h;
     i.useEffect(() => {
       const g = Math.floor(n / 64) - 1, T = s.length + t.length;
       g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >= T));
     }, [n]);
     const b = () => {
-      C(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
+      C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
         ...A
       });
     }, r = s.length + (m ? t.length : 0);
     return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(ft, { children: [
-      /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: c.categories }) }),
+      /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
       s.map((g, T) => /* @__PURE__ */ e(
         we,
         {
@@ -692,7 +692,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], $t = ({ onInsightCardClick: n }) => {
-  const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: c, sessionToken: l } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
+  const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
   i.useEffect(() => {
     m && d.loadBeats().finally(() => u(!0));
   }, [m]);
@@ -704,7 +704,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     {
       areBeatsLoading: d.isLoading,
       beats: T,
-      endpoint: c,
+      endpoint: l,
       logOutUser: p,
       onCardClick: E,
       showBorder: !0,
@@ -713,7 +713,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       showHeader: r,
       showIcon: !0,
       showWithMargin: !1,
-      token: l,
+      token: c,
       useDarkMode: b,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
@@ -754,12 +754,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   ) });
 }), Ut = M(({ onClose: n }) => {
-  const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: c } = ae(), [l, m] = i.useState(null);
+  const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = ae(), [c, m] = i.useState(null);
   if (!h)
     return null;
   const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Et(C, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
-    () => c.find((D) => D.guid === l),
-    [l, c]
+    () => l.find((D) => D.guid === c),
+    [c, l]
   ), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
     n?.(), t(y.TRENDS_CLICK_BACK, A);
   };
@@ -818,12 +818,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
 }, Zt = (n, o) => {
   const [t, s] = n, a = t, h = s ?? t, d = [];
   if (a) {
-    const c = a.reduce((l, m) => l + m.y, 0);
-    d.push({ label: o.income_label, amount: c });
+    const l = a.reduce((c, m) => c + m.y, 0);
+    d.push({ label: o.income_label, amount: l });
   }
   if (h) {
-    const c = h.reduce((l, m) => l + m.y, 0);
-    d.push({ label: o.spending_label, amount: c });
+    const l = h.reduce((c, m) => c + m.y, 0);
+    d.push({ label: o.spending_label, amount: l });
   }
   return d;
 }, Qt = ({
@@ -832,7 +832,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   selectedDateRange: t,
   totals: s
 }) => {
-  const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: c, isMobile: l, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = l || c ? E : m || C ? p : g;
+  const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = c || l ? E : m || C ? p : g;
   return i.useEffect(() => {
     const D = Math.max(n - w, o);
     T(D);
@@ -860,7 +860,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, qt = M(Qt), Jt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
-  const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: c } = K(), { visibleAccounts: l } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
+  const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
     isCopyLoaded: p,
     isInitialized: E,
     selectedAccounts: w,
@@ -868,11 +868,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     setSelectedAccounts: k
   } = P(), { trends: D } = R(), N = je(), x = d || h, [L, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
   i.useEffect(() => {
+    console.log("accounts: ", c);
     const v = () => le(window.innerHeight);
     return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
   }, []), i.useEffect(() => {
-    k(l);
-  }, [l]), i.useEffect(() => {
+    k(c);
+  }, [c]), i.useEffect(() => {
     E && m(w, r.start, r.end).then(() => {
       C(
         w,
@@ -927,20 +928,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   return !p || !L ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
     Ae,
     {
-      accountOptions: l,
+      accountOptions: c,
       calendarActions: { onRangeChanged: S },
       dateRange: r,
-      dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
+      dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
       onAccountsFilterClick: W,
       onBackClick: n,
       sx: t,
       title: D.title,
       children: [
-        l && L && /* @__PURE__ */ f(
+        c && L && /* @__PURE__ */ f(
           _,
           {
             sx: {
-              px: c ? 0 : 48
+              px: l ? 0 : 48
             },
             children: [
               /* @__PURE__ */ f(
@@ -948,7 +949,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                  sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
                       Oe,
@@ -1002,7 +1003,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             ]
           }
         ),
-        l === void 0 && /* @__PURE__ */ e(
+        c === void 0 && /* @__PURE__ */ e(
           xt,
           {
             header: D.zero_state_content_header,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.23-alpha.al4",
+  "version": "7.0.23-alpha.al5",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",