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

package/dist/es/components/external/PaymentLinkSettings/components/TermsAndConditions/TermsAndConditions.js

@@ -0,0 +1,179 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+/* empty css                        */
+import { useRef as w, useState as a, useEffect as f, useCallback as c, useMemo as H } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import J from "../../../../../core/Context/useCoreContext.js";
+import Q from "../../../../internal/FormFields/InputText.js";
+import C from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as _, TypographyElement as D } from "../../../../internal/Typography/types.js";
+import { AlertVariantOption as X, AlertTypeOption as Z } from "../../../../internal/Alert/types.js";
+import { Alert as $ } from "../../../../internal/Alert/Alert.js";
+import { usePaymentLinkSettingsContext as ee } from "../PaymentLinkSettingsContainer/context/context.js";
+import { isTermsAndConditionsData as ne } from "../PaymentLinkThemeContainer/types.js";
+import { isValidURL as I } from "../PaymentLinkSettingsContainer/utils/validateTermsAndConditionsURL.js";
+import { ButtonVariant as te } from "../../../../internal/Button/types.js";
+import { Requirements as se } from "./Requirements/Requirements.js";
+import ie from "classnames";
+import re from "../../../../internal/Button/Button.js";
+import { Translation as ae } from "../../../../internal/Translation/Translation.js";
+import { Icon as E } from "../../../../internal/Icon/Icon.js";
+import { Checkbox as oe } from "../../../../internal/Checkbox/Checkbox.js";
+import { uniqueId as le } from "../../../../../utils/random/uniqueId.js";
+const qe = ({ data: h, initialData: A }) => {
+  const { i18n: i } = J(), g = w(le()), [t, P] = a((h == null ? void 0 : h.termsOfServiceUrl) ?? ""), [o, m] = a(void 0), [b, N] = a(!1), [T, R] = a(!1), [Y, S] = a(!1), [W, q] = a(!1), d = w(!1), {
+    savedData: p,
+    setPayload: u,
+    saveActionCalled: x,
+    setIsValid: k,
+    isSaving: v,
+    setSaveActionCalled: L,
+    setIsSaveError: B,
+    setIsSaveSuccess: O,
+    isShowingRequirements: U,
+    embeddedInOverview: G,
+    setIsShowingRequirements: y
+  } = ee();
+  f(() => {
+    o && I(t) ? k(!0) : k(!1);
+  }, [o, t, k, u]), f(() => {
+    d.current = !1;
+  }, [p]), f(() => {
+    x && (R(!!(t && !I(t))), N(!o), L(!1), O(!1), B(!1));
+  }, [t, o, x, L, u, B, O]), f(() => {
+    let e = ne(p) ? p : void 0;
+    e || (e = A);
+    const s = !e || !e.termsOfServiceUrl;
+    e && ((e == null ? void 0 : e.termsOfServiceUrl) === t || !e.termsOfServiceUrl && t === "") ? (s || (q(!0), m(!0)), S(!1)) : (q(!1), S(!0), m(d.current));
+  }, [t, p, A]);
+  const M = c(
+    (e) => {
+      var s, r, l;
+      e.preventDefault(), R(!1), P((s = e == null ? void 0 : e.currentTarget) == null ? void 0 : s.value), I((r = e == null ? void 0 : e.currentTarget) == null ? void 0 : r.value) && u({ termsOfServiceUrl: (l = e == null ? void 0 : e.currentTarget) == null ? void 0 : l.value });
+    },
+    [u]
+  ), j = c(
+    (e) => {
+      var s, r, l;
+      e.preventDefault(), (s = e.currentTarget) != null && s.checked && N(!1), d.current = (r = e.currentTarget) == null ? void 0 : r.checked, m((l = e.currentTarget) == null ? void 0 : l.checked);
+    },
+    [d]
+  ), V = c(() => {
+    y(!0);
+  }, [y]), F = H(() => /* @__PURE__ */ n(
+    ae,
+    {
+      translationKey: "payByLink.settings.termsAndConditions.requirement.checkbox.part1",
+      fills: {
+        requirements: /* @__PURE__ */ n(
+          re,
+          {
+            className: "adyen-pe-payment-link-settings-terms-and-conditions__requirements-link",
+            variant: te.TERTIARY,
+            onClick: V,
+            children: i.get("payByLink.settings.termsAndConditions.requirement.checkbox.part2")
+          }
+        )
+      }
+    }
+  ), [i, V]), K = c(() => y(!1), [y]), z = c(() => m(!0), []);
+  return /* @__PURE__ */ n("section", { className: "adyen-pe-payment-link-settings-terms-and-conditions", children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: ie("adyen-pe-payment-link-settings-terms-and-conditions__content", {
+          "adyen-pe-payment-link-settings-terms-and-conditions__content--hidden": U
+        }),
+        children: [
+          /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings__input-container", children: [
+            /* @__PURE__ */ n(
+              "label",
+              {
+                htmlFor: g.current,
+                "aria-labelledby": g.current,
+                className: "adyen-pe-payment-link-settings-terms-and-conditions-input__label",
+                children: /* @__PURE__ */ n(
+                  C,
+                  {
+                    variant: _.BODY,
+                    stronger: !0,
+                    className: "adyen-pe-payment-link-settings-terms-and-conditions-input__label--info-text",
+                    children: i.get("payByLink.settings.termsAndConditions.urlInput.label")
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ n(
+              Q,
+              {
+                disabled: !!v,
+                readonly: !!v,
+                uniqueId: g.current,
+                value: t,
+                onInput: M,
+                maxLength: 2e3,
+                isInvalid: T
+              }
+            ),
+            T && /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions__error", children: [
+              /* @__PURE__ */ n(E, { name: "cross-circle-fill", className: "adyen-pe-payment-link-settings-terms-and-conditions__error-icon" }),
+              /* @__PURE__ */ n(
+                C,
+                {
+                  className: "adyen-pe-payment-link-settings-terms-and-conditions__error-text",
+                  el: D.SPAN,
+                  variant: _.BODY,
+                  children: i.get("payByLink.settings.termsAndConditions.error.urlValidation")
+                }
+              )
+            ] })
+          ] }),
+          Y && /* @__PURE__ */ n(
+            $,
+            {
+              type: Z.WARNING,
+              variant: X.TIP,
+              description: i.get("payByLink.settings.termsAndConditions.alert.urlChange"),
+              className: "adyen-pe-payment-link-settings-terms-and-conditions__alert"
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions-checkbox__container", children: [
+            /* @__PURE__ */ n(
+              oe,
+              {
+                checked: o,
+                disabled: W || v,
+                className: "adyen-pe-payment-link-settings-terms-and-conditions-checkbox",
+                label: F,
+                onInput: j,
+                error: b
+              }
+            ),
+            b && /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions__error", children: [
+              /* @__PURE__ */ n(E, { name: "cross-circle-fill", className: "adyen-pe-payment-link-settings-terms-and-conditions__error-icon" }),
+              /* @__PURE__ */ n(
+                C,
+                {
+                  className: "adyen-pe-payment-link-settings-terms-and-conditions__error-text",
+                  el: D.SPAN,
+                  variant: _.BODY,
+                  children: i.get("payByLink.settings.termsAndConditions.error.requirementsNotChecked")
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    U && /* @__PURE__ */ n(
+      se,
+      {
+        onGoBack: K,
+        termsAndConditionsURL: t,
+        acceptRequirements: z,
+        embeddedInOverview: G
+      }
+    )
+  ] });
+};
+export {
+  qe as TermsAndConditions
+};

package/dist/es/components/external/PaymentLinkSettings/components/TermsAndConditions/TermsAndConditionsContainer.js

@@ -0,0 +1,38 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+/* empty css                        */
+import a from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as d } from "../../../../internal/Typography/types.js";
+import p from "../../../../../core/Context/useCoreContext.js";
+import { TermsAndConditions as l } from "./TermsAndConditions.js";
+import { usePaymentLinkSettingsContext as y } from "../PaymentLinkSettingsContainer/context/context.js";
+import { useState as f, useEffect as g } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import u from "classnames";
+import { isTermsAndConditionsData as h } from "../PaymentLinkThemeContainer/types.js";
+import C from "../PaymentLinkSettingsContainer/components/SettingsError/SettingsError.js";
+import k from "../PaymentLinkSettingsContainer/components/LoadingSkeleton/LoadingSkeleton.js";
+const A = "payByLink.settings.termsAndConditions.errors.couldNotLoad", R = () => {
+  const { i18n: i } = p(), { savedData: n, isLoadingContent: o, termsAndConditionsError: e, isShowingRequirements: m } = y(), [r, s] = f();
+  return g(() => {
+    if (!o && !e) {
+      const c = n && typeof n == "object" && Object.keys(n).length > 0 ? n : { termsOfServiceUrl: "" };
+      s(c);
+    }
+  }, [n, s, o, e]), e ? /* @__PURE__ */ t(C, { error: e, errorMessage: A }) : !h(n) || !r ? /* @__PURE__ */ t(k, { rowNumber: 2 }) : /* @__PURE__ */ t("section", { className: "adyen-pe-payment-link-settings-terms-and-conditions", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: u("adyen-pe-payment-link-settings-terms-and-conditions__content-header", {
+          "adyen-pe-payment-link-settings-terms-and-conditions__content-header--hidden": m
+        }),
+        children: /* @__PURE__ */ t("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions__content-header", children: [
+          /* @__PURE__ */ t(a, { variant: d.TITLE, medium: !0, children: i.get("payByLink.settings.termsAndConditions.title") }),
+          /* @__PURE__ */ t(a, { variant: d.BODY, wide: !0, className: "adyen-pe-payment-link-settings-terms-and-conditions-disclaimer", children: i.get("payByLink.settings.termsAndConditions.subtitle") })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t(l, { data: n, initialData: r })
+  ] });
+};
+export {
+  R as default
+};

package/dist/es/components/external/PaymentLinkSettings/hooks/useSaveAction.js

@@ -0,0 +1,59 @@
+import P from "../../../../hooks/useMutation/useMutation.js";
+import { useRef as N, useEffect as O, useCallback as T } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { MenuItem as U } from "../components/PaymentLinkSettingsContainer/context/constants.js";
+import { getThemePayload as R } from "../components/PaymentLinkSettingsContainer/utils/getThemePayload.js";
+import { isThemePayload as A } from "../components/PaymentLinkThemeContainer/types.js";
+import { useConfigContext as W } from "../../../../core/ConfigContext/context.js";
+import { isFunction as j, isUndefined as q } from "../../../../utils/value/is.js";
+const K = (r, f, m, e, n, i, t, l, c, s, p) => {
+  const { updatePayByLinkTheme: F, savePayByLinkSettings: k } = W().endpoints, h = N(null);
+  O(() => () => {
+    h.current && clearTimeout(h.current);
+  }, []);
+  const x = T(() => {
+    p && j(p) ? h.current = setTimeout(() => {
+      p();
+    }, 500) : r(!1);
+  }, [p, r]), y = P({
+    queryFn: F,
+    options: {
+      onSuccess: (o) => {
+        const u = { brandName: o == null ? void 0 : o.brandName, logo: o == null ? void 0 : o.logoUrl, fullWidthLogo: o == null ? void 0 : o.fullWidthLogoUrl };
+        c(u), s(R(u)), f(!1), m(!0), r(!1);
+      },
+      onError: () => {
+        f(!0), m(!1), r(!1);
+      }
+    }
+  }), C = T(() => {
+    !e || q(n) || !t() || A(n) && (r(!0), y.mutate({ contentType: "multipart/form-data", body: n }, { path: { storeId: e } }));
+  }, [y, e, n, t, r]), L = P({
+    queryFn: k,
+    options: {
+      onSuccess: (o) => {
+        const u = !o || !(o != null && o.termsOfServiceUrl) ? { termsOfServiceUrl: "" } : o;
+        c(u), s(u), f(!1), m(!0), x();
+      },
+      onError: () => {
+        f(!0), m(!1), r(!1);
+      }
+    }
+  }), b = T(() => {
+    !e || q(n) || !t() || A(n) || (r(!0), L.mutate(
+      {
+        contentType: "application/json",
+        body: n
+      },
+      { path: { storeId: e } }
+    ));
+  }, [L, e, n, t, r]);
+  return { onSave: T(() => {
+    if (i) {
+      if (l(!0), i === U.theme) return C();
+      if (i === U.termsAndConditions) return b();
+    }
+  }, [i, b, C, l]) };
+};
+export {
+  K as useSaveAction
+};

package/dist/es/components/external/PaymentLinkSettings/hooks/useStoreTermsAndConditions.js

@@ -0,0 +1,26 @@
+import { useMemo as u, useEffect as p } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as C } from "../../../../hooks/useFetch.js";
+import { useConfigContext as d } from "../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as h } from "../../../../utils/value/constants.js";
+const v = (n, i, m, f, c) => {
+  const { getPayByLinkSettings: o } = d().endpoints, { data: r, isFetching: s, error: t } = C(
+    u(
+      () => ({
+        fetchOptions: {
+          enabled: !!o && i && !!n,
+          onSuccess: () => {
+            m(!1), c(!1);
+          }
+        },
+        queryFn: async () => o == null ? void 0 : o(h, { path: { storeId: n } })
+      }),
+      [o, n, i, m, c]
+    )
+  ), e = u(() => (!r || !(r != null && r.termsOfServiceUrl)) && !s && !t ? { termsOfServiceUrl: "" } : r, [r, s, t]);
+  return p(() => {
+    f(e);
+  }, [e, f]), { data: e, isFetching: s, error: t };
+};
+export {
+  v as useStoreTermsAndConditions
+};

package/dist/es/components/external/PaymentLinkSettings/hooks/useStoreTheme.js

@@ -0,0 +1,31 @@
+import { useMemo as l, useEffect as h } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as c } from "../../../../hooks/useFetch.js";
+import { getThemePayload as p } from "../components/PaymentLinkSettingsContainer/utils/getThemePayload.js";
+import { useConfigContext as g } from "../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as E } from "../../../../utils/value/constants.js";
+const b = (e, f, t, u, i) => {
+  const { getPayByLinkTheme: r } = g().endpoints, { data: o, error: m, isFetching: n } = c(
+    l(
+      () => ({
+        fetchOptions: {
+          enabled: !!r && f && !!e,
+          onSuccess: () => {
+            t(!1), i(!1);
+          }
+        },
+        queryFn: async () => r == null ? void 0 : r(E, { path: { storeId: e } })
+      }),
+      [r, e, f, t, i]
+    )
+  ), s = l(() => !o && !n && !m ? {} : {
+    ...o != null && o.brandName ? { brandName: o == null ? void 0 : o.brandName } : {},
+    ...o != null && o.logoUrl ? { logo: o == null ? void 0 : o.logoUrl } : {},
+    ...o != null && o.fullWidthLogoUrl ? { fullWidthLogo: o == null ? void 0 : o.fullWidthLogoUrl } : {}
+  }, [o, n, m]);
+  return h(() => {
+    u(p(s));
+  }, [s, u]), { theme: s, isFetching: n, error: m };
+};
+export {
+  b as useStoreTheme
+};

