mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
feat(api): Introduce dedicated company management API and service
This commit is contained in:
ghost2023
@@ -79,6 +79,11 @@ export const URL_CONSTANTS = {
|
||||
BY_USER_ID: (id: string) => `/api/customers/user/${id}`,
|
||||
},
|
||||
|
||||
COMPANIES_API: {
|
||||
GET_INFO: "/api/companies/getInfo",
|
||||
CREATE: "/api/companies/create",
|
||||
},
|
||||
|
||||
BOOKINGS: {
|
||||
BASE: "/bookings",
|
||||
BY_ID: (id: string | number) => `/bookings/${id}`,
|
||||
|
||||
@@ -35,9 +35,8 @@ const useAuth = () => {
|
||||
}),
|
||||
);
|
||||
|
||||
const customerQuery = useQuery(
|
||||
api.customers.getByUserId.queryOptions({
|
||||
input: { id: authQuery.data?.id ?? "" },
|
||||
const companyQuery = useQuery(
|
||||
api.companies.getInfo.queryOptions({
|
||||
enabled: !!authQuery.data?.id,
|
||||
retry: false,
|
||||
staleTime: 10 * 60 * 1000,
|
||||
@@ -48,12 +47,12 @@ const useAuth = () => {
|
||||
useEffect(() => {
|
||||
console.log({
|
||||
user: authQuery.data,
|
||||
customer: customerQuery.data,
|
||||
isCustomer: !!customerQuery.data,
|
||||
company: companyQuery.data,
|
||||
isCompany: !!companyQuery.data,
|
||||
isUserPending: authQuery.isPending,
|
||||
isCustomerPending: customerQuery.isPending,
|
||||
isCompanyPending: companyQuery.isPending,
|
||||
});
|
||||
}, [authQuery, customerQuery]);
|
||||
}, [authQuery, companyQuery]);
|
||||
|
||||
const hasToken = !!getCookie("auth-token");
|
||||
const isPending = authQuery.isPending && hasToken;
|
||||
@@ -180,7 +179,8 @@ const useAuth = () => {
|
||||
return {
|
||||
isPending,
|
||||
user: authQuery.data ?? null,
|
||||
customer: customerQuery.data ?? null,
|
||||
company: companyQuery.data ?? null,
|
||||
customer: companyQuery.data ?? null,
|
||||
login,
|
||||
signup,
|
||||
setPassword,
|
||||
@@ -189,7 +189,8 @@ const useAuth = () => {
|
||||
generateVerificationCode,
|
||||
logout,
|
||||
authQuery,
|
||||
customerQuery,
|
||||
companyQuery,
|
||||
customerQuery: companyQuery,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
@@ -11,10 +12,12 @@ import {
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
ChevronLeft,
|
||||
UploadCloud,
|
||||
} from "lucide-react";
|
||||
import type { OnboardingUserType } from "./types";
|
||||
import type { AuthUser } from "@/types/auth";
|
||||
import type { CreateCustomerDto } from "@/types/customers";
|
||||
import type { CreateCompanyPayload } from "@/services/companies.service";
|
||||
import type { FileUploadSetting } from "@/types/fileUploadSettings";
|
||||
import PhoneInput from "@/components/auth/PhoneInput";
|
||||
import {
|
||||
Button,
|
||||
@@ -23,9 +26,11 @@ import {
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
SmartFileInput,
|
||||
} from "@edr/ui-common";
|
||||
import { api } from "@/services/api";
|
||||
|
||||
type CompanyStep = "company" | "personnel" | "poa";
|
||||
type CompanyStep = "company" | "personnel" | "poa" | "documents";
|
||||
|
||||
const onboardingSchema = z.object({
|
||||
companyName: z.string().min(1, "Company name is required"),
|
||||
@@ -79,55 +84,34 @@ const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
|
||||
"generalManagerPhoneCountryCode",
|
||||
],
|
||||
poa: [],
|
||||
documents: [],
|
||||
};
|
||||
|
||||
const POA_FIELDS: (keyof FormData)[] = [
|
||||
"poaName",
|
||||
"poaPhone",
|
||||
"poaPhoneCountryCode",
|
||||
"poaAddress",
|
||||
"poaEmail",
|
||||
"poaLocation",
|
||||
];
|
||||
|
||||
const POA_LABELS: Record<string, string> = {
|
||||
poaName: "PoA name",
|
||||
poaPhone: "PoA phone",
|
||||
poaPhoneCountryCode: "PoA country code",
|
||||
poaAddress: "PoA address",
|
||||
poaEmail: "PoA email",
|
||||
poaLocation: "PoA location",
|
||||
};
|
||||
|
||||
function buildPayload(data: FormData, user: AuthUser): CreateCustomerDto {
|
||||
const nameParts = (user.name?.en ?? "").split(" ");
|
||||
function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
|
||||
return {
|
||||
userId: user.id,
|
||||
firstName: nameParts[0] || "",
|
||||
lastName: nameParts.slice(-1)[0] || "",
|
||||
email: user.email,
|
||||
phone: user.phoneNumber,
|
||||
companyName: data.companyName,
|
||||
companyEmail: data.companyEmail,
|
||||
companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
|
||||
companyLocation: data.companyLocation,
|
||||
companyAddress: data.companyAddress,
|
||||
contactPersonName: data.contactPersonName,
|
||||
contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
|
||||
tinNumber: data.tinNumber,
|
||||
tin: data.tinNumber,
|
||||
vatNumber: data.vatNumber,
|
||||
fanNumber: data.fanNumber,
|
||||
generalManagerName: data.generalManagerName,
|
||||
generalManagerEmail: data.generalManagerEmail,
|
||||
generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
|
||||
poaName: data.poaName || undefined,
|
||||
poaPhone:
|
||||
data.poaPhone && data.poaPhoneCountryCode
|
||||
? `${data.poaPhoneCountryCode}${data.poaPhone}`
|
||||
: undefined,
|
||||
poaAddress: data.poaAddress || undefined,
|
||||
poaEmail: data.poaEmail || undefined,
|
||||
poaLocation: data.poaLocation || undefined,
|
||||
attributes: {
|
||||
contactPersonName: data.contactPersonName,
|
||||
contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
|
||||
generalManagerName: data.generalManagerName,
|
||||
generalManagerEmail: data.generalManagerEmail,
|
||||
generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
|
||||
poaName: data.poaName || undefined,
|
||||
poaPhone:
|
||||
data.poaPhone && data.poaPhoneCountryCode
|
||||
? `${data.poaPhoneCountryCode}${data.poaPhone}`
|
||||
: undefined,
|
||||
poaAddress: data.poaAddress || undefined,
|
||||
poaEmail: data.poaEmail || undefined,
|
||||
poaLocation: data.poaLocation || undefined,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -140,21 +124,26 @@ export default function CompanyProfileForm({
|
||||
}: {
|
||||
userType: OnboardingUserType;
|
||||
user: AuthUser;
|
||||
onSubmit: (data: CreateCustomerDto) => void;
|
||||
onSubmit: (data: CreateCompanyPayload) => void;
|
||||
isPending: boolean;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
const requirePoA = userType === "freight-forwarder-et";
|
||||
|
||||
const [step, setStep] = useState<CompanyStep>("company");
|
||||
const [documentFiles, setDocumentFiles] = useState<
|
||||
Record<string, File | File[] | null>
|
||||
>({});
|
||||
|
||||
const { data: uploadSettings = [], isLoading: loadingDocuments } = useQuery(
|
||||
api.fileUploadSettings.getByEntity.queryOptions({
|
||||
input: { entity: "customer" },
|
||||
refetchOnMount: false,
|
||||
}),
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
trigger,
|
||||
setError,
|
||||
clearErrors,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(onboardingSchema),
|
||||
@@ -184,26 +173,18 @@ export default function CompanyProfileForm({
|
||||
},
|
||||
});
|
||||
|
||||
const hasDocuments = uploadSettings.length > 0;
|
||||
|
||||
const nextStep = async () => {
|
||||
if (step === "poa") {
|
||||
if (requirePoA) {
|
||||
clearErrors(POA_FIELDS);
|
||||
const values = getValues();
|
||||
let hasError = false;
|
||||
for (const field of POA_FIELDS) {
|
||||
const val = values[field];
|
||||
if (!val || val.toString().trim().length === 0) {
|
||||
setError(field, {
|
||||
message: `${
|
||||
POA_LABELS[field].charAt(0).toUpperCase() +
|
||||
POA_LABELS[field].slice(1)
|
||||
} is required for Freight Forwarders`,
|
||||
});
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
if (hasError) return;
|
||||
if (hasDocuments) {
|
||||
setStep("documents");
|
||||
} else {
|
||||
handleSubmit((data) => onSubmit(buildPayload(data, user)))();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (step === "documents") {
|
||||
handleSubmit((data) => onSubmit(buildPayload(data, user)))();
|
||||
return;
|
||||
}
|
||||
@@ -220,6 +201,8 @@ export default function CompanyProfileForm({
|
||||
setStep("company");
|
||||
} else if (step === "poa") {
|
||||
setStep("personnel");
|
||||
} else {
|
||||
setStep("poa");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -250,14 +233,21 @@ export default function CompanyProfileForm({
|
||||
<StepIcon
|
||||
icon={<FileText className="size-5" />}
|
||||
active={step === "poa"}
|
||||
completed={false}
|
||||
completed={hasDocuments ? step === "documents" : step === "personnel"}
|
||||
/>
|
||||
{hasDocuments && (
|
||||
<StepIcon
|
||||
icon={<UploadCloud className="size-5" />}
|
||||
active={step === "documents"}
|
||||
completed={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-center text-sm text-muted-foreground mt-3">
|
||||
{step === "company" && "Step 1 of 3 — Company Information"}
|
||||
{step === "personnel" && "Step 2 of 3 — Personnel Details"}
|
||||
{step === "poa" &&
|
||||
`Step 3 of 3 — Power of Attorney ${requirePoA ? "(Required)" : "(Optional)"}`}
|
||||
{step === "company" && `Step 1 of ${hasDocuments ? 4 : 3} — Company Information`}
|
||||
{step === "personnel" && `Step 2 of ${hasDocuments ? 4 : 3} — Personnel Details`}
|
||||
{step === "poa" && `Step 3 of ${hasDocuments ? 4 : 3} — Power of Attorney (Optional)`}
|
||||
{step === "documents" && "Step 4 of 4 — Upload Documents (Optional)"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -449,16 +439,12 @@ export default function CompanyProfileForm({
|
||||
{step === "poa" && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{requirePoA
|
||||
? "Power of Attorney details are required for Freight Forwarder registration."
|
||||
: "Power of Attorney details are optional. Skip if not applicable."}
|
||||
Power of Attorney details are optional. Fill them in if you have
|
||||
them, or skip to continue.
|
||||
</p>
|
||||
|
||||
<Field data-invalid={Boolean(errors.poaName)}>
|
||||
<FieldLabel>
|
||||
PoA Name
|
||||
{requirePoA && <span className="text-destructive ml-1">*</span>}
|
||||
</FieldLabel>
|
||||
<FieldLabel>PoA Name</FieldLabel>
|
||||
<Input
|
||||
placeholder="Authorized Representative Name"
|
||||
aria-invalid={Boolean(errors.poaName)}
|
||||
@@ -469,10 +455,7 @@ export default function CompanyProfileForm({
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.poaEmail)}>
|
||||
<FieldLabel>
|
||||
PoA Email
|
||||
{requirePoA && <span className="text-destructive ml-1">*</span>}
|
||||
</FieldLabel>
|
||||
<FieldLabel>PoA Email</FieldLabel>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="poa@company.com"
|
||||
@@ -485,7 +468,7 @@ export default function CompanyProfileForm({
|
||||
<PhoneInput
|
||||
countryCode={{ ...register("poaPhoneCountryCode") }}
|
||||
phone={{ ...register("poaPhone"), placeholder: "912345678" }}
|
||||
label={`PoA Phone${requirePoA ? " *" : ""}`}
|
||||
label="PoA Phone"
|
||||
countryCodeError={errors.poaPhoneCountryCode}
|
||||
phoneError={errors.poaPhone}
|
||||
/>
|
||||
@@ -493,10 +476,7 @@ export default function CompanyProfileForm({
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field data-invalid={Boolean(errors.poaLocation)}>
|
||||
<FieldLabel>
|
||||
PoA Location
|
||||
{requirePoA && <span className="text-destructive ml-1">*</span>}
|
||||
</FieldLabel>
|
||||
<FieldLabel>PoA Location</FieldLabel>
|
||||
<Input
|
||||
placeholder="City, Country"
|
||||
aria-invalid={Boolean(errors.poaLocation)}
|
||||
@@ -506,10 +486,7 @@ export default function CompanyProfileForm({
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.poaAddress)}>
|
||||
<FieldLabel>
|
||||
PoA Address
|
||||
{requirePoA && <span className="text-destructive ml-1">*</span>}
|
||||
</FieldLabel>
|
||||
<FieldLabel>PoA Address</FieldLabel>
|
||||
<Input
|
||||
placeholder="Full Address"
|
||||
aria-invalid={Boolean(errors.poaAddress)}
|
||||
@@ -520,6 +497,36 @@ export default function CompanyProfileForm({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === "documents" && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Upload required documents for your registration. You can skip
|
||||
this step and upload later from your account settings.
|
||||
</p>
|
||||
|
||||
{loadingDocuments ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="size-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : uploadSettings.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
No document requirements found for your account type.
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
{uploadSettings.map((setting) => (
|
||||
<SmartFileInput
|
||||
key={setting.id}
|
||||
file={setting}
|
||||
value={documentFiles}
|
||||
onChange={setDocumentFiles}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</FieldGroup>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
@@ -534,7 +541,7 @@ export default function CompanyProfileForm({
|
||||
<Loader2 className="animate-spin" />
|
||||
Submitting...
|
||||
</>
|
||||
) : step === "poa" ? (
|
||||
) : step === "documents" ? (
|
||||
"Complete Registration"
|
||||
) : (
|
||||
<>
|
||||
@@ -560,13 +567,12 @@ function StepIcon({
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all ${
|
||||
completed
|
||||
className={`relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all ${completed
|
||||
? "bg-primary border-primary text-primary-foreground"
|
||||
: active
|
||||
? "bg-background border-primary text-primary shadow-md"
|
||||
: "bg-background border-border text-muted-foreground"
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{completed ? <CheckCircle2 className="size-5" /> : icon}
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
ChevronLeft,
|
||||
} from "lucide-react";
|
||||
import type { AuthUser } from "@/types/auth";
|
||||
import type { CreateCustomerDto } from "@/types/customers";
|
||||
import type { CreateCompanyPayload } from "@/services/companies.service";
|
||||
import PhoneInput from "@/components/auth/PhoneInput";
|
||||
import {
|
||||
Button,
|
||||
@@ -45,27 +45,21 @@ const stepLabels: Record<DjiboutiStep, string> = {
|
||||
representative: "Step 2 of 2 — Representative Details",
|
||||
};
|
||||
|
||||
function buildPayload(data: FormData, user: AuthUser): CreateCustomerDto {
|
||||
const nameParts = (user.name?.en ?? "").split(" ");
|
||||
function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
|
||||
return {
|
||||
userId: user.id,
|
||||
firstName: nameParts[0] || "",
|
||||
lastName: nameParts.slice(-1)[0] || "",
|
||||
email: user.email,
|
||||
phone: user.phoneNumber,
|
||||
companyName: data.companyName,
|
||||
companyEmail: data.companyEmail,
|
||||
companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
|
||||
companyLocation: data.companyLocation,
|
||||
companyAddress: data.companyAddress,
|
||||
contactPersonName: data.repName,
|
||||
contactPersonPhone: `${data.repPhoneCountryCode}${data.repPhone}`,
|
||||
tinNumber: "",
|
||||
tin: "",
|
||||
vatNumber: "",
|
||||
fanNumber: "",
|
||||
generalManagerName: "",
|
||||
generalManagerEmail: "",
|
||||
generalManagerPhone: "",
|
||||
attributes: {
|
||||
repName: data.repName,
|
||||
repEmail: data.repEmail,
|
||||
repPhone: `${data.repPhoneCountryCode}${data.repPhone}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -76,7 +70,7 @@ export default function DjiboutiAgentForm({
|
||||
onBack,
|
||||
}: {
|
||||
user: AuthUser;
|
||||
onSubmit: (data: CreateCustomerDto) => void;
|
||||
onSubmit: (data: CreateCompanyPayload) => void;
|
||||
isPending: boolean;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowDownToLine,
|
||||
ArrowUpFromLine,
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import { api } from "@/services/api";
|
||||
import type { CreateCustomerDto } from "@/types/customers";
|
||||
import type { CreateCompanyPayload } from "@/services/companies.service";
|
||||
import AuthLayout from "@/components/auth/AuthLayout";
|
||||
import CompanyProfileForm from "./CompanyProfileForm";
|
||||
import DjiboutiAgentForm from "./DjiboutiAgentForm";
|
||||
@@ -23,40 +23,37 @@ const USER_TYPE_CARDS: {
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
}[] = [
|
||||
{
|
||||
id: "importer",
|
||||
label: "Importer",
|
||||
description: "Import goods into Ethiopia via the railway corridor.",
|
||||
icon: <ArrowDownToLine className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "exporter",
|
||||
label: "Exporter",
|
||||
description: "Export goods from Ethiopia via rail.",
|
||||
icon: <ArrowUpFromLine className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "freight-forwarder-et",
|
||||
label: "Freight Forwarder (Ethiopia)",
|
||||
description:
|
||||
"Ethiopian freight forwarding company handling client cargo.",
|
||||
icon: <Building2 className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "freight-forwarder-dj",
|
||||
label: "FF Agent (Djibouti)",
|
||||
description:
|
||||
"Djibouti-based agent coordinating cross-border logistics.",
|
||||
icon: <Ship className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "transporter",
|
||||
label: "Transporter",
|
||||
description:
|
||||
"Trucking company providing first/last-mile services.",
|
||||
icon: <Truck className="size-6" />,
|
||||
},
|
||||
];
|
||||
{
|
||||
id: "importer",
|
||||
label: "Importer",
|
||||
description: "Import goods into Ethiopia via the railway corridor.",
|
||||
icon: <ArrowDownToLine className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "exporter",
|
||||
label: "Exporter",
|
||||
description: "Export goods from Ethiopia via rail.",
|
||||
icon: <ArrowUpFromLine className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "freight-forwarder-et",
|
||||
label: "Freight Forwarder (Ethiopia)",
|
||||
description: "Ethiopian freight forwarding company handling client cargo.",
|
||||
icon: <Building2 className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "freight-forwarder-dj",
|
||||
label: "FF Agent (Djibouti)",
|
||||
description: "Djibouti-based agent coordinating cross-border logistics.",
|
||||
icon: <Ship className="size-6" />,
|
||||
},
|
||||
{
|
||||
id: "transporter",
|
||||
label: "Transporter",
|
||||
description: "Trucking company providing first/last-mile services.",
|
||||
icon: <Truck className="size-6" />,
|
||||
},
|
||||
];
|
||||
|
||||
const USER_TYPE_LEFT_MAP: Record<
|
||||
OnboardingUserType,
|
||||
@@ -121,21 +118,39 @@ export default function OnboardingPage() {
|
||||
const { user } = useAuth();
|
||||
const [userType, setUserType] = useState<OnboardingUserType | null>(null);
|
||||
|
||||
const createCustomerMutation = useMutation({
|
||||
mutationFn: (payload: CreateCustomerDto) =>
|
||||
api.customers.create.call(payload),
|
||||
useQuery(
|
||||
api.fileUploadSettings.getByEntity.queryOptions({
|
||||
input: { entity: "customer" },
|
||||
refetchOnMount: false,
|
||||
}),
|
||||
);
|
||||
|
||||
const COMPANY_TYPE_MAP: Record<OnboardingUserType, string> = {
|
||||
importer: "customer",
|
||||
exporter: "customer",
|
||||
"freight-forwarder-et": "forwarder",
|
||||
"freight-forwarder-dj": "forwarder",
|
||||
transporter: "transporter",
|
||||
};
|
||||
|
||||
const createCompanyMutation = useMutation({
|
||||
mutationFn: (payload: CreateCompanyPayload) =>
|
||||
api.companies.create.call(payload),
|
||||
onSuccess: () => {
|
||||
if (user)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: api.customers.getByUserId.queryKey({ id: user.id }),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: api.companies.getInfo.queryKey(),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const handleSubmit = (payload: CreateCustomerDto) => {
|
||||
createCustomerMutation.mutate(payload);
|
||||
const handleSubmit = (payload: CreateCompanyPayload) => {
|
||||
const enriched: CreateCompanyPayload = {
|
||||
...payload,
|
||||
companyType: COMPANY_TYPE_MAP[userType!],
|
||||
};
|
||||
createCompanyMutation.mutate(enriched);
|
||||
};
|
||||
|
||||
const handleSelectType = (type: OnboardingUserType) => {
|
||||
@@ -172,9 +187,7 @@ export default function OnboardingPage() {
|
||||
{card.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">
|
||||
{card.label}
|
||||
</p>
|
||||
<p className="font-semibold text-foreground">{card.label}</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground leading-relaxed">
|
||||
{card.description}
|
||||
</p>
|
||||
@@ -197,21 +210,21 @@ export default function OnboardingPage() {
|
||||
features:
|
||||
userType === "transporter"
|
||||
? [
|
||||
"Vehicle & fleet registration",
|
||||
"TIN & FAN verification",
|
||||
"First-mile / Last-mile eligibility",
|
||||
]
|
||||
"Vehicle & fleet registration",
|
||||
"TIN & FAN verification",
|
||||
"First-mile / Last-mile eligibility",
|
||||
]
|
||||
: userType === "freight-forwarder-dj"
|
||||
? [
|
||||
"Company details",
|
||||
"Representative information",
|
||||
"Cross-border operations",
|
||||
]
|
||||
"Company details",
|
||||
"Representative information",
|
||||
"Cross-border operations",
|
||||
]
|
||||
: [
|
||||
"Company registration details",
|
||||
"Contact and management personnel",
|
||||
"Power of Attorney (optional)",
|
||||
],
|
||||
"Company registration details",
|
||||
"Contact and management personnel",
|
||||
"Power of Attorney (optional)",
|
||||
],
|
||||
stats: {
|
||||
label: "Active Customers",
|
||||
value: "500+",
|
||||
@@ -226,14 +239,14 @@ export default function OnboardingPage() {
|
||||
<TransporterForm
|
||||
user={user}
|
||||
onSubmit={handleSubmit}
|
||||
isPending={createCustomerMutation.isPending}
|
||||
isPending={createCompanyMutation.isPending}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
) : userType === "freight-forwarder-dj" ? (
|
||||
<DjiboutiAgentForm
|
||||
user={user}
|
||||
onSubmit={handleSubmit}
|
||||
isPending={createCustomerMutation.isPending}
|
||||
isPending={createCompanyMutation.isPending}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
) : (
|
||||
@@ -241,7 +254,7 @@ export default function OnboardingPage() {
|
||||
userType={userType}
|
||||
user={user}
|
||||
onSubmit={handleSubmit}
|
||||
isPending={createCustomerMutation.isPending}
|
||||
isPending={createCompanyMutation.isPending}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
Info,
|
||||
} from "lucide-react";
|
||||
import type { AuthUser } from "@/types/auth";
|
||||
import type { CreateCustomerDto } from "@/types/customers";
|
||||
import type { CreateCompanyPayload } from "@/services/companies.service";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
@@ -56,34 +56,23 @@ const transporterSchema = z
|
||||
|
||||
type FormData = z.infer<typeof transporterSchema>;
|
||||
|
||||
function buildPayload(data: FormData, user: AuthUser): CreateCustomerDto {
|
||||
const nameParts = (user.name?.en ?? "").split(" ");
|
||||
function buildPayload(data: FormData, user: AuthUser): CreateCompanyPayload {
|
||||
return {
|
||||
userId: user.id,
|
||||
firstName: nameParts[0] || "",
|
||||
lastName: nameParts.slice(-1)[0] || "",
|
||||
email: user.email,
|
||||
phone: user.phoneNumber,
|
||||
companyName: "",
|
||||
companyEmail: "",
|
||||
companyPhone: "",
|
||||
companyName: user.name?.en ?? "",
|
||||
companyEmail: user.email,
|
||||
companyPhone: user.phoneNumber,
|
||||
companyLocation: "",
|
||||
companyAddress: "",
|
||||
contactPersonName: "",
|
||||
contactPersonPhone: "",
|
||||
tinNumber: data.tinNumber,
|
||||
tin: data.tinNumber,
|
||||
vatNumber: "",
|
||||
fanNumber: data.fanNumber,
|
||||
generalManagerName: "",
|
||||
generalManagerEmail: "",
|
||||
generalManagerPhone: "",
|
||||
notes: JSON.stringify({
|
||||
attributes: {
|
||||
truckType: data.truckType,
|
||||
plateNumber: data.plateNumber,
|
||||
plateNumber2: data.plateNumber2 || null,
|
||||
vehicleModel: data.vehicleModel,
|
||||
yearOfManufacturing: data.yearOfManufacturing,
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -94,7 +83,7 @@ export default function TransporterForm({
|
||||
onBack,
|
||||
}: {
|
||||
user: AuthUser;
|
||||
onSubmit: (data: CreateCustomerDto) => void;
|
||||
onSubmit: (data: CreateCompanyPayload) => void;
|
||||
isPending: boolean;
|
||||
onBack: () => void;
|
||||
}) {
|
||||
|
||||
@@ -15,6 +15,7 @@ import { fileUploadSettingsService } from "./fileUploadSettings.service";
|
||||
import { dropdownSettingsService } from "./dropdownSettings.service";
|
||||
import { authService } from "./auth.service";
|
||||
import { customersService } from "./customers.service";
|
||||
import { companiesService } from "./companies.service";
|
||||
import {
|
||||
CreateDropdownOptionDto,
|
||||
CreateDropdownSettingDto,
|
||||
@@ -28,6 +29,10 @@ import {
|
||||
Customer,
|
||||
UpdateCustomerDto,
|
||||
} from "@/types/customers";
|
||||
import type {
|
||||
CompanyInfoResponse,
|
||||
CreateCompanyPayload,
|
||||
} from "./companies.service";
|
||||
import type {
|
||||
AuthUser,
|
||||
GenerateVerificationCodePayload,
|
||||
@@ -118,6 +123,20 @@ export const api = {
|
||||
),
|
||||
},
|
||||
|
||||
companies: {
|
||||
getInfo: endpoint<void, CompanyInfoResponse | null>(
|
||||
"companies",
|
||||
"getInfo",
|
||||
companiesService.getInfo,
|
||||
),
|
||||
|
||||
create: endpoint<CreateCompanyPayload, CompanyInfoResponse>(
|
||||
"companies",
|
||||
"create",
|
||||
companiesService.create,
|
||||
),
|
||||
},
|
||||
|
||||
bookings: {
|
||||
list: endpoint<void, PaginatedResponse<Freight.IBooking>>(
|
||||
"bookings",
|
||||
@@ -190,6 +209,12 @@ export const api = {
|
||||
({ code }) => fileUploadSettingsService.getByCode(code),
|
||||
),
|
||||
|
||||
getByEntity: endpoint<{ entity: string }, FileUploadSetting[]>(
|
||||
"file-upload-settings",
|
||||
"getByEntity",
|
||||
({ entity }) => fileUploadSettingsService.getByEntity(entity),
|
||||
),
|
||||
|
||||
create: endpoint<CreateFileUploadSettingDto, FileUploadSetting>(
|
||||
"file-upload-settings",
|
||||
"create",
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { client } from "@/utils/api";
|
||||
import { unwrap } from "@/utils/endpoint";
|
||||
import { URL_CONSTANTS } from "@/constants/URLS";
|
||||
import type { ApiResponse } from "@/types/apiResponse";
|
||||
import { isAxiosError } from "axios";
|
||||
|
||||
export interface ExternalProfileResponse {
|
||||
id: string;
|
||||
userId: string;
|
||||
companyId: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string | null;
|
||||
nationalId: string | null;
|
||||
jobTitle: string | null;
|
||||
isPrimaryContact: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CompanyResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
status: string;
|
||||
tin: string;
|
||||
vatNumber: string | null;
|
||||
businessLicense: string | null;
|
||||
fanNumber: string | null;
|
||||
country: string;
|
||||
address: string | null;
|
||||
phone: string | null;
|
||||
email: string | null;
|
||||
website: string | null;
|
||||
attributes: Record<string, any> | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CompanyInfoResponse {
|
||||
profile: ExternalProfileResponse;
|
||||
company: CompanyResponse;
|
||||
}
|
||||
|
||||
export interface CreateCompanyPayload {
|
||||
companyType?: string;
|
||||
companyName: string;
|
||||
companyEmail?: string;
|
||||
companyPhone?: string;
|
||||
companyLocation?: string;
|
||||
companyAddress?: string;
|
||||
tin?: string;
|
||||
vatNumber?: string;
|
||||
fanNumber?: string;
|
||||
jobTitle?: string;
|
||||
isPrimaryContact?: boolean;
|
||||
attributes?: Record<string, any>;
|
||||
}
|
||||
|
||||
export const companiesService = {
|
||||
getInfo: async (): Promise<CompanyInfoResponse | null> => {
|
||||
try {
|
||||
const response = await client.get<ApiResponse<CompanyInfoResponse>>(
|
||||
URL_CONSTANTS.COMPANIES_API.GET_INFO,
|
||||
);
|
||||
return unwrap(response.data);
|
||||
} catch (e) {
|
||||
if (isAxiosError(e) && e.response?.status === 404) {
|
||||
return null;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
|
||||
create: async (payload: CreateCompanyPayload): Promise<CompanyInfoResponse> => {
|
||||
const response = await client.post<ApiResponse<CompanyInfoResponse>>(
|
||||
URL_CONSTANTS.COMPANIES_API.CREATE,
|
||||
payload,
|
||||
);
|
||||
return unwrap(response.data);
|
||||
},
|
||||
};
|
||||
@@ -43,6 +43,14 @@ export const fileUploadSettingsService = {
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
// GET /file-upload-settings/by-entity/:entity
|
||||
getByEntity: async (entity: string): Promise<FileUploadSetting[]> => {
|
||||
const response = await client.get<ApiResponse<FileUploadSetting[]>>(
|
||||
`${BASE}/by-entity/${encodeURIComponent(entity)}`,
|
||||
);
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
// GET /file-upload-settings/by-code/:code
|
||||
getByCode: async (code: string): Promise<FileUploadSetting> => {
|
||||
const response = await client.get<ApiResponse<FileUploadSetting>>(
|
||||
|
||||
Reference in New Issue
Block a user