@bunnyapp/components 1.8.0-beta.5 → 1.8.0-beta.7

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.4';
+const PACKAGE_VERSION = '1.8.0-beta.6';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -19899,7 +19899,7 @@ const usePaymentMethod = ({ accountId, enabled = true, }) => {
     };
 };
 
-const mutation$h = t(`
+const mutation$i = t(`
   query PaymentPlugins($accountId: ID) {
     paymentPlugins(accountId: $accountId) {
       enabled
@@ -19927,7 +19927,7 @@ const mutation$h = t(`
 //   }[];
 // };
 const getPaymentPlugins = async ({ apiHost, token, accountId, }) => {
-    const response = await execute(mutation$h, { apiHost, token }, { accountId });
+    const response = await execute(mutation$i, { apiHost, token }, { accountId });
     return response === null || response === void 0 ? void 0 : response.paymentPlugins;
 };
 const usePaymentPlugins = (accountId) => {
@@ -21698,6 +21698,102 @@ function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onPaymentMethodRe
                         } }) }))] }) }));
 }
 
+const trimGraph = (s) => {
+    return s.replace(/\s+/g, ' ');
+};
+const useGraphQL = (navigateOnTokenExpired, apiEndpoint, onError) => {
+    return async (callback, bodyData = null, token, callbackParams) => {
+        bodyData = trimGraph(bodyData);
+        const headers = createClientDevHeaders({ token });
+        const response = await fetch(apiEndpoint + '/graphql', {
+            method: 'post',
+            body: bodyData,
+            headers,
+        });
+        if (response.status !== 200 && response.status !== 201) {
+            return response.json().then((data) => {
+                var _a, _b, _c;
+                if (data.errors) {
+                    onError(data.errors[0].message);
+                }
+                else if (((_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.description) === 'Token is expired') {
+                    navigateOnTokenExpired();
+                }
+                else if ((_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.description) {
+                    throw new Error((_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.description);
+                }
+                return;
+            });
+        }
+        return response
+            .json()
+            .then((data) => callback(data, callbackParams))
+            .catch((err) => {
+            console.error(err);
+            onError(err);
+        });
+    };
+};
+const useGraphQLmutation = (navigateOnTokenExpired, apiEndpoint, onError) => {
+    const graphQL = useGraphQL(navigateOnTokenExpired, apiEndpoint, onError);
+    return (mutation, variables, callback, token, callbackParams) => {
+        if (typeof variables === 'object')
+            variables = JSON.stringify(variables);
+        return graphQL(callback, `{ "query": "${mutation}", "variables": ${variables} }`, token, callbackParams);
+    };
+};
+
+const POLLING_INTERVAL = 2000;
+const PandadocPollingModal = ({ isVisible, setVisible, id }) => {
+    const { apiHost, onTokenExpired } = react.useContext(BunnyContext);
+    const token = useToken();
+    const graphQLMutation = useGraphQLmutation(() => {
+        console.log('graphQLMutation navigateOnTokenExpired not yet implemented');
+    }, apiHost || '', () => {
+        console.log('graphQLMutation onError not yet implemented');
+    });
+    const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
+    const [numberOfPolls, setNumberOfPolls] = react.useState(0);
+    const [infoMessage, setInfoMessage] = react.useState('');
+    react.useEffect(() => {
+        if (!isVisible)
+            return;
+        const pollPandadocMutation = () => {
+            const mutation = `mutation quotePollSigningUrl($id: ID) {
+        quotePollSigningUrl(quoteId: $id) {
+          redirectUri
+          status
+          errors
+          infoMessage
+        }
+      }`;
+            const variables = {
+                id,
+            };
+            graphQLMutation(mutation, variables, (rsp) => {
+                if (rsp.errors)
+                    handleAllErrorFormats(rsp.errors[0].message);
+                else if (rsp.data.quotePollSigningUrl.status === 'document.sent') {
+                    setVisible(false);
+                    window.location.href = rsp.data.quotePollSigningUrl.redirectUri;
+                }
+                setInfoMessage(rsp.data.quotePollSigningUrl.infoMessage || '');
+            }, token);
+            setNumberOfPolls(numberOfPolls + 1);
+        };
+        const interval = setInterval(pollPandadocMutation, POLLING_INTERVAL);
+        return () => clearInterval(interval);
+    }, [
+        graphQLMutation,
+        // handleAllErrorFormats,
+        numberOfPolls,
+        token,
+        isVisible,
+        setVisible,
+    ]);
+    return (jsxRuntime.jsxs(antd.Modal, { title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null, children: [jsxRuntime.jsxs("div", { className: "bunny-py-4 bunny-text-center", children: ["This may take a few seconds", '.'.repeat(numberOfPolls)] }), jsxRuntime.jsx("div", { className: "bunny-text-center", children: infoMessage })] }));
+};
+
 const usePlugins = ({ apiHost, token }) => {
     const response = reactQuery.useQuery({
         queryKey: QueryKeyFactory.pluginsKey(token),
@@ -21820,76 +21916,7 @@ const AcceptQuoteModal = ({ acceptBoxVisible, formattedQuote: maskedFormattedQuo
         }, open: acceptBoxVisible, title: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) ? 'Start signing' : 'Accept quote', width: 400, children: jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: acceptBoxVisible, formattedQuote: formattedQuote, form: form }) }));
 };
 
-const tagStyleMap = {
-    blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
-    green: {
-        color: 'var(--bunny-green-600)',
-        background: 'var(--bunny-green-200)',
-    },
-    red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
-    orange: {
-        color: 'var(--bunny-orange-500)',
-        background: 'var(--bunny-orange-200)',
-    },
-    yellow: {
-        color: 'var(--bunny-yellow-500)',
-        background: 'var(--bunny-yellow-200)',
-    },
-    purple: {
-        color: 'var(--bunny-purple-500)',
-        background: 'var(--bunny-purple-200)',
-    },
-    black: { color: 'white', background: 'var(--bunny-black)' },
-};
-// This component provides custom styling for antd Tag components without using antd overwrites.
-// Please use this component instead of the antd Tag component directly to maintain consistent styling.
-const CustomizedTag = ({ children, color, className, style, }) => {
-    return (jsxRuntime.jsx(antd.Tag, { color: color, style: { ...(color ? tagStyleMap[color] : undefined), ...style }, className: `bunny-m-0 bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ${className}`, children: children }));
-};
-
-const useIsExpired = (expiresAt) => dayjs(expiresAt).diff(dayjs(dayjs().format("YYYY-MM-DD"))) < 0;
-
-dayjs.extend(localizedFormat);
-const formatDate = (date) => dayjs(date).format('ll');
-
-const { Text: Text$z } = antd.Typography;
-const QuoteButtons_FormattedQuoteFragment = t(`
-    fragment QuoteButtons_FormattedQuoteFragment on FormattedQuote {
-      acceptedAt
-      acceptedByName
-      currency
-      amount
-      expiresAt
-    }
-  `);
-function QuoteButtons({ isAccepted, formattedQuote: maskedFormattedQuote, isMobile, hideDownloadButton, id, isAccepting, handleClickAccept, setPaymentHoldModalVisible, shouldDoPaymentHold, paymentHoldCompleted, paymentHold, isSendAcceptPending, }) {
-    // Read fragments
-    const formattedQuote = readFragment(QuoteButtons_FormattedQuoteFragment, maskedFormattedQuote);
-    const { apiHost } = react.useContext(BunnyContext);
-    const token = useToken();
-    const { secondaryColor } = useBrand();
-    const downloadFile = useDownloadFile(id);
-    const isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
-    const signingPlugins = useSigningPlugins({ apiHost, token });
-    return (jsxRuntime.jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
-            color: secondaryColor,
-        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$z, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", loading: isSendAcceptPending, children: "Pay and sign" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
-                                ? 'Quote is expired'
-                                : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
-                                    ? 'Start signing'
-                                    : 'Accept quote' })) : null }))] }))] }));
-}
-function PaymentHoldDisplay({ paymentHold, currency, amount, }) {
-    var _a, _b, _c, _d;
-    const paymentMethod = ((_b = (_a = paymentHold.paymentMethod) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier)
-        ? (_d = (_c = paymentHold.paymentMethod) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.identifier
-        : 'N/A';
-    const formattedAmount = currency ? formatCurrency(amount, currency) : 'N/A';
-    const expirationDate = paymentHold.expiresAt ? formatDate(paymentHold.expiresAt) : 'N/A';
-    return (jsxRuntime.jsx(antd.Tooltip, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted. Hold will be released on ${expirationDate} if not accepted.`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
-}
-
-const { Title: Title$2, Text: Text$y } = antd.Typography;
+const { Title: Title$2, Text: Text$z } = antd.Typography;
 const showSuccessNotification$2 = useSuccessNotification();
 const showErrorNotification$5 = useErrorNotification();
 const PaymentHoldModal_FormattedQuoteFragment = t(`
@@ -21915,7 +21942,7 @@ 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$y, { 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: {
+        }, 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,
                             amountToHold: formattedQuote.amount,
                         }, onPaymentSuccess: () => {
@@ -21938,13 +21965,15 @@ const PaymentHoldModal = ({ visible, setVisible, formattedQuote: maskedFormatted
                                     token,
                                 }),
                             });
-                            // accept quote automatically
-                            form
-                                .validateFields()
-                                .then(changedFields => {
-                                sendAccept(changedFields);
-                            })
-                                .catch(() => { });
+                            // accept quote automatically if no signing plugins are present
+                            if (noSigningPlugins) {
+                                form
+                                    .validateFields()
+                                    .then(changedFields => {
+                                    sendAccept(changedFields);
+                                })
+                                    .catch(() => { });
+                            }
                         }, paymentHoldPrecondition: async () => {
                             if (!noSigningPlugins)
                                 return true;
@@ -21990,232 +22019,125 @@ const StyledModal$2 = (props) => {
     return jsxRuntime.jsx(ModalOverrideBrandStylings, { closable: false, ...props });
 };
 
-const query$7 = t(`
-    query formattedQuote($id: ID) {
-      formattedQuote(id: $id) {
-        quote {
-          documentTemplateId
-          documents {
-            id
-            filename
-            size
-            date
-            url
-          }
-          firstInvoice {
-            id
-            state
-          }
-          payableId
-          id
-          payToAccept
-          currentPaymentHold {
-            createdAt
-            expiresAt
-            id
-            updatedAt
-            paymentMethod {
-              accountId
-              createdAt
-              expirationDate
-              failureCode
-              id
-              isDefault
-              lastSuccess
-              paymentType
-              pluginId
-              state
-              updatedAt
-              metadata {
-                description
-                expiration
-                icon
-                identifier
-                issuer
-                kind
-              }
-            }
-          }
-        }
-        payableId
-        acceptedAt
-        acceptedByName
-        amount
-        amountDue
-        amountsByPeriod {
-          id
-          name
-          amount
-        }
-        billingCity
-        billingCountry
-        billingState
-        billingStreet
-        billingZip
-        contactName
-        currency
-        customerBillingCity
-        customerBillingCountry
-        customerBillingState
-        customerBillingStreet
-        customerBillingZip
-        customerName
-        discount
-        discountValue
-        duration
-        endDate
-        expiresAt
-        html
-        formattedLines {
-          amount
-          amountsByPeriod {
-            quantity
-            id
-            name
-            startDate
-            endDate
-            amount
-            amountsByTier {
-              id
-              tier {
-                starts
-                ends
-                price
-              }
-              quantity
-              amount
-            }
-            prorationRate
-          }
-          billingPeriodEnd
-          billingPeriodStart
-          chargeType
-          discount
-          frequency
-          isRamp
-          periods
-          planName
-          position
-          price
-          priceDecimals
-          priceListChargeId
-          priceListChargeName
-          priceListId
-          priceListName
-          priceTiers {
-            price
-            starts
-          }
-          pricingModel
-          productName
-          prorationRate
-          quantity
-          showProductNameOnLineItem
-          taxCode
-          trialEndDate
-          trialStartDate
-          unitOfMeasure
-          vatCode
-        }
-        netPaymentDays
-        notes
-        number
-        poNumberRequired
-        salesContactEmail
-        sharedAt
-        startDate
-        state
-        subtotal
-        taxAmount
-        taxNumberLabel
-        taxNumberRequired
-        vendorName
-        ...PaymentHoldModal_FormattedQuoteFragment
-        ...AcceptQuoteModal_FormattedQuoteFragment
-        ...QuoteButtons_FormattedQuoteFragment
-      }
-    }
-  `, [
-    PaymentHoldModal_FormattedQuoteFragment,
-    AcceptQuoteModal_FormattedQuoteFragment,
-    QuoteButtons_FormattedQuoteFragment,
-]);
-const getFormattedQuote = async ({ token, apiHost, id, }) => {
-    const response = await execute(query$7, { apiHost, token }, { id });
-    return response === null || response === void 0 ? void 0 : response.formattedQuote;
-};
+const useIsExpired = (expiresAt) => dayjs(expiresAt).diff(dayjs(dayjs().format("YYYY-MM-DD"))) < 0;
 
-const trimGraph = (s) => {
-    return s.replace(/\s+/g, ' ');
-};
-const useGraphQL = (navigateOnTokenExpired, apiEndpoint, onError) => {
-    return async (callback, bodyData = null, token, callbackParams) => {
-        bodyData = trimGraph(bodyData);
-        const headers = createClientDevHeaders({ token });
-        const response = await fetch(apiEndpoint + '/graphql', {
-            method: 'post',
-            body: bodyData,
-            headers,
-        });
-        if (response.status !== 200 && response.status !== 201) {
-            return response.json().then((data) => {
-                var _a, _b, _c;
-                if (data.errors) {
-                    onError(data.errors[0].message);
-                }
-                else if (((_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.description) === 'Token is expired') {
-                    navigateOnTokenExpired();
-                }
-                else if ((_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.description) {
-                    throw new Error((_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.description);
-                }
-                return;
-            });
-        }
-        return response
-            .json()
-            .then((data) => callback(data, callbackParams))
-            .catch((err) => {
-            console.error(err);
-            onError(err);
-        });
-    };
+dayjs.extend(localizedFormat);
+const formatDate = (date) => dayjs(date).format('ll');
+
+const tagStyleMap = {
+    blue: { color: 'var(--bunny-blue-500)', background: 'var(--bunny-blue-200)' },
+    green: {
+        color: 'var(--bunny-green-600)',
+        background: 'var(--bunny-green-200)',
+    },
+    red: { color: 'var(--bunny-red-500)', background: 'var(--bunny-red-200)' },
+    orange: {
+        color: 'var(--bunny-orange-500)',
+        background: 'var(--bunny-orange-200)',
+    },
+    yellow: {
+        color: 'var(--bunny-yellow-500)',
+        background: 'var(--bunny-yellow-200)',
+    },
+    purple: {
+        color: 'var(--bunny-purple-500)',
+        background: 'var(--bunny-purple-200)',
+    },
+    black: { color: 'white', background: 'var(--bunny-black)' },
 };
-const useGraphQLmutation = (navigateOnTokenExpired, apiEndpoint, onError) => {
-    const graphQL = useGraphQL(navigateOnTokenExpired, apiEndpoint, onError);
-    return (mutation, variables, callback, token, callbackParams) => {
-        if (typeof variables === 'object')
-            variables = JSON.stringify(variables);
-        return graphQL(callback, `{ "query": "${mutation}", "variables": ${variables} }`, token, callbackParams);
-    };
+// This component provides custom styling for antd Tag components without using antd overwrites.
+// Please use this component instead of the antd Tag component directly to maintain consistent styling.
+const CustomizedTag = ({ children, color, className, style, }) => {
+    return (jsxRuntime.jsx(antd.Tag, { color: color, style: { ...(color ? tagStyleMap[color] : undefined), ...style }, className: `bunny-m-0 bunny-rounded-full bunny-border-none bunny-whitespace-nowrap ${className}`, children: children }));
 };
 
-const handleAllErrorFormats = useAllErrorFormats();
-const QUOTE_ACCEPT = `
-  mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {
-    quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {
+const PaymentHoldDisplay_PaymentHoldFragment = t(`
+  fragment PaymentHoldDisplay_PaymentHoldFragment on PaymentHold {
+    expiresAt
+    paymentMethod {
+      metadata {
+        identifier
+      }
+    }
+  }
+`);
+function PaymentHoldDisplay({ paymentHold: maskedPaymentHold, currency, amount, }) {
+    var _a, _b, _c, _d;
+    const paymentHold = readFragment(PaymentHoldDisplay_PaymentHoldFragment, maskedPaymentHold);
+    const paymentMethod = ((_b = (_a = paymentHold.paymentMethod) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier)
+        ? (_d = (_c = paymentHold.paymentMethod) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.identifier
+        : 'N/A';
+    const formattedAmount = currency ? formatCurrency(amount, currency) : 'N/A';
+    const expirationDate = paymentHold.expiresAt ? formatDate(paymentHold.expiresAt) : 'N/A';
+    return (jsxRuntime.jsx(antd.Tooltip, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted.Hold will be released on ${expirationDate} if not accepted.`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
+}
+
+const { Text: Text$y } = antd.Typography;
+const QuoteButtons_FormattedQuoteFragment = t(`
+    fragment QuoteButtons_FormattedQuoteFragment on FormattedQuote {
+      acceptedAt
+      acceptedByName
+      currency
+      amount
+      expiresAt
+    }
+  `);
+const PaymentHoldDisplay_QuoteButtonsFragment = t(`
+    fragment PaymentHoldDisplay_QuoteButtonsFragment on PaymentHold {
+      ...PaymentHoldDisplay_PaymentHoldFragment
+    }
+  `, [PaymentHoldDisplay_PaymentHoldFragment]);
+function QuoteButtons({ isAccepted, formattedQuote: maskedFormattedQuote, isMobile, hideDownloadButton, id, isAccepting, handleClickAccept, setPaymentHoldModalVisible, shouldDoPaymentHold, paymentHoldCompleted, paymentHold: maskedPaymentHold, isSendAcceptPending, }) {
+    // Read fragments
+    const formattedQuote = readFragment(QuoteButtons_FormattedQuoteFragment, maskedFormattedQuote);
+    const paymentHold = readFragment(PaymentHoldDisplay_QuoteButtonsFragment, maskedPaymentHold);
+    const { apiHost } = react.useContext(BunnyContext);
+    const token = useToken();
+    const { secondaryColor } = useBrand();
+    const downloadFile = useDownloadFile(id);
+    const isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
+    const signingPlugins = useSigningPlugins({ apiHost, token });
+    return (jsxRuntime.jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
+            color: secondaryColor,
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$y, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", loading: isSendAcceptPending, children: "Pay and sign" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+                                ? 'Quote is expired'
+                                : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
+                                    ? 'Start signing'
+                                    : 'Accept quote' })) : null }))] }))] }));
+}
+
+const mutation$h = t(`
+  mutation QuoteAccept(
+    $name: String!
+    $title: String!
+    $poNumber: String
+    $taxNumber: String
+    $quoteId: ID
+  ) {
+    quoteAccept(
+      name: $name
+      title: $title
+      poNumber: $poNumber
+      taxNumber: $taxNumber
+      quoteId: $quoteId
+    ) {
       errors
     }
   }
-`;
-const quoteAccept = async ({ quoteId, apiHost, token, changedFormItems, }) => {
+`);
+const quoteAccept = async ({ quoteId, apiHost, token, changedFormItems }) => {
     var _a, _b;
-    const vars = {
-        ...changedFormItems,
-        quoteId,
-    };
-    const response = await gqlRequest({
-        query: QUOTE_ACCEPT,
-        token,
-        vars,
-        apiHost,
+    return await execute(mutation$h, { apiHost, token }, {
+        name: changedFormItems.name,
+        title: changedFormItems.title,
+        poNumber: (_a = changedFormItems.poNumber) !== null && _a !== void 0 ? _a : null,
+        taxNumber: (_b = changedFormItems.taxNumber) !== null && _b !== void 0 ? _b : null,
+        quoteId: quoteId !== null && quoteId !== void 0 ? quoteId : null,
     });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAccept) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return (_b = response.quoteAccept) === null || _b === void 0 ? void 0 : _b.quote;
 };
-const useSendAcceptQuote = ({ quoteId, apiHost, token, onQuoteAccepted, }) => {
+
+const handleAllErrorFormats = useAllErrorFormats();
+const useAcceptQuote = ({ quoteId, apiHost, token, onQuoteAccepted, }) => {
     // Hooks
     const graphQLMutation = useGraphQLmutation(() => {
         console.log('navigate in useGraphQLmutation in useSendAcceptQuote is not yet implemented');
@@ -22307,6 +22229,33 @@ const useSendAcceptQuote = ({ quoteId, apiHost, token, onQuoteAccepted, }) => {
     };
 };
 
+const useQuotePaymentHold_FormattedQuoteFragment = t(`
+  fragment useQuotePaymentHold_FormattedQuoteFragment on FormattedQuote {
+    quote {
+      payToAccept
+      currentPaymentHold {
+        id
+      }
+    }
+  }
+`);
+const useQuotePaymentHold = (maskedFormattedQuote) => {
+    var _a, _b;
+    const [paymentHoldModalVisible, setPaymentHoldModalVisible] = react.useState(false);
+    const formattedQuote = maskedFormattedQuote
+        ? readFragment(useQuotePaymentHold_FormattedQuoteFragment, maskedFormattedQuote)
+        : undefined;
+    const shouldDoPaymentHold = ((_a = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.payToAccept) === true;
+    const currentPaymentHold = (_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.currentPaymentHold;
+    return {
+        // paymentHold: currentPaymentHold ?? undefined,
+        paymentHoldModalVisible,
+        setPaymentHoldModalVisible,
+        shouldDoPaymentHold,
+        paymentHoldCompleted: currentPaymentHold ? true : false,
+    };
+};
+
 const NavigationContext = react.createContext({});
 
 const useSigningComplete = ({ data, token }) => {
@@ -22322,63 +22271,186 @@ const useSigningComplete = ({ data, token }) => {
     }, [data, eventParam, queryClient, token]);
 };
 
-const POLLING_INTERVAL = 2000;
-const PandadocPollingModal = ({ isVisible, setVisible, id }) => {
-    const { apiHost, onTokenExpired } = react.useContext(BunnyContext);
-    const token = useToken();
-    const graphQLMutation = useGraphQLmutation(() => {
-        console.log('graphQLMutation navigateOnTokenExpired not yet implemented');
-    }, apiHost || '', () => {
-        console.log('graphQLMutation onError not yet implemented');
-    });
-    const handleAllErrorFormats = useAllErrorFormats$1(onTokenExpired);
-    const [numberOfPolls, setNumberOfPolls] = react.useState(0);
-    const [infoMessage, setInfoMessage] = react.useState('');
-    react.useEffect(() => {
-        if (!isVisible)
-            return;
-        const pollPandadocMutation = () => {
-            const mutation = `mutation quotePollSigningUrl($id: ID) {
-        quotePollSigningUrl(quoteId: $id) {
-          redirectUri
-          status
-          errors
-          infoMessage
+const query$7 = t(`
+    query formattedQuote($id: ID) {
+      formattedQuote(id: $id) {
+        quote {
+          documentTemplateId
+          documents {
+            id
+            filename
+            size
+            date
+            url
+          }
+          firstInvoice {
+            id
+            state
+          }
+          payableId
+          id
+          payToAccept
+          currentPaymentHold {
+            createdAt
+            expiresAt
+            id
+            updatedAt
+            paymentMethod {
+              accountId
+              createdAt
+              expirationDate
+              failureCode
+              id
+              isDefault
+              lastSuccess
+              paymentType
+              pluginId
+              state
+              updatedAt
+              metadata {
+                description
+                expiration
+                icon
+                identifier
+                issuer
+                kind
+              }
+            }
+            ...PaymentHoldDisplay_QuoteButtonsFragment
+          }
         }
-      }`;
-            const variables = {
-                id,
-            };
-            graphQLMutation(mutation, variables, (rsp) => {
-                if (rsp.errors)
-                    handleAllErrorFormats(rsp.errors[0].message);
-                else if (rsp.data.quotePollSigningUrl.status === 'document.sent') {
-                    setVisible(false);
-                    window.location.href = rsp.data.quotePollSigningUrl.redirectUri;
-                }
-                setInfoMessage(rsp.data.quotePollSigningUrl.infoMessage || '');
-            }, token);
-            setNumberOfPolls(numberOfPolls + 1);
-        };
-        const interval = setInterval(pollPandadocMutation, POLLING_INTERVAL);
-        return () => clearInterval(interval);
-    }, [
-        graphQLMutation,
-        // handleAllErrorFormats,
-        numberOfPolls,
-        token,
-        isVisible,
-        setVisible,
-    ]);
-    return (jsxRuntime.jsxs(antd.Modal, { title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null, children: [jsxRuntime.jsxs("div", { className: "bunny-py-4 bunny-text-center", children: ["This may take a few seconds", '.'.repeat(numberOfPolls)] }), jsxRuntime.jsx("div", { className: "bunny-text-center", children: infoMessage })] }));
+        payableId
+        acceptedAt
+        acceptedByName
+        amount
+        amountDue
+        amountsByPeriod {
+          id
+          name
+          amount
+        }
+        billingCity
+        billingCountry
+        billingState
+        billingStreet
+        billingZip
+        contactName
+        currency
+        customerBillingCity
+        customerBillingCountry
+        customerBillingState
+        customerBillingStreet
+        customerBillingZip
+        customerName
+        discount
+        discountValue
+        duration
+        endDate
+        expiresAt
+        html
+        formattedLines {
+          amount
+          amountsByPeriod {
+            quantity
+            id
+            name
+            startDate
+            endDate
+            amount
+            amountsByTier {
+              id
+              tier {
+                starts
+                ends
+                price
+              }
+              quantity
+              amount
+            }
+            prorationRate
+          }
+          billingPeriodEnd
+          billingPeriodStart
+          chargeType
+          discount
+          frequency
+          isRamp
+          periods
+          planName
+          position
+          price
+          priceDecimals
+          priceListChargeId
+          priceListChargeName
+          priceListId
+          priceListName
+          priceTiers {
+            price
+            starts
+          }
+          pricingModel
+          productName
+          prorationRate
+          quantity
+          showProductNameOnLineItem
+          taxCode
+          trialEndDate
+          trialStartDate
+          unitOfMeasure
+          vatCode
+        }
+        netPaymentDays
+        notes
+        number
+        poNumberRequired
+        salesContactEmail
+        sharedAt
+        startDate
+        state
+        subtotal
+        taxAmount
+        taxNumberLabel
+        taxNumberRequired
+        vendorName
+        ...useQuotePaymentHold_FormattedQuoteFragment
+        ...PaymentHoldModal_FormattedQuoteFragment
+        ...AcceptQuoteModal_FormattedQuoteFragment
+        ...QuoteButtons_FormattedQuoteFragment
+      }
+    }
+  `, [
+    useQuotePaymentHold_FormattedQuoteFragment,
+    PaymentHoldModal_FormattedQuoteFragment,
+    AcceptQuoteModal_FormattedQuoteFragment,
+    QuoteButtons_FormattedQuoteFragment,
+    PaymentHoldDisplay_QuoteButtonsFragment,
+]);
+const getFormattedQuote = async ({ token, apiHost, id, }) => {
+    const response = await execute(query$7, { apiHost, token }, { id });
+    return response === null || response === void 0 ? void 0 : response.formattedQuote;
 };
 
 const showErrorNotification$4 = useErrorNotification();
-defaultStyled.div `
-  Text {
-    width: 100%;
-  }
-`;
+t(`
+    fragment Quote_PaymentHoldFragment on FormattedQuote {
+      quote {
+        currentPaymentHold {
+          ...PaymentHoldDisplay_QuoteButtonsFragment
+        }
+        firstInvoice {
+          id
+        }
+      }
+    }
+  `, [PaymentHoldDisplay_QuoteButtonsFragment]);
+t(`
+    fragment OnQuoteLoadedFragment on FormattedQuote {
+      vendorName
+      quote {
+        id
+      }
+    }
+  `);
 function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, onQuoteLoaded, onQuoteAccepted, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification = false, }) {
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, { value: {
             id,
@@ -22388,30 +22460,16 @@ function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymen
             shadow,
             className,
             hideDownloadButton,
-            onQuoteLoaded,
             onQuoteUnavailableError,
             suppressQuoteUnavailableErrorNotification,
-        }, children: jsxRuntime.jsx(ActualQuote, { onQuoteAccepted: onQuoteAccepted }) }));
+        }, children: jsxRuntime.jsx(ActualQuote, { onQuoteAccepted: onQuoteAccepted, onQuoteLoaded: onQuoteLoaded }) }));
 }
-const useQuotePaymentHold = (formattedQuote) => {
-    var _a, _b;
-    const [paymentHoldModalVisible, setPaymentHoldModalVisible] = react.useState(false);
-    const shouldDoPaymentHold = ((_a = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.payToAccept) == true;
-    const currentPaymentHold = (_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.currentPaymentHold;
-    return {
-        paymentHold: currentPaymentHold,
-        paymentHoldModalVisible,
-        setPaymentHoldModalVisible,
-        shouldDoPaymentHold,
-        paymentHoldCompleted: currentPaymentHold ? true : false,
-    };
-};
-function ActualQuote({ onQuoteAccepted }) {
-    var _a, _b, _c, _d, _e, _f;
+function ActualQuote({ onQuoteAccepted, onQuoteLoaded }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     // Context
     const { apiHost } = react.useContext(BunnyContext);
     const token = useToken();
-    const { className, id, hideDownloadButton, onQuoteLoaded, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification } = react.useContext(InvoiceQuoteContext);
+    const { className, id, hideDownloadButton, onQuoteUnavailableError, suppressQuoteUnavailableErrorNotification } = react.useContext(InvoiceQuoteContext);
     // Queries
     const { data: formattedQuote, isLoading, error } = reactQuery.useQuery({
         queryKey: QueryKeyFactory.createQuoteKey({ id, token }),
@@ -22421,7 +22479,7 @@ function ActualQuote({ onQuoteAccepted }) {
         placeholderData: reactQuery.keepPreviousData,
     });
     // Hooks
-    const { acceptBoxVisible, isAccepting, sendAccept, setAcceptBoxVisible, setIsAccepting, startAcceptance, pandadocPollingModalVisible, setPandadocPollingModalVisible, isSendAcceptPending, } = useSendAcceptQuote({
+    const { acceptBoxVisible, isAccepting, sendAccept, setAcceptBoxVisible, setIsAccepting, startAcceptance, pandadocPollingModalVisible, setPandadocPollingModalVisible, isSendAcceptPending, } = useAcceptQuote({
         token,
         apiHost,
         quoteId: id,
@@ -22431,7 +22489,7 @@ function ActualQuote({ onQuoteAccepted }) {
     const isMobile = useIsMobile();
     react.useEffect(() => {
         if (formattedQuote) {
-            onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote); // TODO: fix to use the correct type
+            onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
         }
     }, [formattedQuote]);
     react.useEffect(() => {
@@ -22447,7 +22505,8 @@ function ActualQuote({ onQuoteAccepted }) {
         }
     }, [error]);
     // Payment hold stuff here
-    const { paymentHoldModalVisible, setPaymentHoldModalVisible, shouldDoPaymentHold, paymentHoldCompleted, paymentHold, } = useQuotePaymentHold(formattedQuote); // TODO: fix to use the correct type
+    const { paymentHoldModalVisible, setPaymentHoldModalVisible, shouldDoPaymentHold, paymentHoldCompleted, } = useQuotePaymentHold(formattedQuote);
+    const paymentHold = (_a = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.currentPaymentHold;
     const handleClickAccept = () => {
         if (shouldDoPaymentHold && !paymentHoldCompleted) {
             setPaymentHoldModalVisible(true);
@@ -22461,12 +22520,12 @@ function ActualQuote({ onQuoteAccepted }) {
     }
     // Derived state
     const isAccepted = formattedQuote.state === 'ACCEPTED';
-    const firstInvoice = (_a = formattedQuote.quote) === null || _a === void 0 ? void 0 : _a.firstInvoice;
+    const firstInvoice = (_b = formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.firstInvoice;
     if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
         return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-4 ${isMobile ? 'bunny-w-full bunny-overflow-hidden' : ''} ${className}`, children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(InvoiceQuoteView, { html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? `/pdf/quote` : undefined, children: ((_d = (_c = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) &&
-                            ((_f = (_e = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _e === void 0 ? void 0 : _e.documents) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: formattedQuote.quote.documents.map((doc, index) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-4 ${isMobile ? 'bunny-w-full bunny-overflow-hidden' : ''} ${className}`, children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(InvoiceQuoteView, { html: formattedQuote.html, targetUrl: ((_c = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _c === void 0 ? void 0 : _c.documentTemplateId) ? `/pdf/quote` : undefined, children: ((_e = (_d = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _d === void 0 ? void 0 : _d.documents) === null || _e === void 0 ? void 0 : _e.length) &&
+                            ((_g = (_f = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.quote) === null || _f === void 0 ? void 0 : _f.documents) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: formattedQuote.quote.documents.map((doc, index) => {
                                 return (jsxRuntime.jsx(antd.Button, { download: doc.filename, href: doc.url, type: "link", children: doc.filename }, index));
                             }) })) : null })] }), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, formattedQuote: formattedQuote, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
@@ -22994,7 +23053,6 @@ function canApplyCoupons(maskedQuote, activeCouponsExist, maskedUpgradingSubscri
     if (quoteKindIsValid) {
         const result = activeCouponsExist &&
             (upgradingFromTrial || upgradingFromFree() || signingUpForNewSubscription);
-        console.log('returning result', result);
         return result;
     }
     return false;
@@ -30187,11 +30245,7 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
         return countryListFilter ? COUNTRY_LIST.filter(countryListFilter) : COUNTRY_LIST;
     }, [countryListFilter]);
     const isLoading = isLoadingAccount || isLoadingContacts;
-    return (jsxRuntime.jsxs("div", { className: `${isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2'}`, children: [jsxRuntime.jsxs("div", { className: "bunny-px-4", children: [jsxRuntime.jsxs(antd.Skeleton, { loading: isLoading || account === undefined, children: [jsxRuntime.jsx("div", { className: "bunny-mb-2 bunny-pl-1", children: jsxRuntime.jsx(Text, { className: "bunny-font-medium bunny-text-lg", children: (account === null || account === void 0 ? void 0 : account.name) || 'No company name' }) }), jsxRuntime.jsxs(antd.Form, { className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, autoComplete: "off", requiredMark: false, children: [jsxRuntime.jsx(antd.Form.Item, { label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }], children: jsxRuntime.jsx(antd.Input, {}) }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-4", children: [jsxRuntime.jsx(antd.Form.Item, { label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1", children: jsxRuntime.jsx(antd.Input, {}) }), jsxRuntime.jsx(antd.Form.Item, { label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1", children: jsxRuntime.jsx(antd.Input, {}) })] }), jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row'} bunny-gap-4`, children: [jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsxRuntime.jsx(antd.Form.Item, { label: "State", name: "billingState", rules: [
-                                                        {
-                                                            required: false,
-                                                        },
-                                                    ], children: jsxRuntime.jsx(antd.Input, {}) }) }), jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsxRuntime.jsx(antd.Form.Item, { label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }], children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: (input, option) => {
+    return (jsxRuntime.jsxs("div", { className: `${isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2'}`, children: [jsxRuntime.jsxs("div", { className: "bunny-px-4", children: [jsxRuntime.jsxs(antd.Skeleton, { loading: isLoading || account === undefined, children: [jsxRuntime.jsx("div", { className: "bunny-mb-2 bunny-pl-1", children: jsxRuntime.jsx(Text, { className: "bunny-font-medium bunny-text-lg", children: (account === null || account === void 0 ? void 0 : account.name) || 'No company name' }) }), jsxRuntime.jsxs(antd.Form, { className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingAccount, autoComplete: "off", children: [jsxRuntime.jsx(antd.Form.Item, { label: "Street address", name: "billingStreet", children: jsxRuntime.jsx(antd.Input, {}) }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-4", children: [jsxRuntime.jsx(antd.Form.Item, { label: "City", name: "billingCity", className: "bunny-flex-1", children: jsxRuntime.jsx(antd.Input, {}) }), jsxRuntime.jsx(antd.Form.Item, { label: "Zipcode", name: "billingZip", className: "bunny-flex-1", children: jsxRuntime.jsx(antd.Input, {}) })] }), jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row'} bunny-gap-4`, children: [jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsxRuntime.jsx(antd.Form.Item, { label: "State", name: "billingState", children: jsxRuntime.jsx(antd.Input, {}) }) }), jsxRuntime.jsx("div", { className: "bunny-flex-1 bunny-w-1/2", children: jsxRuntime.jsx(antd.Form.Item, { label: "Country", name: "billingCountry", children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: (input, option) => {
                                                             var _a, _b;
                                                             return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
                                                                 ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
@@ -30216,7 +30270,7 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
                                             })) !== null && _c !== void 0 ? _c : [], popupRender: menu => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menu, jsxRuntime.jsx(AddContactButton, { onClick: () => {
                                                             setContactFieldType('secondary');
                                                             setIsAddContactModalOpen(true);
-                                                        } })] })) }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }], children: jsxRuntime.jsx(antd.Input, {}) })] })] }), jsxRuntime.jsx(antd.Button, { disabled: !isFormEdited || isUpdatingAccount || isLoading, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails, children: "Save" })] }), jsxRuntime.jsx(AddContactModal, { open: isAddContactModalOpen, onClose: () => {
+                                                        } })] })) }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", children: jsxRuntime.jsx(antd.Input, {}) })] })] }), jsxRuntime.jsx(antd.Button, { disabled: !isFormEdited || isUpdatingAccount || isLoading, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails, children: "Save" })] }), jsxRuntime.jsx(AddContactModal, { open: isAddContactModalOpen, onClose: () => {
                     setIsAddContactModalOpen(false);
                     setContactFieldType(null);
                 }, accountId: accountId, onContactCreated: handleContactCreated })] }));