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

Cart style CustomWrapper

Browse Source
This commit is contained in:
ArtChaos189 2023-08-30 16:17:29 +03:00
parent 29d099c745
commit c2200c82da
5 changed files with 32 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,4 @@
import {
Box,
IconButton,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TotalPrice from "@components/TotalPrice";
@ -25,6 +19,8 @@ export default function Cart() {
const handleCustomBackNavigation = usePrevLocation(location);
console.log(cart.services);
return (
<SectionWrapper
maxWidth="lg"
@ -43,10 +39,7 @@ export default function Cart() {
}}
>
{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 />
</IconButton>
)}
@ -64,17 +57,16 @@ export default function Cart() {
mt: upMd ? "27px" : "10px",
}}
>
{cart.services.map((serviceData) => (
{cart.services.map((serviceData, index) => (
<CustomWrapper
key={serviceData.serviceKey}
serviceData={serviceData}
first={index === 0}
last={index === cart.services.length - 1}
/>
))}
</Box>
<TotalPrice
priceBeforeDiscounts={totalPriceBeforeDiscounts}
priceAfterDiscounts={totalPriceAfterDiscounts}
/>
<TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} />
</SectionWrapper>
);
}

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

@ -2,13 +2,11 @@ import { useState } from "react";
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import ExpandIcon from "@components/icons/ExpandIcon";
import ClearIcon from "@mui/icons-material/Clear";
import { cardShadow } from "@root/utils/theme";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { removeTariffFromCart } from "@root/stores/user";
import { enqueueSnackbar } from "notistack";
import { CloseButton, ServiceCartData, getMessageFromFetchError } from "@frontend/kitui";
import type { MouseEvent } from "react";
import CustomTariffAccordion from "@root/components/CustomTariffAccordion";
@ -21,9 +19,11 @@ const name: Record<string, string> = {
interface Props {
serviceData: ServiceCartData;
last?: boolean;
first?: boolean;
}
export default function CustomWrapper({ serviceData }: Props) {
export default function CustomWrapper({ serviceData, last, first }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@ -57,26 +57,19 @@ export default function CustomWrapper({ serviceData }: Props) {
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: cardShadow,
marginBottom: "2px",
}}
>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.gray.main}`,
},
borderTopLeftRadius: first ? "12px" : "0",
borderTopRightRadius: first ? "12px" : "0",
borderBottomLeftRadius: last ? "12px" : "0",
borderBottomRightRadius: last ? "12px" : "0",
borderBottom: `1px solid ${theme.palette.gray.main}`,
...(last && { borderBottom: "none" }),
}}
>
<Box

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

@ -65,9 +65,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
fontSize: upMd ? "20px" : "18px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: accordionItem.expired
? theme.palette.text.disabled
: theme.palette.text.secondary,
color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
px: 0,
}}
>
@ -79,9 +77,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: accordionItem.expired
? theme.palette.text.disabled
: theme.palette.gray.dark,
color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
px: 0,
}}
>
@ -103,17 +99,11 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 400,
color: accordionItem.expired
? theme.palette.text.disabled
: theme.palette.gray.dark,
color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
px: 0,
}}
>
{accordionItem.payMethod && (
<Typography>
Способ оплаты: {accordionItem.payMethod}
</Typography>
)}
{accordionItem.payMethod && <Typography>Способ оплаты: {accordionItem.payMethod}</Typography>}
</Typography>
<Box
sx={{
@ -128,9 +118,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
<Typography
sx={{
marginLeft: isTablet ? (isMobile ? null : "auto") : null,
color: accordionItem.expired
? theme.palette.text.disabled
: theme.palette.gray.dark,
color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
textAlign: "left",

24
src/pages/History/historyMocks.ts
View File

@ -6,48 +6,42 @@ const PAYMENT_HISTORY: History[] = [
title: "Шаблонизатор",
payMethod: "QIWI Кошелек",
info: "3 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
date: "28.05.2022",
title: "Сокращатель ссылок",
payMethod: "Юмани",
info: "2 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
date: "28.05.2022",
title: "Шаблонизатор",
payMethod: "QIWI Кошелек",
info: "1 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
date: "08.04.2022",
title: "Шаблонизатор",
payMethod: "QIWI Кошелек",
info: "3 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
date: "28.05.2022",
title: "Сокращатель ссылок",
payMethod: "Юмани",
info: "5 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
date: "18.03.2022",
title: "Шаблонизатор",
payMethod: "Юмани",
info: "6 190 руб.",
description:
"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
];
@ -132,8 +126,4 @@ const FINISHED_TARIFFS_HISTORY: History[] = [
},
];
export const HISTORY: History[][] = [
PAYMENT_HISTORY,
PURCHASED_TARIFFS_HISTORY,
FINISHED_TARIFFS_HISTORY,
];
export const HISTORY: History[][] = [PAYMENT_HISTORY, PURCHASED_TARIFFS_HISTORY, FINISHED_TARIFFS_HISTORY];

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

@ -21,6 +21,8 @@ export default function History() {
const handleCustomBackNavigation = useHistoryTracker();
console.log(HISTORY);
return (
<SectionWrapper
maxWidth="lg"