...

const acceptedCardsFeatureFlag = useFlag(
    LaunchDarklyFlag.ACCEPTED_CARDS
);

const creditTypeAccepted = () => {
  if(sodexo || chequeGourmet || ticketRestaurant){
    return
  }
  
  const mappedAcceptedCards = acceptedCardsFeatureFlag.map((cardType) => {
    return (
      <Icon .... >
    )
  })
  
  return (
    <>
      <h3>Card Details</h3>
      {mappedAcceptedCards()}
    </>
  );
};

return (
  <>
    <PaymentMethodSelect>
    ...
    </PaymentMethodSelect>
    {isAddCardOpen && creditTypeAccepted()}
  </>
)

Feature Flag

✅ Pros:

• Quick implementation / less complex

• Ease of changing card type values

Cons:

• The number of feature flags (eg: dev plk es, dev plk pt, dev bk es, dev bk pt and etc) created for each region/environment is high due to the way the frontend FD is created.

Solution #3 - Get accepted cards in the backend with launch-darkly

...

• Ease of changing card type values

• Endpoint already implemented

• Scalable solution for all countries of a given Brand

Cons:

• Added another request to userAccounts to obtain feature flag dataAddition of the feature flag value request, which would increase the endpoint delay a little.

✅ Proposed Solution

Solution #3.3 - Get accepted cards in the launch-darkly

...

To configure the feature flag correctly, it is necessary to enable the feature flag and configure the variations to add the values ​​of the accepted card types. For example:

Solution #2 - Get accepted cards in the launch-darkly

...

Variations

...

Solution #3.3 - Get accepted cards in the launch-darkly

...