Fix segmented control layout

swan-io · Jun 20, 2024 · 23d2497 · 23d2497
1 parent ba7996e
commit 23d2497
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 82 deletions.
diff --git 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
@@ -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
@@ -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
@@ -92,14 +92,14 @@ export const PaymentArea = ({ paymentLinkId }: Props) => {
  <>
  <Box direction="row" alignItems="center">
  <LakeButton
- ariaLabel={t("common.back")}
- icon="arrow-left-filled"
+ ariaLabel={t("common.cancel")}
+ icon="dismiss-regular"
  mode="tertiary"
  onPress={() => {
  window.location.replace(cancelRedirectUrl);
  }}
  >
- {desktop ? t("common.back") : null}
+ {desktop ? t("common.cancel") : null}
  </LakeButton>
 
  <Fill minWidth={16} />

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 name="lake-card" size={24} />,
+ icon: <Icon name="payment-regular" size={24} />,
+ activeIcon: <Icon name="payment-filled" size={24} />,
  }),
  )
  .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 (
- <>
- <WithPartnerAccentColor
- color={paymentLink.merchantProfile.accentColor ?? invariantColors.defaultAccentColor}
- >
- <LakeText variant="medium" align="center" color={colors.gray[700]}>
- {paymentLink.label}
- </LakeText>
+ <WithPartnerAccentColor
+ color={paymentLink.merchantProfile.accentColor ?? invariantColors.defaultAccentColor}
+ >
+ <LakeText variant="medium" align="center" color={colors.gray[700]}>
+ {paymentLink.label}
+ </LakeText>
 
-  <Space height={12} />
+ <Space height={12} />
 
-  <LakeHeading variant="h1" level={2} align="center">
-  {formatCurrency(Number(paymentLink.amount.value), paymentLink.amount.currency)}
-  </LakeHeading>
+ <LakeHeading variant="h1" level={2} align="center">
+ {formatCurrency(Number(paymentLink.amount.value), paymentLink.amount.currency)}
+ </LakeHeading>
 
-  <Space height={32} />
+ <Space height={32} />
 
- {isNotNullish(selectedPaymentMethod) && (
- <LakeLabel
- style={desktop ? styles.segmentedControlDesktop : styles.segmentedControl}
- label={t("paymentLink.paymentMethod")}
- render={() => (
- <SegmentedControl
- mode="desktop"
- selected={selectedPaymentMethod.id}
- items={paymentMethods}
- onValueChange={id => {
- setSelectedPaymentMethod(paymentMethods.find(method => method.id === id));
- }}
- />
- )}
- />
- )}
+ {isNotNullish(selectedPaymentMethod) && (
+ <LakeLabel
+ style={
+ desktop && paymentMethods.length === 1
+ ? styles.segmentedControlDesktop
+ : styles.segmentedControl
+ }
+ label={t("paymentLink.paymentMethod")}
+ render={() => (
+ <SegmentedControl
+ minItemWidth={250}
+ selected={selectedPaymentMethod.id}
+ items={paymentMethods}
+ onValueChange={id => {
+ setSelectedPaymentMethod(paymentMethods.find(method => method.id === id));
+ }}
+ />
+ )}
+ />
+ )}
 
-  <Space height={24} />
+ <Space height={24} />
 
- {match(selectedPaymentMethod)
- .with({ name: "Card" }, ({ id }) => {
- if (isNullish(env.CLIENT_CHECKOUT_API_KEY)) {
- return <ErrorView />;
- } else {
- return (
- <CardPayment
- paymentLink={paymentLink}
- paymentMethodId={id}
- publicKey={env.CLIENT_CHECKOUT_API_KEY}
- />
- );
- }
- })
- .with({ name: "Direct Debit" }, () => (
- <SddPayment
- nonEeaCountries={nonEeaCountries}
- paymentLink={paymentLink}
- setMandateUrl={setMandateUrl}
- />
- ))
- .otherwise(() => null)}
- </WithPartnerAccentColor>
- </>
+ {match(selectedPaymentMethod)
+ .with({ name: "Card" }, ({ id }) => {
+ if (isNullish(env.CLIENT_CHECKOUT_API_KEY)) {
+ return <ErrorView />;
+ } else {
+ return (
+ <CardPayment
+ paymentLink={paymentLink}
+ paymentMethodId={id}
+ publicKey={env.CLIENT_CHECKOUT_API_KEY}
+ />
+ );
+ }
+ })
+ .with({ name: "Direct Debit" }, () => (
+ <SddPayment
+ nonEeaCountries={nonEeaCountries}
+ paymentLink={paymentLink}
+ setMandateUrl={setMandateUrl}
+ />
+ ))
+ .otherwise(() => null)}
+ </WithPartnerAccentColor>
  );
 };
diff --git 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"