refinement phase 4

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

@@ -1,76 +0,0 @@
-'use client';
-import { Suspense } from 'react';
-import { useLocale, useTranslations } from 'next-intl';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { Box, Paper, Stack, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading } from '@/components';
-import { ROUTES } from '@/constants';
-import {
-  CHECKOUT_QUERY_OUTCOME,
-  CHECKOUT_QUERY_REQUEST_ID,
-  CHECKOUT_QUERY_TRANSACTION_ID,
-} from '@/services/payment/constants';
-import type { GatewayReturnOutcome } from '@/services/payment/types';
-
-/**
- * Dev mock-gateway page — a **test harness, not a product feature**. It stands in for the PSP so the
- * initiate → redirect → return round-trip is exercisable without a real gateway: the payment mock's
- * `redirectUrl` points here, and the success/failure buttons drive both outcome branches of the return
- * surface (a real PSP redirects back after the cardholder pays or cancels). On the real path the
- * `redirectUrl` is the PSP's absolute URL and this page is never reached.
- */
-export default function MockGatewayPage() {
-  return (
-    <Suspense fallback={<AppLoading />}>
-      <MockGatewayScreen />
-    </Suspense>
-  );
-}
-
-function MockGatewayScreen() {
-  const t = useTranslations('payment');
-  const locale = useLocale();
-  const router = useRouter();
-  const params = useSearchParams();
-
-  const requestId = params.get(CHECKOUT_QUERY_REQUEST_ID) ?? '';
-  const transactionId = params.get(CHECKOUT_QUERY_TRANSACTION_ID) ?? '';
-
-  const returnWith = (outcome: GatewayReturnOutcome) => {
-    const query = new URLSearchParams({
-      [CHECKOUT_QUERY_REQUEST_ID]: requestId,
-      [CHECKOUT_QUERY_TRANSACTION_ID]: transactionId,
-      [CHECKOUT_QUERY_OUTCOME]: outcome,
-    });
-    router.replace(`/${locale}${ROUTES.CHECKOUT_RETURN}?${query.toString()}`);
-  };
-
-  return (
-    <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1px dashed', borderColor: 'divider', borderRadius: 2 }}>
-      <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
-        <AppIcon icon="payment" size={44} color="var(--bal-secondary)" />
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-          {t('gateway_title')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('gateway_hint')}
-        </Typography>
-        {transactionId ? (
-          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-            {/* dir scoped to the code only — the label is Persian and must keep the RTL base direction. */}
-            {t('gateway_reference_label')}:{' '}
-            <Box component="span" dir="ltr">
-              #{transactionId}
-            </Box>
-          </Typography>
-        ) : null}
-        <AppButton color="secondary" variant="contained" size="large" onClick={() => returnWith('success')} sx={{ m: 0 }}>
-          {t('gateway_pay_success')}
-        </AppButton>
-        <AppButton variant="text" color="error" onClick={() => returnWith('failure')} sx={{ m: 0 }}>
-          {t('gateway_pay_fail')}
-        </AppButton>
-      </Stack>
-    </Paper>
-  );
-}

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 ?? ''));