@tonder.io/ionic-lite-sdk 0.0.57 → 0.0.58

package/src/shared/constants/skyflow.contants.ts

@@ -0,0 +1,63 @@
+import Skyflow from "skyflow-js";
+
+const lengthMatchRule = {
+    type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
+    params: {
+        max: 70,
+    },
+};
+const regexEmpty = RegExp('^(?!s*$).+');
+
+const regexMatchRule = {
+    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+    params: {
+        regex: regexEmpty,
+        error: 'El campo es requerido', // Optional, default error is 'VALIDATION FAILED'.
+    },
+};
+
+
+
+const getErrorField = (
+    event: {
+        elementType?: string;
+        isEmpty?: boolean;
+        isFocused?: boolean;
+        isValid?: boolean;
+        value?: string;
+    },
+    field: string
+) => {
+    if (event.isEmpty) {
+        return 'El campo es requerido';
+    } else if (!event.isValid && !event.isEmpty) {
+        return `El campo ${field} es inválido`;
+    } else {
+        return '';
+    }
+};
+
+const DEFAULT_SKYFLOW_lABELS = {
+    name: 'Titular de la tarjeta',
+    card_number: 'Número de tarjeta',
+    cvv: 'CVC/CVV',
+    expiration_month: 'Mes',
+    expiration_year: 'Año',
+    expiration_date: 'Fecha de expiración',
+};
+
+const DEFAULT_SKYFLOW_PLACEHOLDERS = {
+    name: 'Nombre como aparece en la tarjeta',
+    card_number: '1234 1234 1234 1234',
+    cvv: '3-4 dígitos',
+    expiration_month: 'MM',
+    expiration_year: 'AA',
+};
+
+export {
+    lengthMatchRule,
+    regexMatchRule,
+    getErrorField,
+    DEFAULT_SKYFLOW_lABELS,
+    DEFAULT_SKYFLOW_PLACEHOLDERS,
+};

package/src/shared/styles/skyflow.styles.ts

@@ -0,0 +1,63 @@
+import {CollectInputStylesVariant, CollectLabelStylesVariant} from "../../types/commons";
+import {LabelStyles} from "skyflow-js/types/utils/common";
+
+const DEFAULT_SKYFLOW_INPUT_STYLES: CollectInputStylesVariant = {
+  base: {
+    border: "1px solid #e0e0e0",
+    padding: "10px 7px",
+    borderRadius: "5px",
+    color: "#1d1d1d",
+    marginTop: "2px",
+    backgroundColor: "white",
+    fontFamily: '"Inter", sans-serif',
+    fontSize: "16px",
+    "&::placeholder": {
+      color: "#ccc",
+    },
+  },
+  complete: {
+    color: "#4caf50",
+  },
+  invalid: {
+    border: "1px solid #f44336",
+  },
+  empty: {},
+  focus: {},
+  global: {
+    "@import":
+      'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
+  },
+};
+
+const DEFAULT_SKYFLOW_lABEL_STYLES: LabelStyles = {
+  base: {
+    fontSize: "12px",
+    fontWeight: "500",
+    fontFamily: '"Inter", sans-serif'
+  },
+};
+
+const DEFAULT_SKYFLOW_ERROR_TEXT_STYLES: CollectLabelStylesVariant = {
+  base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      fontFamily: '"Inter", sans-serif',
+      color: "#f44336",
+  },
+}
+
+const SKYFLOW_HIDDEN_ERROR_TEXT_STYLES = {
+  base: {
+      fontSize: '12px',
+      fontWeight: '500',
+      color: "#f44336",
+      fontFamily: '"Inter", sans-serif'
+  },
+};
+
+export {
+  DEFAULT_SKYFLOW_INPUT_STYLES,
+  DEFAULT_SKYFLOW_lABEL_STYLES,
+  DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+  SKYFLOW_HIDDEN_ERROR_TEXT_STYLES,
+};

package/src/types/card.ts

@@ -33,3 +33,15 @@ export interface ISaveCardRequest {
     expiration_year: string;
     cardholder_name: string;
 }
