@bunnyapp/components 1.8.0-beta.55 → 1.8.0-beta.57

package/dist/esm/types/src/components/CheckoutShared/graphql/mutations/priceListAmountDuePreview.d.ts

@@ -0,0 +1,53 @@
+import { VariablesOf } from 'gql.tada';
+declare const mutation: import("gql.tada").TadaDocumentNode<{
+    priceListAmountDuePreview: {
+        amountDue: number | null;
+        subtotal: number | null;
+        discountAmount: number | null;
+        taxAmount: number | null;
+        taxesCalculated: boolean;
+        currencyId: string | null;
+        quote: {
+            [$tada.fragmentRefs]: {
+                CheckoutSummary_QuoteFragment: "Quote";
+            };
+        } | null;
+        errors: string[] | null;
+    } | null;
+}, {
+    trial?: boolean | null | undefined;
+    couponCode?: string | null | undefined;
+    billingDetails?: {
+        taxNumber?: string | null | undefined;
+        billingZip?: string | null | undefined;
+        billingStreet?: string | null | undefined;
+        billingState?: string | null | undefined;
+        billingCountry?: string | null | undefined;
+        billingContactEmail?: string | null | undefined;
+        billingCity?: string | null | undefined;
+    } | null | undefined;
+    priceListCode: string;
+}, void>;
+export type PriceListAmountDuePreviewVariables = VariablesOf<typeof mutation>;
+/**
+ * First-period amount due for a price list, priced by the API without touching any account. Taxes are
+ * calculated only once `billingDetails` holds every field the taxation plugin requires for the country (see `taxesCalculated`).
+ */
+declare const priceListAmountDuePreview: ({ token, apiHost, ...variables }: PriceListAmountDuePreviewVariables & {
+    token?: string;
+    apiHost: string;
+}) => Promise<{
+    amountDue: number | null;
+    subtotal: number | null;
+    discountAmount: number | null;
+    taxAmount: number | null;
+    taxesCalculated: boolean;
+    currencyId: string | null;
+    quote: {
+        [$tada.fragmentRefs]: {
+            CheckoutSummary_QuoteFragment: "Quote";
+        };
+    } | null;
+    errors: string[] | null;
+} | null>;
+export default priceListAmountDuePreview;

package/dist/esm/types/src/components/CheckoutShared/graphql/mutations/taxationRequiredAccountFields.d.ts

@@ -0,0 +1,10 @@
+/** Account fields the tenant's taxation plugin needs for a billing country, before any account exists. */
+declare const taxationRequiredAccountFields: ({ token, apiHost, countryCode, }: {
+    token?: string;
+    apiHost: string;
+    countryCode?: string;
+}) => Promise<{
+    fields: string[] | null;
+    errors: string[] | null;
+} | null>;
+export default taxationRequiredAccountFields;

package/dist/esm/types/src/components/{Signup → CheckoutShared/graphql}/queries/getPriceList.d.ts

@@ -4,7 +4,7 @@ declare const getPriceList: ({ token, code, apiHost, }: {
     apiHost: string;
 }) => Promise<{
     [$tada.fragmentRefs]: {
-        Signup_PriceListFragment: "PriceList";
+        useCheckoutPriceList_PriceListFragment: "PriceList";
     };
 } | null>;
 export default getPriceList;

package/dist/esm/types/src/components/CheckoutShared/hooks/useAmountDuePreview.d.ts

