Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove amex card from approved cards in payment link #763

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions clients/payment/src/components/CardLogos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,6 @@ export const MaestroLogo = () => (
</Svg>
);

export const AmericanExpressLogo = () => (
<Svg width={30} height={30} viewBox="0 0 192.756 192.756">
<Path fill="#fff" d="M0 0h192.756v192.756H0V0z" />

<Path
fill="#0077a6"
d="M8.484 177.699h-.551c0-.275-.138-.689-.138-.828 0-.137 0-.412-.414-.412h-.828v1.24h-.414v-2.896h1.242c.552 0 .965.139.965.689 0 .414-.138.553-.275.689.138.139.275.277.275.553v.551c0 .139 0 .139.138.139v.275zm-.551-2.068c0-.414-.276-.414-.414-.414h-.966v.828h.828c.276 0 .552-.139.552-.414zm2.345.551c0-1.654-1.379-3.035-3.173-3.035-1.655 0-3.035 1.381-3.035 3.035 0 1.793 1.38 3.174 3.035 3.174 1.793-.001 3.173-1.381 3.173-3.174zm-.414 0c0 1.518-1.241 2.621-2.759 2.621s-2.621-1.104-2.621-2.621c0-1.379 1.104-2.621 2.621-2.621s2.759 1.242 2.759 2.621zm169.954-55.731c0 4.139-2.621 6.068-7.312 6.068h-8.965v-4.139h8.965c.828 0 1.518-.137 1.795-.412.275-.277.551-.691.551-1.242 0-.553-.275-1.104-.551-1.379-.277-.277-.828-.414-1.656-.414-4.275-.139-9.656.137-9.656-5.932 0-2.76 1.793-5.795 6.621-5.795h9.242v4.139h-8.553c-.826 0-1.379 0-1.793.275-.414.414-.689.828-.689 1.518s.414 1.104.965 1.381c.553.137 1.105.275 1.795.275h2.482c2.621 0 4.277.551 5.381 1.518.826.965 1.378 2.208 1.378 4.139zm-19.451-4.139c-1.104-.967-2.76-1.518-5.381-1.518h-2.482c-.689 0-1.242-.139-1.793-.275-.553-.277-.965-.691-.965-1.381s.137-1.104.689-1.518c.414-.275.965-.275 1.793-.275h8.553v-4.139h-9.242c-4.967 0-6.623 3.035-6.623 5.795 0 6.068 5.381 5.793 9.658 5.932.826 0 1.379.137 1.654.414.275.275.553.826.553 1.379 0 .551-.277.965-.553 1.242-.414.275-.965.412-1.793.412h-8.967v4.139h8.967c4.689 0 7.311-1.93 7.311-6.068 0-1.931-.551-3.174-1.379-4.139zm-17.658 6.208h-10.896v-3.863h10.621v-3.861h-10.621v-3.588h10.896v-4H127.26v19.312h15.449v-4zm-20.416-14.346c-1.518-.828-3.311-.967-5.656-.967h-10.621v19.312h4.689v-7.035h4.967c1.654 0 2.621.139 3.311.828.828.965.828 2.621.828 3.863v2.344h4.551v-3.725c0-1.793-.137-2.621-.689-3.586-.414-.553-1.24-1.242-2.344-1.656 1.24-.412 3.311-2.068 3.311-5.104-.001-2.206-.829-3.448-2.347-4.274zm-26.21-.967H81.322l-5.932 6.346-5.656-6.346H51.111v19.312h18.348l5.932-6.346 5.656 6.346h8.967v-6.482h5.794c4 0 8.002-1.104 8.002-6.484-.001-5.242-4.14-6.346-7.727-6.346zm22.485 8.002c-.689.275-1.379.275-2.207.275l-5.656.139v-4.416h5.656c.828 0 1.656 0 2.207.414.553.277.965.828.965 1.656s-.412 1.518-.965 1.932zm-22.485.965h-6.07v-4.967h6.07c1.656 0 2.759.691 2.759 2.346 0 1.656-1.104 2.621-2.759 2.621zm-17.796.689l7.173-7.586v15.588l-7.173-8.002zm-11.174 5.657h-11.45v-3.863h10.208v-3.861H55.663v-3.588h11.588l5.104 5.656-5.242 5.656zm99.875-29.246h-6.621l-8.691-14.485v14.485h-9.379l-1.795-4.277h-9.656l-1.793 4.277h-5.381c-2.207 0-5.104-.552-6.758-2.208-1.518-1.655-2.346-3.862-2.346-7.311 0-2.897.414-5.518 2.482-7.587 1.379-1.518 3.863-2.207 7.035-2.207h4.414V78.1h-4.414c-1.654 0-2.621.276-3.586 1.104-.828.828-1.242 2.345-1.242 4.414s.414 3.587 1.242 4.553c.689.689 1.932.965 3.172.965h2.07l6.621-15.174h6.898l7.725 18.209v-18.21h7.174l8.139 13.381V73.961h4.689v19.313h.001zm-54.765-19.313h-4.689v19.313h4.689V73.961zm-9.795.828c-1.518-.828-3.172-.828-5.517-.828H86.288v19.313h4.552v-7.036h4.966c1.656 0 2.76.138 3.449.828.828.966.689 2.622.689 3.725v2.483h4.689v-3.863c0-1.655-.137-2.483-.826-3.449-.414-.552-1.242-1.242-2.207-1.655 1.24-.552 3.311-2.069 3.311-5.104.001-2.207-.966-3.449-2.483-4.414zM82.977 89.274h-10.76v-3.863h10.622v-4H72.217v-3.449h10.76v-4h-15.45v19.313h15.45v-4.001zM64.078 73.961h-7.587l-5.656 13.105-6.07-13.105h-7.449V92.17l-7.863-18.209h-6.897l-8.277 19.313h4.966l1.793-4.277h9.656l1.793 4.277h9.381V78.1l6.759 15.174h4l6.76-15.174v15.174h4.69V73.961h.001zm74.77 10.898l-3.174-7.587-3.172 7.587h6.346zm-40.006-3.034c-.689.414-1.379.414-2.345.414H90.84v-4.276h5.656c.828 0 1.792 0 2.345.276.551.414.828.966.828 1.793s-.276 1.516-.827 1.793zm-76.149 3.034l3.173-7.587 3.173 7.587h-6.346zm156.022-71.458H14.14v69.527l5.656-12.829h12.001l1.656 3.173v-3.173h14.071l3.173 6.897 3.035-6.897h44.834c2.068 0 3.861.414 5.242 1.517v-1.517h12.277v1.517c2.068-1.104 4.689-1.517 7.725-1.517h17.795l1.656 3.173v-3.173h13.105l1.932 3.173v-3.173h12.828v27.038H158.16l-2.482-4.138v4.138h-16.141l-1.793-4.414h-4.002l-1.793 4.414h-8.414c-3.311 0-5.795-.828-7.449-1.655v1.655H96.083v-6.208c0-.828-.138-.966-.69-.966h-.689v7.173H56.077v-3.449l-1.379 3.449h-8.139l-1.379-3.311v3.311H29.591l-1.655-4.414h-4.001l-1.793 4.414H14.14v81.529h164.575V129.14c-1.793.828-4.277 1.242-6.76 1.242h-12.002v-1.656c-1.379 1.105-3.863 1.656-6.207 1.656h-37.799v-6.207c0-.828-.137-.828-.828-.828h-.689v7.035h-12.416v-7.311c-2.068.965-4.414.965-6.483.965h-1.38v6.346H78.977l-3.586-4.139-4 4.139H46.972v-27.037h24.831l3.587 4.137 3.863-4.137h16.692c1.93 0 5.104.275 6.483 1.654v-1.654h14.898c1.518 0 4.416.275 6.346 1.654v-1.654h22.486V105c1.242-1.104 3.588-1.654 5.656-1.654h12.553V105c1.381-.965 3.311-1.654 5.795-1.654h8.553V13.401z"
/>
</Svg>
);

