@monei-js/components 1.7.10 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monei-js/components",
-  "version": "1.7.10",
+  "version": "2.0.0",
   "author": "MONEI <support@monei.com> (https://monei.com)",
   "description": "MONEI UI Components enable you to collect sensitive payment information using customizable UI components.",
   "homepage": "https://monei.com",
@@ -8,6 +8,11 @@
   "contributors": [
     "Dmitriy Nevzorov <dn@monei.com>"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MONEI/monei-js",
+    "directory": "packages/components"
+  },
   "keywords": [
     "monei",
     "payment gateway",
@@ -18,85 +23,56 @@
     "react",
     "components"
   ],
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./types/component": {
+      "types": "./src/bridge/types.ts"
+    }
+  },
   "files": [
     "dist",
-    "types"
+    "src/bridge/types.ts"
   ],
-  "prettier": {
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "jsxBracketSameLine": true,
-    "trailingComma": "none",
-    "printWidth": 120
-  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "start": "tsdx watch --format cjs,umd --name monei",
-    "start:prod": "STAGE=prod tsdx watch --format cjs,umd --name monei",
-    "build": "tsdx build --format cjs,umd --name monei",
-    "build:prod": "STAGE=prod tsdx build --format cjs,umd --name monei",
-    "example": "serve",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "node -r dotenv/config $(yarn bin)/tsdx build",
+    "start": "portless components vp dev",
+    "dev": "vp pack --watch",
+    "dev:prod": "STAGE=prod vp pack --watch",
+    "build": "vp pack",
+    "build:prod": "STAGE=prod vp pack",
+    "prepack": "vp pack",
+    "test": "vp test --passWithNoTests",
     "release": "release-it"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "release-it": {
-    "git": {
-      "tagName": "v${version}",
-      "commitMessage": "chore: release v${version}"
-    },
-    "github": {
-      "release": true
-    },
-    "npm": {
-      "publish": true
-    },
-    "hooks": {
-      "before:init": [
-        "yarn lint --fix",
-        "CI=true yarn test"
-      ]
-    }
-  },
   "devDependencies": {
-    "@babel/core": "^7.13.15",
-    "@rollup/plugin-alias": "^3.1.1",
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "babel-loader": "8.2.2",
-    "dotenv": "^8.2.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "husky": "^4.3.6",
-    "prettier": "^2.2.1",
-    "release-it": "14.6.1",
-    "serve": "^14.2.1",
-    "ts-loader": "^8.0.12",
-    "tsdx": "^0.14.1",
+    "@monei-js/shared": "workspace:*",
+    "@release-it/conventional-changelog": "10.0.6",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "release-it": "^19.2.4",
     "tslib": "^2.2.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.9.3",
+    "vite-plus": "0.1.14"
   },
   "dependencies": {
     "@thumbmarkjs/thumbmarkjs": "^1.7.4",
-    "belter": "^1.0.163",
-    "core-js": "^3.10.1",
     "csstype": "^3.0.5",
-    "htm": "^3.0.4",
-    "post-robot": "^10.0.42",
-    "@krakenjs/zoid": "^10.3.3"
+    "penpal": "^7.0.6"
   }
 }

package/src/bridge/types.ts

