fix: the company onboading flow

apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx

@@ -63,11 +63,13 @@ const onboardingSchema = z.object({
   renewedFrom: z.string().optional(),
   renewalDate: z.string().optional(),
   renewedTo: z.string().optional(),
-  region: z.string().optional(),
-  zone: z.string().optional(),
-  woreda: z.string().optional(),
-  kebele: z.string().optional(),
-  houseNo: z.string().optional(),
+  // Address fields are user-entered and required (the registration/license
+  // fields above are read-only confirmations pulled from eTrade).
+  region: z.string().min(1, "Region is required"),
+  zone: z.string().min(1, "Zone is required"),
+  woreda: z.string().min(1, "Woreda is required"),
+  kebele: z.string().min(1, "Kebele is required"),
+  houseNo: z.string().min(1, "House number is required"),
   etradePhone: z.string().optional(),
   contactPersonName: z.string().min(1, "Contact person name is required"),
   contactPersonPosition: z.string().optional(),
@@ -414,6 +416,22 @@ export default function CompanyProfileForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user?.email, rehydrate]);
 
+  // Keep the (hidden, derived) company address in sync with the editable address
+  // fields — so it reflects both the eTrade auto-fill and any later user edits,
+  // instead of only whatever was composed at lookup time.
+  const region = watch("region");
+  const zone = watch("zone");
+  const woreda = watch("woreda");
+  const kebele = watch("kebele");
+  const houseNo = watch("houseNo");
+  useEffect(() => {
+    const composed = [houseNo, kebele, woreda, zone, region]
+      .filter((part) => part && part.trim())
+      .join(", ");
+    setValue("companyAddress", composed);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [region, zone, woreda, kebele, houseNo]);
+
   // The business owner/manager pulled from eTrade — powers "Use owner as
   // manager" on the General Manager step. Null until a TIN lookup succeeds.
   const [etradeOwner, setEtradeOwner] = useState<{
@@ -441,18 +459,9 @@ export default function CompanyProfileForm({
       "etradePhone",
       toEthiopianE164(data.regularPhone || data.mobilePhone),
     );
-
-    // Compose a readable company address from the granular eTrade parts.
-    const addressParts = [
-      data.houseNo,
-      data.kebele,
-      data.woreda,
-      data.zone,
-      data.region,
-    ].filter((part) => part && part.trim());
-    if (addressParts.length) {
-      setValue("companyAddress", addressParts.join(", "));
-    }
+    // companyAddress is composed reactively from the address fields below, so
+    // setting region/zone/woreda/kebele/houseNo above is enough — no need to
+    // compose it here.
 
     // Pre-fill the company contact phone from eTrade's mobile number.
     const mobile = toEthiopianE164(data.mobilePhone || data.regularPhone);
@@ -497,9 +506,10 @@ export default function CompanyProfileForm({
 
   const hasDocuments = Boolean(uploadSetting?.fields?.length);
 
-  // Registration + address details come straight from the eTrade lookup and are
-  // not user-editable — only shown once a TIN lookup (or rehydration) has filled
-  // them in. We watch the values so the read-only display reflects the latest.
+  // The registration/license details come straight from the eTrade lookup and
+  // are not user-editable — shown as a read-only confirmation once a TIN lookup
+  // (or rehydration) has filled them in. The address fields below are separate:
+  // user-entered and required. We watch the values so the display stays current.
   const registration = watch([
     "licenceNumber",
     "statusDescription",
@@ -507,12 +517,6 @@ export default function CompanyProfileForm({
     "renewalDate",
     "renewedFrom",
     "renewedTo",
-    "region",
-    "zone",
-    "woreda",
-    "kebele",
-    "houseNo",
-    "etradePhone",
   ]);
   const hasRegistrationDetails = registration.some((v) => v && v.trim());
 
@@ -682,20 +686,59 @@ export default function CompanyProfileForm({
                       value={watch("renewedTo")}
                     />
                   </SimpleGrid>
-
-                  <Text fw={600} size="sm" c="edr-text" mt="md">
-                    Address Information
-                  </Text>
-                  <SimpleGrid cols={2} spacing="md">
-                    <ReadOnlyField label="Region" value={watch("region")} />
-                    <ReadOnlyField label="Zone" value={watch("zone")} />
-                    <ReadOnlyField label="Woreda" value={watch("woreda")} />
-                    <ReadOnlyField label="Kebele" value={watch("kebele")} />
-                    <ReadOnlyField label="House No" value={watch("houseNo")} />
-                    <ReadOnlyField label="Phone" value={watch("etradePhone")} />
-                  </SimpleGrid>
                 </>
               )}
+
+              <Divider my="sm" />
+              <Text fw={600} size="sm" c="edr-text">
+                Address Information
+              </Text>
+              <SimpleGrid cols={2} spacing="md">
+                <TextInput
+                  label="Region"
+                  placeholder="Tigray"
+                  required
+                  error={errors.region?.message}
+                  {...register("region")}
+                />
+                <TextInput
+                  label="Zone"
+                  placeholder="EASTERN TIGRAY"
+                  required
+                  error={errors.zone?.message}
+                  {...register("zone")}
+                />
+              </SimpleGrid>
+              <SimpleGrid cols={2} spacing="md">
+                <TextInput
+                  label="Woreda"
+                  placeholder="EROB"
+                  required
+                  error={errors.woreda?.message}
+                  {...register("woreda")}
+                />
+                <TextInput
+                  label="Kebele"
+                  placeholder="ARAS"
+                  required
+                  error={errors.kebele?.message}
+                  {...register("kebele")}
+                />
+              </SimpleGrid>
+              <SimpleGrid cols={2} spacing="md">
+                <TextInput
+                  label="House No"
+                  placeholder="House Number"
+                  required
+                  error={errors.houseNo?.message}
+                  {...register("houseNo")}
+                />
+                <ControlledPhoneField
+                  control={control}
+                  name="etradePhone"
+                  label="Phone"
+                />
+              </SimpleGrid>
             </>
           )}