@tonder.io/rn-sdk 0.1.0-beta.DEV1355.1

package/src/core/PaymentInlineContainer/index.ts

@@ -0,0 +1,127 @@
+import type Tonder from '@core/Tonder';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import React from 'react';
+import type {
+  IBaseProcessPaymentRequest,
+  IBaseResponse,
+  IInlineCustomizationOptions,
+  IPaymentInlineContainer,
+  IProcessPaymentRequest,
+  ITransaction,
+  SDKOptions,
+} from '@types';
+import BaseCheckout from '@core/BaseCheckout';
+import { SDKType } from '@types';
+
+class PaymentInlineContainer implements IPaymentInlineContainer {
+  #tonderClient: Tonder;
+  #baseSDK: BaseCheckout;
+  #defaultCustomization: IInlineCustomizationOptions = {
+    saveCards: {
+      showSaveCardOption: true,
+      showSaved: true,
+      autoSave: false,
+      showDeleteOption: true,
+    },
+    paymentButton: {
+      show: true,
+      text: 'Pagar',
+      showAmount: true,
+    },
+    paymentMethods: {
+      show: true,
+    },
+    cardForm: {
+      show: true,
+    },
+    showMessages: true,
+  };
+
+  constructor(
+    tonderClient: Tonder,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    this.#tonderClient = tonderClient;
+    this.#baseSDK = new BaseCheckout(
+      tonderClient,
+      tonderClient.getState,
+      tonderClient.setState,
+      setSkyflowConfig
+    );
+  }
+
+  public create = async (
+    data: SDKOptions<SDKType.INLINE>
+  ): Promise<{ error?: TonderError }> => {
+    this.#baseSDK.setState({
+      ...data,
+      customization: {
+        ...this.#defaultCustomization,
+        ...(data.customization || {}),
+        saveCards: {
+          ...this.#defaultCustomization.saveCards,
+          ...(data.customization?.saveCards || {}),
+        },
+        paymentMethods: {
+          ...this.#defaultCustomization.paymentMethods,
+          ...(data.customization?.paymentMethods || {}),
+        },
+        cardForm: {
+          ...this.#defaultCustomization.cardForm,
+          ...(data.customization?.cardForm || {}),
+        },
+        paymentButton: {
+          ...this.#defaultCustomization.paymentButton,
+          ...(data.customization?.paymentButton || {}),
+        },
+      },
+      uiData: {
+        card: '',
+        payment_method: '',
+        saveCard: false,
+        selectedMethod: 'new',
+        paymentMethods: [],
+        cards: [],
+      },
+      isCreating: true,
+      isCreated: false,
+    });
+    return await this.#baseSDK.create();
+  };
+  public payment = async (
+    data?: IBaseProcessPaymentRequest
+  ): Promise<IBaseResponse<ITransaction>> => {
+    try {
+      if (data) {
+        await this.#tonderClient.setState({ paymentData: data });
+      }
+      const state = this.#tonderClient.getState();
+      const payment_data: IProcessPaymentRequest = {
+        ...state.paymentData,
+        card: state.uiData.card,
+        payment_method: state.uiData.payment_method,
+      };
+      await this.validateProcessPaymentData(payment_data);
+      const response = await this.#baseSDK.setupPaymentFlow(payment_data);
+      return { response };
+    } catch (error) {
+      const err = await this.#baseSDK.handlePaymentError(error);
+      return { error: err };
+    }
+  };
+
+  reset = (): void => {
+    this.#tonderClient.reset();
+  };
+
+  private validateProcessPaymentData(data: IProcessPaymentRequest) {
+    if (!data || (data && Object.keys(data).length === 0)) {
+      throw new TonderError({
+        code: ErrorKeyEnum.INVALID_PAYMENT_REQUEST,
+      });
+    }
+  }
+}
+
+export default PaymentInlineContainer;

package/src/core/PaymentLiteContainer/index.ts

@@ -0,0 +1,201 @@
+import type Tonder from '@core/Tonder';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import React from 'react';
+import type {
+  IBaseResponse,
+  ICustomerCardsResponse,
+  ILiteCustomizationOptions,
+  IPaymentLiteContainer,
+  IPaymentMethod,
+  IProcessPaymentRequest,
+  ISaveCardResponse,
+  ITransaction,
+  SDKOptions,
+} from '@types';
+import BaseCheckout from '@core/BaseCheckout';
+import { SDKType } from '@types';
+import { defaultTo } from 'lodash';
+import { getPaymentMethodsWithDetails } from '@shared/utils/paymentMethodUtils';
+import { getCardType } from '@shared/catalog/cardBrandCatalog';
+
+class PaymentLiteContainer implements IPaymentLiteContainer {
+  #tonderClient: Tonder;
+  #baseSDK: BaseCheckout;
+  #defaultCustomization: ILiteCustomizationOptions = {
+    saveCards: {
+      autoSave: false,
+    },
+  };
+
+  constructor(
+    tonderClient: Tonder,
+    setSkyflowConfig: React.Dispatch<React.SetStateAction<any>>
+  ) {
+    this.#tonderClient = tonderClient;
+    this.#baseSDK = new BaseCheckout(
+      tonderClient,
+      tonderClient.getState,
+      tonderClient.setState,
+      setSkyflowConfig
+    );
+  }
+
+  public create = async (
+    data: SDKOptions<SDKType.LITE>
+  ): Promise<{ error?: TonderError }> => {
+    this.#baseSDK.setState({
+      ...data,
+      customization: {
+        ...this.#defaultCustomization,
+        ...(data.customization || {}),
+        saveCards: {
+          ...this.#defaultCustomization.saveCards,
+          ...(data.customization?.saveCards || {}),
+        },
+      },
+      isCreating: true,
+      isCreated: false,
+    });
+    return await this.#baseSDK.create();
+  };
+  public payment = async (
+    data?: IProcessPaymentRequest
+  ): Promise<IBaseResponse<ITransaction>> => {
+    try {
+      if (data) {
+        await this.#tonderClient.setState({ paymentData: data });
+      }
+      const state = this.#tonderClient.getState();
+      const payment_data: IProcessPaymentRequest = {
+        ...state.paymentData,
+      };
+      await this.validateProcessPaymentData(payment_data);
+      const response = await this.#baseSDK.setupPaymentFlow(payment_data);
+      return { response };
+    } catch (error) {
+      const err = await this.#baseSDK.handlePaymentError(error);
+      return { error: err };
+    }
+  };
+
+  public saveCustomerCard = async (): Promise<
+    IBaseResponse<ISaveCardResponse>
+  > => {
+    try {
+      await this.#baseSDK.setState({
+        isProcessing: true,
+      });
+      const cardFields = await this.#baseSDK
+        .getState()
+        .skyflowContainer.collect();
+      const card_data = cardFields?.records[0]?.fields;
+      const response = await this.#baseSDK.validateAndSaveCard(
+        card_data.skyflow_id,
+        true
+      );
+      return { response: response as ISaveCardResponse };
+    } catch (error) {
+      const err =
+        error instanceof TonderError
+          ? error
+          : new TonderError({
+              code: ErrorKeyEnum.SAVE_CARD_PROCESS_ERROR,
+              details: error,
+            });
+      await this.#baseSDK.setState({
+        error: error as TonderError,
+        isProcessing: false,
+      });
+
+      return { error: err };
+    }
+  };
+
+  public getCustomerCards = async (): Promise<
+    IBaseResponse<ICustomerCardsResponse>
+  > => {
+    try {
+      const merchantId = this.#tonderClient.getBusinessPK();
+      const secureToken: string = this.#tonderClient.getSecureToken();
+      const customer_auth_token: string | undefined =
+        this.#tonderClient.getCustomerAuthToken();
+
+      const response = await this.#tonderClient
+        .getService()
+        .card.fetchCustomerCards(customer_auth_token, secureToken, merchantId);
+
+      return {
+        response: {
+          ...response,
+          cards: response.cards.map((ic) => ({
+            ...ic,
+            icon: getCardType(ic.fields.card_scheme),
+          })),
+        },
+      };
+    } catch (error) {
+      return { error: error as TonderError };
+    }
+  };
+
+  public removeCustomerCard = async (
+    id: string
+  ): Promise<IBaseResponse<string>> => {
+    try {
+      const merchantId = this.#tonderClient.getBusinessPK();
+      const secureToken: string = this.#tonderClient.getSecureToken();
+      const customer_auth_token: string | undefined =
+        this.#tonderClient.getCustomerAuthToken();
+      const response = await this.#tonderClient
+        .getService()
+        .card.removeCustomerCard(
+          customer_auth_token,
+          secureToken,
+          id,
+          merchantId
+        );
+      return { response };
+    } catch (error) {
+      return { error: error as TonderError };
+    }
+  };
+
+  public getPaymentMethods = async (): Promise<
+    IBaseResponse<IPaymentMethod[]>
+  > => {
+    try {
+      const response = await this.#tonderClient
+        .getService()
+        .paymentMethod.fetchPaymentMethods();
+
+      const pm_results = getPaymentMethodsWithDetails(response);
+      return { response: pm_results };
+    } catch (error) {
+      return { error: error as TonderError };
+    }
+  };
+
+  reset = (): void => {
+    this.#tonderClient.reset();
+  };
+
+  private validateProcessPaymentData(data: IProcessPaymentRequest) {
+    if (!data || (data && Object.keys(data).length === 0)) {
+      throw new TonderError({
+        code: ErrorKeyEnum.INVALID_PAYMENT_REQUEST,
+      });
+    }
+
+    let card_data = defaultTo(data.card, '');
+    let payment_method_data = defaultTo(data.payment_method, '');
+
+    if (card_data !== '' && payment_method_data !== '') {
+      throw new TonderError({
+        code: ErrorKeyEnum.INVALID_PAYMENT_REQUEST_CARD_PM,
+      });
+    }
+  }
+}
+
+export default PaymentLiteContainer;

package/src/core/Tonder/index.ts

@@ -0,0 +1,147 @@
+import type {
+  ICard,
+  ICustomerResponse,
+  IPaymentMethod,
+  ISDKBaseConfig,
+} from '@types';
+import { ServiceManager } from '@infrastructure/ServiceManager';
+import TonderError from '@shared/utils/errors';
+import { ErrorKeyEnum } from '@shared/enum';
+import { TONDER_URL_BY_MODE } from '@shared/constants';
+
+class Tonder {
+  private config: ISDKBaseConfig;
+  public service: ServiceManager;
+  private state: any;
+  private subscribers: (() => void)[] = [];
+  private eventListeners: Map<string, Set<(data: any) => void>> = new Map();
+
+  constructor(config: ISDKBaseConfig) {
+    this.initData(config);
+  }
+
+  private initData(config) {
+    this.service = new ServiceManager(config);
+    this.config = {
+      ...config,
+      returnURL:
+        config.returnURL && config.returnURL !== ''
+          ? config.returnURL
+          : TONDER_URL_BY_MODE[config.mode],
+    };
+    this.state = {};
+    this.eventListeners = new Map();
+  }
+
+  getConfig(): Readonly<ISDKBaseConfig> {
+    return Object.freeze({ ...this.config });
+  }
+  getService(): ServiceManager {
+    return this.service;
+  }
+
+  public getCustomerAuthToken(): string {
+    const customerData: ICustomerResponse | undefined = this.state.customerData;
+    if (!customerData?.auth_token) {
+      throw new TonderError({
+        code: ErrorKeyEnum.CUSTOMER_AUTH_TOKEN_NOT_VALID,
+      });
+    }
+    return customerData.auth_token!;
+  }
+
+  public getSecureToken(): string {
+    return this.state.secureToken;
+  }
+
+  public getBusinessPK(): string {
+    return this.state.merchantData?.business?.pk;
+  }
+
+  public getState = (): Readonly<any> => {
+    return Object.freeze({ ...this.state });
+  };
+
+  public setState = (newState: Partial<any>): void => {
+    this.state = { ...this.state, ...newState };
+    this.notifySubscribers();
+  };
+
+  public updateUIState({
+    card,
+    paymentMethod,
+    selectedMethod,
+    cards,
+    paymentMethods,
+    saveCard,
+  }: {
+    card?: string;
+    paymentMethod?: string;
+    selectedMethod?: string;
+    cards?: ICard[];
+    paymentMethods?: IPaymentMethod[];
+    saveCard?: boolean;
+  }) {
+    const selected_data = {
+      ...(selectedMethod && selectedMethod !== ''
+        ? {
+            ...(card && card !== ''
+              ? { card }
+              : paymentMethod && paymentMethod !== ''
+                ? { payment_method: paymentMethod }
+                : { card: '', payment_method: '' }),
+          }
+        : {}),
+    };
+    const new_state = {
+      uiData: {
+        ...(this.state.uiData || {}),
+        ...selected_data,
+        ...(selectedMethod ? { selectedMethod } : {}),
+        ...(saveCard !== undefined ? { saveCard } : {}),
+        ...(cards ? { cards } : {}),
+        ...(paymentMethods ? { paymentMethods } : {}),
+      },
+    };
+
+    this.setState(new_state);
+  }
+
+  public subscribe(callback: () => void): () => void {
+    this.subscribers.push(callback);
+    return () => {
+      this.subscribers = this.subscribers.filter((sub) => sub !== callback);
+    };
+  }
+
+  public emit = (eventName: string, data: any): void => {
+    const listeners = this.eventListeners.get(eventName);
+    if (listeners) {
+      listeners.forEach((listener) => listener(data));
+    }
+  };
+
+  public on(eventName: string, listener: (data: any) => void): () => void {
+    if (!this.eventListeners.has(eventName)) {
+      this.eventListeners.set(eventName, new Set());
+    }
+    this.eventListeners.get(eventName)!.add(listener);
+
+    return () => {
+      this.eventListeners.get(eventName)?.delete(listener);
+    };
+  }
+
+  private notifySubscribers() {
+    this.subscribers.forEach((callback) => callback());
+  }
+
+  public reset() {
+    // this.subscribers = [];
+    this.eventListeners.clear();
+    this.initData(this.config);
+    this.notifySubscribers();
+  }
+}
+
+export default Tonder;

package/src/hooks/useTonder/index-old.ts

@@ -0,0 +1,35 @@
+// import { useCallback, useContext } from 'react';
+// import { TonderContext } from '@ui/providers/TonderProvider';
+// import type { SDKMethodsInstance, SDKType } from '@types';
+// import { TonderError } from '@shared/utils/errors';
+// import { ServiceManager } from '@infrastructure/ServiceManager';
+//
+// export interface IUseTonder<T extends SDKType> {
+//   methods: SDKMethodsInstance<T>;
+//   error: TonderError | Error | null;
+//   isCreated: boolean;
+//   create: any;
+// }
+//
+// export function useTonder<T extends SDKType>(): IUseTonder<T> {
+//   const context = useContext(TonderContext);
+//   const { sdk, config } = context;
+//
+//   const service = new ServiceManager(config!);
+//
+//   const methods = useCallback(() => {
+//     const allowedMethods = sdk?.getAllowedMethods() || {};
+//     return {
+//       ...allowedMethods,
+//       getSecureToken: (secretApiKey: string, signal?: AbortSignal) =>
+//         service.token.getSecureToken(secretApiKey, signal),
+//     };
+//   }, [sdk, service.token]);
+//
+//   return {
+//     methods: methods(),
+//     error: context?.sdkState?.error || null,
+//     isCreated: context?.sdkState?.isCreated,
+//     isProcessing: context?.sdkState?.isProcessing,
+//   } as IUseTonder<T>;
+// }

package/src/hooks/useTonder/index.ts

@@ -0,0 +1,10 @@
+import useTonderContext from '@ui/providers/TonderProvider/hook';
+import { SDKType } from '@types';
+
+const useTonder = <T extends SDKType>() => {
+  const { sdk } = useTonderContext<T>();
+
+  return sdk;
+};
+
+export default useTonder;

package/src/index.tsx

@@ -0,0 +1,11 @@
+export * from './ui/components/Input/CardHolderInput';
+export * from './ui/components/Input/CardExpirationMonthInput';
+export * from './ui/components/Input/CardExpirationYearInput';
+export * from './ui/components/Input/CardCVVInput';
+export * from './ui/components/Input/CardNumberInput';
+export { default as TonderProvider } from './ui/providers/TonderProvider';
+export { default as useTonder } from './hooks/useTonder';
+export { default as TonderPayment } from './ui/features/TonderPayment';
+export { default as TonderEnrollment } from './ui/features/TonderEnrollment';
+export { default as TonderError } from './shared/utils/errors';
+export * from './types';

package/src/infrastructure/HttpClient.ts

