detail screen

src/assets/images/index.tsx

@@ -105,5 +105,36 @@ const images = {
   popularDetail10: require('./populardetail10.jpeg'),
   popularDetail11: require('./populardetail11.jpeg'),
   popularDetail12: require('./populardetail12.jpeg'),
+
+  //destination detail v2
+  destinationdetail: require('./destinationdetail.jpeg'),
+  destinationdetail2: require('./destinationdetail1.jpeg'),
+  destinationdetail3: require('./destinationdetail3.jpeg'),
+  destinationdetail4: require('./destinationdetail4.jpeg'),
+  destinationdetail5: require('./destinationdetail5.jpeg'),
+  destinationdetail6: require('./destinationdetail6.jpeg'),
+  destinationdetail7: require('./destinationdetail7.jpeg'),
+  destinationdetail8: require('./destinationdetail8.jpeg'),
+  destinationdetail9: require('./destinationdetail9.jpeg'),
+  destinationdetail10: require('./destinationdetail10.jpeg'),
+  destinationdetail11: require('./destinationdetail11.webp'),
+  destinationdetail12: require('./destinationdetail12.webp'),
+
+  //hotedetail and home page
+  hoteldetail: require('./hoteldetail.jpeg'),
+  hoteldetail1: require('./hoteldetail1.jpeg'),
+  hoteldetail2: require('./hoteldetail2.jpeg'),
+  hoteldetail3: require('./hoteldetail3.jpeg'),
+  hoteldetail4: require('./hoteldetail4.webp'),
+  hoteldetail5: require('./hoteldetail5.jpeg'),
+  hoteldetail6: require('./hoteldetail6.jpeg'),
+  hoteldetail7: require('./hoteldetail7.png'),
+  hoteldetail8: require('./hoteldetail8.jpeg'),
+  hoteldetail9: require('./hoteldetail9.jpeg'),
+  hoteldetail10: require('./hoteldetail10.jpeg'),
+  hoteldetail11: require('./hoteldetail11.jpeg'),
+  hoteldetail12: require('./hoteldetail12.jpeg'),
+  hoteldetail13: require('./hoteldetail13.jpeg'),
+  hoteldetail14: require('./hoteldetail13.jpeg'),
 };
 export default images;

src/components/list-hotel-resort/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import {FlatList, Image, Text, View} from 'react-native';
+import {FlatList, Image, Text, TouchableOpacity, View} from 'react-native';
 import AppMaterIcon from '../icon/AppMaterialIcons';
 import images from '../../assets/images';
 import styles from '../../features/homepage/styles';
 import {dataResortHotel} from '../../features/homepage/fake-data/FakeData';
