@movmo_app/payments 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -7,6 +7,16 @@ export declare interface CardFieldError {
     message: string;
 }
 
+/**
+ * Focus state of each Spreedly-hosted iframe. The browser's `focus-within`
+ * CSS pseudo-class can't see across iframe boundaries, so the consumer needs
+ * an explicit signal to render the "active border" on the iframe shell.
+ */
+declare interface CardFieldFocus {
+    number: boolean;
+    cvv: boolean;
+}
+
 declare interface CardFieldValidity {
     /** True only when the card-number field has a complete, length-valid value. */
     number: boolean;
@@ -32,7 +42,7 @@ export declare const getPaymentsConfig: () => InternalPaymentsConfig;
 /* Excluded from this release type: InternalPaymentsConfig */
 
 export declare const MovmoCardForm: {
-    ({ userId, onSuccess, onError, isDefault, className, defaultCardholderName, defaultCardholderFirstName, defaultCardholderLastName, autoSave, formId, hideInternalSaveButton, onCanSubmitChange, }: MovmoCardFormProps): JSX_2.Element;
+    ({ userId, onSuccess, onError, isDefault, className, defaultCardholderName, defaultCardholderFirstName, defaultCardholderLastName, autoSave, formId, hideInternalSaveButton, onCanSubmitChange, onSavingChange, autoFocus, }: MovmoCardFormProps): JSX_2.Element;
     displayName: string;
 };
 
@@ -77,15 +87,32 @@ export declare interface MovmoCardFormProps {
      * not in flight). Use to enable / disable an external Save button.
      */
     onCanSubmitChange?: (canSubmit: boolean) => void;
+    /**
+     * Fires whenever the form transitions in / out of the "saving" state
+     * (tokenize call or save POST in flight). A parent rendering its own
+     * Save button (e.g. a modal footer) uses this to swap the button label
+     * for a spinner. The hook's loading state is internal and not surfaced
+     * directly — this callback is the single source of truth.
+     */
+    onSavingChange?: (isSaving: boolean) => void;
+    /**
+     * When set, the named Spreedly hosted-fields iframe receives keyboard
+     * focus the moment the field becomes ready. Use `"number"` for the
+     * accounts-ui add-card modal so the user can start typing immediately.
+     */
+    autoFocus?: 'number' | 'cvv';
 }
 
 /**
- * Compact preview of a single saved card: brand icon + "Brand last4".
- * Used by consumers (e.g. flights-ui's collapsed checkout drawer) to show
- * the currently-selected card outside the full `<PaymentMethodsManager />`
+ * Compact preview of a single saved card: brand icon + label. Used by
+ * consumers (e.g. flights-ui's collapsed checkout drawer) to show the
+ * currently-selected card outside the full `<PaymentMethodsManager />`
  * list view. Keeps the brand-icon styling consistent with the expanded list.
+ *
+ * Brand icon is sized to match flights-ui main's `w-[34px]` collapsed view.
+ * No vertical padding — the parent controls spacing.
  */
-export declare const PaymentMethodPreview: ({ method, trailing, onClick, className, }: PaymentMethodPreviewProps) => JSX_2.Element;
+export declare const PaymentMethodPreview: ({ method, trailing, onClick, cardLabelFormat, className, }: PaymentMethodPreviewProps) => JSX_2.Element;
 
 export declare interface PaymentMethodPreviewProps {
     /**
@@ -98,11 +125,17 @@ export declare interface PaymentMethodPreviewProps {
     trailing?: React.ReactNode;
     /** Whole-row click handler — typically toggles the drawer open. */
     onClick?: () => void;
+    /**
+     * Controls how the card label is rendered.
+     * - `'branded'` (default): "Visa 4242" — brand name + last4
+     * - `'masked'`: "•••• 4242" — masked bullets + last4 (flights-ui collapsed-drawer style)
+     */
+    cardLabelFormat?: 'masked' | 'branded';
     className?: string;
 }
 
 export declare const PaymentMethodsManager: {
-    ({ userId, defaultCardholderName, defaultCardholderFirstName, defaultCardholderLastName, selectedId, onSelect, onChange, paymentTypeSelector, autoSaveFirstCard, selectionSetsDefault, showDefaultBadge, className, }: PaymentMethodsManagerProps): JSX_2.Element;
+    ({ userId, defaultCardholderName, defaultCardholderFirstName, defaultCardholderLastName, selectedId, onSelect, onChange, paymentTypeSelector, autoSaveFirstCard, selectionSetsDefault, showDefaultBadge, collapsible, cardLabelFormat, className, }: PaymentMethodsManagerProps): JSX_2.Element;
     displayName: string;
 };
 
@@ -151,6 +184,19 @@ export declare interface PaymentMethodsManagerProps {
      * Defaults to `true`.
      */
     showDefaultBadge?: boolean;
+    /**
+     * When `true` AND the user has at least one saved card, the list collapses
+     * into a compact preview row with a chevron-down toggle. Expanding shows the
+     * full list + Add button. Defaults to `false` (accounts-ui behaviour).
+     * flights-ui passes `true`.
+     */
+    collapsible?: boolean;
+    /**
+     * Controls the card label format inside rows.
+     * - `'branded'` (default): "Visa 4242" — brand name + last4
+     * - `'masked'`: "•••• 4242" — masked bullets + last4 (flights-ui style)
+     */
+    cardLabelFormat?: 'masked' | 'branded';
     className?: string;
 }
 
@@ -171,6 +217,15 @@ export declare interface PaymentsConfig {
      * consumers should override at boot once a prod CDN is set up.
      */
     iconCdnBaseUrl?: string;
+    /**
+     * Custom `fetch` impl used by every API call in this package. Defaults to
+     * `globalThis.fetch`. Consumers that need auth-token refresh, CSRF-token
+     * injection, or any other request-shaping logic should provide their own
+     * wrapper here (e.g. one that retries on 401/403 after refreshing the
+     * session cookie). The package never adds business headers — that's the
+     * consumer's responsibility.
+     */
+    fetch?: typeof fetch;
 }
 
 export declare const setPaymentsConfig: (config: Partial<PaymentsConfig>) => void;
@@ -231,6 +286,12 @@ export declare interface UseMovmoCardFieldsResult {
     validity: CardFieldValidity;
     /** Latest detected brand (or null if unknown). */
     brand: string | null;
+    /**
+     * Live focus state for each iframe. True while the user is editing that
+     * field. Consumers use this to apply an "active" border on the iframe shell
+     * (the browser's `:focus-within` CSS doesn't propagate across iframes).
+     */
+    focused: CardFieldFocus;
     /**
      * Programmatically move keyboard focus into one of the Spreedly iframes.
      * No-op when the hook is not in the `'ready'` state. Used to auto-advance