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

package/dist/es/components/external/PaymentLinkDetails/components/PaymentLinkDetails/PaymentLinkDetails.js

@@ -1,50 +1,50 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import K from "classnames";
-import $ from "../../../../../core/Context/useCoreContext.js";
-import { useMemo as F, useCallback as r, useState as P, useEffect as z } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../../internal/Button/ButtonActions/ButtonActions.js";
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import j from "classnames";
+import J from "../../../../../core/Context/useCoreContext.js";
+import { useMemo as b, useCallback as r, useState as T, useEffect as K } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import F from "../../../../internal/Button/ButtonActions/ButtonActions.js";
 import { ButtonVariant as p } from "../../../../internal/Button/types.js";
-import { useFetch as _ } from "../../../../../hooks/useFetch.js";
-import { useModalContext as G } from "../../../../internal/Modal/Modal.js";
-import { PaymentLinkSummary as H } from "../PaymentLinkSummary/PaymentLinkSummary.js";
-import { PaymentLinkTabs as Q } from "../PaymentLinkTabs/PaymentLinkTabs.js";
-import { PaymentLinkExpiration as W } from "../PaymentLinkExpiration/PaymentLinkExpiration.js";
+import { useFetch as P } from "../../../../../hooks/useFetch.js";
+import { useModalContext as $ } from "../../../../internal/Modal/Modal.js";
+import { PaymentLinkSummary as z } from "../PaymentLinkSummary/PaymentLinkSummary.js";
+import { PaymentLinkTabs as G } from "../PaymentLinkTabs/PaymentLinkTabs.js";
+import { PaymentLinkExpiration as H } from "../PaymentLinkExpiration/PaymentLinkExpiration.js";
 /* empty css                        */