+import {useNavigation} from '@react-navigation/core';
 
 const ListHotelResort = () => {
+  const navigation = useNavigation();
+
   return (
     <FlatList
       data={dataResortHotel}
@@ -14,7 +17,14 @@ const ListHotelResort = () => {
       showsHorizontalScrollIndicator={false}
       renderItem={({item}) => {
         return (
-          <View style={styles.hotelContainer}>
+          <TouchableOpacity
+            style={styles.hotelContainer}
+            onPress={() =>
+              navigation.navigate(
+                'RecentScheduleDetailV2' as never,
+                {item: item, hotel: true} as never,
+              )
+            }>
             <View style={styles.hotelTop}>
               <Image source={item.image} style={styles.imageSchedule} />
             </View>
@@ -30,7 +40,7 @@ const ListHotelResort = () => {
               </View>
               <Text style={styles.colorRed}>{item.price}</Text>
             </View>
-          </View>
+          </TouchableOpacity>
         );
       }}
     />

src/components/orderSuccess/index.tsx

@@ -6,7 +6,11 @@ import {setOpenModal} from '../../features/scheduleOverview/scheduleOverviewSlic
 import AppAntDesign from '../../components/icon/AppAntDesign';
 import {useNavigation} from '@react-navigation/core';
 
-const OrderSuccess = () => {
+interface TypeOrderSucees {
+  title: string;
+}
+
+const OrderSuccess: React.FC<TypeOrderSucees> = ({title}) => {
   const openModal = useAppSelector(
     state => state.scheduleOverviewSlice.openModal,
   );
@@ -30,7 +34,7 @@ const OrderSuccess = () => {
               color: '#FF5F24',
               fontSize: 14,
             }}>
-            Chúc mừng bạn đã đặt Tour thành công
+            Chúc mừng bạn đã đặt {title} thành công
           </Text>
 
           <TouchableOpacity

src/features/detail-ver2/popular-place-detail/index.tsx

@@ -1,9 +1,27 @@
 import React from 'react';
-import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import images from '../../../assets/images';
+import AppIonicons from '../../../components/icon/AppIonicons';
+import {useNavigation} from '@react-navigation/core';
+import {setOpenModal} from '../../scheduleOverview/scheduleOverviewSlice';
+import {useAppDispatch, useAppSelector} from '../../../app/store';
+import OrderSuccess from '../../../components/orderSuccess';
 
 const PopularPlaceDetailV2 = ({route}) => {
   const {item} = route.params;
+  const navigation = useNavigation();
+  const dispatch = useAppDispatch();
+  const openModal = useAppSelector(
+    state => state.scheduleOverviewSlice.openModal,
+  );
+  console.log('open new', openModal);
   return (
     <View style={styles.container}>
       <ScrollView style={styles.container}>
@@ -16,6 +34,13 @@ const PopularPlaceDetailV2 = ({route}) => {
             </Text>
             <Text style={styles.colorWhite}>{item.place}</Text>
           </View>
+          <AppIonicons
+            name="chevron-back-outline"
+            color={'white'}
+            size={20}
+            style={styles.back}
+            onPress={() => navigation.goBack()}
+          />
           <View style={styles.infoContainer}>
             <View style={styles.infoBlock}>
               <Text style={styles.bold}>
@@ -52,26 +77,30 @@ const PopularPlaceDetailV2 = ({route}) => {
             </View>
           </View>
         </View>
-        <View
-          style={{
-            width: '100%',
-            marginTop: 16,
-            paddingHorizontal: 16,
-          }}>
-          <Text style={{lineHeight: 19}}>{item.textHeader}</Text>
+        <View style={styles.blockContent}>
+          <Text style={styles.lineHeight}>{item.textHeader}</Text>
         </View>
-        <View style={{width: '100%', marginTop: 16, paddingHorizontal: 16}}>
-          <Text style={{lineHeight: 19}}>{item.textContent}</Text>
+        <View style={styles.blockContent}>
+          <Text style={styles.lineHeight}>{item.textContent}</Text>
         </View>
       </ScrollView>
+      <View style={styles.clickFee}>
+        <TouchableOpacity
+          style={styles.blockFee}
+          onPress={() => dispatch(setOpenModal(true))}>
+          <Text style={styles.colorFee}>Đặt vé</Text>
+        </TouchableOpacity>
+      </View>
+      {openModal && <OrderSuccess title={'vé'} />}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 16,
+    paddingBottom: 50,
+    zIndex: 0,
   },
   blockImage: {width: '100%', height: 240},
   fullWidth: {width: '100%', height: '100%'},
@@ -143,6 +172,33 @@ const styles = StyleSheet.create({
     width: '30%',
     height: '100%',
   },
+  back: {position: 'absolute', top: '20%', left: '3%', zIndex: 99},
+  blockContent: {
+    width: '100%',
+    marginTop: 16,
+    paddingHorizontal: 16,
+  },
+  lineHeight: {lineHeight: 19},
+  clickFee: {
+    width: '100%',
+    height: 50,
+    backgroundColor: 'white',
+    position: 'absolute',
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  blockFee: {
+    width: 100,
+    height: 30,
+    backgroundColor: '#FF5F24',
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  colorFee: {
+    color: 'white',
+  },
 });
 
 export default PopularPlaceDetailV2;

src/features/detail-ver2/recent-schedule-detail/index.tsx

@@ -4,18 +4,26 @@ import images from '../../../assets/images';
 import AppIonicons from '../../../components/icon/AppIonicons';
 import {useNavigation} from '@react-navigation/core';
 import {styles} from './styles';
+import {setOpenModal} from '../../scheduleOverview/scheduleOverviewSlice';
+import {useAppDispatch, useAppSelector} from '../../../app/store';
+import OrderSuccess from '../../../components/orderSuccess';
 
 const RecentScheduleDetailV2 = ({route}) => {
   const navigation = useNavigation();
-  const {item} = route.params;
+  const {item, hotel} = route?.params;
+  const dispatch = useAppDispatch();
+  const openModal = useAppSelector(
+    state => state.scheduleOverviewSlice.openModal,
+  );
+
   return (
     <>
       <View style={styles.container}>
         <ScrollView style={{marginBottom: 50}}>
           <View style={styles.blockImageContainer}>
             <Image
-              source={item.imageTopLeft}
-              resizeMode="stretch"
+              source={item.imageTopLeft || item.image}
+              resizeMode="cover"
               style={styles.fullWidth}
             />
             <View style={styles.viewPosition}>
@@ -46,21 +54,21 @@ const RecentScheduleDetailV2 = ({route}) => {
           <View style={styles.blockImage}>
             <View style={styles.blockItem}>
               <Image
-                source={item.imageTopRight}
+                source={item.imageTopRight || item.image1}
                 resizeMode="cover"
                 style={styles.fullWidth}
               />
             </View>
             <View style={styles.blockItem}>
               <Image
-                source={item.imageTopRightBottom}
+                source={item.imageTopRightBottom || item.image2}
                 resizeMode="cover"
                 style={styles.fullWidth}
               />
             </View>
             <View style={styles.blockItem}>
               <Image
-                source={item.imageTopLeftBottom}
+                source={item.imageTopLeftBottom || item.image3}
                 resizeMode="cover"
                 style={styles.fullWidth}
               />
@@ -92,16 +100,23 @@ const RecentScheduleDetailV2 = ({route}) => {
         <View style={styles.rightSubmit}>
           <TouchableOpacity
             style={styles.rightClick}
-            onPress={() =>
-              navigation.navigate(
-                'ScheduleOverview' as never,
-                {item: item} as never,
-              )
-            }>
-            <Text style={styles.colorWhite}>xem chi tiết</Text>
+            onPress={() => {
+              if (!hotel) {
+                navigation.navigate(
+                  'ScheduleOverview' as never,
+                  {item: item} as never,
+                );
+              } else {
+                dispatch(setOpenModal(true));
+              }
+            }}>
+            <Text style={styles.colorWhite}>
+              {!hotel ? 'Xem chi tiết' : 'Đặt phòng'}
+            </Text>
           </TouchableOpacity>
         </View>
       </View>
+      {openModal && <OrderSuccess title="khách sạn" />}
     </>
   );
 };