@adyen/adyen-platform-experience-web 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Adyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# Adyen FP
+
+[![npm](https://img.shields.io/npm/v/@adyen/adyen-fp-web.svg)](http://npm.im/pablo/adyen-fp)
+
+Adyen FP provides you with the building blocks to create an internal dashboard for your platform customers.
+
+## Prerequisites
+
+-   [Adyen test account](https://www.adyen.com/signup)
+-   [API key](https://docs.adyen.com/development-resources/how-to-get-the-api-key)
+-   [Client key](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key)
+
+## Installation
+
+We only provide full support when you use one of these methods of installation.
+
+### Node package manager
+
+1. Install the [Adyen FP Node package](https://www.npmjs.com/package/@adyen/adyen-fp):
+
+```sh
+npm install @adyen/adyen-fp-web --save
+```
+
+2. Import Adyen FP into your application:
+
+```js
+import AdyenFp from '@adyen/adyen-fp-web';
+import '@adyen/adyen-fp-web/dist/adyen-fp-web.css';
+```
+
+## Development
+
+To run the development environment:
+
+1. Clone [this repository](https://github.com/Adyen/adyen-fp-web).
+2. Create a `.env` file on your project's root folder following the example in [`env.default`](envs/env.default) and fill in the environment variables.
+3. Install the dependencies by running:
+
+```sh
+npm install
+```
+
+4. Run the development environment, which starts a server listening on [http://localhost:3020](http://localhost:3030):
+
+```sh
+npm start
+```
+
+## Contributing
+
+We merge every pull request into the `main` branch. We aim to keep `main` in good shape, which allows us to release a new version whenever we need to.
+
+Have a look at our [contributing guidelines](https://github.com/Adyen/.github/blob/main/CONTRIBUTING.md) to find out how to raise a pull request.
+
+## See also
+
+-   [Documentation](https://docs.adyen.com/)
+-   [API Explorer](https://docs.adyen.com/api-explorer/)
+
+## Support
+
+If you have a feature request, or spotted a bug or a technical problem, [create an issue here](https://github.com/Adyen/adyen-fp-web/issues/new/choose).
+
+For other questions, [contact our support team](https://support.adyen.com/hc/en-us/requests/new?ticket_form_id=360000705420).
+
+## License
+
+This repository is available under the [MIT license](LICENSE).

package/dist/ModalContent-83a84ba5.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-ff45d757.js"),e=require("preact");require("classnames");const o=t=>n.hasOwnProperty(t,"id");function i({data:t}){const r=o(t)?{transaction:t}:{transactionId:t};return n.o(e.Fragment,{children:r&&n.o(n.TransactionDetails,{...r})})}exports.default=i;
+//# sourceMappingURL=ModalContent-83a84ba5.js.map

package/dist/ModalContent-83a84ba5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent-83a84ba5.js","sources":["../src/components/external/Transactions/components/ModalContent.tsx"],"sourcesContent":["import { SelectedDetail, TransactionDetailData } from '@src/components';\nimport TransactionDetails from '@src/components/external/TransactionDetails/components/TransactionDetails';\nimport { hasOwnProperty } from '@src/utils/common';\n\nconst isTransactionWithoutId = (data: string | TransactionDetailData): data is TransactionDetailData => hasOwnProperty(data, 'id');\nfunction ModalContent({ data }: SelectedDetail) {\n    const transactionProps = isTransactionWithoutId(data) ? { transaction: data } : { transactionId: data };\n\n    return <>{transactionProps && <TransactionDetails {...transactionProps} />}</>;\n}\nexport default ModalContent;\n"],"names":["isTransactionWithoutId","data","hasOwnProperty","ModalContent","transactionProps","jsx","TransactionDetails"],"mappings":"iKAIA,MAAMA,EAA0BC,GAAwEC,EAAA,eAAeD,EAAM,IAAI,EACjI,SAASE,EAAa,CAAE,KAAAF,GAAwB,CACtC,MAAAG,EAAmBJ,EAAuBC,CAAI,EAAI,CAAE,YAAaA,GAAS,CAAE,cAAeA,GAEjG,uBAAU,SAAoBG,GAAAC,IAACC,EAAAA,mBAAoB,CAAA,GAAGF,CAAkB,CAAA,CAAG,CAAA,CAC/E"}

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../index-ff45d757.js");require("preact");require("classnames");exports.AdyenFP=_.AdyenFP;exports.Core=_.Core;exports.TransactionFilterParam=_.TransactionFilterParam;exports.TransactionsComponent=_.TransactionsElement;exports.TransactionsDetailsComponent=_.TransactionsElement$1;exports.all_locales=_.all_locales;exports.ar=_.ar;exports.cs_CZ=_.cs_CZ;exports.da_DK=_.da_DK;exports.de_DE=_.de_DE;exports.el_GR=_.el_GR;exports.en_US=_.en_US;exports.es_ES=_.es_ES;exports.fi_FI=_.fi_FI;exports.fr_FR=_.fr_FR;exports.hr_HR=_.hr_HR;exports.hu_HU=_.hu_HU;exports.it_IT=_.it_IT;exports.ja_JP=_.ja_JP;exports.ko_KR=_.ko_KR;exports.nl_NL=_.nl_NL;exports.no_NO=_.no_NO;exports.pl_PL=_.pl_PL;exports.pt_BR=_.pt_BR;exports.pt_PT=_.pt_PT;exports.ro_RO=_.ro_RO;exports.ru_RU=_.ru_RU;exports.sk_SK=_.sk_SK;exports.sl_SI=_.sl_SI;exports.sv_SE=_.sv_SE;exports.zh_CN=_.zh_CN;exports.zh_TW=_.zh_TW;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,104 @@
+var a = Object.defineProperty;
+var c = (e, t, s) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+import { render as n } from "preact";
+import u from "./EventEmitter.js";
+import m from "../../utils/uuid.js";
+import { isString as d } from "../../utils/validator-utils.js";
+var h;
+class r {
+  constructor(t) {
+    o(this, "_id", `${(h = this.constructor) == null ? void 0 : h.type}-${m()}`);
+    o(this, "props");
+    o(this, "state");
+    o(this, "defaultProps", {});
+    o(this, "_node");
+    o(this, "_component");
+    o(this, "eventEmitter", new u());
+    o(this, "_parentInstance");
+    o(this, "sessionSetupError");
+    // provided by AdyenFPCore
+    o(this, "loadingContext");
+    o(this, "i18n");
+    o(this, "session");
+    this.props = this.formatProps({ ...this == null ? void 0 : this.defaultProps, ...t }), this._parentInstance = this.props._parentInstance, this._node = null, this.state = {}, this.loadingContext = this.props.core.loadingContext, this.i18n = this.props.core.modules.i18n, this.session = this.props.core.session, this.props.core.registerComponent(this);
+  }
+  /**
+   * Executed during creation of any element.
+   * Gives a chance to any component to format the props we're receiving.
+   */
+  formatProps(t) {
+    return t;
+  }
+  /**
+   * Executed on the `data` getter.
+   * Returns the component data necessary for making a request
+   */
+  formatData() {
+    return {};
+  }
+  setState(t) {
+    this.state = { ...this.state, ...t };
+  }
+  /**
+   * Returns the component data ready to submit to the Checkout API
+   * Note: this does not ensure validity, check isValid first
+   */
+  get data() {
+    return {
+      ...this.formatData(),
+      clientStateDataIndicator: !0
+    };
+  }
+  render() {
+    throw new Error("Component cannot be rendered.");
+  }
+  mount(t) {
+    var i, p;
+    let s;
+    if (d(t) ? s = document.querySelector(t) : s = t, !s)
+      throw new Error("Component could not mount. Root node was not found.");
+    return this._node ? this.unmount() : this.props.modules && this.props.modules.analytics && this.props.modules.analytics.send({
+      containerWidth: s && s.offsetWidth,
+      component: ((i = this.constructor) == null ? void 0 : i.analyticsType) ?? ((p = this.constructor) == null ? void 0 : p.type),
+      flavor: "components"
+    }), this._node = s, this._component = this.render(), n(this._component, s), this;
+  }
+  /**
+   * Updates props, resets the internal state and remounts the element.
+   * @param props - props to update
+   * @returns this - the element instance
+   */
+  update(t) {
+    return this.props = this.formatProps({ ...this.props, ...t }), this.sessionSetupError = this.props.core.sessionSetupError, this.session = this.props.core.session, this._component = this.render(), this._node && n(this._component, this._node), this;
+  }
+  /**
+   * Unmounts an element and mounts it again on the same node i.e. allows mount w/o having to pass a node.
+   * Should be "private" & undocumented (although being a public function is useful for testing).
+   * Left in for legacy reasons
+   */
+  remount(t) {
+    if (!this._node)
+      throw new Error("Component is not mounted.");
+    const s = t || this.render();
+    return n(s, this._node, void 0), this;
+  }
+  /**
+   * Unmounts an element from the DOM
+   */
+  unmount() {
+    return this._node && n(null, this._node), this;
+  }
+  /**
+   * Unmounts an element and removes it from the parent instance
+   * For "destroy" type cleanup - when you don't intend to use the component again
+   */
+  remove() {
+    this.unmount(), this._parentInstance && this._parentInstance.remove(this);
+  }
+}
+o(r, "type"), o(r, "analyticsType");
+const E = r;
+export {
+  E as default
+};

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

@@ -0,0 +1,25 @@
+var f = Object.defineProperty;
+var r = (e, s, t) => s in e ? f(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var h = (e, s, t) => (r(e, typeof s != "symbol" ? s + "" : s, t), t);
+class v {
+  constructor() {
+    h(this, "events", {});
+    h(this, "on", (s, t) => {
+      var i;
+      this.events[s] = this.events[s] || [], (i = this.events[s]) == null || i.push(t);
+    });
+    h(this, "off", (s, t) => {
+      this.events[s] && (this.events[s] = this.events[s].reduce((i, n) => (n !== t && i.push(n), i), []));
+    });
+    h(this, "emit", (s, t) => {
+      var i;
+      this.events[s] && ((i = this.events[s]) == null || i.forEach((n) => {
+        n(t);
+      }));
+    });
+  }
+}
+const E = v;
+export {
+  E as default
+};

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

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

package/dist/es/components/external/TransactionDetails/components/TransactionData.js

@@ -0,0 +1,70 @@
+import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import u from "./TransactionDataSkeleton.js";
+import { Image as _ } from "../../../internal/Image/Image.js";
+import { parsePaymentMethodType as t } from "../../Transactions/components/utils.js";
+import { Tag as p } from "../../../internal/Tag/Tag.js";
+import { TagVariant as a } from "../../../internal/Tag/types.js";
+import h from "../../../../core/Context/useCoreContext.js";
+import { useMemo as r } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { Fragment as g } from "preact";
+const k = ({ transaction: e, isFetching: y }) => {
+  var l;
+  const { i18n: m } = h(), o = r(
+    () => e ? m.date(new Date(e.creationDate), {
+      weekday: "long",
+      month: "long",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZoneName: "shortOffset"
+    }).toString() : "",
+    [e, m]
+  ), f = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending";
+  return /* @__PURE__ */ d(g, { children: e ? /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data", children: [
+    /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__container", children: [
+      ((e == null ? void 0 : e.status) || (e == null ? void 0 : e.category)) && /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__section adyen-fp-transaction-data__tag-container", children: [
+        (e == null ? void 0 : e.status) && /* @__PURE__ */ d(
+          p,
+          {
+            label: m.get(e.status),
+            variant: e.status === "Booked" ? a.SUCCESS : e.status === "Reversed" ? a.ERROR : a.DEFAULT
+          }
+        ),
+        e.category && /* @__PURE__ */ d(p, { label: m.get(`txType.${e.category}`), variant: a.DEFAULT })
+      ] }),
+      /* @__PURE__ */ d(
+        "div",
+        {
+          className: `adyen-fp-transaction-data__section adyen-fp-transaction-data__amount adyen-fp-transaction-data__amount--${f}`,
+          children: e.amount ? m.amount(e.amount.value, e.amount.currency, {
+            currencyDisplay: "symbol"
+          }) : null
+        }
+      ),
+      ((e == null ? void 0 : e.paymentMethod) || (e == null ? void 0 : e.bankAccount)) && /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__section adyen-fp-transaction-data__payment-method", children: [
+        /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__payment-method-logo-container", children: /* @__PURE__ */ d(
+          _,
+          {
+            name: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
+            alt: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
+            folder: "logos/",
+            className: "adyen-fp-transactions__payment-method-logo"
+          }
+        ) }),
+        /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__payment-method-detail", children: e != null && e.paymentMethod ? t(e == null ? void 0 : e.paymentMethod, "detail") : (l = e == null ? void 0 : e.bankAccount) == null ? void 0 : l.accountNumberLastFourDigits })
+      ] }),
+      /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__section adyen-fp-transaction-data__label", children: o })
+    ] }),
+    (e == null ? void 0 : e.balanceAccountDescription) && /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__container", children: [
+      /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__label", children: m.get("account") }),
+      /* @__PURE__ */ d("div", { children: e.balanceAccountDescription })
+    ] }),
+    /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__container", children: [
+      /* @__PURE__ */ d("div", { className: "adyen-fp-transaction-data__label", children: m.get("referenceID") }),
+      /* @__PURE__ */ d("div", { "aria-label": m.get("referenceID"), children: e.id })
+    ] })
+  ] }) : /* @__PURE__ */ d(u, { isLoading: y, skeletonRowNumber: 6 }) });
+};
+export {
+  k as TransactionData
+};

