Versions Compared

Old Version 8

changes.mady.by.user Pereira, Filipa (Deactivated)

Saved on

compared with

New Version 9

changes.mady.by.user Capovilla, Evandro

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In this solution we would have the flexibility of a more dynamic change, but we would be linking the feature to the feature flag and adding another flag to the system.

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

In this solution we created a more robust solution to store the types of cards accepted and retrieve them from launchdarkly. This may involve adding the types of cards accepted to the database.

The feature flag structure will be as follows:

Feature Flag

Variations


accepted-cards-types

acceptedCards

none

Code Block
{
  paycomet: [
    'VISA',
    'MASTERCARD,
  ],
  firstdata: [
    'VISA',
    'MASTERCARD',
    'AMEX'
  ],
  paymark: []
}

Solution #3.1 - Frontend integrate endpoint directly to payments-service

This solution involves creating an endpoint to retrieve the accepted card type data in the payment service and the frontend calling this endpoint directly without the need to go through graphql/fulfillment.

...

Expand
titlehttps://sequencediagram.org/
Code Block
note over Frontend,Graphql: No endpoint implentation
Frontend->Payment Service: Get accepted card types
Payment Service->Launch Darkly (Platform): Get feature flag value
Payment Service<-Launch Darkly (Platform): Retrieve feature flag value
Payment Service->Frontend:Retrieve accepted card types

Solution #3.2 - Frontend integrate endpoint directly to graphql/fulfillment

This solution involves creating an endpoint to retrieve the accepted card type data in graphql/fulfillment and the frontend calling this endpoint directly.

...

Expand
titlehttps://sequencediagram.org/
Code Block
Frontend->Graphql: Get accepted card types
Graphql->Launch Darkly (Platform): Get feature flag value
Graphql<-Launch Darkly (Platform): Retrieve feature flag value
Frontend<-Graphql:Retrieve accepted card types

Solution #3.3 - Frontend integrate endpoint directly to userAccounts endpoint

This solution involves changing the userAccounts endpoint and adding the new acceptedCards field.

...

Expand
titlehttps://sequencediagram.org/
Code Block
Frontend->Graphql (UserAccounts): Get accepted card types
Graphql (UserAccounts)->Launch Darkly (Platform): Get feature flag value
Graphql (UserAccounts)<-Launch Darkly (Platform): Retrieve feature flag value
Frontend<-Graphql (UserAccounts): Retrieve accepted card types

✅ Proposed Solution

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

...

The types of payments for "sodexo”, “ticket restaurant” and “cheque gourmet" must be shown only one of them and not the credit cards.
Expand
titlepayment-method/index.tsx
Code Block
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()}
  </>
)
Info

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

The change needed is a change in intl-whitelabel-app and a change in the userAccounts endpoint in graphql.

To do this, you need to create a component to add the flags and call it after paymentJetId is enabled, as it defines when the form is ready to be displayed to the user.

intl-whitelabel-app

Expand
titlesrc/state/payment/index.tsx
Code Block
export interface IPaymentContext {
  acceptedCardTypes: string[];
  ...
}

const {
  acceptedCardTypes,
  ...
} = usePayment({
    ...,
});

return {
  ...,
  acceptedCardTypes
  ...,
}
Expand
titlepayment/hooks/use-payment.tsx
Code Block
const acceptedCardTypes = userAccountsData?.userAccounts?.acceptedCardTypes;

return {
  ...,
  acceptedCardTypes
  ...,
}
Expand
titlepayment-method/index.tsx
Code Block
const payment = usePaymentContext();

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

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

intl-whitelabel-graphql

Expand
titlesrc/functions/graphql/resolvers/payments.ts
Code Block
CONST ACCEPTED_CARDS = 'accepted-card-types'

type AcceptedCardTypes = {
  acceptedCardTypes: string[];
};

async userAccounts(
  ...
): Promise<GraphQLTypes.AccountListResponse & AcceptedCardTypes> {
  ...
  
  const launchDarkly: LaunchDarkly = new LaunchDarkly({
    config: config.launchDarkly,
    context: { logger },
  });

  const acceptedCardTypes = await launchDarkly.getFeatureValue({
    feature: ACCEPTED_CARDS,
    defaultValue: [],
  });
  
  return {
    ...,
    acceptedCardTypes: acceptedCardTypes ? acceptedCardTypes[paymentProcessor] : [],
  };
}
Expand
titlesrc/functions/graphql/schemas/payments.gql
Code Block
type AccountListResponse {
  ...
  acceptedCardTypes: string[]
}
Info

After adding the new property in type, you need to run graphql:types

🎛️ Configuration

Feature Flag

accepted-cards-types

...