491 lines
13 KiB
TypeScript
491 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Heart } from "lucide-react";
|
|
import { useMemo } from "react";
|
|
import type { ControllerRenderProps } from "react-hook-form";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import z from "zod";
|
|
|
|
import { Price } from "@/components/shadcnblocks/price";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { FieldLegend, FieldSet } from "@/components/ui/field";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
|
|
const STOCK_STATUS = {
|
|
IN_STOCK: "IN_STOCK",
|
|
OUT_OF_STOCK: "OUT_OF_STOCK",
|
|
} as const;
|
|
|
|
type StockStatusCode = keyof typeof STOCK_STATUS;
|
|
|
|
type FormType = z.infer<typeof formSchema>;
|
|
type FieldName = keyof FormType;
|
|
|
|
type Image = {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
|
|
interface ProductPrice {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}
|
|
|
|
type Option = {
|
|
id: string;
|
|
value: string;
|
|
label: string;
|
|
thumbnail?: string;
|
|
stockStatusCode?: StockStatusCode;
|
|
};
|
|
|
|
interface Hinges {
|
|
label: string;
|
|
id: string;
|
|
min?: number;
|
|
max?: number;
|
|
name: FieldName;
|
|
options?: Option[];
|
|
}
|
|
|
|
type Product = {
|
|
images: Image[];
|
|
name: string;
|
|
description: string;
|
|
link: string;
|
|
price: ProductPrice;
|
|
hinges: Record<FieldName, Hinges>;
|
|
variant: {
|
|
color: string;
|
|
size: string;
|
|
};
|
|
};
|
|
|
|
interface ProductImagesProps {
|
|
images: Image[];
|
|
}
|
|
|
|
interface ProductFormProps {
|
|
hinges: Record<FieldName, Hinges>;
|
|
selected?: FormType;
|
|
}
|
|
|
|
interface RadioGroupProps {
|
|
options?: Array<Option>;
|
|
field: ControllerRenderProps<FormType>;
|
|
}
|
|
|
|
type SizeOptionProps = Option;
|
|
|
|
const formatCurrency = (
|
|
value: number,
|
|
currency: string = "ریال",
|
|
locale: string = "fa-IR",
|
|
) => {
|
|
return `${value.toLocaleString(locale)} ${currency}`;
|
|
};
|
|
|
|
const PRODUCT_DETAILS: Product = {
|
|
name: "کلاه فدورا قهوه‌ای روشن شیک",
|
|
description:
|
|
"طراحی شیک و سبک برای استایل روزمره؛ راحتی و ظرافت در یک کلاه فدورا.",
|
|
link: "#",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Hat-and-Sunglasses-2.png",
|
|
alt: "کلاه فدورا قهوه‌ای با عینک آفتابی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Portrait-hat-2.png",
|
|
alt: "پرتره با کلاه فدورا شیک",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Modern-Look-2.png",
|
|
alt: "استایل مدرن با کلاه فدورا",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Fashionable-Pose-2.png",
|
|
alt: "پوز مد با کلاه فدورا",
|
|
},
|
|
],
|
|
price: {
|
|
regular: 499000.0,
|
|
sale: 389000.0,
|
|
currency: "ریال",
|
|
},
|
|
variant: {
|
|
color: "light-brown",
|
|
size: "size-1",
|
|
},
|
|
hinges: {
|
|
color: {
|
|
label: "رنگ",
|
|
id: "color",
|
|
name: "color",
|
|
options: [
|
|
{
|
|
id: "light-brown",
|
|
value: "light-brown",
|
|
label: "قهوه‌ای روشن",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/accessories/Stylish-Beige-Fedora-1.png",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "dark-brown",
|
|
value: "dark-brown",
|
|
label: "قهوه‌ای تیره",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-1.png",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "black",
|
|
value: "black",
|
|
label: "مشکی",
|
|
thumbnail:
|
|
"/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Black-Fedora-Hat-1.png",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
},
|
|
],
|
|
},
|
|
size: {
|
|
label: "سایز کلاه",
|
|
id: "size",
|
|
name: "size",
|
|
options: [
|
|
{
|
|
id: "size-1",
|
|
value: "size-1",
|
|
label: "6⅝",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "size-2",
|
|
value: "size-2",
|
|
label: "6¾",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "size-3",
|
|
value: "size-3",
|
|
label: "6⅞",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
},
|
|
{
|
|
id: "size-4",
|
|
value: "size-4",
|
|
label: "7",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
},
|
|
{
|
|
id: "size-5",
|
|
value: "size-5",
|
|
label: "7⅛",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "size-6",
|
|
value: "size-6",
|
|
label: "7¼",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
},
|
|
{
|
|
id: "size-7",
|
|
value: "size-7",
|
|
label: "7⅜",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
{
|
|
id: "size-8",
|
|
value: "size-8",
|
|
label: "7½",
|
|
stockStatusCode: "IN_STOCK",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
const ProductQuickView4 = ({
|
|
images = PRODUCT_DETAILS.images,
|
|
name = PRODUCT_DETAILS.name,
|
|
description = PRODUCT_DETAILS.description,
|
|
link = PRODUCT_DETAILS.link,
|
|
price = PRODUCT_DETAILS.price,
|
|
hinges = PRODUCT_DETAILS.hinges,
|
|
variant = PRODUCT_DETAILS.variant,
|
|
}) => {
|
|
const { regular, sale, currency } = price;
|
|
|
|
return (
|
|
<Dialog defaultOpen>
|
|
<DialogContent
|
|
style={
|
|
{
|
|
"--dialog-height": "calc(100dvh - 2.5rem)",
|
|
"--dialog-max-height": "38.75rem",
|
|
} as React.CSSProperties
|
|
}
|
|
className="block h-dvh w-full max-w-240! rounded-none border-none p-0 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)]"
|
|
>
|
|
<div className="max-md:hide-scrollbar grid overflow-auto max-md:h-full md:grid-cols-2 md:overflow-hidden">
|
|
<div>
|
|
<ProductImages images={images} />
|
|
</div>
|
|
<div>
|
|
<div className="hide-scrollbar h-full space-y-5 px-8 py-8 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)] md:overflow-auto md:px-15 md:py-14">
|
|
<div className="space-y-2">
|
|
<DialogTitle className="text-xl leading-normal font-semibold">
|
|
{name}
|
|
</DialogTitle>
|
|
<DialogDescription>{description}</DialogDescription>
|
|
</div>
|
|
<Price
|
|
onSale={sale != null}
|
|
className="items-end text-xl font-semibold"
|
|
>
|
|
{sale != null && (
|
|
<span className="leading-tight text-foreground">
|
|
{formatCurrency(sale, currency)}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={
|
|
sale != null
|
|
? "leading-tight text-muted-foreground line-through"
|
|
: "leading-tight text-foreground"
|
|
}
|
|
>
|
|
{formatCurrency(regular, currency)}
|
|
</span>
|
|
</Price>
|
|
<ProductForm
|
|
hinges={hinges}
|
|
selected={{
|
|
color: variant?.color,
|
|
size: variant?.size,
|
|
}}
|
|
/>
|
|
<Button variant="link" className="px-0" asChild>
|
|
<a href={link}>مشاهده جزئیات محصول</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const ProductImages = ({ images }: ProductImagesProps) => {
|
|
if (!images) return;
|
|
|
|
return (
|
|
<Carousel className="h-full md:[&>div]:h-full">
|
|
<CarouselContent className="-ms-0 md:h-full">
|
|
{images.map((img, index) => (
|
|
<CarouselItem
|
|
className="w-full ps-0 md:h-[var(--dialog-height)] md:max-h-[var(--dialog-max-height)]"
|
|
key={index}
|
|
>
|
|
<div className="size-full overflow-hidden max-md:aspect-square">
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="start-1.5" />
|
|
<CarouselNext className="end-1.5" />
|
|
</Carousel>
|
|
);
|
|
};
|
|
|
|
const formSchema = z.object({
|
|
color: z.string(),
|
|
size: z.string(),
|
|
});
|
|
|
|
const ProductForm = ({ hinges, selected }: ProductFormProps) => {
|
|
const form = useForm({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
color: selected?.color ?? "",
|
|
size: selected?.size ?? "",
|
|
},
|
|
});
|
|
|
|
function onSubmit(values: FormType) {
|
|
console.log(values);
|
|
}
|
|
|
|
const colorHinges = hinges?.color;
|
|
const sizeHinges = hinges?.size;
|
|
|
|
const selectedColorValue = form.watch("color");
|
|
const selectedSizeValue = form.watch("size");
|
|
|
|
const currentColor = useMemo(
|
|
() =>
|
|
colorHinges?.options?.find((item) => item.value === selectedColorValue)
|
|
?.label ?? "",
|
|
[selectedColorValue, colorHinges],
|
|
);
|
|
|
|
const currentSize = useMemo(
|
|
() =>
|
|
sizeHinges?.options?.find((item) => item.value === selectedSizeValue)
|
|
?.label ?? "",
|
|
[selectedSizeValue, sizeHinges],
|
|
);
|
|
|
|
return (
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
|
<div className="space-y-5">
|
|
{colorHinges && (
|
|
<Controller
|
|
control={form.control}
|
|
name={colorHinges.name}
|
|
render={({ field }) => (
|
|
<FieldSet className="gap-2">
|
|
<FieldLegend className="text-sm leading-normal">
|
|
<h2>
|
|
{colorHinges.label}:{" "}
|
|
<span className="text-sm font-normal text-muted-foreground">
|
|
{currentColor}
|
|
</span>
|
|
</h2>
|
|
</FieldLegend>
|
|
<ColorRadioGroup field={field} options={colorHinges.options} />
|
|
</FieldSet>
|
|
)}
|
|
/>
|
|
)}
|
|
{sizeHinges && (
|
|
<Controller
|
|
control={form.control}
|
|
name={sizeHinges.name}
|
|
render={({ field }) => (
|
|
<FieldSet className="gap-2">
|
|
<FieldLegend className="text-sm leading-normal">
|
|
<h2>
|
|
{sizeHinges.label}:{" "}
|
|
<span className="text-sm font-normal text-muted-foreground">
|
|
{currentSize}
|
|
</span>
|
|
</h2>
|
|
</FieldLegend>
|
|
<SizeRadioGroup field={field} options={sizeHinges.options} />
|
|
</FieldSet>
|
|
)}
|
|
/>
|
|
)}
|
|
<div className="flex gap-3">
|
|
<Button size="lg">افزودن به سبد</Button>
|
|
<Button size="icon-lg" variant="outline">
|
|
<Heart />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
const ColorRadioGroup = ({ options, field }: RadioGroupProps) => {
|
|
if (!options) return;
|
|
|
|
return (
|
|
<RadioGroup
|
|
{...field}
|
|
value={field.value}
|
|
onValueChange={field.onChange}
|
|
className="flex flex-wrap items-center gap-3"
|
|
>
|
|
{options.map((item, index) => (
|
|
<label
|
|
key={index}
|
|
htmlFor={item.id}
|
|
className="relative size-10 shrink-0 cursor-pointer overflow-hidden rounded-md border p-0.5 duration-400 has-checked:ring has-disabled:opacity-60"
|
|
>
|
|
<RadioGroupItem
|
|
id={item.id}
|
|
className="absolute size-px overflow-hidden opacity-0"
|
|
value={item.value}
|
|
aria-label={`انتخاب ${item.label}`}
|
|
disabled={item.stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
|
|
/>
|
|
<div
|
|
style={{
|
|
backgroundImage: `url(${item.thumbnail})`,
|
|
}}
|
|
className="size-full overflow-hidden rounded-sm bg-cover bg-center bg-no-repeat"
|
|
></div>
|
|
</label>
|
|
))}
|
|
</RadioGroup>
|
|
);
|
|
};
|
|
|
|
const SizeRadioGroup = ({ options, field }: RadioGroupProps) => {
|
|
if (!options) return;
|
|
|
|
return (
|
|
<RadioGroup
|
|
{...field}
|
|
value={field.value}
|
|
onValueChange={field.onChange}
|
|
className="flex w-full flex-wrap justify-start gap-2"
|
|
>
|
|
{options &&
|
|
options.map((item) => (
|
|
<SizeOption
|
|
key={item.id}
|
|
stockStatusCode={item.stockStatusCode}
|
|
id={item.id}
|
|
label={item.label}
|
|
value={item.value}
|
|
/>
|
|
))}
|
|
</RadioGroup>
|
|
);
|
|
};
|
|
|
|
const SizeOption = ({ id, label, stockStatusCode, value }: SizeOptionProps) => {
|
|
return (
|
|
<label
|
|
htmlFor={id}
|
|
className="relative flex h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center rounded-md border px-5 py-2.5 text-center text-sm leading-none uppercase not-has-disabled:hover:ring has-checked:bg-primary has-checked:text-primary-foreground has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:text-muted-foreground has-disabled:line-through"
|
|
>
|
|
<RadioGroupItem
|
|
id={id}
|
|
className="absolute size-px overflow-hidden opacity-0"
|
|
value={value}
|
|
aria-label={`انتخاب ${label}`}
|
|
disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
|
|
/>
|
|
{label}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export { ProductQuickView4 };
|