diff --git a/clients/banking/src/components/TransferArea.tsx b/clients/banking/src/components/TransferArea.tsx
index f84cd9f83..1ed8ac423 100644
--- a/clients/banking/src/components/TransferArea.tsx
+++ b/clients/banking/src/components/TransferArea.tsx
@@ -12,6 +12,7 @@ import { t } from "../utils/i18n";
import { paymentRoutes, Router } from "../utils/routes";
import { TransferRecurringWizard } from "./TransferRecurringWizard";
import { TransferRegularWizard } from "./TransferRegularWizard";
+import { TransferInternationalWizard } from "./TransferInternationalWizard";
import { TransferTypePicker } from "./TransferTypePicker";
type Props = {
@@ -83,6 +84,14 @@ export const TransferArea = ({
onPressClose={() => Router.push("AccountPaymentsNew", { accountMembershipId })}
/>
+
+
+ Router.push("AccountPaymentsNew", { accountMembershipId })}
+ />
+
>
) : (
diff --git a/clients/banking/src/components/TransferInternationalWizard.tsx b/clients/banking/src/components/TransferInternationalWizard.tsx
new file mode 100644
index 000000000..d1662cd09
--- /dev/null
+++ b/clients/banking/src/components/TransferInternationalWizard.tsx
@@ -0,0 +1,130 @@
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
+import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
+import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveContainer";
+import { Separator } from "@swan-io/lake/src/components/Separator";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
+import { breakpoints, spacings } from "@swan-io/lake/src/constants/design";
+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";
+
+const styles = StyleSheet.create({
+ root: {
+ ...commonStyles.fill,
+ },
+ container: {
+ ...commonStyles.fill,
+ },
+ header: {
+ paddingVertical: spacings[12],
+ },
+ headerContents: {
+ flexDirection: "row",
+ alignItems: "center",
+ width: "100%",
+ maxWidth: 1336,
+ marginHorizontal: "auto",
+ paddingHorizontal: spacings[96],
+ },
+ headerTitle: {
+ ...commonStyles.fill,
+ },
+ mobileZonePadding: {
+ paddingHorizontal: spacings[24],
+ flexGrow: 1,
+ },
+ contents: {
+ flexShrink: 1,
+ flexGrow: 1,
+ marginHorizontal: "auto",
+ maxWidth: 1172,
+ paddingHorizontal: spacings[24],
+ paddingVertical: spacings[24],
+ width: "100%",
+ },
+ desktopContents: {
+ marginVertical: "auto",
+ paddingHorizontal: spacings[96],
+ paddingVertical: spacings[24],
+ },
+});
+
+// [NC] FIXME
+type Beneficiary = string;
+
+type Step =
+ | { name: "Amount"; amount?: Amount }
+ | { name: "Beneficiary"; amount: Amount; beneficiary?: Beneficiary };
+
+type Props = {
+ onPressClose: () => void;
+ accountId: string;
+ accountMembershipId: string;
+};
+
+export const TransferInternationalWizard = ({
+ onPressClose,
+ accountId,
+ accountMembershipId,
+}: Props) => {
+ const [step, setStep] = useState({ name: "Amount" });
+
+ return (
+
+ {({ large }) => (
+
+
+
+ {onPressClose != null && (
+ <>
+
+
+
+ >
+ )}
+
+
+
+ {t("transfer.new.internationalTransfer.title")}
+
+
+
+
+
+
+
+
+ {match(step)
+ .with({ name: "Amount" }, ({ amount }) => {
+ return (
+ <>
+
+ {t("transfer.new.internationalTransfer.amount.title")}
+
+
+
+
+ setStep({ name: "Beneficiary", amount })}
+ />
+ >
+ );
+ })
+ .otherwise(() => null)}
+
+
+ )}
+
+ );
+};
diff --git a/clients/banking/src/components/TransferInternationalWizardAmount.tsx b/clients/banking/src/components/TransferInternationalWizardAmount.tsx
new file mode 100644
index 000000000..c854c795c
--- /dev/null
+++ b/clients/banking/src/components/TransferInternationalWizardAmount.tsx
@@ -0,0 +1,92 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
+import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveContainer";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { Tile } from "@swan-io/lake/src/components/Tile";
+import { colors } from "@swan-io/lake/src/constants/design";
+import { useUrqlQuery } from "@swan-io/lake/src/hooks/useUrqlQuery";
+import { useState } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { P, match } from "ts-pattern";
+import { GetAvailableAccountBalanceDocument } from "../graphql/partner";
+import { formatCurrency, t } from "../utils/i18n";
+import { ErrorView } from "./ErrorView";
+
+export type Amount = number;
+
+const FIXED_AMOUNT_DEFAULT_VALUE = 0;
+
+type Props = {
+ initialAmount?: Amount;
+ onPressPrevious: () => void;
+ onSave: (amount: Amount) => void;
+ accountMembershipId: string;
+};
+
+export const TransferInternationalWizardAmount = ({
+ initialAmount,
+ onPressPrevious,
+ accountMembershipId,
+ onSave,
+}: Props) => {
+ const [amount, setAmount] = useState(initialAmount ?? FIXED_AMOUNT_DEFAULT_VALUE);
+ const { data } = useUrqlQuery(
+ {
+ query: GetAvailableAccountBalanceDocument,
+ variables: { accountMembershipId },
+ },
+ [accountMembershipId],
+ );
+
+ return (
+
+
+ {match(data)
+ .with(AsyncData.P.NotAsked, AsyncData.P.Loading, () => (
+
+ ))
+ .with(AsyncData.P.Done(Result.P.Ok(P.select())), data => {
+ const availableBalance = data.accountMembership?.account?.balances?.available;
+ return availableBalance != null ? (
+
+
+ {t("transfer.new.availableBalance")}
+
+
+
+
+
+ {formatCurrency(Number(availableBalance.value), availableBalance.currency)}
+
+
+
+
+ ) : null;
+ })
+ .otherwise(() => (
+
+ ))}
+
+ fields
+
+
+
+
+
+ {({ small }) => (
+
+
+ {t("common.previous")}
+
+
+ onSave(amount)} grow={small}>
+ {t("common.continue")}
+
+
+ )}
+
+
+ );
+};
diff --git a/clients/banking/src/locales/en.json b/clients/banking/src/locales/en.json
index 581b1c922..41b7c97aa 100644
--- a/clients/banking/src/locales/en.json
+++ b/clients/banking/src/locales/en.json
@@ -721,6 +721,10 @@
"transfer.new.sendFullBalance.description": "Choose how much to leave in your account, and transfer the rest to your beneficiary",
"transfer.new.sendRegularTransfer": "Send a regular standing order instead",
"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.title": "New transfer",
"transfer.newRecurringTransfer": "New standing order",
"transfer.newTransfer": "New transfer",