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

package/dist/es/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/CountryRegionField.js

@@ -0,0 +1,26 @@
+import { jsx as w } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "../../../../../../../core/Context/useCoreContext.js";
+import { useMemo as F } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { FormSelect as g } from "../../../../../../internal/FormWrappers/FormSelect.js";
+import { useWizardFormContext as h } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+const I = ({ countriesData: e, isFetchingCountries: C, countryDatasetData: l, isFetchingCountryDataset: f }) => {
+  const { i18n: s } = x(), { fieldsConfig: m } = h(), b = F(() => {
+    var p, n, i;
+    const d = new Set(((p = m == null ? void 0 : m.countryCode) == null ? void 0 : p.options) ?? ((n = e == null ? void 0 : e.data) == null ? void 0 : n.map(({ countryCode: o }) => o)) ?? []);
+    return (l != null && l.length ? l : ((i = e == null ? void 0 : e.data) == null ? void 0 : i.map(({ countryCode: o, countryName: r }) => ({ id: o, name: r }))) ?? []).filter(({ id: o }) => !d.size || d.has(o)).sort((o, r) => o.name.localeCompare(r.name));
+  }, [e == null ? void 0 : e.data, l, m]);
+  return /* @__PURE__ */ w(
+    g,
+    {
+      clearable: !0,
+      filterable: !0,
+      fieldName: "countryCode",
+      label: s.get("payByLink.creation.fields.country.label"),
+      items: b,
+      readonly: C || f
+    }
+  );
+};
+export {
+  I as CountryRegionField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/LanguageField.js

@@ -0,0 +1,36 @@
+import { jsx as i } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../../../../../../../core/Context/useCoreContext.js";
+import { useMemo as l, useCallback as p } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as d } from "../../../../../../../hooks/useFetch.js";
+import { FormSelect as g } from "../../../../../../internal/FormWrappers/FormSelect.js";
+import { useWizardFormContext as f } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+const j = () => {
+  const { i18n: m, getCdnDataset: n } = c(), { fieldsConfig: t } = f(), e = l(() => {
+    var s;
+    return (s = t == null ? void 0 : t.shopperLocale) == null ? void 0 : s.options;
+  }, [t]), o = d({
+    fetchOptions: { enabled: !0 },
+    queryFn: p(async () => n ? await n({
+      name: "languages",
+      extension: "json",
+      fallback: []
+    }) ?? [] : [], [n])
+  }), u = l(() => (o.data ?? []).filter(({ value: a }) => e != null && e.length ? e == null ? void 0 : e.includes(a) : !0).map(({ text: a, value: r }) => ({
+    // TODO - Handle 'auto detect' option when submitting information to the BE
+    id: r === null ? "auto" : r,
+    name: a
+  })).sort(({ name: a }, { name: r }) => a.localeCompare(r)), [o.data, e]);
+  return /* @__PURE__ */ i(
+    g,
+    {
+      filterable: !0,
+      fieldName: "shopperLocale",
+      label: m.get("payByLink.creation.fields.language.label"),
+      items: u,
+      readonly: o.isFetching
+    }
+  );
+};
+export {
+  j as LanguageField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperEmailField.js

@@ -0,0 +1,37 @@
+import { jsx as n } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import o from "../../../../../../../core/Context/useCoreContext.js";
+import { useMemo as m, useCallback as p } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { FormTextInput as d } from "../../../../../../internal/FormWrappers/FormTextInput.js";
+import { PAYMENT_LINK_CREATION_FIELD_LENGTHS as u } from "../../../../constants.js";
+const x = () => {
+  const { i18n: i } = o(), e = m(
+    () => ({
+      valid: !1,
+      message: i.get("payByLink.creation.fields.shopperEmail.error.validEmail")
+    }),
+    [i]
+  ), l = p(
+    (r) => {
+      r = String(r).toLowerCase().trim();
+      const s = r.split("@");
+      if (s.length !== 2)
+        return e;
+      const [a, t] = s;
+      return !a || !t || a.length === 0 || a.startsWith(".") || a.endsWith(".") || a.includes("..") || t.length === 0 || t.startsWith(".") || t.endsWith(".") || t.includes("..") || !t.includes(".") || !// eslint-disable-next-line max-len
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(r) ? e : { valid: !0 };
+    },
+    [e]
+  );
+  return /* @__PURE__ */ n(
+    d,
+    {
+      fieldName: "shopperEmail",
+      label: i.get("payByLink.creation.fields.shopperEmail.label"),
+      validate: l,
+      maxLength: u.emailAddress.max
+    }
+  );
+};
+export {
+  x as ShopperEmailField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/Fields/ShopperPhoneField.js

@@ -0,0 +1,96 @@
+import { jsx as c } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as l, useEffect as F, useCallback as D } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as P } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { useFetch as q } from "../../../../../../../hooks/useFetch.js";
+import { VisibleField as I } from "../../../../../../internal/FormWrappers/VisibleField.js";
+import k from "../../../../../../internal/FormFields/InputBase.js";
+import w from "../../../../../../internal/FormWrappers/FormField.js";
+import T from "../../../../../../../core/Context/useCoreContext.js";
+import { PAYMENT_LINK_CREATION_FIELD_LENGTHS as j } from "../../../../constants.js";
+import { filterDisallowedCharacters as B } from "../../../../../../internal/FormFields/utils.js";
+import { Controller as E } from "../../../../../../../hooks/form/Controller.js";
+const Y = () => {
+  const { i18n: p, getCdnDataset: b } = T(), { control: V, fieldsConfig: y, getValues: g, setValue: m, setFieldDisplayValue: d, getDisplayValue: C, trigger: $, formState: h } = P(), u = l(() => C("telephoneNumber"), [C]), t = l(() => g("telephoneNumber"), [g]), [n, s] = l(() => {
+    if (u) {
+      const [e, ...r] = u.split(" ");
+      return [e, r.join(" ")];
+    }
+    if (t) {
+      const [e, ...r] = t.split(" ");
+      return [e, r.join(" ")];
+    }
+    return [void 0, void 0];
+  }, [u, t]);
+  F(() => {
+    if (!u && t) {
+      const [e, ...r] = t.split(" "), o = r.join(" ");
+      m("telephoneNumber", `${e}${o}`), d("telephoneNumber", `${e} ${o}`);
+    }
+  }, [u, t, m, d]);
+  const f = q({
+    fetchOptions: { enabled: !0 },
+    queryFn: D(async () => b ? await b({
+      name: "phonenumbers",
+      extension: "json",
+      fallback: []
+    }) ?? [] : [], [b])
+  }), x = l(() => (f.data ?? []).map(({ id: r, prefix: o }) => ({ id: o, name: `${r} (${o})` })).sort(({ name: r }, { name: o }) => r.localeCompare(o)), [f.data]);
+  F(() => {
+    n && h.touchedFields.telephoneNumber && h.errors.telephoneNumber && $("telephoneNumber");
+  }, [n, s, $, h.errors, h.touchedFields]);
+  const N = l(() => {
+    var e;
+    return (e = y.telephoneNumber) == null ? void 0 : e.required;
+  }, [y]), L = D(() => !N && !n && !s ? { valid: !0 } : n ? s ? { valid: !0 } : { valid: !1, message: p.get("payByLink.creation.fields.phoneNumber.errors.requiredPhoneNumber") } : { valid: !1, message: p.get("payByLink.creation.fields.phoneNumber.errors.requiredPhoneCode") }, [n, s]);
+  return /* @__PURE__ */ c(I, { name: "telephoneNumber", children: /* @__PURE__ */ c(w, { label: p.get("payByLink.creation.fields.shopperPhone.label"), optional: !N, children: /* @__PURE__ */ c(
+    E,
+    {
+      name: "telephoneNumber",
+      control: V,
+      rules: {
+        required: N,
+        validate: L
+      },
+      render: ({ field: e, fieldState: r }) => {
+        var v;
+        const o = !!r.error && r.isTouched;
+        return /* @__PURE__ */ c(
+          k,
+          {
+            ...e,
+            onKeyDown: (i) => {
+              B({
+                event: i,
+                inputType: "number"
+              });
+            },
+            onInput: (i) => {
+              const a = i.target.value;
+              m("telephoneNumber", `${n ?? ""}${a}`), d("telephoneNumber", `${n ?? ""} ${a}`);
+            },
+            value: s,
+            type: "text",
+            dropdown: {
+              filterable: !0,
+              items: x,
+              value: n,
+              placeholder: p.get("payByLink.creation.fields.shopperPhone.phonePrefix.placeholder"),
+              readonly: f.isFetching
+            },
+            onDropdownInput: (i) => {
+              const a = s || "";
+              m("telephoneNumber", `${i}${a}`), d("telephoneNumber", `${i} ${a}`);
+            },
+            isValid: !r.error && !!e.value,
+            isInvalid: o,
+            errorMessage: (v = r.error) == null ? void 0 : v.message,
+            maxLength: j.telephoneNumber.max
+          }
+        );
+      }
+    }
+  ) }) });
+};
+export {
+  Y as ShopperPhoneField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/CustomerDetailsForm/useAddressChecker.js

@@ -0,0 +1,43 @@
+import { useCallback as N } from "../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as p } from "../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { useWatch as s } from "../../../../../../hooks/form/useWatch.js";
+const o = [
+  "deliveryAddress.street",
+  "deliveryAddress.houseNumberOrName",
+  "deliveryAddress.country",
+  "deliveryAddress.city",
+  "deliveryAddress.postalCode"
+], n = [
+  "billingAddress.street",
+  "billingAddress.houseNumberOrName",
+  "billingAddress.country",
+  "billingAddress.city",
+  "billingAddress.postalCode"
+], f = () => {
+  const { control: e } = p(), u = s(e, "deliveryAddress.street"), c = s(e, "deliveryAddress.houseNumberOrName"), y = s(e, "deliveryAddress.country"), A = s(e, "deliveryAddress.city"), b = s(e, "deliveryAddress.postalCode"), v = s(e, "billingAddress.street"), a = s(e, "billingAddress.houseNumberOrName"), g = s(e, "billingAddress.country"), m = s(e, "billingAddress.city"), C = s(e, "billingAddress.postalCode"), i = {
+    "deliveryAddress.street": u,
+    "deliveryAddress.houseNumberOrName": c,
+    "deliveryAddress.country": y,
+    "deliveryAddress.city": A,
+    "deliveryAddress.postalCode": b
+  }, l = {
+    "billingAddress.street": v,
+    "billingAddress.houseNumberOrName": a,
+    "billingAddress.country": g,
+    "billingAddress.city": m,
+    "billingAddress.postalCode": C
+  };
+  return { isAddressFieldRequired: N(
+    (t) => o.includes(t) ? o.some((d) => {
+      const r = i[d];
+      return r !== void 0 && r !== "";
+    }) : n.includes(t) ? n.some((d) => {
+      const r = l[d];
+      return r !== void 0 && r !== "";
+    }) : !1,
+    [i, l]
+  ) };
+};
+export {
+  f as useAddressChecker
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/FormSuccess/FormSuccess.js

@@ -0,0 +1,47 @@
+import { jsx as e } from "../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import y from "classnames";
+import f from "../../../../../../core/Context/useCoreContext.js";
+import i from "../../../../../internal/Typography/Typography.js";
+import { TypographyVariant as o } from "../../../../../internal/Typography/types.js";
+import { Icon as s } from "../../../../../internal/Icon/Icon.js";
+import m from "../../../../../internal/Button/Button.js";
+import { ButtonVariant as p } from "../../../../../internal/Button/types.js";
+/* empty css                 */
+import { useState as d, useRef as k, useEffect as h, useCallback as _ } from "../../../../../../external/preact/hooks/dist/hooks.module.js";
+const A = ({ onGoToDetails: l, paymentLinkUrl: n }) => {
+  const { i18n: t } = f(), [r, a] = d(!1), c = k(null);
+  h(() => () => {
+    c.current && clearTimeout(c.current);
+  }, []);
+  const u = _(async () => {
+    if (n)
+      try {
+        await navigator.clipboard.writeText(n), a(!0), c.current && clearTimeout(c.current), c.current = setTimeout(() => {
+          a(!1), c.current = null;
+        }, 3e3);
+      } catch {
+      }
+  }, [n]);
+  return /* @__PURE__ */ e("section", { className: y("adyen-pe-payment-link-creation-form-success"), children: [
+    /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form-success__content", children: [
+      /* @__PURE__ */ e(s, { name: "checkmark-circle-fill", className: "adyen-pe-payment-link-creation-form-success__icon" }),
+      /* @__PURE__ */ e(i, { variant: o.TITLE, className: "adyen-pe-payment-link-creation-form-success__title", children: t.get("payByLink.creation.success.title") }),
+      /* @__PURE__ */ e(i, { variant: o.BODY, className: "adyen-pe-payment-link-creation-form-success__description", children: t.get("payByLink.creation.success.description") })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form-success__actions", children: [
+      /* @__PURE__ */ e(m, { variant: p.SECONDARY, onClick: l, children: t.get("payByLink.creation.success.showDetails") }),
+      /* @__PURE__ */ e(
+        m,
+        {
+          variant: p.PRIMARY,
+          onClick: u,
+          iconLeft: /* @__PURE__ */ e(s, { className: "adyen-pe-payment-link-creation-form-success__button-icon", name: r ? "checkmark" : "copy" }),
+          children: r ? t.get("payByLink.creation.success.copiedToClipboard") : t.get("payByLink.creation.success.copyLink")
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  A as FormSuccess
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/AmountField.js

@@ -0,0 +1,70 @@
+import { jsx as s } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import N from "../../../../../../../core/Context/useCoreContext.js";
+import { useMemo as l, useCallback as v, useEffect as E } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as V } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { CurrencyInput as A } from "../../../../../../internal/FormFields/CurrencyInput/CurrencyInput.js";
+import { VisibleField as x } from "../../../../../../internal/FormWrappers/VisibleField.js";
+import L from "../../../../../../internal/FormWrappers/FormField.js";
+import { FieldError as M } from "../../../../../../internal/FormFields/FieldError/FieldError.js";
+import { Controller as k } from "../../../../../../../hooks/form/Controller.js";
+import { Fragment as q } from "../../../../../../../external/preact/dist/preact.module.js";
+const i = "amount.value", n = "amount.currency", _ = 1e13, X = () => {
+  const { i18n: m } = N(), { control: f, setValue: c, getValues: u, fieldsConfig: r, trigger: d } = V(), p = l(() => {
+    var e;
+    return ((e = r == null ? void 0 : r[n]) == null ? void 0 : e.visible) ?? !1;
+  }, [r]), C = v(
+    (e) => Number(e) < 0 ? { valid: !1, message: m.get("payByLink.creation.fields.amountValue.error.negativeNumber") } : p && !u(n) ? { valid: !1, message: m.get("payByLink.creation.fields.amountValue.error.currency") } : !e || Number(e) === 0 ? { valid: !1, message: m.get("common.errors.fieldRequired") } : { valid: !0 },
+    [m, u, p]
+  ), b = v(
+    (e, o) => {
+      c(n, e), o && d(i);
+    },
+    [c, d, u]
+  ), F = l(() => {
+    var e;
+    return (e = r == null ? void 0 : r.amount) == null ? void 0 : e.required;
+  }, [r]), t = l(() => {
+    var o;
+    const e = (o = r == null ? void 0 : r[n]) == null ? void 0 : o.options;
+    return e == null ? void 0 : e.map((a) => ({ id: a, name: a }));
+  }, [r]);
+  return E(() => {
+    var e;
+    (t == null ? void 0 : t.length) === 1 && c(n, (e = t[0]) == null ? void 0 : e.id);
+  }, [t]), /* @__PURE__ */ s(x, { name: i, children: /* @__PURE__ */ s(L, { label: m.get("payByLink.creation.fields.amount.label"), optional: !1, supportText: void 0, className: void 0, children: /* @__PURE__ */ s(
+    k,
+    {
+      name: i,
+      control: f,
+      rules: {
+        validate: C,
+        required: F
+      },
+      render: ({ field: e, fieldState: o }) => {
+        var g;
+        const a = !!o.error && o.isTouched, y = (g = o.error) == null ? void 0 : g.message;
+        return /* @__PURE__ */ s(q, { children: [
+          /* @__PURE__ */ s(
+            A,
+            {
+              ...e,
+              selectedCurrencyCode: u(n),
+              onCurrencyChange: (h) => b(h, a),
+              currency: u(n),
+              currencyItems: t,
+              isInvalid: a,
+              name: i,
+              amount: e.value ? Number(e.value) : void 0,
+              onAmountChange: e.onInput,
+              maxValue: _
+            }
+          ),
+          a && y && /* @__PURE__ */ s(M, { errorMessage: y })
+        ] });
+      }
+    }
+  ) }) });
+};
+export {
+  X as AmountField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/LinkTypeField.js

@@ -0,0 +1,27 @@
+import { jsx as k } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import n from "../../../../../../../core/Context/useCoreContext.js";
+import { useMemo as r } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { FormSelect as T } from "../../../../../../internal/FormWrappers/FormSelect.js";
+const i = ["open", "singleUse"], F = ({ configuration: e }) => {
+  const { i18n: s } = n(), o = r(() => {
+    var p, l, t;
+    return ((l = (p = e == null ? void 0 : e.linkType) == null ? void 0 : p.options) != null && l.length ? (t = e == null ? void 0 : e.linkType) == null ? void 0 : t.options : i).map((m) => {
+      const y = `payByLink.creation.form.linkTypes.${m}`;
+      return {
+        id: m,
+        name: s.get(y)
+      };
+    });
+  }, [e, s]);
+  return /* @__PURE__ */ k(
+    T,
+    {
+      fieldName: "linkType",
+      label: s.get("payByLink.creation.fields.linkType.label"),
+      items: o
+    }
+  );
+};
+export {
+  F as LinkTypeField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/Fields/ValidityField.js

@@ -0,0 +1,143 @@
+import { jsx as o } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import H from "../../../../../../../core/Context/useCoreContext.js";
+import { useState as D, useCallback as d, useMemo as M, useEffect as J } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as Q } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { VisibleField as Z } from "../../../../../../internal/FormWrappers/VisibleField.js";
+import E from "../../../../../../internal/FormWrappers/FormField.js";
+import { LINK_VALIDITY_DURATION_UNITS as F } from "../../../../constants.js";
+import ii from "../../../../../../internal/FormFields/InputBase.js";
+import { FieldError as ti } from "../../../../../../internal/FormFields/FieldError/FieldError.js";
+import { transformToMS as S } from "../../../../../../../utils/datetime/main.js";
+import { Controller as R } from "../../../../../../../hooks/form/Controller.js";
+import ni from "../../../../../../internal/FormFields/Select/Select.js";
+const Y = 70, u = "flexible", fi = ({ configuration: p }) => {
+  var _, b;
+  const [z, V] = D(""), [O, g] = D(void 0), [f, I] = D(""), { i18n: e } = H(), { control: q, fieldsConfig: L, setValue: l, getValues: k, trigger: v } = Q(), a = d(
+    () => [k("linkValidity.durationUnit"), k("linkValidity.quantity")],
+    [k]
+  ), s = M(() => {
+    var n;
+    return (((n = p == null ? void 0 : p.linkValidity) == null ? void 0 : n.options) ?? []).map(({ quantity: t, durationUnit: r, type: y }) => {
+      if (y === u)
+        return { id: u, name: e.get("payByLink.creation.fields.validity.linkValidityUnit.custom") };
+      const m = `payByLink.creation.fields.validity.linkValidityUnit.${r}`;
+      return { id: `${t} ${r}` || "", name: e.get(m, { values: { quantity: t }, count: t }) };
+    });
+  }, [p, e]), U = d(() => {
+    var t;
+    if (!s.length) return;
+    const [i, n] = a();
+    if (!n || !i) {
+      const [r, y] = `${(t = s[0]) == null ? void 0 : t.id}`.split(" ");
+      l("linkValidity.quantity", r), l("linkValidity.durationUnit", y);
+    }
+  }, [s, l, a]), h = d(() => {
+    const [i, n] = a();
+    return !n || !i ? s[0] : s.find((t) => t.id === `${n} ${i}`) || { id: u };
+  }, [s, a]);
+  J(() => {
+    var t;
+    const [i, n] = a();
+    V(i || ""), g(n || ""), I(((t = h()) == null ? void 0 : t.id) || ""), U();
+  }, [a, s, h, U]);
+  const C = (_ = L["linkValidity.durationUnit"]) == null ? void 0 : _.required, B = (b = L["linkValidity.quantity"]) == null ? void 0 : b.required, X = d(
+    (i) => {
+      var r;
+      const n = (r = i.target) == null ? void 0 : r.value, t = parseInt(n, 10);
+      l("linkValidity.quantity", t), g(t), v("linkValidity.durationUnit");
+    },
+    [l, v]
+  ), j = d(
+    (i) => {
+      l("linkValidity.durationUnit", i), V(i), v("linkValidity.quantity");
+    },
+    [l, v]
+  ), K = M(
+    () => F.map((i) => ({
+      id: i,
+      name: e.get(`payByLink.creation.fields.validity.linkValidityUnit.${i}__plural`)
+    })),
+    [e]
+  ), T = d(() => {
+    if (f !== u) return { valid: !0 };
+    const [i, n] = a(), t = parseInt(n, 10);
+    return n ? isNaN(t) || t <= 0 ? { valid: !1, message: e.get("payByLink.creation.fields.validity.customDuration.error.invalidDurationValue") } : i ? S(i, t) > S("day", Y) ? {
+      valid: !1,
+      message: e.get("payByLink.creation.fields.validity.customDuration.error.durationTooLong", {
+        values: { maxDays: Y }
+      })
+    } : { valid: !0 } : { valid: !1, message: e.get("payByLink.creation.fields.validity.customDuration.error.missingDurationUnit") } : { valid: !1, message: e.get("payByLink.creation.fields.validity.customDuration.error.missingDurationValue") };
+  }, [f, e, a]);
+  return /* @__PURE__ */ o(Z, { name: "linkValidity.durationUnit", children: /* @__PURE__ */ o(
+    R,
+    {
+      name: "linkValidity.durationUnit",
+      control: q,
+      rules: {
+        required: C,
+        validate: T
+      },
+      render: ({ field: i, fieldState: n }) => /* @__PURE__ */ o(
+        R,
+        {
+          name: "linkValidity.quantity",
+          control: q,
+          rules: { required: B, validate: T },
+          render: ({ field: t, fieldState: r }) => {
+            var N, w;
+            const y = (P) => {
+              var A;
+              const c = (A = P.target) == null ? void 0 : A.value;
+              if (c !== u) {
+                const [W, G] = (c == null ? void 0 : c.split(" ")) || [];
+                t.onInput(W), i.onInput(G), t.triggerValidation(), i.triggerValidation();
+              } else
+                i.onInput(""), t.onInput(""), g(void 0), V("");
+              I(c);
+            }, m = (r.error || n.error) && r.isTouched && n.isTouched, x = !r.error || !n.error, $ = ((N = r.error) == null ? void 0 : N.message) || ((w = n.error) == null ? void 0 : w.message);
+            return /* @__PURE__ */ o("div", { children: [
+              /* @__PURE__ */ o("div", { className: "adyen-pe-payment-link-creation-form__validity-container", children: [
+                /* @__PURE__ */ o(
+                  E,
+                  {
+                    label: e.get("payByLink.creation.fields.validity.label"),
+                    supportText: e.get("payByLink.creation.fields.validity.supportText"),
+                    optional: !C && !B,
+                    children: /* @__PURE__ */ o(
+                      ni,
+                      {
+                        selected: f,
+                        onChange: y,
+                        items: s,
+                        isValid: x,
+                        isInvalid: m
+                      }
+                    )
+                  }
+                ),
+                f === u && /* @__PURE__ */ o(E, { label: e.get("payByLink.creation.fields.validity.customDuration.label"), optional: !1, children: /* @__PURE__ */ o(
+                  ii,
+                  {
+                    ...t,
+                    dropdown: { items: K, value: z || "", name: i.name },
+                    onDropdownInput: j,
+                    dropdownPosition: "end",
+                    value: O,
+                    type: "number",
+                    onInput: X,
+                    isValid: x,
+                    isInvalid: m
+                  }
+                ) })
+              ] }),
+              m && $ && /* @__PURE__ */ o(ti, { errorMessage: $, withTopMargin: !0 })
+            ] });
+          }
+        }
+      )
+    }
+  ) });
+};
+export {
+  fi as ValidityField
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/PaymentDetailsForm/PaymentDetailsForm.js

@@ -0,0 +1,46 @@
+import { jsx as e } from "../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ValidityField as a } from "./Fields/ValidityField.js";
+import { AmountField as m } from "./Fields/AmountField.js";
+import { LinkTypeField as o } from "./Fields/LinkTypeField.js";
+import { FormTextInput as n } from "../../../../../internal/FormWrappers/FormTextInput.js";
+import l from "../../../../../../core/Context/useCoreContext.js";
+import { FormCalendarInput as p } from "../../../../../internal/FormWrappers/FormCalendarInput.js";
+import { PAYMENT_LINK_CREATION_FIELD_LENGTHS as t } from "../../../constants.js";
+/* empty css                        */
+const b = ({ configuration: i }) => {
+  const { i18n: r } = l();
+  return /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__fields-container", children: [
+    /* @__PURE__ */ e(a, { configuration: i }),
+    /* @__PURE__ */ e(m, {}),
+    /* @__PURE__ */ e(
+      n,
+      {
+        minLength: t.merchantReference.min,
+        maxLength: t.merchantReference.max,
+        fieldName: "reference",
+        label: r.get("payByLink.creation.fields.merchantReference.label")
+      }
+    ),
+    /* @__PURE__ */ e(o, { configuration: i }),
+    /* @__PURE__ */ e(
+      n,
+      {
+        maxLength: t.description.max,
+        fieldName: "description",
+        label: r.get("payByLink.creation.fields.description.label"),
+        supportText: r.get("payByLink.creation.fields.description.supportText")
+      }
+    ),
+    /* @__PURE__ */ e(
+      p,
+      {
+        clearable: !0,
+        fieldName: "deliverAt",
+        label: r.get("payByLink.creation.fields.deliverAt.label")
+      }
+    )
+  ] });
+};
+export {
+  b as PaymentDetailsForm
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/StoreForm/Fields/StoreField.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "../../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "../../../../../../../core/Context/useCoreContext.js";
+import { FormSelect as d } from "../../../../../../internal/FormWrappers/FormSelect.js";
+import { useWizardFormContext as p } from "../../../../../../../hooks/form/wizard/WizardFormContext.js";
+import { useCallback as u } from "../../../../../../../external/preact/hooks/dist/hooks.module.js";
+const y = ({ items: e }) => {
+  const { i18n: o } = m(), { setFieldDisplayValue: r } = p(), a = u(
+    (l) => {
+      var t;
+      const n = (t = e.find((s) => s.id === l.target.value)) == null ? void 0 : t.name;
+      r("store", n);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ i(
+    d,
+    {
+      fieldName: "store",
+      label: o.get("payByLink.creation.fields.store.label"),
+      items: e,
+      onChange: a,
+      preventInvalidState: !0
+    }
+  );
+};
+export {
+  y as default
+};

package/dist/es/components/external/PaymentLinkCreation/components/Form/StoreForm/StoreForm.js

@@ -0,0 +1,38 @@
+import { jsx as o } from "../../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import f from "../../../../../../core/Context/useCoreContext.js";
+import { Alert as d } from "../../../../../internal/Alert/Alert.js";
+import { AlertTypeOption as k } from "../../../../../internal/Alert/types.js";
+import S from "./Fields/StoreField.js";
+import { useMemo as a } from "../../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as g } from "../../../../../../hooks/form/wizard/WizardFormContext.js";
+/* empty css               */
+import { useConfigContext as F } from "../../../../../../core/ConfigContext/context.js";
+const b = ({ setShowTermsAndConditions: i, settingsData: s, storesData: c, selectItems: m, termsAndConditionsProvisioned: r }) => {
+  const { i18n: t } = f(), { savePayByLinkSettings: p } = F().endpoints, { getValues: l } = g(), e = !!p, u = l("store"), n = a(() => {
+    if (!r)
+      return e ? "payByLink.creation.storeForm.alerts.tcSetupRequired" : "payByLink.creation.storeForm.alerts.tcSetupRequiredWithoutPermissions";
+  }, [r, e]), y = a(() => e ? [
+    {
+      label: t.get("payByLink.creation.storeForm.alerts.tcSetupRequiredAction"),
+      onClick: () => {
+        i(!0);
+      }
+    }
+  ] : [], [e, i, t]);
+  return /* @__PURE__ */ o("div", { className: "adyen-pe-payment-link-creation-form__fields-container", children: [
+    /* @__PURE__ */ o(S, { items: m }),
+    s && c && u && !r && /* @__PURE__ */ o(
+      d,
+      {
+        className: "adyen-pe-payment-link-creation-form__tc-alert",
+        title: t.get("payByLink.creation.storeForm.alerts.tcSetupRequiredTitle"),
+        type: k.WARNING,
+        description: n && t.get(n),
+        actions: y
+      }
+    )
+  ] });
+};
+export {
+  b as StoreForm
+};