Versions Compared

Old Version 1

changes.mady.by.user Augusto Romao, Vinicius

Saved on

compared with

New Version 2

changes.mady.by.user Augusto Romao, Vinicius

Saved on

Key

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

Repos that we’ll change

Whitelabel: https://github.com/rbilabs/intl-whitelabel-app

Figma: Schroer, Gabriel (Deactivated)

...

Task summary

Whitelabel:

  • Task 1: Create a new payment method option

...

Components tree architecture

...

Tasks breakdown

Task 1: Create and add a new method in payment-method-option structure

  • Add the new icon for the new payment method in: frontend/src/components/icons/new-payment-method/index.tsx (replace “new-payment-method” for the new name, hahaha).

  • Add the new method option in the interface of payment methods:

Expand
titlefrontend/src/state/payment/types.ts
Code Block
languagetypescript
export interface IPaymentMethod {
  // ... rest of the code
  newPaymentMethod?: boolean | null;
}

  • Add new file in payment-method-option/as the following example:

Expand
titlefrontend/src/components/payment-method-option/new-payment-method.tsx (example of new file)
Code Block
languagetypescript
import React from 'react';

import { useIntl } from 'react-intl';

import { MethodType } from './styled';

const NewPaymentMethod = () => { // Example SodexoMethod
  const { formatMessage } = useIntl();

  return <MethodType>{formatMessage({ id: 'payWithNewMethod' })}</MethodType>;
};

export default NewPaymentMethod;

  • Use the created payment method option in payment-method-option:

Expand
titlefrontend/src/components/payment-method-option/index.tsx

Adjust the RenderMethodType and add the new method created above

Code Block
languagetsx

  const RenderMethodType = () => {
    // ... rest of the code

    // New if here
    if (method.newPaymentMethod) {
      return <NewPaymentMethod />;
    }   
    
    return null;
  };
  
  // add the new payment method inside the <MethodTypeWrapper> in the return
  
   return 
    // rest of the code
    (
    // rest of the code
      <MethodTypeWrapper
        data-private
        data-dd-privacy="mask"
        onClick={onClickMethod}
        $isClickable={!!onClick}
        disableMethod={disableMethod}
        fromCheckout={fromCheckout}
        data-testid={`method-type-wrapper-${method.accountIdentifier ?? method.fdAccountId ?? ''}`}
        selected={selected}
      >
        // rest of the code
        <div>
          <MethodTypeDescription>
            // Add new method here inside the description
            {method.newPaymentMethod && <StyledNewPaymentMethodCardIcon />}
          </MethodTypeDescription>
          // rest of the code
        </div>
      </MethodTypeWrapper>
     // rest of the code
  );