@zeniai/web-components 3.16.86 → 3.16.87

package/dist/CashbackDetailPage-DdFp7IoE.js

@@ -1,825 +0,0 @@
-import { u as S, j as t, aE as ee, A as J } from "./vendor-.pnpm-D5gxGIYo.js";
-import r from "@emotion/styled";
-import { a as u, a2 as D, S as o, F as $, t as w, dM as te, R as h, u as f, eX as oe, e as L, fK as re, aa as ie, ab as ae, D as d, ky as X, kz as Z, C as F, o as v, E as O, aE as ne, hu as z, K as se } from "./index-CHni923I.js";
-import { Rectangle as le, BarChart as de, CartesianGrid as ce, XAxis as he, YAxis as pe, Tooltip as me, Bar as ge } from "recharts";
-import { getZeniDateFromPeriod as b, dateNow as xe } from "@zeniai/client-epic-state";
-import H, { useState as ue, useEffect as we } from "react";
-import { I as ye } from "./InsightsSection-BppEncyT.js";
-import { H as fe, a as be } from "./common-Cq6zb9ND.js";
-const $e = ({ x: e, y: n, width: s, height: a, payload: i }) => {
-  const c = S();
-  return /* @__PURE__ */ t.jsx(
-    le,
-    {
-      fill: (i?.[0].payload).showTooltip === !0 ? c.colors.background : "transparent",
-      stroke: (i?.[0].payload).showTooltip === !0 ? c.colors.background : "transparent",
-      x: e,
-      y: n,
-      width: s,
-      height: a
-    }
-  );
-}, Y = u.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail.header, ve = u.getLocalizedStrings().dateFormat.visual.MMMMFormat, Ce = ({ active: e, payload: n, label: s }) => e === !0 && (n?.[0].payload).showTooltip === !0 ? /* @__PURE__ */ t.jsx(Se, { children: /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsxs("div", { children: [
-  /* @__PURE__ */ t.jsxs(E, { children: [
-    /* @__PURE__ */ t.jsx(V, { children: Y.month }),
-    " ",
-    /* @__PURE__ */ t.jsx(K, { children: b(s).format(ve) })
-  ] }),
-  /* @__PURE__ */ t.jsxs(E, { children: [
-    /* @__PURE__ */ t.jsx(V, { children: Y.cashback }),
-    /* @__PURE__ */ t.jsx(K, { children: D("0,0.[00]", {
-      amount: n?.[0].value ?? 0,
-      currencyCode: (n?.[0].payload).currencyCode,
-      currencySymbol: (n?.[0].payload).currencySymbol
-    }) })
-  ] })
-] }) }) }) : null, E = r.div`
-  display: flex;
-  gap: ${o.sp1};
-`, Se = r.div`
-  display: flex;
-  position: relative;
-  left: 11px;
-`, je = r.div`
-  flex: display;
-  opacity: 0.85;
-  border-radius: ${o.sp1};
-  flex-direction: column;
-  padding: ${o.sp2} 12px;
-  background-color: ${(e) => e.theme.colors.black};
-`, K = r($)`
-  color: ${(e) => e.theme.colors.brandColorPearl};
-  min-width: ${o.sp8};
-  display: flex;
-  justify-content: flex-end;
-`, V = r($)`
-  color: ${(e) => e.theme.colors.hero};
-  min-width: 107px;
-`, ke = H.memo(Ce), {
-  dateFormat: {
-    visual: { MMMYYFormat: Le, YYYYDashMMFormat: q }
-  },
-  common: { currency: I }
-} = u.getLocalizedStrings(), ze = ({
-  chartData: e,
-  customToolTipContent: n,
-  width: s,
-  height: a
-}) => {
-  const i = S();
-  return /* @__PURE__ */ t.jsx(Te, { width: s, height: a, children: /* @__PURE__ */ t.jsx(J, { children: ({ height: c, width: p }) => /* @__PURE__ */ t.jsxs(
-    de,
-    {
-      width: p,
-      height: c,
-      data: e,
-      barCategoryGap: "25%",
-      margin: {
-        top: 5,
-        left: 0,
-        bottom: 5
-      },
-      style: { display: "flex", flex: "1 1 auto" },
-      children: [
-        /* @__PURE__ */ t.jsx(
-          ce,
-          {
-            horizontal: !0,
-            vertical: !1,
-            strokeWidth: 0.5,
-            stroke: i.colors.grey3
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          he,
-          {
-            dataKey: "period",
-            type: "category",
-            axisLine: { stroke: i.colors.grey3, strokeWidth: 0.5 },
-            tickLine: !1,
-            tick: {
-              color: i.colors.hero,
-              ...w.extraSmallRegular.cssObject
-            },
-            tickFormatter: (m) => b(m).format(Le)
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          pe,
-          {
-            type: "number",
-            axisLine: !1,
-            tickLine: !1,
-            tick: {
-              color: i.colors.hero,
-              ...w.extraSmallRegular.cssObject
-            },
-            tickFormatter: (m) => te(
-              "0,0.[00]a",
-              m,
-              e?.[0].currencySymbol ?? I.currencySymbol
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          me,
-          {
-            cursor: /* @__PURE__ */ t.jsx($e, {}),
-            content: n
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          ge,
-          {
-            dataKey: "amount",
-            fill: i.colors.brandColorJadeDark,
-            barSize: 36
-          }
-        )
-      ]
-    }
-  ) }) });
-};
-function Me({
-  cashbackByPeriod: e,
-  width: n,
-  height: s
-}) {
-  const a = ee(
-    e,
-    (c) => b(c.period),
-    "asc"
-  ), i = Ie(a);
-  return /* @__PURE__ */ t.jsx(
-    ze,
-    {
-      chartData: i,
-      customToolTipContent: ({ active: c, payload: p, label: m }) => /* @__PURE__ */ t.jsx(ke, { active: c, payload: p, label: m }),
-      width: n,
-      height: s
-    }
-  );
-}
-const Pe = (e) => e.format(q), Ie = (e) => {
-  const n = e.map(
-    (i) => ({
-      ...i,
-      showTooltip: !0
-    })
-  ), s = e[e.length - 1];
-  let a = s?.period ?? xe().subtract(1, "M").format(q);
-  for (; n.length < 12; ) {
-    const i = {
-      amount: 0,
-      period: Pe(
-        b(a).add(1, "M")
-        //getting next month
-      ),
-      showTooltip: !1,
-      currencyCode: s?.currencyCode ?? I.currencyCode,
-      currencySymbol: s?.currencySymbol ?? I.currencySymbol
-    };
-    n.push(i), a = i.period;
-  }
-  return n;
-}, Te = r.div`
-  width: ${(e) => e.width}px;
-  height: ${(e) => e.height}px;
-  background: ${(e) => e.theme.colors.grey5};
-`, Q = u.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail.header, Re = {
-  key: "month",
-  value: Q.month,
-  sortOrder: "ascending",
-  width: new h(50, 50)
-}, De = {
-  key: "cashback",
-  value: Q.cashback,
-  sortOrder: "ascending",
-  width: new h(50, 50)
-}, U = () => [Re, De], y = {
-  headerLastColumnTopPadding: new h(d[0], d[4]),
-  headerLastColumnRightPadding: new h(d[3], d[11]),
-  headerLastColumnBottomPadding: new h(d[0], d[4]),
-  headerLastColumnLeftPadding: new h(d[3], d[11]),
-  headerHeight: new h(fe, be)
-};
-function Fe({
-  sortConfig: e,
-  onColumnSortConfigChanged: n
-}) {
-  const s = S(), a = f(), [i, c] = ue(
-    U()
-  );
-  we(() => {
-    const l = [...i];
-    for (const g of l)
-      g.key === e.sortKey ? g.sortOrder = e.sortOrder : g.sortOrder = "ascending";
-    c(l);
-  }, [e.sortKey, e.sortOrder]);
-  const p = (l, g) => {
-    let B = g;
-    e.sortKey === l && (B = g === "ascending" ? "descending" : "ascending"), n(l, B);
-  }, m = i.find((l) => l.key === e.sortKey) ?? i[0], j = (l) => i.find((g) => g.key === l)?.value ?? "", k = i.map((l) => l.key), W = u.getLocalizedStrings().spendManagement.chargeCard.cardList;
-  return a === "small" ? /* @__PURE__ */ t.jsxs(A, { windowSize: a, children: [
-    /* @__PURE__ */ t.jsxs(Be, { children: [
-      /* @__PURE__ */ t.jsx(Ee, { children: /* @__PURE__ */ t.jsx(Ye, {}) }),
-      /* @__PURE__ */ t.jsx(
-        oe,
-        {
-          title: W.sortBy,
-          placeholder: W.sortBy,
-          pickerValues: k,
-          valueToLabel: j,
-          selectedValue: e.sortKey,
-          onPickerSelectionChanged: (l) => {
-            p(
-              l,
-              "ascending"
-            );
-          },
-          optionTextStyle: w.smallRegular,
-          titleTextStyle: w.smallRegular,
-          titleColor: s.colors.primary,
-          selectedOptionColor: s.colors.hero,
-          optionBackgroundColor: s.colors.grey5,
-          downChevronVisible: !1,
-          backgroundColor: s.colors.grey4
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsxs(
-      Ae,
-      {
-        onClick: () => p(
-          m.key,
-          m.sortOrder
-        ),
-        "data-testid": L(
-          "cashback-list-header-mobile",
-          m.value
-        ),
-        children: [
-          /* @__PURE__ */ t.jsx($, { children: m.value }),
-          /* @__PURE__ */ t.jsx(
-            G,
-            {
-              sortDataValue: e.sortKey,
-              headerdata: m,
-              children: /* @__PURE__ */ t.jsx(N, {})
-            }
-          )
-        ]
-      }
-    )
-  ] }) : /* @__PURE__ */ t.jsx(A, { windowSize: a, children: i.map((l, g) => /* @__PURE__ */ t.jsxs(
-    He,
-    {
-      sortDataValue: e.sortKey,
-      actualDataValue: l.key,
-      wrapperWidth: l.width,
-      isLastItem: g === i.length - 1,
-      windowSize: a,
-      children: [
-        /* @__PURE__ */ t.jsxs(
-          Ve,
-          {
-            onClick: () => p(
-              l.key,
-              l.sortOrder
-            ),
-            "data-testid": L(
-              "cashback-list-header",
-              l.value
-            ),
-            children: [
-              /* @__PURE__ */ t.jsx($, { children: l.value }),
-              /* @__PURE__ */ t.jsx(
-                G,
-                {
-                  sortDataValue: e.sortKey,
-                  headerdata: l,
-                  children: /* @__PURE__ */ t.jsx(N, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          Ke,
-          {
-            sortDataValue: e.sortKey,
-            windowSize: a,
-            isVisible: e.sortKey === l.key && l.key !== "month",
-            children: /* @__PURE__ */ t.jsx(
-              We,
-              {
-                onClick: () => p("month", "ascending"),
-                "data-testid": L(
-                  "cashback-list-close-sort",
-                  l.key
-                )
-              }
-            )
-          }
-        )
-      ]
-    },
-    l.key
-  )) });
-}
-const Oe = H.memo(Fe), A = r($)`
-  top: ${o.sp0};
-  left: ${o.sp0};
-  min-height: ${(e) => y.headerHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => y.headerHeight.valuePx(e.windowSize)};
-  width: auto;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${(e) => `${y.headerLastColumnTopPadding.valuePx(
-  e.windowSize
-)} ${y.headerLastColumnRightPadding.valuePx(
-  e.windowSize
-)} ${y.headerLastColumnBottomPadding.valuePx(
-  e.windowSize
-)} ${y.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
-  background-color: ${(e) => e.theme.colors.grey4};
-  justify-content: space-between;
-  position: sticky;
-`, He = r.div`
-  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  padding-left: ${o.sp0};
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  left: ${o.sp0};
-  box-sizing: border-box;
-  overflow: hidden;
-  justify-content: ${(e) => e.isLastItem ? "flex-end" : "flex-start"};
-`, We = r(ae)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-`, G = r.div`
-  display: flex;
-  align-items: center;
-  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
-  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"}
-`, N = r(ie)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: inherit;
-`, Be = r.div`
-  gap: ${o.sp1};
-  display: flex;
-`, Ye = r(re)`
-  width: 12px;
-  height: 12px;
-  color: inherit;
-`, Ee = r.div`
-  margin-right: ${o.sp1};
-  display: flex;
-  align-items: center;
-`, Ke = r.div`
-  display: ${(e) => e.isVisible ? "flex" : "none"};
-  align-items: center;
-  padding-top: 2px;
-`, Ve = r.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ae = r.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, x = {
-  containerPaddingLeft: new h(d[3], d[4]),
-  containerPaddingRight: new h(d[3], d[4]),
-  containerPaddingTop: new h(d[2], 16),
-  containerPaddingBottom: new h(d[2], 16),
-  containerMarginLeft: new h(d[4], d[8]),
-  webkitLineClamp: new h(2, 1, 1, 1, 1)
-}, {
-  spendManagement: {
-    chargeCard: { cashbackDetail: Ge }
-  },
-  dateFormat: { visual: Ne }
-} = u.getLocalizedStrings(), _e = ({
-  cashbackPeriod: e,
-  isFirstItem: n,
-  isLastItem: s
-}) => {
-  const a = f(), i = U(), c = X(e.period), p = Z(c);
-  return /* @__PURE__ */ t.jsx(
-    qe,
-    {
-      windowSize: a,
-      isFirstItem: n,
-      isLastItem: s,
-      children: /* @__PURE__ */ t.jsx(Qe, { children: /* @__PURE__ */ t.jsxs(Ue, { children: [
-        /* @__PURE__ */ t.jsx(
-          et,
-          {
-            windowSize: a,
-            responsiveWidth: i[0].width,
-            children: /* @__PURE__ */ t.jsxs(tt, { windowSize: a, children: [
-              b(e.period).format(
-                Ne.MMMMYYYYFormat
-              ),
-              p ? /* @__PURE__ */ t.jsxs(Xe, { children: [
-                /* @__PURE__ */ t.jsx(Ze, {}),
-                /* @__PURE__ */ t.jsx(Je, { children: Ge.tillDate })
-              ] }) : null
-            ] })
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          ot,
-          {
-            windowSize: a,
-            responsiveWidth: i[1].width,
-            children: /* @__PURE__ */ t.jsx(rt, { windowSize: a, children: D("0,0.[00]", {
-              amount: e.amount,
-              currencyCode: e.currencyCode,
-              currencySymbol: e.currencySymbol
-            }) })
-          }
-        )
-      ] }) })
-    }
-  );
-}, Je = r(O)`
-  color: ${(e) => e.theme.colors.grey1};
-`, Xe = r.div`
-  display: flex;
-  align-items: center;
-`, Ze = r.div`
-  height: ${o.sp1};
-  width: ${o.sp1};
-  margin-right: ${o.sp2};
-  background-color: ${(e) => e.theme.colors.grey1};
-  border-radius: 50%;
-`, qe = r.div`
-  display: flex;
-  background-color: ${(e) => e.theme.colors.grey5};
-  padding-left: ${(e) => x.containerPaddingLeft.valuePx(e.windowSize)};
-  padding-right: ${(e) => x.containerPaddingRight.valuePx(e.windowSize)};
-  padding-top: ${(e) => x.containerPaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => x.containerPaddingBottom.valuePx(e.windowSize)};
-
-  border-top-right-radius: ${(e) => e.isFirstItem ? o.sp2 : o.sp0};
-  border-top-left-radius: ${(e) => e.isFirstItem ? o.sp2 : o.sp0};
-  border-bottom-left-radius: ${(e) => e.isLastItem ? o.sp2 : o.sp0};
-  border-bottom-left-radius: ${(e) => e.isLastItem ? o.sp2 : o.sp0};
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-top-width: ${(e) => e.isFirstItem ? "1px" : o.sp0};
-  border-bottom-width: ${(e) => e.isLastItem ? "1px" : o.sp0};
-  box-shadow: ${o.sp0} 1px 2px ${o.sp0} ${F.boxShadowElevation};
-  margin-right: ${(e) => x.containerMarginLeft.valuePx(e.windowSize)};
-  margin-left: ${(e) => x.containerMarginLeft.valuePx(e.windowSize)};
-  box-sizing: border-box;
-  align-items: center;
-`, Qe = r.div`
-  display: block;
-  width: 100%;
-`, Ue = r.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`, et = r.div`
-  display: flex;
-  flex-direction: column;
-  column-gap: 12px;
-  align-items: flex-start;
-  width: ${(e) => `calc(${e.responsiveWidth.valuePercentage(e.windowSize)} - ${o.sp7})`};
-`, tt = r(v)`
-  margin-right: ${o.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  flex-grow: 1;
-  -webkit-line-clamp: ${(e) => x.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: capitalize;
-  display: flex;
-  gap: ${o.sp2};
-`, ot = r(v)`
-  display: flex;
-  flex-direction: column;
-  align-items: ${(e) => e.windowSize === "small" || e.windowSize === "medium-compact" ? "flex-start" : "center"};
-  color: ${(e) => e.theme.colors.hero};
-  justify-content: flex-end;
-  align-items: flex-start;
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-`, rt = r(v)`
-  color: ${(e) => e.theme.colors.hero};
-  flex-grow: 1;
-  -webkit-line-clamp: ${(e) => x.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  display: flex;
-  justify-content: end;
-`, T = {
-  containerMarginLeft: new h(d[3], d[8]),
-  webkitLineClamp: new h(2, 2, 1, 1, 1)
-}, {
-  spendManagement: {
-    chargeCard: { cashbackDetail: it }
-  },
-  dateFormat: { visual: at }
-} = u.getLocalizedStrings(), nt = ({
-  cashbackPeriod: e,
-  isFirstItem: n,
-  isLastItem: s
-}) => {
-  const a = f(), i = X(e.period), c = Z(i);
-  return /* @__PURE__ */ t.jsx(
-    ct,
-    {
-      windowSize: a,
-      isFirstItem: n,
-      isLastItem: s,
-      children: /* @__PURE__ */ t.jsx(ht, { children: /* @__PURE__ */ t.jsxs(pt, { children: [
-        /* @__PURE__ */ t.jsx(gt, { children: /* @__PURE__ */ t.jsxs(mt, { windowSize: a, children: [
-          b(e.period).format(
-            at.MMMMYYYYFormat
-          ),
-          c ? /* @__PURE__ */ t.jsxs(lt, { children: [
-            /* @__PURE__ */ t.jsx(dt, {}),
-            /* @__PURE__ */ t.jsx(st, { children: it.tillDate })
-          ] }) : null
-        ] }) }),
-        /* @__PURE__ */ t.jsx(xt, { children: /* @__PURE__ */ t.jsx(ut, { children: D("0,0.[00]", {
-          amount: e.amount,
-          currencyCode: e.currencyCode,
-          currencySymbol: e.currencySymbol
-        }) }) })
-      ] }) })
-    }
-  );
-}, st = r(O)`
-  color: ${(e) => e.theme.colors.grey1};
-`, lt = r.div`
-  display: flex;
-  align-items: center;
-`, dt = r.div`
-  height: ${o.sp1};
-  width: ${o.sp1};
-  margin-right: ${o.sp2};
-  background-color: ${(e) => e.theme.colors.grey1};
-  border-radius: 50%;
-`, ct = r.div`
-  display: flex;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: ${(e) => ` 1px solid ${e.theme.colors.grey3}`};
-  border-top-width: ${(e) => e.isFirstItem ? "1px" : o.sp0};
-  border-bottom-width: ${(e) => e.isLastItem ? "1px" : o.sp0};
-  padding: ${o.sp3};
-  box-shadow: ${o.sp0} 1px 2px ${o.sp0} ${F.boxShadowElevation};
-  border-top-right-radius: ${(e) => e.isFirstItem ? o.sp2 : o.sp0};
-  border-top-left-radius: ${(e) => e.isFirstItem ? o.sp2 : o.sp0};
-  border-bottom-left-radius: ${(e) => e.isLastItem ? o.sp2 : o.sp0};
-  border-bottom-left-radius: ${(e) => e.isLastItem ? o.sp2 : o.sp0};
-  margin-right: ${(e) => T.containerMarginLeft.valuePx(e.windowSize)};
-  margin-left: ${(e) => T.containerMarginLeft.valuePx(e.windowSize)};
-`, ht = r.div`
-  display: block;
-  width: 100%;
-`, pt = r.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`, mt = r(v)`
-  margin-right: ${o.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  flex-grow: 1;
-  display: -webkit-box;
-  -webkit-line-clamp: ${(e) => T.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: capitalize;
-  display: flex;
-  gap: ${o.sp2};
-`, gt = r.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${o.sp2};
-`, xt = r.div`
-  display: flex;
-  flex-direction: column;
-`, ut = r(O)`
-  color: ${(e) => e.theme.colors.hero};
-`, _ = {
-  separatorMarginLeftRight: new h(d[3], d[8])
-}, wt = ({
-  cashbackByPeriod: e,
-  uiState: n,
-  onColumnSortConfigChanged: s
-}) => {
-  const a = f();
-  return /* @__PURE__ */ t.jsxs(bt, { children: [
-    /* @__PURE__ */ t.jsx(
-      Oe,
-      {
-        onColumnSortConfigChanged: s,
-        sortConfig: {
-          sortKey: n.sortKey,
-          sortOrder: n.sortOrder
-        }
-      }
-    ),
-    /* @__PURE__ */ t.jsx(ft, { children: e.map((i, c) => /* @__PURE__ */ t.jsxs(H.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(
-        yt,
-        {
-          cashbackPeriod: i,
-          isFirstItem: c === 0,
-          isLastItem: c === e.length - 1
-        }
-      ),
-      c === e.length - 1 ? null : /* @__PURE__ */ t.jsx($t, { windowSize: a })
-    ] }, i.period)) })
-  ] });
-}, yt = ({
-  cashbackPeriod: e,
-  isFirstItem: n,
-  isLastItem: s
-}) => {
-  const i = f() === "small" ? nt : _e;
-  return /* @__PURE__ */ t.jsx(
-    i,
-    {
-      cashbackPeriod: e,
-      isFirstItem: n,
-      isLastItem: s
-    }
-  );
-}, ft = r.div``, bt = r.div`
-  display: block;
-  height: 100%;
-`, $t = r.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-  margin-left: ${(e) => _.separatorMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => _.separatorMarginLeftRight.valuePx(e.windowSize)};
-`, R = {
-  pageContentPaddingLeftRight: new h(d[3], d[8]),
-  cashbackSummaryContainerGap: new h(d[3], 96)
-}, C = u.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail, Ot = ({
-  insightsData: e,
-  cashbackByPeriod: n,
-  uiState: s,
-  cashbackSummary: a,
-  onBackClick: i,
-  onColumnSortConfigChanged: c
-}) => {
-  const p = S(), m = f();
-  return /* @__PURE__ */ t.jsxs(Lt, { children: [
-    /* @__PURE__ */ t.jsx(
-      ne,
-      {
-        title: C.title,
-        showBackButton: !0,
-        showMenuIcon: !1,
-        style: { zIndex: 3 },
-        onBackClick: i,
-        backgroundColor: p.colors.grey5,
-        source: "CashbackDetailPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(vt, { windowSize: m, children: [
-      /* @__PURE__ */ t.jsxs(Ct, { windowSize: m, children: [
-        /* @__PURE__ */ t.jsxs(M, { children: [
-          /* @__PURE__ */ t.jsx(P, { children: C.totalEarned }),
-          /* @__PURE__ */ t.jsx(
-            z,
-            {
-              amount: a.cashbackEarned,
-              style: { color: p.colors.brandColorJadeDark },
-              decimalStyles: w.largeSemiBold.cssObject
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t.jsxs(M, { children: [
-          /* @__PURE__ */ t.jsx(P, { children: C.redeemed }),
-          /* @__PURE__ */ t.jsx(
-            z,
-            {
-              amount: a.cashbackRedeemed,
-              style: { color: p.colors.brandColorOpalDark },
-              decimalStyles: w.largeSemiBold.cssObject
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t.jsxs(M, { children: [
-          /* @__PURE__ */ t.jsx(P, { children: C.available }),
-          /* @__PURE__ */ t.jsx(
-            z,
-            {
-              amount: a.cashbackAvailable,
-              style: { color: p.colors.brandColorGoldDark },
-              decimalStyles: w.largeSemiBold.cssObject
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsx(St, { children: /* @__PURE__ */ t.jsx(J, { children: ({ height: j, width: k }) => /* @__PURE__ */ t.jsx(
-        Me,
-        {
-          cashbackByPeriod: n,
-          width: k,
-          height: j
-        }
-      ) }) }),
-      /* @__PURE__ */ t.jsx(jt, { children: /* @__PURE__ */ t.jsx(
-        ye,
-        {
-          insights: [{ ...e }],
-          summaryTextStyles: {
-            fontWeight: se.regular,
-            color: p.colors.primary
-          }
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ t.jsx(kt, { children: /* @__PURE__ */ t.jsx(
-      wt,
-      {
-        cashbackByPeriod: n,
-        uiState: s,
-        onColumnSortConfigChanged: c
-      }
-    ) })
-  ] });
-}, vt = r.div`
-  position: relative;
-  box-shadow: ${F.dropShadowNormalLight} 2px 2px ${o.sp1};
-  background-color: ${(e) => e.theme.colors.grey5};
-  padding-left: ${(e) => R.pageContentPaddingLeftRight.valuePx(e.windowSize)};
-  padding-right: ${(e) => R.pageContentPaddingLeftRight.valuePx(e.windowSize)};
-`, M = r.div`
-  min-width: 103px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`, P = r(v)`
-  display: flex;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-`, Ct = r.div`
-  display: flex;
-  gap: ${(e) => R.cashbackSummaryContainerGap.valuePx(e.windowSize)};
-  justify-content: center;
-  margin-top: ${o.sp3};
-`, St = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: 242px;
-  margin: ${o.sp5} ${o.sp0};
-`, jt = r.div`
-  margin-bottom: ${o.sp5};
-`, kt = r.div`
-  background-color: ${(e) => e.theme.colors.grey4};
-  padding-top: ${o.sp4};
-  padding-bottom: ${o.sp8};
-  height: 100%;
-`, Lt = r.div`
-  display: flex;
-  min-height: ${`calc(100vh - ${o.sp9})`};
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`;
-export {
-  Ot as default
-};