@bunnyapp/components 1.6.0-beta.19 → 1.6.0-beta.20

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Fragment as Fragment$1 } from 'react';
+import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, createElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
-import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, StringUtils, SubscriptionState as SubscriptionState$2, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
+import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, StringUtils, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
 import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Image, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { Markup } from 'interweave';
 import request from 'graphql-request';
@@ -13,7 +13,7 @@ import styled, { styled as styled$1 } from 'styled-components';
 import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useZoomContext } from '@pdf-viewer/react';
 import { faArrowLeft, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
+import { useElements, useStripe, Elements, PaymentElement } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure/index.js';
 import { BarChart, AreaChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Area, Bar, Rectangle } from 'recharts';
 import { omit } from 'lodash-es';
@@ -141,7 +141,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.18';
+const PACKAGE_VERSION = '1.6.0-beta.19';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -239,6 +239,8 @@ const useDownloadFile = (id, onError) => {
 
 const InvoiceQuoteContext = createContext({});
 
+const OverrideTokenContext = createContext({});
+
 /**
  * Creates a context and provider for a value
  * Unlike createStateContext, this accepts a value prop directly that can be updated
@@ -925,7 +927,7 @@ function readFragment(...r) {
 
 var t = initGraphQLTada();
 
-const query$4 = t(`
+const query$6 = t(`
   query entityBranding {
     entityBranding {
       accentColor
@@ -935,7 +937,7 @@ const query$4 = t(`
   }
 `);
 const getBranding = async ({ token, apiHost }) => {
-    return await execute(query$4, { apiHost, token }, {});
+    return await execute(query$6, { apiHost, token }, {});
 };
 
 const BunnyContext = createContext({});
@@ -957,7 +959,7 @@ function ContextualWrapper({ children, darkMode, configProviderProps, }) {
         staleTime: 1000 * 60 * 5, // 5 minutes
     });
     const branding = data === null || data === void 0 ? void 0 : data.entityBranding;
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const entityBranding = useMemo(() => {
         // This is to determine if the secondary color should be white or black
         const brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor) ? '#' + (branding === null || branding === void 0 ? void 0 : branding.brandColor) : DEFAULT_BRAND_COLOR;
@@ -1023,14 +1025,12 @@ function ContextualWrapper({ children, darkMode, configProviderProps, }) {
     return (jsx(RecoilRoot, { children: jsx(BrandProvider, { value: entityBranding, children: jsx(ConfigProvider, { theme: mergedTheme, children: jsx("div", { className: "bunny-components bunny-contents", children: children }) }) }) }));
 }
 
-const PaymentContext = createContext({});
-
 // Use this hook instead of getting the token from BunnyContext directly
 // Because we have overrideToken as an option, this token ensures the correct token is used
 function useToken() {
     const { token: tokenFromContext } = useContext(BunnyContext);
-    const { overrideToken } = useContext(PaymentContext);
-    return overrideToken || tokenFromContext;
+    const { overrideToken } = useContext(OverrideTokenContext);
+    return overrideToken !== null && overrideToken !== void 0 ? overrideToken : tokenFromContext;
 }
 
 const defaultStyled = typeof styled === "function" ? styled : styled.default;
@@ -1043,7 +1043,7 @@ const CustomZoomLayout = () => {
     // Consume from the controller provider
     const { currentZoom, setZoomLevel } = useZoomContext();
     const mountTimeRef = useRef(Date.now());
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     // Set default zoom to 100% once the document is loaded
     useEffect(() => {
         if (currentZoom < 1 && Date.now() - mountTimeRef.current < 3000) {
@@ -1056,7 +1056,7 @@ const DocumentTemplatePreview = ({ targetUrl }) => {
     const [pdfUrl, setPdfUrl] = useState(null);
     const queryClient = useQueryClient();
     const { apiHost, token } = useContext(BunnyContext);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const queryKey = useMemo(() => ['documentTemplatePreview', targetUrl], [targetUrl]);
     // Clear previous data when component mounts or id changes
     useEffect(() => {
@@ -1135,7 +1135,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
     const { apiHost } = useContext(BunnyContext);
     const token = useToken();
     const { shadow, hideDownloadButton } = useContext(InvoiceQuoteContext);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { token: antdToken } = useAntdToken$1();
     const buttonsVisible = formattedInvoice && (!hideDownloadButton || onBackButtonClick);
     return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-grow ${isMobile ? 'bunny-overflow-hidden' : ''}`, children: [buttonsVisible ? (jsxs("div", { className: `bunny-flex bunny-justify-between bunny-items-center bunny-pb-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, id: "acceptance", children: [jsx("div", { children: onBackButtonClick ? (jsx(BackButton, { onClick: onBackButtonClick, title: backButtonName })) : null }), !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token), children: "Download" })) : null] })) : null, isMobile ? (jsxs(MarkupContainer, { className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-overflow-auto", style: { fontFamily: antdToken.fontFamily }, children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] })) : (jsxs(MarkupContainer, { className: `bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-bg-white ${shadow ? shadow : 'shadow-md'} bunny-rounded-md`, style: {
@@ -1144,7 +1144,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))] }));
 };
 
-const MUTATION$b = `
+const MUTATION$a = `
 query FormattedInvoice($id: ID) {
   formattedInvoice(id: $id) {
     amount
@@ -1212,7 +1212,7 @@ query FormattedInvoice($id: ID) {
 const getFormattedInvoice = async ({ id, token, apiHost, }) => {
     const vars = { id };
     const response = await gqlRequest({
-        query: MUTATION$b,
+        query: MUTATION$a,
         token,
         vars,
         apiHost,
@@ -1258,632 +1258,63 @@ function LegacyDocument({ documentUuid, documentType, }) {
         }, title: "Invoice PDF", width: "100%" }));
 }
 
-const MUTATION$a = `
-  mutation checkout(
-    $invoiceId: ID,
-    $quoteId: ID,
-    $paymentMethodId: ID,
-    $paymentMethodData: CheckoutPaymentMethodAttributes
-  ) {
-    checkout(
-      invoiceId: $invoiceId,
-      quoteId: $quoteId,
-      paymentMethodId: $paymentMethodId,
-      paymentMethodData: $paymentMethodData
-    ) {
-      invoice {
-        id
-        state
-        amount
-        amountDue
-      }
-      payment {
-        id
-        state
-        amount
-      }
-      paymentApplication {
-        id
-        invoiceId
-        paymentId
-      }
-      transaction {
-        id
-        amount
-      }
-    }
-  }
-`;
-const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData, token, apiHost, }) => {
-    const mutationVars = {
-        quoteId,
-        invoiceId,
-        paymentMethodId,
-    };
-    if (paymentMethodData) {
-        mutationVars.paymentMethodData = {
-            ...paymentMethodData,
-            metadata: paymentMethodData.metadata,
-        };
-    }
-    const response = await gqlRequest({
-        query: MUTATION$a,
-        token,
-        vars: mutationVars,
-        apiHost: apiHost,
-    });
-    const { errors } = response === null || response === void 0 ? void 0 : response.checkout;
-    if (errors)
-        throw errors;
-    return {
-        savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
-    };
-};
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-const CURRENT_USER_DATA_QUERY = `{
-    company {
-      name
-    }
-    currentUser {
-      account {
-        billingCountry
-        currencyId
-        id
-      }
-      authObjectName
-      payload {
-        returnUrl
-      }
-      privacyUrl
-      termsUrl
-      entityId
-    }
-  }`;
-const getCurrentUserData = async ({ token, apiHost }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const response = await gqlRequest({
-        query: CURRENT_USER_DATA_QUERY,
-        token,
-        apiHost,
-    });
-    return {
-        authObjectName: (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.authObjectName,
-        account: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.account,
-        companyName: (_c = response === null || response === void 0 ? void 0 : response.company) === null || _c === void 0 ? void 0 : _c.name,
-        returnUrl: (_e = (_d = response === null || response === void 0 ? void 0 : response.currentUser) === null || _d === void 0 ? void 0 : _d.payload) === null || _e === void 0 ? void 0 : _e.returnUrl,
-        privacyUrl: (_f = response === null || response === void 0 ? void 0 : response.currentUser) === null || _f === void 0 ? void 0 : _f.privacyUrl,
-        termsUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.termsUrl,
-        entityId: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.entityId,
-    };
-};
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
 
-const useCurrentUserData = (token) => {
-    const { apiHost } = useContext(BunnyContext);
-    const { data: currentUserData, isLoading: isCurrentUserDataLoading } = useQuery({
-        queryKey: QueryKeyFactory$1.default.currentUserKey(token),
-        queryFn: () => getCurrentUserData({ token, apiHost }),
-        enabled: Boolean(token),
-    });
-    const currentUser = currentUserData || {};
-    return { currentUser, isCurrentUserDataLoading };
-};
+var lodash$1 = {exports: {}};
 
-const paymentMethodsQuery = () => `query PaymentMethods($accountId: ID) {
-  paymentMethods (accountId: $accountId) {
-    nodes {
-      id
-      pluginId
-      accountId
-      expirationDate
-      plugin {
-        guid
-        id
-      }
-      state
-      metadata {
-        issuer
-        identifier
-        kind
-        description
-        icon
-        type
-      }
-      isDefault
-    }
-  }
-}`;
-const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
-    var _a;
-    const response = await gqlRequest({
-        query: paymentMethodsQuery(),
-        token,
-        apiHost,
-        vars: { accountId },
-    });
-    const paymentMethods = ((_a = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) || [];
-    return paymentMethods;
-};
-const usePaymentMethod = ({ accountId, token, apiHost, enabled = true, }) => {
-    const { data, isLoading } = useQuery({
-        queryKey: QueryKeyFactory$1.default.accountPaymentMethodsKey({
-            accountId,
-            token,
-        }),
-        queryFn: () => getPaymentMethods({ apiHost, token, accountId }),
-        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
-        enabled,
-    });
-    return {
-        paymentMethods: data,
-        defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find((paymentMethod) => paymentMethod.isDefault),
-        isLoading,
-    };
-};
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+var lodash = lodash$1.exports;
 
-const filterPaymentPlugins = (plugins) => plugins === null || plugins === void 0 ? void 0 : plugins.filter((plugin) => { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; });
-const MUTATION$9 = `query PaymentPlugins($accountId: ID) {
-  paymentPlugins (accountId: $accountId) {
-    enabled
-    entities
-    guid
-    hidden
-    id
-    name
-    status
-    type
-    webhookEnabled
-    components
-  }
-}`;
-const getPaymentPlugins = async ({ apiHost, token, accountId, }) => {
-    try {
-        const response = await gqlRequest({
-            query: MUTATION$9,
-            token,
-            apiHost,
-            vars: { accountId },
-        });
-        return (response === null || response === void 0 ? void 0 : response.paymentPlugins) || [];
-    }
-    catch (error) {
-        return [];
-    }
-};
-const usePaymentPlugins = ({ apiHost, token, accountId, }) => {
-    const { data: paymentPlugins, isFetched } = useQuery({
-        queryKey: ['paymentPlugins', token],
-        queryFn: () => getPaymentPlugins({ apiHost, token, accountId }),
-        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
-    });
-    const filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
-    return {
-        paymentPlugins: filteredPaymentPlugins,
-        isFetched,
-    };
-};
+var hasRequiredLodash;
 
-const getQuoteAmountDue = (quote) => {
-    return quote.amountDue || quote.amount;
-};
+function requireLodash () {
+	if (hasRequiredLodash) return lodash$1.exports;
+	hasRequiredLodash = 1;
+	(function (module, exports) {
+(function() {
 
-function usePay$1({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }) {
-    const { apiHost } = useContext(BunnyContext);
-    const { customCheckoutFunction } = useContext(PaymentContext);
-    const token = useToken();
-    const pay = async () => {
-        const currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
-        if (!currencyId) {
-            throw new Error('No currencyId');
-        }
-        try {
-            if (customCheckoutFunction) {
-                const response = await customCheckoutFunction(plugin);
-                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
-            }
-            else {
-                const response = await checkout({
-                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
-                    quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-                    paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
-                    token,
-                    apiHost,
-                });
-                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
-            }
-        }
-        catch (error) {
-            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
-        }
-    };
-    return { pay };
-}
+		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
+		  var undefined$1;
 
-const { useToken: useAntdToken } = theme$1;
-const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, accountId, }) => {
-    const response = await invokePlugin({
-        plugin,
-        method: 'store_payment_method',
-        payload: {
-            payment_method_id: paymentMethodId,
-            account_id: accountId,
-        },
-        token,
-        apiHost,
-    });
-    if (response.status !== 'success')
-        throw new Error(response.message || 'Unknown error');
-    return response;
-};
-const createSetupIntent = (plugin, apiHost, token, accountId) => {
-    return invokePlugin({
-        plugin,
-        method: 'create_setup_intent',
-        token,
-        apiHost,
-        payload: {
-            account_id: accountId,
-        },
-    });
-};
-const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodId, }) => {
-    const payload = {
-        quote_id: quote.id,
-        amount: quote.amount,
-        payment_method_id: paymentMethodId,
-    };
-    const response = await invokePlugin({
-        plugin,
-        method: 'create_payment_hold',
-        payload,
-        token,
-        apiHost,
-    });
-    if (response.status !== 'success')
-        throw new Error(response.message || 'Unknown error');
-    return response;
-};
-const fetchStripeKey = async (plugin, apiHost, token, accountId) => {
-    const response = await invokePlugin({
-        plugin,
-        method: 'retrieve_config',
-        token,
-        apiHost,
-        payload: {
-            account_id: accountId,
-        },
-    });
-    return response;
-};
-loadStripe.setLoadParameters({ advancedFraudSignals: false });
-const useStripePlugin = (plugin, apiHost, currencyId, token, accountId) => {
-    const [stripe, setStripe] = useState(null);
-    const showErrorNotification = useErrorNotification();
-    const { token: antdToken } = useAntdToken();
-    function getFontFamily() {
-        if (antdToken.fontFamily === 'Inter') {
-            return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-        }
-        return antdToken.fontFamily;
-    }
-    const fontFamily = getFontFamily();
-    const appearance = {
-        variables: {
-            fontFamily: fontFamily,
-            fontLineHeight: antdToken.lineHeight.toString(),
-            borderRadius: antdToken.borderRadius.toString() + 'px',
-            colorBackground: 'white',
-            colorPrimary: antdToken.colorPrimary,
-        },
-        rules: {
-            '.Input': {
-                fontFamily: fontFamily,
-            },
-            '.Label': {
-                fontFamily: fontFamily,
-            },
-        },
-    };
-    const options = {
-        mode: 'setup',
-        currency: currencyId,
-        setupFutureUsage: 'off_session',
-        appearance,
-    };
-    useEffect(() => {
-        var _a, _b;
-        if (!plugin)
-            return;
-        if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
-            return;
-        fetchStripeKey(plugin, apiHost || '', token, accountId)
-            .then(({ payload }) => loadStripe(payload.publishable_key).then(setStripe))
-            .catch(error => {
-            console.error('Caught Error in fetching stripe key: ', error);
-            showErrorNotification(error.message, 'Unexpected Error fetching key');
-        });
-        // eslint-disable-next-line
-    }, [plugin, token]);
-    return { stripe, options };
-};
-
-function useApproveHold$1({ onApproveHoldSuccess, onApproveHoldError, }) {
-    // Hooks
-    const [isSaving, setIsSaving] = useState(false);
-    const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
-    const approveHold = async ({ plugin, quote, paymentMethodId, }) => {
-        try {
-            if (!token)
-                throw new Error("Token couldn't be retrieved");
-            setIsSaving(true);
-            const response = await createPaymentHold({
-                quote,
-                plugin,
-                token,
-                apiHost,
-                paymentMethodId,
-            });
-            if (response.status !== 'success')
-                throw new Error(response === null || response === void 0 ? void 0 : response.message);
-            onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
-        }
-        catch (error) {
-            console.error(error);
-            onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error);
-        }
-        finally {
-            setIsSaving(false);
-        }
-    };
-    return { approveHold, isSaving };
-}
+		  /** Used as the semantic version number. */
+		  var VERSION = '4.17.21';
 
-function useApproveHold({ onApproveHoldSuccess, onApproveHoldError, }) {
-    // Hooks
-    const [isSaving, setIsSaving] = useState(false);
-    const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
-    const approveHold = async ({ plugin, quote, paymentMethodId, }) => {
-        try {
-            if (!token)
-                throw new Error("Token couldn't be retrieved");
-            setIsSaving(true);
-            const response = await createPaymentHold({
-                quote,
-                plugin,
-                token,
-                apiHost,
-                paymentMethodId,
-            });
-            if (response.status !== 'success')
-                throw new Error(response === null || response === void 0 ? void 0 : response.message);
-            onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
-        }
-        catch (error) {
-            console.error(error);
-            onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error);
-        }
-        finally {
-            setIsSaving(false);
-        }
-    };
-    return { approveHold, isSaving };
-}
+		  /** Used as the size to enable large array optimizations. */
+		  var LARGE_ARRAY_SIZE = 200;
 
-function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }) {
-    // Hooks
-    const { apiHost } = useContext(BunnyContext);
-    const { customCheckoutFunction } = useContext(PaymentContext);
-    const token = useToken();
-    const pay = async () => {
-        try {
-            if (customCheckoutFunction) {
-                const response = await customCheckoutFunction(plugin);
-                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
-            }
-            else {
-                const response = await checkout({
-                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
-                    quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-                    paymentMethodId: storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.id,
-                    token,
-                    apiHost,
-                });
-                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
-            }
-        }
-        catch (error) {
-            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
-        }
-    };
-    return { pay };
-}
+		  /** Error message constants. */
+		  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
+		      FUNC_ERROR_TEXT = 'Expected a function',
+		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
 
-const handleAllErrorFormats = useAllErrorFormats$1();
-const showErrorNotification$5 = useErrorNotification();
-const ActualCheckoutFooter = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, }) => {
-    const isMobile = useIsMobile();
-    const [isPaying, setIsPaying] = useState(false);
-    const { defaultPaymentMethod } = useContext(PaymentContext);
-    const amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    const currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
-    // Payment hooks
-    const { pay: payDemoPay } = usePay$1({
-        onPaymentSuccess,
-        onPaymentError: error => {
-            setIsPaying(false);
-            handleAllErrorFormats(error);
-        },
-        quote: quote,
-        invoice: invoice,
-        storedPaymentMethod: defaultPaymentMethod,
-        plugin,
-    });
-    const { pay: payStripe } = usePay({
-        onPaymentSuccess,
-        onPaymentError: error => {
-            setIsPaying(false);
-            handleAllErrorFormats(error);
-        },
-        quote: quote,
-        invoice: invoice,
-        storedPaymentMethod: defaultPaymentMethod,
-        plugin,
-    });
-    // Approve hold hooks
-    const { approveHold: approveHoldStripe } = useApproveHold$1({
-        onApproveHoldSuccess: response => {
-            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
-        },
-        onApproveHoldError: error => {
-            setIsPaying(false);
-            handleAllErrorFormats(error);
-        },
-    });
-    const { approveHold: approveHoldDemoPay } = useApproveHold({
-        onApproveHoldSuccess: response => {
-            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
-        },
-        onApproveHoldError: error => {
-            setIsPaying(false);
-            handleAllErrorFormats(error);
-        },
-    });
-    const handleApproveHold = async () => {
-        var _a, _b, _c, _d;
-        if (!plugin)
-            return console.error('plugin is undefined');
-        if (!quote)
-            return console.error('quote is undefined');
-        if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id))
-            return console.error('defaultPaymentMethod is undefined');
-        switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
-            case 'StripePayment':
-                setIsPaying(true);
-                await approveHoldStripe({
-                    plugin,
-                    quote,
-                    paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
-                });
-                break;
-            case 'DemoPayPayment':
-                setIsPaying(true);
-                await approveHoldDemoPay({
-                    plugin,
-                    quote,
-                    paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
-                });
-                break;
-            default:
-                showErrorNotification$5(`Payment holds are not supported by ${(_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d[0].name}`);
-                break;
-        }
-    };
-    const handlePaymentSubmit = async () => {
-        var _a, _b;
-        setIsPaying(true);
-        if (!plugin)
-            return;
-        switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
-            case 'StripePayment':
-                await payStripe();
-                break;
-            case 'DemoPayPayment':
-                await payDemoPay();
-                break;
-        }
-    };
-    if (paymentHoldOptions === null || paymentHoldOptions === void 0 ? void 0 : paymentHoldOptions.payToAccept) {
-        return (jsx(Button, { className: "bunny-w-full", disabled: isPaying, onClick: () => {
-                handleApproveHold();
-            }, size: isMobile ? 'large' : 'middle', type: "primary", children: `${isPaying ? 'Approving hold for' : 'Approve hold for'} ${amountDue && currencyId ? formatCurrency$1(amountDue, currencyId) : ''}` }));
-    }
-    return (jsx(Button, { className: "bunny-w-full", disabled: isPaying, onClick: () => {
-            setIsPaying(true);
-            handlePaymentSubmit();
-        }, size: isMobile ? 'large' : 'middle', type: "primary", children: `${isPaying ? 'Paying' : 'Pay'} ${amountDue && currencyId ? formatCurrency$1(amountDue, currencyId) : ''}` }));
-};
-const CheckoutFooter = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, }) => {
-    if (!plugin)
-        return null;
-    return (jsx(ActualCheckoutFooter, { paymentHoldOptions: paymentHoldOptions, plugin: plugin, invoice: invoice, quote: quote, onPaymentSuccess: onPaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess }));
-};
+		  /** Used to stand-in for `undefined` hash values. */
+		  var HASH_UNDEFINED = '__lodash_hash_undefined__';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+		  /** Used as the maximum memoize cache size. */
+		  var MAX_MEMOIZE_SIZE = 500;
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
+		  /** Used as the internal argument placeholder. */
+		  var PLACEHOLDER = '__lodash_placeholder__';
 
-var dayjs_min$1 = {exports: {}};
+		  /** Used to compose bitmasks for cloning. */
+		  var CLONE_DEEP_FLAG = 1,
+		      CLONE_FLAT_FLAG = 2,
+		      CLONE_SYMBOLS_FLAG = 4;
 
