...
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 |
|---|
| title | payment-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)
},
[...]
); |
|
...
| title | state/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 |
|---|
| title | state/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_SODEXOeventName,
SODEXO_VOUCHER: CustomEventNames.BUTTON_CLICK_SODEXO,
...
];
attrs,
logNavigationClick(customPaymentMethodEvent[paymentMethodBrand]);
}; |
|
| Expand |
|---|
| title | state/mParticle/types.ts |
|---|
|
| Code Block |
|---|
export interface IMParticleCtx { },
... customFlags,
logAddPaymentMethodClick: VoidFunction; logCashVoucherMethodClick: VoidFunction});
logPaymentMethodBrandClick: VoidFunction;
...
}};
|
|
Backend ( order-service )
...