редактирование промокода

src/api/promocode/requests.ts

@@ -1,7 +1,7 @@
 import makeRequest from "@root/api/makeRequest";
 
 import type {
-  CreatePromocodeBody,
+  CreatePromocodeBody, EditPromocodeBody,
   GetPromocodeListBody,
   Promocode,
   PromocodeList,
@@ -124,6 +124,20 @@ const createPromocode = async (body: CreatePromocodeBody) => {
   }
 };
 
+const editPromocode = async (body: EditPromocodeBody) => {
+  try {
+    const editPromocodeResponse = await makeRequest<unknown, Promocode>({
+      url: process.env.REACT_APP_DOMAIN + "/codeword/promocode" + "/edit",
+      method: "PUT",
+      body,
+    });
+    return [editPromocodeResponse]
+  } catch (nativeError) {
+    const [error] = parseAxiosError(nativeError);
+    return [null, `Ошибка редактирования промокода. ${error}`];
+  }
+}
+
 const deletePromocode = async (id: string): Promise<void> => {
   try {
     await makeRequest<never, never>({
@@ -162,6 +176,7 @@ const getPromocodeStatistics = async (id: string, from: number, to: number) => {
 export const promocodeApi = {
   getPromocodeList,
   createPromocode,
+  editPromocode,
   deletePromocode,
   getAllPromocodes,
   getNotActivePromocodes,

src/api/promocode/swr.ts

@@ -4,7 +4,7 @@ import { enqueueSnackbar } from "notistack";
 import { promocodeApi } from "./requests";
 
 import type {
-  CreatePromocodeBody,
+  CreatePromocodeBody, EditPromocodeBody,
   PromocodeList,
 } from "@root/model/promocodes";
 
@@ -55,6 +55,29 @@ export function usePromocodes(
     [page, pageSize]
   );
 
+  const editPromocode = useCallback(
+      async function (body: EditPromocodeBody) {
+        try {
+          await promocodeApi.editPromocode(body);
+          mutate<PromocodeList | undefined, void>(
+              ["promocodes", page, pageSize, active],
+              );
+            await promocodeApi.getPromocodeList({
+                limit: pageSize,
+                filter: {
+                    active: active,
+                },
+                page: page,
+            });
+        } catch (error) {
+          console.error("Error editing promocode", error);
+          if (error instanceof Error)
+            enqueueSnackbar(error.message, { variant: "error" });
+        }
+      },
+      [page, pageSize,]
+  );
+
   const deletePromocode = useCallback(
     async function (id: string) {
       try {
@@ -130,6 +153,7 @@ export function usePromocodes(
     ...swrResponse,
     createPromocode,
     deletePromocode,
+    editPromocode,
     createFastLink,
     promocodeStatistics: promocodeStatistics.data,
     promocodesCount: promocodesCountRef.current,

src/model/promocodes.ts

@@ -49,3 +49,13 @@ export type PromocodeStatistics = {
   usageCount: number;
   usageMap: Record<string, number>;
 };
+
+export type EditPromocodeBody = {
+  id: string,
+  description: string,
+  greetings: string,
+  dueTo: number,
+  activationCount: number,
+  delete: boolean
+
+}

src/pages/dashboard/Content/PromocodeManagement/EditModal.tsx

@@ -0,0 +1,202 @@
+import {
+    Box,
+    Button,
+    Typography,
+    Modal,
+    TextField,
+    useTheme,
+    useMediaQuery,
+    TextFieldProps,
+} from "@mui/material";
+import {CustomTextField} from "@kitUI/CustomTextField";
+import {DesktopDatePicker} from "@mui/x-date-pickers/DesktopDatePicker";
+import {useEffect, useState} from "react";
+import {EditPromocodeBody, Promocode} from "@root/model/promocodes";
+import {enqueueSnackbar} from "notistack";
+
+
+const host = window.location.hostname;
+let isTest = host.includes("s");
+
+type EditModalProps = {
+    id: string;
+    setId: (id: string) => void;
+    promocodes: Promocode[];
+    editPromocode: (body: EditPromocodeBody) => Promise<void>
+};
+
+export const EditModal = ({id, setId, promocodes, editPromocode}: EditModalProps) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(550));
+    const promocode = promocodes.find((item) => item.id === id);
+    const [descriptionField, setDescriptionField] = useState<string>("");
+    const [greetingsField, setGreetingsField] = useState<string>("");
+    const [dueToField, setDueToField] = useState<number>(0);
+    const [activationField, setActivationField] = useState<number>(0);
+
+    useEffect(
+        function setCurrentPromocodeFields() {
+            if (!promocode) return;
+
+            setDescriptionField(promocode.description);
+            setGreetingsField(promocode.greetings);
+            setDueToField(promocode.dueTo)
+            setActivationField(promocode.activationCount)
+        },
+        [promocode]
+    );
+
+
+    async function handleEditClick() {
+        if (!promocode) return enqueueSnackbar(`Тариф ${id} не найден`);
+
+        if (!descriptionField) return enqueueSnackbar('Поле "Описание" пустое');
+        if (!greetingsField) return enqueueSnackbar('Поле "Приветственное сообщение" пустое');
+
+        const editPromocodeBody: EditPromocodeBody = {
+            id: id,
+            description: descriptionField,
+            greetings: greetingsField,
+            dueTo: dueToField,
+            activationCount: activationField,
+            delete: promocode.delete
+        }
+
+       await editPromocode(editPromocodeBody);
+        setId("")
+
+
+    }
+
+
+    return (
+        <Modal
+            open={Boolean(id)}
+            onClose={() => {
+                setId("");
+            }}
+            sx={{
+                "& > .MuiBox-root": { outline: "none", padding: "32px 32px 16px" },
+            }}
+        >
+            <Box
+                sx={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    width: "95%",
+                    maxWidth: "600px",
+                    background: "#1F2126",
+                    border: "2px solid gray",
+                    borderRadius: "6px",
+                    boxShadow: 24,
+                    p: 4,
+                }}
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        gap: "30px",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        flexDirection: "column",
+                    }}
+                >
+                    <Box
+                        sx={{display: "flex",
+                            flexDirection: "column",
+                            gap: "15px"
+                        }}
+                    >
+                        <Typography
+                            variant="h4"
+                            sx={{
+                                height: "40px",
+                                fontWeight: "normal",
+                                color: theme.palette.secondary.main,
+                            }}
+                        >Редактировать промокод: {promocode?.codeword}</Typography>
+                        {promocode && (
+                            <>
+                                <CustomTextField
+                                    id={""}
+                                    name="description"
+                                    label="Описание"
+                                    value={descriptionField}
+                                    onChange={(event) => setDescriptionField(event.target.value)}
+                                />
+                                <CustomTextField
+                                    id={""}
+                                    name="greetings"
+                                    label="Приветственое сообщение"
+                                    value={greetingsField}
+                                    onChange={(event) => setGreetingsField(event.target.value)}
+                                />
+                                <Typography
+                                    variant="h4"
+                                    sx={{
+                                        height: "40px",
+                                        fontWeight: "normal",
+                                        marginTop: "15px",
+                                        color: theme.palette.secondary.main,
+                                    }}
+                                >
+                                    Время существования промокода
+                                </Typography>
+                                <DesktopDatePicker
+                                    inputFormat="DD/MM/YYYY"
+                                    value={dueToField === 0 ? null : new Date(Number(dueToField) * 1000)}
+                                    onChange={(event: any) => {
+                                        setDueToField(event.$d.getTime() / 1000 || 0);
+                                    }}
+                                    renderInput={(params: TextFieldProps) => <TextField {...params} />}
+                                    InputProps={{
+                                        sx: {
+                                            height: "40px",
+                                            color: theme.palette.secondary.main,
+                                            border: "1px solid",
+                                            borderColor: theme.palette.secondary.main,
+                                            "& .MuiSvgIcon-root": { color: theme.palette.secondary.main },
+                                        },
+                                    }}
+                                />
+
+                                <CustomTextField
+                                    id={""}
+                                    name="activationCount"
+                                    label="Количество активаций промокода"
+                                    value={activationField}
+                                    onChange={({ target }) =>
+                                        setActivationField(Number(target.value.replace(/\D/g, "")))
+                                    }
+                                />
+                            </>
+
+                        )}
+
+                    </Box>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            gap: "30px",
+                            justifyContent: "center",
+                            alignItems: "center",
+                        }}
+                    >
+                        <Button sx={{ maxWidth: "100px" }}
+                                onClick={handleEditClick}
+                        >
+                            Сохранить изменения
+                        </Button>
+                        <Button sx={{ maxWidth: "100px" }} onClick={() => {
+                            setId("");
+                        }}>
+                            Отмена
+                        </Button>
+                    </Box>
+                </Box>
+            </Box>
+        </Modal>
+    );
+};

src/pages/dashboard/Content/PromocodeManagement/index.tsx

@@ -11,6 +11,7 @@ import { StatisticsModal } from "./StatisticsModal";
 import DeleteModal from "./DeleteModal";
 import {promocodeApi} from "@root/api/promocode/requests";
 import {SelectChangeEvent} from "@mui/material/Select";
+import {EditModal} from "@pages/dashboard/Content/PromocodeManagement/EditModal";
 
 export const PromocodeManagement = () => {
   const theme = useTheme();
@@ -20,6 +21,8 @@ export const PromocodeManagement = () => {
 
   const [showStatisticsModalId, setShowStatisticsModalId] =
     useState<string>("");
+  const [showEditModalId, setShowEditModalId] =
+    useState<string>("");
   const [page, setPage] = useState<number>(0);
   const [to, setTo] = useState(0);
   const [from, setFrom] = useState(0);
@@ -33,9 +36,11 @@ export const PromocodeManagement = () => {
     promocodeStatistics,
     deletePromocode,
     createPromocode,
+    editPromocode,
     createFastLink,
   } = usePromocodes(page, pageSize, showStatisticsModalId, to, from, active);
   const columns = usePromocodeGridColDef(
+    setShowEditModalId,
     setShowStatisticsModalId,
     deleteModalHC
   );
@@ -121,6 +126,12 @@ export const PromocodeManagement = () => {
           autoHeight
         />
       </Box>
+        <EditModal
+            id={showEditModalId}
+            setId={setShowEditModalId}
+            promocodes={data?.items ?? []}
+            editPromocode={editPromocode}
+        />
       <StatisticsModal
         id={showStatisticsModalId}
         setId={setShowStatisticsModalId}

src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx

@@ -3,10 +3,11 @@ import { GridColDef } from "@mui/x-data-grid";
 import { Promocode } from "@root/model/promocodes";
 import { useMemo, useState } from "react";
 
-import { BarChart, Delete } from "@mui/icons-material";
+import { BarChart, Delete, Edit } from "@mui/icons-material";
 import { promocodeApi } from "@root/api/promocode/requests";
 
 export function usePromocodeGridColDef(
+  setEdit: (id: string) => void,
   setStatistics: (id: string) => void,
   deletePromocode: (id: string) => void
 ) {
@@ -64,6 +65,23 @@ export function usePromocodeGridColDef(
         sortable: false,
         valueGetter: ({ row }) => row.description,
       },
+      {
+        field: "edit",
+        headerName: "",
+        width: 60,
+        sortable: false,
+        renderCell: (params) => {
+            return (
+                <IconButton
+                    onClick={() => {
+                        setEdit(params.row.id);
+                    }}
+                >
+                    <Edit />
+                </IconButton>
+            );
+        },
+      },
       {
         field: "settings",
         headerName: "",
@@ -96,6 +114,6 @@ export function usePromocodeGridColDef(
         },
       },
     ],
-    [deletePromocode, setStatistics]
+    [deletePromocode, setStatistics, setEdit]
   );
 }