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

create TariffsPage

Browse Source
This commit is contained in:
ArtChaos189 2023-03-23 15:03:08 +03:00
parent cf85baf1c4
commit 000e112ac4
15 changed files with 246 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
babel.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript",
],
};

5
src/__mocks__/CustomRadioButtonsMocks.ts Normal file
View File

@ -0,0 +1,5 @@
export const _mocsk_ = [
{ name: "Шаблонизатор", type: "templ" },
{ name: "Опросник", type: "squiz" },
{ name: "Сокращатель ссылок", type: "reduce" },
];

5
src/__mocks__/StepperSampleMocsk.ts
View File

@ -1,5 +0,0 @@
export const _mocsk_ = [
{ name: "Шаблонизатор", url: "" },
{ name: "Опросник", url: "" },
{ name: "Сокращатель ссылок", url: "" },
];

24
src/__mocks__/showCaseObject.ts Normal file
View File

@ -0,0 +1,24 @@
import { showCaseTime } from "./showCaseTime";
import { showCaseVolume } from "./showCaseVolume";
export const showCaseObject: Record<
string,
Record<
string,
{
name: string;
desc: string;
style: {
icon: string;
bgcolor: string;
};
id: string;
amount: number;
price: number;
}[]
>
> = {
templ: { volume: showCaseVolume, time: showCaseTime },
squiz: { volume: showCaseVolume, time: showCaseTime },
reduce: { volume: showCaseVolume, time: showCaseTime },
};

48
src/__mocks__/showCaseTime.ts Normal file
View File

@ -0,0 +1,48 @@
import Infinity from "../assets/Icons/tariffs-time/Infinity.svg";
import OneIcons from "../assets/Icons/tariffs-time/OneIcons.svg";
import ThreeIcons from "../assets/Icons/tariffs-time/ThreeIcons.svg";
import SixIcons from "../assets/Icons/tariffs-time/SixIcons.svg";
import NineIcons from "../assets/Icons/tariffs-time/NineIcons.svg";
export const showCaseTime = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: Infinity, bgcolor: "#D6F3E9" },
id: "id1",
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#EEE4FC" },
id: "id2",
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#EEE4FC" },
id: "id3",
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: SixIcons, bgcolor: "#EEE4FC" },
id: "id4",
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: NineIcons, bgcolor: "#EEE4FC" },
id: "id5",
amount: 10,
price: 1000,
},
];

48
src/__mocks__/showCaseVolume.ts Normal file
View File

@ -0,0 +1,48 @@
import OneIcons from "../assets/Icons/tariffs-volume/OneIcons.svg";
import TwoIcons from "../assets/Icons/tariffs-volume/TwoIcons.svg";
import ThreeIcons from "../assets/Icons/tariffs-volume/ThreeIcons.svg";
import FourIcons from "../assets/Icons/tariffs-volume/FourIcons.svg";
import FiveIcons from "../assets/Icons/tariffs-volume/FiveIcons.svg";
export const showCaseVolume = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#FEDFD0" },
id: "id1",
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
id: "id2",
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
id: "id3",
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FourIcons, bgcolor: "#FEDFD0" },
id: "id4",
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
id: "id5",
amount: 10,
price: 1000,
},
];

18
src/components/StepperSample.tsx → src/components/CustomRadioButtons.tsx
View File

