related-ui-components 2.7.6 → 2.7.8

package/src/components/TravelBooking/HotelSummary.tsx

@@ -13,7 +13,13 @@ import {
 } from "react-native";
 import { NumericStepper, NumericStepperProps } from "../NumericStepper";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-// import { ScrollView } from "react-native-gesture-handler";
+import RNPickerSelect from "react-native-picker-select";
+import { Ionicons } from "@expo/vector-icons";
+
+export interface IndividualGuest {
+  id: string;
+  age: number;
+}
 
 export interface RoomState {
   id: string;
@@ -27,6 +33,8 @@ export interface GuestConfigType {
   defaultValue: number;
   minValue: number;
   maxValue?: number;
+  ageRange?: { min: number; max: number };
+  defaultAge?: number;
 }
 
 const DEFAULT_GUEST_CONFIG: GuestConfigType[] = [
@@ -45,6 +53,8 @@ const DEFAULT_GUEST_CONFIG: GuestConfigType[] = [
     defaultValue: 0,
     minValue: 0,
     maxValue: 4,
+    ageRange: { min: 0, max: 17 },
+    defaultAge: 8,
   },
 ];
 
@@ -53,7 +63,17 @@ const createNewRoom = (guestConfig: GuestConfigType[]): RoomState => {
     id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
   };
   guestConfig.forEach((guest) => {
-    newRoom[guest.key] = guest.defaultValue;
+    if (guest.ageRange) {
+      newRoom[guest.key] = Array.from(
+        { length: guest.defaultValue },
+        (_, i) => ({
+          id: `${guest.key}_${i}_${Date.now()}`,
+          age: guest.defaultAge ?? guest.ageRange?.min ?? 0,
+        })
+      );
+    } else {
+      newRoom[guest.key] = guest.defaultValue;
+    }
   });
   return newRoom;
 };
