Versions Compared

Old Version 7

changes.mady.by.user Augusto Romao, Vinicius

Saved on

compared with

New Version 8

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 feature flag

...

Table of Contents
minLevel2
maxLevel6
outlinefalse
typelist
printablefalse

...

Components tree architecture

...

Suggestion name: ENABLE_CREDIT_CARD_AT_HOME_PAYCOMET

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

...

Expand
titlefrontend/src/pages/cart/payment/order-payment/payment.tsx

Return the new create state from useOrderPayment:

Code Block
languagetypescript
  const {
   // ... rest of the code
   isPaycometNewMethodSelected, // new line here
  } = useOrderPayment({
    serverOrder,
    onPriceOrder,
    enableOrderTimedFire,
  });

Pass the returned value to the getCurrentSelectedMethodType:

Code Block
languagetypescript
  const currentSelectedMethodType = getCurrentSelectedMethodType({
    isPaycometNewMethodSelected,
  });

Pass the new method to the <PaymentMethod> comp:

Code Block
languagetypescript
<PaymentMethod
   // ... rest of the code
   isPaycometNewMethodSelected={isPaycometNewMethodSelected}
/>

Task

...

3: Add the new method in payment-method structure

  • Create new styled component for the new payment method

...

Expand
titlefrontend/src/components/payment-method/payment-method-options/payment-method-options.tsx

Add the new prop in PaymentMethodOptions comp:

Code Block
languagetypescript
function PaymentMethodOptions({
  // .. rest of the file
  setIsPaycometNewMethodSelected
}: PaymentMethodOptionProps) {
  const enableNewMethod = useFlag(LaunchDarklyFlag.ENABLE_CREDIT_CARD_AT_HOME_PAYCOMET); // new line

});

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

Code Block
languagetypescript
  if (setIsPaycometSodexoOptionSelected) {
    setIsPaycometNewMethodSelected('');
  }

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

Code Block
languagetypescript
  const handleNewMethodOptionClick = useCallback(
    (e: React.FormEvent<HTMLButtonElement>, newMethodType: string) => {
      e.preventDefault();
      setIsAddNewCardOptionSelected(false);
      setIsAddNewGiftCardOptionSelected(false);
      if (setIsPaycometPaypalOptionSelected) {
        setIsPaycometPaypalOptionSelected(false);
      }
      if (setIsAdyenIdealOptionSelected) {
        setIsAdyenIdealOptionSelected(false);
      }
      if (setIsAdyenBlikOptionSelected) {
        setIsAdyenBlikOptionSelected(false);
      }
      if (setIsPaycometSodexoOptionSelected) {
        setIsPaycometSodexoOptionSelected('');
      }
      if (setIsPaycometSodexoOptionSelected) {
        setIsPaycometSodexoOptionSelected('');
      }
      // our new method here
      if (setIsPaycometNewMethodSelected) {
        setIsPaycometNewMethodSelected(newMethodType);
        if (newMethodType === 'card') {
          setIsAddNewCardOptionSelected(true);
        }
      }

      handleSelect();
      setCollapsed(true);
    },
    [
     // callback dependencies here
    ]
  );

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

Code Block
languagetsx
{method?.sodexo && method?.transient && (
  <StyledOption>
    <PaymentMethodOptionItemDivider />
    <PaymentMethodAddNewItemOption
      data-testid="add-new-method-credit-card-payment"
      text={formatMessage({ id: newMethodLabel(isGuestOrder) })}
      Icon={<StyledNewMethodCardIcon />}
      onClick={e => handleNewMethodOptionClick(e, 'card')}
      isLoading={isLoadingPopup}
    />
  </StyledOption>
)}

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

Code Block
languagetsx
{!enableSortPaymentMethods && enableNewMethod && (
  <StyledOption>
    <PaymentMethodOptionItemDivider />
    <PaymentMethodAddNewItemOption
      data-testid="add-sodexo-credit-card-payment"
      text={formatMessage({ id: newMethodLabel(isGuestOrder) })}
      Icon={<StyledNewMethodCardIcon />}
      onClick={e => handleNewMethodOptionClick(e, 'card')}
      isLoading={isLoadingPopup}
    />
  </StyledOption>
)}

...

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

Expand
titlefrontend/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
languagetypescript
const {
    // ... rest of code
    setIsPaycometNewMethodSelected,
    isPaycometNewMethodSelected,
  } = useOrderPayment({
    enableOrderTimedFire,
    onPriceOrder,
    serverOrder,
  });

Add a new condition for the paycomet form: I NEED TO VALIDATE THIS = WIP

Code Block
languagetsx
 // Add a new condition here
 {showAddPaymentMethod && showPaymentSodexo && showPaymentChequeGourmet && (
  <ConditionalWrapper
    condition={!paymentMethods.length}
    wrapper={children => <AddNewCreditCardWrapper>{children}</AddNewCreditCardWrapper>}
  >
    <PaycometCreditCardHostedPaymentForm
      rbiOrder={serverOrder}
      onResult={onPaymentOutcome}
      onChange={onChange}
      paymentValues={paymentValues}
      errors={errors}
      isCheckoutErrorsModalOpenPaycomet={isCheckoutErrorsModalOpenPaycomet}
      tpvToken={tpvToken}
      onError={(errorMessageId: TLocalizationKey) => {
        setShowAddPaymentMethod(false);
        setIsPaymentError(false);
        setIsCheckoutErrorsModalOpenPaycomet(true);
        setErrorOnPreAuth({ messageId: errorMessageId, hasError: true });
      }}
      preAuthCallback={() => {
        setIsPreauthLoading(true);
      }}
    />
  </ConditionalWrapper>
)}

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).

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

...

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
  );

Task

...

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

...

Expand
titlefrontend/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
languagetypescript
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 !== NEW_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
  );
}

...