related-ui-components 1.3.3 → 1.3.5

package/src/components/TravelBooking/HotelForm.tsx

@@ -0,0 +1,365 @@
+import { ThemeType, useTheme } from "@/theme";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  // Added ItemStyle for Picker
+  Platform,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import CustomInput from "../Input/Input";
+import DateRangePicker from "../DateRangePicker/DateRangePicker";
+import { Picker } from "@react-native-picker/picker";
+import SuggestionList from "../Suggestions/SuggestionList"; 
+import { FormInputType, HotelSuggestions } from "./types"; 
+import { TextInput } from "react-native-gesture-handler";
+
+// --- Helper Types ---
+type LocationData = string;
+
+// --- Component Props ---
+export interface HotelFormProps {
+  // Initial values
+  initialDestination?: LocationData;
+  initialCheckinDate?: string; // Expect YYYY-MM-DD string
+  initialCheckoutDate?: string; // Expect YYYY-MM-DD string
+  initialNationality?: string; // Added initial nationality
+
+  // Callbacks
+  onTextChange?: (text: string) => void;
+  onInputFocus?: (input: FormInputType) => void;
+  onSearchPress?: (details: {
+    destination: LocationData | undefined; // Renamed from destintation
+    checkin: string | undefined; // Send YYYY-MM-DD
+    checkout: string | undefined; // Send YYYY-MM-DD
+    nationality: string | undefined;
+  }) => void;
+
+  // Labels & Placeholders
+  destinationLabel?: string;
+  destinationPlaceholder?: string;
+  checkinLabel?: string;
+  checkoutLabel?: string;
+  nationalityLabel?: string; // Added nationality label
+
+  // Icons
+  searchIconName?: keyof typeof Ionicons.glyphMap;
+
+  // Data & Config
+  suggestionData?: HotelSuggestions[];
+  nationalityData?: { label: string; value: string }[]; 
+  calendarThemeOverrides?: object;
+
+  // --- Style Props ---
+  containerStyle?: StyleProp<ViewStyle>;
+  inputWrapperStyle?: StyleProp<ViewStyle>; 
+  customInputContainerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>; 
+  checkoutRowStyle?: StyleProp<ViewStyle>; 
+  searchButtonStyle?: StyleProp<ViewStyle>;
+  searchIconStyle?: StyleProp<TextStyle>; 
+
+  // DateRangePicker specific styles (passed down)
+  dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
+  dateRangePickerLabelStyle?: StyleProp<TextStyle>; 
+  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>; 
+  dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>;
+
+  // SuggestionList specific styles
+  suggestionListContainerStyle?: StyleProp<ViewStyle>;
+  suggestionItemStyle?: StyleProp<ViewStyle>;
+  suggestionItemTextStyle?: StyleProp<TextStyle>;
+
+  // Nationality Picker specific styles
+  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>; 
+  nationalityPickerLabelStyle?: StyleProp<TextStyle>; 
+  pickerContainerStyle?: StyleProp<ViewStyle>;
+  pickerStyle?: StyleProp<ViewStyle>; 
+}
+
+// Default Nationality Data (can be overridden by prop)
+const defaultNationalities = [
+  { label: "Select Nationality", value: undefined }, // Placeholder
+  { label: "United States", value: "US" },
+  { label: "Canada", value: "CA" },
+  { label: "United Kingdom", value: "GB" }, // Corrected UK code
+  { label: "India", value: "IN" },
+  { label: "Australia", value: "AU" },
+  { label: "Germany", value: "DE" },
+  { label: "France", value: "FR" },
+  // Add more common nationalities or let user provide full list via props
+];
+
+// --- Component ---
+const HotelForm: React.FC<HotelFormProps> = ({
+  // Initial values
+  initialDestination,
+  initialCheckinDate,
+  initialCheckoutDate,
+  initialNationality,
+  // Callbacks
+  onSearchPress,
+  onInputFocus,
+  onTextChange,
+  // Labels & Placeholders
+  destinationLabel = "DESTINATION",
+  destinationPlaceholder = "Enter city or hotel name",
+  checkinLabel = "CHECK-IN",
+  checkoutLabel = "CHECK-OUT",
+  nationalityLabel = "NATIONALITY", // Default label
+  // Icons
+  searchIconName = "search",
+  // Data & Config
+  suggestionData,
+  nationalityData = defaultNationalities, // Use default or provided data
+  calendarThemeOverrides = {},
+  // Style Props
+  containerStyle,
+  inputWrapperStyle,
+  customInputContainerStyle,
+  labelStyle,
+  checkoutRowStyle,
+  searchButtonStyle,
+  searchIconStyle,
+  dateRangePickerOuterContainerStyle,
+  dateRangePickerLabelStyle,
+  dateRangePickerInputGroupStyle,
+  dateRangePickerCalendarContainerStyle,
+  suggestionListContainerStyle,
+  suggestionItemStyle,
+  suggestionItemTextStyle,
+  nationalityPickerWrapperStyle,
+  nationalityPickerLabelStyle,
+  pickerContainerStyle,
+  pickerStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+  const destinationInputRef = useRef<TextInput>(null);
+
+  // --- State ---
+  const [destination, setDestination] = useState<LocationData | undefined>(
+    initialDestination
+  );
+  // Note: DateRangePicker uses departure/return internally. Map them to checkin/checkout.
+  const [checkinDate, setCheckinDate] = useState<string | undefined>(
+    initialCheckinDate
+  );
+  const [checkoutDate, setCheckoutDate] = useState<string | undefined>(
+    initialCheckoutDate
+  );
+  const [selectedNationality, setSelectedNationality] = useState<
+    string | undefined
+  >(initialNationality);
+  const [focusedInput, setFocusedInput] = useState<FormInputType>();
+
+  // --- Handlers ---
+  const handleSearch = useCallback(() => {
+    onSearchPress?.({
+      destination: destination, // Corrected name
+      checkin: checkinDate,
+      checkout: checkoutDate,
+      nationality: selectedNationality,
+    });
+  }, [
+    destination,
+    checkinDate,
+    checkoutDate,
+    selectedNationality,
+    onSearchPress,
+  ]);
+
+  // --- Shared Suggestion Render Item ---
+  const suggestionRenderItem = (item: HotelSuggestions) => (
+    <TouchableOpacity
+      key={item.id}
+      onPress={() => {
+        setDestination(item.value);
+        destinationInputRef.current?.blur();
+        setFocusedInput(undefined); // Hide suggestions
+      }}
+      style={[styles.suggestionItem, suggestionItemStyle]} // Apply style prop
+    >
+      <Text style={[styles.suggestionItemText, suggestionItemTextStyle]}>
+        {item.value}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.inputWrapper, inputWrapperStyle]}>
+        <CustomInput
+          ref={destinationInputRef}
+          onChangeText={(t) => {
+            onTextChange?.(t);
+            setDestination(t); // Correctly update state
+          }}
+          value={destination}
+          label={destinationLabel}
+          labelStyle={[styles.label, labelStyle]}
+          placeholder={destinationPlaceholder}
+          onFocus={() => {
+            setFocusedInput(FormInputType.HOTEL_DEST);
+            onInputFocus?.(FormInputType.HOTEL_DEST);
+          }}
+          onBlur={() => {
+            setTimeout(() => {
+              if (focusedInput === FormInputType.HOTEL_DEST) {
+                setFocusedInput(undefined);
+              }
+            }, 150);
+          }}
+          containerStyle={customInputContainerStyle}
+        />
+        {suggestionData && (
+          <SuggestionList
+            data={suggestionData}
+            visible={focusedInput === FormInputType.HOTEL_DEST}
+            renderItemContent={suggestionRenderItem}
+            containerStyle={suggestionListContainerStyle}
+          />
+        )}
+      </View>
+
+      <DateRangePicker
+        departureLabel={checkinLabel}
+        returnLabel={checkoutLabel}
+        outerContainerStyle={[
+          styles.dateRangePickerOuterContainer,
+          dateRangePickerOuterContainerStyle,
+        ]}
+        labelStyle={[labelStyle, dateRangePickerLabelStyle]}
+        inputGroupStyle={dateRangePickerInputGroupStyle}
+        calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
+        calendarThemeOverrides={calendarThemeOverrides} 
+        onDatesChange={(d) => {
+          setCheckinDate(d.departure);
+          setCheckoutDate(d.return);
+        }}
+        initialDepartureDate={initialCheckinDate}
+        initialReturnDate={initialCheckoutDate}
+        isOneWay={false}
+      />
+
+      <View style={[styles.checkoutRow, checkoutRowStyle]}>
+        <View
+          style={[styles.nationalityPickerWrapper, nationalityPickerWrapperStyle]}
+        >
+          <Text
+            style={[
+              styles.label,
+              labelStyle, 
+              nationalityPickerLabelStyle, 
+            ]}
+          >
+            {nationalityLabel}
+          </Text>
+          <View style={[styles.pickerContainer, pickerContainerStyle]}>
+            <Picker
+              selectedValue={selectedNationality}
+              onValueChange={setSelectedNationality}
+              style={[styles.picker, pickerStyle]}
+              dropdownIconColor={theme.onSurface}
+            >
+              {nationalityData.map((nat) => (
+                <Picker.Item
+                  key={nat.value || "placeholder"} 
+                  label={nat.label}
+                  value={nat.value}
+                  enabled={nat.value !== undefined}
+                />
+              ))}
+            </Picker>
+          </View>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.searchButton, searchButtonStyle]}
+          onPress={handleSearch}
+          activeOpacity={0.8}
+        >
+          <Ionicons
+            name={searchIconName}
+            size={24}
+            color={theme.onPrimary}
+            style={searchIconStyle}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+// --- Styles ---
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      padding: 16,
+      backgroundColor: theme.surface,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+    },
+    inputWrapper: {
+      marginBottom: 15, 
+      position: "relative", 
+    },
+    label: {
+      color: theme.labelText,
+      fontSize: 12,
+      fontWeight: "600",
+      textTransform: "uppercase",
+      textAlign: isRTL ? "right" : "left",
+      marginBottom: 6,
+    },
+    dateRangePickerOuterContainer: {
+      marginTop: 10, 
+    },
+    checkoutRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "flex-end", 
+      marginTop: 20, 
+      gap: 10,
+    },
+    nationalityPickerWrapper: {
+      flex: 1,
+    },
+    pickerContainer: {
+      borderWidth: 1,
+      borderColor: theme.border,
+      borderRadius: 8,
+      backgroundColor: theme.surface,
+      justifyContent: "center", 
+      height: 50, 
+    },
+    picker: {
+      width: "100%",
+      color: theme.onSurface,
+    },
+    searchButton: {
+      backgroundColor: theme.primary,
+      width: 50,
+      height: 50,
+      borderRadius: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    suggestionItem: {
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.border,
+      backgroundColor: theme.surface,
+    },
+    suggestionItemText: {
+      fontSize: 14,
+      color: theme.onSurface,
+    },
+  });
+
+export default HotelForm;

