React-Native
import {
Pressable,
ScrollView,
StyleSheet,
Text,
View,
Dimensions,
PixelRatio,
TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
import { FontAwesome } from "@expo/vector-icons";
import EvilIcons from "@expo/vector-icons/EvilIcons";
import moment from "moment";
const { width, height } = Dimensions.get("window");
const responsiveWidth = (percent) => {
return PixelRatio.roundToNearestPixel((width * percent) / 100);
};
const responsiveHeight = (percent) => {
return PixelRatio.roundToNearestPixel((height * percent) / 100);
};
export default function address() {
const [step, setStep] = useState(1);
const [currentDate, setCurrentDate] = useState(moment());
const [deliveryDate, setDeliveryDate] = useState(moment());
const [selectedTime, setSelectedTime] = useState(null);
const [selectedDeliveryTime, setSelectedDeliveryTime] = useState(null);
const [selectedDate, setSelectedDate] = useState(moment());
const handleBack = () => {
setStep((prevStep) => (prevStep > 1 ? prevStep - 1 : prevStep));
};
const bookingTimeOptions = [
{ startTime: "7:30 AM", endTime: "11:30 AM" },
{ startTime: "12:30 PM", endTime: "4:30 PM" },
{ startTime: "4:30 PM", endTime: "7:30 PM" },
{ startTime: "7:30 PM", endTime: "10:30 PM" },
];
const handleNext = () => {
setStep((prevStep) => {
const nextStep = prevStep + 1;
console.log("next step ", nextStep);
//check if next step is equal to 4
if (nextStep == 5) {
//call the place order function
}
return nextStep;
});
};
console.log(step);
const getNext6Days = () => {
const nextDays = [];
for (let i = 0; i < 5; i++) {
const nextDate = moment(currentDate).add(i, "days");
nextDays.push(nextDate);
}
return nextDays;
};
const renderDateButtons = () => {
const next6Days = getNext6Days();
return next6Days?.map((date, index) => (
<TouchableOpacity
onPress={() => setSelectedDate(date)}
style={{
alignItems: "center",
padding: responsiveWidth(2),
margin: responsiveWidth(1.5),
borderRadius: 6,
width: responsiveWidth(14.5),
backgroundColor: date.isSame(selectedDate, "day")
? "#0066b3"
: "white",
borderColor: date.isSame(selectedDate, "day")
? "transparent"
: "#0066b3",
borderWidth: date.isSame(selectedDate, "day") ? 0 : 1,
}}
>
<Text
style={{
textAlign: "center",
fontSize: 13,
color: date.isSame(selectedDate, "day") ? "white" : "black",
}}
>
{date.format("D")}
</Text>
<Text
style={{
marginTop: 3,
textAlign: "center",
fontSize: 13,
color: date.isSame(selectedDate, "day") ? "white" : "black",
}}
>
{date.format("ddd")}
</Text>
</TouchableOpacity>
));
};
const renderBookingTimeOptions = () => {
if (selectedDate) {
const isCurrentDate = selectedDate.isSame(currentDate, "day");
const currentTime = moment();
return bookingTimeOptions.map((option, index) => {
console.log(option);
const startTime = moment(
selectedDate?.format("YYYY-MM-DD") + " " + option.startTime,
"YYYY-MM-DD LT"
);
//check if the time slot is past the current time
const isTimeSlotPast = isCurrentDate && startTime.isBefore(currentDate);
return (
<TouchableOpacity
onPress={() => {
if (!isTimeSlotPast) {
setSelectedTime(option);
}
}}
style={{
textDecorationLine: isTimeSlotPast ? "Line-through" : "none",
opacity: isTimeSlotPast ? 0.5 : 1,
padding: responsiveWidth(1.5),
margin: responsiveWidth(1.1),
marginTop: responsiveHeight(1.5),
width: responsiveWidth(42),
borderRadius: 6,
borderWidth: 1,
borderColor: "#0066b3",
alignItems: "center",
backgroundColor:
selectedTime &&
selectedTime.startTime === option.startTime &&
selectedTime.endTime === option.endTime
? "#0066b2"
: "white",
}}
>
<Text
style={{
fontSize: responsiveWidth(3.5),
textAlign: "center",
color:
selectedTime &&
selectedTime.startTime === option.startTime &&
selectedTime.endTime === option.endTime
? "white"
: "black",
}}
>{`${option.startTime} - ${option.endTime}`}</Text>
</TouchableOpacity>
);
});
}
};
return (
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: "#0066b3",
padding: 10,
flexDirection: "row",
alignItems: "center",
gap: 10,
}}
>
<View
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: "#A0A0A0",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name="chevron-back" size={24} color="white" />
</View>
<Text
style={{ flex: 1, fontSize: 16, fontWeight: "500", color: "white" }}
>
Choose your address
</Text>
<View
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: "#A0A0A0",
justifyContent: "center",
alignItems: "center",
}}
>
<Entypo name="cross" size={24} color="white" />
</View>
</View>
{/* new section*/}
<View
style={{
padding: 10,
backgroundColor: "white",
height: 100,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 20,
}}
>
<Pressable
style={{
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "#A0A0A0",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name="chevron-back" size={24} color="white" />
</Pressable>
<Pressable
style={{
width: 54,
height: 54,
borderRadius: 27,
backgroundColor: "#F5F5F5",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name="location" size={24} color="#0066b2" />
</Pressable>
<Pressable
style={{
width: 54,
height: 54,
borderRadius: 27,
backgroundColor: "#F5F5F5",
justifyContent: "center",
alignItems: "center",
}}
>
<Entypo name="back-in-time" size={24} color="#0066b2" />
</Pressable>
<Pressable
style={{
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "#A0A0A0",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name="chevron-forward" size={24} color="white" />
</Pressable>
</View>
{/*new section */}
<View style={{ backgroundColor: "#F0F8FF", flex: 1, padding: 10 }}>
<ScrollView>
{step == 1 && (
<View>
{/*Map over all the addresses */}
<Pressable
style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
>
<AntDesign name="plus" size={24} color="black" />
<Pressable>
<Text style={{ fontSize: 16 }}>Add address</Text>
</Pressable>
</Pressable>
<View>
{/*map a[over the addresses] */}
<Pressable
style={{
backgroundColor: "white",
padding: 10,
marginVertical: 10,
borderRadius: 15,
borderWidth: 1,
borderColor: "#0066b2",
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
gap: 10,
}}
>
<Ionicons
name="location-outline"
size={24}
color="#0066b2"
/>
<Text style={{ fontSize: 17, fontWeight: "500" }}>
Home
</Text>
</View>
<FontAwesome name="flag" size={22} color="#0066b2" />
</View>
<Text
style={{
fontSize: 14,
fontWeight: "500",
marginTop: 10,
width: "95%",
}}
>
100,Navagam Dindoli Road udhna Surat{" "}
</Text>
<Text
style={{
color: "gray",
marginTop: 6,
fontSize: 14,
fontWeight: "500",
}}
>
Surat Gujarat 394210
</Text>
</Pressable>
</View>
</View>
)}
{/*new step */}
{step == 2 && (
<View
style={{
marginTop: 10,
backgroundColor: "white",
padding: 10,
borderRadius: 10,
}}
>
<View
style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
>
<EvilIcons name="location" size={24} color="black" />
<View>
<Text style={{ fontSize: responsiveWidth(4) }}>
Booking Slot
</Text>
<Text
style={{
marginTop: 4,
fontWeight: "500",
fontSize: responsiveWidth(4),
}}
>
{currentDate.format("MMMM YYYY")}
</Text>
</View>
</View>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
{renderDateButtons()}
</View>
<Text
style={{
marginHorizontal: responsiveWidth(2),
marginVertical: responsiveHeight(1),
fontWeight: "500",
fontSize: responsiveWidth(4),
}}
>
Booking Time Options
</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
{renderBookingTimeOptions()}
</View>
</View>
)}
</ScrollView>
</View>
{/*new section */}
<View
style={{
backgroundColor: "white",
padding: 15,
flexDirection: "row",
alignItems: "center",
gap: 12,
marginTop: "auto",
}}
>
<Pressable
disabled={step === 1}
onPress={handleBack}
style={{
backgroundColor: "#d0d0d0",
padding: 15,
borderRadius: 10,
flex: 1,
}}
>
<Text style={{ textAlign: "center", fontWeight: "500" }}>Back</Text>
</Pressable>
<Pressable
onPress={handleNext}
style={{
backgroundColor: "#0066b2",
padding: 15,
borderRadius: 10,
flex: 1,
}}
>
<Text
style={{ textAlign: "center", color: "white", fontWeight: "500" }}
>
{step == 4 ? "Book Service" : "Next"}
</Text>
</Pressable>
</View>
</View>
);
}
const styles = StyleSheet.create({});
/
