Versions Compared

Old Version 4

changes.mady.by.user Capovilla, Evandro

Saved on

compared with

New Version Current

changes.mady.by.user Capovilla, Evandro

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Button Click

Expand
title__fixtures__/mParticle.ts
Code Block
export const MParticle = (overrides?: Partial<IMParticleCtx>): IMParticleCtx => ({
  logAddPaymentMethodClick: jest.fn(),
  logCashVoucherMethodClick: jest.fn(),
  logPaymentMethodBrandClick: jest.fn(),
  ...,
});
Expand
titlepayment-method-options/payment-method-options.tsx

Import the logPaymentMethodBrandClick

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

For each handleXXXXOptionClick call the logPaymentMethodBrandClick with specific payment method selected

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

...

titlestate/mParticle/index.tsx

Create a function to handle all possible payment methods event names

...

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4671635593/2024-04-25%3A+Payments+Events+-+Button+Click+and+Backend+Purchase?focusedCommentId=4674453519

Expand
titlestate/mParticle/index.tsx

Change the event name property to receive click dropdown instead of button click

Code Block
const logNavigationClick = (eventName: CustomEventNames, attrs = {}, customFlags = {}) => {
  logNavigationClick(CustomEventNames.BUTTON_CLICK_ADD_PAYMENT_METHOD); }; trackEvent({
const logCashVoucherMethodClick = () => { name:  logNavigationClick(CustomEventNames.BUTTON_CLICK_CASH_OR_VOUCHER);
};,
   const logPaymentMethodBrandClick = (paymentMethodBrandtype: PaymentMethodBrand) => {EventTypes.Navigation,
     const customPaymentMethodEventattributes: Record<PaymentMethodBrand,{
string> = [       SODEXOName: CustomEventNames.BUTTON_CLICK_SODEXO,
eventName,
     SODEXO_VOUCHER: CustomEventNames.BUTTON_CLICK_SODEXO,
      ...
   ];attrs,
       logNavigationClick(customPaymentMethodEvent[paymentMethodBrand]);
};
Expand
titlestate/mParticle/types.ts
Code Block
export interface IMParticleCtx {},
   ...   logAddPaymentMethodClick:customFlags,
VoidFunction;   logCashVoucherMethodClick: VoidFunction});
  logPaymentMethodBrandClick: VoidFunction;
  ...
}};

Backend ( order-service )

...

Steps

Description

The user is logged in to Amplitude

The user has previously logged in and is on the log dashboard creation page

The user filters the logs by Backend Purchase

The user can filter the logs by Backend Purchase and find all the purchases made by user

The user can see the type of payment paid

When the user open the log its possible to find the type of payment ( PAYPAL, APPLE_PAY, WAYLET, BIZUM )

Scenario 5: The user can identify the pay card at home payment method was made

Steps

Description

The user is logged in to Amplitude

The user has previously logged in and is on the log dashboard creation page

The user filters the logs by Backend Purchase

The user can filter the logs by Backend Purchase and find all the purchases made by user

The user can see the type of payment paid

When the user open the log its possible to find the type of payment ( PAY_CARD_AT_HOME

, WAYLET, BIZUM,

)

Scenario 6: The user can identify which voucher payment method was paid

Steps

Description

The user is logged in to Amplitude

The user has previously logged in and is on the log dashboard creation page

The user filters the logs by Backend Purchase

The user can filter the logs by Backend Purchase and find all the purchases made by user

The user can see the type of payment paid

When the user open the log its possible to find the type of payment ( SODEXO_VOUCHER, CHEQUE_GOURMET_VOUCHER, TICKET_RESTAURANT_VOUCHER )

Scenario

...

7: The user can identify which

...

meal card payment method was made

Steps

Description

The user is logged in to Amplitude

The user has previously logged in and is on the log dashboard creation page

The user filters the logs by Backend Purchase

The user can filter the logs by Backend Purchase and find all the purchases made by user

The user can see the type of payment paid

When the user open the log its possible to find the type of payment ( CREDIT_ANONYMOUS )

The user can see which card type is used

When the user open the log its possible to find the card type ( SODEXO_CARD, CHEQUE_GOURMET_CARD, TICKET_RESTAURANT_CARD )

...