-var dayjs_min = dayjs_min$1.exports;
-
-var hasRequiredDayjs_min;
-
-function requireDayjs_min () {
-	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
-	hasRequiredDayjs_min = 1;
-	(function (module, exports) {
-		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-	} (dayjs_min$1));
-	return dayjs_min$1.exports;
-}
-
-var dayjs_minExports = requireDayjs_min();
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-var lodash$1 = {exports: {}};
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-var lodash = lodash$1.exports;
-
-var hasRequiredLodash;
-
-function requireLodash () {
-	if (hasRequiredLodash) return lodash$1.exports;
-	hasRequiredLodash = 1;
-	(function (module, exports) {
-(function() {
-
-		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
-		  var undefined$1;
-
-		  /** Used as the semantic version number. */
-		  var VERSION = '4.17.21';
-
-		  /** Used as the size to enable large array optimizations. */
-		  var LARGE_ARRAY_SIZE = 200;
-
-		  /** Error message constants. */
-		  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
-		      FUNC_ERROR_TEXT = 'Expected a function',
-		      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
-
-		  /** Used to stand-in for `undefined` hash values. */
-		  var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-		  /** Used as the maximum memoize cache size. */
-		  var MAX_MEMOIZE_SIZE = 500;
-
-		  /** Used as the internal argument placeholder. */
-		  var PLACEHOLDER = '__lodash_placeholder__';
-
-		  /** Used to compose bitmasks for cloning. */
-		  var CLONE_DEEP_FLAG = 1,
-		      CLONE_FLAT_FLAG = 2,
-		      CLONE_SYMBOLS_FLAG = 4;
-
-		  /** Used to compose bitmasks for value comparisons. */
-		  var COMPARE_PARTIAL_FLAG = 1,
-		      COMPARE_UNORDERED_FLAG = 2;
+		  /** Used to compose bitmasks for value comparisons. */
+		  var COMPARE_PARTIAL_FLAG = 1,
+		      COMPARE_UNORDERED_FLAG = 2;
 
 		  /** Used to compose bitmasks for function metadata. */
 		  var WRAP_BIND_FLAG = 1,
@@ -19044,55 +18475,24 @@ function requireLodash () {
 
 var lodashExports = requireLodash();
 
-const Card = ({ children, className, style, }) => {
-    const { darkMode } = useContext(BunnyContext);
-    return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-rounded-md ${className}`, style: {
-            ...style,
-            backgroundColor: darkMode ? 'var(--row-background-dark)' : 'var(--row-background)',
-        }, children: children }));
-};
-
-const tagStyleMap = {
-    blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
-    green: {
-        color: 'var(--bunny-green-600)',
-        background: 'var(--bunny-green-200)',
-    },
-    red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
-    orange: {
-        color: 'var(--bunny-orange-500)',
-        background: 'var(--bunny-orange-200)',
-    },
-    yellow: {
-        color: 'var(--bunny-yellow-500)',
-        background: 'var(--bunny-yellow-200)',
-    },
-    purple: {
-        color: 'var(--bunny-purple-500)',
-        background: 'var(--bunny-purple-200)',
-    },
-    black: { color: 'white', background: 'var(--bunny-black)' },
-};
-// This component provides custom styling for antd Tag components without using antd overwrites.
-// Please use this component instead of the antd Tag component directly to maintain consistent styling.
-const CustomizedTag = ({ children, color, className, style, }) => {
-    return (jsx(Tag, { color: color, style: { ...(color ? tagStyleMap[color] : undefined), ...style }, className: `bunny-m-0 bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ${className}`, children: children }));
+const Amex = ({ className }) => {
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#1F72CD", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", clipRule: "evenodd", d: "M12.5493 17L6 31.4935H13.8405L14.8125 29.1826H17.0342L18.0062 31.4935H26.6364V29.7298L27.4054 31.4935H31.8696L32.6386 29.6925V31.4935H50.587L52.7695 29.2426L54.813 31.4935L64.0317 31.5121L57.4617 24.2872L64.0317 17H54.956L52.8315 19.2093L50.8523 17H31.3268L29.6501 20.7409L27.9341 17H20.11V18.7037L19.2396 17H12.5493ZM39.3516 19.0581H49.6584L52.8108 22.4633L56.0648 19.0581H59.2172L54.4275 24.2852L59.2172 29.452H55.9218L52.7695 26.0073L49.4989 29.452H39.3516V19.0581ZM41.8968 23.1099V21.2114V21.2096H48.328L51.1342 24.2458L48.2036 27.2986H41.8968V25.226H47.5197V23.1099H41.8968ZM14.0664 19.0581H17.8883L22.2324 28.8862V19.0581H26.4191L29.7745 26.1048L32.8668 19.0581H37.0326V29.4581H34.4978L34.4771 21.3087L30.7817 29.4581H28.5142L24.7981 21.3087V29.4581H19.5836L18.595 27.1266H13.254L12.2675 29.4561H9.47358L14.0664 19.0581ZM14.166 24.9712L15.9256 20.8177L17.6832 24.9712H14.166Z", fill: "white" })] }));
 };
 
-const Amex = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#1F72CD", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.5493 17L6 31.4935H13.8405L14.8125 29.1826H17.0342L18.0062 31.4935H26.6364V29.7298L27.4054 31.4935H31.8696L32.6386 29.6925V31.4935H50.587L52.7695 29.2426L54.813 31.4935L64.0317 31.5121L57.4617 24.2872L64.0317 17H54.956L52.8315 19.2093L50.8523 17H31.3268L29.6501 20.7409L27.9341 17H20.11V18.7037L19.2396 17H12.5493ZM39.3516 19.0581H49.6584L52.8108 22.4633L56.0648 19.0581H59.2172L54.4275 24.2852L59.2172 29.452H55.9218L52.7695 26.0073L49.4989 29.452H39.3516V19.0581ZM41.8968 23.1099V21.2114V21.2096H48.328L51.1342 24.2458L48.2036 27.2986H41.8968V25.226H47.5197V23.1099H41.8968ZM14.0664 19.0581H17.8883L22.2324 28.8862V19.0581H26.4191L29.7745 26.1048L32.8668 19.0581H37.0326V29.4581H34.4978L34.4771 21.3087L30.7817 29.4581H28.5142L24.7981 21.3087V29.4581H19.5836L18.595 27.1266H13.254L12.2675 29.4561H9.47358L14.0664 19.0581ZM14.166 24.9712L15.9256 20.8177L17.6832 24.9712H14.166Z", fill: "white" })] }));
+const Bancontact = ({ className }) => {
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] }));
 };
 
 const Cashapp$1 = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxs("g", { "clip-path": "url(#clip0_550_235)", children: [jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M26.4382 8C22.3647 8 19.0625 11.3022 19.0625 15.3758V32.6242C19.0625 36.6978 22.3647 40 26.4382 40H43.5153C47.5889 40 50.8911 36.6978 50.8911 32.6242V15.3758C50.8911 11.3022 47.5889 8 43.5153 8H26.4382Z", fill: "#00D632" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40.1482 19.902C38.9333 18.8737 37.3938 18.3084 35.8022 18.3059C34.4908 18.3059 33.1795 18.7405 33.1795 19.9469C33.1795 21.0467 34.347 21.4771 35.7853 22.0072C35.9248 22.0586 36.0668 22.111 36.2105 22.1649C39.0542 23.1241 41.3959 24.3005 41.3959 27.088C41.3959 30.1153 39.0467 32.1835 35.2026 32.4195L34.8542 34.0418C34.7887 34.3448 34.5199 34.5605 34.2098 34.5589H31.7932C31.5955 34.554 31.4102 34.4618 31.2872 34.307C31.1642 34.1521 31.1163 33.9507 31.1563 33.7571L31.531 32.0448C30.08 31.6748 28.7461 30.9441 27.6532 29.9205C27.5265 29.7983 27.4551 29.63 27.4551 29.454C27.4551 29.2781 27.5265 29.1097 27.6532 28.9876L28.9945 27.6763C29.2482 27.4268 29.655 27.4268 29.9086 27.6763C31.1374 28.8485 32.7778 29.4904 34.4758 29.4634C36.2255 29.4634 37.4132 28.7215 37.4132 27.5451C37.4132 26.4815 36.4394 26.1253 34.5914 25.4494C34.3953 25.3776 34.1894 25.3024 33.9738 25.2222C31.5984 24.3755 29.3504 23.1653 29.3504 20.3516C29.3504 17.0958 32.0705 15.5072 35.2776 15.3498L35.6148 13.6975C35.6816 13.3974 35.948 13.1839 36.2555 13.1842H38.6646C38.8609 13.1836 39.0469 13.2714 39.1712 13.4233C39.2955 13.5752 39.3447 13.775 39.3052 13.9673L38.9306 15.8144C40.157 16.2153 41.2935 16.8516 42.2764 17.6877C42.4118 17.8042 42.4925 17.972 42.4989 18.1505C42.5053 18.3291 42.4368 18.5022 42.31 18.6281L41.0587 19.8833C40.8081 20.1298 40.4087 20.138 40.1482 19.902Z", fill: "white" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_550_235", children: jsx("rect", { width: "32", height: "32", fill: "white", transform: "translate(19 8)" }) }) })] }));
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxs("g", { "clip-path": "url(#clip0_550_235)", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.4382 8C22.3647 8 19.0625 11.3022 19.0625 15.3758V32.6242C19.0625 36.6978 22.3647 40 26.4382 40H43.5153C47.5889 40 50.8911 36.6978 50.8911 32.6242V15.3758C50.8911 11.3022 47.5889 8 43.5153 8H26.4382Z", fill: "#00D632" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40.1482 19.902C38.9333 18.8737 37.3938 18.3084 35.8022 18.3059C34.4908 18.3059 33.1795 18.7405 33.1795 19.9469C33.1795 21.0467 34.347 21.4771 35.7853 22.0072C35.9248 22.0586 36.0668 22.111 36.2105 22.1649C39.0542 23.1241 41.3959 24.3005 41.3959 27.088C41.3959 30.1153 39.0467 32.1835 35.2026 32.4195L34.8542 34.0418C34.7887 34.3448 34.5199 34.5605 34.2098 34.5589H31.7932C31.5955 34.554 31.4102 34.4618 31.2872 34.307C31.1642 34.1521 31.1163 33.9507 31.1563 33.7571L31.531 32.0448C30.08 31.6748 28.7461 30.9441 27.6532 29.9205C27.5265 29.7983 27.4551 29.63 27.4551 29.454C27.4551 29.2781 27.5265 29.1097 27.6532 28.9876L28.9945 27.6763C29.2482 27.4268 29.655 27.4268 29.9086 27.6763C31.1374 28.8485 32.7778 29.4904 34.4758 29.4634C36.2255 29.4634 37.4132 28.7215 37.4132 27.5451C37.4132 26.4815 36.4394 26.1253 34.5914 25.4494C34.3953 25.3776 34.1894 25.3024 33.9738 25.2222C31.5984 24.3755 29.3504 23.1653 29.3504 20.3516C29.3504 17.0958 32.0705 15.5072 35.2776 15.3498L35.6148 13.6975C35.6816 13.3974 35.948 13.1839 36.2555 13.1842H38.6646C38.8609 13.1836 39.0469 13.2714 39.1712 13.4233C39.2955 13.5752 39.3447 13.775 39.3052 13.9673L38.9306 15.8144C40.157 16.2153 41.2935 16.8516 42.2764 17.6877C42.4118 17.8042 42.4925 17.972 42.4989 18.1505C42.5053 18.3291 42.4368 18.5022 42.31 18.6281L41.0587 19.8833C40.8081 20.1298 40.4087 20.138 40.1482 19.902Z", fill: "white" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_550_235", children: jsx("rect", { width: "32", height: "32", fill: "white", transform: "translate(19 8)" }) }) })] }));
 };
 
 const ChinaUnionPay = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M18.2466 6.855H27.4811C28.7703 6.855 29.5728 7.90603 29.272 9.20036L24.972 27.6585C24.6682 28.949 23.3782 30 22.0886 30H12.8537C11.5641 30 10.7624 28.949 11.0632 27.6585L15.3654 9.20036C15.6653 7.90603 16.9545 6.855 18.2466 6.855Z", fill: "#ED171F" }), jsx("path", { d: "M26.7132 6.855H37.3336C38.6223 6.855 38.0411 7.90603 37.7381 9.20036L33.4385 27.6585C33.1382 28.949 33.2324 30 31.9402 30H21.3206C20.0298 30 19.2303 28.949 19.5336 27.6585L23.8315 9.20036C24.1353 7.90603 25.424 6.855 26.7132 6.855Z", fill: "#082F67" }), jsx("path", { d: "M36.9136 6.855H46.1468C47.4368 6.855 48.2384 7.90603 47.9364 9.20036L43.6372 27.6585C43.3351 28.949 42.0455 30 40.7516 30H31.521C30.2288 30 29.4285 28.949 29.7314 27.6585L34.0293 9.20036C34.3318 7.90603 35.621 6.855 36.9136 6.855Z", fill: "#006A65" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M38.4247 20.4849L37.2994 24.2089H37.6019L37.3681 24.979H37.0656L36.9951 25.218H35.9242L35.9968 24.979H33.82L34.0387 24.2664H34.2587L35.4005 20.4849L35.6286 19.7209H36.7212L36.6071 20.1072C36.6071 20.1072 36.8979 19.8972 37.1741 19.8254C37.4502 19.7528 39.0337 19.7265 39.0337 19.7265L38.799 20.4849H38.4247ZM36.4995 20.4849L36.2103 21.4365C36.2103 21.4365 36.5336 21.2909 36.7112 21.2421C36.8901 21.1958 37.1589 21.1777 37.1589 21.1777L37.3681 20.4849H36.4995ZM36.0669 21.9098L35.7678 22.8994C35.7678 22.8994 36.0984 22.73 36.276 22.6773C36.4549 22.6358 36.7255 22.6021 36.7255 22.6021L36.9377 21.9098H36.0669ZM35.3702 24.2197H36.241L36.4925 23.383H35.6217L35.3702 24.2197Z", fill: "white" }), jsx("path", { d: "M38.9076 19.7265H40.0736L40.0866 20.1613C40.0797 20.2343 40.1427 20.2689 40.2776 20.2689H40.5144L40.2979 20.9863H39.6687C39.1224 21.0265 38.9163 20.7918 38.9284 20.5286L38.9076 19.7265Z", fill: "white" }), jsx("path", { d: "M39.0602 23.1305H37.9487L38.1397 22.4909H39.4099L39.5918 21.9079H38.3368L38.5525 21.1875H42.0439L41.8252 21.9079H40.6545L40.4713 22.4909H41.6446L41.4514 23.1305H40.1808L39.9561 23.3998H40.4713L40.5962 24.2049C40.6096 24.284 40.6121 24.3363 40.6372 24.3708C40.6631 24.4006 40.8174 24.4145 40.9069 24.4145H41.0633L40.8256 25.198H40.4293C40.368 25.198 40.2772 25.1928 40.1532 25.1863C40.033 25.1759 39.9479 25.1064 39.8684 25.0683C39.7958 25.032 39.6869 24.9439 39.6618 24.7939L39.5374 23.9905L38.9608 24.7831C38.7772 25.032 38.5291 25.2226 38.1108 25.2226H37.3009L37.5131 24.5238H37.8221C37.9116 24.5238 37.9906 24.4888 38.0485 24.4586C38.1082 24.4335 38.1605 24.4037 38.2201 24.3155L39.0602 23.1305Z", fill: "white" }), jsx("path", { d: "M26.8864 21.3815H29.8294L29.612 22.0842H28.4348L28.252 22.6818H29.456L29.2365 23.4075H28.0333L27.7416 24.3811C27.7057 24.4892 28.026 24.5043 28.1418 24.5043L28.7451 24.4209L28.5035 25.223H27.1457C27.0389 25.223 26.9555 25.2079 26.8371 25.1811C26.7226 25.1525 26.672 25.1015 26.6214 25.0237C26.5722 24.9438 26.497 24.879 26.548 24.7096L26.9374 23.42H26.2692L26.4909 22.6818H27.1629L27.3414 22.0842H26.672L26.8864 21.3815Z", fill: "white" }), jsx("path", { d: "M28.8682 20.1195H30.0752L29.8544 20.8541H28.2052L28.0259 21.0084C27.9498 21.0832 27.923 21.0516 27.8232 21.1057C27.7303 21.1532 27.5337 21.2461 27.28 21.2461H26.7506L26.9658 20.5395H27.1244C27.2588 20.5395 27.35 20.5283 27.3962 20.4985C27.449 20.4656 27.5073 20.3909 27.5751 20.269L27.8777 19.718H29.0786L28.8682 20.1195Z", fill: "white" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.5938 19.7264H31.6223L31.4728 20.2437C31.4728 20.2437 31.7969 19.9848 32.0247 19.8923C32.2511 19.8072 32.7641 19.7311 32.7641 19.7311L34.428 19.7225L33.861 21.6106C33.7659 21.9347 33.6548 22.1439 33.5852 22.239C33.5217 22.3366 33.4482 22.4183 33.3026 22.4974C33.1626 22.5722 33.0351 22.6154 32.9175 22.6275C32.8073 22.6357 32.6388 22.64 32.4046 22.6422H30.8025L30.3501 24.1366C30.3073 24.284 30.2865 24.354 30.3146 24.3937C30.3384 24.43 30.3928 24.4702 30.468 24.4702L31.1746 24.4037L30.9339 25.2226H30.1413C29.8898 25.2226 29.7066 25.2174 29.5778 25.2075C29.4559 25.198 29.3284 25.2075 29.2441 25.1414C29.1694 25.0766 29.0574 24.9918 29.06 24.9041C29.0683 24.8229 29.1011 24.688 29.1534 24.5039L30.5938 19.7264ZM32.7775 21.6344H31.0912L30.9884 21.9749H32.4473C32.6198 21.9533 32.6552 21.9779 32.669 21.9697L32.7775 21.6344ZM31.185 21.3271C31.185 21.3271 31.5139 21.0263 32.0778 20.9286C32.2062 20.9036 33.0083 20.9118 33.0083 20.9118L33.1297 20.5081H31.4305L31.185 21.3271Z", fill: "white" }), jsx("path", { d: "M33.5921 22.7747L33.4979 23.2285C33.4559 23.3693 33.4209 23.4778 33.3138 23.5686C33.2027 23.6632 33.0696 23.763 32.7606 23.763L32.191 23.7859L32.1862 24.2998C32.1785 24.4459 32.2178 24.4303 32.2411 24.4541C32.2675 24.4787 32.2904 24.4904 32.3168 24.4986L32.4961 24.4904L33.0415 24.4584L32.8168 25.2078H32.191C31.7524 25.2078 31.4274 25.1983 31.3202 25.1127C31.2156 25.0466 31.2018 24.9619 31.2048 24.8188L31.2441 22.8201H32.242L32.2295 23.2285H32.4702C32.5523 23.2285 32.6063 23.2198 32.6417 23.1986C32.6707 23.1749 32.6936 23.1437 32.7096 23.0932L32.8068 22.7747H33.5921Z", fill: "white" }), jsx("path", { d: "M19.3395 12.7519C19.3032 12.9127 18.6632 15.8704 18.6606 15.8722C18.5219 16.4698 18.4238 16.8985 18.0824 17.1721C17.8887 17.3311 17.6623 17.4094 17.4008 17.4094C16.9808 17.4094 16.734 17.2006 16.6921 16.8035L16.6843 16.6678C16.6843 16.6678 16.8122 15.8652 16.814 15.8622C16.814 15.8622 17.486 13.1664 17.6065 12.8116C17.6117 12.7917 17.6143 12.7817 17.6169 12.7714C16.3075 12.783 16.0745 12.7714 16.0594 12.7519C16.052 12.7783 16.017 12.946 16.017 12.946L15.3299 15.9815L15.2703 16.2408L15.1579 17.0826C15.1579 17.3311 15.2072 17.536 15.3044 17.7084C15.6177 18.2564 16.511 18.3377 17.0149 18.3377C17.6662 18.3377 18.2751 18.1985 18.6874 17.9478C19.4026 17.5243 19.591 16.8614 19.7583 16.2754L19.8352 15.975C19.8352 15.975 20.5288 13.1759 20.6473 12.8116C20.6507 12.7917 20.6529 12.7817 20.6576 12.7714C19.709 12.7817 19.4298 12.7714 19.3395 12.7519Z", fill: "white" }), jsx("path", { d: "M23.1723 18.3077C22.7073 18.3012 22.5444 18.3012 22.0011 18.3289L21.98 18.2887C22.0279 18.0821 22.0794 17.8785 22.1252 17.6689L22.1917 17.3867C22.2924 16.9464 22.3909 16.4347 22.4026 16.2804C22.4121 16.1862 22.4432 15.952 22.1757 15.952C22.0625 15.952 21.9449 16.0073 21.8265 16.0613C21.7608 16.2955 21.6282 16.9515 21.5672 17.2519C21.432 17.8829 21.4233 17.9542 21.3633 18.2666L21.3244 18.3077C20.8451 18.3012 20.6796 18.3012 20.1286 18.3289L20.1026 18.283C20.1951 17.9079 20.2867 17.5298 20.3749 17.1555C20.6057 16.1395 20.6601 15.7501 20.7245 15.2337L20.7677 15.203C21.3049 15.1278 21.435 15.1131 22.0163 14.9934L22.0655 15.0483L21.9778 15.372C22.0759 15.3141 22.1688 15.2549 22.2704 15.203C22.5444 15.0682 22.8495 15.0284 23.0176 15.0284C23.2713 15.0284 23.5496 15.0997 23.6663 15.394C23.7769 15.6564 23.7039 15.9805 23.5586 16.6175L23.4835 16.9412C23.3344 17.6504 23.3102 17.78 23.2267 18.2666L23.1723 18.3077Z", fill: "white" }), jsx("path", { d: "M25.0585 18.3077C24.7793 18.3064 24.5995 18.3012 24.4232 18.3064C24.2486 18.3077 24.0779 18.3168 23.8182 18.3289L23.8026 18.3064L23.7853 18.283C23.8562 18.0142 23.8964 17.92 23.9309 17.8245C23.9664 17.7299 24.001 17.6339 24.0623 17.3612C24.1436 17.006 24.1937 16.7571 24.2296 16.5397C24.2667 16.3284 24.2879 16.1495 24.3143 15.9416L24.3359 15.9252L24.3592 15.9053C24.6371 15.866 24.8147 15.84 24.9945 15.8124C25.1769 15.786 25.3605 15.7501 25.6488 15.6957L25.66 15.7207L25.6678 15.7462C25.6142 15.9662 25.5598 16.1862 25.5075 16.41C25.4561 16.6326 25.4016 16.8513 25.3532 17.073C25.2478 17.541 25.2067 17.7148 25.1816 17.8396C25.1587 17.9589 25.1509 18.0237 25.1095 18.2666L25.0844 18.2887L25.0585 18.3077Z", fill: "white" }), jsx("path", { d: "M29.2305 16.7091C29.3935 15.9948 29.2686 15.6607 29.1091 15.4563C28.8658 15.1477 28.4397 15.0479 27.9958 15.0479C27.7301 15.0479 27.0952 15.0751 26.5987 15.5332C26.2443 15.8621 26.0779 16.3107 25.9781 16.7389C25.8782 17.175 25.7628 17.9641 26.4867 18.2567C26.7114 18.3509 27.0313 18.3777 27.2396 18.3777C27.7698 18.3777 28.3135 18.2312 28.7206 17.7982C29.0382 17.446 29.1813 16.923 29.2305 16.7091ZM28.0166 16.6573C27.9911 16.777 27.8865 17.2256 27.7426 17.4161C27.6432 17.5562 27.5252 17.6404 27.3947 17.6404C27.358 17.6404 27.1285 17.6404 27.1242 17.2999C27.1216 17.1322 27.1566 16.9576 27.1985 16.7718C27.3208 16.2307 27.4651 15.7769 27.8329 15.7769C28.1225 15.7769 28.1415 16.1145 28.0166 16.6573Z", fill: "white" }), jsx("path", { d: "M40.5855 18.3561C40.0254 18.3509 39.8642 18.3509 39.3465 18.373L39.3115 18.331C39.4532 17.7982 39.595 17.267 39.7199 16.7286C39.8819 16.0298 39.9191 15.7329 39.9736 15.324L40.0155 15.2895C40.5713 15.2095 40.726 15.1875 41.3059 15.0803L41.3241 15.1278C41.2178 15.566 41.1115 16.0047 41.0103 16.4446C40.7964 17.3664 40.7186 17.8349 40.6365 18.3163L40.5855 18.3561Z", fill: "white" }), jsx("path", { d: "M40.8523 16.7721C41.0152 16.0612 40.3601 16.7094 40.2551 16.4748C40.0943 16.1092 40.195 15.3671 39.5493 15.1195C39.3017 15.0231 38.7183 15.148 38.2204 15.6031C37.8682 15.9307 37.7005 16.3736 37.6016 16.8015C37.5013 17.2315 37.3864 18.0189 38.1063 18.3015C38.3337 18.3979 38.5424 18.4256 38.7498 18.4173C39.4741 18.378 40.0265 17.2855 40.434 16.852C40.749 16.5098 40.8043 16.9808 40.8523 16.7721ZM39.7442 16.7189C39.717 16.833 39.612 17.2868 39.4681 17.4744C39.373 17.6088 39.1466 17.6939 39.0169 17.6939C38.9802 17.6939 38.7524 17.6939 38.7442 17.3564C38.7425 17.1904 38.7775 17.0158 38.8207 16.8283C38.943 16.2989 39.0874 15.8468 39.4551 15.8468C39.7451 15.8468 39.8687 16.1761 39.7442 16.7189Z", fill: "white" }), jsx("path", { d: "M32.4031 18.3077C31.9372 18.3012 31.7795 18.3012 31.2319 18.3289L31.2125 18.2887C31.2587 18.0821 31.3114 17.8785 31.3598 17.6689L31.4251 17.3867C31.5262 16.9464 31.6243 16.4347 31.6355 16.2804C31.6446 16.1862 31.6757 15.952 31.4104 15.952C31.2954 15.952 31.1792 16.0073 31.0599 16.0613C30.9951 16.2955 30.862 16.9515 30.798 17.2519C30.6653 17.8829 30.6563 17.9542 30.5962 18.2666L30.5564 18.3077C30.0776 18.3012 29.9134 18.3012 29.3637 18.3289L29.3386 18.283C29.4302 17.9079 29.5201 17.5298 29.6083 17.1555C29.8386 16.1395 29.8935 15.7501 29.9575 15.2337L30.0007 15.203C30.5378 15.1278 30.6684 15.1131 31.2496 14.9934L31.2954 15.0483L31.2112 15.372C31.3067 15.3141 31.4039 15.2549 31.5029 15.203C31.7751 15.0682 32.0828 15.0284 32.2475 15.0284C32.502 15.0284 32.7808 15.0997 32.9005 15.394C33.0098 15.6564 32.9359 15.9805 32.7894 16.6175L32.7164 16.9412C32.5643 17.6504 32.5409 17.78 32.4605 18.2666L32.4031 18.3077Z", fill: "white" }), jsx("path", { d: "M36.9307 14.4822C36.8486 14.8504 36.6096 15.1629 36.3006 15.3137C36.0452 15.4421 35.7344 15.4516 35.4129 15.4516H35.2059L35.2215 15.369C35.2215 15.369 35.6048 13.7048 35.6031 13.71L35.6143 13.6248L35.6212 13.5591L35.7742 13.5751C35.7742 13.5751 36.5616 13.6434 36.5815 13.6456C36.8931 13.764 37.0201 14.0769 36.9307 14.4822ZM36.4276 12.7467C36.4255 12.7467 36.0417 12.7518 36.0417 12.7518C35.0378 12.7631 34.6354 12.7583 34.4703 12.7385C34.4531 12.8119 34.428 12.9424 34.428 12.9424L34.0693 14.6115C34.0693 14.6115 33.2097 18.1565 33.1687 18.3229C34.0447 18.3134 34.4042 18.3134 34.5542 18.3285C34.5883 18.1621 34.7932 17.172 34.7932 17.172C34.7932 17.172 34.9682 16.4447 34.9786 16.4179C34.9786 16.4179 35.0326 16.3436 35.0883 16.3137H35.1683C35.9233 16.3137 36.7781 16.3137 37.4462 15.8206C37.9004 15.4831 38.2138 14.9848 38.3516 14.3802C38.3888 14.2316 38.4147 14.0535 38.4147 13.8772C38.4147 13.6456 38.368 13.4161 38.2323 13.2363C37.8918 12.7583 37.2142 12.7518 36.4276 12.7467Z", fill: "white" }), jsx("path", { d: "M45.1748 15.0751L45.1303 15.0254C44.5581 15.1399 44.4535 15.1598 43.9263 15.2293L43.8865 15.2674C43.8848 15.2739 43.8831 15.2842 43.8818 15.2924L43.8792 15.2842C43.4868 16.1913 43.4993 15.9951 43.1791 16.7073C43.1769 16.6736 43.1765 16.6525 43.1756 16.6187L43.0961 15.0751L43.0455 15.0254C42.4466 15.1399 42.4306 15.1598 41.8761 15.2293L41.8316 15.2674C41.8277 15.2877 41.8264 15.3076 41.8234 15.3292L41.8277 15.3374C41.8968 15.6931 41.8809 15.6131 41.9496 16.171C41.982 16.445 42.0243 16.7225 42.0567 16.9926C42.1121 17.4463 42.1423 17.6706 42.208 18.3612C41.835 18.981 41.7447 19.2148 41.3882 19.7584L41.4072 19.8077C41.9496 19.7874 42.0745 19.7874 42.4755 19.7874L42.5641 19.6884C42.8671 19.0354 45.1748 15.0751 45.1748 15.0751Z", fill: "white" }), jsx("path", { d: "M25.5693 15.4586C25.8753 15.2447 25.9146 14.9491 25.6553 14.7957C25.3926 14.6414 24.9353 14.6898 24.6259 14.9042C24.3143 15.1151 24.2802 15.4115 24.5399 15.5662C24.8001 15.7171 25.2595 15.673 25.5693 15.4586Z", fill: "white" }), jsx("path", { d: "M42.5238 19.7429L42.0727 20.5152C41.93 20.7788 41.6651 20.9771 41.2442 20.9784L40.5255 20.9668L40.7347 20.2706H40.8738C40.9477 20.2706 41.0018 20.2658 41.0432 20.2455C41.0787 20.2343 41.105 20.2062 41.1344 20.1647L41.3993 19.7429H42.5238Z", fill: "white" })] }));
+    return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M18.2466 6.855H27.4811C28.7703 6.855 29.5728 7.90603 29.272 9.20036L24.972 27.6585C24.6682 28.949 23.3782 30 22.0886 30H12.8537C11.5641 30 10.7624 28.949 11.0632 27.6585L15.3654 9.20036C15.6653 7.90603 16.9545 6.855 18.2466 6.855Z", fill: "#ED171F" }), jsx("path", { d: "M26.7132 6.855H37.3336C38.6223 6.855 38.0411 7.90603 37.7381 9.20036L33.4385 27.6585C33.1382 28.949 33.2324 30 31.9402 30H21.3206C20.0298 30 19.2303 28.949 19.5336 27.6585L23.8315 9.20036C24.1353 7.90603 25.424 6.855 26.7132 6.855Z", fill: "#082F67" }), jsx("path", { d: "M36.9136 6.855H46.1468C47.4368 6.855 48.2384 7.90603 47.9364 9.20036L43.6372 27.6585C43.3351 28.949 42.0455 30 40.7516 30H31.521C30.2288 30 29.4285 28.949 29.7314 27.6585L34.0293 9.20036C34.3318 7.90603 35.621 6.855 36.9136 6.855Z", fill: "#006A65" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M38.4247 20.4849L37.2994 24.2089H37.6019L37.3681 24.979H37.0656L36.9951 25.218H35.9242L35.9968 24.979H33.82L34.0387 24.2664H34.2587L35.4005 20.4849L35.6286 19.7209H36.7212L36.6071 20.1072C36.6071 20.1072 36.8979 19.8972 37.1741 19.8254C37.4502 19.7528 39.0337 19.7265 39.0337 19.7265L38.799 20.4849H38.4247ZM36.4995 20.4849L36.2103 21.4365C36.2103 21.4365 36.5336 21.2909 36.7112 21.2421C36.8901 21.1958 37.1589 21.1777 37.1589 21.1777L37.3681 20.4849H36.4995ZM36.0669 21.9098L35.7678 22.8994C35.7678 22.8994 36.0984 22.73 36.276 22.6773C36.4549 22.6358 36.7255 22.6021 36.7255 22.6021L36.9377 21.9098H36.0669ZM35.3702 24.2197H36.241L36.4925 23.383H35.6217L35.3702 24.2197Z", fill: "white" }), jsx("path", { d: "M38.9076 19.7265H40.0736L40.0866 20.1613C40.0797 20.2343 40.1427 20.2689 40.2776 20.2689H40.5144L40.2979 20.9863H39.6687C39.1224 21.0265 38.9163 20.7918 38.9284 20.5286L38.9076 19.7265Z", fill: "white" }), jsx("path", { d: "M39.0602 23.1305H37.9487L38.1397 22.4909H39.4099L39.5918 21.9079H38.3368L38.5525 21.1875H42.0439L41.8252 21.9079H40.6545L40.4713 22.4909H41.6446L41.4514 23.1305H40.1808L39.9561 23.3998H40.4713L40.5962 24.2049C40.6096 24.284 40.6121 24.3363 40.6372 24.3708C40.6631 24.4006 40.8174 24.4145 40.9069 24.4145H41.0633L40.8256 25.198H40.4293C40.368 25.198 40.2772 25.1928 40.1532 25.1863C40.033 25.1759 39.9479 25.1064 39.8684 25.0683C39.7958 25.032 39.6869 24.9439 39.6618 24.7939L39.5374 23.9905L38.9608 24.7831C38.7772 25.032 38.5291 25.2226 38.1108 25.2226H37.3009L37.5131 24.5238H37.8221C37.9116 24.5238 37.9906 24.4888 38.0485 24.4586C38.1082 24.4335 38.1605 24.4037 38.2201 24.3155L39.0602 23.1305Z", fill: "white" }), jsx("path", { d: "M26.8864 21.3815H29.8294L29.612 22.0842H28.4348L28.252 22.6818H29.456L29.2365 23.4075H28.0333L27.7416 24.3811C27.7057 24.4892 28.026 24.5043 28.1418 24.5043L28.7451 24.4209L28.5035 25.223H27.1457C27.0389 25.223 26.9555 25.2079 26.8371 25.1811C26.7226 25.1525 26.672 25.1015 26.6214 25.0237C26.5722 24.9438 26.497 24.879 26.548 24.7096L26.9374 23.42H26.2692L26.4909 22.6818H27.1629L27.3414 22.0842H26.672L26.8864 21.3815Z", fill: "white" }), jsx("path", { d: "M28.8682 20.1195H30.0752L29.8544 20.8541H28.2052L28.0259 21.0084C27.9498 21.0832 27.923 21.0516 27.8232 21.1057C27.7303 21.1532 27.5337 21.2461 27.28 21.2461H26.7506L26.9658 20.5395H27.1244C27.2588 20.5395 27.35 20.5283 27.3962 20.4985C27.449 20.4656 27.5073 20.3909 27.5751 20.269L27.8777 19.718H29.0786L28.8682 20.1195Z", fill: "white" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.5938 19.7264H31.6223L31.4728 20.2437C31.4728 20.2437 31.7969 19.9848 32.0247 19.8923C32.2511 19.8072 32.7641 19.7311 32.7641 19.7311L34.428 19.7225L33.861 21.6106C33.7659 21.9347 33.6548 22.1439 33.5852 22.239C33.5217 22.3366 33.4482 22.4183 33.3026 22.4974C33.1626 22.5722 33.0351 22.6154 32.9175 22.6275C32.8073 22.6357 32.6388 22.64 32.4046 22.6422H30.8025L30.3501 24.1366C30.3073 24.284 30.2865 24.354 30.3146 24.3937C30.3384 24.43 30.3928 24.4702 30.468 24.4702L31.1746 24.4037L30.9339 25.2226H30.1413C29.8898 25.2226 29.7066 25.2174 29.5778 25.2075C29.4559 25.198 29.3284 25.2075 29.2441 25.1414C29.1694 25.0766 29.0574 24.9918 29.06 24.9041C29.0683 24.8229 29.1011 24.688 29.1534 24.5039L30.5938 19.7264ZM32.7775 21.6344H31.0912L30.9884 21.9749H32.4473C32.6198 21.9533 32.6552 21.9779 32.669 21.9697L32.7775 21.6344ZM31.185 21.3271C31.185 21.3271 31.5139 21.0263 32.0778 20.9286C32.2062 20.9036 33.0083 20.9118 33.0083 20.9118L33.1297 20.5081H31.4305L31.185 21.3271Z", fill: "white" }), jsx("path", { d: "M33.5921 22.7747L33.4979 23.2285C33.4559 23.3693 33.4209 23.4778 33.3138 23.5686C33.2027 23.6632 33.0696 23.763 32.7606 23.763L32.191 23.7859L32.1862 24.2998C32.1785 24.4459 32.2178 24.4303 32.2411 24.4541C32.2675 24.4787 32.2904 24.4904 32.3168 24.4986L32.4961 24.4904L33.0415 24.4584L32.8168 25.2078H32.191C31.7524 25.2078 31.4274 25.1983 31.3202 25.1127C31.2156 25.0466 31.2018 24.9619 31.2048 24.8188L31.2441 22.8201H32.242L32.2295 23.2285H32.4702C32.5523 23.2285 32.6063 23.2198 32.6417 23.1986C32.6707 23.1749 32.6936 23.1437 32.7096 23.0932L32.8068 22.7747H33.5921Z", fill: "white" }), jsx("path", { d: "M19.3395 12.7519C19.3032 12.9127 18.6632 15.8704 18.6606 15.8722C18.5219 16.4698 18.4238 16.8985 18.0824 17.1721C17.8887 17.3311 17.6623 17.4094 17.4008 17.4094C16.9808 17.4094 16.734 17.2006 16.6921 16.8035L16.6843 16.6678C16.6843 16.6678 16.8122 15.8652 16.814 15.8622C16.814 15.8622 17.486 13.1664 17.6065 12.8116C17.6117 12.7917 17.6143 12.7817 17.6169 12.7714C16.3075 12.783 16.0745 12.7714 16.0594 12.7519C16.052 12.7783 16.017 12.946 16.017 12.946L15.3299 15.9815L15.2703 16.2408L15.1579 17.0826C15.1579 17.3311 15.2072 17.536 15.3044 17.7084C15.6177 18.2564 16.511 18.3377 17.0149 18.3377C17.6662 18.3377 18.2751 18.1985 18.6874 17.9478C19.4026 17.5243 19.591 16.8614 19.7583 16.2754L19.8352 15.975C19.8352 15.975 20.5288 13.1759 20.6473 12.8116C20.6507 12.7917 20.6529 12.7817 20.6576 12.7714C19.709 12.7817 19.4298 12.7714 19.3395 12.7519Z", fill: "white" }), jsx("path", { d: "M23.1723 18.3077C22.7073 18.3012 22.5444 18.3012 22.0011 18.3289L21.98 18.2887C22.0279 18.0821 22.0794 17.8785 22.1252 17.6689L22.1917 17.3867C22.2924 16.9464 22.3909 16.4347 22.4026 16.2804C22.4121 16.1862 22.4432 15.952 22.1757 15.952C22.0625 15.952 21.9449 16.0073 21.8265 16.0613C21.7608 16.2955 21.6282 16.9515 21.5672 17.2519C21.432 17.8829 21.4233 17.9542 21.3633 18.2666L21.3244 18.3077C20.8451 18.3012 20.6796 18.3012 20.1286 18.3289L20.1026 18.283C20.1951 17.9079 20.2867 17.5298 20.3749 17.1555C20.6057 16.1395 20.6601 15.7501 20.7245 15.2337L20.7677 15.203C21.3049 15.1278 21.435 15.1131 22.0163 14.9934L22.0655 15.0483L21.9778 15.372C22.0759 15.3141 22.1688 15.2549 22.2704 15.203C22.5444 15.0682 22.8495 15.0284 23.0176 15.0284C23.2713 15.0284 23.5496 15.0997 23.6663 15.394C23.7769 15.6564 23.7039 15.9805 23.5586 16.6175L23.4835 16.9412C23.3344 17.6504 23.3102 17.78 23.2267 18.2666L23.1723 18.3077Z", fill: "white" }), jsx("path", { d: "M25.0585 18.3077C24.7793 18.3064 24.5995 18.3012 24.4232 18.3064C24.2486 18.3077 24.0779 18.3168 23.8182 18.3289L23.8026 18.3064L23.7853 18.283C23.8562 18.0142 23.8964 17.92 23.9309 17.8245C23.9664 17.7299 24.001 17.6339 24.0623 17.3612C24.1436 17.006 24.1937 16.7571 24.2296 16.5397C24.2667 16.3284 24.2879 16.1495 24.3143 15.9416L24.3359 15.9252L24.3592 15.9053C24.6371 15.866 24.8147 15.84 24.9945 15.8124C25.1769 15.786 25.3605 15.7501 25.6488 15.6957L25.66 15.7207L25.6678 15.7462C25.6142 15.9662 25.5598 16.1862 25.5075 16.41C25.4561 16.6326 25.4016 16.8513 25.3532 17.073C25.2478 17.541 25.2067 17.7148 25.1816 17.8396C25.1587 17.9589 25.1509 18.0237 25.1095 18.2666L25.0844 18.2887L25.0585 18.3077Z", fill: "white" }), jsx("path", { d: "M29.2305 16.7091C29.3935 15.9948 29.2686 15.6607 29.1091 15.4563C28.8658 15.1477 28.4397 15.0479 27.9958 15.0479C27.7301 15.0479 27.0952 15.0751 26.5987 15.5332C26.2443 15.8621 26.0779 16.3107 25.9781 16.7389C25.8782 17.175 25.7628 17.9641 26.4867 18.2567C26.7114 18.3509 27.0313 18.3777 27.2396 18.3777C27.7698 18.3777 28.3135 18.2312 28.7206 17.7982C29.0382 17.446 29.1813 16.923 29.2305 16.7091ZM28.0166 16.6573C27.9911 16.777 27.8865 17.2256 27.7426 17.4161C27.6432 17.5562 27.5252 17.6404 27.3947 17.6404C27.358 17.6404 27.1285 17.6404 27.1242 17.2999C27.1216 17.1322 27.1566 16.9576 27.1985 16.7718C27.3208 16.2307 27.4651 15.7769 27.8329 15.7769C28.1225 15.7769 28.1415 16.1145 28.0166 16.6573Z", fill: "white" }), jsx("path", { d: "M40.5855 18.3561C40.0254 18.3509 39.8642 18.3509 39.3465 18.373L39.3115 18.331C39.4532 17.7982 39.595 17.267 39.7199 16.7286C39.8819 16.0298 39.9191 15.7329 39.9736 15.324L40.0155 15.2895C40.5713 15.2095 40.726 15.1875 41.3059 15.0803L41.3241 15.1278C41.2178 15.566 41.1115 16.0047 41.0103 16.4446C40.7964 17.3664 40.7186 17.8349 40.6365 18.3163L40.5855 18.3561Z", fill: "white" }), jsx("path", { d: "M40.8523 16.7721C41.0152 16.0612 40.3601 16.7094 40.2551 16.4748C40.0943 16.1092 40.195 15.3671 39.5493 15.1195C39.3017 15.0231 38.7183 15.148 38.2204 15.6031C37.8682 15.9307 37.7005 16.3736 37.6016 16.8015C37.5013 17.2315 37.3864 18.0189 38.1063 18.3015C38.3337 18.3979 38.5424 18.4256 38.7498 18.4173C39.4741 18.378 40.0265 17.2855 40.434 16.852C40.749 16.5098 40.8043 16.9808 40.8523 16.7721ZM39.7442 16.7189C39.717 16.833 39.612 17.2868 39.4681 17.4744C39.373 17.6088 39.1466 17.6939 39.0169 17.6939C38.9802 17.6939 38.7524 17.6939 38.7442 17.3564C38.7425 17.1904 38.7775 17.0158 38.8207 16.8283C38.943 16.2989 39.0874 15.8468 39.4551 15.8468C39.7451 15.8468 39.8687 16.1761 39.7442 16.7189Z", fill: "white" }), jsx("path", { d: "M32.4031 18.3077C31.9372 18.3012 31.7795 18.3012 31.2319 18.3289L31.2125 18.2887C31.2587 18.0821 31.3114 17.8785 31.3598 17.6689L31.4251 17.3867C31.5262 16.9464 31.6243 16.4347 31.6355 16.2804C31.6446 16.1862 31.6757 15.952 31.4104 15.952C31.2954 15.952 31.1792 16.0073 31.0599 16.0613C30.9951 16.2955 30.862 16.9515 30.798 17.2519C30.6653 17.8829 30.6563 17.9542 30.5962 18.2666L30.5564 18.3077C30.0776 18.3012 29.9134 18.3012 29.3637 18.3289L29.3386 18.283C29.4302 17.9079 29.5201 17.5298 29.6083 17.1555C29.8386 16.1395 29.8935 15.7501 29.9575 15.2337L30.0007 15.203C30.5378 15.1278 30.6684 15.1131 31.2496 14.9934L31.2954 15.0483L31.2112 15.372C31.3067 15.3141 31.4039 15.2549 31.5029 15.203C31.7751 15.0682 32.0828 15.0284 32.2475 15.0284C32.502 15.0284 32.7808 15.0997 32.9005 15.394C33.0098 15.6564 32.9359 15.9805 32.7894 16.6175L32.7164 16.9412C32.5643 17.6504 32.5409 17.78 32.4605 18.2666L32.4031 18.3077Z", fill: "white" }), jsx("path", { d: "M36.9307 14.4822C36.8486 14.8504 36.6096 15.1629 36.3006 15.3137C36.0452 15.4421 35.7344 15.4516 35.4129 15.4516H35.2059L35.2215 15.369C35.2215 15.369 35.6048 13.7048 35.6031 13.71L35.6143 13.6248L35.6212 13.5591L35.7742 13.5751C35.7742 13.5751 36.5616 13.6434 36.5815 13.6456C36.8931 13.764 37.0201 14.0769 36.9307 14.4822ZM36.4276 12.7467C36.4255 12.7467 36.0417 12.7518 36.0417 12.7518C35.0378 12.7631 34.6354 12.7583 34.4703 12.7385C34.4531 12.8119 34.428 12.9424 34.428 12.9424L34.0693 14.6115C34.0693 14.6115 33.2097 18.1565 33.1687 18.3229C34.0447 18.3134 34.4042 18.3134 34.5542 18.3285C34.5883 18.1621 34.7932 17.172 34.7932 17.172C34.7932 17.172 34.9682 16.4447 34.9786 16.4179C34.9786 16.4179 35.0326 16.3436 35.0883 16.3137H35.1683C35.9233 16.3137 36.7781 16.3137 37.4462 15.8206C37.9004 15.4831 38.2138 14.9848 38.3516 14.3802C38.3888 14.2316 38.4147 14.0535 38.4147 13.8772C38.4147 13.6456 38.368 13.4161 38.2323 13.2363C37.8918 12.7583 37.2142 12.7518 36.4276 12.7467Z", fill: "white" }), jsx("path", { d: "M45.1748 15.0751L45.1303 15.0254C44.5581 15.1399 44.4535 15.1598 43.9263 15.2293L43.8865 15.2674C43.8848 15.2739 43.8831 15.2842 43.8818 15.2924L43.8792 15.2842C43.4868 16.1913 43.4993 15.9951 43.1791 16.7073C43.1769 16.6736 43.1765 16.6525 43.1756 16.6187L43.0961 15.0751L43.0455 15.0254C42.4466 15.1399 42.4306 15.1598 41.8761 15.2293L41.8316 15.2674C41.8277 15.2877 41.8264 15.3076 41.8234 15.3292L41.8277 15.3374C41.8968 15.6931 41.8809 15.6131 41.9496 16.171C41.982 16.445 42.0243 16.7225 42.0567 16.9926C42.1121 17.4463 42.1423 17.6706 42.208 18.3612C41.835 18.981 41.7447 19.2148 41.3882 19.7584L41.4072 19.8077C41.9496 19.7874 42.0745 19.7874 42.4755 19.7874L42.5641 19.6884C42.8671 19.0354 45.1748 15.0751 45.1748 15.0751Z", fill: "white" }), jsx("path", { d: "M25.5693 15.4586C25.8753 15.2447 25.9146 14.9491 25.6553 14.7957C25.3926 14.6414 24.9353 14.6898 24.6259 14.9042C24.3143 15.1151 24.2802 15.4115 24.5399 15.5662C24.8001 15.7171 25.2595 15.673 25.5693 15.4586Z", fill: "white" }), jsx("path", { d: "M42.5238 19.7429L42.0727 20.5152C41.93 20.7788 41.6651 20.9771 41.2442 20.9784L40.5255 20.9668L40.7347 20.2706H40.8738C40.9477 20.2706 41.0018 20.2658 41.0432 20.2455C41.0787 20.2343 41.105 20.2062 41.1344 20.1647L41.3993 19.7429H42.5238Z", fill: "white" })] }));
 };
 
 const CreditCard = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M1 10L59 10", stroke: "#D3D3D3", "stroke-width": "7" }), jsx("path", { d: "M5 20H34", stroke: "#D3D3D3", "stroke-width": "2", strokeLinecap: "round" }), jsx("path", { d: "M5 27H25", stroke: "#D3D3D3", "stroke-width": "2", strokeLinecap: "round" }), jsx("rect", { x: "46", y: "21", width: "10", height: "7", rx: "2", fill: "#D9D9D9" })] }));
+    return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M1 10L59 10", stroke: "#D3D3D3", strokeWidth: "7" }), jsx("path", { d: "M5 20H34", stroke: "#D3D3D3", strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M5 27H25", stroke: "#D3D3D3", strokeWidth: "2", strokeLinecap: "round" }), jsx("rect", { x: "46", y: "21", width: "10", height: "7", rx: "2", fill: "#D9D9D9" })] }));
 };
 
 const DinersClub = ({ className }) => {
@@ -19103,6 +18503,10 @@ const Discover = ({ className }) => {
     return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5H52C56.1421 0.5 59.5 3.85786 59.5 8V30C59.5 34.1421 56.1421 37.5 52 37.5H8C3.85786 37.5 0.5 34.1421 0.5 30V8Z", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M9.19232 21.3753C8.69269 21.8265 8.04327 22.0234 7.01615 22.0234H6.58905V16.6315H7.01615C8.04327 16.6315 8.66695 16.8153 9.19232 17.2909C9.74271 17.7809 10.0728 18.539 10.0728 19.3202C10.0728 20.1034 9.74271 20.8859 9.19232 21.3753ZM7.33469 15.2496H5V23.404H7.32208C8.55684 23.404 9.44888 23.1129 10.2316 22.4621C11.1617 21.6921 11.7116 20.5322 11.7116 19.3327C11.7116 16.926 9.91383 15.2496 7.33469 15.2496Z", fill: "#231F20" }), jsx("path", { d: "M12.4438 23.404H14.0339V15.2496H12.4438V23.404Z", fill: "#231F20" }), jsx("path", { d: "M17.9229 18.379C16.9683 18.0253 16.6881 17.7928 16.6881 17.3521C16.6881 16.8383 17.1875 16.4484 17.8729 16.4484C18.3498 16.4484 18.7411 16.644 19.1556 17.1091L19.9879 16.019C19.3038 15.4209 18.4856 15.1153 17.592 15.1153C16.1491 15.1153 15.0487 16.1171 15.0487 17.4516C15.0487 18.5746 15.5612 19.1496 17.0551 19.6871C17.6774 19.9071 17.9941 20.0533 18.1542 20.1521C18.4717 20.359 18.6312 20.6527 18.6312 20.9952C18.6312 21.6559 18.1058 22.1453 17.3959 22.1453C16.6379 22.1453 16.0266 21.7665 15.6605 21.0585L14.6329 22.0471C15.3656 23.1227 16.2456 23.5996 17.4559 23.5996C19.1087 23.5996 20.2684 22.501 20.2684 20.9228C20.2684 19.6265 19.7324 19.0403 17.9229 18.379Z", fill: "#231F20" }), jsx("path", { d: "M20.7702 19.3328C20.7702 21.729 22.652 23.5871 25.0739 23.5871C25.7583 23.5871 26.3445 23.4528 27.0677 23.1129V21.2403C26.4317 21.8766 25.8684 22.1328 25.1475 22.1328C23.5456 22.1328 22.4089 20.9715 22.4089 19.3203C22.4089 17.7552 23.5821 16.5202 25.0739 16.5202C25.8321 16.5202 26.407 16.7909 27.0677 17.4378V15.5665C26.3697 15.2121 25.7957 15.0659 25.1112 15.0659C22.7019 15.0659 20.7702 16.9615 20.7702 19.3328Z", fill: "#231F20" }), jsx("path", { d: "M39.6784 20.7265L37.5033 15.2497H35.7663L39.2264 23.6135H40.0824L43.605 15.2497H41.8806L39.6784 20.7265Z", fill: "#231F20" }), jsx("path", { d: "M44.3237 23.404H48.8345V22.0234H45.9135V19.8221H48.7263V18.4409H45.9135V16.6315H48.8345V15.2496H44.3237V23.404Z", fill: "#231F20" }), jsx("path", { d: "M51.9414 19.0041H51.4762V16.534H51.9658C52.9569 16.534 53.4954 16.949 53.4954 17.7427C53.4954 18.5628 52.9569 19.0041 51.9414 19.0041ZM55.1326 17.6571C55.1326 16.1303 54.0803 15.2496 52.246 15.2496H49.8879V23.404H51.4762V20.1284H51.6841L53.8855 23.404H55.8412L53.2739 19.9684C54.4724 19.7246 55.1326 18.9059 55.1326 17.6571Z", fill: "#231F20" }), jsx("path", { d: "M56.0974 15.7753H56.0678V15.5875H56.0989C56.1836 15.5875 56.2281 15.6178 56.2281 15.6797C56.2281 15.7436 56.1831 15.7753 56.0974 15.7753ZM56.4 15.6778C56.4 15.5342 56.3007 15.4558 56.1273 15.4558H55.8967V16.1744H56.0678V15.8958L56.269 16.1744H56.479L56.2425 15.878C56.3434 15.851 56.4 15.7772 56.4 15.6778Z", fill: "#231F20" }), jsx("path", { d: "M56.1591 16.3292C55.8843 16.3292 55.6597 16.1 55.6597 15.8148C55.6597 15.5283 55.8823 15.2997 56.1591 15.2997C56.4328 15.2997 56.6554 15.5335 56.6554 15.8148C56.6554 16.0974 56.4328 16.3292 56.1591 16.3292ZM56.1617 15.1871C55.8128 15.1871 55.5354 15.4657 55.5354 15.8135C55.5354 16.1619 55.8159 16.4412 56.1617 16.4412C56.5018 16.4412 56.7808 16.1586 56.7808 15.8135C56.7808 15.4703 56.5018 15.1871 56.1617 15.1871Z", fill: "#231F20" }), jsx("path", { d: "M36.2191 19.3183C36.2191 21.7027 34.2863 23.6359 31.9014 23.6359C29.5166 23.6359 27.5835 21.7027 27.5835 19.3183C27.5835 16.9332 29.5166 15 31.9014 15C34.2863 15 36.2191 16.9332 36.2191 19.3183Z", fill: "#F36719" })] }));
 };
 
+const IDeal = ({ className }) => {
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.0266 9.91185H35.684C47.003 9.91185 51.3527 16.0977 51.3527 23.9167C51.3527 33.2698 45.273 37.9711 35.684 37.9711H19.0266V9.91185ZM20.6082 11.5944V36.3875H35.6838C44.7786 36.3875 49.7215 32.1316 49.7215 23.9662C49.7215 15.5534 44.3832 11.5944 35.6838 11.5944H20.6082ZM25.0568 24.4115C26.722 24.4115 28.072 23.06 28.072 21.3928C28.072 19.7256 26.722 18.3741 25.0568 18.3741C23.3916 18.3741 22.0417 19.7256 22.0417 21.3928C22.0417 23.06 23.3916 24.4115 25.0568 24.4115ZM22.635 25.6982H27.479V34.309H22.635V25.6982Z", fill: "black" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.2351 18.6216H45.6191V22.7785H47.6456C47.1019 15.207 41.1211 13.5244 35.684 13.5244H29.9009V18.6216H30.7412C32.3229 18.6216 33.262 19.6608 33.262 21.3929C33.262 23.1249 32.3229 24.1641 30.7906 24.1641H29.9009V34.309H35.684C44.5317 34.309 47.5468 30.2016 47.6951 24.1641H44.2351V18.6216ZM37.5623 22.7785V24.1641H34.1023V18.6216H37.4634V20.0072H35.4863V20.6505H37.3646V22.0362H35.5357V22.7785H37.5623ZM39.8358 18.6216H41.813L43.4935 24.1641H42.0601L41.7635 23.1249H39.9347L39.6381 24.1641H38.1553L39.8358 18.6216ZM40.3456 21.6898H40.3302V21.7393L40.3456 21.6898ZM40.3456 21.6898H41.3188L40.8739 20.1557H40.8245L40.3456 21.6898ZM29.9009 22.7785V20.0072H30.7412C31.2849 20.0072 31.878 20.1557 31.878 21.3929C31.878 22.63 31.3343 22.7785 30.7412 22.7785H29.9009Z", fill: "#D50072" })] }));
+};
+
 const JCB = ({ className }) => {
     return (jsxs("svg", { className: className, width: "60", height: "38", viewBox: "0 0 60 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "59", height: "37", rx: "7.5", fill: "white", stroke: "#D3D3D3" }), jsx("path", { d: "M48 27.522C48 30.5171 45.5611 32.956 42.566 32.956H13V11.434C13 8.43887 15.4389 6 18.434 6H48V27.522Z", fill: "white" }), jsx("path", { d: "M38.3728 22.0024H40.6191C40.6833 22.0024 40.833 21.981 40.8972 21.981C41.3251 21.8954 41.6888 21.5104 41.6888 20.9755C41.6888 20.4621 41.3251 20.077 40.8972 19.97C40.833 19.9486 40.7047 19.9486 40.6191 19.9486H38.3728V22.0024Z", fill: "url(#paint0_linear_1_133)" }), jsx("path", { d: "M40.3625 7.81844C38.2231 7.81844 36.4688 9.55132 36.4688 11.7121V15.7555H41.967C42.0953 15.7555 42.2451 15.7555 42.3521 15.7769C43.5929 15.8411 44.5128 16.4829 44.5128 17.5953C44.5128 18.4725 43.8924 19.2212 42.7371 19.371V19.4138C43.9994 19.4994 44.9621 20.2054 44.9621 21.2964C44.9621 22.4731 43.8924 23.2433 42.4804 23.2433H36.4474V31.1589H42.1595C44.2989 31.1589 46.0532 29.426 46.0532 27.2653V7.81844H40.3625Z", fill: "url(#paint1_linear_1_133)" }), jsx("path", { d: "M41.4107 17.852C41.4107 17.3386 41.047 16.9963 40.6191 16.9321C40.5763 16.9321 40.4693 16.9107 40.4052 16.9107H38.3728V18.7933H40.4052C40.4693 18.7933 40.5977 18.7933 40.6191 18.7719C41.047 18.7078 41.4107 18.3655 41.4107 17.852Z", fill: "url(#paint2_linear_1_133)" }), jsx("path", { d: "M18.8405 7.81844C16.7011 7.81844 14.9468 9.55132 14.9468 11.7121V21.3178C16.0379 21.8527 17.1718 22.195 18.3056 22.195C19.6534 22.195 20.3808 21.382 20.3808 20.2695V15.7341H23.7182V20.2481C23.7182 22.0024 22.6272 23.4358 18.9261 23.4358C16.6797 23.4358 14.9254 22.9437 14.9254 22.9437V31.1375H20.6375C22.7769 31.1375 24.5312 29.4046 24.5312 27.2439V7.81844H18.8405Z", fill: "url(#paint3_linear_1_133)" }), jsx("path", { d: "M29.6015 7.81844C27.4621 7.81844 25.7079 9.55132 25.7079 11.7121V16.8038C26.692 15.9694 28.4035 15.4346 31.1632 15.5629C32.6394 15.6271 34.2225 16.0336 34.2225 16.0336V17.6809C33.431 17.2744 32.4896 16.9107 31.2702 16.8252C29.1736 16.6754 27.9114 17.7023 27.9114 19.4994C27.9114 21.3178 29.1736 22.3447 31.2702 22.1736C32.4896 22.088 33.431 21.7029 34.2225 21.3178V22.9651C34.2225 22.9651 32.6608 23.3716 31.1632 23.4358C28.4035 23.5642 26.692 23.0293 25.7079 22.195V31.1803H31.42C33.5593 31.1803 35.3136 29.4474 35.3136 27.2867V7.81844H29.6015Z", fill: "url(#paint4_linear_1_133)" }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1_133", x1: "36.4652", y1: "20.9781", x2: "46.0789", y2: "20.9781", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { "stop-color": "#007940" }), jsx("stop", { offset: "0.2285", "stop-color": "#00873F" }), jsx("stop", { offset: "0.7433", "stop-color": "#40A737" }), jsx("stop", { offset: "1", "stop-color": "#5CB531" })] }), jsxs("linearGradient", { id: "paint1_linear_1_133", x1: "36.465", y1: "19.4793", x2: "46.0794", y2: "19.4793", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { "stop-color": "#007940" }), jsx("stop", { offset: "0.2285", "stop-color": "#00873F" }), jsx("stop", { offset: "0.7433", "stop-color": "#40A737" }), jsx("stop", { offset: "1", "stop-color": "#5CB531" })] }), jsxs("linearGradient", { id: "paint2_linear_1_133", x1: "36.4649", y1: "17.8493", x2: "46.079", y2: "17.8493", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { "stop-color": "#007940" }), jsx("stop", { offset: "0.2285", "stop-color": "#00873F" }), jsx("stop", { offset: "0.7433", "stop-color": "#40A737" }), jsx("stop", { offset: "1", "stop-color": "#5CB531" })] }), jsxs("linearGradient", { id: "paint3_linear_1_133", x1: "14.9423", y1: "19.4793", x2: "24.7049", y2: "19.4793", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { "stop-color": "#1F286F" }), jsx("stop", { offset: "0.4751", "stop-color": "#004E94" }), jsx("stop", { offset: "0.8261", "stop-color": "#0066B1" }), jsx("stop", { offset: "1", "stop-color": "#006FBC" })] }), jsxs("linearGradient", { id: "paint4_linear_1_133", x1: "25.6525", y1: "19.4793", x2: "35.1343", y2: "19.4793", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { "stop-color": "#6C2C2F" }), jsx("stop", { offset: "0.1735", "stop-color": "#882730" }), jsx("stop", { offset: "0.5731", "stop-color": "#BE1833" }), jsx("stop", { offset: "0.8585", "stop-color": "#DC0436" }), jsx("stop", { offset: "1", "stop-color": "#E60039" })] })] })] }));
 };
@@ -19112,53 +18516,108 @@ const Cashapp = ({ className }) => {
 };
 
 const Mastercard = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M35.5 34.3139C33.1169 36.3704 30.0255 37.6119 26.6475 37.6119C19.1102 37.6119 13 31.4308 13 23.806C13 16.1811 19.1102 10 26.6475 10C30.0255 10 33.1169 11.2415 35.5 13.2981C37.8831 11.2415 40.9745 10 44.3525 10C51.8898 10 58 16.1811 58 23.806C58 31.4308 51.8898 37.6119 44.3525 37.6119C40.9745 37.6119 37.8831 36.3704 35.5 34.3139Z", fill: "#ED0006" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M35.5 34.3139C38.4344 31.7816 40.2951 28.0136 40.2951 23.806C40.2951 19.5983 38.4344 15.8303 35.5 13.2981C37.8831 11.2415 40.9745 10 44.3525 10C51.8898 10 58 16.1811 58 23.806C58 31.4308 51.8898 37.6119 44.3525 37.6119C40.9745 37.6119 37.8831 36.3704 35.5 34.3139Z", fill: "#F9A000" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M35.5 13.2981C38.4344 15.8304 40.2951 19.5984 40.2951 23.806C40.2951 28.0136 38.4344 31.7816 35.5 34.3138C32.5657 31.7816 30.705 28.0136 30.705 23.806C30.705 19.5984 32.5657 15.8304 35.5 13.2981Z", fill: "#FF5E00" })] }));
-};
-
-const Visa = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] }));
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.5 34.3139C33.1169 36.3704 30.0255 37.6119 26.6475 37.6119C19.1102 37.6119 13 31.4308 13 23.806C13 16.1811 19.1102 10 26.6475 10C30.0255 10 33.1169 11.2415 35.5 13.2981C37.8831 11.2415 40.9745 10 44.3525 10C51.8898 10 58 16.1811 58 23.806C58 31.4308 51.8898 37.6119 44.3525 37.6119C40.9745 37.6119 37.8831 36.3704 35.5 34.3139Z", fill: "#ED0006" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.5 34.3139C38.4344 31.7816 40.2951 28.0136 40.2951 23.806C40.2951 19.5983 38.4344 15.8303 35.5 13.2981C37.8831 11.2415 40.9745 10 44.3525 10C51.8898 10 58 16.1811 58 23.806C58 31.4308 51.8898 37.6119 44.3525 37.6119C40.9745 37.6119 37.8831 36.3704 35.5 34.3139Z", fill: "#F9A000" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.5 13.2981C38.4344 15.8304 40.2951 19.5984 40.2951 23.806C40.2951 28.0136 38.4344 31.7816 35.5 34.3138C32.5657 31.7816 30.705 28.0136 30.705 23.806C30.705 19.5984 32.5657 15.8304 35.5 13.2981Z", fill: "#FF5E00" })] }));
 };
 
 const Sepa = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#10298E", stroke: "#D9D9D9" }), jsx("path", { d: "M12.7744 16.084C14.4396 16.084 15.6264 16.1801 16.334 16.3701C18.0609 16.8349 18.9248 18.137 18.9248 20.2764C18.9248 20.4518 18.9113 20.714 18.8857 21.0645H14.918C14.918 20.4123 14.8407 19.9748 14.6885 19.752C14.4524 19.4222 13.801 19.2569 12.7344 19.2568C11.6983 19.2568 11.0109 19.3519 10.6758 19.542C10.3409 19.7327 10.1729 20.1477 10.1729 20.7861C10.1729 21.3638 10.3217 21.7443 10.6191 21.9268C10.8324 22.0562 11.1145 22.1325 11.4658 22.1553L12.2656 22.2119C13.9806 22.3259 15.0521 22.4065 15.4795 22.4521C16.8358 22.5891 17.8195 22.9497 18.4297 23.5352C18.9098 23.992 19.1958 24.5898 19.2871 25.3271C19.3405 25.7681 19.3672 26.267 19.3672 26.8213C19.3672 28.0993 19.2457 29.0356 19.002 29.6289C18.5601 30.7174 17.5669 31.4046 16.0225 31.6934C15.3754 31.8154 14.3858 31.8769 13.0547 31.877C10.8322 31.877 9.28274 31.7449 8.4082 31.4785C7.33499 31.1522 6.6276 30.4905 6.28516 29.4951C6.09445 28.941 6.00001 28.0182 6 26.7266H9.96875C9.96875 26.8706 9.96875 26.9808 9.96875 27.0566C9.96876 27.746 10.1668 28.1893 10.5615 28.3867C10.8351 28.5229 11.1654 28.594 11.5537 28.6025H13.0127C13.7572 28.6025 14.2325 28.5649 14.4375 28.4883C14.8023 28.3446 15.0418 28.1131 15.1562 27.793C15.217 27.596 15.247 27.3411 15.2471 27.0293C15.2471 26.3303 14.992 25.9045 14.4834 25.752C14.2928 25.6917 13.4079 25.6075 11.8291 25.501C10.5609 25.4103 9.67998 25.3228 9.18652 25.2383C7.88722 24.9948 7.02094 24.4944 6.58887 23.7344C6.20918 23.0886 6.01956 22.1116 6.01953 20.8047C6.01953 19.8092 6.12198 19.0105 6.32715 18.4102C6.53252 17.8097 6.86368 17.3538 7.32031 17.042C7.98917 16.5635 8.84498 16.2823 9.88672 16.1982C10.7538 16.1225 11.7164 16.084 12.7744 16.084ZM44.2861 16C45.3761 16 46.2079 16.0894 46.7793 16.2676C48.0865 16.6779 48.9639 17.5176 49.4131 18.7871C49.645 19.4533 49.7607 20.4565 49.7607 21.7959C49.7607 23.4063 49.6323 24.564 49.3779 25.2686C48.8682 26.6618 47.8187 27.4648 46.2344 27.6729C46.048 27.7041 45.2548 27.7316 43.8555 27.7539L43.1475 27.7773H40.6045V31.877H36.3389V16H44.2861ZM64 31.877H59.6787L58.8652 29.1328H53.1621L52.3955 31.877H47.9824L52.7441 16H59.1787L64 31.877ZM54.0801 26.04H58.0186L56.0195 19.1572L54.0801 26.04ZM40.6035 24.0947H43.2627C44.1059 24.0643 44.6191 23.9992 44.8037 23.8975C45.0556 23.7585 45.2244 23.4803 45.3086 23.0635C45.3624 22.7859 45.3896 22.3732 45.3896 21.8252C45.3896 21.1539 45.336 20.6561 45.2285 20.3311C45.0751 19.8759 44.7078 19.5988 44.126 19.498C44.011 19.4828 43.7353 19.4746 43.2988 19.4746H40.6035V24.0947Z", fill: "white" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.45 18.2337C32.2095 18.2337 33.7797 19.0456 34.8119 20.3173L35.7314 18.3424C34.2933 16.9808 32.336 16.1413 30.1772 16.1413C26.8159 16.1413 23.9406 18.1748 22.7605 21.0533H20.9674L19.9087 23.3269H22.2154C22.1981 23.5378 22.1869 23.7489 22.1869 23.9643C22.1869 24.2249 22.2004 24.4824 22.2262 24.7369H21.0669L20.0083 27.0113H22.8155C24.0293 29.8169 26.8686 31.7866 30.1772 31.7866C31.8445 31.7866 33.3917 31.2862 34.6727 30.4314V27.644C33.6411 28.8205 32.1322 29.564 30.45 29.564C28.4837 29.564 26.754 28.5484 25.7468 27.0113H31.6253L32.6838 24.7369H24.8819C24.8417 24.4632 24.8202 24.1835 24.8202 23.8986C24.8202 23.706 24.8302 23.5153 24.8486 23.3269H33.3399L34.3985 21.0533H25.583C26.5579 19.3679 28.3721 18.2337 30.45 18.2337", fill: "#FFBE00" })] }));
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "#10298E", stroke: "#D9D9D9" }), jsx("path", { d: "M12.7744 16.084C14.4396 16.084 15.6264 16.1801 16.334 16.3701C18.0609 16.8349 18.9248 18.137 18.9248 20.2764C18.9248 20.4518 18.9113 20.714 18.8857 21.0645H14.918C14.918 20.4123 14.8407 19.9748 14.6885 19.752C14.4524 19.4222 13.801 19.2569 12.7344 19.2568C11.6983 19.2568 11.0109 19.3519 10.6758 19.542C10.3409 19.7327 10.1729 20.1477 10.1729 20.7861C10.1729 21.3638 10.3217 21.7443 10.6191 21.9268C10.8324 22.0562 11.1145 22.1325 11.4658 22.1553L12.2656 22.2119C13.9806 22.3259 15.0521 22.4065 15.4795 22.4521C16.8358 22.5891 17.8195 22.9497 18.4297 23.5352C18.9098 23.992 19.1958 24.5898 19.2871 25.3271C19.3405 25.7681 19.3672 26.267 19.3672 26.8213C19.3672 28.0993 19.2457 29.0356 19.002 29.6289C18.5601 30.7174 17.5669 31.4046 16.0225 31.6934C15.3754 31.8154 14.3858 31.8769 13.0547 31.877C10.8322 31.877 9.28274 31.7449 8.4082 31.4785C7.33499 31.1522 6.6276 30.4905 6.28516 29.4951C6.09445 28.941 6.00001 28.0182 6 26.7266H9.96875C9.96875 26.8706 9.96875 26.9808 9.96875 27.0566C9.96876 27.746 10.1668 28.1893 10.5615 28.3867C10.8351 28.5229 11.1654 28.594 11.5537 28.6025H13.0127C13.7572 28.6025 14.2325 28.5649 14.4375 28.4883C14.8023 28.3446 15.0418 28.1131 15.1562 27.793C15.217 27.596 15.247 27.3411 15.2471 27.0293C15.2471 26.3303 14.992 25.9045 14.4834 25.752C14.2928 25.6917 13.4079 25.6075 11.8291 25.501C10.5609 25.4103 9.67998 25.3228 9.18652 25.2383C7.88722 24.9948 7.02094 24.4944 6.58887 23.7344C6.20918 23.0886 6.01956 22.1116 6.01953 20.8047C6.01953 19.8092 6.12198 19.0105 6.32715 18.4102C6.53252 17.8097 6.86368 17.3538 7.32031 17.042C7.98917 16.5635 8.84498 16.2823 9.88672 16.1982C10.7538 16.1225 11.7164 16.084 12.7744 16.084ZM44.2861 16C45.3761 16 46.2079 16.0894 46.7793 16.2676C48.0865 16.6779 48.9639 17.5176 49.4131 18.7871C49.645 19.4533 49.7607 20.4565 49.7607 21.7959C49.7607 23.4063 49.6323 24.564 49.3779 25.2686C48.8682 26.6618 47.8187 27.4648 46.2344 27.6729C46.048 27.7041 45.2548 27.7316 43.8555 27.7539L43.1475 27.7773H40.6045V31.877H36.3389V16H44.2861ZM64 31.877H59.6787L58.8652 29.1328H53.1621L52.3955 31.877H47.9824L52.7441 16H59.1787L64 31.877ZM54.0801 26.04H58.0186L56.0195 19.1572L54.0801 26.04ZM40.6035 24.0947H43.2627C44.1059 24.0643 44.6191 23.9992 44.8037 23.8975C45.0556 23.7585 45.2244 23.4803 45.3086 23.0635C45.3624 22.7859 45.3896 22.3732 45.3896 21.8252C45.3896 21.1539 45.336 20.6561 45.2285 20.3311C45.0751 19.8759 44.7078 19.5988 44.126 19.498C44.011 19.4828 43.7353 19.4746 43.2988 19.4746H40.6035V24.0947Z", fill: "white" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.45 18.2337C32.2095 18.2337 33.7797 19.0456 34.8119 20.3173L35.7314 18.3424C34.2933 16.9808 32.336 16.1413 30.1772 16.1413C26.8159 16.1413 23.9406 18.1748 22.7605 21.0533H20.9674L19.9087 23.3269H22.2154C22.1981 23.5378 22.1869 23.7489 22.1869 23.9643C22.1869 24.2249 22.2004 24.4824 22.2262 24.7369H21.0669L20.0083 27.0113H22.8155C24.0293 29.8169 26.8686 31.7866 30.1772 31.7866C31.8445 31.7866 33.3917 31.2862 34.6727 30.4314V27.644C33.6411 28.8205 32.1322 29.564 30.45 29.564C28.4837 29.564 26.754 28.5484 25.7468 27.0113H31.6253L32.6838 24.7369H24.8819C24.8417 24.4632 24.8202 24.1835 24.8202 23.8986C24.8202 23.706 24.8302 23.5153 24.8486 23.3269H33.3399L34.3985 21.0533H25.583C26.5579 19.3679 28.3721 18.2337 30.45 18.2337", fill: "#FFBE00" })] }));
 };
 
-const IDeal = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.0266 9.91185H35.684C47.003 9.91185 51.3527 16.0977 51.3527 23.9167C51.3527 33.2698 45.273 37.9711 35.684 37.9711H19.0266V9.91185ZM20.6082 11.5944V36.3875H35.6838C44.7786 36.3875 49.7215 32.1316 49.7215 23.9662C49.7215 15.5534 44.3832 11.5944 35.6838 11.5944H20.6082ZM25.0568 24.4115C26.722 24.4115 28.072 23.06 28.072 21.3928C28.072 19.7256 26.722 18.3741 25.0568 18.3741C23.3916 18.3741 22.0417 19.7256 22.0417 21.3928C22.0417 23.06 23.3916 24.4115 25.0568 24.4115ZM22.635 25.6982H27.479V34.309H22.635V25.6982Z", fill: "black" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M44.2351 18.6216H45.6191V22.7785H47.6456C47.1019 15.207 41.1211 13.5244 35.684 13.5244H29.9009V18.6216H30.7412C32.3229 18.6216 33.262 19.6608 33.262 21.3929C33.262 23.1249 32.3229 24.1641 30.7906 24.1641H29.9009V34.309H35.684C44.5317 34.309 47.5468 30.2016 47.6951 24.1641H44.2351V18.6216ZM37.5623 22.7785V24.1641H34.1023V18.6216H37.4634V20.0072H35.4863V20.6505H37.3646V22.0362H35.5357V22.7785H37.5623ZM39.8358 18.6216H41.813L43.4935 24.1641H42.0601L41.7635 23.1249H39.9347L39.6381 24.1641H38.1553L39.8358 18.6216ZM40.3456 21.6898H40.3302V21.7393L40.3456 21.6898ZM40.3456 21.6898H41.3188L40.8739 20.1557H40.8245L40.3456 21.6898ZM29.9009 22.7785V20.0072H30.7412C31.2849 20.0072 31.878 20.1557 31.878 21.3929C31.878 22.63 31.3343 22.7785 30.7412 22.7785H29.9009Z", fill: "#D50072" })] }));
+const Visa = ({ className }) => {
+    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.2505 32.5165H17.0099L13.8299 20.3847C13.679 19.8267 13.3585 19.3333 12.8871 19.1008C11.7106 18.5165 10.4142 18.0514 9 17.8169V17.3498H15.8313C16.7742 17.3498 17.4813 18.0514 17.5991 18.8663L19.2491 27.6173L23.4877 17.3498H27.6104L21.2505 32.5165ZM29.9675 32.5165H25.9626L29.2604 17.3498H33.2653L29.9675 32.5165ZM38.4467 21.5514C38.5646 20.7346 39.2717 20.2675 40.0967 20.2675C41.3931 20.1502 42.8052 20.3848 43.9838 20.9671L44.6909 17.7016C43.5123 17.2345 42.216 17 41.0395 17C37.1524 17 34.3239 19.1008 34.3239 22.0165C34.3239 24.2346 36.3274 25.3992 37.7417 26.1008C39.2717 26.8004 39.861 27.2675 39.7431 27.9671C39.7431 29.0165 38.5646 29.4836 37.3881 29.4836C35.9739 29.4836 34.5596 29.1338 33.2653 28.5494L32.5582 31.8169C33.9724 32.3992 35.5025 32.6338 36.9167 32.6338C41.2752 32.749 43.9838 30.6502 43.9838 27.5C43.9838 23.5329 38.4467 23.3004 38.4467 21.5514ZM58 32.5165L54.82 17.3498H51.4044C50.6972 17.3498 49.9901 17.8169 49.7544 18.5165L43.8659 32.5165H47.9887L48.8116 30.3004H53.8772L54.3486 32.5165H58ZM51.9936 21.4342L53.1701 27.1502H49.8723L51.9936 21.4342Z", fill: "#172B85" })] }));
 };
 
-const Bancontact = ({ className }) => {
-    return (jsxs("svg", { className: className, width: "70", height: "48", viewBox: "0 0 70 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.2243 35.1715C18.2243 34.882 18.156 34.6314 18.0199 34.4199C17.8835 34.2083 17.7043 34.0468 17.4819 33.9355C17.7043 33.8242 17.8766 33.6597 17.9991 33.4426C18.1214 33.2255 18.1825 32.9806 18.1825 32.7078V32.5575C18.1825 32.2233 18.1186 31.9451 17.9908 31.7223C17.8628 31.4996 17.6833 31.3213 17.4526 31.1878C17.2219 31.0541 16.9451 30.9582 16.6227 30.8995C16.3 30.8411 15.9414 30.812 15.5465 30.812C15.4131 30.812 15.274 30.8147 15.1296 30.8203C14.9848 30.8258 14.8445 30.8328 14.7083 30.8411C14.572 30.8494 14.4468 30.8593 14.3329 30.8704C14.2188 30.8817 14.1256 30.8928 14.0534 30.9037C13.8921 30.9318 13.7781 30.9817 13.7114 31.0541C13.6448 31.1266 13.6113 31.2575 13.6113 31.4467V36.5245C13.6113 36.7139 13.646 36.8447 13.7156 36.917C13.7851 36.9895 13.9032 37.0394 14.0702 37.0673C14.1535 37.084 14.2536 37.0979 14.3704 37.1091C14.4871 37.1202 14.6136 37.1299 14.7499 37.1383C14.8862 37.1466 15.0265 37.1535 15.1711 37.1593C15.3158 37.1646 15.4575 37.1676 15.5966 37.1676C15.9581 37.1676 16.2986 37.1397 16.6185 37.084C16.9381 37.0285 17.2161 36.9295 17.4526 36.7874C17.689 36.6456 17.8766 36.4534 18.0157 36.2113C18.1546 35.969 18.2243 35.6642 18.2243 35.2967V35.1715ZM16.8063 32.7746C16.8063 32.8637 16.7924 32.9487 16.7645 33.0293C16.7366 33.11 16.6909 33.1795 16.627 33.2383C16.5629 33.2966 16.4768 33.3439 16.3684 33.38C16.2599 33.4162 16.1222 33.4343 15.9554 33.4343H15.0213V31.9895C15.049 31.9895 15.0921 31.9883 15.1505 31.9853C15.2089 31.9825 15.27 31.9812 15.3339 31.9812H15.6551C16.0833 31.9812 16.3822 32.0354 16.5518 32.144C16.7214 32.2526 16.8063 32.421 16.8063 32.6492V32.7746ZM16.5935 35.8062C16.7576 35.6782 16.8397 35.4971 16.8397 35.2634V35.1714C16.8397 34.971 16.7756 34.797 16.6478 34.6494C16.5198 34.502 16.289 34.4282 15.9554 34.4282H15.0213V35.9898H15.1671C15.231 35.9898 15.2977 35.9916 15.3673 35.9942C15.4368 35.9969 15.5035 35.9985 15.5676 35.9985H15.7051C16.1333 35.9985 16.4295 35.9343 16.5935 35.8062ZM22.7955 33.9438C22.7955 33.6377 22.7496 33.3772 22.6578 33.1629C22.5662 32.9487 22.4368 32.7732 22.27 32.6367C22.1032 32.5004 21.8988 32.4003 21.6568 32.3362C21.415 32.2722 21.1439 32.2401 20.8436 32.2401C20.5654 32.2401 20.2943 32.2597 20.0303 32.2987C19.766 32.3375 19.556 32.3766 19.4005 32.4154C19.2948 32.4435 19.242 32.5046 19.242 32.5991V33.2756C19.242 33.3314 19.2559 33.3705 19.2837 33.3925C19.3115 33.4149 19.3475 33.4261 19.3922 33.4261H19.4337C19.5006 33.4204 19.5839 33.4135 19.684 33.4051C19.7842 33.3968 19.8968 33.3901 20.022 33.3842C20.1471 33.3788 20.2777 33.3746 20.414 33.3717C20.5501 33.3689 20.6851 33.3675 20.8186 33.3675C21.0131 33.3675 21.1661 33.4038 21.2773 33.4761C21.3885 33.5486 21.4441 33.7045 21.4441 33.9438V34.2445H20.9937C20.2763 34.2445 19.7549 34.3572 19.4296 34.5827C19.1043 34.8081 18.9416 35.1659 18.9416 35.6558V35.7313C18.9416 36.0039 18.982 36.2321 19.0625 36.4158C19.1431 36.5996 19.2503 36.7472 19.3837 36.8587C19.5172 36.9699 19.6686 37.0493 19.8384 37.0964C20.008 37.1438 20.1846 37.1676 20.3681 37.1676C20.6184 37.1676 20.8339 37.1341 21.0145 37.0673C21.1952 37.0005 21.3662 36.9086 21.5276 36.7917V36.9253C21.5276 36.9699 21.5442 37.0089 21.5776 37.0422C21.6111 37.0756 21.6499 37.0923 21.6944 37.0923H22.6287C22.6731 37.0923 22.712 37.0756 22.7455 37.0422C22.7789 37.0089 22.7955 36.9699 22.7955 36.9253V33.9438ZM21.1481 36.0942C21.2619 36.0581 21.3691 36.015 21.4692 35.9648V35.0462H20.9937C20.8491 35.0462 20.7296 35.0587 20.635 35.0837C20.5404 35.1088 20.4653 35.1465 20.4098 35.1966C20.3542 35.2465 20.3152 35.3107 20.2931 35.3886C20.2707 35.4666 20.2596 35.5556 20.2596 35.6558V35.7312C20.2596 35.9092 20.3026 36.0233 20.3889 36.0734C20.4751 36.1235 20.6071 36.1485 20.7852 36.1485C20.913 36.1485 21.0339 36.1306 21.1481 36.0942ZM27.9007 36.917V34.1358C27.9007 33.8744 27.8799 33.6278 27.8381 33.3968C27.7964 33.166 27.7214 32.9653 27.6129 32.7954C27.5045 32.6256 27.3543 32.4905 27.1624 32.3904C26.9707 32.2902 26.7245 32.2401 26.4242 32.2401C26.1572 32.2401 25.9208 32.2723 25.7152 32.3369C25.5094 32.4014 25.2925 32.515 25.0646 32.6776V32.4752C25.0646 32.4305 25.0478 32.3911 25.0145 32.3575C24.9811 32.3238 24.9421 32.3068 24.8976 32.3068H23.9634C23.9187 32.3068 23.8799 32.3235 23.8467 32.357C23.8133 32.3904 23.7966 32.4295 23.7966 32.4739V36.917C23.7966 36.9615 23.8145 37.0019 23.8508 37.038C23.8869 37.0743 23.9272 37.0923 23.9717 37.0923H24.9811C25.0256 37.0923 25.0646 37.0743 25.0978 37.0382C25.1313 37.0021 25.1479 36.9619 25.1479 36.9173V33.6341C25.2925 33.5564 25.4287 33.4925 25.5567 33.4426C25.6845 33.3925 25.8096 33.3675 25.932 33.3675C26.0599 33.3675 26.1642 33.38 26.2449 33.4051C26.3254 33.4301 26.388 33.4731 26.4325 33.5345C26.477 33.5954 26.5076 33.6759 26.5243 33.7757C26.5409 33.8758 26.5494 33.9981 26.5494 34.1425V36.9173C26.5494 36.9619 26.566 37.0021 26.5994 37.0382C26.6327 37.0743 26.6715 37.0923 26.7162 37.0923H27.7255C27.7699 37.0923 27.8102 37.0743 27.8464 37.038C27.8826 37.0019 27.9007 36.9615 27.9007 36.917ZM32.0047 36.1071V36.8502C32.0047 36.9114 31.9907 36.9546 31.963 36.9796C31.9351 37.0047 31.8906 37.0255 31.8294 37.0422C31.7127 37.0701 31.5611 37.0978 31.3749 37.1259C31.1885 37.1535 30.9703 37.1676 30.72 37.1676C30.1305 37.1676 29.6592 36.9867 29.3062 36.6246C28.953 36.2628 28.7765 35.7394 28.7765 35.0546V34.3531C28.7765 33.6682 28.953 33.1448 29.3062 32.7831C29.6592 32.421 30.1305 32.2401 30.72 32.2401C30.9703 32.2401 31.1885 32.254 31.3749 32.2817C31.5611 32.3098 31.7127 32.3375 31.8294 32.3653C31.8906 32.3819 31.9351 32.4029 31.963 32.4279C31.9907 32.453 32.0047 32.4962 32.0047 32.5574V33.3007C32.0047 33.3453 31.9893 33.38 31.9588 33.4051C31.9281 33.4301 31.8906 33.4426 31.8462 33.4426H31.8294C31.6737 33.4261 31.5251 33.4121 31.3832 33.401C31.2413 33.3901 31.0508 33.3842 30.8118 33.3842C30.7172 33.3842 30.6283 33.3996 30.5448 33.4301C30.4613 33.4608 30.3891 33.5137 30.328 33.5888C30.2666 33.6641 30.2181 33.7641 30.1819 33.8895C30.1457 34.0147 30.1277 34.1692 30.1277 34.3531V35.0546C30.1277 35.2382 30.1457 35.3927 30.1819 35.5181C30.2181 35.6433 30.2666 35.7436 30.328 35.8187C30.3891 35.8939 30.4613 35.9468 30.5448 35.9774C30.6283 36.008 30.7172 36.0233 30.8118 36.0233C31.0508 36.0233 31.2413 36.0178 31.3832 36.0067C31.5251 35.9956 31.6737 35.9815 31.8294 35.9649H31.8462C31.8906 35.9649 31.9281 35.9774 31.9588 36.0025C31.9893 36.0276 32.0047 36.0623 32.0047 36.1071ZM36.6346 34.4115C36.6346 34.0773 36.5885 33.7768 36.4966 33.5095C36.4046 33.2423 36.2709 33.0155 36.0954 32.8289C35.9199 32.6424 35.7025 32.4976 35.4436 32.3946C35.1844 32.2918 34.8848 32.2401 34.5449 32.2401C34.2051 32.2401 33.9056 32.2918 33.6465 32.3946C33.3873 32.4976 33.1685 32.6424 32.9903 32.8289C32.8119 33.0155 32.6768 33.2423 32.585 33.5095C32.4928 33.7768 32.4469 34.0773 32.4469 34.4115V34.9961C32.4469 35.3301 32.4928 35.6309 32.585 35.8981C32.6768 36.1653 32.8119 36.3922 32.9903 36.5788C33.1685 36.7654 33.3873 36.91 33.6465 37.013C33.9056 37.1159 34.2051 37.1676 34.5449 37.1676C34.8848 37.1676 35.1844 37.1159 35.4436 37.013C35.7025 36.91 35.9199 36.7654 36.0954 36.5788C36.2709 36.3922 36.4046 36.1653 36.4966 35.8981C36.5885 35.6309 36.6346 35.3301 36.6346 34.9961V34.4115ZM34.5449 36.0233C35.037 36.0233 35.2832 35.6809 35.2832 34.9961V34.4115C35.2832 33.7322 35.037 33.3925 34.5449 33.3925C34.3016 33.3925 34.1164 33.4774 33.9893 33.6472C33.8619 33.8172 33.7984 34.0719 33.7984 34.4115V34.9961C33.7984 35.3357 33.8619 35.5918 33.9893 35.7644C34.1164 35.9371 34.3016 36.0233 34.5449 36.0233ZM41.5976 36.917V34.1358C41.5976 33.8744 41.5765 33.6278 41.5351 33.3968C41.4933 33.166 41.4181 32.9653 41.3095 32.7954C41.2011 32.6256 41.0511 32.4905 40.8593 32.3904C40.6674 32.2902 40.4213 32.2401 40.1211 32.2401C39.8542 32.2401 39.6177 32.2723 39.4119 32.3369C39.2062 32.4014 38.9893 32.515 38.7613 32.6776V32.4752C38.7613 32.4305 38.7447 32.3911 38.7111 32.3575C38.678 32.3238 38.6389 32.3068 38.5945 32.3068H37.6602C37.6157 32.3068 37.5769 32.3235 37.5434 32.357C37.5102 32.3904 37.4934 32.4295 37.4934 32.4739V36.917C37.4934 36.9615 37.5114 37.0019 37.5476 37.038C37.5838 37.0743 37.624 37.0923 37.6687 37.0923H38.678C38.7224 37.0923 38.7613 37.0743 38.7948 37.0382C38.828 37.0021 38.8448 36.9619 38.8448 36.9173V33.6341C38.9893 33.5564 39.1256 33.4925 39.2534 33.4426C39.3815 33.3925 39.5065 33.3675 39.629 33.3675C39.7568 33.3675 39.8611 33.38 39.9416 33.4051C40.0222 33.4301 40.0849 33.4731 40.1294 33.5345C40.1739 33.5954 40.2044 33.6759 40.2212 33.7757C40.2378 33.8758 40.2462 33.9981 40.2462 34.1425V36.9173C40.2462 36.9619 40.2628 37.0021 40.2962 37.0382C40.3296 37.0743 40.3684 37.0923 40.413 37.0923H41.4223C41.4668 37.0923 41.5072 37.0743 41.5434 37.038C41.5794 37.0019 41.5976 36.9615 41.5976 36.917ZM45.2348 36.2893V36.9357C45.2348 37.0295 45.182 37.0848 45.0763 37.1011C44.9483 37.1233 44.8371 37.1398 44.7427 37.1509C44.6481 37.162 44.5395 37.1675 44.4174 37.1675C44.1905 37.1675 43.9901 37.1493 43.816 37.1133C43.6419 37.077 43.4966 37.0061 43.3805 36.9003C43.2646 36.7945 43.1761 36.6483 43.1153 36.4617C43.0547 36.2753 43.0242 36.0347 43.0242 35.7394V33.3175L42.357 33.2088C42.3123 33.1977 42.2721 33.1769 42.2359 33.1462C42.1997 33.1157 42.1817 33.0781 42.1817 33.0335V32.4822C42.1817 32.4378 42.1997 32.3974 42.2359 32.3611C42.2721 32.325 42.3123 32.3068 42.357 32.3068H43.0242V31.622C43.0242 31.5774 43.0409 31.5414 43.0739 31.5134C43.1068 31.4857 43.1458 31.4663 43.1902 31.455L44.2016 31.2798H44.2263C44.2705 31.2798 44.3065 31.2921 44.3343 31.3171C44.3618 31.3423 44.3757 31.3771 44.3757 31.4215V32.3068H45.0597C45.104 32.3068 45.143 32.3237 45.1764 32.3573C45.2099 32.3909 45.2265 32.4305 45.2265 32.4752V33.1573C45.2265 33.2024 45.2099 33.2416 45.1764 33.2752C45.143 33.3089 45.104 33.3257 45.0597 33.3257H44.3757V35.7561C44.3757 35.9231 44.3895 36.0304 44.4174 36.0776C44.4451 36.1249 44.5229 36.1485 44.6507 36.1485H45.0597C45.1764 36.1485 45.2348 36.1955 45.2348 36.2893ZM49.6891 33.9438C49.6891 33.6377 49.6433 33.3772 49.5514 33.1629C49.4597 32.9487 49.3305 32.7732 49.1637 32.6367C48.9969 32.5004 48.7925 32.4003 48.5505 32.3362C48.3087 32.2722 48.0376 32.2401 47.7373 32.2401C47.4589 32.2401 47.188 32.2597 46.924 32.2987C46.6597 32.3375 46.4497 32.3766 46.2942 32.4154C46.1882 32.4435 46.1357 32.5046 46.1357 32.5991V33.2756C46.1357 33.3314 46.1494 33.3705 46.1773 33.3925C46.2052 33.4149 46.2412 33.4261 46.2857 33.4261H46.3274C46.3943 33.4204 46.4776 33.4135 46.5777 33.4051C46.6779 33.3968 46.7905 33.3901 46.9155 33.3842C47.0408 33.3788 47.1714 33.3746 47.3077 33.3717C47.4438 33.3689 47.5788 33.3675 47.7121 33.3675C47.9068 33.3675 48.0598 33.4038 48.171 33.4761C48.2822 33.5486 48.3378 33.7045 48.3378 33.9438V34.2445H47.8874C47.1698 34.2445 46.6486 34.3572 46.3233 34.5827C45.998 34.8081 45.8353 35.1659 45.8353 35.6558V35.7313C45.8353 36.0039 45.8755 36.2321 45.9562 36.4158C46.0366 36.5996 46.144 36.7472 46.2774 36.8587C46.4109 36.9699 46.5623 37.0493 46.7321 37.0964C46.9017 37.1438 47.0782 37.1676 47.2618 37.1676C47.5121 37.1676 47.7274 37.1341 47.9082 37.0673C48.0889 37.0005 48.2597 36.9086 48.4213 36.7917V36.9253C48.4213 36.9699 48.4379 37.0089 48.4713 37.0422C48.5046 37.0756 48.5436 37.0923 48.5881 37.0923H49.5224C49.5668 37.0923 49.6057 37.0756 49.6392 37.0422C49.6724 37.0089 49.6891 36.9699 49.6891 36.9253V33.9438ZM48.0418 36.0942C48.1556 36.0581 48.2628 36.015 48.3629 35.9648V35.0462H47.8874C47.7428 35.0462 47.6233 35.0587 47.5287 35.0837C47.4341 35.1088 47.359 35.1465 47.3035 35.1966C47.2477 35.2465 47.2088 35.3107 47.1868 35.3886C47.1644 35.4666 47.1533 35.5556 47.1533 35.6558V35.7312C47.1533 35.9092 47.1963 36.0233 47.2826 36.0734C47.3688 36.1235 47.5008 36.1485 47.6789 36.1485C47.8067 36.1485 47.9274 36.1306 48.0418 36.0942ZM53.7933 36.8502V36.1071C53.7933 36.0623 53.7779 36.0276 53.7474 36.0025C53.7167 35.9774 53.6793 35.9649 53.6348 35.9649H53.6181C53.4624 35.9815 53.3136 35.9956 53.1718 36.0067C53.0301 36.0178 52.8395 36.0233 52.6005 36.0233C52.5057 36.0233 52.4167 36.008 52.3336 35.9774C52.2501 35.9468 52.1777 35.8939 52.1165 35.8187C52.0554 35.7436 52.0067 35.6433 51.9707 35.5181C51.9343 35.3927 51.9165 35.2382 51.9165 35.0546V34.3531C51.9165 34.1692 51.9343 34.0147 51.9707 33.8895C52.0067 33.7641 52.0554 33.6641 52.1165 33.5888C52.1777 33.5137 52.2501 33.4608 52.3336 33.4301C52.4167 33.3996 52.5057 33.3842 52.6005 33.3842C52.8395 33.3842 53.0301 33.3901 53.1718 33.401C53.3136 33.4121 53.4624 33.4261 53.6181 33.4426H53.6348C53.6793 33.4426 53.7167 33.4301 53.7474 33.4051C53.7779 33.38 53.7933 33.3453 53.7933 33.3007V32.5574C53.7933 32.4962 53.7794 32.453 53.7515 32.4279C53.7235 32.4029 53.6793 32.3819 53.6181 32.3653C53.5014 32.3375 53.3497 32.3098 53.1635 32.2817C52.9771 32.254 52.759 32.2401 52.5087 32.2401C51.9189 32.2401 51.4479 32.421 51.0947 32.7831C50.7415 33.1448 50.565 33.6682 50.565 34.3531V35.0546C50.565 35.7394 50.7415 36.2628 51.0947 36.6246C51.4479 36.9867 51.9189 37.1676 52.5087 37.1676C52.759 37.1676 52.9771 37.1535 53.1635 37.1259C53.3497 37.0978 53.5014 37.0701 53.6181 37.0422C53.6793 37.0255 53.7235 37.0047 53.7515 36.9796C53.7794 36.9546 53.7933 36.9114 53.7933 36.8502ZM57.3884 36.2893V36.9357C57.3884 37.0295 57.3354 37.0848 57.2299 37.1011C57.1019 37.1233 56.9907 37.1398 56.8963 37.1509C56.8016 37.162 56.6931 37.1675 56.571 37.1675C56.3441 37.1675 56.1437 37.1493 55.9696 37.1133C55.7954 37.077 55.6502 37.0061 55.5343 36.9003C55.4183 36.7945 55.3298 36.6483 55.269 36.4617C55.2083 36.2753 55.1778 36.0347 55.1778 35.7394V33.3175L54.5106 33.2088C54.4659 33.1977 54.4257 33.1769 54.3895 33.1462C54.3533 33.1157 54.3353 33.0781 54.3353 33.0335V32.4822C54.3353 32.4378 54.3533 32.3974 54.3895 32.3611C54.4257 32.325 54.4659 32.3068 54.5106 32.3068H55.1778V31.622C55.1778 31.5774 55.1945 31.5414 55.2276 31.5134C55.2605 31.4857 55.2993 31.4663 55.3436 31.455L56.355 31.2798H56.38C56.4241 31.2798 56.4602 31.2921 56.4875 31.3171C56.5154 31.3423 56.5293 31.3771 56.5293 31.4215V32.3068H57.2133C57.2577 32.3068 57.2966 32.3237 57.3301 32.3573C57.3633 32.3909 57.3801 32.4305 57.3801 32.4752V33.1573C57.3801 33.2024 57.3633 33.2416 57.3301 33.2752C57.2966 33.3089 57.2577 33.3257 57.2133 33.3257H56.5293V35.7561C56.5293 35.9231 56.5431 36.0304 56.571 36.0776C56.5987 36.1249 56.6765 36.1485 56.8045 36.1485H57.2133C57.3301 36.1485 57.3884 36.1955 57.3884 36.2893Z", fill: "#005697" }), jsx("path", { d: "M52.6187 14.7398H39.0664L37.6881 16.2935L33.2155 21.3349V21.3351L31.8372 22.8886H18.464L19.821 21.3153L20.4633 20.5706L21.8202 18.9973H15.6582C14.5325 18.9973 13.6113 19.943 13.6113 21.0987V25.5326C13.6113 26.6885 14.5325 27.6342 15.6582 27.6342H39.2492C40.3749 27.6342 41.9127 26.9318 42.6665 26.0733L46.235 22.0097L52.6187 14.7398Z", fill: "#005697" }), jsx("path", { d: "M55.3418 10C56.4676 10 57.3887 10.9457 57.3887 12.1015V16.5353C57.3887 17.691 56.4676 18.6368 55.3418 18.6368H49.1999L50.5697 17.0753H50.5699L51.2491 16.3012L52.6189 14.7398H39.0667L31.8375 22.8945H18.3813L28.0314 11.9701L28.3966 11.5566C29.153 10.7005 30.6929 10 31.8186 10H55.3418V10Z", fill: "#FBD500" })] }));
-};
+const CardImage_PaymentMethodFragment = t(`
+  fragment CardImage_PaymentMethodFragment on PaymentMethod {
+    metadata {
+      issuer
+      type
+    }
+  }
+`);
+function CardImage({ paymentMethod: maskedPaymentMethod, }) {
+    var _a, _b, _c, _d;
+    // Read fragment
+    const paymentMethod = readFragment(CardImage_PaymentMethodFragment, maskedPaymentMethod);
+    const issuer = (_b = (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    const type = (_d = (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase();
+    const className = 'w-12 h-8';
+    if (type === 'cashapp') {
+        return jsx(Cashapp$1, { className: className });
+    }
+    if (type === 'link') {
+        return jsx(Cashapp, { className: className });
+    }
+    switch (issuer) {
+        case 'visa':
+            return jsx(Visa, { className: className });
+        case 'mastercard':
+            return jsx(Mastercard, { className: className });
+        case 'amex':
+            return jsx(Amex, { className: className });
+        case 'jcb':
+            return jsx(JCB, { className: className });
+        case 'diners_club':
+        case 'diners':
+            return jsx(DinersClub, { className: className });
+        case 'discover':
+            return jsx(Discover, { className: className });
+        case 'unionpay':
+        case 'union_pay':
+        case 'china_union_pay':
+        case 'china_unionpay':
+            return jsx(ChinaUnionPay, { className: className });
+        case 'sepa':
+            return jsx(Sepa, { className: className });
+        case 'ideal':
+            return jsx(IDeal, { className: className });
+        case 'bancontact':
+            return jsx(Bancontact, { className: className });
+        default:
+            return jsx(CreditCard, { className: className });
+    }
+}
 
 const { Text: Text$z } = Typography;
-const MiniCreditCard = ({ className, buttons, hideDropdownMenu = false, hideDefaultTag = false, onClickRemove, paymentMethodData, onClickSetDefault, id, }) => {
+const MiniCreditCard_PaymentMethodFragment = t(`
+    fragment MiniCreditCard_PaymentMethodFragment on PaymentMethod {
+      ...CardImage_PaymentMethodFragment
+      isDefault
+      metadata {
+        issuer
+        type
+        identifier
+      }
+      id
+    }
+  `, [CardImage_PaymentMethodFragment]);
+function MiniCreditCard({ className, buttons, hideDropdownMenu = false, hideDefaultTag = false, onClickRemove, paymentMethod: maskedPaymentMethod, onClickSetDefault, id, }) {
+    var _a, _b, _c;
     const { darkMode } = useContext(BunnyContext);
     const { brandColor } = useBrand();
+    // Read fragment
+    const paymentMethod = readFragment(MiniCreditCard_PaymentMethodFragment, maskedPaymentMethod);
     const borderColor = useMemo(() => {
         return darkMode ? 'border-slate-700' : 'border-slate-200';
     }, [darkMode]);
     const backgroundColor = useMemo(() => {
         return darkMode ? 'var(--row-background-alternate)' : 'bg-slate-50';
     }, [darkMode]);
-    const isDefault = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.isDefault;
-    return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, children: paymentMethodData ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethodData: paymentMethodData }), jsx(Issuer, { paymentMethodData: paymentMethodData }), jsx(Identifier, { paymentMethodData: paymentMethodData }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })) : null }))] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethodData.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$z, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
-};
-const Identifier = ({ paymentMethodData }) => {
-    var _a, _b, _c;
-    if (((_a = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'link') {
+    const isDefault = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault;
+    return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, children: paymentMethod ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethod: paymentMethod }), jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), !hideDefaultTag && (jsx("div", { children: isDefault ? (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })) : null }))] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$z, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
+}
+const Identifier = ({ type, identifier, }) => {
+    if (type === 'link') {
         return null;
     }
-    if (((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'cashapp') {
+    if (type === 'cashapp') {
         return jsx(Text$z, { children: "Cashapp" });
     }
-    return (jsxs("div", { children: [jsx(Text$z, { className: "relative -top-0.5", children: "****" }), jsx(Text$z, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] }));
+    return (jsxs("div", { children: [jsx(Text$z, { className: "relative -top-0.5", children: "****" }), jsx(Text$z, { children: identifier })] }));
 };
-const Issuer = ({ paymentMethodData }) => {
-    var _a;
+const Issuer = ({ issuer }) => {
     const list = ['visa', 'link', 'jcb', 'discover', 'sepa'];
-    const issuer = (_a = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _a === void 0 ? void 0 : _a.issuer;
-    if (issuer.length == 0 || list.includes(issuer.toLowerCase()))
+    if (!issuer || issuer.length == 0 || list.includes(issuer === null || issuer === void 0 ? void 0 : issuer.toLowerCase()))
         return null;
     return jsx(Text$z, { children: lodashExports.capitalize(issuer) });
 };
@@ -19185,170 +18644,1065 @@ const DropdownMenu = ({ setDefault, remove, isDefault, id, }) => {
     ];
     return (jsx(Dropdown, { menu: { items }, trigger: ['click'], children: jsx("a", { onClick: e => e.preventDefault(), id: id, className: "cursor-pointer hover:bg-gray-100 rounded-md p-1", children: jsx(EllipsisOutlined, { style: { fontSize: '20px', color: brandColor } }) }) }));
 };
-const CardImage = ({ paymentMethodData }) => {
-    var _a, _b;
-    const issuer = (((_a = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _a === void 0 ? void 0 : _a.issuer) || '').toLowerCase();
-    const type = (((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.type) || '').toLowerCase();
-    const className = 'w-12 h-8';
-    if (type === 'cashapp') {
-        return jsx(Cashapp$1, { className: className });
-    }
-    if (type === 'link') {
-        return jsx(Cashapp, { className: className });
-    }
-    switch (issuer) {
-        case 'visa':
-            return jsx(Visa, { className: className });
-        case 'mastercard':
-            return jsx(Mastercard, { className: className });
-        case 'amex':
-            return jsx(Amex, { className: className });
-        case 'jcb':
-            return jsx(JCB, { className: className });
-        case 'diners_club':
-        case 'diners':
-            return jsx(DinersClub, { className: className });
-        case 'discover':
-            return jsx(Discover, { className: className });
-        case 'unionpay':
-        case 'union_pay':
-        case 'china_union_pay':
-        case 'china_unionpay':
-            return jsx(ChinaUnionPay, { className: className });
-        case 'sepa':
-            return jsx(Sepa, { className: className });
-        case 'ideal':
-            return jsx(IDeal, { className: className });
-        case 'bancontact':
-            return jsx(Bancontact, { className: className });
-        default:
-            return jsx(CreditCard, { className: className });
+
+const PaymentForm_PaymentMethodsFragment = t(`
+    fragment PaymentForm_PaymentMethodsFragment on PaymentMethod {
+      ...MiniCreditCard_PaymentMethodFragment
+      id
     }
-};
+  `, [MiniCreditCard_PaymentMethodFragment]);
+
+const QueryKeyFactory = {
+    accountPaymentMethodsKey: ({ accountId, entityId, token }) => [
+        'accountPaymentMethods',
+        ...(entityId ? [entityId] : []),
+        ...(accountId ? [accountId] : []),
+        ...(token ? [token] : []),
+    ],
+    billingDetailsKey: ({ entityId, token }) => [
+        'billingDetails',
+        ...(entityId ? [entityId] : []),
+        ...(token ? [token] : []),
+    ],
+    brandingKey: (token) => ['branding', ...(token ? [token] : [])],
+    calculatedPricesKey: ({ priceListId, quantity, token }) => [
+        'calculatedPrices',
+        ...(priceListId ? [priceListId] : []),
+        ...(quantity ? [quantity] : []),
+        ...(token ? [token] : []),
+    ],
+    createEventsKey: ({ entityId, pluralType, token }) => [
+        pluralType,
+        'events',
+        entityId,
+        ...(token ? [token] : []),
+    ],
+    createFormattedInvoiceKey: ({ id, token }) => [
+        'formattedInvoice',
+        id,
+        ...(token ? [token] : []),
+    ],
+    createInvoiceKey: ({ id, token }) => ['invoice', id, token],
+    createObjectKey: ({ id, objectName, token }) => [
+        objectName,
+        ...(id ? [id] : []),
+        ...(token ? [token] : []),
+    ],
+    createQuoteKey: ({ id, token }) => ['quote', id, token],
+    createQuoteTaxCalculateKey: ({ id, token }) => [
+        'quoteTaxCalculate',
+        ...(id ? [id] : []),
+        ...(token ? [token] : []),
+    ],
+    createTableKey: ({ filterString, pluralType, token }) => filterString ? [pluralType, 'list', filterString, token] : [pluralType, 'list', token],
+    currentUserKey: (token) => ['currentUser', ...(token ? [token] : [])],
+    editingQuoteKey: (token) => ['editingQuote', ...(token ? [token] : [])],
+    finixAchKey: (token) => ['finixAchKey', ...(token ? [token] : [])],
+    finixKey: (token) => ['finixKey', ...(token ? [token] : [])],
+    planChangeOptionsKey: ({ subscriptionId, productId, token }) => [
+        'planChangeOptions',
+        ...(subscriptionId ? [subscriptionId] : []),
+        ...(productId ? [productId] : []),
+        ...(token ? [token] : []),
+    ],
+    pluginsKey: (token) => ['plugins', ...(token ? [token] : [])],
+    portalPreviewDataKey: ({ productId, token }) => [
+        'portalPreviewData',
+        ...(productId ? [productId] : []),
+        ...(token ? [token] : []),
+    ],
+    taxationRequiredAccountFieldsKey: ({ entityId, token, }) => [
+        'taxationRequiredAccountFields',
+        ...(entityId ? [entityId] : []),
+        ...(token ? [token] : []),
+    ],
+    transactionsKey: ({ filter, token }) => [
+        'transactions',
+        ...(filter ? [filter] : []),
+        ...(token ? [token] : []),
+    ],
+    availableAddonPlansKey: ({ priceListId, token, }) => ['availableAddonPlans', priceListId, ...(token ? [token] : [])],
+    addonPlansKey: ({ priceListId, token }) => [
+        'addonPlans',
+        priceListId,
+        ...(token ? [token] : []),
+    ],
+    paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
+};
+
+const query$5 = t(`
+    query PaymentMethods($accountId: ID) {
+      paymentMethods(accountId: $accountId) {
+        nodes {
+          id
+          pluginId
+          accountId
+          expirationDate
+          plugin {
+            guid
+            id
+          }
+          state
+          metadata {
+            issuer
+            identifier
+            kind
+            description
+            icon
+            type
+          }
+          isDefault
+          ...PaymentForm_PaymentMethodsFragment
+        }
+      }
+    }
+  `, [PaymentForm_PaymentMethodsFragment]);
+const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
+    var _a, _b, _c;
+    const response = await execute(query$5, { apiHost, token }, { accountId });
+    // Filter out null values that are technically possible due to api schema
+    return (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.filter(paymentMethod => paymentMethod !== null)) !== null && _c !== void 0 ? _c : [];
+};
+const usePaymentMethod = ({ accountId, enabled = true, }) => {
+    // Context
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    // Query
+    const { data, isLoading } = useQuery({
+        queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+            accountId,
+            token,
+        }),
+        queryFn: () => getPaymentMethods({ apiHost, token, accountId }),
+        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+        enabled,
+    });
+    return {
+        paymentMethods: data,
+        defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(paymentMethod => paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault),
+        isLoading,
+    };
+};
+
+const mutation$5 = t(`
+  query PaymentPlugins($accountId: ID) {
+    paymentPlugins(accountId: $accountId) {
+      enabled
+      entities
+      guid
+      hidden
+      id
+      name
+      status
+      type
+      webhookEnabled
+      components
+    }
+  }
+`);
+// components is json, but will look like this
+// components: {
+//   frontend: {
+//     name: string;
+//     scenarios: string[];
+//   }[];
+//   backend: {
+//     name: string;
+//     access: string[];
+//   }[];
+// };
+const getPaymentPlugins = async ({ apiHost, token, accountId, }) => {
+    const response = await execute(mutation$5, { apiHost, token }, { accountId });
+    return response === null || response === void 0 ? void 0 : response.paymentPlugins;
+};
+const usePaymentPlugins = (accountId) => {
+    var _a;
+    // Context
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    // Query
+    const { data: paymentPlugins, isFetched } = useQuery({
+        queryKey: QueryKeyFactory.paymentPluginsKey(token),
+        queryFn: () => getPaymentPlugins({ apiHost, token, accountId }),
+        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+    });
+    // filter plugins
+    const filteredPaymentPlugins = (_a = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.filter(plugin => { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; })) !== null && _a !== void 0 ? _a : [];
+    return {
+        paymentPlugins: filteredPaymentPlugins,
+        isFetched,
+    };
+};
+
+var BreakpointNumbers;
+(function (BreakpointNumbers) {
+    BreakpointNumbers[BreakpointNumbers["xs"] = 480] = "xs";
+    BreakpointNumbers[BreakpointNumbers["sm"] = 768] = "sm";
+    BreakpointNumbers[BreakpointNumbers["md"] = 992] = "md";
+    BreakpointNumbers[BreakpointNumbers["lg"] = 1200] = "lg";
+    BreakpointNumbers[BreakpointNumbers["xl"] = 1400] = "xl";
+    BreakpointNumbers[BreakpointNumbers["xxl"] = 2000] = "xxl";
+})(BreakpointNumbers || (BreakpointNumbers = {}));
+const useIsMobile = (breakpointSize = BreakpointNumbers.sm) => {
+    const [isMobile, setIsMobile] = useState(() => window.innerWidth < breakpointSize);
+    useEffect(() => {
+        const handleResize = () => {
+            const newIsMobile = window.innerWidth < breakpointSize;
+            setIsMobile(prev => (prev !== newIsMobile ? newIsMobile : prev));
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [breakpointSize]);
+    return isMobile;
+};
+
+/**
+ * Creates a context and provider for a state value
+ * @param useValue - A function that returns the state value
+ * @returns A tuple containing the provider and the context value
+ * @example take a look at how this is used in the quoteIdContext in the QuantityDrawer
+ */
+const createStateContext = (useValue) => {
+    const StateContext = createContext(null);
+    const StateProvider = ({ initialValue, children, }) => jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
+    const useContextState = () => {
+        const value = useContext(StateContext);
+        if (value === null) {
+            throw new Error('Provider missing');
+        }
+        return value;
+    };
+    return [StateProvider, useContextState];
+};
+
+// Contexts
+const useSelectedPluginIdState = (id) => useState(id);
+const [SelectedPluginIdProvider, useSelectedPluginId] = createStateContext(useSelectedPluginIdState);
+const [SelectedPluginDataProvider, useSelectedPlugin] = createValueContext(); // TODO: type the response to PluginData
+/**
+ * SelectedPluginProvider manages the selected payment plugin state.
+ *
+ * Data Flow Pattern:
+ * - Children components should set the plugin ID using `setSelectedPluginId` from `useSelectedPluginId`
+ * - This provider then derives the `selectedPlugin` from that ID and provides it via `useSelectedPlugin`
+ * - This ensures that data flows only downward: children control the ID, and the provider computes and provides the data
+ */
+function SelectedPluginProvider({ children, accountId, }) {
+    return (jsx(SelectedPluginIdProvider, { initialValue: undefined, children: jsx(Content, { accountId: accountId, children: children }) }));
+}
+function Content({ children, accountId }) {
+    // Context
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { defaultPaymentMethod } = usePaymentMethod({ accountId });
+    const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
+    // Derived state
+    const selectedPlugin = useMemo(() => {
+        return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(plugin => plugin.id === selectedPluginId);
+    }, [paymentPlugins, selectedPluginId]);
+    useEffect(() => {
+        var _a, _b;
+        if (selectedPluginId) {
+            return;
+        }
+        if (defaultPaymentMethod) {
+            setSelectedPluginId((_a = defaultPaymentMethod.plugin) === null || _a === void 0 ? void 0 : _a.id);
+        }
+        else {
+            setSelectedPluginId((_b = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins[0]) === null || _b === void 0 ? void 0 : _b.id);
+        }
+    }, [defaultPaymentMethod, paymentPlugins]);
+    return jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
+}
+
+const DIGIT_REGEX = /\d/;
+const isDigit = (char) => DIGIT_REGEX.test(char);
+const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
+const isNavigation = (char) => [9, 37, 38, 39, 40].includes(char); // Tab, Arrows
+const isModifier = (char) => [16, 17, 18].includes(char); // Shift, Ctrl, Alt
+const isValidKey = (code) => isDeletion(code) || isNavigation(code) || isModifier(code);
+const isValidExpiry = (expiry) => {
+    const month = parseInt(expiry.substring(0, 2), 10);
+    const year = parseInt(expiry.substring(2, 4), 10) + 2000;
+    if (isNaN(month) || isNaN(year))
+        return false;
+    if (month < 1 || month > 12)
+        return false;
+    return true;
+};
+const isCardExpired = (expiry) => {
+    const month = parseInt(expiry.substring(0, 2), 10);
+    const year = parseInt(expiry.substring(2, 4), 10) + 2000;
+    const expiryDate = new Date(year, month, 1);
+    return expiryDate < new Date();
+};
+const formatCardExpiry = (cardExpiry) => {
+    if (cardExpiry.length <= 2)
+        return cardExpiry;
+    return cardExpiry.substring(0, 2) + '/' + cardExpiry.substring(2);
+};
+// removes spaces from a credit card number
+const unformatCardNumber = (cardNumber) => {
+    const cardNumberArray = cardNumber.split('');
+    const unformattedCardNumberArray = cardNumberArray.filter(character => character !== ' ');
+    return unformattedCardNumberArray.join('');
+};
+const storePayment = async (options, plugin, apiHost, accountId) => {
+    const { testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token } = options;
+    const response = await invokePlugin({
+        method: 'store_payment_method',
+        plugin,
+        payload: {
+            test_credit_card_number: testCreditCardNumber,
+            test_credit_card_cvc: testCreditCardCvc,
+            test_credit_card_expiration_date: testCreditCardExpirationDate,
+            account_id: accountId,
+        },
+        token,
+        apiHost,
+    });
+    if ((response === null || response === void 0 ? void 0 : response.status) !== 'success')
+        throw new Error(response === null || response === void 0 ? void 0 : response.message);
+    return response;
+};
+
+function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
+    const [isSaving, setIsSaving] = useState(false);
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const plugin = useSelectedPlugin();
+    const save = async (cardDetails) => {
+        try {
+            setIsSaving(true);
+            const response = await storePayment({
+                testCreditCardNumber: unformatCardNumber(cardDetails.number),
+                testCreditCardCvc: cardDetails.cvc.toString(),
+                testCreditCardExpirationDate: cardDetails.expiry,
+                token,
+            }, plugin, apiHost, accountId);
+            const paymentMethodId = response.payload[0].id;
+            if (response.status !== 'success')
+                throw new Error(response === null || response === void 0 ? void 0 : response.message);
+            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess({
+                pluginPaymentResponse: {
+                    plugin,
+                    token: response.token,
+                    savePaymentMethod: true,
+                },
+                savedPaymentMethodResponse: {
+                    paymentMethodId,
+                },
+            });
+            return paymentMethodId;
+        }
+        catch (error) {
+            onSaveError === null || onSaveError === void 0 ? void 0 : onSaveError(error);
+        }
+        finally {
+            setIsSaving(false);
+        }
+        return undefined;
+    };
+    return { save, isSaving };
+}
+
+const MUTATION$9 = `
+  mutation checkout(
+    $invoiceId: ID,
+    $quoteId: ID,
+    $paymentMethodId: ID,
+    $paymentMethodData: CheckoutPaymentMethodAttributes
+  ) {
+    checkout(
+      invoiceId: $invoiceId,
+      quoteId: $quoteId,
+      paymentMethodId: $paymentMethodId,
+      paymentMethodData: $paymentMethodData
+    ) {
+      invoice {
+        id
+        state
+        amount
+        amountDue
+      }
+      payment {
+        id
+        state
+        amount
+      }
+      paymentApplication {
+        id
+        invoiceId
+        paymentId
+      }
+      transaction {
+        id
+        amount
+      }
+    }
+  }
+`;
+const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData, token, apiHost, }) => {
+    const mutationVars = {
+        quoteId,
+        invoiceId,
+        paymentMethodId,
+    };
+    if (paymentMethodData) {
+        mutationVars.paymentMethodData = {
+            ...paymentMethodData,
+            metadata: paymentMethodData.metadata,
+        };
+    }
+    const response = await gqlRequest({
+        query: MUTATION$9,
+        token,
+        vars: mutationVars,
+        apiHost: apiHost,
+    });
+    const { errors } = response === null || response === void 0 ? void 0 : response.checkout;
+    if (errors)
+        throw errors;
+    return {
+        savePaymentMethod: paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.savePaymentMethod,
+    };
+};
+
+const getQuoteAmountDue = (quote) => {
+    return quote.amountDue || quote.amount;
+};
+
+const { useToken: useAntdToken } = theme$1;
+const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, accountId, }) => {
+    const response = await invokePlugin({
+        plugin,
+        method: 'store_payment_method',
+        payload: {
+            payment_method_id: paymentMethodId,
+            account_id: accountId,
+        },
+        token,
+        apiHost,
+    });
+    if (response.status !== 'success')
+        throw new Error(response.message || 'Unknown error');
+    return response;
+};
+const createSetupIntent = (plugin, apiHost, token, accountId) => {
+    return invokePlugin({
+        plugin,
+        method: 'create_setup_intent',
+        token,
+        apiHost,
+        payload: {
+            account_id: accountId,
+        },
+    });
+};
+const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodId, }) => {
+    const payload = {
+        quote_id: quote.id,
+        amount: quote.amount,
+        payment_method_id: paymentMethodId,
+    };
+    const response = await invokePlugin({
+        plugin,
+        method: 'create_payment_hold',
+        payload,
+        token,
+        apiHost,
+    });
+    if (response.status !== 'success')
+        throw new Error(response.message || 'Unknown error');
+    return response;
+};
+const fetchStripeKey = async (plugin, apiHost, token, accountId) => {
+    const response = await invokePlugin({
+        plugin,
+        method: 'retrieve_config',
+        token,
+        apiHost,
+        payload: {
+            account_id: accountId,
+        },
+    });
+    return response;
+};
+loadStripe.setLoadParameters({ advancedFraudSignals: false });
+const useStripePlugin = (plugin, currencyId, accountId) => {
+    // Context
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    // State
+    const [stripe, setStripe] = useState(null);
+    // Hooks
+    const showErrorNotification = useErrorNotification();
+    const { token: antdToken } = useAntdToken();
+    function getFontFamily() {
+        if (antdToken.fontFamily === 'Inter') {
+            return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+        }
+        return antdToken.fontFamily;
+    }
+    const fontFamily = getFontFamily();
+    const appearance = {
+        variables: {
+            fontFamily: fontFamily,
+            fontLineHeight: antdToken.lineHeight.toString(),
+            borderRadius: antdToken.borderRadius.toString() + 'px',
+            colorBackground: 'white',
+            colorPrimary: antdToken.colorPrimary,
+        },
+        rules: {
+            '.Input': {
+                fontFamily: fontFamily,
+            },
+            '.Label': {
+                fontFamily: fontFamily,
+            },
+        },
+    };
+    const options = {
+        mode: 'setup',
+        currency: currencyId,
+        setupFutureUsage: 'off_session',
+        appearance,
+    };
+    useEffect(() => {
+        var _a, _b;
+        if (!plugin)
+            return;
+        if (((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) !== 'StripePayment')
+            return;
+        fetchStripeKey(plugin, apiHost || '', token, accountId)
+            .then(({ payload }) => loadStripe(payload.publishable_key).then(setStripe))
+            .catch(error => {
+            console.error('Caught Error in fetching stripe key: ', error);
+            showErrorNotification(error.message, 'Unexpected Error fetching key');
+        });
+        // eslint-disable-next-line
+    }, [plugin, token]);
+    return { stripe, options };
+};
+
+function useApproveHold$1({ onApproveHoldSuccess, onApproveHoldError, }) {
+    // Hooks
+    const [isApprovingHold, setIsApprovingHold] = useState(false);
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const approveHold = async ({ plugin, quote, paymentMethodId, }) => {
+        try {
+            if (!token)
+                throw new Error("Token couldn't be retrieved");
+            setIsApprovingHold(true);
+            const response = await createPaymentHold({
+                quote,
+                plugin,
+                token,
+                apiHost,
+                paymentMethodId,
+            });
+            if (response.status !== 'success')
+                throw new Error(response === null || response === void 0 ? void 0 : response.message);
+            onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
+        }
+        catch (error) {
+            console.error(error);
+            onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error);
+        }
+        finally {
+            setIsApprovingHold(false);
+        }
+    };
+    return { approveHold, isApprovingHold };
+}
+
+// Used for Signup component. Signup needs a custom checkout function
+const [CustomCheckoutFunctionProvider, useCustomCheckoutFunction] = createValueContext();
+
+const showErrorNotification$8 = useErrorNotification();
+function usePay$1({ onPaymentSuccess, onPaymentError, quote, invoice, plugin, }) {
+    const { apiHost } = useContext(BunnyContext);
+    const customCheckoutFunction = useCustomCheckoutFunction();
+    const token = useToken();
+    const [isPaying, setIsPaying] = useState(false);
+    const pay = async (paymentMethodId) => {
+        try {
+            setIsPaying(true);
+            if (customCheckoutFunction) {
+                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                    showErrorNotification$8('Plugin ID is required');
+                    return;
+                }
+                const response = await customCheckoutFunction(plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(), paymentMethodId.toString());
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
+            else {
+                const response = await checkout({
+                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
+                    quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+                    paymentMethodId,
+                    token,
+                    apiHost,
+                });
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
+        }
+        catch (error) {
+            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
+        }
+        finally {
+            setIsPaying(false);
+        }
+    };
+    return { pay, isPaying };
+}
+
+function useApproveHold({ onApproveHoldSuccess, onApproveHoldError, }) {
+    // Hooks
+    const [isApprovingHold, setIsApprovingHold] = useState(false);
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const approveHold = async ({ plugin, quote, paymentMethodId, }) => {
+        try {
+            if (!token)
+                throw new Error("Token couldn't be retrieved");
+            setIsApprovingHold(true);
+            const response = await createPaymentHold({
+                quote,
+                plugin,
+                token,
+                apiHost,
+                paymentMethodId,
+            });
+            if (response.status !== 'success')
+                throw new Error(response === null || response === void 0 ? void 0 : response.message);
+            onApproveHoldSuccess === null || onApproveHoldSuccess === void 0 ? void 0 : onApproveHoldSuccess(response);
+        }
+        catch (error) {
+            console.error(error);
+            onApproveHoldError === null || onApproveHoldError === void 0 ? void 0 : onApproveHoldError(error);
+        }
+        finally {
+            setIsApprovingHold(false);
+        }
+    };
+    return { approveHold, isApprovingHold };
+}
+
+const showErrorNotification$7 = useErrorNotification();
+function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, plugin, }) {
+    // Hooks
+    const { apiHost } = useContext(BunnyContext);
+    const customCheckoutFunction = useCustomCheckoutFunction();
+    const token = useToken();
+    const [isPaying, setIsPaying] = useState(false);
+    const pay = async (paymentMethodId) => {
+        try {
+            setIsPaying(true);
+            if (customCheckoutFunction) {
+                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                    showErrorNotification$7('Plugin ID is required');
+                    return;
+                }
+                const response = await customCheckoutFunction(plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(), paymentMethodId.toString());
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
+            else {
+                const response = await checkout({
+                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
+                    quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
+                    paymentMethodId,
+                    token,
+                    apiHost,
+                });
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
+        }
+        catch (error) {
+            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
+        }
+        finally {
+            setIsPaying(false);
+        }
+    };
+    return { pay, isPaying };
+}
 
-// Automatically sets the default payment method if there is none currently set
-const useAutoSetDefaultPaymentMethod = ({ accountId, token, handleSetDefault, setDefaultPaymentMethodLoading, enabled = true, }) => {
-    const queryClient = useQueryClient();
+var PaymentType;
+(function (PaymentType) {
+    PaymentType["PAY"] = "PAY";
+    PaymentType["APPROVE_HOLD"] = "APPROVE_HOLD";
+    PaymentType["CHECKOUT_NO_PAYMENT"] = "CHECKOUT_NO_PAYMENT";
+})(PaymentType || (PaymentType = {}));
+
+const handleAllErrorFormats$2 = useAllErrorFormats$1();
+const showErrorNotification$6 = useErrorNotification();
+const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, accountId, }) => {
+    // Context
+    const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const { apiHost } = useContext(BunnyContext);
-    const { paymentMethods: storedPaymentMethods, defaultPaymentMethod } = usePaymentMethod({
-        accountId,
-        token,
-        apiHost,
+    const token = useToken();
+    const formattedAmountDue = () => {
+        const amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
+        const currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
+        return amountDue && currencyId ? formatCurrency$1(amountDue, currencyId).toString() : undefined;
+    };
+    // Payment hooks
+    const { pay: payDemoPay, isPaying: isPayingDemoPay } = usePay$1({
+        onPaymentSuccess,
+        onPaymentError: error => {
+            handleAllErrorFormats$2(error);
+        },
+        quote: quote,
+        invoice: invoice,
+        plugin,
     });
-    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
-    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
-        let cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory$1.default.accountPaymentMethodsKey({
-            accountId,
-            token,
-        }));
-        if (cachedPaymentMethods) {
-            for (const paymentMethod of cachedPaymentMethods) {
-                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
-            }
-            queryClient.setQueryData(QueryKeyFactory$1.default.accountPaymentMethodsKey({
-                accountId,
-                token,
-            }), cachedPaymentMethods);
+    const { pay: payStripe, isPaying: isPayingStripe } = usePay({
+        onPaymentSuccess,
+        onPaymentError: error => {
+            handleAllErrorFormats$2(error);
+        },
+        quote: quote,
+        invoice: invoice,
+        plugin,
+    });
+    // Approve hold hooks
+    const { approveHold: approveHoldStripe, isApprovingHold: isApprovingHoldStripe } = useApproveHold({
+        onApproveHoldSuccess: response => {
+            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
+        },
+        onApproveHoldError: error => {
+            handleAllErrorFormats$2(error);
+        },
+    });
+    const { approveHold: approveHoldDemoPay, isApprovingHold: isApprovingHoldDemoPay } = useApproveHold$1({
+        onApproveHoldSuccess: response => {
+            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
+        },
+        onApproveHoldError: error => {
+            handleAllErrorFormats$2(error);
+        },
+    });
+    // Mutations
+    const { mutate: checkoutNoPayment, isPending: isCheckingOutNoPayment } = useMutation({
+        mutationFn: async () => {
+            const amountDue = formattedAmountDue();
+            const paymentRequired = amountDue ? parseFloat(amountDue) > 0 : true;
+            if (!quote)
+                throw new Error('Quote is required');
+            if (paymentRequired)
+                throw new Error('Payment is required');
+            return await checkout({ quoteId: quote.id, token, apiHost });
+        },
+        onSuccess: () => {
+            onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess({});
+        },
+        onError: error => {
+            handleAllErrorFormats$2(error);
+        },
+    });
+    const handleApproveHold = async (overridePaymentMethodId) => {
+        var _a, _b, _c, _d;
+        const paymentMethodId = overridePaymentMethodId || (defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id);
+        if (!plugin)
+            return showErrorNotification$6('plugin is undefined');
+        if (!quote)
+            return showErrorNotification$6('quote is undefined');
+        if (!paymentMethodId)
+            return showErrorNotification$6('payment method id is undefined');
+        switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
+            case 'StripePayment':
+                await approveHoldStripe({
+                    plugin,
+                    quote,
+                    paymentMethodId,
+                });
+                break;
+            case 'DemoPayPayment':
+                await approveHoldDemoPay({
+                    plugin,
+                    quote,
+                    paymentMethodId,
+                });
+                break;
+            default:
+                showErrorNotification$6(`Payment holds are not supported by ${(_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d[0].name}`);
+                break;
         }
-    }
-    useEffect(() => {
-        if (setDefaultPaymentMethodLoading || !enabled)
+    };
+    const handlePayment = async (overridePaymentMethodId) => {
+        var _a, _b;
+        if (!plugin)
             return;
-        if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) > 0 && !defaultPaymentMethod) {
-            handleSetDefault(storedPaymentMethods[0]);
-            setDefaultPaymentMethodOnCache(storedPaymentMethods[0]);
+        switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
+            case 'StripePayment':
+                await payStripe(overridePaymentMethodId);
+                break;
+            case 'DemoPayPayment':
+                await payDemoPay(overridePaymentMethodId);
+                break;
         }
-    }, [
-        storedPaymentMethods,
-        defaultPaymentMethod,
-        handleSetDefault,
-        setDefaultPaymentMethodLoading,
-        queryClient,
-        accountId,
-        token,
-    ]);
+    };
+    return {
+        handleApproveHold,
+        handlePayment,
+        handleCheckoutNoPayment: checkoutNoPayment,
+        isPaying: isCheckingOutNoPayment ||
+            isPayingDemoPay ||
+            isPayingStripe ||
+            isApprovingHoldDemoPay ||
+            isApprovingHoldStripe,
+        paymentType: paymentHoldOptions.payToAccept ? PaymentType.APPROVE_HOLD : PaymentType.PAY,
+        formattedAmountDue: formattedAmountDue(),
+    };
 };
 
-const usePaymentMethodSelectorPlugin = ({ defaultPaymentMethod, defaultPaymentMethodPlugin, paymentMethodAllowedPlugins, }) => {
-    const [selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin] = useState();
-    useEffect(() => {
-        if (selectorPaymentMethodPlugin) {
-            return;
+function useSave({ onSaveSuccess, onSaveError, accountId, }) {
+    // Hooks
+    const [isSaving, setIsSaving] = useState(false);
+    const elements = useElements();
+    const stripe = useStripe();
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const selectedPlugin = useSelectedPlugin();
+    const createStripePaymentMethodId = async () => {
+        var _a, _b;
+        if (!stripe)
+            throw new Error('Form is not ready');
+        if (!elements)
+            throw new Error("Elements couldn't be retrieved");
+        // Trigger form validation and wallet collection
+        const { error: submitError } = await elements.submit();
+        if (submitError)
+            throw new Error(submitError.message);
+        const response = await createSetupIntent(selectedPlugin, apiHost, token, accountId);
+        if (response.status !== 'success')
+            throw new Error(response === null || response === void 0 ? void 0 : response.message);
+        const clientSecret = (_a = response === null || response === void 0 ? void 0 : response.payload) === null || _a === void 0 ? void 0 : _a.client_secret;
+        if (!clientSecret)
+            throw new Error('Error retrieving client secret');
+        // Confirm the SetupIntent using the details collected by the Payment Element
+        const intentResponse = await stripe.confirmSetup({
+            elements,
+            clientSecret,
+            redirect: 'if_required',
+            confirmParams: {
+                return_url: window.location.href,
+            },
+        });
+        // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
+        if (intentResponse.error)
+            throw new Error(intentResponse.error.message);
+        const paymentMethodId = (_b = intentResponse.setupIntent.payment_method) === null || _b === void 0 ? void 0 : _b.toString();
+        if (!paymentMethodId)
+            throw new Error("Payment method couldn't be retrieved");
+        return paymentMethodId;
+    };
+    const save = async () => {
+        try {
+            setIsSaving(true);
+            const paymentMethodId = await createStripePaymentMethodId();
+            const paymentMethodResponse = await createPaymentMethod({
+                paymentMethodId,
+                plugin: selectedPlugin,
+                token,
+                apiHost,
+                accountId,
+            });
+            const savedPaymentMethodId = paymentMethodResponse.payload[0].id;
+            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess({
+                pluginPaymentResponse: {
+                    savePaymentMethod: true,
+                    plugin: selectedPlugin,
+                    token: paymentMethodResponse.token,
+                },
+                savedPaymentMethodResponse: {
+                    paymentMethodId: savedPaymentMethodId,
+                },
+            });
+            return savedPaymentMethodId;
         }
-        if (defaultPaymentMethod) {
-            setSelectorPaymentMethodPlugin(defaultPaymentMethodPlugin);
+        catch (error) {
+            onSaveError === null || onSaveError === void 0 ? void 0 : onSaveError(error);
         }
-        else {
-            setSelectorPaymentMethodPlugin(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins[0]);
+        finally {
+            setIsSaving(false);
         }
-    }, [
-        defaultPaymentMethod,
-        defaultPaymentMethodPlugin,
-        paymentMethodAllowedPlugins,
-    ]);
-    return {
-        selectorPaymentMethodPlugin,
-        setSelectorPaymentMethodPlugin,
+        return undefined;
     };
-};
+    return { save, createStripePaymentMethodId, isSaving };
+}
 
-const SavePaymentMethodFooter = ({ isSaving, onSave, noPadding, }) => {
-    const isMobile = useIsMobile();
-    const { onClickCancel } = useContext(PaymentContext);
-    return (jsxs("div", { className: `bunny-flex bunny-justify-end bunny-gap-2 ${noPadding ? "" : "pt-6"}`, children: [onClickCancel && (jsx(Button, { className: "bunny-w-full", size: isMobile ? "large" : "middle", onClick: () => onClickCancel(), children: "Cancel" })), jsx(Button, { className: "bunny-w-full", disabled: isSaving, onClick: onSave, size: isMobile ? "large" : "middle", type: "primary", children: isSaving ? "Saving" : "Save" })] }));
-};
+const useShowPaymentDetailsState = (isOpen = false) => useState(isOpen);
+const [ShowPaymentDetailsProvider, useShowPaymentDetails] = createStateContext(useShowPaymentDetailsState);
 
-const DIGIT_REGEX = /\d/;
-const isDigit = (char) => DIGIT_REGEX.test(char);
-const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
-const isNavigation = (char) => [9, 37, 38, 39, 40].includes(char); // Tab, Arrows
-const isModifier = (char) => [16, 17, 18].includes(char); // Shift, Ctrl, Alt
-const isValidKey = (code) => isDeletion(code) || isNavigation(code) || isModifier(code);
-const isValidExpiry = (expiry) => {
-    const month = parseInt(expiry.substring(0, 2), 10);
-    const year = parseInt(expiry.substring(2, 4), 10) + 2000;
-    if (isNaN(month) || isNaN(year))
-        return false;
-    if (month < 1 || month > 12)
-        return false;
-    return true;
-};
-const isCardExpired = (expiry) => {
-    const month = parseInt(expiry.substring(0, 2), 10);
-    const year = parseInt(expiry.substring(2, 4), 10) + 2000;
-    const expiryDate = new Date(year, month, 1);
-    return expiryDate < new Date();
-};
-const formatCardExpiry = (cardExpiry) => {
-    if (cardExpiry.length <= 2)
-        return cardExpiry;
-    return cardExpiry.substring(0, 2) + '/' + cardExpiry.substring(2);
-};
-// removes spaces from a credit card number
-const unformatCardNumber = (cardNumber) => {
-    const cardNumberArray = cardNumber.split('');
-    const unformattedCardNumberArray = cardNumberArray.filter(character => character !== ' ');
-    return unformattedCardNumberArray.join('');
-};
-const storePayment = async (options, plugin, apiHost, accountId) => {
-    const { testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token } = options;
-    const response = await invokePlugin({
-        method: 'store_payment_method',
-        plugin,
-        payload: {
-            test_credit_card_number: testCreditCardNumber,
-            test_credit_card_cvc: testCreditCardCvc,
-            test_credit_card_expiration_date: testCreditCardExpirationDate,
-            account_id: accountId,
+const handleAllErrorFormats$1 = useAllErrorFormats$1();
+const showErrorNotification$5 = useErrorNotification();
+// Contexts
+const [AmountDueProvider, useAmountDue] = createValueContext();
+const [PaymentTypeProvider, usePaymentType] = createValueContext();
+const [IsPayingProvider, useIsPaying] = createValueContext();
+const [HandlePaymentFormSubmitProvider, useHandlePaymentFormSubmit] = createValueContext();
+const [IsSavingProvider, useIsSaving] = createValueContext();
+// Used for Signup component. Signup uses an apiClient token which api can't infer an account from, so accountId must be used
+const [AccountIdProvider, useAccountId] = createValueContext();
+function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldOptions, onSavePaymentMethod, }) {
+    var _a, _b, _c;
+    // Context
+    const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
+    const selectedPlugin = useSelectedPlugin();
+    // Hooks
+    const queryClient = useQueryClient();
+    const token = useToken();
+    const { handlePayment, handleApproveHold, handleCheckoutNoPayment, isPaying, paymentType, formattedAmountDue, } = useHandlePayment({
+        quote,
+        invoice,
+        onPaymentSuccess: (response) => {
+            // TODO: type the response to PaymentSuccessResponse
+            // Hide payment method selector and form
+            setShowPaymentMethodForm(false);
+            onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
         },
-        token,
-        apiHost,
+        onPaymentHoldSuccess,
+        plugin: selectedPlugin, // TODO: type the response to PluginData
+        paymentHoldOptions,
+        accountId,
     });
-    if ((response === null || response === void 0 ? void 0 : response.status) !== 'success')
-        throw new Error(response === null || response === void 0 ? void 0 : response.message);
-    return response;
+    const { defaultPaymentMethod } = usePaymentMethod({ accountId });
+    const { save: saveDemoPay, isSaving: isSavingDemoPay } = useSave$1({
+        onSaveSuccess: (response) => {
+            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+                    accountId,
+                    token,
+                }),
+            });
+            setShowPaymentMethodForm(false);
+        },
+        onSaveError: handleAllErrorFormats$1,
+        accountId,
+    });
+    const { save: saveStripe, isSaving: isSavingStripe } = useSave({
+        onSaveSuccess: async (response) => {
+            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+                    accountId,
+                    token,
+                }),
+            });
+            setShowPaymentMethodForm(false);
+        },
+        onSaveError: handleAllErrorFormats$1,
+        accountId,
+    });
+    const pluginName = (_c = (_b = (_a = selectedPlugin === null || selectedPlugin === void 0 ? void 0 : selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name;
+    const handleSave = async (demoPayCardDetails) => {
+        var _a, _b;
+        if (pluginName === 'StripePayment') {
+            return await saveStripe();
+        }
+        else if (pluginName === 'DemoPayPayment') {
+            return await saveDemoPay(demoPayCardDetails);
+        }
+        else {
+            showErrorNotification$5(`Can not find form for plugin ${(_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name}`);
+            return undefined;
+        }
+    };
+    const handleApproveHoldFlow = async (savedPaymentMethodId) => {
+        var _a, _b;
+        if (pluginName === 'StripePayment') {
+            await handleApproveHold(savedPaymentMethodId);
+        }
+        else if (pluginName === 'DemoPayPayment') {
+            await handleApproveHold(savedPaymentMethodId);
+        }
+        else {
+            showErrorNotification$5(`Can not find form for plugin ${(_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name}`);
+        }
+    };
+    const handlePaymentFormSubmit = async (demoPayCardDetails) => {
+        if (paymentType === PaymentType.CHECKOUT_NO_PAYMENT) {
+            handleCheckoutNoPayment();
+            return;
+        }
+        if (paymentType === PaymentType.APPROVE_HOLD) {
+            // If payment method form is shown, save payment method first, then approve hold
+            const savedPaymentMethodId = showPaymentMethodForm
+                ? await handleSave(demoPayCardDetails)
+                : undefined;
+            await handleApproveHoldFlow(savedPaymentMethodId);
+            return;
+        }
+        if (formattedAmountDue === undefined) {
+            // If amount due is undefined, we need to save a payment method only
+            await handleSave(demoPayCardDetails);
+            return;
+        }
+        if (paymentType === PaymentType.PAY) {
+            if (showPaymentMethodForm) {
+                // If paying and showing payment method form, save payment method first, then pay (1 click for user convenience)
+                const savedPaymentMethodId = await handleSave(demoPayCardDetails);
+                if (savedPaymentMethodId) {
+                    await handlePayment(savedPaymentMethodId);
+                }
+            }
+            else {
+                if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
+                    showErrorNotification$5('Default payment method ID is undefined');
+                    return;
+                }
+                await handlePayment(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id);
+            }
+            return;
+        }
+    };
+    const providers = [
+        [AmountDueProvider, { value: formattedAmountDue }],
+        [PaymentTypeProvider, { value: paymentType }],
+        [IsPayingProvider, { value: isPaying }],
+        [HandlePaymentFormSubmitProvider, { value: handlePaymentFormSubmit }],
+        [IsSavingProvider, { value: isSavingDemoPay || isSavingStripe }],
+        [AccountIdProvider, { value: accountId }],
+    ];
+    return (jsx(Fragment, { children: providers.reduceRight((acc, [Provider, props]) => createElement(Provider, props, acc), children) }));
+}
+function StripeWrapper({ children, currencyId, accountId, }) {
+    const plugin = useSelectedPlugin();
+    const { stripe, options } = useStripePlugin(plugin, currencyId, accountId);
+    return (jsx(Elements, { options: options, stripe: stripe, children: children }));
+}
+
+const CheckoutFooter = () => {
+    const isMobile = useIsMobile();
+    const paymentType = usePaymentType();
+    const isPaying = useIsPaying();
+    const formattedAmountDue = useAmountDue();
+    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
+    const buttonText = paymentType === PaymentType.APPROVE_HOLD ? 'Approve hold for' : 'Pay';
+    const isPayingButtonText = paymentType === PaymentType.APPROVE_HOLD ? 'Approving hold for' : 'Paying';
+    return (jsx(Button, { className: "bunny-w-full", disabled: isPaying, onClick: () => onPaymentFormSubmit(), size: isMobile ? 'large' : 'middle', type: "primary", children: `${isPaying ? isPayingButtonText : buttonText} ${formattedAmountDue}` }));
 };
 
+function PaymentMethodFooter({ onSubmit, noPadding, }) {
+    const isPaying = useIsPaying();
+    const isSaving = useIsSaving();
+    const buttonText = useSubmitButtonText();
+    const isMobile = useIsMobile$1();
+    const [, setShowPaymentMethodForm] = useShowPaymentDetails();
+    return (jsxs("div", { className: `bunny-flex bunny-justify-end bunny-gap-2 ${noPadding ? '' : 'pt-6'}`, children: [jsx(Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }), jsx(Button, { className: "bunny-w-full", disabled: isSaving || isPaying, loading: isSaving || isPaying, onClick: onSubmit, size: isMobile ? 'large' : 'middle', type: "primary", children: buttonText })] }));
+}
+function useSubmitButtonText() {
+    const amountDue = useAmountDue();
+    const paymentType = usePaymentType();
+    const payableAvailable = amountDue !== undefined;
+    const paymentTypeText = paymentType === PaymentType.APPROVE_HOLD ? 'approve hold for' : 'pay';
+    const buttonTextPrefix = payableAvailable ? paymentTypeText : 'save';
+    return lodashExports.capitalize(buttonTextPrefix) + ' ' + (amountDue !== null && amountDue !== void 0 ? amountDue : '');
+}
+
 const DemoPayCardCvc = ({ autoFocus, onChange, placeholder, value, }) => {
     const onKeyPress = (event) => {
         if (!isDigit(event.key) && !isValidKey(event.keyCode))
@@ -19387,73 +19741,27 @@ const DemoPayExpiry = ({ autoFocus, onChange, placeholder, value, }) => {
     return (jsx("div", { className: "bunny-grow", children: jsx(Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) }));
 };
 
-function useSave$1({ onSaveSuccess, onSaveError, token, apiHost, accountId, }) {
-    const [isSaving, setIsSaving] = useState(false);
-    const save = async ({ cardDetails, plugin, savePaymentMethod, }) => {
-        try {
-            setIsSaving(true);
-            const response = await storePayment({
-                testCreditCardNumber: unformatCardNumber(cardDetails.number),
-                testCreditCardCvc: cardDetails.cvc.toString(),
-                testCreditCardExpirationDate: cardDetails.expiry,
-                token,
-            }, plugin, apiHost, accountId);
-            const paymentMethodId = response.payload[0].id;
-            if (response.status !== 'success')
-                throw new Error(response === null || response === void 0 ? void 0 : response.message);
-            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess({
-                pluginPaymentResponse: {
-                    plugin,
-                    token: response.token,
-                    savePaymentMethod,
-                },
-                savedPaymentMethodResponse: {
-                    paymentMethodId,
-                },
-            });
-        }
-        catch (error) {
-            onSaveError === null || onSaveError === void 0 ? void 0 : onSaveError(error);
-        }
-        finally {
-            setIsSaving(false);
-        }
-    };
-    return { save, isSaving };
-}
-
 const { Text: Text$y } = Typography;
+const handleAllErrorFormats = useAllErrorFormats$1();
 const TEST_CARD = '4242424242424242';
-const DemoPayForm = ({ onFail, onSavePaymentMethod, plugin, }) => {
+const DemoPayForm = () => {
     // Context
-    const { token, apiHost, darkMode } = useContext(BunnyContext);
-    const { accountId } = useContext(PaymentContext);
-    // Hooks
-    const { save, isSaving } = useSave$1({
-        onSaveSuccess: onSavePaymentMethod,
-        onSaveError: onFail,
-        token,
-        apiHost,
-        accountId,
-    });
+    const { darkMode } = useContext(BunnyContext);
+    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
     const [cardDetails, setCardDetails] = useState({
         number: '4242424242424242',
         expiry: '',
         cvc: '',
     });
-    const onSave = async () => {
+    function onSubmit() {
         try {
             validateCardDetails();
-            await save({
-                cardDetails,
-                plugin,
-                savePaymentMethod: false,
-            });
+            onPaymentFormSubmit(cardDetails);
         }
         catch (error) {
-            onFail(error);
+            handleAllErrorFormats(error);
         }
-    };
+    }
     function validateCardDetails() {
         if (cardDetails.number !== TEST_CARD)
             throw new Error('Only the card number 4242 4242 4242 4242 will be accepted.');
@@ -19473,7 +19781,7 @@ const DemoPayForm = ({ onFail, onSavePaymentMethod, plugin, }) => {
     const onCardCvcChange = (cvc) => {
         setCardDetails({ ...cardDetails, cvc });
     };
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$y, { children: "DemoPay is for testing only." }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] }));
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$y, { children: "DemoPay is for testing only." }), jsx(PaymentMethodFooter, { onSubmit: onSubmit })] }));
 };
 const StyledInputs = defaultStyled.div `
   .ant-input {
@@ -19484,92 +19792,12 @@ const StyledInputs = defaultStyled.div `
   }
 `;
 
-function useSave({ onSaveSuccess, onSaveError, }) {
-    // Hooks
-    const [isSaving, setIsSaving] = useState(false);
-    const elements = useElements();
-    const stripe = useStripe();
-    const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
-    const { accountId } = useContext(PaymentContext);
-    const save = async ({ plugin }) => {
-        var _a, _b;
-        try {
-            if (!stripe)
-                throw new Error('Form is not ready');
-            if (!elements)
-                throw new Error("Elements couldn't be retrieved");
-            setIsSaving(true);
-            // Trigger form validation and wallet collection
-            const { error: submitError } = await elements.submit();
-            if (submitError)
-                throw new Error(submitError.message);
-            const response = await createSetupIntent(plugin, apiHost, token, accountId);
-            if (response.status !== 'success')
-                throw new Error(response === null || response === void 0 ? void 0 : response.message);
-            const clientSecret = (_a = response === null || response === void 0 ? void 0 : response.payload) === null || _a === void 0 ? void 0 : _a.client_secret;
-            if (!clientSecret)
-                throw new Error('Error retrieving client secret');
-            // Confirm the SetupIntent using the details collected by the Payment Element
-            const intentResponse = await stripe.confirmSetup({
-                elements,
-                clientSecret,
-                redirect: 'if_required',
-                confirmParams: {
-                    return_url: window.location.href,
-                },
-            });
-            // See https://stripe.com/docs/payments/save-during-payment?platform=web#web-submit-payment
-            if (intentResponse.error)
-                throw new Error(intentResponse.error.message);
-            const paymentMethodId = (_b = intentResponse.setupIntent.payment_method) === null || _b === void 0 ? void 0 : _b.toString();
-            if (!paymentMethodId)
-                throw new Error("Payment method couldn't be retrieved");
-            const paymentMethodResponse = await createPaymentMethod({
-                paymentMethodId,
-                plugin,
-                token,
-                apiHost,
-                accountId,
-            });
-            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess({
-                pluginPaymentResponse: {
-                    savePaymentMethod: true,
-                    plugin,
-                    token: paymentMethodResponse.token,
-                },
-                savedPaymentMethodResponse: {
-                    paymentMethodId: paymentMethodResponse.payload[0].id,
-                },
-            });
-        }
-        catch (error) {
-            onSaveError === null || onSaveError === void 0 ? void 0 : onSaveError(error);
-        }
-        finally {
-            setIsSaving(false);
-        }
-    };
-    return { save, isSaving };
-}
-
-const PaymentMethodForm = ({ plugin, onFail, onSavePaymentMethod, }) => {
+const StripeForm = () => {
+    // Context
+    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
+    // State
     const [isIdealWarningOpen, setIsIdealWarningOpen] = useState(false);
     const idealWarningHasShown = useRef(false);
-    // Hooks
-    const { save, isSaving } = useSave({
-        onSaveSuccess: onSavePaymentMethod,
-        onSaveError: onFail,
-    });
-    // Handlers
-    const onSubmit = async () => {
-        try {
-            await save({ plugin });
-        }
-        catch (error) {
-            onFail(error);
-        }
-    };
     const onChange = (event) => {
         if (event.value.type === 'ideal' && !idealWarningHasShown.current) {
             idealWarningHasShown.current = true;
@@ -19578,26 +19806,22 @@ const PaymentMethodForm = ({ plugin, onFail, onSavePaymentMethod, }) => {
     };
     return (jsxs("form", { children: [jsx(PaymentElement, { options: {
                     layout: { type: 'accordion' },
-                }, onChange: onChange }), jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSubmit }), jsx(IdealWarningModal, { isOpen: isIdealWarningOpen, onClose: () => setIsIdealWarningOpen(false) })] }));
+                }, onChange: onChange }), jsx(PaymentMethodFooter, { onSubmit: onPaymentFormSubmit }), jsx(IdealWarningModal, { isOpen: isIdealWarningOpen, onClose: () => setIsIdealWarningOpen(false) })] }));
 };
 function IdealWarningModal({ isOpen, onClose }) {
     return (jsx(Modal, { open: isOpen, onCancel: onClose, footer: jsx(Button, { type: "primary", onClick: onClose, children: "Ok" }), children: jsx("div", { className: "bunny-p-4", children: "iDEAL will charge a 1 cent fee when storing this payment method. You will be refunded later." }) }));
 }
 
-// This is just a wrapper to fetch the stripe object and pass it to the form
-const StripeForm = ({ plugin, onFail, onSavePaymentMethod, }) => {
-    return (jsx(PaymentMethodForm, { plugin: plugin, onFail: onFail, onSavePaymentMethod: onSavePaymentMethod }));
-};
-
-const PaymentMethodDetails = ({ onFail, plugin, onSavePaymentMethod, }) => {
+const PaymentMethodDetails = () => {
     var _a, _b;
-    switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
+    const selectedPlugin = useSelectedPlugin();
+    switch ((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
         case 'StripePayment':
-            return (jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
+            return jsx(StripeForm, {});
         case 'DemoPayPayment':
-            return (jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: response => onSavePaymentMethod(response), plugin: plugin }));
+            return jsx(DemoPayForm, {});
         default:
-            console.warn('Can not find form for plugin', plugin);
+            console.warn('Can not find form for plugin', selectedPlugin);
             return jsx(Fragment, {});
     }
 };
@@ -19607,17 +19831,20 @@ const CardIcon = ({ className }) => {
 };
 
 const { Text: Text$x } = Typography;
-const PaymentMethodSelector = ({ paymentMethodAllowedPlugins, onSelect, value, }) => {
-    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map((plugin, index) => (jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index))) }));
+const PaymentMethodSelector = () => {
+    const accountId = useAccountId();
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
+    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin, index) => (jsx(PaymentOption, { name: plugin.name, onClick: setSelectedPluginId, paymentPluginId: plugin.id, selected: selectedPluginId === plugin.id }, index))) }));
 };
