feat: add disabled dates UI

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)}
             />
           )}
         />

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,22 +13,37 @@ type Props = {
   onTabChange: (date: Date) => void
   selectedDate?: Date
   onLayout?: ViewProps['onLayout']
+  disabled?: boolean
 }
 
 export const MovieCalendarDay: React.FC<Props> = ({
   date,
   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,
+}))

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}