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

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

Table of Contents

Sequence Diagram

Lucidchart

pageCount	1
autoUpdate	false
align	left
type	rich
autoSize	1
macroId	212c18aa-82a2-44ac-8050-f390618c5f25
instanceId	920ae5b1-83d6-3e36-b794-1710780f64f3
pages
width	700
documentToken	v2_553b49157110c9a058af38fe91f599cb1b5e1258ab98da315d6f1ca4a1227d7e-a=133831322&c=920ae5b1-83d6-3e36-b794-1710780f64f3&d=68c0744f-0f16-45a8-98dc-41f5610b0e39&p=4447830094
documentId	68c0744f-0f16-45a8-98dc-41f5610b0e39
updated	1705609545171
height	500

...

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

...

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

...

Expand

title	workspaces/frontend/src/utils/payment/index.ts

Update isPayPay isPayPal to isPayLink and make a refactor code.

Code Block

language	typescript

export interface IPaycometState extends IPaymentState {
  merchantAccount?: string;
  pspReference?: string;
  jetId?: string;
  iframeUrl?: string;
  isPayLink?: boolean;
  card?: {
    expiryMonth: string;
    expiryYear: string;
    bin: string;
    last4: string;
  };
  paymentMethodBrand?: PaymentMethodBrand;
  paytpvToken?: string;
}

...

Expand

title	frontend/src/pages/cart/payment/order-payment/payment.tsx

Return the new create state from useOrderPayment:

Code Block

language	typescript

  const {
   // rest of the code
   isPaycometBizumMethodSelected, // new line here
  } = useOrderPayment({
    serverOrder,
    onPriceOrder,
    enableOrderTimedFire,
  });

Pass the returned value to the getCurrentSelectedMethodType:

Code Block

language	typescript

  const currentSelectedMethodType = getCurrentSelectedMethodType({
    isPaycometBizumMethodSelected,
  });

Pass the new method to the <PaymentMethod> comp:

Code Block

language	typescript

<PaymentMethod
   // rest of the code
   isPaycometBizumMethodSelected={isPaycometBizumMethodSelected}
/>

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

Create new styled component for the new payment method

...

Expand

title	frontend/src/components/payment-method/payment-method-options/payment-method-options.tsx

Add the new prop in PaymentMethodOptions comp:

Code Block

language	typescript

function PaymentMethodOptions({
  // .. rest of the file
  setIsPaycometNewMethodSelected
}: PaymentMethodOptionProps) {
  const enableBizumMethod = useFlag(LaunchDarklyFlag.ENABLE_BIZUM_PAYCOMET); // new line

});

Add new condition in handleUnselectedMethodClick, handleAddNewCardOptionClick, handleAddNewGiftCardOptionClick, handlePaypalOptionClick and handleAdyenIdealOptionClick to clear our new state:

Code Block

language	typescript

  if (setIsPaycometSodexoOptionSelected) {
    setIsPaycometBizumMethodSelected(false);
  }

Refactor openPaycometPayLinklPopup to add typePayment.

Change translate from PayPal to Bizum.

Code Block
interface IPaycometPayLinkPopupResult { openPaycometPayLinklPopup: (typePayment: string) => void; isLoadingPopup: boolean; isPopupOpen: boolean; }

Add a new handle for our new method (using useCallback) where we’ll clear the other methods and set your:

Code Block

language	typescript

const handleBizumOptionClick = useCallback(
    (e: React.FormEvent<HTMLButtonElement>) => {
      e.preventDefault();

      setIsAddNewCardOptionSelected(false);
      setIsAddNewGiftCardOptionSelected(false);

      if (setIsPaycometBizumOptionSelected) {
        setIsPaycometBizumOptionSelected(true);
      }
      if (setIsPaycometPaypalOptionSelected) {
        setIsPaycometPaypalOptionSelected(false);
      }
      if (setIsAdyenIdealOptionSelected) {
        setIsAdyenIdealOptionSelected(false);
      }
      if (setIsAdyenBlikOptionSelected) {
        setIsAdyenBlikOptionSelected(false);
      }
      if (setIsPaycometSodexoOptionSelected) {
        setIsPaycometSodexoOptionSelected('');
      }
      if (setIsPaycometChequeGourmetOptionSelected) {
        setIsPaycometChequeGourmetOptionSelected('');
      }

      openPaycometPayLinklPopup('BIZUM');
    },
    [
      setIsAddNewCardOptionSelected,
      setIsAddNewGiftCardOptionSelected,
      setIsPaycometBizumOptionSelected,
      setIsPaycometPaypalOptionSelected,
      setIsAdyenIdealOptionSelected,
      setIsAdyenBlikOptionSelected,
      setIsPaycometSodexoOptionSelected,
      setIsPaycometChequeGourmetOptionSelected,
      openPaycometPayLinklPopup,
    ]
  );

