created booking ui

app/(auth)/(tabs)/(home)/scanQrPage.tsx

@@ -146,7 +146,11 @@ const ScanQrPage = () => {
                     >
                         {dummyDataChooseCarForCharging.map((car, index) => (
                             <ChooseCarForChargingRow
-                                navigationLink="/(auth)/(tabs)/(charging)/chargingPage"
+                                onPress={() =>
+                                    router.push(
+                                        '/(auth)/(tabs)/(charging)/chargingPage'
+                                    )
+                                }
                                 imageUrl={car.imageUrl}
                                 key={`${car.VehicleName}+${index}`}
                                 VehicleName={car.VehicleName}

component/bookingMenuPage/makingBookingPageComponent.tsx

@@ -1,4 +1,12 @@
-import { View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    StyleSheet,
+    Image,
+    Dimensions
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
 import NormalButton from '../global/normal_button';
@@ -9,6 +17,8 @@ import {
 } from '../global/SVG';
 import { ChargingStationTabView } from '../global/chargingStationTabView';
 import ChooseCarForChargingRow from '../global/chooseCarForChargingRow';
+import { useState } from 'react';
+import DropdownSelect from '../global/dropdown_select';
 
 const dummyDataChooseCarForCharging = [
     {
@@ -25,170 +35,529 @@ const dummyDataChooseCarForCharging = [
     { VehicleName: 'TESLA - Model 3', isDefault: false }
 ];
 
-const MakingBookingPageComponent = () => (
-    <SafeAreaView
-        style={{
-            flex: 1,
-            backgroundColor: 'white'
-        }}
-        edges={['right', 'top', 'left']}
-    >
-        <ScrollView className="flex-1 bg-white ">
-            <View className="pb-4">
-                <View className="pl-8 pt-8">
-                    <Pressable
-                        style={{ alignSelf: 'flex-start' }}
-                        onPress={() => {
-                            if (router.canGoBack()) {
-                                router.back();
-                            } else {
-                                router.replace('./');
-                            }
-                        }}
-                    >
-                        <PreviousPageBlackSvg />
-                    </Pressable>
-                    <Text className="text-3xl mt-8">上環街市充電站</Text>
-                    <View className="flex-column">
-                        <View className="flex-row justify-between items-center mr-[5%]">
-                            <Text
-                                className="text-base"
-                                style={styles.grayColor}
-                            >
-                                香港上環皇后大道中345號
-                            </Text>
-                            <NormalButton
-                                title={
-                                    <View className="flex-row items-center justify-center text-center space-x-1">
-                                        <DirectionLogoSvg />
-                                        <Text className="text-base">路線</Text>
-                                    </View>
-                                }
-                                onPress={() => console.log('路線')}
-                                extendedStyle={{
-                                    backgroundColor: '#E3F2F8',
-                                    borderRadius: 61,
-                                    paddingHorizontal: 20,
-                                    paddingVertical: 8
-                                }}
-                            />
-                        </View>
-                        <View className="flex-row space-x-2 items-center">
-                            <CheckMarkLogoSvg />
-                            <Text>Walk-In</Text>
-                            <Text>400米</Text>
-                        </View>
-                    </View>
-                </View>
-            </View>
+interface AccordionItemProps {
+    title: string;
+    children: React.ReactNode;
+    isOpen: boolean;
+    onToggle: () => void;
+    isSelected: boolean;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+    title,
+    children,
+    isOpen,
+    onToggle,
+    isSelected
+}) => (
+    <View className={`${isSelected ? 'bg-[#e7f5f8]' : 'bg-white'}`}>
+        <View className="mx-[5%]">
+            <Pressable onPress={onToggle}>
+                <Text
+                    className={` pt-2 text-lg ${
+                        isSelected ? 'text-[#222222]' : 'text-[#888888] '
+                    }}`}
+                >
+                    {title}
+                </Text>
+            </Pressable>
+            {isOpen && <View>{children}</View>}
+        </View>
+    </View>
+);
+
+const MakingBookingPageComponent = () => {
+    const [openDrawer, setOpenDrawer] = useState<number | null>(0);
+    const [selectedTime, setSelectedTime] = useState<string>('');
+    const [selectedDrawer, setSelectedDrawer] = useState<number>(0);
+    const [selectedDate, setSelectedDate] = useState<string>('');
+    const toggleDrawer = (index: number) => {
+        setOpenDrawer(openDrawer === index ? null : index);
+        setSelectedDrawer(index);
+    };
+
+    const timeData = [
+        '14:00',
+        '14:15',
+        '14:30',
+        '14:45',
+        '15:00',
+        '15:15',
+        '15:30',
+        '15:45',
+        '16:00',
+        '16:15',
+        '16:30',
+        '16:45',
+        '17:00',
+        '17:15',
+        '17:30',
+        '17:45'
+    ];
+    const dateData = [
+        '今天',
+        '3/15',
+        '3/16',
+        '3/17',
+        '3/18',
+        '3/19',
+        '3/20',
+        '3/21'
+    ];
+
+    const [uiState, setUiState] = useState({
+        isCarSelected: false,
+        isChargingPlanOpen: false,
+        isDateOpen: false,
+        isCharigingGunOpen: false
+    });
+    const [selectedChargingGun, setSelectedChargingGun] = useState('');
+    const [chargingBasedOnWatt, setChargingBasedOnWatt] = useState(false);
+    const [stopChargingUponBatteryFull, setStopChargingUponBatteryFull] =
+        useState(false);
+    const [selectedCar, setSelectedCar] = useState('');
+    const [selectedDuration, setSelectedDuration] = useState('');
+    const { width: screenWidth, height: screenHeight } =
+        Dimensions.get('window');
 
-            <View className=" bg-[#FAFAFA]">
-                <View className=" bg-[#e7f5f8]">
-                    <View className="mx-[5%] ">
-                        <Text className="text-xl pt-4">選擇充電車輛</Text>
-                        <ScrollView
-                            horizontal={true}
-                            contentContainerStyle={{
-                                alignItems: 'center',
-                                flexDirection: 'row',
-                                marginVertical: 8
+    const layoutWidth = screenWidth;
+    const layoutHeight = screenHeight * 0.4;
+
+    return (
+        <SafeAreaView
+            style={{
+                flex: 1,
+                backgroundColor: 'white'
+            }}
+            edges={['right', 'top', 'left']}
+        >
+            <ScrollView className="flex-1 bg-white ">
+                <View className="pb-4 ">
+                    <View className="ml-[5%] pt-8">
+                        <Pressable
+                            style={{ alignSelf: 'flex-start' }}
+                            onPress={() => {
+                                if (router.canGoBack()) {
+                                    router.back();
+                                } else {
+                                    router.replace('./');
+                                }
                             }}
-                            className="space-x-2"
                         >
-                            {dummyDataChooseCarForCharging.map((car, index) => (
-                                <ChooseCarForChargingRow
-                                    navigationLink="/bookingConfirmationPage"
-                                    imageUrl={car.imageUrl}
-                                    key={`${car.VehicleName}+${index}`}
-                                    VehicleName={car.VehicleName}
-                                    isDefault={car.isDefault}
+                            <PreviousPageBlackSvg />
+                        </Pressable>
+                        <Text className="text-3xl mt-8">上環街市充電站</Text>
+                        <View className="flex-column">
+                            <View className="flex-row justify-between items-center mr-[5%]">
+                                <Text
+                                    className="text-base"
+                                    style={styles.grayColor}
+                                >
+                                    香港上環皇后大道中345號
+                                </Text>
+                                <NormalButton
+                                    title={
+                                        <View className="flex-row items-center justify-center text-center space-x-1">
+                                            <DirectionLogoSvg />
+                                            <Text className="text-base">
+                                                路線
+                                            </Text>
+                                        </View>
+                                    }
+                                    onPress={() => console.log('路線')}
+                                    extendedStyle={{
+                                        backgroundColor: '#E3F2F8',
+                                        borderRadius: 61,
+                                        paddingHorizontal: 20,
+                                        paddingVertical: 8
+                                    }}
                                 />
-                            ))}
-                        </ScrollView>
+                            </View>
+                            <View className="flex-row space-x-2 items-center">
+                                <CheckMarkLogoSvg />
+                                <Text>Walk-In</Text>
+                                <Text>400米</Text>
+                            </View>
+                        </View>
                     </View>
                 </View>
+                <View>
+                    {selectedCar !== '' ? (
+                        <>
+                            <Pressable
+                                onPress={() => {
+                                    setSelectedCar('');
+                                    setOpenDrawer(0);
+                                    setSelectedDrawer(0);
+                                    setSelectedDuration('');
+                                    setChargingBasedOnWatt(false);
+                                    setStopChargingUponBatteryFull(false);
+                                    setSelectedDate('');
+                                    setSelectedTime('');
+                                }}
+                            >
+                                <View className="mx-[5%]">
+                                    <View className="flex-row items-center pt-4">
+                                        <Text className="text-lg pr-2 text-[#34667c]">
+                                            選擇充電車輛
+                                        </Text>
+                                        <CheckMarkLogoSvg />
+                                    </View>
+                                    <Text className="text-lg pb-4">
+                                        {selectedCar}
+                                    </Text>
+                                </View>
+                            </Pressable>
+                        </>
+                    ) : (
+                        <AccordionItem
+                            title="選擇充電車輪"
+                            isOpen={openDrawer === 0}
+                            onToggle={() => toggleDrawer(0)}
+                            isSelected={selectedDrawer === 0}
+                        >
+                            <ScrollView
+                                horizontal={true}
+                                contentContainerStyle={{
+                                    alignItems: 'center',
+                                    flexDirection: 'row',
+                                    marginVertical: 8
+                                }}
+                                className="space-x-2 "
+                            >
+                                {dummyDataChooseCarForCharging.map(
+                                    (car, index) => (
+                                        <ChooseCarForChargingRow
+                                            onPress={() => {
+                                                setSelectedCar(car.VehicleName);
+                                                setSelectedDrawer(1);
+                                                setOpenDrawer(1);
+                                            }}
+                                            imageUrl={car.imageUrl}
+                                            key={`${car.VehicleName}+${index}`}
+                                            VehicleName={car.VehicleName}
+                                            isDefault={car.isDefault}
+                                        />
+                                    )
+                                )}
+                            </ScrollView>
+                        </AccordionItem>
+                    )}
 
-                <View className="mx-[5%] ">
-                    <View className="justify-center p-4 pl-0">
+                    {stopChargingUponBatteryFull === true ||
+                    selectedDuration !== '' ? (
                         <Pressable
-                            style={{ alignSelf: 'flex-start' }}
-                            onPress={() => console.log('選擇充電方案')}
+                            onPress={() => {
+                                setSelectedDuration('');
+                                setChargingBasedOnWatt(false);
+                                setStopChargingUponBatteryFull(false);
+                                setSelectedTime('');
+                                setSelectedDate('');
+                                setOpenDrawer(1);
+                                setSelectedDrawer(1);
+                            }}
                         >
-                            <Text className="text-lg" style={styles.grayColor}>
-                                選擇充電方案
-                            </Text>
+                            <View className="mx-[5%] ">
+                                <View className="flex-row items-center pt-4">
+                                    <Text className="text-lg pr-2 text-[#34667c]">
+                                        選擇充電方案
+                                    </Text>
+                                    <CheckMarkLogoSvg />
+                                </View>
+                                <Text className="text-lg pb-4">
+                                    {selectedDuration !== ''
+                                        ? `按每道電 - ${selectedDuration}`
+                                        : '充滿停機'}
+                                </Text>
+                            </View>
                         </Pressable>
-                    </View>
-                    <View className="justify-center p-4 pl-0 ">
+                    ) : (
+                        <AccordionItem
+                            title="選擇充電方案"
+                            isOpen={openDrawer === 1}
+                            onToggle={() => {
+                                if (selectedCar !== '') {
+                                    toggleDrawer(1);
+                                }
+                            }}
+                            isSelected={selectedDrawer === 1}
+                        >
+                            <View className="flex-row justify-between mt-2 mb-3">
+                                <Pressable
+                                    className={`border rounded-lg border-[#34667c] w-[47%] items-center bg-white ${
+                                        chargingBasedOnWatt
+                                            ? 'bg-[#34667c] '
+                                            : ''
+                                    }`}
+                                    onPress={() => {
+                                        setChargingBasedOnWatt(
+                                            !chargingBasedOnWatt
+                                        );
+                                        setStopChargingUponBatteryFull(false);
+                                    }}
+                                >
+                                    <Text
+                                        className={`text-base p-2 text-[#34667c] ${
+                                            chargingBasedOnWatt
+                                                ? ' text-white'
+                                                : 'text-[#34667c]'
+                                        }`}
+                                    >
+                                        按每度電
+                                    </Text>
+                                </Pressable>
+                                <Pressable
+                                    onPress={() => {
+                                        setStopChargingUponBatteryFull(
+                                            !stopChargingUponBatteryFull
+                                        );
+                                        setChargingBasedOnWatt(false);
+                                        setSelectedDrawer(2);
+                                        setOpenDrawer(2);
+                                    }}
+                                    className={`border rounded-lg border-[#34667c] w-[47%] items-center bg-white ${
+                                        stopChargingUponBatteryFull
+                                            ? ' bg-[#34667c]'
+                                            : ''
+                                    }`}
+                                >
+                                    <Text
+                                        className={`text-base p-2 text-[#34667c] ${
+                                            stopChargingUponBatteryFull
+                                                ? ' text-white'
+                                                : 'text-[#34667c]'
+                                        }`}
+                                    >
+                                        充滿停機
+                                    </Text>
+                                </Pressable>
+                            </View>
+                            {chargingBasedOnWatt === true && (
+                                <View className="flex-row w-full justify-between mb-3">
+                                    {['30分鐘', '45分鐘', '60分鐘', '其他'].map(
+                                        (duration) => (
+                                            <Pressable
+                                                key={duration}
+                                                className={`${
+                                                    selectedDuration ===
+                                                    duration
+                                                        ? 'bg-[#34667c] '
+                                                        : 'bg-white'
+                                                } border border-[#34667c]  rounded-lg w-[22%] items-center`}
+                                                onPress={() => {
+                                                    setSelectedDuration(
+                                                        duration
+                                                    );
+                                                    setOpenDrawer(2);
+                                                    setSelectedDrawer(2);
+                                                }}
+                                            >
+                                                <Text
+                                                    className={`text-base p-2 ${
+                                                        selectedDuration ===
+                                                        duration
+                                                            ? 'text-white'
+                                                            : 'text-[#34667c]'
+                                                    } `}
+                                                >
+                                                    {duration}
+                                                </Text>
+                                            </Pressable>
+                                        )
+                                    )}
+                                </View>
+                            )}
+                        </AccordionItem>
+                    )}
+                    {selectedTime !== '' ? (
                         <Pressable
-                            style={{ alignSelf: 'flex-start' }}
-                            onPress={() => console.log('選擇日期時間')}
+                            onPress={() => {
+                                setOpenDrawer(2);
+                                setSelectedDrawer(2);
+                                setSelectedDate('');
+                                setSelectedTime('');
+                            }}
                         >
-                            <Text className="text-lg" style={styles.grayColor}>
-                                選擇日期時間
-                            </Text>
+                            <View className="mx-[5%] ">
+                                <View className="flex-row items-center pt-4">
+                                    <Text className="text-lg pr-2 text-[#34667c]">
+                                        選擇日期
+                                    </Text>
+                                    <CheckMarkLogoSvg />
+                                </View>
+                                <Text className="text-lg pb-4">
+                                    {selectedDate} - {selectedTime}
+                                </Text>
+                            </View>
                         </Pressable>
-                    </View>
+                    ) : (
+                        <AccordionItem
+                            title="選擇日期 (月/日)"
+                            isOpen={openDrawer === 2}
+                            onToggle={() => {
+                                if (
+                                    stopChargingUponBatteryFull !== false ||
+                                    selectedDuration !== ''
+                                ) {
+                                    toggleDrawer(2);
+                                }
+                            }}
+                            isSelected={selectedDrawer === 2}
+                        >
+                            <View className="flex-row w-full justify-between mb-3 flex-wrap my-2 ">
+                                {dateData.map((date) => (
+                                    <Pressable
+                                        key={date}
+                                        className={`${
+                                            selectedDate === date
+                                                ? 'bg-[#34667c] '
+                                                : 'bg-white'
+                                        } border border-[#34667c]  rounded-lg w-[22%] items-center mb-2`}
+                                        onPress={() => {
+                                            setSelectedDate(date);
+                                        }}
+                                    >
+                                        <Text
+                                            className={`text-base p-2  ${
+                                                selectedDate === date
+                                                    ? 'text-white'
+                                                    : 'text-[#34667c]'
+                                            } `}
+                                        >
+                                            {date}
+                                        </Text>
+                                    </Pressable>
+                                ))}
+                            </View>
 
-                    <View className=" justify-center p-4 pl-0">
-                        <Pressable
-                            style={{ alignSelf: 'flex-start' }}
-                            onPress={() => console.log('選擇充電座')}
+                            {selectedDate !== '' && (
+                                <>
+                                    <Text className="text-lg pr-2 ">
+                                        選擇時間
+                                    </Text>
+                                    <View className="flex-row w-full justify-between mb-3 flex-wrap my-2 ">
+                                        {timeData.map((time) => (
+                                            <Pressable
+                                                key={time}
+                                                className={`${
+                                                    selectedTime === time
+                                                        ? 'bg-[#34667c] '
+                                                        : 'bg-white'
+                                                } border border-[#34667c]  rounded-lg w-[22%] items-center mb-2`}
+                                                onPress={() => {
+                                                    setSelectedTime(time);
+                                                    setOpenDrawer(3);
+                                                    setSelectedDrawer(3);
+                                                }}
+                                            >
+                                                <Text
+                                                    className={`text-base p-2  ${
+                                                        selectedTime === time
+                                                            ? 'text-white'
+                                                            : 'text-[#34667c]'
+                                                    } `}
+                                                >
+                                                    {time}
+                                                </Text>
+                                            </Pressable>
+                                        ))}
+                                    </View>
+                                </>
+                            )}
+                        </AccordionItem>
+                    )}
+                    <View className="">
+                        <AccordionItem
+                            title="選擇充電座"
+                            isOpen={openDrawer === 3}
+                            onToggle={() => {
+                                if (selectedTime) {
+                                    toggleDrawer(3);
+                                }
+                            }}
+                            isSelected={selectedDrawer === 3}
                         >
-                            <Text className="text-lg" style={styles.grayColor}>
-                                選擇充電座
-                            </Text>
-                        </Pressable>
+                            <View className="">
+                                <DropdownSelect
+                                    dropdownOptions={[
+                                        { label: '1', value: '1' },
+                                        { label: '2', value: '2' }
+                                    ]}
+                                    placeholder={'選擇充電座號碼'}
+                                    onSelect={(value) => {
+                                        setSelectedChargingGun(value);
+                                        router.push('/bookingConfirmationPage');
+                                    }}
+                                    extendedStyle={{
+                                        borderColor: '#34667c',
+                                        marginTop: 4
+                                    }}
+                                />
+
+                                <Image
+                                    style={{
+                                        width: layoutWidth * 0.97,
+                                        height: layoutHeight
+                                    }}
+                                    resizeMode="contain"
+                                    source={require('../../assets/ChargeStationLayout.png')}
+                                />
+                            </View >
+                        </AccordionItem>
                     </View>
                 </View>
-            </View>
 
-            <View className="mx-[5%] flex-1">
-                <View
-                    className="flex-row border-slate-300 mt-3 mb-6 rounded-2xl flex-1"
-                    style={{ borderWidth: 1 }}
-                >
-                    <View className="flex-1 m-4">
-                        <View className="flex-1 flex-row ">
-                            <View className=" flex-1 flex-column  justify-between">
-                                <Text className="text-xl " style={styles.text}>
-                                    收費
-                                </Text>
-
-                                <View className="flex-row items-center space-x-2">
-                                    <Text className="text-3xl text-[#02677D]">
-                                        $20
+                <View className="mx-[5%] flex-1">
+                    <View
+                        className="flex-row border-slate-300 mt-3 mb-6 rounded-2xl flex-1"
+                        style={{ borderWidth: 1 }}
+                    >
+                        <View className="flex-1 m-4">
+                            <View className="flex-1 flex-row ">
+                                <View className=" flex-1 flex-column  justify-between">
+                                    <Text
+                                        className="text-xl "
+                                        style={styles.text}
+                                    >
+                                        收費
                                     </Text>
-                                    <Text style={styles.text}>每15分鐘</Text>
+
+                                    <View className="flex-row items-center space-x-2">
+                                        <Text className="text-3xl text-[#02677D]">
+                                            $20
+                                        </Text>
+                                        <Text style={styles.text}>
+                                            每15分鐘
+                                        </Text>
+                                    </View>
                                 </View>
-                            </View>
-                            <View className="items-center justify-center">
-                                <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
-                            </View>
-                            <View className="flex-1 flex-column ">
-                                <View className="flex-1"></View>
-                                <View className="flex-row items-center ml-4 space-x-2 ">
-                                    <Text className="text-3xl text-[#02677D]">
-                                        $3.5
-                                    </Text>
-                                    <Text style={styles.text}>每度電</Text>
+                                <View className="items-center justify-center">
+                                    <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
+                                </View>
+                                <View className="flex-1 flex-column ">
+                                    <View className="flex-1"></View>
+                                    <View className="flex-row items-center ml-4 space-x-2 ">
+                                        <Text className="text-3xl text-[#02677D]">
+                                            $3.5
+                                        </Text>
+                                        <Text style={styles.text}>每度電</Text>
+                                    </View>
                                 </View>
                             </View>
                         </View>
                     </View>
-                </View>
 
-                <Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
-                    充電站資訊
-                </Text>
-                <View className="h-[250px]">
-                    <ChargingStationTabView titles={['充電插頭', '其他']} />
+                    <Text className="text-xl pb-2 " style={styles.text}>
+                        充電站資訊
+                    </Text>
+                    <View className="h-[250px]">
+                        <ChargingStationTabView titles={['充電插頭', '其他']} />
+                    </View>
                 </View>
-            </View>
-        </ScrollView>
-    </SafeAreaView>
-);
-
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
 export default MakingBookingPageComponent;
 
 const styles = StyleSheet.create({

component/global/SVG.tsx

@@ -66,26 +66,6 @@ export const HomeIconSvg = () => (
     </Svg>
 );
 
-// export const BatteryLogoSvg = () => (
-//     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-//         <Rect width="40" height="40" rx="20" fill="#02677D" />
-//         <Path
-//             d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 20.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
-//             fill="#FAFAFA"
-//         />
-//     </Svg>
-// );
-
-// export const TimeClockLogoSvg = () => (
-//     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-//         <Rect width="40" height="40" rx="20" fill="#02677D" />
-//         <Path
-//             d="M23.6559 24.7652L24.7652 23.6559L20.7894 19.6799V14.7368H19.2105V20.3198L23.6559 24.7652ZM20.0018 30C18.6187 30 17.3186 29.7375 16.1016 29.2126C14.8846 28.6877 13.826 27.9753 12.9258 27.0755C12.0255 26.1757 11.3129 25.1175 10.7877 23.9011C10.2626 22.6846 10 21.3849 10 20.0018C10 18.6187 10.2625 17.3186 10.7874 16.1016C11.3123 14.8846 12.0247 13.826 12.9245 12.9258C13.8243 12.0256 14.8825 11.3129 16.0989 10.7877C17.3154 10.2626 18.6151 10 19.9982 10C21.3813 10 22.6814 10.2625 23.8984 10.7874C25.1154 11.3123 26.174 12.0247 27.0742 12.9245C27.9744 13.8243 28.6871 14.8825 29.2123 16.0989C29.7374 17.3154 30 18.6151 30 19.9982C30 21.3813 29.7375 22.6814 29.2126 23.8984C28.6877 25.1154 27.9753 26.174 27.0755 27.0742C26.1757 27.9744 25.1175 28.6871 23.9011 29.2123C22.6846 29.7374 21.3849 30 20.0018 30ZM20 28.4211C22.3333 28.4211 24.3202 27.6009 25.9605 25.9605C27.6009 24.3202 28.4211 22.3333 28.4211 20C28.4211 17.6667 27.6009 15.6798 25.9605 14.0395C24.3202 12.3991 22.3333 11.5789 20 11.5789C17.6667 11.5789 15.6798 12.3991 14.0395 14.0395C12.3991 15.6798 11.5789 17.6667 11.5789 20C11.5789 22.3333 12.3991 24.3202 14.0395 25.9605C15.6798 27.6009 17.6667 28.4211 20 28.4211Z"
-//             fill="#FAFAFA"
-//         />
-//     </Svg>
-// );
-
 export const WarningTriangleLogoSvg = () => (
     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
         <Path
@@ -279,43 +259,24 @@ export const StarSvg = () => (
     </Svg>
 );
 
-// export const TickLogoSvg = () => (
-//     <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-//         <Rect width="24" height="24" rx="12" fill="#02677D" />
-//         <Path
-//             d="M9.5501 18L3.8501 12.3L5.2751 10.875L9.5501 15.15L18.7251 5.97498L20.1501 7.39998L9.5501 18Z"
-//             fill="#CEE6F0"
-//         />
-//     </Svg>
-// );
-
-export const GreenStarSvg = () => (
-    <Svg width="20" height="18" viewBox="0 0 20 18" fill="none">
+export const TickLogoSvg = () => (
+    <Svg width="40" height="40" viewBox="0 0 24 24" fill="none">
+        <Rect width="24" height="24" rx="12" fill="#02677D" />
         <Path
-            d="M4.39015 17.3596L5.8786 10.9834L0.930908 6.69802L7.44784 6.13264L10.0001 0.121094L12.5525 6.13264L19.0694 6.69802L14.1217 10.9834L15.6101 17.3596L10.0001 13.9742L4.39015 17.3596Z"
-            fill="#02677D"
+            d="M9.5501 18L3.8501 12.3L5.2751 10.875L9.5501 15.15L18.7251 5.97498L20.1501 7.39998L9.5501 18Z"
+            fill="#CEE6F0"
         />
     </Svg>
 );
 
-export const TickLogoSvg = () => (
-    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-        <Rect width="40" height="40" rx="20" fill="#02677D" />
+export const GreenStarSvg = () => (
+    <Svg width="20" height="18" viewBox="0 0 20 18" fill="none">
         <Path
-            d="M6.70762 5.99998L1.05383 11.6538L-4.60642e-08 10.6L4.6 5.99998L-4.48209e-07 1.39998L1.05382 0.346158L6.70762 5.99998Z"
+            d="M4.39015 17.3596L5.8786 10.9834L0.930908 6.69802L7.44784 6.13264L10.0001 0.121094L12.5525 6.13264L19.0694 6.69802L14.1217 10.9834L15.6101 17.3596L10.0001 13.9742L4.39015 17.3596Z"
             fill="#02677D"
         />
     </Svg>
 );
-// export const TickLogoSvg = () => (
-//     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-//         <Rect width="40" height="40" rx="20" fill="#02677D" />
-//         <Path
-//             d="M15.9169 30L6.41687 20.5L8.79187 18.125L15.9169 25.25L31.2085 9.95837L33.5835 12.3334L15.9169 30Z"
-//             fill="#FAFAFA"
-//         />
-//     </Svg>
-// );
 
 export const WalletSvg = () => (
     <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">

component/global/chooseCarForChargingRow.tsx

@@ -21,14 +21,14 @@ const ChooseCarForChargingRow = ({
     imageUrl,
     VehicleName,
     isDefault,
-    navigationLink
+    onPress
 }: {
     imageUrl?: any;
     VehicleName: string;
     isDefault: boolean;
-    navigationLink: string;
+    onPress: () => void;
 }) => (
-    <Pressable onPress={() => router.push(navigationLink)}>
+    <Pressable onPress={onPress}>
         <View
             style={[
                 styles.container,