External Transfer

\n \n

\n {/* Source Account */}\n

\n \n From Account\n \n \n {accounts.map(account => (\n \n ))}\n \n

\n\n {/* Destination Bank */}\n

\n \n Destination Bank\n \n \n \n {banks.map(bank => (\n \n ))}\n \n

\n\n {/* Recipient Account */}\n

\n \n Recipient Account Number\n \n \n

\n\n {/* Recipient Name */}\n

\n \n Recipient Name\n \n \n

\n\n {/* Amount and Currency */}\n

\n \n Amount\n \n \n

\n \n Currency\n \n \n \n \n \n \n

\n\n {/* Description */}\n

\n \n Description (Optional)\n \n \n

\n\n \n Review Transfer\n \n \n

\n );\n\n const renderConfirmation = () => {\n const selectedBank = getSelectedBank();\n const sourceAccount = getSourceAccount();\n\n return (\n

Confirm Transfer

\n \n

\n ⚠️ Please review the details carefully. This transfer cannot be reversed once confirmed.\n

\n\n

\n From:\n \n {sourceAccount?.accountType.toUpperCase()} ****{sourceAccount?.accountNumber.slice(-4)}\n \n

\n \n

\n To Bank:\n {selectedBank?.name}\n

\n \n

\n Country:\n {selectedBank?.country}\n

\n \n

\n Account:\n {formData.toAccount}\n

\n \n

\n Recipient:\n {formData.recipientName}\n

\n \n

\n Amount:\n \n {formatCurrency(parseFloat(formData.amount), formData.currency)}\n \n

\n \n {formData.description && (\n

\n Description:\n {formData.description}\n

\n )}\n

\n\n

\n setStep('form')}\n className=\"flex-1 bg-gray-300 text-gray-700 py-3 px-4 rounded-md font-medium hover:bg-gray-400\"\n >\n Back\n \n \n {loading ? : 'Confirm Transfer'}\n \n

\n );\n };\n\n const renderResult = () => (\n

✅

Transfer Successful!

Your transfer has been processed successfully.

\n \n {transferResult && (\n

\n Reference:\n {transferResult.reference}\n

\n Amount:\n \n {formatCurrency(transferResult.amount, transferResult.currency)}\n \n

\n Recipient:\n {transferResult.recipientName}\n

\n Bank:\n {transferResult.recipientBank}\n

\n )}\n\n

\n \n Make Another Transfer\n \n \n Back to Dashboard\n \n

\n );\n\n return (\n

\n {/* Header */}\n

\n \n ←\n Back\n \n

Transfer Money

\n\n {/* Error/Success Messages */}\n {error && (\n

\n {error}\n

\n )}\n \n {success && (\n

\n {success}\n

\n )}\n\n {/* Content based on current step */}\n {step === 'form' && renderTransferForm()}\n {step === 'confirm' && renderConfirmation()}\n {step === 'result' && renderResult()}\n

\n );\n};\n\nexport default Transfers;","deleted","label",[167,168,150],"frontend","components","permalink","https://www.val.town/x/cgshaq/AccessBankMobile/code/frontend/components/Transfers.tsx","extension","actionData","errors"]