@adyen/adyen-platform-experience-web 1.12.1 → 1.12.2-beta.1

package/dist/es/external/preact-custom-element/dist/preact-custom-element.esm.js

@@ -0,0 +1,82 @@
+import { createElement as l, hydrate as g, render as d, cloneElement as f, Fragment as C } from "../../preact/dist/preact.module.js";
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(t) {
+    for (var s = 1; s < arguments.length; s++) {
+      var e = arguments[s];
+      for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]);
+    }
+    return t;
+  }, u.apply(this, arguments);
+}
+function v(t, s) {
+  if (t == null) return {};
+  var e, r, a = {}, n = Object.keys(t);
+  for (r = 0; r < n.length; r++) s.indexOf(e = n[r]) >= 0 || (a[e] = t[e]);
+  return a;
+}
+var E = ["context", "children"], O = ["useFragment"];
+function A(t, s, e, r) {
+  function a() {
+    var n, o = Reflect.construct(HTMLElement, [], a);
+    return o._vdomComponent = t, r && r.shadow ? (o._root = o.attachShadow({ mode: r.mode || "open", serializable: (n = r.serializable) != null && n }), r.adoptedStyleSheets && (o._root.adoptedStyleSheets = r.adoptedStyleSheets)) : o._root = o, o;
+  }
+  return (a.prototype = Object.create(HTMLElement.prototype)).constructor = a, a.prototype.connectedCallback = function() {
+    S.call(this, r);
+  }, a.prototype.attributeChangedCallback = j, a.prototype.disconnectedCallback = k, e = e || t.observedAttributes || Object.keys(t.propTypes || {}), a.observedAttributes = e, t.formAssociated && (a.formAssociated = !0), e.forEach(function(n) {
+    Object.defineProperty(a.prototype, n, { get: function() {
+      return this._vdom ? this._vdom.props[n] : this._props[n];
+    }, set: function(o) {
+      this._vdom ? this.attributeChangedCallback(n, null, o) : (this._props || (this._props = {}), this._props[n] = o);
+      var i = typeof o;
+      o != null && i !== "string" && i !== "boolean" && i !== "number" || this.setAttribute(n, o);
+    } });
+  }), customElements.define(s || t.tagName || t.displayName || t.name, a), a;
+}
+function x(t) {
+  this.getChildContext = function() {
+    return t.context;
+  };
+  var s = t.children, e = v(t, E);
+  return f(s, e);
+}
+function S(t) {
+  var s = new CustomEvent("_preact", { detail: {}, bubbles: !0, cancelable: !0 });
+  this.dispatchEvent(s), this._vdom = l(x, u({}, this._props, { context: s.detail.context }), b(this, this._vdomComponent, t)), (this.hasAttribute("hydrate") ? g : d)(this._vdom, this._root);
+}
+function _(t) {
+  return t.replace(/-(\w)/g, function(s, e) {
+    return e ? e.toUpperCase() : "";
+  });
+}
+function j(t, s, e) {
+  if (this._vdom) {
+    var r = {};
+    r[t] = e = e ?? void 0, r[_(t)] = e, this._vdom = f(this._vdom, r), d(this._vdom, this._root);
+  }
+}
+function k() {
+  d(this._vdom = null, this._root);
+}
+function m(t, s) {
+  var e = this, r = t.useFragment, a = v(t, O);
+  return l(r ? C : "slot", u({}, a, { ref: function(n) {
+    n ? (e.ref = n, e._listener || (e._listener = function(o) {
+      o.stopPropagation(), o.detail.context = s;
+    }, n.addEventListener("_preact", e._listener))) : e.ref.removeEventListener("_preact", e._listener);
+  } }));
+}
+function b(t, s, e) {
+  if (t.nodeType === 3) return t.data;
+  if (t.nodeType !== 1) return null;
+  var r = [], a = {}, n = 0, o = t.attributes, i = t.childNodes;
+  for (n = o.length; n--; ) o[n].name !== "slot" && (a[o[n].name] = o[n].value, a[_(o[n].name)] = o[n].value);
+  for (n = i.length; n--; ) {
+    var p = b(i[n], null, e), c = i[n].slot;
+    c ? a[c] = l(m, { name: c }, p) : r[n] = p;
+  }
+  var h = !(!e || !e.shadow), y = s ? l(m, { useFragment: !h }, r) : r;
+  return !h && s && (t.innerHTML = ""), l(s || t.nodeName.toLowerCase(), a, y);
+}
+export {
+  A as default
+};

