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

change cart and tariffs calculation logic

Browse Source 
use swr for cart tariffs datafetching
remove console clutter
remove cart store
some fixes
This commit is contained in:
nflnkr 2024-03-18 17:02:28 +03:00
parent c730993fef
commit 0990dc081f
27 changed files with 13197 additions and 36825 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24027
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -15,7 +15,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@frontend/kitui": "1.0.62", "@frontend/kitui": "^1.0.66",
"@mui/icons-material": "^5.10.14", "@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14", "@mui/material": "^5.10.14",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
@ -36,6 +36,7 @@
"react-router-dom": "^6.15.0", "react-router-dom": "^6.15.0",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"swr": "^2.2.5",
"use-debounce": "^10.0.0", "use-debounce": "^10.0.0",
"web-vitals": "^2.1.0", "web-vitals": "^2.1.0",
"yup": "^1.1.1", "yup": "^1.1.1",

1
src/api/history.ts
View File

@ -50,7 +50,6 @@ export async function getHistory(): Promise<[GetHistoryResponse | null, string?]
historyResponse.records = checked || [] historyResponse.records = checked || []
console.log("historyResponse ", historyResponse)
return [historyResponse] return [historyResponse]
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError) const [error] = parseAxiosError(nativeError)

153
src/api/tariff.ts
View File

@ -1,86 +1,117 @@
import { Tariff, makeRequest } from "@frontend/kitui" import { Tariff, makeRequest } from "@frontend/kitui";
import { CreateTariffBody } from "@root/model/customTariffs" import { CreateTariffBody } from "@root/model/customTariffs";
import { parseAxiosError } from "@root/utils/parse-error" import { parseAxiosError } from "@root/utils/parse-error";
import type { ServiceKeyToPrivilegesMap } from "@root/model/privilege" import type { ServiceKeyToPrivilegesMap } from "@root/model/privilege";
import type { GetTariffsResponse } from "@root/model/tariff" import type { GetTariffsResponse } from "@root/model/tariff";
import { removeTariffFromCart } from "@root/stores/user";
const apiUrl = process.env.REACT_APP_DOMAIN + "/strator" const apiUrl = process.env.REACT_APP_DOMAIN + "/strator";
export async function getTariffs( export async function getTariffs(
apiPage: number, apiPage: number,
tariffsPerPage: number, tariffsPerPage: number,
signal: AbortSignal | undefined signal: AbortSignal | undefined
): Promise<[GetTariffsResponse | null, string?]> { ): Promise<[GetTariffsResponse | null, string?]> {
try { try {
const tariffsResponse = await makeRequest<never, GetTariffsResponse>({ const tariffsResponse = await makeRequest<never, GetTariffsResponse>({
url: apiUrl + `/tariff?page=${apiPage}&limit=${tariffsPerPage}`, url: apiUrl + `/tariff?page=${apiPage}&limit=${tariffsPerPage}`,
method: "get", method: "get",
useToken: true, useToken: true,
signal, signal,
}) });
return [tariffsResponse] return [tariffsResponse];
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError) const [error] = parseAxiosError(nativeError);
return [null, `Не удалось получить список тарифов. ${error}`] return [null, `Не удалось получить список тарифов. ${error}`];
} }
} }
export async function createTariff(tariff: CreateTariffBody): Promise<[Tariff | null, string?]> { export async function createTariff(tariff: CreateTariffBody): Promise<[Tariff | null, string?]> {
try { try {
const createTariffResponse = await makeRequest<CreateTariffBody, Tariff>({ const createTariffResponse = await makeRequest<CreateTariffBody, Tariff>({
url: `${apiUrl}/tariff`, url: `${apiUrl}/tariff`,
method: "post", method: "post",
useToken: true, useToken: true,
body: tariff, body: tariff,
}) });
return [createTariffResponse] return [createTariffResponse];
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError) const [error] = parseAxiosError(nativeError);
return [null, `Не удалось создать тариф. ${error}`] return [null, `Не удалось создать тариф. ${error}`];
} }
} }
export async function getTariffById(tariffId: string): Promise<[Tariff | null, string?, number?]> { export async function getTariffById(tariffId: string): Promise<[Tariff | null, string?, number?]> {
try { try {
const getTariffByIdResponse = await makeRequest<never, Tariff>({ const getTariffByIdResponse = await makeRequest<never, Tariff>({
url: `${apiUrl}/tariff/${tariffId}`, url: `${apiUrl}/tariff/${tariffId}`,
method: "get", method: "get",
useToken: true, useToken: true,
}) });
return [getTariffByIdResponse] return [getTariffByIdResponse];
} catch (nativeError) { } catch (nativeError) {
const [error, status] = parseAxiosError(nativeError) const [error, status] = parseAxiosError(nativeError);
return [null, `Не удалось получить тарифы. ${error}`, status] return [null, `Не удалось получить тарифы. ${error}`, status];
} }
} }
export async function getCustomTariffs( export async function getCustomTariffs(
signal: AbortSignal | undefined signal: AbortSignal | undefined
): Promise<[ServiceKeyToPrivilegesMap | null, string?]> { ): Promise<[ServiceKeyToPrivilegesMap | null, string?]> {
try { try {
const customTariffsResponse = await makeRequest<null, ServiceKeyToPrivilegesMap>({ const customTariffsResponse = await makeRequest<null, ServiceKeyToPrivilegesMap>({
url: apiUrl + "/privilege/service", url: apiUrl + "/privilege/service",
signal, signal,
method: "get", method: "get",
useToken: true, useToken: true,
}) });
const tempCustomTariffsResponse = { const tempCustomTariffsResponse = {
...customTariffsResponse, ...customTariffsResponse,
squiz: customTariffsResponse.squiz squiz: customTariffsResponse.squiz
}; };
return [tempCustomTariffsResponse] return [tempCustomTariffsResponse];
} catch (nativeError) { } catch (nativeError) {
const [error] = parseAxiosError(nativeError) const [error] = parseAxiosError(nativeError);
return [null, `Не удалось получить мои тарифы. ${error}`] return [null, `Не удалось получить мои тарифы. ${error}`];
} }
}
export async function getTariffArray(tariffIds: string[] | undefined) {
if (!tariffIds) return null;
const responses = await Promise.allSettled(tariffIds.map(tariffId =>
makeRequest<never, Tariff>({
url: `${apiUrl}/tariff/${tariffId}`,
method: "get",
useToken: true,
})
));
const tariffs: Tariff[] = [];
responses.forEach((response, index) => {
switch (response.status) {
case "fulfilled": {
tariffs.push(response.value);
break;
}
case "rejected": {
const [, status] = parseAxiosError(response.reason);
if (status === 404) removeTariffFromCart(tariffIds[index]);
break;
}
}
});
return tariffs;
} }

10
src/components/CustomTariffAccordion.tsx
View File

