658 lines
20 KiB
TypeScript
658 lines
20 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { View, ScrollView, Image, TouchableOpacity } from "react-native";
|
|
import { useLocalSearchParams, router } from "expo-router";
|
|
import ScreenWrapper from "~/components/ui/ScreenWrapper";
|
|
import BackButton from "~/components/ui/backButton";
|
|
import { Text } from "~/components/ui/text";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Input } from "~/components/ui/input";
|
|
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
|
|
import { TransactionService } from "~/lib/services/transactionService";
|
|
import { GoogleIcon } from "~/components/ui/icons";
|
|
import { Icons } from "~/assets/icons";
|
|
import { WalletService } from "~/lib/services/walletService";
|
|
import { ROUTES } from "~/lib/routes";
|
|
import {
|
|
calculateTotalAmountForSending,
|
|
calculateProcessingFee,
|
|
} from "~/lib/utils/feeUtils";
|
|
import ModalToast from "~/components/ui/toast";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type PaymentOptionCardProps = {
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
selected?: boolean;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
const PaymentOptionCard = ({
|
|
label,
|
|
icon,
|
|
selected,
|
|
onPress,
|
|
}: PaymentOptionCardProps) => {
|
|
return (
|
|
<TouchableOpacity className="flex-1" activeOpacity={0.8} onPress={onPress}>
|
|
<View
|
|
className={`rounded-xl px-3 py-2 border ${
|
|
selected ? "border-[#105D38]" : "border-gray-300"
|
|
}`}
|
|
>
|
|
<View className="flex-row items-start justify-between mb-3">
|
|
{icon}
|
|
{selected && (
|
|
<View className="w-5 h-5 rounded-full bg-[#105D38] items-center justify-center">
|
|
<Text className="text-xs font-dmsans-bold text-white">✓</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text className="text-sm font-dmsans-semibold text-black">{label}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
export default function CheckoutScreen() {
|
|
const { t } = useTranslation();
|
|
const params = useLocalSearchParams<{
|
|
amount?: string;
|
|
type?: string;
|
|
recipientName?: string;
|
|
recipientPhoneNumber?: string;
|
|
recipientType?: string;
|
|
recipientId?: string;
|
|
note?: string;
|
|
donationSkipped?: string;
|
|
donationType?: string;
|
|
donationAmount?: string;
|
|
donateAnonymously?: string;
|
|
donationCampaignId?: string;
|
|
donationCampaignTitle?: string;
|
|
ticketTierName?: string;
|
|
ticketTierPrice?: string;
|
|
eventName?: string;
|
|
eventId?: string;
|
|
ticketTierId?: string;
|
|
ticketCount?: string;
|
|
}>();
|
|
|
|
const { user, profile, wallet, refreshWallet } = useAuthWithProfile();
|
|
const [selectedPayment, setSelectedPayment] = useState<
|
|
"card" | "apple" | "google"
|
|
>("card");
|
|
const [email, setEmail] = useState("");
|
|
const [nameOnCard, setNameOnCard] = useState("");
|
|
const [cardNumber, setCardNumber] = useState("");
|
|
const [expiry, setExpiry] = useState("");
|
|
const [cvv, setCvv] = useState("");
|
|
const [showCvv, setShowCvv] = useState(false);
|
|
const [address, setAddress] = useState("");
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
|
|
const [toastVisible, setToastVisible] = useState(false);
|
|
const [toastTitle, setToastTitle] = useState("");
|
|
const [toastDescription, setToastDescription] = useState<string | undefined>(
|
|
undefined
|
|
);
|
|
const [toastVariant, setToastVariant] = useState<
|
|
"success" | "error" | "warning" | "info"
|
|
>("info");
|
|
const toastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const isAddCashFlow = params.type === "add_cash";
|
|
const isEventTicketFlow = params.type === "event_ticket";
|
|
|
|
const headerTitle = isEventTicketFlow
|
|
? params.ticketTierName || "-"
|
|
: isAddCashFlow
|
|
? profile?.fullName || user?.email || "-"
|
|
: params.recipientName || "-";
|
|
|
|
const headerSubtitle = isEventTicketFlow
|
|
? params.eventName || ""
|
|
: isAddCashFlow
|
|
? profile?.phoneNumber || profile?.email || ""
|
|
: params.recipientPhoneNumber || "";
|
|
|
|
const amountInCents = parseInt(params.amount || "0");
|
|
const amountInDollars = amountInCents / 100;
|
|
|
|
const hasDonation =
|
|
params.donationSkipped === "false" && !!params.donationAmount;
|
|
|
|
const donationAmountNumber = params.donationAmount
|
|
? Number(params.donationAmount)
|
|
: NaN;
|
|
const donationAmountDollars =
|
|
!isNaN(donationAmountNumber) && hasDonation ? donationAmountNumber : 0;
|
|
|
|
const processingFeeInCents = Math.round(amountInCents * 0.0125);
|
|
const processingFeeInDollars = processingFeeInCents / 100;
|
|
|
|
const subtotalInDollars = amountInDollars + donationAmountDollars;
|
|
const totalInDollars = subtotalInDollars + processingFeeInDollars;
|
|
|
|
// Card input helpers (mirrored from AddCard screen)
|
|
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: string[] = [];
|
|
|
|
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 formatExpiry = (value: string) => {
|
|
const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
|
|
if (v.length >= 2) {
|
|
return `${v.substring(0, 2)}/${v.substring(2, 4)}`;
|
|
}
|
|
return v;
|
|
};
|
|
|
|
const handleCardNumberChange = (value: string) => {
|
|
const formatted = formatCardNumber(value);
|
|
if (formatted.length <= 19) {
|
|
// 16 digits + 3 spaces
|
|
setCardNumber(formatted);
|
|
}
|
|
};
|
|
|
|
const handleExpiryChange = (value: string) => {
|
|
const formatted = formatExpiry(value);
|
|
if (formatted.length <= 5) {
|
|
// MM/YY
|
|
setExpiry(formatted);
|
|
}
|
|
};
|
|
|
|
const handleCvvChange = (value: string) => {
|
|
const v = value.replace(/[^0-9]/gi, "");
|
|
if (v.length <= 4) {
|
|
setCvv(v);
|
|
}
|
|
};
|
|
|
|
const showToast = (
|
|
title: string,
|
|
description?: string,
|
|
variant: "success" | "error" | "warning" | "info" = "info"
|
|
) => {
|
|
if (toastTimeoutRef.current) {
|
|
clearTimeout(toastTimeoutRef.current);
|
|
}
|
|
|
|
setToastTitle(title);
|
|
setToastDescription(description);
|
|
setToastVariant(variant);
|
|
setToastVisible(true);
|
|
|
|
toastTimeoutRef.current = setTimeout(() => {
|
|
setToastVisible(false);
|
|
toastTimeoutRef.current = null;
|
|
}, 2500);
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (toastTimeoutRef.current) {
|
|
clearTimeout(toastTimeoutRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!profile) return;
|
|
|
|
if (!email && profile.email) {
|
|
setEmail(profile.email);
|
|
}
|
|
|
|
if (!nameOnCard && profile.fullName) {
|
|
setNameOnCard(profile.fullName);
|
|
}
|
|
|
|
if (!address && profile.address) {
|
|
setAddress(profile.address);
|
|
}
|
|
}, [profile, email, nameOnCard, address]);
|
|
|
|
const handlePay = async () => {
|
|
if (isAddCashFlow) {
|
|
if (!params.amount || !user?.uid || !wallet) {
|
|
showToast(
|
|
t("selectacc.toastErrorTitle"),
|
|
t("selectacc.toastMissingInfo"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const amountInCents = parseInt(params.amount);
|
|
if (isNaN(amountInCents) || amountInCents <= 0) {
|
|
showToast(
|
|
t("addcash.validationErrorTitle"),
|
|
t("addcash.validationEnterAmount"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
try {
|
|
const currentBalance = wallet.balance || 0;
|
|
const newBalance = currentBalance + amountInCents;
|
|
|
|
const result = await WalletService.updateWalletBalance(
|
|
user.uid,
|
|
newBalance
|
|
);
|
|
|
|
if (result.success) {
|
|
await refreshWallet();
|
|
|
|
router.replace({
|
|
pathname: ROUTES.ADDCASH_COMPLETION,
|
|
params: {
|
|
amount: (amountInCents / 100).toFixed(2),
|
|
},
|
|
});
|
|
} else {
|
|
showToast(
|
|
t("selectacc.toastErrorTitle"),
|
|
result.error || t("selectacc.toastAddCashFailed"),
|
|
"error"
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error adding cash from checkout:", error);
|
|
showToast(
|
|
t("selectacc.toastErrorTitle"),
|
|
t("selectacc.toastAddCashFailedWithRetry"),
|
|
"error"
|
|
);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (params.type === "event_ticket") {
|
|
if (!params.amount || !user?.uid) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastMissingDetails"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const amountInCents = parseInt(params.amount);
|
|
if (isNaN(amountInCents) || amountInCents <= 0) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastInvalidAmount"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
try {
|
|
router.push({
|
|
pathname: ROUTES.TRANSACTION_DETAIL,
|
|
params: {
|
|
amount: params.amount,
|
|
type: "event_ticket",
|
|
recipientName: params.eventName || "",
|
|
date: new Date().toISOString(),
|
|
status: "Completed",
|
|
note: params.ticketTierName || "",
|
|
flowType: "event_ticket",
|
|
ticketTierId: params.ticketTierId || "",
|
|
ticketCount: params.ticketCount || "1",
|
|
eventId: params.eventId || "",
|
|
},
|
|
});
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (!params.amount || !user?.uid) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastMissingDetails"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const amountInCents = parseInt(params.amount);
|
|
if (isNaN(amountInCents) || amountInCents <= 0) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastInvalidAmount"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const totalRequired = calculateTotalAmountForSending(amountInCents);
|
|
if (!wallet) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastWalletNotFound"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
if (wallet.balance < totalRequired) {
|
|
const processingFee = calculateProcessingFee(amountInCents);
|
|
const required = (totalRequired / 100).toFixed(2);
|
|
const fee = (processingFee / 100).toFixed(2);
|
|
const available = (wallet.balance / 100).toFixed(2);
|
|
showToast(
|
|
t("transconfirm.toastInsufficientBalanceTitle"),
|
|
t("transconfirm.toastInsufficientBalanceDescription", {
|
|
required,
|
|
fee,
|
|
available,
|
|
}),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (
|
|
!params.recipientName ||
|
|
!params.recipientPhoneNumber ||
|
|
!params.recipientType ||
|
|
!params.recipientId
|
|
) {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastRecipientMissing"),
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
|
|
try {
|
|
const result = await TransactionService.sendMoney(user.uid, {
|
|
amount: amountInCents,
|
|
recipientName: params.recipientName,
|
|
recipientPhoneNumber: params.recipientPhoneNumber,
|
|
recipientType: params.recipientType as "saved" | "contact",
|
|
recipientId: params.recipientId,
|
|
note: params.note?.trim() || "",
|
|
});
|
|
|
|
if (result.success) {
|
|
await refreshWallet();
|
|
|
|
router.replace({
|
|
pathname: "/(screens)/taskcomp",
|
|
params: {
|
|
message: `Transaction completed on your end. $${(
|
|
amountInCents / 100
|
|
).toFixed(2)} will be claimed by ${
|
|
params.recipientName
|
|
} within 7 days, or the money will revert to your wallet.`,
|
|
amount: (amountInCents / 100).toFixed(2),
|
|
recipientName: params.recipientName,
|
|
recipientPhoneNumber: params.recipientPhoneNumber,
|
|
},
|
|
});
|
|
} else {
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
result.error || t("transconfirm.toastSendFailed"),
|
|
"error"
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error sending money:", error);
|
|
showToast(
|
|
t("transconfirm.toastErrorTitle"),
|
|
t("transconfirm.toastSendFailedWithRetry"),
|
|
"error"
|
|
);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenWrapper edges={[]}>
|
|
<View className="flex-1">
|
|
<View className="pt-4">
|
|
<BackButton />
|
|
</View>
|
|
|
|
<ScrollView
|
|
className="flex-1 px-5"
|
|
contentContainerStyle={{ paddingBottom: 32 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Text className="text-2xl font-dmsans-bold text-black mb-3">
|
|
{t("checkout.title")}
|
|
</Text>
|
|
|
|
<View className="bg-gray-100 rounded-2xl px-4 py-3 mb-4 flex-row justify-between items-center">
|
|
<View style={{ flex: 1 }}>
|
|
<Text className="text-xs font-dmsans text-gray-500 mb-1">
|
|
{isEventTicketFlow ? "Ticket" : t("checkout.recipientLabel")}
|
|
</Text>
|
|
<Text
|
|
className="text-base font-dmsans-medium text-gray-900"
|
|
numberOfLines={1}
|
|
>
|
|
{headerTitle}
|
|
</Text>
|
|
<Text className="text-xs font-dmsans text-gray-500 mt-1">
|
|
{headerSubtitle}
|
|
</Text>
|
|
</View>
|
|
<View className="items-end ml-4">
|
|
<Text className="text-xs font-dmsans text-gray-500 mb-1">
|
|
{t("checkout.totalLabel")}
|
|
</Text>
|
|
<Text className="text-xl font-dmsans-bold text-gray-900">
|
|
${totalInDollars.toFixed(2)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Text className="text-lg font-dmsans-medium mb-6">
|
|
{t("checkout.subtitle")}
|
|
</Text>
|
|
|
|
{/* Payment options */}
|
|
<View className="mb-6">
|
|
<Text className="text-base font-dmsans-medium mb-3">
|
|
{t("checkout.paymentOptionsTitle")}
|
|
</Text>
|
|
<View className="flex-row gap-3">
|
|
<PaymentOptionCard
|
|
label="Card"
|
|
icon={
|
|
<Image
|
|
source={Icons.cardCheck}
|
|
style={{ width: 20, height: 20, resizeMode: "contain" }}
|
|
/>
|
|
}
|
|
selected={selectedPayment === "card"}
|
|
onPress={() => setSelectedPayment("card")}
|
|
/>
|
|
<PaymentOptionCard
|
|
label="Apple Pay"
|
|
icon={
|
|
<Image
|
|
source={Icons.applePay}
|
|
style={{ width: 20, height: 20, resizeMode: "contain" }}
|
|
/>
|
|
}
|
|
selected={selectedPayment === "apple"}
|
|
onPress={() => setSelectedPayment("apple")}
|
|
/>
|
|
<PaymentOptionCard
|
|
label="Google Pay"
|
|
icon={<GoogleIcon width={20} height={20} />}
|
|
selected={selectedPayment === "google"}
|
|
onPress={() => setSelectedPayment("google")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{selectedPayment === "card" ? (
|
|
<View className="mb-6">
|
|
<Text className="text-base font-dmsans-medium mb-2">
|
|
{t("checkout.cardInfoTitle")}
|
|
</Text>
|
|
|
|
<View className="mb-3">
|
|
<Input
|
|
value={cardNumber}
|
|
onChangeText={handleCardNumberChange}
|
|
placeholderText={t("checkout.cardNumberPlaceholder")}
|
|
placeholderColor="#7E7E7E"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9] bg-white"
|
|
textClassName="text-[#000] text-sm"
|
|
keyboardType="numeric"
|
|
maxLength={19}
|
|
/>
|
|
</View>
|
|
<View className="flex-row gap-3">
|
|
<View className="flex-1">
|
|
<Input
|
|
value={expiry}
|
|
onChangeText={handleExpiryChange}
|
|
placeholderText={t("checkout.expiryPlaceholder")}
|
|
placeholderColor="#7E7E7E"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9] bg-white"
|
|
textClassName="text-[#000] text-sm"
|
|
keyboardType="numeric"
|
|
maxLength={5}
|
|
/>
|
|
</View>
|
|
<View className="flex-1">
|
|
<Input
|
|
value={cvv}
|
|
onChangeText={handleCvvChange}
|
|
placeholderText={t("checkout.cvvPlaceholder")}
|
|
placeholderColor="#7E7E7E"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9] bg-white"
|
|
textClassName="text-[#000] text-sm"
|
|
keyboardType="numeric"
|
|
secureTextEntry={!showCvv}
|
|
maxLength={4}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View className="mb-6">
|
|
<Text className="text-base font-dmsans-medium mb-2">
|
|
{selectedPayment === "apple"
|
|
? t("checkout.appleIdTitle")
|
|
: t("checkout.paymentEmailTitle")}
|
|
</Text>
|
|
<Input
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
placeholderText={
|
|
selectedPayment === "apple"
|
|
? t("checkout.appleIdPlaceholder")
|
|
: t("checkout.paymentEmailPlaceholder")
|
|
}
|
|
placeholderColor="#6B7280"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9] bg-white"
|
|
textClassName="text-[#000] text-sm"
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
<View className="h-px bg-gray-200 mb-4" />
|
|
|
|
{/* Contact information */}
|
|
<View className="mb-6">
|
|
<Text className="text-sm font-dmsans-medium mb-2">
|
|
{t("checkout.contactInfoTitle")}
|
|
</Text>
|
|
<Input
|
|
value={email || profile?.phoneNumber || profile?.email || ""}
|
|
onChangeText={setEmail}
|
|
placeholderText="Email"
|
|
placeholderColor="#6B7280"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9]"
|
|
textClassName="text-base text-black"
|
|
editable={false}
|
|
multiline
|
|
/>
|
|
</View>
|
|
|
|
{/* Billing address */}
|
|
<View className="mb-6">
|
|
<Text className="text-sm font-dmsans-medium mb-2">
|
|
{t("checkout.billingAddressTitle")}
|
|
</Text>
|
|
<Input
|
|
value={address || profile?.address || ""}
|
|
onChangeText={setAddress}
|
|
placeholderText="Address"
|
|
placeholderColor="#6B7280"
|
|
containerClassName="w-full"
|
|
borderClassName="border-[#D9DBE9]"
|
|
textClassName="text-base text-black"
|
|
editable={false}
|
|
multiline
|
|
/>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View className="px-5 pb-6 pt-2 ">
|
|
<Button
|
|
className="bg-primary rounded-2xl h-12 items-center justify-center"
|
|
onPress={handlePay}
|
|
disabled={isProcessing}
|
|
>
|
|
<Text className="text-white font-dmsans-medium text-base">
|
|
{isProcessing
|
|
? t("checkout.payButtonProcessing")
|
|
: t("checkout.payButton")}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
|
|
<ModalToast
|
|
visible={toastVisible}
|
|
title={toastTitle}
|
|
description={toastDescription}
|
|
variant={toastVariant}
|
|
/>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|