@spot-flow/checkout-inline-js 0.1.27 → 0.1.29

package/dist/utils.d.ts

@@ -8,6 +8,14 @@ export declare const formatExpirationDate: (value: string) => string;
 export declare const unFormatCreditCardNumber: (value: string) => string;
 export declare const formatTime: (seconds: number) => string;
 export declare const getCardType: (cardNumber: string) => string;
+export declare const cardTypeLength: {
+    Visa: number[];
+    MasterCard: number[];
+    "American Express": number[];
+    Discover: number[];
+    UnionPay: number[];
+    Verve: number[];
+};
 export declare const showToast: (message: string, theme: "success" | "error" | "info" | "warning", duration?: number) => void;
 export declare class Toast {
     static createToast: (message: string, theme: "success" | "error" | "info" | "warning") => HTMLDivElement;

package/dist/views/card/avs-validation.d.ts

@@ -17,8 +17,8 @@ export declare class AvsValidationForm {
     private states;
     constructor(props: Props);
     attachListeners(): void;
-    handleInputChange(event: Event): void;
-    validate(callback?: (_va: ContactDetails) => void): void;
+    handleInputChange(event: Event, button: HTMLButtonElement | null, stateInput?: HTMLSelectElement): void;
+    private validateCard;
     renderComponent(): void;
     render(): string;
 }

package/dist/views/card/card-detail-form.d.ts

@@ -7,27 +7,23 @@ type CardDetailValueType = {
 type Props = {
     container: HTMLDivElement;
     onAction: (_evt: Event) => (_values: CardDetailValueType) => void;
+    merchantName: string;
 };
 export declare class CardDetailForm {
     container: HTMLElement | Element;
     private onAction;
     private cardDetailsValues;
     private creditCardTypes;
+    private merchantName;
     constructor(props: Props);
-    /**
-     *
-     * @param func
-     *
-          pan: unFormatCreditCardNumber(this.cardDetailsValues.number),
-          cvv: this.cardDetailsValues.cvv,
-          expiryMonth: this.cardDetailsValues?.expiry.split("/")[0].trim(),
-          expiryYear: this.cardDetailsValues?.expiry.split("/")[1].trim(),
-     */
     attachListener(): void;
+    validateCreditCard(cardNumber: string): boolean;
     handleInputChange(event: Event, button: HTMLButtonElement | null): void;
-    validateCard(): boolean;
+    private validateCard;
     private displayCardTypes;
     private filterCreditCardType;
+    private emptyCardState;
+    private checkInputValidity;
     renderContent(): void;
     render(): string;
 }

package/dist/views/card/card-otp-validation-form.d.ts

@@ -1,20 +1,18 @@
 type Props = {
     container: HTMLDivElement;
     onAction: (_evt: Event) => (_val: string) => void;
-    onClose: () => void;
-    email?: string;
-    phone?: string;
+    onClose: (notClosePayment: boolean) => void;
+    otpMessage: string;
 };
 export declare class CardOtpValidationForm {
     container: HTMLElement | Element;
     cardOtp: string;
-    private phone;
-    private email;
-    private closeModal;
+    private onClose;
     private onAction;
+    private otpMessage;
     constructor(props: Props);
     attachListener(): void;
-    handleOtpInput(event: Event, button: HTMLButtonElement | null): void;
+    handleOtpInput(event: InputEvent, button: HTMLButtonElement | null): void;
     renderComponent(): void;
     render(): string;
 }

package/dist/views/card/card-pin-form.d.ts

@@ -1,11 +1,14 @@
 type Props = {
     onAction: (_val: string) => void;
     container: HTMLDivElement;
+    onClose: (notClosePayment: boolean) => void;
 };
 export declare class CardPinForm {
     container: HTMLElement | Element;
     private cardPin;
     private onAction;
+    private onClose;
+    private pinValues;
     constructor(props: Props);
     attachListener(): void;
     handlePinPaste(event: ClipboardEvent, pinInputs: HTMLInputElement[]): void;

package/dist/views/mobile-money/mobile-money-confirmation-end.d.ts

@@ -0,0 +1,26 @@
+import { PaymentResponseData } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    ref: string;
+    token: string;
+    rdtCode?: string;
+    url?: string;
+    onSuccess: (_val: any) => void;
+    callBackUrl: string;
+    paymentResponse: PaymentResponseData;
+    paymentResponseHeaders: Headers;
+};
+export declare class MobileMoneyConfirmationEnd {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    private callBackUrl;
+    private paymentResponse;
+    private paymentResponseHeaders;
+    constructor(props: Props);
+    attachListeners(): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

package/dist/views/{transfer/transfer-confirmtation-progress.d.ts → mobile-money/mobile-money-confirmation.d.ts}

@@ -1,3 +1,4 @@
+import { PaymentAPIResponse } from '../../api';
 import { PaymentResponseData } from '../../types/types';
 
 type Props = {
@@ -9,8 +10,9 @@ type Props = {
     url?: string;
     onSuccess: (_val: any) => void;
     callBackUrl: string;
+    setPaymentResponses: (data: PaymentResponseData, headers: Headers) => void;
 };
-export declare class TransferConfirmationProgress {
+export declare class MobileMoneyConfirmationProgress {
     container: HTMLDivElement;
     onAction: (_val: number) => void;
     private onSuccess;
@@ -24,10 +26,11 @@ export declare class TransferConfirmationProgress {
     private rdtCode?;
     private url?;
     private callBackUrl;
+    setPaymentResponses: (data: PaymentResponseData, headers: Headers) => void;
     constructor(props: Props);
     attachListeners(): void;
-    verifyTransfer(token: string, initialInterval: number, onSuccess: (data: PaymentResponseData) => void, onError: (error: Error) => void): Promise<void>;
-    stopProgressBar(): void;
+    verifyMobileMoney(token: string, initialInterval: number, onSuccess: (data: PaymentAPIResponse) => void, onError: (data: PaymentAPIResponse) => void): Promise<void>;
+    private redirectTo;
     private startTimer;
     private stopTimer;
     renderComponent(): void;

package/dist/views/mobile-money/mobile-money-form.d.ts

@@ -0,0 +1,46 @@
+import { GetMobileMoneyResponse, PaymentResponseData } from '../../types/types';
+import { PageLoader } from '../shared/page-loader';
+import { PaymentWarning } from '../shared/payment-warning';
+
+type MobileMoneyValueType = {
+    code: string;
+    phoneNumber: string;
+};
+type Props = {
+    container: HTMLElement;
+    onAction: (_evt: Event) => (_val: MobileMoneyValueType) => void;
+    switchScreen: (val: number) => void;
+    ref: string;
+    merchantKey: string;
+    rdtCode?: string;
+    url?: string;
+    currency: string;
+    amount: number;
+    localCurrency?: string;
+    rate?: number;
+    restartTransactionProcess: () => void;
+};
+export declare class MobileMoneyForm {
+    container: HTMLElement | Element;
+    payment: PaymentResponseData;
+    warningError: PaymentWarning;
+    pageLoader: PageLoader;
+    localCurrency?: string;
+    rate?: number;
+    amount: number;
+    private onAction;
+    private switchScreen;
+    private merchantKey;
+    private rdtCode?;
+    private url?;
+    private currency;
+    private restartTransactionProcess;
+    constructor(props: Props);
+    private validateForm;
+    attachListener(): void;
+    private displayButtonText;
+    renderComponent(values: GetMobileMoneyResponse): void;
+    renderContent(): void;
+    render(): string;
+}
+export {};

package/dist/views/mobile-money/mobile-money-otp-form.d.ts

@@ -0,0 +1,20 @@
+type Props = {
+    container: HTMLDivElement;
+    onComplete?: () => void;
+    onClose: (notClosePayment: boolean) => void;
+    onAction: (_evt: Event) => (_val: string) => void;
+    otpMessage: string;
+};
+export declare class MobileMoneyValidationForm {
+    container: HTMLElement | Element;
+    private momoOtp;
+    private onAction;
+    private onClose;
+    private otpMessage;
+    constructor(props: Props);
+    attachListener(): void;
+    handleOtpInput(event: InputEvent, button: HTMLButtonElement | null): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

package/dist/views/shared/main-footer.d.ts

@@ -1,12 +1,8 @@
 type Props = {
     container: HTMLDivElement;
-    onAction: () => void;
-    onClose: () => void;
 };
 export declare class MainFooter {
     container: HTMLDivElement;
-    onAction: () => void;
-    onClose: () => void;
     constructor(props: Props);
     attachListener(): void;
     renderComponent(): void;

package/dist/views/shared/main-header.d.ts

@@ -4,14 +4,31 @@ type Props = {
     container: HTMLDivElement;
     email: string;
     amount?: number;
+    metadata?: Record<string, unknown>;
+    currency: string;
+    localCurrency?: string;
+    merchantDetail: GetMerchantPlanDetail;
+    onAction: (_val: string) => void;
+    isMobile: boolean;
+    onClose: (notClosePayment: boolean) => void;
+    currentPaymentMethod: string;
 };
 export declare class MainHeader {
     container: HTMLDivElement;
     email: string;
     amount: number;
+    metadata?: Record<string, unknown>;
+    currency: string;
+    localCurrency?: string;
+    merchantDetail: GetMerchantPlanDetail;
+    onAction: (_val: string) => void;
+    isMobile: boolean;
+    onClose: (notClosePayment: boolean) => void;
+    currentPaymentMethod: string;
     constructor(props: Props);
-    attachListener(): void;
-    renderComponent(values: GetMerchantPlanDetail, amount: number, currency: string): void;
+    attachListeners(): void;
+    renderComponent(): void;
+    renderPaymentOptions(container: HTMLDivElement): void;
     render(): string;
 }
 export {};

package/dist/views/shared/main-page.d.ts

@@ -3,9 +3,8 @@ import { default as Transfer } from '../../modules/Transfer';
 import { default as Ussd } from '../../modules/Ussd';
 import { GetMerchantPlanDetail } from '../../types/types';
 import { MainHeader } from './main-header';
-import { MainSidebar } from './main-sidebar';
-import { SharedMainOption } from './shared-main-option';
 import { MainFooter } from './main-footer';
+import { default as MobileMoney } from '../../modules/MobileMoney';
 
 type Props = {
     container: HTMLDivElement;
@@ -17,48 +16,57 @@ type Props = {
     planId?: string;
     rdtCode?: string;
     url?: string;
-    reference?: string;
-    onSuccess?: (_val?: any) => void;
-    onClose?: () => void;
+    phoneNumber: string;
+    code: string;
+    reference: string;
     callBackUrl: string;
     metadata: Record<string, unknown>;
+    localCurrency: string;
+    closePayment: () => void;
 };
 export declare class MainPageScreen {
     modalContainer: HTMLDivElement;
-    currentPaymentMethod: number;
+    currentPaymentMethod: string;
     mainLayout: HTMLDivElement;
     mainHeader: MainHeader;
-    mainSidebar: MainSidebar;
     mainFooter: MainFooter;
-    mainOption: SharedMainOption;
-    currentStep: number;
     private merchantPlanDetail;
-    private onSuccess;
-    private onClose?;
     mainScreen: MainPageScreen;
-    currency?: string;
+    currency: string;
     card: Card;
     transfer: Transfer;
     ussd: Ussd;
+    mobileMoney: MobileMoney;
     encryption: string;
     merchantKey: string;
     planId: string;
     email: string;
+    phoneNumber: string;
+    code: string;
     amount: number;
     rdtCode?: string;
     url?: string;
-    reference?: string;
+    reference: string;
     isMobile: boolean;
     callBackUrl: string;
     metadata: Record<string, unknown>;
-    constructor({ container, email, encryption, merchantKey, modalContainer, amount, onClose, onSuccess, planId, rdtCode, url, reference, callBackUrl, metadata, }: Props);
+    localCurrency: string;
+    closePayment: () => void;
+    retryingPayment: boolean;
+    constructor({ container, email, phoneNumber, code, encryption, merchantKey, modalContainer, amount, planId, rdtCode, url, reference, callBackUrl, metadata, localCurrency, closePayment, }: Props);
     mountScreen(values: GetMerchantPlanDetail, currency: string): void;
-    attachInputListeners(): void;
-    closeBTN(): void;
+    attachListeners(): void;
+    closeBTN(notClosePayment: boolean): void;
     private updatePaymentMethodView;
     private renderPaymentMethodContent;
     private setCurrentPaymentMethod;
-    switchTab(tabIndex: number): void;
+    setToDefaultEmptyContainer(): void;
+    defaultToEmptyContainer(): void;
+    switchTab(tabName: string): void;
+    disablePaymentMethods(name: string): void;
+    enablePaymentMethods(): void;
+    hidePaymentMethods(): void;
+    showPaymentMethods(): void;
     private cleanup;
     closeModal(func?: Function): void;
     setupParent(func?: Function): void;

package/dist/views/shared/page-loader.d.ts

@@ -2,8 +2,9 @@ export declare class PageLoader {
     private container;
     constructor(container: HTMLElement | Element);
     renderContent(): HTMLElement | Element;
-    mountLoader(): void;
-    updateMessage(msg: string): void;
+    mountLoader(height?: string): void;
+    unmountLoader(): void;
+    updateMessage(msg: string, subMsg?: string): void;
     renderComponent(): void;
     render(): string;
 }

package/dist/views/shared/payment-success.d.ts

@@ -1,7 +1,19 @@
+type Props = {
+    container: HTMLDivElement;
+    amount: number;
+    currency: string;
+    localCurrency?: string;
+    rate?: number;
+};
 export declare class PaymentSuccess {
     container: HTMLDivElement;
-    private closeModal;
-    constructor(container: HTMLDivElement, closeModal: () => void);
+    amount: number;
+    currency: string;
+    localCurrency?: string;
+    rate?: number;
+    constructor({ container, amount, currency, localCurrency, rate }: Props);
     attachListener(): void;
+    renderComponent(): void;
     render(): string;
 }
+export {};

package/dist/views/shared/payment-warning.d.ts

@@ -1,19 +1,15 @@
 type Props = {
     container: HTMLDivElement;
-    msg: string;
-    switchTab: (_val: number) => void;
-    setCurrentTab: (_val: number) => void;
-    onUssd?: () => void;
+    onAction?: () => void;
+    onReportIssue?: () => void;
 };
 export declare class PaymentWarning {
     container: HTMLDivElement;
-    switchTab: (_val: number) => void;
-    setCurrentTab: (_val: number) => void;
-    msg: string;
-    onUssd: () => void;
-    constructor({ container, msg, setCurrentTab, switchTab, onUssd }: Props);
+    onAction?: () => void;
+    onReportIssue?: () => void;
+    constructor({ container, onAction, onReportIssue }: Props);
     attachListener(): void;
-    setPaymentError(text: string, isUssd?: boolean): void;
+    setPaymentError(text: string, description?: string, actionText?: string): void;
     renderComponent(): void;
     render(): string;
 }

package/dist/views/shared/shared-error-page.d.ts

@@ -1,6 +1,6 @@
 export declare class SharedErrorScreen {
     container: HTMLDivElement;
     constructor(container: HTMLDivElement);
-    renderContent(msg?: string): void;
+    renderContent(actionLink?: string): void;
     render(): string;
 }

package/dist/views/transaction-issues/form.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    container: HTMLDivElement;
+};
+export declare class TransactionIssuesForm {
+    container: HTMLDivElement;
+    constructor(props: Props);
+    attachListener(): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

package/dist/views/transfer/transfer-confirmation-end.d.ts

@@ -0,0 +1,25 @@
+import { PaymentResponseData } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    ref: string;
+    token: string;
+    rdtCode?: string;
+    url?: string;
+    callBackUrl: string;
+    paymentResponse: PaymentResponseData;
+    paymentResponseHeaders: Headers;
+};
+export declare class TransferConfirmationEnd {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    private callBackUrl;
+    private paymentResponse;
+    private paymentResponseHeaders;
+    constructor(props: Props);
+    attachListeners(): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

package/dist/views/transfer/transfer-confirmation-progress.d.ts

@@ -0,0 +1,41 @@
+import { PaymentAPIResponse } from '../../api';
+import { PaymentResponseData } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: number, message?: string) => void;
+    ref: string;
+    token: string;
+    rdtCode?: string;
+    url?: string;
+    callBackUrl: string;
+    setPaymentResponses: (data: PaymentResponseData, headers: Headers) => void;
+};
+export declare class TransferConfirmationProgress {
+    container: HTMLDivElement;
+    onAction: (_val: number, message?: string) => void;
+    private ref;
+    private token;
+    initialTime: number;
+    abortController: AbortController;
+    private timeLeft;
+    private timer;
+    timerId: null | number;
+    private rdtCode?;
+    private url?;
+    private callBackUrl;
+    payment: PaymentResponseData;
+    setPaymentResponses: (data: PaymentResponseData, headers: Headers) => void;
+    constructor(props: Props);
+    attachListeners(): void;
+    private updateProgressTimerContent;
+    verifyTransfer(token: string, initialInterval: number, onSuccess: (data: PaymentAPIResponse) => void): Promise<void>;
+    private redirectTo;
+    private startTimer;
+    private stopTimer;
+    renderTransferDetailsComponent(values: PaymentResponseData): void;
+    copyToClipboard(text: string, element: Element): void;
+    renderComponent(values: PaymentResponseData): void;
+    render(): string;
+}
+export {};

package/dist/views/transfer/transfer-confirmation-two.d.ts

@@ -1,10 +1,12 @@
 type Props = {
     container: HTMLDivElement;
     onClose: () => void;
+    onAction: (_val: number) => void;
 };
 export declare class TransferConfirmationTwo {
     container: HTMLDivElement;
     onClose: () => void;
+    onAction: (_val: number) => void;
     constructor(props: Props);
     attachListeners(): void;
     renderComponent(): void;

package/dist/views/transfer/transfer-details.d.ts

@@ -14,7 +14,6 @@ export declare class TransferDetail {
     constructor(props: Props);
     attachListener(): void;
     private startTimer;
-    private updateProgressTimerContent;
     private stopTimer;
     copyToClipboard(text: string, element: Element): void;
     renderComponent(values: PaymentResponseData): void;

package/dist/views/ussd/ussd-bank-detail-form.d.ts

@@ -7,14 +7,25 @@ type Props = {
     rdtCode?: string;
     url?: string;
     onAction?: (_val: BankOption) => void;
+    currency: string;
+    localCurrency?: string;
+    rate?: number;
+    amount: number;
 };
 export declare class UssdBankDetailForm {
     container: HTMLElement | Element;
     bank_service: BankService;
     private bank_list;
     private onAction;
+    selectedBank: BankOption;
+    currency: string;
+    localCurrency?: string;
+    rate?: number;
+    amount: number;
     constructor(props: Props);
     attachListerner(): void;
+    private validateForm;
+    private displayButtonText;
     renderContent(): void;
     render(): string;
 }

package/dist/views/ussd/ussd-view-code.d.ts

@@ -8,13 +8,13 @@ type Props = {
     currency: string;
     amount: number;
     email: string;
-    fullname?: string;
-    reference?: string;
+    reference: string;
     rdtCode?: string;
     url?: string;
     onError?: (_val: string) => void;
     callBackUrl: string;
     metadata: Record<string, unknown>;
+    localCurrency: string;
 };
 export declare class UssdViewCode {
     container: HTMLElement;
@@ -25,14 +25,14 @@ export declare class UssdViewCode {
     private currency;
     private amount;
     private ussd_detail?;
-    private fullname?;
-    private reference?;
+    private reference;
     private email?;
     private abortController;
     private activeRef;
     private pageLoader;
     private callBackUrl;
     private metadata;
+    private localCurrency;
     onError: (_val: string) => void;
     constructor(props: Props);
     private makePayment;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spot-flow/checkout-inline-js",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "",
   "main": "dist/checkout-inline.js",
   "module": "dist/checkout-inline.es.js",
@@ -23,6 +23,8 @@
   "devDependencies": {
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@types/fontfaceobserver": "^2.1.3",
+    "@types/mixpanel-browser": "^2.50.2",
     "@types/node": "^20.14.9",
     "autoprefixer": "^10.4.19",
     "eslint-config-prettier": "^9.1.0",
@@ -56,8 +58,7 @@
     "inline"
   ],
   "dependencies": {
-    "@types/mixpanel-browser": "^2.50.2",
-    "fast-luhn": "^2.0.2",
+    "fontfaceobserver": "^2.3.0",
     "mixpanel-browser": "^2.55.1"
   }
 }

package/dist/views/shared/main-sidebar.d.ts

@@ -1,17 +0,0 @@
-import { GetMerchantPlanDetail } from '../../types/types';
-
-type Props = {
-    container: HTMLDivElement;
-    merchantDetail: GetMerchantPlanDetail;
-    onAction: (_val: number) => void;
-};
-export declare class MainSidebar {
-    container: HTMLDivElement;
-    merchantDetail: GetMerchantPlanDetail;
-    onAction: (_val: number) => void;
-    constructor(props: Props);
-    attachListeners(): void;
-    renderComponent(): void;
-    render(): string;
-}
-export {};

package/dist/views/shared/shared-main-option.d.ts

@@ -1,23 +0,0 @@
-import { GetMerchantPlanDetail } from '../../types/types';
-
-type Props = {
-    container: HTMLDivElement;
-    merchantPlanDetail: GetMerchantPlanDetail;
-    amount: number;
-    onAction: (_val: number) => void;
-    onCleanup: () => void;
-    onClose: () => void;
-};
-export declare class SharedMainOption {
-    container: HTMLDivElement;
-    onAction: (_val: number) => void;
-    private onCleanup;
-    private onClose;
-    private merchantPlanDetail;
-    private amount;
-    constructor(props: Props);
-    attachListener(): void;
-    renderComponent(): void;
-    render(): string;
-}
-export {};