Tech Discovery - Payments Events (WIP)

Description

Development

Reference Log Voucher: https://github.com/rbilabs/intl-whitelabel-app/pull/1935

Card Type	Payment Type	Payment Method
VISA/MASTERCARD	CREDIT_ANONYMOUS	New credit card
VISA/MASTERCARD	VAULTED_ACCOUNT	Vaulted card
CASH	VAULTED_ACCOUNT	Cash
	PAYPAL	Paypal
	APPLE_PAY	Apple pay
	PAY_CARD_AT_HOME	Pay card at home
	WAYLET	Waylet
	BIZUM	Bizum
	SODEXO_VOUCHER	Sodexo voucher
	CHEQUE_GOURMET_VOUCHER	Cheque gourmet voucher
	TICKET_RESTAURANT_VOUCHER	Ticket restaurant voucher
SODEXO_CARD	CREDIT_ANONYMOUS	Sodexo card
CHEQUE_GOURMET_CARD	CREDIT_ANONYMOUS	Cheque gourmet card
TICKET_RESTAURANT_CARD	CREDIT_ANONYMOUS	Ticket restaurant card

Frontend

Button Click

__fixtures__/mParticle.ts

export const MParticle = (overrides?: Partial<IMParticleCtx>): IMParticleCtx => ({
  logAddPaymentMethodClick: jest.fn(),
  logCashVoucherMethodClick: jest.fn(),
  logPaymentMethodBrandClick: jest.fn(),
  ...,
});

payment-method-options/payment-method-options.tsx

Import the logPaymentMethodBrandClick

const { 
  logAddPaymentMethodClick, 
  logCashVoucherMethodClick, 
  logPaymentMethodBrandClick
} = useMParticleContext();

For each handleXXXXOptionClick call the logPaymentMethodBrandClick with specific payment method selected

const handleSodexoOptionClick = useCallback(
    (e: React.FormEvent<HTMLButtonElement>) => {
      e.preventDefault();
      logPaymentMethodBrandClick(PaymentMethodBrand.SODEXO)
    }, 
    [...]
);

state/mParticle/index.tsx

Create a function to handle all possible payment methods event names

const logAddPaymentMethodClick = () => {
  logNavigationClick(CustomEventNames.BUTTON_CLICK_ADD_PAYMENT_METHOD);
};

const logCashVoucherMethodClick = () => {
  logNavigationClick(CustomEventNames.BUTTON_CLICK_CASH_OR_VOUCHER);
};

const logPaymentMethodBrandClick = (paymentMethodBrand: PaymentMethodBrand) => {
   const customPaymentMethodEvent: Record<PaymentMethodBrand, string> = [
      SODEXO: CustomEventNames.BUTTON_CLICK_SODEXO,
      SODEXO_VOUCHER: CustomEventNames.BUTTON_CLICK_SODEXO,
      ...
   ];
   
   logNavigationClick(customPaymentMethodEvent[paymentMethodBrand]);
};

state/mParticle/types.ts

export interface IMParticleCtx {
  ...
  logAddPaymentMethodClick: VoidFunction;
  logCashVoucherMethodClick: VoidFunction;
  logPaymentMethodBrandClick: VoidFunction;
  ...
}

Description

Development

Frontend

Button Click

Backend

Log Purchase

Scenarios