package/src/components/TravelBooking/HotelSummary.tsx

@@ -0,0 +1,340 @@
+import { ThemeType, useTheme } from "@/theme";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { NumericStepper, NumericStepperProps } from "../NumericStepper";
+// import { ScrollView } from "react-native-gesture-handler";
+
+export interface RoomState {
+  id: string;
+  [key: string]: any;
+}
+
+export interface GuestConfigType {
+  key: string;
+  name: string;
+  description: string;
+  defaultValue: number;
+  minValue: number;
+  maxValue?: number;
+}
+
+const DEFAULT_GUEST_CONFIG: GuestConfigType[] = [
+  {
+    key: "adults",
+    name: "Adults",
+    description: "17+ years old",
+    defaultValue: 2,
+    minValue: 1,
+    maxValue: 5,
+  },
+  {
+    key: "children",
+    name: "Children",
+    description: "0 - 17 years old",
+    defaultValue: 0,
+    minValue: 0,
+    maxValue: 4,
+  },
+];
+
+const createNewRoom = (guestConfig: GuestConfigType[]): RoomState => {
+  const newRoom: RoomState = {
+    id: Date.now().toString() + Math.random().toString(36).substring(2, 9),
+  };
+  guestConfig.forEach((guest) => {
+    newRoom[guest.key] = guest.defaultValue;
+  });
+  return newRoom;
+};
+
+export interface HotelSummaryProps {
+  guestConfigData?: GuestConfigType[];
+  selection?: RoomState[];
+  onSelectionChange?: (rooms: RoomState[]) => void;
+  maxRooms?: number;
+  minRooms?: number;
+  roomTitlePrefix?: string;
+  removeRoomText?: string;
+  addRoomText?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  roomContainerStyle?: StyleProp<ViewStyle>;
+  roomHeaderStyle?: StyleProp<ViewStyle>;
+  roomTitleStyle?: StyleProp<TextStyle>;
+  removeRoomButtonStyle?: StyleProp<ViewStyle>;
+  removeRoomTextStyle?: StyleProp<TextStyle>;
+  guestRowStyle?: StyleProp<ViewStyle>;
+  guestLabelContainerStyle?: StyleProp<ViewStyle>;
+  guestNameStyle?: StyleProp<TextStyle>;
+  guestDescriptionStyle?: StyleProp<TextStyle>;
+  addRoomButtonStyle?: StyleProp<ViewStyle>;
+  addRoomButtonTextStyle?: StyleProp<TextStyle>;
+  stepperContainerStyle?: NumericStepperProps["style"];
+  stepperButtonStyle?: NumericStepperProps["buttonStyle"];
+  stepperButtonTextStyle?: NumericStepperProps["buttonTextStyle"];
+  stepperValueTextStyle?: NumericStepperProps["valueTextStyle"];
+}
+
+const HotelSummary: React.FC<HotelSummaryProps> = ({
+  guestConfigData: guestConfigProp = DEFAULT_GUEST_CONFIG,
+  selection,
+  onSelectionChange,
+  maxRooms = 5,
+  minRooms = 1,
+  roomTitlePrefix = "Room",
+  removeRoomText = "Remove",
+  addRoomText = "+ Add Room",
+  containerStyle,
+  roomContainerStyle,
+  roomHeaderStyle,
+  roomTitleStyle,
+  removeRoomButtonStyle,
+  removeRoomTextStyle,
+  guestRowStyle,
+  guestLabelContainerStyle,
+  guestNameStyle,
+  guestDescriptionStyle,
+  addRoomButtonStyle,
+  addRoomButtonTextStyle,
+  stepperContainerStyle,
+  stepperButtonStyle,
+  stepperButtonTextStyle,
+  stepperValueTextStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+
+  const guestConfig = useMemo(() => guestConfigProp, [guestConfigProp]);
+
+  const [rooms, setRooms] = useState<RoomState[]>(
+    selection && selection.length >= minRooms
+      ? selection
+      : Array.from({ length: minRooms }, () => createNewRoom(guestConfig))
+  );
+
+  const triggerSelectionChange = useCallback(
+    (updatedRooms: RoomState[]) => {
+      onSelectionChange?.(updatedRooms);
+    },
+    [onSelectionChange]
+  );
+
+  const addRoom = useCallback(() => {
+    setRooms((prevRooms) => {
+      if (prevRooms.length >= maxRooms) {
+        return prevRooms;
+      }
+      const updatedRooms = [...prevRooms, createNewRoom(guestConfig)];
+      triggerSelectionChange(updatedRooms);
+      return updatedRooms;
+    });
+  }, [maxRooms, triggerSelectionChange, guestConfig]);
+
+  const removeRoom = useCallback(
+    (roomIdToRemove: string) => {
+      setRooms((prevRooms) => {
+        if (prevRooms.length <= minRooms) {
+          return prevRooms;
+        }
+        const updatedRooms = prevRooms.filter(
+          (room) => room.id !== roomIdToRemove
+        );
+        triggerSelectionChange(updatedRooms);
+        return updatedRooms;
+      });
+    },
+    [triggerSelectionChange, minRooms]
+  );
+
+  const handleGuestChange = useCallback(
+    (
+      roomId: string,
+      guestKey: string,
+      action: "increment" | "decrement"
+    ) => {
+      setRooms((prevRooms) => {
+        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 (action === "increment") {
+              newValue = Math.min(maxValue, currentVal + 1);
+            } else if (action === "decrement") {
+              newValue = Math.max(minValue, currentVal - 1);
+            }
+
+            if (newValue !== currentVal) {
+              valueChanged = true;
+              return { ...room, [guestKey]: newValue };
+            }
+          }
+          return room;
+        });
+
+        if (valueChanged) {
+          triggerSelectionChange(updatedRooms);
+        }
+        return updatedRooms;
+      });
+    },
+    [triggerSelectionChange, guestConfig]
+  );
+
+  useEffect(() => {
+    onSelectionChange?.(rooms);
+  }, []);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {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,
+                  ]}
+                >
+                  {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}
+              />
+            </View>
+          ))}
+        </View>
+      ))}
+
+      {rooms.length < maxRooms && (
+        <TouchableOpacity
+          style={[styles.addRoomButton, addRoomButtonStyle]}
+          onPress={addRoom}
+        >
+          <Text style={[styles.addRoomButtonText, addRoomButtonTextStyle]}>
+            {addRoomText}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: theme.surface,
+      padding: 16,
+      // borderRadius: 8,
+      width: "100%",
+    },
+    roomContainer: {
+      marginBottom: 20,
+      paddingBottom: 10,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.border,
+    },
+    roomHeader: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 10,
+    },
+    roomTitle: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: theme.onSurface,
+    },
+    removeRoomText: {
+      fontSize: 14,
+      color: theme.error,
+      fontWeight: "500",
+    },
+    guestRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingVertical: 12,
+    },
+    guestLabelContainer: {
+      flexDirection: "column",
+      alignItems: isRTL ? "flex-end" : "flex-start",
+      flexShrink: 1,
+      marginRight: isRTL ? 0 : 8,
+      marginLeft: isRTL ? 8 : 0,
+    },
+    guestName: {
+      fontSize: 16,
+      fontWeight: "bold",
+      color: theme.onSurface,
+    },
+    guestDescription: {
+      fontSize: 12,
+      color: theme.secondaryText || theme.onSurface,
+      opacity: 0.8,
+    },
+    addRoomButton: {
+      marginTop: 10,
+      alignSelf: isRTL ? "flex-end" : "flex-start",
+    },
+    addRoomButtonText: {
+      fontSize: 16,
+      fontWeight: "bold",
+      color: theme.primary,
+    },
+  });
+
+export default HotelSummary;