feat: hide transfer summary edit label on mobile

swan-io · Dec 1, 2023 · 7055033 · 7055033
1 parent 576e31e
commit 7055033
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 20 deletions.
diff --git a/clients/banking/src/components/TransferInternationalWizard.tsx b/clients/banking/src/components/TransferInternationalWizard.tsx
@@ -206,6 +206,7 @@ export const TransferInternationalWizard = ({
                 return (
                   <>
                     <TransferInternationamWizardAmountSummary
+                      isMobile={!large}
                       amount={amount}
                       onPressEdit={() => setStep({ name: "Amount", amount })}
                     />
@@ -232,6 +233,7 @@ export const TransferInternationalWizard = ({
                 return (
                   <>
                     <TransferInternationamWizardAmountSummary
+                      isMobile={!large}
                       amount={amount}
                       onPressEdit={() => setStep({ name: "Amount", amount })}
                     />

diff --git a/clients/banking/src/components/TransferInternationalWizardAmount.tsx b/clients/banking/src/components/TransferInternationalWizardAmount.tsx
@@ -246,16 +246,21 @@ export const TransferInternationalWizardAmount = ({
 
 type SummaryProps = {
   amount: Amount;
+  isMobile: boolean;
   onPressEdit: () => void;
 };
 
-export const TransferInternationamWizardAmountSummary = ({ amount, onPressEdit }: SummaryProps) => {
+export const TransferInternationamWizardAmountSummary = ({
+  isMobile,
+  amount,
+  onPressEdit,
+}: SummaryProps) => {
   return (
     <Tile selected={false}>
       <Box direction="row">
         <View>
           <LakeText color={colors.gray[500]} variant="regular">
-            {t("transfer.new.internationalTransfer.amount.summary.title")}
+            {t("transfer.new.details.summaryTitle")}
           </LakeText>
 
           <Space height={8} />
@@ -267,8 +272,13 @@ export const TransferInternationamWizardAmountSummary = ({ amount, onPressEdit }
 
         <Fill />
 
-        <LakeButton mode="tertiary" icon="edit-regular" onPress={onPressEdit}>
-          {t("common.edit")}
+        <LakeButton
+          mode="tertiary"
+          icon="edit-regular"
+          ariaLabel={t("common.edit")}
+          onPress={onPressEdit}
+        >
+          {isMobile ? null : t("common.edit")}
         </LakeButton>
       </Box>
     </Tile>

diff --git a/clients/banking/src/components/TransferRecurringWizard.tsx b/clients/banking/src/components/TransferRecurringWizard.tsx
@@ -220,6 +220,7 @@ export const TransferRecurringWizard = ({
                 return (
                   <>
                     <TransferWizardBeneficiarySummary
+                      isMobile={!large}
                       beneficiary={beneficiary}
                       onPressEdit={() => setStep({ name: "Beneficiary", beneficiary })}
                     />
@@ -240,13 +241,15 @@ export const TransferRecurringWizard = ({
                 return (
                   <>
                     <TransferWizardBeneficiarySummary
+                      isMobile={!large}
                       beneficiary={beneficiary}
                       onPressEdit={() => setStep({ name: "Beneficiary", beneficiary })}
                     />
 
                     <Space height={32} />
 
                     <TransferRecurringWizardDetailsSummary
+                      isMobile={!large}
                       details={details}
                       onPressEdit={() => setStep({ name: "Details", beneficiary, details })}
                     />

diff --git a/clients/banking/src/components/TransferRecurringWizardDetails.tsx b/clients/banking/src/components/TransferRecurringWizardDetails.tsx
@@ -471,11 +471,16 @@ export const TransferRecurringWizardDetails = ({
 };
 
 type SummaryProps = {
+  isMobile: boolean;
   details: Details;
   onPressEdit: () => void;
 };
 
-export const TransferRecurringWizardDetailsSummary = ({ details, onPressEdit }: SummaryProps) => {
+export const TransferRecurringWizardDetailsSummary = ({
+  isMobile,
+  details,
+  onPressEdit,
+}: SummaryProps) => {
   return (
     <Tile selected={false}>
       <Box direction="row">
@@ -513,8 +518,13 @@ export const TransferRecurringWizardDetailsSummary = ({ details, onPressEdit }:
           ))
           .exhaustive()}
 
-        <LakeButton mode="tertiary" icon="edit-regular" onPress={onPressEdit}>
-          {t("common.edit")}
+        <LakeButton
+          mode="tertiary"
+          icon="edit-regular"
+          ariaLabel={t("common.edit")}
+          onPress={onPressEdit}
+        >
+          {isMobile ? null : t("common.edit")}
         </LakeButton>
       </Box>
     </Tile>

diff --git a/clients/banking/src/components/TransferRegularWizard.tsx b/clients/banking/src/components/TransferRegularWizard.tsx
@@ -208,6 +208,7 @@ export const TransferRegularWizard = ({ onPressClose, accountId, accountMembersh
                 return (
                   <>
                     <TransferWizardBeneficiarySummary
+                      isMobile={!large}
                       beneficiary={beneficiary}
                       onPressEdit={() => setStep({ name: "Beneficiary", beneficiary })}
                     />
@@ -235,13 +236,15 @@ export const TransferRegularWizard = ({ onPressClose, accountId, accountMembersh
                 return (
                   <>
                     <TransferWizardBeneficiarySummary
+                      isMobile={!large}
                       beneficiary={beneficiary}
                       onPressEdit={() => setStep({ name: "Beneficiary", beneficiary })}
                     />
 
                     <Space height={32} />
 
                     <TransferRegularWizardDetailsSummary
+                      isMobile={!large}
                       details={details}
                       onPressEdit={() => setStep({ name: "Details", beneficiary, details })}
                     />

diff --git a/clients/banking/src/components/TransferRegularWizardDetails.tsx b/clients/banking/src/components/TransferRegularWizardDetails.tsx
@@ -219,10 +219,15 @@ export const TransferRegularWizardDetails = ({
 
 type SummaryProps = {
   details: Details;
+  isMobile: boolean;
   onPressEdit: () => void;
 };
 
-export const TransferRegularWizardDetailsSummary = ({ details, onPressEdit }: SummaryProps) => {
+export const TransferRegularWizardDetailsSummary = ({
+  isMobile,
+  details,
+  onPressEdit,
+}: SummaryProps) => {
   return (
     <Tile selected={false}>
       <Box direction="row">
@@ -238,8 +243,13 @@ export const TransferRegularWizardDetailsSummary = ({ details, onPressEdit }: Su
           </LakeHeading>
         </View>
 
-        <LakeButton mode="tertiary" icon="edit-regular" onPress={onPressEdit}>
-          {t("common.edit")}
+        <LakeButton
+          mode="tertiary"
+          icon="edit-regular"
+          ariaLabel={t("common.edit")}
+          onPress={onPressEdit}
+        >
+          {isMobile ? null : t("common.edit")}
         </LakeButton>
       </Box>
     </Tile>

diff --git a/clients/banking/src/components/TransferWizardBeneficiary.tsx b/clients/banking/src/components/TransferWizardBeneficiary.tsx
@@ -184,10 +184,15 @@ export const TransferWizardBeneficiary = ({ initialBeneficiary, onSave }: Props)
 
 type SummaryProps = {
   beneficiary: Beneficiary;
+  isMobile: boolean;
   onPressEdit: () => void;
 };
 
-export const TransferWizardBeneficiarySummary = ({ beneficiary, onPressEdit }: SummaryProps) => {
+export const TransferWizardBeneficiarySummary = ({
+  isMobile,
+  beneficiary,
+  onPressEdit,
+}: SummaryProps) => {
   return (
     <Tile selected={false}>
       <Box direction="row">
@@ -207,8 +212,13 @@ export const TransferWizardBeneficiarySummary = ({ beneficiary, onPressEdit }: S
           </LakeText>
         </View>
 
-        <LakeButton mode="tertiary" icon="edit-regular" onPress={onPressEdit}>
-          {t("common.edit")}
+        <LakeButton
+          mode="tertiary"
+          icon="edit-regular"
+          ariaLabel={t("common.edit")}
+          onPress={onPressEdit}
+        >
+          {isMobile ? null : t("common.edit")}
         </LakeButton>
       </Box>
     </Tile>

diff --git a/clients/banking/src/locales/de.json b/clients/banking/src/locales/de.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Sie senden genau <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Gesamtbetrag, den wir in <bold>{amount}</bold> umrechnen (Wechselkurs {rate})",
   "transfer.new.internationalTransfer.amount.label": "Empfänger erhält",
-  "transfer.new.internationalTransfer.amount.summary.title": "Sie senden",
   "transfer.new.internationalTransfer.amount.title": "Geben Sie Details zu Ihrer Überweisung ein",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "Der Wert entspricht nicht dem erwarteten Muster",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "Der Wert entspricht nicht dem erwarteten Muster (Beispiel: {example})",

diff --git a/clients/banking/src/locales/en.json b/clients/banking/src/locales/en.json
@@ -729,7 +729,6 @@
   "transfer.new.sendRegularTransfer.description": "You will send a regular standing order",
   "transfer.new.internationalTransfer.title": "New international transfer",
   "transfer.new.internationalTransfer.amount.title": "Enter details about your transfer",
-  "transfer.new.internationalTransfer.amount.summary.title": "You're sending",
   "transfer.new.internationalTransfer.amount.label": "Beneficiary gets",
   "transfer.new.internationalTransfer.amount.description": "Total amount we'll convert <bold>{amount}</bold> (Exchange rate {rate})",
   "transfer.new.internationalTransfer.fee": "Transfer fee <bold>{fee}</bold>",

diff --git a/clients/banking/src/locales/es.json b/clients/banking/src/locales/es.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Estás enviando exactamente <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Cantidad total que convertiremos <bold>{amount}</bold> (Tipo de cambio {rate})",
   "transfer.new.internationalTransfer.amount.label": "El beneficiario recibe",
-  "transfer.new.internationalTransfer.amount.summary.title": "Estás enviando",
   "transfer.new.internationalTransfer.amount.title": "Introduce los detalles de tu transferencia",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "El valor no coincide con el formato esperado",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "El valor no coincide con el formato esperado (ejemplo: {example})",

diff --git a/clients/banking/src/locales/fr.json b/clients/banking/src/locales/fr.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Vous envoyez exactement <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Montant total que nous convertirons <bold>{amount}</bold> (Taux de change {rate})",
   "transfer.new.internationalTransfer.amount.label": "Le bénéficiaire reçoit",
-  "transfer.new.internationalTransfer.amount.summary.title": "Vous envoyez",
   "transfer.new.internationalTransfer.amount.title": "Entrez les détails de votre virement",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "La valeur ne correspond pas au format attendu",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "La valeur ne correspond pas au format attendu (exemple : {example})",

diff --git a/clients/banking/src/locales/it.json b/clients/banking/src/locales/it.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Invii esattamente <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Importo totale che convertiremo <bold>{amount}</bold> (Tasso di cambio {rate})",
   "transfer.new.internationalTransfer.amount.label": "Beneficiario riceve",
-  "transfer.new.internationalTransfer.amount.summary.title": "Stai inviando",
   "transfer.new.internationalTransfer.amount.title": "Inserisci i dettagli del tuo bonifico",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "Il valore non corrisponde al pattern atteso",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "Il valore non corrisponde al pattern atteso (esempio: {example})",

diff --git a/clients/banking/src/locales/nl.json b/clients/banking/src/locales/nl.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Je stuurt precies <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Totaalbedrag dat we omrekenen: <bold>{amount}</bold> (Wisselkoers: {rate})",
   "transfer.new.internationalTransfer.amount.label": "Begunstigde ontvangt",
-  "transfer.new.internationalTransfer.amount.summary.title": "Je stuurt",
   "transfer.new.internationalTransfer.amount.title": "Geef details over je overschrijving",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "De waarde komt niet overeen met het verwachte patroon",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "De waarde komt niet overeen met het verwachte patroon (bijvoorbeeld: {example})",

diff --git a/clients/banking/src/locales/pt.json b/clients/banking/src/locales/pt.json
@@ -705,7 +705,6 @@
   "transfer.new.internationalTransfer.amount.converted": "Você envia exatamente <colored>{amount}</colored>",
   "transfer.new.internationalTransfer.amount.description": "Valor total a ser convertido <bold>{amount}</bold> (Taxa de câmbio {rate})",
   "transfer.new.internationalTransfer.amount.label": "Beneficiário recebe",
-  "transfer.new.internationalTransfer.amount.summary.title": "Você está enviando",
   "transfer.new.internationalTransfer.amount.title": "Insira os detalhes sobre a sua transferência",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid": "O valor não corresponde ao padrão esperado",
   "transfer.new.internationalTransfer.beneficiary.form.field.invalid.example": "O valor não corresponde ao padrão esperado (exemplo: {example})",