@bunnyapp/components 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/cjs/types/src/components/BunnyProvider/BunnyProvider.d.ts

@@ -8,6 +8,12 @@ export type BunnyContextValues = {
 export declare const BunnyContext: import("react").Context<BunnyContextValues>;
 declare function BunnyProvider({ children, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification, disableErrorNotifications, appearance, }: {
     children: React.ReactNode;
+    /**
+     * Your own TanStack Query client, if your app already has one. It replaces Bunny's default client
+     * entirely, so Bunny's error notifications and Sentry reporting for failed requests no longer run:
+     * show errors yourself with an `onError` on the client's `MutationCache` / `QueryCache` (or in
+     * `defaultOptions.mutations.onError`). Payment setup errors are still reported to your page's Sentry.
+     */
     queryClient?: QueryClient;
     apiHost: string;
     token?: string;

package/dist/cjs/types/src/components/Checkout/Checkout.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Checkout>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Preview: Story;
 export declare const DisabledFields: Story;
 export declare const WithDocumentTemplate: Story;
 export declare const StoredPaymentMethod: Story;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutForm/PayButton.d.ts

@@ -1,7 +1,8 @@
 /**
  * "Pay $50.00" with the amount due (or "Start trial" on a trial, "Complete order" when nothing is due), with the authorization text
  * under it. Disabled only until the amount due first resolves and while a recalculation (e.g. taxes)
- * is in flight; an incomplete form stays submittable so that submitting shows what is missing.
+ * is in flight; an incomplete form stays submittable so that submitting shows what is missing. Always disabled in a
+ * preview.
  */
 export default function PayButton({ isProcessing }: {
     isProcessing: boolean;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutRoot.d.ts

@@ -21,8 +21,10 @@ export type CheckoutFlowProps = {
     defaultCouponCode?: string;
     /** Callbacks fired at key lifecycle events */
     callbacks?: CheckoutCallbacks;
+    /** Renders the flow with pricing and fields working but never submits it, e.g. to preview it inside an admin screen */
+    preview?: boolean;
 };
 /** The providers both flows mount, in one order: config, form instance, result, then the appearance. */
-export default function CheckoutRoot({ priceListCode, enableTrial, form, defaultCouponCode, callbacks, appearance, children, }: Omit<CheckoutFlowProps, 'style'> & {
+export default function CheckoutRoot({ priceListCode, enableTrial, form, defaultCouponCode, callbacks, appearance, preview, children, }: Omit<CheckoutFlowProps, 'style'> & {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/components/CheckoutScreen.d.ts

@@ -13,7 +13,7 @@ import { CheckoutQuoteDocument_QuoteFragment } from '../graphql/fragments/Checko
  * document template is configured it goes under the summary: the composed quote before the checkout,
  * and the checked-out quote under the receipt afterwards.
  */
-export default function CheckoutScreen({ style, form, savedPaymentMethods, isFlowReady, showQuoteDocument, quote: pendingQuote, }: {
+export default function CheckoutScreen({ style, form, savedPaymentMethods, isFlowReady, showQuoteDocument, quote: pendingQuote, paymentMethodTypes, }: {
     style?: React.CSSProperties;
     form: ReactNode;
     /** Payment methods already stored on the account, if the flow has one. */
@@ -24,4 +24,6 @@ export default function CheckoutScreen({ style, form, savedPaymentMethods, isFlo
     showQuoteDocument?: boolean;
     /** The quote the flow will check out, if it exists before paying. Its PDF is shown under the summary. */
     quote?: FragmentOf<typeof CheckoutQuoteDocument_QuoteFragment>;
+    /** The Stripe payment method types the flow's SetupIntent is limited to, if it is (see `StripeElements`). */
+    paymentMethodTypes?: readonly string[];
 }): import("react").JSX.Element;

package/dist/cjs/types/src/components/CheckoutShared/contexts/CheckoutConfigContext.d.ts

@@ -62,6 +62,8 @@ export type CheckoutConfig = {
     defaultCouponCode: string | undefined;
     form: CheckoutFormOptions;
     callbacks: CheckoutCallbacks;
+    /** The flow renders but never submits. */
+    preview: boolean;
 };
 export declare const CheckoutConfigProvider: ({ value, children }: {
     value: CheckoutConfig;

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

@@ -3,8 +3,9 @@ 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.
+ * the account), run the flow's checkout and publish its result. Errors are shown by the query
+ * client's own handlers (the default client toasts them), so the flow's `onError` goes on the
+ * `mutate` call: as a `useMutation` option it would replace a consumer client's default `onError`.
  */
 export declare function useCheckoutFormSubmit({ mutationKey, checkout, onError, }: {
     mutationKey: readonly string[];

package/dist/cjs/types/src/components/PaymentMethods/components/StripeElements.d.ts

@@ -7,8 +7,14 @@ import { ReactNode } from 'react';
  * Element render before any intent exists. Such a group needs its currency from the start, so Stripe
  * is held back until there is one. Changes to the appearance or currency reach the mounted elements;
  * `fonts` can't change after the group is created, so new fonts remount it.
+ *
+ * Stripe only confirms a SetupIntent that offers payment methods the same way the group does. Without
+ * `paymentMethodTypes` the group uses the Stripe account's automatic payment methods, which is what
+ * the API's intent for an existing account uses too; a flow whose intent lists its types has to pass
+ * the same list here.
  */
-export default function StripeElements({ currency, children }: {
+export default function StripeElements({ currency, paymentMethodTypes, children, }: {
     currency: string | undefined;
+    paymentMethodTypes?: readonly string[];
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/cjs/types/src/components/PaymentMethods/utils/stripeErrors.d.ts

@@ -0,0 +1,17 @@
+import type { StripeError } from '@stripe/stripe-js';
+/** Errors this module already sent to Sentry, so the default query client's handler skips them. */
+export declare const reportedPaymentErrors: WeakSet<object>;
+/**
+ * Reports a failed payment setup to the host page's Sentry, whatever query client is in use: the
+ * client's handler is the consumer's when they pass their own. Validation errors are the customer's
+ * input, shown by the Payment Element itself, so they aren't reported.
+ */
+export declare function reportPaymentError(error: Error, extra: Record<string, unknown>): void;
+/**
+ * Turns a Stripe error into one the customer can read. Card and validation errors already are
+ * ("Your card has been declined."); anything else is a setup problem whose text is meant for
+ * developers, so the customer gets a generic message and the original goes along as `cause`.
+ */
+export declare function toStripeUserError(stripeError: StripeError, extra: Record<string, unknown>): Error & {
+    cause: StripeError;
+};

package/dist/cjs/types/src/components/Signup/Signup.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Signup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Preview: Story;
 export declare const DisabledFields: Story;
 export declare const Mobile: Story;
 export declare const Ledger: Story;