скидки

src/Components/LoggedIn/Content/Discounts/index.tsx

@@ -0,0 +1,551 @@
+import * as React from "react";
+import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import TableContainer from "@mui/material/TableContainer";
+import Paper from "@mui/material/Paper";
+import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { PrivilegesProps, DiscountProps } from "./types";
+import useStore, { StoreState } from "../../../../store";
+import theme from "../../../../theme";
+
+
+const columns: GridColDef[] = [
+  { 
+    field: "id", 
+    headerName: "ID", 
+    width: 30,
+    sortable: false,
+  },
+  {
+    field: "name",
+    headerName: "Название скидки",
+    width: 200,
+    sortable: false,
+  },
+  {
+    field: "endless",
+    headerName: "Бесконечная",
+    width: 120,
+    sortable: false,
+  },
+  {
+    field: "from",
+    headerName: "От",
+    width: 120,
+    sortable: false,
+  },
+  {
+    field: "dueTo",
+    headerName: "До",
+    width: 120,
+    sortable: false,
+  },
+  {
+    field: "privileges",
+    headerName: "Привилегии",
+    width: 210,
+    sortable: false,
+  },
+  {
+    field: "active",
+    headerName: "Активна",
+    width: 100,
+    sortable: false,
+  }
+];
+
+const rows:Array<DiscountProps> = [
+  { id: 1, name: "Скидка 1", endless: false, from: "", dueTo: "", privileges: [ 
+    { 
+      good: "Товар 1", 
+      discount: 0.3
+    },
+    { 
+      good: "Товар 2", 
+      discount: 0.2
+    }
+   ], active: false },
+   { id: 2, name: "Скидка 2", endless: false, from: "", dueTo: "", privileges: [ 
+    { 
+      good: "Товар 3", 
+      discount: 0.3
+    },
+    { 
+      good: "Товар 4", 
+      discount: 0.2
+    }
+   ], active: true },
+   { id: 3, name: "Скидка 3", endless: false, from: "", dueTo: "", privileges: [ 
+    { 
+      good: "Товар 5", 
+      discount: 0.3
+    },
+    { 
+      good: "Товар 6", 
+      discount: 0.2
+    }
+   ], active: false },
+];
+
+const Discounts: React.FC = () =>  {
+  const [checkboxState, setCheckboxState] = React.useState<boolean>(false);
+  const toggleCheckbox = () => { setCheckboxState( !checkboxState ); }
+
+  const [value1, setValue1] = React.useState<Date>( new Date() );
+  const [value2, setValue2] = React.useState<Date>( new Date() );
+
+  const [service, setService] = React.useState("Шаблонизатор");
+  const handleChange = (event: SelectChangeEvent) => {
+    setService(event.target.value as string);
+  };
+
+  let { discountsArray, discountsArraySet } = useStore<StoreState>((state) => state);
+  discountsArray = [...rows];   //УДАЛИТЬ
+
+  const { discountsActiveArray, discountsActiveArraySet } = useStore<StoreState>((state) => state);
+  let discountsActiveArrayUpdated:Array<number>;
+
+  const findActiveDiscounts = () =>   {
+    const actives:Array<number> = [];
+    
+    discountsArray.forEach( (item, i) => { 
+      if( item.active == true )   { actives.push( i ); }
+    } );
+
+    discountsActiveArrayUpdated = [ ...actives ];
+
+    if( JSON.stringify(discountsActiveArray) != JSON.stringify(discountsActiveArrayUpdated) )   {
+      discountsActiveArraySet( discountsActiveArrayUpdated );
+    }
+  }
+
+  findActiveDiscounts();
+  
+  const discountsArrayConverted = discountsArray.map( (item) => {
+    const dateFrom = item.from ? new Date( Number(item.from) ) : "";
+    const dateDueTo = item.from ? new Date( Number(item.dueTo) ) : "";
+
+    const strFrom = dateFrom 
+      ? `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}`
+      : "-"
+
+    const strDueTo = dateDueTo 
+      ? `${dateDueTo.getDate()}.${dateDueTo.getMonth()}.${dateDueTo.getFullYear()}`
+      : "-"
+
+    if( item.privileges.length )  { 
+      const result = item.privileges.reduce( (acc, privilege) => {
+        acc = acc 
+          ? `${acc}, ${privilege.good} - ${privilege.discount}%` 
+          : `${privilege.good} - ${privilege.discount * 100}%`;
+
+        return acc;
+      }, "" );
+
+      return { ...item, privileges: result, from: strFrom, dueTo: strDueTo }
+    } else {
+      return { ...item, from: strFrom, dueTo: strDueTo }
+    }
+  } );
+
+  const createDiscount = ( name:string, discount: number ) => {
+    const newDiscount = { 
+      id: new Date().getTime(), 
+      name, 
+      endless: checkboxState, 
+      from: checkboxState ? "" : new Date( value1 ).getTime() +"", 
+      dueTo: checkboxState ? "" : new Date( value2 ).getTime() +"", 
+        privileges: [{
+          good: service,
+          discount: discount / 100
+        }],
+      active: true
+    }
+
+    const discountsArrayUpdated = [ ...discountsArray, newDiscount ];
+    discountsArraySet( discountsArrayUpdated );
+  }
+
+  const fieldName = React.useRef<HTMLInputElement | null>(null);
+  const fieldDiscount = React.useRef<HTMLInputElement | null>(null);
+
+  const checkFields = () => {
+    if( fieldName.current != null && fieldDiscount.current != null )  {
+      createDiscount( fieldName.current.value, Number(fieldDiscount.current.value) );
+    }
+  }
+
+  const { discountsSelectedRowsData, discountsSelectedRowsDataSet } = useStore<StoreState>((state) => state);
+  
+  const onRowsSelectionHandler = ( ids:GridSelectionModel ) => {
+    const result:Array<DiscountProps> = [];
+    ids.forEach((id) => discountsArray.forEach( (row) => { 
+      if(row.id === id)  result.push(row); 
+    } ) );
+
+    discountsSelectedRowsDataSet( [ ...result ] );
+  };
+
+  const activation = ( value:boolean ) => {    
+    discountsArray.forEach( (item, i) => {
+      discountsSelectedRowsData.forEach( (selected) => {
+        if( item.id == selected.id )  {
+          if( value )   { 
+            discountsArray[ i ].active = true;
+          } else {
+            discountsArray[ i ].active = false;
+          }
+        }
+      } );
+    } );
+
+    discountsArraySet( discountsArray );
+  }
+
+  return (
+    <React.Fragment>
+       <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <Typography 
+          variant="subtitle1"  
+          sx={{
+            width: "90%",
+            height: "60px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            color: theme.palette.secondary.main
+        }}>
+          СКИДКИ
+        </Typography>
+
+        <Box sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "left",
+          alignItems: "left",
+          marginTop: "15px",
+        }}>
+          <Typography 
+            variant="h4"  
+            sx={{
+              width: "90%",
+              height: "40px",
+              fontWeight: "normal",
+              color: theme.palette.grayDisabled.main,
+              marginTop: "35px"
+          }}>
+            Название:
+          </Typography>
+          <TextField
+            id = "standard-basic"
+            label = { "" }
+            variant = "filled"
+            color = "secondary"
+            sx={{
+              width: "200px",
+              height: "30px",
+              marginTop: "-20px"
+            }}
+            InputProps={{
+              style: {
+                backgroundColor: theme.palette.content.main,
+                color: theme.palette.secondary.main,
+              } }} 
+            InputLabelProps={{
+              style: {
+                color: theme.palette.secondary.main
+              } }} 
+            inputRef={ fieldName }
+          />
+
+          <Typography 
+            variant="h4"  
+            sx={{
+              width: "90%",
+              height: "40px",
+              fontWeight: "normal",
+              color: theme.palette.grayDisabled.main,
+              marginTop: "75px"
+          }}>
+            Условия:
+          </Typography>
+
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={service}
+            label="Age"
+            onChange={handleChange}
+            sx={{ 
+              color: theme.palette.secondary.main,
+              border: "1px solid",
+              borderColor: theme.palette.secondary.main,
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme.palette.secondary.main
+              },
+              ".MuiSvgIcon-root ": {
+                fill: theme.palette.secondary.main,
+              }
+            }}
+          >
+            <MenuItem value={"Шаблонизатор"}>Шаблонизатор</MenuItem>
+            <MenuItem value={"Опросник"}>Опросник</MenuItem>
+            <MenuItem value={"Аналитика сокращателя"}>Аналитика сокращателя</MenuItem>
+            <MenuItem value={"АБ тесты"}>АБ тесты</MenuItem>
+          </Select>
+
+          <TextField
+            id = "standard-basic"
+            label = { "Процент скидки" }
+            variant = "filled"
+            color = "secondary"
+            sx={{
+              marginTop: "15px"
+            }}
+            InputProps={{
+              style: {
+                backgroundColor: theme.palette.content.main,
+                color: theme.palette.secondary.main,
+              } }} 
+            InputLabelProps={{
+              style: {
+                color: theme.palette.secondary.main
+              } }} 
+            inputRef={ fieldDiscount }
+          />
+
+          <TableContainer component={Paper} sx={{ 
+            width: "100%", 
+            marginTop: "35px",
+            backgroundColor: theme.palette.content.main
+          }}>
+            <Table sx={{ minWidth: 650, }} aria-label="simple table">
+              <TableBody>
+                <TableRow sx={{ border: "1px solid white" }} >
+                  <TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
+                    Работает, если заплатите 100500 денег
+                  </TableCell>
+                </TableRow>
+                <TableRow sx={{ border: "1px solid white" }} >
+                  <TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
+                    Вы должны будете продать душу дьяволу
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          <Typography 
+            variant="h4"  
+            sx={{
+              width: "90%",
+              height: "40px",
+              fontWeight: "normal",
+              color: theme.palette.grayDisabled.main,
+              marginTop: "55px"
+          }}>
+            Дата действия:
+          </Typography>
+          
+          <Box sx={{ 
+            width: "90%",
+            display: "flex"
+          }}>
+            <Typography sx={{
+              width: "35px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "left",
+            }}>С</Typography>
+
+            <DesktopDatePicker
+              inputFormat="DD/MM/YYYY"
+              value={ value1 }
+              onChange={ (e) => { if(e) { setValue1(e) } } }
+              renderInput={(params) => <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 }
+              } }}
+            />
+
+            <Typography sx={{
+              width: "65px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            }}>по</Typography>
+
+            <DesktopDatePicker
+              inputFormat="DD/MM/YYYY"
+              value={ value2 }
+              onChange={ (e) => { if(e) { setValue2(e) } } }
+              renderInput={(params) => <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 }
+              } }}
+            />
+          </Box>
+
+
+          <Box sx={{
+            display: "flex",
+            width: "90%",
+            marginTop: theme.spacing(2),
+          }}>
+            <Box sx={{ 
+              width: "20px",
+              height: "42px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "left",
+              alignItems: "left",
+              marginRight: theme.spacing(1)
+            }}>
+              <Checkbox sx={{ 
+                color: theme.palette.secondary.main,
+                "&.Mui-checked": {
+                  color: theme.palette.secondary.main,
+                },
+              }} onClick={ () => toggleCheckbox() } />
+            </Box>
+            <Box sx={{ 
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center"
+            }}>
+              Бессрочно
+            </Box>
+          </Box>
+
+          <Box sx={{ 
+            width: "90%",
+            marginTop: "55px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center"
+          }}>
+            <Button 
+              variant = "contained"
+              sx={{
+                backgroundColor: theme.palette.menu.main,
+                height: "52px",
+                fontWeight: "normal",
+                fontSize: "17px",
+                "&:hover": {
+                  backgroundColor: theme.palette.grayMedium.main
+                }
+              }}
+              onClick={ () => checkFields() } >
+                Cоздать
+            </Button>
+          </Box>
+        
+        </Box>
+
+        <Box style={{ width: "80%", marginTop: "55px" }}>
+          <Box style={{ height: 400 }}>
+            <DataGrid 
+              checkboxSelection={true} 
+              rows={ discountsArrayConverted }
+              columns={ columns }
+              sx={{
+                color: theme.palette.secondary.main,
+                "& .MuiDataGrid-iconSeparator": {
+                  display: "none"
+                },
+                "& .css-levciy-MuiTablePagination-displayedRows": {
+                  color: theme.palette.secondary.main
+                },
+                "& .MuiSvgIcon-root": {
+                  color: theme.palette.secondary.main
+                },
+                "& .MuiTablePagination-selectLabel": {
+                  color: theme.palette.secondary.main
+                },
+                "& .MuiInputBase-root": {
+                  color: theme.palette.secondary.main
+                },
+                "& .MuiButton-text": {
+                  color: theme.palette.secondary.main
+                },
+              }}
+              components={{ Toolbar: GridToolbar }}
+              onSelectionModelChange={ (ids) => onRowsSelectionHandler( ids ) }
+            />
+          </Box>
+        </Box>
+
+        <Box sx={{ 
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          marginTop: "45px"
+        }}>
+          <Box sx={{ 
+            width: "420px",
+            display: "flex",
+            justifyContent: "space-between",
+          }}>
+            <Button 
+              variant = "contained"
+              onClick={ () => activation( false ) }
+              sx={{
+                backgroundColor: theme.palette.menu.main,
+                width: "200px",
+                height: "48px",
+                fontWeight: "normal",
+                fontSize: "17px",
+                "&:hover": {
+                  backgroundColor: theme.palette.grayMedium.main
+                }
+              }}>
+                Деактивировать
+            </Button>
+
+            <Button 
+              variant = "contained"
+              onClick={ () => activation( true ) }
+              sx={{
+                backgroundColor: theme.palette.menu.main,
+                width: "200px",
+                height: "48px",
+                fontWeight: "normal",
+                fontSize: "17px",
+                "&:hover": {
+                  backgroundColor: theme.palette.grayMedium.main
+                }
+              }}>
+                Применить
+            </Button>
+          </Box>
+        </Box>
+      
+      </LocalizationProvider>
+    </React.Fragment>
+  );
+}
+
+
+export default Discounts;

