@spot-flow/checkout-inline-js 0.1.16 → 0.1.22

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

@@ -0,0 +1,17 @@
+import { GetMerchantPlanDetail } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    email: string;
+    amount?: number;
+};
+export declare class MainHeader {
+    container: HTMLDivElement;
+    email: string;
+    amount: number;
+    constructor(props: Props);
+    attachListener(): void;
+    renderComponent(values: GetMerchantPlanDetail, amount: number, currency: string): void;
+    render(): string;
+}
+export {};

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

@@ -2,16 +2,39 @@ import { default as Card } from '../../modules/Card';
 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';
 
+type Props = {
+    container: HTMLDivElement;
+    modalContainer: HTMLDivElement;
+    merchantKey: string;
+    encryption: string;
+    email: string;
+    amount?: number;
+    planId?: string;
+    rdtCode?: string;
+    url?: string;
+    reference?: string;
+    onSuccess?: (_val?: any) => void;
+    onClose?: () => void;
+};
 export declare class MainPageScreen {
     modalContainer: HTMLDivElement;
     currentPaymentMethod: number;
     mainLayout: HTMLDivElement;
+    mainHeader: MainHeader;
+    mainSidebar: MainSidebar;
+    mainFooter: MainFooter;
+    mainOption: SharedMainOption;
     currentStep: number;
     private merchantPlanDetail;
     private onSuccess;
     private onClose?;
     mainScreen: MainPageScreen;
+    currency?: string;
     card: Card;
     transfer: Transfer;
     ussd: Ussd;
@@ -20,22 +43,32 @@ export declare class MainPageScreen {
     planId: string;
     email: string;
     amount: number;
+    rdtCode?: string;
+    url?: string;
+    reference?: string;
     isMobile: boolean;
-    constructor(container: HTMLDivElement, modalContainer: HTMLDivElement, merchantKey: string, encryption: string, email: string, amount?: number, planId?: string, onSuccess?: (_val?: any) => void, onClose?: () => void);
-    mountScreen(values: GetMerchantPlanDetail): void;
+    constructor({ container, email, encryption, merchantKey, modalContainer, amount, onClose, onSuccess, planId, rdtCode, url, reference, }: Props);
+    mountScreen(values: GetMerchantPlanDetail, currency: string): void;
     attachInputListeners(): void;
     closeBTN(): void;
-    displayTabLayout(): void;
     private updatePaymentMethodView;
     private renderPaymentMethodContent;
     private setCurrentPaymentMethod;
     switchTab(tabIndex: number): void;
-    private setupComponent;
-    _setup(): void;
-    private mobileContainerContent;
-    private viewMobileOptions;
     private cleanup;
     closeModal(func?: Function): void;
     setupParent(func?: Function): void;
     render(): string;
 }
+export {};
+/**
+ *
+ *
+  .content {
+    @apply hidden;
+  }
+
+  .content.active {
+    @apply block;
+  }
+ */

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

@@ -0,0 +1,17 @@
+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/page-loader.d.ts

@@ -4,5 +4,6 @@ export declare class PageLoader {
     renderContent(): HTMLElement | Element;
     mountLoader(): void;
     updateMessage(msg: string): void;
+    renderComponent(): void;
     render(): string;
 }

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

@@ -1,9 +1,20 @@
+type Props = {
+    container: HTMLDivElement;
+    msg: string;
+    switchTab: (_val: number) => void;
+    setCurrentTab: (_val: number) => void;
+    onUssd?: () => void;
+};
 export declare class PaymentWarning {
     container: HTMLDivElement;
     switchTab: (_val: number) => void;
     setCurrentTab: (_val: number) => void;
-    constructor(container: Element | HTMLDivElement, switchTab: (_val: number) => void, setCurrentTab: (_val: number) => void);
+    msg: string;
+    onUssd: () => void;
+    constructor({ container, msg, setCurrentTab, switchTab, onUssd }: Props);
     attachListener(): void;
-    setPaymentError(text: string): void;
+    setPaymentError(text: string, isUssd?: boolean): void;
+    renderComponent(): void;
     render(): string;
 }
+export {};

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

@@ -0,0 +1,23 @@
+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 {};

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

@@ -0,0 +1,13 @@
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+};
+export declare class TransferConfirmatioOne {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    constructor(props: Props);
+    attachListeners(): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

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

@@ -0,0 +1,13 @@
+type Props = {
+    container: HTMLDivElement;
+    onClose: () => void;
+};
+export declare class TransferConfirmationTwo {
+    container: HTMLDivElement;
+    onClose: () => void;
+    constructor(props: Props);
+    attachListeners(): void;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

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

@@ -0,0 +1,34 @@
+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;
+};
+export declare class TransferConfirmationProgress {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    private onSuccess;
+    private ref;
+    private token;
+    initialTime: number;
+    abortController: AbortController;
+    private timeLeft;
+    private timer;
+    timerId: null | number;
+    private rdtCode?;
+    private url?;
+    constructor(props: Props);
+    attachListeners(): void;
+    verifyTransfer(token: string, initialInterval: number, onSuccess: (data: PaymentResponseData) => void, onError: (error: Error) => void): Promise<void>;
+    stopProgressBar(): void;
+    private startTimer;
+    private stopTimer;
+    renderComponent(): void;
+    render(): string;
+}
+export {};

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

@@ -0,0 +1,23 @@
+import { PaymentResponseData } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+};
+export declare class TransferDetail {
+    container: HTMLDivElement;
+    onAction: (_val: number) => void;
+    private initialTime;
+    private timeLeft;
+    private timerId;
+    payment: PaymentResponseData;
+    constructor(props: Props);
+    attachListener(): void;
+    private startTimer;
+    private updateProgressTimerContent;
+    private stopTimer;
+    copyToClipboard(text: string, element: Element): void;
+    renderComponent(values: PaymentResponseData): void;
+    render(): string;
+}
+export {};

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

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

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

