Repos that we’ll change:

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

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

Figma: @Schroer, Gabriel

1 Sequence Diagram
2 Business rules
3 Tasks breakdown

Sequence Diagram

Business rules

A new Bizum payment must be created for Paycomet.
This payment must work the same as Paycomet's PayPal, it must generate a link and be used in an Iframe where the payment will be processed.
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
We have to pay attention to changes from the Payments team, they are making some changes to their routine, and this new implementation cannot change the current behavior.
There are two flags that change the application's behavior: enable-paycomet-webhook-notifications (BE) and enable-backend-commit-order (BE & FE), we must test both ways, with the flags enabled and disabled.

Tasks breakdown

Task 1: Create a new feature flag

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

Suggestion name: enable-bizum-paycomet

This flag is used to show Bizum payment in payment lists.

Example of use: frontend/src/state/payment/hooks/use-payment.tsx

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

Add Bizum in IPaymentMethod

export interface IPaymentMethod {
  accountIdentifier: string | null;
  fdAccountId: string | null;
  paymentMethodBrand?: string | null;
  chaseProfileId: string | null;
  paypalIdentifier: string | null;
  credit: ICredit | null;
  selected?: boolean;
  prepaid: IPrepaid | null;
  // make cash required eventually
  cash?: boolean | null;
  paypal: boolean | null;
  ideal: boolean | null;
  blik?: boolean | null;
  sodexo?: boolean | null;
  chequeGourmet?: boolean | null;
  paymentOnDeliveryCard?: boolean | null;
  bizum?: boolean | null;
  transient?: boolean;
}

Create a new placeholder for the new payment method
- The idea is to send this new payment method identified as cash

export const BIZUM_PAYMENT_METHOD_PLACEHOLDER: IPaymentMethod = {
  bizum: true,
  fdAccountId: 'BIZUM',
  accountIdentifier: 'BIZUM',
  paymentMethodBrand: 'BIZUM',
  chaseProfileId: null,
  credit: null,
  prepaid: null,
  paypalIdentifier: null,
  ideal: null,
  paypal: false,
  sodexo: null,
  chequeGourmet: false,
  transient: true,
};

Add the new payment method in getPaymentMethodsState:

Update the interface:

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

export interface ISetupPaymentMethodState {
  enableBizum: boolean;
}

Adjust the getPaymentMethodsState:

Adjust the payment hook

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 IPaycometState interface

Update isPayPal to isPayLink and make a refactor code.

Adjust use-order-payment hook

Extend the 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

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).
- We can use the https://react-svgr.com/playground/ to convert the svg code from Figma to use in our code (following the pattern of the application)
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

Adjusting the list to deal with the new method, No it must show the Bizum payment

Task 6: 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.

We can create a validation when cardType different CASH and ccLast4 is empty.

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}}}

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

Iberia Collaboration

Technical refinement - Frontend