Page Comparison

...

Development

This section includes some code examples that will be developed. The examples serve as a guide for development, and good practices as well as testing should be adopted.

New payment method support

This first stage involves adding the main foundation for the new payment method. Since this task is repeated for all new payment methods, I will only provide the reference for each stage. This should be the first part of the frontend development; without it, it will not be possible to continue with the development of the subsequent screens.

New payment method support

Add new payment method icon

ref: https://github.com/rbilabs/ctg-components-library/pull/399 This task involves adding the icon to be used later by the whitelabel

import { SVGIconComponent } from '../types';

export const endered: SVGIconComponent = ({ title = '', ...props }) => (
//svg code
);

...

mbway: string;

ref: https://github.com/rbilabs/ctg-components-library/pull/399

Create a new feature flagfeature flag

This task aims to create the feature flag in both launchdarkly and whitelabel

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-1%3A-Create-a-new-feature-flag

...

Add the new payment method in the payment state and structure

This task aims to create the mbway in payment state and structure

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-2%3A-Add-the-new-payment-method-in-the-payment-state-and-structure

...

Add the new method in payment-method structure and payment list

This task aims to add mbway to the payment dropdown

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4362960979/Technical+refinement+-+Front+end#Task-3%3A-Add-the-new-method-in-payment-method-structure

...

Adjust the receipt email to show the correct message for the new payment method

This task aims to adjust the email to include mbway as a payment method

https://rbictg.atlassian.net/wiki/spaces/IBC/pages/4449861673/Technical+refinement+-+Frontend#Task-6%3A-Adjust-the-receipt-email-to-show-the-correct-message-for-the-new-payment-method

...

const pendingPage = () => {
  const { orderId } = useParams();
  const MBWayPendingPayment = LocalStorage.getItem(StorageKeys.PENDING_PAYMENT);
  
  let data;
  if(MBWayPendingPayment && MBWayPendingPayment.id === orderId){
    data = MBWayPendingPayment;
  } else {
    try{
      const orders = GetUserOrders(); 
      // map the order list to show only the latest information needed
      data = orders[0];
    }
  }
  
  return (
    <MBWayComponent data={data} />
  )
}

Backend

Packages

This task aims to add mbway to the payment method enums

export declare enum PaymentMethodType {
    ...
    MBWay = 'MBWay'
}

export declare enum RBIPaymentType {
    ...
     MBWay = 'MBWay'
}

Commit Order Graphql/Fulfillment

MBWay = 'MBWay'
}

Commit Order Graphql/Fulfillment

This task aims to add mbway to the payment method enums and modify the commit order to accept this new payment method, in addition to including the new field: "paymentRequestCreatedAt"

export enum CartPaymentType {
  ...
  MBWay = 'MBWay',
}

...

Create a new request to Graphql/Fulfillment to handle MB Way on Initiate Endpoint

Implementation example: https://github.com/rbilabs/intl-whitelabel-graphql/pull/1150/files This task aims to add the paycometCaptureContext field to the initiatePayment endpoint

input PaycometCaptureContextInput {
  amount: number!
  rbiOrderId: String!
  cellphone: number
  method: string!
}

input InitiatePaymentInput {
  storeId: String!
  paymentMethodType: String!
  cybersourcePaSetup: CybersourcePaSetupInput
  cybersourceCaptureContext: CybersourceCaptureContextInput
  paycometCaptureContext: PaycometCaptureContextInput
}

Implementation example: https://github.com/rbilabs/intl-whitelabel-graphql/pull/1150

Create a new endpoint in Paycomet PSP Service

This task aims to create the initiatePayment endpoint on paycomet psp and also its functionality.

export enum TypePayment {
  ...
  MBWay = 'MBWay'
}

...

public async initiatePaymentMBWay(
    region: string,
    request: InitiateRequestDto,
  ): Promise<InitiateResult> {
    try{
      const result = this.createPaymentMBWayRequest(request);
      // Add log about payment initiation attempt
      if(result.errorCode === TransactionStatus.SUCCESSFUL){
        return this.handleSuccesful(region, request, result);
      }
      return this.handleFailure(region, request, result);
    } catch(error){
      return this.handleFailure(region, request, error);
    }
}

Update the order to include the time left to finish the MB Way Payment

Admin AppAdmin App

Adding mbway within the translation enum so that the Admin App knows this new payment method and selects the correct translation.

const paymentMethodType = order?.cart?.payment?.type;

if (paymentMethodType === 'MBWay') {
      return formatMessage({ id: paymentMethodBrandTranslationMap(paymentMethodType) });
    }
    
if (paymentMethodBrand) {
      return formatMessage({ id: paymentMethodBrandTranslationMap(paymentMethodBrand) });
    }

DOP

Adding mbway within the translation enum so that the DOP knows this new payment method and selects the correct translation

export const paymentMethodTranslation: Record<string, keyof LocalizedDictionary> = {
  MBWAY: `${pathPaymentTranslations}.mbway`,
};

Expeditor Tablet

Adding the mbway inside the enum so that the expeditor tablet knows this new payment method.

export enum PaymentMethod {
  ...,
  MBWAY = "MBWAY",
}

...