@ -6,18 +6,17 @@ import { removeTariffFromCart } from "@root/stores/user"
import { enqueueSnackbar } from "notistack" import { enqueueSnackbar } from "notistack"
import { import {
CloseButton, CloseButton,
TariffCartData,
getMessageFromFetchError, getMessageFromFetchError,
} from "@frontend/kitui" } from "@frontend/kitui"
import type { MouseEvent } from "react" import type { MouseEvent } from "react"
import { TariffCartData } from "@root/utils/calcCart/utils";
interface Props { interface Props {
tariffCartData: TariffCartData; tariffCartData: TariffCartData;
outsideFactor: number;
} }
export default function CustomTariffAccordion({ tariffCartData, outsideFactor }: Props) { export default function CustomTariffAccordion({ tariffCartData }: Props) {
const theme = useTheme() const theme = useTheme()
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"))
const upSm = useMediaQuery(theme.breakpoints.up("sm")) const upSm = useMediaQuery(theme.breakpoints.up("sm"))
@ -36,7 +35,6 @@ export default function CustomTariffAccordion({ tariffCartData, outsideFactor }:
}) })
} }
console.log('DRAWER', outsideFactor)
return ( return (
<Box <Box
sx={{ sx={{
@ -103,7 +101,7 @@ console.log('DRAWER', outsideFactor)
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format(tariffCartData.price * outsideFactor / 100)} {currencyFormatter.format(tariffCartData.price / 100)}
</Typography> </Typography>
</Box> </Box>
<CloseButton <CloseButton
@ -150,7 +148,7 @@ console.log('DRAWER', outsideFactor)
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format(privilege.price * outsideFactor / 100)} {currencyFormatter.format(privilege.price / 100)}
</Typography> </Typography>
</Box> </Box>
</Box> </Box>

13
src/components/CustomWrapperDrawer.tsx
View File

@ -5,7 +5,7 @@ import ClearIcon from "@mui/icons-material/Clear";
import { currencyFormatter } from "@root/utils/currencyFormatter"; import { currencyFormatter } from "@root/utils/currencyFormatter";
import { useUserStore, removeTariffFromCart, setCart } from "@root/stores/user"; import { useUserStore, removeTariffFromCart, setCart } from "@root/stores/user";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { ServiceCartData, getMessageFromFetchError } from "@frontend/kitui"; import { getMessageFromFetchError } from "@frontend/kitui";
import ExpandIcon from "@components/icons/ExpandIcon"; import ExpandIcon from "@components/icons/ExpandIcon";
import { deleteCart } from "@root/api/cart"; import { deleteCart } from "@root/api/cart";
@ -13,6 +13,7 @@ import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
import type { MouseEvent } from "react"; import type { MouseEvent } from "react";
import CustomTariffAccordion from "@root/components/CustomTariffAccordion"; import CustomTariffAccordion from "@root/components/CustomTariffAccordion";
import { ServiceCartData } from "@root/utils/calcCart/utils";
const name: Record<string, string> = { const name: Record<string, string> = {
templategen: "Шаблонизатор", templategen: "Шаблонизатор",
@ -23,10 +24,9 @@ const name: Record<string, string> = {
interface Props { interface Props {
serviceData: ServiceCartData; serviceData: ServiceCartData;
outsideFactor: number;
} }
export default function CustomWrapperDrawer({ serviceData, outsideFactor }: Props) { export default function CustomWrapperDrawer({ serviceData }: Props) {
const [isExpanded, setIsExpanded] = useState<boolean>(false); const [isExpanded, setIsExpanded] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const theme = useTheme(); const theme = useTheme();
@ -138,7 +138,7 @@ export default function CustomWrapperDrawer({ serviceData, outsideFactor }: Prop
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format(serviceData.price * outsideFactor / 100)} {currencyFormatter.format(serviceData.price / 100)}
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
@ -169,9 +169,8 @@ export default function CustomWrapperDrawer({ serviceData, outsideFactor }: Prop
serviceData.tariffs.map((tariff) => { serviceData.tariffs.map((tariff) => {
const privilege = tariff.privileges[0]; const privilege = tariff.privileges[0];
console.log('CD', tariff, outsideFactor)
return tariff.privileges.length > 1 ? ( return tariff.privileges.length > 1 ? (
<CustomTariffAccordion outsideFactor={outsideFactor} key={tariff.id} tariffCartData={tariff} /> <CustomTariffAccordion key={tariff.id} tariffCartData={tariff} />
) : ( ) : (
<Box <Box
key={tariff.id + privilege.privilegeId} key={tariff.id + privilege.privilegeId}
@ -211,7 +210,7 @@ console.log('CD', tariff, outsideFactor)
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format((tariff.price || privilege.price) * outsideFactor / 100)} {currencyFormatter.format((tariff.price || privilege.price) / 100)}
</Typography> </Typography>
<SvgIcon <SvgIcon
sx={{ sx={{

16
src/components/Drawers.tsx
View File

@ -6,7 +6,6 @@ import { NotificationsModal } from "./NotificationsModal";
import { Loader } from "./Loader"; import { Loader } from "./Loader";
import { useCart } from "@root/utils/hooks/useCart"; import { useCart } from "@root/utils/hooks/useCart";
import { currencyFormatter } from "@root/utils/currencyFormatter"; import { currencyFormatter } from "@root/utils/currencyFormatter";
import { closeCartDrawer, openCartDrawer, useCartStore } from "@root/stores/cart";
import { setUserAccount, useUserStore } from "@root/stores/user"; import { setUserAccount, useUserStore } from "@root/stores/user";
import { useTicketStore } from "@root/stores/tickets"; import { useTicketStore } from "@root/stores/tickets";
@ -29,7 +28,7 @@ function Drawers() {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isDrawerOpen = useCartStore((state) => state.isDrawerOpen); const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
const cart = useCart(); const cart = useCart();
const userAccount = useUserStore((state) => state.userAccount); const userAccount = useUserStore((state) => state.userAccount);
const tickets = useTicketStore((state) => state.tickets); const tickets = useTicketStore((state) => state.tickets);
@ -52,7 +51,7 @@ function Drawers() {
setLoading(false); setLoading(false);
closeCartDrawer() setIsDrawerOpen(false);
navigate("payment") navigate("payment")
if (!payCartError.includes("insufficient funds: ")) enqueueSnackbar(payCartError); if (!payCartError.includes("insufficient funds: ")) enqueueSnackbar(payCartError);
return return
@ -63,7 +62,7 @@ function Drawers() {
} }
setLoading(false); setLoading(false);
closeCartDrawer(); setIsDrawerOpen(false);;
} }
function handleReplenishWallet() { function handleReplenishWallet() {
@ -135,7 +134,7 @@ function Drawers() {
}))} }))}
/> />
<IconButton <IconButton
onClick={openCartDrawer} onClick={() => setIsDrawerOpen(true)}
component="div" component="div"
sx={{ sx={{
cursor: "pointer", cursor: "pointer",
@ -173,7 +172,7 @@ function Drawers() {
<CartIcon /> <CartIcon />
</Badge> </Badge>
</IconButton> </IconButton>
<Drawer anchor={"right"} open={isDrawerOpen} onClose={closeCartDrawer} sx={{ background: "rgba(0, 0, 0, 0.55)" }}> <Drawer anchor={"right"} open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} sx={{ background: "rgba(0, 0, 0, 0.55)" }}>
<SectionWrapper <SectionWrapper
maxWidth="lg" maxWidth="lg"
sx={{ sx={{
@ -205,15 +204,14 @@ function Drawers() {
> >
Корзина Корзина
</Typography> </Typography>
<IconButton onClick={closeCartDrawer} sx={{ p: 0 }}> <IconButton onClick={() => setIsDrawerOpen(false)} sx={{ p: 0 }}>
<CrossIcon /> <CrossIcon />
</IconButton> </IconButton>
</Box> </Box>
<Box sx={{ pl: "20px", pr: "20px" }}> <Box sx={{ pl: "20px", pr: "20px" }}>
{cart.services.map((serviceData) => { {cart.services.map((serviceData) => {
console.log('aaaaaaaaaaAAAAAAAAAAAAAA', (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1)*(cart.appliedLoyaltyDiscount?.Target?.Factor || 1), (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1),(cart.appliedLoyaltyDiscount?.Target?.Factor || 1))
return ( return (
<CustomWrapperDrawer key={serviceData.serviceKey} outsideFactor={(cart.appliedCartPurchasesDiscount?.Target?.Factor || 1)*(cart.appliedLoyaltyDiscount?.Target?.Factor || 1)} serviceData={serviceData} /> <CustomWrapperDrawer key={serviceData.serviceKey} serviceData={serviceData} />
)})} )})}
<Box <Box
sx={{ sx={{

4
src/components/TotalPrice.tsx
View File

@ -19,8 +19,6 @@ interface Props {
export default function TotalPrice({ priceAfterDiscounts, priceBeforeDiscounts, isConstructor = false }: Props) { export default function TotalPrice({ priceAfterDiscounts, priceBeforeDiscounts, isConstructor = false }: Props) {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(550));
const cart = useCart();
const [notEnoughMoneyAmount, setNotEnoughMoneyAmount] = useState<number>(0); const [notEnoughMoneyAmount, setNotEnoughMoneyAmount] = useState<number>(0);
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const navigate = useNavigate(); const navigate = useNavigate();
@ -169,7 +167,7 @@ export default function TotalPrice({ priceAfterDiscounts, priceBeforeDiscounts,
)} )}
<Button <Button
variant="pena-contained-dark" variant="pena-contained-dark"
disabled = {cart.priceAfterDiscounts === 0} disabled = {priceAfterDiscounts === 0}
onClick={() => (notEnoughMoneyAmount === 0 ? !loading && handlePayClick() : handleReplenishWallet())} onClick={() => (notEnoughMoneyAmount === 0 ? !loading && handlePayClick() : handleReplenishWallet())}
> >
{loading ? <Loader size={24} /> : notEnoughMoneyAmount === 0 ? "Оплатить" : "Пополнить"} {loading ? <Loader size={24} /> : notEnoughMoneyAmount === 0 ? "Оплатить" : "Пополнить"}

7
src/model/tariff.ts
View File

@ -4,9 +4,4 @@ import { Tariff } from "@frontend/kitui"
export interface GetTariffsResponse { export interface GetTariffsResponse {
totalPages: number; totalPages: number;
tariffs: Tariff[]; tariffs: Tariff[];
} }
export interface FullTariff extends Tariff {
description?: string;
order?: number;
}

145
src/pages/Cart/Cart.tsx
View File

@ -1,82 +1,79 @@
import { Box, IconButton, Typography, Badge, useMediaQuery, useTheme } from "@mui/material" import { Box, IconButton, Typography, Badge, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper" import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack" import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TotalPrice from "@components/TotalPrice" import TotalPrice from "@components/TotalPrice";
import CustomWrapper from "./CustomWrapper" import CustomWrapper from "./CustomWrapper";
import { useCart } from "@root/utils/hooks/useCart" import { useCart } from "@root/utils/hooks/useCart";
import { useLocation } from "react-router-dom" import { useLocation } from "react-router-dom";
import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation" import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
import { handleComponentError } from "@root/utils/handleComponentError" import { handleComponentError } from "@root/utils/handleComponentError";
import { withErrorBoundary } from "react-error-boundary" import { withErrorBoundary } from "react-error-boundary";
function Cart() { function Cart() {
const theme = useTheme() const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(550)) const isMobile = useMediaQuery(theme.breakpoints.down(550));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const cart = useCart() const cart = useCart();
const location = useLocation() const location = useLocation();
const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts;
const totalPriceAfterDiscounts = cart.priceAfterDiscounts const totalPriceAfterDiscounts = cart.priceAfterDiscounts;
console.log('CART', totalPriceAfterDiscounts, totalPriceBeforeDiscounts, cart) const handleCustomBackNavigation = usePrevLocation(location);
const handleCustomBackNavigation = usePrevLocation(location)
return (
return ( <SectionWrapper
<SectionWrapper maxWidth="lg"
maxWidth="lg" sx={{
sx={{ mt: upMd ? "25px" : "20px",
mt: upMd ? "25px" : "20px", px: isTablet ? (upMd ? "40px" : "18px") : "20px",
px: isTablet ? (upMd ? "40px" : "18px") : "20px", mb: upMd ? "70px" : "37px",
mb: upMd ? "70px" : "37px", }}
}} >
> <Box
<Box sx={{
sx={{ mt: "20px",
mt: "20px", mb: upMd ? "40px" : "20px",
mb: upMd ? "40px" : "20px", display: "flex",
display: "flex", alignItems: "center",
alignItems: "center", gap: "10px",
gap: "10px", }}
}} >
> {isMobile && (
{isMobile && ( <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}> <ArrowBackIcon />
<ArrowBackIcon /> </IconButton>
</IconButton> )}
)} <Typography
<Typography sx={{
sx={{ fontSize: isMobile ? "24px" : "36px",
fontSize: isMobile ? "24px" : "36px", fontWeight: "500",
fontWeight: "500", }}
}} >
> Корзина
Корзина </Typography>
</Typography> </Box>
</Box> <Box
<Box sx={{
sx={{ mt: upMd ? "27px" : "10px",
mt: upMd ? "27px" : "10px", }}
}} >
> {cart.services.map((serviceData, index) => (
{cart.services.map((serviceData, index) => ( <CustomWrapper
<CustomWrapper key={serviceData.serviceKey}
key={serviceData.serviceKey} serviceData={serviceData}
serviceData={serviceData} first={index === 0}
outsideFactor={(cart.appliedCartPurchasesDiscount?.Target?.Factor || 1)*(cart.appliedLoyaltyDiscount?.Target?.Factor || 1)} last={index === cart.services.length - 1}
first={index === 0} />
last={index === cart.services.length - 1} ))}
/> </Box>
))} <TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} />
</Box> </SectionWrapper>
<TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} /> );
</SectionWrapper>
)
} }
export default withErrorBoundary(Cart, { export default withErrorBoundary(Cart, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении корзины</Typography>, fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении корзины</Typography>,
onError: handleComponentError, onError: handleComponentError,
}) });

13
src/pages/Cart/CustomWrapper.tsx
View File

@ -5,10 +5,11 @@ import ClearIcon from "@mui/icons-material/Clear"
import { currencyFormatter } from "@root/utils/currencyFormatter" import { currencyFormatter } from "@root/utils/currencyFormatter"
import { removeTariffFromCart } from "@root/stores/user" import { removeTariffFromCart } from "@root/stores/user"
import { enqueueSnackbar } from "notistack" import { enqueueSnackbar } from "notistack"
import { CloseButton, ServiceCartData, getMessageFromFetchError } from "@frontend/kitui" import { CloseButton, getMessageFromFetchError } from "@frontend/kitui"
import type { MouseEvent } from "react" import type { MouseEvent } from "react"
import CustomTariffAccordion from "@root/components/CustomTariffAccordion" import CustomTariffAccordion from "@root/components/CustomTariffAccordion"
import { ServiceCartData } from "@root/utils/calcCart/utils";
const name: Record<string, string> = { const name: Record<string, string> = {
templategen: "Шаблонизатор", templategen: "Шаблонизатор",
@ -19,12 +20,11 @@ const name: Record<string, string> = {
interface Props { interface Props {
serviceData: ServiceCartData; serviceData: ServiceCartData;
outsideFactor: number;
last?: boolean; last?: boolean;
first?: boolean; first?: boolean;
} }
export default function CustomWrapper({ serviceData, last, first, outsideFactor }: Props) { export default function CustomWrapper({ serviceData, last, first }: Props) {
const theme = useTheme() const theme = useTheme()
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"))
const upSm = useMediaQuery(theme.breakpoints.up("sm")) const upSm = useMediaQuery(theme.breakpoints.up("sm"))
@ -55,7 +55,6 @@ export default function CustomWrapper({ serviceData, last, first, outsideFactor
enqueueSnackbar("Тарифы удалены") enqueueSnackbar("Тарифы удалены")
} }
console.log('SDDD', serviceData)
return ( return (
<Box <Box
sx={{ sx={{
@ -128,7 +127,7 @@ console.log('SDDD', serviceData)
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format(serviceData.price * outsideFactor / 100)} {currencyFormatter.format(serviceData.price / 100)}
</Typography> </Typography>
</Box> </Box>
<CloseButton style={{ height: "22 px", width: "22px" }} onClick={deleteService} /> <CloseButton style={{ height: "22 px", width: "22px" }} onClick={deleteService} />
@ -139,7 +138,7 @@ console.log('SDDD', serviceData)
return tariff.privileges.length > 1 ? ( return tariff.privileges.length > 1 ? (
<CustomTariffAccordion outsideFactor={outsideFactor} key={tariff.id} tariffCartData={tariff} /> <CustomTariffAccordion key={tariff.id} tariffCartData={tariff} />
) : ( ) : (
<Box <Box
key={tariff.id + privilege.privilegeId} key={tariff.id + privilege.privilegeId}
@ -178,7 +177,7 @@ console.log('SDDD', serviceData)
fontWeight: 500, fontWeight: 500,
}} }}
> >
{currencyFormatter.format(tariff.price * outsideFactor / 100)} {currencyFormatter.format(tariff.price / 100)}
</Typography> </Typography>
</Box> </Box>
<Box <Box

1
src/pages/TariffConstructor/CustomTariffCard.tsx
View File

@ -55,7 +55,6 @@ export default function CustomTariffCard({ serviceKey, privileges }: Props) {
} }
} }
console.log('COMP', priceAfterDiscounts, priceBeforeDiscounts)
return ( return (
<Box <Box
sx={{ sx={{

173
src/pages/TariffConstructor/TariffConstructor.tsx
View File

@ -1,95 +1,94 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material" import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import SectionWrapper from "@components/SectionWrapper" import SectionWrapper from "@components/SectionWrapper";
import { useCustomTariffsStore } from "@root/stores/customTariffs" import { useCustomTariffsStore } from "@root/stores/customTariffs";
import ComplexHeader from "@root/components/ComplexHeader" import ComplexHeader from "@root/components/ComplexHeader";
import CustomTariffCard from "./CustomTariffCard" import CustomTariffCard from "./CustomTariffCard";
import ArrowBackIcon from "@mui/icons-material/ArrowBack" import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TotalPrice from "@root/components/TotalPrice" import TotalPrice from "@root/components/TotalPrice";
import { serviceNameByKey } from "@root/utils/serviceKeys" import { serviceNameByKey } from "@root/utils/serviceKeys";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker" import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { withErrorBoundary } from "react-error-boundary" import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError" import { handleComponentError } from "@root/utils/handleComponentError";
import { useCart } from "@root/utils/hooks/useCart";
function TariffConstructor() { function TariffConstructor() {
const theme = useTheme() const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const cart = useCart();
const customTariffs = useCustomTariffsStore((state) => state.privilegeByService);
const customTariffs = useCustomTariffsStore((state) => state.privilegeByService) const basePrice = cart.priceBeforeDiscounts;
const summaryPriceBeforeDiscountsMap = useCustomTariffsStore((state) => state.summaryPriceBeforeDiscountsMap) const discountedPrice = cart.priceAfterDiscounts;
const summaryPriceAfterDiscountsMap = useCustomTariffsStore((state) => state.summaryPriceAfterDiscountsMap)
const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce((a, e) => a + e, 0) const handleCustomBackNavigation = useHistoryTracker();
const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce((a, e) => a + e, 0)
const handleCustomBackNavigation = useHistoryTracker() return (
<SectionWrapper
return ( maxWidth="lg"
<SectionWrapper sx={{
maxWidth="lg" mt: upMd ? "25px" : "20px",
sx={{ px: isTablet ? (upMd ? "40px" : "18px") : "20px",
mt: upMd ? "25px" : "20px", mb: upMd ? "93px" : "48px",
px: isTablet ? (upMd ? "40px" : "18px") : "20px", }}
mb: upMd ? "93px" : "48px", >
}} <Box
> sx={{
<Box mt: "20px",
sx={{ display: "flex",
mt: "20px", flexDirection: "column",
display: "flex", gap: "80px",
flexDirection: "column", }}
gap: "80px", >
}} {Object.entries(customTariffs).filter(([serviceKey]) => serviceKey === "squiz").map(([serviceKey, privileges], index) => {
> return (
{Object.entries(customTariffs).filter(([serviceKey]) => serviceKey === "squiz").map(([serviceKey, privileges], index) => { <Box key={serviceKey}>
console.log("serviceKey ",serviceKey) <Box
console.log(Object.entries(customTariffs)) sx={{
return <Box key={index}> mb: "40px",
<Box display: "flex",
sx={{ gap: "10px",
mb: "40px", }}
display: "flex", >
gap: "10px", {!upMd && index === 0 && (
}} <IconButton
> onClick={handleCustomBackNavigation}
{!upMd && index === 0 && ( sx={{
<IconButton p: 0,
onClick={handleCustomBackNavigation} height: "28px",
sx={{ width: "28px",
p: 0, color: "black",
height: "28px", }}
width: "28px", >
color: "black", <ArrowBackIcon />
}} </IconButton>
> )}
<ArrowBackIcon /> <ComplexHeader text1="Мой тариф " text2={serviceNameByKey[serviceKey] === "Опросник" ? "PenaQuiz" : serviceNameByKey[serviceKey]} />
</IconButton> </Box>
)} <CustomTariffCard serviceKey={serviceKey} privileges={privileges} />
<ComplexHeader text1="Мой тариф " text2={serviceNameByKey[serviceKey] === "Опросник" ? "PenaQuiz" : serviceNameByKey[serviceKey]} /> </Box>
</Box> );
<CustomTariffCard serviceKey={serviceKey} privileges={privileges} /> })}
</Box> </Box>
})} <Link
</Box> to="/tariffconstructor/savedtariffs"
<Link style={{
to="/tariffconstructor/savedtariffs" display: "block",
style={{ marginTop: "50px",
display: "block", textUnderlinePosition: "under",
marginTop: "50px", color: theme.palette.purple.main,
textUnderlinePosition: "under", textDecorationColor: theme.palette.purple.main,
color: theme.palette.purple.main, }}
textDecorationColor: theme.palette.purple.main, >
}} Ваши сохраненные тарифы
> </Link>
Ваши сохраненные тарифы <TotalPrice priceBeforeDiscounts={basePrice} priceAfterDiscounts={discountedPrice} isConstructor={true} />
</Link> </SectionWrapper>
<TotalPrice priceBeforeDiscounts={basePrice} priceAfterDiscounts={discountedPrice} isConstructor={true} /> );
</SectionWrapper>
)
} }
export default withErrorBoundary(TariffConstructor, { export default withErrorBoundary(TariffConstructor, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении моих тарифов</Typography>, fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении моих тарифов</Typography>,
onError: handleComponentError, onError: handleComponentError,
}) });

302
src/pages/TariffConstructor/TariffItem.tsx
View File

@ -1,173 +1,169 @@
import { Privilege, PrivilegeValueType, useThrottle } from "@frontend/kitui" import { Privilege, useThrottle } from "@frontend/kitui";
import { Box, SliderProps, Typography, useMediaQuery, useTheme } from "@mui/material" import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { CustomSlider } from "@root/components/CustomSlider" import { CustomSlider } from "@root/components/CustomSlider";
import NumberInputWithUnitAdornment from "@root/components/NumberInputWithUnitAdornment" import NumberInputWithUnitAdornment from "@root/components/NumberInputWithUnitAdornment";
import CalendarIcon from "@root/components/icons/CalendarIcon" import CalendarIcon from "@root/components/icons/CalendarIcon";
import PieChartIcon from "@root/components/icons/PieChartIcon" import PieChartIcon from "@root/components/icons/PieChartIcon";
import { useCartStore } from "@root/stores/cart" import { setCustomTariffsUserValue, useCustomTariffsStore } from "@root/stores/customTariffs";
import { setCustomTariffsUserValue, useCustomTariffsStore } from "@root/stores/customTariffs" import { useUserStore } from "@root/stores/user";
import { useDiscountStore } from "@root/stores/discounts" import { getDeclension } from "@root/utils/declension";
import { useUserStore } from "@root/stores/user" import { useCartTariffs } from "@root/utils/hooks/useCartTariffs";
import { getDeclension } from "@root/utils/declension" import { useEffect, useState } from "react";
import { useEffect, useState } from "react"
import { useDebouncedCallback } from 'use-debounce'; import { useDebouncedCallback } from 'use-debounce';
const sliderSettingsByType = { const sliderSettingsByType = {
день: { max: 365, min: 0 }, день: { max: 365, min: 0 },
шаблон: { max: 5000, min: 0 }, шаблон: { max: 5000, min: 0 },
МБ: { max: 5000, min: 0 }, МБ: { max: 5000, min: 0 },
заявка: { max: 5000, min: 0 } заявка: { max: 5000, min: 0 }
} };
type PrivilegeName = "день" | "шаблон" | "МБ" | "заявка"
type PrivilegeName = "день" | "шаблон" | "МБ" | "заявка";
interface Props { interface Props {
privilege: Privilege; privilege: Privilege;
} }
export default function TariffPrivilegeSlider({ privilege }: Props) { export default function TariffPrivilegeSlider({ privilege }: Props) {
const theme = useTheme() const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"));
const userValue = useCustomTariffsStore((state) => state.userValuesMap[privilege.serviceKey]?.[privilege._id]) ?? sliderSettingsByType[privilege.value]?.min const userValue = useCustomTariffsStore((state) => state.userValuesMap[privilege.serviceKey]?.[privilege._id]) ?? sliderSettingsByType[privilege.value]?.min;
const discounts = useDiscountStore((state) => state.discounts) const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.spent) ?? sliderSettingsByType[privilege.value]?.min;
const currentCartTotal = useCartStore((state) => state.cart.priceAfterDiscounts) const cartTariffs = useCartTariffs();
const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.spent) ?? sliderSettingsByType[privilege.value]?.min const [value, setValue] = useState<number>(userValue);
const isUserNko = useUserStore(state => state.userAccount?.status) === "nko" const throttledValue = useThrottle(value, 200);
const [value, setValue] = useState<number>(userValue)
const throttledValue = useThrottle(value, 200)
useEffect( useEffect(
function setStoreValue() { function setStoreValue() {
setCustomTariffsUserValue( setCustomTariffsUserValue(
privilege.serviceKey, cartTariffs ?? [],
privilege._id, privilege.serviceKey,
throttledValue, privilege._id,
discounts, throttledValue,
currentCartTotal, purchasesAmount,
purchasesAmount, );
isUserNko, },
) [cartTariffs, purchasesAmount, privilege._id, privilege.serviceKey, throttledValue]
}, );
[currentCartTotal, discounts, purchasesAmount, privilege._id, privilege.serviceKey, throttledValue, isUserNko]
)
function handleSliderChange(measurement: PrivilegeName) { function handleSliderChange(measurement: PrivilegeName) {
return (value: number | number[]) => { return (value: number | number[]) => {
if (Number(value) < Number(sliderSettingsByType[measurement]?.min)) { if (Number(value) < Number(sliderSettingsByType[measurement]?.min)) {
setValue(0) setValue(0);
return return;
} }
if (Array.isArray(value)) throw new Error("Slider uses multiple values instead of one") if (Array.isArray(value)) throw new Error("Slider uses multiple values instead of one");
setValue(value) setValue(value);
} };
} }
const quantityText = `${value} ${getDeclension(value, privilege.value)}` const quantityText = `${value} ${getDeclension(value, privilege.value)}`;
const setNotSmallNumber = useDebouncedCallback(() => {
if (value === sliderSettingsByType[privilege.value]?.min) return
if (Number(value) < Number(sliderSettingsByType[privilege.value]?.min)) {
setValue(sliderSettingsByType[privilege.value]?.min)
}
if (privilege.value === "день" && Number(value) < 30 && Number(value) !== 0) {
setValue(30)
}
if (privilege.value !== "день" && Number(value) < 100 && Number(value) !== 0) { const setNotSmallNumber = useDebouncedCallback(() => {
setValue(100) if (value === sliderSettingsByType[privilege.value]?.min) return;
} if (Number(value) < Number(sliderSettingsByType[privilege.value]?.min)) {
}, 600) setValue(sliderSettingsByType[privilege.value]?.min);
}
if (privilege.value === "день" && Number(value) < 30 && Number(value) !== 0) {
setValue(30);
}
const quantityElement = ( if (privilege.value !== "день" && Number(value) < 100 && Number(value) !== 0) {
<Box setValue(100);
sx={{ }
display: "flex", }, 600);
gap: "15px",
alignItems: "center",
justifyContent: upMd ? "end" : undefined,
flexWrap: "wrap",
mt: upMd ? undefined : "12px",
}}
>
<Typography variant="p1" color={theme.palette.purple.main} textAlign="end">
{quantityText}
</Typography>
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
flexWrap: "wrap",
}}
>
<Typography sx={{ fontSize: "16px", lineHeight: "19px", mt: "1px" }}>или</Typography>
<NumberInputWithUnitAdornment
id={"privilege_input_" + privilege._id}
value={value}
privilege={privilege}
adornmentText={getDeclension(0, privilege.value)}
onChange={(value) => {
setValue(value)
setNotSmallNumber()
}}
/>
</Box>
</Box>
)
const icon = const quantityElement = (
privilege.type === "day" ? ( <Box
<CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" /> sx={{
) : ( display: "flex",
<PieChartIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" /> gap: "15px",
) alignItems: "center",
justifyContent: upMd ? "end" : undefined,
flexWrap: "wrap",
mt: upMd ? undefined : "12px",
}}
>
<Typography variant="p1" color={theme.palette.purple.main} textAlign="end">
{quantityText}
</Typography>
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
flexWrap: "wrap",
}}
>
<Typography sx={{ fontSize: "16px", lineHeight: "19px", mt: "1px" }}>или</Typography>
<NumberInputWithUnitAdornment
id={"privilege_input_" + privilege._id}
value={value}
privilege={privilege}
adornmentText={getDeclension(0, privilege.value)}
onChange={(value) => {
setValue(value);
setNotSmallNumber();
}}
/>
</Box>
</Box>
);
return ( const icon =
<Box> privilege.type === "day" ? (
<Typography sx={{ color: theme.palette.gray.dark, mb: "auto" }}>{privilege.description}</Typography> <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
<Box ) : (
sx={{ <PieChartIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
display: "flex", );
flexDirection: "column",
mt: "40px", return (
}} <Box>
> <Typography sx={{ color: theme.palette.gray.dark, mb: "auto" }}>{privilege.description}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
// flexWrap: "wrap", flexDirection: "column",
alignItems: "center", mt: "40px",
mb: "8px", }}
justifyContent: "space-between", >
gap: "10px", <Box
}} sx={{
> display: "flex",
<Box // flexWrap: "wrap",
sx={{ alignItems: "center",
display: "flex", mb: "8px",
alignItems: "center", justifyContent: "space-between",
gap: "22px", gap: "10px",
}} }}
> >
{icon} <Box
<Typography sx={{ maxWidth: "100px" }} variant="h5"> sx={{
{privilege.name} display: "flex",
</Typography> alignItems: "center",
</Box> gap: "22px",
{upMd && quantityElement} }}
</Box> >
<CustomSlider {icon}
value={value} <Typography sx={{ maxWidth: "100px" }} variant="h5">
min={sliderSettingsByType[privilege.value]?.min } {privilege.name}
max={sliderSettingsByType[privilege.value]?.max || 100} </Typography>
onChange={handleSliderChange(privilege.value)} </Box>
firstStep={privilege.value === "день" ? 30 : 100} {upMd && quantityElement}
/> </Box>
{!upMd && quantityElement} <CustomSlider
</Box> value={value}
</Box> min={sliderSettingsByType[privilege.value]?.min}
) max={sliderSettingsByType[privilege.value]?.max || 100}
onChange={handleSliderChange(privilege.value)}
firstStep={privilege.value === "день" ? 30 : 100}
/>
{!upMd && quantityElement}
</Box>
</Box>
);
} }

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

@ -1,28 +1,23 @@
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper"; import SectionWrapper from "@components/SectionWrapper";
import { useTariffStore } from "@root/stores/tariffs";
import { enqueueSnackbar } from "notistack";
import { Select } from "@root/components/Select";
import { Tabs } from "@root/components/Tabs";
import TariffCard from "./TariffCard";
import NumberIcon from "@root/components/NumberIcon";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { calcIndividualTariffPrices } from "@root/utils/calcTariffPrices";
import { Tariff, getMessageFromFetchError } from "@frontend/kitui"; import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
import FreeTariffCard from "./FreeTariffCard";
import { addTariffToCart, useUserStore } from "@root/stores/user";
import { useDiscountStore } from "@root/stores/discounts";
import { Slider } from "./slider";
import { useCartStore } from "@root/stores/cart";
import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation"; import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { withErrorBoundary } from "react-error-boundary"; import NumberIcon from "@root/components/NumberIcon";
import { handleComponentError } from "@root/utils/handleComponentError"; import { useDiscountStore } from "@root/stores/discounts";
import { useHistoryStore } from "@root/stores/history"; import { useHistoryStore } from "@root/stores/history";
import { useRecentlyPurchasedTariffs } from "@utils/hooks/useRecentlyPurchasedTariffs"; import { useTariffStore } from "@root/stores/tariffs";
import { FullTariff } from "@root/model/tariff" import { addTariffToCart, useUserStore } from "@root/stores/user";
import { calcIndividualTariffPrices } from "@root/utils/calcTariffPrices";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { handleComponentError } from "@root/utils/handleComponentError";
import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
import { useCartTariffs } from "@root/utils/hooks/useCartTariffs";
import { enqueueSnackbar } from "notistack";
import { useState } from "react";
import { withErrorBoundary } from "react-error-boundary";
import { useLocation } from "react-router-dom";
import FreeTariffCard from "./FreeTariffCard";
import TariffCard from "./TariffCard";
const subPages = ["Опросник", /*"Шаблонизатор",*/ /*"Сокращатель ссылок"*/]; const subPages = ["Опросник", /*"Шаблонизатор",*/ /*"Сокращатель ссылок"*/];
@ -43,15 +38,13 @@ function TariffPage() {
const [selectedItem, setSelectedItem] = useState<number>(0); const [selectedItem, setSelectedItem] = useState<number>(0);
const discounts = useDiscountStore((state) => state.discounts); const discounts = useDiscountStore((state) => state.discounts);
const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.spent) ?? 0; const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.spent) ?? 0;
const cartTariffMap = useCartStore((state) => state.cartTariffMap);
const isUserNko = useUserStore((state) => state.userAccount?.status) === "nko"; const isUserNko = useUserStore((state) => state.userAccount?.status) === "nko";
const historyData = useHistoryStore((state) => state.history); const historyData = useHistoryStore((state) => state.history);
const currentTariffs = useCartTariffs();
const { recentlyPurchased } = useRecentlyPurchasedTariffs();
const handleCustomBackNavigation = usePrevLocation(location); const handleCustomBackNavigation = usePrevLocation(location);
const unit: string = String(location.pathname).slice(9); const unit: string = String(location.pathname).slice(9);
const currentTariffs = Object.values(cartTariffMap).filter((tariff): tariff is FullTariff => typeof tariff === "object");
function handleTariffItemClick(tariffId: string) { function handleTariffItemClick(tariffId: string) {
addTariffToCart(tariffId) addTariffToCart(tariffId)
@ -64,7 +57,6 @@ function TariffPage() {
}); });
} }
console.log("tariffstariffstariffstariffs", tariffs)
const filteredTariffs = tariffs.filter((tariff) => { const filteredTariffs = tariffs.filter((tariff) => {
if (tariff.privileges[0] === undefined) return false if (tariff.privileges[0] === undefined) return false
if ( if (
@ -92,7 +84,7 @@ function TariffPage() {
return historyTariffIds.includes(tariff._id); return historyTariffIds.includes(tariff._id);
}); });
const createTariffElements = (filteredTariffs: FullTariff[], addFreeTariff = false) => { const createTariffElements = (filteredTariffs: Tariff[], addFreeTariff = false) => {
console.log(filteredTariffs) console.log(filteredTariffs)
const tariffElements = filteredTariffs const tariffElements = filteredTariffs
.filter((tariff) => tariff.privileges.length > 0) .filter((tariff) => tariff.privileges.length > 0)
@ -101,14 +93,9 @@ function TariffPage() {
tariff, tariff,
discounts, discounts,
purchasesAmount, purchasesAmount,
currentTariffs, currentTariffs ?? [],
isUserNko isUserNko
); );
console.log('TECCCCCCCC',priceBeforeDiscounts, priceAfterDiscounts,tariff,
discounts,
purchasesAmount,
currentTariffs,
isUserNko)
return ( return (
<TariffCard <TariffCard

91
src/stores/cart.ts
View File

@ -1,91 +0,0 @@
import { CartData, Discount, Tariff } from "@frontend/kitui"
import { calcCart } from "@root/utils/calcCart/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,
allAppliedDiscounts: [],
appliedCartPurchasesDiscount: null,
appliedLoyaltyDiscount: null,
},
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[], discounts: Discount[], purchasesAmount: number, isUserNko: boolean) =>
useCartStore.setState(
produce<CartStore>((state) => {
tariffs.forEach((tariff) => {
// if (tariff.isCustom && tariff.privileges[0].serviceKey !== "custom") {
// tariff.privileges[0].serviceKey = "custom"
// }
//
state.cartTariffMap[tariff._id] = tariff
})
const cartTariffs = Object.values(state.cartTariffMap).filter(
(tariff): tariff is Tariff => typeof tariff === "object"
)
state.cart = calcCart(cartTariffs, discounts, purchasesAmount, isUserNko)
}),
false,
{
type: tariffs.length > 0 ? "addCartTariffs" : "rejected",
tariffs,
}
)
export const removeMissingCartTariffs = (tariffIds: string[], discounts: Discount[], purchasesAmount: number, isUserNko: boolean) =>
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, discounts, purchasesAmount, isUserNko)
}),
false,
{
type: "rejected",
}
)
export const openCartDrawer = () => useCartStore.setState({ isDrawerOpen: true })
export const closeCartDrawer = () => useCartStore.setState({ isDrawerOpen: false })

298
src/stores/customTariffs.ts
View File

@ -1,13 +1,13 @@
import { createTariff } from "@root/api/tariff" import { PrivilegeWithAmount, Tariff } from "@frontend/kitui";
import { CustomTariffUserValuesMap, ServiceKeyToPriceMap } from "@root/model/customTariffs" import { createTariff } from "@root/api/tariff";
import { ServiceKeyToPrivilegesMap } from "@root/model/privilege" import { CustomTariffUserValuesMap, ServiceKeyToPriceMap } from "@root/model/customTariffs";
import { produce } from "immer" import { ServiceKeyToPrivilegesMap } from "@root/model/privilege";
import { create } from "zustand" import { calcCustomTariffPrice } from "@root/utils/calcCart/calcCustomTariffPrice";
import { devtools, persist } from "zustand/middleware" import { produce } from "immer";
import { Discount, PrivilegeWithAmount/* , findCartDiscount */, findDiscountFactor/* , findLoyaltyDiscount *//* , findPrivilegeDiscount *//* , findServiceDiscount */} from "@frontend/kitui" import { create } from "zustand";
import { findNkoDiscount, calcCart } from "@root/utils/calcCart/calcCart" import { devtools, persist } from "zustand/middleware";
import { useCartStore } from "./cart" import { useDiscountStore } from "./discounts";
import { FullTariff } from "@root/model/tariff" import { useUserStore } from "./user";
interface CustomTariffsStore { interface CustomTariffsStore {
@ -18,234 +18,90 @@ interface CustomTariffsStore {
} }
const initialState: CustomTariffsStore = { const initialState: CustomTariffsStore = {
privilegeByService: {}, privilegeByService: {},
userValuesMap: {}, userValuesMap: {},
summaryPriceBeforeDiscountsMap: {}, summaryPriceBeforeDiscountsMap: {},
summaryPriceAfterDiscountsMap: {}, summaryPriceAfterDiscountsMap: {},
} };
function findLoyaltyDiscount(
purchasesAmount: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 4 &&
discount.Condition.UserType !== "nko" &&
purchasesAmount >= Number(discount.Condition.PurchasesAmount)
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.PurchasesAmount) > Number(prev.Condition.PurchasesAmount) ? current : prev;
});
return maxValueDiscount;
}
function findServiceDiscount(
serviceKey: string,
currentPrice: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 2 &&
discount.Condition.Group === serviceKey &&
currentPrice >= Number(discount.Condition.PriceFrom)
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.PriceFrom) > Number(prev.Condition.PriceFrom) ? current : prev;
});
return maxValueDiscount;
}
export const useCustomTariffsStore = create<CustomTariffsStore>()( export const useCustomTariffsStore = create<CustomTariffsStore>()(
persist( persist(
devtools( devtools(
(set, get) => initialState, (set, get) => initialState,
{ {
name: "Custom tariffs", name: "Custom tariffs",
enabled: process.env.NODE_ENV === "development", enabled: process.env.NODE_ENV === "development",
}), }),
{ {
name: "customTariffs", name: "customTariffs",
partialize: state => ({ partialize: state => ({
userValuesMap: state.userValuesMap, userValuesMap: state.userValuesMap,
summaryPriceBeforeDiscountsMap: state.summaryPriceBeforeDiscountsMap, summaryPriceBeforeDiscountsMap: state.summaryPriceBeforeDiscountsMap,
summaryPriceAfterDiscountsMap: state.summaryPriceAfterDiscountsMap, summaryPriceAfterDiscountsMap: state.summaryPriceAfterDiscountsMap,
}), }),
migrate: () => initialState, migrate: () => initialState,
} }
) )
) );
function findPrivilegeDiscount( export const setCustomTariffs = (customTariffs: ServiceKeyToPrivilegesMap) => useCustomTariffsStore.setState({ privilegeByService: customTariffs });
privilegeId: string,
privilegePrice: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
const conditionMinPrice = parseFloat(discount.Condition.Term);
if (!isFinite(conditionMinPrice)) throw new Error(`Couldn't parse Discount.Condition.Term: ${discount.Condition.Term}`);
return (
discount.Layer === 1 &&
privilegeId === discount.Condition.Product &&
privilegePrice >= conditionMinPrice
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) =>
parseFloat(current.Condition.Term) > parseFloat(prev.Condition.Term) ? current : prev
);
return maxValueDiscount;
}
export const setCustomTariffs = (customTariffs: ServiceKeyToPrivilegesMap) => useCustomTariffsStore.setState({ privilegeByService: customTariffs })
function findCartDiscount(
cartPurchasesAmount: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 3 &&
cartPurchasesAmount >= discount.Condition.CartPurchasesAmount
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.CartPurchasesAmount) > Number(prev.Condition.CartPurchasesAmount) ? current : prev;
});
return maxValueDiscount;
}
export const setCustomTariffsUserValue = ( export const setCustomTariffsUserValue = (
serviceKey: string, cartTariffs: Tariff[],
privilegeId: string, serviceKey: string,
value: number, privilegeId: string,
discounts: Discount[], value: number,
currentCartTotal: number, purchasesAmount: number,
purchasesAmount: number,
isUserNko: boolean,
) => useCustomTariffsStore.setState( ) => useCustomTariffsStore.setState(
produce<CustomTariffsStore>(state => { produce<CustomTariffsStore>(state => {
state.userValuesMap[serviceKey] ??= {} state.userValuesMap[serviceKey] ??= {};
state.userValuesMap[serviceKey][privilegeId] = value state.userValuesMap[serviceKey][privilegeId] = value;
const isUserNko = useUserStore.getState().userAccount?.status === "nko";
const discounts = useDiscountStore.getState().discounts;
const privilegeWithoutAmount = state.privilegeByService[serviceKey].find(p => p._id === privilegeId) const { priceBeforeDiscounts, priceAfterDiscounts } = calcCustomTariffPrice(
if (!privilegeWithoutAmount) throw new Error(`Privilege not found: ${privilegeId}`) state.userValuesMap[serviceKey],
let priceWithoutDiscounts = 0 state.privilegeByService[serviceKey],
let priceAfterDiscounts = 0 cartTariffs,
const privileges = new Array<PrivilegeWithAmount>() discounts,
purchasesAmount,
isUserNko
);
Object.keys(state.userValuesMap[serviceKey]).forEach(e => { state.summaryPriceBeforeDiscountsMap[serviceKey] = priceBeforeDiscounts;
const pwa = state.privilegeByService[serviceKey].find(p => p._id === e) state.summaryPriceAfterDiscountsMap[serviceKey] = priceAfterDiscounts;
if (!pwa) return
if (state.userValuesMap[serviceKey][e] > 0)
privileges.push({
...pwa,
amount: state.userValuesMap[serviceKey][e]
})
}) })
);
let tariff: FullTariff = {
_id: "",
name: "",
price: 0,
description: "",
isCustom: true,
isDeleted: false,
privileges: privileges,
}
const cart = calcCart([...Object.values(useCartStore.getState().cartTariffMap as Record<string, FullTariff>), tariff], discounts, purchasesAmount, isUserNko)
const nkoDiscount = findNkoDiscount(discounts)
if (isUserNko && nkoDiscount) {
state.privilegeByService[serviceKey].forEach(privilege => {
const amount = state.userValuesMap[serviceKey]?.[privilege._id] ?? 0
priceWithoutDiscounts += privilege.price * amount
})
priceAfterDiscounts = priceWithoutDiscounts * findDiscountFactor(nkoDiscount)
} else {
state.privilegeByService[serviceKey].forEach(privilege => {
const amount = state.userValuesMap[serviceKey]?.[privilege._id] ?? 0
console.log(amount, serviceKey, privilege._id)
priceWithoutDiscounts += privilege.price * amount
const discount = cart.allAppliedDiscounts?.find(e => e.Condition.Product === privilege.privilegeId)
console.log(discount, privilege.price*amount, findDiscountFactor(discount))
//const discount = findPrivilegeDiscount(privilege.privilegeId, amount, discounts)
priceAfterDiscounts += privilege.price * amount * findDiscountFactor(discount)
})
console.log(priceAfterDiscounts)
const serviceDiscount = cart.allAppliedDiscounts?.find(e => e.Condition.Group === serviceKey)
priceAfterDiscounts *= findDiscountFactor(serviceDiscount)
console.log(serviceDiscount, serviceKey, priceAfterDiscounts, discounts)
const cartDiscount = findCartDiscount(currentCartTotal+priceAfterDiscounts, discounts)
priceAfterDiscounts *= findDiscountFactor(cartDiscount)
const loyaltyDiscount = findLoyaltyDiscount(purchasesAmount, discounts)
priceAfterDiscounts *= findDiscountFactor(loyaltyDiscount)
}
console.log('cTC', cart)
state.summaryPriceBeforeDiscountsMap[serviceKey] = priceWithoutDiscounts
state.summaryPriceAfterDiscountsMap[serviceKey] = priceAfterDiscounts
})
)
export const createAndSendTariff = (serviceKey: string) => { export const createAndSendTariff = (serviceKey: string) => {
const state = useCustomTariffsStore.getState() const state = useCustomTariffsStore.getState();
const privileges: PrivilegeWithAmount[] = [] const privileges: PrivilegeWithAmount[] = [];
Object.entries(state.userValuesMap[serviceKey]).forEach(([privilegeId, userValue]) => { Object.entries(state.userValuesMap[serviceKey]).forEach(([privilegeId, userValue]) => {
if (userValue === 0) return if (userValue === 0) return;
const privilegeWithoutAmount = state.privilegeByService[serviceKey].find(p => p._id === privilegeId) const privilegeWithoutAmount = state.privilegeByService[serviceKey].find(p => p._id === privilegeId);
if (!privilegeWithoutAmount) throw new Error(`Privilege not found: ${privilegeId}`) if (!privilegeWithoutAmount) throw new Error(`Privilege not found: ${privilegeId}`);
const privilege: PrivilegeWithAmount = { const privilege: PrivilegeWithAmount = {
...privilegeWithoutAmount, ...privilegeWithoutAmount,
privilegeId: privilegeWithoutAmount.privilegeId, privilegeId: privilegeWithoutAmount.privilegeId,
amount: userValue, amount: userValue,
} };
privileges.push(privilege) privileges.push(privilege);
}) });
const name = [...privileges.map(p => p.name), new Date().toISOString()].join(", ") const name = [...privileges.map(p => p.name), new Date().toISOString()].join(", ");
const tariff = { const tariff = {
name, name,
isCustom: true, isCustom: true,
privileges, privileges,
} };
return createTariff(tariff) return createTariff(tariff);
} };
export const clearCustomTariffs = () => useCustomTariffsStore.setState({ ...initialState }) export const clearCustomTariffs = () => useCustomTariffsStore.setState({ ...initialState });

11
src/utils/calcCart/calcCart.test.ts
View File

@ -1,6 +1,5 @@
import { CartData, Discount } from "@frontend/kitui" import { CartData, Discount, Tariff } from "@frontend/kitui"
import { calcCart } from "./calcCart" import { calcCart } from "./calcCart"
import { FullTariff } from "@root/model/tariff"
describe("Cart calculations", () => { describe("Cart calculations", () => {
@ -825,7 +824,7 @@ describe("Cart calculations", () => {
}) })
}) })
const templategenTariff1: FullTariff = { const templategenTariff1: Tariff = {
_id: "t1", _id: "t1",
name: "templategenTariff1", name: "templategenTariff1",
price: 0, price: 0,
@ -849,7 +848,7 @@ const templategenTariff1: FullTariff = {
updatedAt: "" updatedAt: ""
} }
const templategenTariff2: FullTariff = { const templategenTariff2: Tariff = {
_id: "t5", _id: "t5",
name: "templategenTariff2", name: "templategenTariff2",
price: 0, price: 0,
@ -873,7 +872,7 @@ const templategenTariff2: FullTariff = {
updatedAt: "" updatedAt: ""
} }
const squizTariff: FullTariff = { const squizTariff: Tariff = {
_id: "t2", _id: "t2",
name: "squizTariff", name: "squizTariff",
price: 0, price: 0,
@ -897,7 +896,7 @@ const squizTariff: FullTariff = {
updatedAt: "" updatedAt: ""
} }
const reducerTariff: FullTariff = { const reducerTariff: Tariff = {
_id: "t3", _id: "t3",
name: "reducerTariff", name: "reducerTariff",
description: "test", description: "test",

325
src/utils/calcCart/calcCart.ts
View File

@ -1,149 +1,40 @@
import { CartData, Discount, PrivilegeCartData, Tariff, TariffCartData, findPrivilegeDiscount, findDiscountFactor, applyLoyaltyDiscount} from "@frontend/kitui"; import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui";
import { CartData, PrivilegeCartData, TariffCartData, findCartDiscount, findLoyaltyDiscount, findNkoDiscount, findPrivilegeDiscount, findServiceDiscount } from "./utils";
function applyPrivilegeDiscounts( export function calcCart(tariffs: Tariff[], discounts: Discount[], purchasesAmount: number, isUserNko?: boolean, userId: string = ""): CartData {
cartData: CartData,
discounts: Discount[],
) {
const privMap = new Map()
cartData.services.forEach(service => service.tariffs.forEach(tariff => tariff.privileges.forEach(p => {
privMap.set(p.privilegeId, p.amount + (privMap.get(p.privilegeId)||0))
})))
cartData.services.forEach(service => {
service.tariffs.forEach(tariff => {
tariff.privileges.forEach(privilege => {
const privilegeDiscount = findPrivilegeDiscount(privilege.privilegeId, privMap.get(privilege.privilegeId)||0, discounts);
if (!privilegeDiscount) return;
const discountAmount = privilege.price * (1 - findDiscountFactor(privilegeDiscount));
privilege.price -= discountAmount;
cartData.allAppliedDiscounts.push(privilegeDiscount);
privilege.appliedPrivilegeDiscount = privilegeDiscount;
tariff.price -= discountAmount;
service.price -= discountAmount;
cartData.priceAfterDiscounts -= discountAmount;
});
});
});
}
function findServiceDiscount(
serviceKey: string,
currentPrice: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 2 &&
discount.Condition.Group === serviceKey &&
currentPrice >= Number(discount.Condition.PriceFrom)
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.PriceFrom) > Number(prev.Condition.PriceFrom) ? current : prev;
});
return maxValueDiscount;
}
function findCartDiscount(
cartPurchasesAmount: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 3 &&
cartPurchasesAmount >= Number(discount.Condition.CartPurchasesAmount)
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.CartPurchasesAmount) > Number(prev.Condition.CartPurchasesAmount) ? current : prev;
});
return maxValueDiscount;
}
function applyCartDiscount(
cartData: CartData,
discounts: Discount[],
) {
const cartDiscount = findCartDiscount(cartData.priceAfterDiscounts, discounts);
if (!cartDiscount) return;
cartData.priceAfterDiscounts *= findDiscountFactor(cartDiscount);
cartData.allAppliedDiscounts.push(cartDiscount);
cartData.appliedCartPurchasesDiscount = cartDiscount;
}
function applyServiceDiscounts(
cartData: CartData,
discounts: Discount[],
) {
const privMap = new Map()
cartData.services.forEach(service => {
service.tariffs.forEach(tariff => tariff.privileges.forEach(p => {
privMap.set(p.serviceKey, p.price + (privMap.get(p.serviceKey)||0))
}))
})
cartData.services.forEach(service => {
service.tariffs.map(tariff => {
tariff.privileges.forEach(privilege => {
const privilegeDiscount = findServiceDiscount(privilege.serviceKey, privMap.get(privilege.serviceKey), discounts);
if (!privilegeDiscount) return;
const discountAmount = privilege.price * (1 - findDiscountFactor(privilegeDiscount));
privilege.price -= discountAmount;
cartData.allAppliedDiscounts.push(privilegeDiscount);
service.appliedServiceDiscount = privilegeDiscount;
tariff.price -= discountAmount;
service.price -= discountAmount;
cartData.priceAfterDiscounts -= discountAmount;
});
});
});
}
export function calcCart(tariffs: Tariff[], discounts: Discount[], purchasesAmount: number, isUserNko?: boolean): CartData {
const cartData: CartData = { const cartData: CartData = {
services: [], services: [],
priceBeforeDiscounts: 0, priceBeforeDiscounts: 0,
priceAfterDiscounts: 0, priceAfterDiscounts: 0,
itemCount: 0,
appliedCartPurchasesDiscount: null, appliedCartPurchasesDiscount: null,
appliedLoyaltyDiscount: null, appliedLoyaltyDiscount: null,
allAppliedDiscounts: [], allAppliedDiscounts: [],
} appliedDiscountsByPrivilegeId: new Map(),
};
const privilegeAmountById = new Map<string, number>();
const servicePriceByKey = new Map<string, number>();
const allAppliedDiscounts = new Set<Discount>();
// Формируем корзину
tariffs.forEach(tariff => { tariffs.forEach(tariff => {
if (tariff.privileges === undefined) return if (tariff.privileges === undefined) return;
if ( if (
(tariff.price || 0) > 0 (tariff.price || 0) > 0
&& tariff.privileges.length !== 1 && tariff.privileges.length !== 1
) throw new Error("Price is defined for tariff with several") ) throw new Error("Price is defined for tariff with several privileges");
let serviceData =cartData.services.find(service => (service.serviceKey === "custom" && tariff.isCustom)) let serviceData = cartData.services.find(service => (service.serviceKey === "custom" && tariff.isCustom));
if (!serviceData && !tariff.isCustom) serviceData = cartData.services.find(service => service.serviceKey === tariff.privileges[0]?.serviceKey) if (!serviceData && !tariff.isCustom) serviceData = cartData.services.find(service => service.serviceKey === tariff.privileges[0]?.serviceKey);
if (!serviceData) { if (!serviceData) {
serviceData = { serviceData = {
serviceKey: tariff.isCustom ?"custom" :tariff.privileges[0]?.serviceKey, serviceKey: tariff.isCustom ? "custom" : tariff.privileges[0]?.serviceKey,
tariffs: [], tariffs: [],
price: 0, price: 0,
appliedServiceDiscount: null, appliedServiceDiscount: null,
} };
cartData.services.push(serviceData) cartData.services.push(serviceData);
} }
const tariffCartData: TariffCartData = { const tariffCartData: TariffCartData = {
@ -152,13 +43,12 @@ export function calcCart(tariffs: Tariff[], discounts: Discount[], purchasesAmou
privileges: [], privileges: [],
id: tariff._id, id: tariff._id,
name: tariff.name, name: tariff.name,
} };
serviceData.tariffs.push(tariffCartData) serviceData.tariffs.push(tariffCartData);
tariff.privileges.forEach(privilege => { tariff.privileges.forEach(privilege => {
let privilegePrice = privilege.amount * privilege.price let privilegePrice = privilege.amount * privilege.price;
if (!tariff.price) tariffCartData.price += privilegePrice if (tariff.price) privilegePrice = tariff.price;
else privilegePrice = tariff.price
const privilegeCartData: PrivilegeCartData = { const privilegeCartData: PrivilegeCartData = {
serviceKey: privilege.serviceKey, serviceKey: privilege.serviceKey,
@ -166,47 +56,158 @@ export function calcCart(tariffs: Tariff[], discounts: Discount[], purchasesAmou
description: privilege.description, description: privilege.description,
price: privilegePrice, price: privilegePrice,
amount: privilege.amount, amount: privilege.amount,
appliedPrivilegeDiscount: null, };
}
tariffCartData.privileges.push(privilegeCartData) privilegeAmountById.set(
cartData.priceAfterDiscounts += privilegePrice privilege.privilegeId,
cartData.itemCount++ privilege.amount + (privilegeAmountById.get(privilege.privilegeId) || 0)
}) );
servicePriceByKey.set(
privilege.serviceKey,
privilegePrice + (servicePriceByKey.get(privilege.serviceKey) || 0)
);
cartData.appliedDiscountsByPrivilegeId.set(privilege.privilegeId, new Set());
cartData.priceBeforeDiscounts += tariffCartData.price tariffCartData.privileges.push(privilegeCartData);
serviceData.price += tariffCartData.price });
}) });
const nkoDiscount = findNkoDiscount(discounts) cartData.priceBeforeDiscounts = Array.from(servicePriceByKey.values()).reduce((a, b) => a + b, 0);
const nkoDiscount = findNkoDiscount(discounts);
if (isUserNko && nkoDiscount) { if (isUserNko && nkoDiscount) {
applyNkoDiscount(cartData, nkoDiscount) cartData.priceAfterDiscounts *= nkoDiscount.Target.Factor;
} else { allAppliedDiscounts.add(nkoDiscount);
applyPrivilegeDiscounts(cartData, discounts)
applyServiceDiscounts(cartData, discounts) cartData.services.forEach(service => {
applyCartDiscount(cartData, discounts) service.tariffs.forEach(tariff => {
applyLoyaltyDiscount(cartData, discounts, purchasesAmount) tariff.privileges.forEach(privilege => {
const privilegeAppliedDiscounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId);
if (!privilegeAppliedDiscounts) throw new Error(`Privilege id ${privilege.privilegeId} not found in appliedDiscountsByPrivilegeId`);
privilegeAppliedDiscounts.add(nkoDiscount);
});
});
});
applyDiscountsToCart(cartData);
cartData.allAppliedDiscounts = Array.from(allAppliedDiscounts);
return cartData;
} }
cartData.allAppliedDiscounts = Array.from(new Set(cartData.allAppliedDiscounts)) // Ищем и собираем скидки в appliedDiscountsByPrivilegeId
console.log('CD', cartData) cartData.services.forEach(service => {
return cartData service.tariffs.forEach(tariff => {
tariff.privileges.forEach(privilege => {
const privilegeDiscount = findPrivilegeDiscount(privilege.privilegeId, privilegeAmountById.get(privilege.privilegeId) || 0, discounts, userId);
if (!privilegeDiscount) return;
allAppliedDiscounts.add(privilegeDiscount);
const privilegeAppliedDiscounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId);
if (!privilegeAppliedDiscounts) throw new Error(`Privilege id ${privilege.privilegeId} not found in appliedDiscountsByPrivilegeId`);
privilegeAppliedDiscounts.add(privilegeDiscount);
});
});
});
cartData.services.forEach(service => {
service.tariffs.map(tariff => {
tariff.privileges.forEach(privilege => {
const servicePrice = servicePriceByKey.get(privilege.serviceKey);
if (!servicePrice) return;
const serviceDiscount = findServiceDiscount(privilege.serviceKey, servicePrice, discounts, userId);
if (!serviceDiscount) return;
allAppliedDiscounts.add(serviceDiscount);
service.appliedServiceDiscount = serviceDiscount;
const privilegeAppliedDiscounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId);
if (!privilegeAppliedDiscounts) throw new Error(`Privilege id ${privilege.privilegeId} not found in appliedDiscountsByPrivilegeId`);
privilegeAppliedDiscounts.add(serviceDiscount);
});
});
});
const intermediateCartData = structuredClone(cartData);
applyDiscountsToCart(intermediateCartData);
const intermediateCartPriceAfterDiscounts = intermediateCartData.priceAfterDiscounts;
const cartDiscount = findCartDiscount(intermediateCartPriceAfterDiscounts, discounts);
if (cartDiscount) {
cartData.services.forEach(service => {
service.tariffs.forEach(tariff => {
tariff.privileges.forEach(privilege => {
const privilegeAppliedDiscounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId);
if (!privilegeAppliedDiscounts) throw new Error(`Privilege id ${privilege.privilegeId} not found in appliedDiscountsByPrivilegeId`);
if (!Array.from(privilegeAppliedDiscounts)[0]?.Condition.User) privilegeAppliedDiscounts.add(cartDiscount);
});
});
});
allAppliedDiscounts.add(cartDiscount);
cartData.appliedCartPurchasesDiscount = cartDiscount;
}
const loyalDiscount = findLoyaltyDiscount(purchasesAmount, discounts);
if (loyalDiscount) {
cartData.services.forEach(service => {
service.tariffs.forEach(tariff => {
tariff.privileges.forEach(privilege => {
const privilegeAppliedDiscounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId);
if (!privilegeAppliedDiscounts) throw new Error(`Privilege id ${privilege.privilegeId} not found in appliedDiscountsByPrivilegeId`);
if (!Array.from(privilegeAppliedDiscounts)[0]?.Condition.User) privilegeAppliedDiscounts.add(loyalDiscount);
});
});
});
allAppliedDiscounts.add(loyalDiscount);
cartData.appliedLoyaltyDiscount = loyalDiscount;
}
// Применяем скидки
applyDiscountsToCart(cartData);
cartData.allAppliedDiscounts = Array.from(allAppliedDiscounts);
return Object.freeze(cartData);
} }
function applyNkoDiscount(cartData: CartData, discount: Discount) { function applyDiscountsToCart(cartData: CartData) {
cartData.priceAfterDiscounts *= discount.Target.Factor cartData.services.forEach(service => {
cartData.allAppliedDiscounts.push(discount) let servicePrice = 0;
}
export function findNkoDiscount(discounts: Discount[]): Discount | null { service.tariffs.forEach(tariff => {
const applicableDiscounts = discounts.filter(discount => discount.Condition.UserType === "nko") let privilegePriceSum = 0;
let tariffDiscountFactor = 1;
if (!applicableDiscounts.length) return null tariff.privileges.forEach(privilege => {
const discounts = cartData.appliedDiscountsByPrivilegeId.get(privilege.privilegeId) ?? [];
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => { const discountsFactor = Array.from(discounts).reduce((factor, discount) => factor * findDiscountFactor(discount), 1);
return current.Condition.CartPurchasesAmount > prev.Condition.CartPurchasesAmount ? current : prev privilege.price *= discountsFactor;
}) tariffDiscountFactor *= discountsFactor;
return maxValueDiscount privilegePriceSum += privilege.price;
} });
if (tariff.price) tariff.price *= tariffDiscountFactor;
else tariff.price = privilegePriceSum;
servicePrice += tariff.price;
});
service.price = servicePrice;
cartData.priceAfterDiscounts += servicePrice;
});
}