export const VisaLogo = () => (
<Svg width={30} height={9.74} viewBox=".5 .5 999 323.684">
<Path
Expand Down
34 changes: 11 additions & 23 deletions clients/payment/src/components/CardPayment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,7 @@ import {
} from "../graphql/unauthenticated";
import { t } from "../utils/i18n";
import { Router } from "../utils/routes";
import {
AmericanExpressLogo,
CarteBancaireLogo,
MaestroLogo,
MastercardLogo,
VisaLogo,
} from "./CardLogos";
import { CarteBancaireLogo, MaestroLogo, MastercardLogo, VisaLogo } from "./CardLogos";

const styles = StyleSheet.create({
grow: {
Expand All @@ -54,7 +48,7 @@ const styles = StyleSheet.create({
},
});

type PaymentMethod = "visa" | "maestro" | "mastercard" | "american express" | "cartes bancaires";
type PaymentMethod = "visa" | "maestro" | "mastercard" | "cartes bancaires";

type Props = {
paymentLink: NonNullable<GetMerchantPaymentLinkQuery["merchantPaymentLink"]>;
Expand All @@ -76,8 +70,9 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
const [initiateCardPayment] = useMutation(InitiateCardMerchantPaymentDocument);

type FieldState = "untouched" | "empty" | "invalid" | "valid";
type CardFieldState = FieldState | "cardNotSupported";

const [cardNumberState, setCardNumberState] = useState<FieldState>("untouched");
const [cardNumberState, setCardNumberState] = useState<CardFieldState>("untouched");
const [expiryDateState, setExpiryDateState] = useState<FieldState>("untouched");
const [cvvState, setCvvState] = useState<FieldState>("untouched");

Expand Down Expand Up @@ -137,22 +132,19 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
.with({ element: "cvv", isValid: true }, () => setCvvState("valid"))
.exhaustive();
});

//@ts-expect-error addEventHandler isn't typed correctly
Frames.addEventHandler("paymentMethodChanged", (event: { paymentMethod: string }) => {
const cardType = event.paymentMethod;
if (cardType === "American Express") {
setCardNumberState("cardNotSupported");
}

if (isNullish(cardType)) {
setPaymentMethod(Option.None());
} else {
match(cardType.toLowerCase())
.with(
"visa",
"maestro",
"mastercard",
"american express",
"cartes bancaires",
paymentMethod => setPaymentMethod(Option.Some(paymentMethod)),
.with("visa", "maestro", "mastercard", "cartes bancaires", paymentMethod =>
setPaymentMethod(Option.Some(paymentMethod)),
)
.otherwise(() => setPaymentMethod(Option.None()));
}
Expand Down Expand Up @@ -216,7 +208,7 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
<div
className={`card-number-frame ${paymentMethod.isSome() ? "card-number-frame-with-logo" : ""}`}
style={match(cardNumberState)
.with("invalid", "empty", () => ({
.with("invalid", "empty", "cardNotSupported", () => ({
borderColor: colors.negative[400],
}))
.with("untouched", "valid", () => undefined)
Expand All @@ -227,11 +219,6 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)

{match(paymentMethod)
.with(Option.P.None, () => null)
.with(Option.P.Some("american express"), () => (
<View style={styles.cardLogo}>
<AmericanExpressLogo />
</View>
))
.with(Option.P.Some("cartes bancaires"), () => (
<View style={styles.cardLogo}>
<CarteBancaireLogo />
Expand Down Expand Up @@ -259,6 +246,7 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
<LakeText variant="smallRegular" color={colors.negative[500]}>
{match(cardNumberState)
.with("invalid", () => t("paymentLink.invalidCardNumber"))
.with("cardNotSupported", () => t("paymentLink.cardNotSupported"))
.with("empty", () => t("paymentLink.cardNumberRequired"))
.with("untouched", "valid", () => " ")
.exhaustive()}
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Kartennummer",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Ablaufdatum",
"paymentLink.cardNotSupported": "American Express-Karten werden nicht unterstützt. Bitte versuchen Sie es mit einer anderen Karte.",
"paymentLink.cardNumberRequired": "Ihre Kartennummer ist erforderlich",
"paymentLink.city": "Stadt",
"paymentLink.country": "Land",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"paymentLink.card.cvv": "CVV",
"paymentLink.cardNumberRequired": "Your card number is required",
"paymentLink.expiryDateRequired": "Your expiry date is required",
"paymentLink.cardNotSupported": "American Express cards are not supported. Please try with another card.",
"paymentLink.cvvRequired": "Your CVV is required",
"paymentLink.city": "City",
"paymentLink.country": "Country",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Número de tarjeta",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Fecha de vencimiento",
"paymentLink.cardNotSupported": "Las tarjetas American Express no son compatibles. Por favor, intenta con otra tarjeta.",
"paymentLink.cardNumberRequired": "Se requiere el número de tu tarjeta",
"paymentLink.city": "Ciudad",
"paymentLink.country": "País",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/fi.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Kortin numero",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Vanhenemispäivä",
"paymentLink.cardNotSupported": "American Express -kortteja ei tueta. Yritä toisella kortilla.",
"paymentLink.cardNumberRequired": "Korttinumerosi vaaditaan",
"paymentLink.city": "Kaupunki",
"paymentLink.country": "Maa",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Numéro de carte",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Date d'expiration",
"paymentLink.cardNotSupported": "Les cartes American Express ne sont pas prises en charge. Veuillez essayer avec une autre carte.",
"paymentLink.cardNumberRequired": "Votre numéro de carte est requis",
"paymentLink.city": "Ville",
"paymentLink.country": "Pays",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Numero della carta",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Data di scadenza",
"paymentLink.cardNotSupported": "Le carte American Express non sono supportate. Per favore prova con un'altra carta.",
"paymentLink.cardNumberRequired": "Il numero della tua carta è obbligatorio",
"paymentLink.city": "Città",
"paymentLink.country": "Paese",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Kaartnummer",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Vervaldatum",
"paymentLink.cardNotSupported": "American Express-kaarten worden niet ondersteund. Probeer het met een andere kaart.",
"paymentLink.cardNumberRequired": "Uw kaartnummer is verplicht",
"paymentLink.city": "Stad",
"paymentLink.country": "Land",
Expand Down
1 change: 1 addition & 0 deletions clients/payment/src/locales/pt.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"paymentLink.card.cardNumber": "Número do cartão",
"paymentLink.card.cvv": "CVV",
"paymentLink.card.expiryDate": "Data de validade",
"paymentLink.cardNotSupported": "Cartões American Express não são suportados. Por favor, tente com outro cartão.",
"paymentLink.cardNumberRequired": "O número do seu cartão é obrigatório",
"paymentLink.city": "Cidade",
"paymentLink.country": "País",
Expand Down
Loading