PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'main'

Browse Source 
ЛК авторизация. Запрещена автоподстановка в регристрацию и настроку кабинета....

See merge request frontend/marketplace!10
This commit is contained in:
Mikhail 2023-06-30 19:54:05 +00:00
commit ecb8d8cf2e
31 changed files with 1047 additions and 784 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/cart.ts Normal file
View File

@ -0,0 +1,20 @@
import { makeRequest } from "@frontend/kitui";
const apiUrl = process.env.NODE_ENV === "production" ? "/customer" : "https://hub.pena.digital/customer";
export function patchCart(tariffId: string) {
return makeRequest<never, string[]>({
url: apiUrl + `/cart?id=${tariffId}`,
method: "PATCH",
useToken: true,
});
}
export function deleteCart(tariffId: string) {
return makeRequest<never, string[]>({
url: apiUrl + `/cart?id=${tariffId}`,
method: "DELETE",
useToken: true,
});
}

18
src/api/tariff.ts
View File

@ -1,15 +1,21 @@
import { makeRequest } from "@frontend/kitui";
import { CustomTariff } from "@root/model/customTariffs";
import { PrivilegeWithoutPrice } from "@root/model/privilege";
import { CreateTariffBody, CustomTariff } from "@root/model/customTariffs";
import { Tariff } from "@root/model/tariff";
export function createTariff<
T = Omit<CustomTariff, "privilegies"> & { privilegies: PrivilegeWithoutPrice[]; }
>(tariff: T) {
return makeRequest<T, CustomTariff>({
export function createTariff(tariff: CreateTariffBody) {
return makeRequest<CreateTariffBody, CustomTariff>({
url: `https://admin.pena.digital/strator/tariff`,
method: "post",
useToken: true,
body: tariff,
});
}
export function getTariffById(tariffId:string){
return makeRequest<never, Tariff>({
url: `https://admin.pena.digital/strator/tariff/${tariffId}`,
method: "get",
useToken: true,
});
}

279
src/components/CustomWrapperDrawer.tsx
View File

@ -2,156 +2,159 @@ import { useState } from "react";
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { cardShadow } from "@root/utils/themes/shadow";
import { ServiceCartData } from "@root/model/cart";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { removeTariffFromCart } from "@root/stores/user";
import { enqueueSnackbar } from "notistack";
import { getMessageFromFetchError } from "@frontend/kitui";
const name: Record<string, string> = { templategen: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" };
interface Props {
type: "templ" | "squiz" | "reducer";
content: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
serviceData: ServiceCartData;
}
export default function CustomWrapperDrawer({ type, content }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
export default function CustomWrapperDrawer({ serviceData }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const { remove } = basketStore();
function handleItemDeleteClick(tariffId: string) {
removeTariffFromCart(tariffId).then(() => {
enqueueSnackbar("Тариф удален");
}).catch(error => {
const message = getMessageFromFetchError(error);
if (message) enqueueSnackbar(message);
});
}
const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
const name: Record<string, string> = { templ: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" };
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: cardShadow,
}}
>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
return (
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: cardShadow,
}}
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[type]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
}}
>
<Typography
sx={{ pr: "11px", color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}
>
{totalSum} руб.
</Typography>
<Box
sx={{
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
></Box>
</Box>
</Box>
{isExpanded &&
Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => (
<Box
key={index}
sx={{
py: upMd ? "10px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "20px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
<Typography
sx={{
width: "200px",
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{desc}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: "20px",
fontWeight: 500,
}}
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
{price} руб.
</Typography>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[serviceData.serviceKey]}
</Typography>
<SvgIcon
sx={{ cursor: "pointer", color: "#7E2AEA" }}
onClick={() => remove(type, id)}
component={ClearIcon}
/>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
}}
>
<Typography
sx={{ pr: "11px", color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}
>
{currencyFormatter.format(serviceData.price / 100)}
</Typography>
<Box
sx={{
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
></Box>
</Box>
</Box>
{isExpanded &&
serviceData.privileges.map(privilege => (
<Box
key={privilege.tariffId + privilege.privilegeId}
sx={{
py: upMd ? "10px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "20px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
width: "200px",
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{privilege.name}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: "20px",
fontWeight: 500,
}}
>
{currencyFormatter.format(privilege.price / 100)}
</Typography>
<SvgIcon
sx={{ cursor: "pointer", color: "#7E2AEA" }}
onClick={() => handleItemDeleteClick(privilege.tariffId)}
component={ClearIcon}
/>
</Box>
</Box>
))}
</Box>
))}
</Box>
</Box>
);
</Box>
);
}

377
src/components/Drawers.tsx
View File

@ -1,228 +1,185 @@
import React, { useEffect } from "react";
import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon, Icon } from "@mui/material";
import { IconsCreate } from "@root/lib/IconsCreate";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { useState } from "react";
import BasketIcon from "../assets/Icons/BasketIcon.svg";
import SectionWrapper from "./SectionWrapper";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import CustomButton from "./CustomButton";
import { useNavigate } from "react-router";
import { useCart } from "@root/utils/hooks/useCart";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { closeCartDrawer, openCartDrawer, useCartStore } from "@root/stores/cart";
interface TabPanelProps {
index: number;
value: number;
children?: React.ReactNode;
mt: string;
}
type BasketItem = {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
function TabPanel({ index, value, children, mt }: TabPanelProps) {
return (
<Box hidden={index !== value} sx={{ mt }}>
{children}
</Box>
);
}
export default function Drawers() {
const [tabIndex, setTabIndex] = useState<number>(0);
const [basketQuantity, setBasketQuantity] = useState<number>();
const navigate = useNavigate();
const { templ, squiz, reducer, open, openDrawer } = basketStore();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const navigate = useNavigate();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isDrawerOpen = useCartStore(state => state.isDrawerOpen);
const cart = useCart();
const newArray: BasketItem = [...Object.values(templ), ...Object.values(squiz), ...Object.values(reducer)];
const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);
useEffect(() => {
setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length + Object.keys(reducer).length);
}, [templ, squiz, reducer]);
return (
<IconButton sx={{ p: 0 }}>
<Typography onClick={open(true)} component="div" sx={{ position: "absolute" }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
</Typography>
{basketQuantity && (
<Icon
component="div"
sx={{
position: "relative",
left: "8px",
bottom: "7px",
width: "16px",
height: "16px",
backgroundColor: "#7E2AEA",
borderRadius: "12px",
}}
>
<Typography
component="div"
sx={{
display: "flex",
fontSize: "12px",
mt: "4.5px",
width: "100%",
height: "9px",
color: "white",
alignItems: "center",
justifyContent: "center",
}}
>
{basketQuantity}
</Typography>
</Icon>
)}
<Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
<SectionWrapper
maxWidth="lg"
sx={{
pl: "0px",
pr: "0px",
width: "450px",
}}
>
<Box
sx={{
width: "100%",
pt: "20px",
pb: "20px",
display: "flex",
justifyContent: "space-between",
bgcolor: "#F2F3F7",
gap: "10px",
pl: "20px",
pr: "20px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography
component="div"
sx={{
fontSize: "18px",
lineHeight: "21px",
font: "Rubick",
}}
>
Корзина
return (
<IconButton sx={{ p: 0 }}>
<Typography onClick={openCartDrawer} component="div" sx={{ position: "absolute" }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
</Typography>
<SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
</Box>
<Box sx={{ pl: "20px", pr: "20px" }}>
<TabPanel value={tabIndex} index={0} mt={"10px"}>
{Object.keys(templ).length > 0 ? (
<CustomWrapperDrawer type="templ" content={Object.values(templ)} />
) : (
<></>
)}
{Object.keys(squiz).length > 0 ? (
<CustomWrapperDrawer type="squiz" content={Object.values(squiz)} />
) : (
<></>
)}
{Object.keys(reducer).length > 0 ? (
<CustomWrapperDrawer type="reducer" content={Object.values(reducer)} />
) : (
<></>
)}
</TabPanel>
<Box
sx={{
mt: "40px",
pt: upMd ? "30px" : undefined,
borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
}}
>
<Box
sx={{
width: upMd ? "100%" : undefined,
display: "flex",
flexWrap: "wrap",
flexDirection: "column",
}}
>
<Typography variant="h4" mb={upMd ? "18px" : "30px"}>
Итоговая цена
</Typography>
<Typography color={theme.palette.grey3.main}>
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
Текст-заполнитель
</Typography>
</Box>
<Box
sx={{
color: theme.palette.grey3.main,
pb: "100px",
pt: "38px",
pl: upMd ? "20px" : undefined,
}}
>
<Box
sx={{
display: "flex",
flexDirection: upMd ? "column" : "row",
alignItems: upMd ? "start" : "center",
mt: upMd ? "10px" : "30px",
gap: "15px",
}}
>
<Typography
color={theme.palette.orange.main}
{cart.itemCount && (
<Icon
component="div"
sx={{
textDecoration: "line-through",
order: upMd ? 1 : 2,
position: "relative",
left: "8px",
bottom: "7px",
width: "16px",
height: "16px",
backgroundColor: "#7E2AEA",
borderRadius: "12px",
}}
>
20 190 руб.
</Typography>
<Typography
variant="p1"
sx={{
fontWeight: 500,
fontSize: "26px",
lineHeight: "31px",
order: upMd ? 2 : 1,
}}
>
{sum} руб.
</Typography>
</Box>
<CustomButton
variant="contained"
onClick={() => navigate("/basket")}
sx={{
mt: "25px",
backgroundColor: theme.palette.brightPurple.main,
}}
>
Оплатить
</CustomButton>
</Box>
</Box>
</Box>
</SectionWrapper>
</Drawer>
</IconButton>
);
<Typography
component="div"
sx={{
display: "flex",
fontSize: "12px",
mt: "4.5px",
width: "100%",
height: "9px",
color: "white",
alignItems: "center",
justifyContent: "center",
}}
>
{cart.itemCount}
</Typography>
</Icon>
)}
<Drawer anchor={"right"} open={isDrawerOpen} onClose={closeCartDrawer}>
<SectionWrapper
maxWidth="lg"
sx={{
pl: "0px",
pr: "0px",
width: "450px",
}}
>
<Box
sx={{
width: "100%",
pt: "20px",
pb: "20px",
display: "flex",
justifyContent: "space-between",
bgcolor: "#F2F3F7",
gap: "10px",
pl: "20px",
pr: "20px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography
component="div"
sx={{
fontSize: "18px",
lineHeight: "21px",
font: "Rubick",
}}
>
Корзина
</Typography>
<IconButton onClick={closeCartDrawer} sx={{ p: 0 }}>
<SvgIcon component={ClearIcon} />
</IconButton>
</Box>
<Box sx={{ pl: "20px", pr: "20px" }}>
{cart.services.map(serviceData =>
<CustomWrapperDrawer
key={serviceData.serviceKey}
serviceData={serviceData}
/>
)}
<Box
sx={{
mt: "40px",
pt: upMd ? "30px" : undefined,
borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
}}
>
<Box
sx={{
width: upMd ? "100%" : undefined,
display: "flex",
flexWrap: "wrap",
flexDirection: "column",
}}
>
<Typography variant="h4" mb={upMd ? "18px" : "30px"}>
Итоговая цена
</Typography>
<Typography color={theme.palette.grey3.main}>
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
Текст-заполнитель
</Typography>
</Box>
<Box
sx={{
color: theme.palette.grey3.main,
pb: "100px",
pt: "38px",
pl: upMd ? "20px" : undefined,
}}
>
<Box
sx={{
display: "flex",
flexDirection: upMd ? "column" : "row",
alignItems: upMd ? "start" : "center",
mt: upMd ? "10px" : "30px",
gap: "15px",
}}
>
<Typography
color={theme.palette.orange.main}
sx={{
textDecoration: "line-through",
order: upMd ? 1 : 2,
}}
>
{currencyFormatter.format(cart.priceBeforeDiscounts / 100)}
</Typography>
<Typography
variant="p1"
sx={{
fontWeight: 500,
fontSize: "26px",
lineHeight: "31px",
order: upMd ? 2 : 1,
}}
>
{currencyFormatter.format(cart.priceAfterDiscounts / 100)}
</Typography>
</Box>
<CustomButton
variant="contained"
onClick={() => navigate("/basket")}
sx={{
mt: "25px",
backgroundColor: theme.palette.brightPurple.main,
}}
>
Оплатить
</CustomButton>
</Box>
</Box>
</Box>
</SectionWrapper>
</Drawer>
</IconButton>
);
}

12
src/components/Navbar/NavbarFull.tsx
View File

@ -1,10 +1,6 @@
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import SectionWrapper from "../SectionWrapper";
import { basketStore } from "@stores/BasketStore";
import LogoutIcon from "../icons/LogoutIcon";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
@ -26,14 +22,6 @@ export default function NavbarFull({ isLoggedIn }: Props) {
const navigate = useNavigate();
const user = useUserStore((state) => state.user);
const { open } = basketStore();
useEffect(() => {
if (location.pathname === "/basket") {
open(false);
}
}, [location.pathname, open]);
async function handleLogoutClick() {
try {
await logout();

27
src/components/TotalPrice.tsx
View File

@ -1,25 +1,16 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { basketStore } from "@root/stores/BasketStore";
import CustomButton from "./CustomButton";
import { currencyFormatter } from "@root/utils/currencyFormatter";
export default function TotalPrice() {
interface Props {
price: number;
priceWithDiscounts: number;
}
export default function TotalPrice({price,priceWithDiscounts}:Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { templ, squiz, reducer } = basketStore();
type BasketItem = {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
const newArray: BasketItem = [...Object.values(templ), ...Object.values(squiz), ...Object.values(reducer)];
const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);
return (
<Box
@ -71,7 +62,7 @@ export default function TotalPrice() {
order: upMd ? 1 : 2,
}}
>
20 190 руб.
{currencyFormatter.format(price / 100)}
</Typography>
<Typography
variant="p1"
@ -82,7 +73,7 @@ export default function TotalPrice() {
order: upMd ? 2 : 1,
}}
>
{sum} руб.
{currencyFormatter.format(priceWithDiscounts / 100)}
</Typography>
</Box>
<CustomButton

120
src/components/passwordInput.tsx Normal file
View File

@ -0,0 +1,120 @@
import {
FormControl,
IconButton,
InputLabel,
SxProps,
TextField,
TextFieldProps,
Theme,
useMediaQuery,
useTheme,
} from "@mui/material";
import * as React from 'react';
import InputAdornment from '@mui/material/InputAdornment';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
interface Props {
id: string;
label?: string;
bold?: boolean;
gap?: string;
color?: string;
FormInputSx?: SxProps<Theme>;
TextfieldProps: TextFieldProps;
onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
}
export default function ({
id,
label,
bold = false,
gap = "10px",
onChange,
TextfieldProps,
color,
FormInputSx,
}: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const labelFont = upMd
? bold
? theme.typography.p1
: { ...theme.typography.body1, fontWeight: 500 }
: theme.typography.body2;
const placeholderFont = upMd ? undefined : { fontWeight: 400, fontSize: "16px", lineHeight: "19px" };
const [showPassword, setShowPassword] = React.useState(false);
const handleClickShowPassword = () => setShowPassword((show) => !show);
const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
};
return (
<FormControl
fullWidth
variant="standard"
sx={{
gap,
// mt: "10px",
...FormInputSx,
position: "relative"
}}
>
<InputLabel
shrink
htmlFor={id}
sx={{
position: "inherit",
color: "black",
transform: "none",
...labelFont,
}}
>
{label}
</InputLabel>
<TextField
{...TextfieldProps}
fullWidth
id={id}
sx={{
"& .MuiInputBase-root": {
height: "48px",
borderRadius: "8px",
},
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
sx: {
backgroundColor: color,
borderRadius: "8px",
height: "48px",
py: 0,
color: "black",
...placeholderFont,
},
}}
onChange={onChange}
type={showPassword ? 'text' : 'password'}
/>
</FormControl>
);
}

19
src/model/cart.ts Normal file
View File

@ -0,0 +1,19 @@
export type PrivilegeCartData = {
tariffId: string;
privilegeId: string;
name: string;
price: number;
};
export type ServiceCartData = {
serviceKey: string;
privileges: PrivilegeCartData[];
price: number;
};
export type CartData = {
services: ServiceCartData[];
priceBeforeDiscounts: number;
priceAfterDiscounts: number;
itemCount: number;
};

6
src/model/customTariffs.ts
View File

@ -1,4 +1,4 @@
import { PrivilegeWithAmount } from "./privilege";
import { PrivilegeWithAmount, PrivilegeWithoutPrice } from "./privilege";
export type CustomTariffUserValues = Record<string, number>;
@ -15,4 +15,6 @@ export interface CustomTariff {
updatedAt?: string;
isDeleted?: boolean;
createdAt?: string;
}
}
export type CreateTariffBody = Omit<CustomTariff, "privilegies"> & { privilegies: PrivilegeWithoutPrice[]; };

1
src/model/tariff.ts
View File

@ -9,6 +9,7 @@ export interface GetTariffsResponse {
export interface Tariff {
_id: string;
name: string;
/** Кастомная цена, undefined если isCustom === true */
price?: number;
isCustom: boolean;
privilegies: PrivilegeWithAmount[];

8
src/pages/AccountSettings/AccountSettings.tsx
View File

@ -1,6 +1,7 @@
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "@components/CustomButton";
import InputTextfield from "@components/InputTextfield";
import PasswordInput from "@components/passwordInput";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@root/components/ComplexNavText";
import { openDocumentsDialog, sendUserData, setSettingsField, useUserStore } from "@root/stores/user";
@ -29,7 +30,7 @@ export default function AccountSettings() {
};
function handleSendDataClick() {
sendUserData().then(result => {
sendUserData().then(() => {
enqueueSnackbar("Информация обновлена");
}).catch(error => {
const message = getMessageFromFetchError(error);
@ -46,7 +47,6 @@ export default function AccountSettings() {
}}
>
<DocumentsDialog />
<ComplexNavText text1="Настройки аккаунта" />
<Typography variant="h4" mt="20px">Настройки аккаунта</Typography>
<Box sx={{
mt: "40px",
@ -145,13 +145,13 @@ export default function AccountSettings() {
label="Телефон"
{...textFieldProps}
/>
<InputTextfield
<PasswordInput
TextfieldProps={{
placeholder: "Не менее 8 символов",
value: fields.password.value || "",
helperText: fields.password.touched && fields.password.error,
error: fields.password.touched && Boolean(fields.password.error),
type: "password",
autoComplete: "new-password"
}}
onChange={e => setSettingsField("password", e.target.value)}
id="password"

104
src/pages/Basket/Basket.tsx
View File

@ -1,72 +1,54 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";
import TotalPrice from "@components/TotalPrice";
import { basketStore } from "@root/stores/BasketStore";
import CustomWrapper from "./CustomWrapper";
import ComplexNavText from "@root/components/ComplexNavText";
import { useCart } from "@root/utils/hooks/useCart";
interface TabPanelProps {
index: number;
value: number;
children?: React.ReactNode;
mt: string;
}
function TabPanel({ index, value, children, mt }: TabPanelProps) {
return (
<Box hidden={index !== value} sx={{ mt }}>
{children}
</Box>
);
}
export default function Basket() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const cart = useCart();
const [tabIndex, setTabIndex] = useState<number>(0);
const { templ, squiz, reducer, open } = basketStore();
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
open(false);
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: upMd ? "25px" : "20px",
mb: upMd ? "70px" : "37px",
}}
>
{upMd && <ComplexNavText text1="Все тарифы — " text2="Корзина" />}
<Box
sx={{
mt: "20px",
mb: upMd ? "40px" : "20px",
display: "flex",
gap: "10px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography component="h4" variant="h4">
Корзина
</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
{Object.keys(templ).length > 0 ? <CustomWrapper type="templ" content={templ} /> : <></>}
{Object.keys(squiz).length > 0 ? <CustomWrapper type="squiz" content={squiz} /> : <></>}
{Object.keys(reducer).length > 0 ? <CustomWrapper type="reducer" content={reducer} /> : <></>}
</TabPanel>
<TotalPrice />
</SectionWrapper>
);
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: upMd ? "25px" : "20px",
mb: upMd ? "70px" : "37px",
}}
>
{upMd && <ComplexNavText text1="Все тарифы — " text2="Корзина" />}
<Box
sx={{
mt: "20px",
mb: upMd ? "40px" : "20px",
display: "flex",
gap: "10px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography component="h4" variant="h4">
Корзина
</Typography>
</Box>
<Box sx={{
mt: upMd ? "27px" : "10px",
}}>
{cart.services.map(serviceData =>
<CustomWrapper
key={serviceData.serviceKey}
serviceData={serviceData}
/>
)}
</Box>
<TotalPrice price={cart.priceBeforeDiscounts} priceWithDiscounts={cart.priceAfterDiscounts} />
</SectionWrapper>
);
}

311
src/pages/Basket/CustomWrapper.tsx
View File

@ -1,177 +1,176 @@
import { useState } from "react";
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import ExpandIcon from "@components/icons/ExpandIcon";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { cardShadow } from "@root/utils/themes/shadow";
import { ServiceCartData } from "@root/model/cart";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { removeTariffFromCart } from "@root/stores/user";
import { enqueueSnackbar } from "notistack";
import { getMessageFromFetchError } from "@frontend/kitui";
interface Templ {
name: string;
desc: string;
id: string;
privelegeid?: string;
amount: number;
price: number;
}
const name: Record<string, string> = { templategen: "Шаблонизатор", squiz: "Опросник", reducer: "Сокращатель ссылок" };
interface Props {
type: "templ" | "squiz" | "reducer";
content: Record<string, Templ>;
serviceData: ServiceCartData;
}
export default function CustomWrapper({ type, content }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
export default function CustomWrapper({ serviceData }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const { remove } = basketStore();
function handleItemDeleteClick(tariffId: string) {
removeTariffFromCart(tariffId).then(() => {
enqueueSnackbar("Тариф удален");
}).catch(error => {
const message = getMessageFromFetchError(error);
if (message) enqueueSnackbar(message);
});
}
const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
const name: Record<string, string> = { templ: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" };
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: cardShadow,
}}
>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
return (
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: cardShadow,
}}
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[type]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
}}
>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{totalSum} руб.
</Typography>
<Box
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
</Box>
{isExpanded &&
Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => (
<Box
key={index}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
{desc}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
width: upSm ? "195px" : "123px",
marginRight: upSm ? "65px" : 0,
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
}}
>
{price} руб.
</Typography>
{upSm ? (
<Typography
component="div"
onClick={() => remove(type, id)}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
cursor: "pointer",
height: "72px",
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
Удалить
</Typography>
) : (
<SvgIcon onClick={() => remove(type, id)} component={ClearIcon}></SvgIcon>
)}
</Box>
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[serviceData.serviceKey]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
}}
>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{currencyFormatter.format(serviceData.price / 100)}
</Typography>
<Box
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
</Box>
{isExpanded &&
serviceData.privileges.map(privilege => (
<Box
key={privilege.tariffId + privilege.privilegeId}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{privilege.name}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
width: upSm ? "195px" : "123px",
marginRight: upSm ? "65px" : 0,
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
}}
>
{currencyFormatter.format(privilege.price / 100)}
</Typography>
{upSm ? (
<Typography
component="div"
onClick={() => handleItemDeleteClick(privilege.tariffId)}
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
cursor: "pointer",
}}
>
Удалить
</Typography>
) : (
<SvgIcon onClick={() => handleItemDeleteClick(privilege.tariffId)} component={ClearIcon}></SvgIcon>
)}
</Box>
</Box>
))}
</Box>
))}
</Box>
</Box>
);
</Box>
);
}

99
src/pages/Tariffs/FreeTariffCard.tsx
View File

@ -1,78 +1,31 @@
import { Box, SxProps, Theme } from "@mui/material";
import Typography from "@mui/material/Typography";
import { useNavigate } from "react-router-dom";
import TariffCard from "./TariffCard";
import NumberIcon from "@root/components/NumberIcon";
import CustomButton from "@components/CustomButton";
import { IconsCreate } from "../../lib/IconsCreate";
export default function FreeTariffCard() {
import ZeroIcons from "../../assets/Icons/ZeroIcons.svg";
interface Props {
headerText: string;
text: string;
money?: string;
sx: SxProps<Theme>;
href: string;
}
export default function FreeTariffCard({ headerText, text, sx, href, money = "0" }: Props) {
const navigate = useNavigate();
const icon = <IconsCreate svg={ZeroIcons} bgcolor="#FFFFFF" />;
return (
<Box
component="div"
sx={{
maxWidth: "360px",
width: "360px",
bgcolor: "white",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
alignItems: "start",
p: "20px",
...sx,
}}
>
<Box
component="div"
sx={{
display: "flex",
justifyContent: "space-around",
alignItems: "center",
width: "100%",
}}
>
<Typography component="div">{icon}</Typography>
<Typography
variant="h5"
sx={{
display: "flex",
justifyContent: "right",
width: "100%",
color: "white",
}}
>
{money} руб.
</Typography>
</Box>
<Typography variant="h5" sx={{ mt: "14px", mb: "10px" }}>
{headerText}
</Typography>
<Typography sx={{ minHeight: "calc(1.185*2em)" }}>{text}</Typography>
<CustomButton
onClick={() => navigate(href)}
variant="outlined"
sx={{
color: "white",
borderColor: "white",
mt: "33px",
}}
>
Подробнее
</CustomButton>
</Box>
);
return (
<TariffCard
icon={<NumberIcon
number={0}
color="#7E2AEA"
backgroundColor="white"
/>}
buttonText="Выбрать"
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
onButtonClick={undefined}
price={<Typography variant="price" color="white">0 руб.</Typography>}
sx={{
backgroundColor: "#7E2AEA",
color: "white",
maxWidth: "360px",
}}
buttonSx={{
color: "white",
borderColor: "white",
}}
/>
);
}

1
src/pages/Tariffs/TariffCard.tsx
View File

@ -21,7 +21,6 @@ export default function TariffCard({ icon, headerText, text, sx, buttonText, onB
return (
<Box sx={{
maxWidth: "360px",
width: "100%",
bgcolor: "white",
borderRadius: "12px",

3
src/pages/Tariffs/Tariffs.tsx
View File

@ -46,6 +46,7 @@ export default function Tariffs() {
text="безлимит на 1 месяц , 3 , 6 , 12"
buttonText="Подробнее"
onButtonClick={() => navigate("time")}
sx={{ maxWidth: "360px" }}
/>
<TariffCard
icon={<PieChartIcon color="white" bgcolor={theme.palette.brightPurple.main} />}
@ -53,6 +54,7 @@ export default function Tariffs() {
text="200 шаблонов, 1000 шаблонов, 5000 шаблонов, 10 000 шаблонов"
buttonText="Подробнее"
onButtonClick={() => navigate("volume")}
sx={{ maxWidth: "360px" }}
/>
<TariffCard
icon={<CustomIcon color="white" bgcolor={theme.palette.brightPurple.main} />}
@ -60,6 +62,7 @@ export default function Tariffs() {
text="Текст-заполнитель — это текст, который имеет "
buttonText="Подробнее"
onButtonClick={() => navigate("/tariffconstructor")}
sx={{ maxWidth: "360px" }}
/>
</Box>
<Typography component="div">

99
src/pages/Tariffs/TariffsPage.tsx
View File

@ -1,10 +1,10 @@
import { useCallback, useState } from "react";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import { Box, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@root/components/ComplexNavText";
import { useTariffs } from "@root/utils/hooks/useTariffs";
import { setTariffs, useTariffStore } from "@root/stores/tariffs";
import { updateTariffs, useTariffStore } from "@root/stores/tariffs";
import { enqueueSnackbar } from "notistack";
import { CustomTab } from "@root/components/CustomTab";
import TariffCard from "./TariffCard";
@ -12,6 +12,8 @@ import NumberIcon from "@root/components/NumberIcon";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { calcTariffPrices } from "@root/utils/calcTariffPrices";
import { getMessageFromFetchError } from "@frontend/kitui";
import FreeTariffCard from "./FreeTariffCard";
import { addTariffToCart } from "@root/stores/user";
export default function TariffPage() {
@ -26,20 +28,58 @@ export default function TariffPage() {
const StepperText: Record<string, string> = { volume: "Тарифы на объём", time: "Тарифы на время" };
useTariffs({
url: "https://admin.pena.digital/strator/tariff",
apiPage: 0,
tariffsPerPage: 100,
onNewTariffs: setTariffs,
onError: useCallback(error => {
onNewTariffs: updateTariffs,
onError: error => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) enqueueSnackbar(errorMessage);
}, [])
}
});
function handleTariffItemClick(tariffId: string) {
addTariffToCart(tariffId).then(() => {
enqueueSnackbar("Тариф добавлен в корзину");
}).catch(error => {
const message = getMessageFromFetchError(error);
if (message) enqueueSnackbar(message);
});
}
const filteredTariffs = tariffs.filter(tariff => {
return tariff.privilegies.map(p => p.type).includes("day") === (unit === "time");
});
const tariffElements = filteredTariffs.map((tariff, index) => {
const { price, priceWithDiscounts } = calcTariffPrices(tariff);
return (
<TariffCard
key={tariff._id}
icon={<NumberIcon
number={(index + 1) % 10}
color={unit === "time" ? "#7E2AEA" : "#FB5607"}
backgroundColor={unit === "time" ? "#EEE4FC" : "#FEDFD0"}
/>}
buttonText="Выбрать"
headerText={tariff.name}
text={tariff.privilegies.map(p => `${p.name} - ${p.amount}`)}
onButtonClick={() => handleTariffItemClick(tariff._id)}
price={<>
{price !== undefined && price !== priceWithDiscounts &&
<Typography variant="oldPrice">{currencyFormatter.format(price / 100)}</Typography>
}
{priceWithDiscounts !== undefined &&
<Typography variant="price">{currencyFormatter.format(priceWithDiscounts / 100)}</Typography>
}
</>}
/>
);
});
if (tariffElements.length < 6) tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
else tariffElements.splice(5, 0, <FreeTariffCard key="free_tariff_card" />);
return (
<SectionWrapper
maxWidth="lg"
@ -72,52 +112,7 @@ export default function TariffPage() {
gap: "40px",
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
}}>
{filteredTariffs.map((tariff, index) => {
const { price, priceWithDiscounts } = calcTariffPrices(tariff);
return (
<TariffCard
key={tariff._id}
icon={<NumberIcon
number={(index + 1) % 10}
color={unit === "time" ? "#7E2AEA" : "#FB5607"}
backgroundColor={unit === "time" ? "#EEE4FC" : "#FEDFD0"}
/>}
buttonText="Выбрать"
headerText={tariff.name}
text={tariff.privilegies.map(p => `${p.name} - ${p.amount}`)}
onButtonClick={undefined}
price={<>
{price !== undefined && price !== priceWithDiscounts &&
<Typography variant="oldPrice">{currencyFormatter.format(price / 100)}</Typography>
}
{priceWithDiscounts !== undefined &&
<Typography variant="price">{currencyFormatter.format(priceWithDiscounts / 100)}</Typography>
}
</>}
/>
);
})}
<TariffCard
icon={<NumberIcon
number={0}
color="#7E2AEA"
backgroundColor="white"
/>}
buttonText="Выбрать"
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
onButtonClick={undefined}
price={<Typography variant="price" color="white">0 руб.</Typography>}
sx={{
backgroundColor: "#7E2AEA",
color: "white",
}}
buttonSx={{
color: "white",
borderColor: "white",
}}
/>
{tariffElements}
</Box>
</SectionWrapper>
);

3
src/pages/auth/Signin.tsx
View File

@ -14,6 +14,7 @@ import { setUserId, useUserStore } from "@root/stores/user";
import { getMessageFromFetchError } from "@frontend/kitui";
import { makeRequest } from "@frontend/kitui";
import { cardShadow } from "@root/utils/themes/shadow";
import PasswordInput from "@root/components/passwordInput";
interface Values {
login: string;
@ -147,7 +148,7 @@ export default function SigninDialog() {
label="Логин"
gap={upMd ? "10px" : "10px"}
/>
<InputTextfield
<PasswordInput
TextfieldProps={{
value: formik.values.password,
placeholder: "Не менее 8 символов",

11
src/pages/auth/Signup.tsx
View File

@ -14,6 +14,7 @@ import { setUserId, useUserStore } from "@root/stores/user";
import { getMessageFromFetchError } from "@frontend/kitui";
import { makeRequest } from "@frontend/kitui";
import { cardShadow } from "@root/utils/themes/shadow";
import PasswordInput from "@root/components/passwordInput";
interface Values {
@ -50,7 +51,7 @@ export default function SignupDialog() {
body: {
login: values.login.trim(),
password: values.password.trim(),
phoneNumber: "-",
phoneNumber: "+7",
},
useToken: false,
withCredentials: true,
@ -146,14 +147,14 @@ export default function SignupDialog() {
label="Логин"
gap={upMd ? "10px" : "10px"}
/>
<InputTextfield
<PasswordInput
TextfieldProps={{
value: formik.values.password,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.password && Boolean(formik.errors.password),
helperText: formik.touched.password && formik.errors.password,
type: "password",
autoComplete: "new-password"
}}
onChange={formik.handleChange}
color="#F2F3F7"
@ -161,14 +162,14 @@ export default function SignupDialog() {
label="Пароль"
gap={upMd ? "10px" : "10px"}
/>
<InputTextfield
<PasswordInput
TextfieldProps={{
value: formik.values.repeatPassword,
placeholder: "Не менее 8 символов",
onBlur: formik.handleBlur,
error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
type: "password",
autoComplete: "new-password"
}}
onChange={formik.handleChange}
color="#F2F3F7"

80
src/stores/cart.ts Normal file
View File

@ -0,0 +1,80 @@
import { CartData } from "@root/model/cart";
import { Tariff } from "@root/model/tariff";
import { calcCart } from "@root/utils/calcCart";
import { produce } from "immer";
import { create } from "zustand";
import { devtools } from "zustand/middleware";
interface CartStore {
cartTariffMap: Record<string, Tariff | "loading" | "not found">;
cart: CartData;
isDrawerOpen: boolean;
}
export const useCartStore = create<CartStore>()(
devtools(
(get, set) => ({
cartTariffMap: {},
cart: {
services: [],
priceBeforeDiscounts: 0,
priceAfterDiscounts: 0,
itemCount: 0,
},
isDrawerOpen: false,
}),
{
name: "Cart",
enabled: process.env.NODE_ENV === "development",
trace: true,
actionsBlacklist: "rejected",
}
)
);
export const setCartTariffStatus = (tariffId: string, status: "loading" | "not found") => useCartStore.setState(
produce<CartStore>(state => {
state.cartTariffMap[tariffId] = status;
}),
false,
{
type: "setCartTariffStatus",
tariffId,
status,
}
);
export const addCartTariffs = (tariffs: Tariff[]) => useCartStore.setState(
produce<CartStore>(state => {
tariffs.forEach(tariff => {
state.cartTariffMap[tariff._id] = tariff;
});
const cartTariffs = Object.values(state.cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
state.cart = calcCart(cartTariffs);
}),
false,
{
type: tariffs.length > 0 ? "addCartTariffs" : "rejected",
tariffIds: tariffs.map(tariff => tariff._id),
}
);
export const removeMissingTariffs = (tariffIds: string[]) => useCartStore.setState(
produce<CartStore>(state => {
for (const key in state.cartTariffMap) {
if (!tariffIds.includes(key)) delete state.cartTariffMap[key];
}
const cartTariffs = Object.values(state.cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
state.cart = calcCart(cartTariffs);
}),
false,
{
type: "removeMissingTariffs",
tariffIds,
}
);
export const openCartDrawer = () => useCartStore.setState({ isDrawerOpen: true });
export const closeCartDrawer = () => useCartStore.setState({ isDrawerOpen: false });

4
src/stores/customTariffs.ts
View File

@ -21,7 +21,7 @@ export const useCustomTariffsStore = create<CustomTariffsStore>()(
summaryPrice: {},
}),
{
name: "Custom tariffs store",
name: "Custom tariffs",
enabled: process.env.NODE_ENV === "development",
}),
{
@ -42,7 +42,7 @@ export const setCustomTariffsUserValue = (
value: number,
) => useCustomTariffsStore.setState(
produce<CustomTariffsStore>(state => {
if (!state.userValues[serviceKey]) state.userValues[serviceKey] = {};
state.userValues[serviceKey] ??= {};
state.userValues[serviceKey][privilegeId] = value;
const sum = state.customTariffs[serviceKey].reduce((acc, tariff) => {

2
src/stores/discounts.ts
View File

@ -14,7 +14,7 @@ export const useMessageStore = create<MessageStore>()(
discounts: mockDiscounts
}),
{
name: "Message store (marketplace)",
name: "Discounts",
enabled: process.env.NODE_ENV === "development",
}
)

6
src/stores/messages.ts
View File

@ -21,16 +21,16 @@ export const useMessageStore = create<MessageStore>()(
isPreventAutoscroll: false,
}),
{
name: "Message store (marketplace)"
name: "Messages"
}
)
);
export const addOrUpdateMessages = (receivedMessages: TicketMessage[]) => {
const state = useMessageStore.getState();
const messages = useMessageStore.getState().messages;
const messageIdToMessageMap: { [messageId: string]: TicketMessage; } = {};
[...state.messages, ...receivedMessages].forEach(message => messageIdToMessageMap[message.id] = message);
[...messages, ...receivedMessages].forEach(message => messageIdToMessageMap[message.id] = message);
const sortedMessages = Object.values(messageIdToMessageMap).sort(sortMessagesByTime);

28
src/stores/tariffs.ts
View File

@ -13,10 +13,34 @@ export const useTariffStore = create<TariffStore>()(
tariffs: [],
}),
{
name: "Tariff store",
name: "Tariffs",
enabled: process.env.NODE_ENV === "development",
trace: true,
}
)
);
export const setTariffs = (tariffs: Tariff[]) => useTariffStore.setState({tariffs})
export const updateTariffs = (tariffs: TariffStore["tariffs"]) => useTariffStore.setState(
state => {
const tariffMap: Record<string, Tariff> = {};
[...state.tariffs, ...tariffs].forEach(tariff => tariffMap[tariff._id] = tariff);
const sortedTariffs = Object.values(tariffMap).sort(sortTariffsByCreatedAt);
return { tariffs: sortedTariffs };
},
false,
{
type: "updateTariffs",
tariffsLength: tariffs.length,
}
);
function sortTariffsByCreatedAt(tariff1: Tariff, tariff2: Tariff) {
if (!tariff1.createdAt || !tariff2.createdAt) throw new Error("Trying to sort tariffs without createdAt field");
const date1 = new Date(tariff1.createdAt).getTime();
const date2 = new Date(tariff2.createdAt).getTime();
return date1 - date2;
}

2
src/stores/tickets.ts
View File

@ -20,7 +20,7 @@ export const useTicketStore = create<TicketStore>()(
ticketsPerPage: 10,
}),
{
name: "Tickets store (marketplace)"
name: "Tickets"
}
)
);

2
src/stores/unauthTicket.ts
View File

@ -29,7 +29,7 @@ export const useUnauthTicketStore = create<UnauthTicketStore>()(
isPreventAutoscroll: false,
}),
{
name: "Unauth ticket store"
name: "Unauth tickets"
}
),
{

44
src/stores/user.ts
View File

@ -6,6 +6,7 @@ import { StringSchema, string } from "yup";
import { patchUser } from "@root/api/user";
import { UserAccount, UserAccountSettingsFieldStatus, UserName, VerificationStatus } from "@root/model/account";
import { patchUserAccount } from "@root/api/account";
import { deleteCart, patchCart } from "@root/api/cart";
interface UserStore {
@ -60,7 +61,7 @@ const initialState: UserStore = {
"ИНН": { ...defaultDocument },
"Устав": { ...defaultDocument },
"Свидетельство о регистрации НКО": { ...defaultDocument },
}
},
};
export const useUserStore = create<UserStore>()(
@ -68,8 +69,9 @@ export const useUserStore = create<UserStore>()(
devtools(
(set, get) => initialState,
{
name: "User store",
name: "User",
enabled: process.env.NODE_ENV === "development",
trace: true,
}
),
{
@ -108,6 +110,17 @@ export const setUserAccount = (user: UserAccount) => useUserStore.setState(
state.settingsFields.secondname.value = user?.name.secondname ?? "";
state.settingsFields.middlename.value = user?.name.middlename ?? "";
state.settingsFields.orgname.value = user?.name.orgname ?? "";
}),
false,
{
type: "setUserAccount",
payload: user,
}
);
export const setCart = (cart: string[]) => useUserStore.setState(
produce<UserStore>(state => {
if (state.userAccount) state.userAccount.cart = cart;
})
);
@ -203,7 +216,7 @@ export const setSettingsField = (
state.settingsFields[fieldName].error = errorMessage;
state.settingsFields.hasError = Object.values(state.settingsFields).reduce((acc: boolean, field) => {
if (typeof field == "boolean") return acc;
if (typeof field === "boolean") return acc;
if (field.error !== null) return true;
return acc;
@ -239,13 +252,20 @@ export const sendUserData = async () => {
orgname: state.settingsFields.orgname.value,
};
const [user, userAccount] = await Promise.all([
await Promise.all([
isPatchingUser && patchUser(userPayload),
isPatchingUserAccount && patchUserAccount(userAccountPayload),
]);
};
// if (user) setUser(user);
// if (userAccount) setUserAccount(userAccount);
export const addTariffToCart = async (tariffId: string) => {
const result = await patchCart(tariffId);
setCart(result);
};
export const removeTariffFromCart = async (tariffId: string) => {
const result = await deleteCart(tariffId);
setCart(result);
};
const validators: Record<UserSettingsField | keyof UserName, StringSchema> = {
@ -256,18 +276,18 @@ const validators: Record<UserSettingsField | keyof UserName, StringSchema> = {
skipAbsent: true,
test(value, ctx) {
if (value !== undefined) {
if (value.length == 0) return true
if (value.length === 0) return true;
if (!/^[.,:;-_+\d\w]+$/.test(value)) {
return ctx.createError({ message: 'Некорректные символы в пароле' })
return ctx.createError({ message: 'Некорректные символы в пароле' });
}
if (value.length > 0 && value.length < 8) {
return ctx.createError({ message: 'Минимум 8 символов' })
return ctx.createError({ message: 'Минимум 8 символов' });
}
}
return true
return true;
}
}),
// min(8, "Минимум 8 символов").matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы в пароле"),
}),
// min(8, "Минимум 8 символов").matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы в пароле"),
firstname: string(),
secondname: string(),
middlename: string(),

55
src/utils/calcCart.ts Normal file
View File

@ -0,0 +1,55 @@
import { mockDiscounts } from "@root/__mocks__/discounts";
import { CartData, PrivilegeCartData } from "@root/model/cart";
import { AnyDiscount } from "@root/model/discount";
import { Tariff } from "@root/model/tariff";
import { findPrivilegeDiscount, findServiceDiscount } from "./calcTariffPrices";
export function calcCart(tariffs: Tariff[], discounts: AnyDiscount[] = mockDiscounts): CartData {
const cartData: CartData = {
services: [],
priceBeforeDiscounts: 0,
priceAfterDiscounts: 0,
itemCount: 0,
};
tariffs.forEach(tariff => {
if (tariff.price && tariff.price > 0) cartData.priceBeforeDiscounts += tariff.price;
tariff.privilegies.forEach(privilege => {
let serviceData = cartData.services.find(service => service.serviceKey === privilege.serviceKey);
if (!serviceData) {
serviceData = {
serviceKey: privilege.serviceKey,
privileges: [],
price: 0,
};
cartData.services.push(serviceData);
}
let privilegePrice = privilege.amount * privilege.price;
if (!tariff.price) cartData.priceBeforeDiscounts += privilegePrice;
const privilegeDiscount = findPrivilegeDiscount(privilege, discounts);
if (privilegeDiscount) privilegePrice *= privilegeDiscount.target.products[0].factor;
const serviceDiscount = findServiceDiscount(privilege.serviceKey, privilegePrice, discounts);
if (serviceDiscount) privilegePrice *= serviceDiscount.target.factor;
const privilegeData: PrivilegeCartData = {
tariffId: tariff._id,
privilegeId: privilege.privilegeId,
name: privilege.description,
price: privilegePrice,
};
serviceData.privileges.push(privilegeData);
serviceData.price += privilegePrice;
cartData.priceAfterDiscounts += privilegePrice;
cartData.itemCount++;
});
});
return cartData;
}

19
src/utils/calcTariffPrices.ts
View File

@ -1,22 +1,22 @@
import { Tariff } from "@root/model/tariff";
import { mockDiscounts } from "../__mocks__/discounts";
import { PrivilegeWithAmount } from "@root/model/privilege";
import { PrivilegeDiscount, ServiceDiscount } from "../model/discount";
import { AnyDiscount, PrivilegeDiscount, ServiceDiscount } from "../model/discount";
export function calcTariffPrices(tariff: Tariff): {
export function calcTariffPrices(tariff: Tariff, discounts: AnyDiscount[] = mockDiscounts): {
price: number | undefined;
priceWithDiscounts: number | undefined;
} {
let price = tariff.price ?? tariff.privilegies.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
let price = tariff.price || tariff.privilegies.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
const priceWithDiscounts = tariff.privilegies.reduce((sum, privilege) => {
let privilegePrice = privilege.amount * privilege.price;
const privilegeDiscount = findPrivilegeDiscount(privilege);
const privilegeDiscount = findPrivilegeDiscount(privilege, discounts);
if (privilegeDiscount) privilegePrice *= privilegeDiscount.target.products[0].factor;
const serviceDiscount = findServiceDiscount(privilege.serviceKey, privilegePrice);
const serviceDiscount = findServiceDiscount(privilege.serviceKey, privilegePrice, discounts);
if (serviceDiscount) privilegePrice *= serviceDiscount.target.factor;
return sum + privilegePrice;
@ -28,8 +28,8 @@ export function calcTariffPrices(tariff: Tariff): {
};
}
function findPrivilegeDiscount(privilege: PrivilegeWithAmount): PrivilegeDiscount | null {
const applicableDiscounts = mockDiscounts.filter((discount): discount is PrivilegeDiscount => {
export function findPrivilegeDiscount(privilege: PrivilegeWithAmount, discounts: AnyDiscount[]): PrivilegeDiscount | null {
const applicableDiscounts = discounts.filter((discount): discount is PrivilegeDiscount => {
return (
discount.conditionType === "privilege" &&
privilege.privilegeId === discount.condition.privilege.id &&
@ -46,11 +46,12 @@ function findPrivilegeDiscount(privilege: PrivilegeWithAmount): PrivilegeDiscoun
return maxValueDiscount;
}
function findServiceDiscount(
export function findServiceDiscount(
serviceKey: string,
currentPrice: number,
discounts: AnyDiscount[],
): ServiceDiscount | null {
const discountsForTariffService = mockDiscounts.filter((discount): discount is ServiceDiscount => {
const discountsForTariffService = discounts.filter((discount): discount is ServiceDiscount => {
return (
discount.conditionType === "service" &&
discount.condition.service.id === serviceKey &&

46
src/utils/hooks/useCart.ts Normal file
View File

@ -0,0 +1,46 @@
import { devlog } from "@frontend/kitui";
import { getTariffById } from "@root/api/tariff";
import { useTariffStore } from "@root/stores/tariffs";
import { useUserStore } from "@root/stores/user";
import { useEffect } from "react";
import { addCartTariffs, removeMissingTariffs, setCartTariffStatus, useCartStore } from "@root/stores/cart";
import { Tariff } from "@root/model/tariff";
export function useCart() {
const tariffs = useTariffStore(state => state.tariffs);
const cartTariffMap = useCartStore(state => state.cartTariffMap);
const cartTariffIds = useUserStore(state => state.userAccount?.cart);
const cart = useCartStore(state => state.cart);
useEffect(function addTariffsToCart() {
const knownTariffs: Tariff[] = [];
cartTariffIds?.forEach(tariffId => {
if (typeof cartTariffMap[tariffId] === "object") return;
const tariff = tariffs.find(tariff => tariff._id === tariffId);
if (tariff) return knownTariffs.push(tariff);
if (!cartTariffMap[tariffId]) {
setCartTariffStatus(tariffId, "loading");
getTariffById(tariffId).then(tariff => {
devlog("Unlisted tariff", tariff);
addCartTariffs([tariff]);
}).catch(error => {
devlog(`Error fetching unlisted tariff ${tariffId}`, error);
setCartTariffStatus(tariffId, "not found");
});
}
});
if (knownTariffs.length > 0) addCartTariffs(knownTariffs);
}, [cartTariffIds, cartTariffMap, tariffs]);
useEffect(function cleanUpCart() {
if (cartTariffIds) removeMissingTariffs(cartTariffIds);
}, [cartTariffIds]);
return cart;
}

25
src/utils/hooks/useTariffs.ts
View File

@ -1,39 +1,36 @@
import { devlog, makeRequest } from "@frontend/kitui";
import { GetTariffsResponse, Tariff } from "@root/model/tariff";
import { useEffect, useState } from "react";
import { useEffect, useRef } from "react";
export function useTariffs({ url, tariffsPerPage, apiPage, onNewTariffs, onError }: {
url: string;
export function useTariffs({ baseUrl = "https://admin.pena.digital/strator/tariff", tariffsPerPage, apiPage, onNewTariffs, onError }: {
baseUrl?: string;
tariffsPerPage: number;
apiPage: number;
onNewTariffs: (response: Tariff[]) => void;
onError: (error: Error) => void;
}) {
const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle");
const onNewTariffsRef = useRef<(response: Tariff[]) => void>(onNewTariffs);
const onErrorRef = useRef<(error: Error) => void>(onError);
useEffect(() => {
const controller = new AbortController();
setFetchState("fetching");
makeRequest<never, GetTariffsResponse>({
url,
url: baseUrl + `?page=${apiPage}&limit=${tariffsPerPage}`,
method: "get",
useToken: true,
signal: controller.signal,
}).then((result) => {
devlog("GetTicketsResponse", result);
devlog("Tariffs", result);
if (result.tariffs.length > 0) {
onNewTariffs(result.tariffs);
setFetchState("idle");
} else setFetchState("all fetched");
onNewTariffsRef.current(result.tariffs);
}
}).catch(error => {
devlog("Error fetching tariffs", error);
onError(error);
onErrorRef.current(error);
});
return () => controller.abort();
}, [onError, onNewTariffs, apiPage, tariffsPerPage, url]);
return fetchState;
}, [apiPage, tariffsPerPage, baseUrl]);
}