wip

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 })}
                   />
                 </FullViewportLayer>
+
+                <FullViewportLayer visible={type === "international"}>
+                  <TransferInternationalWizard
+                    accountId={accountId}
+                    accountMembershipId={accountMembershipId}
+                    onPressClose={() => Router.push("AccountPaymentsNew", { accountMembershipId })}
+                  />
+                </FullViewportLayer>
               </>
             ) : (
               <NotFoundPage />

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<Step>({ name: "Amount" });
+
+  return (
+    <ResponsiveContainer style={styles.root} breakpoint={breakpoints.medium}>
+      {({ large }) => (
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <View style={[styles.headerContents, !large && styles.mobileZonePadding]}>
+              {onPressClose != null && (
+                <>
+                  <LakeButton
+                    mode="tertiary"
+                    icon="dismiss-regular"
+                    onPress={onPressClose}
+                    ariaLabel={t("common.closeButton")}
+                  />
+
+                  <Space width={large ? 32 : 8} />
+                </>
+              )}
+
+              <View style={styles.headerTitle}>
+                <LakeHeading level={2} variant="h3">
+                  {t("transfer.new.internationalTransfer.title")}
+                </LakeHeading>
+              </View>
+            </View>
+          </View>
+
+          <Separator />
+
+          <ScrollView contentContainerStyle={[styles.contents, large && styles.desktopContents]}>
+            {match(step)
+              .with({ name: "Amount" }, ({ amount }) => {
+                return (
+                  <>
+                    <LakeHeading level={2} variant="h3">
+                      {t("transfer.new.internationalTransfer.amount.title")}
+                    </LakeHeading>
+
+                    <Space height={32} />
+
+                    <TransferInternationalWizardAmount
+                      initialAmount={amount}
+                      accountMembershipId={accountMembershipId}
+                      onPressPrevious={onPressClose}
+                      onSave={amount => setStep({ name: "Beneficiary", amount })}
+                    />
+                  </>
+                );
+              })
+              .otherwise(() => null)}
+          </ScrollView>
+        </View>
+      )}
+    </ResponsiveContainer>
+  );
+};

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<Amount>(initialAmount ?? FIXED_AMOUNT_DEFAULT_VALUE);
+  const { data } = useUrqlQuery(
+    {
+      query: GetAvailableAccountBalanceDocument,
+      variables: { accountMembershipId },
+    },
+    [accountMembershipId],
+  );
+
+  return (
+    <View>
+      <Tile>
+        {match(data)
+          .with(AsyncData.P.NotAsked, AsyncData.P.Loading, () => (
+            <ActivityIndicator color={colors.gray[900]} />
+          ))
+          .with(AsyncData.P.Done(Result.P.Ok(P.select())), data => {
+            const availableBalance = data.accountMembership?.account?.balances?.available;
+            return availableBalance != null ? (
+              <View>
+                <LakeText color={colors.gray[500]} variant="smallRegular">
+                  {t("transfer.new.availableBalance")}
+                </LakeText>
+
+                <Space height={4} />
+
+                <LakeHeading level={3} variant="h1">
+                  {formatCurrency(Number(availableBalance.value), availableBalance.currency)}
+                </LakeHeading>
+
+                <Space height={12} />
+              </View>
+            ) : null;
+          })
+          .otherwise(() => (
+            <ErrorView />
+          ))}
+
+        <p>fields</p>
+      </Tile>
+
+      <Space height={32} />
+
+      <ResponsiveContainer breakpoint={800}>
+        {({ small }) => (
+          <LakeButtonGroup>
+            <LakeButton color="gray" mode="secondary" onPress={onPressPrevious}>
+              {t("common.previous")}
+            </LakeButton>
+
+            <LakeButton color="current" onPress={() => onSave(amount)} grow={small}>
+              {t("common.continue")}
+            </LakeButton>
+          </LakeButtonGroup>
+        )}
+      </ResponsiveContainer>
+    </View>
+  );
+};

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",