@primer-io/primer-js 0.1.4 → 0.1.6

package/dist/jsx/index.d.ts

@@ -62,14 +62,14 @@ type BaseEvents = {};
 
 export type PrimerCheckoutComponentProps = {
   /**  */
-  "custom-styles"?: string;
+  customStyles?: string;
   /**  */
-  "client-token"?: string;
+  clientToken?: string;
   /**  */
   options?: PrimerCheckoutOptions;
   /** Whether the component has completed initialization and loading
 This is used to control the CSS-only loader visibility */
-  "js-initialized"?: boolean;
+  _jsInitialized?: boolean;
   /**  */
   jsInitialized?: boolean;
   /**  */
@@ -101,7 +101,7 @@ export type ButtonComponentProps = {
 When true, the button will display a spinner and be disabled */
   loading?: boolean;
   /**  */
-  buttonType?: "button" | "submit" | "reset";
+  type?: "button" | "submit" | "reset";
   /** Selection state of the button
 - default: Not checked
 - checked: Button is checked */
@@ -274,6 +274,8 @@ export type AchPaymentComponentProps = {
 };
 
 export type CardFormComponentProps = {
+  /**  */
+  "hide-labels"?: boolean;
   /** Payment managers injected from context */
   paymentManagers?: InitializedManagersMap;
 };
@@ -354,7 +356,9 @@ export type ShowOtherPaymentsComponentProps = {
 };
 
 export type VaultManagerComponentProps = {
-  /** Strongly typed event declarations */
+  /** Animation duration override */
+  animationDuration?: number;
+  /**  */
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
@@ -366,8 +370,7 @@ export type VaultManagerComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /** The vault manager core context from the SDK
-Contains vault-related functionality and state */
+  /**  */
   vaultManagerContext?: VaultManagerContext;
 };
 
@@ -1001,6 +1004,7 @@ export type CustomElements = {
    * Uses the VaultManagerController for display formatting
    * Now supports selection via the simplified button checked state
    * Enhanced with smooth transitions between edit and payment modes
+   * Always renders the primer-button for consistent UI and improved accessibility
    * ---
    *
    *

package/dist/primer-loader.d.ts

@@ -2319,6 +2319,13 @@ export declare class InitializedPayments {
 	toArray(): InitializedPaymentMethod[];
 	size(): number;
 }
+export interface OnCheckoutCompletePayload {
+	payment: Payment | null;
+}
+export interface OnCheckoutFailurePayload {
+	error: PrimerClientError;
+	payment?: Payment;
+}
 export interface CardSubmitSuccessPayload {
 	result: unknown;
 }
@@ -2330,6 +2337,8 @@ export interface PrimeAchErrorPayload {
 }
 export interface PrimerEvents {
 	"primer-state-changed": CustomEvent<SdkStateContext>;
+	"primer-oncheckout-complete": CustomEvent<OnCheckoutCompletePayload>;
+	"primer-oncheckout-failure": CustomEvent<OnCheckoutFailurePayload>;
 	"primer-payment-methods-updated": CustomEvent<InitializedPayments>;
 	"primer-checkout-initialized": CustomEvent<PrimerHeadlessCheckout>;
 	"primer-card-network-change": CustomEvent<CardNetworksContext>;
@@ -2356,6 +2365,8 @@ declare class PrimerEventsController implements ReactiveController {
 	dispatchPaymentMethods(paymentMethods: InitializedPayments): void;
 	dispatchCheckoutInitialized(checkoutInstance: PrimerHeadlessCheckout): void;
 	dispatchCardNetworkChange(network: CardNetworksContext): void;
+	dispatchOnCheckoutComplete(payment: Payment | null): void;
+	dispatchOnCheckoutFailure(error: PrimerClientError, payment?: Payment): void;
 	dispatchFormSubmitSuccess(result: unknown): void;
 	dispatchFormSubmitErrors(errors: unknown): void;
 }
@@ -2364,6 +2375,37 @@ export type KlarnaCategoriesContext = {
 	categories: KlarnaPaymentMethodCategory[];
 	isLoading: boolean;
 };
+export type ReducerCallbacks<State, _Action extends {
+	type: string;
+}> = {
+	[K in keyof State]?: State[K] extends (...args: unknown[]) => unknown ? State[K] : never;
+};
+export type TypedReducer<State, Action extends {
+	type: string;
+}, Callbacks> = (state: State, action: Action, callbacks: Callbacks) => State;
+declare abstract class ReactiveStateController<Host extends ReactiveControllerHost, State, Action extends {
+	type: string;
+}, Callbacks = ReducerCallbacks<State, Action> | null> implements ReactiveController {
+	protected host: Host;
+	protected stateHandler: (state: State) => void;
+	private _dispatcher;
+	constructor(host: Host, initialState: State, reducer: TypedReducer<State, Action, Callbacks>, initialCallbacks: Callbacks, stateHandler?: (state: State) => void);
+	get currentState(): Readonly<State>;
+	protected dispatch(action: Action): void;
+	protected setCallbacks(callbacks: Partial<Callbacks>): void;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
+declare class CompositeStateController<Host extends ReactiveControllerHost> implements ReactiveController {
+	protected host: Host;
+	private _controllers;
+	constructor(host: Host);
+	addController<State, Action extends {
+		type: string;
+	}, Callbacks = ReducerCallbacks<State, Action> | null>(controller: ReactiveStateController<Host, State, Action, Callbacks>): void;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
 /**
  * Options for initializing the Vault Manager
  */
@@ -2378,9 +2420,10 @@ export interface VaultManagerInitOptions {
 export interface VaultManagerState {
 	enabled: boolean;
 	isLoading: boolean;
+	isUpdating: boolean;
 	vaultedPaymentMethods: VaultedPaymentMethod[];
 	cvvRecapture: boolean;
-	createCvvInput?: (options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>;
+	createCvvInput: ((options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>) | null;
 	deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
 	startVaultedPaymentFlow: (options?: {
 		cvv?: string;
@@ -2397,10 +2440,9 @@ export interface VaultManagerItemState {
 	selectedVaultedPaymentMethod: VaultedPaymentMethod | null;
 	setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
 }
-declare class VaultManagerController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private _vaultManagerState;
-	private _vaultItemState;
+declare class VaultManagerController extends CompositeStateController<PrimerCheckoutType> {
+	private coreController;
+	private itemController;
 	private _vaultManager;
 	private _options;
 	constructor(host: PrimerCheckoutType);
@@ -2414,23 +2456,17 @@ declare class VaultManagerController implements ReactiveController {
 	set vaultManager(vaultManager: HeadlessVaultManager | null);
 	get options(): VaultManagerInitOptions | null;
 	set options(options: VaultManagerInitOptions | null);
+	get vaultManagerState(): Readonly<VaultManagerState>;
+	get vaultItemState(): Readonly<VaultManagerItemState>;
 	/**
 	 * Lifecycle method called when the host disconnects
 	 */
 	hostDisconnected(): void;
-	/**
-	 * Dispatches an action to update the core vault state
-	 */
-	private dispatchVaultManager;
-	/**
-	 * Dispatches an action to update the CVV state
-	 * Separate dispatch method to handle CVV state independently
-	 */
-	private dispatchVaultItem;
 	/**
 	 * Fetch vaulted payment methods from the server
 	 */
-	fetchVaultedPaymentMethods(): Promise<VaultedPaymentMethod[]>;
+	fetchVaultedPaymentMethods(initialLoad?: boolean): Promise<VaultedPaymentMethod[]>;
+	createCvvInput(options: CardSecurityCodeInputOptions): Promise<CvvInput | null>;
 	/**
 	 * Delete a vaulted payment method by ID
 	 */
@@ -2498,13 +2534,33 @@ declare class SDKContextController implements ReactiveController {
 	setComputedStyles(value: CSSStyleDeclaration): void;
 	setVaultManagerCvv(value: VaultItemContext): void;
 }
-declare class SdkStateController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private _state;
+export type SdkStateAction = {
+	type: "START_PROCESSING";
+} | {
+	type: "START_LOADING";
+} | {
+	type: "COMPLETE_PROCESSING";
+} | {
+	type: "STOP_PROCESSING";
+} | {
+	type: "SET_ERROR";
+	payload: Error;
+} | {
+	type: "SET_FAILURE";
+	payload: {
+		code: string;
+		message: string;
+		details?: Record<string, unknown>;
+	};
+} | {
+	type: "COMPLETE_LOADING";
+} | {
+	type: "RESET";
+} | {
+	type: "RESET_ERROR";
+};
+declare class SdkStateController extends ReactiveStateController<PrimerCheckoutType, SdkState, SdkStateAction, null> {
 	constructor(host: PrimerCheckoutType);
-	hostConnected(): void;
-	private reducer;
-	private dispatch;
 	startLoading(): void;
 	startProcessing(): void;
 	stopProcessing(): void;
@@ -2513,8 +2569,8 @@ declare class SdkStateController implements ReactiveController {
 	setError(error: Error): void;
 	setFailure(code: string, message: string, details?: Record<string, unknown>): void;
 	reset(): void;
+	resetError(): void;
 	forceCompleteLoading(): void;
-	get state(): SdkState;
 }
 export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
 	requestUpdate: ReactiveControllerHost["requestUpdate"];
@@ -3222,7 +3278,7 @@ declare class PrimerKlarnaComponent extends LitElement {
 	renderSelectedCategory(): Promise<void>;
 	selectCategory(category: string): void;
 	updated(changedProperties: Map<string, unknown>): void;
-	renderCategorySelection(): typeof nothing | TemplateResult<1>;
+	renderCategorySelection(): TemplateResult<1>;
 	renderExpandedContent(): TemplateResult<1>;
 	render(): typeof nothing | TemplateResult<1> | undefined;
 }
@@ -3332,6 +3388,11 @@ declare class RedirectPaymentComponent extends LitElement {
 	sdkState: SdkStateContext;
 	headlessUtils: HeadlessUnitilsContext;
 	private _paymentMethodManagerTask;
+	/**
+	 * Based on packages/primer-sdk-web/src/payment-methods/Button.tsx
+	 * Should be replaced once we align on a better solution across all platforms.
+	 */
+	private _legacyGetButtonLabel;
 	private _getAssetsTask;
 	private _setupTasks;
 	startRedirectPayment(): void;
@@ -3394,6 +3455,8 @@ declare global {
  */
 declare class CardFormComponent extends LitElement {
 	static styles: CSSResult[];
+	hideLabels: boolean;
+	updated(changedProperties: Map<string, unknown>): void;
 	/**
 	 * Tracks whether custom content has been provided via slot
 	 */
@@ -3456,6 +3519,7 @@ export interface CardFormContext {
 	validate: () => Promise<Validation>;
 	submit: (values?: CardPaymentMethodSubmitValues) => Promise<void>;
 	errors?: Validation["validationErrors"];
+	hideLabels?: boolean;
 }
 /**
  * A shared type that ensures the host of a HostedInputController contains
@@ -4016,15 +4080,9 @@ export interface VaultManagerEventMap {
  */
 declare class VaultManagerComponent extends LitElement {
 	static styles: CSSResult[];
-	/**
-	 * Strongly typed event declarations
-	 */
+	constructor();
 	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
 	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
-	/**
-	 * The vault manager core context from the SDK
-	 * Contains vault-related functionality and state
-	 */
 	vaultManagerContext: VaultManagerContext;
 	/**
 	 * Whether we're in edit mode
@@ -4042,6 +4100,14 @@ declare class VaultManagerComponent extends LitElement {
 	 * Error message if something goes wrong
 	 */
 	private errorMessage;
+	/**
+	 * Animation duration override
+	 */
+	animationDuration: number;
+	/**
+	 * Get base animation configuration with current settings
+	 */
+	private getAnimationConfig;
 	/**
 	 * Toggle edit mode handler
 	 */
@@ -4071,13 +4137,24 @@ declare class VaultManagerComponent extends LitElement {
 	 */
 	private getPaymentMethodName;
 	/**
-	 * Render the delete confirmation for the current payment method
+	 * Render loading overlay with spinner when isUpdating is true
+	 */
+	private renderLoadingOverlay;
+	/**
+	 * Render delete confirmation content
 	 */
 	private renderDeleteConfirmation;
 	/**
-	 * Render a payment method item
+	 * Render a payment method item with appropriate animations
 	 */
 	private renderPaymentMethodItem;
+	/**
+	 * Render the payment method list with submit button
+	 */
+	private renderPaymentMethodList;
+	/**
+	 * Main render method
+	 */
 	render(): typeof nothing | TemplateResult<1>;
 }
 /**
@@ -4085,6 +4162,7 @@ declare class VaultManagerComponent extends LitElement {
  * Uses the VaultManagerController for display formatting
  * Now supports selection via the simplified button checked state
  * Enhanced with smooth transitions between edit and payment modes
+ * Always renders the primer-button for consistent UI and improved accessibility
  */
 declare class VaultPaymentMethodItemComponent extends LitElement {
 	static styles: CSSResult[];
@@ -4357,16 +4435,10 @@ declare global {
  */
 declare class ShowOtherPaymentsComponent extends LitElement {
 	static styles: CSSResult[];
-	private isShowingOtherPayments;
 	/**
 	 * Consume the vault manager context to interact with vault state
 	 */
 	vaultManager: VaultManagerContext;
-	/**
-	 * Handle expanded state change events from the collapsable component
-	 * Syncs the collapsable UI state with the vault manager state
-	 */
-	private handleExpandedChanged;
 	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {