@clavisco/payment-modal v0.0.6

Acerca de @clavisco/payment-modal

Token: PaymentModal

Permite mostrar una modal de pagos completa con los apartados para pagos en efectivo, tarjetas o transferencia, ademas incluye el uso de pagos mediante PinPad del BAC.

¿Qué resuelve?

Estandariza el uso de modales de pago, al mismo tiempo que, reduce considerablemente el tiempo de implementación.

Paquetes requeridos

• @clavisco/core
• @clavisco/linker
• @clavisco/alerts
• @clavisco/overlay
• @clavisco/table
• @clavisco/skeleton

Configuraciones requeridas

• Configurar un instancia de la interface IPaymentHolder para definir la configuracion aplicable a la modal de pagos
  • Configurar PaymentSettings.Accounts lista con las cuentas contado, tarjeta y transferencia disponibles
  • Configurar PaymentSettings.Rate con el tipo de cambio actual
  • Configurar PaymentSettings.DocTotal con el total a cobrar en la moneda definida para el documento
  • Configurar PaymentSettings.DocumentCurrency model del documento segun definiciones de SAP
  • Configurar PaymentSettings.PaymentCurrency moneda definida para el pago segun definiciones de SAP

Configuraciones opcionales

• Configurar un instancia de la interface IPaymentHolder para definir la configuracion aplicable a la modal de pagos
  • Configurar PaymentSettings.EnablePinPad habilita el uso de PinPad
  • Configurar PaymentSettings.DocumentKey identificador unico del documento a cobrar
  • Configurar PaymentSettings.User usuario que realiza la transacción
  • Configurar PaymentSettings.Terminals lista con las terminales de Pinpad disponibles
  • Configurar ShouldResolve habilitar para resolver automáticamente los vouchers de cancelación
• Tener el token "PinPad" con la configuración "apiURL" para consumir los servicios de PinPad
• Tener el token "Share" con la configuración "apiURL" segun el api actual para consultar el voucher de cancelacion
• Tener el token "PinPad" con la configuración "voidedVoucherPath" con el path para consumir el endpoint de impresión de voucher de cancelación

Intefaces disponibles

• IAccount -> (Account: string, AccountName: string, Currency: string, Type: ACCOUNT_TYPE)
• ITransaction -> (Id: number, CreditCardNumber: string, CreditAcct: string, FormatCode: string, CardValid: string, Currency: string, CreditSum: number, Terminal: string | null, OwnerIdNum: string, VoucherNum: string, PinPadTransaction: string | null, IsManualEntry: boolean)
• ICash -> (Account: string, Total: number)
• ITransfer -> (Account: string, Reference: string, Total: number, TransferDate: Date)
• IPaymentState -> (Cash: ICash, Transfers: ITransfer, Transactions: ITransaction[])
• IPaymentSettings -> (User: string, DocumentKey: string, InvoiceNumber: string, DefaultCardNumber: number, CanEditCardNumber: boolean, DefaultCardValid: string, DocTotal: number, RecivedAmount: number, DocumentCurrency: string, PaymentCurrency: string, InvertRateDirection: boolean, EnablePinPad: boolean, DecimalRounding: number, Rate: number, Accounts: IAccount[], Terminals: PinPad.Interfaces.ITerminal[], Cards: ITransaction[])
• IPaymentHolder -> (Id: string, Result: boolean, Message: string, ShouldResolve: boolean, PaymentSettings: IPaymentSetting, PaymentState: IPaymentState)

Enums disponibles

• ACCOUNT_TYPE -> (CASH, TRANSFER, CARD)

¿Cómo se usa?

1. Primero debemos cumplir los paquetes mencionadas al inicio de este documento
2. Ejecutar el comando npm i @clavisco/payment-modal en el directorio root del proyecto
3. Inyectar el servicio de Linker en el controlador para realizar la comunicación con el componente constructor(@Inject('LinkerService') private linkerervice: LinkerService)
4. Ejemplo de implementacion llamada al componente desde una funcion o evento

  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  this.paymentHolder || (this.paymentHolder = {} as IPaymentHolder);
  this.paymentHolder.PaymentSettings || (this.paymentHolder.PaymentSettings = {} as IPaymentSetting);
  this.paymentHolder.PaymentState || (this.paymentHolder.PaymentState = {} as IPaymentState);

  this.paymentHolder.PaymentSettings.Accounts = [
  {
      Account: `SYS1234`,
      AccountName: `EFECTIVO DORALRES 1`,
      Currency: `USD`,
      Type: ACCOUNT_TYPE.CASH
  } as IAccount,
  {
      Account: `SYS3456`,
      AccountName: `EFECTIVO COLONES 2`,
      Currency: `COL`,
      Type: ACCOUNT_TYPE.CASH
  } as IAccount,
  {
      Account: `SYS778899`,
      AccountName: `CREDOMATIC COLONES`,
      Currency: `COL`,
      Type: ACCOUNT_TYPE.CARD
  } as IAccount,
  {
      Account: `SYS9368`,
      AccountName: `TRANSFERENCIA COLONES`,
      Currency: `COL`,
      Type: ACCOUNT_TYPE.TRANSFER
  } as IAccount ];

  this.paymentHolder.Id = 'SomeId';
  this.paymentHolder.ShouldResolve = true;
  this.paymentHolder.PaymentSettings.Rate = 678.22;
  this.paymentHolder.PaymentSettings.DocTotal = 500.00;
  this.paymentHolder.PaymentSettings.DocumentCurrency = 'COL';
  this.paymentHolder.PaymentSettings.PaymentCurrency = 'COL';

  dialogConfig.data = this.paymentHolder;

  const dialogRef = this.dialog.open(PaymentModalComponent, dialogConfig);

  dialogRef.afterClosed().subscribe(
    (next: IPaymentHolder) => {
      if (next.Result) {
        // You can get the result of the Payment modal here
        this.paymentHolder.PaymentState = next.PaymentState;
      }
      else {
        // In case of an error you can manipulate the response error here,
        console.log(next);
        console.log(`error`);
      }
    }
  );

6. Al suscribirse al observable en afterClosed usted puede obtener la respuesta de la modal, asi como el estado de error
7. Ya con esto tenemos una implementación básica del componente payment-modal
8. Video explicativo sobre el uso de @clavisco/payment-modal

Recomendaciones

Visitar @clavisco/core para conocer la amplia gama de funcionalidades que se nos ofrecen para facilitarnos el proceso de desarrollo

Visitar @clavisco/linker con el fin de entender los procesos de comunicacion entre componentes y hacia los componentes

Clavis Consultores ©