dealing with dynamic fields

clients/banking/src/components/TransferInternationalWizard.tsx

@@ -9,7 +9,16 @@ import { useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { t } from "../utils/i18n";
-import { Amount, TransferInternationalWizardAmount } from "./TransferInternationalWizardAmount";
+import {
+  Amount,
+  TransferInternationalWizardAmount,
+  TransferInternationamWizardAmountSummary,
+} from "./TransferInternationalWizardAmount";
+import {
+  Beneficiary,
+  TransferInternationalWizardBeneficiary,
+} from "./TransferInternationalWizardBeneficiary";
+import { Details, TransferInternationalWizardDetails } from "./TransferInternationalWizardDetails";
 
 const styles = StyleSheet.create({
   root: {
@@ -52,19 +61,20 @@ const styles = StyleSheet.create({
   },
 });
 
-// [NC] FIXME
-type Beneficiary = string;
-
 type Step =
   | { name: "Amount"; amount?: Amount }
-  | { name: "Beneficiary"; amount: Amount; beneficiary?: Beneficiary };
+  | { name: "Beneficiary"; amount: Amount; beneficiary?: Beneficiary }
+  | { name: "Details"; amount: Amount; beneficiary: Beneficiary; details?: Details };
 
 type Props = {
   onPressClose: () => void;
   accountId: string;
   accountMembershipId: string;
 };
 
+// [NC] FIXME
+const onSave = console.log;
+
 export const TransferInternationalWizard = ({
   onPressClose,
   accountId,
@@ -121,6 +131,50 @@ export const TransferInternationalWizard = ({
                   </>
                 );
               })
+              .with({ name: "Beneficiary" }, ({ amount, beneficiary }) => {
+                return (
+                  <>
+                    <TransferInternationamWizardAmountSummary
+                      amount={amount}
+                      onPressEdit={() => setStep({ name: "Amount", amount })}
+                    />
+
+                    <Space height={24} />
+
+                    <LakeHeading level={3} variant="h3">
+                      {t("transfer.new.internationalTransfer.beneficiary.title")}
+                    </LakeHeading>
+
+                    <Space height={32} />
+
+                    <TransferInternationalWizardBeneficiary
+                      initialBeneficiary={beneficiary}
+                      amount={amount}
+                      onPressPrevious={() => setStep({ name: "Amount", amount })}
+                      onSave={beneficiary => setStep({ name: "Details", amount, beneficiary })}
+                    />
+                  </>
+                );
+              })
+              .with({ name: "Details" }, ({ amount, beneficiary, details }) => {
+                return (
+                  <>
+                    <LakeHeading level={2} variant="h3">
+                      {t("transfer.new.internationalTransfer.details.title")}
+                    </LakeHeading>
+
+                    <Space height={32} />
+
+                    <TransferInternationalWizardDetails
+                      initialDetails={details}
+                      onPressPrevious={onPressClose}
+                      onSave={details =>
+                        onSave({ name: "Beneficiary", amount, beneficiary, details })
+                      }
+                    />
+                  </>
+                );
+              })
               .otherwise(() => null)}
           </ScrollView>
         </View>

clients/banking/src/components/TransferInternationalWizardAmount.tsx

@@ -1,4 +1,6 @@
 import { AsyncData, Result } from "@swan-io/boxed";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { Fill } from "@swan-io/lake/src/components/Fill";
 import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
 import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
 import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
@@ -13,7 +15,7 @@ import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
 import { isNullish } from "@swan-io/lake/src/utils/nullish";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, View } from "react-native";
-import { useForm } from "react-ux-form";
+import { hasDefinedKeys, useForm } from "react-ux-form";
 import { P, match } from "ts-pattern";
 import {
   GetAvailableAccountBalanceDocument,
@@ -53,14 +55,12 @@ export const TransferInternationalWizardAmount = ({
     {
       query: GetInternationalCreditTransferQuoteDocument,
       variables: input ?? { value: "", currency: "" },
-      pause: !input || input?.value === "0" || Number.isNaN(Number(input?.value))
-      ,
+      pause: !input || input?.value === "0" || Number.isNaN(Number(input?.value)),
     },
     [input],
   );
 
-
-  const { Field, getFieldState, submitForm, listenFields } = useForm({
+  const { Field, submitForm, listenFields } = useForm({
     amount: {
       initialValue: initialAmount ?? {
         value: FIXED_AMOUNT_DEFAULT_VALUE,
@@ -152,7 +152,8 @@ export const TransferInternationalWizardAmount = ({
           .with(AsyncData.P.NotAsked, () => null)
           .with(AsyncData.P.Loading, () => (
             <>
-              <ActivityIndicator color={colors.gray[900]} /> <Space height={12} />
+              <ActivityIndicator color={colors.gray[900]} />
+              <Space height={12} />
             </>
           ))
           .with(
@@ -166,7 +167,7 @@ export const TransferInternationalWizardAmount = ({
                 <>
                   <LakeText color={colors.gray[700]} variant="smallRegular">
                     {formatNestedMessage("transfer.new.internationalTransfer.amount.description", {
-                      amount: `${q.sourceAmount.value} ${q.sourceAmount.currency}`,
+                      amount: formatCurrency(Number(q.sourceAmount.value), q.sourceAmount.currency),
                       rate: q.exchangeRate,
                       bold: str => (
                         <LakeText color={colors.gray[900]} variant="smallMedium">
@@ -180,7 +181,7 @@ export const TransferInternationalWizardAmount = ({
 
                   <LakeText color={colors.gray[700]} variant="smallRegular">
                     {formatNestedMessage("transfer.new.internationalTransfer.fee", {
-                      fee: `${q.feesAmount.value} ${q.feesAmount.currency}`,
+                      fee: formatCurrency(Number(q.feesAmount.value), q.feesAmount.currency),
                       bold: str => (
                         <LakeText color={colors.gray[900]} variant="smallMedium">
                           {str}
@@ -195,9 +196,10 @@ export const TransferInternationalWizardAmount = ({
 
                   <LakeText color={colors.gray[700]} variant="smallRegular">
                     {formatNestedMessage("transfer.new.internationalTransfer.amount.converted", {
-                      amount: `${(
-                        parseFloat(q.feesAmount.value) + parseFloat(q.sourceAmount.value)
-                      ).toFixed(2)} ${q.sourceAmount.currency}`,
+                      amount: formatCurrency(
+                        parseFloat(q.feesAmount.value) + parseFloat(q.sourceAmount.value),
+                        q.sourceAmount.currency,
+                      ),
                       colored: str => (
                         <LakeText color={colors.current[500]} variant="smallMedium">
                           {str}
@@ -223,7 +225,20 @@ export const TransferInternationalWizardAmount = ({
               {t("common.cancel")}
             </LakeButton>
 
-            <LakeButton color="current" onPress={() => onSave(amount)} grow={small}>
+            <LakeButton
+              color="current"
+              onPress={() =>
+                submitForm(values => {
+                  if (hasDefinedKeys(values, ["amount"])) {
+                    onSave({
+                      value: values.amount.value,
+                      currency: values.amount.currency as Currency,
+                    });
+                  }
+                })
+              }
+              grow={small}
+            >
               {t("common.continue")}
             </LakeButton>
           </LakeButtonGroup>
@@ -232,3 +247,34 @@ export const TransferInternationalWizardAmount = ({
     </View>
   );
 };
+
+type SummaryProps = {
+  amount: Amount;
+  onPressEdit: () => void;
+};
+
+export const TransferInternationamWizardAmountSummary = ({ 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")}
+          </LakeText>
+
+          <Space height={8} />
+
+          <LakeHeading level={4} variant="h4">
+            {formatCurrency(Number(amount.value), amount.currency)}
+          </LakeHeading>
+        </View>
+
+        <Fill />
+
+        <LakeButton mode="tertiary" icon="edit-regular" onPress={onPressEdit}>
+          {t("common.edit")}
+        </LakeButton>
+      </Box>
+    </Tile>
+  );
+};