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,7 +1,13 @@
 import { app, adminApp } from "@/firebase";
 import { AgentUser } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import {collection, getDocs, getFirestore, query, where} from "firebase/firestore";
+import {
+  collection,
+  getDocs,
+  getFirestore,
+  query,
+  where,
+} from "firebase/firestore";
 import { getAuth } from "firebase-admin/auth";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { NextApiRequest, NextApiResponse } from "next";
@@ -19,16 +25,24 @@ interface Contact {
 async function get(req: NextApiRequest, res: NextApiResponse) {
   const { language = "en" } = req.query as { language: string };
 
-	const usersQuery = query(collection(db, "users"), where("type", "==", "agent"));
+  const usersQuery = query(
+    collection(db, "users"),
+    where("type", "==", "agent"),
+  );
   const docsUser = await getDocs(usersQuery);
 
   const docs = docsUser.docs.map((doc) => doc.data() as AgentUser);
 
-	const data = docs.reduce((acc: Record<string, Contact[]>, user: AgentUser) => {
+  const data = docs.reduce(
+    (acc: Record<string, Contact[]>, user: AgentUser) => {
       const countryCode = user.demographicInformation?.country as string;
       const currentValues = acc[countryCode] || ([] as Contact[]);
       const newUser = {
-			name: user.agentInformation?.companyName || user.name,
+        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;
@@ -36,10 +50,15 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
         ...acc,
         [countryCode]: [...currentValues, newUser],
       };
-	}, {}) as Record<string, Contact[]>;
+    },
+    {},
+  ) as Record<string, Contact[]>;
 
   const result = Object.keys(data).map((code) => {
-		const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+    const country = countryCodes.findOne(
+      "countryCode" as any,
+      code.toUpperCase(),
+    );
     if (!country) return null;
     const key = language === "ar" ? "countryNameLocal" : "countryNameEn";
     return {

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>(