@zeniai/web-components 3.17.21 → 3.17.23

package/dist/CashbackDetailPage-C-0eaJVF.js

@@ -0,0 +1,825 @@
+import { u as S, j as t, aE as ee, A as X } from "./vendor-.pnpm-UYinI_7q.js";
+import r from "@emotion/styled";
+import { a2 as D, S as o, F as $, a as u, t as w, dX as te, R as h, u as f, eX as oe, e as L, fL as re, aa as ie, ab as ae, D as d, kA as J, kB as Z, C as F, o as v, E as O, aE as ne, hv as z, K as se } from "./index-DOFSm78O.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-Bt4Z2mKl.js";
+import { H as fe, a as be } from "./common-B3YyKemv.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(K, { children: Y.month }),
+    " ",
+    /* @__PURE__ */ t.jsx(V, { children: b(s).format(ve) })
+  ] }),
+  /* @__PURE__ */ t.jsxs(E, { children: [
+    /* @__PURE__ */ t.jsx(K, { children: Y.cashback }),
+    /* @__PURE__ */ t.jsx(V, { 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};
+`, V = r($)`
+  color: ${(e) => e.theme.colors.brandColorPearl};
+  min-width: ${o.sp8};
+  display: flex;
+  justify-content: flex-end;
+`, K = 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(X, { 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(
+          Ke,
+          {
+            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(
+          Ve,
+          {
+            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;
+`, Ve = r.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+`, Ke = 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 = J(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(Je, { children: [
+                /* @__PURE__ */ t.jsx(Ze, {}),
+                /* @__PURE__ */ t.jsx(Xe, { 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
+            }) })
+          }
+        )
+      ] }) })
+    }
+  );
+}, Xe = r(O)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Je = 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 = J(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(X, { 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
+};