@ -2,11 +2,17 @@ import { List, ListItem, Typography } from "@mui/material";
import { useState } from "react";
type Props = {
_mocsk_: { name: string; url: string }[];
setType: React.Dispatch<React.SetStateAction<string>>;
_mocsk_: { name: string; type: string }[];
};
export const StepperSample: React.FC<Props> = ({ _mocsk_ }) => {
const [active, setActive] = useState<number>();
export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
const [active, setActive] = useState<number>(0);
const onkl = (index: number, type: string) => {
setActive(index);
setType(type);
};
return (
<List
@ -19,15 +25,15 @@ export const StepperSample: React.FC<Props> = ({ _mocsk_ }) => {
whiteSpace: "nowrap",
}}
>
{_mocsk_.map(({ name, url }, index) =>
{_mocsk_.map(({ name, type }, index) =>
active === index ? (
<ListItem onClick={() => setActive(index)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
<ListItem onClick={() => onkl(index, type)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
<Typography component="span" sx={{ borderBottom: "1px solid #7E2AEA", fontSize: " 16px" }}>
{name}
</Typography>
</ListItem>
) : (
<ListItem onClick={() => setActive(index)} sx={{ cursor: "pointer" }}>
<ListItem onClick={() => onkl(index, type)} sx={{ cursor: "pointer" }}>
{name}
</ListItem>
)

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

@ -31,7 +31,6 @@ export default function NavbarFull({ isLoggedIn }: Props) {
useEffect(() => {
setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
});
console.log(templ);
async function handleLogoutClick() {
clearToken();

7
src/index.tsx
View File

@ -10,15 +10,14 @@ import Wallet from "./pages/Wallet";
import Payment from "./pages/Payment/Payment";
import Support from "./pages/Support/Support";
import CustomTariff from "./pages/CustomTariff/CustomTariff";
import { TariffsVolume } from "./pages/Tariffs/TariffsVolume";
import { AccountSetup } from "./pages/AccountSetup";
import Landing from "./pages/Landing/Landing";
import Tariffs from "./pages/Tariffs/Tariffs";
import { TariffsTime } from "./pages/Tariffs/TariffsTime";
import Signin from "./pages/auth/Signin";
import Signup from "./pages/auth/Signup";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import { Basket } from "./pages/Basket/Basket";
import { TariffPage } from "./pages/Tariffs/TariffsPage";
import Footer from "@components/Footer";
import Navbar from "@components/Navbar/Navbar";
@ -76,12 +75,12 @@ const App = () => {
</>
}
>
<Route path="time" element={<TariffsTime />} />
<Route path="time" element={<TariffPage />} />
<Route
path="volume"
element={
<PublicRoute>
<TariffsVolume />
<TariffPage />
</PublicRoute>
}
/>

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

@ -1,18 +1,17 @@
import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material";
import { Outlet, Route, Routes } from "react-router-dom";
import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material";
import CardWithLink from "@components/CardWithLink";
import SectionWrapper from "@components/SectionWrapper";
import CustomIcon from "@components/icons/CustomIcon";
import CalendarIcon from "@components/icons/CalendarIcon";
import PieChartIcon from "@components/icons/PieChartIcon";
import TariffCard from "./TariffCard";
import video1 from "../../assets/animations/Icon_1.webm";
import video2 from "../../assets/animations/Icon_2.webm";
import video3 from "../../assets/animations/Icon_3.webm";
import CalendarIcon from "../../components/icons/CalendarIcon";
import PieChartIcon from "../../components/icons/PieChartIcon";
export default function Tariffs() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));

86
src/pages/Tariffs/TariffsPage.tsx Normal file
View File

@ -0,0 +1,86 @@
import { useState } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useLocation } from "react-router-dom";
import SectionWrapper from "@components/SectionWrapper";
import { CustomRadioButtons } from "@root/components/CustomRadioButtons";
import { StepperSquiz } from "@components/StepperSquiz";
import { FreeTariffCard } from "./FreeTariffCard";
import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
import { basketStore } from "@root/stores/BasketStore";
import { _mocsk_ } from "@root/__mocks__/CustomRadioButtonsMocks";
import { showCaseObject } from "@root/__mocks__/showCaseObject";
import { IconsCreate } from "@root/lib/IconsCreate";
export const TariffPage = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { add } = basketStore();
const location = useLocation();
const [type, setType] = useState<string>("templ");
const unit: string = String(location.pathname).slice(9);
const StepperText: Record<string, string> = { volume: "Тарифы на объём", time: "Тарифы на время" };
console.log(type);
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
}}
>
<StepperSquiz text={StepperText[unit]} />
<Typography variant="h4" sx={{ marginBottom: "28px" }}>
{StepperText[unit]}
</Typography>
<CustomRadioButtons setType={setType} _mocsk_={_mocsk_} />
<Box
sx={{
width: upMd ? "100%" : undefined,
mt: "40px",
mb: "30px",
display: "flex",
flexDirection: upMd ? "row" : "column",
gap: upMd ? "3.5%" : "30px",
alignSelf: "center",
flexWrap: "wrap",
}}
>
{showCaseObject[type][unit].map((element, index) => (
<TariffCardTimeAndVolume
key={index}
sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => {
add({ id: element.id, type: type, obj: element });
}}
textButton="выбрать"
/>
))}
<FreeTariffCard
sx={{
width: upMd ? "31%" : undefined,
marginBottom: "40px",
backgroundColor: "#7E2AEA",
color: "white",
}}
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
href=""
/>
</Box>
</SectionWrapper>
);
};

126
src/pages/Tariffs/TariffsTime.tsx
View File

@ -1,126 +0,0 @@
import { useMediaQuery, useTheme, Box, Typography } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import { StepperSample } from "@components/StepperSample";
import { StepperSquiz } from "@root/components/StepperSquiz";
import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
import { FreeTariffCard } from "./FreeTariffCard";
import { basketStore } from "@root/stores/BasketStore";
import { IconsCreate } from "../../lib/IconsCreate";
import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk";
import Infinity from "../../assets/Icons/tariffs-time/Infinity.svg";
import OneIcons from "../../assets/Icons/tariffs-time/OneIcons.svg";
import ThreeIcons from "../../assets/Icons/tariffs-time/ThreeIcons.svg";
import SixIcons from "../../assets/Icons/tariffs-time/SixIcons.svg";
import NineIcons from "../../assets/Icons/tariffs-time/NineIcons.svg";
const showcaseTime = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: Infinity, bgcolor: "#D6F3E9" },
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#EEE4FC" },
id: 2,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#EEE4FC" },
id: 3,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: SixIcons, bgcolor: "#EEE4FC" },
id: 4,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: NineIcons, bgcolor: "#EEE4FC" },
id: 1,
amount: 10,
price: 1000,
},
];
export const TariffsTime = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { add, templ } = basketStore();
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
}}
>
<StepperSquiz text="Тарифы на время" />
<Typography variant="h4" sx={{ marginBottom: "28px" }}>
Тарифы на время
</Typography>
<StepperSample _mocsk_={_mocsk_} />
<Box
sx={{
width: upMd ? "100%" : undefined,
mt: "40px",
mb: "30px",
display: "flex",
flexDirection: upMd ? "row" : "column",
gap: upMd ? "3.5%" : "30px",
alignSelf: "center",
flexWrap: "wrap",
}}
>
{showcaseTime.map((element, index) => (
<TariffCardTimeAndVolume
key={index}
sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => {
add({ id: element.id, type: "templ", obj: element });
console.log(templ);
}}
textButton="выбрать"
/>
))}
<FreeTariffCard
sx={{
width: upMd ? "31%" : undefined,
marginBottom: "40px",
backgroundColor: "#7E2AEA",
color: "white",
}}
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
href=""
/>
</Box>
</SectionWrapper>
);
};

