@adyen/adyen-platform-experience-web 1.4.1 → 1.5.0

package/dist/es/components/external/CapitalOffer/components/CapitalOfferSummary/CapitalOfferSummary.js

@@ -1,52 +1,52 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import _ from "../../../../../core/Context/useCoreContext.js";
-import { useMemo as c, useCallback as v } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { getExpectedRepaymentDate as x, calculateMaximumRepaymentPeriodInMonths as I, getPaymentRatePercentage as M } from "../utils/utils.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import I from "../../../../../core/Context/useCoreContext.js";
+import { useMemo as u, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { getExpectedRepaymentDate as M, calculateMaximumRepaymentPeriodInMonths as k, getPercentage as v } from "../utils/utils.js";
 import n from "../../../../internal/Typography/Typography.js";
-import { TypographyElement as m, TypographyVariant as l } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as l, TypographyElement as m } from "../../../../internal/Typography/types.js";
 /* empty css                         */
 import y from "../../../../internal/Button/Button.js";
 import { ButtonVariant as C } from "../../../../internal/Button/types.js";
-import k from "../../../../../hooks/useMutation/useMutation.js";
-import { Tooltip as D } from "../../../../internal/Tooltip/Tooltip.js";
+import D from "../../../../../hooks/useMutation/useMutation.js";
+import { Tooltip as N } from "../../../../internal/Tooltip/Tooltip.js";
 import { AlertTypeOption as E } from "../../../../internal/Alert/types.js";
 import { Alert as b } from "../../../../internal/Alert/Alert.js";
 import { CapitalErrorMessageDisplay as F } from "../utils/CapitalErrorMessageDisplay.js";
 import L from "classnames";
-import { CAPITAL_REPAYMENT_FREQUENCY as P } from "../../../../constants.js";
+import { CAPITAL_REPAYMENT_FREQUENCY as R } from "../../../../constants.js";
 import { CapitalOfferLegalNotice as S } from "../CapitalOfferLegalNotice/CapitalOfferLegalNotice.js";
-import W from "../../../../internal/InfoBox/InfoBox.js";
-import q from "../../../../internal/StructuredList/StructuredList.js";
-import { Icon as w } from "../../../../internal/Icon/Icon.js";
-import { useConfigContext as Y } from "../../../../../core/ConfigContext/context.js";
+import w from "../../../../internal/InfoBox/InfoBox.js";
+import B from "../../../../internal/StructuredList/StructuredList.js";
+import { Icon as W } from "../../../../internal/Icon/Icon.js";
+import { useConfigContext as q } from "../../../../../core/ConfigContext/context.js";
 import { EMPTY_OBJECT as H } from "../../../../../utils/value/constants.js";
