промокоды в корзине
This commit is contained in:
Nikolai
parent
0050308c79
commit
7f47b92c77
@ -1,7 +1,6 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
|
||||
import Table from "@mui/material/Table";
|
||||
@ -11,7 +10,6 @@ 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 InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Select, { SelectChangeEvent } from "@mui/material/Select";
|
||||
import { PrivilegesProps, PromocodeProps } from "./types";
|
||||
@ -41,15 +39,13 @@ const columns: GridColDef[] = [
|
||||
{
|
||||
field: "from",
|
||||
headerName: "От",
|
||||
type: "number",
|
||||
width: 20,
|
||||
width: 120,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "dueTo",
|
||||
headerName: "До",
|
||||
type: "number",
|
||||
width: 20,
|
||||
width: 120,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
@ -61,34 +57,34 @@ const columns: GridColDef[] = [
|
||||
];
|
||||
|
||||
const rows:Array<PromocodeProps> = [
|
||||
{ id: 1, name: "Промокод 1", endless: false, from: 0, dueTo: 0, privileges: [
|
||||
{ id: 1, name: "Промокод 1", endless: false, from: "", dueTo: "", privileges: [
|
||||
{
|
||||
good: "Товар 1",
|
||||
discount: "0.3"
|
||||
discount: 0.3
|
||||
},
|
||||
{
|
||||
good: "Товар 2",
|
||||
discount: "0.2"
|
||||
discount: 0.2
|
||||
}
|
||||
] },
|
||||
{ id: 2, name: "Промокод 2", endless: false, from: 0, dueTo: 0, privileges: [
|
||||
{ id: 2, name: "Промокод 2", endless: false, from: "", dueTo: "", privileges: [
|
||||
{
|
||||
good: "Товар 3",
|
||||
discount: "0.3"
|
||||
discount: 0.3
|
||||
},
|
||||
{
|
||||
good: "Товар 4",
|
||||
discount: "0.2"
|
||||
discount: 0.2
|
||||
}
|
||||
] },
|
||||
{ id: 3, name: "Промокод 3", endless: false, from: 0, dueTo: 0, privileges: [
|
||||
{ id: 3, name: "Промокод 3", endless: false, from: "", dueTo: "", privileges: [
|
||||
{
|
||||
good: "Товар 5",
|
||||
discount: "0.3"
|
||||
discount: 0.3
|
||||
},
|
||||
{
|
||||
good: "Товар 6",
|
||||
discount: "0.2"
|
||||
discount: 0.2
|
||||
}
|
||||
] },
|
||||
];
|
||||
@ -108,29 +104,38 @@ const Promocode: React.FC = () => {
|
||||
const { promocodeArray, promocodeArraySet } = useStore<StoreState>((state) => state);
|
||||
|
||||
const promocodeArrayConverted = promocodeArray.map( (item) => {
|
||||
const dateFrom = new Date( Number(item.from) );
|
||||
const dateDueTo = new Date( Number(item.dueTo) );
|
||||
|
||||
const strFrom = `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}`;
|
||||
const strDueTo = `${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}`;
|
||||
? `${acc}, ${privilege.good} - ${privilege.discount}%`
|
||||
: `${privilege.good} - ${privilege.discount}%`;
|
||||
|
||||
return acc;
|
||||
}, "" );
|
||||
|
||||
return { ...item, privileges: result }
|
||||
return { ...item, privileges: result, from: strFrom, dueTo: strDueTo }
|
||||
} else {
|
||||
return item;
|
||||
return { ...item, from: strFrom, dueTo: strDueTo }
|
||||
}
|
||||
} );
|
||||
|
||||
const createPromocode = ( name:string ) => {
|
||||
const createPromocode = ( name:string, discount: number ) => {
|
||||
const newPromocode = {
|
||||
id: new Date().getTime(),
|
||||
name,
|
||||
endless: checkboxState,
|
||||
from: checkboxState ? 0 : new Date( value1 ).getTime(),
|
||||
dueTo: checkboxState ? 0 : new Date( value2 ).getTime(),
|
||||
privileges: []
|
||||
from: checkboxState ? "" : new Date( value1 ).getTime() +"",
|
||||
dueTo: checkboxState ? "" : new Date( value2 ).getTime() +"",
|
||||
privileges: [{
|
||||
good: service,
|
||||
discount
|
||||
}]
|
||||
}
|
||||
|
||||
const promocodeArrayUpdated = [ ...promocodeArray, newPromocode ];
|
||||
@ -138,10 +143,11 @@ const Promocode: React.FC = () => {
|
||||
}
|
||||
|
||||
const fieldName = React.useRef<HTMLInputElement | null>(null);
|
||||
const fieldDiscount = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const checkName = () => {
|
||||
if( fieldName.current != null ) {
|
||||
createPromocode( fieldName.current.value );
|
||||
const checkFields = () => {
|
||||
if( fieldName.current != null && fieldDiscount.current != null ) {
|
||||
createPromocode( fieldName.current.value, Number(fieldDiscount.current.value) );
|
||||
}
|
||||
}
|
||||
|
||||
@ -255,7 +261,7 @@ const Promocode: React.FC = () => {
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
//inputRef={ fieldName }
|
||||
inputRef={ fieldDiscount }
|
||||
/>
|
||||
|
||||
<TableContainer component={Paper} sx={{
|
||||
@ -391,7 +397,7 @@ const Promocode: React.FC = () => {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}
|
||||
onClick={ () => checkName() } >
|
||||
onClick={ () => checkFields() } >
|
||||
Cоздать
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
export interface PrivilegesProps {
|
||||
good: string,
|
||||
discount: string
|
||||
discount: number
|
||||
}
|
||||
|
||||
export interface PromocodeProps {
|
||||
id: number
|
||||
name: string
|
||||
endless: boolean
|
||||
from: number
|
||||
dueTo: number
|
||||
from: string
|
||||
dueTo: string
|
||||
privileges: Array<PrivilegesProps>
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from "react";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { Box, Button, Typography, TextField } from "@mui/material";
|
||||
import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
||||
import { useDemoData } from "@mui/x-data-grid-generator";
|
||||
import useStore, { StoreState } from "../../../../../store";
|
||||
@ -14,6 +14,7 @@ import IconButton from "@mui/material/IconButton";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import { PrivilegesProps, PromocodeProps } from "../../Promocode/types";
|
||||
import theme from "../../../../../theme";
|
||||
|
||||
|
||||
@ -79,6 +80,29 @@ const rows = [
|
||||
|
||||
//localStorage.setItem("tariffs", JSON.stringify(rows));
|
||||
|
||||
const rowz:Array<PromocodeProps> = [
|
||||
{ id: 1, name: "Промокод 1", endless: false, from: "", dueTo: "", privileges: [
|
||||
{
|
||||
good: "Шаблонизатор",
|
||||
discount: 0.15
|
||||
},
|
||||
{
|
||||
good: "Опросник",
|
||||
discount: 0.3
|
||||
}
|
||||
] },
|
||||
{ id: 1, name: "Промокод 2", endless: false, from: "", dueTo: "", privileges: [
|
||||
{
|
||||
good: "Шаблонизатор",
|
||||
discount: 0.4
|
||||
},
|
||||
{
|
||||
good: "Опросник",
|
||||
discount: 0.6
|
||||
}
|
||||
] }
|
||||
];
|
||||
|
||||
const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
let price = 0;
|
||||
let prices = 0;
|
||||
@ -133,11 +157,37 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
cartRowsDataSet( selectedRowsData );
|
||||
}
|
||||
|
||||
console.log( cartRowsData )
|
||||
|
||||
const handleRemoveBasket = ( id:number ) => {
|
||||
const cartFiltered = cartRowsData.filter( (row) => row.id != id );
|
||||
cartRowsDataSet( cartFiltered );
|
||||
}
|
||||
|
||||
const fieldPromocode = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const checkPromocode = () => {
|
||||
if( fieldPromocode.current != null ) {
|
||||
setPromocode( fieldPromocode.current.value );
|
||||
}
|
||||
}
|
||||
|
||||
let { promocodeArray, promocodeArraySet } = useStore<StoreState>((state) => state);
|
||||
const [selectedPromocode, setSelectedPromocode] = React.useState( -1 );
|
||||
|
||||
promocodeArray = [ ...rowz ];
|
||||
console.log(promocodeArray)
|
||||
|
||||
const setPromocode = ( name:string ) => {
|
||||
let codeNumber = -1;
|
||||
|
||||
promocodeArray.forEach( (item, i) => {
|
||||
if( item.name == name ) codeNumber = i;
|
||||
} );
|
||||
|
||||
setSelectedPromocode( codeNumber );
|
||||
}
|
||||
|
||||
return (
|
||||
<Box style={{ width: "100%" }}>
|
||||
<Box style={{ height: 400 }}>
|
||||
@ -213,6 +263,100 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: "45px",
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "480px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
}}>
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = { "Ввести промокод" }
|
||||
variant = "filled"
|
||||
size="small"
|
||||
color = "secondary"
|
||||
sx={{
|
||||
width: "200px",
|
||||
height: "30px",
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
inputRef={ fieldPromocode }
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
onClick={ () => checkPromocode() }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "200px",
|
||||
height: "48px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}>
|
||||
Готово
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{
|
||||
selectedPromocode >= 0
|
||||
? (
|
||||
<Box>
|
||||
<Box sx={{ marginTop: "35px", display: "flex" }}>
|
||||
<Typography sx={{ color: theme.palette.grayDisabled.main, minWidth: "150px" }}>
|
||||
Введен промокод:
|
||||
</Typography>
|
||||
<Typography sx={{ width: "100%", textAlign: "center" }}>
|
||||
{ promocodeArray[ selectedPromocode ].name }
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Typography sx={{ color: theme.palette.grayDisabled.main, minWidth: "150px" }}>
|
||||
Привилегии:  
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ width: "100%", textAlign: "center" }}>
|
||||
{
|
||||
promocodeArray[ selectedPromocode ].privileges.map( (item, i) => {
|
||||
let period;
|
||||
|
||||
i < promocodeArray[ selectedPromocode ].privileges.length - 1
|
||||
? period = ", "
|
||||
: period = ""
|
||||
|
||||
return(
|
||||
<>
|
||||
{
|
||||
`${item.good} - ${item.discount}%${period}`
|
||||
}
|
||||
</>
|
||||
)
|
||||
} )
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null
|
||||
}
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
@ -263,15 +407,35 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
|
||||
{ cartRowsData.map( (item) => {
|
||||
if( item.type == "package" ) {
|
||||
// считаем цену
|
||||
price = 0;
|
||||
|
||||
if( item.tariffs ) {
|
||||
item.tariffs.forEach( (tariff) => {
|
||||
price += tariff.price;
|
||||
|
||||
// применяем скидки по промокоду
|
||||
if( selectedPromocode >= 0 && checkboxStates == 1 ) {
|
||||
promocodeArray[ selectedPromocode ].privileges.forEach( (privilege) => {
|
||||
if( tariff.service == privilege.good ) {
|
||||
price = price * privilege.discount;
|
||||
}
|
||||
} )
|
||||
}
|
||||
} );
|
||||
}
|
||||
} else {
|
||||
// считаем цену
|
||||
price = item.price;
|
||||
|
||||
// применяем скидки по промокоду
|
||||
if( selectedPromocode >= 0 && checkboxStates == 1 ) {
|
||||
promocodeArray[ selectedPromocode ].privileges.forEach( (privilege) => {
|
||||
if( item.service == privilege.good ) {
|
||||
price = price * privilege.discount;
|
||||
}
|
||||
} )
|
||||
}
|
||||
}
|
||||
|
||||
prices += price;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user