package/dist/es/index.js

@@ -1,6 +1,6 @@
-/* empty css                 */
-import "./global.js";
 import { Core as e } from "./packages/shared/core/src/Core.js";
+/* empty css                                 */
+import "./global.js";
 async function c(r) {
   return await new e(r).initialize();
 }

package/dist/es/packages/domains/capital/preact/src/CapitalOffer/CapitalOfferElement.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { UIElement as o } from "../../../../../shared/core/src/preact/UIElement.js";
+import { CapitalOffer as r } from "./components/CapitalOffer/CapitalOffer.js";
+class i extends o {
+  static type = "capitalOffer";
+  constructor(e) {
+    super(e), this.componentToRender = this.componentToRender.bind(this), this.customClassNames = "adyen-pe-capital-offer-component";
+  }
+  componentToRender = () => /* @__PURE__ */ t(r, { ...this.props });
+}
+export {
+  i as CapitalOfferElement,
+  i as default
+};

package/dist/es/packages/domains/capital/preact/src/CapitalOffer/components/CapitalOffer/CapitalOffer.js

@@ -0,0 +1,82 @@
+import { jsx as e } from "../../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as u, useState as i, useCallback as m } from "../../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { isCapitalRegionSupported as M } from "../../../internal/CapitalHeader/helpers.js";
+import { useConfigContext as C } from "../../../../../../../shared/core/src/preact/ConfigContext.js";
+import { EMPTY_OBJECT as d } from "../../../../../../../shared/utils/src/value/constants.js";
+import { useLandedPageEvent as _ } from "../../../../../../../shared/hooks-preact/src/useEventDispatcher/useLandedPageEvent.js";
+import { CapitalErrorMessageDisplay as q } from "../utils/CapitalErrorMessageDisplay.js";
+import { CAPITAL_OFFER_CLASS_NAMES as y, sharedCapitalOfferAnalyticsEventProperties as x } from "./constants.js";
+import { CapitalOfferSelection as G } from "../CapitalOfferSelection/CapitalOfferSelection.js";
+import { CapitalOfferSummary as L } from "../CapitalOfferSummary/CapitalOfferSummary.js";
+/* empty css                  */
+import { CapitalHeader as O } from "../../../internal/CapitalHeader/CapitalHeader.js";
+import { useFetch as N } from "../../../../../../../shared/core/src/preact/useFetch.js";
+const k = {
+  ...x,
+  subCategory: "Capital offer"
+}, B = ({
+  externalDynamicOffersConfig: t,
+  hideTitle: r,
+  onContactSupport: a,
+  onFundsRequest: S,
+  onOfferDismiss: g,
+  onOfferSelect: n
+}) => {
+  const [E, c] = i(!1), [h, v] = i(void 0), [A, T] = i(void 0), [f, p] = i(), { getDynamicGrantOffersConfiguration: s } = C().endpoints, b = m((o) => {
+    c(!o);
+  }, []), { data: P, error: R } = N({
+    fetchOptions: {
+      enabled: !t && !!s,
+      onSuccess: b
+    },
+    queryFn: m(async () => s?.(d, { query: d }), [s])
+  }), D = t || P, F = m(
+    (o) => {
+      n ? n(o) : p(o);
+    },
+    [n]
+  ), l = u(() => f ? "OfferSummary" : "OfferSelection", [f]);
+  return _({ ...k, label: "Capital offer" }), /* @__PURE__ */ e("div", { className: y.base, children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        hasDivider: !0,
+        hideTitle: r,
+        titleKey: l === "OfferSummary" ? "capital.offer.summary.title" : "capital.offer.selection.title"
+      }
+    ),
+    l === "OfferSelection" && /* @__PURE__ */ e(
+      G,
+      {
+        selectedAmount: h,
+        onSelectedAmountChange: v,
+        selectedTerm: A,
+        onSelectedTermChange: T,
+        dynamicOffersConfig: D,
+        dynamicOffersConfigError: R,
+        onOfferDismiss: g,
+        onOfferSelect: F,
+        emptyGrantOffer: E,
+        onContactSupport: a
+      }
+    ),
+    l === "OfferSummary" && /* @__PURE__ */ e(
+      L,
+      {
+        grantOffer: f,
+        onBack: () => p(void 0),
+        onFundsRequest: S,
+        onContactSupport: a
+      }
+    )
+  ] });
+}, Z = (t) => {
+  const r = C()?.extraConfig?.legalEntity;
+  return u(() => M(r), [r]) ? /* @__PURE__ */ e(B, { ...t }) : /* @__PURE__ */ e("div", { className: y.errorContainer, children: [
+    /* @__PURE__ */ e(O, { hideTitle: t.hideTitle, titleKey: "capital.common.title" }),
+    /* @__PURE__ */ e(q, { unsupportedRegion: !0 })
+  ] });
+};
+export {
+  Z as CapitalOffer
+};

