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

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

@@ -0,0 +1,385 @@
+import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { DEFAULT_PAYMENT_LINK_STATUS_GROUP as ce, PAYMENT_LINK_STATUS_GROUPS_FILTER_MAPPING as at, PAYMENT_LINK_STATUSES as Le, PAYMENT_LINK_TYPES as ot, BASE_ACTIONS_CLASS as st, TABS_CONTAINER_CLASS as rt, PAYMENT_LINK_STATUS_GROUPS_TABS as j, FILTERS_CONTAINER_CLASS as lt, ACTION_BUTTONS_CONTAINER_CLASS as ct, ACTION_BUTTON_CLASS as me, FILTERS_ALERT_CONTAINER_CLASS as pe, BASE_CLASS as mt, BASE_XS_CLASS as pt, EARLIEST_PAYMENT_LINK_DATE as Tt, ACTION_BUTTON_MOBILE_CLASS as Te } from "./constants.js";
+import { FilterParam as i } from "../../../types.js";
+import ut from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import { useState as S, useCallback as r, useMemo as p, useEffect as I, useRef as dt } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import Ne from "../../../../core/Context/useCoreContext.js";
+import { LIMIT_OPTIONS as St, DEFAULT_PAGE_LIMIT as Et } from "../../../internal/Pagination/constants.js";
+import { PaymentLinksTable as _t } from "./PaymentLinksTable.js";
+import At from "../../../internal/Tabs/Tabs.js";
+/* empty css                          */
+import Y from "classnames";
+import { useResponsiveContainer as yt, containerQueries as Lt } from "../../../../hooks/useResponsiveContainer.js";
+import { PopoverContainerSize as ue } from "../../../internal/Popover/types.js";
+import { PaymentLinkDetailsModal as Nt } from "./PaymentLinkDetailsModal/PaymentLinkDetailsModal.js";
+import { ButtonVariant as K } from "../../../internal/Button/types.js";
+import { PaymentLinksOverviewModal as ft } from "./PaymentLinksOverviewModal.js";
+import { Alert as de } from "../../../internal/Alert/Alert.js";
+import { AlertVariantOption as Se, AlertTypeOption as Ee } from "../../../internal/Alert/types.js";
+import vt from "../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import { useMultiSelectionFilter as G } from "../../TransactionsOverview/components/MultiSelectionFilter/useMultiSelectionFilter/useMultiSelectionFilter.js";
+import It from "../../../../hooks/useModalDetails/useModalDetails.js";
+import Ct from "../../../internal/Calendar/calendar/timerange/presets/lastNDays.js";
+import { Fragment as Pt } from "../../../../external/preact/dist/preact.module.js";
+import x from "../../TransactionsOverview/components/MultiSelectionFilter/MultiSelectionFilter.js";
+import Rt from "../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import _e from "../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
+import F from "../../../internal/Button/Button.js";
+import { Icon as V } from "../../../internal/Icon/Icon.js";
+import kt from "../../../internal/FormFields/Select/Select.js";
+import { useConfigContext as Ft } from "../../../../core/ConfigContext/context.js";
+import { getTimeRangeSelectionDefaultPresetOptions as Mt, TIME_RANGE_SELECTION_PRESET_OPTION_KEYS as gt } from "../../../internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js";
+import { listFrom as M } from "../../../../utils/collection/main.js";
+import { useFilterBarState as ht, FilterBarMobileSwitch as Dt, FilterBar as Ot } from "../../../internal/FilterBar/FilterBar.js";
+import { isFunction as bt } from "../../../../utils/value/is.js";
+import { Header as wt } from "../../../internal/Header/Header.js";
+const Ae = "linkTypes", H = "statuses", ye = "storeIds", z = "_t", Bt = Object.keys(Le), Ut = ({
+  ["aria-label"]: L,
+  activeTab: E,
+  onChange: C
+}) => {
+  const { i18n: N } = Ne(), [_, A] = S(E), g = p(() => j.map(({ id: c, label: l }) => ({ id: c, name: N.get(l) })), [N]);
+  return I(() => {
+    const c = j.find((l) => l.id === _);
+    c && C(c);
+  }, [C, _]), I(() => A(E), [E]), /* @__PURE__ */ e(
+    kt,
+    {
+      "aria-label": L,
+      items: g,
+      selected: _,
+      onChange: ({ target: c }) => A(c.value),
+      showOverlay: !0,
+      multiSelect: !1,
+      filterable: !1
+    }
+  );
+}, Ni = ({
+  onFiltersChanged: L,
+  allowLimitSelection: E = !0,
+  preferredLimit: C = Et,
+  onRecordSelection: N,
+  showDetails: _,
+  onContactSupport: A,
+  hideTitle: g,
+  isFiltersLoading: c,
+  filterParams: l,
+  stores: m,
+  allStores: Q,
+  paymentLinkCreation: fe,
+  paymentLinkSettings: ve,
+  storeIds: f,
+  filterError: T,
+  storeError: y
+}) => {
+  const { i18n: n } = Ne(), { getPaymentLinks: h, createPBLPaymentLink: D, savePayByLinkSettings: O } = Ft().endpoints, Ie = Mt({ exclude: [gt.YEAR_TO_DATE] }), { defaultParams: u, nowTimestamp: Ce, refreshNowTimestamp: b } = ut(
+    "paymentLinks",
+    void 0,
+    void 0,
+    Ie
+  ), [v, Pe] = S(ce), [X, Re] = S(v), [ke, J] = S(!1), d = yt(Lt.down.xs), [W, w] = S(!1), Fe = r(
+    async ({ [z]: t, ...o }, k) => {
+      const U = { signal: k, errorLevel: "error" }, le = M(o[i.STORE_IDS]), nt = f ? M(f) : void 0;
+      return h(U, {
+        query: {
+          ...o,
+          storeIds: le?.length ? le : nt,
+          statuses: M(o[i.STATUSES]),
+          linkTypes: M(o[i.LINK_TYPES]),
+          createdSince: o[i.CREATED_SINCE] ?? u.current.defaultFilterParams[i.CREATED_SINCE],
+          createdUntil: o[i.CREATED_UNTIL] ?? u.current.defaultFilterParams[i.CREATED_UNTIL],
+          merchantReference: o[i.MERCHANT_REFERENCE] ?? u.current.defaultFilterParams[i.MERCHANT_REFERENCE],
+          paymentLinkId: o[i.PAYMENT_LINK_ID] ?? u.current.defaultFilterParams[i.PAYMENT_LINK_ID]
+        }
+      });
+    },
+    [u, h, f]
+  ), Z = ht(), Me = p(() => bt(L) ? L : void 0, [L]), ge = p(() => E ? St : void 0, [E]), P = Object.assign(u.current.defaultFilterParams, {
+    [Ae]: void 0,
+    [H]: void 0,
+    statusGroup: ce,
+    [ye]: void 0,
+    [z]: performance.now()
+  }), { canResetFilters: he, error: De, fetching: Oe, filters: s, limit: be, limitOptions: we, records: Be, resetFilters: Yt, updateFilters: a, updateLimit: Ue, ...Ye } = vt({
+    fetchRecords: Fe,
+    dataField: "data",
+    filterParams: P,
+    initialFiltersSameAsDefault: !0,
+    onFiltersChanged: Me,
+    preferredLimit: C,
+    preferredLimitOptions: ge,
+    enabled: !!h && !!Q?.length
+  }), Ke = G({
+    mapFilterOptionName: r((t) => n.get(Le[t]), [n]),
+    filterParam: H,
+    filterValues: l?.statuses?.[at[v]] ?? Bt,
+    defaultFilters: P,
+    updateFilters: a,
+    filters: s
+  }), Ge = G({
+    mapFilterOptionName: r((t) => n.get(ot[t]), [n]),
+    filterParam: Ae,
+    filterValues: l?.linkTypes,
+    defaultFilters: P,
+    updateFilters: a,
+    filters: s
+  }), xe = G({
+    mapFilterOptionName: r((t) => m?.find((o) => o.id === t)?.storeCode ?? t, [m]),
+    filterParam: ye,
+    filterValues: p(() => m && m.length > 0 ? m.filter((t) => t.id).map((t) => t.id) : void 0, [m]),
+    defaultFilters: P,
+    updateFilters: a,
+    filters: s
+  });
+  I(() => {
+    a({
+      [i.CURRENCIES]: void 0
+    });
+  }, [a]), I(() => {
+    b();
+  }, [s, b]);
+  const $ = p(
+    () => ({
+      showDetails: _ ?? !0,
+      callback: N
+    }),
+    [_, N]
+  ), Ve = p(() => ({ paymentLink: $ }), [$]), { updateDetails: q, resetDetails: He, selectedDetail: ze } = It(Ve), je = r(
+    ({ paymentLinkId: t }) => {
+      q({
+        selection: {
+          type: "paymentLink",
+          data: t
+        },
+        modalSize: "small"
+      }).callback({ id: t });
+    },
+    [q]
+  ), Qe = r(
+    (t) => {
+      t || (t = void 0), a({ merchantReference: t });
+    },
+    [a]
+  ), Xe = r(
+    (t) => {
+      t || (t = void 0), a({ paymentLinkId: t });
+    },
+    [a]
+  ), R = dt(null), ee = r(
+    ({ id: t }) => {
+      R.current && clearTimeout(R.current), R.current = setTimeout(() => {
+        requestAnimationFrame(() => J(!1));
+        const k = { statusGroup: t, [H]: void 0 };
+        a(k), R.current = null;
+      }, 500), Pe(t), J(!0), Re(void 0);
+    },
+    [a]
+  ), te = p(() => n.get("payByLink.overview.list.filters.types.statusGroup"), [n]), Je = l?.linkTypes && l?.linkTypes?.length > 0 || !!T, We = l?.statuses && l?.statuses?.[v] && l?.statuses?.[v]?.length > 0 || !!T, Ze = m && m?.length > 1 || !!y, $e = p(() => new Date(Ct(Tt).from).toString(), []), [qe, B] = S(!1), [et, ie] = S(void 0), ne = r(() => {
+    ie("Creation"), B(!0);
+  }, []), ae = r(() => {
+    ie("Settings"), B(!0);
+  }, []), tt = r(() => {
+    B(!1);
+  }, []), oe = r(() => {
+    const t = /* @__PURE__ */ new Date(), o = s?.[i.CREATED_UNTIL], U = (o ? new Date(o) : null)?.toDateString() === t.toDateString();
+    a({
+      ...U && { [i.CREATED_UNTIL]: t.toISOString() },
+      [z]: performance.now()
+    });
+  }, [s, a]), se = p(() => ({
+    onContactSupport: A,
+    storeIds: f
+  }), [A, f]);
+  I(() => {
+    w(!!y || !!T);
+  }, [y, T]);
+  const re = r(() => {
+    w(!1);
+  }, [w]), it = !!(O || D);
+  return /* @__PURE__ */ e("div", { className: Y(mt, { [pt]: d }), children: [
+    /* @__PURE__ */ e(wt, { hideTitle: g, titleKey: "payByLink.overview.title", children: /* @__PURE__ */ e("div", { className: st, children: [
+      d && D && /* @__PURE__ */ e(
+        F,
+        {
+          iconButton: !0,
+          "aria-label": n.get("payByLink.overview.list.actions.createPaymentLink"),
+          className: Te,
+          onClick: ne,
+          children: /* @__PURE__ */ e(V, { name: "plus" })
+        }
+      ),
+      /* @__PURE__ */ e(Dt, { ...Z }),
+      d && O && /* @__PURE__ */ e(
+        F,
+        {
+          iconButton: !0,
+          "aria-label": n.get("payByLink.overview.actions.settings.a11y.label"),
+          variant: K.SECONDARY,
+          className: Te,
+          onClick: ae,
+          children: /* @__PURE__ */ e(V, { name: "cog" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: rt, children: d ? /* @__PURE__ */ e(
+      Ut,
+      {
+        "aria-label": te,
+        activeTab: X ?? v,
+        onChange: ee
+      }
+    ) : /* @__PURE__ */ e(
+      At,
+      {
+        "aria-label": te,
+        tabs: j,
+        activeTab: X,
+        onChange: ee
+      }
+    ) }),
+    /* @__PURE__ */ e(Pt, { children: [
+      !c && /* @__PURE__ */ e("div", { className: lt, children: [
+        /* @__PURE__ */ e(Ot, { ...Z, ariaLabelKey: "payByLink.overview.filters.label", children: [
+          Ze && /* @__PURE__ */ e(
+            x,
+            {
+              ...xe,
+              isInvalid: !!y,
+              readonly: !!y,
+              placeholder: n.get("payByLink.overview.filters.types.stores.label")
+            }
+          ),
+          /* @__PURE__ */ e(
+            Rt,
+            {
+              canResetFilters: he,
+              defaultParams: u,
+              filters: s,
+              sinceDate: $e,
+              nowTimestamp: Ce,
+              refreshNowTimestamp: b,
+              updateFilters: a
+            }
+          ),
+          Je && /* @__PURE__ */ e(
+            x,
+            {
+              ...Ge,
+              isInvalid: !!T,
+              readonly: !!T,
+              placeholder: n.get("payByLink.overview.filters.types.linkTypes.label")
+            }
+          ),
+          We && /* @__PURE__ */ e(
+            x,
+            {
+              ...Ke,
+              isInvalid: !!T,
+              readonly: !!T,
+              placeholder: n.get("payByLink.overview.filters.types.status.label")
+            }
+          ),
+          /* @__PURE__ */ e(
+            _e,
+            {
+              name: n.get("payByLink.overview.filters.types.merchantReference.label"),
+              label: s[i.MERCHANT_REFERENCE] ? s[i.MERCHANT_REFERENCE] : n.get("payByLink.overview.filters.types.merchantReference.label"),
+              value: s[i.MERCHANT_REFERENCE],
+              onChange: Qe,
+              type: "text",
+              containerSize: ue.MEDIUM
+            }
+          ),
+          /* @__PURE__ */ e(
+            _e,
+            {
+              name: n.get("payByLink.overview.filters.types.paymentLinkID.label"),
+              label: s[i.PAYMENT_LINK_ID] ? s[i.PAYMENT_LINK_ID] : n.get("payByLink.overview.filters.types.paymentLinkID.label"),
+              value: s[i.PAYMENT_LINK_ID],
+              onChange: Xe,
+              type: "text",
+              containerSize: ue.MEDIUM
+            }
+          ),
+          d && W && /* @__PURE__ */ e(
+            de,
+            {
+              className: Y(pe),
+              type: Ee.CRITICAL,
+              variant: Se.TIP,
+              closeButton: !0,
+              onClose: re,
+              description: n.get("payByLink.overview.filters.errors.networkError")
+            }
+          )
+        ] }),
+        it && !d && /* @__PURE__ */ e("div", { className: ct, children: [
+          D && /* @__PURE__ */ e(F, { variant: K.PRIMARY, className: me, onClick: ne, children: n.get("payByLink.overview.list.actions.createPaymentLink") }),
+          O && /* @__PURE__ */ e(
+            F,
+            {
+              "aria-label": n.get("payByLink.overview.actions.settings.a11y.label"),
+              variant: K.SECONDARY,
+              className: me,
+              onClick: ae,
+              children: /* @__PURE__ */ e(V, { name: "cog" })
+            }
+          )
+        ] })
+      ] }),
+      !d && W && /* @__PURE__ */ e(
+        de,
+        {
+          className: Y(pe),
+          type: Ee.CRITICAL,
+          variant: Se.TIP,
+          closeButton: !0,
+          onClose: re,
+          description: n.get("payByLink.overview.filters.errors.networkError")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      Nt,
+      {
+        selectedDetail: ze,
+        resetDetails: He,
+        onUpdate: oe,
+        children: /* @__PURE__ */ e(
+          _t,
+          {
+            stores: m,
+            storeError: y,
+            error: De,
+            limit: be,
+            allStores: Q,
+            limitOptions: we,
+            loading: ke || Oe || c,
+            onContactSupport: A,
+            onLimitSelection: Ue,
+            onRowClick: je,
+            showPagination: !0,
+            paymentLinks: Be,
+            ...Ye
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      ft,
+      {
+        modalType: et,
+        isModalVisible: qe,
+        onCloseModal: tt,
+        paymentLinkSettings: ve,
+        paymentLinkCreation: fe,
+        storeIds: se.storeIds,
+        onContactSupport: se.onContactSupport,
+        refreshPaymentLinkList: oe
+      }
+    )
+  ] });
+};
+export {
+  Ni as PaymentLinksOverview
+};

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

@@ -0,0 +1,22 @@
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { PaymentLinksOverview as m } from "./PaymentLinksOverview.js";
+import f from "../../../../hooks/usePaymentLinkFilters.js";
+/* empty css                          */
+function P({ ...r }) {
+  const { filters: t, isFetching: e, stores: i, filterError: s, allStores: o, storeError: n } = f(r?.storeIds);
+  return /* @__PURE__ */ a(
+    m,
+    {
+      ...r,
+      filterParams: t,
+      stores: i,
+      allStores: o,
+      isFiltersLoading: e,
+      filterError: s,
+      storeError: n
+    }
+  );
+}
+export {
+  P as default
+};

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

@@ -0,0 +1,65 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import h from "../../../../core/Context/useCoreContext.js";
+import { useState as p, useCallback as f, useEffect as k } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { popoverUtil as g } from "../../../internal/Popover/utils/popoverUtil.js";
+import w from "../../PaymentLinkCreation/components/PaymentLinkCreationContainer/PaymentLinkCreationContainer.js";
+import O from "../../PaymentLinkSettings/components/PaymentLinkSettingsContainer/PaymentLinkSettingsContainer.js";
+import P from "../../../internal/Modal/Modal.js";
+const j = ({
+  isModalVisible: e,
+  onCloseModal: o,
+  modalType: t,
+  paymentLinkCreation: n,
+  paymentLinkSettings: u,
+  storeIds: i,
+  onContactSupport: s,
+  refreshPaymentLinkList: a
+}) => {
+  const { i18n: c } = h(), [l, m] = p(!1), v = f(() => {
+    o(), l && (a?.(), m(!1));
+  }, [o, l, a]);
+  k(() => {
+    e && g.closeAll();
+  }, [e]);
+  const d = f(
+    (C) => {
+      n?.onPaymentLinkCreated?.(C), m(!0);
+    },
+    [n]
+  );
+  return !e || !t ? null : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+    P,
+    {
+      isOpen: e,
+      "aria-label": c.get("payByLink.overview.title"),
+      onClose: v,
+      isDismissible: !0,
+      headerWithBorder: !1,
+      size: "large",
+      children: [
+        t === "Creation" ? /* @__PURE__ */ r(
+          w,
+          {
+            ...n,
+            onPaymentLinkCreated: d,
+            storeIds: i,
+            onContactSupport: s,
+            embeddedInOverview: !0
+          }
+        ) : null,
+        t === "Settings" ? /* @__PURE__ */ r(
+          O,
+          {
+            ...u,
+            storeIds: i,
+            onContactSupport: s,
+            embeddedInOverview: !0
+          }
+        ) : null
+      ]
+    }
+  ) });
+};
+export {
+  j as PaymentLinksOverviewModal
+};

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

@@ -0,0 +1,208 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as G, useMemo as T } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import V from "../../../../core/Context/useCoreContext.js";
+import W from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { useResponsiveContainer as g, containerQueries as k } from "../../../../hooks/useResponsiveContainer.js";
+import { useTableColumns as q } from "../../../../hooks/useTableColumns.js";
+import { BASE_TABLE_GRID_CLASS as X, MOBILE_TABLE_CELL_CLASS as N, MOBILE_EXPIRE_DATE_CELL_CLASS as $, PAYMENT_LINK_STATUSES as S, MOBILE_AMOUNT_CELL_CLASS as j } from "./constants.js";
+import { Tag as v } from "../../../internal/Tag/Tag.js";
+import { TagVariant as m } from "../../../internal/Tag/types.js";
+import o from "../../../internal/Typography/Typography.js";
+import { TypographyVariant as a, TypographyElement as s } from "../../../internal/Typography/types.js";
+import { DAY_MS as z } from "../../../internal/Calendar/calendar/constants.js";
+import { Tooltip as Q } from "../../../internal/Tooltip/Tooltip.js";
+import { isActionNeededUrgently as H } from "../../../utils/payByLink/actionLevel.js";
+import J from "classnames";
+import { PaymentLinksErrors as Z } from "./PaymentLinksErrors.js";
+import { FRONTEND_REDACTED_DATA_MARKER as ee, BACKEND_REDACTED_DATA_MARKER as re } from "../../../constants.js";
+import { ACCOUNT_MISCONFIGURATION as ie, WRONG_STORE_IDS as te } from "../utils/getPaymentLinksErrorMessage.js";
+import B from "../../../internal/DataGrid/DataGrid.js";
+import ne from "../../../internal/Pagination/Pagination.js";
+import { Fragment as C } from "../../../../external/preact/dist/preact.module.js";
+import { DATE_FORMAT_RESPONSE_DEADLINE as oe, DATE_FORMAT_PAYMENT_LINKS_OVERVIEW_EXPIRATION_DATE as A, DATE_FORMAT_PAYMENT_LINKS_OVERVIEW as ae } from "../../../../constants/dateFormats.js";
+const I = (c) => {
+  switch (c) {
+    case "completed":
+      return m.SUCCESS;
+    case "expired":
+      return m.DEFAULT;
+    case "paymentPending":
+      return m.WARNING;
+    case "active":
+      return m.BLUE;
+    default:
+      return m.DEFAULT;
+  }
+}, se = [
+  "paymentLinkId",
+  "merchantReference",
+  "storeCode",
+  "currency",
+  "amount",
+  "status",
+  "expirationDate",
+  "creationDate",
+  "linkType",
+  "shopperEmail"
+], R = {
+  paymentLinkId: "payByLink.overview.list.fields.id",
+  amount: "payByLink.overview.list.fields.amount",
+  currency: "payByLink.overview.list.fields.currency",
+  status: "payByLink.overview.list.fields.status",
+  expirationDate: "payByLink.overview.list.fields.expirationDate",
+  creationDate: "payByLink.overview.list.fields.createdAt",
+  linkType: "payByLink.overview.list.fields.linkType",
+  merchantReference: "payByLink.overview.list.fields.merchantReference",
+  shopperEmail: "payByLink.overview.list.fields.shopperEmail",
+  storeCode: "payByLink.overview.list.fields.store"
+}, le = "payByLink.overview.errors.couldNotLoadLinks", we = ({
+  error: c,
+  loading: w,
+  onContactSupport: L,
+  onRowClick: O,
+  showDetails: me,
+  showPagination: M,
+  paymentLinks: b,
+  stores: d,
+  allStores: p,
+  storeError: f,
+  ...P
+}) => {
+  const { i18n: t, getImageAsset: D } = V(), { dateFormat: l } = W(), x = g(k.up.sm), F = G(
+    (e) => {
+      if (!e) return "";
+      const y = new Date(e).getTime() - Date.now(), _ = Math.ceil(y / z), h = l(e, { ...oe, weekday: void 0 });
+      return _ <= 1 ? t.get("payByLink.overview.common.actionNeeded.expiresToday", { values: { date: h } }) : t.get("payByLink.overview.common.actionNeeded.expiresDays", { values: { days: _, date: h } });
+    },
+    [l, t]
+  ), i = g(k.down.xs), U = q({
+    fields: se,
+    fieldsKeys: R,
+    columnConfig: {
+      amount: {
+        position: "right",
+        flex: x ? 1.5 : void 0
+      },
+      linkType: {
+        label: t.get(R.linkType),
+        visible: !i
+      },
+      storeCode: {
+        visible: d && d?.length > 1 && !i
+      },
+      merchantReference: {
+        visible: !i
+      },
+      currency: {
+        visible: !i
+      },
+      status: {
+        visible: !i
+      },
+      expirationDate: {
+        visible: !i
+      },
+      creationDate: {
+        visible: !i
+      },
+      shopperEmail: {
+        visible: !i
+      }
+    }
+  }), Y = {
+    title: "payByLink.overview.errors.listEmpty",
+    message: ["payByLink.overview.errors.listEmpty.message"]
+  }, u = T(() => {
+    if (!(p?.length !== 0 || f))
+      return {
+        message: "No stores configured",
+        name: "Account misconfiguration",
+        errorCode: ie,
+        type: "error",
+        requestId: ""
+      };
+  }, [p, f]), E = T(() => {
+    if (!(p && p?.length > 0 && d?.length !== 0))
+      return {
+        errorCode: te,
+        type: "error",
+        requestId: ""
+      };
+  }, [p, d]), K = T(
+    () => () => /* @__PURE__ */ r(
+      Z,
+      {
+        getImageAsset: D,
+        error: u || c || E,
+        onContactSupport: L,
+        errorMessage: le
+      }
+    ),
+    [c, D, L, u, E]
+  );
+  return /* @__PURE__ */ r("div", { className: X, children: /* @__PURE__ */ r(
+    B,
+    {
+      narrowColumns: i,
+      errorDisplay: K,
+      error: u || c || E,
+      columns: U,
+      data: b,
+      loading: w,
+      outline: !1,
+      onRowClick: { callback: O },
+      emptyTableMessage: Y,
+      customCells: {
+        currency: ({ item: e }) => {
+          if (e?.amount?.currency)
+            return /* @__PURE__ */ r(v, { label: `${e.amount.currency}`, variant: m.DEFAULT });
+        },
+        amount: ({ value: e, item: n }) => {
+          const y = t.amount(e.value, e.currency, { hideCurrency: !0 });
+          return i ? /* @__PURE__ */ r("div", { className: J(N, j), children: [
+            /* @__PURE__ */ r(o, { el: s.SPAN, variant: a.BODY, strongest: !0, children: y }),
+            /* @__PURE__ */ r("span", { children: n.status && /* @__PURE__ */ r(v, { label: t.get(S[n.status]), variant: I(n.status) }) })
+          ] }) : /* @__PURE__ */ r(o, { el: s.SPAN, variant: a.BODY, children: y });
+        },
+        status: ({ value: e }) => {
+          if (e)
+            return /* @__PURE__ */ r(v, { label: t.get(`${S[e]}`), variant: I(e) });
+        },
+        linkType: ({ item: e }) => {
+          if (!e?.linkType) return null;
+          const n = e?.linkType === "open" ? "payByLink.common.linkType.open" : "payByLink.common.linkType.singleUse";
+          return /* @__PURE__ */ r(o, { el: s.SPAN, variant: a.BODY, children: t.get(n) });
+        },
+        creationDate: ({ value: e }) => /* @__PURE__ */ r("time", { dateTime: e, children: /* @__PURE__ */ r(o, { el: s.SPAN, variant: a.BODY, children: l(e, ae) }) }),
+        expirationDate: ({ value: e }) => H(e) ? /* @__PURE__ */ r(Q, { content: F(e), children: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r("time", { dateTime: e, children: l(e, A) }) }) }) : /* @__PURE__ */ r("time", { dateTime: e, children: /* @__PURE__ */ r(o, { el: s.SPAN, variant: a.BODY, children: l(e, A) }) }),
+        paymentLinkId: ({ item: e }) => i ? /* @__PURE__ */ r("div", { className: N, children: [
+          /* @__PURE__ */ r(o, { strongest: !0, el: s.SPAN, variant: a.BODY, children: e.paymentLinkId }),
+          /* @__PURE__ */ r("time", { dateTime: e.expirationDate, children: /* @__PURE__ */ r(
+            o,
+            {
+              className: $,
+              el: s.SPAN,
+              variant: a.CAPTION,
+              children: t.get("payByLink.overview.common.actionNeeded.expiresAt", {
+                values: { date: l(e.expirationDate, A) }
+              })
+            }
+          ) })
+        ] }) : /* @__PURE__ */ r(C, { children: e.paymentLinkId }),
+        shopperEmail: ({ item: e }) => /* @__PURE__ */ r(C, { children: e.shopperEmail === re ? ee : e.shopperEmail })
+      },
+      children: M && /* @__PURE__ */ r(B.Footer, { children: /* @__PURE__ */ r(
+        ne,
+        {
+          ...P,
+          ariaLabelKey: "payByLink.overview.pagination.label",
+          limitSelectAriaLabelKey: "payByLink.overview.pagination.controls.limitSelect.label"
+        }
+      ) })
+    }
+  ) });
+};
+export {
+  se as PAYMENT_LINKS_TABLE_FIELDS,
+  we as PaymentLinksTable
+};