src/Components/LoggedIn/Content/Discounts/types.ts

@@ -0,0 +1,14 @@
+export interface PrivilegesProps {
+  good: string,
+  discount: number
+}
+
+export interface DiscountProps {
+  id: number
+  name: string
+  endless: boolean
+  from: string
+  dueTo: string
+  privileges: Array<PrivilegesProps>
+  active: boolean
+}

src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx

@@ -142,19 +142,19 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
 
   localStorage.setItem("tariffs", JSON.stringify(tariffsArray));
 
-  const { selectedRowsData, selectedRowsDataSet } = useStore<StoreState>((state) => state);
+  const { tariffsSelectedRowsData, tariffsSelectedRowsDataSet } = useStore<StoreState>((state) => state);
   const onRowsSelectionHandler = ( ids:GridSelectionModel ) => {
     const result:Array<ArrayProps> = [];
     ids.forEach((id) => tariffsArray.forEach( (row) => { 
       if(row.id === id)  result.push(row); 
     } ) );
 
-    selectedRowsDataSet( result );
+    tariffsSelectedRowsDataSet( result );
   };
 
   const { cartRowsData, cartRowsDataSet } = useStore<StoreState>((state) => state);
   const handleToBasket = () => {
-    cartRowsDataSet( selectedRowsData );
+    cartRowsDataSet( tariffsSelectedRowsData );
   }
 
   const handleRemoveBasket = ( id:number ) => {
@@ -172,7 +172,7 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
   let { promocodeArray, promocodeArraySet } = useStore<StoreState>((state) => state);
   const [selectedPromocode, setSelectedPromocode] = React.useState( -1 );
 
-  promocodeArray = [ ...rowz ];
+  //promocodeArray = [ ...rowz ];
 
   const setPromocode = ( name:string ) => {
     let codeNumber = -1;

src/Components/LoggedIn/Content/Tariffs/index.tsx

@@ -41,7 +41,7 @@ const Tariffs: React.FC = () =>  {
   const newPackage = ( name:string ) => {
     const tariffs:Array<Tariff> = [];
 
-    store.selectedRowsData.forEach( (item) => {
+    store.tariffsSelectedRowsData.forEach( (item) => {
       if( item.type === "package" && item.tariffs )    { 
         tariffs.push( ...item.tariffs );
       } else { 

src/Components/LoggedIn/Content/index.tsx

@@ -1,10 +1,14 @@
 import * as React from "react";
 import { Box } from "@mui/material";
 import Users from "./Users";
-import Promocode from "./Promocode";
-import Support from "./Support";
-import Tariffs from "./Tariffs";
 import Entities from "./Entities";
+import Tariffs from "./Tariffs";
+import Discounts from "./Discounts";
+import Promocode from "./Promocode";
+
+
+import Support from "./Support";
+import Error404 from "../../Error404";
 
 
 export interface MWProps {
@@ -12,7 +16,17 @@ export interface MWProps {
 }
 
 const Content: React.FC<MWProps> = ({ section }) =>  {
-  const componentsArray = [ <Users />, <Promocode />, <Support />, <Tariffs />, <Entities /> ];
+  const componentsArray = [ 
+    <Error404 />, 
+    <Users />, 
+    <Entities />,
+    <Tariffs />, 
+    <Discounts />, 
+    <Promocode />, 
+    <Error404 />, 
+    <Error404 />, 
+    <Support />
+  ];
 
   return (
     <React.Fragment>

src/index.tsx

@@ -16,11 +16,14 @@ root.render(
                 <Route path="/" element={ <Authorization /> } />
                 <Route path="/dispatch" element={ <Sections /> } />
 
-                <Route path="/users"     element={ <LoggedIn section={0} /> } />
-                <Route path="/promocode" element={ <LoggedIn section={1} /> } />
-                <Route path="/support"   element={ <LoggedIn section={2} /> } />
+                <Route path="/users"     element={ <LoggedIn section={1} /> } />
+                <Route path="/entities"  element={ <LoggedIn section={2} /> } />
                 <Route path="/tariffs"   element={ <LoggedIn section={3} /> } />
-                <Route path="/entities"  element={ <LoggedIn section={4} /> } />
+                <Route path="/discounts" element={ <LoggedIn section={4} /> } />
+                <Route path="/promocode" element={ <LoggedIn section={5} /> } />
+
+
+                <Route path="/support"   element={ <LoggedIn section={8} /> } />
 
                 <Route path="/modalAdmin"    element={ <LoggedIn section={-1} /> } />
                 <Route path="/modalUser"     element={ <LoggedIn section={-1} /> } />

src/store.ts

@@ -1,34 +1,53 @@
 import create from "zustand";
 import { ArrayProps } from "./Components/LoggedIn/Content/Tariffs/types";
 import { PromocodeProps } from "./Components/LoggedIn/Content/Promocode/types";
+import { DiscountProps } from "./Components/LoggedIn/Content/Discounts/types";
 
 
 const useStore = create<StoreState>((set) => ({
   tariffsArray: [],
   tariffsArraySet: (array) => set({ tariffsArray: array }),
 
-  selectedRowsData: [],
-  selectedRowsDataSet: (array) => set({ selectedRowsData: array }),
+  tariffsSelectedRowsData: [],
+  tariffsSelectedRowsDataSet: (array) => set({ tariffsSelectedRowsData: array }),
 
   cartRowsData: [],
   cartRowsDataSet: (array) => set({ cartRowsData: array }),
 
   promocodeArray: [],
   promocodeArraySet: (array) => set({ promocodeArray: array }),
+
+  discountsArray: [],
+  discountsArraySet: (array) => set({ discountsArray: array }),
+
+  discountsActiveArray: [],
+  discountsActiveArraySet: (array) => set({ discountsActiveArray: array }),
+
+  discountsSelectedRowsData: [],
+  discountsSelectedRowsDataSet: (array) => set({ discountsSelectedRowsData: array }),
 }))
 
 export interface StoreState {
   tariffsArray: Array<ArrayProps>,
   tariffsArraySet: (array:Array<ArrayProps>) => void,
 
-  selectedRowsData: Array<ArrayProps>,
-  selectedRowsDataSet: (array:Array<ArrayProps>) => void,
+  tariffsSelectedRowsData: Array<ArrayProps>,
+  tariffsSelectedRowsDataSet: (array:Array<ArrayProps>) => void,
 
   cartRowsData: Array<ArrayProps>,
   cartRowsDataSet: (array:Array<ArrayProps>) => void,
 
   promocodeArray: Array<PromocodeProps>,
   promocodeArraySet: (array:Array<PromocodeProps>) => void,
+
+  discountsArray: Array<DiscountProps>,
+  discountsArraySet: (array:Array<DiscountProps>) => void,
+
+  discountsActiveArray: Array<number>,
+  discountsActiveArraySet: (array:Array<number>) => void,
+
+  discountsSelectedRowsData: Array<DiscountProps>,
+  discountsSelectedRowsDataSet: (array:Array<DiscountProps>) => void,
 }