docker mirror

src/config/Pages.ts

@@ -153,6 +153,11 @@ export const Pages = {
       smsCountList: "/dkala/sms-count/list",
     },
   },
+  dpage: {
+    stickers: {
+      list: "/dpage/stickers/list",
+    },
+  },
   subscriptions: {
     list: "/customers/subscriptions",
   },

src/langs/fa.json

@@ -77,6 +77,8 @@
     "icons": "آیکون ها",
     "dmenu": "دی منو",
     "dkala": "دی کالا",
+    "dpage": "دی پیج",
+    "sticker": "استیکر",
     "groups_icon": "گروه های آیکون",
     "reports": "گزارش ها",
     "restaurants": "رستوران ها",
@@ -884,6 +886,14 @@
     "group": "گروه",
     "select_group": "انتخاب گروه"
   },
+  "sticker": {
+    "list_sticker": "لیست استیکر ها",
+    "add_new_sticker": "افزودن استیکر",
+    "created_at": "تاریخ ایجاد",
+    "url": "آدرس",
+    "group": "گروه",
+    "select_group": "انتخاب گروه"
+  },
   "report": {
     "list_report": "لیست گزارشات",
     "subject": "موضوع",

src/pages/dpage/hooks/useStickerData.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/StickerService";
+import { GroupStickersResponse } from "../types/Types";
+
+export const useGetStickers = () => {
+  return useQuery({
+    queryKey: ["dpage-stickers"],
+    queryFn: api.getStickers,
+  });
+};
+
+export const useGetGroupStickers = () => {
+  return useQuery<GroupStickersResponse>({
+    queryKey: ["dpage-group-stickers"],
+    queryFn: api.getGroupStickers,
+  });
+};
+
+export const useCreateSticker = () => {
+  return useMutation({
+    mutationFn: api.createSticker,
+  });
+};
+
+export const useDeleteSticker = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSticker(id),
+  });
+};

src/pages/dpage/service/StickerService.ts

@@ -0,0 +1,26 @@
+import axios from "../../../config/axios";
+import {
+  CreateStickerType,
+  GroupStickersResponse,
+  StickersResponse,
+} from "../types/Types";
+
+export const getStickers = async (): Promise<StickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers");
+  return data;
+};
+
+export const getGroupStickers = async (): Promise<GroupStickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers/groups");
+  return data;
+};
+
+export const createSticker = async (params: CreateStickerType) => {
+  const { data } = await axios.post("/admin/dpage/stickers", params);
+  return data;
+};
+
+export const deleteSticker = async (id: string) => {
+  const { data } = await axios.delete(`/admin/dpage/stickers/${id}`);
+  return data;
+};

src/pages/dpage/sticker/List.tsx