package/dist/es/components/external/TransactionDetails/components/TransactionDataSkeleton.js

@@ -0,0 +1,17 @@
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import s from "classnames";
+import { useMemo as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { Fragment as c } from "preact";
+const f = ({ isLoading: o, skeletonRowNumber: a = 0 }) => {
+  const e = m(() => Array.from({ length: a }, (t, r) => r), [a]);
+  return /* @__PURE__ */ n(c, { children: e.map((t) => /* @__PURE__ */ n(
+    "span",
+    {
+      className: s({ "adyen-fp-transaction-data__skeleton": !0, "adyen-fp-transaction-data__skeleton-loading-content": o })
+    },
+    `transaction-data-skeleton-${t}`
+  )) });
+};
+export {
+  f as default
+};

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

@@ -0,0 +1,33 @@
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TransactionData as h } from "./TransactionData.js";
+import { ErrorMessageDisplay as g } from "../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as T } from "../../../utils/transactionResourceErrorCodes.js";
+import C from "../../../../core/Context/useCoreContext.js";
+import { useFetch as p } from "../../../../hooks/useFetch/useFetch.js";
+import { useSetupEndpoint as y } from "../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { useMemo as o, useCallback as D } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import "./TransactionDetails.scss.js";
+import { EMPTY_OBJECT as E } from "../../../../utils/common/constants.js";
+const c = (t) => "transaction" in t;
+function P(t) {
+  const s = o(() => c(t) ? t.transaction : null, [t]), n = o(() => c(t) ? null : t.transactionId, [t]), { i18n: m } = C(), e = y("getTransaction"), l = D(async () => {
+    if (n)
+      return e(E, {
+        path: { transactionId: n }
+      });
+  }, [e, n]), { data: u, error: r, isFetching: f } = p({
+    fetchOptions: o(() => ({ enabled: !!n }), [n]),
+    queryFn: l
+  }), i = o(() => {
+    if (r)
+      return T(r, t.onContactSupport);
+  }, [r, t.onContactSupport]), d = s ?? u;
+  return /* @__PURE__ */ a("div", { className: "adyen-fp-transaction", children: [
+    t.title && /* @__PURE__ */ a("div", { className: "adyen-fp-title", children: m.get(t.title) }),
+    r && i && /* @__PURE__ */ a("div", { className: "adyen-fp-transaction--error-container", children: /* @__PURE__ */ a(g, { centered: !0, withImage: !0, ...i }) }),
+    /* @__PURE__ */ a(h, { transaction: d, isFetching: f })
+  ] });
+}
+export {
+  P as default
+};