@@ -0,0 +1,102 @@
+// ---- Event system ----
+
+export type Cancelable = {
+  cancel: () => void;
+};
+
+export type EventEmitterType = {
+  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  trigger: (eventName: string, ...args: any[]) => void;
+  off: (eventName: string, handler: (...args: any[]) => void) => void;
+  destroy: () => void;
+};
+
+// ---- Dimensions ----
+
+export type CssDimensionsType = {
+  width: string;
+  height: string;
+};
+
+// ---- Computed props ----
+
+export type ComputedPropConfig<P> = {
+  /**
+   * Produce a computed prop value. Runs AFTER containerTemplate,
+   * so `state` reflects any mutations made by the container template.
+   * Return value is classified by `type`: 'function' → dispatch map, 'value' → data payload.
+   */
+  factory: (context: {props: P; state: Record<string, any>}) => any;
+  type: 'function' | 'value';
+};
+
+// ---- Penpal dispatch pattern ----
+
+export type ParentMethods = {
+  callParent: (name: string, args: any[]) => any;
+};
+
+export type ChildMethods = {
+  callChild: (name: string, args: any[]) => any;
+  updateProps: (dataProps: Record<string, any>, functionNames?: string[]) => void;
+};
+
+// ---- Container/prerender template options ----
+
+export type RenderOptions<P> = {
+  uid: string;
+  frame: HTMLIFrameElement;
+  placeholder: HTMLElement | undefined;
+  doc: Document;
+  props: P;
+  event: EventEmitterType;
+  dimensions: CssDimensionsType;
+  state: Record<string, any>;
+  container?: HTMLElement;
+};
+
+// ---- Component options (replaces ComponentOptionsType) ----
+
+export type BridgeComponentOptions<P> = {
+  tag: string;
+  url: string;
+  dimensions?: CssDimensionsType;
+  autoResize?: {width?: boolean; height?: boolean; element?: string};
+
+  /**
+   * Build wrapper DOM around the iframe. Runs BEFORE computed prop factories,
+   * so it may mutate `state` (e.g., `state.__container = container`) for factories to read.
+   */
+  containerTemplate?: (options: RenderOptions<P>) => HTMLElement | undefined;
+  prerenderTemplate?: (options: RenderOptions<P>) => HTMLElement | undefined;
+
+  validate?: (input: {props: P}) => void;
+  defaultProps?: (context: {event: EventEmitterType}) => Partial<P>;
+
+  /** Parent-side computed props — factories run at render time */
+  computedProps?: Record<string, ComputedPropConfig<P>>;
+
+  /** Alternative input names for props (e.g., merchants can pass innerStyle or style) */
+  aliases?: Record<string, string>;
+};
+
+// ---- Component instance (replaces MoneiComponent) ----
+
+export interface BridgeComponent<P> {
+  render: (container?: string | HTMLElement) => Promise<void>;
+  updateProps: (props: Partial<P>) => Promise<void>;
+  close: () => Promise<void>;
+  destroy: () => Promise<void>;
+  state: Record<string, any>;
+  event: EventEmitterType;
+  props: P;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}
+
+// ---- Constructor returned by createComponent() ----
+
+export interface BridgeComponentConstructor<P> {
+  new (props: P): BridgeComponent<P>;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}

package/dist/api.d.ts

@@ -1,13 +0,0 @@
-import { ConfirmPaymentParams } from './paymentModal';
-import { CalculateFinancingRequest, CalculateFinancingResponse, CreateApplePaySessionRequest, CreatePaymentRequest, CreateTokenRequest, CreateTokenResponse, GetPaymentMethodsRequest, GetPaymentMethodsResponse, PaymentResult, SendPaymentReceiptRequest, ValidateBizumPhoneRequest } from './types';
-export declare const getPaymentMethods: ({ accountId, paymentId }: GetPaymentMethodsRequest) => Promise<GetPaymentMethodsResponse>;
-export declare const createToken: ({ paymentMethod, paymentId, sessionId, amount, currency, accountId, transactionType }: CreateTokenRequest) => Promise<CreateTokenResponse>;
-export declare const getPayment: (paymentId: string) => Promise<PaymentResult>;
-export declare const confirmPayment: ({ paymentId, ...body }: ConfirmPaymentParams) => Promise<PaymentResult>;
-export declare const createPayment: ({ signature, ...body }: CreatePaymentRequest) => Promise<PaymentResult>;
-export declare const sendPaymentReceipt: ({ paymentId, customerEmail, signature, language }: SendPaymentReceiptRequest) => Promise<PaymentResult>;
-export declare const createApplePaySession: (body: CreateApplePaySessionRequest) => Promise<any>;
-export declare const calculateFinancing: (req: CalculateFinancingRequest) => Promise<CalculateFinancingResponse>;
-export declare const validateBizumPhone: (req: ValidateBizumPhoneRequest) => Promise<{
-    isValid: boolean;
-}>;

package/dist/bizum/container.d.ts

@@ -1,4 +0,0 @@
-export declare enum EVENT {
-    BEFORE_CLOSE = "BEFORE_CLOSE"
-}
-export declare function containerTemplate({ uid, frame, prerenderFrame, doc, props, event, dimensions: { width, height } }: Record<any, any>): HTMLElement | undefined;

package/dist/bizum/index.d.ts

@@ -1,5 +0,0 @@
-import { MoneiComponent } from '../../types/component';
-import { BizumProps } from './types';
-export * from './modal';
-export * from './types';
-export declare const Bizum: MoneiComponent<BizumProps>;

package/dist/bizum/modal.d.ts