49
src/utils/calcCart/calcCustomTariffPrice.ts Normal file
View File

@ -0,0 +1,49 @@
import { Discount, Privilege, PrivilegeWithAmount, Tariff } from "@frontend/kitui";
import { CustomTariffUserValues } from "@root/model/customTariffs";
import { calcCart } from "./calcCart";
export function calcCustomTariffPrice(
customTariffUserValues: CustomTariffUserValues,
servicePrivileges: Privilege[],
cartTariffs: Tariff[],
discounts: Discount[],
purchasesAmount: number,
isUserNko: boolean,
) {
const privileges = new Array<PrivilegeWithAmount>();
const priceBeforeDiscounts = servicePrivileges.reduce((price, privilege) => {
const amount = customTariffUserValues?.[privilege._id] ?? 0;
return price + privilege.price * amount;
}, 0);
Object.keys(customTariffUserValues).forEach(privilegeId => {
const pwa = servicePrivileges.find(p => p._id === privilegeId);
if (!pwa) return;
if (customTariffUserValues[privilegeId] > 0) privileges.push({
...pwa,
amount: customTariffUserValues[privilegeId]
});
});
const customTariff: Tariff = {
_id: crypto.randomUUID(),
name: "",
price: 0,
description: "",
isCustom: true,
isDeleted: false,
privileges: privileges,
};
const cart = calcCart([...cartTariffs, customTariff], discounts, purchasesAmount, isUserNko);
const customService = cart.services.flatMap(service => service.tariffs).find(tariff => tariff.id === customTariff._id);
if (!customService) throw new Error("Custom service not found in cart");
return {
priceBeforeDiscounts,
priceAfterDiscounts: customService.price,
};
}

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