@@ -0,0 +1,33 @@
+import type { FragmentOf } from 'gql.tada';
+import { CheckoutSummary_QuoteFragment } from '../graphql/fragments/CheckoutSummary_QuoteFragment';
+import type { CheckoutBillingDetails } from '../utils/billingDetails';
+/** The API's first-period pricing: subtotal - discountAmount + taxAmount == amountDue. */
+export type AmountDuePreview = {
+    amountDue: number;
+    subtotal: number;
+    discountAmount: number;
+    taxAmount: number;
+    /** False until the billing details hold every field the taxation plugin needs (or when no plugin applies): the amounts are untaxed. */
+    taxesCalculated: boolean;
+    currencyId: string;
+    /** The unsaved quote behind the amounts; the summary's line items come from it. */
+    quote: FragmentOf<typeof CheckoutSummary_QuoteFragment>;
+};
+/**
+ * Keeps the amount due up to date without touching any account: previews on mount and again whenever
+ * the billing details, coupon or trial change. The previous answer stays on screen while the next one
+ * loads, and counts as pending while a typed field is still debouncing. A failed preview is reported by
+ * the query client's global error handler.
+ */
+export declare function useAmountDuePreview({ priceListCode, billingDetails, couponCode, trial, enabled, }: {
+    priceListCode: string;
+    billingDetails: Partial<CheckoutBillingDetails>;
+    couponCode?: string;
+    trial?: boolean;
+    enabled?: boolean;
+}): {
+    preview: NoInfer<AmountDuePreview> | undefined;
+    isPending: boolean;
+    hasResolvedOnce: boolean;
+    isError: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutBillingDetails.d.ts

@@ -0,0 +1,3 @@
+import type { CheckoutDefaultValues } from '../contexts/CheckoutConfigContext';
+/** The live billing details in the form; `fallback` fills a field until it mounts. */
+export declare function useCheckoutBillingDetails(fallback?: CheckoutDefaultValues): Partial<import("../utils/billingDetails").CheckoutBillingDetails>;

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutFieldValue.d.ts

@@ -0,0 +1,3 @@
+import type { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+/** The live value of one checkout form field. `undefined` until the field mounts; an empty string once cleared. */
+export declare function useCheckoutFieldValue<Name extends keyof CheckoutFormValues>(name: Name): CheckoutFormValues[Name] | undefined;

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutFormSubmit.d.ts

@@ -0,0 +1,16 @@
+import { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+import { CheckoutResult } from '../contexts/CheckoutResultContext';
+/**
+ * What submitting the checkout form has in common across the flows, once antd has validated it:
+ * layer the consumer's defaults under the entered values (fields that aren't shown still describe
+ * the account), run the flow's checkout and publish its result. Errors are toasted by the query
+ * client's global handler.
+ */
+export declare function useCheckoutFormSubmit({ mutationKey, checkout, onError, }: {
+    mutationKey: readonly string[];
+    checkout: (values: CheckoutFormValues) => Promise<CheckoutResult>;
+    onError?: () => void;
+}): {
+    submit: (values: CheckoutFormValues) => void;
+    isProcessing: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useCheckoutPriceList.d.ts

@@ -0,0 +1,14 @@
+/** The price list being bought, and whether this checkout will start a trial on it. */
+export declare function useCheckoutPriceList(): {
+    priceList: {
+        [$tada.fragmentRefs]: {
+            CheckoutSummary_PriceListFragment: "PriceList";
+        } & {
+            SuccessDisplay_PriceListFragment: "PriceList";
+        };
+        id: string;
+        code: string | null;
+        trialAllowed: boolean;
+    } | null | undefined;
+    willBeTrial: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/hooks/useFocusFirstField.d.ts

@@ -0,0 +1,2 @@
+/** Focuses the first editable input inside the returned element on mount, so the user can start typing right away. */
+export declare function useFocusFirstField<T extends HTMLElement>(): import("react").RefObject<T>;

package/dist/esm/types/src/components/CheckoutShared/hooks/useTaxRequiredFields.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Resolves the checkout form's fields from the consumer's `requiredBillingDetails` and the fields the
+ * taxation plugin needs for the chosen country. Keeps the previous answer while a new country is
+ * fetched so fields don't flicker.
+ */
+export declare function useTaxRequiredFields(countryCode: string | undefined): {
+    fields: import("../utils/resolveCheckoutFields").CheckoutFields;
+    isFetched: boolean;
+};

package/dist/esm/types/src/components/CheckoutShared/utils/amountPaid.d.ts

@@ -0,0 +1,7 @@
+/** What the checkout charged: the first invoice's amount, or the quote's amount due when no invoice was raised. */
+export declare const amountPaid: (quote: {
+    invoices?: readonly {
+        amount?: number | null;
+    }[] | null;
+    amountDue?: number | null;
+}) => number;

package/dist/esm/types/src/components/CheckoutShared/utils/billingDetails.d.ts

@@ -0,0 +1,14 @@
+import type { Payer } from '../../PaymentMethods/hooks/useStripePaymentMethodId';
+import type { CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+/** The form's address and tax fields, as the API's `BillingDetailsAttributes`. */
+export type CheckoutBillingDetails = Pick<CheckoutFormValues, 'billingCountry' | 'billingZip' | 'billingStreet' | 'billingCity' | 'billingState' | 'taxNumber'>;
+/**
+ * Maps form values to `billingDetails`. The amount due preview and the signup both send this, so taxes
+ * are previewed from exactly the address that is signed up with.
+ */
+export declare const billingDetailsFromValues: (values: Partial<CheckoutFormValues>) => Partial<CheckoutBillingDetails>;
+/**
+ * The payer fields the form collects instead of Stripe's Payment Element (see `PayerFields`): the name
+ * on the card and the email, plus the country and postal code when the form has a country field.
+ */
+export declare const payerFromValues: (values: CheckoutFormValues, hasCountryField: boolean) => Payer;

package/dist/esm/types/src/components/CheckoutShared/utils/compactValues.d.ts

@@ -0,0 +1,6 @@
+type Compacted<T> = {
+    [K in keyof T]?: Exclude<T[K], null | undefined>;
+};
+/** Drops the null, undefined and empty-string entries, so an unset field is neither sent nor prefilled. */
+export declare const compactValues: <T extends object>(values: T) => Compacted<T>;
+export {};

package/dist/esm/types/src/components/CheckoutShared/utils/nextBillingDate.d.ts

@@ -0,0 +1,8 @@
+/** The day after the trial ends, or else the day after the quote's invoiced period ends (ISO8601Date scalars are untyped, hence `unknown`). */
+export declare const nextBillingDate: (quote: {
+    invoiceUntil?: unknown;
+    quoteChanges?: readonly {
+        isTrial?: boolean | null;
+        trialEndDate?: unknown;
+    }[] | null;
+}) => string | undefined;

package/dist/esm/types/src/components/CheckoutShared/utils/planName.d.ts

@@ -0,0 +1,6 @@
+export declare const planName: (priceList: {
+    name: string;
+    product?: {
+        name: string;
+    } | null;
+}) => string;

package/dist/esm/types/src/components/CheckoutShared/utils/quoteCharges.d.ts

@@ -0,0 +1,25 @@
+/** Every charge across the quote's changes. */
+export declare const quoteCharges: <Charge>(quote: {
+    quoteChanges?: readonly {
+        charges?: readonly Charge[] | null;
+    }[] | null;
+}) => Charge[];
+/** The code of the coupon the API applied to the quote, if any. */
+export declare const quoteCouponCode: (quote: {
+    quoteChanges?: readonly {
+        charges?: readonly {
+            coupon?: {
+                couponCode?: string | null;
+            } | null;
+        }[] | null;
+    }[] | null;
+}) => string | undefined;
+/** The total discount from the quote's coupon charges, which carry it as a positive subtotal. */
+export declare const quoteCouponDiscount: (quote: {
+    quoteChanges?: readonly {
+        charges?: readonly {
+            subtotal?: number | null;
+            coupon?: unknown;
+        }[] | null;
+    }[] | null;
+}) => number;

package/dist/esm/types/src/components/CheckoutShared/utils/resolveCheckoutFields.d.ts

@@ -0,0 +1,16 @@
+import { RequiredBillingDetailsFlags, CheckoutFormValues } from '../contexts/CheckoutConfigContext';
+export type CheckoutFieldName = Exclude<keyof CheckoutFormValues, 'nameOnCard'>;
+export type CheckoutFieldRule = {
+    visible: boolean;
+    required: boolean;
+};
+export type CheckoutFields = Record<CheckoutFieldName, CheckoutFieldRule>;
+/**
+ * Which account fields the checkout form shows and requires. Email always; country only when taxation
+ * needs it; every other field when the consumer flags it in `requiredBillingDetails` or taxation
+ * needs it. A shown field is always required.
+ */
+export declare function resolveCheckoutFields({ requiredBillingDetails, taxRequiredFields, }: {
+    requiredBillingDetails?: RequiredBillingDetailsFlags;
+    taxRequiredFields: readonly string[];
+}): CheckoutFields;

package/dist/esm/types/src/components/DocumentTemplatePreview.d.ts

@@ -1,8 +1,10 @@
 export type DocumentPreviewFullscreenApi = {
     toggleFullScreen: () => void;
 };
-declare const DocumentTemplatePreview: ({ targetUrl, onFullscreenApiChange, }: {
+declare const DocumentTemplatePreview: ({ targetUrl, version, onFullscreenApiChange, }: {
     targetUrl: string;
+    /** Anything that changes when the document does; a new value fetches the PDF again. */
+    version?: string;
     onFullscreenApiChange?: (api: DocumentPreviewFullscreenApi | null) => void;
 }) => import("react").JSX.Element;
 export default DocumentTemplatePreview;

package/dist/esm/types/src/components/DrawerHeader.d.ts

@@ -1,7 +1,6 @@
-declare const DrawerHeader: ({ description, onClose, title, closeButtonClassName, }: {
+/** A drawer's title with a description under it. The drawer draws the close button beside it. */
+declare const DrawerHeader: ({ description, title }: {
     description?: string;
-    onClose?: () => void;
     title: string;
-    closeButtonClassName?: string;
 }) => import("react").JSX.Element;
 export default DrawerHeader;

package/dist/esm/types/src/components/Error.d.ts

@@ -1,3 +1,4 @@
+/** A screen with nothing to show: the message as the page's title. */
 declare const ErrorView: ({ children, message, }: {
     children?: React.ReactNode;
     message: string;

package/dist/esm/types/src/components/Footer/BunnyFooterIcon.d.ts

@@ -1,4 +1,2 @@
-declare const BunnyFooterIcon: ({ color }: {
-    color: string;
-}) => import("react").JSX.Element;
+declare const BunnyFooterIcon: () => import("react").JSX.Element;
 export default BunnyFooterIcon;

package/dist/esm/types/src/components/Footer/Footer.d.ts

@@ -1,4 +1,9 @@
-declare const Footer: ({ className }: {
+import type { CSSProperties } from 'react';
+import { type Appearance } from '../../ui/appearance';
+declare const Footer: ({ className, style, appearance, }: {
     className?: string;
+    style?: CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
 }) => import("react").JSX.Element;
 export default Footer;

package/dist/esm/types/src/components/Footer/Footer.rules.d.ts

@@ -0,0 +1,25 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function footerRules(v: ResolvedVariables): {
+    internal: {
+        '.Footer .Link': {
+            fontSize: string;
+            color: string;
+        };
+        '.Footer .Link:hover': {
+            color: string;
+        };
+        '.Footer .Link .TextSecondary': {
+            color: string;
+        };
+        '.FooterIcon path': {
+            transition: string;
+        };
+    };
+    public: {
+        '.Footer': {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+        };
+    };
+};

package/dist/esm/types/src/components/Footer/Footer.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Footer from './Footer';
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/Invoice/Invoice.d.ts

@@ -1,7 +1,13 @@
+import { type CSSProperties } from 'react';
 import { InvoiceQuoteContextProps } from '../../contexts/InvoiceQuoteContext';
+import { type Appearance } from '../../ui/appearance';
 export type InvoiceProps = InvoiceQuoteContextProps & {
     hidePaymentForm?: boolean;
     onPaymentMethodSaved?: (paymentMethodId: string) => void;
     onPaymentMethodRemoved?: (paymentMethodId: string) => void;
+    /** A custom style to apply to the component */
+    style?: CSSProperties;
+    /** Restyles this component on top of `BunnyProvider`'s `appearance`. See "Styling components" in the package README. */
+    appearance?: Appearance;
 };
-export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): import("react").JSX.Element;
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, style, appearance, }: InvoiceProps): import("react").JSX.Element;

package/dist/esm/types/src/components/Invoice/Invoice.rules.d.ts

@@ -0,0 +1,52 @@
+import type { ResolvedVariables } from '../../ui/appearance/variables';
+export declare function invoiceRules(v: ResolvedVariables): {
+    internal: {
+        '.InvoiceBase': {
+            boxSizing: string;
+            lineHeight: string;
+        };
+        '.InvoiceHtml': {
+            color: string;
+            backgroundColor: string;
+        };
+        '.Drawer .InvoiceHtml': {
+            color: string;
+        };
+        '.Modal .InvoiceHtml': {
+            color: string;
+        };
+        '.InvoiceMarkup span': {
+            width: string;
+        };
+        '.Link.ButtonLink.BackButton': {
+            color: string;
+        };
+        '.Link.ButtonLink.BackButton:hover': {
+            color: string;
+        };
+        '.TextSecondary.BackButtonText': {
+            color: string;
+        };
+        '.DownloadIcon': {
+            color: string;
+            transition: string;
+        };
+        '.ButtonBase:hover .DownloadIcon': {
+            color: string;
+        };
+        '.Invoice .ButtonSecondary--compact': {
+            padding: string;
+        };
+    };
+    public: {
+        '.Invoice .ButtonSecondary': {
+            borderWidth: string;
+            borderColor: string;
+            color: string;
+        };
+        '.Invoice': {
+            color: string;
+            fontFamily: string;
+        };
+    };
+};

package/dist/esm/types/src/components/Invoice/Invoice.stories.d.ts

@@ -8,10 +8,9 @@ export declare const basicArgs: {
     id: string;
 };
 export declare const Default: Story;
-export declare const NoShadow: Story;
 export declare const CustomBackButton: Story;
 export declare const Mobile: Story;
-export declare const CustomClassName: Story;
 export declare const HideDownloadButton: Story;
 export declare const InvoiceDue: Story;
-export declare const DarkMode: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/esm/types/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,4 +1,4 @@
-import { FragmentOf, ResultOf } from 'gql.tada';
+import { FragmentOf } from 'gql.tada';
 import type { ComponentProps } from 'react';
 import { ReactNode } from 'react';
 import { CheckoutNoPayment } from './components/CheckoutNoPayment';
@@ -6,9 +6,8 @@ import { NoPaymentPluginsAlert } from './components/NoPaymentPluginsAlert';
 import { Pay } from './components/Pay';
 import { PaymentMethodDetails } from './components/PaymentMethodDetails/PaymentMethodDetails';
 import { StoredPaymentMethods } from './components/StoredPaymentMethods';
-import { PaymentForm_PaymentMethodsFragment } from './fragments/PaymentForm_PaymentMethodsFragment';
+import { PaymentMethodFragment } from './context/CallbacksContext';
 import { PaymentForm_QuoteFragment } from './fragments/PaymentForm_QuoteFragment';
-type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export declare const PaymentForm_InvoiceFragment: import("gql.tada").TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -42,10 +41,14 @@ declare function PaymentFormRoot({ currencyId: accountCurrencyId, invoice: maske
 type PaymentFormProps = ComponentProps<typeof PaymentFormRoot>;
 export type PaymentFormRenderState = {
     hasPaymentMethods: boolean;
+    /** The new payment method form is open: "New card" is chosen, or there is no saved method. */
     isPaymentMethodDetailsOpen: boolean;
     isPayableAvailable: boolean;
     amountDue: number | undefined;
+    /** Payment plugins with a payment form (Stripe, DemoPay); undefined until they have loaded. */
     paymentPluginsCount: number | undefined;
+    /** The saved payment method `Pay` will use, or undefined when a new one is entered. */
+    selectedPaymentMethodId: string | undefined;
 };
 declare function PaymentFormInternal(props: PaymentFormProps & {
     disablePayButton?: boolean;

package/dist/esm/types/src/components/PaymentForm/PaymentForm.stories.d.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps } from 'react';
+import type { Appearance } from '@/ui/appearance';
+import { PaymentForm } from './PaymentForm';
+type Args = ComponentProps<typeof PaymentForm> & {
+    /** PaymentForm has no `appearance` of its own: it follows the provider's (or the screen it sits in). */
+    appearance?: Appearance;
+};
+declare const meta: Meta<Args>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Paying an invoice with the account's one saved card. */
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const NoSavedCards: Story;
+export declare const TwoSavedCards: Story;
+/** Three options or more are compact rows: three cards, "Show 2 more", then "New card". */
+export declare const FiveSavedCards: Story;
+/** With more than one plugin, "New card" leads to a choice of plugin. */
+export declare const TwoPlugins: Story;
+export declare const ThreePlugins: Story;
+export declare const SavedCardsAndThreePlugins: Story;
+/** No invoice or quote: managing the saved cards, one of which failed. */
+export declare const ManageSavedCards: Story;
+export declare const ManageNoSavedCards: Story;
+/** Approving a payment hold for a quote, as the quote's "Pay and sign" modal does. */
+export declare const PaymentHold: Story;
+/**
+ * The compound pieces in an order of the caller's own: the new card form first, the saved cards
+ * under it, then a line reading the render state, then Pay. The pieces coordinate through the
+ * form, not by being next to each other.
+ */
+export declare const CustomComposition: Story;
+/**
+ * Only the new card form, with Pay in its footer. With saved cards but no tiles to choose from, the
+ * form stays closed behind "Add payment method", so Pay shows once a new card is chosen.
+ */
+export declare const DetailsWithoutStoredPaymentMethods: Story;
+/**
+ * No saved card tiles: Pay uses the default saved card until "Add payment method" opens the new card
+ * form, which Pay then stores and pays with; Cancel goes back to the default card.
+ */
+export declare const WithoutStoredPaymentMethods: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;
+export declare const LedgerFiveSavedCards: Story;
+export declare const MidnightFiveSavedCards: Story;
+export declare const LedgerManageSavedCards: Story;
+export declare const MidnightManageSavedCards: Story;

package/dist/esm/types/src/components/PaymentForm/components/CouponEditor.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Note: the Signup / Checkout screen (`CheckoutShared`) has its own coupon editor
+ * (`CheckoutCouponEditor`) instead of reusing this view: its coupon lives in the screen's pricing state
+ * and shows as a Discount row once applied. Only the coupon hooks are shared.
+ */
+/** Coupon editor bound to a quote: applies and removes coupons through the quote coupon mutations. */
 declare function CouponEditor({ className, apiHost, token, quoteId, appliedCoupons, onCouponAdded, onCouponRemoved, }: {
     className?: string;
     apiHost: string;
@@ -7,4 +13,13 @@ declare function CouponEditor({ className, apiHost, token, quoteId, appliedCoupo
     onCouponAdded?: () => void;
     onCouponRemoved?: () => void;
 }): import("react").JSX.Element;
+/** Presentational coupon editor: the caller decides what applying and removing a code does. */
+export declare function CouponEditorView({ className, appliedCoupons, onApply, onRemove, isApplying, isRemoving, }: {
+    className?: string;
+    appliedCoupons: string[];
+    onApply: (code: string) => void;
+    onRemove: (code: string) => void;
+    isApplying: boolean;
+    isRemoving: boolean;
+}): import("react").JSX.Element;
 export default CouponEditor;

package/dist/{cjs/types/src/components/PaymentForm/DemoPay/CreditCard → esm/types/src/components/PaymentForm/components}/MiniCreditCard.d.ts

@@ -17,6 +17,12 @@ export declare const MiniCreditCard_PaymentMethodFragment: import("gql.tada").Ta
     on: "PaymentMethod";
     masked: true;
 }>;
+/**
+ * A saved payment method as one line: brand, last digits, `Default`/`Failed` tags and a menu.
+ *
+ * @deprecated PaymentForm no longer uses it: saved payment methods are its tiles now. It will be removed
+ * in the next release.
+ */
 export declare function MiniCreditCard({ className, buttons, hideDropdownMenu, hideDefaultTag, onClickRemove, paymentMethod: maskedPaymentMethod, onClickSetDefault, id, }: {
     className?: string;
     buttons?: React.ReactNode;

package/dist/esm/types/src/components/PaymentForm/components/Pay.d.ts

@@ -2,5 +2,11 @@ type PayProps = {
     disabled?: boolean;
     onClickPrecondition?: () => boolean | Promise<boolean>;
 };
+/**
+ * Pays (or approves the payment hold) with the selected payment method. A saved method is used as it
+ * is, without changing the account's default. A new one is stored first, in the same click, and
+ * selected once the payment is through or declined, so a retry doesn't store it again. (Selecting it
+ * earlier would close the new method form, and this button with it, mid-payment.)
+ */
 export declare function Pay(props?: PayProps): import("react").JSX.Element;
 export {};

package/dist/esm/types/src/components/PaymentForm/components/PaymentMethodDetails/PaymentMethodDetails.d.ts

@@ -4,7 +4,13 @@ import { Save } from './components/Save';
 type PaymentMethodDetailsProps = {
     footer?: ReactNode;
 };
-declare function PaymentMethodDetailsRoot(props?: PaymentMethodDetailsProps): import("react").JSX.Element;
+/**
+ * The new payment method form: plugin tiles when there is more than one plugin, then the selected
+ * plugin's fields, then `footer`, spaced like the rows of Checkout's form. It shows while a new method
+ * is chosen, and straight away without saved methods. With saved methods and no saved method tiles on
+ * screen to choose "New card" in, it shows "Add payment method" until then.
+ */
+declare function PaymentMethodDetailsRoot(props?: PaymentMethodDetailsProps): import("react").JSX.Element | null;
 export declare const PaymentMethodDetails: typeof PaymentMethodDetailsRoot & {
     Cancel: typeof Cancel;
     Save: typeof Save;

package/dist/esm/types/src/components/PaymentForm/components/PaymentMethodDetails/components/Cancel.d.ts

@@ -1 +1,2 @@
-export declare function Cancel(): import("react").JSX.Element;
+/** Closes the new payment method form by going back to the default saved method. Only shown when there is one. */
+export declare function Cancel(): import("react").JSX.Element | null;

package/dist/esm/types/src/components/PaymentForm/components/PaymentMethodDetails/components/Save.d.ts

@@ -2,6 +2,7 @@ type SaveButtonTextOverride = {
     text: string;
     isProcessingText: string;
 };
+/** Stores the payment method entered in the form, then closes the form again. */
 export declare function Save({ onClickPrecondition, buttonTextOverride, }: {
     onClickPrecondition?: () => boolean | Promise<boolean>;
     buttonTextOverride?: SaveButtonTextOverride;

package/dist/esm/types/src/components/PaymentForm/components/StoredPaymentMethods.d.ts

@@ -1,5 +1,11 @@
 type StoredPaymentMethodsProps = {
     className?: string;
 };
-export declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): import("react").JSX.Element;
+/**
+ * The account's saved payment methods as tiles, then "New card", which opens the new payment method
+ * form. When paying, a tile is the method to pay with (the default is preselected; choosing another
+ * pays with it this once and leaves the default alone). When only saving (no invoice or quote), the
+ * tiles are cards to manage. Either way each has a menu to remove it or make it the default.
+ */
+export declare function StoredPaymentMethods(props?: StoredPaymentMethodsProps): import("react").JSX.Element | null;
 export {};

package/dist/esm/types/src/components/PaymentForm/context/CallbacksContext.d.ts

@@ -1,4 +1,6 @@
-import { PaymentMethodFragment } from './PaymentMethodFormVisibilityContext';
+import { ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
+export type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export type PaymentCallbacksContextValue = {
     onPaymentSuccess: ((response: any) => void) | undefined;
     onSetDefaultPaymentMethod: (() => void) | undefined;