-import { PaymentLinkSkeleton as X } from "../PaymentLinkSkeleton/PaymentLinkSkeleton.js";
-import { PaymentLinkError as Z } from "../PaymentLinkError/PaymentLinkError.js";
-import w from "../../../../internal/Typography/Typography.js";
-import { TypographyVariant as O } from "../../../../internal/Typography/types.js";
-import { Icon as R } from "../../../../internal/Icon/Icon.js";
-import { Fragment as U } from "../../../../../external/preact/dist/preact.module.js";
-import { Header as D } from "../../../../internal/Header/Header.js";
-import { useConfigContext as tt } from "../../../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as et } from "../../../../../utils/value/constants.js";
+import { PaymentLinkSkeleton as Q } from "../PaymentLinkSkeleton/PaymentLinkSkeleton.js";
+import { PaymentLinkError as U } from "../PaymentLinkError/PaymentLinkError.js";
+import _ from "../../../../internal/Typography/Typography.js";
+import { TypographyVariant as w } from "../../../../internal/Typography/types.js";
+import { Icon as O } from "../../../../internal/Icon/Icon.js";
+import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
+import { Header as X } from "../../../../internal/Header/Header.js";
+import { useConfigContext as Z } from "../../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as tt } from "../../../../../utils/value/constants.js";
 const d = {
   root: "adyen-pe-payment-link-details",
   content: "adyen-pe-payment-link-details__content",
   expirationSuccessContainer: "adyen-pe-payment-link-details__expiration-success-container",
   expirationSuccessIcon: "adyen-pe-payment-link-details__expiration-success-icon"
-}, vt = ({ id: u, onUpdate: l, hideTitle: Y, onContactSupport: C, onDismiss: a, isDismissButtonHidden: g }) => {
-  const { i18n: i, getCdnDataset: f } = $(), { getPayByLinkPaymentLinkById: k } = tt().endpoints, {
-    data: n,
-    isFetching: M,
+}, St = ({ id: y, onUpdate: k, hideTitle: R, onContactSupport: g, onDismiss: a, isDismissButtonHidden: x }) => {
+  const { i18n: i, getCdnDataset: f } = J(), { getPayByLinkPaymentLinkById: u } = Z().endpoints, {
+    data: t,
+    isFetching: Y,
     error: h,
     refetch: L
-  } = _(
-    F(
+  } = P(
+    b(
       () => ({
         fetchOptions: {
-          enabled: !!u && !!k
+          enabled: !!y && !!u
         },
-        queryFn: async () => k(et, {
+        queryFn: async () => u(tt, {
           path: {
-            paymentLinkId: u
+            paymentLinkId: y
           }
         })
       }),
-      [k, u]
+      [u, y]
     )
-  ), { data: m, isFetching: V } = _({
+  ), { data: I, isFetching: M } = P({
     queryFn: r(async () => {
       const e = `${i.locale ?? "en-US"}`;
       return f ? await f({
@@ -54,109 +54,119 @@ const d = {
         fallback: []
       }) ?? [] : [];
     }, [f, i.locale])
-  }), S = r(
-    (e) => {
-      const x = m == null ? void 0 : m.find((J) => J.id === e);
-      return x == null ? void 0 : x.name;
-    },
-    [m]
-  ), v = M || V, o = F(
-    () => {
-      var e;
-      return n && {
-        ...n,
+  }), m = r(
+    (e) => I?.find((q) => q.id === e)?.name || e,
+    [I]
+  ), C = Y || M, o = b(
+    () => t && {
+      ...t,
+      ...t.shopperInformation ? {
         shopperInformation: {
-          ...n == null ? void 0 : n.shopperInformation,
-          shopperCountry: ((e = n == null ? void 0 : n.shopperInformation) == null ? void 0 : e.shopperCountry) && S(n == null ? void 0 : n.shopperInformation.shopperCountry)
+          ...t?.shopperInformation,
+          ...t?.shopperInformation?.shopperCountry ? {
+            shopperCountry: t?.shopperInformation?.shopperCountry && m(t?.shopperInformation.shopperCountry)
+          } : {},
+          ...t?.shopperInformation?.billingAddress ? {
+            billingAddress: t?.shopperInformation?.billingAddress && {
+              ...t?.shopperInformation.billingAddress,
+              country: t?.shopperInformation?.billingAddress?.country && m(t?.shopperInformation.billingAddress.country)
+            }
+          } : {},
+          ...t?.shopperInformation?.shippingAddress ? {
+            shippingAddress: t?.shopperInformation?.shippingAddress && {
+              ...t?.shopperInformation.shippingAddress,
+              country: t?.shopperInformation?.shippingAddress?.country && m(t?.shopperInformation.shippingAddress.country)
+            }
+          } : {}
         }
-      };
+      } : {}
     },
-    [n, S]
-  ), [c, y] = P("details"), [s, B] = P(!1);
-  z(() => {
+    [t, m]
+  ), [s, l] = T("details"), [c, S] = T(!1);
+  K(() => {
     let e;
-    return s && (e = setTimeout(() => B(!1), 3e3)), () => clearTimeout(e);
-  }, [s]);
-  const E = r(async () => {
+    return c && (e = setTimeout(() => S(!1), 3e3)), () => clearTimeout(e);
+  }, [c]);
+  const A = r(async () => {
     if (o)
       try {
-        await navigator.clipboard.writeText(o.linkInformation.paymentLink), B(!0);
+        await navigator.clipboard.writeText(o.linkInformation.paymentLink), S(!0);
       } catch (e) {
         console.error("Failed to copy link:", e);
       }
-  }, [o]), I = r(() => {
-    y("expirationConfirmation");
-  }, []), N = r(() => {
-    y("expirationSuccess"), l == null || l();
-  }, [l]), T = r(() => {
-    y("details"), L();
-  }, [L]), A = r(() => {
-    a == null || a();
-  }, [a]), { withinModal: q } = G(), j = r(() => {
-    if (v)
-      return /* @__PURE__ */ t(X, {});
+  }, [o]), v = r(() => {
+    l("expirationConfirmation");
+  }, []), B = r(() => {
+    l("expirationSuccess"), k?.();
+  }, [k]), E = r(() => {
+    l("details"), L();
+  }, [L]), N = r(() => {
+    a?.();
+  }, [a]), { withinModal: D } = $(), V = r(() => {
+    if (C)
+      return /* @__PURE__ */ n(Q, {});
     if (!o || h)
-      return /* @__PURE__ */ t(
-        Z,
+      return /* @__PURE__ */ n(
+        U,
         {
           error: h,
           onDismiss: a,
-          onContactSupport: C
+          onContactSupport: g
         }
       );
-    if (c === "expirationConfirmation")
-      return /* @__PURE__ */ t(
-        W,
+    if (s === "expirationConfirmation")
+      return /* @__PURE__ */ n(
+        H,
         {
           paymentLink: o,
-          onCancel: () => y("details"),
-          onExpirationSuccess: N
+          onCancel: () => l("details"),
+          onExpirationSuccess: B
         }
       );
-    if (c === "expirationSuccess") {
+    if (s === "expirationSuccess") {
       const e = [
         ...a ? [
           {
             title: i.get("payByLink.details.expirationSuccess.actions.goBackToList"),
-            event: A,
+            event: N,
             variant: p.SECONDARY
           }
         ] : [],
         {
           title: i.get("payByLink.details.expirationSuccess.actions.showDetails"),
-          event: T,
+          event: E,
           variant: p.SECONDARY
         }
       ];
-      return /* @__PURE__ */ t("div", { className: d.expirationSuccessContainer, children: [
-        /* @__PURE__ */ t(R, { name: "checkmark-circle-fill", className: d.expirationSuccessIcon }),
-        /* @__PURE__ */ t(w, { variant: O.TITLE, children: i.get("payByLink.details.expirationSuccess.title") }),
-        /* @__PURE__ */ t(w, { variant: O.BODY, children: i.get("payByLink.details.expirationSuccess.description") }),
-        /* @__PURE__ */ t(b, { actions: e })
+      return /* @__PURE__ */ n("div", { className: d.expirationSuccessContainer, children: [
+        /* @__PURE__ */ n(O, { name: "checkmark-circle-fill", className: d.expirationSuccessIcon }),
+        /* @__PURE__ */ n(_, { variant: w.TITLE, children: i.get("payByLink.details.expirationSuccess.title") }),
+        /* @__PURE__ */ n(_, { variant: w.BODY, children: i.get("payByLink.details.expirationSuccess.description") }),
+        /* @__PURE__ */ n(F, { actions: e })
       ] });
     }
-    if (c === "details") {
+    if (s === "details") {
       const e = [
         {
-          title: i.get(s ? "payByLink.details.actions.copied" : "payByLink.details.actions.copyLink"),
-          event: E,
+          title: i.get(c ? "payByLink.details.actions.copied" : "payByLink.details.actions.copyLink"),
+          event: A,
           variant: p.PRIMARY,
-          iconLeft: /* @__PURE__ */ t(
-            R,
+          iconLeft: /* @__PURE__ */ n(
+            O,
             {
               className: "adyen-pe-payment-link-creation-form-success__button-icon",
-              name: s ? "checkmark" : "copy"
+              name: c ? "checkmark" : "copy"
             }
           )
         },
         ...o.linkInformation.status !== "expired" && o.linkInformation.status !== "completed" ? [
           {
             title: i.get("payByLink.details.actions.expire"),
-            event: I,
+            event: v,
             variant: p.SECONDARY
           }
         ] : [],
-        ...!g && a ? [
+        ...!x && a ? [
           {
             title: i.get("payByLink.common.actions.goBack"),
             event: a,
@@ -164,33 +174,33 @@ const d = {
           }
         ] : []
       ];
-      return /* @__PURE__ */ t(U, { children: [
-        /* @__PURE__ */ t(H, { paymentLink: o }),
-        /* @__PURE__ */ t(Q, { paymentLink: o }),
-        /* @__PURE__ */ t(b, { actions: e })
+      return /* @__PURE__ */ n(W, { children: [
+        /* @__PURE__ */ n(z, { paymentLink: o }),
+        /* @__PURE__ */ n(G, { paymentLink: o }),
+        /* @__PURE__ */ n(F, { actions: e })
       ] });
     }
   }, [
-    v,
+    C,
     o,
     h,
-    c,
+    s,
     a,
-    C,
-    N,
+    g,
+    B,
     i,
-    A,
-    T,
-    s,
+    N,
     E,
-    I,
-    g
+    c,
+    A,
+    v,
+    x
   ]);
-  return /* @__PURE__ */ t("div", { className: d.root, children: [
-    /* @__PURE__ */ t("div", { className: K({ "adyen-pe-visually-hidden": c !== "details" }), children: /* @__PURE__ */ t(D, { hideTitle: Y, forwardedToRoot: !q, titleKey: "payByLink.details.title" }) }),
-    /* @__PURE__ */ t("div", { className: d.content, children: j() })
+  return /* @__PURE__ */ n("div", { className: d.root, children: [
+    /* @__PURE__ */ n("div", { className: j({ "adyen-pe-visually-hidden": s !== "details" }), children: /* @__PURE__ */ n(X, { hideTitle: R, forwardedToRoot: !D, titleKey: "payByLink.details.title" }) }),
+    /* @__PURE__ */ n("div", { className: d.content, children: V() })
   ] });
 };
 export {
-  vt as PaymentLinkDetails
+  St as PaymentLinkDetails
 };

package/dist/es/components/external/PaymentLinkDetails/components/PaymentLinkSummary/PaymentLinkSummary.js

@@ -1,41 +1,46 @@
-import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import d from "../../../../../core/Context/useCoreContext.js";
-import f from "../../../../internal/Card/Card.js";
-import { Tag as T } from "../../../../internal/Tag/Tag.js";
-import { TagVariant as t } from "../../../../internal/Tag/types.js";
-import { TypographyVariant as s, TypographyElement as l } from "../../../../internal/Typography/types.js";
-import i from "../../../../internal/Typography/Typography.js";
-import A from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as f } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import y from "../../../../../core/Context/useCoreContext.js";
+import T from "../../../../internal/Card/Card.js";
+import { Tag as A } from "../../../../internal/Tag/Tag.js";
+import { TagVariant as n } from "../../../../internal/Tag/types.js";
+import { TypographyVariant as i, TypographyElement as u } from "../../../../internal/Typography/types.js";
+import m from "../../../../internal/Typography/Typography.js";
+import h from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
 /* empty css                        */
-import { DATE_FORMAT_PAYMENT_LINK_DETAILS_SUMMARY as h } from "../../../../../constants/dateFormats.js";
-const c = {
+import { DATE_FORMAT_PAYMENT_LINK_DETAILS_SUMMARY as S } from "../../../../../constants/dateFormats.js";
+const s = {
   root: "adyen-pe-payment-link-summary",
   content: "adyen-pe-payment-link-summary__content",
   expiresLabel: "adyen-pe-payment-link-summary__expires-label"
-}, B = ({ paymentLink: r }) => {
-  const { i18n: e } = d(), { dateFormat: n } = A(), a = r == null ? void 0 : r.linkInformation.status, m = (u) => {
-    switch (u) {
+}, M = ({ paymentLink: r }) => {
+  const { i18n: e } = y(), { dateFormat: c } = h(), a = r?.linkInformation.status, p = (o) => {
+    switch (o) {
       case "active":
-        return t.BLUE;
+        return n.BLUE;
       case "completed":
-        return t.SUCCESS;
+        return n.SUCCESS;
       case "expired":
-        return t.DEFAULT;
+        return n.DEFAULT;
       case "paymentPending":
-        return t.WARNING;
+        return n.WARNING;
       default:
-        return t.DEFAULT;
+        return n.DEFAULT;
     }
-  };
-  return /* @__PURE__ */ o(f, { classNameModifiers: [c.root], children: /* @__PURE__ */ o("div", { className: c.content, children: [
-    /* @__PURE__ */ o(T, { variant: m(a), children: e.has(`payByLink.common.status.${a}`) ? e.get(`payByLink.common.status.${a}`) : r == null ? void 0 : r.linkInformation.status }),
-    /* @__PURE__ */ o(i, { variant: s.TITLE, large: !0, children: `${e.amount(r == null ? void 0 : r.linkInformation.amount.value, r == null ? void 0 : r.linkInformation.amount.currency)} ${r == null ? void 0 : r.linkInformation.amount.currency}` }),
-    /* @__PURE__ */ o("div", { children: [
-      /* @__PURE__ */ o(i, { el: l.SPAN, variant: s.BODY, className: c.expiresLabel, children: `${e.get("payByLink.details.fields.expiresOn")}: ` }),
-      /* @__PURE__ */ o(i, { el: l.SPAN, variant: s.BODY, children: n(r.linkInformation.expirationDate, h) })
+  }, d = f(() => {
+    if (!r?.linkInformation.amount) return null;
+    const { value: o, currency: l } = r.linkInformation.amount;
+    return `${e.amount(o, l, { hideCurrency: !0 })} ${l}`;
+  }, [e, r?.linkInformation.amount]);
+  return /* @__PURE__ */ t(T, { classNameModifiers: [s.root], children: /* @__PURE__ */ t("div", { className: s.content, children: [
+    /* @__PURE__ */ t(A, { variant: p(a), children: e.has(`payByLink.common.status.${a}`) ? e.get(`payByLink.common.status.${a}`) : r?.linkInformation.status }),
+    /* @__PURE__ */ t(m, { variant: i.TITLE, large: !0, children: d }),
+    /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ t(m, { el: u.SPAN, variant: i.BODY, className: s.expiresLabel, children: `${e.get("payByLink.details.fields.expiresOn")}: ` }),
+      /* @__PURE__ */ t(m, { el: u.SPAN, variant: i.BODY, children: c(r.linkInformation.expirationDate, S) })
     ] })
   ] }) });
 };
 export {
-  B as PaymentLinkSummary
+  M as PaymentLinkSummary
 };