@ -0,0 +1,182 @@
import { Discount, findDiscountFactor } from "@frontend/kitui";
export type CartData = {
services: ServiceCartData[];
priceBeforeDiscounts: number;
priceAfterDiscounts: number;
appliedCartPurchasesDiscount: Discount | null;
appliedLoyaltyDiscount: Discount | null;
allAppliedDiscounts: Discount[];
appliedDiscountsByPrivilegeId: Map<string, Set<Discount>>;
};
export type ServiceCartData = {
serviceKey: string;
tariffs: TariffCartData[];
price: number;
appliedServiceDiscount: Discount | null;
};
export type TariffCartData = {
name: string;
id: string;
price: number;
isCustom: boolean;
privileges: PrivilegeCartData[];
};
export type PrivilegeCartData = {
serviceKey: string;
privilegeId: string;
description: string;
price: number;
amount: number;
};
export function findPrivilegeDiscount(
privilegeId: string,
privilegePrice: number,
discounts: Discount[],
userId: string,
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
if (discount.Condition.User !== "" && discount.Condition.User === userId) return true;
const conditionMinPrice = parseFloat(discount.Condition.Term);
if (!isFinite(conditionMinPrice)) throw new Error(`Couldn't parse Discount.Condition.Term: ${discount.Condition.Term}`);
return (
discount.Layer === 1 &&
privilegeId === discount.Condition.Product &&
privilegePrice >= conditionMinPrice
);
});
if (!applicableDiscounts.length) return null;
let maxValueDiscount: Discount = applicableDiscounts[0];
for (const discount of applicableDiscounts) {
if (discount.Condition.User !== "" && discount.Condition.User === userId) {
maxValueDiscount = discount;
break;
}
if (Number(discount.Condition.Term) > Number(maxValueDiscount.Condition.Term)) {
maxValueDiscount = discount;
}
}
return maxValueDiscount;
}
export function findServiceDiscount(
serviceKey: string,
currentPrice: number,
discounts: Discount[],
userId: string,
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
if (discount.Condition.User !== "" && discount.Condition.User === userId) return true;
return (
discount.Layer === 2 &&
discount.Condition.Group === serviceKey &&
currentPrice >= Number(discount.Condition.PriceFrom)
);
});
if (!applicableDiscounts.length) return null;
let maxValueDiscount: Discount = applicableDiscounts[0];
for (const discount of applicableDiscounts) {
if (discount.Condition.User !== "" && discount.Condition.User === userId) {
maxValueDiscount = discount;
break;
}
if (Number(discount.Condition.PriceFrom) > Number(maxValueDiscount.Condition.PriceFrom)) {
maxValueDiscount = discount;
}
}
return maxValueDiscount;
}
export function applyCartDiscount(
cartData: CartData,
discounts: Discount[],
) {
const cartDiscount = findCartDiscount(cartData.priceAfterDiscounts, discounts);
if (!cartDiscount) return;
cartData.priceAfterDiscounts *= findDiscountFactor(cartDiscount);
cartData.allAppliedDiscounts.push(cartDiscount);
cartData.appliedCartPurchasesDiscount = cartDiscount;
}
export function findCartDiscount(
cartPurchasesAmount: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 3 &&
cartPurchasesAmount >= Number(discount.Condition.CartPurchasesAmount)
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return Number(current.Condition.CartPurchasesAmount) > Number(prev.Condition.CartPurchasesAmount) ? current : prev;
});
return maxValueDiscount;
}
export function applyLoyaltyDiscount(
cartData: CartData,
discounts: Discount[],
purchasesAmount: number,
) {
const loyalDiscount = findLoyaltyDiscount(purchasesAmount, discounts);
if (!loyalDiscount) return;
cartData.priceAfterDiscounts *= findDiscountFactor(loyalDiscount);
cartData.allAppliedDiscounts.push(loyalDiscount);
cartData.appliedLoyaltyDiscount = loyalDiscount;
}
export function findLoyaltyDiscount(
purchasesAmount: number,
discounts: Discount[],
): Discount | null {
const applicableDiscounts = discounts.filter(discount => {
return (
discount.Layer === 4 &&
discount.Condition.UserType !== "nko" &&
purchasesAmount >= discount.Condition.PurchasesAmount
);
});
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return current.Condition.PurchasesAmount > prev.Condition.PurchasesAmount ? current : prev;
});
return maxValueDiscount;
}
export function findNkoDiscount(discounts: Discount[]): Discount | null {
const applicableDiscounts = discounts.filter(discount => discount.Condition.UserType === "nko");
if (!applicableDiscounts.length) return null;
const maxValueDiscount = applicableDiscounts.reduce((prev, current) => {
return current.Condition.CartPurchasesAmount > prev.Condition.CartPurchasesAmount ? current : prev;
});
return maxValueDiscount;
}

