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

Merge branch 'dev' into 'main'

Browse Source 
Dev

See merge request frontend/marketplace!63
This commit is contained in:
Nastya 2023-10-20 17:06:48 +00:00
commit e2f7668261
18 changed files with 188 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/cart.ts
View File

@ -1,4 +1,5 @@
import { UserAccount, makeRequest } from "@frontend/kitui";
import { AxiosError } from 'axios';
import { parseAxiosError } from "@root/utils/parse-error";
@ -19,7 +20,8 @@ export async function patchCart(
return [patchCartResponse.cart];
} catch (nativeError) {
const [error] = parseAxiosError(nativeError);
let [error, status] = parseAxiosError(nativeError);
if (status === 400 && error.indexOf("invalid id") !== -1) error = "Данный тариф более недоступен"
return [[], `Не удалось добавить товар в корзину. ${error}`];
}
@ -81,4 +83,4 @@ export async function patchCurrency(
return [null, `Не удалось изменить валюту. ${error}`];
}
}
}

3
src/api/history.ts
View File

@ -12,11 +12,12 @@ type HistoryRecord = {
id: string;
isDeleted: boolean;
key: string;
rawDetails: KeyValue[][];
rawDetails: [RawDetails, KeyValue];
updatedAt: string;
userId: string;
};
type RawDetails = { Key: string; Value: KeyValue[][] }
type KeyValue = { Key: string; Value: string | number };
export async function getHistory(): Promise<[GetHistoryResponse | null, string?]> {

1
src/components/NumberInputWithUnitAdornment.tsx
View File

@ -32,7 +32,6 @@ export default function NumberInputWithUnitAdornment({ id, value, adornmentText,
const newNumber = parseInt(target.value);
console.log(newNumber);
if (!isFinite(newNumber) || newNumber < 0) {
onChange(0);

30
src/components/icons/File.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
bgcolor?: string;
width?: string;
height?: string;
}
export default function CustomIcon() {
return (
<Box
sx={{
stroke: "inherit",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "6px"
}}
>
<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"/>
</svg>
</Box>
);
}

1
src/components/templCardPhoneLight.tsx
View File

@ -5,7 +5,6 @@ export default function TemplCardPhoneLight() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
console.log("я узкий");
return (
<Box
sx={{

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

@ -20,7 +20,6 @@ export default function Cart() {
const handleCustomBackNavigation = usePrevLocation(location);
console.log(cart.services);
return (
<SectionWrapper

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

@ -135,7 +135,6 @@ export default function CustomWrapper({ serviceData, last, first }: Props) {
serviceData.tariffs.map((tariff) => {
const privilege = tariff.privileges[0];
console.log(tariff);
return tariff.privileges.length > 1 ? (
<CustomTariffAccordion key={tariff.id} tariffCartData={tariff} />

166
src/pages/History/AccordionWrapper.tsx
View File

@ -1,5 +1,10 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion";
import File from "@components/icons/File"
import { getDeclension } from "@utils/declension"
import { enqueueSnackbar } from "notistack";
import { addTariffToCart } from "@root/stores/user";
import { getMessageFromFetchError } from "@frontend/kitui";
export type History = {
title: string;
@ -10,9 +15,10 @@ export type History = {
expired?: boolean;
};
type RawDetails = { Key: string; Value: KeyValue[][] }
type KeyValue = { Key: string; Value: string | number };
interface AccordionWrapperProps {
content: KeyValue[];
content: [RawDetails, KeyValue];
last?: boolean;
first?: boolean;
createdAt: string
@ -26,16 +32,25 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
const isMobile = useMediaQuery(theme.breakpoints.down(560));
const valuesByKey: any = {};
console.log(content)
content.forEach((item) => {
content[0].Value[0].forEach((item) => {
valuesByKey[item.Key] = item.Value;
});
const extractDateFromString = (tariffName: string) => {
const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
return dateMatch ? dateMatch[0] : null;
};
async function handleTariffItemClick(tariffId: string) {
const { patchCartError } = await addTariffToCart(tariffId)
if (patchCartError) {
enqueueSnackbar(patchCartError);
} else {
enqueueSnackbar("Тариф добавлен в корзину");
}
}
return (
<Box
sx={{
@ -46,8 +61,15 @@ console.log(content)
last={last}
first={first}
divide
text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
text={valuesByKey.privileges.map((e:KeyValue[]) => (
<Typography
key={valuesByKey.id}
>
{e[1].Value} - {e[5].Value} {getDeclension(Number(e[5].Value), e[7].Value.toString())}
</Typography>)
)}
header={
<>
<Box
sx={{
width: "100%",
@ -68,7 +90,7 @@ console.log(content)
alignItems: upSm ? "center" : undefined,
justifyContent: "space-between",
flexDirection: upSm ? undefined : "column",
gap: upMd ? "40px" : "10px",
gap: upMd ? "51px" : "10px",
}}
>
<Typography
@ -86,62 +108,128 @@ console.log(content)
</Typography>
<Typography
title={valuesByKey.iscustom ? "Кастомный тариф" : valuesByKey.name}
sx={{
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
px: 0,
width: '200px',
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
{valuesByKey.name}
{valuesByKey.iscustom ? "Кастомный тариф" : valuesByKey.name}
</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexFlow: "1",
flexBasis: "60%",
}}
>
<Typography
sx={{
display: upMd ? undefined : "none",
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 400,
color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
px: 0,
}}
>
{valuesByKey.payMethod && <Typography>Способ оплаты: {valuesByKey.payMethod}</Typography>}
</Typography>
<Box
sx={{
display: "flex",
height: "100%",
justifyContent: "space-between",
alignItems: "center",
gap: upSm ? "111px" : "17px",
width: "100%",
maxWidth: isTablet ? null : "160px",
flexFlow: "1",
flexBasis: "60%",
}}
>
<Box display="flex" width="100%" justifyContent="space-between">
<Typography
sx={{
marginLeft: isTablet ? (isMobile ? null : "auto") : null,
display: upMd ? undefined : "none",
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 400,
color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
textAlign: "left",
px: 0,
}}
title={`>Способ оплаты: ${valuesByKey.payMethod}</Typography>}`}
>
{valuesByKey.payMethod && <Typography
sx={{
maxWidth: '300px',
width: '300px',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>Способ оплаты: {valuesByKey.payMethod}</Typography>}
</Typography>
<Box
sx={{
display: "flex",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
width: "100%",
maxWidth: isTablet ? null : "160px",
}}
>
{valuesByKey.price} руб.
</Typography>
<Typography
sx={{
marginLeft: isTablet ? (isMobile ? null : "auto") : null,
color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
textAlign: "left",
}}
>
{Number(content[1].Value) / 100 ? Number(content[1].Value) / 100 : "nodata"} руб.
</Typography>
</Box>
</Box>
{!isMobile &&
<IconButton
title="Добавить в корзину тариф"
onClick={(e) => {
e.stopPropagation()
handleTariffItemClick(valuesByKey.id)
}}
sx={{
ml: "20px",
bgcolor:"#EEE4FC",
stroke: "#7E2AEA",
borderRadius: 2,
"&:hover": {
bgcolor:"#7E2AEA",
stroke: "white",
},
"&:active": {
bgcolor:"black",
stroke: "white",
}
}}
>
<File></File>
</IconButton>
}
</Box>
</Box>
{isMobile &&
<IconButton
title="Добавить в корзину тариф"
onClick={(e) => {
e.stopPropagation()
handleTariffItemClick(valuesByKey.id)
}}
sx={{
mr: "10px",
bgcolor:"#EEE4FC",
stroke: "#7E2AEA",
borderRadius: 2,
"&:hover": {
bgcolor:"#7E2AEA",
stroke: "white",
},
"&:active": {
bgcolor:"black",
stroke: "white",
}
}}
>
<File></File>
</IconButton>
}
</>
}
/>
</Box>

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

@ -10,6 +10,7 @@ import AccordionWrapper from "./AccordionWrapper";
import { HISTORY } from "./historyMocks";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { useHistoryData } from "@root/utils/hooks/useHistoryData";
import { isArray } from "cypress/types/lodash";
const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
@ -24,10 +25,6 @@ export default function History() {
const handleCustomBackNavigation = useHistoryTracker();
if (!error && historyData) {
console.log(historyData?.records[0].rawDetails[0].map(({ Key, Value }) => (Key == "id" ? console.log(Value) : "")));
}
return (
<SectionWrapper
maxWidth="lg"
@ -65,16 +62,19 @@ export default function History() {
) : (
<Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
)}
{historyData?.records.map(( e, index) => (
{historyData?.records
.filter((e) => (e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)))
.map(( e, index) => {
return (
<Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
<AccordionWrapper
first={index === 0}
last={index === historyData?.records.length - 1}
content={e.rawDetails[0]}
content={e.rawDetails}
createdAt={e.createdAt}
/>
</Box>
))}
)})}
</SectionWrapper>
);
}

2
src/pages/Landing/Section3.tsx
View File

@ -17,8 +17,6 @@ export default function Section3() {
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
console.log(downXs);
return (
<SectionWrapper
component="section"

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

@ -15,8 +15,6 @@ export default function Tariffs() {
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const navigate = useNavigate();
console.log(upMd);
return (
<SectionWrapper
maxWidth="lg"

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

@ -44,8 +44,6 @@ export default function TariffPage() {
const unit: string = String(location.pathname).slice(9);
const currentTariffs = Object.values(cartTariffMap).filter((tariff): tariff is Tariff => typeof tariff === "object");
console.log(currentTariffs);
function handleTariffItemClick(tariffId: string) {
addTariffToCart(tariffId)
.then(() => {
@ -73,8 +71,6 @@ export default function TariffPage() {
);
});
console.log(isCustomTariffs);
const createTariffElements = (filteredTariffs: Tariff[]) => {
const tariffElements = filteredTariffs
.filter((tariff) => tariff.privileges.length > 0)

2
src/pages/Tariffs/slider/slider.tsx
View File

@ -33,8 +33,6 @@ export const Slider = ({ items }: SliderProps) => {
const gridTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobileHeader = useMediaQuery(theme.breakpoints.down(900));
console.log(items.length);
useEffect(() => {
if (isTablet) {
setRange(1);

4
src/stores/user.ts
View File

@ -277,11 +277,11 @@ export const sendUserData = async () => {
export const addTariffToCart = async (tariffId: string) => {
const [patchCartResponse, patchCartError] = await patchCart(tariffId);
console.log(patchCartResponse)
if (!patchCartError) {
if (patchCartError !== undefined) {
setCart(patchCartResponse);
}
return({patchCartResponse, patchCartError})
};
export const removeTariffFromCart = async (tariffId: string) => {

4
src/utils/declension.ts
View File

@ -9,7 +9,7 @@ function declension(number: number, declensions: string[], cases = [2, 0, 1, 1,
];
}
export function getDeclension(number: number, word: PrivilegeValueType | "месяц" | "год"): string {
export function getDeclension(number: number, word: PrivilegeValueType | "месяц" | "год" | string): string {
switch (word) {
case "шаблон":
return declension(number, ["шаблон", "шаблона", "шаблонов"]);
@ -21,5 +21,7 @@ export function getDeclension(number: number, word: PrivilegeValueType | "мес
return declension(number, ["год", "года", "лет"]);
case "МБ":
return "МБ";
default:
return "ед."
}
};

2
src/utils/hooks/handleCustomBackNavigation.ts
View File

@ -20,12 +20,10 @@ export const usePrevLocation = (location: RouteLocation | null) => {
const handleCustomBackNavigation = () => {
if (prevLocRef.current?.state?.previousUrl) {
const prevUrl = prevLocRef.current.state.previousUrl;
console.log(prevUrl);
if (prevUrl.includes("/support/")) {
return navigate(-2);
}
}
console.log("yjy");
return navigate(-1);
};

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

@ -26,7 +26,6 @@ export function useCart() {
function addTariffsToCart() {
const knownTariffs: Tariff[] = [];
console.log(cartTariffIds)
cartTariffIds?.forEach(async (tariffId) => {
if (typeof cartTariffMap[tariffId] === "object") return;

14
src/utils/parse-error.ts
View File

@ -6,6 +6,17 @@ export type ServerError = {
message: string;
};
const translateMessage: Record<string, string> = {
"user not found": "Пользователь не найден",
"invalid password": "Неправильный пароль",
"field <password> is empty": "Поле \"Пароль\" не заполнено",
"field <login> is empty": "Поле \"Логин\" не заполнено",
"field <email> is empty": "Поле \"E-mail\" не заполнено",
"field <phoneNumber> is empty": "Поле \"Номер телефона\" не заполнено",
"user with this email or login is exist": "Пользователь уже существует",
"user with this login is exist": "Пользователь с таким логином уже существует"
};
export const parseAxiosError = (nativeError: unknown): [string, number?] => {
const error = nativeError as AxiosError;
@ -14,7 +25,8 @@ export const parseAxiosError = (nativeError: unknown): [string, number?] => {
"statusCode" in (error.response.data as ServerError)
) {
const serverError = error.response.data as ServerError;
const translatedMessage = translateMessage[serverError.message]
if (translatedMessage !== undefined) serverError.message = translatedMessage
return [serverError.message, serverError.statusCode];
}