-
- );
-};
-
diff --git a/src/components/checkout/CheckoutFlow.tsx b/src/components/checkout/CheckoutFlow.tsx
index 9ff3c57..5e0f9cc 100644
--- a/src/components/checkout/CheckoutFlow.tsx
+++ b/src/components/checkout/CheckoutFlow.tsx
@@ -1,163 +1,89 @@
-import React from 'react';
+import React, { useState } from 'react';
import { useCheckout } from '../../contexts/CheckoutContext';
-import { FundRequestForm } from './FundRequestForm';
-import { AccountSelection } from './AccountSelection';
-import { TransactionConfirmation } from './TransactionConfirmation';
-import { TransactionStatus } from './TransactionStatus';
-import { PromotionalPanel } from './PromotionalPanel';
-import { FiCheck } from 'react-icons/fi';
+import { RequesterDetails } from './RequesterDetails';
+import { CheckoutPage } from './CheckoutPage';
+import { Loading } from '../ui/Loading';
export const CheckoutFlow: React.FC = () => {
const {
- currentStep,
+ requester,
+ selectedRecipientAccountId,
+ selectedRecipientAccount,
fundRequest,
- selectedAccountType,
- transaction,
- isLoading,
- error,
- setFundRequest,
- setAccountType,
- submitTransaction,
- reset,
- goToStep,
+ transactionFee,
+ setSelectedRecipientAccountId,
+ submitPayment,
} = useCheckout();
- const handleFundRequestSubmit = (data: any) => {
- setFundRequest(data);
- goToStep(2);
+ const [showCheckout, setShowCheckout] = useState(false);
+
+ const handleAccountSelect = (accountId: string) => {
+ setSelectedRecipientAccountId(accountId);
};
- const handleAccountSelect = (accountType: 'business' | 'personal') => {
- setAccountType(accountType);
+ const handleNext = () => {
+ // Ensure an account is selected before proceeding
+ if (!selectedRecipientAccountId && requester?.bankAccounts && requester.bankAccounts.length > 0) {
+ const defaultAccount = requester.bankAccounts.find(acc => acc.isDefault) || requester.bankAccounts[0];
+ if (defaultAccount) {
+ setSelectedRecipientAccountId(defaultAccount.id);
+ }
+ }
+
+ // Proceed to checkout page
+ setShowCheckout(true);
};
- const handleConfirm = async () => {
- await submitTransaction();
+ const handlePaymentComplete = async () => {
+ await submitPayment();
};
- const handleCancel = () => {
- goToStep(1);
- };
+ if (!requester) {
+ return
-
-
-
-
-
-
-
-
-
-
- - Choose your account type -
-- It is a long established fact that a reader will be distracted by the readable content of a page -
-
- onSelect('business')}
- className="p-6"
- >
-
-
- onSelect('personal')}
- className="p-6"
- >
-
-
-
- {selectedAccountType && onNext && (
-
-
-
-
-
-
-
-
- Business
-Search or find a home
-
-
-
-
-
-
-
-
- Personal
-Post or share your home
-
-
-
- )}
-
- {
+ // Handle flagging - in real app, this would call an API
+ console.log('Flagged user:', requester.id, 'Reason:', reason);
+ alert(`User has been reported. Reason: ${reason === 'spam' ? 'Spam or suspicious activity' : reason === 'unknown' ? "I don't know this person" : 'Other'}`);
+ }}
+ />
);
};
diff --git a/src/components/checkout/CheckoutPage.tsx b/src/components/checkout/CheckoutPage.tsx
new file mode 100644
index 0000000..34f1094
--- /dev/null
+++ b/src/components/checkout/CheckoutPage.tsx
@@ -0,0 +1,633 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { Input } from '../ui/Input';
+import { Card } from '../ui/Card';
+import { Logo } from '../ui/Logo';
+import { DonationSection } from './DonationSection';
+import { FiLock, FiArrowLeft, FiEye, FiEyeOff, FiInfo, FiShield, FiCheck, FiCreditCard } from 'react-icons/fi';
+
+interface CheckoutFormData {
+ email: string;
+ cardNumber: string;
+ expiryDate: string;
+ cvv: string;
+ cardName: string;
+ address: string;
+ agreeToTerms: boolean;
+ saveInfo: boolean;
+}
+
+interface CheckoutPageProps {
+ requester: {
+ name: string;
+ requestAmount: number;
+ description?: string;
+ };
+ selectedAccount: {
+ bankName: string;
+ accountNumber: string;
+ };
+ transactionFee: number;
+ onComplete: () => void;
+}
+
+export const CheckoutPage: React.FC = ({
+ requester,
+ selectedAccount,
+ transactionFee,
+ onComplete,
+}) => {
+ const [cardNumber, setCardNumber] = useState('');
+ const [showCardNumber, setShowCardNumber] = useState(false);
+ const [donationAmount, setDonationAmount] = useState(0);
+ const [referralCode, setReferralCode] = useState('');
+ const [paymentMethod, setPaymentMethod] = useState<'card' | 'googlepay' | 'applepay'>('card');
+ const navigate = useNavigate();
+
+ const [isProcessing, setIsProcessing] = useState(false);
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ defaultValues: {
+ email: '',
+ cardNumber: '',
+ expiryDate: '',
+ cvv: '',
+ cardName: '',
+ address: '',
+ agreeToTerms: false,
+ },
+ });
+
+ const formatCurrency = (amount: number) => {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(amount);
+ };
+
+ const subtotal = requester.requestAmount;
+ const total = subtotal + transactionFee + donationAmount;
+
+ const onSubmit = async (data: CheckoutFormData) => {
+ // Simulate payment processing
+ await new Promise(resolve => setTimeout(resolve, 1500));
+ // Navigate to success page with email and transaction details
+ const transactionId = `TXN-${Date.now()}`;
+ const totalAmount = subtotal + transactionFee + donationAmount;
+ navigate(`/success?email=${encodeURIComponent(data.email)}&amount=${totalAmount}&transactionId=${transactionId}`);
+ onComplete();
+ };
+
+ const emailValue = watch('email');
+
+ const handleGooglePay = async () => {
+ if (!emailValue) {
+ return;
+ }
+ setIsProcessing(true);
+ try {
+ // Simulate Google Pay processing
+ await new Promise(resolve => setTimeout(resolve, 1500));
+ const transactionId = `TXN-${Date.now()}`;
+ const totalAmount = subtotal + transactionFee + donationAmount;
+ // In real app, get email from Google Pay response
+ navigate(`/success?email=${encodeURIComponent(emailValue)}&amount=${totalAmount}&transactionId=${transactionId}`);
+ onComplete();
+ } finally {
+ setIsProcessing(false);
+ }
+ };
+
+ const handleApplePay = async () => {
+ if (!emailValue) {
+ return;
+ }
+ setIsProcessing(true);
+ try {
+ // Simulate Apple Pay processing
+ await new Promise(resolve => setTimeout(resolve, 1500));
+ const transactionId = `TXN-${Date.now()}`;
+ const totalAmount = subtotal + transactionFee + donationAmount;
+ // In real app, get email from Apple Pay response
+ navigate(`/success?email=${encodeURIComponent(emailValue)}&amount=${totalAmount}&transactionId=${transactionId}`);
+ onComplete();
+ } finally {
+ setIsProcessing(false);
+ }
+ };
+
+ const formatCardNumber = (value: string) => {
+ const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
+ const matches = v.match(/\d{4,16}/g);
+ const match = (matches && matches[0]) || '';
+ const parts = [];
+ for (let i = 0, len = match.length; i < len; i += 4) {
+ parts.push(match.substring(i, i + 4));
+ }
+ if (parts.length) {
+ return parts.join(' ');
+ } else {
+ return v;
+ }
+ };
+
+ const getCardBrand = (cardNumber: string) => {
+ const number = cardNumber.replace(/\s/g, '');
+ if (/^4/.test(number)) return 'visa';
+ if (/^5[1-5]/.test(number)) return 'mastercard';
+ if (/^3[47]/.test(number)) return 'amex';
+ return null;
+ };
+
+ return (
+ = ({
+ onDonationChange,
+}) => {
+ const [donationAmount, setDonationAmount] = useState("");
+ const [selectedCause, setSelectedCause] = useState(
+ null
+ );
+ const scrollContainerRef = useRef(null);
+ const [showLeftButton, setShowLeftButton] = useState(false);
+ const [showRightButton, setShowRightButton] = useState(true);
+
+ const handleAmountChange = (value: string) => {
+ setDonationAmount(value);
+ const amount = parseFloat(value) || 0;
+ onDonationChange(amount, selectedCause?.id);
+ };
+
+ const handleCauseSelect = (cause: DonationCause | null) => {
+ setSelectedCause(cause);
+ const amount = parseFloat(donationAmount) || 0;
+ onDonationChange(amount, cause?.id);
+ };
+
+ const checkScrollButtons = () => {
+ if (scrollContainerRef.current) {
+ const { scrollLeft, scrollWidth, clientWidth } =
+ scrollContainerRef.current;
+ setShowLeftButton(scrollLeft > 0);
+ setShowRightButton(scrollLeft < scrollWidth - clientWidth - 10);
+ }
+ };
+
+ useEffect(() => {
+ checkScrollButtons();
+ const container = scrollContainerRef.current;
+ if (container) {
+ container.addEventListener("scroll", checkScrollButtons);
+ window.addEventListener("resize", checkScrollButtons);
+ return () => {
+ container.removeEventListener("scroll", checkScrollButtons);
+ window.removeEventListener("resize", checkScrollButtons);
+ };
+ }
+ }, []);
+
+ const scrollLeft = () => {
+ if (scrollContainerRef.current) {
+ const cardWidth =
+ scrollContainerRef.current.querySelector('div[style*="width"]')
+ ?.clientWidth || 250;
+ scrollContainerRef.current.scrollBy({
+ left: -(cardWidth + 12),
+ behavior: "smooth",
+ });
+ }
+ };
+
+ const scrollRight = () => {
+ if (scrollContainerRef.current) {
+ const cardWidth =
+ scrollContainerRef.current.querySelector('div[style*="width"]')
+ ?.clientWidth || 250;
+ scrollContainerRef.current.scrollBy({
+ left: cardWidth + 12,
+ behavior: "smooth",
+ });
+ }
+ };
+
+ // Add "None" option to causes
+ const allCauses = [
+ { id: "none", name: "None", description: "No donation", category: "None" },
+ ...mockCauses,
+ ];
+
+ return (
+ ;
-}
-
-export const FundRequestForm: React.FC = ({
- onSubmit,
- initialData,
-}) => {
- const {
- register,
- handleSubmit,
- formState: { errors, isSubmitting },
- } = useForm({
- defaultValues: initialData,
- });
-
- return (
-
- {/* Progress Indicator - Hidden on account selection step to match design */}
- {currentStep !== 2 && (
-
+
-
-
- {steps.map((step, index) => (
-
-
- )}
-
- {/* Error Display */}
- {error && (
-
-
- {index < steps.length - 1 && (
- step.number
- ? 'bg-primary-500 text-white'
- : currentStep === step.number
- ? 'bg-primary-500 text-white ring-4 ring-primary-200'
- : 'bg-gray-200 text-gray-600'
- }
- `}
- >
- {currentStep > step.number ? (
-
- = step.number
- ? 'text-primary-600'
- : 'text-gray-500'
- }
- `}
- >
- {step.label}
-
- step.number
- ? 'bg-primary-500'
- : 'bg-gray-200'
- }
- `}
- />
- )}
-
- ))}
-
-
-
- )}
-
- {/* Step Content */}
- {currentStep === 2 ? (
- {error}
-
-
- ) : (
-
-
-
- goToStep(3)}
- />
-
-
- {currentStep === 1 && (
-
- )}
-
+
+ );
+};
+
diff --git a/src/components/checkout/DonationSection.tsx b/src/components/checkout/DonationSection.tsx
new file mode 100644
index 0000000..4cd8be8
--- /dev/null
+++ b/src/components/checkout/DonationSection.tsx
@@ -0,0 +1,216 @@
+import React, { useState, useRef, useEffect } from "react";
+import { FiHeart, FiX, FiChevronLeft, FiChevronRight } from "react-icons/fi";
+
+interface DonationCause {
+ id: string;
+ name: string;
+ description: string;
+ image?: string;
+ category: string;
+}
+
+interface DonationSectionProps {
+ onDonationChange: (amount: number, causeId?: string) => void;
+}
+
+const mockCauses: DonationCause[] = [
+ {
+ id: "1",
+ name: "Education for All",
+ description: "Supporting children's education in underserved communities",
+ category: "Education",
+ },
+ {
+ id: "2",
+ name: "Clean Water Initiative",
+ description: "Providing access to clean drinking water",
+ category: "Health",
+ },
+ {
+ id: "3",
+ name: "Wildlife Conservation",
+ description: "Protecting endangered species and their habitats",
+ category: "Environment",
+ },
+ {
+ id: "4",
+ name: "Medical Relief",
+ description: "Emergency medical assistance for those in need",
+ category: "Health",
+ },
+];
+
+export const DonationSection: React.FC
+ {/* Left Column - Order Summary (Dark Green) - Takes more space */}
+
+
+
+
+
+ {/* Right Column - Payment Form (Light Gray) */}
+
+ {/* Back Button & Logo */}
+
+
+
+
+
+ {/* Transaction Title */}
+
+
+
+ {/* Main Price Display */}
+ + Payment to {requester.name} +
++ Complete your payment to proceed +
+
+
+
+ {/* Selected Plan/Transaction Box */}
+
+
+ ${Math.floor(total)}
+
+
+ .{((total % 1) * 100).toFixed(0).padStart(2, '0')}
+
+
+ Total amount
+
+
+
+
+
+ {/* Order Summary */}
+
+
+
+
+ + {requester.name} - Payment Request +
++ {selectedAccount.bankName} • {selectedAccount.accountNumber} +
++ {formatCurrency(subtotal)} +
+
+
+
+ {/* Footer */}
+ Order Summary
+ +
+
+
+ {/* Referral Code Input */}
+
+ Subtotal
+ {formatCurrency(subtotal)}
+
+
+ Transaction Fee
+ {formatCurrency(transactionFee)}
+
+ {donationAmount > 0 && (
+
+ Donation
+ {formatCurrency(donationAmount)}
+
+ )}
+
+
+ setReferralCode(e.target.value)}
+ className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-primary-200 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/40"
+ />
+
+
+ {/* Total Due */}
+
+ Total due today
+
+ {formatCurrency(total)}
+
+
+
+
+ + ©2023 All rights reserved +
+
+
+ Terms
+
+
+ Privacy
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/checkout/FundRequestForm.tsx b/src/components/checkout/FundRequestForm.tsx
deleted file mode 100644
index 2f37ce8..0000000
--- a/src/components/checkout/FundRequestForm.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-import { Input } from '../ui/Input';
-import { Button } from '../ui/Button';
-import type { FundRequest } from '../../types';
-
-interface FundRequestFormProps {
- onSubmit: (data: FundRequest) => void;
- initialData?: Partial
+
+ handleAmountChange(e.target.value)}
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 mb-4"
+ />
+
+
+
+
+
+
+ {/* Left Scroll Button */}
+ {showLeftButton && (
+
+ )}
+
+ {/* Scrollable Container */}
+
+
+
+
+ {/* Right Scroll Button */}
+ {showRightButton && (
+
+ )}
+
+ {allCauses.map((cause) => (
+
+
+ handleCauseSelect(cause.id === "none" ? null : cause)
+ }
+ className={`p-3 cursor-pointer transition-colors flex-shrink-0 border rounded-lg ${
+ selectedCause?.id === cause.id ||
+ (cause.id === "none" && selectedCause === null)
+ ? "border-primary-500 border-2 bg-primary-50"
+ : "border-gray-200 hover:border-primary-300 bg-white"
+ }`}
+ style={{
+ width: "calc(50vw - 2rem)",
+ minWidth: "200px",
+ maxWidth: "250px",
+ }}
+ >
+
+ ))}
+
+
+
+ {cause.id === "none" ? (
+
+
+
+ + {cause.name} +
++ {cause.description} +
+
-
- );
-};
-
diff --git a/src/components/checkout/PromotionalPanel.tsx b/src/components/checkout/PromotionalPanel.tsx
index f061544..4a8ba4b 100644
--- a/src/components/checkout/PromotionalPanel.tsx
+++ b/src/components/checkout/PromotionalPanel.tsx
@@ -1,28 +1,93 @@
import React from 'react';
+import { Logo } from '../ui/Logo';
+import { FiFacebook, FiTwitter, FiInstagram, FiLinkedin, FiSmartphone } from 'react-icons/fi';
export const PromotionalPanel: React.FC = () => {
return (
-
-
-
-
- - Request Funds Transfer -
-- Enter the details for the funds you want to transfer -
-
-
-
-
-
- sanswap
-
+
+
+ = ({
+ requester,
+ recipientAccounts,
+ selectedAccountId,
+ onSelectAccount,
+ onNext,
+ onFlag,
+}) => {
+ const [showFlagModal, setShowFlagModal] = useState(false);
+ const [flagReason, setFlagReason] = useState("");
+ const [showLanguageMenu, setShowLanguageMenu] = useState(false);
+ const [selectedLanguage, setSelectedLanguage] = useState("English");
+
+ const languages = [
+ { code: "en", name: "English" },
+ { code: "fr", name: "French" },
+ { code: "am", name: "Amharic" },
+ { code: "om", name: "Oromo" },
+ { code: "ti", name: "Tigrinya" },
+ ];
+ const formatCurrency = (amount: number) => {
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(amount);
+ };
+
+ // Auto-select first account if none selected and accounts exist
+ useEffect(() => {
+ if (!selectedAccountId && recipientAccounts.length > 0) {
+ const defaultAccount =
+ recipientAccounts.find((acc) => acc.isDefault) || recipientAccounts[0];
+ if (defaultAccount) {
+ onSelectAccount(defaultAccount.id);
+ }
+ }
+ }, [selectedAccountId, recipientAccounts]);
+
+ return (
+
+
);
diff --git a/src/components/checkout/RequesterDetails.tsx b/src/components/checkout/RequesterDetails.tsx
new file mode 100644
index 0000000..bfadf3d
--- /dev/null
+++ b/src/components/checkout/RequesterDetails.tsx
@@ -0,0 +1,396 @@
+import React, { useEffect, useState } from "react";
+import { Card } from "../ui/Card";
+import { PromotionalPanel } from "./PromotionalPanel";
+import type { RecipientBankAccount } from "../../types";
+import {
+ FiBriefcase,
+ FiUser,
+ FiCreditCard,
+ FiFlag,
+ FiGlobe,
+ FiChevronDown,
+} from "react-icons/fi";
+
+interface RequesterDetailsProps {
+ requester: {
+ id: string;
+ name: string;
+ email: string;
+ phone?: string;
+ requestAmount: number;
+ description?: string;
+ };
+ recipientAccounts: RecipientBankAccount[];
+ selectedAccountId?: string;
+ onSelectAccount: (accountId: string) => void;
+ onNext: () => void;
+ onFlag?: (reason: string) => void;
+}
+
+export const RequesterDetails: React.FC
+
-
-
+
-
+
+
Start searching for homes or posting ads now.
-
+
Interfaces are well designed for all ages and target audiences are extremely simple and work with social media integrations
-
Start searching for homes or posting ads now.
-+
Interfaces are well designed for all ages and target audiences are extremely simple and work with social media integrations
+ = ({
+ transactionId,
+ amount,
+ email,
+}) => {
+ const [emailSent, setEmailSent] = useState(false);
+ const navigate = useNavigate();
+
+ const formatCurrency = (amount: number) => {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(amount);
+ };
+
+ const handleSendEmail = async () => {
+ // Simulate sending email
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ setEmailSent(true);
+ // In real app, this would call an API to send the download link via email
+ console.log('Sending download link to:', email);
+ };
+
+ const handleDownloadIOS = () => {
+ // In real app, this would redirect to App Store
+ window.open('https://apps.apple.com/app/amba', '_blank');
+ };
+
+ const handleDownloadAndroid = () => {
+ // In real app, this would redirect to Google Play Store
+ window.open('https://play.google.com/store/apps/details?id=com.amba', '_blank');
+ };
+
+ return (
+ = ({
- transactionData,
- onConfirm,
- onCancel,
- isLoading = false,
-}) => {
- const formatCurrency = (amount: number) => {
- return new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: 'USD',
- }).format(amount);
- };
-
- return (
- = ({
- transaction,
- onNewTransaction,
-}) => {
- const formatCurrency = (amount: number) => {
- return new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: 'USD',
- }).format(amount);
- };
-
- const getStatusConfig = () => {
- switch (transaction.status) {
- case 'approved':
- return {
- icon: FiCheckCircle,
- title: 'Transaction Approved',
- message: 'Your transaction has been successfully processed and approved.',
- color: 'text-green-600',
- bgColor: 'bg-green-50',
- borderColor: 'border-green-200',
- iconColor: 'text-green-600',
- };
- case 'rejected':
- return {
- icon: FiXCircle,
- title: 'Transaction Rejected',
- message: transaction.rejectionReason || 'Your transaction has been flagged as suspicious and rejected.',
- color: 'text-red-600',
- bgColor: 'bg-red-50',
- borderColor: 'border-red-200',
- iconColor: 'text-red-600',
- };
- case 'suspicious':
- return {
- icon: FiAlertCircle,
- title: 'Under Review',
- message: 'Your transaction is being reviewed for suspicious activity. You will be notified once the review is complete.',
- color: 'text-yellow-600',
- bgColor: 'bg-yellow-50',
- borderColor: 'border-yellow-200',
- iconColor: 'text-yellow-600',
- };
- default:
- return {
- icon: FiClock,
- title: 'Transaction Pending',
- message: 'Your transaction is being processed. Please wait for confirmation.',
- color: 'text-blue-600',
- bgColor: 'bg-blue-50',
- borderColor: 'border-blue-200',
- iconColor: 'text-blue-600',
- };
- }
- };
-
- const statusConfig = getStatusConfig();
- const Icon = statusConfig.icon;
-
- return (
- = ({ children }) => {
+
+
+ {/* Requester Info */}
+
+ );
+};
diff --git a/src/components/checkout/SuccessPage.tsx b/src/components/checkout/SuccessPage.tsx
new file mode 100644
index 0000000..477c43f
--- /dev/null
+++ b/src/components/checkout/SuccessPage.tsx
@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../ui/Card';
+import { Logo } from '../ui/Logo';
+import { FiCheckCircle, FiMail, FiSmartphone, FiDownload } from 'react-icons/fi';
+
+interface SuccessPageProps {
+ transactionId: string;
+ amount: number;
+ email: string;
+}
+
+export const SuccessPage: React.FC
+
+
+
+
+
+
+ {/* Line Divider */}
+ + Payment Request +
+
+ {/* Language Selector */}
+
+
+
+
+ {showLanguageMenu && (
+ <>
+
+ setShowLanguageMenu(false)}
+ />
+
+
+ {/* Report Button */}
+ {onFlag && (
+
+ )}
+
+ {languages.map((lang) => (
+
+ ))}
+
+
+ )}
+
+
+ {requester.description && (
+
+
+ {requester.name.charAt(0).toUpperCase()}
+
+
+
+
+ + {requester.name} +
++ {requester.email} +
+ {requester.phone && ( ++ {requester.phone} +
+ )} +
+
+ + Requesting +
++ {formatCurrency(requester.requestAmount)} +
+
+
+ )}
+ {requester.description}
+
+
+
+
+ {/* Recipient Account Selection */}
+ {recipientAccounts.length > 1 ? (
+
+
+ ) : recipientAccounts.length === 1 ? (
+
+
+
+ + Choose recipient account +
++ Select which account to send the money to +
+
+ {recipientAccounts.map((account) => (
+ onSelectAccount(account.id)}
+ className="p-6 cursor-pointer"
+ >
+
+ ))}
+
+
+
+
+
+
+ {account.accountType === "business" ? (
+
+
+
+
+
+ + {account.accountHolderName} +
+ + {account.bankName} + +
+
+
+
+
+ {account.accountType}
+
+
+
+
+
+ ) : null}
+
+ {/* Next Button */}
+ {recipientAccounts.length > 0 && (
+
+ )}
+
+ {/* Flag/Report Modal */}
+ {showFlagModal && onFlag && (
+
+
+
+ + Recipient Account +
++ Money will be sent to this account +
+
+
+
+
+
+ {recipientAccounts[0].accountType === "business" ? (
+
+
+
+
+
+ + {recipientAccounts[0].accountHolderName} +
+ + {recipientAccounts[0].bankName} + +
+
+
+
+
+ {recipientAccounts[0].accountType}
+
+
+
+
+
+ )}
+
+
+
+
+
+ + Report User +
+ +
+
+
+ + Why are you reporting{" "} + {requester.name}? +
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
diff --git a/src/components/checkout/TransactionConfirmation.tsx b/src/components/checkout/TransactionConfirmation.tsx
deleted file mode 100644
index 7533383..0000000
--- a/src/components/checkout/TransactionConfirmation.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import { Button } from '../ui/Button';
-import { Card } from '../ui/Card';
-import type { FundRequest } from '../../types';
-import { FiCheckCircle, FiXCircle, FiAlertTriangle } from 'react-icons/fi';
-
-interface TransactionConfirmationProps {
- transactionData: FundRequest & { accountType: 'business' | 'personal' };
- onConfirm: () => void;
- onCancel: () => void;
- isLoading?: boolean;
-}
-
-export const TransactionConfirmation: React.FC
+
+ {/* Success Icon */}
+
+
+
+
+
+ {/* Download App Section */}
+
+
+ + Payment Successful! +
++ Your payment of {formatCurrency(amount)} has been processed successfully. +
+Transaction ID: {transactionId}
+
+
+
+ {/* Footer Actions */}
+ + Download the Amba App +
++ Get the Amba app to manage your payments and transactions on the go. +
+ + {/* Download Buttons */} +
+
+
+
+
+ {/* Email Link Section */}
+
+
+
+
+ {emailSent && (
+
+
+
+
+
+ Send download link via email
+{email}
+
+ Download link has been sent to your email!
+
+ )}
+
+
+
+
+
-
-
-
-
- );
-};
-
diff --git a/src/components/checkout/TransactionStatus.tsx b/src/components/checkout/TransactionStatus.tsx
deleted file mode 100644
index 0dac3dd..0000000
--- a/src/components/checkout/TransactionStatus.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import { Button } from '../ui/Button';
-import { Card } from '../ui/Card';
-import type { Transaction } from '../../types';
-import { FiCheckCircle, FiXCircle, FiClock, FiAlertCircle } from 'react-icons/fi';
-
-interface TransactionStatusProps {
- transaction: Transaction;
- onNewTransaction?: () => void;
-}
-
-export const TransactionStatus: React.FC
-
-
- - Review Transaction -
-- Please review the details before confirming -
-
-
-
- Amount
-
- {formatCurrency(transactionData.amount)}
-
-
-
-
-
-
-
-
- {transactionData.recipientEmail && (
- Recipient
-{transactionData.recipient}
-
- Email
-
- )}
-
- {transactionData.recipientEmail}
-
-
-
- {transactionData.description && (
- Account Type
-- {transactionData.accountType} -
-
-
- )}
- Description
-{transactionData.description}
-
-
-
-
-
-
-
- - Transaction Review -
-- This transaction will be reviewed for suspicious activity. You will be notified once the review is complete. -
-
-
-
-
-
-
-
-
- );
-};
-
diff --git a/src/components/errors/Error404.tsx b/src/components/errors/Error404.tsx
new file mode 100644
index 0000000..69d4145
--- /dev/null
+++ b/src/components/errors/Error404.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from '../ui/Button';
+import { useNavigate } from 'react-router-dom';
+
+export const Error404: React.FC = () => {
+ const navigate = useNavigate();
+
+ return (
+
-
-
-
-
-
-
- - {statusConfig.title} -
-- {statusConfig.message} -
-
-
-
- {onNewTransaction && (
-
-
-
- Transaction ID
-
- {transaction.id}
-
-
-
-
- Amount
-
- {formatCurrency(transaction.amount)}
-
-
-
-
-
-
-
-
- {transaction.recipientEmail && (
- Recipient
-{transaction.recipient}
-
- Email
-
- )}
-
- {transaction.recipientEmail}
-
-
-
- Account Type
-- {transaction.accountType} -
-
-
-
- {transaction.description && (
- Status
-- {transaction.status} -
-
-
- )}
- Description
-{transaction.description}
-
-
-
- )}
-
+
+ );
+};
diff --git a/src/components/errors/Maintenance.tsx b/src/components/errors/Maintenance.tsx
new file mode 100644
index 0000000..e70d49d
--- /dev/null
+++ b/src/components/errors/Maintenance.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Maintenance: React.FC = () => {
+ return (
+
+ 
+
+
+ Page Not Found
++ The page you're looking for doesn't exist or has been moved. +
+ +
+
+ );
+};
+
diff --git a/src/components/errors/NoInternet.tsx b/src/components/errors/NoInternet.tsx
new file mode 100644
index 0000000..cf1c598
--- /dev/null
+++ b/src/components/errors/NoInternet.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button } from '../ui/Button';
+
+export const NoInternet: React.FC = () => {
+ const handleRetry = () => {
+ window.location.reload();
+ };
+
+ return (
+
+ 
+
+
+ Under Maintenance
++ We're currently performing scheduled maintenance to improve your experience. +
++ Please check back soon. We apologize for any inconvenience. +
+
+
+ );
+};
+
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 2c2008c..df6f9ba 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
+import { Logo } from '../ui/Logo';
import { FiHome, FiShield, FiUsers, FiAlertTriangle } from 'react-icons/fi';
interface LayoutProps {
@@ -18,7 +19,9 @@ export const Layout: React.FC
+ 
+
+
+ No Internet Connection
++ Please check your internet connection and try again. +
+ +
- Amba Checkout
+
+
{
+ const [isOpen, setIsOpen] = useState(false);
+ const location = useLocation();
+
+ // Don't show chat on error pages or admin pages
+ const hideChat = location.pathname.includes('/admin') ||
+ location.pathname === '/maintenance' ||
+ location.pathname === '/no-internet' ||
+ location.pathname === '/404';
+
+ if (hideChat) return null;
+
+ return (
+ <>
+ {/* Chat Button */}
+
+
+ {/* Chat Window */}
+ {isOpen && (
+ = ({
+ message = 'Loading...',
+ fullScreen = false
+}) => {
+ const containerClass = fullScreen
+ ? 'min-h-screen bg-gray-50 flex items-center justify-center'
+ : 'flex items-center justify-center py-12';
+
+ return (
+ = ({ className = '', dark = false, color }) => {
+ // For dark backgrounds, use white filter, for light backgrounds use default
+ // If custom color is provided, use CSS filter to convert to that color
+ let filterStyle: React.CSSProperties = {};
+
+ if (color === '#105D38') {
+ // CSS filter to convert to #105D38 green
+ // This filter converts black to the specified green color
+ filterStyle = {
+ filter: 'brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(1352%) hue-rotate(118deg) brightness(95%) contrast(87%)',
+ };
+ } else if (dark) {
+ // For dark backgrounds, invert to white
+ filterStyle = {
+ filter: 'brightness(0) invert(1)',
+ };
+ }
+
+ return (
+ 
+ );
+};
+
diff --git a/src/contexts/CheckoutContext.tsx b/src/contexts/CheckoutContext.tsx
index 7187ab0..bb8b2cd 100644
--- a/src/contexts/CheckoutContext.tsx
+++ b/src/contexts/CheckoutContext.tsx
@@ -1,17 +1,26 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
-import type { FundRequest, AccountType, Transaction } from '../types';
+import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+import type { FundRequest, AccountType, Transaction, Requester, RecipientBankAccount, TransactionFeedback } from '../types';
import { api } from '../utils/api';
interface CheckoutContextType {
currentStep: number;
+ requester: Requester | null;
+ selectedRecipientAccountId: string | null;
+ selectedRecipientAccount: RecipientBankAccount | null;
fundRequest: Partial | null;
selectedAccountType: AccountType | null;
transaction: Transaction | null;
+ showSuccessModal: boolean;
isLoading: boolean;
error: string | null;
+ transactionFee: number;
+ setRequester: (requester: Requester) => void;
+ setSelectedRecipientAccountId: (accountId: string) => void;
setFundRequest: (data: Partial) => void;
setAccountType: (type: AccountType) => void;
- submitTransaction: () => Promise;
+ submitPayment: () => Promise;
+ submitFeedback: (feedback: TransactionFeedback) => void;
+ closeSuccessModal: () => void;
reset: () => void;
goToStep: (step: number) => void;
}
@@ -20,11 +29,80 @@ const CheckoutContext = createContext(undefined
export const CheckoutProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [currentStep, setCurrentStep] = useState(1);
+ const [requester, setRequesterState] = useState(null);
+ const [selectedRecipientAccountId, setSelectedRecipientAccountIdState] = useState(null);
+ const [selectedRecipientAccount, setSelectedRecipientAccountState] = useState(null);
const [fundRequest, setFundRequestState] = useState | null>(null);
const [selectedAccountType, setSelectedAccountType] = useState(null);
const [transaction, setTransaction] = useState(null);
+ const [showSuccessModal, setShowSuccessModal] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
+ const [transactionFee] = useState(2.50); // Fixed transaction fee for now
+
+ // Initialize with mock data for development
+ useEffect(() => {
+ // Mock requester data with bank accounts (in real app, this would come from URL params or API)
+ const mockRequester: Requester = {
+ id: 'req-1',
+ name: 'John Doe',
+ email: 'john.doe@example.com',
+ phone: '+251 911 234 567',
+ requestAmount: 1250.00,
+ description: 'Payment for services rendered',
+ requestId: 'req-12345',
+ bankAccounts: [
+ {
+ id: 'bank-1',
+ bankName: 'Awash Bank',
+ accountNumber: '1000123456789',
+ accountHolderName: 'John Doe',
+ accountType: 'personal',
+ isDefault: true,
+ },
+ {
+ id: 'bank-2',
+ bankName: 'Commercial Bank of Ethiopia',
+ accountNumber: '2000987654321',
+ accountHolderName: 'John Doe',
+ accountType: 'business',
+ },
+ ],
+ };
+
+ setRequesterState(mockRequester);
+
+ // Set initial fund request from requester
+ setFundRequestState({
+ amount: mockRequester.requestAmount,
+ recipient: mockRequester.name,
+ recipientEmail: mockRequester.email,
+ description: mockRequester.description,
+ });
+ }, []);
+
+ const setRequester = (req: Requester) => {
+ setRequesterState(req);
+ setFundRequestState({
+ amount: req.requestAmount,
+ recipient: req.name,
+ recipientEmail: req.email,
+ description: req.description,
+ });
+ setError(null);
+ };
+
+ const setSelectedRecipientAccountId = (accountId: string) => {
+ setSelectedRecipientAccountIdState(accountId);
+ if (requester?.bankAccounts) {
+ const account = requester.bankAccounts.find(acc => acc.id === accountId);
+ if (account) {
+ setSelectedRecipientAccountState(account);
+ setSelectedAccountType(account.accountType);
+ }
+ }
+ setError(null);
+ };
const setFundRequest = (data: Partial) => {
setFundRequestState(data);
@@ -36,8 +114,8 @@ export const CheckoutProvider: React.FC<{ children: ReactNode }> = ({ children }
setError(null);
};
- const submitTransaction = async () => {
- if (!fundRequest || !selectedAccountType) {
+ const submitPayment = async () => {
+ if (!fundRequest || !selectedAccountType || !selectedRecipientAccountId) {
setError('Please complete all required fields');
return;
}
@@ -53,19 +131,34 @@ export const CheckoutProvider: React.FC<{ children: ReactNode }> = ({ children }
const newTransaction = await api.createTransaction(transactionData);
setTransaction(newTransaction);
- setCurrentStep(4);
+ setShowSuccessModal(true);
} catch (err) {
- setError(err instanceof Error ? err.message : 'Failed to create transaction');
+ setError(err instanceof Error ? err.message : 'Failed to process payment');
} finally {
setIsLoading(false);
}
};
+ const submitFeedback = (feedback: TransactionFeedback) => {
+ // In real app, this would send feedback to backend
+ console.log('Feedback submitted:', feedback);
+ setShowSuccessModal(false);
+ setCurrentStep(3);
+ };
+
+ const closeSuccessModal = () => {
+ setShowSuccessModal(false);
+ setCurrentStep(3);
+ };
+
const reset = () => {
setCurrentStep(1);
+ setSelectedRecipientAccountIdState(null);
+ setSelectedRecipientAccountState(null);
setFundRequestState(null);
setSelectedAccountType(null);
setTransaction(null);
+ setShowSuccessModal(false);
setError(null);
setIsLoading(false);
};
@@ -80,14 +173,23 @@ export const CheckoutProvider: React.FC<{ children: ReactNode }> = ({ children }
{
+ const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+ useEffect(() => {
+ const handleOnline = () => setIsOnline(true);
+ const handleOffline = () => setIsOnline(false);
+
+ window.addEventListener('online', handleOnline);
+ window.addEventListener('offline', handleOffline);
+
+ return () => {
+ window.removeEventListener('online', handleOnline);
+ window.removeEventListener('offline', handleOffline);
+ };
+ }, []);
+
+ return isOnline;
+};
+
diff --git a/src/index.css b/src/index.css
index 0a3620b..a1a71a2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,9 +4,7 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ font-family: 'DM Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -15,3 +13,14 @@ body {
box-sizing: border-box;
}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+ display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
diff --git a/src/pages/AccountSelectionPage.tsx b/src/pages/AccountSelectionPage.tsx
new file mode 100644
index 0000000..81f578c
--- /dev/null
+++ b/src/pages/AccountSelectionPage.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { CheckoutProvider } from '../contexts/CheckoutContext';
+import { RequesterDetails } from '../components/checkout/RequesterDetails';
+import { useCheckout } from '../contexts/CheckoutContext';
+import { useNavigate } from 'react-router-dom';
+import { Loading } from '../components/ui/Loading';
+
+const AccountSelectionContent: React.FC = () => {
+ const {
+ requester,
+ selectedRecipientAccountId,
+ setSelectedRecipientAccountId,
+ } = useCheckout();
+ const navigate = useNavigate();
+
+ const handleAccountSelect = (accountId: string) => {
+ setSelectedRecipientAccountId(accountId);
+ };
+
+ const handleNext = () => {
+ // Ensure an account is selected before proceeding
+ if (!selectedRecipientAccountId && requester?.bankAccounts && requester.bankAccounts.length > 0) {
+ const defaultAccount = requester.bankAccounts.find(acc => acc.isDefault) || requester.bankAccounts[0];
+ if (defaultAccount) {
+ setSelectedRecipientAccountId(defaultAccount.id);
+ }
+ }
+
+ // Navigate to checkout page
+ navigate('/checkout');
+ };
+
+ if (!requester) {
+ return {
+ // Handle flagging - in real app, this would call an API
+ console.log('Flagged user:', requester.id, 'Reason:', reason);
+ alert(`User has been reported. Reason: ${reason === 'spam' ? 'Spam or suspicious activity' : reason === 'unknown' ? "I don't know this person" : 'Other'}`);
+ }}
+ />
+ );
+};
+
+export const AccountSelectionPage: React.FC = () => {
+ return (
+
+
+ );
+};
+
diff --git a/src/pages/AccountsPage.tsx b/src/pages/AccountsPage.tsx
deleted file mode 100644
index 44f4e60..0000000
--- a/src/pages/AccountsPage.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { AccountFlagging } from '../components/admin/AccountFlagging';
-
-export const AccountsPage: React.FC = () => {
- return
+
+ );
+};
+
diff --git a/src/pages/SuccessPageRoute.tsx b/src/pages/SuccessPageRoute.tsx
new file mode 100644
index 0000000..a51b189
--- /dev/null
+++ b/src/pages/SuccessPageRoute.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SuccessPage } from '../components/checkout/SuccessPage';
+import { Loading } from '../components/ui/Loading';
+
+export const SuccessPageRoute: React.FC = () => {
+ const [searchParams] = useSearchParams();
+ const email = searchParams.get('email') || '';
+ const amount = parseFloat(searchParams.get('amount') || '0');
+ const transactionId = searchParams.get('transactionId') || `TXN-${Date.now()}`;
+
+ if (!email) {
+ return
+ {/* Chat Header */}
+
+ )}
+
+ );
+};
+
diff --git a/src/components/ui/Loading.tsx b/src/components/ui/Loading.tsx
new file mode 100644
index 0000000..a374f00
--- /dev/null
+++ b/src/components/ui/Loading.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface LoadingProps {
+ message?: string;
+ fullScreen?: boolean;
+}
+
+export const Loading: React.FC
+
+
+ {/* Chat Messages */}
+
+
+ Support Chat
+We typically reply in minutes
+
+
+
+ {/* Chat Input */}
+
+
+
+
+
+ A
+
+
+
+
+
+ + Hello! How can we help you today? +
+
+
+
+
+
+
+
+
+ );
+};
+
diff --git a/src/components/ui/Logo.tsx b/src/components/ui/Logo.tsx
new file mode 100644
index 0000000..4341ed4
--- /dev/null
+++ b/src/components/ui/Logo.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface LogoProps {
+ className?: string;
+ dark?: boolean; // If true, use dark version for light backgrounds
+ color?: string; // Custom color override (e.g., '#105D38')
+}
+
+export const Logo: React.FC
+ 
+ {message && (
+
+
+ {message && (
+ {message}
+ )} +
+ );
+};
+
diff --git a/src/contexts/CheckoutContext.tsx b/src/contexts/CheckoutContext.tsx
index 7187ab0..bb8b2cd 100644
--- a/src/contexts/CheckoutContext.tsx
+++ b/src/contexts/CheckoutContext.tsx
@@ -1,17 +1,26 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
-import type { FundRequest, AccountType, Transaction } from '../types';
+import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+import type { FundRequest, AccountType, Transaction, Requester, RecipientBankAccount, TransactionFeedback } from '../types';
import { api } from '../utils/api';
interface CheckoutContextType {
currentStep: number;
+ requester: Requester | null;
+ selectedRecipientAccountId: string | null;
+ selectedRecipientAccount: RecipientBankAccount | null;
fundRequest: Partial
-
- );
-};
-
diff --git a/src/pages/CheckoutPageRoute.tsx b/src/pages/CheckoutPageRoute.tsx
new file mode 100644
index 0000000..99b5798
--- /dev/null
+++ b/src/pages/CheckoutPageRoute.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { CheckoutProvider } from '../contexts/CheckoutContext';
+import { CheckoutPage } from '../components/checkout/CheckoutPage';
+import { useCheckout } from '../contexts/CheckoutContext';
+import { useNavigate } from 'react-router-dom';
+import { Loading } from '../components/ui/Loading';
+
+const CheckoutContent: React.FC = () => {
+ const {
+ requester,
+ selectedRecipientAccountId,
+ selectedRecipientAccount,
+ fundRequest,
+ transactionFee,
+ submitPayment,
+ } = useCheckout();
+ const navigate = useNavigate();
+
+ const handlePaymentComplete = async () => {
+ await submitPayment();
+ // After payment, you might want to navigate somewhere or show a success message
+ };
+
+ if (!requester || !fundRequest) {
+ return