@solvimon/solvimon-web 0.1.0-alpha.6 → 0.1.0-alpha.7

package/dist/PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-BE1lWOk9.mjs

@@ -0,0 +1,1067 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, normalizeClass, createTextVNode, toDisplayString, renderSlot, createCommentVNode, computed, inject, ref, onMounted, onBeforeUnmount, watch, createElementBlock, Fragment, renderList } from "vue";
+import { _ as _sfc_main$7, a as useIntl, t as trackSentryException, E as EXPERIMENTAL_FEATURE_INJECTION_KEY, L as LOGGER_PROVIDER_INJECTION_KEY } from "./component-dpA83LIN.mjs";
+import { _ as _sfc_main$9 } from "./FormMessage.vue.es-DFQXxiSC.mjs";
+import { a as formatAmount } from "./formatting.es-D5H_ySFv.mjs";
+import { a as _sfc_main$6, _ as _sfc_main$8 } from "./Button.vue.es-6sBk5tBL.mjs";
+import { _ as _sfc_main$5 } from "./Section.vue.es-3-H1pUTB.mjs";
+import { c as createPaymentsService } from "./payments-CE9U7aKK.mjs";
+import { c as createPaymentMethodsService } from "./paymentMethods-C-ApE-G4.mjs";
+import { i as isEqual } from "./useService-DG_zedHV.mjs";
+const getOverriddenTranslations = (variant) => {
+  let result = {};
+  if (variant === "TOKENIZE") {
+    result = {
+      "en-US": {
+        payButton: "Add payment method",
+        confirmPurchase: "Add payment method"
+      },
+      "fr-FR": {
+        payButton: "Ajouter un moyen de paiement",
+        confirmPurchase: "Ajouter un moyen de paiement"
+      },
+      "de-DE": {
+        payButton: "Zahlungsmethode hinzufügen",
+        confirmPurchase: "Zahlungsmethode hinzufügen"
+      },
+      "it-IT": {
+        payButton: "Aggiungi metodo di pagamento",
+        confirmPurchase: "Aggiungi metodo di pagamento"
+      },
+      "es-ES": {
+        payButton: "Añadir método de pago",
+        confirmPurchase: "Añadir método de pago"
+      },
+      "nl-NL": {
+        payButton: "Betaalmethode toevoegen",
+        confirmPurchase: "Betaalmethode toevoegen"
+      },
+      "pt-BR": {
+        payButton: "Adicionar método de pagamento",
+        confirmPurchase: "Adicionar método de pagamento"
+      },
+      "pt-PT": {
+        payButton: "Adicionar método de pagamento",
+        confirmPurchase: "Adicionar método de pagamento"
+      },
+      "pl-PL": {
+        payButton: "Dodaj metodę płatności",
+        confirmPurchase: "Dodaj metodę płatności"
+      },
+      "ru-RU": {
+        payButton: "Добавить способ оплаты",
+        confirmPurchase: "Добавить способ оплаты"
+      },
+      "sv-SE": {
+        payButton: "Lägg till betalningsmetod",
+        confirmPurchase: "Lägg till betalningsmetod"
+      },
+      "da-DK": {
+        payButton: "Tilføj betalingsmetode",
+        confirmPurchase: "Tilføj betalingsmetode"
+      },
+      "fi-FI": {
+        payButton: "Lisää maksutapa",
+        confirmPurchase: "Lisää maksutapa"
+      },
+      "no-NO": {
+        payButton: "Legg til betalingsmetode",
+        confirmPurchase: "Legg til betalingsmetode"
+      },
+      "cs-CZ": {
+        payButton: "Přidat platební metodu",
+        confirmPurchase: "Přidat platební metodu"
+      },
+      "hu-HU": {
+        payButton: "Fizetési mód hozzáadása",
+        confirmPurchase: "Fizetési mód hozzáadása"
+      },
+      "ro-RO": {
+        payButton: "Adăugați metodă de plată",
+        confirmPurchase: "Adăugați metodă de plată"
+      },
+      "ja-JP": {
+        payButton: "支払い方法を追加",
+        confirmPurchase: "支払い方法を追加"
+      },
+      "ko-KR": {
+        payButton: "결제 수단 추가",
+        confirmPurchase: "결제 수단 추가"
+      },
+      "zh-CN": {
+        payButton: "添加支付方式",
+        confirmPurchase: "添加支付方式"
+      },
+      "zh-TW": {
+        payButton: "新增付款方式",
+        confirmPurchase: "新增付款方式"
+      },
+      ar: {
+        payButton: "إضافة وسيلة دفع",
+        confirmPurchase: "إضافة وسيلة دفع"
+      },
+      "hr-HR": {
+        payButton: "Dodajte način plačanja",
+        confirmPurchase: "Dodajte način plačanja"
+      },
+      "el-GR": {
+        payButton: "Προσθήκη μεθόδου πληρωμής",
+        confirmPurchase: "Προσθήκη μεθόδου πληρωμής"
+      },
+      "sk-SK": {
+        payButton: "Pridať spôsob platby",
+        confirmPurchase: "Pridať spôsob platby"
+      },
+      "sl-SI": {
+        payButton: "Dodajte način plačanja",
+        confirmPurchase: "Dodajte način plačanja"
+      },
+      "bg-BG": {
+        payButton: "Добавяне на начин на плащане",
+        confirmPurchase: "Добавяне на начин на плащане"
+      },
+      "ca-ES": {
+        payButton: "Afegir mètode de pagament",
+        confirmPurchase: "Afegir mètode de pagament"
+      },
+      "et-EE": {
+        payButton: "Lisa makseviis",
+        confirmPurchase: "Lisa makseviis"
+      },
+      "lv-LV": {
+        payButton: "Pievienot maksājuma veidu",
+        confirmPurchase: "Pievienot maksājuma veidu"
+      },
+      "lt-LT": {
+        payButton: "Pridėti mokėjimo metodą",
+        confirmPurchase: "Pridėti mokėjimo metodą"
+      }
+    };
+  }
+  return result;
+};
+const _hoisted_1$1 = { class: "flex flex-col items-center py-10" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "PaymentFeedbackCard",
+  props: {
+    status: { default: "success", type: String },
+    title: { type: String }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$5), null, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createVNode(unref(_sfc_main$6), {
+              icon: __props.status === "success" ? "check_circle" : "error",
+              class: normalizeClass({
+                "text-green-400": __props.status === "success",
+                "text-red-600": __props.status === "error"
+              }),
+              size: "lg"
+            }, null, 8, ["icon", "class"]),
+            createVNode(unref(_sfc_main$7), {
+              variant: "heading-3",
+              tag: "span",
+              class: "mt-2"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(__props.title), 1)
+              ]),
+              _: 1
+            }),
+            _ctx.$slots.default ? (openBlock(), createBlock(unref(_sfc_main$7), {
+              key: 0,
+              tag: "div",
+              variant: "body-sm"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "PaymentCompletedCard",
+  props: {
+    amount: { type: Object },
+    variant: { type: String }
+  },
+  setup(__props) {
+    const props = __props;
+    const { $t } = useIntl();
+    const title = computed(
+      () => props.variant === "AUTHORIZE" ? $t({
+        defaultMessage: "Payment successful",
+        description: "The title for when a payment has been successful",
+        id: "payment_completed_card.title.authorize"
+      }) : $t({
+        defaultMessage: "Your payment method is added",
+        description: "The title for when a payment method was successfully added",
+        id: "payment_completed_card.title.tokenize"
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$4, {
+        status: "success",
+        title: title.value
+      }, {
+        default: withCtx(() => [
+          __props.amount ? (openBlock(), createBlock(unref(_sfc_main$7), {
+            key: 0,
+            variant: "body-sm",
+            class: "mt-1"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$6), { icon: "check" }),
+              createTextVNode(toDisplayString(unref(formatAmount)(__props.amount)), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(unref(_sfc_main$7), {
+            variant: "body-xs",
+            shade: "lighter"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref($t)({
+                defaultMessage: "You are being redirected...",
+                description: "The text shown after a successful message before a redirect",
+                id: "payment_completed_card.redirect_message"
+              })), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
+  }
+});
+const ErrorMap = {
+  UNKNOWN_ERROR: {
+    title: "Something went wrong",
+    message: "An unknown error has occurred",
+    isReloadButtonVisible: true
+  },
+  AUTHORIZATION_FAILED: {
+    title: "Payment failed",
+    message: "The payment failed"
+  },
+  PAYMENT_DETAILS_CALL_FAILED: {
+    title: "Payment details call failed",
+    message: "There was a problem getting the payment details"
+  },
+  PAYMENT_METHOD_STORAGE_FAILED: {
+    title: "Failed storing payment method",
+    message: "Something went wrong with storing the payment method"
+  },
+  REDIRECT_RESULT_PAYMENT_ACCEPTOR_MISSING: {
+    title: "Missing payment acceptor",
+    message: "A redirect result is set, but a payment acceptor is missing in the url"
+  },
+  TOKENIZE_FAILED: {
+    title: "Tokenization failed",
+    message: "The tokenization of the payment method has failed"
+  },
+  PAYMENT_INTEGRATION_INITIALIZATION_FAILED: {
+    title: "Failed loading payment methods",
+    message: "Failed loading payment integration",
+    isReloadButtonVisible: true
+  },
+  RESOURCE_REVOKED: {
+    title: "Resource revoked",
+    message: "The resource has been revoked",
+    isReloadButtonVisible: true
+  }
+};
+const _hoisted_1 = { class: "flex flex-col items-center gap-6" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "PaymentErrorCard",
+  props: {
+    error: { type: Object }
+  },
+  setup(__props) {
+    const props = __props;
+    const { $t } = useIntl();
+    const errorConfig = computed(() => ErrorMap[props.error.code]);
+    const reload = () => {
+      window.location.reload();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$4, {
+        status: "error",
+        title: errorConfig.value.title
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(_sfc_main$7), {
+              variant: "body-xs",
+              shade: "lighter",
+              class: "mt-3"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(errorConfig.value.message), 1)
+              ]),
+              _: 1
+            }),
+            errorConfig.value.isReloadButtonVisible ? (openBlock(), createBlock(unref(_sfc_main$8), {
+              key: 0,
+              type: "button",
+              color: "gray",
+              variant: "outline",
+              onClick: reload
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref($t)({
+                  defaultMessage: "Try again",
+                  description: "Retry button text when an error has happened during a payment",
+                  id: "payments.retry_button.label"
+                })), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
+  }
+});
+function getQueryParam(name, locationSearch = window.location.search) {
+  const currentUrl = new URLSearchParams(locationSearch);
+  return currentUrl.get(name);
+}
+const PAYMENT_ACCEPTOR_ID_QUERY_STRING = "payment_acceptor_id";
+const REDIRECT_RESULT_QUERY_STRING = "redirectResult";
+function getAdyenClientKeyFromPaymentMethodOptionsResponse(paymentMethodOptionResponse) {
+  var _a, _b;
+  return (_b = (_a = paymentMethodOptionResponse.integration.payment_gateway) == null ? void 0 : _a.adyen) == null ? void 0 : _b.public_key;
+}
+function transformToAdyenAmount(amount) {
+  const formatter = new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: amount.currency
+  });
+  const { maximumFractionDigits = 10 } = formatter.resolvedOptions();
+  return {
+    value: Math.round(+amount.quantity * Math.pow(10, maximumFractionDigits)),
+    currency: amount.currency
+  };
+}
+function mapAdyenPaymentMethods(paymentMethodOptionResponse) {
+  var _a;
+  return ((_a = paymentMethodOptionResponse.options) == null ? void 0 : _a.flatMap(
+    (adyenPaymentMethodOption) => mapAdyenPaymentMethod(adyenPaymentMethodOption.adyen)
+  )) ?? [];
+}
+function mapAdyenPaymentMethod(adyen) {
+  return {
+    type: adyen.type,
+    name: adyen.name,
+    ...adyen.issuers ? { issuers: adyen.issuers } : {},
+    ...adyen.brands ? { brands: adyen.brands } : {},
+    ...adyen.funding_source ? { fundingSource: adyen.funding_source } : {},
+    ...adyen.configuration ? { configuration: adyen.configuration } : {}
+  };
+}
+function createReturnUrl({
+  paymentAcceptorId,
+  redirectUrl = window.location.href
+}) {
+  const returnUrl = new URL(redirectUrl);
+  returnUrl.searchParams.set(PAYMENT_ACCEPTOR_ID_QUERY_STRING, paymentAcceptorId);
+  return returnUrl.toString();
+}
+function getAdyenEnvironmentFromPaymentMethodOptionsResponse(paymentMethodsOptionsResponse) {
+  var _a, _b;
+  const environment = (_b = (_a = paymentMethodsOptionsResponse == null ? void 0 : paymentMethodsOptionsResponse.integration.payment_gateway) == null ? void 0 : _a.adyen) == null ? void 0 : _b.environment;
+  if (!environment) {
+    trackSentryException(void 0, {
+      Message: "No environment set for adyen advanced flow, defaulted to live"
+    });
+    return "live";
+  }
+  switch (environment) {
+    case "TEST":
+      return "test";
+    case "LIVE_IN":
+      return "live-in";
+    case "LIVE_AU":
+      return "live-au";
+    case "LIVE_US":
+      return "live-us";
+    case "LIVE_APSE":
+      return "live-apse";
+    case "LIVE":
+      return "live";
+    default:
+      trackSentryException(void 0, {
+        Message: `Unsupported environment "${environment}" for adyen advanced flow, defaulted to "live"`
+      });
+      return "live";
+  }
+}
+function getAdyenExpressCheckoutConfiguration({
+  amount,
+  countryCode,
+  locale,
+  paymentMethodOptionResponse
+}) {
+  return {
+    ...amount ? { amount: transformToAdyenAmount(amount) } : {},
+    analytics: { enabled: false },
+    clientKey: getAdyenClientKeyFromPaymentMethodOptionsResponse(paymentMethodOptionResponse),
+    countryCode,
+    environment: getAdyenEnvironmentFromPaymentMethodOptionsResponse(
+      paymentMethodOptionResponse
+    ),
+    locale,
+    paymentMethodsResponse: {
+      paymentMethods: mapAdyenPaymentMethods(paymentMethodOptionResponse)
+    }
+  };
+}
+function transformObjectToAdyenObject(obj) {
+  return obj ? Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, String(value)])) : void 0;
+}
+const useExperimentalFeature = () => {
+  const experimentalFeature = inject(EXPERIMENTAL_FEATURE_INJECTION_KEY);
+  return experimentalFeature;
+};
+const EXPRESS_PAYMENT_METHOD_TYPES = ["applepay"];
+function filterOutExpressPaymentMethods(paymentMethods) {
+  return paymentMethods.filter(
+    (method) => !EXPRESS_PAYMENT_METHOD_TYPES.some((type) => {
+      var _a;
+      return type === ((_a = method.type) == null ? void 0 : _a.toLowerCase());
+    })
+  );
+}
+function useLogger() {
+  const logger = inject(LOGGER_PROVIDER_INJECTION_KEY, null);
+  if (logger) return logger;
+  const noop = () => {
+  };
+  return { debug: noop, info: noop, warn: noop, error: noop, capture: noop };
+}
+const PAYMENT_GATEWAY_VARIANT_ADYEN = "ADYEN";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "PaymentIntegrationFormAdyen",
+  props: {
+    countryCode: { type: String },
+    customerId: { type: String },
+    invoiceId: { type: String },
+    paymentMethodOptionResponseEntry: { type: Object },
+    variant: { type: String },
+    selected: { type: Boolean },
+    onSelect: { type: Function },
+    amount: { type: Object },
+    validateOnSubmit: { type: Function, default: () => Promise.resolve(true) },
+    context: { type: Object },
+    forceStorePaymentMethod: { type: Boolean }
+  },
+  emits: ["select", "payment-failed", "payment-success", "ready"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    let dropInInstance = null;
+    let checkoutInstance = null;
+    const props = __props;
+    const emit = __emit;
+    __expose({ submit });
+    const dropInContainerRef = ref();
+    const showPaymentSuccess = ref(false);
+    const integrationError = ref();
+    const logger = useLogger();
+    const { locale } = useIntl();
+    const { authorizePayment, getPaymentDetails } = createPaymentsService();
+    const { tokenizePaymentMethod } = createPaymentMethodsService();
+    const experimentalFeatures = useExperimentalFeature();
+    const showPayButton = computed(() => props.variant === "TOKENIZE");
+    function submit() {
+      try {
+        dropInInstance == null ? void 0 : dropInInstance.submit();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    async function getConfiguration() {
+      var _a;
+      const adyenAmount = transformToAdyenAmount(props.amount);
+      const paymentMethods = ((_a = experimentalFeatures == null ? void 0 : experimentalFeatures.value) == null ? void 0 : _a["express-checkout"]) ? filterOutExpressPaymentMethods(
+        mapAdyenPaymentMethods(props.paymentMethodOptionResponseEntry)
+      ) : mapAdyenPaymentMethods(props.paymentMethodOptionResponseEntry);
+      return {
+        checkoutConfig: {
+          amount: adyenAmount,
+          clientKey: getAdyenClientKeyFromPaymentMethodOptionsResponse(
+            props.paymentMethodOptionResponseEntry
+          ),
+          environment: getAdyenEnvironmentFromPaymentMethodOptionsResponse(
+            props.paymentMethodOptionResponseEntry
+          ),
+          locale,
+          translations: getOverriddenTranslations(props.variant),
+          countryCode: props.countryCode,
+          analytics: { enabled: false },
+          paymentMethodsResponse: { paymentMethods },
+          onSubmit: handleOnSubmit,
+          onAdditionalDetails: handleOnAdditionalDetails,
+          onPaymentCompleted: handleOnPaymentCompleted,
+          onPaymentFailed: handleOnPaymentFailed,
+          onError: handleOnError,
+          showPayButton: showPayButton.value
+        },
+        dropInConfig: {
+          disableFinalAnimation: true,
+          paymentMethodsConfiguration: {
+            card: {
+              hasHolderName: true,
+              holderNameRequired: true,
+              enableStoreDetails: !props.forceStorePaymentMethod && props.variant === "AUTHORIZE"
+            },
+            paypal: {
+              intent: adyenAmount.value > 0 ? "authorize" : "tokenize",
+              showPayButton: true
+            }
+          },
+          openFirstPaymentMethod: props.selected,
+          onSelect: () => emit("select"),
+          onReady: () => emit("ready")
+        }
+      };
+    }
+    async function mountDropIn() {
+      if (!dropInContainerRef.value) return;
+      try {
+        await unmountDropIn();
+        const [adyenModule, { default: adyenCss }] = await Promise.all([
+          import("./auto-DzZuCneB.mjs"),
+          import("./adyen-51SvcyqV.mjs")
+        ]);
+        const { AdyenCheckout, Dropin } = adyenModule;
+        const { checkoutConfig, dropInConfig } = await getConfiguration();
+        checkoutInstance = await AdyenCheckout(checkoutConfig);
+        dropInInstance = new Dropin(checkoutInstance, dropInConfig).mount(dropInContainerRef.value);
+        injectStylesToShadowRoot(adyenCss);
+      } catch (error) {
+        logger.error(
+          "PAYMENT_INTEGRATION_INITIALIZATION_FAILED",
+          "Failed to mount Adyen web drop-in",
+          { error }
+        );
+      }
+    }
+    async function unmountDropIn() {
+      if (dropInInstance) {
+        dropInInstance.unmount();
+        dropInInstance = null;
+      }
+      if (dropInContainerRef.value) {
+        dropInContainerRef.value.innerHTML = "";
+      }
+    }
+    function injectStylesToShadowRoot(adyenCss) {
+      var _a;
+      const root = (_a = dropInContainerRef.value) == null ? void 0 : _a.getRootNode();
+      if (root instanceof ShadowRoot) {
+        const style = document.createElement("style");
+        style.textContent = `${adyenCss}
+            :host {
+                --adyen-sdk-color-background-secondary: transparent;
+                --adyen-sdk-color-background-primary: rgb(243 244 246 / 0.5);
+                --adyen-sdk-color-outline-secondary: #e5e7eb;
+                --adyen-sdk-color-outline-primary: transparent;
+                --adyen-sdk-color-background-always-dark: var(--color-primary-500);
+                --adyen-sdk-color-background-inverse-primary-hover: var(--color-primary-600);
+            }
+
+            .adyen-checkout__payment-method__image__wrapper {
+                width: 32px;
+                height: 32px;
+            }
+
+            .adyen-checkout__payment-method__image {
+                height: 32px;
+            }
+
+            .adyen-checkout__input-wrapper,
+            .adyen-checkout__input {
+                border-color: rgb(229, 231, 235);
+                border-radius: var(--adyen-sdk-border-radius-s, 4px);
+            }
+
+            .adyen-checkout__button,
+            .adyen-checkout__payment-method {
+                border-radius: var(--adyen-sdk-border-radius-s, 4px);
+            }
+
+            .adyen-checkout__payment-method {
+                border-color: rgb(229, 231, 235);
+                box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+                transition: box-shadow 0.2s ease-in-out;
+            }
+
+            .adyen-checkout__payment-method--selected {
+                box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            }
+
+            .adyen-checkout__payment-method:after {
+                transform: scale(0%);
+            }
+
+            .adyen-checkout__paypal__button {
+                display: block !important;
+            }
+
+            .adyen-checkout__payment-methods-list {
+                gap: 4px;
+            }
+
+            .adyen-checkout__dropdown__list {
+                background-color: white;
+                border-radius: var(--adyen-sdk-border-radius-s, 4px);
+            }
+
+            .adyen-checkout__payment-method.adyen-checkout__payment-method--selected:after {
+                content: '✓';
+                width: 20px;
+                height: 20px;
+                border-radius: 10px;
+                background-color: var(--color-primary-600);
+                position: absolute;
+                top: 14px;
+                right: 14px;
+                text-align: center;
+                line-height: 20px;
+                color: white;
+                transform: scale(100%);
+                font-size: 12px;
+            }
+
+            .adyen-checkout__payment-method__header {
+                padding: 8px 16px !important;
+            }
+
+            .adyen-checkout__payment-method__brands {
+                align-items: center;
+            }
+            .adyen-checkout__payment-method__brand-number {
+                line-height: 1;
+            }
+            .adyen-checkout__button__text {
+                font-size: 14px;
+            }
+            .adyen-checkout__store-details {
+                background: transparent;
+                padding: 0;
+            }
+            .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
+                border-color: rgb(229, 231, 235);
+            }
+        `;
+        if (props.variant === "AUTHORIZE") {
+          style.textContent += `
+            .adyen-checkout__payment-method--cashapp .adyen-checkout-pm-details-wrapper {
+                display: none;
+            }
+            `;
+        }
+        root.appendChild(style);
+      }
+    }
+    function handleOnSubmit(...args) {
+      const [state, _component, actions] = args;
+      props.validateOnSubmit().then((isValid) => {
+        if (!isValid) {
+          return;
+        }
+        const paymentAcceptorId = props.paymentMethodOptionResponseEntry.payment_acceptor.id;
+        const adyen = {
+          risk_data: transformObjectToAdyenObject(state.data.riskData),
+          payment_method: transformObjectToAdyenObject(state.data.paymentMethod),
+          browser_info: transformObjectToAdyenObject(state.data.browserInfo)
+        };
+        if (props.variant === "AUTHORIZE") {
+          const returnUrl = createReturnUrl({
+            paymentAcceptorId: props.paymentMethodOptionResponseEntry.payment_acceptor.id,
+            redirectUrl: window.location.href
+          });
+          authorizePayment({
+            payment_acceptor_id: paymentAcceptorId,
+            ...props.customerId ? { customer_id: props.customerId } : {},
+            payment_gateway_variant: PAYMENT_GATEWAY_VARIANT_ADYEN,
+            adyen: {
+              ...adyen,
+              store_payment_method: props.forceStorePaymentMethod || state.data.storePaymentMethod
+            },
+            amount: props.amount,
+            ...props.context ? { context: props.context } : {},
+            return_url: returnUrl
+          }).then((paymentResult) => {
+            const paymentMethodType = state.data.paymentMethod.type;
+            if (["FAILURE", "REFUSED"].includes(paymentResult.status)) {
+              logger.error(
+                "PAYMENT_AUTHORIZATION_FAILED",
+                `Failed payment authorization for payment acceptor with id ${paymentAcceptorId}`,
+                { error: paymentResult }
+              );
+              actions.resolve({ resultCode: "Error" });
+              return;
+            }
+            if (paymentResult.status === "ACTION_REQUIRED" && paymentResult.action.payment_gateway_variant === PAYMENT_GATEWAY_VARIANT_ADYEN) {
+              const requiredAction = handleActionRequiredPaymentAction(
+                paymentResult,
+                paymentMethodType
+              );
+              if (!requiredAction) {
+                logger.error(
+                  "PAYMENT_AUTHORIZATION_FAILED",
+                  `Failed payment authorization for payment acceptor with id ${paymentAcceptorId}`,
+                  { error: paymentResult }
+                );
+                return;
+              }
+              dropInInstance.handleAction(requiredAction);
+              actions.resolve({
+                resultCode: paymentResult.action.adyen.result_code,
+                action: requiredAction
+              });
+              return;
+            }
+            showPaymentSuccess.value = true;
+            actions.resolve({ resultCode: "Authorised" });
+          }).catch((error) => {
+            logger.error(
+              "PAYMENT_AUTHORIZATION_FAILED",
+              `Failed payment authorization for payment acceptor with id ${paymentAcceptorId}`,
+              { error }
+            );
+            actions.resolve({ resultCode: "Error" });
+          });
+          return;
+        }
+        if (props.variant === "TOKENIZE") {
+          const returnUrl = createReturnUrl({
+            paymentAcceptorId: props.paymentMethodOptionResponseEntry.payment_acceptor.id,
+            redirectUrl: window.location.href
+          });
+          if (!props.customerId) {
+            logger.error(
+              "TOKENIZATION_FAILED",
+              `Missing customer id for payment acceptor with id ${paymentAcceptorId}`
+            );
+            return;
+          }
+          tokenizePaymentMethod({
+            customer_id: props.customerId,
+            payment_acceptor_id: paymentAcceptorId,
+            payment_gateway_variant: PAYMENT_GATEWAY_VARIANT_ADYEN,
+            adyen,
+            return_url: returnUrl
+          }).then((paymentResult) => {
+            const paymentMethodType = state.data.paymentMethod.type;
+            if (["FAILURE", "REFUSED"].includes(paymentResult.status)) {
+              logger.error(
+                "TOKENIZATION_FAILED",
+                `Tokenization failed for payment acceptor with id ${paymentAcceptorId}`,
+                { error: paymentResult }
+              );
+              actions.resolve({ resultCode: "Error" });
+              return;
+            }
+            if (paymentResult.status === "ACTION_REQUIRED" && paymentResult.action.payment_gateway_variant === PAYMENT_GATEWAY_VARIANT_ADYEN) {
+              const requiredAction = handleActionRequiredPaymentAction(
+                paymentResult,
+                paymentMethodType
+              );
+              if (!requiredAction) {
+                logger.error(
+                  "TOKENIZATION_FAILED",
+                  `Tokenization failed for payment acceptor with id ${paymentAcceptorId}`,
+                  { error: paymentResult }
+                );
+                return;
+              }
+              dropInInstance.handleAction(requiredAction);
+              actions.resolve({
+                resultCode: paymentResult.action.adyen.result_code,
+                action: requiredAction
+              });
+              return;
+            }
+            showPaymentSuccess.value = true;
+            actions.resolve({ resultCode: "Authorised" });
+          }).catch((error) => {
+            logger.error(
+              "TOKENIZATION_FAILED",
+              `Tokenization failed for payment acceptor with id ${paymentAcceptorId}`,
+              { error }
+            );
+            actions.resolve({ resultCode: "Error" });
+          });
+        }
+      }).catch(() => {
+      });
+    }
+    function handleActionRequiredPaymentAction(response, paymentMethodType) {
+      if (response.status !== "ACTION_REQUIRED") {
+        return void 0;
+      }
+      const action = response.action;
+      if (action.payment_gateway_variant != "ADYEN") {
+        return void 0;
+      }
+      const adyenRequiredAction = action.adyen;
+      return {
+        paymentMethodType: (adyenRequiredAction == null ? void 0 : adyenRequiredAction.payment_method_type) ?? paymentMethodType,
+        method: action.method,
+        url: action.url,
+        data: action.data,
+        type: adyenRequiredAction == null ? void 0 : adyenRequiredAction.action_type,
+        paymentData: adyenRequiredAction == null ? void 0 : adyenRequiredAction.payment_data,
+        sdkData: adyenRequiredAction == null ? void 0 : adyenRequiredAction.sdk_data
+      };
+    }
+    function handleOnAdditionalDetails(...args) {
+      const [state] = args;
+      const detailsResult = state.data.details;
+      const paymentDataResult = state.data.paymentData;
+      if (props.paymentMethodOptionResponseEntry.payment_acceptor.id) {
+        handlePaymentDetails({
+          // For the moment: Adyen gives a null value back which is not accepted by Solvimon API, so filter that out
+          detailsResult: detailsResult ? removeEmptyValues(detailsResult) : void 0,
+          paymentDataResult,
+          paymentAcceptorId: props.paymentMethodOptionResponseEntry.payment_acceptor.id
+        });
+        return;
+      }
+      const error = {
+        code: "UNKNOWN_ERROR",
+        message: "Payment failed",
+        error: args
+      };
+      emit("payment-failed", error);
+      integrationError.value = error;
+    }
+    function removeEmptyValues(obj) {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([, value]) => value !== null && value !== void 0)
+      );
+    }
+    function handleOnPaymentFailed(...args) {
+      const [data] = args;
+      const error = {
+        code: "UNKNOWN_ERROR",
+        message: "Payment failed",
+        error: data
+      };
+      emit("payment-failed", error);
+      integrationError.value = error;
+    }
+    function handleOnPaymentCompleted(...args) {
+      const [, component] = args;
+      component == null ? void 0 : component.unmount();
+      emit("payment-success");
+    }
+    function handleOnError(...args) {
+      const [data, component] = args;
+      if (data.name === "CANCEL") {
+        return;
+      }
+      const error = {
+        code: "UNKNOWN_ERROR",
+        message: "Something went wrong",
+        error: data
+      };
+      logger.error("INTEGRATION_ERROR", "Something went wrong", { error: data });
+      integrationError.value = error;
+      component == null ? void 0 : component.unmount();
+    }
+    function handlePaymentDetails({
+      detailsResult,
+      threeDSResult,
+      redirectResult,
+      paymentDataResult,
+      paymentAcceptorId
+    }) {
+      getPaymentDetails({
+        paymentAcceptorId,
+        paymentGatewayVariant: PAYMENT_GATEWAY_VARIANT_ADYEN,
+        adyen: {
+          ...detailsResult ? { details: detailsResult } : {},
+          ...redirectResult ? { redirect_result: redirectResult } : {},
+          ...threeDSResult ? { threeds_result: threeDSResult } : {},
+          ...paymentDataResult ? { payment_data: paymentDataResult } : {}
+        }
+      }).then((result) => {
+        if (result.payment_status === "FAILURE") {
+          emit("payment-failed", {
+            code: "UNKNOWN_ERROR",
+            message: "Failed getting payment details",
+            error: result
+          });
+          return;
+        }
+        if (result.payment_status === "SUCCESS") {
+          emit("payment-success");
+          return;
+        }
+      }).catch((error) => {
+        logger.error("PAYMENT_DETAILS_CALL_FAILED", "Failed fetching payment details", {
+          error
+        });
+      });
+    }
+    function handleRedirectResult() {
+      const redirectResult = getQueryParam(REDIRECT_RESULT_QUERY_STRING);
+      const paymentAcceptorId = getQueryParam(PAYMENT_ACCEPTOR_ID_QUERY_STRING);
+      if (!redirectResult) {
+        return;
+      }
+      if (!paymentAcceptorId) {
+        logger.error(
+          "INVALID_REDIRECT_RESULT",
+          "Redirect result is set but payment acceptor id is missing",
+          { context: { redirectResult } }
+        );
+        return;
+      }
+      handlePaymentDetails({
+        paymentAcceptorId,
+        detailsResult: {
+          redirectResult: decodeURI(redirectResult)
+        }
+      });
+    }
+    onMounted(() => {
+      void mountDropIn();
+      handleRedirectResult();
+    });
+    onBeforeUnmount(() => {
+      void unmountDropIn();
+    });
+    watch(
+      () => props.paymentMethodOptionResponseEntry,
+      (newValue, oldValue) => {
+        if (isEqual(newValue, oldValue)) return;
+        void mountDropIn();
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        showPaymentSuccess.value ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 0,
+          variant: __props.variant
+        }, null, 8, ["variant"])) : integrationError.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
+          error: integrationError.value
+        }, null, 8, ["error"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "dropInContainerRef",
+          ref: dropInContainerRef
+        }, null, 512)
+      ], 64);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PaymentIntegrationForm",
+  props: {
+    customerId: { type: String },
+    variant: { type: String },
+    context: { type: Object },
+    paymentMethodOptions: { type: Array },
+    countryCode: { type: String },
+    invoiceId: { type: String },
+    amount: { type: Object },
+    successRedirectUrl: { type: String },
+    selectedOption: { type: String },
+    validateOnSubmit: { type: Function },
+    forceStorePaymentMethod: { type: Boolean }
+  },
+  emits: ["select", "payment-failed", "payment-success", "ready"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    __expose({ submit });
+    const { $t } = useIntl();
+    const selectedIntegration = ref();
+    const integrationRefs = ref(/* @__PURE__ */ new Map());
+    const showIntegrationError = ref(false);
+    function handleSelect(type) {
+      selectedIntegration.value = type;
+      showIntegrationError.value = false;
+    }
+    function submit() {
+      var _a, _b;
+      if (!selectedIntegration.value) {
+        showIntegrationError.value = true;
+        void ((_a = props.validateOnSubmit) == null ? void 0 : _a.call(props));
+      }
+      (_b = integrationRefs.value.get(selectedIntegration.value)) == null ? void 0 : _b.submit();
+    }
+    const handlePaymentSuccess = () => {
+      if (props.successRedirectUrl) {
+        window.location.href = props.successRedirectUrl;
+      }
+      emit("payment-success");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.paymentMethodOptions, (paymentMethodOption) => {
+          var _a;
+          return openBlock(), createElementBlock(Fragment, {
+            key: paymentMethodOption.integration.id
+          }, [
+            ((_a = paymentMethodOption.integration.payment_gateway) == null ? void 0 : _a.variant) === "ADYEN" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              ref_for: true,
+              ref: (el) => integrationRefs.value.set("PAYMENT_GATEWAY_ADYEN", el),
+              context: __props.context,
+              "payment-method-option-response-entry": paymentMethodOption,
+              "country-code": __props.countryCode,
+              "customer-id": __props.customerId,
+              variant: __props.variant,
+              amount: __props.amount,
+              "invoice-id": __props.invoiceId,
+              selected: selectedIntegration.value === "PAYMENT_GATEWAY_ADYEN",
+              "validate-on-submit": __props.validateOnSubmit,
+              "force-store-payment-method": __props.forceStorePaymentMethod,
+              onSelect: _cache[0] || (_cache[0] = () => handleSelect("PAYMENT_GATEWAY_ADYEN")),
+              onPaymentFailed: _cache[1] || (_cache[1] = (args) => _ctx.$emit("payment-failed", args)),
+              onPaymentSuccess: handlePaymentSuccess,
+              onReady: _cache[2] || (_cache[2] = ($event) => emit("ready"))
+            }, null, 8, ["context", "payment-method-option-response-entry", "country-code", "customer-id", "variant", "amount", "invoice-id", "selected", "validate-on-submit", "force-store-payment-method"])) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        showIntegrationError.value ? (openBlock(), createBlock(unref(_sfc_main$9), {
+          key: 0,
+          variant: "error",
+          class: "mt-2"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref($t)({
+              defaultMessage: "Select a payment method",
+              id: "payment_integration_form.select_payment_method_error",
+              description: "Error shown when no payment method is selected"
+            })), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  _sfc_main$4 as a,
+  createReturnUrl as c,
+  getAdyenExpressCheckoutConfiguration as g,
+  transformObjectToAdyenObject as t,
+  useLogger as u
+};