Add in the enableSortPaymentMethods && unSelectedMethods.map a new block for our new method:

We also need to condition this payment method to be shown

Code Block

language	typescript

{method?.bizum && method?.transient && (
  <StyledOption>
    <PaymentMethodOptionItemDivider />
          <PaymentMethodAddNewItemOption
            data-testid="add-bizum-payment"
            text={'Bizum'}
            Icon={<StyledBizumCardIcon />} // should create this icon
            onClick={handleBizumOptionClick}
            isLoading={isLoadingPopup}
          />
  </StyledOption>
)}

Add a new block for for the case where we not have the enableSortPaymentMethods as true:

Code Block

language	tsx

{!enableSortPaymentMethods && isBizumEnabled && (
  <StyledOption>
    <PaymentMethodOptionItemDivider />
    <PaymentMethodAddNewItemOption
      data-testid="add-bizum-payment"
      text={formatMessage({ id: bizumlLabel(isGuestOrder) })}
      Icon={<StyledPaypalCardIcon />}
      onClick={handlePaypalOptionClick}
      isLoading={isLoadingPopup}
    />
  </StyledOption>
)}

Add the new payment method in the sortPaymentMethods

frontend/src/components/payment-method/utils/sort-payment-methods.ts

Code Block

language	typescript

  const paymentMethodListTypeOrder = [
    // rest of the code
    'NEW_METHOD',
  ];
  
  // Add new case in switch for our new method
  function filterMethodByType(typeOrder: string, paymentMethods: IPaymentMethod[]): IPaymentMethod[] {
  switch (typeOrder) {
    // rest of the code
    case 'BIZUM':
      return paymentMethods.filter(
        p => !p?.transient && p?.bizum && p.accountIdentifier === typeOrder
      );
    // rest of the code
  }
}

Add a new logic to the filter !enableSortPaymentMethods && unSelectedMethods.filter(isNotLocalWallet)... to now show our payment method if delivery mode is not selected:

Code Block

language	typescript

  const isNotLocalWallet = (method: IPaymentMethod) => {
    return !method.blik && !method.ideal;
  };

  const sortedMethodsFilterConditions = (method: IPaymentMethod) => {
    if (method.bizum) {
      return false; // remove our item from the list if delivery is not selected
    }

    return isNotLocalWallet(method);
  };
      
      // A suggestion would be the creation of a new function for the filter conditions
      {!enableSortPaymentMethods &&
        unSelectedMethods.filter(sortedMethodsFilterConditions).map(method => {

...

Expand

title	frontend/src/pages/cart/payment/order-payment/paycomet-hosted-page-payment/paycomet-hosted-page-payment.tsx

Return the new values from the useOrderPayment hook

Code Block

language	typescript

const {
    // rest of code
    setIsPaycometBizumMethodSelected,
    isPaycometBizumMethodSelected,
  } = useOrderPayment({
    enableOrderTimedFire,
    onPriceOrder,
    serverOrder,
  });

Pass down the values to the <PaymentMethod> comp

Code Block

language	tsx

// rest of the code
<PaymentInfoBackground $hostedPayment>
  {showPaymentMethodSelection && (
    <PaymentMethod
      // rest of the code
      setIsPaycometBizumMethodSelected={setIsPaycometBizumMethodSelected} // new line
      isPaycometBizumMethodSelected={isPaycometBizumMethodSelected} // new line
      onResult={onPaymentOutcome}
    />
  )}

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:

...

Expand

title	frontend/src/components/payment-method-option/index.tsx

Adjust the RenderMethodType and add the new method created above

Code Block

language	tsx

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

    // New if here
    if (method.bizumPaymentMethod) {
      return <BizumPaymentMethod />;
    }   
    
    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.bizumPaymentMethod && <StyledBizumPaymentMethodCardIcon />}
          </MethodTypeDescription>
          // rest of the code
        </div>
      </MethodTypeWrapper>
     // rest of the code
  );

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

...

Expand

title	frontend/src/components/payment-method-flat-list-with-button/payment-method-flat-list-with-button.tsx

We’ll exclude the new payment method if it is not actually stored in the user account:

Code Block

language	typescript

function filterOutUnsupportedPaymentMethods(paymentMethods: IPaymentMethod[]) {
  return paymentMethods.filter(
    n =>
      n.accountIdentifier !== PAYPAL_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
      n.accountIdentifier !== SODEXO_VOUCHER_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
      n.accountIdentifier !== BIZUM_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
  );
}

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.

...

Note
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/

Versions Compared

Old Version 4

New Version Current

Key

Sequence Diagram

Business rules

Tasks breakdown

Task 1: Create a new feature flag

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

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

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

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

Task

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

Page Comparison

Versions Compared

Old Version 4

New Version Current

Key

Sequence Diagram

Business rules

Tasks breakdown

Task 1: Create a new feature flag

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

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

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

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

Task

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