-const PaymentOption = ({ selected, paymentPlugin, onClick, name, }) => {
+const PaymentOption = ({ selected, paymentPluginId, onClick, name, }) => {
     const { brandColor } = useBrand();
     const { darkMode } = useContext(BunnyContext);
     const isAch = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('ach');
     const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
     return (jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
             ? `var(--row-background-dark) border-gray-500`
-            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPlugin), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$x, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
+            : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$x, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
 };
 const PaymentOptionContainer = defaultStyled.div `
   transition: border 0.3s ease;
@@ -19632,15 +19859,117 @@ const PaymentOptionContainer = defaultStyled.div `
   }
 `;
 
-function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod, onError) {
+// Automatically sets the default payment method if there is none currently set
+const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMethodLoading, enabled = true, }) => {
+    const accountId = useAccountId();
+    const token = useToken();
+    const queryClient = useQueryClient();
+    const { paymentMethods, defaultPaymentMethod } = usePaymentMethod({
+        accountId,
+    });
+    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
+    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
+        let cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory$1.default.accountPaymentMethodsKey({
+            accountId,
+            token,
+        }));
+        if (cachedPaymentMethods) {
+            for (const paymentMethod of cachedPaymentMethods) {
+                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
+            }
+            queryClient.setQueryData(QueryKeyFactory$1.default.accountPaymentMethodsKey({
+                accountId,
+                token,
+            }), cachedPaymentMethods);
+        }
+    }
+    useEffect(() => {
+        var _a;
+        if (setDefaultPaymentMethodLoading || !enabled)
+            return;
+        if ((paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) && (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) > 0 && !defaultPaymentMethod) {
+            handleSetDefault((_a = paymentMethods[0]) === null || _a === void 0 ? void 0 : _a.id);
+            setDefaultPaymentMethodOnCache(paymentMethods[0]);
+        }
+    }, [
+        paymentMethods,
+        defaultPaymentMethod,
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        queryClient,
+        accountId,
+        token,
+    ]);
+};
+
+const query$4 = t(`
+  query GetCurrentUserData {
+    company {
+      name
+    }
+    currentUser {
+      account {
+        billingCountry
+        currencyId
+        id
+      }
+      authObjectName
+      payload {
+        returnUrl
+      }
+      privacyUrl
+      termsUrl
+      entityId
+    }
+  }
+`);
+const getCurrentUserData = async ({ token, apiHost }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const response = await execute(query$4, { apiHost, token }, {});
+    return {
+        authObjectName: (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.authObjectName,
+        account: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.account,
+        companyName: (_c = response === null || response === void 0 ? void 0 : response.company) === null || _c === void 0 ? void 0 : _c.name,
+        returnUrl: (_e = (_d = response === null || response === void 0 ? void 0 : response.currentUser) === null || _d === void 0 ? void 0 : _d.payload) === null || _e === void 0 ? void 0 : _e.returnUrl,
+        privacyUrl: (_f = response === null || response === void 0 ? void 0 : response.currentUser) === null || _f === void 0 ? void 0 : _f.privacyUrl,
+        termsUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.termsUrl,
+        entityId: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.entityId,
+    };
+};
+
+const useCurrentUserData = (token) => {
+    const { apiHost } = useContext(BunnyContext);
+    const { data: currentUserData, isLoading: isCurrentUserDataLoading } = useQuery({
+        queryKey: QueryKeyFactory$1.default.currentUserKey(token),
+        queryFn: () => getCurrentUserData({ token, apiHost }),
+        enabled: Boolean(token),
+    });
+    const currentUser = currentUserData || {};
+    return { currentUser, isCurrentUserDataLoading };
+};
+
+function usePayableCurrency({ payableCurrencyId }) {
+    const token = useToken();
+    const { currentUser, isCurrentUserDataLoading } = useCurrentUserData(token);
+    const account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
+    const accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
+    const currencyId = useMemo(() => { var _a; return (_a = (accountCurrencyId || payableCurrencyId)) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, payableCurrencyId]);
+    return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
+}
+
+function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
     const queryClient = useQueryClient();
     const showErrorNotification = useErrorNotification();
     const showSuccessNotification = useSuccessNotification();
+    const accountId = useAccountId();
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const token = useToken();
+    const { apiHost } = useContext(BunnyContext);
     const removePaymentMethod = useCallback(async (data) => {
         const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
         if (data && plugin) {
             await invokePlugin({
-                plugin,
+                plugin: plugin, // TODO: type the plugin
                 method: 'remove_payment_method',
                 payload: {
                     payment_method_id: data.id,
@@ -19664,34 +19993,48 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRem
             });
         }
         else {
-            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
+            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin) => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
             onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
         }
     }, [paymentPlugins, token, apiHost, queryClient]);
     return removePaymentMethod;
 }
 
-function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, onError, onSuccess) {
-    const queryClient = useQueryClient();
+function useSetDefaultPaymentMethod(onError, onSuccess) {
+    // Context
+    const accountId = useAccountId();
+    const token = useToken();
+    const { apiHost } = useContext(BunnyContext);
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { paymentMethods } = usePaymentMethod({ accountId });
+    // Hooks
     const showErrorNotification = useErrorNotification();
     const showSuccessNotification = useSuccessNotification();
+    const queryClient = useQueryClient();
+    // State
     const [loading, setLoading] = useState(false);
-    const setDefaultPaymentMethod = useCallback(async (data) => {
-        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
-        if (data && plugin) {
+    const setDefaultPaymentMethod = useCallback(async (paymentMethodId) => {
+        const paymentMethod = paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.find(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) === paymentMethodId);
+        if (paymentMethod === undefined) {
+            showErrorNotification('Payment method not found', 'Error setting default payment method');
+            return;
+        }
+        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.plugin) === null || _a === void 0 ? void 0 : _a.id); }); // TODO: type the response to PluginData
+        if (plugin) {
             setLoading(true);
             await invokePlugin({
-                plugin,
+                plugin: plugin,
                 method: 'assign_default_payment_method',
                 payload: {
-                    payment_method_id: data.id,
+                    payment_method_id: paymentMethod.id,
                     account_id: accountId,
                 },
                 token,
                 apiHost,
             })
                 .then(() => {
-                showSuccessNotification(`Payment method ${data.metadata.identifier} was set as default`, 'Success');
+                var _a;
+                showSuccessNotification(`Payment method ${(_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.identifier} was set as default`, 'Success');
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
                 queryClient.invalidateQueries({
                     queryKey: QueryKeyFactory$1.default.accountPaymentMethodsKey({
@@ -19709,7 +20052,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
             });
         }
         else {
-            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
+            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin) => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
             onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
         }
     }, [paymentPlugins, token, apiHost, queryClient]);
@@ -19717,83 +20060,53 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
 }
 
 const showErrorNotification$4 = useErrorNotification();
-const PaymentForm = ({ invoice, onFail, onPaymentSuccess, onPaymentHoldSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) => {
-    // Local state
-    const [showPaymentMethodForm, setShowPaymentMethodForm] = useState(false);
-    // Simple hooks
-    const queryClient = useQueryClient();
-    const { apiHost } = useContext(BunnyContext);
-    const tokenFromContexts = useToken();
-    const token = overrideToken || tokenFromContexts;
-    const { paymentMethods: storedPaymentMethods, defaultPaymentMethod, isLoading: isPaymentMethodLoading, } = usePaymentMethod({
-        accountId,
-        token,
-        apiHost,
-    });
-    // Complex hooks
-    const { paymentPlugins } = usePaymentPlugins({ apiHost, token, accountId });
-    const selectedPaymentMethodPlugin = useMemo(() => {
-        // TODO: consolate PluginData and PaymentPlugin into one type. Needs to be done on API side.
-        return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find((plugin) => { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
-    }, [paymentPlugins, defaultPaymentMethod]);
-    // Derived state
-    const defaultPaymentMethodPlugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find((plugin) => { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
-    const paying = Boolean(quote || invoice);
-    const { currencyId, isCurrencyIdLoading } = usePaymentFormCurrencyId({
-        quote,
-        invoice,
+function PaymentForm({ invoice, quote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
+    const { currencyId, isCurrencyIdLoading } = usePayableCurrency({
+        payableCurrencyId: (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId),
     });
-    const paymentRequired = quote ? getQuoteAmountDue(quote) > 0 : true;
+    // Return early because PaymentForm should not be rendered without a valid currency ID.
+    // For example, sepa / iDeal may not show for Dutch customer if no currencyId
+    if (isCurrencyIdLoading) {
+        return null;
+    }
+    if (!currencyId) {
+        return jsx("div", { children: "PaymentForm error: No currency ID found from Quote or Invoice or props." });
+    }
+    // Wrap providers around the children
+    const providers = [
+        [ShowPaymentDetailsProvider, { value: undefined }],
+        [CustomCheckoutFunctionProvider, { value: customCheckoutFunction }],
+    ];
+    return (jsx(Fragment, { children: providers.reduceRight((acc, [Provider, props]) => createElement(Provider, props, acc), jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsx(SelectedPluginProvider, { accountId: accountId, children: jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsx(PaymentFormContent, { onRemovePaymentMethod: onRemovePaymentMethod, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
+}
+function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod, }) {
+    // Context
+    const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
+    const paymentType = usePaymentType();
+    const isPaying = useIsPaying();
+    const amountDue = useAmountDue();
+    const selectedPlugin = useSelectedPlugin();
+    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
+    const accountId = useAccountId();
+    // Hooks
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { paymentMethods: maskedPaymentMethods, isLoading: isPaymentMethodLoading } = usePaymentMethod({ accountId });
+    // Read fragments
+    const paymentMethods = useMemo(() => maskedPaymentMethods === null || maskedPaymentMethods === void 0 ? void 0 : maskedPaymentMethods.map(paymentMethod => readFragment(PaymentForm_PaymentMethodsFragment, paymentMethod)), [maskedPaymentMethods]);
     // Custom hooks
-    const { setDefaultPaymentMethod: handleSetDefault, loading: setDefaultPaymentMethodLoading } = useSetDefaultPaymentMethod(paymentPlugins || [], apiHost, token, accountId, message => {
-        showErrorNotification$4(message, 'Error setting default payment method');
-    }, () => {
-        onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
-    });
-    useAutoSetDefaultPaymentMethod({
-        accountId,
-        token,
-        handleSetDefault,
-        setDefaultPaymentMethodLoading,
-        enabled: !!paymentPlugins,
-    });
-    const { selectorPaymentMethodPlugin, setSelectorPaymentMethodPlugin } = usePaymentMethodSelectorPlugin({
-        defaultPaymentMethod,
-        defaultPaymentMethodPlugin,
-        paymentMethodAllowedPlugins: paymentPlugins || [],
-    });
-    // Mutations
-    const { mutate: checkoutNoPayment, isPending: isCheckingOutNoPayment } = useMutation({
-        mutationFn: async () => {
-            if (!quote)
-                throw new Error('Quote is required');
-            if (paymentRequired)
-                throw new Error('Payment is required');
-            return await checkout({ quoteId: quote.id, token, apiHost });
-        },
-        onSuccess: () => {
-            handlePaymentSuccess();
-        },
-        onError: onFail,
+    const { setDefaultPaymentMethod: handleSetDefault, loading: setDefaultPaymentMethodLoading } = useSetDefaultPaymentMethod(message => {
+        showErrorNotification$4(message, 'Error setting default payment method');
+    }, () => {
+        onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
+    });
+    useAutoSetDefaultPaymentMethod({
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        enabled: !!paymentPlugins,
     });
-    const onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, token, accountId, onRemovePaymentMethod, message => {
+    const onClickRemove = useRemovePaymentMethod(onRemovePaymentMethod, message => {
         showErrorNotification$4(message, 'Error removing payment method');
     });
-    const handlePaymentSuccess = () => {
-        // Hide payment method selector and form
-        setShowPaymentMethodForm(false);
-        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
-    };
-    const handleSavePaymentMethod = (response) => {
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory$1.default.accountPaymentMethodsKey({
-                accountId,
-                token,
-            }),
-        });
-        onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
-        setShowPaymentMethodForm(false);
-    };
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
             showErrorNotification$4('No payment plugins available', 'Error adding payment method');
@@ -19804,45 +20117,21 @@ const PaymentForm = ({ invoice, onFail, onPaymentSuccess, onPaymentHoldSuccess,
     }
     // Automatically show the payment method form if there are no payment methods
     useEffect(() => {
-        if ((storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0) {
+        if ((paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) === 0) {
             setShowPaymentMethodForm(true);
         }
-    }, [storedPaymentMethods]);
-    if (isPaymentMethodLoading || isCurrencyIdLoading) {
+    }, [paymentMethods]);
+    if (isPaymentMethodLoading) {
         return jsx(Skeleton, { active: true, className: "bunny-p-4" });
     }
-    // Return early because it is a bug if PaymentForm is rendered without a currency ID.
-    // For example, sepa / iDeal may not show for dutch customer if no currencyId
-    if (!currencyId) {
-        return jsx("div", { children: "PaymentForm error: No currency ID found from Quote or Invoice or props." });
-    }
-    return (jsx(PaymentContext.Provider, { value: {
-            onClickCancel: () => setShowPaymentMethodForm(false),
-            accountId,
-            overrideToken,
-            storedPaymentMethods,
-            defaultPaymentMethod,
-            customCheckoutFunction,
-        }, children: jsx(StripeWrapper, { plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId, children: jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full", children: jsx(Fragment, { children: paymentRequired ? (jsxs(Fragment, { children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4", children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(paymentMethod => (jsx(MiniCreditCard, { onClickRemove: () => onClickRemove(paymentMethod), onClickSetDefault: () => handleSetDefault(paymentMethod), paymentMethodData: paymentMethod, id: `payment-method-${paymentMethod.id}` }, paymentMethod.id))), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: () => { }, onClickSetDefault: () => { } }))] }), jsx(Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
-                                    {
-                                        key: '1',
-                                        showArrow: false,
-                                        label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
-                                        children: (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins || [], value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", { className: "bunny-flex bunny-flex-col", children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) }))] })),
-                                    },
-                                ] }), paying && defaultPaymentMethod && (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethodPlugin, onPaymentHoldSuccess: onPaymentHoldSuccess, paymentHoldOptions: paymentHoldOptions }) }))] })) : (jsx(Button, { style: { margin: '0 16px' }, loading: isCheckingOutNoPayment, onClick: () => checkoutNoPayment(), type: "primary", children: isCheckingOutNoPayment ? 'Processing...' : 'Complete Order' })) }) }) }) }));
-};
-function StripeWrapper({ children, plugin, token, apiHost, currencyId, accountId, }) {
-    const { stripe, options } = useStripePlugin(plugin, apiHost, currencyId || 'usd', token, accountId);
-    return (jsx(Elements, { options: options, stripe: stripe, children: children }));
-}
-function usePaymentFormCurrencyId({ quote, invoice, }) {
-    const token = useToken();
-    const { currentUser, isCurrentUserDataLoading } = useCurrentUserData(token);
-    const account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
-    const accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
-    const currencyId = useMemo(() => { var _a; return (_a = (accountCurrencyId || (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId))) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, quote === null || quote === void 0 ? void 0 : quote.currencyId, invoice === null || invoice === void 0 ? void 0 : invoice.currencyId]);
-    return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
+    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full", children: paymentType === PaymentType.PAY || paymentType === PaymentType.APPROVE_HOLD ? (jsxs(Fragment, { children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4", children: [paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.map(paymentMethod => (jsx(MiniCreditCard, { onClickRemove: () => onClickRemove(paymentMethod), onClickSetDefault: () => handleSetDefault(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), paymentMethod: paymentMethod, id: `payment-method-${paymentMethod.id}` }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id))), (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) === 0 && jsx(MiniCreditCard, {})] }), jsx(Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
+                        {
+                            key: '1',
+                            showArrow: false,
+                            label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
+                            children: (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsx(PaymentMethodSelector, {}), selectedPlugin && (jsx("div", { className: "bunny-flex bunny-flex-col", children: jsx(PaymentMethodDetails, {}) }))] })),
+                        },
+                    ] }), amountDue !== undefined && !showPaymentMethodForm && (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, {}) }))] })) : (jsx(Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
 }
 
 function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, }) {
@@ -19863,12 +20152,11 @@ function ActualInvoice({ hidePaymentForm }) {
     // Context
     const queryClient = useQueryClient();
     const { id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onPaymentSuccess, className, } = useContext(InvoiceQuoteContext);
-    const { apiHost, onTokenExpired } = useContext(BunnyContext);
+    const { apiHost } = useContext(BunnyContext);
     const { hideDownloadButton, onInvoiceLoaded } = useContext(InvoiceQuoteContext);
     const token = useToken();
     // Hooks
     const showSuccessNotification = useSuccessNotification();
-    const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
     // Queries
     const { data: formattedInvoice } = useQuery({
         queryKey: QueryKeyFactory$1.default.createFormattedInvoiceKey({ id, token }),
@@ -19877,7 +20165,7 @@ function ActualInvoice({ hidePaymentForm }) {
     // Derived state
     const isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
     // Local state
-    const isMobile = useIsMobile(isInvoicePayable ? BreakpointNumbers.lg : undefined);
+    const isMobile = useIsMobile$1(isInvoicePayable ? BreakpointNumbers$1.lg : undefined);
     const onSuccess = () => {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory$1.default.transactionsKey({ token }),
@@ -19891,9 +20179,6 @@ function ActualInvoice({ hidePaymentForm }) {
         showSuccessNotification('Your invoice has been paid', 'Payment successful');
         onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
-    const onFail = (error) => {
-        handleAllErrorFormats(error.message);
-    };
     useEffect(() => {
         if (formattedInvoice) {
             onInvoiceLoaded === null || onInvoiceLoaded === void 0 ? void 0 : onInvoiceLoaded(formattedInvoice);
@@ -19901,7 +20186,7 @@ function ActualInvoice({ hidePaymentForm }) {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsx(Fragment, {});
-    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) }))] }) }));
+    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: formattedInvoice }) }))] }) }));
 }
 
 const MUTATION$8 = () => `
@@ -20219,8 +20504,53 @@ const useSigningComplete = ({ data, token }) => {
     }, [data, eventParam, queryClient, token]);
 };
 
