Page Comparison

...

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 => {

...

Versions Compared

Old Version 9

New Version 10

Key