+export enum CardFieldEnum {
+    CARD_NUMBER = 'card_number',
+    CVV = 'cvv',
+    EXPIRATION_MONTH = 'expiration_month',
+    EXPIRATION_YEAR = 'expiration_year',
+    CARDHOLDER_NAME = 'cardholder_name',
+}
+
+export interface IMountCardFieldsRequest {
+    fields: CardFieldEnum[] | { container_id?: string; field: CardFieldEnum}[],
+    card_id?: string;
+}

package/src/types/commons.ts

@@ -1,5 +1,13 @@
 import { ICustomer } from "./customer";
 import {IProcessPaymentRequest, IStartCheckoutResponse} from "./checkout";
+import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container";
+import ComposableContainer from "skyflow-js/types/core/external/collect/compose-collect-container";
+import RevealContainer from "skyflow-js/types/core/external/reveal/reveal-container";
+import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
+import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
+import {LabelStyles} from "skyflow-js/types/utils/common";
+
 
 export type Business = {
   business: {
@@ -120,9 +128,29 @@ export interface IInlineLiteCheckoutOptions
       collectorIds?: {
           tdsIframe?: string
       }
+      customization?: ILiteCustomizationOptions;
+      events?: IEvents;
     }
 
-
+export interface ICardFormEvents {
+  cardHolderEvents?: IInputEvents;
+  cardNumberEvents?: IInputEvents;
+  cvvEvents?: IInputEvents;
+  monthEvents?: IInputEvents;
+  yearEvents?: IInputEvents;
+}
+export interface IInputEvents {
+  onChange?: (event: IEventSecureInput) => void;
+  onFocus?: (event: IEventSecureInput) => void;
+  onBlur?: (event: IEventSecureInput) => void;
+}
+export interface IEventSecureInput {
+  elementType: string;
+  isEmpty: boolean;
+  isFocused: boolean;
+  isValid: boolean;
+}
+export interface IEvents extends ICardFormEvents {}
 export interface IApiError {
   code: string;
   body: Record<string, string> | string;
@@ -140,3 +168,69 @@ export interface IPublicError {
 export type CustomizationOptions = {
     redirectOnComplete?: boolean
 }
+
+export interface InCollectorContainer {
+  container: CollectorContainer | ComposableContainer | RevealContainer;
+  elements: (CollectElement | ComposableElement | RevealElement)[];
+}
+
+export interface ILiteCustomizationOptions extends CustomizationOptions {
+  styles?: IStyles;
+  labels?: IFormLabels;
+  placeholders?: IFormPlaceholder;
+}
+
+export interface IFormLabels {
+  name?: string;
+  card_number?: string;
+  cvv?: string;
+  expiry_date?: string;
+  expiration_year?: string;
+  expiration_month?: string;
+}
+
+export interface IFormPlaceholder {
+  name?: string;
+  card_number?: string;
+  cvv?: string;
+  expiration_month?: string;
+  expiration_year?: string;
+}
+
+export interface IStyles {
+  cardForm?: ILiteCardFormStyles;
+}
+
+export interface ILiteCardFormStyles extends StylesBaseVariant, IElementStyle {}
+
+export interface StylesBaseVariant {
+  base?: Record<string, any>;
+}
+
+export interface IElementStyle {
+  inputStyles?: CollectInputStylesVariant;
+  labelStyles?: LabelStyles;
+  errorStyles?: StylesBaseVariant;
+}
+export interface StylesFocusVariant {
+  focus?: Record<string, any>;
+}
+
+export interface CollectInputStylesVariant
+    extends StylesBaseVariant,
+        StylesFocusVariant {
+  complete?: Record<string, any>;
+  invalid?: Record<string, any>;
+  empty?: Record<string, any>;
+  cardIcon?: Record<string, any>;
+  dropdownIcon?: Record<string, any>;
+  dropdown?: Record<string, any>;
+  dropdownListItem?: Record<string, any>;
+  global: Record<string, any>;
+}
+
+export interface CollectLabelStylesVariant
+    extends StylesBaseVariant,
+        StylesFocusVariant {
+  requiredAsterisk?: Record<string, any>;
+}

package/src/types/liteInlineCheckout.ts

@@ -223,5 +223,13 @@ export interface ILiteCheckout {
     public_key: string,
     is_sandbox: boolean,
   ): Promise<string | ErrorResponse>;
-}
 
+  /**
+   * Displays and renders card input fields in the checkout.
+   * Uses the provided configuration to show the required fields in the payment form.
+   * @param {import("./card").IMountCardFieldsRequest} event - Configuration for the card fields to render.
+   * @returns {Promise<void>} Resolves when the fields have been successfully rendered.
+   * @public
+   */
+  mountCardFields(event: import("./card").IMountCardFieldsRequest): Promise<void>;
+}

package/src/types/requests.ts

@@ -76,7 +76,7 @@ export type TokensSkyflowRequest = {
     apiKey: string;
     vault_id: string,
     vault_url: string,
-    data: {
+    data?: {
         [key: string]: any;
     }
 }

package/tests/classes/liteCheckout.test.ts

@@ -1,57 +0,0 @@
-import "../utils/defaultMock";
-import { LiteCheckout } from "../../src";
-import { constructorFields } from "../utils/defaultMock";
-import {IInlineLiteCheckoutOptions} from "../../src/types/commons";
-
-declare global {
-    interface Window {
-        OpenPay: any;
-        Skyflow: any;
-    }
-}
-
-describe("LiteCheckout", () => {
-    let checkoutConstructor: IInlineLiteCheckoutOptions,
-        liteCheckout: LiteCheckout,
-        fetchSpy: jest.SpyInstance,
-        liteCheckoutSpy: jest.SpyInstance;
-
-    beforeEach(async () => {
-        window.fetch = jest.fn();
-
-        checkoutConstructor = {
-            ...constructorFields,
-        };
-
-        liteCheckout = new LiteCheckout(constructorFields);
-
-        fetchSpy = jest.spyOn(global, "fetch");
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("Has required properties", () => {
-        expect(checkoutConstructor).toEqual(constructorFields);
-    });
-
-    it("Can instance LiteCheckout", () => {
-        expect(liteCheckout).toBeInstanceOf(LiteCheckout);
-        expect(liteCheckout.apiKeyTonder).toEqual(constructorFields.apiKey);
-        expect(liteCheckout.baseUrl).toEqual(constructorFields.baseUrl);
-        expect(liteCheckout.abortController.signal).toEqual(constructorFields.signal);
-    });
-
-
-
-
-
- 
-
-
-
-
-
-
-});

package/tests/methods/createOrder.test.ts

@@ -1,142 +0,0 @@
-import "../utils/defaultMock";
-import { LiteCheckout } from "../../src";
-import { ErrorResponse } from "../../src/classes/errorResponse";
-import { constructorFields } from "../utils/defaultMock";
-import { OrderResponseClass, OrderClass, OrderEmptyValuesResponse } from "../utils/mockClasses";
-import {IInlineLiteCheckoutOptions} from "../../src/types/commons";
-
-declare global {
-    interface Window {
-        OpenPay: any;
-        Skyflow: any;
-    }
-}
-
-describe("createOrder", () => {
-    let checkoutConstructor: IInlineLiteCheckoutOptions,
-        liteCheckout: LiteCheckout,
-        fetchSpy: jest.SpyInstance,
-        liteCheckoutSpy: jest.SpyInstance;
-
-    beforeEach(async () => {
-        window.fetch = jest.fn();
-
-        checkoutConstructor = {
-            ...constructorFields,
-        };
-
-        liteCheckout = new LiteCheckout(constructorFields);
-
-        fetchSpy = jest.spyOn(global, "fetch");
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("createOrder success", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createOrder");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve([{ ...new OrderResponseClass() }]),
-                ok: true,
-            })
-        );
-
-        const response = await liteCheckout.createOrder({
-            ...new OrderClass(),
-        });
-
-        expect(response).toStrictEqual([{ ...new OrderResponseClass() }]);
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).toHaveBeenCalledWith({ ...new OrderClass() });
-    });
-
-    it("createOrder empty", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createOrder");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve(),
-                ok: true,
-            })
-        );
-
-        const response = await liteCheckout.createOrder({
-            ...new OrderClass(),
-        });
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).toHaveReturned();
-        expect(response).toBeUndefined();
-    });
-
-    it("createOrder errorResponse", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createOrder");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve(),
-                ok: false,
-                status: 400,
-            })
-        );
-        
-        let error;
-
-        try {
-            const response = await liteCheckout.createOrder({
-                ...new OrderClass(),
-            })
-        } catch (e) {
-            error = e;
-        }
-        
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(error).toBeInstanceOf(ErrorResponse);
-    });
-
-    it("createOrder empty values", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createOrder");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve(OrderEmptyValuesResponse),
-                ok: false,
-                status: 400,
-            })
-        );
-
-        let error: ErrorResponse;
-        
-        try {
-            const response = (await liteCheckout.createOrder({
-                ...new OrderClass(),
-            })) as ErrorResponse;
-        } catch (e: any) {
-            error = e;
-            expect(error.body).toStrictEqual(OrderEmptyValuesResponse);
-        }
-    });
-
-    it("createOrder errorCatch", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createOrder");
-
-        fetchSpy.mockRejectedValue("error");
-
-        let error: ErrorResponse;
-
-        try {
-            const response = (await liteCheckout.createOrder({
-                ...new OrderClass(),
-            })) as ErrorResponse;
-        } catch (e: any) {
-            error = e;
-            expect(error.message).toStrictEqual("error");
-            expect(error.name).toStrictEqual("catch");
-        }
-
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).rejects.toThrow();
-    });
-});

