first commit
This commit is contained in:
Jelaletdin12
348
features/cart/components/OrderSummary.tsx
Normal file
348
features/cart/components/OrderSummary.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import DeliveryTypeSelector from "./DeliveryTypeSelector";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
|
||||
import { useState } from "react";
|
||||
|
||||
interface OrderBillingItem {
|
||||
title: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface OrderBilling {
|
||||
body: OrderBillingItem[];
|
||||
footer: {
|
||||
title: string;
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface OrderSummaryProps {
|
||||
order: {
|
||||
id: number;
|
||||
billing: OrderBilling;
|
||||
};
|
||||
paymentType: PaymentType | null;
|
||||
deliveryType: DeliveryType;
|
||||
selectedRegion: string;
|
||||
selectedProvince: number | null;
|
||||
note: string;
|
||||
regionGroups: Record<string, Province[]>;
|
||||
availableRegions: string[];
|
||||
paymentTypes: PaymentType[];
|
||||
phone: string;
|
||||
name: string;
|
||||
lastName: string;
|
||||
onPhoneChange: (phone: string) => void;
|
||||
onNameChange: (name: string) => void;
|
||||
onLastNameChange: (lastName: string) => void;
|
||||
onPaymentTypeChange: (type: PaymentType) => void;
|
||||
onDeliveryTypeChange: (type: DeliveryType) => void;
|
||||
onRegionChange: (regionCode: string) => void;
|
||||
onProvinceChange: (provinceId: number) => void;
|
||||
onNoteChange: (note: string) => void;
|
||||
onCompleteOrder: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function OrderSummary({
|
||||
order,
|
||||
paymentType,
|
||||
deliveryType,
|
||||
selectedRegion,
|
||||
selectedProvince,
|
||||
note,
|
||||
regionGroups,
|
||||
availableRegions,
|
||||
paymentTypes,
|
||||
phone,
|
||||
name,
|
||||
lastName,
|
||||
onPhoneChange,
|
||||
onNameChange,
|
||||
onLastNameChange,
|
||||
onPaymentTypeChange,
|
||||
onDeliveryTypeChange,
|
||||
onRegionChange,
|
||||
onProvinceChange,
|
||||
onNoteChange,
|
||||
onCompleteOrder,
|
||||
isLoading,
|
||||
}: OrderSummaryProps) {
|
||||
const t = useTranslations();
|
||||
const [showValidation, setShowValidation] = useState(false);
|
||||
|
||||
const provincesForSelectedRegion = selectedRegion
|
||||
? regionGroups[selectedRegion] || []
|
||||
: [];
|
||||
|
||||
const phoneDigits = phone.replace(/\D/g, "");
|
||||
const isPhoneValid = phoneDigits.length === 11;
|
||||
|
||||
const isFormValid =
|
||||
selectedRegion &&
|
||||
selectedProvince &&
|
||||
paymentType &&
|
||||
isPhoneValid &&
|
||||
name.trim() !== "" &&
|
||||
lastName.trim() !== "";
|
||||
|
||||
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const input = e.target.value;
|
||||
const prefix = "+993 ";
|
||||
|
||||
if (input.length < prefix.length) {
|
||||
onPhoneChange(prefix);
|
||||
return;
|
||||
}
|
||||
|
||||
const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");
|
||||
|
||||
const limitedDigits = digitsOnly.substring(0, 8);
|
||||
|
||||
let formattedPhone = prefix;
|
||||
if (limitedDigits.length > 0) {
|
||||
formattedPhone += limitedDigits.substring(0, 2);
|
||||
|
||||
if (limitedDigits.length > 2) {
|
||||
formattedPhone += " " + limitedDigits.substring(2);
|
||||
}
|
||||
}
|
||||
|
||||
onPhoneChange(formattedPhone);
|
||||
};
|
||||
|
||||
const handleCompleteOrderClick = () => {
|
||||
setShowValidation(true);
|
||||
if (isFormValid) {
|
||||
onCompleteOrder();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
|
||||
{/* Customer Information */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
{t("customer_information")}
|
||||
</h3>
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block">
|
||||
{t("name")}
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => onNameChange(e.target.value)}
|
||||
placeholder={t("name")}
|
||||
className={`rounded-lg ${
|
||||
showValidation && name.trim() === "" ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{showValidation && name.trim() === "" && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block">
|
||||
{t("last_name")}
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e) => onLastNameChange(e.target.value)}
|
||||
placeholder={t("last_name")}
|
||||
className={`rounded-lg ${
|
||||
showValidation && lastName.trim() === "" ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{showValidation && lastName.trim() === "" && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block">
|
||||
{t("phone")}
|
||||
</Label>
|
||||
<Input
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={handlePhoneChange}
|
||||
placeholder="+993 61 097651"
|
||||
className={`rounded-lg ${
|
||||
showValidation && !isPhoneValid ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{showValidation && !isPhoneValid && (
|
||||
<p className="text-xs text-red-500 mt-1">
|
||||
{t("requiredField")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Type */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
|
||||
<div className="flex gap-2">
|
||||
{paymentTypes.map((type) => (
|
||||
<Card
|
||||
key={type.id}
|
||||
className={`flex-1 cursor-pointer transition-all ${
|
||||
paymentType?.id === type.id
|
||||
? "border-2 border-[#005bff] bg-blue-50"
|
||||
: showValidation && !paymentType
|
||||
? "border-2 border-red-500"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onPaymentTypeChange(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
paymentType?.id === type.id ? "text-[#005bff]" : ""
|
||||
}`}
|
||||
>
|
||||
{type.name}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
{showValidation && !paymentType && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Region Selection */}
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">
|
||||
{t("choose_region")}
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={selectedRegion}
|
||||
onValueChange={(value) => {
|
||||
onRegionChange(value);
|
||||
onProvinceChange(null as any);
|
||||
}}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
{availableRegions.map((regionCode) => (
|
||||
<div key={regionCode} className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value={regionCode}
|
||||
id={`region-${regionCode}`}
|
||||
className={`border-2 ${
|
||||
showValidation && !selectedRegion
|
||||
? "border-red-500"
|
||||
: "border-gray-400"
|
||||
} data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white`}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`region-${regionCode}`}
|
||||
className="cursor-pointer uppercase"
|
||||
>
|
||||
{regionCode}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
{showValidation && !selectedRegion && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Province Selection */}
|
||||
{selectedRegion && provincesForSelectedRegion.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">
|
||||
{t("choose_address")}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedProvince?.toString() || ""}
|
||||
onValueChange={(value) => onProvinceChange(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger
|
||||
className={`rounded-lg w-full ${
|
||||
showValidation && !selectedProvince ? "border-red-500" : ""
|
||||
}`}
|
||||
>
|
||||
<SelectValue placeholder={t("choose_address")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{provincesForSelectedRegion.map((province) => (
|
||||
<SelectItem key={province.id} value={province.id.toString()}>
|
||||
{province.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{showValidation && !selectedProvince && (
|
||||
<p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Note */}
|
||||
<div className="mb-6">
|
||||
<Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
|
||||
<Textarea
|
||||
value={note}
|
||||
onChange={(e) => onNoteChange(e.target.value)}
|
||||
className="rounded-xl resize-none"
|
||||
rows={3}
|
||||
placeholder={t("note")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Billing */}
|
||||
<div className="space-y-2 mb-4">
|
||||
{order.billing.body.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between text-base font-medium"
|
||||
>
|
||||
<span>{item.title}:</span>
|
||||
<span>{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-lg font-semibold">
|
||||
{order.billing.footer.title}:
|
||||
</span>
|
||||
<span className="text-lg font-bold text-green-600">
|
||||
{order.billing.footer.value}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleCompleteOrderClick}
|
||||
disabled={isLoading}
|
||||
className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
|
||||
size="lg"
|
||||
>
|
||||
{isLoading ? `${t("order")}...` : t("order")}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user