package/dist/es/components/external/PaymentLinksOverview/PaymentLinksOverviewElement.js

@@ -0,0 +1,18 @@
+var r = Object.defineProperty;
+var s = (t, e, n) => e in t ? r(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var o = (t, e, n) => s(t, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { UIElement as m } from "../UIElement/UIElement.js";
+import p from "./components/PaymentLinksOverviewContainer.js";
+class a extends m {
+  constructor(n) {
+    super(n);
+    o(this, "componentToRender", () => /* @__PURE__ */ i(p, { ...this.props }));
+    this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+o(a, "type", "paymentLinksOverview");
+export {
+  a as PaymentLinksOverviewElement,
+  a as default
+};

package/dist/es/components/external/PaymentLinksOverview/components/PaymentLinkDetailsModal/PaymentLinkDetailsModal.js

@@ -0,0 +1,44 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as u, useCallback as r } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../../../core/Context/useCoreContext.js";
+import { PaymentLinkDetails as c } from "../../../PaymentLinkDetails/components/PaymentLinkDetails/PaymentLinkDetails.js";
+import h from "../../../../internal/Modal/Modal.js";
+const b = ({
+  children: d,
+  selectedDetail: i,
+  resetDetails: e,
+  onUpdate: t
+}) => {
+  const { i18n: m } = f(), [n, a] = u(!1), l = !!i, o = r(() => {
+    n && (a(!1), t()), e();
+  }, [n, t, e]), p = r(() => {
+    a(!0);
+  }, []);
+  return /* @__PURE__ */ s("div", { children: [
+    d,
+    i && /* @__PURE__ */ s(
+      h,
+      {
+        isOpen: l,
+        "aria-label": m.get("payByLink.details.title"),
+        onClose: o,
+        isDismissible: !0,
+        headerWithBorder: !1,
+        size: i.modalSize || "large",
+        children: /* @__PURE__ */ s(
+          c,
+          {
+            id: i.selection.data,
+            onUpdate: p,
+            onDismiss: o,
+            hideTitle: !0,
+            isDismissButtonHidden: !0
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  b as PaymentLinkDetailsModal
+};

package/dist/es/components/external/PaymentLinksOverview/components/PaymentLinksErrors.js

@@ -0,0 +1,36 @@
+import { jsx as u } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as c } from "../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getPaymentLinksErrorMessage as f } from "../utils/getPaymentLinksErrorMessage.js";
+const C = ({
+  error: e,
+  errorMessage: r,
+  onContactSupport: o,
+  getImageAsset: n
+}) => {
+  const {
+    title: s,
+    message: a,
+    refreshComponent: p,
+    translationValues: i,
+    onContactSupport: m,
+    images: t
+  } = f(e, r, o, n);
+  return /* @__PURE__ */ u(
+    c,
+    {
+      imageDesktop: t == null ? void 0 : t.desktop,
+      imageMobile: t == null ? void 0 : t.mobile,
+      withHeaderOffset: !0,
+      title: s,
+      message: a,
+      translationValues: i,
+      withImage: !0,
+      centered: !0,
+      refreshComponent: p,
+      onContactSupport: m
+    }
+  );
+};
+export {
+  C as PaymentLinksErrors
+};