60
src/utils/calcTariffPrices.ts
View File

@ -1,41 +1,33 @@
import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui" import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui";
import { calcCart } from "./calcCart/calcCart" import { calcCart } from "./calcCart/calcCart";
export function calcIndividualTariffPrices( export function calcIndividualTariffPrices(
tariff: Tariff, targetTariff: Tariff,
discounts: Discount[], discounts: Discount[],
purchasesAmount: number, purchasesAmount: number,
currentTariffs: Tariff[], currentTariffs: Tariff[],
isUserNko?: boolean, isUserNko?: boolean,
): { ): {
priceBeforeDiscounts: number; priceBeforeDiscounts: number;
priceAfterDiscounts: number; priceAfterDiscounts: number;
} { } {
const priceBeforeDiscounts = const priceBeforeDiscounts = targetTariff.price || targetTariff.privileges.reduce(
tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0) (sum, privilege) => sum + privilege.amount * privilege.price,
let priceAfterDiscounts = 0 0
);
const cart = calcCart([...currentTariffs, tariff], discounts, purchasesAmount, isUserNko) const cart = calcCart([...currentTariffs, targetTariff], discounts, purchasesAmount, isUserNko);
console.log('CITP', cart)
if (cart.allAppliedDiscounts[0]?.Target.Overhelm) return {priceBeforeDiscounts: priceBeforeDiscounts, priceAfterDiscounts: priceBeforeDiscounts * cart.allAppliedDiscounts[0].Target.Factor }
cart.services.forEach(s => {
if (s.serviceKey === tariff.privileges[0].serviceKey) {
let processed = false
s.tariffs.forEach(t => {
if (t.id === tariff._id && !processed) {
processed = true
t.privileges.forEach(p => priceAfterDiscounts+=p.price)
}
})
}
})
priceAfterDiscounts*=findDiscountFactor(cart.appliedLoyaltyDiscount)
priceAfterDiscounts*=findDiscountFactor(cart.appliedCartPurchasesDiscount)
if (priceAfterDiscounts === 0) priceAfterDiscounts = cart.priceAfterDiscounts const tariffCartData = cart.services.flatMap(service => service.tariffs).find(tariff => tariff.id === targetTariff._id);
// cart.allAppliedDiscounts.forEach((discount) => { if (!tariffCartData) throw new Error(`Target tariff ${targetTariff._id} not found in cart`);
// priceAfterDiscounts *= findDiscountFactor(discount)
// }) if (cart.allAppliedDiscounts[0]?.Target.Overhelm) return {
//priceAfterDiscounts = cart.priceAfterDiscounts priceBeforeDiscounts: priceBeforeDiscounts,
return { priceBeforeDiscounts, priceAfterDiscounts } priceAfterDiscounts: priceBeforeDiscounts * cart.allAppliedDiscounts[0].Target.Factor
};
return {
priceBeforeDiscounts,
priceAfterDiscounts: tariffCartData.price,
};
} }