@@ -67,9 +87,10 @@ export interface HotelSummaryProps {
   roomTitlePrefix?: string;
   removeRoomText?: string;
   addRoomText?: string;
+  formatChildAgeLabel?: (guestType: string, index: number) => string;
   containerStyle?: StyleProp<ViewStyle>;
   roomContainerStyle?: StyleProp<ViewStyle>;
-  roomListContainerStyle? : StyleProp<ViewStyle>;
+  roomListContainerStyle?: StyleProp<ViewStyle>;
   roomHeaderStyle?: StyleProp<ViewStyle>;
   roomTitleStyle?: StyleProp<TextStyle>;
   removeRoomButtonStyle?: StyleProp<ViewStyle>;
@@ -78,12 +99,15 @@ export interface HotelSummaryProps {
   guestLabelContainerStyle?: StyleProp<ViewStyle>;
   guestNameStyle?: StyleProp<TextStyle>;
   guestDescriptionStyle?: StyleProp<TextStyle>;
+  agePickerRowStyle?: StyleProp<ViewStyle>;
+  agePickerLabelStyle?: StyleProp<TextStyle>;
   addRoomButtonStyle?: StyleProp<ViewStyle>;
   addRoomButtonTextStyle?: StyleProp<TextStyle>;
   stepperContainerStyle?: NumericStepperProps["style"];
   stepperButtonStyle?: NumericStepperProps["buttonStyle"];
   stepperButtonTextStyle?: NumericStepperProps["buttonTextStyle"];
   stepperValueTextStyle?: NumericStepperProps["valueTextStyle"];
+  overrideTheme?: ThemeType
 }
 
 const HotelSummary: React.FC<HotelSummaryProps> = ({
@@ -95,6 +119,7 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
   roomTitlePrefix = "Room",
   removeRoomText = "Remove",
   addRoomText = "+ Add Room",
+  formatChildAgeLabel = (guestType, index) => `${guestType} ${index} Age`,
   containerStyle,
   roomContainerStyle,
   roomHeaderStyle,
@@ -111,9 +136,13 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
   stepperButtonStyle,
   stepperButtonTextStyle,
   stepperValueTextStyle,
-  roomListContainerStyle
+  roomListContainerStyle,
+  agePickerRowStyle,
+  agePickerLabelStyle,
+  overrideTheme
 }) => {
-  const { theme } = useTheme();
+  const { theme: defaultTheme } = useTheme();
+  let theme = overrideTheme || defaultTheme;
   const styles = useMemo(() => themedStyles(theme, I18nManager.isRTL), [theme]);
 
   const guestConfig = useMemo(() => guestConfigProp, [guestConfigProp]);
@@ -158,7 +187,7 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
     [triggerSelectionChange, minRooms]
   );
 
-  const handleGuestChange = useCallback(
+  const handleGuestCountChange = useCallback(
     (
       roomId: string,
       guestKey: string,
@@ -168,27 +197,45 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
         const guestInfo = guestConfig.find((g) => g.key === guestKey);
         if (!guestInfo) return prevRooms;
 
-        const minValue = guestInfo.minValue;
-        const maxValue = guestInfo.maxValue ?? 99;
         let valueChanged = false;
 
         const updatedRooms = prevRooms.map((room) => {
-          if (room.id === roomId) {
-            const currentVal = room[guestKey];
-            let newValue = currentVal;
+          if (room.id !== roomId) return room;
+
+          const currentVal = room[guestKey];
+          let newRoomState = { ...room };
 
+          if (guestInfo.ageRange) {
+            // Handle array of guests
+            const currentArray = (currentVal || []) as IndividualGuest[];
             if (action === "increment") {
-              newValue = Math.min(maxValue, currentVal + 1);
+              if (currentArray.length < (guestInfo.maxValue ?? 99)) {
+                const newGuest: IndividualGuest = {
+                  id: `${guestKey}_${Date.now()}`,
+                  age: guestInfo.defaultAge ?? guestInfo.ageRange.min,
+                };
+                newRoomState[guestKey] = [...currentArray, newGuest];
+                valueChanged = true;
+              }
             } else if (action === "decrement") {
-              newValue = Math.max(minValue, currentVal - 1);
+              if (currentArray.length > guestInfo.minValue) {
+                newRoomState[guestKey] = currentArray.slice(0, -1);
+                valueChanged = true;
+              }
             }
-
+          } else {
+            // Handle numeric count
+            const min = guestInfo.minValue;
+            const max = guestInfo.maxValue ?? 99;
+            let newValue = currentVal;
+            if (action === "increment") newValue = Math.min(max, currentVal + 1);
+            else newValue = Math.max(min, currentVal - 1);
             if (newValue !== currentVal) {
+              newRoomState[guestKey] = newValue;
               valueChanged = true;
-              return { ...room, [guestKey]: newValue };
             }
           }
-          return room;
+          return newRoomState;
         });
 
         if (valueChanged) {
@@ -197,8 +244,39 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
         return updatedRooms;
       });
     },
-    [triggerSelectionChange, guestConfig]
+    [guestConfig, triggerSelectionChange]
+  );
+
+  const handleIndividualAgeChange = useCallback(
+    (roomId: string, guestKey: string, guestId: string, newAge: number) => {
+      if (newAge === null || newAge === undefined) return;
+
+      setRooms((prevRooms) => {
+        const updatedRooms = prevRooms.map((room) => {
+          if (room.id === roomId) {
+            const guestArray = (room[guestKey] as IndividualGuest[]).map(
+              (guest) => (guest.id === guestId ? { ...guest, age: newAge } : guest)
+            );
+            return { ...room, [guestKey]: guestArray };
+          }
+          return room;
+        });
+        triggerSelectionChange(updatedRooms);
+        return updatedRooms;
+      });
+    },
+    [triggerSelectionChange]
   );
+  
+  const getAgePickerItems = (config: GuestConfigType | undefined) => {
+    if (!config?.ageRange) return [];
+    const { min, max } = config.ageRange;
+    return Array.from({ length: max - min + 1 }, (_, i) => ({
+      label: `${min + i}`,
+      value: min + i,
+    }));
+  };
+
 
   useEffect(() => {
     onSelectionChange?.(rooms);
@@ -206,64 +284,121 @@ const HotelSummary: React.FC<HotelSummaryProps> = ({
 
   return (
     <View style={[styles.container, containerStyle]}>
-      <BottomSheetScrollView style={[{maxHeight: 300}, roomListContainerStyle]} showsVerticalScrollIndicator={false}>
-      {rooms.map((room, index) => (
-        <View key={room.id} style={[styles.roomContainer, roomContainerStyle]}>
-          <View style={[styles.roomHeader, roomHeaderStyle]}>
-            <Text style={[styles.roomTitle, roomTitleStyle]}>
-              {`${roomTitlePrefix} ${index + 1}`}
-            </Text>
-            {( rooms.length > minRooms) && (
-              <TouchableOpacity
-                style={removeRoomButtonStyle}
-                onPress={() => removeRoom(room.id)}
-              >
-                <Text style={[styles.removeRoomText, removeRoomTextStyle]}>
-                  {removeRoomText}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-
-          {guestConfig.map((guest) => (
-            <View key={guest.key} style={[styles.guestRow, guestRowStyle]}>
-              <View
-                style={[
-                  styles.guestLabelContainer,
-                  guestLabelContainerStyle,
-                ]}
-              >
-                <Text style={[styles.guestName, guestNameStyle]}>
-                  {guest.name}
-                </Text>
-                <Text
-                  style={[
-                    styles.guestDescription,
-                    guestDescriptionStyle,
-                  ]}
+      <BottomSheetScrollView
+        style={[{ maxHeight: 300 }, roomListContainerStyle]}
+        showsVerticalScrollIndicator={false}
+      >
+        {rooms.map((room, index) => (
+          <View
+            key={room.id}
+            style={[styles.roomContainer, roomContainerStyle]}
+          >
+            <View style={[styles.roomHeader, roomHeaderStyle]}>
+              <Text style={[styles.roomTitle, roomTitleStyle]}>
+                {`${roomTitlePrefix} ${index + 1}`}
+              </Text>
+              {rooms.length > minRooms && (
+                <TouchableOpacity
+                  style={removeRoomButtonStyle}
+                  onPress={() => removeRoom(room.id)}
                 >
-                  {guest.description}
-                </Text>
-              </View>
-              <NumericStepper
-                value={room[guest.key]}
-                minValue={guest.minValue}
-                maxValue={guest.maxValue}
-                onIncrement={() =>
-                  handleGuestChange(room.id, guest.key, "increment")
-                }
-                onDecrement={() =>
-                  handleGuestChange(room.id, guest.key, "decrement")
-                }
-                style={stepperContainerStyle}
-                buttonStyle={stepperButtonStyle}
-                buttonTextStyle={stepperButtonTextStyle}
-                valueTextStyle={stepperValueTextStyle}
-              />
+                  <Text style={[styles.removeRoomText, removeRoomTextStyle]}>
+                    {removeRoomText}
+                  </Text>
+                </TouchableOpacity>
+              )}
             </View>
-          ))}
-        </View>
-      ))}
+
+            {guestConfig.map((guest) => (
+              <View key={guest.key}>
+                <View style={[styles.guestRow, guestRowStyle]}>
+                  <View
+                    style={[
+                      styles.guestLabelContainer,
+                      guestLabelContainerStyle,
+                    ]}
+                  >
+                    <Text style={[styles.guestName, guestNameStyle]}>
+                      {guest.name}
+                    </Text>
+                    <Text
+                      style={[
+                        styles.guestDescription,
+                        guestDescriptionStyle,
+                      ]}
+                    >
+                      {guest.description}
+                    </Text>
+                  </View>
+                  <NumericStepper
+                    value={
+                      guest.ageRange
+                        ? room[guest.key]?.length || 0
+                        : room[guest.key]
+                    }
+                    minValue={guest.minValue}
+                    maxValue={guest.maxValue}
+                    onIncrement={() =>
+                      handleGuestCountChange(room.id, guest.key, "increment")
+                    }
+                    onDecrement={() =>
+                      handleGuestCountChange(room.id, guest.key, "decrement")
+                    }
+                    style={stepperContainerStyle}
+                    buttonStyle={stepperButtonStyle}
+                    buttonTextStyle={stepperButtonTextStyle}
+                    valueTextStyle={stepperValueTextStyle}
+                  />
+                </View>
+
+                {guest.ageRange &&
+                  room[guest.key]?.map(
+                    (individualGuest: IndividualGuest, guestIndex: number) => (
+                      <View
+                        key={individualGuest.id}
+                        style={[styles.agePickerRow, agePickerRowStyle]}
+                      >
+                        <Text
+                          style={[styles.agePickerLabel, agePickerLabelStyle]}
+                        >
+                          {formatChildAgeLabel(guest.name, guestIndex + 1)}
+                        </Text>
+                        <View style={styles.pickerContainer}>
+                          <RNPickerSelect
+                            value={individualGuest.age}
+                            onValueChange={(value) =>
+                              handleIndividualAgeChange(
+                                room.id,
+                                guest.key,
+                                individualGuest.id,
+                                value
+                              )
+                            }
+                            items={getAgePickerItems(guest)}
+                            placeholder={{}}
+                            style={{
+                              inputIOS: styles.pickerInput,
+                              inputAndroid: styles.pickerInput,
+                              iconContainer: styles.pickerIconContainer,
+                            }}
+                            textInputProps={{ pointerEvents: "none" }}
+                            useNativeAndroidPickerStyle={false}
+                            Icon={() => (
+                              <Ionicons
+                                name="chevron-down"
+                                size={20}
+                                color={theme.helper}
+                              />
+                            )}
+                          />
+                        </View>
+                      </View>
+                    )
+                  )}
+              </View>
+            ))}
+          </View>
+        ))}
       </BottomSheetScrollView>
 
       {rooms.length < maxRooms && (
@@ -311,14 +446,14 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       fontWeight: "500",
     },
     guestRow: {
-      flexDirection:"row",
+      flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "center",
       paddingVertical: 12,
     },
     guestLabelContainer: {
       flexDirection: "column",
-      alignItems:  "flex-start",
+      alignItems: "flex-start",
       flexShrink: 1,
       // marginRight: isRTL ? 0 : 8,
       // marginLeft: isRTL ? 8 : 0,
@@ -342,6 +477,38 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       fontWeight: "bold",
       color: theme.primary,
     },
+    agePickerRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      backgroundColor: theme.background,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.divider,
+    },
+    agePickerLabel: {
+      fontSize: 14,
+      color: theme.onBackground,
+    },
+    pickerContainer: {
+      width: 120,
+      height: 40,
+      borderWidth: 1,
+      borderColor: theme.border,
+      borderRadius: 8,
+      justifyContent: "center",
+    },
+    pickerInput: {
+      fontSize: 14,
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+      color: theme.onSurface,
+    },
+    pickerIconContainer: {
+      top: 10,
+      right: 10,
+    },
   });
 
-export default HotelSummary;
+export default HotelSummary;