create base product
This commit is contained in:
hamid zarghami
@@ -1,16 +1,59 @@
|
||||
import { type FC } from 'react'
|
||||
import { type FC, useState, useEffect } from 'react'
|
||||
import type { FormikProps } from 'formik'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import type { CreateProductType } from '../types/Types'
|
||||
import Button from '@/components/Button'
|
||||
import RadioGroup from '@/components/RadioGroup'
|
||||
import type { CreateProductType, ProductVariant } from '../types/Types'
|
||||
import { Add, Trash } from 'iconsax-react'
|
||||
|
||||
type BasicInfoSectionProps = {
|
||||
formik: FormikProps<CreateProductType>
|
||||
categories: Array<{ label: string; value: string }>
|
||||
/** در صفحه ویرایش، اگر کالا تنوع دارد مقدار true پاس داده شود */
|
||||
initialHasVariants?: boolean
|
||||
}
|
||||
|
||||
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
|
||||
const newVariant = (): ProductVariant => ({ value: '', price: 0 })
|
||||
|
||||
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initialHasVariants }) => {
|
||||
const [hasVariants, setHasVariants] = useState<boolean>(initialHasVariants ?? false)
|
||||
|
||||
useEffect(() => {
|
||||
if (initialHasVariants !== undefined) {
|
||||
setHasVariants(initialHasVariants)
|
||||
}
|
||||
}, [initialHasVariants])
|
||||
|
||||
const handleHasVariantsChange = (value: string | boolean) => {
|
||||
const next = value === true
|
||||
setHasVariants(next)
|
||||
if (!next) {
|
||||
formik.setFieldValue('variants', [])
|
||||
formik.setFieldValue('attribute', '')
|
||||
} else if (formik.values.variants.length === 0) {
|
||||
formik.setFieldValue('variants', [newVariant()])
|
||||
}
|
||||
}
|
||||
|
||||
const addVariant = () => {
|
||||
formik.setFieldValue('variants', [...formik.values.variants, newVariant()])
|
||||
}
|
||||
|
||||
const updateVariant = (index: number, field: keyof ProductVariant, value: string | number) => {
|
||||
const next = [...formik.values.variants]
|
||||
next[index] = { ...next[index], [field]: value }
|
||||
formik.setFieldValue('variants', next)
|
||||
}
|
||||
|
||||
const removeVariant = (index: number) => {
|
||||
formik.setFieldValue(
|
||||
'variants',
|
||||
formik.values.variants.filter((_, i) => i !== index)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Input
|
||||
@@ -37,49 +80,130 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
|
||||
<Input
|
||||
name='price'
|
||||
label='قیمت'
|
||||
placeholder='تومان'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.price}
|
||||
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
|
||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||
/>
|
||||
{/* بخش قیمتگذاری و تنوع */}
|
||||
<div className='mt-6 p-5 sm:p-6 rounded-2xl border border-gray-200/80 bg-gray-50/50'>
|
||||
<div className='text-sm font-medium text-gray-800 mb-1'>قیمتگذاری و تنوع</div>
|
||||
<p className='text-xs text-gray-500 mb-4'>تعیین کنید کالا دارای تنوع (مثلاً رنگ، سایز) است یا یک قیمت ثابت دارد.</p>
|
||||
|
||||
<Input
|
||||
name='discount'
|
||||
label='تخفیف'
|
||||
placeholder='تومان'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.discount}
|
||||
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
||||
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
||||
/>
|
||||
<div className='mb-5'>
|
||||
<label className='block text-sm text-gray-700 mb-2'>کالای شما دارای تنوع است؟</label>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{ label: 'خیر، فقط یک قیمت دارد', value: false },
|
||||
{ label: 'بله، دارای تنوع است', value: true }
|
||||
]}
|
||||
selected={hasVariants}
|
||||
onChange={handleHasVariantsChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
name='prepareTime'
|
||||
label='زمان آماده سازی'
|
||||
placeholder='دقیقه'
|
||||
type='number'
|
||||
value={formik.values.prepareTime}
|
||||
onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
|
||||
error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
|
||||
/>
|
||||
{!hasVariants ? (
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
|
||||
<Input
|
||||
name='price'
|
||||
label='قیمت (تومان)'
|
||||
placeholder='۰'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.price}
|
||||
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
|
||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||
/>
|
||||
<Input
|
||||
name='discount'
|
||||
label='تخفیف (تومان)'
|
||||
placeholder='۰'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.discount}
|
||||
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
||||
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
||||
/>
|
||||
<Input
|
||||
name='order'
|
||||
label='اولویت'
|
||||
placeholder='عدد'
|
||||
type='number'
|
||||
value={formik.values.order}
|
||||
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className='space-y-5'>
|
||||
<Input
|
||||
name='attribute'
|
||||
label='نام ویژگی تنوع (مثلاً رنگ، سایز)'
|
||||
placeholder='مثلاً رنگ، سایز'
|
||||
value={formik.values.attribute}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.attribute && formik.errors.attribute ? formik.errors.attribute : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
name='dailyStock'
|
||||
label='موجودی روزانه'
|
||||
placeholder='عدد'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.dailyStock}
|
||||
onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
|
||||
error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
|
||||
/>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
||||
<Input
|
||||
name='discount'
|
||||
label='تخفیف (تومان)'
|
||||
placeholder='۰'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={formik.values.discount}
|
||||
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
||||
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
||||
/>
|
||||
<Input
|
||||
name='order'
|
||||
label='اولویت'
|
||||
placeholder='عدد'
|
||||
type='number'
|
||||
value={formik.values.order}
|
||||
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 mb-2'>تنوعها و قیمت هر کدام</label>
|
||||
<div className='space-y-3'>
|
||||
{formik.values.variants.map((v, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className='flex flex-nowrap gap-3 items-center p-3 rounded-xl border border-gray-200 bg-white shadow-sm'
|
||||
>
|
||||
<Input
|
||||
placeholder='مقدار (مثلاً قرمز، M)'
|
||||
value={v.value}
|
||||
onChange={(e) => updateVariant(index, 'value', e.target.value)}
|
||||
className='flex-1 min-w-0'
|
||||
/>
|
||||
<Input
|
||||
placeholder='قیمت'
|
||||
type='number'
|
||||
seprator={true}
|
||||
value={v.price}
|
||||
onChange={(e) => updateVariant(index, 'price', Number(e.target.value))}
|
||||
className='flex-1 min-w-0 shrink-0'
|
||||
/>
|
||||
<div className='min-w-5'>
|
||||
<Trash
|
||||
onClick={() => removeVariant(index)}
|
||||
color='red' size={20} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
type='button'
|
||||
className='mt-3 w-fit px-5 !bg-white border border-dashed border-gray-300 text-gray-600 hover:!bg-gray-100 hover:border-gray-400'
|
||||
onClick={addVariant}
|
||||
>
|
||||
<Add color='gray' className='size-5 ml-2 inline' />
|
||||
افزودن تنوع
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
@@ -92,18 +216,6 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
|
||||
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
name='order'
|
||||
label='اولویت'
|
||||
placeholder='عدد'
|
||||
type='number'
|
||||
value={formik.values.order}
|
||||
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user