From 23d2497fd0820189ea9ca6e23205e8a775462448 Mon Sep 17 00:00:00 2001 From: Sandrine Da Silva Date: Thu, 20 Jun 2024 16:08:47 +0200 Subject: [PATCH] Fix segmented control layout --- clients/banking/package.json | 4 +- clients/onboarding/package.json | 4 +- clients/payment/package.json | 4 +- .../payment/src/components/PaymentArea.tsx | 6 +- clients/payment/src/locales/de.json | 2 +- clients/payment/src/locales/en.json | 2 +- clients/payment/src/locales/es.json | 2 +- clients/payment/src/locales/fi.json | 2 +- clients/payment/src/locales/fr.json | 2 +- clients/payment/src/locales/it.json | 2 +- clients/payment/src/locales/nl.json | 2 +- clients/payment/src/locales/pt.json | 2 +- clients/payment/src/pages/PaymentPage.tsx | 118 +++++++++--------- yarn.lock | 16 +-- 14 files changed, 86 insertions(+), 82 deletions(-) diff --git a/clients/banking/package.json b/clients/banking/package.json index 481b40a19..b956cff3d 100644 --- a/clients/banking/package.json +++ b/clients/banking/package.json @@ -17,9 +17,9 @@ "@swan-io/boxed": "2.3.0", "@swan-io/chicane": "2.0.0", "@swan-io/graphql-client": "0.1.4", - "@swan-io/lake": "8.4.5", + "@swan-io/lake": "8.5.2", "@swan-io/request": "1.0.6", - "@swan-io/shared-business": "8.4.5", + "@swan-io/shared-business": "8.5.2", "@swan-io/use-form": "2.0.4", "core-js": "3.37.1", "dayjs": "1.11.11", diff --git a/clients/onboarding/package.json b/clients/onboarding/package.json index 64101c3ac..a2ef5c6b9 100644 --- a/clients/onboarding/package.json +++ b/clients/onboarding/package.json @@ -17,9 +17,9 @@ "@swan-io/boxed": "2.3.0", "@swan-io/chicane": "2.0.0", "@swan-io/graphql-client": "0.1.4", - "@swan-io/lake": "8.4.5", + "@swan-io/lake": "8.5.2", "@swan-io/request": "1.0.6", - "@swan-io/shared-business": "8.4.5", + "@swan-io/shared-business": "8.5.2", "@swan-io/use-form": "2.0.4", "core-js": "3.37.1", "dayjs": "1.11.11", diff --git a/clients/payment/package.json b/clients/payment/package.json index 69da9f864..41dda547f 100644 --- a/clients/payment/package.json +++ b/clients/payment/package.json @@ -17,8 +17,8 @@ "@swan-io/boxed": "2.3.0", "@swan-io/chicane": "2.0.0", "@swan-io/graphql-client": "0.1.4", - "@swan-io/lake": "8.4.5", - "@swan-io/shared-business": "8.4.5", + "@swan-io/lake": "8.5.2", + "@swan-io/shared-business": "8.5.2", "@swan-io/use-form": "2.0.4", "core-js": "3.37.1", "dayjs": "1.11.11", diff --git a/clients/payment/src/components/PaymentArea.tsx b/clients/payment/src/components/PaymentArea.tsx index 1da36f038..ee7a4552c 100644 --- a/clients/payment/src/components/PaymentArea.tsx +++ b/clients/payment/src/components/PaymentArea.tsx @@ -92,14 +92,14 @@ export const PaymentArea = ({ paymentLinkId }: Props) => { <> { window.location.replace(cancelRedirectUrl); }} > - {desktop ? t("common.back") : null} + {desktop ? t("common.cancel") : null} diff --git a/clients/payment/src/locales/de.json b/clients/payment/src/locales/de.json index 6945d45ef..bc7df73e3 100644 --- a/clients/payment/src/locales/de.json +++ b/clients/payment/src/locales/de.json @@ -1,6 +1,6 @@ { "button.pay": "Bezahlen", - "common.back": "Zurück", + "common.cancel": "Abbrechen", "error.pageNotFound": "Seite nicht gefunden", "form.invalidField": "Ungültiges Feld", "paymentLink.addressLine1": "Adresszeile", diff --git a/clients/payment/src/locales/en.json b/clients/payment/src/locales/en.json index 12c163793..f357d2acb 100644 --- a/clients/payment/src/locales/en.json +++ b/clients/payment/src/locales/en.json @@ -1,6 +1,6 @@ { "button.pay": "Pay", - "common.back": "Back", + "common.cancel": "Cancel", "error.pageNotFound": "Page not found", "form.invalidField": "Invalid field", "paymentLink.addressLine1": "Address line", diff --git a/clients/payment/src/locales/es.json b/clients/payment/src/locales/es.json index 62d22be97..b4257b0f8 100644 --- a/clients/payment/src/locales/es.json +++ b/clients/payment/src/locales/es.json @@ -1,6 +1,6 @@ { "button.pay": "Pagar", - "common.back": "Volver", + "common.cancel": "Cancelar", "error.pageNotFound": "Página no encontrada", "form.invalidField": "Campo inválido", "paymentLink.addressLine1": "Dirección", diff --git a/clients/payment/src/locales/fi.json b/clients/payment/src/locales/fi.json index afc2a4af5..0189376c2 100644 --- a/clients/payment/src/locales/fi.json +++ b/clients/payment/src/locales/fi.json @@ -1,6 +1,6 @@ { "button.pay": "Maksa", - "common.back": "Takaisin", + "common.cancel": "Peruuta", "error.pageNotFound": "Sivua ei löytynyt", "form.invalidField": "Virheellinen kenttä", "paymentLink.addressLine1": "Katuosoite", diff --git a/clients/payment/src/locales/fr.json b/clients/payment/src/locales/fr.json index 11733495f..8fef16d7e 100644 --- a/clients/payment/src/locales/fr.json +++ b/clients/payment/src/locales/fr.json @@ -1,6 +1,6 @@ { "button.pay": "Payer", - "common.back": "Retour", + "common.cancel": "Annuler", "error.pageNotFound": "Page non trouvée", "form.invalidField": "Champ invalide", "paymentLink.addressLine1": "Adresse", diff --git a/clients/payment/src/locales/it.json b/clients/payment/src/locales/it.json index 4c7205efb..909873b1d 100644 --- a/clients/payment/src/locales/it.json +++ b/clients/payment/src/locales/it.json @@ -1,6 +1,6 @@ { "button.pay": "Paga", - "common.back": "Indietro", + "common.cancel": "Annulla", "error.pageNotFound": "Pagina non trovata", "form.invalidField": "Campo non valido", "paymentLink.addressLine1": "Indirizzo", diff --git a/clients/payment/src/locales/nl.json b/clients/payment/src/locales/nl.json index bfe8c0b04..323d2e661 100644 --- a/clients/payment/src/locales/nl.json +++ b/clients/payment/src/locales/nl.json @@ -1,6 +1,6 @@ { "button.pay": "Betalen", - "common.back": "Terug", + "common.cancel": "Annuleren", "error.pageNotFound": "Pagina niet gevonden", "form.invalidField": "Ongeldig veld", "paymentLink.addressLine1": "Adresregel", diff --git a/clients/payment/src/locales/pt.json b/clients/payment/src/locales/pt.json index a28292646..a15c3e681 100644 --- a/clients/payment/src/locales/pt.json +++ b/clients/payment/src/locales/pt.json @@ -1,6 +1,6 @@ { "button.pay": "Pagar", - "common.back": "Voltar", + "common.cancel": "Cancelar", "error.pageNotFound": "Página não encontrada", "form.invalidField": "Campo inválido", "paymentLink.addressLine1": "Endereço", diff --git a/clients/payment/src/pages/PaymentPage.tsx b/clients/payment/src/pages/PaymentPage.tsx index 4a35bad84..b9d4cf610 100644 --- a/clients/payment/src/pages/PaymentPage.tsx +++ b/clients/payment/src/pages/PaymentPage.tsx @@ -28,9 +28,6 @@ const styles = StyleSheet.create({ segmentedControl: { maxWidth: "100%", }, - // grow: { - // flexGrow: 1, - // }, }); type Props = { @@ -68,7 +65,8 @@ export const PaymentPage = ({ Option.Some({ id: distinctPaymentMethods.id, name: "Card", - icon: , + icon: , + activeIcon: , }), ) .with({ type: "SepaDirectDebitB2b" }, () => @@ -81,67 +79,73 @@ export const PaymentPage = ({ .exhaustive(), ); + if (paymentMethods[0]?.name === "Card") { + paymentMethods.reverse(); + } + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(paymentMethods[0]); return ( - <> - - - {paymentLink.label} - + + + {paymentLink.label} + - + - - {formatCurrency(Number(paymentLink.amount.value), paymentLink.amount.currency)} - + + {formatCurrency(Number(paymentLink.amount.value), paymentLink.amount.currency)} + - + - {isNotNullish(selectedPaymentMethod) && ( - ( - { - setSelectedPaymentMethod(paymentMethods.find(method => method.id === id)); - }} - /> - )} - /> - )} + {isNotNullish(selectedPaymentMethod) && ( + ( + { + setSelectedPaymentMethod(paymentMethods.find(method => method.id === id)); + }} + /> + )} + /> + )} - + - {match(selectedPaymentMethod) - .with({ name: "Card" }, ({ id }) => { - if (isNullish(env.CLIENT_CHECKOUT_API_KEY)) { - return ; - } else { - return ( - - ); - } - }) - .with({ name: "Direct Debit" }, () => ( - - )) - .otherwise(() => null)} - - + {match(selectedPaymentMethod) + .with({ name: "Card" }, ({ id }) => { + if (isNullish(env.CLIENT_CHECKOUT_API_KEY)) { + return ; + } else { + return ( + + ); + } + }) + .with({ name: "Direct Debit" }, () => ( + + )) + .otherwise(() => null)} + ); }; diff --git a/yarn.lock b/yarn.lock index 23ac2937c..372f402c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2122,10 +2122,10 @@ "@swan-io/request" "^1.0.6" ts-pattern "^5.1.0" -"@swan-io/lake@8.4.5": - version "8.4.5" - resolved "https://registry.yarnpkg.com/@swan-io/lake/-/lake-8.4.5.tgz#c951cbdf44dbd3b64e3d0e8b894d26b2281af394" - integrity sha512-W79ShLgzyeg9eh9pAs60koE61vurT7lBbgahh9A0w2dgzIXRMEk7VzcYMzmB/mniVz8RgijwMQkegUWHgSFEig== +"@swan-io/lake@8.5.2": + version "8.5.2" + resolved "https://registry.yarnpkg.com/@swan-io/lake/-/lake-8.5.2.tgz#e4a9334b395ad9ccdcc3f61e73a9552c2664dcbb" + integrity sha512-V25vDMDhUrXmaIrFjpkUYlR6WY142VqbZHIT4FeCGQECVIqmXosTlLQ1QKPkWzpopEFR74opXVJGyo7DfczMmg== dependencies: "@react-three/drei" "^9.106.0" "@react-three/fiber" "^8.16.7" @@ -2150,10 +2150,10 @@ resolved "https://registry.yarnpkg.com/@swan-io/request/-/request-1.0.6.tgz#e46c7a92d4088a484bfd60e180bd2768adb68568" integrity sha512-HirhY0gu6aZk95YGXONcmwrfwQ0u5+uZGAtwtSDmrXfCLEGubXb1qIdRMex1e65TroXnTzBG3A65M5EvUB28ZQ== -"@swan-io/shared-business@8.4.5": - version "8.4.5" - resolved "https://registry.yarnpkg.com/@swan-io/shared-business/-/shared-business-8.4.5.tgz#96f188c296a975e6beb9b32f03def861a6890be0" - integrity sha512-Eqfs6+jt1Nks2C7ho+oJpCn3kTp2auJQRjSodp1mlVRBJ175MGED8ndng5V92hbU5bVJB771FLdbCGyZq66Nww== +"@swan-io/shared-business@8.5.2": + version "8.5.2" + resolved "https://registry.yarnpkg.com/@swan-io/shared-business/-/shared-business-8.5.2.tgz#e3fa3b5e3d86ebaeda5781423182a86dd56f2765" + integrity sha512-8xboe1kN8YRC8RN5KAhMc6I534gcIzZfCSwz6TJpfkilneQO1o1EUFr45umOmI3F6ftcC4NZpHfjoMpZpAqPdA== dependencies: "@formatjs/intl" "^2.10.4" "@placekit/client-js" "^2.3.0"