package/dist/es/components/external/TransactionDetails/components/TransactionDetails.scss.js

@@ -0,0 +1,4 @@
+const a = "";
+export {
+  a as default
+};

package/dist/es/components/external/Transactions/TransactionsOverviewElement.js

@@ -0,0 +1,28 @@
+var r = Object.defineProperty;
+var i = (n, t, e) => t in n ? r(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
+import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../UIElement.js";
+import a from "./components/TransactionsOverviewContainer.js";
+class s extends c {
+  constructor(e) {
+    super(e);
+    o(this, "componentToRender", () => /* @__PURE__ */ m(
+      a,
+      {
+        ...this.props,
+        ref: (e) => {
+          this.componentRef = e;
+        },
+        elementRef: this.elementRef
+      }
+    ));
+    this.elementRef = e && e.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+o(s, "type", "transactions");
+const R = s;
+export {
+  s as TransactionsElement,
+  R as default
+};

package/dist/es/components/external/Transactions/components/AmountSkeleton/AmountSkeleton.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import e from "classnames";
+import { BASE_CLASS as m, LOADING_CLASS as a, MARGIN_CLASS as S } from "./constants.js";
+import "./AmountSkeleton.scss.js";
+const n = ({ hasMargin: o = !1, isLoading: t = !1, width: r }) => /* @__PURE__ */ s("span", { className: e(m, { [a]: t, [S]: o }), style: { width: r } });
+export {
+  n as AmountSkeleton,
+  n as default
+};

package/dist/es/components/external/Transactions/components/AmountSkeleton/AmountSkeleton.scss.js

@@ -0,0 +1,4 @@
+const t = "";
+export {
+  t as default
+};

package/dist/es/components/external/Transactions/components/AmountSkeleton/constants.js

@@ -0,0 +1,6 @@
+const n = "adyen-fp-amount-skeleton", o = n + "--has-margin", S = n + "--loading";
+export {
+  n as BASE_CLASS,
+  S as LOADING_CLASS,
+  o as MARGIN_CLASS
+};

package/dist/es/components/external/Transactions/components/BalanceAccountSelector/BalanceAccountSelector.js

@@ -0,0 +1,23 @@
+import { jsx as m } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as o } from "../../../../../external/preact/compat/dist/compat.module.js";
+import s from "../../../../internal/FormFields/Select/Select.js";
+const t = o(
+  ({
+    activeBalanceAccount: r,
+    balanceAccountSelectionOptions: e,
+    onBalanceAccountSelection: l
+  }) => e && e.length > 1 ? /* @__PURE__ */ m(
+    s,
+    {
+      onChange: l,
+      filterable: !1,
+      multiSelect: !1,
+      selected: r == null ? void 0 : r.id,
+      withoutCollapseIndicator: !0,
+      items: e
+    }
+  ) : null
+), p = t;
+export {
+  p as default
+};

package/dist/es/components/external/Transactions/components/BalanceAccountSelector/useBalanceAccountSelection.js

@@ -0,0 +1,17 @@
+import { useState as x, useCallback as d, useMemo as s } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+const p = (e) => {
+  const [n, t] = x(0), B = d(() => t(0), [t]), S = s(() => e == null ? void 0 : e[n], [e, n]), l = s(
+    () => e && e.length > 1 ? Object.freeze(e.map(({ id: o }) => ({ id: o, name: o }))) : void 0,
+    [e]
+  ), f = d(
+    ({ target: o }) => {
+      const m = o == null ? void 0 : o.value, i = e == null ? void 0 : e.findIndex(({ id: r }) => r === m);
+      i >= 0 && t(i);
+    },
+    [e, t]
+  );
+  return { activeBalanceAccount: S, balanceAccountSelectionOptions: l, onBalanceAccountSelection: f, resetBalanceAccountSelection: B };
+}, u = p;
+export {
+  u as default
+};

package/dist/es/components/external/Transactions/components/BalanceItem/BalanceItem.js

@@ -0,0 +1,35 @@
+import { jsx as c } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "../../../../../core/Context/useCoreContext.js";
+import { useRef as o } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { SummaryItem as y } from "../SummaryItem/SummaryItem.js";
+const R = ({ balance: e, isHeader: t = !1, isSkeleton: r = !1, isLoading: s = !1, widths: u, onWidthsSet: n, isEmpty: l }) => {
+  const { i18n: m } = a(), f = o(null), i = o(null);
+  return /* @__PURE__ */ c(
+    y,
+    {
+      isEmpty: l,
+      columnConfigs: [
+        {
+          labelKey: "accountBalance",
+          ref: f,
+          skeletonWidth: 80,
+          getValue: () => e && m.amount(e.value, e.currency)
+        },
+        {
+          ref: i,
+          skeletonWidth: 40,
+          valueHasLabelStyle: !0,
+          getValue: () => e == null ? void 0 : e.currency
+        }
+      ],
+      isHeader: t,
+      isSkeletonVisible: r,
+      isLoading: s,
+      widths: u,
+      onWidthsSet: n
+    }
+  );
+};
+export {
+  R as BalanceItem
+};

package/dist/es/components/external/Transactions/components/Balances/Balances.js

@@ -0,0 +1,50 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useSetupEndpoint as u } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { useCallback as x, useMemo as E, useEffect as g } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as W } from "../../../../../hooks/useFetch/useFetch.js";
+import { memo as b } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { BASE_CLASS as y } from "./constants.js";
+import C from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { BaseList as F } from "../../../../internal/BaseList/BaseList.js";
+import { BalanceItem as c } from "../BalanceItem/BalanceItem.js";
+import { useMaxWidthsState as M } from "../../hooks/useMaxWidths.js";
+import { EMPTY_OBJECT as k } from "../../../../../utils/common/constants.js";
+const P = b(
+  ({
+    balanceAccountId: t,
+    updateBalanceAccountCurrencies: o
+  }) => {
+    const i = u("getBalances"), p = x(async () => i(k, {
+      path: { balanceAccountId: t }
+    }), [t, i]), { data: e, error: f, isFetching: h } = W({
+      fetchOptions: E(() => ({ enabled: !!t }), [t]),
+      queryFn: p
+    });
+    g(() => {
+      e && o(e == null ? void 0 : e.balances.map(({ currency: r }) => r).sort());
+    }, [e, o]);
+    const m = !t || h, d = !!f || !(e != null && e.balances.length), B = e == null ? void 0 : e.balances, [S, ...n] = B ?? [], [a, l] = M();
+    return /* @__PURE__ */ s("div", { className: y, children: /* @__PURE__ */ s(
+      C,
+      {
+        renderHeader: /* @__PURE__ */ s(
+          c,
+          {
+            isEmpty: d,
+            balance: S,
+            widths: a,
+            isHeader: !0,
+            isSkeleton: m,
+            isLoading: m,
+            onWidthsSet: l
+          }
+        ),
+        filled: !0,
+        children: n.length && /* @__PURE__ */ s(F, { children: n.map((r) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(c, { balance: r, widths: a, onWidthsSet: l }) }, r.currency)) })
+      }
+    ) });
+  }
+);
+export {
+  P as Balances
+};

