|
@ -22,9 +22,9 @@ interface Country { |
|
|
interface CommonLayoutProps {} |
|
|
interface CommonLayoutProps {} |
|
|
|
|
|
|
|
|
const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
const {user} = useUserContext() |
|
|
|
|
|
|
|
|
const { user } = useUserContext(); |
|
|
|
|
|
|
|
|
const router = useRouter() |
|
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
|
|
|
|
|
const [countries, setCountries] = useState<Country[]>([]); |
|
|
const [countries, setCountries] = useState<Country[]>([]); |
|
|
const [startCity, setStartCity] = useState<string>(""); |
|
|
const [startCity, setStartCity] = useState<string>(""); |
|
@ -45,6 +45,7 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
}[] |
|
|
}[] |
|
|
>([]); |
|
|
>([]); |
|
|
const [isFormValid, setIsFormValid] = useState<boolean>(false); |
|
|
const [isFormValid, setIsFormValid] = useState<boolean>(false); |
|
|
|
|
|
const [isContinueValid, setIsContinueValid] = useState<boolean>(false); |
|
|
var special = [ |
|
|
var special = [ |
|
|
"Zeroth", |
|
|
"Zeroth", |
|
|
"First", |
|
|
"First", |
|
@ -96,7 +97,9 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
if (lastDestination?.endCity) { |
|
|
if (lastDestination?.endCity) { |
|
|
axiosInstance |
|
|
axiosInstance |
|
|
.get( |
|
|
.get( |
|
|
`/api/trip/custom/transport/?from_city=${startCity.split("/")[2].trim()}&to_city=${lastDestination.endCity.split("/")[2].trim()}` |
|
|
|
|
|
|
|
|
`/api/trip/custom/transport/?from_city=${startCity |
|
|
|
|
|
.split("/")[2] |
|
|
|
|
|
.trim()}&to_city=${lastDestination.endCity.split("/")[2].trim()}`
|
|
|
) |
|
|
) |
|
|
.then((response) => setTransport(response.data)) |
|
|
.then((response) => setTransport(response.data)) |
|
|
.catch((error) => |
|
|
.catch((error) => |
|
@ -104,7 +107,9 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
axiosInstance |
|
|
axiosInstance |
|
|
.get(`/api/trip/hotels/${lastDestination.endCity.split("/")[2].trim()}/`) |
|
|
|
|
|
|
|
|
.get( |
|
|
|
|
|
`/api/trip/hotels/${lastDestination.endCity.split("/")[2].trim()}/` |
|
|
|
|
|
) |
|
|
.then((response) => setHotel(response.data.results)) |
|
|
.then((response) => setHotel(response.data.results)) |
|
|
.catch((error) => console.error("Error fetching hotels:", error)); |
|
|
.catch((error) => console.error("Error fetching hotels:", error)); |
|
|
} |
|
|
} |
|
@ -143,6 +148,22 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
); |
|
|
); |
|
|
setIsFormValid(isValid); |
|
|
setIsFormValid(isValid); |
|
|
}; |
|
|
}; |
|
|
|
|
|
const validateContinue = () => { |
|
|
|
|
|
const isValid = |
|
|
|
|
|
startCity && |
|
|
|
|
|
startDate && |
|
|
|
|
|
passengers && |
|
|
|
|
|
destinations.length > 0 && |
|
|
|
|
|
destinations.every( |
|
|
|
|
|
(destination) => |
|
|
|
|
|
destination.endCity && |
|
|
|
|
|
destination.transport && |
|
|
|
|
|
destination.hotel && |
|
|
|
|
|
destination.duration > 0 && |
|
|
|
|
|
destination.finishDate |
|
|
|
|
|
); |
|
|
|
|
|
setIsContinueValid(isValid); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const addDestination = () => { |
|
|
const addDestination = () => { |
|
|
setDestinations([ |
|
|
setDestinations([ |
|
@ -198,26 +219,33 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
|
|
|
|
|
|
setDestinations(updatedDestinations); |
|
|
setDestinations(updatedDestinations); |
|
|
validateForm(); |
|
|
validateForm(); |
|
|
|
|
|
validateContinue(); |
|
|
}; |
|
|
}; |
|
|
console.log(destinations); |
|
|
console.log(destinations); |
|
|
|
|
|
|
|
|
const submitTour = async () => { |
|
|
const submitTour = async () => { |
|
|
const formData = { |
|
|
const formData = { |
|
|
destinations: destinations.map((destination, index) => ({ |
|
|
destinations: destinations.map((destination, index) => ({ |
|
|
name: `${destination.endCity.split("/")[0].trim()}-${destination.endCity.split("/")[1].trim()} `, |
|
|
|
|
|
|
|
|
name: `${destination.endCity.split("/")[0].trim()}-${destination.endCity |
|
|
|
|
|
.split("/")[1] |
|
|
|
|
|
.trim()} `,
|
|
|
})), |
|
|
})), |
|
|
price_estimate: JSON.stringify(estimatedCost), |
|
|
price_estimate: JSON.stringify(estimatedCost), |
|
|
detail: JSON.stringify({ |
|
|
|
|
|
|
|
|
detail: JSON.stringify({ |
|
|
"1": { |
|
|
"1": { |
|
|
title: "Begin Trip", |
|
|
title: "Begin Trip", |
|
|
city: `${startCity.split("/")[0].trim()}-${startCity.split("/")[1].trim()} `, |
|
|
|
|
|
|
|
|
city: `${startCity.split("/")[0].trim()}-${startCity |
|
|
|
|
|
.split("/")[1] |
|
|
|
|
|
.trim()} `,
|
|
|
number_passenger: `${passengers}`, |
|
|
number_passenger: `${passengers}`, |
|
|
start_date: startDate.replace(/-/g, "/"), |
|
|
start_date: startDate.replace(/-/g, "/"), |
|
|
}, |
|
|
}, |
|
|
...destinations.reduce((acc, destination, index) => { |
|
|
...destinations.reduce((acc, destination, index) => { |
|
|
acc[index + 2] = { |
|
|
acc[index + 2] = { |
|
|
title: `${stringifyNumber(index + 1)} Destination`, |
|
|
title: `${stringifyNumber(index + 1)} Destination`, |
|
|
city:`${destination.endCity.split("/")[0].trim()}-${destination.endCity.split("/")[1].trim()} `, |
|
|
|
|
|
|
|
|
city: `${destination.endCity |
|
|
|
|
|
.split("/")[0] |
|
|
|
|
|
.trim()}-${destination.endCity.split("/")[1].trim()} `,
|
|
|
transportation: destination.transport, |
|
|
transportation: destination.transport, |
|
|
hotel: destination.hotel, |
|
|
hotel: destination.hotel, |
|
|
duration: `${destination.duration}day`, |
|
|
duration: `${destination.duration}day`, |
|
@ -235,22 +263,17 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
}), |
|
|
}), |
|
|
}; |
|
|
}; |
|
|
try { |
|
|
try { |
|
|
const response = await axiosInstance.post( |
|
|
|
|
|
"/api/trip/custom/", |
|
|
|
|
|
formData, |
|
|
|
|
|
{ |
|
|
|
|
|
headers: { |
|
|
|
|
|
Authorization: `token ${user.token}`, |
|
|
|
|
|
"Content-Type": "application/json", |
|
|
|
|
|
"X-CSRFToken": |
|
|
|
|
|
"HaqCxkS63ejsvwmlmk360sbFowGtwfNS06vGDYMIfWmHTWzJdod7x0zMEeC9gBSX", |
|
|
|
|
|
Accept: "application/json", |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
const response = await axiosInstance.post("/api/trip/custom/", formData, { |
|
|
|
|
|
headers: { |
|
|
|
|
|
Authorization: `token ${user.token}`, |
|
|
|
|
|
"Content-Type": "application/json", |
|
|
|
|
|
"X-CSRFToken": |
|
|
|
|
|
"HaqCxkS63ejsvwmlmk360sbFowGtwfNS06vGDYMIfWmHTWzJdod7x0zMEeC9gBSX", |
|
|
|
|
|
Accept: "application/json", |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
console.log("Response:", response.data); |
|
|
console.log("Response:", response.data); |
|
|
router.push("/custom-history") |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
router.push("/custom-history"); |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error("Error sending trip details:", error); |
|
|
console.error("Error sending trip details:", error); |
|
|
} |
|
|
} |
|
@ -282,7 +305,10 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
<option value="">Select City</option> |
|
|
<option value="">Select City</option> |
|
|
{countries.flatMap((country) => |
|
|
{countries.flatMap((country) => |
|
|
country.city.map((city) => ( |
|
|
country.city.map((city) => ( |
|
|
<option key={city.name} value={`${country.name} / ${city.name} / ${city.slug}`}> |
|
|
|
|
|
|
|
|
<option |
|
|
|
|
|
key={city.name} |
|
|
|
|
|
value={`${country.name} / ${city.name} / ${city.slug}`} |
|
|
|
|
|
> |
|
|
{`${country.name} - ${city.name}`} |
|
|
{`${country.name} - ${city.name}`} |
|
|
</option> |
|
|
</option> |
|
|
)) |
|
|
)) |
|
@ -313,7 +339,9 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
|
|
|
|
|
|
{destinations.map((destination, index) => ( |
|
|
{destinations.map((destination, index) => ( |
|
|
<div key={index} className="space-y-8"> |
|
|
<div key={index} className="space-y-8"> |
|
|
<p className="text-bronze text-xs">{stringifyNumber(index + 1)} Destination </p> |
|
|
|
|
|
|
|
|
<p className="text-bronze text-xs"> |
|
|
|
|
|
{stringifyNumber(index + 1)} Destination{" "} |
|
|
|
|
|
</p> |
|
|
<FormItem label="" desc=""> |
|
|
<FormItem label="" desc=""> |
|
|
<Select |
|
|
<Select |
|
|
value={destination.endCity} |
|
|
value={destination.endCity} |
|
@ -324,7 +352,10 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
<option value="">Select City</option> |
|
|
<option value="">Select City</option> |
|
|
{countries.flatMap((country) => |
|
|
{countries.flatMap((country) => |
|
|
country.city.map((city) => ( |
|
|
country.city.map((city) => ( |
|
|
<option key={city.name} value={`${country.name} / ${city.name} / ${city.slug}`}> |
|
|
|
|
|
|
|
|
<option |
|
|
|
|
|
key={city.name} |
|
|
|
|
|
value={`${country.name} / ${city.name} / ${city.slug}`} |
|
|
|
|
|
> |
|
|
{`${country.name} - ${city.name}`} |
|
|
{`${country.name} - ${city.name}`} |
|
|
</option> |
|
|
</option> |
|
|
)) |
|
|
)) |
|
@ -406,7 +437,7 @@ const CommonLayout: FC<CommonLayoutProps> = () => { |
|
|
<ButtonPrimary |
|
|
<ButtonPrimary |
|
|
onClick={submitTour} |
|
|
onClick={submitTour} |
|
|
type="button" |
|
|
type="button" |
|
|
disabled={!isFormValid} |
|
|
|
|
|
|
|
|
disabled={!isContinueValid} |
|
|
> |
|
|
> |
|
|
Continue |
|
|
Continue |
|
|
</ButtonPrimary> |
|
|
</ButtonPrimary> |
|
|