Updated the code to name the field companyArabName and made it so it returns it when arabic

src/components/UserCard.tsx

@@ -106,7 +106,7 @@ const UserCard = ({
         : undefined,
   );
   const [arabName, setArabName] = useState(
-    user.type === "agent" ? user.agentInformation?.arabName : undefined,
+    user.type === "agent" ? user.agentInformation?.companyArabName : undefined,
   );
   const [commercialRegistration, setCommercialRegistration] = useState(
     user.type === "agent"
@@ -236,21 +236,21 @@ const UserCard = ({
         <>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
             <Input
-              label="Arab Name"
+              label="Company Name (Arabic)"
               type="text"
               name="arabName"
               onChange={setArabName}
-              placeholder="Enter their arab name"
+              placeholder="Enter their company's name in arabic"
               defaultValue={arabName}
               required
               disabled={disabled}
             />
             <Input
-              label="Company Name"
+              label="Company Name (English)"
               type="text"
               name="companyName"
               onChange={setCompanyName}
-              placeholder="Enter their company's name"
+              placeholder="Enter their company's name in english"
               defaultValue={companyName}
               required
               disabled={disabled}

src/interfaces/user.ts

@@ -77,7 +77,7 @@ export interface CorporateInformation {
 export interface AgentInformation {
   companyName: string;
   commercialRegistration: string;
-  arabName?: string;
+  companyArabName?: string;
 }
 
 export interface CompanyInformation {

src/pages/api/users/agents/[code].ts

@@ -23,12 +23,15 @@ interface Contact {
   number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const { code, language = 'en' } = req.query as { code: string, language: string};
+  const { code, language = "en" } = req.query as {
+    code: string;
+    language: string;
+  };
 
   const usersQuery = query(
     collection(db, "users"),
     where("type", "==", "agent"),
-    where("demographicInformation.country", "==", code)
+    where("demographicInformation.country", "==", code),
   );
   const docsUser = await getDocs(usersQuery);
 
@@ -36,15 +39,22 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
   const entries = docs.map((user: AgentUser) => {
     const newUser = {
-      name: user.agentInformation.companyName,
+      name:
+        (language === "en"
+          ? user.agentInformation?.companyName
+          : user.agentInformation?.companyArabName ||
+            user.agentInformation?.companyName) || user.name,
       email: user.email,
       number: user.demographicInformation?.phone as string,
     } as Contact;
     return newUser;
   }) as Contact[];
 
-  const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+  const country = countryCodes.findOne(
-  const key = language === 'ar' ? 'countryNameLocal' : 'countryNameEn';
+    "countryCode" as any,
+    code.toUpperCase(),
+  );
+  const key = language === "ar" ? "countryNameLocal" : "countryNameEn";
 
   res.json({
     label: country[key],

src/pages/api/users/agents/index.ts

@@ -1,10 +1,16 @@
-import {app, adminApp} from "@/firebase";
+import { app, adminApp } from "@/firebase";
-import {AgentUser} from "@/interfaces/user";
+import { AgentUser } from "@/interfaces/user";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
+import {
-import {getAuth} from "firebase-admin/auth";
+  collection,
-import {withIronSessionApiRoute} from "iron-session/next";
+  getDocs,
-import {NextApiRequest, NextApiResponse} from "next";
+  getFirestore,
+  query,
+  where,
+} from "firebase/firestore";
+import { getAuth } from "firebase-admin/auth";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { NextApiRequest, NextApiResponse } from "next";
 import countryCodes from "country-codes-list";
 const db = getFirestore(app);
 const auth = getAuth(adminApp);
@@ -12,46 +18,59 @@ const auth = getAuth(adminApp);
 export default withIronSessionApiRoute(user, sessionOptions);
 
 interface Contact {
-	name: string;
+  name: string;
-	email: string;
+  email: string;
-	number: string;
+  number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
-	const {language = "en"} = req.query as {language: string};
+  const { language = "en" } = req.query as { language: string };
 
-	const usersQuery = query(collection(db, "users"), where("type", "==", "agent"));
+  const usersQuery = query(
-	const docsUser = await getDocs(usersQuery);
+    collection(db, "users"),
+    where("type", "==", "agent"),
+  );
+  const docsUser = await getDocs(usersQuery);
 
-	const docs = docsUser.docs.map((doc) => doc.data() as AgentUser);
+  const docs = docsUser.docs.map((doc) => doc.data() as AgentUser);
 
-	const data = docs.reduce((acc: Record<string, Contact[]>, user: AgentUser) => {
+  const data = docs.reduce(
-		const countryCode = user.demographicInformation?.country as string;
+    (acc: Record<string, Contact[]>, user: AgentUser) => {
-		const currentValues = acc[countryCode] || ([] as Contact[]);
+      const countryCode = user.demographicInformation?.country as string;
-		const newUser = {
+      const currentValues = acc[countryCode] || ([] as Contact[]);
-			name: user.agentInformation?.companyName || user.name,
+      const newUser = {
-			email: user.email,
+        name:
-			number: user.demographicInformation?.phone as string,
+          (language === "en"
-		} as Contact;
+            ? user.agentInformation?.companyName
-		return {
+            : user.agentInformation?.companyArabName ||
-			...acc,
+              user.agentInformation?.companyName) || user.name,
-			[countryCode]: [...currentValues, newUser],
+        email: user.email,
-		};
+        number: user.demographicInformation?.phone as string,
-	}, {}) as Record<string, Contact[]>;
+      } as Contact;
+      return {
+        ...acc,
+        [countryCode]: [...currentValues, newUser],
+      };
+    },
+    {},
+  ) as Record<string, Contact[]>;
 
-	const result = Object.keys(data).map((code) => {
+  const result = Object.keys(data).map((code) => {
-		const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+    const country = countryCodes.findOne(
-		if (!country) return null;
+      "countryCode" as any,
-		const key = language === "ar" ? "countryNameLocal" : "countryNameEn";
+      code.toUpperCase(),
-		return {
+    );
-			label: country[key],
+    if (!country) return null;
-			key: code,
+    const key = language === "ar" ? "countryNameLocal" : "countryNameEn";
-			entries: data[code],
+    return {
-		};
+      label: country[key],
-	});
+      key: code,
+      entries: data[code],
+    };
+  });
 
-	res.json(result.filter((x) => !!x));
+  res.json(result.filter((x) => !!x));
 }
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
-	if (req.method === "GET") return get(req, res);
+  if (req.method === "GET") return get(req, res);
 }

src/pages/profile.tsx

@@ -151,7 +151,7 @@ function UserProfile({ user, mutateUser }: Props) {
       : undefined,
   );
   const [arabName, setArabName] = useState<string | undefined>(
-    user.type === "agent" ? user.agentInformation?.arabName : undefined,
+    user.type === "agent" ? user.agentInformation?.companyArabName : undefined,
   );
 
   const [timezone, setTimezone] = useState<string>(