@@ -0,0 +1,121 @@
+import type { IApiConfig } from '@types';
+import TonderError from '@shared/utils/errors';
+import { TONDER_URL_BY_MODE } from '@shared/constants';
+import { ErrorKeyEnum } from '@shared/enum';
+
+export class HttpClient {
+  private readonly baseUrl: string;
+  protected readonly apiKey: string;
+  private abortController: AbortController;
+
+  constructor(config: IApiConfig) {
+    this.validateConfig(config);
+    this.apiKey = config.apiKey;
+    this.baseUrl = TONDER_URL_BY_MODE[config.mode];
+    this.abortController = new AbortController();
+  }
+
+  public getApiKey(): string {
+    return this.apiKey;
+  }
+
+  private validateConfig(config: IApiConfig): void {
+    if (!config.apiKey) {
+      throw new TonderError({
+        code: ErrorKeyEnum.MERCHANT_CREDENTIAL_REQUIRED,
+      });
+    }
+  }
+
+  protected async request<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<T> {
+    try {
+      const headers = new Headers({
+        'Content-Type': 'application/json',
+        'Authorization': `Token ${this.apiKey}`,
+        ...options.headers,
+      } as HeadersInit);
+
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        ...options,
+        headers: headers,
+        signal: options.signal || this.abortController.signal,
+      } as RequestInit);
+      if (!response.ok) {
+        throw await this.handleRequestError(response);
+      }
+      if (response.status === 204) {
+        return {} as T;
+      }
+      return response.json();
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
+  get<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: 'GET',
+    });
+  }
+
+  post<T>(
+    endpoint: string,
+    data: unknown,
+    options: RequestInit = {}
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  delete<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: 'DELETE',
+    });
+  }
+  private async handleRequestError(response: Response): Promise<never> {
+    const errorData = await response.json().catch(() => ({}));
+
+    throw new TonderError({
+      code: `HTTP_${response.status}`,
+      details: errorData,
+      message: errorData.detail || 'Request failed',
+    });
+  }
+
+  private handleError(error: unknown): never {
+    if (error instanceof TonderError) {
+      throw error;
+    }
+
+    if (error instanceof Error) {
+      if (error.name === 'AbortError') {
+        throw new TonderError({
+          code: ErrorKeyEnum.REQUEST_ABORTED,
+          details: error,
+        });
+      }
+
+      throw new TonderError({
+        code: ErrorKeyEnum.REQUEST_FAILED,
+        details: error,
+      });
+    }
+
+    throw new TonderError({ code: ErrorKeyEnum.UNKNOWN_ERROR, details: error });
+  }
+
+  /**
+   * Cleanup method to abort any pending requests
+   */
+  public cleanup(): void {
+    this.abortController.abort();
+  }
+}

package/src/infrastructure/ServiceManager.ts

@@ -0,0 +1,54 @@
+import { HttpClient } from '@infrastructure/HttpClient';
+import type { ISDKBaseConfig } from '@types';
+import {
+  CardService,
+  CheckoutService,
+  CustomerService,
+  OpenPayService,
+  PaymentMethodService,
+  SkyflowService,
+  TokenService,
+  BusinessService,
+  MercadoPagoService,
+  TransactionService,
+  StorageService,
+} from '@services';
+
+export class ServiceManager {
+  private readonly http: HttpClient;
+
+  readonly business: BusinessService;
+  readonly card: CardService;
+  readonly checkout: CheckoutService;
+  readonly customer: CustomerService;
+  readonly paymentMethod: PaymentMethodService;
+  readonly skyflow: SkyflowService;
+  readonly token: TokenService;
+  readonly openPay: OpenPayService;
+  readonly mercadoPago: MercadoPagoService;
+  readonly storage: StorageService;
+  readonly transaction: TransactionService;
+
+  constructor(config: ISDKBaseConfig) {
+    this.http = new HttpClient({
+      apiKey: config.apiKey,
+      mode: config.mode,
+    });
+
+    this.business = new BusinessService(this.http);
+    this.card = new CardService(this.http);
+    this.checkout = new CheckoutService(this.http);
+    this.customer = new CustomerService(this.http);
+    this.paymentMethod = new PaymentMethodService(this.http);
+    this.skyflow = new SkyflowService(this.http);
+    this.token = new TokenService(this.http);
+    this.openPay = new OpenPayService();
+    this.mercadoPago = new MercadoPagoService();
+    this.storage = new StorageService();
+    this.transaction = new TransactionService(this.http);
+  }
+
+  public cleanup(): void {
+    this.http.cleanup();
+  }
+}