package/dist/es/components/external/Transactions/components/Balances/constants.js

@@ -0,0 +1,4 @@
+const a = "adyen-fp-balances";
+export {
+  a as BASE_CLASS
+};

package/dist/es/components/external/Transactions/components/ModalContent.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import n from "../../TransactionDetails/components/TransactionDetails.js";
+import { hasOwnProperty as i } from "../../../../utils/common/index.js";
+import { Fragment as s } from "preact";
+const a = (o) => i(o, "id");
+function f({ data: o }) {
+  const t = a(o) ? { transaction: o } : { transactionId: o };
+  return /* @__PURE__ */ r(s, { children: t && /* @__PURE__ */ r(n, { ...t }) });
+}
+export {
+  f as default
+};

package/dist/es/components/external/Transactions/components/MultiSelectionFilter/MultiSelectionFilter.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as i } from "../../../../../external/preact/compat/dist/compat.module.js";
+import m from "../../../../internal/FormFields/Select/Select.js";
+const a = i(
+  ({
+    placeholder: t,
+    selection: l,
+    selectionOptions: e,
+    updateSelection: o
+  }) => e && e.length > 1 ? /* @__PURE__ */ r(
+    m,
+    {
+      onChange: o,
+      filterable: !1,
+      multiSelect: !0,
+      placeholder: t,
+      selected: l,
+      withoutCollapseIndicator: !0,
+      items: e
+    }
+  ) : null
+), s = a;
+export {
+  s as default
+};

package/dist/es/components/external/Transactions/components/MultiSelectionFilter/useMultiSelectionFilter/constants.js

@@ -0,0 +1,24 @@
+import { TransactionFilterParam as T } from "../../../types.js";
+const E = [
+  T.CURRENCIES,
+  T.CATEGORIES,
+  T.STATUSES
+], r = Object.freeze(
+  Object.fromEntries(E.map((e) => [e, ""]))
+), A = [
+  "ATM",
+  "Capital",
+  "Chargeback",
+  "Correction",
+  "Fee",
+  "Payment",
+  "Refund",
+  "Transfer",
+  "Other"
+], t = ["Booked", "Pending", "Reversed"];
+export {
+  r as DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS,
+  E as TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS,
+  A as TRANSACTION_CATEGORIES,
+  t as TRANSACTION_STATUSES
+};