@adyen/adyen-platform-experience-web 1.8.1 → 1.10.0

package/dist/es/components/external/PaymentLinkCreation/components/Form/Summary/FormSummary.js

@@ -0,0 +1,125 @@
+import { jsx as e } from "../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import U from "classnames";
+import { Alert as q } from "../../../../../internal/Alert/Alert.js";
+import G from "../../../../../../core/Context/useCoreContext.js";
+import y from "../../../../../internal/Typography/Typography.js";
+import { AlertTypeOption as M, AlertVariantOption as Y } from "../../../../../internal/Alert/types.js";
+import { useResponsiveContainer as $, containerQueries as z } from "../../../../../../hooks/useResponsiveContainer.js";
+import { Divider as Q } from "../../../../../internal/Divider/Divider.js";
+import { TypographyElement as b, TypographyVariant as p } from "../../../../../internal/Typography/types.js";
+import { invisibleFields as C } from "./constants.js";
+import { useWizardFormContext as R } from "../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { useMemo as x } from "../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { Tag as O } from "../../../../../internal/Tag/Tag.js";
+/* empty css                 */
+import A from "../../../../../internal/StructuredList/StructuredList.js";
+import { Fragment as j } from "../../../../../../external/preact/dist/preact.module.js";
+const ce = ({ countryDatasetData: v }) => {
+  var N, I, B;
+  const { getSummaryData: P, getValues: T, getDisplayValue: _ } = R(), g = P(), { i18n: t } = G(), W = $(z.down.xs), E = x(() => {
+    const { payment: r } = g, s = r == null ? void 0 : r.fields.filter(({ id: m }) => !C.includes(m)), c = {
+      id: "store",
+      label: "payByLink.creation.summary.fields.store",
+      value: T("store"),
+      displayValue: _("store")
+    }, u = [...c ? [c] : [], ...s || []];
+    return (u == null ? void 0 : u.map(({ label: m, value: f, id: d, displayValue: k }) => ({
+      key: m || d,
+      value: k || f,
+      id: d,
+      render: (a) => {
+        var h, n;
+        switch (a.id) {
+          case "linkValidity.quantity": {
+            const i = (h = r == null ? void 0 : r.fields) == null ? void 0 : h.find((o) => o.id === "linkValidity.durationUnit");
+            return t.get(`payByLink.creation.fields.validity.linkValidityUnit.${i == null ? void 0 : i.value}`, {
+              values: { quantity: a.value },
+              count: Number(a.value)
+            });
+          }
+          case "amount.value": {
+            const i = (n = r == null ? void 0 : r.fields) == null ? void 0 : n.find((o) => o.id === "amount.currency");
+            return t.amount(a.value, i == null ? void 0 : i.value);
+          }
+          case "linkType":
+            return t.get(`payByLink.creation.form.linkTypes.${a.value}`);
+          default:
+            return a.value;
+        }
+      }
+    }))) || [];
+  }, [g, _, T, t]), l = x(() => {
+    var k, a, h;
+    const { customer: r } = g, s = r == null ? void 0 : r.fields.filter(({ id: n }) => !C.includes(n)), c = ({
+      label: n,
+      value: i,
+      id: o,
+      displayValue: w
+    }) => ({
+      key: n || o,
+      value: w || i,
+      id: o,
+      render: (L) => {
+        var V;
+        switch (L.id) {
+          case "countryCode":
+          case "deliveryAddress.country":
+          case "billingAddress.country":
+            return (V = v == null ? void 0 : v.find((H) => H.id === L.value)) == null ? void 0 : V.name;
+          default:
+            return L.value;
+        }
+      }
+    }), u = (k = s == null ? void 0 : s.filter((n) => {
+      var i;
+      return (i = n.id) == null ? void 0 : i.startsWith("deliveryAddress.");
+    })) == null ? void 0 : k.map(c), S = (a = s == null ? void 0 : s.filter((n) => {
+      var i;
+      return (i = n.id) == null ? void 0 : i.startsWith("billingAddress.");
+    })) == null ? void 0 : a.map(c), m = (h = s == null ? void 0 : s.filter((n) => {
+      var i, o;
+      return !((i = n == null ? void 0 : n.id) != null && i.startsWith("deliveryAddress.")) && !((o = n == null ? void 0 : n.id) != null && o.startsWith("billingAddress."));
+    })) == null ? void 0 : h.map(c), f = r == null ? void 0 : r.fields.find((n) => n.id === "sendLinkToShopper" && n.value === !0), d = r == null ? void 0 : r.fields.find((n) => n.id === "sendSuccessEmailToShopper" && n.value === !0);
+    return (f || d) && (m == null || m.splice(3, 0, {
+      key: "payByLink.creation.summary.fields.emailNotifications",
+      value: [d, f].filter(Boolean),
+      render: () => /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form-summary__tags-container", children: [
+        f && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(y, { variant: p.CAPTION, el: b.SPAN, stronger: !0, children: t.get("payByLink.creation.summary.fields.emailNotifications.emailCreation") }) }),
+        d && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(y, { variant: p.CAPTION, el: b.SPAN, stronger: !0, children: t.get("payByLink.creation.summary.fields.emailNotifications.paymentSuccess") }) })
+      ] })
+    })), { nonAddressItems: m, deliveryAddressItems: u, billingAddressItems: S };
+  }, [v, g, t]);
+  return /* @__PURE__ */ e("section", { className: U("adyen-pe-payment-link-creation-form-summary", { "adyen-pe-payment-link-creation-form-summary--mobile": W }), children: [
+    /* @__PURE__ */ e("section", { className: "adyen-pe-payment-link-creation-form-summary__section", children: [
+      /* @__PURE__ */ e(y, { variant: p.SUBTITLE, className: "adyen-pe-payment-link-creation-form-summary__section-title", children: t.get("payByLink.creation.summary.paymentDetails") }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(A, { layout: "5-7", align: "start", condensed: !1, items: E }) })
+    ] }),
+    ((N = l.nonAddressItems) == null ? void 0 : N.length) && /* @__PURE__ */ e(j, { children: [
+      /* @__PURE__ */ e(Q, {}),
+      /* @__PURE__ */ e("section", { className: "adyen-pe-payment-link-creation-form-summary__section", children: [
+        /* @__PURE__ */ e(y, { variant: p.SUBTITLE, className: "adyen-pe-payment-link-creation-form-summary__section-title", children: t.get("payByLink.creation.summary.shopperInformation") }),
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(A, { layout: "5-7", align: "start", condensed: !1, items: l.nonAddressItems }) })
+      ] })
+    ] }),
+    !!((I = l.deliveryAddressItems) != null && I.length) && /* @__PURE__ */ e("section", { className: "adyen-pe-payment-link-creation-form-summary__section", children: [
+      /* @__PURE__ */ e(y, { variant: p.BODY, className: "adyen-pe-payment-link-creation-form-summary__section-title", children: t.get("payByLink.creation.summary.deliveryAddress") }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(A, { layout: "5-7", align: "start", condensed: !1, items: l.deliveryAddressItems || [] }) })
+    ] }),
+    !!((B = l.billingAddressItems) != null && B.length) && /* @__PURE__ */ e("section", { className: "adyen-pe-payment-link-creation-form-summary__section", children: [
+      /* @__PURE__ */ e(y, { variant: p.BODY, className: "adyen-pe-payment-link-creation-form-summary__section-title", children: t.get("payByLink.creation.summary.billingAddress") }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(A, { layout: "5-7", align: "start", condensed: !1, items: l.billingAddressItems || [] }) })
+    ] }),
+    /* @__PURE__ */ e(
+      q,
+      {
+        className: "adyen-pe-payment-link-creation-form-summary__alert",
+        variant: Y.TIP,
+        type: M.HIGHLIGHT,
+        description: t.get("payByLink.creation.summary.alertDescription")
+      }
+    )
+  ] });
+};
+export {
+  ce as FormSummary
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/Summary/constants.js

@@ -0,0 +1,11 @@
+const e = [
+  "amount.currency",
+  "linkValidity.durationUnit",
+  "deliverAt",
+  "shopperLocale",
+  "sendSuccessEmailToShopper",
+  "sendLinkToShopper"
+];
+export {
+  e as invisibleFields
+};

package/dist/es/components/external/PaymentLinkCreation/components/PaymentLinkCreationContainer/PaymentLinkCreationContainer.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { PaymentLinkCreationFormContainer as k } from "../PaymentLinkCreationFormContainer/PaymentLinkCreationFormContainer.js";
+/* empty css                             */
+import { useState as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { FormSuccess as d } from "../Form/FormSuccess/FormSuccess.js";
+import { PaymentLinkDetails as L } from "../../../PaymentLinkDetails/components/PaymentLinkDetails/PaymentLinkDetails.js";
+const h = (t) => {
+  const [s, i] = a("Creation"), [c, l] = a(""), [u, y] = a("");
+  return /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation", children: (() => {
+    switch (s) {
+      case "Creation":
+        return /* @__PURE__ */ e(
+          k,
+          {
+            ...t,
+            onPaymentLinkCreated: (n) => {
+              var r, m, o;
+              (r = t.onPaymentLinkCreated) == null || r.call(t, n), l(((m = n.paymentLink) == null ? void 0 : m.url) ?? ""), y(((o = n.paymentLink) == null ? void 0 : o.paymentLinkId) ?? ""), i("Success");
+            }
+          }
+        );
+      case "Success":
+        return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(d, { paymentLinkUrl: c, onGoToDetails: () => i("Details") }) });
+      case "Details":
+        return /* @__PURE__ */ e(L, { id: u });
+      default:
+        return null;
+    }
+  })() });
+};
+export {
+  h as default
+};

