@bunnyapp/components 1.8.0-beta.8 → 1.8.0-beta.9

package/dist/cjs/index.js

@@ -1283,7 +1283,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.7';
+const PACKAGE_VERSION = '1.8.0-beta.8';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -19845,60 +19845,6 @@ const PaymentForm_PaymentMethodsFragment = t(`
     }
   `, [MiniCreditCard_PaymentMethodFragment]);
 
-const query$9 = 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$9, { 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 } = react.useContext(BunnyContext);
-    const token = useToken();
-    // Query
-    const { data, isLoading } = reactQuery.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$i = t(`
   query PaymentPlugins($accountId: ID) {
     paymentPlugins(accountId: $accountId) {
@@ -19954,63 +19900,53 @@ const usePaymentPlugins = (accountId) => {
     };
 };
 
-/**
- * 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 = react.createContext(null);
-    const StateProvider = ({ initialValue, children, }) => jsxRuntime.jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
-    const useContextState = () => {
-        const value = react.useContext(StateContext);
-        if (value === null) {
-            throw new Error('Provider missing');
-        }
-        return value;
-    };
-    return [StateProvider, useContextState];
-};
+const [PaymentFormCallbacksProvider, usePaymentFormCallbacks] = createValueContext();
 
-// Contexts
-const useSelectedPluginIdState = (id) => react.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 (jsxRuntime.jsx(SelectedPluginIdProvider, { initialValue: undefined, children: jsxRuntime.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 = react.useMemo(() => {
-        return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(plugin => plugin.id === selectedPluginId);
-    }, [paymentPlugins, selectedPluginId]);
+// 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();
+
+// 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 = reactQuery.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.accountPaymentMethodsKey({
+            accountId,
+            token,
+        }));
+        if (cachedPaymentMethods) {
+            for (const paymentMethod of cachedPaymentMethods) {
+                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
+            }
+            queryClient.setQueryData(QueryKeyFactory.accountPaymentMethodsKey({
+                accountId,
+                token,
+            }), cachedPaymentMethods);
+        }
+    }
     react.useEffect(() => {
-        var _a, _b;
-        if (selectedPluginId) {
+        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]);
         }
-        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 jsxRuntime.jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
-}
+    }, [
+        paymentMethods,
+        defaultPaymentMethod,
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        queryClient,
+        accountId,
+        token,
+    ]);
+};
 
 const request = ({ method = 'GET', apiHost, endpoint, body, headers, token, }) => {
     const { apiEndpoint } = DEFAULT_CONFIG;
@@ -20055,222 +19991,232 @@ const invokePlugin = async ({ method, payload, plugin, token, apiHost, component
     throw new Error(error.message);
 };
 
-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] = react.useState(false);
-    const { apiHost } = react.useContext(BunnyContext);
+function useSetDefaultPaymentMethod(onError, onSuccess) {
+    // Context
+    const accountId = useAccountId();
     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);
+    const { apiHost } = react.useContext(BunnyContext);
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { paymentMethods } = usePaymentMethod({ accountId });
+    // Hooks
+    const showErrorNotification = useErrorNotification();
+    const showSuccessNotification = useSuccessNotification();
+    const queryClient = reactQuery.useQueryClient();
+    // State
+    const [loading, setLoading] = react.useState(false);
+    const setDefaultPaymentMethod = react.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;
         }
-        return undefined;
-    };
-    return { save, isSaving };
-}
-
-const MUTATION$4 = `
-  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 {
+        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,
+                method: 'assign_default_payment_method',
+                payload: {
+                    payment_method_id: paymentMethod.id,
+                    account_id: accountId,
+                },
+                token,
+                apiHost,
+            })
+                .then(() => {
+                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.accountPaymentMethodsKey({
+                        token,
+                        accountId,
+                    }),
+                });
+            })
+                .catch((error) => {
+                setLoading(false);
+                showErrorNotification(error.message, 'Error removing payment method');
+            })
+                .finally(() => {
+                setLoading(false);
+            });
+        }
+        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; });
+            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 { setDefaultPaymentMethod, loading };
+}
+
+function useRemovePaymentMethod(onPaymentMethodRemoved, onError) {
+    const queryClient = reactQuery.useQueryClient();
+    const showErrorNotification = useErrorNotification();
+    const showSuccessNotification = useSuccessNotification();
+    const accountId = useAccountId();
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const token = useToken();
+    const { apiHost } = react.useContext(BunnyContext);
+    const removePaymentMethod = react.useCallback(async (data) => {
+        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === String((_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, // TODO: type the plugin
+                method: 'remove_payment_method',
+                payload: {
+                    payment_method_id: data.id,
+                    account_id: accountId,
+                },
+                token,
+                apiHost,
+            })
+                .then(() => {
+                showSuccessNotification('Payment method was removed', 'Success');
+                queryClient.invalidateQueries({
+                    queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+                        token,
+                        accountId,
+                    }),
+                });
+                onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(data);
+            })
+                .catch((error) => {
+                showErrorNotification(error.message, 'Error removing payment method');
+            });
+        }
+        else {
+            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => {
+                var _a, _b;
+                const components = plugin.components;
+                return (_b = (_a = components === null || components === void 0 ? void 0 : components.frontend) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.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, onPaymentMethodRemoved, accountId, onError]);
+    return removePaymentMethod;
+}
+
+const StoredPaymentMethods_PaymentMethodsFragment = t(`
+    fragment StoredPaymentMethods_PaymentMethodsFragment on PaymentMethod {
+      ...MiniCreditCard_PaymentMethodFragment
+      id
+      plugin {
         id
-        amount
       }
     }
-  }
-`;
-const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData, token, apiHost, }) => {
-    const mutationVars = {
-        quoteId,
-        invoiceId,
-        paymentMethodId,
-    };
-    if (paymentMethodData) {
-        mutationVars.paymentMethodData = {
-            ...paymentMethodData,
-            metadata: paymentMethodData.metadata,
-        };
+  `, [MiniCreditCard_PaymentMethodFragment]);
+const showErrorNotification$d = useErrorNotification();
+function StoredPaymentMethods(props = {}) {
+    const { className } = props;
+    const accountId = useAccountId();
+    const { paymentMethods, isLoading: isPaymentMethodLoading } = usePaymentMethod({ accountId });
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { onSetDefaultPaymentMethod, onPaymentMethodRemoved } = usePaymentFormCallbacks();
+    // Custom hooks
+    const { setDefaultPaymentMethod: handleSetDefault, loading: setDefaultPaymentMethodLoading } = useSetDefaultPaymentMethod(message => {
+        showErrorNotification$d(message, 'Error setting default payment method');
+    }, () => {
+        onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
+    });
+    useAutoSetDefaultPaymentMethod({
+        handleSetDefault,
+        setDefaultPaymentMethodLoading,
+        enabled: !!paymentPlugins,
+    });
+    const handleRemovePaymentMethod = useRemovePaymentMethod(onPaymentMethodRemoved, message => {
+        showErrorNotification$d(message, 'Error removing payment method');
+    });
+    if (isPaymentMethodLoading) {
+        return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-p-4" });
     }
-    const response = await gqlRequest({
-        query: MUTATION$4,
-        token,
-        vars: mutationVars,
-        apiHost: apiHost,
+    return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 ${className}`, children: [paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.map(maskedPaymentMethod => {
+                const paymentMethod = readFragment(StoredPaymentMethods_PaymentMethodsFragment, maskedPaymentMethod);
+                return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: () => handleRemovePaymentMethod(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 && jsxRuntime.jsx(MiniCreditCard, {})] }));
+}
+
+const query$9 = 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
+          ...StoredPaymentMethods_PaymentMethodsFragment
+        }
+      }
+    }
+  `, [PaymentForm_PaymentMethodsFragment, StoredPaymentMethods_PaymentMethodsFragment]);
+const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
+    var _a, _b, _c;
+    const response = await execute(query$9, { 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 } = react.useContext(BunnyContext);
+    const token = useToken();
+    // Query
+    const { data, isLoading } = reactQuery.useQuery({
+        queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+            accountId,
+            token,
+        }),
+        queryFn: () => getPaymentMethods({ apiHost, token, accountId }),
+        staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+        enabled,
     });
-    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,
+        paymentMethods: data,
+        defaultPaymentMethod: data === null || data === void 0 ? void 0 : data.find(paymentMethod => paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault),
+        isLoading,
     };
 };
 
-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);
-
-var localizedFormat$2 = {exports: {}};
-
-var localizedFormat$1 = localizedFormat$2.exports;
-
-var hasRequiredLocalizedFormat;
-
-function requireLocalizedFormat () {
-	if (hasRequiredLocalizedFormat) return localizedFormat$2.exports;
-	hasRequiredLocalizedFormat = 1;
-	(function (module, exports) {
-		!function(e,t){module.exports=t();}(localizedFormat$1,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}})); 
-	} (localizedFormat$2));
-	return localizedFormat$2.exports;
-}
-
-var localizedFormatExports = requireLocalizedFormat();
-var localizedFormat = /*@__PURE__*/getDefaultExportFromCjs(localizedFormatExports);
-
-dayjs.extend(localizedFormat);
-const formatCurrency = (value, currencyIsoCode, decimals = 2) => {
-    if (value !== 0 && !value)
-        return '';
-    const currencyValue = typeof value === 'string' ? parseFloat(value) : value;
-    if (isNaN(currencyValue))
+/**
+ * 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 = react.createContext(null);
+    const StateProvider = ({ initialValue, children, }) => jsxRuntime.jsxs(StateContext.Provider, { value: useValue(initialValue), children: [" ", children, " "] });
+    const useContextState = () => {
+        const value = react.useContext(StateContext);
+        if (value === null) {
+            throw new Error('Provider missing');
+        }
         return value;
-    const localeOptions = {
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
     };
-    localeOptions.style = 'currency';
-    localeOptions.currency = currencyIsoCode;
-    return currencyValue.toLocaleString(navigator.language, localeOptions);
+    return [StateProvider, useContextState];
 };
 
-const getQuoteAmountDue_QuoteFragment = t(`
-    fragment getQuoteAmountDue_QuoteFragment on Quote {
-      amountDue
-      amount
-    }
-  `, []);
-const getQuoteAmountDue = (maskedQuote) => {
-    var _a;
-    const quote = readFragment(getQuoteAmountDue_QuoteFragment, maskedQuote);
-    return (_a = quote.amountDue) !== null && _a !== void 0 ? _a : quote.amount;
+const defaultCardDetails = {
+    number: '4242424242424242',
+    expiry: '',
+    cvc: '',
 };
+const useDemoPayCardDetailsState = (initialValue) => react.useState(initialValue !== null && initialValue !== void 0 ? initialValue : defaultCardDetails);
+const [DemoPayFormProvider, useDemoPayCardDetails] = createStateContext(useDemoPayCardDetailsState);
 
 const { useToken: useAntdToken$1 } = antd.theme;
 const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, accountId, }) => {
@@ -20412,6 +20358,277 @@ const useStripePlugin = (plugin, currencyId, accountId) => {
     return { stripe, options };
 };
 
+// Contexts
+const useSelectedPluginIdState = (id) => react.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 (jsxRuntime.jsx(SelectedPluginIdProvider, { initialValue: undefined, children: jsxRuntime.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 = react.useMemo(() => {
+        return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(plugin => plugin.id === selectedPluginId);
+    }, [paymentPlugins, selectedPluginId]);
+    react.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 jsxRuntime.jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
+}
+
+function StripeFormProvider({ children, currencyId, accountId, }) {
+    const plugin = useSelectedPlugin();
+    const { stripe, options } = useStripePlugin(plugin, currencyId, accountId);
+    return (jsxRuntime.jsx(reactStripeJs.Elements, { options: options, stripe: stripe, children: children }));
+}
+
+const MUTATION$4 = `
+  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$4,
+        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_QuoteFragment = t(`
+    fragment getQuoteAmountDue_QuoteFragment on Quote {
+      amountDue
+      amount
+    }
+  `, []);
+const getQuoteAmountDue = (maskedQuote) => {
+    var _a;
+    const quote = readFragment(getQuoteAmountDue_QuoteFragment, maskedQuote);
+    return (_a = quote.amountDue) !== null && _a !== void 0 ? _a : quote.amount;
+};
+
+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);
+
+var localizedFormat$2 = {exports: {}};
+
+var localizedFormat$1 = localizedFormat$2.exports;
+
+var hasRequiredLocalizedFormat;
+
+function requireLocalizedFormat () {
+	if (hasRequiredLocalizedFormat) return localizedFormat$2.exports;
+	hasRequiredLocalizedFormat = 1;
+	(function (module, exports) {
+		!function(e,t){module.exports=t();}(localizedFormat$1,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}})); 
+	} (localizedFormat$2));
+	return localizedFormat$2.exports;
+}
+
+var localizedFormatExports = requireLocalizedFormat();
+var localizedFormat = /*@__PURE__*/getDefaultExportFromCjs(localizedFormatExports);
+
+dayjs.extend(localizedFormat);
+const formatCurrency = (value, currencyIsoCode, decimals = 2) => {
+    if (value !== 0 && !value)
+        return '';
+    const currencyValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(currencyValue))
+        return value;
+    const localeOptions = {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    };
+    localeOptions.style = 'currency';
+    localeOptions.currency = currencyIsoCode;
+    return currencyValue.toLocaleString(navigator.language, localeOptions);
+};
+
+var PaymentType;
+(function (PaymentType) {
+    PaymentType["PAY"] = "PAY";
+    PaymentType["APPROVE_HOLD"] = "APPROVE_HOLD";
+    PaymentType["CHECKOUT_NO_PAYMENT"] = "CHECKOUT_NO_PAYMENT";
+    PaymentType["SAVE"] = "SAVE";
+})(PaymentType || (PaymentType = {}));
+
+// Contexts
+// TODO: use useSelector to get the values from the context so we don't have unnecessary re-renders
+const [PayableProvider, usePayable] = createValueContext();
+const PaymentProvider_QuoteFragment = t(`
+    fragment PaymentProvider_QuoteFragment on Quote {
+      id
+      currencyId
+      ...getQuoteAmountDue_QuoteFragment
+    }
+  `, [getQuoteAmountDue_QuoteFragment]);
+const PaymentProvider_InvoiceFragment = t(`
+    fragment PaymentProvider_InvoiceFragment on Invoice {
+      id
+      currencyId
+      amountDue
+    }
+  `);
+function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice, paymentHold, }) {
+    var _a, _b;
+    // Read fragments
+    const quote = readFragment(PaymentProvider_QuoteFragment, maskedQuote);
+    const invoice = readFragment(PaymentProvider_InvoiceFragment, maskedInvoice);
+    // State
+    const [isPaid, setIsPaid] = react.useState(false);
+    const getAmountDue = () => {
+        return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
+    };
+    const formattedAmountDue = () => {
+        var _a;
+        const amountDue = getAmountDue();
+        const currencyId = (_a = quote === null || quote === void 0 ? void 0 : quote.currencyId) !== null && _a !== void 0 ? _a : invoice === null || invoice === void 0 ? void 0 : invoice.currencyId;
+        return amountDue !== undefined && currencyId !== undefined
+            ? formatCurrency(amountDue, currencyId).toString()
+            : undefined;
+    };
+    // Validation checks
+    if (quote !== undefined && invoice !== undefined && paymentHold !== undefined) {
+        throw new Error('Either quote or invoice or paymentHold must be provided, not all');
+    }
+    function getPaymentType() {
+        if (getAmountDue() === undefined)
+            return PaymentType.SAVE;
+        if (getAmountDue() === 0)
+            return PaymentType.CHECKOUT_NO_PAYMENT;
+        return paymentHold
+            ? PaymentType.APPROVE_HOLD
+            : PaymentType.PAY;
+    }
+    const paymentType = getPaymentType();
+    const amountDue = getAmountDue();
+    const formattedAmountDueValue = formattedAmountDue();
+    return (jsxRuntime.jsx(PayableProvider, { value: {
+            quoteId: (_a = quote === null || quote === void 0 ? void 0 : quote.id) !== null && _a !== void 0 ? _a : undefined,
+            invoiceId: (_b = invoice === null || invoice === void 0 ? void 0 : invoice.id) !== null && _b !== void 0 ? _b : undefined,
+            paymentHold,
+            paymentType,
+            amountDue: amountDue !== null && amountDue !== void 0 ? amountDue : undefined,
+            formattedAmountDue: formattedAmountDueValue,
+            isPaid,
+            setIsPaid
+        }, children: children }));
+}
+
+function CheckoutNoPayment(props = {}) {
+    const { className, disabled } = props;
+    const { formattedAmountDue, quoteId } = usePayable();
+    const token = useToken();
+    const { apiHost } = react.useContext(BunnyContext);
+    const handleAllErrorFormats = useAllErrorFormats$1();
+    const { onPaymentSuccess } = usePaymentFormCallbacks();
+    const { mutate: checkoutNoPayment, isPending } = reactQuery.useMutation({
+        mutationFn: async () => {
+            const paymentRequired = formattedAmountDue ? parseFloat(formattedAmountDue) > 0 : true;
+            if (!quoteId)
+                throw new Error('Quote ID is required');
+            if (paymentRequired)
+                throw new Error('Payment is required');
+            return await checkout({ quoteId, token, apiHost });
+        },
+        onSuccess: () => {
+            onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess({});
+        },
+        onError: error => {
+            handleAllErrorFormats(error);
+        },
+    });
+    return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", loading: isPending, disabled: isPending || disabled, onClick: () => checkoutNoPayment(), type: "primary", children: isPending ? 'Processing...' : 'Complete Order' }) }));
+}
+
+const useShowPaymentDetailsState = (isOpen = false) => react.useState(isOpen);
+const [ShowPaymentDetailsProvider, useShowPaymentDetails] = createStateContext(useShowPaymentDetailsState);
+
 function useApproveHold$1({ onApproveHoldSuccess, onApproveHoldError, }) {
     // Hooks
     const [isApprovingHold, setIsApprovingHold] = react.useState(false);
@@ -20444,47 +20661,6 @@ function useApproveHold$1({ onApproveHoldSuccess, onApproveHoldError, }) {
     return { approveHold, isApprovingHold };
 }
 
-// Used for Signup component. Signup needs a custom checkout function
-const [CustomCheckoutFunctionProvider, useCustomCheckoutFunction] = createValueContext();
-
-const showErrorNotification$a = useErrorNotification();
-function usePay$1({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, }) {
-    const { apiHost } = react.useContext(BunnyContext);
-    const customCheckoutFunction = useCustomCheckoutFunction();
-    const token = useToken();
-    const [isPaying, setIsPaying] = react.useState(false);
-    const pay = async (paymentMethodId) => {
-        try {
-            setIsPaying(true);
-            if (customCheckoutFunction) {
-                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                    showErrorNotification$a('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,
-                    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] = react.useState(false);
@@ -20517,209 +20693,147 @@ function useApproveHold({ onApproveHoldSuccess, onApproveHoldError, }) {
     return { approveHold, isApprovingHold };
 }
 
-const showErrorNotification$9 = useErrorNotification();
-function usePay({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, }) {
-    // Hooks
-    const { apiHost } = react.useContext(BunnyContext);
-    const customCheckoutFunction = useCustomCheckoutFunction();
-    const token = useToken();
-    const [isPaying, setIsPaying] = react.useState(false);
-    const pay = async (paymentMethodId) => {
-        try {
-            setIsPaying(true);
-            if (customCheckoutFunction) {
-                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
-                    showErrorNotification$9('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 {
-                if (!quoteId && !(invoice === null || invoice === void 0 ? void 0 : invoice.id)) {
-                    showErrorNotification$9('Quote ID or Invoice ID is required');
-                    return;
-                }
-                const response = await checkout({
-                    invoiceId: invoice === null || invoice === void 0 ? void 0 : invoice.id,
-                    quoteId,
-                    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 };
-}
-
-var PaymentType;
-(function (PaymentType) {
-    PaymentType["PAY"] = "PAY";
-    PaymentType["APPROVE_HOLD"] = "APPROVE_HOLD";
-    PaymentType["CHECKOUT_NO_PAYMENT"] = "CHECKOUT_NO_PAYMENT";
-})(PaymentType || (PaymentType = {}));
-
-const handleAllErrorFormats$3 = useAllErrorFormats();
-const showErrorNotification$8 = useErrorNotification();
-const useHandlePayment_QuoteFragment = t(`
-    fragment useHandlePayment_QuoteFragment on Quote {
-      id
-      amount
-      currencyId
-      ...getQuoteAmountDue_QuoteFragment
-    }
-  `, [getQuoteAmountDue_QuoteFragment]);
-const useHandlePayment = ({ quote: maskedQuote, invoice, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldPrecondition, plugin, paymentHoldOptions, accountId, }) => {
-    // Read fragments
-    const quote = readFragment(useHandlePayment_QuoteFragment, maskedQuote);
-    // Context
-    const { defaultPaymentMethod } = usePaymentMethod({ accountId });
-    const { apiHost } = react.useContext(BunnyContext);
-    const token = useToken();
-    // State
-    const [isPaid, setIsPaid] = react.useState(false);
-    const getAmountDue = () => {
-        return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    };
-    const formattedAmountDue = () => {
-        var _a;
-        const amountDue = getAmountDue();
-        const currencyId = (_a = quote === null || quote === void 0 ? void 0 : quote.currencyId) !== null && _a !== void 0 ? _a : invoice === null || invoice === void 0 ? void 0 : invoice.currencyId;
-        return amountDue !== undefined && currencyId !== undefined ? formatCurrency(amountDue, currencyId).toString() : undefined;
-    };
-    // Validation checks
-    if (quote !== undefined && invoice !== undefined) {
-        throw new Error('Either quote or invoice must be provided, not both');
-    }
-    // Payment hooks
-    const { pay: payDemoPay, isPaying: isPayingDemoPay } = usePay$1({
-        onPaymentSuccess: handlePaymentSuccess,
-        onPaymentError: error => {
-            handleAllErrorFormats$3(error);
-        },
-        quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-        invoice: invoice,
-        plugin,
-    });
-    const { pay: payStripe, isPaying: isPayingStripe } = usePay({
-        onPaymentSuccess: handlePaymentSuccess,
-        onPaymentError: error => {
-            handleAllErrorFormats$3(error);
-        },
-        quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
-        invoice: invoice,
-        plugin,
-    });
-    // Approve hold hooks
+const showErrorNotification$c = useErrorNotification();
+function usePaymentHold({ plugin, onPaymentHoldSuccess, onPaymentHoldError, }) {
+    var _a, _b, _c;
+    const pluginName = (_c = (_b = (_a = plugin === null || plugin === void 0 ? void 0 : 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 { approveHold: approveHoldStripe, isApprovingHold: isApprovingHoldStripe } = useApproveHold({
-        onApproveHoldSuccess: response => {
-            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
-        },
-        onApproveHoldError: error => {
-            handleAllErrorFormats$3(error);
-        },
+        onApproveHoldSuccess: onPaymentHoldSuccess,
+        onApproveHoldError: onPaymentHoldError,
     });
     const { approveHold: approveHoldDemoPay, isApprovingHold: isApprovingHoldDemoPay } = useApproveHold$1({
-        onApproveHoldSuccess: response => {
-            onPaymentHoldSuccess === null || onPaymentHoldSuccess === void 0 ? void 0 : onPaymentHoldSuccess(response);
-        },
-        onApproveHoldError: error => {
-            handleAllErrorFormats$3(error);
-        },
-    });
-    // Mutations
-    const { mutate: checkoutNoPayment, isPending: isCheckingOutNoPayment } = reactQuery.useMutation({
-        mutationFn: async () => {
-            const amountDue = formattedAmountDue();
-            const paymentRequired = amountDue ? parseFloat(amountDue) > 0 : true;
-            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
-                throw new Error('Quote ID 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$3(error);
-        },
+        onApproveHoldSuccess: onPaymentHoldSuccess,
+        onApproveHoldError: onPaymentHoldError,
     });
-    const handleApproveHold = async (overridePaymentMethodId) => {
-        var _a, _b, _c, _d;
-        if (paymentHoldPrecondition) {
-            const allowed = await paymentHoldPrecondition();
-            if (!allowed)
-                return;
-        }
-        const paymentMethodId = overridePaymentMethodId !== null && overridePaymentMethodId !== void 0 ? overridePaymentMethodId : defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id;
+    const approveHold = async ({ quote, paymentMethodId, }) => {
+        if (!pluginName)
+            return showErrorNotification$c('plugin name is required');
         if (!plugin)
-            return showErrorNotification$8('plugin is undefined');
-        if (!(quote === null || quote === void 0 ? void 0 : quote.id) || !(quote === null || quote === void 0 ? void 0 : quote.amount))
-            return showErrorNotification$8('quote id and amount are required to approve hold');
-        if (!paymentMethodId)
-            return;
-        switch ((_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) {
+            return showErrorNotification$c('plugin is required');
+        switch (pluginName) {
             case 'StripePayment':
-                await approveHoldStripe({
-                    plugin,
-                    quote: { id: quote.id, amount: quote.amount },
-                    paymentMethodId,
-                });
-                break;
+                await approveHoldStripe({ plugin, quote, paymentMethodId });
+                return;
             case 'DemoPayPayment':
-                await approveHoldDemoPay({
+                await approveHoldDemoPay({ plugin, quote, paymentMethodId });
+                return;
+            default:
+                showErrorNotification$c(`Payment holds are not supported by ${pluginName}`);
+                return;
+        }
+    };
+    return {
+        approveHold,
+        isApprovingHold: isApprovingHoldStripe || isApprovingHoldDemoPay,
+    };
+}
+
+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;
+};
+
+const TEST_CARD = '4242424242424242';
+function useSave$2({ onSaveSuccess, onSaveError, accountId, }) {
+    const [isSaving, setIsSaving] = react.useState(false);
+    const { apiHost } = react.useContext(BunnyContext);
+    const token = useToken();
+    const plugin = useSelectedPlugin();
+    const [cardDetails, setCardDetails] = useDemoPayCardDetails();
+    const save = async () => {
+        try {
+            validateCardDetails();
+            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,
-                    quote: { id: quote.id, amount: quote.amount },
+                    token: response.token,
+                    savePaymentMethod: true,
+                },
+                savedPaymentMethodResponse: {
                     paymentMethodId,
-                });
-                break;
-            default:
-                showErrorNotification$8(`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;
+                },
+            });
+            setCardDetails({ number: cardDetails.number, expiry: '', cvc: '' });
+            return paymentMethodId;
         }
-    };
-    function handlePaymentSuccess(response) {
-        setIsPaid(true);
-        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
-    }
-    const handlePayment = async (overridePaymentMethodId) => {
-        var _a, _b;
-        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(overridePaymentMethodId);
-                break;
-            case 'DemoPayPayment':
-                await payDemoPay(overridePaymentMethodId);
-                break;
+        catch (error) {
+            onSaveError === null || onSaveError === void 0 ? void 0 : onSaveError(error);
         }
+        finally {
+            setIsSaving(false);
+        }
+        return undefined;
     };
-    return {
-        handleApproveHold,
-        handlePayment,
-        handleCheckoutNoPayment: checkoutNoPayment,
-        isPaying: isCheckingOutNoPayment ||
-            isPayingDemoPay ||
-            isPayingStripe ||
-            isApprovingHoldDemoPay ||
-            isApprovingHoldStripe,
-        isPaid,
-        paymentType: paymentHoldOptions.payToAccept ? PaymentType.APPROVE_HOLD : getAmountDue() === 0 ? PaymentType.CHECKOUT_NO_PAYMENT : PaymentType.PAY,
-        formattedAmountDue: formattedAmountDue(),
-    };
-};
+    function validateCardDetails() {
+        if (cardDetails.number !== TEST_CARD)
+            throw new Error('Only the card number 4242 4242 4242 4242 will be accepted.');
+        if (!isValidExpiry(cardDetails.expiry))
+            throw new Error('Invalid expiry date');
+        if (isCardExpired(cardDetails.expiry))
+            throw new Error('Card is expired');
+        if (cardDetails.cvc.length !== 3)
+            throw new Error('Invalid CVC');
+    }
+    return { save, isSaving };
+}
 
-function useSave({ onSaveSuccess, onSaveError, accountId, }) {
+function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
     // Hooks
     const [isSaving, setIsSaving] = react.useState(false);
     const elements = reactStripeJs.useElements();
@@ -20795,169 +20909,176 @@ function useSave({ onSaveSuccess, onSaveError, accountId, }) {
     return { save, createStripePaymentMethodId, isSaving };
 }
 
-const useShowPaymentDetailsState = (isOpen = false) => react.useState(isOpen);
-const [ShowPaymentDetailsProvider, useShowPaymentDetails] = createStateContext(useShowPaymentDetailsState);
-
-const handleAllErrorFormats$2 = useAllErrorFormats();
-const showErrorNotification$7 = useErrorNotification();
-// Contexts
-const [FormattedAmountDueProvider, useFormattedAmountDue] = createValueContext();
-const [PaymentTypeProvider, usePaymentType] = createValueContext();
-const [IsPayingProvider, useIsPaying] = createValueContext();
-const [HandlePaymentFormSubmitProvider, useHandlePaymentFormSubmit] = createValueContext();
-const [IsSavingProvider, useIsSaving] = createValueContext();
-// Used for PaymentMethodFooter to disable pay button if payment is already successful
-const [IsPaidProvider, useIsPaid] = 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();
-// Optional external control to disable the pay button (e.g. while quote is updating)
-const [IsPayButtonDisabledProvider, useIsPayButtonDisabled] = createValueContext();
-const PaymentProvider_QuoteFragment = t(`
-    fragment PaymentProvider_QuoteFragment on Quote {
-      id
-      ...useHandlePayment_QuoteFragment
-    }
-  `, [useHandlePayment_QuoteFragment]);
-function PaymentProvider({ children, accountId, quote: maskedQuote, invoice, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldPrecondition, paymentHoldOptions, onSavePaymentMethod, }) {
+const handleAllErrorFormats$3 = useAllErrorFormats();
+const showErrorNotification$b = useErrorNotification();
+function useSave({ accountId, onSaveSuccess, onSaveError, invalidatePaymentMethodsQuery = true, }) {
     var _a, _b, _c;
-    // Read fragments
-    const quote = readFragment(PaymentProvider_QuoteFragment, maskedQuote);
-    // Context
-    const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
     const selectedPlugin = useSelectedPlugin();
-    // Hooks
     const queryClient = reactQuery.useQueryClient();
     const token = useToken();
-    const { handlePayment, handleApproveHold, handleCheckoutNoPayment, isPaying, isPaid, 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);
-        },
-        onPaymentHoldSuccess,
-        paymentHoldPrecondition,
-        plugin: selectedPlugin, // TODO: type the response to PluginData
-        paymentHoldOptions,
+    const onSaveErrorFinal = onSaveError !== null && onSaveError !== void 0 ? onSaveError : handleAllErrorFormats$3;
+    // Derived state
+    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 { save: saveDemoPay, isSaving: isSavingDemoPay } = useSave$2({
         accountId,
-    });
-    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);
+        onSaveSuccess: response => {
+            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess(response);
+            if (invalidatePaymentMethodsQuery) {
+                queryClient.invalidateQueries({
+                    queryKey: QueryKeyFactory.accountPaymentMethodsKey({ accountId, token }),
+                });
+            }
         },
-        onSaveError: handleAllErrorFormats$2,
-        accountId,
+        onSaveError: onSaveErrorFinal,
     });
-    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$2,
+    const { save: saveStripe, isSaving: isSavingStripe } = useSave$1({
         accountId,
+        onSaveSuccess: response => {
+            onSaveSuccess === null || onSaveSuccess === void 0 ? void 0 : onSaveSuccess(response);
+            if (invalidatePaymentMethodsQuery) {
+                queryClient.invalidateQueries({
+                    queryKey: QueryKeyFactory.accountPaymentMethodsKey({ accountId, token }),
+                });
+            }
+        },
+        onSaveError: onSaveErrorFinal,
     });
-    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') {
+    const save = async () => {
+        var _a, _b, _c;
+        if (pluginName === 'StripePayment')
             return await saveStripe();
-        }
-        else if (pluginName === 'DemoPayPayment') {
-            return await saveDemoPay(demoPayCardDetails);
-        }
-        else {
-            showErrorNotification$7(`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;
-        }
+        if (pluginName === 'DemoPayPayment')
+            return await saveDemoPay();
+        showErrorNotification$b(`Can not find form for plugin ${(_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}`);
+        return undefined;
     };
-    const handleApproveHoldFlow = async (savedPaymentMethodId) => {
-        var _a, _b;
-        if (pluginName === 'StripePayment') {
-            await handleApproveHold(savedPaymentMethodId);
+    return { save, isSaving: isSavingDemoPay || isSavingStripe };
+}
+
+// Used for Signup component. Signup needs a custom checkout function
+const [CustomCheckoutFunctionProvider, useCustomCheckoutFunction] = createValueContext();
+
+const showErrorNotification$a = useErrorNotification();
+function usePay$2({ onPaymentSuccess, onPaymentError, quoteId, invoiceId, plugin, }) {
+    const { apiHost } = react.useContext(BunnyContext);
+    const customCheckoutFunction = useCustomCheckoutFunction();
+    const token = useToken();
+    const [isPaying, setIsPaying] = react.useState(false);
+    const pay = async (paymentMethodId) => {
+        try {
+            setIsPaying(true);
+            if (customCheckoutFunction) {
+                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                    showErrorNotification$a('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,
+                    quoteId,
+                    paymentMethodId,
+                    token,
+                    apiHost,
+                });
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+            }
         }
-        else if (pluginName === 'DemoPayPayment') {
-            await handleApproveHold(savedPaymentMethodId);
+        catch (error) {
+            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
         }
-        else {
-            showErrorNotification$7(`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}`);
+        finally {
+            setIsPaying(false);
         }
     };
-    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);
+    return { pay, isPaying };
+}
+
+const showErrorNotification$9 = useErrorNotification();
+function usePay$1({ onPaymentSuccess, onPaymentError, quoteId, invoiceId, plugin, }) {
+    // Hooks
+    const { apiHost } = react.useContext(BunnyContext);
+    const customCheckoutFunction = useCustomCheckoutFunction();
+    const token = useToken();
+    const [isPaying, setIsPaying] = react.useState(false);
+    const pay = async (paymentMethodId) => {
+        try {
+            setIsPaying(true);
+            if (customCheckoutFunction) {
+                if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
+                    showErrorNotification$9('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 {
-                if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
-                    showErrorNotification$7('Default payment method ID is undefined');
+                if (!quoteId && !invoiceId) {
+                    showErrorNotification$9('Quote ID or Invoice ID is required');
                     return;
                 }
-                await handlePayment(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id);
+                const response = await checkout({
+                    invoiceId,
+                    quoteId,
+                    paymentMethodId,
+                    token,
+                    apiHost,
+                });
+                onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
             }
-            return;
+        }
+        catch (error) {
+            onPaymentError === null || onPaymentError === void 0 ? void 0 : onPaymentError(error);
+        }
+        finally {
+            setIsPaying(false);
         }
     };
-    const providers = [
-        [FormattedAmountDueProvider, { value: formattedAmountDue }],
-        [PaymentTypeProvider, { value: paymentType }],
-        [IsPayingProvider, { value: isPaying }],
-        [HandlePaymentFormSubmitProvider, { value: handlePaymentFormSubmit }],
-        [IsSavingProvider, { value: isSavingDemoPay || isSavingStripe }],
-        [IsPaidProvider, { value: isPaid }],
-        [AccountIdProvider, { value: accountId }],
-    ];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), children) }));
+    return { pay, isPaying };
 }
-function StripeWrapper({ children, currencyId, accountId, }) {
-    const plugin = useSelectedPlugin();
-    const { stripe, options } = useStripePlugin(plugin, currencyId, accountId);
-    return (jsxRuntime.jsx(reactStripeJs.Elements, { options: options, stripe: stripe, children: children }));
+
+const showErrorNotification$8 = useErrorNotification();
+function usePay({ plugin, quoteId, invoiceId, onPaymentSuccess, onPaymentError, }) {
+    var _a, _b, _c;
+    const pluginName = (_c = (_b = (_a = plugin === null || plugin === void 0 ? void 0 : 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 { pay: payStripe, isPaying: isPayingStripe } = usePay$1({
+        onPaymentSuccess,
+        onPaymentError,
+        quoteId,
+        invoiceId,
+        plugin,
+    });
+    const { pay: payDemoPay, isPaying: isPayingDemoPay } = usePay$2({
+        onPaymentSuccess,
+        onPaymentError,
+        quoteId,
+        invoiceId,
+        plugin,
+    });
+    const pay = async (paymentMethodId) => {
+        if (!pluginName)
+            return showErrorNotification$8('plugin name is required');
+        switch (pluginName) {
+            case 'StripePayment':
+                await payStripe(paymentMethodId);
+                return;
+            case 'DemoPayPayment':
+                await payDemoPay(paymentMethodId);
+                return;
+            default:
+                showErrorNotification$8(`Payments are not supported by ${pluginName}`);
+                return;
+        }
+    };
+    return { pay, isPaying: isPayingStripe || isPayingDemoPay };
 }
 
-function usePaymentButtonText() {
-    const formattedAmountDue = useFormattedAmountDue();
-    const paymentType = usePaymentType();
-    const isPaid = useIsPaid();
-    const isSaving = useIsSaving();
-    const isPaying = useIsPaying();
-    const isProcessing = isSaving || isPaying;
+function usePaymentButtonText(props = {}) {
+    const { isSaving, isPaying, isApprovingHold } = props;
+    const { formattedAmountDue, paymentType, isPaid } = usePayable();
+    const isProcessing = isSaving || isPaying || isApprovingHold;
     // If payment is already successful, show the amount paid
     if (isPaid) {
         return 'Paid ' + (formattedAmountDue !== null && formattedAmountDue !== void 0 ? formattedAmountDue : '');
@@ -20972,34 +21093,95 @@ function usePaymentButtonText() {
     return paymentTypeText + ' ' + (formattedAmountDue !== null && formattedAmountDue !== void 0 ? formattedAmountDue : '');
 }
 
-const CheckoutFooter = () => {
-    const isPaid = useIsPaid();
-    const isMobile = useIsMobile();
-    const isPaying = useIsPaying();
-    const isPayButtonDisabled = useIsPayButtonDisabled();
-    const paymentButtonText = usePaymentButtonText();
-    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
-    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying || isPaid || isPayButtonDisabled, onClick: () => onPaymentFormSubmit(), size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
-};
-
+const handleAllErrorFormats$2 = useAllErrorFormats();
+const showErrorNotification$7 = useErrorNotification();
+function Pay(props = {}) {
+    const { disabled } = props;
+    const isMobile = useIsMobile();
+    const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
+    const selectedPlugin = useSelectedPlugin();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid } = usePayable();
+    const accountId = useAccountId();
+    const { defaultPaymentMethod } = usePaymentMethod({ accountId });
+    const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
+    const { save, isSaving } = useSave({
+        accountId,
+        onSaveSuccess: (response) => {
+            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+        },
+        onSaveError: handleAllErrorFormats$2,
+        invalidatePaymentMethodsQuery: true,
+    });
+    const { pay, isPaying } = usePay({
+        plugin: selectedPlugin,
+        quoteId,
+        invoiceId,
+        onPaymentSuccess: (response) => {
+            setIsPaid(true);
+            setShowPaymentDetailsForm(false);
+            onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+        },
+        onPaymentError: error => handleAllErrorFormats$2(error),
+    });
+    const { approveHold, isApprovingHold } = usePaymentHold({
+        plugin: selectedPlugin,
+        onPaymentHoldSuccess: onPaymentHoldSuccess,
+        onPaymentHoldError: error => handleAllErrorFormats$2(error),
+    });
+    const paymentButtonText = usePaymentButtonText({ isSaving, isPaying, isApprovingHold });
+    async function handlePayment() {
+        if (paymentType === PaymentType.APPROVE_HOLD) {
+            if (paymentHoldPrecondition) {
+                const allowed = await paymentHoldPrecondition();
+                if (!allowed)
+                    return;
+            }
+            if (!paymentHold) {
+                showErrorNotification$7('Payment hold is undefined');
+                return;
+            }
+            // If payment details form is shown, save payment method first, then approve hold
+            if (showPaymentDetailsForm) {
+                const savedPaymentMethodId = await save();
+                if (!savedPaymentMethodId) {
+                    showErrorNotification$7('Saved payment method ID is undefined');
+                    return;
+                }
+                await approveHold({ quote: { id: paymentHold.quoteId, amount: paymentHold.amountToHold }, paymentMethodId: savedPaymentMethodId });
+                return;
+            }
+            if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
+                showErrorNotification$7('Default payment method ID is undefined');
+                return;
+            }
+            await approveHold({ quote: { id: paymentHold.quoteId, amount: paymentHold.amountToHold }, paymentMethodId: defaultPaymentMethod.id });
+            return;
+        }
+        if (paymentType === PaymentType.PAY) {
+            if (showPaymentDetailsForm) {
+                // If paying and showing payment method form, save payment method first, then pay (1 click for user convenience)
+                const savedPaymentMethodId = await save();
+                if (savedPaymentMethodId) {
+                    await pay(savedPaymentMethodId);
+                }
+            }
+            else {
+                if (!(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id)) {
+                    showErrorNotification$7('Default payment method ID is undefined');
+                    return;
+                }
+                await pay(defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.id);
+            }
+            return;
+        }
+    }
+    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying || isApprovingHold || isSaving || disabled, loading: isPaying || isApprovingHold || isSaving, onClick: handlePayment, size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
+}
+
 const defaultStyled = typeof styled === "function" ? styled : styled.default;
 // !!! This is a workaround to avoid the issue with styled-components not supporting ESM
 // Workaround from https://github.com/styled-components/styled-components/issues/3437#issuecomment-1103085056
 
-function PaymentMethodFooter({ onSubmit, noPadding, }) {
-    const isPaying = useIsPaying();
-    const isSaving = useIsSaving();
-    const formattedAmountDue = useFormattedAmountDue();
-    const paymentButtonText = usePaymentButtonText();
-    const isMobile = useIsMobile();
-    const [, setShowPaymentMethodForm] = useShowPaymentDetails();
-    // If amount due is undefined, show the save button
-    const payableAvailable = formattedAmountDue !== undefined;
-    const saveButtonText = isSaving ? 'Saving' : 'Save';
-    const buttonText = payableAvailable ? paymentButtonText : saveButtonText;
-    return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-gap-2 ${noPadding ? '' : 'pt-6'}`, children: [jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }), jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isSaving || isPaying, loading: isSaving || isPaying, onClick: onSubmit, size: isMobile ? 'large' : 'middle', type: "primary", children: buttonText })] }));
-}
-
 const DemoPayCardCvc = ({ autoFocus, onChange, placeholder, value, }) => {
     const onKeyPress = (event) => {
         if (!isDigit(event.key) && !isValidKey(event.keyCode))
@@ -21039,46 +21221,19 @@ const DemoPayExpiry = ({ autoFocus, onChange, placeholder, value, }) => {
 };
 
 const { Text: Text$C } = antd.Typography;
-const handleAllErrorFormats$1 = useAllErrorFormats();
-const TEST_CARD = '4242424242424242';
 const DemoPayForm = () => {
-    // Context
     const { darkMode } = react.useContext(BunnyContext);
-    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
-    const [cardDetails, setCardDetails] = react.useState({
-        number: '4242424242424242',
-        expiry: '',
-        cvc: '',
-    });
-    function onSubmit() {
-        try {
-            validateCardDetails();
-            onPaymentFormSubmit(cardDetails);
-        }
-        catch (error) {
-            handleAllErrorFormats$1(error);
-        }
-    }
-    function validateCardDetails() {
-        if (cardDetails.number !== TEST_CARD)
-            throw new Error('Only the card number 4242 4242 4242 4242 will be accepted.');
-        if (!isValidExpiry(cardDetails.expiry))
-            throw new Error('Invalid expiry date');
-        if (isCardExpired(cardDetails.expiry))
-            throw new Error('Card is expired');
-        if (cardDetails.cvc.length !== 3)
-            throw new Error('Invalid CVC');
-    }
+    const [cardDetails, setCardDetails] = useDemoPayCardDetails();
     const onCardNumberChange = (number) => {
-        setCardDetails({ ...cardDetails, number });
+        setCardDetails(prev => ({ ...prev, number }));
     };
     const onCardExpiryChange = (expiry) => {
-        setCardDetails({ ...cardDetails, expiry });
+        setCardDetails(prev => ({ ...prev, expiry }));
     };
     const onCardCvcChange = (cvc) => {
-        setCardDetails({ ...cardDetails, cvc });
+        setCardDetails(prev => ({ ...prev, cvc }));
     };
-    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxRuntime.jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsxRuntime.jsx(Text$C, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(PaymentMethodFooter, { onSubmit: onSubmit })] }));
+    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxRuntime.jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsxRuntime.jsx(Text$C, { children: "DemoPay is for testing only." })] }));
 };
 const StyledInputs = defaultStyled.div `
   .ant-input {
@@ -21090,8 +21245,6 @@ const StyledInputs = defaultStyled.div `
 `;
 
 const StripeForm = () => {
-    // Context
-    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
     // State
     const [isIdealWarningOpen, setIsIdealWarningOpen] = react.useState(false);
     const idealWarningHasShown = react.useRef(false);
@@ -21103,25 +21256,19 @@ const StripeForm = () => {
     };
     return (jsxRuntime.jsxs("form", { children: [jsxRuntime.jsx(reactStripeJs.PaymentElement, { options: {
                     layout: { type: 'accordion' },
-                }, onChange: onChange }), jsxRuntime.jsx(PaymentMethodFooter, { onSubmit: onPaymentFormSubmit }), jsxRuntime.jsx(IdealWarningModal, { isOpen: isIdealWarningOpen, onClose: () => setIsIdealWarningOpen(false) })] }));
+                }, onChange: onChange }), jsxRuntime.jsx(IdealWarningModal, { isOpen: isIdealWarningOpen, onClose: () => setIsIdealWarningOpen(false) })] }));
 };
 function IdealWarningModal({ isOpen, onClose }) {
     return (jsxRuntime.jsx(antd.Modal, { open: isOpen, onCancel: onClose, footer: jsxRuntime.jsx(antd.Button, { type: "primary", onClick: onClose, children: "Ok" }), children: jsxRuntime.jsx("div", { className: "bunny-p-4", children: "iDEAL will charge a 1 cent fee when storing this payment method. You will be refunded later." }) }));
 }
 
-const PaymentMethodDetails = () => {
-    var _a, _b;
-    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 jsxRuntime.jsx(StripeForm, {});
-        case 'DemoPayPayment':
-            return jsxRuntime.jsx(DemoPayForm, {});
-        default:
-            console.warn('Can not find form for plugin', selectedPlugin);
-            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-};
+const [PaymentMethodFormVisibilityProvider, usePaymentMethodFormVisibility] = createValueContext();
+
+function Cancel() {
+    const isMobile = useIsMobile();
+    const [, setShowPaymentMethodForm] = useShowPaymentDetails();
+    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }));
+}
 
 const CardIcon = ({ className }) => {
     return (jsxRuntime.jsxs("svg", { className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
@@ -21156,48 +21303,72 @@ const PaymentOptionContainer = defaultStyled.div `
   }
 `;
 
-// Automatically sets the default payment method if there is none currently set
-const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMethodLoading, enabled = true, }) => {
+const handleAllErrorFormats$1 = useAllErrorFormats();
+function Save() {
     const accountId = useAccountId();
-    const token = useToken();
-    const queryClient = reactQuery.useQueryClient();
-    const { paymentMethods, defaultPaymentMethod } = usePaymentMethod({
+    const isMobile = useIsMobile();
+    const { onSavePaymentMethod } = usePaymentFormCallbacks();
+    const [_, setShowPaymentDetailsForm] = useShowPaymentDetails();
+    const { save: handleSave, isSaving } = useSave({
         accountId,
+        onSaveSuccess: (response) => {
+            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+            setShowPaymentDetailsForm(false);
+        },
+        onSaveError: handleAllErrorFormats$1,
+        invalidatePaymentMethodsQuery: true,
     });
-    // Set the default payment method on the cache. Prevents 'handleSetDefault' from being called too many times.
-    function setDefaultPaymentMethodOnCache(targetPaymentMethod) {
-        let cachedPaymentMethods = queryClient.getQueryData(QueryKeyFactory.accountPaymentMethodsKey({
-            accountId,
-            token,
-        }));
-        if (cachedPaymentMethods) {
-            for (const paymentMethod of cachedPaymentMethods) {
-                paymentMethod.isDefault = paymentMethod.id === targetPaymentMethod.id;
-            }
-            queryClient.setQueryData(QueryKeyFactory.accountPaymentMethodsKey({
-                accountId,
-                token,
-            }), cachedPaymentMethods);
+    const saveButtonText = isSaving ? 'Saving' : 'Save';
+    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isSaving, loading: isSaving, onClick: handleSave, size: isMobile ? 'large' : 'middle', type: "primary", children: saveButtonText }));
+}
+
+const showErrorNotification$6 = useErrorNotification();
+function PaymentMethodDetailsRoot(props = {}) {
+    var _a, _b;
+    const { footer } = props;
+    const { showPaymentMethodForm, setShowPaymentMethodForm } = usePaymentMethodFormVisibility();
+    const selectedPlugin = useSelectedPlugin();
+    const accountId = useAccountId();
+    const { paymentMethods } = usePaymentMethod({ accountId });
+    const { paymentPlugins } = usePaymentPlugins(accountId);
+    function handleClickAddPaymentMethod() {
+        if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
+            showErrorNotification$6('No payment plugins available', 'Error adding payment method');
+        }
+        else {
+            setShowPaymentMethodForm(true);
         }
     }
+    // Automatically show the payment method form if there are no payment methods
     react.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]);
+        if ((paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) === 0) {
+            setShowPaymentMethodForm(true);
         }
-    }, [
-        paymentMethods,
-        defaultPaymentMethod,
-        handleSetDefault,
-        setDefaultPaymentMethodLoading,
-        queryClient,
-        accountId,
-        token,
-    ]);
+    }, [paymentMethods]);
+    return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col", children: jsxRuntime.jsx(antd.Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
+                {
+                    key: '1',
+                    showArrow: false,
+                    label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
+                    children: (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsxRuntime.jsx(PaymentMethodSelector, {}), selectedPlugin && (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col", children: getPaymentMethodForm((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) })), footer] })),
+                },
+            ] }) }));
+}
+const getPaymentMethodForm = (pluginName) => {
+    switch (pluginName) {
+        case 'StripePayment':
+            return jsxRuntime.jsx(StripeForm, {});
+        case 'DemoPayPayment':
+            return jsxRuntime.jsx(DemoPayForm, {});
+        default:
+            console.warn('Can not find form for plugin', pluginName);
+            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
 };
+const PaymentMethodDetails = Object.assign(PaymentMethodDetailsRoot, {
+    Cancel,
+    Save
+});
 
 const query$8 = t(`
   query GetCurrentUserData {
@@ -21255,113 +21426,6 @@ function usePayableCurrency({ payableCurrencyId, accountCurrencyId }) {
     return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
 }
 
-function useRemovePaymentMethod(onPaymentMethodRemoved, onError) {
-    const queryClient = reactQuery.useQueryClient();
-    const showErrorNotification = useErrorNotification();
-    const showSuccessNotification = useSuccessNotification();
-    const accountId = useAccountId();
-    const { paymentPlugins } = usePaymentPlugins(accountId);
-    const token = useToken();
-    const { apiHost } = react.useContext(BunnyContext);
-    const removePaymentMethod = react.useCallback(async (data) => {
-        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === String((_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, // TODO: type the plugin
-                method: 'remove_payment_method',
-                payload: {
-                    payment_method_id: data.id,
-                    account_id: accountId,
-                },
-                token,
-                apiHost,
-            })
-                .then(() => {
-                showSuccessNotification('Payment method was removed', 'Success');
-                queryClient.invalidateQueries({
-                    queryKey: QueryKeyFactory.accountPaymentMethodsKey({
-                        token,
-                        accountId,
-                    }),
-                });
-                onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(data);
-            })
-                .catch((error) => {
-                showErrorNotification(error.message, 'Error removing payment method');
-            });
-        }
-        else {
-            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => {
-                var _a, _b;
-                const components = plugin.components;
-                return (_b = (_a = components === null || components === void 0 ? void 0 : components.frontend) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.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, onPaymentMethodRemoved, accountId, onError]);
-    return removePaymentMethod;
-}
-
-function useSetDefaultPaymentMethod(onError, onSuccess) {
-    // Context
-    const accountId = useAccountId();
-    const token = useToken();
-    const { apiHost } = react.useContext(BunnyContext);
-    const { paymentPlugins } = usePaymentPlugins(accountId);
-    const { paymentMethods } = usePaymentMethod({ accountId });
-    // Hooks
-    const showErrorNotification = useErrorNotification();
-    const showSuccessNotification = useSuccessNotification();
-    const queryClient = reactQuery.useQueryClient();
-    // State
-    const [loading, setLoading] = react.useState(false);
-    const setDefaultPaymentMethod = react.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,
-                method: 'assign_default_payment_method',
-                payload: {
-                    payment_method_id: paymentMethod.id,
-                    account_id: accountId,
-                },
-                token,
-                apiHost,
-            })
-                .then(() => {
-                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.accountPaymentMethodsKey({
-                        token,
-                        accountId,
-                    }),
-                });
-            })
-                .catch((error) => {
-                setLoading(false);
-                showErrorNotification(error.message, 'Error removing payment method');
-            })
-                .finally(() => {
-                setLoading(false);
-            });
-        }
-        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; });
-            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 { setDefaultPaymentMethod, loading };
-}
-
-const showErrorNotification$6 = useErrorNotification();
 const PaymentForm_QuoteFragment = t(`
     fragment PaymentForm_QuoteFragment on Quote {
       id
@@ -21369,10 +21433,18 @@ const PaymentForm_QuoteFragment = t(`
       ...PaymentProvider_QuoteFragment
     }
   `, [PaymentProvider_QuoteFragment]);
-function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldPrecondition, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, disablePayButton, }) {
+const PaymentForm_InvoiceFragment = t(`
+    fragment PaymentForm_InvoiceFragment on Invoice {
+      id
+      currencyId
+      ...PaymentProvider_InvoiceFragment
+    }
+  `, [PaymentProvider_InvoiceFragment]);
+function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maskedInvoice, quote: maskedQuote, paymentHold, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldPrecondition, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, children, }) {
     var _a;
     // Read fragments
     const quote = readFragment(PaymentForm_QuoteFragment, maskedQuote);
+    const invoice = readFragment(PaymentForm_InvoiceFragment, maskedInvoice);
     const { currencyId, isCurrencyIdLoading } = usePayableCurrency({
         payableCurrencyId: (_a = quote === null || quote === void 0 ? void 0 : quote.currencyId) !== null && _a !== void 0 ? _a : invoice === null || invoice === void 0 ? void 0 : invoice.currencyId,
         accountCurrencyId,
@@ -21389,66 +21461,66 @@ function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuot
     const providers = [
         [ShowPaymentDetailsProvider, { value: undefined }],
         [CustomCheckoutFunctionProvider, { value: customCheckoutFunction }],
-        [IsPayButtonDisabledProvider, { value: disablePayButton }],
+        [AccountIdProvider, { value: accountId }],
     ];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), jsxRuntime.jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsxRuntime.jsx(SelectedPluginProvider, { accountId: accountId, children: jsxRuntime.jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsxRuntime.jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, paymentHoldPrecondition: paymentHoldPrecondition, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsxRuntime.jsx(PaymentFormContent, { onPaymentMethodRemoved: onPaymentMethodRemoved, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), jsxRuntime.jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsxRuntime.jsx(SelectedPluginProvider, { accountId: accountId, children: jsxRuntime.jsx(StripeFormProvider, { currencyId: currencyId, accountId: accountId, children: jsxRuntime.jsx(DemoPayFormProvider, { children: jsxRuntime.jsx(PaymentFormCallbacksProvider, { value: {
+                                onPaymentSuccess,
+                                onSetDefaultPaymentMethod,
+                                onPaymentMethodRemoved,
+                                onSavePaymentMethod,
+                                onPaymentHoldSuccess,
+                                paymentHoldPrecondition,
+                            }, children: jsxRuntime.jsx(PaymentProvider, { quote: quote, invoice: invoice, paymentHold: paymentHold, children: jsxRuntime.jsx(PaymentFormContent, { children: children }) }) }) }) }) }) })) }));
+}
+// Default layout that uses PaymentFormRoot under the hood when no children are provided.
+function PaymentFormDefault(props) {
+    console.log('PaymentFormDefault', props);
+    return jsxRuntime.jsx(PaymentFormRoot, { ...props, children: ({ hasPaymentMethods, isPaymentMethodDetailsOpen, isPayableAvailable, amountDue }) => {
+            const showPayButton = amountDue !== undefined && amountDue > 0 && !isPaymentMethodDetailsOpen && hasPaymentMethods;
+            const checkoutNoPaymentButton = amountDue !== undefined && amountDue === 0;
+            console.log('props.disablePayButton', props.disablePayButton);
+            if (checkoutNoPaymentButton) {
+                return jsxRuntime.jsx(PaymentForm.CheckoutNoPayment, { className: "bunny-px-4", disabled: props.disablePayButton });
+            }
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaymentForm.StoredPaymentMethods, { className: "bunny-px-4" }), jsxRuntime.jsx(PaymentForm.PaymentMethodDetails, { footer: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-w-full bunny-gap-2", children: [jsxRuntime.jsx(PaymentForm.PaymentMethodDetails.Cancel, {}), isPayableAvailable && jsxRuntime.jsx(PaymentForm.Pay, { disabled: props.disablePayButton }), !isPayableAvailable && jsxRuntime.jsx(PaymentForm.PaymentMethodDetails.Save, {})] }) }), showPayButton && (jsxRuntime.jsx("div", { className: "bunny-px-4", children: jsxRuntime.jsx(PaymentForm.Pay, { disabled: props.disablePayButton }) }))] }));
+        } });
 }
-function PaymentFormContent({ onPaymentMethodRemoved, onSetDefaultPaymentMethod, }) {
+function PaymentFormContent({ children, }) {
     // Context
     const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
-    const paymentType = usePaymentType();
-    const isPaying = useIsPaying();
-    const formattedAmountDue = useFormattedAmountDue();
-    const selectedPlugin = useSelectedPlugin();
-    const onPaymentFormSubmit = useHandlePaymentFormSubmit();
     const accountId = useAccountId();
+    const { quoteId, invoiceId, amountDue } = usePayable();
     // Hooks
-    const { paymentPlugins } = usePaymentPlugins(accountId);
-    const { paymentMethods: maskedPaymentMethods, isLoading: isPaymentMethodLoading } = usePaymentMethod({ accountId });
-    // Read fragments
-    const paymentMethods = react.useMemo(() => maskedPaymentMethods === null || maskedPaymentMethods === void 0 ? void 0 : maskedPaymentMethods.map(paymentMethod => readFragment(PaymentForm_PaymentMethodsFragment, paymentMethod)), [maskedPaymentMethods]);
+    const { paymentMethods } = usePaymentMethod({ accountId });
     // Derived state
     const hasPaymentMethods = (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) && (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) > 0;
-    // Custom hooks
-    const { setDefaultPaymentMethod: handleSetDefault, loading: setDefaultPaymentMethodLoading } = useSetDefaultPaymentMethod(message => {
-        showErrorNotification$6(message, 'Error setting default payment method');
-    }, () => {
-        onSetDefaultPaymentMethod === null || onSetDefaultPaymentMethod === void 0 ? void 0 : onSetDefaultPaymentMethod();
-    });
-    useAutoSetDefaultPaymentMethod({
-        handleSetDefault,
-        setDefaultPaymentMethodLoading,
-        enabled: !!paymentPlugins,
-    });
-    const onClickRemove = useRemovePaymentMethod(onPaymentMethodRemoved, message => {
-        showErrorNotification$6(message, 'Error removing payment method');
-    });
-    function handleClickAddPaymentMethod() {
-        if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
-            showErrorNotification$6('No payment plugins available', 'Error adding payment method');
-        }
-        else {
-            setShowPaymentMethodForm(true);
-        }
-    }
-    // Automatically show the payment method form if there are no payment methods
-    react.useEffect(() => {
-        if ((paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) === 0) {
-            setShowPaymentMethodForm(true);
-        }
-    }, [paymentMethods]);
-    if (isPaymentMethodLoading) {
-        return jsxRuntime.jsx(antd.Skeleton, { active: true, className: "bunny-p-4" });
+    const isPayableAvailable = quoteId !== undefined || invoiceId !== undefined;
+    const renderState = {
+        hasPaymentMethods: !!hasPaymentMethods,
+        isPaymentMethodDetailsOpen: showPaymentMethodForm,
+        isPayableAvailable,
+        amountDue,
+    };
+    const renderedChildren = typeof children === 'function' ? children(renderState) : children;
+    return (jsxRuntime.jsx(PaymentMethodFormVisibilityProvider, { value: {
+            showPaymentMethodForm,
+            setShowPaymentMethodForm,
+        }, children: jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-w-full", children: renderedChildren }) }));
+}
+// Public component: if children are passed, use PaymentFormRoot directly (render-prop / custom layout).
+// If no children are passed, fall back to PaymentFormDefault which uses PaymentFormRoot under the hood.
+function PaymentFormInternal(props) {
+    if (props.children != null) {
+        return jsxRuntime.jsx(PaymentFormRoot, { ...props });
     }
-    return (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full", children: paymentType === PaymentType.PAY || paymentType === PaymentType.APPROVE_HOLD ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 => (jsxRuntime.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 && jsxRuntime.jsx(MiniCreditCard, {})] }), jsxRuntime.jsx(antd.Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
-                        {
-                            key: '1',
-                            showArrow: false,
-                            label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
-                            children: (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsxRuntime.jsx(PaymentMethodSelector, {}), selectedPlugin && (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col", children: jsxRuntime.jsx(PaymentMethodDetails, {}) }))] })),
-                        },
-                    ] }), formattedAmountDue !== undefined && !showPaymentMethodForm && hasPaymentMethods ? (jsxRuntime.jsx("div", { className: "bunny-px-4", children: jsxRuntime.jsx(CheckoutFooter, {}) })) : null] })) : (jsxRuntime.jsx(antd.Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
+    return jsxRuntime.jsx(PaymentFormDefault, { ...props });
 }
+const PaymentForm = Object.assign(PaymentFormInternal, {
+    StoredPaymentMethods,
+    Pay,
+    CheckoutNoPayment,
+    PaymentMethodDetails,
+});
 
 const useAjax = (onError) => {
     return async (url, method, callback, token, bodyData) => {
@@ -21942,8 +22014,8 @@ const PaymentHoldModal = ({ visible, setVisible, formattedQuote: maskedFormatted
     const [form] = antd.Form.useForm();
     return (jsxRuntime.jsx(StyledModal$2, { centered: true, onCancel: () => {
             setVisible(false);
-        }, footer: null, open: visible, width: 800, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsxRuntime.jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxRuntime.jsxs(Text$z, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-p-4", children: noSigningPlugins ? jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsxRuntime.jsx(VerticalDivider, { className: "bunny-m-4" }), jsxRuntime.jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsxRuntime.jsx(PaymentForm, { quote: formattedQuote.quote, paymentHoldOptions: {
-                            payToAccept: true,
+        }, footer: null, open: visible, width: 900, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsxRuntime.jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxRuntime.jsxs(Text$z, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-p-4 bunny-pb-6", children: noSigningPlugins ? jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsxRuntime.jsx(VerticalDivider, { className: "bunny-m-4" }), jsxRuntime.jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsxRuntime.jsx(PaymentForm, { quote: formattedQuote.quote, paymentHold: {
+                            quoteId: formattedQuote.quote.id, // TODO: fix hack. We assume the quote id is always present, but may not be the case
                             amountToHold: formattedQuote.amount,
                         }, onPaymentSuccess: () => {
                             setVisible(false);
@@ -24134,7 +24206,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
                                 removeCoupon(couponCode);
                             }
                         });
-                    }, children: "Remove coupon(s)" }))] })) : (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsxRuntime.jsx(antd.Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsxRuntime.jsx(Text$m, { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] })) }));
+                    }, children: "Remove coupon(s)" }))] })) : (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsxRuntime.jsx(antd.Button, { onClick: handleCheckoutNoPayment, type: "primary", disabled: isFinalizingQuote, loading: isSaving || isFinalizingQuote, children: isSaving ? 'Processing...' : 'Complete order' }), jsxRuntime.jsx(Text$m, { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] })) }));
 };
 const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
     const isMobile = useIsMobile();