hamid zarghami
+121
-117
@@ -1,128 +1,132 @@
|
|||||||
import Divider from '@/components/Divider'
|
import PdfIcon from "@/assets/images/PDF.svg";
|
||||||
import { usePageTitle } from '@/hooks/usePageTitle'
|
import Button from "@/components/Button";
|
||||||
import { ArrowLeft, DocumentText } from 'iconsax-react'
|
import Divider from "@/components/Divider";
|
||||||
import { useState, type FC } from 'react'
|
import Input from "@/components/Input";
|
||||||
import PdfIcon from '@/assets/images/PDF.svg'
|
import { toast } from "@/components/Toast";
|
||||||
import Button from '@/components/Button'
|
import { Paths } from "@/config/Paths";
|
||||||
import Input from '@/components/Input'
|
import { clx, extractErrorMessage } from "@/helpers/utils";
|
||||||
import { toast } from '@/components/Toast'
|
import { usePageTitle } from "@/hooks/usePageTitle";
|
||||||
import { useCreateCatalog } from './hooks/useHomeData'
|
import { ArrowLeft, DocumentText } from "iconsax-react";
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useState, type FC } from "react";
|
||||||
import { Paths } from '@/config/Paths'
|
import { useNavigate } from "react-router-dom";
|
||||||
import DirectLogin from '../auth/components/DirectLogin'
|
import DirectLogin from "../auth/components/DirectLogin";
|
||||||
import { clx, extractErrorMessage } from '@/helpers/utils'
|
import { useCreateCatalog } from "./hooks/useHomeData";
|
||||||
|
|
||||||
const CATALOG_SIZES = [
|
const CATALOG_SIZES = [
|
||||||
{ id: 'a4', label: 'A4' },
|
{ id: "a4", label: "A4" },
|
||||||
{ id: 'a3', label: 'A3' },
|
{ id: "a3", label: "A3" },
|
||||||
{ id: 'a5', label: 'A5' },
|
{ id: "a5", label: "A5" },
|
||||||
] as const
|
] as const;
|
||||||
|
|
||||||
const Home: FC = () => {
|
const Home: FC = () => {
|
||||||
usePageTitle('ساخت کاتالوگ')
|
usePageTitle("ساخت کاتالوگ");
|
||||||
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [active, setActive] = useState<string>('a4')
|
const [active, setActive] = useState<string>("a4");
|
||||||
const [name, setName] = useState<string>('')
|
const [name, setName] = useState<string>("");
|
||||||
const [slug, setSlug] = useState<string>('')
|
const [slug, setSlug] = useState<string>("");
|
||||||
const { mutate: createCatalog, isPending } = useCreateCatalog()
|
const { mutate: createCatalog, isPending } = useCreateCatalog();
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
if (!name) {
|
if (!name) {
|
||||||
toast('نام کاتالوگ را وارد کنید', 'error')
|
toast("نام کاتالوگ را وارد کنید", "error");
|
||||||
} else if (!slug) {
|
} else if (!slug) {
|
||||||
toast('اسلاگ کاتالوگ را وارد کنید', 'error')
|
toast("اسلاگ کاتالوگ را وارد کنید", "error");
|
||||||
} else {
|
} else {
|
||||||
createCatalog({ name, slug, size: active, content: '' }, {
|
createCatalog(
|
||||||
onSuccess: (data) => {
|
{ name, slug, size: active, content: "" },
|
||||||
toast('کاتالوگ با موفقیت ساخته شد', 'success')
|
{
|
||||||
navigate(Paths.editor + `/${data?.data?.id}`)
|
onSuccess: (data) => {
|
||||||
},
|
toast("کاتالوگ با موفقیت ساخته شد", "success");
|
||||||
onError: (error) => {
|
navigate(Paths.editor + `/${data?.data?.id}`);
|
||||||
toast(extractErrorMessage(error), 'error')
|
},
|
||||||
}
|
onError: (error) => {
|
||||||
})
|
toast(extractErrorMessage(error), "error");
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='mt-4 w-full'>
|
<div className="mt-4 w-full">
|
||||||
<div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<h1 className='text-base font-light sm:text-lg'>
|
<h1 className="text-base font-light sm:text-lg">
|
||||||
ساخت کاتالوگ ب ویرایشگر داناک
|
ساخت کاتالوگ به کمک ویرایشگر داناک
|
||||||
</h1>
|
</h1>
|
||||||
<DirectLogin />
|
<DirectLogin />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10'>
|
<div className="mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10">
|
||||||
<div className='mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base'>
|
<div className="mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base">
|
||||||
سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
|
سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک
|
||||||
</div>
|
بسازید
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className='mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8'>
|
|
||||||
{CATALOG_SIZES.map(({ id, label }) => (
|
|
||||||
<button
|
|
||||||
key={id}
|
|
||||||
type='button'
|
|
||||||
onClick={() => setActive(id)}
|
|
||||||
className={clx(
|
|
||||||
'flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]',
|
|
||||||
active === id && 'border-black!',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div className='flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]'>
|
|
||||||
<DocumentText size={24} color='black' />
|
|
||||||
</div>
|
|
||||||
<div className='mt-3 text-center text-sm'>
|
|
||||||
{label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'>
|
|
||||||
<Input
|
|
||||||
label='نام کاتالوگ'
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
label='اسلاگ'
|
|
||||||
value={slug}
|
|
||||||
onChange={(e) => setSlug(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='flex justify-center'>
|
|
||||||
<Button disabled={isPending} onClick={handleSubmit} className='mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto'>
|
|
||||||
<div className='flex items-center justify-center gap-2'>
|
|
||||||
ادامه
|
|
||||||
<ArrowLeft size={16} color='white' />
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider label='یا' className='mt-8 sm:mt-10' />
|
|
||||||
|
|
||||||
<div className='mt-12 flex justify-center sm:mt-16 lg:mt-20'>
|
|
||||||
<div className='flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]'>
|
|
||||||
<img src={PdfIcon} alt='upload' className='w-10 sm:w-12' />
|
|
||||||
<div className='mt-3 text-sm'>
|
|
||||||
آپلود PDF
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'>
|
|
||||||
رایگان
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Home
|
<div>
|
||||||
|
<div className="mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8">
|
||||||
|
{CATALOG_SIZES.map(({ id, label }) => (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setActive(id)}
|
||||||
|
className={clx(
|
||||||
|
"flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]",
|
||||||
|
active === id && "border-black!",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]">
|
||||||
|
<DocumentText size={24} color="black" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-center text-sm">{label}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
|
||||||
|
<Input
|
||||||
|
label="نام کاتالوگ"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="اسلاگ"
|
||||||
|
value={slug}
|
||||||
|
onChange={(e) => setSlug(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Button
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={handleSubmit}
|
||||||
|
className="mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
ادامه
|
||||||
|
<ArrowLeft size={16} color="white" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider label="یا" className="mt-8 sm:mt-10" />
|
||||||
|
|
||||||
|
<div className="mt-12 flex justify-center sm:mt-16 lg:mt-20">
|
||||||
|
<div className="flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]">
|
||||||
|
<img src={PdfIcon} alt="upload" className="w-10 sm:w-12" />
|
||||||
|
<div className="mt-3 text-sm">آپلود PDF</div>
|
||||||
|
|
||||||
|
<div className="mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">
|
||||||
|
رایگان
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
|
|||||||
@@ -1,63 +1,69 @@
|
|||||||
import { useState, type FC } from 'react'
|
import Button from "@/components/Button";
|
||||||
import Button from '@/components/Button'
|
import DefaulModal from "@/components/DefaulModal";
|
||||||
import DefaulModal from '@/components/DefaulModal'
|
import Input from "@/components/Input";
|
||||||
import Input from '@/components/Input'
|
import { toast } from "@/components/Toast";
|
||||||
import { toast } from '@/components/Toast'
|
import { extractErrorMessage } from "@/helpers/utils";
|
||||||
import { usePurchaseInitate } from '@/pages/catalogue/hooks/useCatalogueData'
|
import { usePurchaseInitate } from "@/pages/catalogue/hooks/useCatalogueData";
|
||||||
import { extractErrorMessage } from '@/helpers/utils'
|
import { useState, type FC } from "react";
|
||||||
|
|
||||||
const BuyCatalog: FC = () => {
|
const BuyCatalog: FC = () => {
|
||||||
|
const [showModal, setShowModal] = useState<boolean>(false);
|
||||||
|
const [count, setCount] = useState<number>(0);
|
||||||
|
const { mutate, isPending } = usePurchaseInitate();
|
||||||
|
|
||||||
const [showModal, setShowModal] = useState<boolean>(false)
|
const handlePurchaseInitate = () => {
|
||||||
const [count, setCount] = useState<number>(0)
|
if (count > 0) {
|
||||||
const { mutate, isPending } = usePurchaseInitate()
|
mutate(
|
||||||
|
{ count: count },
|
||||||
const handlePurchaseInitate = () => {
|
{
|
||||||
if (count > 0) {
|
onSuccess: (data) => {
|
||||||
mutate({ count: count }, {
|
console.log(data);
|
||||||
onSuccess: (data) => {
|
// TODO منتقل بشه به صفحه صورت حساب
|
||||||
console.log(data);
|
},
|
||||||
// TODO منتقل بشه به صفحه صورت حساب
|
onError: (error) => {
|
||||||
},
|
toast(extractErrorMessage(error), "error");
|
||||||
onError: (error) => {
|
},
|
||||||
toast(extractErrorMessage(error), 'error')
|
},
|
||||||
}
|
);
|
||||||
})
|
} else {
|
||||||
} else {
|
toast("تعداد را انتخاب کنید");
|
||||||
toast('تعداد را انتخاب کنید')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='px-4'>
|
<div className="px-4">
|
||||||
<div className='flex justify-center'>
|
<div className="flex justify-center">
|
||||||
<Button onClick={() => setShowModal(true)} className='w-fit px-5'>
|
<Button onClick={() => setShowModal(true)} className="w-fit px-5">
|
||||||
خرید کاتالو
|
خرید کاتالوگ
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DefaulModal
|
<DefaulModal
|
||||||
open={showModal}
|
open={showModal}
|
||||||
close={() => setShowModal(false)}
|
close={() => setShowModal(false)}
|
||||||
isHeader
|
isHeader
|
||||||
title_header='خرید کاتالوگ'
|
title_header="خرید کاتالوگ"
|
||||||
>
|
>
|
||||||
<div className='mt-4'>
|
<div className="mt-4">
|
||||||
<Input
|
<Input
|
||||||
label='تعداد'
|
label="تعداد"
|
||||||
type='number'
|
type="number"
|
||||||
value={count}
|
value={count}
|
||||||
onChange={(e) => setCount(+e.target.value)}
|
onChange={(e) => setCount(+e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div className='mt-6 flex justify-end'>
|
|
||||||
<Button disabled={isPending} onClick={handlePurchaseInitate} className='w-fit px-5'>
|
|
||||||
صدور صورتحساب
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DefaulModal>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
<div className="mt-6 flex justify-end">
|
||||||
}
|
<Button
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={handlePurchaseInitate}
|
||||||
|
className="w-fit px-5"
|
||||||
|
>
|
||||||
|
صدور صورتحساب
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DefaulModal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default BuyCatalog
|
export default BuyCatalog;
|
||||||
|
|||||||
Reference in New Issue
Block a user