package/dist/es/components/external/PaymentLinkCreation/components/PaymentLinkCreationFormContainer/FormStepRenderer.js

@@ -0,0 +1,57 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { CustomerDetailsForm as y } from "../Form/CustomerDetailsForm/CustomerDetailsForm.js";
+import { PaymentDetailsForm as t } from "../Form/PaymentDetailsForm/PaymentDetailsForm.js";
+import { FormSummary as S } from "../Form/Summary/FormSummary.js";
+import { StoreForm as x } from "../Form/StoreForm/StoreForm.js";
+const P = ({
+  setShowTermsAndConditions: u,
+  currentFormStep: i,
+  settingsData: n,
+  storeIds: p,
+  storesData: m,
+  selectItems: c,
+  termsAndConditionsProvisioned: f,
+  configurationData: e,
+  isSeparateAddress: s,
+  setIsSeparateAddress: F,
+  countriesData: a,
+  isFetchingCountries: d,
+  countryDatasetData: o,
+  isFetchingCountryDataset: l
+}) => {
+  switch (i) {
+    case "store":
+      return /* @__PURE__ */ r(
+        x,
+        {
+          setShowTermsAndConditions: u,
+          settingsData: n,
+          storeIds: p,
+          storesData: m == null ? void 0 : m.data,
+          selectItems: c,
+          termsAndConditionsProvisioned: f
+        }
+      );
+    case "payment":
+      return /* @__PURE__ */ r(t, { configuration: e });
+    case "customer":
+      return /* @__PURE__ */ r(
+        y,
+        {
+          isSeparateAddress: s,
+          setIsSeparateAddress: F,
+          countriesData: a,
+          isFetchingCountries: d,
+          countryDatasetData: o,
+          isFetchingCountryDataset: l
+        }
+      );
+    case "summary":
+      return /* @__PURE__ */ r(S, { countryDatasetData: o });
+    default:
+      return /* @__PURE__ */ r(t, { configuration: e });
+  }
+};
+export {
+  P as FormStepRenderer
+};

