@primer-io/primer-js 1.2.0 → 1.4.0

package/dist/jsx/index.d.ts

@@ -238,11 +238,36 @@ export type InputWrapperComponentProps = {
   "has-error"?: boolean;
 };
 
+export type PtPhoneNumberInputComponentProps = {
+  /** Fixed PT dial code. Exposed as a property only so tests can override. */
+  prefix?: string;
+  /** Externally-provided full phone number including the prefix. The component
+displays only the local portion (everything after the prefix). */
+  value?: string;
+  /**  */
+  placeholder?: string;
+  /**  */
+  "input-id"?: string;
+  /** Maximum total length of the full phone number (including prefix). */
+  "max-length"?: number;
+  /** Minimum total length of the full phone number (including prefix). */
+  "min-length"?: number;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  "has-errors"?: boolean;
+
+  /**  */
+  oneventName?: (e: CustomEvent<CustomEvent>) => void;
+  /** CustomEvent<string> with full phone number on each keystroke */
+  oninput?: (e: CustomEvent<never>) => void;
+  /** CustomEvent<string> with full phone number on commit */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
 export type SelectComponentProps = {
   /** The name attribute for the select element */
   name?: string;
-  /** The id attribute for the select element */
-  id?: string;
   /** The current value of the select */
   value?: string;
   /** Whether the select is disabled */
@@ -254,13 +279,13 @@ export type SelectComponentProps = {
   /** Array of options for the select */
   options?: SelectOption[];
   /** Fired when selection changes */
-  onchange?: (e: CustomEvent<CustomEvent>) => void;
+  onchange?: (e: CustomEvent<never>) => void;
   /** Fired when input value changes */
-  oninput?: (e: CustomEvent<CustomEvent>) => void;
+  oninput?: (e: CustomEvent<never>) => void;
   /** Fired when select receives focus */
-  onfocus?: (e: CustomEvent<CustomEvent>) => void;
+  onfocus?: (e: CustomEvent<never>) => void;
   /** Fired when select loses focus */
-  onblur?: (e: CustomEvent<CustomEvent>) => void;
+  onblur?: (e: CustomEvent<never>) => void;
 };
 
 export type SpinnerComponentProps = {
@@ -284,6 +309,13 @@ export type AdyenKlarnaComponentProps = {
   primerContext?: ContextType | undefined;
 };
 
+export type AdyenMbwayComponentProps = {
+  /**  */
+  paymentMethod?: MbwayPaymentMethod | undefined;
+  /**  */
+  disabled?: boolean;
+};
+
 export type BillingAddressComponentProps = {
   /**  */
   primerContext?: ContextType | undefined;
@@ -437,13 +469,13 @@ export type VaultManagerComponentProps = {
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   removeEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   primerContext?: ContextType | undefined;
@@ -600,13 +632,13 @@ export type VaultDeleteConfirmationComponentProps = {
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   removeEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
 };
 
@@ -619,13 +651,13 @@ export type VaultErrorMessageComponentProps = {
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   removeEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
 };
 
@@ -638,13 +670,13 @@ export type VaultManagerHeaderComponentProps = {
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   removeEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
 };
 
@@ -655,13 +687,13 @@ export type VaultPaymentMethodItemComponentProps = {
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   removeEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: boolean | AddEventListenerOptions
   ) => void;
   /**  */
   primerContext?: ContextType | undefined;
@@ -825,6 +857,28 @@ export type CustomElements = {
    */
   "primer-input-wrapper": Partial<InputWrapperComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   * Portuguese Phone Number Input
+   *
+   * Inline phone input dedicated to Portuguese (+351) numbers. Renders a PT
+   * flag, a fixed `+351` prefix, and a digit-only field; the user types only
+   * the local digits. Emits `input` / `change` events whose detail is the full
+   * E.164 number (`+351` + digits) or an empty string when no digits are
+   * entered.
+   *
+   * This is intentionally PT-only — MB WAY is the only consumer and only
+   * operates in Portugal. If we ever need other locales, fork into a
+   * country-aware component rather than generalising this one.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **eventName**
+   * - **input** - CustomEvent<string> with full phone number on each keystroke
+   * - **change** - CustomEvent<string> with full phone number on commit
+   */
+  "primer-pt-phone-number-input": Partial<PtPhoneNumberInputComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A native select dropdown component
    * ---
@@ -853,6 +907,15 @@ export type CustomElements = {
    */
   "primer-adyen-klarna": Partial<AdyenKlarnaComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   * Adyen MB WAY Payment Component
+   *
+   * Inline phone-number entry → tokenize → poll MB WAY app → resume.
+   * ---
+   *
+   */
+  "primer-adyen-mbway": Partial<AdyenMbwayComponentProps & BaseProps & BaseEvents>;
+
   /**
    * BillingAddressComponent provides a form for collecting billing address information.
    *

package/dist/primer-loader.d.ts

@@ -572,7 +572,8 @@ declare enum HeadlessManagerType {
 	KLARNA = "KLARNA",
 	ADYEN_KLARNA = "ADYEN_KLARNA",
 	ACH = "ACH",
-	BLIK = "BLIK"
+	BLIK = "BLIK",
+	MBWAY = "MBWAY"
 }
 declare enum EventTypes {
 	CHANGE = "change",
@@ -711,7 +712,7 @@ export interface PaymentMethodConfig<T = Record<string, unknown>> {
 	id: string;
 	type: PaymentMethodType;
 	name: string;
-	implementationType: "WEB_REDIRECT" | "NATIVE_SDK";
+	implementationType: "WEB_REDIRECT" | "NATIVE_SDK" | "BACKEND_DRIVEN";
 	displayMetadata: {
 		button: {
 			backgroundColor: BackgroundColor;
@@ -1049,6 +1050,18 @@ export interface IBlikPaymentMethodManager {
 		blikCode: string;
 	}): Promise<void>;
 }
+/**
+ * Adyen MB WAY Payment Method Manager
+ *
+ * Collects the user's phone number (with country prefix) inline, tokenizes
+ * it, and polls the returned status URL until the user confirms the payment
+ * in the MB WAY mobile app.
+ */
+export interface IMbwayPaymentMethodManager {
+	start(params: {
+		phoneNumber: string;
+	}): Promise<void>;
+}
 /**
  * Adyen Klarna payment option
  */
@@ -1467,12 +1480,39 @@ export interface PrimerCheckoutOptions {
 	 */
 	redirect?: {
 		/**
-		 * URL the payment method redirects back to after the customer completes
-		 * (or cancels) the flow on the external page.
+		 * URL the customer is redirected back to after completing (or
+		 * cancelling) the payment on the external page.
+		 *
+		 * Required when the configured payment methods include any that may
+		 * redirect the customer to an external page. The SDK throws at initialization
+		 * if a redirect-capable payment method is enabled and this is
+		 * missing.
+		 *
+		 * **Setting up the return page**
+		 *
+		 * The URL you provide must host a page that mounts the
+		 * `<primer-checkout>` component again so the payment can be
+		 * resumed. Primer redirects the customer back with a new client
+		 * token appended as a `clientToken` query parameter — read it
+		 * from the URL and pass it to the component:
+		 *
+		 * ```html
+		 * <primer-checkout client-token=""></primer-checkout>
+		 * <script>
+		 *   const clientToken = new URLSearchParams(window.location.search)
+		 *     .get('clientToken');
+		 *   document
+		 *     .querySelector('primer-checkout')
+		 *     .setAttribute('client-token', clientToken);
+		 * </script>
+		 * ```
+		 *
+		 * The SDK reads the intent embedded in the token, detects that
+		 * this is a return-from-redirect, and resumes the payment
+		 * automatically — no separate method call is required.
 		 *
-		 * If omitted, the SDK uses the current page URL.
 		 */
-		returnUrl?: string;
+		returnUrl: string;
 		/**
 		 * Whether to force a full-page redirect for payment methods that would
 		 * otherwise open in a popup.
@@ -1910,10 +1950,11 @@ export type NativePaymentMethodTypes = typeof PaymentMethodType.PAYPAL | typeof
  * - ADYEN_KLARNA: Uses ADYEN_KLARNA manager
  * - PAYPAL, GOOGLE_PAY, APPLE_PAY: Use NATIVE manager
  * - ADYEN_BLIK: Uses BLIK manager
+ * - ADYEN_MBWAY: Uses MBWAY manager
  *
  * All other payment methods use the REDIRECT manager by default.
  */
-export type RedirectPaymentMethodTypes = Exclude<PaymentMethodType, typeof PaymentMethodType.STRIPE_ACH | typeof PaymentMethodType.PAYMENT_CARD | typeof PaymentMethodType.KLARNA | typeof PaymentMethodType.ADYEN_KLARNA | typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY | typeof PaymentMethodType.ADYEN_BLIK>;
+export type RedirectPaymentMethodTypes = Exclude<PaymentMethodType, typeof PaymentMethodType.STRIPE_ACH | typeof PaymentMethodType.PAYMENT_CARD | typeof PaymentMethodType.KLARNA | typeof PaymentMethodType.ADYEN_KLARNA | typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY | typeof PaymentMethodType.ADYEN_BLIK | typeof PaymentMethodType.ADYEN_MBWAY>;
 /**
  * Represents a payment method that uses the REDIRECT manager.
  *
@@ -1937,6 +1978,11 @@ export interface BlikPaymentMethod {
 	managerType: HeadlessManagerType.BLIK;
 	manager: IBlikPaymentMethodManager;
 }
+export interface MbwayPaymentMethod {
+	type: typeof PaymentMethodType.ADYEN_MBWAY;
+	managerType: HeadlessManagerType.MBWAY;
+	manager: IMbwayPaymentMethodManager;
+}
 export type InitializedPaymentMethod = {
 	type: typeof PaymentMethodType.STRIPE_ACH;
 	managerType: HeadlessManagerType.ACH;
@@ -1953,7 +1999,7 @@ export type InitializedPaymentMethod = {
 	type: typeof PaymentMethodType.ADYEN_KLARNA;
 	managerType: HeadlessManagerType.ADYEN_KLARNA;
 	manager: IAdyenKlarnaPaymentMethodManager;
-} | BlikPaymentMethod | RedirectPaymentMethod | NativePaymentMethod;
+} | BlikPaymentMethod | MbwayPaymentMethod | RedirectPaymentMethod | NativePaymentMethod;
 export interface AssetsConfig {
 	backgroundColor: string;
 	name: string;
@@ -3204,6 +3250,59 @@ declare global {
 		"primer-input": InputComponent;
 	}
 }
+/**
+ * Portuguese Phone Number Input
+ *
+ * Inline phone input dedicated to Portuguese (+351) numbers. Renders a PT
+ * flag, a fixed `+351` prefix, and a digit-only field; the user types only
+ * the local digits. Emits `input` / `change` events whose detail is the full
+ * E.164 number (`+351` + digits) or an empty string when no digits are
+ * entered.
+ *
+ * This is intentionally PT-only — MB WAY is the only consumer and only
+ * operates in Portugal. If we ever need other locales, fork into a
+ * country-aware component rather than generalising this one.
+ *
+ * @element primer-pt-phone-number-input
+ *
+ * @fires input - CustomEvent<string> with full phone number on each keystroke
+ * @fires change - CustomEvent<string> with full phone number on commit
+ */
+declare class PtPhoneNumberInputComponent extends LitElement {
+	static styles: import("lit").CSSResult[];
+	/** Fixed PT dial code. Exposed as a property only so tests can override. */
+	prefix: string;
+	/**
+	 * Externally-provided full phone number including the prefix. The component
+	 * displays only the local portion (everything after the prefix).
+	 */
+	value: string;
+	placeholder: string;
+	inputId: string;
+	/** Maximum total length of the full phone number (including prefix). */
+	maxLength: number;
+	/** Minimum total length of the full phone number (including prefix). */
+	minLength: number;
+	disabled: boolean;
+	hasErrors: boolean;
+	private inputEl?;
+	/** Strip the prefix to get the local digit portion. */
+	private get localDigits();
+	/** Allowed local digit count, derived from total length minus prefix. */
+	private get maxLocalDigits();
+	updated(changed: Map<string, unknown>): void;
+	private dispatchValueEvent;
+	private handleInput;
+	private handleChange;
+	private handleHostClick;
+	focus(): void;
+	render(): TemplateResult;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-pt-phone-number-input": PtPhoneNumberInputComponent;
+	}
+}
 export interface SelectOption {
 	value: string;
 	label: string;
@@ -3224,10 +3323,6 @@ declare class SelectComponent extends LitElement {
 	 * The name attribute for the select element
 	 */
 	name: string;
-	/**
-	 * The id attribute for the select element
-	 */
-	id: string;
 	/**
 	 * The current value of the select
 	 */
@@ -3638,6 +3733,38 @@ declare global {
 		"primer-adyen-klarna": AdyenKlarnaComponent;
 	}
 }
+/**
+ * Adyen MB WAY Payment Component
+ *
+ * Inline phone-number entry → tokenize → poll MB WAY app → resume.
+ *
+ * @element primer-adyen-mbway
+ */
+declare class AdyenMbwayComponent extends LitElement {
+	static styles: import("lit").CSSResult[];
+	paymentMethod: MbwayPaymentMethod | undefined;
+	disabled: boolean;
+	private currentState;
+	private phoneNumber;
+	private errorMessage;
+	private get isExpanded();
+	private get isPhoneValid();
+	private handleExpandedChange;
+	private handleCollapse;
+	private handleInput;
+	private handleRetry;
+	private submit;
+	private renderExpandedInput;
+	private renderLoading;
+	private renderError;
+	private renderExpandedState;
+	render(): TemplateResult;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-adyen-mbway": AdyenMbwayComponent;
+	}
+}
 declare class PaymentMethodComponent extends LitElement {
 	static styles: import("lit").CSSResult[];
 	type: PaymentMethodType | undefined;
@@ -3684,6 +3811,11 @@ declare class PaymentMethodButtonComponent extends LitElement {
 	 * Should be replaced once we align on a better solution across all platforms.
 	 */
 	private _legacyGetButtonLabel;
+	private _getBackgroundColor;
+	private _getIconUrl;
+	private _getIconPosition;
+	private _getTextColor;
+	private _getDisplayName;
 	private _setupTask;
 	private _handleClick;
 	render(): symbol | import("lit-html").TemplateResult<1> | undefined;
@@ -5147,6 +5279,7 @@ declare global {
 export declare function loadPrimer(): void;
 
 export {
+	AdyenMbwayComponent as AdyenMbway,
 	ApplePayComponent as ApplePay,
 	BillingAddressComponent as BillingAddress,
 	BlikComponent as Blik,
@@ -5180,6 +5313,7 @@ export {
 	PrimerIconComponent as PrimerIcon,
 	PrimerKlarnaComponent as PrimerKlarna,
 	PrimerMainComponent as PrimerMain,
+	PtPhoneNumberInputComponent as PtPhoneNumberInput,
 	RedirectPaymentComponent as RedirectPayment,
 	SelectComponent as Select,
 	ShowOtherPaymentsComponent as ShowOtherPayments,