@clavisco/payment-modal

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

Resumen de versión

Correcciones (Fixes)

• Ahora la fecha para la tarjeta en pinpad se toma desde el campo de fecha de la modal.
• Ahora todos los elementos de la modal se visualizan de manera correcta en vista móvil.
• Ahora las cuentas se muestran correctamente en vistas móviles
• Resultado de modal de pagos se maneja mediante pipe de cierre de modal.

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
• 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, PaymentSettings: IPaymentSetting, PaymentState: IPaymentState)
• IPointsSettings -> ( Type: 'TAPP' | 'LEALTO', Description: string, Identification: string, FirstName: string, LastName: string, InvoiceUniqueId: string, InvoiceNumber: string, UserId: string, RedemptionFloor: number, IdUsuario: number, IdSucursal: number, AvailablePoints: number, Rewards: any[], CardSettings: ICardSettings)
• ICardSettings -> ( CreditCard: number, CreditCardNumber: number, CreditAcct: string, FormatCode: string, CardValid: string, OwnerIdNum: number, VoucherNum: number)

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

SetUpPaymentModal(): void {
  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 = 'PaymentModalId';
  this.paymentHolder.PaymentSettings.Rate = 678.22;
  this.paymentHolder.PaymentSettings.DocTotal = 500.00;
  this.paymentHolder.PaymentSettings.DocumentCurrency = 'COL';
  this.paymentHolder.PaymentSettings.PaymentCurrency = 'COL';
  this.paymentHolder.PointsSettings = {
     Type: 'LEALTO',
     Description: "Lealto",
     Identification: '116300903',
     FirstName: 'Eliseo',
     LastName: 'Loría Solis',
     UserId: '1',
     InvoiceNumber: '0',
     InvoiceUniqueId: this.invoiceUniqueId,
     AvailablePoints: 1000,
     IdSucursal: 1,
     IdUsuario: 25,
     RedemptionFloor: 1000,
     Rewards: [],
     CardSettings: {
       CardValid: '08/2025',
       CreditCard: 1,
       CreditAcct: 'SYS3242409',
       FormatCode: 'SYS3242409',
       CreditCardNumber: 9999,
       OwnerIdNum: 1234,
       VoucherNum: 1234
     } as ICardSettings 
  } as IPointsSettings

  dialogConfig.data = this.paymentHolder;

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

RegisterPaymentModalEvents(): void {
  Register<CL_CHANNEL>("PaymentModalId", CL_CHANNEL.OUTPUT, this.HandlePaymentModalResult, this.callbacks)
}

HandlePaymentModalResult = (_event: ICLEvent): void => {
   console.log("Payment modal result: ", _event);

   let result = JSON.parse(_event.Data) as IPaymentHolder;
   // ...handle payment modal result
}

7. Ya con esto tenemos una implementación básica del componente payment-modal
8. Video explicativo sobre el uso de @clavisco/payment-modal

Imprimir voucher de cancelación de transacción

Al eliminar una trasaccion se va a emitir un evento mediante el canal OUTPUT_2. Se puede escuchar de la siguiente manera:

ngOnInit():void
  {
    Register<CL_CHANNEL>(this.paymentModalId, CL_CHANNEL.OUTPUT_2, this.OnPrintCancelVourcher, this.callbacks);
  }


OnPrintCancelVourcher = (_event: ICLEvent) => {
  const printCancelVoucherData = JSON.parse(_event.Data) as IPrintCancelVoucherData;

  console.log(printCancelVoucherData);
}

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

---

ClavisCo ©