package/tests/methods/createPayment.test.ts

@@ -1,122 +0,0 @@
-import "../utils/defaultMock";
-import { LiteCheckout } from "../../src";
-import { ErrorResponse } from "../../src/classes/errorResponse";
-import { constructorFields } from "../utils/defaultMock";
-import { CreatePaymentResponseClass, CreatePaymentRequestClass } from "../utils/mockClasses";
-import {IInlineLiteCheckoutOptions} from "../../src/types/commons";
-
-
-declare global {
-    interface Window {
-        OpenPay: any;
-        Skyflow: any;
-    }
-}
-
-describe("createPayment", () => {
-    let checkoutConstructor: IInlineLiteCheckoutOptions,
-        liteCheckout: LiteCheckout,
-        fetchSpy: jest.SpyInstance,
-        liteCheckoutSpy: jest.SpyInstance;
-
-    beforeEach(async () => {
-        window.fetch = jest.fn();
-
-        checkoutConstructor = {
-            ...constructorFields,
-        };
-
-        liteCheckout = new LiteCheckout(constructorFields);
-
-        fetchSpy = jest.spyOn(global, "fetch");
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("createPayment success", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createPayment");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve([{ ...new CreatePaymentResponseClass() }]),
-                ok: true,
-            })
-        );
-
-        const response = await liteCheckout.createPayment({
-            ...new CreatePaymentRequestClass(),
-        });
-
-        expect(response).toStrictEqual([{ ...new CreatePaymentResponseClass() }]);
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).toHaveBeenCalledWith({
-            ...new CreatePaymentRequestClass(),
-        });
-    });
-
-    it("createPayment empty", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createPayment");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve(),
-                ok: true,
-            })
-        );
-
-        const response = await liteCheckout.createPayment({
-            ...new CreatePaymentRequestClass(),
-        });
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).toHaveReturned();
-        expect(response).toBeUndefined();
-    });
-
-    it("createPayment errorResponse", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createPayment");
-
-        fetchSpy.mockImplementation(() =>
-            Promise.resolve({
-                json: () => Promise.resolve(),
-                ok: false,
-                status: 400,
-            })
-        );
-
-        let error;
-
-        try {
-            const response = await liteCheckout.createPayment({
-                ...new CreatePaymentRequestClass(),
-            })
-        } catch (e) {
-            error = e;
-        }
-        
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(error).toBeInstanceOf(ErrorResponse);
-    });
-
-    it("createPayment errorCatch", async () => {
-        liteCheckoutSpy = jest.spyOn(liteCheckout, "createPayment");
-
-        fetchSpy.mockRejectedValue("error");
-
-        let error: ErrorResponse;
-
-        try {
-            const response = (await liteCheckout.createPayment({
-                ...new CreatePaymentRequestClass(),
-            })) as ErrorResponse;
-        } catch (e: any) {
-            error = e;
-            expect(error.message).toStrictEqual("error");
-            expect(error.name).toStrictEqual("catch");
-        }
-
-        expect(liteCheckoutSpy).toHaveBeenCalled();
-        expect(liteCheckoutSpy).rejects.toThrow();
-    });
-});