@@ -1,3 +0,0 @@
-import { BizumModalProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const BizumModal: MoneiComponent<BizumModalProps>;

package/dist/bizum/types.d.ts

@@ -1,30 +0,0 @@
-import { TransactionType } from '../types';
-export interface BizumProps {
-    accountId?: string;
-    sessionId?: string;
-    paymentId?: string;
-    phoneNumber?: string;
-    amount?: number;
-    currency?: string;
-    transactionType?: TransactionType;
-    fullscreen?: boolean;
-    language?: string;
-    onError?: (error: any) => void;
-    onProps?: (cb: (props: BizumProps) => void) => Promise<void>;
-    onSubmit: (data: {
-        token?: string;
-        error?: string;
-    }) => void;
-    onLoad?: (isSupported: boolean) => void;
-    onBeforeOpen?: () => boolean;
-    onOpen?: () => void;
-    style?: {
-        height?: string | number;
-        type?: 'pay' | 'plain';
-    };
-}
-export interface BizumModalProps extends BizumProps {
-    isOpen?: boolean;
-    isHidden?: boolean;
-    onError?: (error: any) => void;
-}

package/dist/cardInput/index.d.ts

@@ -1,8 +0,0 @@
-import { CardInputProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export * from './types';
-export declare const createToken: (component?: MoneiComponent<CardInputProps> | undefined, options?: any) => Promise<{
-    token?: string;
-    error?: string;
-}>;
-export declare const CardInput: MoneiComponent<CardInputProps>;

package/dist/cardInput/types.d.ts

@@ -1,51 +0,0 @@
-import { CSSObject } from '../../types/css';
-export declare type CardInputStyle = {
-    base?: CSSObject;
-    invalid?: CSSObject;
-    input?: CSSObject;
-    cardNumber?: CSSObject;
-    expiryDate?: CSSObject;
-    cvc?: CSSObject;
-    icon?: CSSObject;
-    loading?: CSSObject;
-};
-export declare type CardInputOnChangeEvent = {
-    isTouched: boolean;
-    isSubmitted: boolean;
-    error?: string;
-    cardType?: string;
-};
-export declare type CardInputProps = {
-    ref?: any;
-    accountId?: string;
-    orderId?: string;
-    sessionId?: string;
-    paymentId?: string;
-    onError?: (error: any) => void;
-    onProps?: (cb: (props: CardInputProps) => void) => void;
-    onBlur?: () => void;
-    onChange?: (event: CardInputOnChangeEvent) => void;
-    onEnter?: () => void;
-    onFocus?: () => void;
-    onLoad?: () => void;
-    language?: string;
-    placeholders?: {
-        cardNumber?: string;
-        expiryDate?: string;
-        cvc?: string;
-    };
-    errorMessages?: {
-        emptyCardNumber?: string;
-        invalidCardNumber?: string;
-        emptyExpiryDate?: string;
-        monthOutOfRange?: string;
-        yearOutOfRange?: string;
-        dateOutOfRange?: string;
-        invalidExpiryDate?: string;
-        invalidCardType?: string;
-        emptyCVC?: string;
-        invalidCVC?: string;
-    };
-    style?: CardInputStyle;
-    innerStyle?: CardInputStyle;
-};

package/dist/click2pay/container.d.ts

@@ -1,4 +0,0 @@
-export declare enum EVENT {
-    BEFORE_CLOSE = "BEFORE_CLOSE"
-}
-export declare function containerTemplate({ uid, frame, prerenderFrame, doc, props, event, dimensions: { width, height } }: Record<any, any>): HTMLElement | undefined;

package/dist/click2pay/index.d.ts

@@ -1,5 +0,0 @@
-import { Click2PayProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export * from './types';
-export * from './modal';
-export declare const Click2Pay: MoneiComponent<Click2PayProps>;

package/dist/click2pay/modal.d.ts

@@ -1,3 +0,0 @@
-import { Click2PayModalProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const Click2PayModal: MoneiComponent<Click2PayModalProps>;

package/dist/click2pay/types.d.ts

@@ -1,23 +0,0 @@
-export interface Click2PayProps {
-    paymentId: string;
-    amount: number;
-    currency: string;
-    fullscreen?: boolean;
-    language?: string;
-    onError?: (error: any) => void;
-    onProps?: (cb: (props: Click2PayProps) => void) => Promise<void>;
-    onSubmit: (data: {
-        token?: string;
-        error?: string;
-    }) => void;
-    onLoad?: (isSupported: boolean) => void;
-    onOpen?: () => void;
-    style?: {
-        height?: number;
-        type?: 'pay' | 'plain';
-    };
-}
-export interface Click2PayModalProps extends Click2PayProps {
-    isOpen?: boolean;
-    onError: (error: any) => void;
-}

package/dist/cofidis/container.d.ts

@@ -1,4 +0,0 @@
-export declare enum EVENT {
-    BEFORE_CLOSE = "BEFORE_CLOSE"
-}
-export declare function containerTemplate({ uid, frame, prerenderFrame, doc, props, event, dimensions: { width, height } }: Record<any, any>): HTMLElement | undefined;

package/dist/cofidis/index.d.ts

@@ -1,6 +0,0 @@
-import { CofidisProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export * from './types';
-export * from './modal';
-export * from './widget';
-export declare const Cofidis: MoneiComponent<CofidisProps>;

package/dist/cofidis/modal.d.ts

@@ -1,3 +0,0 @@
-import { CofidisModalProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const CofidisModal: MoneiComponent<CofidisModalProps>;

package/dist/cofidis/types.d.ts

@@ -1,45 +0,0 @@
-import { CSSObject } from '../../types/css';
-export interface CofidisProps {
-    paymentId?: string;
-    language?: string;
-    hint?: boolean;
-    onError?: (error: any) => void;
-    onProps?: (cb: (props: CofidisProps) => void) => Promise<void>;
-    onLoad?: (isSupported: boolean) => void;
-    onBeforeOpen?: () => boolean;
-    onOpen?: () => void;
-    onSubmit: (data: {
-        token?: string;
-        error?: string;
-        redirectUrl?: string;
-    }) => void;
-    fullscreen?: boolean;
-    style?: {
-        height?: number;
-    };
-}
-export interface CofidisModalProps extends CofidisProps {
-    isOpen?: boolean;
-    amount: number;
-    currency: string;
-    accountId: string;
-    onError: (error: any) => void;
-}
-export interface CofidisWidgetProps {
-    amount?: number;
-    amountInt?: number;
-    accountId: string;
-    language?: string;
-    showLogo?: boolean;
-    style?: {
-        base?: CSSObject;
-        link?: CSSObject;
-        amount?: CSSObject;
-        label?: CSSObject;
-        terms?: CSSObject;
-        logo?: CSSObject;
-        content?: CSSObject;
-    };
-    onError?: (error: any) => void;
-    onLoad?: () => void;
-}

package/dist/cofidis/widget.d.ts

@@ -1,3 +0,0 @@
-import { CofidisWidgetProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const CofidisWidget: MoneiComponent<CofidisWidgetProps>;

package/dist/cofidisLoan/container.d.ts

@@ -1,4 +0,0 @@
-export declare enum EVENT {
-    BEFORE_CLOSE = "BEFORE_CLOSE"
-}
-export declare function containerTemplate({ uid, frame, prerenderFrame, doc, props, event, dimensions: { width, height } }: Record<any, any>): HTMLElement | undefined;

package/dist/cofidisLoan/index.d.ts

@@ -1,7 +0,0 @@
-import { CofidisLoanProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export * from './types';
-export * from './modal';
-export * from './widget';
-export declare const CofidisLoan: MoneiComponent<CofidisLoanProps>;
-export declare const CofidisPay: MoneiComponent<CofidisLoanProps>;

package/dist/cofidisLoan/modal.d.ts

@@ -1,4 +0,0 @@
-import { CofidisLoanModalProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const CofidisLoanModal: MoneiComponent<CofidisLoanModalProps>;
-export declare const CofidisPayModal: MoneiComponent<CofidisLoanModalProps>;

package/dist/cofidisLoan/types.d.ts

@@ -1,45 +0,0 @@
-import { CSSObject } from '../../types/css';
-export interface CofidisLoanProps {
-    paymentId?: string;
-    language?: string;
-    hint?: boolean;
-    onError?: (error: any) => void;
-    onProps?: (cb: (props: CofidisLoanProps) => void) => Promise<void>;
-    onLoad?: (isSupported: boolean) => void;
-    onBeforeOpen?: () => boolean;
-    onOpen?: () => void;
-    onSubmit: (data: {
-        token?: string;
-        error?: string;
-        redirectUrl?: string;
-    }) => void;
-    fullscreen?: boolean;
-    style?: {
-        height?: number;
-    };
-}
-export interface CofidisLoanModalProps extends CofidisLoanProps {
-    isOpen?: boolean;
-    amount: number;
-    currency: string;
-    accountId: string;
-    onError: (error: any) => void;
-}
-export interface CofidisLoanWidgetProps {
-    amount?: number;
-    amountInt?: number;
-    accountId: string;
-    language?: string;
-    showLogo?: boolean;
-    style?: {
-        base?: CSSObject;
-        link?: CSSObject;
-        amount?: CSSObject;
-        label?: CSSObject;
-        terms?: CSSObject;
-        logo?: CSSObject;
-        content?: CSSObject;
-    };
-    onError?: (error: any) => void;
-    onLoad?: () => void;
-}

package/dist/cofidisLoan/widget.d.ts

@@ -1,4 +0,0 @@
-import { CofidisLoanWidgetProps } from './types';
-import { MoneiComponent } from '../../types/component';
-export declare const CofidisLoanWidget: MoneiComponent<CofidisLoanWidgetProps>;
-export declare const CofidisPayWidget: MoneiComponent<CofidisLoanWidgetProps>;