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

merge

Browse Source
This commit is contained in:
Nastya 2023-10-28 02:43:29 +03:00
commit 38d3e3b535
18 changed files with 351 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -14,7 +14,7 @@
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@frontend/kitui": "1.0.53",
"@frontend/kitui": "1.0.54",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
"@popperjs/core": "^2.11.8",
@ -29,6 +29,7 @@
"pdfjs-dist": "3.6.172",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.11",
"react-pdf": "^7.1.2",
"react-router-dom": "^6.15.0",
"react-slick": "^0.29.0",

25
src/components/Drawers.tsx
View File

@ -30,8 +30,11 @@ import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
import { payCart } from "@root/api/cart";
import { enqueueSnackbar } from "notistack";
import { Link, useNavigate } from "react-router-dom";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
export default function Drawers() {
function Drawers() {
const [openNotificationsModal, setOpenNotificationsModal] =
useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
@ -57,11 +60,14 @@ export default function Drawers() {
const [payCartResponse, payCartError] = await payCart();
if (payCartError) {
if (payCartError.includes("insufficient funds: ")) {
const notEnoughMoneyAmount = parseInt(
payCartError.replace("insufficient funds: ", "")
payCartError.replace(/^.*insufficient\sfunds:\s(?=\d+$)/, "")
);
setNotEnoughMoneyAmount(notEnoughMoneyAmount);
}
setLoading(false);
return enqueueSnackbar(payCartError);
@ -72,6 +78,7 @@ export default function Drawers() {
}
setLoading(false);
closeCartDrawer();
}
function handleReplenishWallet() {
@ -303,8 +310,6 @@ export default function Drawers() {
</Box>
<Button
variant="pena-contained-dark"
component={Link}
to="/cart"
onClick={() =>
notEnoughMoneyAmount === 0
? !loading && handlePayClick()
@ -322,3 +327,15 @@ export default function Drawers() {
</Box>
);
}
export default withErrorBoundary(Drawers, {
fallback: (
<Box sx={{
display: "flex",
alignItems: "center",
}}>
<ErrorOutlineIcon color="error" />
</Box>
),
onError: handleComponentError,
})

5
src/components/TotalPrice.tsx
View File

@ -38,11 +38,14 @@ export default function TotalPrice({
const [payCartResponse, payCartError] = await payCart();
if (payCartError) {
if (payCartError.includes("insufficient funds: ")) {
const notEnoughMoneyAmount = parseInt(
payCartError.replace("insufficient funds: ", "")
payCartError.replace(/^.*insufficient\sfunds:\s(?=\d+$)/, "")
);
setNotEnoughMoneyAmount(notEnoughMoneyAmount);
}
setLoading(false);
return enqueueSnackbar(payCartError);

8
src/components/icons/File.tsx
View File

@ -20,10 +20,10 @@ export default function CustomIcon() {
>
<svg width="24" height="24" viewBox="0 0 24 24" stroke="inherit" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.2002" y="0.75" width="17.8" height="22.25" rx="4" stroke-width="1.5"/>
<path d="M7.65039 6.3125H16.5504" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7.65039 11.875H16.5504" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7.65039 17.4375H12.1004" stroke-width="1.5" stroke-linecap="round"/>
<rect x="3.2002" y="0.75" width="17.8" height="22.25" rx="4" strokeWidth="1.5"/>
<path d="M7.65039 6.3125H16.5504" strokeWidth="1.5" strokeLinecap="round"/>
<path d="M7.65039 11.875H16.5504" strokeWidth="1.5" strokeLinecap="round"/>
<path d="M7.65039 17.4375H12.1004" strokeWidth="1.5" strokeLinecap="round"/>
</svg>
</Box>
);

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

@ -1,7 +1,9 @@
import { useEffect } from "react";
import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import InputTextfield from "@components/InputTextfield";
import PasswordInput from "@components/passwordInput";
import UserFields from "./UserFields";
import SectionWrapper from "@components/SectionWrapper";
import { openDocumentsDialog, sendUserData, setSettingsField, useUserStore } from "@root/stores/user";
import UnderlinedButtonWithIcon from "@root/components/UnderlinedButtonWithIcon";
import UploadIcon from "@root/components/icons/UploadIcon";
@ -12,8 +14,10 @@ import { getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { VerificationStatus } from "@root/model/account";
import { verify } from "./helper";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
export default function AccountSettings() {
function AccountSettings() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@ -30,12 +34,10 @@ export default function AccountSettings() {
verify(userId);
}, []);
const verificationStatusData: Record<VerificationStatus, { text: string; color: string }> = {
verificated: { text: "Верификация пройдена", color: "#0D9F00" },
waiting: { text: "В ожидании верификации", color: "#F18956" },
notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
const textFieldProps = {
gap: upMd ? "16px" : "10px",
color: "#F2F3F7",
bold: true,
};
function handleSendDataClick() {
@ -49,33 +51,6 @@ export default function AccountSettings() {
});
}
function VerificationIndicator({
verificationStatus,
sx,
}: {
verificationStatus: VerificationStatus;
sx?: SxProps<Theme>;
}) {
return (
<Box
sx={{
py: "14px",
px: "8.5px",
borderWidth: "1px",
borderStyle: "solid",
color: verificationStatusData[verificationStatus].color,
borderColor: verificationStatusData[verificationStatus].color,
borderRadius: "8px",
textAlign: "center",
...sx,
}}
>
<Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
</Box>
);
}
console.log("компонент настройки юзера")
return (
<SectionWrapper
maxWidth="lg"
@ -166,3 +141,40 @@ export default function AccountSettings() {
</SectionWrapper>
);
}
export default withErrorBoundary(AccountSettings, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении настроек аккаунта</Typography>,
onError: handleComponentError,
})
const verificationStatusData: Record<VerificationStatus, { text: string; color: string; }> = {
verificated: { text: "Верификация пройдена", color: "#0D9F00" },
waiting: { text: "В ожидании верификации", color: "#F18956" },
notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
};
function VerificationIndicator({
verificationStatus,
sx,
}: {
verificationStatus: VerificationStatus;
sx?: SxProps<Theme>;
}) {
return (
<Box
sx={{
py: "14px",
px: "8.5px",
borderWidth: "1px",
borderStyle: "solid",
color: verificationStatusData[verificationStatus].color,
borderColor: verificationStatusData[verificationStatus].color,
borderRadius: "8px",
textAlign: "center",
...sx,
}}
>
<Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
</Box>
);
}

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

@ -6,8 +6,10 @@ import CustomWrapper from "./CustomWrapper";
import { useCart } from "@root/utils/hooks/useCart";
import { useLocation } from "react-router-dom";
import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
import { handleComponentError } from "@root/utils/handleComponentError";
import { withErrorBoundary } from "react-error-boundary";
export default function Cart() {
function Cart() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(550));
@ -71,3 +73,8 @@ export default function Cart() {
</SectionWrapper>
);
}
export default withErrorBoundary(Cart, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении корзины</Typography>,
onError: handleComponentError,
})

9
src/pages/History/index.tsx
View File

@ -11,6 +11,8 @@ import { HISTORY } from "./historyMocks";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { useHistoryData } from "@root/utils/hooks/useHistoryData";
import { isArray } from "cypress/types/lodash";
import { ErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
@ -67,6 +69,12 @@ export default function History() {
) : (
<Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
)}
<ErrorBoundary
fallback={
<Typography mt="8px">Ошибка загрузки истории</Typography>
}
onError={handleComponentError}
>
{historyData?.records
.filter((e) => {
e.createdAt = extractDateFromString(e.createdAt)
@ -84,6 +92,7 @@ export default function History() {
/>
</Box>
)})}
</ErrorBoundary>
</SectionWrapper>
);
}

9
src/pages/SavedTariffs/index.tsx
View File

@ -5,8 +5,10 @@ import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import SaveWrapper from "./SaveWrapper";
import { useTariffStore } from "@root/stores/tariffs";
import { type Tariff } from "@frontend/kitui";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
export default function SavedTariffs() {
function SavedTariffs() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(550));
@ -65,3 +67,8 @@ export default function SavedTariffs() {
</SectionWrapper>
);
}
export default withErrorBoundary(SavedTariffs, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении сохраненных тарифов</Typography>,
onError: handleComponentError,
})

11
src/pages/Support/SupportChat.tsx
View File

@ -35,8 +35,10 @@ import {
useTicketMessages,
} from "@frontend/kitui";
import { shownMessage, sendTicketMessage } from "@root/api/ticket";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
export default function SupportChat() {
function SupportChat() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.up(460));
@ -128,7 +130,7 @@ export default function SupportChat() {
async function handleSendMessage() {
if (!ticket || !messageField) return;
const [_, sendTicketMessageError] = await sendTicketMessage(
const [, sendTicketMessageError] = await sendTicketMessage(
ticket.id,
messageField
);
@ -318,3 +320,8 @@ export default function SupportChat() {
</Box>
);
}
export default withErrorBoundary(SupportChat, {
fallback: <Typography mt="8px" textAlign="center">Не удалось отобразить чат</Typography>,
onError: handleComponentError,
})

10
src/pages/Support/TicketList/TicketList.tsx
View File

@ -5,13 +5,16 @@ import {
Box,
useTheme,
Pagination,
Typography,
} from "@mui/material";
import TicketCard from "./TicketCard";
import { setTicketApiPage, useTicketStore } from "@root/stores/tickets";
import { Ticket } from "@frontend/kitui";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
export default function TicketList() {
function TicketList() {
const theme = useTheme();
const tickets = useTicketStore((state) => state.tickets);
const ticketCount = useTicketStore((state) => state.ticketCount);
@ -87,3 +90,8 @@ function sortTicketsByUpdateTime(ticket1: Ticket, ticket2: Ticket) {
const date2 = new Date(ticket2.updated_at).getTime();
return date2 - date1;
}
export default withErrorBoundary(TicketList, {
fallback: <Typography mt="8px" textAlign="center">Ошибка загрузки тикетов</Typography>,
onError: handleComponentError,
});

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

@ -1,4 +1,4 @@
import { Box, IconButton, useMediaQuery, useTheme } from "@mui/material";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Link } from "react-router-dom";
import SectionWrapper from "@components/SectionWrapper";
import { useCustomTariffsStore } from "@root/stores/customTariffs";
@ -8,8 +8,10 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TotalPrice from "@root/components/TotalPrice";
import { serviceNameByKey } from "@root/utils/serviceKeys";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
export default function TariffConstructor() {
function TariffConstructor() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@ -84,3 +86,8 @@ export default function TariffConstructor() {
</SectionWrapper>
);
}
export default withErrorBoundary(TariffConstructor, {
fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении кастомных тарифов</Typography>,
onError: handleComponentError,
})

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

@ -28,6 +28,7 @@ export default function TariffPrivilegeSlider({ privilege }: Props) {
const discounts = useDiscountStore((state) => state.discounts);
const currentCartTotal = useCartStore((state) => state.cart.priceAfterDiscounts);
const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.purchasesAmount) ?? 0;
const isUserNko = useUserStore(state => state.userAccount?.status) === "nko";
const [value, setValue] = useState<number>(userValue);
const throttledValue = useThrottle(value, 200);
@ -39,10 +40,11 @@ export default function TariffPrivilegeSlider({ privilege }: Props) {
throttledValue,
discounts,
currentCartTotal,
purchasesAmount
purchasesAmount,
isUserNko,
);
},
[currentCartTotal, discounts, purchasesAmount, privilege._id, privilege.serviceKey, throttledValue]
[currentCartTotal, discounts, purchasesAmount, privilege._id, privilege.serviceKey, throttledValue, isUserNko]
);
function handleSliderChange(value: number | number[]) {

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

@ -18,6 +18,8 @@ import { Slider } from "./slider";
import { useCartStore } from "@root/stores/cart";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { usePrevLocation } from "@root/utils/hooks/handleCustomBackNavigation";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";
const subPages = ["Шаблонизатор", "Опросник", "Сокращатель ссылок"];
@ -26,7 +28,7 @@ const StepperText: Record<string, string> = {
time: "Тарифы на время",
};
export default function TariffPage() {
function TariffPage() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -178,3 +180,8 @@ export default function TariffPage() {
</SectionWrapper>
);
}
export default withErrorBoundary(TariffPage, {
fallback: <Typography mt="8px" textAlign="center">Ошибка загрузки тарифов</Typography>,
onError: handleComponentError,
})

13
src/stores/customTariffs.ts
View File

@ -5,6 +5,7 @@ import { produce } from "immer";
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { Discount, PrivilegeWithAmount, findCartDiscount, findDiscountFactor, findLoyaltyDiscount, findPrivilegeDiscount, findServiceDiscount } from "@frontend/kitui";
import { findNkoDiscount } from "@root/utils/calcCart/calcCart";
interface CustomTariffsStore {
@ -50,6 +51,7 @@ export const setCustomTariffsUserValue = (
discounts: Discount[],
currentCartTotal: number,
purchasesAmount: number,
isUserNko: boolean,
) => useCustomTariffsStore.setState(
produce<CustomTariffsStore>(state => {
state.userValuesMap[serviceKey] ??= {};
@ -58,6 +60,16 @@ export const setCustomTariffsUserValue = (
let priceWithoutDiscounts = 0;
let priceAfterDiscounts = 0;
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;
priceWithoutDiscounts += privilege.price * amount;
@ -74,6 +86,7 @@ export const setCustomTariffsUserValue = (
const loyaltyDiscount = findLoyaltyDiscount(purchasesAmount, discounts);
priceAfterDiscounts *= findDiscountFactor(loyaltyDiscount);
}
state.summaryPriceBeforeDiscountsMap[serviceKey] = priceWithoutDiscounts;
state.summaryPriceAfterDiscountsMap[serviceKey] = priceAfterDiscounts;

2
src/stores/user.ts
View File

@ -279,7 +279,7 @@ export const sendUserData = async () => {
export const addTariffToCart = async (tariffId: string) => {
const [patchCartResponse, patchCartError] = await patchCart(tariffId);
if (patchCartError !== undefined) {
if (patchCartError === undefined) {
setCart(patchCartResponse);
}
return({patchCartResponse, patchCartError})

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

@ -75,7 +75,7 @@ function applyNkoDiscount(cartData: CartData, discount: Discount) {
cartData.allAppliedDiscounts.push(discount);
}
function findNkoDiscount(discounts: Discount[]): Discount | null {
export function findNkoDiscount(discounts: Discount[]): Discount | null {
const applicableDiscounts = discounts.filter(discount => discount.Condition.UserType === "nko");
if (!applicableDiscounts.length) return null;

44
src/utils/handleComponentError.ts Normal file
View File

@ -0,0 +1,44 @@
import { makeRequest } from "@frontend/kitui";
import { ErrorInfo } from "react";
interface ComponentError {
timestamp: number;
message: string;
callStack: string | undefined;
componentStack: string;
}
export function handleComponentError(error: Error, info: ErrorInfo) {
const componentError: ComponentError = {
timestamp: Math.floor(Date.now() / 1000),
message: error.message,
callStack: error.stack,
componentStack: info.componentStack,
};
queueErrorRequest(componentError);
}
let errorsQueue: ComponentError[] = [];
let timeoutId: ReturnType<typeof setTimeout>;
function queueErrorRequest(error: ComponentError) {
errorsQueue.push(error);
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
sendErrorsToServer();
}, 1000);
}
async function sendErrorsToServer() {
// makeRequest({
// url: "",
// method: "POST",
// body: errorsQueue,
// useToken: true,
// });
console.log(`Fake-sending ${errorsQueue.length} errors to server`, errorsQueue);
errorsQueue = [];
}

15
yarn.lock
View File

@ -1532,10 +1532,10 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@frontend/kitui@1.0.53":
version "1.0.53"
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.53.tgz#a663052d300b9e3c588346c646f276c9aec7de5d"
integrity sha1-pmMFLTALnjxYg0bGRvJ2ya7H3l0=
"@frontend/kitui@1.0.54":
version "1.0.54"
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.54.tgz#0235d5a8effb9b92351471c3c7775f28cb2839f6"
integrity sha1-AjXVqO/7m5I1FHHDx3dfKMsoOfY=
dependencies:
immer "^10.0.2"
reconnecting-eventsource "^1.6.2"
@ -9448,6 +9448,13 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-error-boundary@^4.0.11:
version "4.0.11"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
dependencies:
"@babel/runtime" "^7.12.5"
react-error-overlay@^6.0.11:
version "6.0.11"
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"