Implement Cashout V1 and Topups with bank transfer and Fygaro.

app/components/buttons/IconBtn.tsx

@@ -10,6 +10,7 @@ import QR from "@app/assets/icons/qr-code-new.svg"
 import Setting from "@app/assets/icons/setting.svg"
 import CardRemove from "@app/assets/icons/card-remove.svg"
 import Dollar from "@app/assets/icons/dollar-new.svg"
+import ArrowUpDown from "@app/assets/icons/arrow-up-down.svg"
 
 const icons = {
   up: ArrowUp,
@@ -19,6 +20,7 @@ const icons = {
   setting: Setting,
   cardRemove: CardRemove,
   dollar: Dollar,
+  upDown: ArrowUpDown,
 }
 
 type IconNamesType = keyof typeof icons

app/components/home-screen/Buttons.tsx

@@ -68,13 +68,13 @@ const Buttons: React.FC<Props> = ({ setModalVisible, setDefaultAccountModalVisib
     })
   }
 
-  // if (currentLevel === AccountLevel.Two) {
-  //   buttons.push({
-  //     title: LL.Cashout.title(),
-  //     target: "CashoutDetails",
-  //     icon: "dollar",
-  //   })
-  // }
+  if (currentLevel === AccountLevel.Two || currentLevel === AccountLevel.Three) {
+    buttons.push({
+      title: LL.HomeScreen.transfer(),
+      target: "TopupCashout",
+      icon: "upDown",
+    })
+  }
 
   return (
     <Wrapper>

app/components/cashout-flow/CashoutCard.tsx → app/components/topup-cashout-flow/CashoutCard.tsx

@@ -4,7 +4,7 @@ import { makeStyles, Text } from "@rneui/themed"
 
 type Props = {
   title: string
-  detail: string | number
+  detail?: string | number
 }
 
 const CashoutCard: React.FC<Props> = ({ title, detail }) => {

app/components/topup-cashout-flow/CashoutWithdrawTo.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react"
+import { TouchableOpacity, View } from "react-native"
+import { Icon, makeStyles, Text, useTheme } from "@rneui/themed"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { useLatestAccountUpgradeRequestQuery } from "@app/graphql/generated"
+
+const CashoutWithdrawTo: React.FC = () => {
+  const styles = useStyles()
+  const { colors } = useTheme().theme
+  const { LL } = useI18nContext()
+  const [expanded, setExpanded] = useState(false)
+
+  const { data } = useLatestAccountUpgradeRequestQuery({
+    fetchPolicy: "cache-first",
+  })
+
+  const bankAccount = data?.latestAccountUpgradeRequest.upgradeRequest?.bankAccount
+  console.log(">>>>>>>>>>>?????????", data)
+
+  if (!bankAccount) return null
+
+  const maskedAccount = `**********${String(bankAccount.accountNumber).slice(-4)}`
+
+  return (
+    <View>
+      <Text type="bl" bold>
+        {LL.Cashout.withdrawTo()}
+      </Text>
+      <TouchableOpacity
+        style={styles.card}
+        onPress={() => setExpanded(!expanded)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.header}>
+          <Text type="bl">{maskedAccount}</Text>
+          <Icon
+            name={expanded ? "chevron-down" : "chevron-forward"}
+            type="ionicon"
+            size={20}
+            color={colors.grey3}
+          />
+        </View>
+        {expanded && (
+          <View style={styles.details}>
+            <DetailRow label={LL.Cashout.bankName()} value={bankAccount.bankName} />
+            <DetailRow label={LL.Cashout.bankBranch()} value={bankAccount.bankBranch} />
+            <DetailRow
+              label={LL.Cashout.accountNumber()}
+              value={String(bankAccount.accountNumber)}
+            />
+            <DetailRow label={LL.Cashout.accountType()} value={bankAccount.accountType} />
+            <DetailRow label={LL.Cashout.currency()} value={bankAccount.currency} />
+          </View>
+        )}
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const DetailRow: React.FC<{ label: string; value: string }> = ({ label, value }) => {
+  const styles = useStyles()
+  return (
+    <View style={styles.detailRow}>
+      <Text type="bm" style={styles.detailLabel}>
+        {label}
+      </Text>
+      <Text type="bm">{value}</Text>
+    </View>
+  )
+}
+
+export default CashoutWithdrawTo
+
+const useStyles = makeStyles(({ colors }) => ({
+  card: {
+    borderRadius: 10,
+    marginTop: 5,
+    marginBottom: 15,
+    padding: 15,
+    backgroundColor: colors.grey5,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  details: {
+    marginTop: 12,
+  },
+  detailRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: 4,
+  },
+  detailLabel: {
+    color: colors.grey3,
+  },
+}))

app/components/topup-cashout-flow/TransferOptionModal.tsx

@@ -0,0 +1,109 @@
+import React from "react"
+import { Modal, TouchableOpacity, View } from "react-native"
+import { Icon, Text, makeStyles, useTheme } from "@rneui/themed"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+
+export type TransferOption = {
+  icon: string
+  title: string
+  description: string
+  onPress: () => void
+}
+
+type Props = {
+  visible: boolean
+  title: string
+  options: TransferOption[]
+  onClose: () => void
+}
+
+const TransferOptionModal: React.FC<Props> = ({ visible, title, options, onClose }) => {
+  const styles = useStyles()
+  const { colors, mode } = useTheme().theme
+  const bottom = useSafeAreaInsets().bottom
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity
+        style={[
+          styles.backdrop,
+          {
+            backgroundColor: mode === "dark" ? "rgba(57,57,57,.7)" : "rgba(0,0,0,.5)",
+          },
+        ]}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <View
+          style={[
+            styles.modalContainer,
+            { backgroundColor: colors.white, paddingBottom: bottom || 10 },
+          ]}
+        >
+          <View style={styles.modalHeader}>
+            <Text type="h01">{title}</Text>
+            <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
+              <Icon name={"close"} size={30} color={colors.black} type="ionicon" />
+            </TouchableOpacity>
+          </View>
+          {options.map((option, index) => (
+            <TouchableOpacity key={index} style={styles.optionBtn} onPress={option.onPress}>
+              <Icon type="ionicon" name={option.icon} size={30} color={colors.black} />
+              <View style={styles.optionTextWrapper}>
+                <Text type="p1">{option.title}</Text>
+                <Text type="p3" color={colors.grey2}>
+                  {option.description}
+                </Text>
+              </View>
+              <Icon type="ionicon" name={"chevron-forward"} size={20} />
+            </TouchableOpacity>
+          ))}
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  )
+}
+
+export default TransferOptionModal
+
+const useStyles = makeStyles(({ colors }) => ({
+  backdrop: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  modalContainer: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 20,
+    paddingHorizontal: 20,
+  },
+  modalHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 15,
+  },
+  closeBtn: {
+    padding: 5,
+  },
+  optionBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: colors.border01 || "#dedede",
+    marginBottom: 10,
+    paddingHorizontal: 15,
+    paddingVertical: 15,
+  },
+  optionTextWrapper: {
+    flex: 1,
+    rowGap: 3,
+    marginHorizontal: 15,
+  },
+}))