package/dist/es/packages/domains/capital/preact/src/CapitalOffer/components/CapitalOfferLegalNotice/CapitalOfferLegalNotice.js

@@ -0,0 +1,40 @@
+import { jsx as r } from "../../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useConfigContext as i } from "../../../../../../../shared/core/src/preact/ConfigContext.js";
+import l from "../../../../../../../shared/ui-components-preact/src/AnchorButton/AnchorButton.js";
+import { SupportedLocation as n } from "../../../internal/CapitalHeader/constants.js";
+import m from "../../../../../../../shared/ui-components-preact/src/Card/Card.js";
+import { Translation as t } from "../../../../../../../shared/ui-components-preact/src/Translation/Translation.js";
+import { TypographyVariant as o } from "../../../../../../../shared/ui-components-preact/src/Typography/types.js";
+import a from "../../../../../../../shared/ui-components-preact/src/Typography/Typography.js";
+import { SUMMARY_TEXT_EMAIL as e } from "../CapitalOfferSummary/constants.js";
+/* empty css                             */
+import { Fragment as f } from "../../../../../../../../external/preact/dist/preact.module.js";
+import { ButtonVariant as p } from "../../../../../../../shared/types/src/uiComponents/button.js";
+const x = () => i()?.extraConfig?.legalEntity?.countryCode === n.US ? /* @__PURE__ */ r(m, { filled: !0, noOutline: !0, children: [
+  /* @__PURE__ */ r(a, { variant: o.CAPTION, className: "adyen-pe-capital-offer-legal-notice--title", children: /* @__PURE__ */ r(t, { translationKey: "capital.offer.summary.legalNotice.US.title", fills: { break: /* @__PURE__ */ r("br", {}) } }) }),
+  /* @__PURE__ */ r("br", {}),
+  /* @__PURE__ */ r(a, { variant: o.CAPTION, className: "adyen-pe-capital-offer-legal-notice--description", children: /* @__PURE__ */ r(
+    t,
+    {
+      translationKey: "capital.offer.summary.legalNotice.US.note",
+      fills: {
+        email: /* @__PURE__ */ r(
+          l,
+          {
+            href: `mailto:${e}`,
+            variant: p.TERTIARY,
+            className: "adyen-pe-capital-offer-summary__info--email",
+            children: e
+          }
+        ),
+        break: /* @__PURE__ */ r(f, { children: [
+          /* @__PURE__ */ r("br", {}),
+          /* @__PURE__ */ r("br", {})
+        ] })
+      }
+    }
+  ) })
+] }) : null;
+export {
+  x as CapitalOfferLegalNotice
+};

