danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix text
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-01 15:09:56 +03:30
parent 04da87b7d7
commit 8a5cd09172
2 changed files with 182 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home/Home.tsx
+70 -66
View File
@@ -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(
{ name, slug, size: active, content: "" },
{
onSuccess: (data) => { onSuccess: (data) => {
toast('کاتالوگ با موفقیت ساخته شد', 'success') toast("کاتالوگ با موفقیت ساخته شد", "success");
navigate(Paths.editor + `/${data?.data?.id}`) navigate(Paths.editor + `/${data?.data?.id}`);
}, },
onError: (error) => { onError: (error) => {
toast(extractErrorMessage(error), '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> <div>
<div className='mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8'> <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 }) => ( {CATALOG_SIZES.map(({ id, label }) => (
<button <button
key={id} key={id}
type='button' type="button"
onClick={() => setActive(id)} onClick={() => setActive(id)}
className={clx( 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]', "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!', active === id && "border-black!",
)} )}
> >
<div> <div>
<div className='flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]'> <div className="flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]">
<DocumentText size={24} color='black' /> <DocumentText size={24} color="black" />
</div>
<div className='mt-3 text-center text-sm'>
{label}
</div> </div>
<div className="mt-3 text-center text-sm">{label}</div>
</div> </div>
</button> </button>
))} ))}
</div> </div>
<div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'> <div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
<Input <Input
label='نام کاتالوگ' label="نام کاتالوگ"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
/> />
<Input <Input
label='اسلاگ' label="اسلاگ"
value={slug} value={slug}
onChange={(e) => setSlug(e.target.value)} onChange={(e) => setSlug(e.target.value)}
/> />
</div> </div>
<div className='flex justify-center'> <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'> <Button
<div className='flex items-center justify-center gap-2'> 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' /> <ArrowLeft size={16} color="white" />
</div> </div>
</Button> </Button>
</div> </div>
</div> </div>
<Divider label='یا' className='mt-8 sm:mt-10' /> <Divider label="یا" className="mt-8 sm:mt-10" />
<div className='mt-12 flex justify-center sm:mt-16 lg:mt-20'> <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]'> <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' /> <img src={PdfIcon} alt="upload" className="w-10 sm:w-12" />
<div className='mt-3 text-sm'> <div className="mt-3 text-sm">آپلود PDF</div>
آپلود PDF
</div>
<div className='mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'> <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>
</div> </div>
</div> </div>
) );
} };
export default Home export default Home;
src/shared/components/BuyCatalog.tsx
+36 -30
View File
@@ -1,38 +1,40 @@
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 [showModal, setShowModal] = useState<boolean>(false) const [count, setCount] = useState<number>(0);
const [count, setCount] = useState<number>(0) const { mutate, isPending } = usePurchaseInitate();
const { mutate, isPending } = usePurchaseInitate()
const handlePurchaseInitate = () => { const handlePurchaseInitate = () => {
if (count > 0) { if (count > 0) {
mutate({ count: count }, { mutate(
{ count: count },
{
onSuccess: (data) => { onSuccess: (data) => {
console.log(data); console.log(data);
// TODO منتقل بشه به صفحه صورت حساب // TODO منتقل بشه به صفحه صورت حساب
}, },
onError: (error) => { onError: (error) => {
toast(extractErrorMessage(error), '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>
@@ -40,24 +42,28 @@ const BuyCatalog: FC = () => {
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>
<div className='mt-6 flex justify-end'> <div className="mt-6 flex justify-end">
<Button disabled={isPending} onClick={handlePurchaseInitate} className='w-fit px-5'> <Button
disabled={isPending}
onClick={handlePurchaseInitate}
className="w-fit px-5"
>
صدور صورتحساب صدور صورتحساب
</Button> </Button>
</div> </div>
</DefaulModal> </DefaulModal>
</div> </div>
) );
} };
export default BuyCatalog export default BuyCatalog;