app/components/topup-cashout-flow/index.ts

@@ -0,0 +1,8 @@
+import CashoutFromWallet from "./CashoutFromWallet"
+import CashoutPercentage from "./CashoutPercentage"
+import CashoutCard from "./CashoutCard"
+import CashoutWithdrawTo from "./CashoutWithdrawTo"
+
+export { CashoutFromWallet, CashoutPercentage, CashoutCard, CashoutWithdrawTo }
+export { default as TransferOptionModal } from "./TransferOptionModal"
+export type { TransferOption } from "./TransferOptionModal"

app/graphql/front-end-mutations.ts

@@ -117,36 +117,34 @@ gql`
     }
   }
 
-  # mutation RequestCashout($input: RequestCashoutInput!) {
-  #   requestCashout(input: $input) {
-  #     errors {
-  #       code
-  #       message
-  #       path
-  #     }
-  #     offer {
-  #       exchangeRate
-  #       expiresAt
-  #       flashFee
-  #       offerId
-  #       receiveJmd
-  #       receiveUsd
-  #       send
-  #       walletId
-  #     }
-  #   }
-  # }
-
-  # mutation InitiateCashout($input: InitiateCashoutInput!) {
-  #   initiateCashout(input: $input) {
-  #     errors {
-  #       path
-  #       message
-  #       code
-  #     }
-  #     success
-  #   }
-  # }
+  mutation RequestCashout($input: RequestCashoutInput!) {
+    requestCashout(input: $input) {
+      errors {
+        code
+        message
+      }
+      offer {
+        exchangeRate
+        expiresAt
+        flashFee
+        offerId
+        receiveJmd
+        receiveUsd
+        send
+        walletId
+      }
+    }
+  }
+
+  mutation InitiateCashout($input: InitiateCashoutInput!) {
+    initiateCashout(input: $input) {
+      errors {
+        code
+        message
+      }
+      journalId
+    }
+  }
 
   mutation accountDelete {
     accountDelete {

app/graphql/generated.gql

@@ -94,6 +94,18 @@ mutation IdDocumentUploadUrlGenerate($input: IdDocumentUploadUrlGenerateInput!)
   }
 }
 
+mutation InitiateCashout($input: InitiateCashoutInput!) {
+  initiateCashout(input: $input) {
+    errors {
+      code
+      message
+      __typename
+    }
+    journalId
+    __typename
+  }
+}
+
 mutation MerchantMapSuggest($input: MerchantMapSuggestInput!) {
   merchantMapSuggest(input: $input) {
     errors {
@@ -119,6 +131,28 @@ mutation MerchantMapSuggest($input: MerchantMapSuggestInput!) {
   }
 }
 
+mutation RequestCashout($input: RequestCashoutInput!) {
+  requestCashout(input: $input) {
+    errors {
+      code
+      message
+      __typename
+    }
+    offer {
+      exchangeRate
+      expiresAt
+      flashFee
+      offerId
+      receiveJmd
+      receiveUsd
+      send
+      walletId
+      __typename
+    }
+    __typename
+  }
+}
+
 mutation accountDelete {
   accountDelete {
     errors {