package/dist/es/components/external/PaymentLinkCreation/components/PaymentLinkCreationFormContainer/PaymentLinkCreationFormContainer.js

@@ -0,0 +1,272 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import A from "../../../../internal/Typography/Typography.js";
+import Ee from "../../../../../core/Context/useCoreContext.js";
+import { TypographyVariant as F, TypographyElement as Re } from "../../../../internal/Typography/types.js";
+import { Stepper as De } from "../../../../internal/Stepper/Stepper.js";
+import { useState as x, useRef as P, useCallback as m, useEffect as xe, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { WizardFormProvider as Pe } from "../../../../../hooks/form/wizard/WizardFormContext.js";
+import { ButtonVariant as I } from "../../../../internal/Button/types.js";
+/* empty css                             */
+/* empty css                             */
+import Me from "../../../../../hooks/useMutation/useMutation.js";
+import { usePaymentLinkFormData as Oe } from "./usePaymentLinkFormData.js";
+import { scrollToFirstErrorField as Ve } from "../../utils.js";
+import { useResponsiveContainer as We, containerQueries as $e } from "../../../../../hooks/useResponsiveContainer.js";
+import { FormStepRenderer as Ye } from "./FormStepRenderer.js";
+import je from "../../../PaymentLinkSettings/components/PaymentLinkSettingsContainer/PaymentLinkSettingsContainer.js";
+import { AlertTypeOption as U } from "../../../../internal/Alert/types.js";
+import { Alert as H } from "../../../../internal/Alert/Alert.js";
+import { ErrorMessageDisplay as qe } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { useInvalidFieldsConfig as ze } from "../../hooks/useInvalidFieldsConfig.js";
+import Ge from "../../../../internal/CopyText/CopyText.js";
+import { Translation as Ke } from "../../../../internal/Translation/Translation.js";
+import b from "../../../../internal/Button/Button.js";
+import { Fragment as X } from "../../../../../external/preact/dist/preact.module.js";
+import { Icon as Ue } from "../../../../internal/Icon/Icon.js";
+const Q = 28, He = () => /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__skeleton", children: [
+  /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__skeleton-item adyen-pe-payment-link-creation-form__skeleton-item--large" }),
+  [...Array(3)].map((i, d) => /* @__PURE__ */ e(X, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "adyen-pe-payment-link-creation-form__skeleton-item adyen-pe-payment-link-creation-form__skeleton-item--small"
+      },
+      `${d}-small`
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "adyen-pe-payment-link-creation-form__skeleton-item adyen-pe-payment-link-creation-form__skeleton-item--large"
+      },
+      `${d}-large`
+    )
+  ] }))
+] }), St = ({
+  fieldsConfig: i,
+  storeIds: d,
+  onCreationDismiss: g,
+  onPaymentLinkCreated: L,
+  onContactSupport: p,
+  embeddedInOverview: J
+}) => {
+  var q;
+  const [Z, ee] = x(!1), M = P(null), O = P(null), te = !!((q = i == null ? void 0 : i.data) != null && q.billingAddress), [re, ne] = x(te), k = P(""), { i18n: r } = Ee(), v = We($e.down.xs), {
+    storesData: u,
+    configurationData: B,
+    countriesData: oe,
+    isFetchingCountries: ae,
+    countryDatasetData: ie,
+    isFetchingCountryDataset: se,
+    settingsData: ce,
+    storesSelectorItems: le,
+    termsAndConditionsProvisioned: w,
+    formSteps: _,
+    stepperItems: me,
+    formStepsAriaLabel: de,
+    wizardForm: y,
+    createPaymentLink: pe,
+    isDataLoading: ue,
+    isFirstLoadDone: ye,
+    selectedStore: V,
+    setSelectedStore: S
+  } = Oe({
+    defaultValues: i == null ? void 0 : i.data,
+    storeIds: d
+  }), { isLastStep: f, isFirstStep: W, currentStep: l, validateStep: $, canGoNext: fe, isStepComplete: he, nextStep: Y, previousStep: ge, goToStep: j } = y, [ke, T] = x(!1), ve = m(
+    async (t) => {
+      var o;
+      if (!f) {
+        if (!await $(t)) {
+          const n = ((o = O.current) == null ? void 0 : o.getBoundingClientRect().height) ?? 0, c = v ? n + Q : Q;
+          Ve(Object.keys(y.formState.errors), c);
+          return;
+        }
+        await Y();
+      }
+    },
+    [f, Y, $, y.formState.errors, v]
+  );
+  xe(() => {
+    var t;
+    v && ((t = M.current) == null || t.scrollIntoView({ block: "start" }));
+  }, [l, v]);
+  const _e = m(
+    (t) => {
+      j(t);
+    },
+    [j]
+  ), C = h(() => {
+    const t = _ == null ? void 0 : _[l];
+    return t ? t.id : "store";
+  }, [l, _]), Se = () => {
+    if (W) {
+      g == null || g();
+      return;
+    }
+    s.reset(), ge();
+  }, Te = async () => {
+    await ve(l);
+  }, s = Me({
+    queryFn: pe
+  }), Ne = async (t) => {
+    const { store: o, ...a } = t;
+    try {
+      const n = await s.mutate(
+        {
+          body: a,
+          contentType: "application/json"
+        },
+        { path: { storeId: o } }
+      );
+      L == null || L({ ...t, paymentLink: n });
+    } catch (n) {
+      throw console.error("Failed to create payment link:", n), n;
+    }
+  }, Ae = m(() => {
+    S(k.current), T(!1), k.current = "";
+  }, [T, S]), Fe = (t) => {
+    ee(!0);
+  }, Ie = s.isLoading || ue, E = h(() => u && u.data && u.data.length === 0, [u]), R = h(() => C !== "store" && !B, [B, C]), be = h(() => !w || E || R, [E, R, w]), { invalidFieldsConfig: D } = ze(), N = m(
+    (t) => {
+      var o;
+      return !t || !("invalidFields" in t) || !((o = t.invalidFields) != null && o.length) ? [] : t.invalidFields.map((a) => {
+        var G, K;
+        const n = (G = D.fields) == null ? void 0 : G[a.name], c = (K = D.messages) == null ? void 0 : K[a.message];
+        if (!n && !c) return null;
+        const z = n ? r.get(n) : a.name;
+        if (!c) return `${z}`;
+        const Ce = r.get(c);
+        return `${z} (${Ce})`;
+      }).filter((a) => a !== null);
+    },
+    [r, D]
+  ), Le = m(() => {
+    k.current = V, S(""), T(!0);
+  }, [V, S, T]), Be = m(
+    (t) => N(t).length ? r.get("payByLink.creation.form.alert.invalidFields") : r.get("payByLink.creation.form.alert.somethingWentWrong"),
+    [N, r]
+  ), we = h(() => {
+    const t = s.error, o = N(t), a = o.length > 0;
+    return /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__error-alert", children: [
+      a && /* @__PURE__ */ e("ul", { className: "adyen-pe-payment-link-creation-form__invalid-fields-error", children: o.map((n, c) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(A, { variant: F.CAPTION, children: n }) }, c)) }),
+      p && /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__contact-support", children: /* @__PURE__ */ e(
+        Ke,
+        {
+          translationKey: "payByLink.creation.form.error.submit.contactSupport",
+          fills: {
+            contactSupport: /* @__PURE__ */ e(b, { variant: I.TERTIARY, onClick: p, children: r.get("common.actions.contactSupport.labels.reachOut") }),
+            errorCode: /* @__PURE__ */ e(Ge, { stronger: !0, textToCopy: (t == null ? void 0 : t.requestId) || (t == null ? void 0 : t.errorCode) })
+          }
+        }
+      ) })
+    ] });
+  }, [N, r, p, s.error]);
+  return ye ? ke ? /* @__PURE__ */ e(
+    je,
+    {
+      hideTitle: !0,
+      storeIds: k.current,
+      settingsItems: ["termsAndConditions"],
+      navigateBack: Ae,
+      embeddedInOverview: J
+    }
+  ) : /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__component", ref: M, children: [
+    /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__header", ref: O, children: [
+      /* @__PURE__ */ e(A, { variant: F.SUBTITLE, stronger: !0, children: r.get("payByLink.creation.form.title") }),
+      /* @__PURE__ */ e(
+        De,
+        {
+          nextStepDisabled: !fe || !he(l),
+          variant: "horizontal",
+          activeIndex: l,
+          ariaLabel: de,
+          onChange: _e,
+          children: me.map((t) => /* @__PURE__ */ e(X, { children: t.label }))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(Pe, { ...y, children: /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__container", children: /* @__PURE__ */ e(
+      "form",
+      {
+        className: "adyen-pe-payment-link-creation-form",
+        onSubmit: (t) => {
+          t.preventDefault(), y.handleSubmit(Ne, Fe)(t);
+        },
+        children: [
+          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+            Ye,
+            {
+              setShowTermsAndConditions: Le,
+              currentFormStep: C,
+              settingsData: ce,
+              storeIds: d,
+              storesData: u,
+              selectItems: le,
+              termsAndConditionsProvisioned: w,
+              configurationData: B,
+              isSeparateAddress: re,
+              setIsSeparateAddress: ne,
+              countriesData: oe,
+              isFetchingCountries: ae,
+              countryDatasetData: ie,
+              isFetchingCountryDataset: se
+            }
+          ) }),
+          (R || Z) && /* @__PURE__ */ e(
+            qe,
+            {
+              condensed: !0,
+              title: "common.errors.somethingWentWrong",
+              withImage: !0,
+              absolutePosition: !1,
+              outlined: !1,
+              withBackground: !1,
+              message: ["payByLink.creation.errors.unavailable", "common.errors.retry"]
+            }
+          ),
+          E && /* @__PURE__ */ e(
+            H,
+            {
+              type: U.WARNING,
+              title: r.get("payByLink.common.errors.accountConfiguration"),
+              description: /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__warning-alert", children: [
+                /* @__PURE__ */ e(A, { variant: F.CAPTION, el: Re.SPAN, children: r.get("common.errors.contactSupport") }),
+                p ? /* @__PURE__ */ e(b, { variant: I.TERTIARY, onClick: p, children: r.get("common.actions.contactSupport.labels.reachOut") }) : null
+              ] })
+            }
+          ),
+          s.isError && /* @__PURE__ */ e(
+            H,
+            {
+              type: U.CRITICAL,
+              title: Be(s.error),
+              description: we
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__buttons-container", children: [
+            (!W || g) && /* @__PURE__ */ e(b, { variant: I.SECONDARY, onClick: Se, children: r.get("payByLink.creation.form.steps.back") }),
+            /* @__PURE__ */ e(
+              b,
+              {
+                className: "adyen-pe-payment-link-creation-form__submit-button",
+                type: f ? "submit" : "button",
+                variant: I.PRIMARY,
+                onClick: f ? void 0 : Te,
+                state: Ie ? "loading" : void 0,
+                disabled: be,
+                iconRight: /* @__PURE__ */ e(Ue, { name: "arrow-right" }),
+                children: f ? r.get("payByLink.creation.form.steps.submit") : r.get("payByLink.creation.form.steps.continue")
+              }
+            )
+          ] })
+        ]
+      }
+    ) }) })
+  ] }) : /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__component", children: /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__header", children: [
+    /* @__PURE__ */ e(A, { variant: F.SUBTITLE, stronger: !0, children: r.get("payByLink.creation.form.title") }),
+    /* @__PURE__ */ e(He, {})
+  ] }) });
+};
+export {
+  St as PaymentLinkCreationFormContainer
+};