-const B = ["30_013"], ce = ({
-  grantOffer: t,
+const Y = ["30_013"], ce = ({
+  grantOffer: a,
   onBack: h,
-  onFundsRequest: u,
-  onContactSupport: p
+  onFundsRequest: p,
+  onContactSupport: d
 }) => {
-  const { i18n: e } = _(), f = c(() => {
-    const r = x(t.expectedRepaymentPeriodDays);
+  const { i18n: e } = I(), f = u(() => {
+    const r = M(a.expectedRepaymentPeriodDays);
     return r ? e.date(r, { month: "long" }) : null;
-  }, [t, e]), { requestFunds: N } = Y().endpoints, o = k({
-    queryFn: N,
+  }, [a, e]), { requestFunds: T } = q().endpoints, o = D({
+    queryFn: T,
     options: {
-      onSuccess: (r) => u == null ? void 0 : u(r)
+      onSuccess: (r) => p == null ? void 0 : p(r)
     }
-  }), A = v(
+  }), A = P(
     (r) => {
       o.mutate(H, { path: { grantOfferId: r } });
     },
     [o]
-  ), R = v(() => {
-    t.id && A(t.id);
-  }, [t.id, A]), s = c(
-    () => I(t.maximumRepaymentPeriodDays),
-    [t.maximumRepaymentPeriodDays]
-  ), i = c(() => {
+  ), _ = P(() => {
+    a.id && A(a.id);
+  }, [a.id, A]), s = u(
+    () => k(a.maximumRepaymentPeriodDays),
+    [a.maximumRepaymentPeriodDays]
+  ), i = u(() => {
     const r = o.error ? o.error : null;
-    if (r && B.includes(r.errorCode))
+    if (r && Y.includes(r.errorCode))
       switch (r.errorCode) {
         case "30_013":
           return {
@@ -61,62 +61,65 @@ const B = ["30_013"], ce = ({
           };
       }
     return null;
-  }, [e, o.error]), T = c(() => {
+  }, [e, o.error]), x = u(() => {
     const r = [
       {
         key: "capital.fees",
-        value: e.amount(t.feesAmount.value, t.feesAmount.currency)
+        value: e.amount(a.feesAmount.value, a.feesAmount.currency)
       },
       {
         key: "capital.totalRepaymentAmount",
-        value: e.amount(t.totalAmount.value, t.totalAmount.currency)
+        value: e.amount(a.totalAmount.value, a.totalAmount.currency)
       },
       {
         key: "capital.repaymentThreshold",
-        value: e.amount(t.thresholdAmount.value, t.thresholdAmount.currency)
+        value: e.amount(a.thresholdAmount.value, a.thresholdAmount.currency)
       },
       {
         key: "capital.dailyRepaymentRate",
-        value: e.get("capital.xPercent", { values: { percentage: M(t.repaymentRate) } })
+        value: e.get("capital.xPercent", { values: { percentage: v(a.repaymentRate) } })
       },
       {
         key: "capital.expectedRepaymentPeriod",
-        value: e.get("capital.xDays", { values: { days: t.expectedRepaymentPeriodDays } })
+        value: e.get("capital.xDays", { values: { days: a.expectedRepaymentPeriodDays } })
       },
       { key: "account", value: e.get("capital.primaryAccount") }
     ];
     return s && r.splice(4, 0, {
       key: "capital.maximumRepaymentPeriod",
       value: s === 1 ? e.get("capital.oneMonth") : e.get("capital.xMonths", { values: { months: s } })
+    }), a.aprBasisPoints && r.splice(1, 0, {
+      key: "capital.annualPercentageRate",
+      value: e.get("capital.xPercent", { values: { percentage: v(a.aprBasisPoints) } })
     }), r;
-  }, [t, e, s]);
-  return !i && o.error ? /* @__PURE__ */ a(F, { error: o.error, onBack: h, onContactSupport: p }) : /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-summary", children: [
-    /* @__PURE__ */ a(W, { className: "adyen-pe-capital-offer-summary__grant-summary", children: [
-      /* @__PURE__ */ a(n, { el: m.PARAGRAPH, variant: l.BODY, children: [
+  }, [a, e, s]);
+  return !i && o.error ? /* @__PURE__ */ t(F, { error: o.error, onBack: h, onContactSupport: d }) : /* @__PURE__ */ t("div", { className: "adyen-pe-capital-offer-summary", children: [
+    /* @__PURE__ */ t(w, { className: "adyen-pe-capital-offer-summary__grant-summary", children: [
+      /* @__PURE__ */ t(n, { el: m.PARAGRAPH, variant: l.BODY, children: [
         e.get("capital.youAreRequestingFundingOf"),
         " ",
-        /* @__PURE__ */ a("strong", { children: `${e.amount(t.grantAmount.value, t.grantAmount.currency, { minimumFractionDigits: 0 })}.` })
+        /* @__PURE__ */ t("strong", { children: `${e.amount(a.grantAmount.value, a.grantAmount.currency, { minimumFractionDigits: 0 })}.` })
       ] }),
-      /* @__PURE__ */ a(n, { el: m.PARAGRAPH, variant: l.CAPTION, children: e.get("capital.youWillNeedToRepayAMinimumOfXEveryXDaysToPayOffTheFunds", {
+      /* @__PURE__ */ t(n, { el: m.PARAGRAPH, variant: l.CAPTION, children: e.get("capital.youWillNeedToRepayAMinimumOfXEveryXDaysToPayOffTheFunds", {
         values: {
-          amount: e.amount(t.thresholdAmount.value, t.thresholdAmount.currency),
-          days: P,
+          amount: e.amount(a.thresholdAmount.value, a.thresholdAmount.currency),
+          days: R,
           date: f ?? ""
         }
       }) })
     ] }),
-    /* @__PURE__ */ a(
-      q,
+    /* @__PURE__ */ t(
+      B,
       {
         classNames: "adyen-pe-capital-offer-summary__details",
-        renderLabel: (r, d) => d === "capital.repaymentThreshold" ? /* @__PURE__ */ a(
-          D,
+        renderLabel: (r, c) => c === "capital.repaymentThreshold" ? /* @__PURE__ */ t(
+          N,
           {
             isContainerHovered: !0,
             content: e.get("capital.minimumRepaymentToRepayTheFinancingOnTime", {
-              values: { days: P }
+              values: { days: R }
             }),
-            children: /* @__PURE__ */ a("span", { children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
               n,
               {
                 className: "adyen-pe-capital-offer-summary__list-label",
@@ -126,7 +129,15 @@ const B = ["30_013"], ce = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ a(
+        ) : c === "capital.annualPercentageRate" ? /* @__PURE__ */ t(N, { isContainerHovered: !0, content: e.get("capital.annualPercentageRateIsTheCostOfBorrowingForALoan"), children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
+          n,
+          {
+            className: "adyen-pe-capital-offer-summary__list-label",
+            el: m.SPAN,
+            variant: l.CAPTION,
+            children: r
+          }
+        ) }) }) : /* @__PURE__ */ t(
           n,
           {
             className: "adyen-pe-capital-offer-summary__list-label",
@@ -135,9 +146,9 @@ const B = ["30_013"], ce = ({
             children: r
           }
         ),
-        renderValue: (r, d) => {
-          const g = d === "account" && o.error && i && i.errorCode === "30_013";
-          return /* @__PURE__ */ a(
+        renderValue: (r, c) => {
+          const g = c === "account" && o.error && i && i.errorCode === "30_013";
+          return /* @__PURE__ */ t(
             n,
             {
               className: L({
@@ -147,34 +158,34 @@ const B = ["30_013"], ce = ({
               variant: l.CAPTION,
               stronger: !0,
               children: [
-                g ? /* @__PURE__ */ a(w, { name: "warning-filled", "data-testid": "primary-account-warning-icon" }) : null,
+                g ? /* @__PURE__ */ t(W, { name: "warning-filled", "data-testid": "primary-account-warning-icon" }) : null,
                 r
               ]
             }
           );
         },
-        items: T
+        items: x
       }
     ),
-    i && /* @__PURE__ */ a(
+    i && /* @__PURE__ */ t(
       b,
       {
         className: "adyen-pe-capital-offer-summary__error-alert",
         type: E.WARNING,
         title: i.title,
         description: i.message,
-        children: p ? /* @__PURE__ */ a(y, { className: "adyen-pe-capital-offer-summary__error-alert-button", onClick: p, children: e.get("contactSupport") }) : null
+        children: d ? /* @__PURE__ */ t(y, { className: "adyen-pe-capital-offer-summary__error-alert-button", onClick: d, children: e.get("contactSupport") }) : null
       }
     ),
-    /* @__PURE__ */ a(S, {}),
-    /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-summary__buttons", children: [
-      o.error && !i ? null : /* @__PURE__ */ a(y, { variant: C.SECONDARY, onClick: h, children: e.get("back") }),
-      /* @__PURE__ */ a(
+    /* @__PURE__ */ t(S, {}),
+    /* @__PURE__ */ t("div", { className: "adyen-pe-capital-offer-summary__buttons", children: [
+      o.error && !i ? null : /* @__PURE__ */ t(y, { variant: C.SECONDARY, onClick: h, children: e.get("back") }),
+      /* @__PURE__ */ t(
         y,
         {
           variant: C.PRIMARY,
           state: o.isLoading ? "loading" : void 0,
-          onClick: R,
+          onClick: _,
           disabled: o.isLoading || !!o.error || !!o.data,
           children: e.get(o.isLoading ? "capital.requesting" : "capital.requestFunds")
         }

package/dist/es/components/external/CapitalOffer/components/utils/utils.js

@@ -1,19 +1,19 @@
-import { DAY_MS as u } from "../../../../internal/Calendar/calendar/constants.js";
-import { parseDate as c } from "../../../../../utils/datetime/main.js";
-const i = (e, a = 0) => new Date(new Date(e).setUTCHours(0, 0, 0, 0) + Math.floor(a) * u), d = (e) => c(i(/* @__PURE__ */ new Date(), e)), l = (e) => e ? Math.ceil(e / 30) : null, f = (e, a) => {
-  let t, n;
-  function o(...r) {
-    clearTimeout(t), n = r, t = setTimeout(() => {
-      e(n), n = void 0;
-    }, a);
+import { DAY_MS as c } from "../../../../internal/Calendar/calendar/constants.js";
+import { parseDate as i } from "../../../../../utils/datetime/main.js";
+const u = (e, n = 0) => new Date(new Date(e).setUTCHours(0, 0, 0, 0) + Math.floor(n) * c), l = (e) => i(u(/* @__PURE__ */ new Date(), e)), d = (e) => e ? Math.ceil(e / 30) : null, p = (e, n) => {
+  let t, o;
+  function r(...a) {
+    clearTimeout(t), o = a, t = setTimeout(() => {
+      e(o), o = void 0;
+    }, n);
   }
-  return o.cancel = () => {
-    t && (clearTimeout(t), t = void 0, n = void 0);
-  }, o;
-}, p = (e) => e / 100;
+  return r.cancel = () => {
+    t && (clearTimeout(t), t = void 0, o = void 0);
+  }, r;
+}, f = (e) => e / 100;
 export {
-  l as calculateMaximumRepaymentPeriodInMonths,
-  f as debounce,
-  d as getExpectedRepaymentDate,
-  p as getPaymentRatePercentage
+  d as calculateMaximumRepaymentPeriodInMonths,
+  p as debounce,
+  l as getExpectedRepaymentDate,
+  f as getPercentage
 };

package/dist/es/components/external/CapitalOverview/components/AccountDetails/AccountDetail.js

@@ -2,7 +2,7 @@ import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import c from "../../../../internal/CopyText/CopyText.js";
 import d from "../../../../../core/Context/useCoreContext.js";
 import t from "../../../../internal/Typography/Typography.js";
-import { TypographyElement as a, TypographyVariant as i } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as a, TypographyElement as i } from "../../../../internal/Typography/types.js";
 const x = ({
   className: p,
   content: e,
@@ -13,8 +13,8 @@ const x = ({
 }) => {
   const { i18n: s } = d();
   return /* @__PURE__ */ r("div", { className: p, children: [
-    /* @__PURE__ */ r("dt", { className: m, children: /* @__PURE__ */ r(t, { el: a.SPAN, variant: i.CAPTION, children: s.get(n) }) }),
-    /* @__PURE__ */ r("dd", { className: l, children: o ? /* @__PURE__ */ r(c, { buttonLabel: e, textToCopy: o, showCopyTextTooltip: !1, type: "Text" }) : /* @__PURE__ */ r(t, { el: a.SPAN, variant: i.BODY, children: e }) })
+    /* @__PURE__ */ r("dt", { className: m, children: /* @__PURE__ */ r(t, { el: i.SPAN, variant: a.CAPTION, children: s.get(n) }) }),
+    /* @__PURE__ */ r("dd", { className: l, children: o ? /* @__PURE__ */ r(c, { buttonLabel: e, textToCopy: o, showCopyTextTooltip: !1, type: "Text" }) : /* @__PURE__ */ r(t, { el: i.SPAN, variant: a.BODY, children: e }) })
   ] });
 };
 export {

package/dist/es/components/external/CapitalOverview/components/AccountDetails/AccountDetails.js

@@ -3,7 +3,7 @@ import A from "classnames";
 import { useMemo as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { AccountDetail as F } from "./AccountDetail.js";
 import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
-import { getAccountFieldTranslationKey as y, getAccountFieldFormattedValue as S, getAccountFieldTextToCopy as b } from "./utils.js";
+import { getAccountFieldTextToCopy as y, getAccountFieldFormattedValue as S, getAccountFieldTranslationKey as b } from "./utils.js";
 /* empty css                    */
 const o = "adyen-pe-capital-account-details", n = {
   detail: `${o}__detail`,
@@ -22,9 +22,9 @@ const o = "adyen-pe-capital-account-details", n = {
         className: n.detail,
         contentClassName: n.detailContent,
         labelClassName: n.detailLabel,
-        label: y(t),
+        label: b(t),
         content: S(t, e),
-        textToCopy: b(t, e)
+        textToCopy: y(t, e)
       }
     ) }, t) : null;
   }) });

package/dist/es/components/external/CapitalOverview/components/AccountDetails/utils.js

@@ -16,7 +16,7 @@ const n = (e, t = !0) => {
     default:
       return !1;
   }
-}, u = (e, t) => r(e) ? t : void 0, o = (e, t) => {
+}, o = (e, t) => r(e) ? t : void 0, u = (e, t) => {
   switch (e) {
     case "iban":
       return t && n(t);
@@ -40,7 +40,7 @@ const n = (e, t = !0) => {
   }
 };
 export {
-  o as getAccountFieldFormattedValue,
-  u as getAccountFieldTextToCopy,
+  u as getAccountFieldFormattedValue,
+  o as getAccountFieldTextToCopy,
   s as getAccountFieldTranslationKey
 };

package/dist/es/components/external/CapitalOverview/components/GrantAction/GrantAction.js

@@ -5,11 +5,11 @@ import F from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
 import { GRANT_ACTION_CLASS_NAMES as l } from "./constants.js";
 /* empty css                 */
 import { Alert as p } from "../../../../internal/Alert/Alert.js";
-import { AlertTypeOption as f } from "../../../../internal/Alert/types.js";
+import { AlertTypeOption as d } from "../../../../internal/Alert/types.js";
 import { useFetch as S } from "../../../../../hooks/useFetch.js";
 import "../../../../../external/preact/compat/dist/compat.module.js";
 import { getTopWindowHref as _, setTopWindowHref as b } from "./utils.js";
-import d from "../../../../internal/Button/Button.js";
+import f from "../../../../internal/Button/Button.js";
 import { DATE_FORMAT_CAPITAL_OVERVIEW as I } from "../../../../../constants/dateFormats.js";
 import { useConfigContext as N } from "../../../../../core/ConfigContext/context.js";
 import { EMPTY_OBJECT as W } from "../../../../../utils/value/constants.js";
@@ -33,22 +33,22 @@ const D = ({ action: n, className: s, offerExpiresAt: m }) => {
     p,
     {
       className: s,
-      type: f.CRITICAL,
+      type: d.CRITICAL,
       title: e.get("somethingWentWrongTryRefreshingOrComeBackLater"),
-      description: /* @__PURE__ */ r(d, { className: l.button, onClick: u, children: e.get("refresh") })
+      description: /* @__PURE__ */ r(f, { className: l.button, onClick: u, children: e.get("refresh") })
     }
   ) : /* @__PURE__ */ r(
     p,
     {
       className: s,
-      type: f.WARNING,
+      type: d.WARNING,
       title: `${e.get("capital.signTermsAndConditionsToReceiveFunds")}${m ? ` ${e.get("capital.thisOfferExpiresOn", {
         values: {
           date: T(m, I)
         }
       })}` : ""}`,
       description: /* @__PURE__ */ r(
-        d,
+        f,
         {
           className: l.button,
           onClick: () => C(!0),

package/dist/es/components/external/CapitalOverview/components/GrantAdjustmentDetails/constants.js

@@ -1,5 +1,4 @@
 const e = {
-  revocation: "revocation",
   unscheduledRepayment: "unscheduledRepayment"
 };
 export {

package/dist/es/components/external/CapitalOverview/components/GrantDetails/GrantDetails.js

@@ -2,10 +2,10 @@ import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import { useCallback as s, useMemo as p } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import y from "../../../../../core/Context/useCoreContext.js";
 import r from "../../../../internal/Typography/Typography.js";
-import { TypographyElement as m, TypographyVariant as o } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as o, TypographyElement as m } from "../../../../internal/Typography/types.js";
 import { GRANT_DETAILS_CLASS_NAMES as l } from "./constants.js";
 /* empty css                  */
-import { getPaymentRatePercentage as d } from "../../../CapitalOffer/components/utils/utils.js";
+import { getPercentage as d } from "../../../CapitalOffer/components/utils/utils.js";
 import { Tooltip as A } from "../../../../internal/Tooltip/Tooltip.js";
 import { CAPITAL_REPAYMENT_FREQUENCY as v } from "../../../../constants.js";
 import h from "../../../../internal/StructuredList/StructuredList.js";

package/dist/es/components/external/CapitalOverview/components/GrantItem/utils.js

@@ -1,5 +1,5 @@
-import { TagVariant as n } from "../../../../internal/Tag/types.js";
-const u = (e) => e === "Active", c = (e) => e === "Repaid", r = (e) => e === "Active" ? "capital.remaining" : "capital.requestedFunds", d = (e) => e.status === "Active" ? e.remainingTotalAmount : e.grantAmount, o = ({ status: e, missingActions: t }) => {
+import { TagVariant as s } from "../../../../internal/Tag/types.js";
+const u = (e) => e === "Active", c = (e) => e === "Repaid", o = (e) => e === "Active" ? "capital.remaining" : "capital.requestedFunds", r = (e) => e.status === "Active" ? e.remainingTotalAmount : e.grantAmount, d = ({ status: e, missingActions: t }) => {
   switch (e) {
     case "Active":
       return;
@@ -17,26 +17,26 @@ const u = (e) => e === "Active", c = (e) => e === "Repaid", r = (e) => e === "Ac
 }, l = ({ status: e, missingActions: t }) => {
   switch (e) {
     case "Failed":
-      return n.ERROR;
+      return s.ERROR;
     case "Pending":
-      return t != null && t.length ? n.WARNING : n.DEFAULT;
+      return t != null && t.length ? s.WARNING : s.DEFAULT;
     case "Repaid":
-      return n.LIGHT;
+      return s.LIGHT;
     case "Revoked":
     case "WrittenOff":
-      return n.WARNING;
+      return s.WARNING;
     default:
-      return n.DEFAULT;
+      return s.DEFAULT;
   }
 }, p = (e) => {
   const t = /* @__PURE__ */ new Date(), a = /* @__PURE__ */ new Date();
   return a.setDate(t.getDate() + e), a;
 }, y = (e) => {
-  var a, s;
+  var a, n;
   const t = ((a = e.missingActions) == null ? void 0 : a.some((i) => i.type === "signToS")) || !1;
   switch (e.status) {
     case "Pending":
-      return (s = e.missingActions) != null && s.length ? t ? "capital.signTheTermsToReceiveYourFunds" : void 0 : "capital.youShouldGetTheFundsWithinOneBusinessDay";
+      return (n = e.missingActions) != null && n.length ? t ? "capital.signTheTermsToReceiveYourFunds" : void 0 : "capital.youShouldGetTheFundsWithinOneBusinessDay";
     case "Failed":
       return "capital.weCouldNotProcessThisRequestTryAgain";
     case "WrittenOff":
@@ -47,14 +47,14 @@ const u = (e) => e === "Active", c = (e) => e === "Repaid", r = (e) => e === "Ac
       return;
   }
 }, T = (e) => {
-  var s;
+  var n;
   const t = e.status === "Active", a = e.status === "Pending";
   return {
-    amount: d(e),
-    amountLabelKey: r(e.status),
+    amount: r(e),
+    amountLabelKey: o(e.status),
     hasAlerts: a,
     hasDetails: u(e.status),
-    hasUnscheduledRepaymentDetails: t && !!((s = e.unscheduledRepaymentAccounts) != null && s.length),
+    hasUnscheduledRepaymentDetails: t && !!((n = e.unscheduledRepaymentAccounts) != null && n.length),
     // The grant revocation account details is currently not ready to be rendered.
     // A future iteration of this component might include revocation account details.
     // Only then should the following line be uncommented.
@@ -66,7 +66,7 @@ const u = (e) => e === "Active", c = (e) => e === "Repaid", r = (e) => e === "Ac
     isLabelColorSecondary: t,
     isProgressBarVisible: t,
     repaymentPeriodEndDate: p(e.repaymentPeriodLeft),
-    statusKey: o(e),
+    statusKey: d(e),
     statusTagVariant: l(e),
     statusTooltipKey: y(e)
   };

package/dist/es/components/external/CapitalOverview/components/GrantList/GrantList.js

@@ -3,7 +3,7 @@ import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import { useState as k, useCallback as t } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { CapitalOffer as C } from "../../../CapitalOffer/components/CapitalOffer/CapitalOffer.js";
 import { GrantsDisplay as b } from "./GrantsDisplay.js";
-import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
+import { Fragment as x } from "../../../../../external/preact/dist/preact.module.js";
 const V = ({
   externalDynamicOffersConfig: l,
   grantList: p,
@@ -20,7 +20,7 @@ const V = ({
     },
     [e, i]
   );
-  return /* @__PURE__ */ a(h, { children: c ? /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(x, { children: c ? /* @__PURE__ */ a(
     C,
     {
       externalDynamicOffersConfig: l,

package/dist/es/components/external/CapitalOverview/components/GrantList/GrantsDisplay.js

@@ -1,42 +1,42 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { BaseList as w } from "../../../../internal/BaseList/BaseList.js";
-import { GrantItem as S } from "../GrantItem/GrantItem.js";
-import { getGrantConfig as _ } from "../GrantItem/utils.js";
-import { GRANT_ADJUSTMENT_DETAILS as C } from "../GrantAdjustmentDetails/constants.js";
-import { GrantRepaymentDetails as A } from "../GrantRepaymentDetails/GrantRepaymentDetails.js";
-import R from "../../../../../core/Context/useCoreContext.js";
-import { useState as D, useMemo as l, useCallback as G } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import B from "../../../../internal/Button/Button.js";
-import { ButtonVariant as E } from "../../../../internal/Button/types.js";
-import k from "../../../../internal/Tabs/Tabs.js";
-import { CapitalHeader as x } from "../../../../internal/CapitalHeader/CapitalHeader.js";
-const u = ({ grants: t, showDetails: c }) => /* @__PURE__ */ e(w, { classNames: "adyen-pe-grant-list__items", children: t.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(S, { grant: s, showDetails: c.bind(null, s) }) }, s.id)) }), Y = ({ grantList: t, hideTitle: c, newOfferAvailable: s, onNewOfferRequest: b }) => {
-  const [v, h] = D(), [n, y] = D(), { i18n: g } = R(), [i, m] = l(() => {
-    const a = [], r = [];
+import { BaseList as C } from "../../../../internal/BaseList/BaseList.js";
+import { GrantItem as _ } from "../GrantItem/GrantItem.js";
+import { getGrantConfig as b } from "../GrantItem/utils.js";
+import { GRANT_ADJUSTMENT_DETAILS as R } from "../GrantAdjustmentDetails/constants.js";
+import { GrantRepaymentDetails as T } from "../GrantRepaymentDetails/GrantRepaymentDetails.js";
+import A from "../../../../internal/SegmentedControl/SegmentedControl.js";
+import B from "../../../../../core/Context/useCoreContext.js";
+import { useState as G, useMemo as l, useCallback as D } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import E from "../../../../internal/Button/Button.js";
+import { ButtonVariant as U } from "../../../../internal/Button/types.js";
+import { CapitalHeader as k } from "../../../../internal/CapitalHeader/CapitalHeader.js";
+const u = ({ grants: t, showDetails: c }) => /* @__PURE__ */ e(C, { classNames: "adyen-pe-grant-list__items", children: t.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(_, { grant: n, showDetails: c.bind(null, n) }) }, n.id)) }), Y = ({ grantList: t, hideTitle: c, newOfferAvailable: n, onNewOfferRequest: v }) => {
+  const [g, h] = G(), [a, y] = G(), { i18n: N } = B(), [i, m] = l(() => {
+    const s = [], r = [];
     return t == null || t.forEach((o) => {
-      o.status === "Active" || o.status === "Pending" ? a.push(o) : r.push(o);
-    }), [a, r];
-  }, [t]), f = l(() => t.length > 1 && i.length && m.length ? "Tabs" : "SingleGrant", [i.length, t.length, m.length]), N = l(() => s && !i.some((a) => a.status === "Pending"), [i, s]), d = l(() => n && _(n), [n]), T = G(() => h(void 0), []), p = G((a, r) => {
-    h(r), y(a);
+      o.status === "Active" || o.status === "Pending" ? s.push(o) : r.push(o);
+    }), [s, r];
+  }, [t]), f = l(() => t.length > 1 && i.length && m.length ? "SegmentedGrants" : "UnifiedGrants", [i.length, t.length, m.length]), S = l(() => n && !i.some((s) => s.status === "Pending"), [i, n]), d = l(() => a && b(a), [a]), w = D(() => h(void 0), []), p = D((s, r) => {
+    h(r), y(s);
   }, []);
-  if (n)
-    switch (v) {
-      case C.unscheduledRepayment: {
+  if (a)
+    switch (g) {
+      case R.unscheduledRepayment: {
         if (d != null && d.hasUnscheduledRepaymentDetails)
-          return /* @__PURE__ */ e(A, { grant: n, onDetailsClose: T });
+          return /* @__PURE__ */ e(T, { grant: a, onDetailsClose: w });
         break;
       }
     }
   return /* @__PURE__ */ e("div", { className: "adyen-pe-grant-list", children: [
     /* @__PURE__ */ e("div", { className: "adyen-pe-grant-list__header-container", children: [
-      /* @__PURE__ */ e(x, { hideTitle: c, titleKey: "capital.businessFinancing" }),
-      N ? /* @__PURE__ */ e(B, { onClick: b, className: "adyen-pe-grant-list__offer-button", variant: E.SECONDARY, children: g.get("capital.seeNewOffer") }) : null
+      /* @__PURE__ */ e(k, { hideTitle: c, titleKey: "capital.businessFinancing" }),
+      S ? /* @__PURE__ */ e(E, { onClick: v, className: "adyen-pe-grant-list__offer-button", variant: U.SECONDARY, children: N.get("capital.seeNewOffer") }) : null
     ] }),
-    f === "SingleGrant" && /* @__PURE__ */ e(u, { grants: t, showDetails: p }),
-    f === "Tabs" && /* @__PURE__ */ e(
-      k,
+    f === "UnifiedGrants" && /* @__PURE__ */ e(u, { grants: t, showDetails: p }),
+    f === "SegmentedGrants" && /* @__PURE__ */ e(
+      A,
       {
-        tabs: [
+        items: [
           {
             label: "capital.inProgress",
             content: /* @__PURE__ */ e(u, { grants: i, showDetails: p }),
@@ -48,7 +48,7 @@ const u = ({ grants: t, showDetails: c }) => /* @__PURE__ */ e(w, { classNames:
             id: "inactive"
           }
         ],
-        defaultActiveTab: "active"
+        defaultItem: "active"
       }
     )
   ] });

package/dist/es/components/external/CapitalOverview/components/GrantRepaymentDetails/GrantRepaymentDetails.js

@@ -2,7 +2,7 @@ import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import { useMemo as s } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import d from "../../../../../core/Context/useCoreContext.js";
 import o from "../../../../internal/Typography/Typography.js";
-import { TypographyElement as m, TypographyVariant as c } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as c, TypographyElement as m } from "../../../../internal/Typography/types.js";
 import { AccountDetails as A } from "../AccountDetails/AccountDetails.js";
 import { GrantAdjustmentDetails as f } from "../GrantAdjustmentDetails/GrantAdjustmentDetails.js";
 /* empty css                           */