@adyen/adyen-platform-experience-web 1.7.0 → 1.8.0

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

@@ -1,110 +1,149 @@
-import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as d, useCallback as y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import u from "classnames";
-import v from "../../../../../core/Context/useCoreContext.js";
-import h from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
-import n from "../../../../internal/Typography/Typography.js";
-import { TypographyVariant as s, TypographyElement as A } from "../../../../internal/Typography/types.js";
-import { Tag as g } from "../../../../internal/Tag/Tag.js";
-import { GRANT_ITEM_CLASS_NAMES as o } from "./constants.js";
-import { getGrantConfig as C } from "./utils.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as c, useCallback as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import v from "classnames";
+import b from "../../../../../core/Context/useCoreContext.js";
+import C from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
+import s from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as m, TypographyElement as A } from "../../../../internal/Typography/types.js";
+import { Tag as y } from "../../../../internal/Tag/Tag.js";
+import { GRANT_ITEM_CLASS_NAMES as i } from "./constants.js";
+import { getGrantConfig as N } from "./utils.js";
 /* empty css               */
-import { GrantDetails as N } from "../GrantDetails/GrantDetails.js";
-import x from "../../../../internal/CopyText/CopyText.js";
-import { Tooltip as I } from "../../../../internal/Tooltip/Tooltip.js";
-import { Alert as b } from "../../../../internal/Alert/Alert.js";
-import { AlertTypeOption as E } from "../../../../internal/Alert/types.js";
-import { ButtonVariant as S } from "../../../../internal/Button/types.js";
-import R from "../../../../internal/ExpandableCard/ExpandableCard.js";
-import { GrantActions as B } from "../GrantActions/GrantActions.js";
-import { Fragment as T } from "../../../../../external/preact/dist/preact.module.js";
-import { DATE_FORMAT_CAPITAL_OVERVIEW as L } from "../../../../../constants/dateFormats.js";
-import O from "../../../../internal/ProgressBar/ProgressBar.js";
-import P from "../../../../internal/Button/Button.js";
-const ae = ({ grant: a, showDetails: i }) => {
-  const { i18n: r } = v(), { dateFormat: m } = h(), t = d(() => C(a), [a]), l = y(() => i == null ? void 0 : i("unscheduledRepayment"), [i]), f = d(
+import { GrantDetails as I } from "../GrantDetails/GrantDetails.js";
+import E from "../../../../internal/CopyText/CopyText.js";
+import { Tooltip as x } from "../../../../internal/Tooltip/Tooltip.js";
+import { Alert as S } from "../../../../internal/Alert/Alert.js";
+import { AlertTypeOption as L } from "../../../../internal/Alert/types.js";
+import { ButtonVariant as w } from "../../../../internal/Button/types.js";
+import B from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { GrantActions as P } from "../GrantActions/GrantActions.js";
+import { Fragment as f } from "../../../../../external/preact/dist/preact.module.js";
+import { Translation as G } from "../../../../internal/Translation/Translation.js";
+import { DATE_FORMAT_CAPITAL_OVERVIEW as O } from "../../../../../constants/dateFormats.js";
+import R from "../../../../internal/ProgressBar/ProgressBar.js";
+import K from "../../../../internal/Button/Button.js";
+import { uniqueId as l } from "../../../../../utils/random/uniqueId.js";
+const st = ({ grant: r, showDetails: n }) => {
+  const { i18n: a } = b(), { dateFormat: d } = C(), e = c(() => N(r), [r]), p = h(() => n == null ? void 0 : n("unscheduledRepayment"), [n]), o = c(
+    () => ({
+      grantAmount: l("elem"),
+      grantAmountLabel: l("elem"),
+      grantStatus: l("elem"),
+      termEnds: l("elem")
+    }),
+    []
+  ), T = c(
     () => {
-      var c, p;
-      return /* @__PURE__ */ e("div", { className: o.cardContent, children: [
-        /* @__PURE__ */ e("div", { className: o.statusContainer, children: [
-          /* @__PURE__ */ e(
-            n,
+      var u, g;
+      return /* @__PURE__ */ t("div", { className: i.cardContent, children: [
+        /* @__PURE__ */ t("div", { className: i.statusContainer, children: [
+          /* @__PURE__ */ t(
+            s,
             {
-              variant: s.CAPTION,
-              className: u({ [o.textSecondary]: t.isLabelColorSecondary }),
+              id: o.grantAmountLabel,
+              variant: m.CAPTION,
+              className: v({ [i.textSecondary]: e.isLabelColorSecondary }),
               testId: "grant-amount-label",
-              children: r.get(t.amountLabelKey)
+              children: a.get(e.amountLabelKey)
             }
           ),
-          /* @__PURE__ */ e("div", { children: a.status === "Active" ? /* @__PURE__ */ e(T, { children: [
-            /* @__PURE__ */ e(n, { variant: s.CAPTION, el: A.SPAN, children: r.get("capital.termEnds") }),
-            /* @__PURE__ */ e(n, { variant: s.CAPTION, stronger: !0, el: A.SPAN, children: m(t.repaymentPeriodEndDate, L) })
-          ] }) : t.statusKey ? t.statusTooltipKey ? /* @__PURE__ */ e(I, { content: r.get(t.statusTooltipKey), children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(g, { label: r.get(t.statusKey), variant: t.statusTagVariant }) }) }) : /* @__PURE__ */ e(g, { label: r.get(t.statusKey), variant: t.statusTagVariant }) : null })
+          /* @__PURE__ */ t("div", { id: o.grantStatus, children: r.status === "Active" ? /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(s, { id: o.termEnds, variant: m.CAPTION, el: A.SPAN, children: /* @__PURE__ */ t(
+            G,
+            {
+              translationKey: "capital.overview.grants.item.termEnds",
+              fills: {
+                date: /* @__PURE__ */ t(
+                  "time",
+                  {
+                    "aria-labelledBy": o.termEnds,
+                    dateTime: e.repaymentPeriodEndDate.toISOString(),
+                    children: /* @__PURE__ */ t(s, { variant: m.CAPTION, stronger: !0, el: A.SPAN, children: d(e.repaymentPeriodEndDate, O) })
+                  }
+                )
+              }
+            }
+          ) }) }) : e.statusKey ? e.statusTooltipKey ? /* @__PURE__ */ t(x, { content: a.get(e.statusTooltipKey), children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(y, { label: a.get(e.statusKey), variant: e.statusTagVariant }) }) }) : /* @__PURE__ */ t(y, { label: a.get(e.statusKey), variant: e.statusTagVariant }) : null })
         ] }),
-        /* @__PURE__ */ e(
-          n,
+        /* @__PURE__ */ t(
+          s,
           {
-            variant: s.TITLE,
+            id: o.grantAmount,
+            variant: m.TITLE,
             medium: !0,
-            className: u({
-              [o.textSecondary]: t.isAmountColorSecondary
+            className: v({
+              [i.textSecondary]: e.isAmountColorSecondary
             }),
-            children: r.amount(t.amount.value, t.amount.currency)
+            children: a.amount(e.amount.value, e.amount.currency)
           }
         ),
-        t.isProgressBarVisible && /* @__PURE__ */ e(
-          O,
+        e.isProgressBarVisible && /* @__PURE__ */ t(
+          R,
           {
-            className: o.progressBar,
-            value: a.repaidTotalAmount.value,
-            max: a.totalAmount.value,
-            labels: { current: r.get("capital.repaid"), max: r.get("capital.remaining") },
+            className: i.progressBar,
+            value: r.repaidTotalAmount.value,
+            max: r.totalAmount.value,
+            labels: {
+              ariaLabel: a.get("capital.overview.grants.item.progressBar.a11y.label"),
+              current: a.get("capital.overview.grants.item.amounts.repaid"),
+              max: a.get("capital.overview.grants.item.amounts.remaining")
+            },
             tooltips: {
-              remaining: `${r.amount(a.remainingTotalAmount.value, a.remainingTotalAmount.currency)} ${(c = r.get("capital.remaining")) == null ? void 0 : c.toLowerCase()}`,
-              progress: `${r.amount(a.repaidTotalAmount.value, a.repaidTotalAmount.currency)} ${(p = r.get("capital.repaid")) == null ? void 0 : p.toLowerCase()}`
+              remaining: `${a.amount(r.remainingTotalAmount.value, r.remainingTotalAmount.currency)} ${(u = a.get("capital.overview.grants.item.amounts.remaining")) == null ? void 0 : u.toLowerCase()}`,
+              progress: `${a.amount(r.repaidTotalAmount.value, r.repaidTotalAmount.currency)} ${(g = a.get("capital.overview.grants.item.amounts.repaid")) == null ? void 0 : g.toLowerCase()}`
             }
           }
         ),
-        t.isGrantIdVisible ? /* @__PURE__ */ e("div", { className: o.grantID, children: /* @__PURE__ */ e(
-          x,
+        e.isGrantIdVisible ? /* @__PURE__ */ t("div", { className: i.grantID, children: /* @__PURE__ */ t(
+          E,
           {
-            textToCopy: a.id,
-            buttonLabel: r.get("capital.grantID"),
+            textToCopy: r.id,
+            visibleText: a.get("capital.common.fields.grantID"),
+            copyButtonAriaLabelKey: "capital.overview.grants.item.actions.copyGrantID",
             isHovered: !0,
             type: "Text",
             "data-testid": "grant-id-copy-text"
           }
         ) }) : null,
-        t.hasAlerts ? /* @__PURE__ */ e(T, { children: a.missingActions && a.missingActions.length ? /* @__PURE__ */ e(
-          B,
+        e.hasAlerts ? /* @__PURE__ */ t(f, { children: r.missingActions && r.missingActions.length ? /* @__PURE__ */ t(
+          P,
           {
-            missingActions: a.missingActions,
-            className: o.alert,
-            offerExpiresAt: a.offerExpiresAt
+            missingActions: r.missingActions,
+            className: i.alert,
+            offerExpiresAt: r.offerExpiresAt
           }
-        ) : /* @__PURE__ */ e(
-          b,
+        ) : /* @__PURE__ */ t(
+          S,
           {
-            className: o.alert,
-            type: E.HIGHLIGHT,
-            title: r.get("capital.weReceivedYourRequestAndWeAreWorkingOnItNowCheckBackSoon")
+            className: i.alert,
+            type: L.HIGHLIGHT,
+            title: a.get("capital.overview.grants.item.alerts.processingRequest")
           }
-        ) }) : t.hasUnscheduledRepaymentDetails && /* @__PURE__ */ e("div", { className: o.actionsBar, children: /* @__PURE__ */ e(
-          P,
+        ) }) : e.hasUnscheduledRepaymentDetails && /* @__PURE__ */ t("div", { className: i.actionsBar, children: /* @__PURE__ */ t(
+          K,
           {
-            onClick: l,
-            className: o.mainActionBtn,
-            variant: S.SECONDARY,
+            onClick: p,
+            className: i.mainActionBtn,
+            variant: w.SECONDARY,
             fullWidth: !0,
-            children: r.get("capital.sendRepayment")
+            children: a.get("capital.overview.grants.item.actions.sendRepayment")
           }
         ) })
       ] });
     },
-    [r, m, a, t, l]
+    [a, d, r, e, p]
   );
-  return /* @__PURE__ */ e("div", { className: o.base, children: /* @__PURE__ */ e(R, { renderHeader: f, filled: t.isBackgroundFilled, inFlow: !0, children: t.hasDetails && /* @__PURE__ */ e(N, { grant: a }) }) });
+  return /* @__PURE__ */ t("div", { className: i.base, children: /* @__PURE__ */ t(
+    B,
+    {
+      "aria-describedby": `${o.grantAmountLabel} ${o.grantAmount} ${o.grantStatus}`,
+      "aria-label": a.get("capital.overview.grants.item.details.a11y.label"),
+      filled: e.isBackgroundFilled,
+      renderContent: T,
+      inFlow: !0,
+      children: e.hasDetails && /* @__PURE__ */ t(I, { grant: r })
+    }
+  ) });
 };
 export {
-  ae as GrantItem
+  st as GrantItem
 };

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

@@ -1,59 +1,59 @@
-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 }) => {
+import { TagVariant as a } from "../../../../internal/Tag/types.js";
+const o = (e) => e === "Active", r = (e) => e === "Repaid", c = (e) => e === "Active" ? "capital.overview.grants.item.amounts.remaining" : "capital.overview.grants.item.amounts.requestedFunds", u = (e) => e.status === "Active" ? e.remainingTotalAmount : e.grantAmount, d = ({ status: e, missingActions: t }) => {
   switch (e) {
     case "Active":
       return;
     case "Failed":
-      return "capital.failed";
+      return "capital.overview.grants.common.statuses.failed";
     case "Pending":
-      return t && t.length ? "capital.actionNeeded" : "capital.pending";
+      return t && t.length ? "capital.overview.grants.common.statuses.actionNeeded" : "capital.overview.grants.common.statuses.pending";
     case "Repaid":
-      return "capital.fullyRepaid";
+      return "capital.overview.grants.common.statuses.fullyRepaid";
     case "Revoked":
-      return "capital.revoked";
+      return "capital.overview.grants.common.statuses.revoked";
     case "WrittenOff":
-      return "capital.writtenOff";
+      return "capital.overview.grants.common.statuses.writtenOff";
   }
 }, l = ({ status: e, missingActions: t }) => {
   switch (e) {
     case "Failed":
-      return s.ERROR;
+      return a.ERROR;
     case "Pending":
-      return t != null && t.length ? s.WARNING : s.DEFAULT;
+      return t != null && t.length ? a.WARNING : a.DEFAULT;
     case "Repaid":
-      return s.LIGHT;
+      return a.LIGHT;
     case "Revoked":
     case "WrittenOff":
-      return s.WARNING;
+      return a.WARNING;
     default:
-      return s.DEFAULT;
+      return a.DEFAULT;
   }
-}, p = (e) => {
-  const t = /* @__PURE__ */ new Date(), a = /* @__PURE__ */ new Date();
-  return a.setDate(t.getDate() + e), a;
-}, y = (e) => {
-  var a, n;
-  const t = ((a = e.missingActions) == null ? void 0 : a.some((i) => i.type === "signToS")) || !1;
+}, m = (e) => {
+  const t = /* @__PURE__ */ new Date(), s = /* @__PURE__ */ new Date();
+  return s.setDate(t.getDate() + e), s;
+}, v = (e) => {
+  var s, n;
+  const t = ((s = e.missingActions) == null ? void 0 : s.some((i) => i.type === "signToS")) || !1;
   switch (e.status) {
     case "Pending":
-      return (n = e.missingActions) != null && n.length ? t ? "capital.signTheTermsToReceiveYourFunds" : void 0 : "capital.youShouldGetTheFundsWithinOneBusinessDay";
+      return (n = e.missingActions) != null && n.length ? t ? "capital.overview.grants.common.statuses.pending.description.signTerms" : void 0 : "capital.overview.grants.common.statuses.pending.description.awaitingFunds";
     case "Failed":
-      return "capital.weCouldNotProcessThisRequestTryAgain";
+      return "capital.overview.grants.common.statuses.failed.description";
     case "WrittenOff":
-      return "capital.youAcceptedTheseFundsButDidNotRepayThem";
+      return "capital.overview.grants.common.statuses.writtenOff.description";
     case "Revoked":
-      return "capital.youAcceptedButThenReturnedTheseFunds";
+      return "capital.overview.grants.common.statuses.revoked.description";
     default:
       return;
   }
-}, T = (e) => {
+}, g = (e) => {
   var n;
-  const t = e.status === "Active", a = e.status === "Pending";
+  const t = e.status === "Active", s = e.status === "Pending";
   return {
-    amount: r(e),
-    amountLabelKey: o(e.status),
-    hasAlerts: a,
-    hasDetails: u(e.status),
+    amount: u(e),
+    amountLabelKey: c(e.status),
+    hasAlerts: s,
+    hasDetails: o(e.status),
     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.
@@ -61,17 +61,17 @@ const u = (e) => e === "Active", c = (e) => e === "Repaid", o = (e) => e === "Ac
     //
     // hasRevocationDetails: isGrantActive && grant.revocationAccount !== undefined,
     isAmountColorSecondary: !t,
-    isBackgroundFilled: c(e.status),
+    isBackgroundFilled: r(e.status),
     isGrantIdVisible: !t,
     isLabelColorSecondary: t,
     isProgressBarVisible: t,
-    repaymentPeriodEndDate: p(e.repaymentPeriodLeft),
+    repaymentPeriodEndDate: m(e.repaymentPeriodLeft),
     statusKey: d(e),
     statusTagVariant: l(e),
-    statusTooltipKey: y(e)
+    statusTooltipKey: v(e)
   };
 };
 export {
-  T as getGrantConfig,
-  y as getStatusTooltipKey
+  g as getGrantConfig,
+  v as getStatusTooltipKey
 };

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

@@ -1,7 +1,7 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 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 { GrantItem as N } from "../GrantItem/GrantItem.js";
+import { getGrantConfig as _ } 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";
@@ -10,49 +10,50 @@ import { useState as G, useMemo as l, useCallback as D } from "../../../../../ex
 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 h = ({ grants: t, showDetails: c }) => /* @__PURE__ */ e(C, { classNames: "adyen-pe-grant-list__items", children: t.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(N, { grant: a, showDetails: c.bind(null, a) }) }, a.id)) }), z = ({ grantList: t, hideTitle: c, newOfferAvailable: a, onNewOfferRequest: g }) => {
+  const [b, u] = G(), [n, w] = G(), { i18n: f } = B(), [i, m] = l(() => {
     const s = [], r = [];
     return t == null || t.forEach((o) => {
       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);
+  }, [t]), v = l(() => t.length > 1 && i.length && m.length ? "SegmentedGrants" : "UnifiedGrants", [i.length, t.length, m.length]), y = l(() => a && !i.some((s) => s.status === "Pending"), [i, a]), d = l(() => n && _(n), [n]), S = D(() => u(void 0), []), p = D((s, r) => {
+    u(r), w(s);
   }, []);
-  if (a)
-    switch (g) {
+  if (n)
+    switch (b) {
       case R.unscheduledRepayment: {
         if (d != null && d.hasUnscheduledRepaymentDetails)
-          return /* @__PURE__ */ e(T, { grant: a, onDetailsClose: w });
+          return /* @__PURE__ */ e(T, { grant: n, onDetailsClose: S });
         break;
       }
     }
   return /* @__PURE__ */ e("div", { className: "adyen-pe-grant-list", children: [
     /* @__PURE__ */ e("div", { className: "adyen-pe-grant-list__header-container", children: [
-      /* @__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
+      /* @__PURE__ */ e(k, { hideTitle: c, titleKey: "capital.common.title" }),
+      y ? /* @__PURE__ */ e(E, { onClick: g, className: "adyen-pe-grant-list__offer-button", variant: U.SECONDARY, children: f.get("capital.overview.grants.list.actions.newOffer") }) : null
     ] }),
-    f === "UnifiedGrants" && /* @__PURE__ */ e(u, { grants: t, showDetails: p }),
-    f === "SegmentedGrants" && /* @__PURE__ */ e(
+    v === "UnifiedGrants" && /* @__PURE__ */ e(h, { grants: t, showDetails: p }),
+    v === "SegmentedGrants" && /* @__PURE__ */ e(
       A,
       {
         items: [
           {
-            label: "capital.inProgress",
-            content: /* @__PURE__ */ e(u, { grants: i, showDetails: p }),
+            label: "capital.overview.grants.list.tabs.labels.inProgress",
+            content: /* @__PURE__ */ e(h, { grants: i, showDetails: p }),
             id: "active"
           },
           {
-            label: "capital.closed",
-            content: /* @__PURE__ */ e(u, { grants: m, showDetails: p }),
+            label: "capital.overview.grants.list.tabs.labels.closed",
+            content: /* @__PURE__ */ e(h, { grants: m, showDetails: p }),
             id: "inactive"
           }
         ],
-        activeItem: "active"
+        activeItem: "active",
+        "aria-label": f.get("capital.overview.grants.list.tabs.a11y.label")
       }
     )
   ] });
 };
 export {
-  Y as GrantsDisplay
+  z as GrantsDisplay
 };

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

@@ -1,54 +1,70 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-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 { 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";
+import { useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useUniqueId as m } from "../../../../../hooks/useUniqueId.js";
+import f from "../../../../../core/Context/useCoreContext.js";
+import t from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as r, TypographyElement as n } from "../../../../internal/Typography/types.js";
+import { AccountDetails as N } from "../AccountDetails/AccountDetails.js";
+import { GrantAdjustmentDetails as I } from "../GrantAdjustmentDetails/GrantAdjustmentDetails.js";
 /* empty css                           */
-import h from "../../../../internal/InfoBox/InfoBox.js";
-import { Translation as N } from "../../../../internal/Translation/Translation.js";
-const t = "adyen-pe-grant-repayment-details", i = {
-  balanceInfo: `${t}__balance-info`,
-  repaymentInfo: `${t}__repayment-info`,
-  repaymentAccount: `${t}__repayment-account`,
-  repaymentNotice: `${t}__repayment-notice`
-}, C = ({ grant: n, onDetailsClose: p }) => {
-  const { i18n: a } = d(), l = s(() => {
-    var r;
-    return (r = n.unscheduledRepaymentAccounts) == null ? void 0 : r[0];
-  }, [n.unscheduledRepaymentAccounts]), u = s(() => {
-    const { currency: r, value: y } = n.remainingTotalAmount;
-    return a.amount(y, r);
-  }, [a, n.remainingTotalAmount]);
-  return l ? /* @__PURE__ */ e(
-    f,
+import { Divider as P } from "../../../../internal/Divider/Divider.js";
+import { Fragment as g } from "../../../../../external/preact/dist/preact.module.js";
+import { Translation as S } from "../../../../internal/Translation/Translation.js";
+const i = "adyen-pe-grant-repayment-details", s = {
+  instructionList: `${i}__instruction-list`,
+  notice: `${i}__notice`,
+  repaymentAccount: `${i}__repayment-account`,
+  transferInstrumentItem: `${i}__transfer-instrument-item`,
+  transferInstrumentList: `${i}__transfer-instrument-list`,
+  verifiedBankAccountDetails: `${i}__verified-bank-account-details`
+}, x = ({ grant: c, onDetailsClose: A }) => {
+  var v, y;
+  const { i18n: a } = f(), d = `list-${m()}`, u = `list-${m()}`, p = `list-${m()}`, o = h(() => {
+    var l;
+    return (l = c.unscheduledRepaymentAccounts) == null ? void 0 : l[0];
+  }, [c.unscheduledRepaymentAccounts]);
+  return o ? /* @__PURE__ */ e(
+    I,
     {
-      className: t,
-      onDetailsClose: p,
-      headerTitleKey: "capital.sendRepayment",
-      headerSubtitleKey: "capital.sendRepaymentSubtitle",
+      className: i,
+      onDetailsClose: A,
+      headerTitleKey: "capital.overview.repayment.title",
+      headerSubtitleKey: "capital.overview.repayment.subtitle",
       children: [
-        /* @__PURE__ */ e("div", { className: i.repaymentInfo, children: [
-          /* @__PURE__ */ e("section", { className: i.repaymentAccount, children: [
-            /* @__PURE__ */ e(o, { el: m.SPAN, variant: c.BODY, stronger: !0, children: a.get("capital.bankAccountDetails") }),
-            /* @__PURE__ */ e(A, { bankAccount: l })
-          ] }),
-          /* @__PURE__ */ e("section", { className: i.repaymentNotice, children: /* @__PURE__ */ e(o, { el: m.PARAGRAPH, variant: c.CAPTION, children: a.get("capital.sendRepaymentNotice") }) })
+        /* @__PURE__ */ e("div", { className: s.repaymentAccount, children: [
+          /* @__PURE__ */ e(t, { id: d, el: n.SPAN, variant: r.BODY, stronger: !0, children: a.get("capital.overview.repayment.accountDetails.title") }),
+          /* @__PURE__ */ e(N, { bankAccount: o, "aria-labelledby": d })
         ] }),
-        /* @__PURE__ */ e(h, { className: i.balanceInfo, children: /* @__PURE__ */ e(o, { variant: c.BODY, children: /* @__PURE__ */ e(
-          N,
-          {
-            translationKey: "capital.repaymentBalanceInfo",
-            fills: {
-              amount: /* @__PURE__ */ e(o, { el: m.SPAN, variant: c.BODY, strongest: !0, children: u })
-            }
-          }
-        ) }) })
+        /* @__PURE__ */ e("div", { className: s.notice, children: [
+          !!((v = c.transferInstruments) != null && v.length) && /* @__PURE__ */ e(g, { children: [
+            /* @__PURE__ */ e("div", { children: [
+              /* @__PURE__ */ e(t, { id: p, el: n.SPAN, variant: r.CAPTION, stronger: !0, children: a.get("capital.overview.repayment.transferInstruments") }),
+              /* @__PURE__ */ e("ul", { className: s.transferInstrumentList, "aria-labelledby": p, children: (y = c.transferInstruments) == null ? void 0 : y.map(({ accountIdentifier: l }) => /* @__PURE__ */ e("li", { className: s.transferInstrumentItem, children: /* @__PURE__ */ e(t, { el: n.SPAN, variant: r.CAPTION, children: l }) }, l)) })
+            ] }),
+            /* @__PURE__ */ e(P, {})
+          ] }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ e(t, { id: u, el: n.SPAN, variant: r.CAPTION, stronger: !0, children: a.get("capital.overview.repayment.instructions.title") }),
+            /* @__PURE__ */ e("ol", { className: s.instructionList, "aria-labelledby": u, children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { el: n.SPAN, variant: r.CAPTION, children: /* @__PURE__ */ e(
+                S,
+                {
+                  translationKey: "capital.overview.repayment.instructions.addingBeneficiary",
+                  fills: {
+                    beneficiaryName: /* @__PURE__ */ e(t, { el: n.SPAN, variant: r.CAPTION, stronger: !0, children: o.beneficiaryName })
+                  }
+                }
+              ) }) }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { el: n.SPAN, variant: r.CAPTION, children: a.get("capital.overview.repayment.instructions.sendingPayment") }) }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { el: n.SPAN, variant: r.CAPTION, children: a.get("capital.overview.repayment.instructions.waiting") }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(t, { className: s.verifiedBankAccountDetails, el: n.SPAN, variant: r.CAPTION, children: a.get("capital.overview.repayment.instructions.verifiedAccount") })
+        ] })
       ]
     }
   ) : null;
 };
 export {
-  C as GrantRepaymentDetails
+  x as GrantRepaymentDetails
 };

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

@@ -1,35 +1,35 @@
 import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { CAPITAL_OVERVIEW_CLASS_NAMES as a } from "../constants.js";
+import { CAPITAL_OVERVIEW_CLASS_NAMES as t } from "../constants.js";
 import n from "../../../internal/Button/Button.js";
 import m from "../../../../core/Context/useCoreContext.js";
-import p from "../../../internal/Typography/Typography.js";
-import { TypographyVariant as l } from "../../../internal/Typography/types.js";
+import l from "../../../internal/Typography/Typography.js";
+import { TypographyVariant as p } from "../../../internal/Typography/types.js";
 import u from "../../../internal/InfoBox/InfoBox.js";
-import { Fragment as s } from "../../../../external/preact/dist/preact.module.js";
-import { CapitalHeader as c } from "../../../internal/CapitalHeader/CapitalHeader.js";
-const F = ({
-  dynamicOfferConfig: t,
-  hideTitle: i,
+import { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
+import { CapitalHeader as f } from "../../../internal/CapitalHeader/CapitalHeader.js";
+const C = ({
+  dynamicOfferConfig: a,
+  hideTitle: e,
   onOfferOptionsRequest: o
 }) => {
-  const { i18n: e } = m();
-  return /* @__PURE__ */ r(s, { children: [
-    /* @__PURE__ */ r(c, { hideTitle: i, titleKey: "capital.needSomeExtraMoney" }),
-    /* @__PURE__ */ r("div", { className: a.preQualifiedGrant, children: [
-      /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(p, { variant: l.BODY, children: [
-        e.get("capital.youHaveBeenPrequalifiedForBusinessFinancingUpToX.part1"),
-        /* @__PURE__ */ r("strong", { children: e.get("capital.youHaveBeenPrequalifiedForBusinessFinancingUpToX.part2", {
+  const { i18n: i } = m();
+  return /* @__PURE__ */ r(c, { children: [
+    /* @__PURE__ */ r(f, { hideTitle: e, titleKey: "capital.overview.common.titles.qualificationIntro" }),
+    /* @__PURE__ */ r("div", { className: t.preQualifiedGrant, children: [
+      /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(l, { variant: p.BODY, children: [
+        i.get("capital.overview.prequalified.alreadyQualifyInfo.part1"),
+        /* @__PURE__ */ r("strong", { children: i.get("capital.overview.prequalified.alreadyQualifyInfo.part2", {
           values: {
-            amount: e.amount(t.maxAmount.value, t.maxAmount.currency, {
+            amount: i.amount(a.maxAmount.value, a.maxAmount.currency, {
               minimumFractionDigits: 0
             })
           }
         }) })
       ] }) }),
-      /* @__PURE__ */ r(n, { className: a.preQualifiedGrantButton, onClick: o, children: e.get("capital.seeOptions") })
+      /* @__PURE__ */ r(n, { className: t.preQualifiedGrantButton, onClick: o, children: i.get("capital.overview.prequalified.actions.seeOptions") })
     ] })
   ] });
 };
 export {
-  F as default
+  C as default
 };