@@ -1,9 +1,21 @@
+import { BankService } from '../../apis/payment.service';
 import { BankOption } from '../../types/types';
 
+type Props = {
+    container: HTMLElement;
+    merchantKey: string;
+    rdtCode?: string;
+    url?: string;
+    onAction?: (_val: BankOption) => void;
+};
 export declare class UssdBankDetailForm {
     container: HTMLElement | Element;
-    constructor(container: HTMLElement | Element);
-    attachListerner(func?: (val: BankOption) => void): void;
+    bank_service: BankService;
+    private bank_list;
+    private onAction;
+    constructor(props: Props);
+    attachListerner(): void;
     renderContent(): void;
     render(): string;
 }
+export {};

package/dist/views/ussd/ussd-error-screen.d.ts

@@ -0,0 +1,3 @@
+export declare class UssdErrorScreen {
+    constructor();
+}

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

@@ -1,5 +1,40 @@
+import { BankOption } from '../../types/types';
+
+type Props = {
+    container: HTMLDivElement;
+    onAction: (_val: any, ref: string) => void;
+    selected: BankOption;
+    secret: string;
+    currency: string;
+    amount: number;
+    email: string;
+    fullname?: string;
+    reference?: string;
+    rdtCode?: string;
+    url?: string;
+    onError?: (_val: string) => void;
+};
 export declare class UssdViewCode {
     container: HTMLElement;
-    constructor(container: HTMLElement);
+    selected: BankOption;
+    private secret;
+    onAction: (_val: BankOption, ref: string) => void;
+    private paymentService;
+    private currency;
+    private amount;
+    private ussd_detail?;
+    private fullname?;
+    private reference?;
+    private email?;
+    private abortController;
+    private activeRef;
+    private pageLoader;
+    onError: (_val: string) => void;
+    constructor(props: Props);
+    private makePayment;
+    attachListener(): void;
+    verifyPayment(): void;
+    renderComponent(): void;
     render(): string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spot-flow/checkout-inline-js",
-  "version": "0.1.16",
+  "version": "0.1.22",
   "description": "",
   "main": "dist/checkout-inline.js",
   "module": "dist/checkout-inline.es.js",
@@ -8,7 +8,12 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "prepare": "husky",
+    "commitlint": "commitlint --edit",
+    "lint-yarn": "eslint '**/*.{js,ts,tsx}'",
+    "format": "prettier --write",
+    "lint:fix": "yarn lint --fix"
   },
   "type": "module",
   "types": "dist/index.d.ts",
@@ -16,16 +21,23 @@
     "dist"
   ],
   "devDependencies": {
+    "@commitlint/cli": "^19.4.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@types/node": "^20.14.9",
     "autoprefixer": "^10.4.19",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
     "postcss": "^8.4.39",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.4",
+    "tailwindcss-scoped-preflight": "^3.4.3",
     "typescript": "^5.5.3",
     "vite": "^5.3.2",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "tailwindcss-scoped-preflight": "^3.4.3"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "author": "Oluwatomisin Jimoh <jayoluwatosin@gmail.com>",
   "license": "ISC",
@@ -42,5 +54,9 @@
     "spotflow",
     "checkout",
     "inline"
-  ]
+  ],
+  "dependencies": {
+    "@types/mixpanel-browser": "^2.50.2",
+    "mixpanel-browser": "^2.55.1"
+  }
 }