From 94f73f80012f4a638868ec2c4da36dba29f1f994 Mon Sep 17 00:00:00 2001
From: Iryna Lypnyk <iryna.lypnyk@gmail.com>
Date: Sun, 14 Jun 2026 22:35:37 +0100
Subject: [PATCH] fix(#701): hide month availability for long-term mentors

---
 .../MentorshipAvailabilitySection.tsx         | 107 ++++++++++--------
 admin-wcc-app/lib/mentorshipTypes.ts          |   9 +-
 2 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/admin-wcc-app/components/EditMentor/MentorshipAvailabilitySection.tsx b/admin-wcc-app/components/EditMentor/MentorshipAvailabilitySection.tsx
index e0e9cba97..6ec1def6c 100644
--- a/admin-wcc-app/components/EditMentor/MentorshipAvailabilitySection.tsx
+++ b/admin-wcc-app/components/EditMentor/MentorshipAvailabilitySection.tsx
@@ -9,8 +9,8 @@ import {
   Typography,
 } from '@mui/material';
 import Grid from '@mui/material/Grid2';
-import { Controller } from 'react-hook-form';
-import { MENTORSHIP_TYPES } from '@/lib/mentorshipTypes';
+import { Controller, useWatch } from 'react-hook-form';
+import { MENTORSHIP_TYPE_VALUES, MENTORSHIP_TYPES } from '@/lib/mentorshipTypes';
 import { FormSectionProps } from './types';
 
 const MONTHS = [
@@ -31,6 +31,13 @@ const MONTHS = [
 const monthLabel = (month: string) => month.charAt(0) + month.slice(1).toLowerCase();
 
 export default function MentorshipAvailabilitySection({ control, errors }: FormSectionProps) {
+  const mentorshipType = useWatch({
+    control,
+    name: 'mentorshipType',
+  });
+
+  const hasAdHocMentorship = mentorshipType?.includes(MENTORSHIP_TYPE_VALUES.AD_HOC);
+
   return (
     <Paper variant="outlined" sx={{ p: 3 }}>
       <Typography variant="h6" sx={{ mb: 2 }}>
@@ -119,54 +126,56 @@ export default function MentorshipAvailabilitySection({ control, errors }: FormS
           />
         </Grid>
 
-        <Grid size={12}>
-          <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 600 }}>
-            Month Availability
-          </Typography>
-          <Grid container spacing={2}>
-            {MONTHS.map((month, index) => (
-              <Grid size={{ xs: 12, sm: 4 }} key={month}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Controller
-                    name={`monthAvailability.${index}.enabled`}
-                    control={control}
-                    render={({ field }) => (
-                      <FormControlLabel
-                        control={
-                          <Checkbox
-                            checked={field.value}
-                            onChange={(e) => field.onChange(e.target.checked)}
-                            size="small"
-                          />
-                        }
-                        label={monthLabel(month)}
-                        sx={{ minWidth: 110 }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    name={`monthAvailability.${index}.hours`}
-                    control={control}
-                    render={({ field: { onChange, value, ...field } }) => (
-                      <TextField
-                        {...field}
-                        value={value}
-                        onChange={(e) =>
-                          onChange(e.target.value === '' ? 0 : Number(e.target.value))
-                        }
-                        type="number"
-                        size="small"
-                        label="hours"
-                        slotProps={{ htmlInput: { min: 0, max: 200 } }}
-                        sx={{ width: 80 }}
-                      />
-                    )}
-                  />
-                </Box>
-              </Grid>
-            ))}
+        {hasAdHocMentorship && (
+          <Grid size={12}>
+            <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 600 }}>
+              Month Availability
+            </Typography>
+            <Grid container spacing={2}>
+              {MONTHS.map((month, index) => (
+                <Grid size={{ xs: 12, sm: 4 }} key={month}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Controller
+                      name={`monthAvailability.${index}.enabled`}
+                      control={control}
+                      render={({ field }) => (
+                        <FormControlLabel
+                          control={
+                            <Checkbox
+                              checked={field.value}
+                              onChange={(e) => field.onChange(e.target.checked)}
+                              size="small"
+                            />
+                          }
+                          label={monthLabel(month)}
+                          sx={{ minWidth: 110 }}
+                        />
+                      )}
+                    />
+                    <Controller
+                      name={`monthAvailability.${index}.hours`}
+                      control={control}
+                      render={({ field: { onChange, value, ...field } }) => (
+                        <TextField
+                          {...field}
+                          value={value}
+                          onChange={(e) =>
+                            onChange(e.target.value === '' ? 0 : Number(e.target.value))
+                          }
+                          type="number"
+                          size="small"
+                          label="hours"
+                          slotProps={{ htmlInput: { min: 0, max: 200 } }}
+                          sx={{ width: 80 }}
+                        />
+                      )}
+                    />
+                  </Box>
+                </Grid>
+              ))}
+            </Grid>
           </Grid>
-        </Grid>
+        )}
       </Grid>
     </Paper>
   );
diff --git a/admin-wcc-app/lib/mentorshipTypes.ts b/admin-wcc-app/lib/mentorshipTypes.ts
index 0153f9790..e956e0c8c 100644
--- a/admin-wcc-app/lib/mentorshipTypes.ts
+++ b/admin-wcc-app/lib/mentorshipTypes.ts
@@ -1,4 +1,9 @@
+export const MENTORSHIP_TYPE_VALUES = {
+  AD_HOC: 'AD_HOC',
+  LONG_TERM: 'LONG_TERM',
+} as const;
+
 export const MENTORSHIP_TYPES = [
-  { value: 'AD_HOC', label: 'Ad Hoc' },
-  { value: 'LONG_TERM', label: 'Long Term' },
+  { value: MENTORSHIP_TYPE_VALUES.AD_HOC, label: 'Ad Hoc' },
+  { value: MENTORSHIP_TYPE_VALUES.LONG_TERM, label: 'Long Term' },
 ];