2220 lines
81 KiB
TypeScript
2220 lines
81 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
createTours,
|
||
getAllAmenities,
|
||
hotelBadge,
|
||
hotelTransport,
|
||
updateTours,
|
||
} from "@/pages/tours/lib/api";
|
||
import { TourformSchema } from "@/pages/tours/lib/form";
|
||
import { useTicketStore } from "@/pages/tours/lib/store";
|
||
import type { GetOneTours } from "@/pages/tours/lib/type";
|
||
import TicketsImagesModel from "@/pages/tours/ui/TicketsImagesModel";
|
||
import formatPrice from "@/shared/lib/formatPrice";
|
||
import { Badge } from "@/shared/ui/badge";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { Calendar } from "@/shared/ui/calendar";
|
||
import {
|
||
Command,
|
||
CommandGroup,
|
||
CommandItem,
|
||
CommandList,
|
||
} from "@/shared/ui/command";
|
||
import {
|
||
Form,
|
||
FormControl,
|
||
FormField,
|
||
FormItem,
|
||
FormMessage,
|
||
} from "@/shared/ui/form";
|
||
import { Input } from "@/shared/ui/input";
|
||
import { Label } from "@/shared/ui/label";
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||
import { RadioGroup, RadioGroupItem } from "@/shared/ui/radio-group";
|
||
import { Textarea } from "@/shared/ui/textarea";
|
||
import { zodResolver } from "@hookform/resolvers/zod";
|
||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||
import { ChevronDownIcon, Loader2, SquareCheckBig, XIcon } from "lucide-react";
|
||
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
|
||
import { useForm } from "react-hook-form";
|
||
import { useTranslation } from "react-i18next";
|
||
import { toast } from "sonner";
|
||
import z from "zod";
|
||
|
||
const StepOne = ({
|
||
setStep,
|
||
data,
|
||
id,
|
||
isEditMode,
|
||
}: {
|
||
setStep: Dispatch<SetStateAction<number>>;
|
||
data: GetOneTours | undefined;
|
||
id: string | undefined;
|
||
isEditMode: boolean;
|
||
}) => {
|
||
const [displayPrice, setDisplayPrice] = useState("");
|
||
// const [tarifdisplayPrice, setTarifDisplayPrice] = useState<string[]>([]);
|
||
const [transportPrices, setTransportPrices] = useState<string[]>([]);
|
||
|
||
const { t } = useTranslation();
|
||
const [openDate, setOpenDate] = useState(false);
|
||
const [openDateTravel, setOpenDateTravel] = useState(false);
|
||
|
||
const form = useForm<z.infer<typeof TourformSchema>>({
|
||
resolver: zodResolver(TourformSchema),
|
||
defaultValues: {
|
||
title: "",
|
||
title_ru: "",
|
||
hotel_services: [],
|
||
price: 0,
|
||
departure: "",
|
||
// tarif: [],
|
||
transport: [],
|
||
departure_ru: "",
|
||
destination: "",
|
||
destination_ru: "",
|
||
location_name: "",
|
||
location_name_ru: "",
|
||
departureDateTime: {
|
||
date: undefined,
|
||
},
|
||
amenities: [],
|
||
hotel_meals: [],
|
||
travelDateTime: {
|
||
date: undefined,
|
||
},
|
||
passenger_count: "1",
|
||
min_person: "1",
|
||
max_person: "1",
|
||
extra_service: [],
|
||
paid_extra_service: [],
|
||
languages: "",
|
||
duration: "1",
|
||
badges: [],
|
||
images: [],
|
||
hotel_info: "",
|
||
hotel_info_ru: "",
|
||
hotel_meals_info: "",
|
||
hotel_meals_info_ru: "",
|
||
ticket_itinerary: [],
|
||
},
|
||
});
|
||
|
||
const { addAmenity, setId, removeAmenity } = useTicketStore();
|
||
|
||
useEffect(() => {
|
||
if (!isEditMode || !data?.data) return;
|
||
|
||
const tour = data.data;
|
||
|
||
// 🔹 Jo'nash vaqti
|
||
let departureDateTime = undefined;
|
||
if (tour.departure_time) {
|
||
const d = new Date(tour.departure_time);
|
||
departureDateTime = {
|
||
date: d,
|
||
};
|
||
}
|
||
|
||
// 🔹 Qaytish vaqti
|
||
let travelDateTime = undefined;
|
||
if (tour.travel_time) {
|
||
const d = new Date(tour.travel_time);
|
||
travelDateTime = {
|
||
date: d,
|
||
};
|
||
}
|
||
|
||
// 🔹 Transport
|
||
const transports =
|
||
tour.transports?.map((t, i) => ({
|
||
transport: i + 1,
|
||
price: t.price ?? 0,
|
||
})) ?? [];
|
||
setTransportPrices(transports.map((t) => formatPrice(t.price ?? 0)));
|
||
|
||
// 🔹 Tarif
|
||
// const tariffs =
|
||
// tour.tariff?.map((t) => ({
|
||
// tariff: t.tariff ?? 0,
|
||
// price: t.price ?? 0,
|
||
// })) ?? [];
|
||
// setTarifDisplayPrice(tariffs.map((t) => formatPrice(t.price ?? 0)));
|
||
|
||
form.reset({
|
||
title: tour.title_uz ?? "",
|
||
title_ru: tour.title_ru ?? "",
|
||
price: tour.price ?? 0,
|
||
passenger_count: String(tour.passenger_count) ?? "1",
|
||
min_person: String(tour.min_person) ?? "1",
|
||
max_person: String(tour.max_person) ?? "1",
|
||
departure: tour.departure_uz ?? "",
|
||
departure_ru: tour.departure_ru ?? "",
|
||
destination: tour.destination_uz ?? "",
|
||
destination_ru: tour.destination_ru ?? "",
|
||
location_name: tour.location_name_uz ?? "",
|
||
location_name_ru: tour.location_name_ru ?? "",
|
||
hotel_info: tour.hotel_info_uz ?? "",
|
||
hotel_info_ru: tour.hotel_info_ru ?? "",
|
||
hotel_meals_info: tour.hotel_meals_uz ?? "",
|
||
hotel_meals_info_ru: tour.hotel_meals_ru ?? "",
|
||
languages: tour.languages ?? "",
|
||
duration: String(tour.duration_days) ?? "1",
|
||
visa_required: tour.visa_required ? "yes" : "no",
|
||
badges: tour.badge ?? [],
|
||
departureDateTime,
|
||
travelDateTime,
|
||
amenities: tour.ticket_amenities.map((e) => e.id),
|
||
hotel_services:
|
||
tour.ticket_included_services?.map((service) => ({
|
||
id: service.id,
|
||
image: service.image ?? null,
|
||
title: service.title_uz ?? service.title ?? "",
|
||
title_ru: service.title_ru ?? "",
|
||
description: service.desc_uz ?? service.desc ?? "",
|
||
desc_ru: service.desc_ru ?? "",
|
||
})) ?? [],
|
||
hotel_meals:
|
||
tour.ticket_hotel_meals?.map((meal) => ({
|
||
id: meal.id,
|
||
image: meal.image ?? null,
|
||
title: meal.name_uz ?? meal.name ?? "",
|
||
title_ru: meal.name_ru ?? "",
|
||
description: meal.desc_uz ?? meal.desc ?? "",
|
||
desc_ru: meal.desc_ru ?? "",
|
||
})) ?? [],
|
||
transport: transports,
|
||
// tarif: tariffs,
|
||
ticket_itinerary:
|
||
tour.ticket_itinerary?.map((item) => ({
|
||
id: item.id,
|
||
title: item.title_uz ?? item.title ?? "",
|
||
title_ru: item.title_ru ?? "",
|
||
duration: item.duration ?? 1,
|
||
ticket_itinerary_image:
|
||
item.ticket_itinerary_image?.map((img) => ({
|
||
image: img.image,
|
||
})) ?? [],
|
||
ticket_itinerary_destinations:
|
||
item.ticket_itinerary_destinations?.map((dest) => ({
|
||
name: dest.name_uz ?? dest.name ?? "",
|
||
name_ru: dest.name_ru ?? "",
|
||
})) ?? [],
|
||
})) ?? [],
|
||
banner: tour.image_banner ?? null,
|
||
images: tour.ticket_images.map((img) => ({
|
||
id: img.id,
|
||
image: img.image,
|
||
})),
|
||
extra_service:
|
||
tour.extra_service?.map((s) => ({
|
||
name: s.name_uz ?? s.name ?? "",
|
||
name_ru: s.name_ru ?? "",
|
||
})) ?? [],
|
||
paid_extra_service:
|
||
tour.paid_extra_service?.map((s) => ({
|
||
name: s.name_uz ?? s.name ?? "",
|
||
name_ru: s.name_ru ?? "",
|
||
price: s.price ?? 0,
|
||
})) ?? [],
|
||
});
|
||
|
||
// Display price
|
||
setDisplayPrice(formatPrice(tour.price ?? 0));
|
||
|
||
// TicketStore uchun id
|
||
setId(tour.id);
|
||
}, [isEditMode, data, form, setId]);
|
||
|
||
const { watch, setValue } = form;
|
||
const selectedDate = watch("departureDateTime.date");
|
||
const selectedDateTravel = watch("travelDateTime.date");
|
||
|
||
const { mutate: create, isPending } = useMutation({
|
||
mutationFn: (body: FormData) => {
|
||
return createTours({ body });
|
||
},
|
||
onSuccess: (res) => {
|
||
setId(res.data.data.id);
|
||
setStep(2);
|
||
},
|
||
onError: () => {
|
||
toast.error(t("Xatolik yuz berdi"), {
|
||
richColors: true,
|
||
position: "top-center",
|
||
});
|
||
},
|
||
});
|
||
|
||
const { mutate: update, isPending: updatePending } = useMutation({
|
||
mutationFn: ({ body, id }: { id: number; body: FormData }) => {
|
||
return updateTours({ body, id });
|
||
},
|
||
onSuccess: (res) => {
|
||
setId(res.data.data.id);
|
||
setStep(2);
|
||
},
|
||
onError: () => {
|
||
toast.error(t("Xatolik yuz berdi"), {
|
||
richColors: true,
|
||
position: "top-center",
|
||
});
|
||
},
|
||
});
|
||
|
||
function onSubmit(value: z.infer<typeof TourformSchema>) {
|
||
const formData = new FormData();
|
||
|
||
// Asosiy ma'lumotlar
|
||
formData.append("title", value.title);
|
||
formData.append("location_name", value.location_name);
|
||
formData.append("location_name_ru", value.location_name_ru);
|
||
formData.append(
|
||
"visa_required",
|
||
value.visa_required === "yes" ? "true" : "false",
|
||
);
|
||
formData.append("title_ru", value.title_ru);
|
||
formData.append("price", String(value.price));
|
||
formData.append("min_person", String(value.min_person));
|
||
formData.append("max_person", String(value.max_person));
|
||
formData.append("departure", String(value.departure));
|
||
formData.append("departure_ru", String(value.departure_ru));
|
||
formData.append("destination", String(value.destination));
|
||
formData.append("destination_ru", String(value.destination_ru));
|
||
formData.append(
|
||
"departure_time",
|
||
value.departureDateTime.date?.toISOString(),
|
||
);
|
||
formData.append(
|
||
"travel_time",
|
||
String(value.travelDateTime.date.toISOString()),
|
||
);
|
||
formData.append("passenger_count", String(value.passenger_count));
|
||
if (value.languages) {
|
||
formData.append("languages", value.languages);
|
||
}
|
||
if (value.hotel_info) {
|
||
formData.append("hotel_info", value.hotel_info);
|
||
}
|
||
|
||
if (value.hotel_info_ru) {
|
||
formData.append("hotel_info_ru", value.hotel_info_ru);
|
||
}
|
||
if (value.hotel_meals_info) {
|
||
formData.append("hotel_meals", value.hotel_meals_info);
|
||
}
|
||
if (value.hotel_meals_info_ru) {
|
||
formData.append("hotel_meals_ru", value.hotel_meals_info_ru);
|
||
}
|
||
formData.append("duration_days", String(value.duration));
|
||
formData.append("rating", String("0.0"));
|
||
|
||
if (value.banner instanceof File) {
|
||
formData.append("image_banner", value.banner);
|
||
}
|
||
console.log(value.banner, "value.banner");
|
||
|
||
// Tarif va transport
|
||
// value.tarif?.forEach((e, i) => {
|
||
// formData.append(`tariff[${i}]tariff`, String(e.tariff));
|
||
// formData.append(`tariff[${i}]price`, String(e.price));
|
||
// });
|
||
|
||
value.transport?.forEach((e, i) => {
|
||
formData.append(`transports[${i}]transport`, String(e.transport));
|
||
formData.append(`transports[${i}]price`, String(e.price));
|
||
});
|
||
|
||
value.badges?.forEach((e) => {
|
||
formData.append(`badge`, String(e));
|
||
});
|
||
|
||
value.amenities?.forEach((e) => {
|
||
formData.append(`ticket_amenities`, String(e));
|
||
});
|
||
|
||
value.images.forEach((e) => {
|
||
if (e.id) {
|
||
formData.append(`ticket_images_ids`, String(e.id));
|
||
} else if (e.id === undefined) {
|
||
formData.append(`ticket_images`, e.image!);
|
||
}
|
||
});
|
||
|
||
// 🔹 Hotel Services - edit rejimida ID yuborish, yangi bo'lsa to'liq ma'lumot yuborish
|
||
value.hotel_services &&
|
||
value.hotel_services.forEach((e, i) => {
|
||
if (e.id && typeof e.image === "string") {
|
||
formData.append(`ticket_included_services_ids`, String(e.id));
|
||
} else {
|
||
// Yangi xizmat yoki o'zgartirilgan xizmat
|
||
if (e.image instanceof File) {
|
||
formData.append(`ticket_included_services[${i}]image`, e.image);
|
||
}
|
||
formData.append(`ticket_included_services[${i}]title`, e.title);
|
||
formData.append(`ticket_included_services[${i}]title_ru`, e.title_ru);
|
||
formData.append(`ticket_included_services[${i}]desc_ru`, e.desc_ru);
|
||
formData.append(`ticket_included_services[${i}]desc`, e.description);
|
||
}
|
||
});
|
||
|
||
// 🔹 Ticket Itinerary - edit rejimida ID yuborish
|
||
value.ticket_itinerary?.forEach((itinerary, i) => {
|
||
if (itinerary.id) {
|
||
// Mavjud itinerary (o'zgartirilmagan)
|
||
const hasNewImages = itinerary.ticket_itinerary_image?.some(
|
||
(img) =>
|
||
img instanceof File ||
|
||
(typeof img === "object" &&
|
||
"image" in img &&
|
||
img.image instanceof File),
|
||
);
|
||
|
||
if (!hasNewImages) {
|
||
formData.append(`ticket_itinerary_ids`, String(itinerary.id));
|
||
return; // Faqat ID yuborish, boshqa ma'lumot kerak emas
|
||
}
|
||
}
|
||
|
||
// Yangi itinerary yoki o'zgartirilgan itinerary
|
||
formData.append(`ticket_itinerary[${i}]title`, itinerary.title);
|
||
formData.append(`ticket_itinerary[${i}]title_ru`, itinerary.title_ru);
|
||
formData.append(
|
||
`ticket_itinerary[${i}]duration`,
|
||
String(itinerary.duration),
|
||
);
|
||
|
||
// Rasmlar
|
||
if (Array.isArray(itinerary.ticket_itinerary_image)) {
|
||
itinerary.ticket_itinerary_image.forEach((img, j) => {
|
||
let file: File | null = null;
|
||
|
||
if (img instanceof File) {
|
||
file = img;
|
||
} else if (
|
||
typeof img === "object" &&
|
||
"image" in img &&
|
||
img.image instanceof File
|
||
) {
|
||
file = img.image;
|
||
}
|
||
|
||
if (file) {
|
||
formData.append(
|
||
`ticket_itinerary[${i}]ticket_itinerary_image[${j}]image`,
|
||
file,
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Destinations
|
||
if (Array.isArray(itinerary.ticket_itinerary_destinations)) {
|
||
itinerary.ticket_itinerary_destinations.forEach((dest, k) => {
|
||
formData.append(
|
||
`ticket_itinerary[${i}]ticket_itinerary_destinations[${k}]name`,
|
||
dest.name,
|
||
);
|
||
formData.append(
|
||
`ticket_itinerary[${i}]ticket_itinerary_destinations[${k}]name_ru`,
|
||
dest.name_ru,
|
||
);
|
||
});
|
||
}
|
||
});
|
||
if (value.hotel_meals) {
|
||
value.hotel_meals.forEach((e, i) => {
|
||
if (e.id && typeof e.image === "string") {
|
||
// Mavjud meal (o'zgartirilmagan)
|
||
formData.append(`ticket_hotel_meals_ids`, String(e.id));
|
||
} else {
|
||
// Yangi meal yoki o'zgartirilgan meal
|
||
if (e.image instanceof File) {
|
||
formData.append(`ticket_hotel_meals[${i}]image`, e.image);
|
||
}
|
||
formData.append(`ticket_hotel_meals[${i}]name`, e.title);
|
||
formData.append(`ticket_hotel_meals[${i}]name_ru`, e.title_ru);
|
||
formData.append(`ticket_hotel_meals[${i}]desc`, e.description);
|
||
formData.append(`ticket_hotel_meals[${i}]desc_ru`, e.desc_ru);
|
||
}
|
||
});
|
||
}
|
||
// Extra services
|
||
value.extra_service &&
|
||
value.extra_service.forEach((e, i) => {
|
||
formData.append(`extra_service[${i}]name`, e.name);
|
||
formData.append(`extra_service[${i}]name_ru`, e.name_ru);
|
||
});
|
||
|
||
value.paid_extra_service &&
|
||
value.paid_extra_service.forEach((e, i) => {
|
||
formData.append(`paid_extra_service[${i}]name`, e.name);
|
||
formData.append(`paid_extra_service[${i}]name_ru`, e.name_ru);
|
||
formData.append(`paid_extra_service[${i}]price`, String(e.price));
|
||
});
|
||
|
||
if (isEditMode && id) {
|
||
update({
|
||
body: formData,
|
||
id: Number(id),
|
||
});
|
||
} else {
|
||
create(formData);
|
||
}
|
||
}
|
||
|
||
const { data: badge } = useQuery({
|
||
queryKey: ["all_badge"],
|
||
queryFn: () => hotelBadge({ page: 1, page_size: 10 }),
|
||
});
|
||
|
||
const { data: amenitiesData } = useQuery({
|
||
queryKey: ["all_amenities"],
|
||
queryFn: () => getAllAmenities({ page: 1, page_size: 10 }),
|
||
});
|
||
|
||
// const { data: tariff } = useQuery({
|
||
// queryKey: ["all_tarif"],
|
||
// queryFn: () => hotelTarif({ page: 1, page_size: 10 }),
|
||
// });
|
||
|
||
const { data: transport } = useQuery({
|
||
queryKey: ["all_transport"],
|
||
queryFn: () => hotelTransport({ page: 1, page_size: 10 }),
|
||
});
|
||
|
||
console.log(form.formState.errors);
|
||
|
||
return (
|
||
<Form {...form}>
|
||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||
<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 items-start">
|
||
<FormField
|
||
control={form.control}
|
||
name="title"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Sarlavha")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Toshkent - Dubay"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="title_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Sarlavha")} (ru)</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Ташкент - Дубай"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="price"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">
|
||
{t("Narx")} {t("(1 kishi uchun)")}
|
||
</Label>
|
||
<FormControl>
|
||
<Input
|
||
type="text"
|
||
inputMode="numeric"
|
||
placeholder="1 500 000"
|
||
value={displayPrice}
|
||
onChange={(e) => {
|
||
const raw = e.target.value.replace(/\D/g, "");
|
||
const num = Number(raw);
|
||
if (!isNaN(num)) {
|
||
form.setValue("price", num);
|
||
setDisplayPrice(raw ? formatPrice(num) : "");
|
||
}
|
||
}}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="min_person"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">
|
||
{t("hamrohlar soni (eng kamida)")}
|
||
</Label>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
inputMode="numeric"
|
||
placeholder="1"
|
||
{...field}
|
||
onChange={(e) =>
|
||
form.setValue("min_person", e.target.value)
|
||
}
|
||
className="h-12 !text-md
|
||
[&::-webkit-inner-spin-button]:appearance-none
|
||
[&::-webkit-outer-spin-button]:appearance-none
|
||
[appearance:textfield]"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="max_person"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">
|
||
{t("hamrohlar soni (eng ko'pida)")}
|
||
</Label>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
inputMode="numeric"
|
||
placeholder="1"
|
||
{...field}
|
||
onChange={(e) =>
|
||
form.setValue("max_person", e.target.value)
|
||
}
|
||
className="h-12 !text-md
|
||
[&::-webkit-inner-spin-button]:appearance-none
|
||
[&::-webkit-outer-spin-button]:appearance-none
|
||
[appearance:textfield]"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 items-start">
|
||
<FormField
|
||
control={form.control}
|
||
name="departure"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Ketish joyi")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Toshkent"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="departure_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Ketish joyi")} (ru)</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Ташкент"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="destination"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Borish joyi")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Dubai"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="destination_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Borish joyi")} (ru)</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Дубай"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="location_name"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Manzil nomi")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Dubai"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="location_name_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Manzil nomi")} (ru)</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder="Дубай"
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="passenger_count"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Yo'lovchilar soni")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
inputMode="numeric"
|
||
placeholder="1"
|
||
{...field}
|
||
onChange={(e) =>
|
||
form.setValue("passenger_count", e.target.value)
|
||
}
|
||
className="h-12 !text-md
|
||
[&::-webkit-inner-spin-button]:appearance-none
|
||
[&::-webkit-outer-spin-button]:appearance-none
|
||
[appearance:textfield]"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-2 max-lg:grid-cols-1 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="departureDateTime.date"
|
||
render={() => (
|
||
<FormItem>
|
||
<div>
|
||
<div className="flex flex-col gap-3">
|
||
<Label htmlFor="date-picker" className="px-1 text-md">
|
||
{t("Ketish sanasi")}
|
||
</Label>
|
||
<Popover open={openDate} onOpenChange={setOpenDate}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
id="date-picker"
|
||
className="w-full justify-between font-normal h-12"
|
||
>
|
||
{selectedDate
|
||
? selectedDate.toLocaleDateString()
|
||
: t("Sana tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
className="w-auto overflow-hidden p-0"
|
||
align="start"
|
||
>
|
||
<Calendar
|
||
mode="single"
|
||
selected={selectedDate}
|
||
captionLayout="dropdown"
|
||
onSelect={(date) => {
|
||
setValue("departureDateTime.date", date!);
|
||
setOpenDate(false);
|
||
}}
|
||
toYear={new Date().getFullYear() + 100}
|
||
/>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
</div>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
{/* <FormField
|
||
control={form.control}
|
||
name="departureDateTime.time"
|
||
render={() => (
|
||
<FormItem>
|
||
<div className="flex flex-col gap-3">
|
||
<Label htmlFor="time-picker" className="px-1 text-md">
|
||
{t("Ketish vaqti")}
|
||
</Label>
|
||
<Input
|
||
type="time"
|
||
id="time-picker"
|
||
step="1"
|
||
value={watch("departureDateTime.time")}
|
||
onChange={(e) =>
|
||
setValue("departureDateTime.time", e.target.value)
|
||
}
|
||
className="bg-background !h-12 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
|
||
/>
|
||
</div>
|
||
</FormItem>
|
||
)}
|
||
/> */}
|
||
<FormField
|
||
control={form.control}
|
||
name="travelDateTime.date"
|
||
render={() => (
|
||
<FormItem>
|
||
<div className="grid grid-cols-1 gap-4 max-lg:grid-cols-1">
|
||
<div className="flex flex-col gap-3">
|
||
<Label htmlFor="date-picker" className="px-1 text-md">
|
||
{t("Qaytish sanasi")}
|
||
</Label>
|
||
<Popover
|
||
open={openDateTravel}
|
||
onOpenChange={setOpenDateTravel}
|
||
>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
id="date-picker"
|
||
className="w-full justify-between font-normal h-12"
|
||
>
|
||
{selectedDateTravel
|
||
? selectedDateTravel.toLocaleDateString()
|
||
: t("Sana tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
className="w-auto overflow-hidden p-0"
|
||
align="start"
|
||
>
|
||
<Calendar
|
||
mode="single"
|
||
selected={selectedDateTravel}
|
||
captionLayout="dropdown"
|
||
onSelect={(date) => {
|
||
setValue("travelDateTime.date", date!);
|
||
setOpenDateTravel(false);
|
||
}}
|
||
toYear={new Date().getFullYear() + 100}
|
||
/>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
{/* <div className="flex flex-col gap-3">
|
||
<Label htmlFor="time-picker" className="px-1 text-md">
|
||
{t("Qaytish vaqti")}
|
||
</Label>
|
||
<Input
|
||
type="time"
|
||
id="time-picker"
|
||
step="1"
|
||
value={watch("travelDateTime.time")}
|
||
onChange={(e) =>
|
||
setValue("travelDateTime.time", e.target.value)
|
||
}
|
||
className="bg-background !h-12 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
|
||
/>
|
||
</div> */}
|
||
</div>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 max-lg:grid-cols-1 gap-6">
|
||
<FormField
|
||
control={form.control}
|
||
name="duration"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Tur davomiyligi")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
inputMode="numeric"
|
||
placeholder="1"
|
||
{...field}
|
||
onChange={(e) => form.setValue("duration", e.target.value)}
|
||
className="h-12 !text-md
|
||
[&::-webkit-inner-spin-button]:appearance-none
|
||
[&::-webkit-outer-spin-button]:appearance-none
|
||
[appearance:textfield]"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="languages"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Tillar")}</Label>
|
||
<FormControl>
|
||
<Input
|
||
placeholder={t("Har bir tilni vergul (,) bilan ajrating")}
|
||
{...field}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-2 max-lg:grid-cols-1 gap-6 items-end">
|
||
<FormField
|
||
control={form.control}
|
||
name="badges"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Belgilar (Badge)")}</Label>
|
||
|
||
<div className="flex flex-wrap gap-2 mb-3">
|
||
{(form.watch("badges") ?? []).length > 0 &&
|
||
(form.watch("badges") ?? []).map((badgeId: number) => {
|
||
const badgeItem = badge?.data?.data?.results?.find(
|
||
(b: any) => b.id === badgeId,
|
||
);
|
||
|
||
return (
|
||
<Badge
|
||
key={badgeId}
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm flex items-center gap-2"
|
||
>
|
||
{badgeItem?.name || `Badge #${badgeId}`}
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("badges") ?? [];
|
||
form.setValue(
|
||
"badges",
|
||
current.filter((b: number) => b !== badgeId),
|
||
);
|
||
}}
|
||
className="ml-1 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</Badge>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className="w-full h-12 justify-between font-normal"
|
||
>
|
||
{t("Belgilarni tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
|
||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||
<Command>
|
||
<CommandList>
|
||
<CommandGroup heading={t("Mavjud belgilar")}>
|
||
{badge?.data?.data?.results?.map((item: any) => {
|
||
const currentBadges =
|
||
form.getValues("badges") ?? [];
|
||
const selected = currentBadges.includes(item.id);
|
||
|
||
return (
|
||
<CommandItem
|
||
key={item.id}
|
||
onSelect={() => {
|
||
if (selected) {
|
||
form.setValue(
|
||
"badges",
|
||
currentBadges.filter(
|
||
(b: number) => b !== item.id,
|
||
),
|
||
);
|
||
} else {
|
||
form.setValue("badges", [
|
||
...currentBadges,
|
||
item.id,
|
||
]);
|
||
}
|
||
}}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<SquareCheckBig
|
||
className={`size-4 ${
|
||
selected
|
||
? "text-green-500"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
/>
|
||
{item.name}
|
||
</CommandItem>
|
||
);
|
||
})}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="amenities"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Qulayliklar")}</Label>
|
||
|
||
<div className="flex flex-wrap gap-2 mb-3">
|
||
{(form.watch("amenities") ?? []).length > 0 &&
|
||
(form.watch("amenities") ?? []).map((badgeId: number) => {
|
||
const badgeItem =
|
||
amenitiesData?.data?.data?.results?.find(
|
||
(b: any) => b.id === badgeId,
|
||
);
|
||
|
||
return (
|
||
<Badge
|
||
key={badgeId}
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm flex items-center gap-2"
|
||
>
|
||
{badgeItem?.name || `Qulaylilar #${badgeId}`}
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("amenities") ?? [];
|
||
form.setValue(
|
||
"amenities",
|
||
current.filter((b: number) => b !== badgeId),
|
||
);
|
||
}}
|
||
className="ml-1 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</Badge>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className="w-full h-12 justify-between font-normal"
|
||
>
|
||
{t("Qulaylik tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
|
||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||
<Command>
|
||
<CommandList>
|
||
<CommandGroup heading={t("Mavjud qulayliklar")}>
|
||
{amenitiesData?.data?.data?.results?.map(
|
||
(item: any) => {
|
||
const currentBadges =
|
||
form.getValues("amenities") ?? [];
|
||
const selected = currentBadges.includes(item.id);
|
||
|
||
return (
|
||
<CommandItem
|
||
key={item.id}
|
||
onSelect={() => {
|
||
const selected = currentBadges.includes(
|
||
item.id,
|
||
);
|
||
|
||
if (selected) {
|
||
removeAmenity(item.id);
|
||
form.setValue(
|
||
"amenities",
|
||
currentBadges.filter(
|
||
(b: number) => b !== item.id,
|
||
),
|
||
);
|
||
} else {
|
||
addAmenity(item.id);
|
||
form.setValue("amenities", [
|
||
...currentBadges,
|
||
item.id,
|
||
]);
|
||
}
|
||
}}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<SquareCheckBig
|
||
className={`size-4 ${
|
||
selected
|
||
? "text-green-500"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
/>
|
||
{item.name}
|
||
</CommandItem>
|
||
);
|
||
},
|
||
)}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
{/* <FormField
|
||
control={form.control}
|
||
name="tarif"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Tariflar")}</Label>
|
||
<div className="flex flex-col gap-3 mb-3">
|
||
{form.watch("tarif")?.map((tr, idx) => {
|
||
const transportItem = tariff?.data?.data?.results?.find(
|
||
(item: any) => item.id === tr.tariff,
|
||
);
|
||
|
||
return (
|
||
<div
|
||
key={idx}
|
||
className="flex items-center justify-between border rounded-lg p-2"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Badge
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm"
|
||
>
|
||
{transportItem?.name || `Tarif #${tr.tariff}`}
|
||
</Badge>
|
||
<Input
|
||
type="text"
|
||
inputMode="numeric"
|
||
placeholder="1 500 000"
|
||
value={tarifdisplayPrice[idx] || ""}
|
||
onChange={(e) => {
|
||
const raw = e.target.value.replace(/\D/g, "");
|
||
const num = Number(raw);
|
||
const currentTarifs =
|
||
form.getValues("tarif") || [];
|
||
const updatedTransport = currentTarifs.map(
|
||
(t, i) =>
|
||
i === idx ? { ...t, price: num } : t,
|
||
);
|
||
|
||
form.setValue("tarif", updatedTransport);
|
||
|
||
// Local holatda ham yangilaymiz:
|
||
const updatedPrices = [...tarifdisplayPrice];
|
||
updatedPrices[idx] = raw ? formatPrice(num) : "0";
|
||
setTarifDisplayPrice(updatedPrices);
|
||
}}
|
||
className="h-12 !text-md"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("tarif") || [];
|
||
form.setValue(
|
||
"tarif",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
const updatedPrices = tarifdisplayPrice.filter(
|
||
(_, i) => i !== idx,
|
||
);
|
||
setTarifDisplayPrice(updatedPrices);
|
||
}}
|
||
className="ml-2 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className="w-full h-12 justify-between font-normal"
|
||
>
|
||
{t("Tarifni tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||
<Command>
|
||
<CommandList>
|
||
<CommandGroup heading={t("Mavjud tariflar")}>
|
||
{tariff?.data?.data?.results?.map((item: any) => {
|
||
const currentTarifs = form.getValues("tarif") || [];
|
||
const selected = currentTarifs.some(
|
||
(t) => t.tariff === item.id,
|
||
);
|
||
|
||
return (
|
||
<CommandItem
|
||
key={item.id}
|
||
onSelect={() => {
|
||
const current = form.getValues("tarif") || [];
|
||
if (selected) {
|
||
form.setValue(
|
||
"tarif",
|
||
current.filter(
|
||
(t) => t.tariff !== item.id,
|
||
),
|
||
);
|
||
} else {
|
||
form.setValue("tarif", [
|
||
...current,
|
||
{ tariff: item.id, price: 0 },
|
||
]);
|
||
}
|
||
}}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<SquareCheckBig
|
||
className={`size-4 ${
|
||
selected
|
||
? "text-green-500"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
/>
|
||
{item.name}
|
||
</CommandItem>
|
||
);
|
||
})}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/> */}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 max-lg:grid-cols-1 gap-6 items-end">
|
||
<FormField
|
||
control={form.control}
|
||
name="transport"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Transportlar")}</Label>
|
||
|
||
<div className="flex flex-col gap-3 mb-3">
|
||
{form.watch("transport")?.map((tr, idx) => {
|
||
const transportItem = transport?.data?.data?.results?.find(
|
||
(item: any) => item.id === tr.transport,
|
||
);
|
||
return (
|
||
<div
|
||
key={idx}
|
||
className="flex items-center justify-between border rounded-lg p-2"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Badge
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm"
|
||
>
|
||
{transportItem?.name ||
|
||
`Transport #${tr.transport}`}
|
||
</Badge>
|
||
{/* <Input
|
||
type="text"
|
||
inputMode="numeric"
|
||
placeholder="1 500 000"
|
||
value={transportPrices[idx] || ""}
|
||
onChange={(e) => {
|
||
const raw = e.target.value.replace(/\D/g, "");
|
||
const num = Number(raw);
|
||
const currentTransports =
|
||
form.getValues("transport") || [];
|
||
const updatedTransport = currentTransports.map(
|
||
(t, i) =>
|
||
i === idx ? { ...t, price: num } : t,
|
||
);
|
||
|
||
form.setValue("transport", updatedTransport);
|
||
|
||
// Local holatda ham yangilaymiz:
|
||
const updatedPrices = [...transportPrices];
|
||
updatedPrices[idx] = raw ? formatPrice(num) : "";
|
||
setTransportPrices(updatedPrices);
|
||
}}
|
||
className="h-12 !text-md"
|
||
/> */}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("transport") || [];
|
||
form.setValue(
|
||
"transport",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
const updatedPrices = transportPrices.filter(
|
||
(_, i) => i !== idx,
|
||
);
|
||
setTransportPrices(updatedPrices);
|
||
}}
|
||
className="ml-2 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
className="w-full h-12 justify-between font-normal"
|
||
>
|
||
{t("Transport tanlang")}
|
||
<ChevronDownIcon />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
|
||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||
<Command>
|
||
<CommandList>
|
||
<CommandGroup heading={t("Mavjud transportlar")}>
|
||
{transport?.data?.data?.results?.map((item: any) => {
|
||
const currentTransports =
|
||
form.getValues("transport") || [];
|
||
const selected = currentTransports.some(
|
||
(t) => t.transport === item.id,
|
||
);
|
||
|
||
return (
|
||
<CommandItem
|
||
key={item.id}
|
||
onSelect={() => {
|
||
const current =
|
||
form.getValues("transport") || [];
|
||
if (selected) {
|
||
form.setValue(
|
||
"transport",
|
||
current.filter(
|
||
(t) => t.transport !== item.id,
|
||
),
|
||
);
|
||
} else {
|
||
form.setValue("transport", [
|
||
...current,
|
||
{ transport: item.id, price: 0 },
|
||
]);
|
||
}
|
||
}}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<SquareCheckBig
|
||
className={`size-4 ${
|
||
selected
|
||
? "text-green-500"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
/>
|
||
{item.name}
|
||
</CommandItem>
|
||
);
|
||
})}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="visa_required"
|
||
render={({ field }) => (
|
||
<FormItem className="space-y-3">
|
||
<Label>{t("Visa talab qilinadimi")}?</Label>
|
||
<FormControl>
|
||
<RadioGroup
|
||
onValueChange={field.onChange}
|
||
value={field.value}
|
||
className="flex gap-6"
|
||
>
|
||
<div className="flex items-center space-x-2">
|
||
<RadioGroupItem value="yes" id="visa_yes" />
|
||
<label htmlFor="visa_yes">{t("Ha")}</label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<RadioGroupItem value="no" id="visa_no" />
|
||
<label htmlFor="visa_no">{t("Yo'q")}</label>
|
||
</div>
|
||
</RadioGroup>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<TicketsImagesModel
|
||
form={form}
|
||
name="banner"
|
||
multiple={false}
|
||
label={t("Banner")}
|
||
imageUrl={data?.data?.image_banner}
|
||
/>
|
||
|
||
<TicketsImagesModel
|
||
form={form}
|
||
name="images"
|
||
label={t("Qo'shimcha rasmlar")}
|
||
includeId={true}
|
||
imageUrl={
|
||
isEditMode && data?.data?.ticket_images
|
||
? data.data.ticket_images.map((img) => ({
|
||
id: img.id,
|
||
image: img.image,
|
||
}))
|
||
: undefined
|
||
}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="extra_service"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Bepul xizmatlar")}</Label>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
{/* Ko'rsatilayotgan xizmatlar */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{(form.watch("extra_service") ?? []).map((item, idx) => (
|
||
<Badge
|
||
key={idx}
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm flex items-center gap-2"
|
||
>
|
||
<span>{item.name}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("extra_service") ?? [];
|
||
form.setValue(
|
||
"extra_service",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
className="ml-1 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
|
||
{/* Yangi xizmat qo'shish */}
|
||
<div className="flex gap-3 items-end flex-wrap">
|
||
<Input
|
||
id="extra_service_name"
|
||
placeholder={t("Xizmat nomi")}
|
||
className="h-12 !text-md flex-1 min-w-[200px]"
|
||
/>
|
||
|
||
<Input
|
||
id="extra_service_name_ru"
|
||
placeholder={t("Xizmat nomi") + " (ru)"}
|
||
className="h-12 !text-md flex-1 min-w-[200px]"
|
||
/>
|
||
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
const nameInput = document.getElementById(
|
||
"extra_service_name",
|
||
) as HTMLInputElement;
|
||
const nameRuInput = document.getElementById(
|
||
"extra_service_name_ru",
|
||
) as HTMLInputElement;
|
||
|
||
if (nameInput.value && nameRuInput.value) {
|
||
const current = form.getValues("extra_service") ?? [];
|
||
form.setValue("extra_service", [
|
||
...current,
|
||
{
|
||
name: nameInput.value,
|
||
name_ru: nameRuInput.value,
|
||
},
|
||
]);
|
||
nameInput.value = "";
|
||
nameRuInput.value = "";
|
||
}
|
||
}}
|
||
className="h-12"
|
||
>
|
||
{t("Qo'shish")}
|
||
</Button>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</div>
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="paid_extra_service"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Pullik xizmatlar")}</Label>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
{/* Ro'yxat */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{(form.watch("paid_extra_service") || []).map((item, idx) => (
|
||
<Badge
|
||
key={idx}
|
||
variant="secondary"
|
||
className="px-3 py-1 text-sm flex items-center gap-2"
|
||
>
|
||
<span>
|
||
{item.name} —{" "}
|
||
<strong>{formatPrice(item.price, true)}</strong>
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current =
|
||
form.getValues("paid_extra_service") ?? [];
|
||
form.setValue(
|
||
"paid_extra_service",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
className="ml-1 text-muted-foreground hover:text-destructive"
|
||
>
|
||
<XIcon className="size-4" />
|
||
</button>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
|
||
{/* Qo'shish formasi */}
|
||
<div className="flex gap-3 items-end flex-wrap">
|
||
<Input
|
||
id="paid_service_name"
|
||
placeholder={t("Xizmat nomi")}
|
||
className="h-12 !text-md flex-1 min-w-[200px]"
|
||
/>
|
||
|
||
<Input
|
||
id="paid_service_name_ru"
|
||
placeholder={t("Xizmat nomi") + " (ru)"}
|
||
className="h-12 !text-md flex-1 min-w-[200px]"
|
||
/>
|
||
|
||
<Input
|
||
id="paid_service_price"
|
||
type="text"
|
||
inputMode="numeric"
|
||
placeholder="1 500 000"
|
||
className="h-12 !text-md w-[150px]"
|
||
onInput={(e) => {
|
||
const input = e.target as HTMLInputElement;
|
||
const raw = input.value.replace(/\D/g, "");
|
||
input.value = raw
|
||
? Number(raw).toLocaleString("ru-RU")
|
||
: "";
|
||
}}
|
||
/>
|
||
|
||
{/* Qo'shish tugmasi */}
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
const nameInput = document.getElementById(
|
||
"paid_service_name",
|
||
) as HTMLInputElement;
|
||
const nameRuInput = document.getElementById(
|
||
"paid_service_name_ru",
|
||
) as HTMLInputElement;
|
||
const priceInput = document.getElementById(
|
||
"paid_service_price",
|
||
) as HTMLInputElement;
|
||
|
||
const raw = priceInput.value.replace(/\D/g, "");
|
||
const num = Number(raw);
|
||
|
||
if (
|
||
nameInput.value.trim() &&
|
||
nameRuInput.value.trim() &&
|
||
!isNaN(num)
|
||
) {
|
||
const current =
|
||
form.getValues("paid_extra_service") ?? [];
|
||
form.setValue("paid_extra_service", [
|
||
...current,
|
||
{
|
||
name: nameInput.value.trim(),
|
||
name_ru: nameRuInput.value.trim(),
|
||
price: num, // 🟢 0 ham bo‘lishi mumkin
|
||
},
|
||
]);
|
||
|
||
// inputlarni tozalaymiz
|
||
nameInput.value = "";
|
||
nameRuInput.value = "";
|
||
priceInput.value = "";
|
||
}
|
||
}}
|
||
className="h-12"
|
||
>
|
||
{t("Qo'shish")}
|
||
</Button>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</div>
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_info"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Mehmonxona haqida")}</Label>
|
||
<FormControl>
|
||
<Textarea
|
||
placeholder={t("Mehmonxona haqida")}
|
||
{...field}
|
||
className="min-h-48 max-h-60 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_info_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Mehmonxona haqida")} (ru)</Label>
|
||
<FormControl>
|
||
<Textarea
|
||
placeholder={t("Mehmonxona haqida") + " (ru)"}
|
||
{...field}
|
||
className="min-h-48 max-h-60 !text-md"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_services"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Mehmonxona xizmatlari")}</Label>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-wrap gap-4">
|
||
{form.watch("hotel_services")?.map((service, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="relative w-48 border rounded-xl overflow-hidden shadow-sm"
|
||
>
|
||
<img
|
||
src={
|
||
service.image instanceof File
|
||
? URL.createObjectURL(service.image)
|
||
: service.image
|
||
}
|
||
alt={service.title}
|
||
className="object-cover w-full h-32"
|
||
/>
|
||
<div className="p-2 text-center">
|
||
<p className="font-semibold">{service.title}</p>
|
||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current =
|
||
form.getValues("hotel_services") ?? [];
|
||
form.setValue(
|
||
"hotel_services",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
className="absolute top-1 right-1 bg-white/80 rounded-full p-1 hover:bg-white shadow"
|
||
>
|
||
<XIcon className="size-4 text-destructive" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 border rounded-xl p-4 bg-muted/10">
|
||
<Label className="text-md font-semibold">
|
||
{t("Yangi xizmat qo'shish")}
|
||
</Label>
|
||
|
||
<Input
|
||
type="file"
|
||
id="hotel_service_image"
|
||
accept="image/*"
|
||
className="h-12"
|
||
/>
|
||
|
||
<Input
|
||
id="hotel_service_title"
|
||
placeholder={t("Xizmat nomi")}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="hotel_service_title_ru"
|
||
placeholder={t("Xizmat nomi") + " (ru)"}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Textarea
|
||
id="hotel_service_desc"
|
||
placeholder={t("Xizmat tavsifi")}
|
||
className="min-h-24 !text-md"
|
||
/>
|
||
|
||
<Textarea
|
||
id="hotel_service_desc_ru"
|
||
placeholder={t("Xizmat tavsifi") + " (ru)"}
|
||
className="min-h-24 !text-md"
|
||
/>
|
||
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
const imgInput = document.getElementById(
|
||
"hotel_service_image",
|
||
) as HTMLInputElement;
|
||
const titleInput = document.getElementById(
|
||
"hotel_service_title",
|
||
) as HTMLInputElement;
|
||
const titleRuInput = document.getElementById(
|
||
"hotel_service_title_ru",
|
||
) as HTMLInputElement;
|
||
const descInput = document.getElementById(
|
||
"hotel_service_desc",
|
||
) as HTMLTextAreaElement;
|
||
const descRuInput = document.getElementById(
|
||
"hotel_service_desc_ru",
|
||
) as HTMLTextAreaElement;
|
||
|
||
const file = imgInput.files?.[0];
|
||
if (file && titleInput.value && descInput.value) {
|
||
const current = form.getValues("hotel_services") || [];
|
||
form.setValue("hotel_services", [
|
||
...current,
|
||
{
|
||
image: file,
|
||
title: titleInput.value,
|
||
title_ru: titleRuInput.value,
|
||
description: descInput.value,
|
||
desc_ru: descRuInput.value,
|
||
},
|
||
]);
|
||
|
||
imgInput.value = "";
|
||
titleInput.value = "";
|
||
titleRuInput.value = "";
|
||
descInput.value = "";
|
||
descRuInput.value = "";
|
||
}
|
||
}}
|
||
className="h-12"
|
||
>
|
||
{t("Qo'shish")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_meals_info"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">
|
||
{t("Mehmonxona taomlari haqida")}
|
||
</Label>
|
||
<FormControl>
|
||
<Textarea
|
||
placeholder={t("Mehmonxona taomlari haqida")}
|
||
{...field}
|
||
className="min-h-48 max-h-60"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_meals_info_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">
|
||
{t("Mehmonxona taomlari haqida")} (ru)
|
||
</Label>
|
||
<FormControl>
|
||
<Textarea
|
||
placeholder={t("Mehmonxona taomlari haqida") + " (ru)"}
|
||
{...field}
|
||
className="min-h-48 max-h-60"
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="hotel_meals"
|
||
render={() => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Mehmonxona taomlari")}</Label>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-wrap gap-4">
|
||
{form.watch("hotel_meals")?.map((service, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="relative w-48 border rounded-xl overflow-hidden shadow-sm"
|
||
>
|
||
<img
|
||
src={
|
||
service.image instanceof File
|
||
? URL.createObjectURL(service.image)
|
||
: service.image
|
||
}
|
||
alt={service.title}
|
||
className="object-cover w-full h-32"
|
||
/>
|
||
<div className="p-2 text-center">
|
||
<p className="font-semibold">{service.title}</p>
|
||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = form.getValues("hotel_meals") || [];
|
||
form.setValue(
|
||
"hotel_meals",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
className="absolute top-1 right-1 bg-white/80 rounded-full p-1 hover:bg-white shadow"
|
||
>
|
||
<XIcon className="size-4 text-destructive" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 border rounded-xl p-4 bg-muted/10">
|
||
<Label className="text-md font-semibold">
|
||
{t("Mehmonxona taomlari ro'yxati")}
|
||
</Label>
|
||
|
||
<Input
|
||
type="file"
|
||
id="hotel_meals_image"
|
||
accept="image/*"
|
||
className="h-12"
|
||
/>
|
||
|
||
<Input
|
||
id="hotel_meals_title"
|
||
placeholder={t("Taom nomi")}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="hotel_meals_title_ru"
|
||
placeholder={t("Taom nomi") + " (ru)"}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Textarea
|
||
id="hotel_meals_desc"
|
||
placeholder={t("Taom tavsifi")}
|
||
className="min-h-24 !text-md"
|
||
/>
|
||
|
||
<Textarea
|
||
id="hotel_meals_desc_ru"
|
||
placeholder={t("Taom tavsifi") + " (ru)"}
|
||
className="min-h-24 !text-md"
|
||
/>
|
||
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
const imgInput = document.getElementById(
|
||
"hotel_meals_image",
|
||
) as HTMLInputElement;
|
||
const titleInput = document.getElementById(
|
||
"hotel_meals_title",
|
||
) as HTMLInputElement;
|
||
const titleRuInput = document.getElementById(
|
||
"hotel_meals_title_ru",
|
||
) as HTMLInputElement;
|
||
const descInput = document.getElementById(
|
||
"hotel_meals_desc",
|
||
) as HTMLTextAreaElement;
|
||
const descRuInput = document.getElementById(
|
||
"hotel_meals_desc_ru",
|
||
) as HTMLTextAreaElement;
|
||
|
||
const file = imgInput.files?.[0];
|
||
if (file && titleInput.value && descInput.value) {
|
||
const current = form.getValues("hotel_meals") ?? [];
|
||
form.setValue("hotel_meals", [
|
||
...current,
|
||
{
|
||
image: file,
|
||
title: titleInput.value,
|
||
title_ru: titleRuInput.value,
|
||
description: descInput.value,
|
||
desc_ru: descRuInput.value,
|
||
},
|
||
]);
|
||
imgInput.value = "";
|
||
titleInput.value = "";
|
||
titleRuInput.value = "";
|
||
descInput.value = "";
|
||
descRuInput.value = "";
|
||
}
|
||
}}
|
||
className="h-12"
|
||
>
|
||
{t("Qo'shish")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="ticket_itinerary"
|
||
render={() => {
|
||
// Helper function to get image source
|
||
const getImageSrc = (imageItem: any): string => {
|
||
// Agar object bo'lsa va image property bo'lsa
|
||
if (
|
||
imageItem &&
|
||
typeof imageItem === "object" &&
|
||
"image" in imageItem
|
||
) {
|
||
const img = imageItem.image;
|
||
// File bo'lsa
|
||
if (img instanceof File) {
|
||
return URL.createObjectURL(img);
|
||
}
|
||
// String (URL) bo'lsa
|
||
if (typeof img === "string") {
|
||
return img;
|
||
}
|
||
}
|
||
// Agar to'g'ridan-to'g'ri File bo'lsa
|
||
if (imageItem instanceof File) {
|
||
return URL.createObjectURL(imageItem);
|
||
}
|
||
// Agar string bo'lsa
|
||
if (typeof imageItem === "string") {
|
||
return imageItem;
|
||
}
|
||
// Default fallback
|
||
return "";
|
||
};
|
||
|
||
return (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Yo'nalishlar")}</Label>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
{/* mavjud yo'nalishlar */}
|
||
<div className="flex flex-wrap gap-4">
|
||
{form.watch("ticket_itinerary")?.map((item, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="relative w-48 border rounded-xl overflow-hidden shadow-sm"
|
||
>
|
||
<img
|
||
src={getImageSrc(item.ticket_itinerary_image[0])}
|
||
alt={item.title}
|
||
className="object-cover w-full h-32"
|
||
/>
|
||
<div className="p-2 text-center">
|
||
<p className="font-semibold">{item.title}</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
{item.ticket_itinerary_destinations[0]?.name}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
{item.duration} {t("kun")}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current =
|
||
form.getValues("ticket_itinerary") || [];
|
||
form.setValue(
|
||
"ticket_itinerary",
|
||
current.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
className="absolute top-1 right-1 bg-white/80 rounded-full p-1 hover:bg-white shadow"
|
||
>
|
||
<XIcon className="size-4 text-destructive" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* yangi yo'nalish qo'shish formasi */}
|
||
<div className="flex flex-col gap-3 border rounded-xl p-4 bg-muted/10">
|
||
<Label className="text-md font-semibold">
|
||
{t("Yo'nalish qo'shish")}
|
||
</Label>
|
||
|
||
<Input
|
||
type="file"
|
||
id="ticket_itinerary_image"
|
||
accept="image/*"
|
||
className="h-12"
|
||
/>
|
||
|
||
<Input
|
||
id="ticket_itinerary_title"
|
||
placeholder={t("Sarlavha")}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="ticket_itinerary_title_ru"
|
||
placeholder={t("Sarlavha") + " (ru)"}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="ticket_itinerary_duration"
|
||
type="number"
|
||
min={1}
|
||
placeholder={t("Davomiylik (kun)")}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="ticket_itinerary_destination"
|
||
placeholder={t("Manzil")}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Input
|
||
id="ticket_itinerary_destination_ru"
|
||
placeholder={t("Manzil") + " (ru)"}
|
||
className="h-12 !text-md"
|
||
/>
|
||
|
||
<Button
|
||
type="button"
|
||
onClick={() => {
|
||
const imgInput = document.getElementById(
|
||
"ticket_itinerary_image",
|
||
) as HTMLInputElement;
|
||
const titleInput = document.getElementById(
|
||
"ticket_itinerary_title",
|
||
) as HTMLInputElement;
|
||
const titleRuInput = document.getElementById(
|
||
"ticket_itinerary_title_ru",
|
||
) as HTMLInputElement;
|
||
const durationInput = document.getElementById(
|
||
"ticket_itinerary_duration",
|
||
) as HTMLInputElement;
|
||
const destInput = document.getElementById(
|
||
"ticket_itinerary_destination",
|
||
) as HTMLInputElement;
|
||
const destRuInput = document.getElementById(
|
||
"ticket_itinerary_destination_ru",
|
||
) as HTMLInputElement;
|
||
|
||
const file = imgInput.files?.[0];
|
||
const title = titleInput.value.trim();
|
||
const titleRu = titleRuInput.value.trim();
|
||
const duration = Number(durationInput.value);
|
||
const dest = destInput.value.trim();
|
||
const destRu = destRuInput.value.trim();
|
||
|
||
if (
|
||
file &&
|
||
title &&
|
||
titleRu &&
|
||
duration &&
|
||
dest &&
|
||
destRu
|
||
) {
|
||
const current =
|
||
form.getValues("ticket_itinerary") || [];
|
||
|
||
form.setValue("ticket_itinerary", [
|
||
...current,
|
||
{
|
||
ticket_itinerary_image: [{ image: file }],
|
||
title,
|
||
title_ru: titleRu,
|
||
duration,
|
||
ticket_itinerary_destinations: [
|
||
{ name: dest, name_ru: destRu },
|
||
],
|
||
},
|
||
]);
|
||
|
||
imgInput.value = "";
|
||
titleInput.value = "";
|
||
titleRuInput.value = "";
|
||
durationInput.value = "";
|
||
destInput.value = "";
|
||
destRuInput.value = "";
|
||
}
|
||
}}
|
||
className="h-12"
|
||
>
|
||
{t("Qo'shish")}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
);
|
||
}}
|
||
/>
|
||
|
||
<div className="w-full flex justify-end">
|
||
<Button
|
||
type="submit"
|
||
className="mt-6 px-8 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-600 cursor-pointer"
|
||
>
|
||
{isPending || updatePending ? (
|
||
<Loader2 className="animate-spin" />
|
||
) : (
|
||
t("Saqlash")
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</Form>
|
||
);
|
||
};
|
||
|
||
export default StepOne;
|