@@ -0,0 +1,144 @@
+import { useState, type FC } from 'react'
+import { useGetStickers, useDeleteSticker } from '../hooks/useStickerData'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { Add } from 'iconsax-react'
+import CreateSticker from './components/CreateSticker'
+import Td from '../../../components/Td'
+import Input from '../../../components/Input'
+import PageLoading from '../../../components/PageLoading'
+import TrashWithConfrim from '../../../components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+import { StickerType } from '../types/Types'
+import moment from 'moment-jalaali'
+
+const StickersList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [search, setSearch] = useState<string>('')
+    const { data: stickersData, isLoading, refetch } = useGetStickers()
+    const deleteSticker = useDeleteSticker()
+
+    const handleCloseModal = () => {
+        setShowModal(false)
+        refetch()
+    }
+
+    const handleDelete = (id: string) => {
+        deleteSticker.mutate(id, {
+            onSuccess: () => {
+                refetch()
+                toast.success(t('success'))
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const stickers = (stickersData as unknown as { data?: StickerType[] })?.data || []
+    const filteredStickers = stickers.filter((sticker: StickerType) =>
+        sticker.url.toLowerCase().includes(search.toLowerCase()) ||
+        sticker.group?.name?.toLowerCase().includes(search.toLowerCase())
+    )
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('sticker.list_sticker')}
+                </div>
+
+                <Button
+                    className='w-[172px]'
+                    onClick={() => setShowModal(true)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <Add size={20} color='white' />
+                        <div>
+                            {t('sticker.add_new_sticker')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-4'>
+                <div className='flex justify-end items-center'>
+                    <div className='xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('ads.search')}
+                            className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {
+                isLoading ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm'>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('sticker.url')} />
+                                    <Td text={t('sticker.group')} />
+                                    <Td text={t('sticker.created_at')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    filteredStickers.map((item: StickerType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={''}>
+                                                    <div className='flex items-center gap-3'>
+                                                        <div className='size-10 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center'>
+                                                            <img
+                                                                src={item.url}
+                                                                alt={item.url}
+                                                                className='size-full object-contain'
+                                                                onError={(e) => {
+                                                                    const target = e.target as HTMLImageElement
+                                                                    target.style.display = 'none'
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <div className='truncate max-w-xs' title={item.url}>
+                                                            {item.url}
+                                                        </div>
+                                                    </div>
+                                                </Td>
+                                                <Td text={item.group?.name || '-'} />
+                                                <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                                <Td text={''}>
+                                                    <div className='flex gap-2 items-center'>
+                                                        <TrashWithConfrim
+                                                            onDelete={() => handleDelete(item.id)}
+                                                            isLoading={deleteSticker.isPending}
+                                                        />
+                                                    </div>
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+            <CreateSticker
+                open={showModal}
+                close={handleCloseModal}
+            />
+        </div>
+    )
+}
+
+export default StickersList

src/pages/dpage/sticker/components/CreateSticker.tsx

@@ -0,0 +1,139 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../../components/Button'
+import DefaulModal from '../../../../components/DefaulModal'
+import UploadBox from '../../../../components/UploadBox'
+import Select from '../../../../components/Select'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import { useCreateSticker, useGetGroupStickers } from '../../hooks/useStickerData'
+import { useSingleUpload } from '../../../service/hooks/useServiceData'
+import { CreateStickerType, GroupStickerType } from '../../types/Types'
+import { ErrorType } from '../../../../helpers/types'
+
+interface CreateStickerProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateSticker: FC<CreateStickerProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const createSticker = useCreateSticker()
+    const singleUpload = useSingleUpload()
+    const { data: groupStickers } = useGetGroupStickers()
+
+    const groups = (groupStickers as unknown as { data?: GroupStickerType[] })?.data || []
+    const groupOptions = groups.map((group: GroupStickerType) => ({
+        value: group.id,
+        label: group.name
+    }))
+
+    const handleCreateSticker = (values: CreateStickerType) => {
+        createSticker.mutate(values, {
+            onSuccess: () => {
+                formik.resetForm()
+                setFile(undefined)
+                close()
+                toast.success(t('success'))
+                onSuccess?.()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const formik = useFormik<CreateStickerType>({
+        initialValues: {
+            url: '',
+            groupId: ''
+        },
+        validationSchema: Yup.object({
+            groupId: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            if (!file) {
+                toast.error(t('errors.required'))
+                return
+            }
+            const formData = new FormData()
+            formData.append('file', file)
+            await singleUpload.mutateAsync(formData, {
+                onSuccess: (data) => {
+                    values.url = data?.data?.url
+                    handleCreateSticker(values)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    const handleClose = () => {
+        formik.resetForm()
+        setFile(undefined)
+        close()
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={handleClose}
+            title_header={t('sticker.add_new_sticker')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <UploadBox
+                    label={t('sticker.url')}
+                    onChange={(files) => setFile(files[0])}
+                    isReset={!open}
+                    accept="image/svg+xml"
+                />
+
+                <div className='mt-4'>
+                    <Select
+                        label={t('sticker.group')}
+                        className='bg-white bg-opacity-30'
+                        items={groupOptions}
+                        placeholder={t('sticker.select_group')}
+                        {...formik.getFieldProps('groupId')}
+                        error_text={formik.touched.groupId && formik.errors.groupId ? formik.errors.groupId : ''}
+                    />
+                </div>
+
+                <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                    <div className='flex gap-5 items-center'>
+                        <Button
+                            className='w-[150px] bg-white bg-opacity-15 text-description'
+                            label={t('cancel')}
+                            onClick={handleClose}
+                        />
+
+                        <Button
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createSticker.isPending || singleUpload.isPending}
+                        >
+                            <div className='flex gap-2'>
+                                <TickCircle
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('submit')}
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default CreateSticker

src/pages/dpage/types/Types.ts

@@ -0,0 +1,40 @@
+import { IResponse } from "../../../types/response.types";
+
+export type CreateStickerType = {
+  url: string;
+  groupId: string;
+};
+
+export type StickerGroupType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+};
+
+export type StickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  url: string;
+  group: StickerGroupType;
+};
+
+export interface StickersResponse extends IResponse<StickerType[]> {
+  statusCode: number;
+}
+
+export type GroupStickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  stickers: unknown[];
+};
+
+export interface GroupStickersResponse extends IResponse<GroupStickerType[]> {
+  statusCode: number;
+}

src/router/Main.tsx

@@ -89,6 +89,7 @@ import DkalaWarningsList from '../pages/dkala/report/List.tsx'
 import ShopsList from '../pages/dkala/shop/List.tsx'
 import DkalaSmsCountList from '../pages/dkala/shop/SmsCountList.tsx'
 import UpdateShop from '../pages/dkala/shop/Update.tsx'
+import DpageStickersList from '../pages/dpage/sticker/List'
 import SubscriptionsList from '../pages/subscriptions/List.tsx'
 import Domains from '../pages/dmail/Domains.tsx'
 import ResellerList from '../pages/reseller/List.tsx'
@@ -198,6 +199,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.dkala.shops.smsCountList} element={<DkalaSmsCountList />} />
                             <Route path={Pages.dkala.shops.update + ':id'} element={<UpdateShop />} />
 
+                            <Route path={Pages.dpage.stickers.list} element={<DpageStickersList />} />
+
                             <Route path={Pages.subscriptions.list} element={<SubscriptionsList />} />
 
                             <Route path={Pages.dmail.list} element={<Domains />} />

src/shared/SideBar.tsx

@@ -580,6 +580,42 @@ const SideBar: FC = () => {
                             </div>
                         </>
                     }
+                    {
+                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dpage') &&
+                        <>
+                            <div onClick={() => handleOpenMenu('dpage')} className={clx(
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
+                            )}>
+                                {t('sidebar.dpage')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dpage') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
+                                </div>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dpage') && 'hidden'
+                            )}>
+
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<Icon variant={isActive('dpage/stickers/list') ? 'Bold' : 'Outline'} color={isActive('dpage/stickers/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.sticker')}
+                                        isActive={isActive('dpage/stickers/list')}
+                                        link={Pages.dpage.stickers.list}
+                                        activeName='dpage'
+                                    />
+                                </div>
+                            </div>
+                        </>
+                    }
+
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmail') &&
                         <>