package/dist/es/packages/domains/capital/preact/src/CapitalOffer/components/CapitalOfferSelection/CapitalOfferSelection.js

@@ -0,0 +1,269 @@
+import { jsx as a } from "../../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import k from "../../../../../../../shared/ui-components-preact/src/Typography/Typography.js";
+import { TypographyVariant as L, TypographyElement as M } from "../../../../../../../shared/ui-components-preact/src/Typography/types.js";
+import oe from "../../../../../../../shared/ui-components-preact/src/StructuredList/StructuredList.js";
+import z from "../../../../../../../shared/ui-components-preact/src/Button/Button.js";
+import ne from "../../../../../../../shared/ui-components-preact/src/Card/Card.js";
+import Q from "../../../../../../../shared/core/src/preact/useCoreContext.js";
+import { useConfigContext as re } from "../../../../../../../shared/core/src/preact/ConfigContext.js";
+import ie from "../../../../../../../shared/core/src/preact/useEventDispatcherContext.js";
+import { useMemo as l, useRef as le, useCallback as d, useEffect as I, useState as se } from "../../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import U from "../../../../../../../shared/core/src/preact/useMutation/useMutation.js";
+import { debounce as ce } from "../../../../../../../shared/utils/src/async/debounce.js";
+import { DATE_FORMAT_CAPITAL_OVERVIEW as me } from "../../../../../../../shared/utils/src/datetime/formats.js";
+import { EMPTY_OBJECT as ue } from "../../../../../../../shared/utils/src/value/constants.js";
+import { useResponsiveContainer as pe, containerQueries as de } from "../../../../../../../shared/hooks-preact/src/useResponsiveContainer.js";
+import fe from "../../../../../../../shared/hooks-preact/src/useTimezoneAwareDateFormatting.js";
+/* empty css                           */
+import { sharedCapitalOfferAnalyticsEventProperties as ye } from "../CapitalOffer/constants.js";
+import { getMaximumRepaymentDate as ve, getPercentage as ge } from "../utils/utils.js";
+import { CapitalErrorMessageDisplay as he } from "../utils/CapitalErrorMessageDisplay.js";
+import { calculateSliderAdjustedMidValue as Re } from "../../../../../../../shared/ui-components-preact/src/Slider/Slider.js";
+import { TermSelector as Ae } from "../TermSelector.js";
+import { useFormatTermLabel as _e } from "../hooks/useFormatTermLabel.js";
+import { Fragment as F } from "../../../../../../../../external/preact/dist/preact.module.js";
+import { getRelativeToDefault as H, getValuePercentage as Pe } from "./utils.js";
+import be from "../../../internal/CapitalSlider/CapitalSlider.js";
+import { ButtonVariant as J } from "../../../../../../../shared/types/src/uiComponents/button.js";
+const V = 180, w = {
+  ...ye,
+  subCategory: "Business financing offer"
+}, De = ({ hasSingleTerm: t }) => {
+  const y = pe(de.down.xs), s = [...Array(t ? 5 : 4)];
+  return /* @__PURE__ */ a(F, { children: [
+    /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-skeleton" }),
+    /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-spacer" }),
+    y ? s.map((m, o) => /* @__PURE__ */ a(F, { children: [
+      /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-container", children: [
+        /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-skeleton" }),
+        /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-skeleton" })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-spacer" })
+    ] }, o)) : /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-container", children: s.map((m, o) => /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__loading-skeleton" }, o)) })
+  ] });
+}, Ee = ({ data: t, hasSingleTerm: y }) => {
+  const { i18n: s } = Q(), { dateFormat: m } = fe(), o = l(() => {
+    const c = t.maximumRepaymentPeriodDays, A = c && ve(c);
+    return A && m(A, me);
+  }, [t.maximumRepaymentPeriodDays, m]), S = _e();
+  return /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__information", children: [
+    /* @__PURE__ */ a(k, { el: M.SPAN, variant: L.CAPTION, stronger: !0, children: s.get("capital.common.termsTitle") }),
+    /* @__PURE__ */ a(
+      oe,
+      {
+        renderValue: (c) => /* @__PURE__ */ a(k, { el: M.SPAN, stronger: !0, variant: L.CAPTION, children: c }),
+        renderLabel: (c) => /* @__PURE__ */ a(k, { el: M.SPAN, variant: L.CAPTION, children: c }),
+        items: [
+          { key: "capital.common.fields.fees", value: s.amount(t.feesAmount.value, t.feesAmount.currency) },
+          {
+            key: "capital.common.fields.totalRepaymentAmount",
+            value: s.amount(t.totalAmount.value, t.totalAmount.currency)
+          },
+          {
+            key: "capital.common.fields.dailyRepaymentRate",
+            value: s.get("capital.common.values.percentage", {
+              values: { percentage: ge(t.repaymentRate) }
+            })
+          },
+          ...y ? [
+            {
+              key: "capital.common.fields.expectedRepaymentPeriod",
+              value: S(t.expectedRepaymentPeriodDays)
+            }
+          ] : [],
+          ...t.maximumRepaymentPeriodDays ? [
+            {
+              key: "capital.common.fields.maximumRepaymentDate",
+              value: o
+            }
+          ] : []
+        ]
+      }
+    )
+  ] });
+}, Oe = ({
+  dynamicOffersConfig: t,
+  dynamicOffersConfigError: y,
+  emptyGrantOffer: s,
+  selectedAmount: m,
+  selectedTerm: o,
+  onContactSupport: S,
+  onOfferDismiss: c,
+  onOfferSelect: A,
+  onSelectedAmountChange: _,
+  onSelectedTermChange: B
+}) => {
+  const { i18n: T } = Q(), v = ie(), P = l(
+    () => t && Re(t.minAmount.value, t.maxAmount.value, t.step),
+    [t]
+  ), j = le(!1), u = l(
+    () => t?.estimatedRepaymentTermsInDays.toSorted((e, i) => e - i) ?? [],
+    [t?.estimatedRepaymentTermsInDays]
+  ), b = l(() => t?.minAmount.currency, [t?.minAmount.currency]), { createGrantOffer: W, getDynamicGrantOffer: K } = re().endpoints, n = U({
+    queryFn: K,
+    options: {
+      retry: 1,
+      shouldRetry: d((e) => e.status === 500, []),
+      onSettled: d(() => {
+        q(!1);
+      }, [])
+    }
+  }), g = l(() => {
+    const e = n.data?.offers ?? [];
+    return Object.fromEntries(e.map((i) => [i.expectedRepaymentPeriodDays, i]));
+  }, [n.data]), r = l(() => Object.keys(g).map(Number), [g]), h = d(
+    (e) => {
+      const i = H(e, V), R = r.map((ae) => g[ae]?.repaymentRate), te = g[e]?.repaymentRate;
+      B(e), v.addEvent?.("Selected repayment term", {
+        ...w,
+        allTerms: u,
+        availableTerms: r,
+        selectedTerm: e,
+        relativeToDefault: i,
+        availableRates: R,
+        selectedRate: te
+      });
+    },
+    [u, r, g, B, v]
+  ), X = d((e) => h(e), [h]);
+  I(() => {
+    if (u.length > 0 && o === void 0) {
+      const e = r.includes(V) ? V : r[0];
+      e && h(e);
+    }
+  }, [u, r, h, o]), I(() => {
+    if (r.length > 0 && o !== void 0 && !r.includes(o)) {
+      const e = r.reduce((i, R) => Math.abs(R - o) < Math.abs(i - o) ? R : i);
+      h(e);
+    }
+  }, [r, h, o]);
+  const p = l(() => {
+    if (!(!n.data?.offers || o === void 0))
+      return n.data.offers.find((e) => e.expectedRepaymentPeriodDays === o);
+  }, [n.data, o]), f = U({
+    queryFn: W,
+    options: {
+      onSuccess: (e) => A(e)
+    }
+  }), Z = d(() => {
+    try {
+      p && o && f.mutate(
+        {
+          body: {
+            amount: p.grantAmount.value,
+            currency: p.grantAmount.currency,
+            selectedEstimatedRepaymentTermDays: o
+          },
+          contentType: "application/json"
+        },
+        { query: ue }
+      );
+    } finally {
+      v.addEvent?.("Clicked button", { ...w, label: "Review offer" });
+    }
+  }, [p, f, o, v]), D = d(
+    (e) => n.mutate({}, { query: { amount: e, currency: b } }),
+    [b, n]
+  ), [E, q] = se(!1), x = l(() => ce(D, 300), [D]), $ = d(
+    (e) => {
+      x.cancel(), q(!0), _(e);
+    },
+    [x, _]
+  ), N = d(
+    (e) => {
+      const i = H(e, P), R = Pe(e, t?.minAmount.value, t?.maxAmount.value);
+      v.addEvent?.("Changed capital offer slider", {
+        ...w,
+        label: "Slider changed",
+        currency: b,
+        value: e,
+        valuePercentage: R,
+        min: t?.minAmount.value,
+        max: t?.maxAmount.value,
+        relativeToDefault: i
+      });
+    },
+    [t, P, v, b]
+  ), O = d(
+    (e) => {
+      try {
+        return x(e);
+      } finally {
+        N(e);
+      }
+    },
+    [x, N]
+  );
+  I(() => {
+    if (t && !n.data && !j.current) {
+      j.current = !0;
+      const e = m ?? P ?? t.minAmount.value;
+      m || _(e), D(e), N(e);
+    }
+  }, [
+    t,
+    n.data,
+    D,
+    P,
+    m,
+    _,
+    N
+  ]);
+  const C = l(
+    () => f.isLoading || n.isLoading || E,
+    [n.isLoading, E, f.isLoading]
+  ), ee = !!t && !u.length, G = l(
+    () => !p || n.isLoading || E,
+    [n.isLoading, E, p]
+  ), Y = l(() => u.length === 1, [u.length]);
+  return /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection", children: f.error || n.error || s || y || ee ? /* @__PURE__ */ a(
+    he,
+    {
+      error: f.error || n.error || y,
+      onBack: c,
+      onContactSupport: S,
+      emptyGrantOffer: s
+    }
+  ) : /* @__PURE__ */ a(F, { children: [
+    t && /* @__PURE__ */ a(
+      be,
+      {
+        value: m,
+        dynamicOffersConfig: t,
+        onValueChange: $,
+        onRelease: O
+      }
+    ),
+    u.length > 1 && /* @__PURE__ */ a(
+      Ae,
+      {
+        allTerms: u,
+        availableTerms: r,
+        selectedTerm: o,
+        termOfferMap: g,
+        isLoadingIndicatorVisible: G,
+        onTermSelect: X
+      }
+    ),
+    /* @__PURE__ */ a(ne, { filled: !0, noOutline: !0, noPadding: !0, classNameModifiers: ["adyen-pe-capital-offer-selection__details"], children: G ? /* @__PURE__ */ a(De, { hasSingleTerm: Y }) : p ? /* @__PURE__ */ a(Ee, { data: p, hasSingleTerm: Y }) : null }),
+    /* @__PURE__ */ a("div", { className: "adyen-pe-capital-offer-selection__buttons", children: [
+      c && /* @__PURE__ */ a(z, { variant: J.SECONDARY, onClick: c, children: T.get("capital.common.actions.goBack") }),
+      /* @__PURE__ */ a(
+        z,
+        {
+          variant: J.PRIMARY,
+          state: C ? "loading" : void 0,
+          onClick: Z,
+          disabled: f.isLoading || !t?.minAmount || !p,
+          "aria-label": T.get("capital.offer.selection.actions.reviewOffer"),
+          children: T.get(
+            C ? "capital.offer.selection.actions.reviewOffer.states.loading" : "capital.offer.selection.actions.reviewOffer"
+          )
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  Oe as CapitalOfferSelection
+};