refinement phase 4

client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx

@@ -8,16 +8,25 @@ import { isIranianMobile } from '@/components/PhoneNumberField';
 import { ROUTES } from '@/constants';
 import { digitsOnly } from '@/utils';
 import { useCustomerProfile, useUpsertCustomerProfile } from '@/services/profiles';
+import { useMe } from '@/services/auth';
 import type { CustomerProfile } from '@/services/profiles/types';
 
 /** Customer profile — name, preferred language, and the emergency contact. No national-ID KYC. */
 export default function CustomerProfilePage() {
   const { data: profile, isLoading } = useCustomerProfile();
+  const { data: me } = useMe();
   if (isLoading) return <AppLoading />;
-  return <CustomerProfileForm initial={profile ?? null} />;
+  // The customer name is owned by `/me` (REQ-007), not `CustomerProfileDto` — prefill it from there so
+  // editing the emergency contact never blanks (and re-saves as null) the existing name.
+  return (
+    <CustomerProfileForm initial={profile ?? null} nameFallback={{ firstName: me?.firstName ?? null, lastName: me?.lastName ?? null }} />
+  );
 }
 
-const CustomerProfileForm: FunctionComponent<{ initial: CustomerProfile | null }> = ({ initial }) => {
+const CustomerProfileForm: FunctionComponent<{
+  initial: CustomerProfile | null;
+  nameFallback: { firstName: string | null; lastName: string | null };
+}> = ({ initial, nameFallback }) => {
   const t = useTranslations('profile');
   const ta = useTranslations('address');
   const tc = useTranslations('common');
@@ -25,8 +34,8 @@ const CustomerProfileForm: FunctionComponent<{ initial: CustomerProfile | null }
   const { enqueueSnackbar } = useSnackbar();
   const upsert = useUpsertCustomerProfile();
 
-  const [firstName, setFirstName] = useState(initial?.firstName ?? '');
-  const [lastName, setLastName] = useState(initial?.lastName ?? '');
+  const [firstName, setFirstName] = useState(initial?.firstName ?? nameFallback.firstName ?? '');
+  const [lastName, setLastName] = useState(initial?.lastName ?? nameFallback.lastName ?? '');
   const [language, setLanguage] = useState(initial?.preferredLanguage ?? 'fa');
   const [emergencyName, setEmergencyName] = useState(initial?.defaultEmergencyContactName ?? '');
   const [emergencyPhone, setEmergencyPhone] = useState(digitsOnly(initial?.defaultEmergencyContactPhone ?? ''));