2
src/utils/handleComponentError.ts
View File

@ -6,7 +6,7 @@ interface ComponentError {
timestamp: number; timestamp: number;
message: string; message: string;
callStack: string | undefined; callStack: string | undefined;
componentStack: string; componentStack: string | null | undefined;
} }
export function handleComponentError(error: Error, info: ErrorInfo) { export function handleComponentError(error: Error, info: ErrorInfo) {

93
src/utils/hooks/useCart.ts
View File

@ -1,83 +1,20 @@
import { Tariff, devlog } from "@frontend/kitui" import { useDiscountStore } from "@root/stores/discounts";
import { getTariffById } from "@root/api/tariff" import { useUserStore } from "@root/stores/user";
import { import { useMemo } from "react";
addCartTariffs, import { calcCart } from "../calcCart/calcCart";
removeMissingCartTariffs, import { CartData } from "../calcCart/utils";
setCartTariffStatus, import { useCartTariffs } from "./useCartTariffs";
useCartStore,
} from "@root/stores/cart"
import { calcCart } from "@root/utils/calcCart/calcCart"
import { useDiscountStore } from "@root/stores/discounts"
import { useTariffStore } from "@root/stores/tariffs"
import { removeTariffFromCart, useUserStore } from "@root/stores/user"
import { useEffect } from "react"
export function useCart() { export function useCart(): CartData {
const tariffs = useTariffStore((state) => state.tariffs) const cartTariffs = useCartTariffs();
const cartTariffMap = useCartStore((state) => state.cartTariffMap) const discounts = useDiscountStore((state) => state.discounts);
const cartTariffIds = useUserStore((state) => state.userAccount?.cart) const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.spent) ?? 0;
const cart = useCartStore((state) => state.cart) const isUserNko = useUserStore(state => state.userAccount?.status) === "nko";
const discounts = useDiscountStore((state) => state.discounts)
const purchasesAmount =
useUserStore((state) => state.userAccount?.wallet.spent) ?? 0
const isUserNko = useUserStore(state => state.userAccount?.status) === "nko"
useEffect(() => { const cart = useMemo(() => {
function addTariffsToCart() { return calcCart(cartTariffs ?? [], discounts, purchasesAmount, isUserNko);
const knownTariffs: Tariff[] = [] }, [cartTariffs, discounts, purchasesAmount, isUserNko]);
cartTariffIds?.forEach(async (tariffId) => { return cart;
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")
const [tariffByIdResponse, tariffByIdError, tariffByIdStatus] =
await getTariffById(tariffId)
if (tariffByIdError) {
devlog(tariffByIdError)
setCartTariffStatus(tariffId, "not found")
if (tariffByIdStatus === 404) {
try {
await removeTariffFromCart(tariffId)
devlog(
`Unexistant tariff with id ${tariffId} deleted from cart`
)
} catch (error) {
devlog("Error deleting unexistant tariff from cart", error)
}
}
return
}
if (tariffByIdResponse) {
addCartTariffs([tariffByIdResponse], discounts, purchasesAmount, isUserNko)
}
}
})
if (knownTariffs.length > 0)
addCartTariffs(knownTariffs, discounts, purchasesAmount, isUserNko)
}
addTariffsToCart()
}, [cartTariffIds, cartTariffMap, discounts, isUserNko, purchasesAmount, tariffs])
useEffect(
function cleanUpCart() {
if (cartTariffIds)
removeMissingCartTariffs(cartTariffIds, discounts, purchasesAmount, isUserNko)
},
[cartTariffIds, discounts, isUserNko, purchasesAmount]
)
const currentTariffs = Object.values(cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
return calcCart(currentTariffs, discounts,purchasesAmount,isUserNko)
} }

17
src/utils/hooks/useCartTariffs.ts Normal file
View File

@ -0,0 +1,17 @@
import { getTariffArray } from "@root/api/tariff";
import { useUserStore } from "@root/stores/user";
import useSWR from "swr";
export function useCartTariffs() {
const cartTariffIds = useUserStore((state) => state.userAccount?.cart);
const { data } = useSWR(
["cartTariffs", cartTariffIds],
key => getTariffArray(key[1]),
{
keepPreviousData: true,
}
);
return data;
}

2
tsconfig.json
View File

@ -1,7 +1,7 @@
{ {
"extends": "./tsconfig.extend.json", "extends": "./tsconfig.extend.json",
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ESNext",
"lib": ["es5", "dom", "dom.iterable", "esnext"], "lib": ["es5", "dom", "dom.iterable", "esnext"],
"types": ["node"], "types": ["node"],
"allowJs": true, "allowJs": true,

23973
yarn.lock
View File

File diff suppressed because it is too large Load Diff