From 4cf892c4b7fa916c493a62dc2c88d91202855228 Mon Sep 17 00:00:00 2001
From: Xavier Le Cunff <xavier.lecunff@passculture.app>
Date: Mon, 25 Nov 2024 13:58:16 +0100
Subject: [PATCH] feat: add disabled dates UI

---
 .../MovieCalendar/MovieCalendar.tsx           |  3 ++
 .../components/MovieCalendarDay.tsx           | 32 ++++++++++++-------
 .../MovieCalendarContext.tsx                  |  1 +
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/features/offer/components/MovieCalendar/MovieCalendar.tsx b/src/features/offer/components/MovieCalendar/MovieCalendar.tsx
index 6b3323000f4..429a93aa900 100644
--- a/src/features/offer/components/MovieCalendar/MovieCalendar.tsx
+++ b/src/features/offer/components/MovieCalendar/MovieCalendar.tsx
@@ -16,6 +16,7 @@ type Props = {
   selectedDate: Date | undefined
   onTabChange: (date: Date) => void
   flatListRef: React.MutableRefObject<FlatList | null>
+  disabledDates?: Date[]
   flatListWidth?: number
   onFlatListLayout?: (event: LayoutChangeEvent) => void
   itemWidth?: number
@@ -33,6 +34,7 @@ export const MovieCalendar: React.FC<Props> = ({
   onFlatListLayout,
   itemWidth,
   onItemLayout,
+  disabledDates,
 }) => {
   const { isDesktopViewport } = useTheme()
   const {
@@ -94,6 +96,7 @@ export const MovieCalendar: React.FC<Props> = ({
               date={date}
               selectedDate={selectedDate}
               onTabChange={onInternalTabChange}
+              disabled={disabledDates?.includes(date)}
             />
           )}
         />
diff --git a/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx b/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx
index c50f5b2e411..6c06b3190b5 100644
--- a/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx
+++ b/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { View, ViewProps } from 'react-native'
 import styled from 'styled-components/native'
 
@@ -13,6 +13,7 @@ type Props = {
   onTabChange: (date: Date) => void
   selectedDate?: Date
   onLayout?: ViewProps['onLayout']
+  disabled?: boolean
 }
 
 export const MovieCalendarDay: React.FC<Props> = ({
@@ -20,15 +21,29 @@ export const MovieCalendarDay: React.FC<Props> = ({
   selectedDate,
   onTabChange,
   onLayout,
+  disabled,
 }) => {
   const { weekDay, dayDate, month, accessibilityLabel, isSelected } = useMovieCalendarDay(
     date,
     selectedDate
   )
-  const { CalendarText } = StatusPattern[isSelected ? 'selected' : 'default']
+
+  const CalendarText = useMemo(() => {
+    if (disabled) {
+      return DisabledCalendarText
+    }
+    if (selectedDate) {
+      return SelectedCalendarText
+    }
+    return DefaultCalendarText
+  }, [disabled, selectedDate])
 
   return (
-    <CalendarCell onLayout={onLayout} testID="movie-calendar-day" onPress={() => onTabChange(date)}>
+    <CalendarCell
+      disabled={disabled}
+      onLayout={onLayout}
+      testID="movie-calendar-day"
+      onPress={() => onTabChange(date)}>
       <CalendarTextView accessibilityLabel={accessibilityLabel}>
         <CalendarText numberOfLines={1}>{weekDay}</CalendarText>
         <CalendarText numberOfLines={1}>{dayDate}</CalendarText>
@@ -65,11 +80,6 @@ const SelectedCalendarText = styled(DefaultCalendarText)(({ theme }) => ({
   color: theme.colors.primary,
 }))
 
-const StatusPattern = {
-  default: {
-    CalendarText: DefaultCalendarText,
-  },
-  selected: {
-    CalendarText: SelectedCalendarText,
-  },
-}
+const DisabledCalendarText = styled(DefaultCalendarText)(({ theme }) => ({
+  color: theme.colors.greyMedium,
+}))
diff --git a/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx b/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx
index a8581a48ad0..a0cfdbb04c3 100644
--- a/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx
+++ b/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx
@@ -146,6 +146,7 @@ export const MovieCalendarProvider: React.FC<{
             <MovieCalendar
               dates={dates}
               selectedDate={selectedDate}
+              disabledDates={[]}
               onTabChange={setSelectedDate}
               flatListRef={flatListRef}
               flatListWidth={flatListWidth}