123
src/pages/Tariffs/TariffsVolume.tsx
View File

@ -1,123 +0,0 @@
import { useMediaQuery, useTheme, Box, Typography } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import { StepperSquiz } from "@components/StepperSquiz";
import { StepperSample } from "@components/StepperSample";
import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
import { FreeTariffCard } from "./FreeTariffCard";
import { basketStore } from "@root/stores/BasketStore";
import { IconsCreate } from "../../lib/IconsCreate";
import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk";
import OneIcons from "../../assets/Icons/tariffs-volume/OneIcons.svg";
import TwoIcons from "../../assets/Icons/tariffs-volume/TwoIcons.svg";
import ThreeIcons from "../../assets/Icons/tariffs-volume/ThreeIcons.svg";
import FourIcons from "../../assets/Icons/tariffs-volume/FourIcons.svg";
import FiveIcons from "../../assets/Icons/tariffs-volume/FiveIcons.svg";
const showcaseVolume = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FourIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
];
export const TariffsVolume = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { add } = basketStore();
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
}}
>
<StepperSquiz text="Тарифы на объем" />
<Typography variant="h4" sx={{ marginBottom: "28px" }}>
Тарифы на объем
</Typography>
<StepperSample _mocsk_={_mocsk_} />
<Box
sx={{
width: upMd ? "100%" : undefined,
mt: "40px",
mb: "30px",
display: "flex",
flexDirection: upMd ? "row" : "column",
gap: upMd ? "3.5%" : "30px",
alignSelf: "center",
flexWrap: "wrap",
}}
>
{showcaseVolume.map((element, index) => (
<TariffCardTimeAndVolume
key={index}
sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => {
add({ id: element.id, type: "templ", obj: element });
}}
textButton="выбрать"
/>
))}
<FreeTariffCard
sx={{
width: upMd ? "31%" : undefined,
marginBottom: "40px",
backgroundColor: "#7E2AEA",
color: "white",
}}
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
href=""
/>
</Box>
</SectionWrapper>
);
};

2
src/stores/BasketStore.ts
View File

@ -49,7 +49,7 @@ export const basketStore = create<any>()((set, get) => ({
};
set(() => newStore);
},
remove: (type: any, id: string) => {
remove: (type: string, id: string) => {
const store: any = get()[type] || {};
const newStore = Object.entries(store).reduce<any>((accamulator, [key, value], index, array) => {

10
src/stores/test/method-remove.test.ts Normal file
View File

@ -0,0 +1,10 @@
import { basketStore } from "../BasketStore";
describe("remove method tests", () => {
const key = ["templ", "squiz"];
const remove = basketStore((state) => state.remove);
test("test remove for the correct execution", () => {
remove("templ", "id1");
});
});