package/dist/es/components/external/PaymentLinkCreation/components/PaymentLinkCreationFormContainer/usePaymentLinkFormData.js

@@ -0,0 +1,108 @@
+import { useState as j, useCallback as m, useMemo as l, useEffect as q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as h } from "../../../../../hooks/useFetch.js";
+import { getFormSteps as J } from "../../utils.js";
+import Q from "../../../../../core/Context/useCoreContext.js";
+import { useWizardForm as W } from "../../../../../hooks/form/wizard/useWizardForm.js";
+import { useConfigContext as Y } from "../../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as S } from "../../../../../utils/value/constants.js";
+const re = ({ storeIds: p, defaultValues: r }) => {
+  const [n, L] = j(""), { i18n: o, getCdnDataset: C } = Q(), {
+    countries: y,
+    getPayByLinkConfiguration: u,
+    createPBLPaymentLink: E,
+    getPayByLinkSettings: F,
+    getPayByLinkStores: g
+  } = Y().endpoints, { data: b, isFetching: k } = h({
+    fetchOptions: { enabled: !!g },
+    queryFn: m(async () => g == null ? void 0 : g(S, {}), [g])
+  }), s = l(() => ((b == null ? void 0 : b.data) ?? []).filter(({ storeId: e }) => p ? Array.isArray(p) && e ? p.includes(e) : p === e : !0).map(({ storeCode: e, storeId: $ }) => ({
+    id: $ || "",
+    name: e || ""
+  })), [b, p]), {
+    data: a,
+    isFetching: x,
+    error: D
+  } = h({
+    fetchOptions: { enabled: !!u && !!n },
+    queryFn: m(async () => u == null ? void 0 : u(S, { path: { storeId: n } }), [u, n])
+  }), {
+    data: i,
+    isFetching: B,
+    error: R
+  } = h({
+    fetchOptions: { enabled: !!F && !!n },
+    queryFn: m(async () => F == null ? void 0 : F(S, { path: { storeId: n } }), [F, n])
+  }), A = l(() => !!(i != null && i.termsOfServiceUrl), [i == null ? void 0 : i.termsOfServiceUrl]), c = m(
+    (t) => a == null ? void 0 : a[t],
+    [a]
+  ), O = l(() => !!(c("deliveryAddress") || c("billingAddress") || c("countryCode")), [c("deliveryAddress"), c("billingAddress"), c("countryCode")]), { data: P, isFetching: T } = h({
+    fetchOptions: { enabled: O && !!y },
+    queryFn: m(async () => y == null ? void 0 : y(S), [y])
+  }), { data: U, isFetching: w } = h({
+    fetchOptions: { enabled: O },
+    queryFn: m(async () => {
+      const t = `${o.locale ?? "en-US"}`;
+      return C ? await C({
+        name: t,
+        extension: "json",
+        subFolder: "countries",
+        fallback: []
+      }) ?? [] : [];
+    }, [C, o.locale, O])
+  }), f = l(() => {
+    const t = s.length === 1 && A;
+    return J({ i18n: o, getFieldConfig: c }).filter((e) => !(e.id === "store" && t));
+  }, [c, o, s, A]), z = l(() => f.map((t) => ({
+    id: t.id,
+    label: o.get(`payByLink.creation.form.steps.${t.id}`)
+  })), [f, o]), M = l(() => o.get("payByLink.creation.steps.a11y.label"), [o]), d = W({
+    i18n: o,
+    steps: f,
+    defaultValues: {
+      ...r,
+      billingAddress: (r == null ? void 0 : r.billingAddress) || (r == null ? void 0 : r.deliveryAddress) || {},
+      store: n || (r == null ? void 0 : r.store) || ""
+    },
+    mode: "all",
+    validateBeforeNext: !0
+  });
+  q(() => {
+    var t, e;
+    s.length === 1 && (d.setValue("store", (t = s[0]) == null ? void 0 : t.id), d.setFieldDisplayValue("store", (e = s[0]) == null ? void 0 : e.name));
+  }, [s]), q(() => d.control.subscribe(() => {
+    const e = d.control.getValue("store");
+    e && e !== n && L(e);
+  }), [d.control, n]);
+  const v = x || B || k, N = s.length === 1;
+  return {
+    // Query data
+    storesData: b,
+    configurationData: a,
+    settingsData: i,
+    // Store data
+    selectedStore: n,
+    storesSelectorItems: s,
+    termsAndConditionsProvisioned: A,
+    // Countries data
+    countriesData: P,
+    isFetchingCountries: T,
+    // Countries dataset
+    countryDatasetData: U,
+    isFetchingCountryDataset: w,
+    // Form steps
+    formSteps: f,
+    stepperItems: z,
+    formStepsAriaLabel: M,
+    // Wizard form
+    wizardForm: d,
+    // Endpoints
+    createPaymentLink: E,
+    // Loading state
+    isDataLoading: v,
+    isFirstLoadDone: !!(!k && (!N || !v && (a || D) && (!v && (i || R)))),
+    setSelectedStore: L
+  };
+};
+export {
+  re as usePaymentLinkFormData
+};

package/dist/es/components/external/PaymentLinkCreation/constants.js

@@ -0,0 +1,59 @@
+const e = {
+  emailAddress: {
+    max: 500
+  },
+  merchantReference: {
+    min: 3,
+    max: 256
+  },
+  shopperName: {
+    firstName: {
+      max: 80
+    },
+    lastName: {
+      max: 80
+    }
+  },
+  telephoneNumber: {
+    max: 32
+  },
+  billingAddress: {
+    street: {
+      max: 3e3
+    },
+    houseNumberOrName: {
+      max: 3e3
+    },
+    postalCode: {
+      max: 10
+    },
+    city: {
+      max: 3e3
+    }
+  },
+  deliveryAddress: {
+    street: {
+      max: 3e3
+    },
+    houseNumberOrName: {
+      max: 3e3
+    },
+    postalCode: {
+      max: 10
+    },
+    city: {
+      max: 3e3
+    }
+  },
+  shopperReference: {
+    min: 3,
+    max: 256
+  },
+  description: {
+    max: 280
+  }
+}, m = ["hour", "minute", "day", "week"];
+export {
+  m as LINK_VALIDITY_DURATION_UNITS,
+  e as PAYMENT_LINK_CREATION_FIELD_LENGTHS
+};