539 lines
19 KiB
TypeScript
539 lines
19 KiB
TypeScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { ScrollView, View, Image, TouchableOpacity } from "react-native";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Text } from "~/components/ui/text";
|
|
import { router } from "expo-router";
|
|
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
|
|
import { ROUTES } from "~/lib/routes";
|
|
import ScreenWrapper from "~/components/ui/ScreenWrapper";
|
|
import { Icons } from "~/assets/icons";
|
|
import ModalToast from "~/components/ui/toast";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ChevronRight,
|
|
Store,
|
|
LifeBuoy,
|
|
Bell,
|
|
ScanFace,
|
|
Grid3x3,
|
|
LogOut,
|
|
Book,
|
|
Award,
|
|
Settings,
|
|
} from "lucide-react-native";
|
|
import Toggle from "~/components/ui/toggle";
|
|
import BottomSheet from "~/components/ui/bottomSheet";
|
|
import { useLangStore } from "~/lib/stores";
|
|
import { getPointsState } from "~/lib/services/pointsService";
|
|
import BackButton from "~/components/ui/backButton";
|
|
|
|
export default function Profile() {
|
|
const { t } = useTranslation();
|
|
const { signOut, user, profile, profileLoading } = useAuthWithProfile();
|
|
const language = useLangStore((state) => state.language);
|
|
const setLanguage = useLangStore((state) => state.setLanguage);
|
|
|
|
// Preferences state
|
|
const [pushNotifications, setPushNotifications] = useState(true);
|
|
const [smsNotifications, setSmsNotifications] = useState(true);
|
|
const [emailNotifications, setEmailNotifications] = useState(true);
|
|
const [faceID, setFaceID] = useState(true);
|
|
const [profileImage, setProfileImage] = useState<string | null>(null);
|
|
const [languageSheetVisible, setLanguageSheetVisible] = useState(false);
|
|
const [pointsTotal, setPointsTotal] = useState<number | null>(null);
|
|
|
|
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 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?.photoUrl) {
|
|
setProfileImage(profile.photoUrl);
|
|
} else {
|
|
setProfileImage(null);
|
|
}
|
|
}, [profile?.photoUrl]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const state = await getPointsState();
|
|
setPointsTotal(state.total);
|
|
} catch (error) {
|
|
if (__DEV__) {
|
|
console.warn("[Profile] Failed to load points state", error);
|
|
}
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await signOut();
|
|
showToast(
|
|
t("profile.toastLoggedOutTitle"),
|
|
t("profile.toastLoggedOutDescription"),
|
|
"success"
|
|
);
|
|
router.replace(ROUTES.SIGNIN);
|
|
} catch (error) {
|
|
console.log(error);
|
|
showToast(
|
|
t("profile.toastErrorTitle"),
|
|
t("profile.toastLogoutFailed"),
|
|
"error"
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleEditProfile = () => {
|
|
router.push(ROUTES.EDIT_PROFILE);
|
|
};
|
|
|
|
const handleMyStores = () => {
|
|
// TODO: Navigate to My Stores screen
|
|
showToast("My stores", "Coming soon", "info");
|
|
};
|
|
|
|
const handleSupport = () => {
|
|
router.push(ROUTES.HELP_SUPPORT);
|
|
};
|
|
|
|
const handleKyc = () => {
|
|
router.push(ROUTES.KYC);
|
|
};
|
|
|
|
const handlePoints = () => {
|
|
router.push(ROUTES.POINTS);
|
|
};
|
|
|
|
const handleHistory = () => {
|
|
router.push(ROUTES.HISTORY);
|
|
};
|
|
|
|
const handleChangePassword = () => {
|
|
// Placeholder screen for Change Password
|
|
showToast("Change Password", "Coming soon", "info");
|
|
};
|
|
|
|
const handlePINCode = () => {
|
|
router.push(ROUTES.CHANGE_PIN);
|
|
};
|
|
|
|
const displayName = profile?.fullName || user?.displayName || "User";
|
|
const displayEmail = profile?.email || user?.email || "";
|
|
const agentId = user?.uid
|
|
? `AGENT-${user.uid.slice(-6).toUpperCase()}`
|
|
: "AGENT-001";
|
|
|
|
const languageOptions = [
|
|
{ value: "en", label: t("profile.languageOptionEnglish") },
|
|
{ value: "am", label: t("profile.languageOptionAmharic") },
|
|
{ value: "fr", label: t("profile.languageOptionFrench") },
|
|
{ value: "ti", label: t("profile.languageOptionTigrinya") },
|
|
{ value: "om", label: t("profile.languageOptionOromo") },
|
|
];
|
|
|
|
const initialLetter = displayName?.trim().charAt(0).toUpperCase() || "U";
|
|
|
|
return (
|
|
<ScreenWrapper edges={[]}>
|
|
<BackButton />
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
className="flex-1 bg-white"
|
|
>
|
|
{/* Profile Header */}
|
|
<View className="items-center pt-6 pb-6">
|
|
{/* Avatar with + icon */}
|
|
<View className="mb-4">
|
|
<View className="w-24 h-24 rounded-full bg-[#C8E6C9] items-center justify-center overflow-hidden">
|
|
{profileImage ? (
|
|
<Image
|
|
source={{ uri: profileImage }}
|
|
className="w-24 h-24 rounded-full"
|
|
resizeMode="cover"
|
|
/>
|
|
) : (
|
|
<Image
|
|
source={Icons.avatar}
|
|
style={{ width: 84, height: 84, resizeMode: "contain" }}
|
|
/>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Agent Info Card: Name, Role, Agent ID, Email */}
|
|
<Text className="text-xl font-dmsans-bold text-gray-900 mb-1">
|
|
{profileLoading ? "..." : displayName}
|
|
</Text>
|
|
<Text className="text-xs font-dmsans text-gray-500 mb-0.5">
|
|
Role: Agent
|
|
</Text>
|
|
<Text className="text-xs font-dmsans text-gray-500 mb-1">
|
|
Agent ID: {agentId}
|
|
</Text>
|
|
<Text className="text-sm font-dmsans text-gray-500 mb-6">
|
|
{profileLoading ? "..." : displayEmail}
|
|
</Text>
|
|
|
|
{/* Edit Profile Button */}
|
|
<TouchableOpacity
|
|
onPress={handleEditProfile}
|
|
className="bg-primary px-8 py-3 rounded-full"
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text className="text-white font-dmsans-medium text-sm">
|
|
Edit profile
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View className="px-5 pt-6">
|
|
<Text className="text-xs font-dmsans-medium text-gray-400 mb-3">
|
|
Inventories
|
|
</Text>
|
|
|
|
{/* Inventories Card - grouped items */}
|
|
<View className="bg-gray-50 rounded-2xl overflow-hidden mb-3">
|
|
{/* Points */}
|
|
<TouchableOpacity
|
|
onPress={handlePoints}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Award size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900 flex-1">
|
|
Points
|
|
</Text>
|
|
<View className="bg-primary w-6 h-6 rounded-full items-center justify-center mr-2">
|
|
<Text className="text-white font-dmsans-bold text-xs">
|
|
{pointsTotal ?? 0}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Help and Support */}
|
|
<TouchableOpacity
|
|
onPress={handleSupport}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<LifeBuoy size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
Help & Support
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Terms and Conditions */}
|
|
<TouchableOpacity
|
|
onPress={() => router.push(ROUTES.TERMS)}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Book size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
Terms & Conditions
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
<TouchableOpacity
|
|
onPress={handleKyc}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<ScanFace size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900 flex-1">
|
|
Information
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
</View>
|
|
</View>
|
|
|
|
{/* Preferences Section */}
|
|
<View className="px-5 pt-6 pb-8">
|
|
<Text className="text-xs font-dmsans-medium text-gray-400 mb-3">
|
|
Preferences
|
|
</Text>
|
|
|
|
{/* Preferences Card - grouped items */}
|
|
<View className="bg-gray-50 rounded-2xl overflow-hidden mb-3">
|
|
{/* SMS notifications */}
|
|
<View className="p-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Bell size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
SMS notifications
|
|
</Text>
|
|
</View>
|
|
<Toggle
|
|
value={smsNotifications}
|
|
onValueChange={setSmsNotifications}
|
|
/>
|
|
</View>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* In-app notifications */}
|
|
<View className="p-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Bell size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
In-app notifications
|
|
</Text>
|
|
</View>
|
|
<Toggle
|
|
value={pushNotifications}
|
|
onValueChange={setPushNotifications}
|
|
/>
|
|
</View>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Email notifications */}
|
|
<View className="p-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Bell size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
Email notifications
|
|
</Text>
|
|
</View>
|
|
<Toggle
|
|
value={emailNotifications}
|
|
onValueChange={setEmailNotifications}
|
|
/>
|
|
</View>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Biometric Login (Face ID) */}
|
|
<View className="p-4 flex-row items-center justify-between">
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<ScanFace size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
Biometric Login
|
|
</Text>
|
|
</View>
|
|
<Toggle value={faceID} onValueChange={setFaceID} />
|
|
</View>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Language */}
|
|
<TouchableOpacity
|
|
onPress={() => setLanguageSheetVisible(true)}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Grid3x3 size={20} color="#000" />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
{t("profile.languageLabel")}
|
|
</Text>
|
|
<Text className="text-xs font-dmsans text-gray-500 mt-0.5">
|
|
{
|
|
languageOptions.find((opt) => opt.value === language)
|
|
?.label
|
|
}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Reports / Transaction history */}
|
|
<TouchableOpacity
|
|
onPress={handleHistory}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Settings size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900 flex-1">
|
|
View Reports
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* Change Password (placeholder) */}
|
|
<TouchableOpacity
|
|
onPress={handleChangePassword}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Grid3x3 size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
Change Password
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Divider */}
|
|
<View className="h-px bg-gray-200 mx-4" />
|
|
|
|
{/* PIN Code */}
|
|
<TouchableOpacity
|
|
onPress={handlePINCode}
|
|
className="p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<Grid3x3 size={20} color="#000" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-900">
|
|
PIN Code
|
|
</Text>
|
|
</View>
|
|
<ChevronRight size={20} color="#9CA3AF" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Logout - separate card */}
|
|
<TouchableOpacity
|
|
onPress={handleLogout}
|
|
className="bg-gray-50 rounded-2xl p-4 flex-row items-center justify-between"
|
|
activeOpacity={0.7}
|
|
>
|
|
<View className="flex-row items-center flex-1">
|
|
<View className="w-10 h-10 bg-white rounded-full items-center justify-center mr-3">
|
|
<LogOut size={20} color="#EF4444" />
|
|
</View>
|
|
<Text className="text-base font-dmsans text-red-500">Logout</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<ModalToast
|
|
visible={toastVisible}
|
|
title={toastTitle}
|
|
description={toastDescription}
|
|
variant={toastVariant}
|
|
/>
|
|
|
|
<BottomSheet
|
|
visible={languageSheetVisible}
|
|
onClose={() => setLanguageSheetVisible(false)}
|
|
maxHeightRatio={0.4}
|
|
>
|
|
<View className="w-full py-2">
|
|
{languageOptions.map((opt) => {
|
|
const selected = language === opt.value;
|
|
return (
|
|
<TouchableOpacity
|
|
key={opt.value}
|
|
activeOpacity={0.8}
|
|
onPress={() => {
|
|
setLanguage(opt.value as any);
|
|
setLanguageSheetVisible(false);
|
|
}}
|
|
className="py-3 flex-row items-center border-b border-gray-100"
|
|
>
|
|
<View className="mr-3">
|
|
{selected ? (
|
|
<View className="w-4 h-4 rounded-full bg-primary" />
|
|
) : (
|
|
<View className="w-4 h-4 rounded-full border border-gray-300" />
|
|
)}
|
|
</View>
|
|
<Text className="text-base font-dmsans text-gray-800">
|
|
{opt.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</BottomSheet>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|