@clavisco/payment-modal v0.0.8

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

Novedades

• Ahora se puede definir una tarjeta por defecto al iniciar la modal

Correcciones

• Ahora los iconos de cancelar para la modal de pagos y la modal de puntos tienen el icono correcto
• Ahora el boton de cancelar se muestra en el mismo color que los demas botones

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 ©