Technical refinement - Front end

Owned by Augusto Romao, Vinicius
Last updated: Dec 01, 2023
14 min read

Repos that we’ll change:

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

 

Figma: @Schroer, Gabriel

Task summary - Whitelabel:

Components tree architecture

Schema to show how the payment method options will behavior in the application

Business rules

  • The new payment method should only be available if the user selects “delivery mode” inside the Whitelabel App

  • The confirmation/tracking page should show the correct text in the payment reminder for this new payment method

  • The receipt email should show the correct payment option for this new payment method

  • The new method should be available in the user account methods list

Tasks breakdown

The solution was based on the Sodexo Cheque Gourmet Voucher implementation: https://github.com/rbilabs/intl-whitelabel-app/pull/686/files

Task 1: Create a new feature flag

Flag should be added in: frontend/src/utils/launchdarkly/flags.ts

Suggestion name: enable-payment-on-delivery-card

  • The user can pay using credit or debit mode, so “card” is a generic name

https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/enable-payment-on-delivery-card-paycomet/targeting

 

Task 2: Add the new payment method in the payment state and structure

  • Create a new placeholder for the new payment method

    • The idea is to send this new payment method identified as cash

// Replace this name for what we decide export const NEW_PAYMENT_METHOD_PLACEHOLDER: IPaymentMethod = { sodexo: false, fdAccountId: 'CASH', accountIdentifier: 'NEW_PAYMENT_METHOD', // TO BE DEFINED paymentMethodBrand: 'NEW_PAYMENT_METHOD', // TO BE DEFINED chaseProfileId: null, credit: null, prepaid: null, paypalIdentifier: null, ideal: null, paypal: false, };

  • Add the new payment method in getPaymentMethodsState:

Update the interface:

frontend/src/state/payment/hooks/types.ts:

export interface ISetupPaymentMethodState { enableNewMethod: boolean; }

 

Adjust the getPaymentMethodsState:

export const getPaymentMethodsState = ({ // rest of the code enableNewMethod, }: ISetupPaymentMethodState) => { // rest of the code if (enableNewMethod) { availablePaymentMethodList.push(NEW_PAYMENT_METHOD_PLACEHOLDER); } // rest of the code };

 

  • Adjust the payment hook

Update cash account variable:

 

Add the new feature flag here and then pass through the getPaymentMethodState:

 

Adjust the unit tests mocking the new flag where necessary: frontend/src/state/payment/tests/use-payment.test.tsx

  • Adjust use-order-payment hook

Add a new state for the new payment method:

const [isPaycometNewMethodSelected, setIsPaycometNewMethodSelected] = useState('');

 

Update the handlePaymentMethodSelected adding the new method:

 

Clear our new method in the useEffect logic that already exist:

 

Update the placeOrder function to deal with the new method:

  • Option 1:

    • Adjust the if condition for paycomet processor to deal with the new method:

       

  • Option 2:

    • Separate this logic in another reusable block and then pass the new paymentMethodBrand (as a kind of builder pattern or something similar). We can discuss that on an A&D section.

 

Adjust the processOrderWithAccount function for the new method like this Sodexo example:

 

Adjust the handleOrderCommit to place the order with the new method:

  • Extend the getCurrentSelectedMethodType:

Add the new payment in the enum CurrentSelectedMethodType:

  • frontend/src/components/payment-method/types.ts:

 

Adjust the IPaymentMethodProps:

 

Add the new condition in getCurrentSelectedMethodType:

 

  • Adjust order-payment comp:

 

Task 3: Add the new method in payment-method structure

  • Create new styled component for the new payment method

  • Add a new type

  • Add the new method in payment-method comp

  • Add the new method in payment-method-options comp

  • Add the new method in paycomet-hosted-page-payment comp

 

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

Just an example of where the new change will be

 

  • 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:

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

    • Remember to add the translation that will be used in formatMessage

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

 

Task 5: Adjust account payment method lists to deal with the new method

 

Nice to have - not considered now

Task 6: Adjust the confirmation text for confirmation page and tracking modal

  • The same component is used to show both cases: frontend/src/pages/order-confirmation/delivery/delivery-details.tsx

Suggestion of implementation:

  • Add a new property/flag inside the cart.payment structure to enable a new condition to show new texts for these case (I think that perhaps we should not change the cardType, not sure yet)

For the payment reminder tip we have some options:

  1. Create new component as the <CashPaymentReminder /> that we have today for the new condition/new text

  2. Adjust the <CashPaymentReminder /> to deal with other types of texts and perhaps rename this component to have a generic name (for example <PaymentReminder />)

 

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

Today, when the commit order is processed, order-service triggers Braze API with the order info, that then sends the confirmation email to the customer.

The first necessary alteration will be to include paymentMethodBrand in the properties sent to braze in transformOrderProperties utility method. For example:

 

After we change intl-packages/email to send the necessary information to Braze API, we need to update the templates configured, which are split into templates and content blocks (reusable pieces of content). Using PLK-ES as example we can see:

The example displays a LiquidJS template, which is similar but not equal to Braze templates. Braze access properties using the syntax {{event_properties.${language}}}