import React, { useState } from "react";
import { View, Pressable, TextInput, StyleSheet } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { useColorScheme } from "nativewind";
import { api } from "@/lib/api";
import { AppRoutes } from "@/lib/routes";
import { toast } from "@/lib/toast-store";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { FormFlow } from "@/components/FormFlow";
import { Text } from "@/components/ui/text";
const S = StyleSheet.create({
input: {
paddingHorizontal: 12,
paddingVertical: 12,
fontSize: 12,
fontWeight: "500",
borderRadius: 6,
borderWidth: 1,
textAlignVertical: "center",
},
});
function useInputColors() {
const { colorScheme } = useColorScheme();
const dark = colorScheme === "dark";
return {
bg: dark ? "rgba(30,30,30,0.8)" : "rgba(241,245,249,0.2)",
border: dark ? "rgba(255,255,255,0.08)" : "rgba(203,213,225,0.6)",
text: dark ? "#f1f5f9" : "#0f172a",
placeholder: "rgba(100,116,139,0.45)",
};
}
function Field({
label,
value,
onChangeText,
placeholder,
numeric = false,
flex,
multiline = false,
}: {
label: string;
value: string;
onChangeText: (v: string) => void;
placeholder: string;
numeric?: boolean;
flex?: number;
multiline?: boolean;
}) {
const c = useInputColors();
return (
{label}
);
}
const TYPES = ["INDIVIDUAL", "COMPANY"] as const;
const STEPS = [
{ key: "type", label: "Type" },
{ key: "details", label: "Details" },
{ key: "documents", label: "Documents" },
{ key: "notes", label: "Notes" },
{ key: "summary", label: "Summary" },
];
export default function CreateCustomerScreen() {
const nav = useSirouRouter();
const [step, setStep] = useState(0);
const [submitting, setSubmitting] = useState(false);
const c = useInputColors();
const [type, setType] = useState<"INDIVIDUAL" | "COMPANY">("INDIVIDUAL");
const [displayName, setDisplayName] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [companyName, setCompanyName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [tin, setTin] = useState("");
const [vatReg, setVatReg] = useState("");
const [businessLicense, setBusinessLicense] = useState("");
const [address, setAddress] = useState("");
const [notes, setNotes] = useState("");
const handleNext = () => {
if (step === 0 && !displayName.trim()) {
toast.error("Validation", "Display name is required");
return;
}
if (step === 1 && type === "INDIVIDUAL" && !firstName.trim()) {
toast.error("Validation", "First name is required");
return;
}
if (step === 1 && type === "COMPANY" && !companyName.trim()) {
toast.error("Validation", "Company name is required");
return;
}
setStep(step + 1);
};
const handleSubmit = async () => {
const body: Record = {
type,
displayName,
email: email || undefined,
phone: phone ? `+251${phone.replace(/^\+/, "")}` : undefined,
tin: tin || undefined,
vatRegistrationNumber: vatReg || undefined,
businessLicenseNumber: businessLicense || undefined,
address: address || undefined,
firstName: firstName || undefined,
lastName: lastName || undefined,
companyName: companyName || undefined,
notes: notes || undefined,
};
Object.keys(body).forEach((k) => body[k] === undefined && delete body[k]);
try {
setSubmitting(true);
await api.customers.create({ body });
toast.success("Success", "Customer created successfully!");
nav.back();
} catch (err: any) {
toast.error("Error", err?.message || "Failed to create customer");
} finally {
setSubmitting(false);
}
};
return (
setStep(step - 1)}
onComplete={handleSubmit}
loading={submitting}
completeLabel="Create Customer"
>
{step === 0 && (
Customer Type
{TYPES.map((t) => (
setType(t)}
className={`flex-1 py-3 rounded-[6px] items-center border ${
type === t
? "bg-primary border-primary"
: "bg-card border-border"
}`}
>
{t === "INDIVIDUAL" ? "Individual" : "Company"}
))}
{type === "INDIVIDUAL" && (
)}
)}
{step === 1 && (
{type === "INDIVIDUAL" ? "Personal Details" : "Company Details"}
{type === "INDIVIDUAL" ? (
<>
Phone
+251
) : (
<>
Phone
+251
)}
)}
{step === 2 && (
Documents
)}
{step === 3 && (
)}
{step === 4 && (
Summary
Type
{type === "INDIVIDUAL" ? "Individual" : "Company"}
Display Name
{displayName}
{firstName ? (
First Name
{firstName}
) : null}
{lastName ? (
Last Name
{lastName}
) : null}
{companyName ? (
Company
{companyName}
) : null}
{email ? (
Email
{email}
) : null}
{phone ? (
Phone
+251{phone}
) : null}
{tin ? (
TIN
{tin}
) : null}
{vatReg ? (
VAT Reg
{vatReg}
) : null}
{businessLicense ? (
Business License
{businessLicense}
) : null}
{address ? (
Address
{address}
) : null}
{notes ? (
Notes
{notes}
) : null}
)}
);
}