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

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

@@ -0,0 +1,177 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+/* empty css                        */
+import { useRef as U, useState as s, useEffect as p, useCallback as o, 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 h from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as g, TypographyElement as V } 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 k } from "../PaymentLinkSettingsContainer/utils/validateTermsAndConditionsURL.js";
+import { ButtonVariant as te } from "../../../../internal/Button/types.js";
+import { Requirements as se } from "./Requirements/Requirements.js";
+import re from "classnames";
+import ie from "../../../../internal/Button/Button.js";
+import { Translation as ae } from "../../../../internal/Translation/Translation.js";
+import { Icon as w } from "../../../../internal/Icon/Icon.js";
+import { Checkbox as oe } from "../../../../internal/Checkbox/Checkbox.js";
+import { uniqueId as ce } from "../../../../../utils/random/uniqueId.js";
+const xe = ({ data: D, initialData: v }) => {
+  const { i18n: r } = J(), u = U(ce()), [t, E] = s(D?.termsOfServiceUrl ?? ""), [a, c] = s(void 0), [C, _] = s(!1), [I, A] = s(!1), [P, T] = s(!1), [Y, b] = s(!1), l = U(!1), {
+    savedData: d,
+    setPayload: m,
+    saveActionCalled: N,
+    setIsValid: y,
+    isSaving: f,
+    setSaveActionCalled: R,
+    setIsSaveError: q,
+    setIsSaveSuccess: S,
+    isShowingRequirements: x,
+    embeddedInOverview: W,
+    setIsShowingRequirements: i
+  } = ee();
+  p(() => {
+    a && k(t) ? y(!0) : y(!1);
+  }, [a, t, y, m]), p(() => {
+    l.current = !1;
+  }, [d]), p(() => {
+    N && (A(!!(t && !k(t))), _(!a), R(!1), S(!1), q(!1));
+  }, [t, a, N, R, m, q, S]), p(() => {
+    let e = ne(d) ? d : void 0;
+    e || (e = v);
+    const z = !e || !e.termsOfServiceUrl;
+    e && (e?.termsOfServiceUrl === t || !e.termsOfServiceUrl && t === "") ? (z || (b(!0), c(!0)), T(!1)) : (b(!1), T(!0), c(l.current));
+  }, [t, d, v]);
+  const G = o(
+    (e) => {
+      e.preventDefault(), A(!1), E(e?.currentTarget?.value), k(e?.currentTarget?.value) && m({ termsOfServiceUrl: e?.currentTarget?.value });
+    },
+    [m]
+  ), [L, O] = s(!1), M = o(
+    (e) => {
+      e.preventDefault(), e.currentTarget?.checked && _(!1), !l.current && e.currentTarget?.checked && !L && (i(!0), O(!0)), l.current = e.currentTarget?.checked, c(e.currentTarget?.checked);
+    },
+    [L, i]
+  ), B = o(() => {
+    i(!0), O(!0);
+  }, [i]), j = H(() => /* @__PURE__ */ n(
+    ae,
+    {
+      translationKey: "payByLink.settings.termsAndConditions.requirement.checkbox.part1",
+      fills: {
+        requirements: /* @__PURE__ */ n(
+          ie,
+          {
+            className: "adyen-pe-payment-link-settings-terms-and-conditions__requirements-link",
+            variant: te.TERTIARY,
+            onClick: B,
+            children: r.get("payByLink.settings.termsAndConditions.requirement.checkbox.part2")
+          }
+        )
+      }
+    }
+  ), [r, B]), F = o(() => i(!1), [i]), K = o(() => c(!0), []);
+  return /* @__PURE__ */ n("section", { className: "adyen-pe-payment-link-settings-terms-and-conditions", children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: re("adyen-pe-payment-link-settings-terms-and-conditions__content", {
+          "adyen-pe-payment-link-settings-terms-and-conditions__content--hidden": x
+        }),
+        children: [
+          /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings__input-container", children: [
+            /* @__PURE__ */ n(
+              "label",
+              {
+                htmlFor: u.current,
+                "aria-labelledby": u.current,
+                className: "adyen-pe-payment-link-settings-terms-and-conditions-input__label",
+                children: /* @__PURE__ */ n(
+                  h,
+                  {
+                    variant: g.BODY,
+                    stronger: !0,
+                    className: "adyen-pe-payment-link-settings-terms-and-conditions-input__label--info-text",
+                    children: r.get("payByLink.settings.termsAndConditions.urlInput.label")
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ n(
+              Q,
+              {
+                disabled: !!f,
+                readonly: !!f,
+                uniqueId: u.current,
+                value: t,
+                onInput: G,
+                maxLength: 2e3,
+                isInvalid: I
+              }
+            ),
+            I && /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions__error", children: [
+              /* @__PURE__ */ n(w, { name: "cross-circle-fill", className: "adyen-pe-payment-link-settings-terms-and-conditions__error-icon" }),
+              /* @__PURE__ */ n(
+                h,
+                {
+                  className: "adyen-pe-payment-link-settings-terms-and-conditions__error-text",
+                  el: V.SPAN,
+                  variant: g.BODY,
+                  children: r.get("payByLink.settings.termsAndConditions.error.urlValidation")
+                }
+              )
+            ] })
+          ] }),
+          P && /* @__PURE__ */ n(
+            $,
+            {
+              type: Z.WARNING,
+              variant: X.TIP,
+              description: r.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: a,
+                disabled: Y || f,
+                className: "adyen-pe-payment-link-settings-terms-and-conditions-checkbox",
+                label: j,
+                onInput: M,
+                error: C
+              }
+            ),
+            C && /* @__PURE__ */ n("div", { className: "adyen-pe-payment-link-settings-terms-and-conditions__error", children: [
+              /* @__PURE__ */ n(w, { name: "cross-circle-fill", className: "adyen-pe-payment-link-settings-terms-and-conditions__error-icon" }),
+              /* @__PURE__ */ n(
+                h,
+                {
+                  className: "adyen-pe-payment-link-settings-terms-and-conditions__error-text",
+                  el: V.SPAN,
+                  variant: g.BODY,
+                  children: r.get("payByLink.settings.termsAndConditions.error.requirementsNotChecked")
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    x && /* @__PURE__ */ n(
+      se,
+      {
+        onGoBack: F,
+        termsAndConditionsURL: t,
+        acceptRequirements: K,
+        embeddedInOverview: W
+      }
+    )
+  ] });
+};
+export {
+  xe 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 d, isUndefined as q } from "../../../../utils/value/is.js";
+const J = (o, u, f, t, r, m, i, l, c, s, p) => {
+  const { updatePayByLinkTheme: F, savePayByLinkSettings: k } = W().endpoints, h = N(null);
+  O(() => () => {
+    h.current && clearTimeout(h.current);
+  }, []);
+  const x = T(() => {
+    p && d(p) ? h.current = setTimeout(() => {
+      p();
+    }, 500) : o(!1);
+  }, [p, o]), y = P({
+    queryFn: F,
+    options: {
+      onSuccess: (n) => {
+        const e = { brandName: n?.brandName, logo: n?.logoUrl, fullWidthLogo: n?.fullWidthLogoUrl };
+        c(e), s(R(e)), u(!1), f(!0), o(!1);
+      },
+      onError: () => {
+        u(!0), f(!1), o(!1);
+      }
+    }
+  }), C = T(() => {
+    !t || q(r) || !i() || A(r) && (o(!0), y.mutate({ contentType: "multipart/form-data", body: r }, { path: { storeId: t } }));
+  }, [y, t, r, i, o]), L = P({
+    queryFn: k,
+    options: {
+      onSuccess: (n) => {
+        const e = !n || !n?.termsOfServiceUrl ? { termsOfServiceUrl: "" } : n;
+        c(e), s(e), u(!1), f(!0), x();
+      },
+      onError: () => {
+        u(!0), f(!1), o(!1);
+      }
+    }
+  }), b = T(() => {
+    !t || q(r) || !i() || A(r) || (o(!0), L.mutate(
+      {
+        contentType: "application/json",
+        body: r
+      },
+      { path: { storeId: t } }
+    ));
+  }, [L, t, r, i, o]);
+  return { onSave: T(() => {
+    if (m) {
+      if (l(!0), m === U.theme) return C();
+      if (m === U.termsAndConditions) return b();
+    }
+  }, [m, b, C, l]) };
+};
+export {
+  J as useSaveAction
+};

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

@@ -0,0 +1,11 @@
+import { useConfigContext as s } from "../../../../core/ConfigContext/context.js";
+const a = () => {
+  const { savePayByLinkSettings: e, getPayByLinkSettings: n, getPayByLinkTheme: t, updatePayByLinkTheme: i } = s().endpoints;
+  return {
+    themeEnabled: !!t && !!i,
+    termsAndConditionsEnabled: !!n && !!e
+  };
+};
+export {
+  a as useSettingsPermission
+};

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 a } from "../../../../hooks/useFetch.js";
+import { useConfigContext as d } from "../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as C } from "../../../../utils/value/constants.js";
+const T = (t, i, m, f, c) => {
+  const { getPayByLinkSettings: o } = d().endpoints, { data: r, isFetching: n, error: s } = a(
+    u(
+      () => ({
+        fetchOptions: {
+          enabled: !!o && i && !!t,
+          onSuccess: () => {
+            m(!1), c(!1);
+          }
+        },
+        queryFn: async () => o?.(C, { path: { storeId: t } })
+      }),
+      [o, t, i, m, c]
+    )
+  ), e = u(() => (!r || !r?.termsOfServiceUrl) && !n && !s ? { termsOfServiceUrl: "" } : r, [r, n, s]);
+  return p(() => {
+    f(e);
+  }, [e, f]), { data: e, isFetching: n, error: s };
+};
+export {
+  T as useStoreTermsAndConditions
+};

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { UIElement as n } from "../UIElement/UIElement.js";
+import o from "./components/PaymentLinksOverviewContainer.js";
+class p extends n {
+  static type = "paymentLinksOverview";
+  constructor(e) {
+    super(e), this.componentToRender = this.componentToRender.bind(this);
+  }
+  componentToRender = () => /* @__PURE__ */ t(o, { ...this.props });
+}
+export {
+  p as PaymentLinksOverviewElement,
+  p 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 g } from "../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getPaymentLinksErrorMessage as c } from "../utils/getPaymentLinksErrorMessage.js";
+const C = ({
+  error: t,
+  errorMessage: r,
+  onContactSupport: o,
+  getImageAsset: s
+}) => {
+  const {
+    title: a,
+    message: n,
+    refreshComponent: i,
+    translationValues: m,
+    onContactSupport: p,
+    images: e
+  } = c(t, r, o, s);
+  return /* @__PURE__ */ u(
+    g,
+    {
+      imageDesktop: e?.desktop,
+      imageMobile: e?.mobile,
+      withHeaderOffset: !0,
+      title: a,
+      message: n,
+      translationValues: m,
+      withImage: !0,
+      centered: !0,
+      refreshComponent: i,
+      onContactSupport: p
+    }
+  );
+};
+export {
+  C as PaymentLinksErrors
+};