+var dayjs_min$1 = {exports: {}};
+
+var dayjs_min = dayjs_min$1.exports;
+
+var hasRequiredDayjs_min;
+
+function requireDayjs_min () {
+	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+	hasRequiredDayjs_min = 1;
+	(function (module, exports) {
+		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	} (dayjs_min$1));
+	return dayjs_min$1.exports;
+}
+
+var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
 const useIsExpired = (expiresAt) => dayjs(expiresAt).diff(dayjs(dayjs().format("YYYY-MM-DD"))) < 0;
 
+const tagStyleMap = {
+    blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
+    green: {
+        color: 'var(--bunny-green-600)',
+        background: 'var(--bunny-green-200)',
+    },
+    red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
+    orange: {
+        color: 'var(--bunny-orange-500)',
+        background: 'var(--bunny-orange-200)',
+    },
+    yellow: {
+        color: 'var(--bunny-yellow-500)',
+        background: 'var(--bunny-yellow-200)',
+    },
+    purple: {
+        color: 'var(--bunny-purple-500)',
+        background: 'var(--bunny-purple-200)',
+    },
+    black: { color: 'white', background: 'var(--bunny-black)' },
+};
+// This component provides custom styling for antd Tag components without using antd overwrites.
+// Please use this component instead of the antd Tag component directly to maintain consistent styling.
+const CustomizedTag = ({ children, color, className, style, }) => {
+    return (jsx(Tag, { color: color, style: { ...(color ? tagStyleMap[color] : undefined), ...style }, className: `bunny-m-0 bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ${className}`, children: children }));
+};
+
 const POLLING_INTERVAL = 2000;
 const PandadocPollingModal = ({ isVisible, setVisible, id }) => {
     const { apiHost, onTokenExpired } = useContext(BunnyContext);
@@ -20339,15 +20669,13 @@ const PaymentHoldModal = ({ visible, setVisible, quote, }) => {
     const token = useToken();
     return (jsxs(StyledModal$2, { centered: true, onCancel: () => {
             setVisible(false);
-        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay to accept" }), jsxs(Text$w, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
+        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay now" }), jsxs(Text$w, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
                         amount: quote.amount,
                         currencyId: quote.currency,
                         id: quote.quote.id,
                     }, paymentHoldOptions: {
                         payToAccept: true,
                         amountToHold: quote.amount,
-                    }, onFail: () => {
-                        setVisible(false);
                     }, onPaymentSuccess: () => {
                         setVisible(false);
                     }, onPaymentHoldSuccess: () => {
@@ -20445,7 +20773,7 @@ function ActualQuote({ onQuoteAccepted }) {
         onQuoteAccepted,
     });
     useSigningComplete({ data: formattedQuote, token });
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     useEffect(() => {
         if (formattedQuote) {
             onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
@@ -20483,7 +20811,7 @@ function QuoteButtons({ isAccepted, formattedQuote, isMobile, hideDownloadButton
     const signingPlugins = useSigningPlugins({ apiHost, token });
     return (jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
             color: secondaryColor,
-        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay to accept" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay now" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
                                 ? 'Quote is expired'
                                 : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
                                     ? 'Start signing'
@@ -20617,7 +20945,7 @@ const TransactionDownload = ({ transaction, token, apiHost, }) => {
     const { darkMode } = useContext(BunnyContext);
     const { downloadTransactionLink } = useContext(TransactionsListContext);
     const downloadFile = useDownloadFile();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const isClickable = transaction.kind === 'INVOICE' || downloadTransactionLink !== undefined;
     const downloadLink = downloadTransactionLink
         ? downloadTransactionLink(transaction.transactionableId)
@@ -20795,7 +21123,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const updatedTransactions = (_b = (_a = transactions === null || transactions === void 0 ? void 0 : transactions.filter((transaction) => !kindsToShow || kindsToShow.includes(transaction.kind))) === null || _a === void 0 ? void 0 : _a.filter(filterTransactions || (() => true))) === null || _b === void 0 ? void 0 : _b.sort(sortTransactions || (() => 0));
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     function handleTransactionClick(transaction) {
         if (onTransactionClick) {
             onTransactionClick(transaction);
@@ -20959,6 +21287,14 @@ function QuotesWrapper() {
     return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
+const useHasTaxPlugin = ({ apiHost, token, }) => {
+    const { data: plugins } = usePlugins({
+        apiHost,
+        token,
+    });
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some((plugin) => plugin.type === "taxation"));
+};
+
 const MUTATION$7 = () => `
 mutation AccountSignup (
   $pluginId: String!,
@@ -21302,14 +21638,6 @@ const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
         : null;
 };
 
-const useHasTaxPlugin = ({ apiHost, token, }) => {
-    const { data: plugins } = usePlugins({
-        apiHost,
-        token,
-    });
-    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some((plugin) => plugin.type === "taxation"));
-};
-
 const BunnyFooterIcon = ({ color }) => {
     return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_6_851)", children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
 };
@@ -21319,12 +21647,12 @@ const Footer = ({ className }) => {
     const token = useToken();
     const { currentUser } = useCurrentUserData(token);
     const { privacyUrl, termsUrl } = currentUser;
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsxs("div", { className: `bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ${isMobile ? 'bunny-flex-col bunny-gap-2' : ''} ${className}`, children: [(termsUrl || privacyUrl) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-3", children: [termsUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Terms" })), privacyUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Privacy" }))] })), jsx(BunnyMarketingLink, {})] }));
 };
 const BunnyMarketingLink = () => {
     const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$o, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
 };
 const StyedLink = styled.a `
@@ -21464,21 +21792,10 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
     };
 };
 
-var SubscriptionState;
-(function (SubscriptionState) {
-    SubscriptionState["ACTIVE"] = "ACTIVE";
-    SubscriptionState["TRIAL"] = "TRIAL";
-    SubscriptionState["PENDING"] = "PENDING";
-    SubscriptionState["EXPIRED"] = "EXPIRED";
-    SubscriptionState["CANCELED"] = "CANCELED";
-    SubscriptionState["TRIAL_EXPIRED"] = "TRIAL_EXPIRED";
-})(SubscriptionState || (SubscriptionState = {}));
-var SubscriptionState$1 = SubscriptionState;
-
 function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
     var _a, _b;
-    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$1.TRIAL ||
-        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL_EXPIRED;
+    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') ||
+        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
     function upgradingFromFree() {
         const totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce((acc, charge) => acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0), 0);
         return totalPrice === 0;
@@ -21664,7 +21981,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     const { apiHost } = useContext(BunnyContext);
     const { upgradingSubscription } = useContext(SubscriptionsContext);
     const token = useToken();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const [isSaving, setIsSaving] = useState(false);
     const paymentRequired = getQuoteAmountDue(quote) > 0;
     const queryClient = useQueryClient();
@@ -21720,7 +22037,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     }
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
-    return (jsx(Fragment, { children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
+    return (jsx(Fragment, { children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
                         shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
                         couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
                             var _a;
@@ -21732,7 +22049,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
                     }, children: "Remove coupon(s)" }))] })) : (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsx(Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsx("div", { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] }) })) }));
 };
 const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsx("div", { className: `bunny-flex bunny-w-full bunny-flex-col bunny-gap-6 ${isMobile ? 'bunny-shadow-padding-xb' : ''} ${className}`, style: {
             ...(isMobile
                 ? setMaxHeight
@@ -21759,7 +22076,7 @@ const Checkout_QuoteFragment = t(`
 const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
     var _a, _b, _c, _d, _e;
     const { apiHost } = useContext(BunnyContext);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const token = useToken();
     // Read fragments
     const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
@@ -21822,15 +22139,13 @@ const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuo
     return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
       bunny-overflow-auto bunny-height-full`, style: {
             zIndex: 1001,
-        }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
+        }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
                                 onFail(error);
                             }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
                                 if (recalculateTaxesEnabled) {
                                     await recalculateTaxes();
                                 }
-                            } })) : (jsx(PaymentForm, { onFail: error => {
-                                onFail(error);
-                            }, onPaymentSuccess: onSuccess }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
+                            } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
 
 const QuoteContext = createContext({});
@@ -21839,7 +22154,7 @@ const { Text: Text$n } = Typography;
 const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChanged, }) => {
     var _a;
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     useEffect(() => {
         setTimeout(() => {
             setIsTooltipOpen(true);
@@ -21920,29 +22235,29 @@ function hasUnpurchasedAddonPriceLists(maskedPriceListAddonPlans, currentSubscri
 
 const canSubscriptionUpgradeFromTrial = (subscription) => {
     var _a;
-    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL &&
+    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
         subscription.plan.selfServiceBuy) ||
         false;
 };
 const canSubscriptionUpgradeFromTrialExpired = (subscription) => {
     var _a;
-    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED &&
+    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
         subscription.plan.selfServiceBuy) ||
         false;
 };
 const isSubscriptionNotActive = (subscription) => {
     var _a, _b, _c;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.CANCELED ||
-        ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED') ||
+        ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
 };
 const isSubscriptionActiveOrPending = (subscription) => {
     var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.ACTIVE ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.PENDING;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'ACTIVE') ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'PENDING');
 };
-const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL; };
-const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED; };
+const isSubscriptionTrial = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL'); };
+const isSubscriptionTrialExpired = (subscription) => { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED'); };
 // Helper function to check if charge is a discount
 const isDiscount$1 = (kind) => kind === QuoteChangeKind.DISCOUNT || kind === QuoteChangeKind.FREE_PERIOD_DISCOUNT;
 const hasPriceTiers = (charge) => {
@@ -22024,7 +22339,7 @@ const isPriceListDisabled = ({ priceList, upgradingSubscription, }) => {
 };
 
 const CheckoutButton = ({ checkoutButtonDisabled, onClickCheckout, loading, tooltipText, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const TooltipWrapper = ({ children }) => {
         if (tooltipText) {
             return jsx(Tooltip, { title: tooltipText, children: children });
@@ -22035,7 +22350,7 @@ const CheckoutButton = ({ checkoutButtonDisabled, onClickCheckout, loading, tool
 };
 
 const CheckoutPrice = ({ isUsage, quote, selectedPriceList, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     if (!isUsage && (!selectedPriceList || (quote === null || quote === void 0 ? void 0 : quote.periodAmount) === undefined))
         return null;
     const convertedPeriodMonths = periodMonthsConverter(selectedPriceList.periodMonths);
@@ -22051,20 +22366,14 @@ const { Text: Text$m } = Typography;
 const CheckoutBarSummarySection = ({ open, selectedPriceList, onClickCheckout, }) => {
     var _a;
     // Context
-    const { apiHost } = useContext(BunnyContext);
     const { quote: quoteData, isQuotePending, isUpdatingQuote } = useContext(QuoteContext);
     const quote = quoteData;
-    const { accountId } = useContext(PaymentContext);
     const { upgradingSubscription, isInPreviewMode } = useContext(SubscriptionsContext);
     // Hooks
     const token = useToken();
-    const { paymentPlugins } = usePaymentPlugins({
-        apiHost,
-        token,
-        accountId,
-    });
+    const { paymentPlugins } = usePaymentPlugins(undefined);
     const queryClient = useQueryClient();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     // Derived state
     const isFetching = queryClient.isFetching({
         queryKey: QueryKeyFactory$1.default.planChangeOptionsKey({
@@ -22114,7 +22423,7 @@ const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onChecko
     const token = useToken();
     const showSuccessNotification = useSuccessNotification();
     const queryClient = useQueryClient();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const handleCheckoutSuccess = () => {
         queryClient.refetchQueries({
             queryKey: QueryKeyFactory$1.default.createTableKey({
@@ -22320,12 +22629,12 @@ const CheckoutSummaryDivider = () => {
 };
 
 const { Title: Title$1 } = Typography;
-function PaymentForms({ quote, handlePaymentSuccess, handlePaymentFail, handleSubmit, proceedingToPayment, accountId, overrideToken, customCheckoutFunction, defaultValues, }) {
-    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, { className: "bunny-px-4 bunny-m-0", level: 2, children: "Payment" }), jsx("div", { className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]", children: jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) })] })) : null })) : (jsxs(Fragment, { children: [jsx(Title$1, { className: "bunny-px-4 bunny-m-0", level: 2, children: "Signup" }), jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
+function PaymentForms({ quote, handlePaymentSuccess, handleSubmit, proceedingToPayment, accountId, overrideToken, customCheckoutFunction, defaultValues, }) {
+    return (jsx(Fragment, { children: quote ? (jsx(Fragment, { children: overrideToken ? (jsxs(Fragment, { children: [jsx(Title$1, { className: "bunny-px-4 bunny-m-0", level: 2, children: "Payment" }), jsx("div", { className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]", children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) })] })) : null })) : (jsxs(Fragment, { children: [jsx(Title$1, { className: "bunny-px-4 bunny-m-0", level: 2, children: "Signup" }), jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
 }
 function InitialSignupForm({ className, onSubmit, submitting, defaultValues, }) {
     const [form] = Form.useForm();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     function handleSubmit() {
         form.validateFields({ validateOnly: false }).then(() => {
             onSubmit(form.getFieldsValue());
@@ -22366,7 +22675,7 @@ const { Text: Text$j } = Typography;
 function PriceListDisplay({ priceListData }) {
     if (!priceListData)
         return null;
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-space-y-8", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(Text$j, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [priceListData.product.name, " ", priceListData.name] }), jsxs(Text$j, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency$1(priceListData.basePrice, priceListData.currencyId), " / month"] })] }), priceListData.trialAllowed ? (jsxs("div", { className: "bunny-flex bunny-flex-col", children: [jsxs(Text$j, { style: { fontSize: '16px' }, className: "bunny-text-slate-500", children: [priceListData.trialLengthDays, " day trial"] }), jsx(Text$j, { className: "bunny-text-slate-500", style: { fontSize: '12px' }, children: "You will not be charged until the last day of the trial." })] })) : null] }));
+    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-space-y-8", children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(Text$j, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [priceListData.product.name, " ", priceListData.name] }), jsxs(Text$j, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency$1(priceListData.basePrice, priceListData.currencyId), " / month"] })] }) }));
 }
 
 const showErrorNotification$1 = useErrorNotification();
@@ -22376,7 +22685,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
     // Hooks
     const { apiHost } = useContext(BunnyContext);
     const tokenFromContexts = useToken();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { topNavImageUrl } = useBrand();
     const defaultValues = useMemo(() => ({
         firstName: defaultFirstName,
@@ -22393,13 +22702,11 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
     const [purchaseSucceeded, setPurchaseSucceeded] = useState(false);
     const defaultCouponAppliedRef = useRef(undefined);
     const [couponEditorCouponCode, setCouponEditorCouponCode] = useState('');
-    const { defaultPaymentMethod } = usePaymentMethod({
-        accountId,
-        token,
+    const hasTaxPlugin = useHasTaxPlugin({
         apiHost,
-        enabled: Boolean(accountId),
+        token,
     });
-    const { mutate: recalculateTaxes } = useMutation({
+    const { mutate: recalculateTaxesMutation } = useMutation({
         mutationFn: () => {
             if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
                 throw new Error('Quote ID is required');
@@ -22453,6 +22760,8 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 }),
             });
             setInitialQuote(data.quote);
+            console.log('handleRecalculateTaxes in quoteAccountSignupMutate');
+            handleRecalculateTaxes();
         },
         onError: (error) => {
             const errorMessage = error.response.errors[0].message;
@@ -22490,7 +22799,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
             showSuccessNotification('Coupon applied');
-            recalculateTaxes();
+            handleRecalculateTaxes();
             setCouponEditorCouponCode('');
         },
         onCouponRemoved: () => {
@@ -22498,7 +22807,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
             showSuccessNotification('Coupon removed');
-            recalculateTaxes();
+            handleRecalculateTaxes();
         },
     });
     // Handle default coupon application
@@ -22514,7 +22823,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
     async function handlePaymentSuccess() {
         setPurchaseSucceeded(true);
     }
-    async function accountSignupFunction(plugin) {
+    async function accountSignupFunction(pluginId, paymentMethodId) {
         var _a;
         if (!portalSessionToken) {
             throw new Error('Portal session token is required');
@@ -22522,37 +22831,30 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
         if (!accountId) {
             throw new Error('Account ID is required');
         }
-        if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-            throw new Error('Plugin ID is required');
-        }
-        if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
-            throw new Error('Payment method ID is required');
-        }
         return await accountSignup({
             token: portalSessionToken,
             apiHost,
             quoteId: (_a = quote === null || quote === void 0 ? void 0 : quote.id) !== null && _a !== void 0 ? _a : undefined,
-            paymentMethodId: defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id,
-            pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
+            paymentMethodId,
+            pluginId,
             priceListCode: priceListCode,
             accountId,
         });
     }
-    function handlePaymentFail(error) {
-        var _a;
-        showErrorNotification$1((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.message);
-    }
-    useEffect(() => {
-        if (initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id) {
-            recalculateTaxes();
+    function handleRecalculateTaxes() {
+        console.log('handleRecalculateTaxes', hasTaxPlugin);
+        if (!hasTaxPlugin) {
+            console.log('no tax plugin, returning');
+            return;
         }
-    }, [initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id]);
+        recalculateTaxesMutation();
+    }
     if (purchaseSucceeded) {
         return (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx("div", { className: "bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 bunny-flex bunny-items-start bunny-pt-[25vh]", children: jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) })) : (jsx("div", { children: "No currency ID found from Quote" })) }));
     }
     return (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col' : 'bunny-flex-row'} bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ${shadow} ${className}`, style: style, children: [jsx("div", { className: `bunny-flex bunny-items-center bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full'} bunny-justify-center`, children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24", children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) })), jsx(Footer, {})] }) }), jsx("div", { className: `bunny-flex bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full'} bunny-items-center`, style: {
                     boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
-                }, children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
+                }, children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
 }
 
 const { Text: Text$i } = Typography;
@@ -22560,25 +22862,6 @@ const DrawerHeader = ({ description, onClose, title, closeButtonClassName, }) =>
     return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2", children: [jsx(Text$i, { className: "bunny-text-xl bunny-font-normal", children: title }), onClose ? (jsx("button", { id: "closePayment", onClick: onClose, className: closeButtonClassName, children: jsx(CloseOutlined, {}) })) : null] }), description && jsx("div", { className: "bunny-text-sm bunny-font-medium", children: description })] }));
 };
 
-/**
- * Creates a context and provider for a state value
- * @param useValue - A function that returns the state value
- * @returns A tuple containing the provider and the context value
- * @example take a look at how this is used in the quoteIdContext in the QuantityDrawer
- */
-const createStateContext = (useValue) => {
-    const StateContext = createContext(null);
-    const StateProvider = ({ initialValue, children, }) => jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
-    const useContextState = () => {
-        const value = useContext(StateContext);
-        if (value === null) {
-            throw new Error('Provider missing');
-        }
-        return value;
-    };
-    return [StateProvider, useContextState];
-};
-
 const useQuoteIdState = (id) => useState(id);
 const [QuoteIdProvider, useQuoteId] = createStateContext(useQuoteIdState);
 
@@ -22655,7 +22938,7 @@ const QuoteChangeSummarySection_QuoteFragment = t(`
     }
   `, []);
 const QuoteChangeSummarySection = ({ openCheckout, errorUpdatingQuantity, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const [quoteId] = useQuoteId();
     const maskedQuote = useQuoteQueryData(quoteId);
     const quote = readFragment(QuoteChangeSummarySection_QuoteFragment, maskedQuote);
@@ -23073,7 +23356,7 @@ const QuantityDrawerDesktop_SubscriptionFragment = t(`
 const QuantityChangeDrawerDesktop = ({ onClose, open, openCheckout, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
     const [openLocal, setOpenLocal] = useState(open);
     const [errorUpdatingQuantity, setErrorUpdatingQuantity] = useState(false);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     useEffect(() => {
         let timeoutId;
         if (!open) {
@@ -23219,7 +23502,7 @@ const ChangeQuantitiesButton = ({ setQuantityDrawerOpen, }) => {
 
 const SubscriptionsNavigation = ({ inactiveSwitchVisible, showInactive, setShowInactive, setQuantityDrawerOpen, subscriptions, }) => {
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     // Derived state
     const canShowChangeQuantitiesButton = canShowChangeQuantities({
         subscriptions,
@@ -23255,6 +23538,14 @@ function addonPlanSwitchTestId(planName) {
 
 const AddonIndentation = ({ isLast, indentation, verticalMargin, }) => (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-relative", style: { width: `${indentation}px` }, children: [jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginTop: verticalMargin } }), jsx("div", { className: "bunny-bg-gray-300 bunny-h-0.5 bunny-w-1/2 bunny-ml-auto" }), isLast ? (jsx("div", { className: "bunny-flex-1" })) : (jsx("div", { className: `bunny-flex-1 bunny-bg-gray-300 bunny-w-0.5 bunny-mx-auto`, style: { marginBottom: verticalMargin } }))] }));
 
+const Card = ({ children, className, style, }) => {
+    const { darkMode } = useContext(BunnyContext);
+    return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-rounded-md ${className}`, style: {
+            ...style,
+            backgroundColor: darkMode ? 'var(--row-background-dark)' : 'var(--row-background)',
+        }, children: children }));
+};
+
 var utc$2 = {exports: {}};
 
 var utc$1 = utc$2.exports;
@@ -23405,83 +23696,6 @@ const StyledAreaChart = defaultStyled(AreaChart) `
   }
 `;
 
-const QueryKeyFactory = {
-    accountPaymentMethodsKey: ({ accountId, entityId, token }) => [
-        'accountPaymentMethods',
-        ...(entityId ? [entityId] : []),
-        ...(accountId ? [accountId] : []),
-        ...(token ? [token] : []),
-    ],
-    billingDetailsKey: ({ entityId, token }) => [
-        'billingDetails',
-        ...(entityId ? [entityId] : []),
-        ...(token ? [token] : []),
-    ],
-    brandingKey: (token) => ['branding', ...(token ? [token] : [])],
-    calculatedPricesKey: ({ priceListId, quantity, token }) => [
-        'calculatedPrices',
-        ...(priceListId ? [priceListId] : []),
-        ...(quantity ? [quantity] : []),
-        ...(token ? [token] : []),
-    ],
-    createEventsKey: ({ entityId, pluralType, token }) => [
-        pluralType,
-        'events',
-        entityId,
-        ...(token ? [token] : []),
-    ],
-    createFormattedInvoiceKey: ({ id, token }) => [
-        'formattedInvoice',
-        id,
-        ...(token ? [token] : []),
-    ],
-    createInvoiceKey: ({ id, token }) => ['invoice', id, token],
-    createObjectKey: ({ id, objectName, token }) => [
-        objectName,
-        ...(id ? [id] : []),
-        ...(token ? [token] : []),
-    ],
-    createQuoteKey: ({ id, token }) => ['quote', id, token],
-    createQuoteTaxCalculateKey: ({ id, token }) => [
-        'quoteTaxCalculate',
-        ...(id ? [id] : []),
-        ...(token ? [token] : []),
-    ],
-    createTableKey: ({ filterString, pluralType, token }) => filterString ? [pluralType, 'list', filterString, token] : [pluralType, 'list', token],
-    currentUserKey: (token) => ['currentUser', ...(token ? [token] : [])],
-    editingQuoteKey: (token) => ['editingQuote', ...(token ? [token] : [])],
-    finixAchKey: (token) => ['finixAchKey', ...(token ? [token] : [])],
-    finixKey: (token) => ['finixKey', ...(token ? [token] : [])],
-    planChangeOptionsKey: ({ subscriptionId, productId, token }) => [
-        'planChangeOptions',
-        ...(subscriptionId ? [subscriptionId] : []),
-        ...(productId ? [productId] : []),
-        ...(token ? [token] : []),
-    ],
-    pluginsKey: (token) => ['plugins', ...(token ? [token] : [])],
-    portalPreviewDataKey: ({ productId, token }) => [
-        'portalPreviewData',
-        ...(productId ? [productId] : []),
-        ...(token ? [token] : []),
-    ],
-    taxationRequiredAccountFieldsKey: ({ entityId, token, }) => [
-        'taxationRequiredAccountFields',
-        ...(entityId ? [entityId] : []),
-        ...(token ? [token] : []),
-    ],
-    transactionsKey: ({ filter, token }) => [
-        'transactions',
-        ...(filter ? [filter] : []),
-        ...(token ? [token] : []),
-    ],
-    availableAddonPlansKey: ({ priceListId, token, }) => ['availableAddonPlans', priceListId, ...(token ? [token] : [])],
-    addonPlansKey: ({ priceListId, token }) => [
-        'addonPlans',
-        priceListId,
-        ...(token ? [token] : []),
-    ],
-};
-
 const TAG_COLORS = {
     ACTIVE: "green",
     TRIAL: "blue",
@@ -23535,12 +23749,12 @@ const { Text: Text$f } = Typography;
 const getSubscriptionStatusText = (subscription) => {
     const { cancellationDate, state, evergreen, endDate, trialEndDate, trialStartDate, startDate, trialExpirationAction, } = subscription;
     const stateUpperCased = state === null || state === void 0 ? void 0 : state.toUpperCase();
-    const isActive = stateUpperCased === SubscriptionState$2.ACTIVE;
-    const isPending = stateUpperCased === SubscriptionState$2.PENDING;
-    const isCanceled = stateUpperCased === SubscriptionState$2.CANCELED;
-    const isExpired = stateUpperCased === SubscriptionState$2.EXPIRED;
-    const isTrialExpired = stateUpperCased === SubscriptionState$2.TRIAL_EXPIRED;
-    const isTrial = stateUpperCased === SubscriptionState$2.TRIAL;
+    const isActive = stateUpperCased === t.scalar('SubscriptionState', 'ACTIVE');
+    const isPending = stateUpperCased === t.scalar('SubscriptionState', 'PENDING');
+    const isCanceled = stateUpperCased === t.scalar('SubscriptionState', 'CANCELED');
+    const isExpired = stateUpperCased === t.scalar('SubscriptionState', 'EXPIRED');
+    const isTrialExpired = stateUpperCased === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
+    const isTrial = stateUpperCased === t.scalar('SubscriptionState', 'TRIAL');
     if (cancellationDate && (isActive || isPending || isTrial))
         return (jsxs(CustomizedTag, { color: "red", children: ["Canceled - ends on ", formatDate(cancellationDate)] }));
     if (cancellationDate && isCanceled)
@@ -23587,7 +23801,7 @@ function SubscriptionStatusAndActions({ onChangePlanClick, onCancelSubscriptionC
     const { apiHost } = useContext(BunnyContext);
     // Hooks
     const token = useToken();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { data: priceListChangeOptions, isLoading: arePriceListChangeOptionsLoading } = useQuery({
         queryKey: QueryKeyFactory.planChangeOptionsKey({ productId: subscription.product.id, token }),
         queryFn: () => getPriceListChangeOptions$1({ apiHost, token, productId: subscription.product.id }),
@@ -23595,8 +23809,6 @@ function SubscriptionStatusAndActions({ onChangePlanClick, onCancelSubscriptionC
     });
     const { isLoading: isPaymentMethodLoading } = usePaymentMethod({
         accountId: subscription.accountId,
-        token,
-        apiHost,
     });
     // Derived state
     const cardActionsVisible = !isMobile;
@@ -23618,7 +23830,7 @@ var BillingPeriodConverter$1 = BillingPeriodConverter;
 
 const SubscriptionChargeTotal = ({ charge, currencyId, }) => {
     const billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const formattedDiscountedPrice = formatCurrency$1(charge.price, currencyId);
     const formattedPeriodPrice = formatCurrency$1(charge.periodPrice, currencyId);
     return (jsx("div", { className: `bunny-flex bunny-gap-1 ${isMobile ? 'bunny-flex-col' : ''}`, children: charge.chargeType === ChargeType.USAGE || charge.trial
@@ -23924,7 +24136,7 @@ const SubscriptionsList = ({ showInactive, onChangePlanClick, onCancelSubscripti
     // Context
     const { gap } = useContext(SubscriptionsContext);
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const nonAddonSubscriptions = findNonAddonSubscriptions(subscriptions);
     return (jsx(Fragment, { children: nonAddonSubscriptions === null || nonAddonSubscriptions === void 0 ? void 0 : nonAddonSubscriptions.map((subscription, subscriptionIndex) => {
             if (!showInactive && isSubscriptionNotActive(subscription))
@@ -24078,9 +24290,9 @@ const useQuoteCreate = ({ upgradingSubscription, selectedPriceList, token, }) =>
             return;
         }
         const buyingAddonsForCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
-        const isActivatingTrialSubscription = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.TRIAL &&
+        const isActivatingTrialSubscription = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
             upgradingSubscription.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
-        const isActivatingExpiredTrialSubscription = ((_b = upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED &&
+        const isActivatingExpiredTrialSubscription = ((_b = upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
             upgradingSubscription.priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
         if (isActivatingTrialSubscription || isActivatingExpiredTrialSubscription) {
             subscriptionActivate({
@@ -24802,7 +25014,7 @@ const PriceListCardTitle = ({ planName, isPriceListCurrentSubscription, trialRem
 
 const PLAN_GRID_PADDING = 4;
 const PlanPickerGridCell = ({ children, noBorder, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsxs("div", { className: "bunny-flex bunny-flex-col", style: isMobile
             ? {}
             : {
@@ -24917,7 +25129,7 @@ const PriceListCard_PriceListFragment = t(`
   `, [PriceListCardDesktop_PriceListFragment, PriceListCardMobile_PriceListFragment]);
 const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, subscriptions, trialRemainingDays, noBorder, onClickPriceListCard, disableCurrentPlan, }) => {
     var _a, _b, _c;
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { upgradingSubscription } = useContext(SubscriptionsContext);
     // Read fragments
     const priceList = readFragment(PriceListCard_PriceListFragment, maskedPriceList);
@@ -24932,11 +25144,11 @@ const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, sub
         upgradingSubscription,
     });
     const subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(subscription => {
-        var _a;
+        var _a, _b;
         return subscription.plan.id === ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.id) &&
             subscription.state !== t.scalar('SubscriptionState', 'CANCELED') &&
             subscription.state !== t.scalar('SubscriptionState', 'EXPIRED') &&
-            subscription.state !== t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
     });
     if (!activeCharge) {
         return null;
@@ -25048,7 +25260,7 @@ const getPriceListChangeOptions = async ({ apiHost, isInPreviewMode, token, subs
 
 const BillingPeriodSelector = ({ availableBillingPeriods, onChangeBillingPeriod, products, selectedBillingPeriod, selectedProduct, onChangeProduct, }) => {
     const { secondaryColor, brandColor } = useBrand();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
         return null;
     return (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-8", children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsx("div", { className: "bunny-font-medium bunny-text-xs", style: {
@@ -25812,7 +26024,7 @@ const AddonPlans = ({ selectedPriceList, subscriptions, selectedBillingPeriod, c
         const addonSubscriptionIds = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions;
         const addonSubscriptions = addonSubscriptionIds === null || addonSubscriptionIds === void 0 ? void 0 : addonSubscriptionIds.map(addonSubscription => subscriptions.find(subscription => subscription.id === addonSubscription.id));
         // filter out cancelled addons
-        const activeAddonSubscriptions = addonSubscriptions === null || addonSubscriptions === void 0 ? void 0 : addonSubscriptions.filter(addonSubscription => (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.state) !== SubscriptionState$2.CANCELED);
+        const activeAddonSubscriptions = addonSubscriptions === null || addonSubscriptions === void 0 ? void 0 : addonSubscriptions.filter(addonSubscription => (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.state) !== t.scalar('SubscriptionState', 'CANCELED'));
         return activeAddonSubscriptions === null || activeAddonSubscriptions === void 0 ? void 0 : activeAddonSubscriptions.some(addonSubscription => (addonSubscription === null || addonSubscription === void 0 ? void 0 : addonSubscription.priceList.id) === priceList.id);
     }
     return (jsxs(Text$2, { className: `bunny-flex bunny-flex-col ${className}`, children: [jsx(AddonPlanModal, { onClose: () => setSelectedAddonPriceListId(null), priceList: selectedAddonPriceList }), addonPriceLists.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "bunny-text-slate-500 bunny-text-xs bunny-font-medium bunny-mb-2", children: 'Add-on plans'.toUpperCase() }), jsx("div", { className: "bunny-flex bunny-flex-col", children: addonPriceLists.map(addonPriceList => {
@@ -25824,7 +26036,7 @@ const AddonPlans = ({ selectedPriceList, subscriptions, selectedBillingPeriod, c
 
 const PriceListGridDesktop = ({ availablePriceLists, priceListChangeOptions, priceListStart, selectedPriceList, selectedProduct, setPriceListStart, subscriptions, trialRemainingDays, selectedBillingPeriod, onClickPriceListCard, }) => {
     const { shadow } = useContext(SubscriptionsContext);
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { displayPriceLists } = useMemo(() => getAvailablePlansAndPriceLists({
         availablePriceLists,
         priceListChangeOptions,
@@ -25867,7 +26079,7 @@ const PriceListGridMobile = ({ availablePriceLists, priceListChangeOptions, sele
 const PriceListGrid = ({ availablePriceLists, priceListChangeOptions, priceListStart, selectedPriceList, selectedProduct, setPriceListStart, subscriptions, selectedBillingPeriod, onClickPriceListCard, }) => {
     var _a, _b;
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const { upgradingSubscription } = useContext(SubscriptionsContext);
     // Derived state
     const currentPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(priceList => { var _a; return priceList.id === ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan) === null || _a === void 0 ? void 0 : _a.id); });
@@ -26511,7 +26723,7 @@ const Subscriptions = ({ handlePortalErrors, companyName, noSubscriptionsCompone
     // Hooks
     const queryClient = useQueryClient();
     const showSuccessNotification = useSuccessNotification();
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const cancelSubscription = useCancelSubscription();
     // Queries
     const { data: subscriptionsData, isLoading: subscriptionsAreLoading } = useQuery({
@@ -26546,16 +26758,16 @@ const Subscriptions = ({ handlePortalErrors, companyName, noSubscriptionsCompone
     const allSubscriptionsInactive = (_c = (_b = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.every(maskedSubscription => {
         var _a, _b, _c;
         const subscription = readFragment(Subscriptions_SubscriptionFragment, maskedSubscription);
-        return (((_a = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
-            ((_b = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED ||
-            ((_c = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.CANCELED);
+        return (((_a = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
+            ((_b = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') ||
+            ((_c = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED'));
     });
     const hasInactiveSubscriptions = (_e = (_d = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _d === void 0 ? void 0 : _d.nodes) === null || _e === void 0 ? void 0 : _e.some(maskedSubscription => {
         var _a, _b, _c;
         const subscription = readFragment(Subscriptions_SubscriptionFragment, maskedSubscription);
-        return (((_a = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
-            ((_b = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL_EXPIRED ||
-            ((_c = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState$2.CANCELED);
+        return (((_a = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
+            ((_b = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') ||
+            ((_c = subscription === null || subscription === void 0 ? void 0 : subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED'));
     });
     useEffect(() => {
         if (allSubscriptionsInactive && subscriptions && subscriptions.length > 0) {
@@ -26581,7 +26793,7 @@ const Subscriptions = ({ handlePortalErrors, companyName, noSubscriptionsCompone
     return (jsxs("div", { className: className, children: [jsx(PageHeaderWithActions, { title: jsx(Fragment, { children: showInactiveSubscriptionsToggle && isMobile && inactiveSwitchVisible && (jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && ((_f = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _f === void 0 ? void 0 : _f.nodes) && (jsx(SubscriptionsNavigation, { inactiveSwitchVisible: showInactiveSubscriptionsToggle && inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_g = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _g === void 0 ? void 0 : _g.nodes })) }), jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: (_h = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _h === void 0 ? void 0 : _h.nodes, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && ((_j = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _j === void 0 ? void 0 : _j.nodes) && (jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_k = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _k === void 0 ? void 0 : _k.nodes }) })), ((_l = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _l === void 0 ? void 0 : _l.nodes) && (jsx(QuantityDrawer, { subscriptions: (_m = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _m === void 0 ? void 0 : _m.nodes, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactiveSubscriptionsState }))] }));
 };
 const PageHeaderWithActions = ({ children, title, }) => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsxs("div", { className: `bunny-flex bunny-pb-4 ${isMobile
             ? 'bunny-flex-col bunny-gap-2'
             : 'bunny-items-center bunny-justify-between bunny-h-8'}`, children: [title && jsx(PageSubTitle, { title: title }), children] }));
@@ -26669,7 +26881,7 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
     const { apiHost } = useContext(BunnyContext);
     const token = useToken();
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     const queryClient = useQueryClient();
     const showErrorNotification = useErrorNotification();
     const showSuccessNotification = useSuccessNotification();
@@ -26795,24 +27007,20 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
 
 const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, }) => {
     // Hooks
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return (jsx(WrapperComponent, { isCardEnabled: isCardEnabled, shadow: shadow, className: className, children: jsxs("div", { className: `bunny-flex bunny-py-2 bunny-my-2 ${isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row'} bunny-gap-4`, children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] }) }));
 };
 const WrapperComponent = ({ children, isCardEnabled, shadow, className, }) => {
     return (jsx("div", { className: `${className}`, children: isCardEnabled ? jsx(Card, { className: `${shadow}`, children: children }) : jsx("div", { children: children }) }));
 };
 const ResponsiveDivider = () => {
-    const isMobile = useIsMobile();
+    const isMobile = useIsMobile$1();
     return isMobile ? (jsx("div", { className: "bunny-mx-4", children: jsx(Divider, {}) })) : (jsx("div", { children: jsx(Divider, { className: "bunny-h-full", type: "vertical" }) }));
 };
 const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, }) => {
-    const isMobile = useIsMobile();
-    const { onTokenExpired } = useContext(BunnyContext);
-    const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
+    const isMobile = useIsMobile$1();
     const showSuccessNotification = useSuccessNotification();
-    return (jsx("div", { className: `${isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4'} bunny-flex bunny-justify-center`, children: jsx(PaymentForm, { onFail: (error) => {
-                handleAllErrorFormats(error);
-            }, onSavePaymentMethod: (response) => {
+    return (jsx("div", { className: `${isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4'} bunny-flex bunny-justify-center`, children: jsx(PaymentForm, { onSavePaymentMethod: (response) => {
                 showSuccessNotification(isUpgradeFromTrial
                     ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
                     : 'Payment method saved successfully!');