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

Merge AccountStep & paymentHistory

Browse Source
This commit is contained in:
krokodilka 2023-03-20 16:30:48 +03:00
commit 5c0bface28
15 changed files with 442 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore vendored
View File

@ -1,8 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
# Editor-based HTTP Client requests
/httpRequests/

7
.idea/codeStyles/Project.xml
View File

@ -1,7 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<JSCodeStyleSettings version="0">
<option name="FORCE_QUOTE_STYlE" value="true" />
</JSCodeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml
View File

@ -1,5 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

6
.idea/inspectionProfiles/Project_Default.xml
View File

@ -1,6 +0,0 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
.idea/marketplace.iml
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml
View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/marketplace.iml" filepath="$PROJECT_DIR$/.idea/marketplace.iml" />
</modules>
</component>
</project>

19
.idea/workspace.xml
View File

@ -2,7 +2,21 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="3a23e62a-21bd-4f51-a89e-05a6cca5b71f" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/AccordionWrapper.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/CustomAccordionPayHistory.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/PaymentHistory.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/Project.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/marketplace.iml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/modules.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/privateRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/publicRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/routes/PrivateRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/routes/PublicRoute.tsx" beforeDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -24,11 +38,11 @@
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/../amo" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="node.js.detected.package.eslint" value="true" />
<property name="node.js.selected.package.eslint" value="(autodetect)" />
<property name="nodejs_package_manager_path" value="yarn" />
<property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
<property name="ts.external.directory.path" value="$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external" />
<property name="vue.rearranger.settings.migration" value="true" />
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
@ -43,6 +57,7 @@
<workItem from="1679058561119" duration="973000" />
<workItem from="1679059624759" duration="2016000" />
<workItem from="1679061985124" duration="1330000" />
<workItem from="1679318207973" duration="698000" />
</task>
<servers />
</component>

298
src/index.tsx
View File

@ -1,182 +1,182 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { CssBaseline, Divider, ThemeProvider, useMediaQuery } from "@mui/material";
import {CssBaseline, Divider, ThemeProvider, useMediaQuery} from "@mui/material";
import Faq from "./pages/Faq/Faq";
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 {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 {TariffsTime} from "./pages/Tariffs/TariffsTime";
import Signin from "./pages/auth/Signin";
import Signup from "./pages/auth/Signup";
import { Basket } from "./pages/Basket";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import {Basket} from "./pages/Basket";
import Footer from "@components/Footer";
import Navbar from "@components/Navbar/Navbar";
import darkTheme from "@utils/themes/dark";
import lightTheme from "@utils/themes/light";
import PublicRoute from "@root/utils/routes/PublicRoute";
import PrivateRoute from "@root/utils/routes/PrivateRoute";
import PublicRoute from "@root/utils/routes/publicRoute";
import PrivateRoute from "@root/utils/routes/privateRoute";
import { SnackbarProvider } from "notistack";
import {SnackbarProvider} from "notistack";
const App = () => {
const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));
const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));
return (
<SnackbarProvider>
<ThemeProvider theme={lightTheme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route
path="/"
element={
<ThemeProvider theme={darkTheme}>
<Navbar isLoggedIn={false} isCollapsed={!upMd} />
<Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
<Landing />
<Footer />
</ThemeProvider>
}
/>
<Route
path="/signin"
element={
<PublicRoute>
<Signin />
</PublicRoute>
}
/>
<Route
path="/signup"
element={
<PublicRoute>
<Signup />
</PublicRoute>
}
/>
return (
<SnackbarProvider>
<ThemeProvider theme={lightTheme}>
<CssBaseline/>
<BrowserRouter>
<Routes>
<Route
path="/"
element={
<ThemeProvider theme={darkTheme}>
<Navbar isLoggedIn={false} isCollapsed={!upMd}/>
<Divider sx={{bgcolor: "#E3E3E3", borderColor: "#00000000"}}/>
<Landing/>
<Footer/>
</ThemeProvider>
}
/>
<Route
path="/signin"
element={
<PublicRoute>
<Signin/>
</PublicRoute>
}
/>
<Route
path="/signup"
element={
<PublicRoute>
<Signup/>
</PublicRoute>
}
/>
<Route
path="tariffs/*"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Tariffs />
</>
}
>
<Route path="time" element={<TariffsTime />} />
<Route
path="volume"
element={
<PublicRoute>
<TariffsVolume />
</PublicRoute>
}
/>
</Route>
<Route
path="tariffs/*"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Tariffs/>
</>
}
>
<Route path="time" element={<TariffsTime/>}/>
<Route
path="volume"
element={
<PublicRoute>
<TariffsVolume/>
</PublicRoute>
}
/>
</Route>
<Route
path="/faq"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Faq />
</>
}
/>
<Route
path="/wallet"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
</PrivateRoute>
}
/>
<Route
path="/payment"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
</PrivateRoute>
}
/>
<Route
path="/support"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Support />
</>
}
/>
<Route
path="/support/:ticketId"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Support />
</>
}
/>
<Route
path="/tariffconstructor"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<CustomTariff />
</>
}
/>
<Route
path="/settings"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<AccountSetup />
</>
</PrivateRoute>
}
/>
<Route
path="/basket"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Basket />
</>
}
/>
</Routes>
</BrowserRouter>
</ThemeProvider>
</SnackbarProvider>
);
<Route
path="/faq"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Faq/>
</>
}
/>
<Route
path="/wallet"
element={
<PrivateRoute>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Wallet/>
</PrivateRoute>
}
/>
<Route
path="/payment"
element={
<PrivateRoute>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Payment/>
</PrivateRoute>
}
/>
<Route
path="/support"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Support/>
</>
}
/>
<Route
path="/support/:ticketId"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Support/>
</>
}
/>
<Route
path="/tariffconstructor"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<CustomTariff/>
</>
}
/>
<Route
path="/settings"
element={
<PrivateRoute>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<AccountSetup/>
</PrivateRoute>
}
/>
<Route
path="/basket"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<Basket/>
</>
}
/>
<Route path="/paymenthistory" element={
<PrivateRoute>
<Navbar isLoggedIn={true} isCollapsed={!upMd}/>
<PaymentHistory/>
</PrivateRoute>
}/>
</Routes>
</BrowserRouter>
</ThemeProvider>
</SnackbarProvider>
);
};
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App/>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function

36
src/pages/PaymentHistory/AccordionWrapper.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Box } from "@mui/material";
import CustomAccordion from "./CustomAccordionPayHistory";
interface Props {
content:{title:string, date:string, payMethod:string, totalPrice:number, text:string}[];
}
export default function AccordionWrapper({content}:Props) {
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
}}
>
{content.map((accordionItem, index) => (
<CustomAccordion
key={index}
title={accordionItem.title}
date={accordionItem.date}
payMethod={accordionItem.payMethod}
totalPrice={accordionItem.totalPrice}
text={accordionItem.text}
/>
))}
</Box>
);
}

148
src/pages/PaymentHistory/CustomAccordionPayHistory.tsx Normal file
View File

@ -0,0 +1,148 @@
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import ClearIcon from '@mui/icons-material/Clear';
import ExpandIcon from "../../components/icons/ExpandIcon";
interface Props {
title:string,
date:string,
payMethod:string,
totalPrice:number,
text:string,
}
export default function CustomAccordion({ title, date, payMethod, totalPrice,text }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
return (
<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.grey2.main}`,
}
}}
>
<Box
onClick={() => setIsExpanded(prev => !prev)}
sx={{
height: upMd ? "72px" : undefined,
px: "20px",
pt:"20px",
pb:"20px",
display: "flex",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
gap:'20px',
alignItems: upSm ? 'center': undefined,
flexDirection: upSm ? undefined:'column',
}}
>
<Box
sx={{display:'flex', alignItems: upSm ? 'center': undefined, justifyContent:'space-between',
flexDirection: upSm ? undefined : 'column', gap: upMd ? "40px" : "10px",
}}>
<Typography
sx={{
fontSize: upMd ? "20px" : "18px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>{date}</Typography>
<Typography
sx={{
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.grey3.main,
px: 0,
}}
>{title}</Typography>
</Box>
<Box
sx={{display:'flex', justifyContent:'space-between',flexFlow:'1', flexBasis:"60%"}}
>
<Typography
sx={{
display:upMd ? undefined : 'none',
fontSize: upMd ? "18px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 400,
color: theme.palette.grey3.main,
px: 0,
}}
>Способ оплаты: {payMethod}</Typography>
<Box sx={{display:"flex", justifyContent: upSm ? "flex-end":undefined, height:"100%", alignItems:"center",gap:upSm ? "111px": "17px"}}>
<Typography sx={{color: theme.palette.grey3.main,fontSize:upSm ? "20px": "16px", fontWeight:500, whiteSpace:'nowrap' }}>{totalPrice} руб.</Typography>
<Box sx={{borderLeft:upSm ? "1px solid #9A9AAF": "none", paddingLeft:upSm ? "24px" : 0, height:"100%", display:"flex", justifyContent:"center", alignItems:"center"}}>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
</Box>
</Box>
{isExpanded &&
<Box
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display:"flex",
justifyContent:"space-between",
alignItems: upMd ? 'center': undefined,
flexDirection: upMd ? undefined:'column',
flexWrap:'wrap',
gap:'10px',
}}
>
<Typography
sx={{
display: upMd ? 'none' :undefined ,
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>Способ оплаты: {payMethod}</Typography>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>{text} </Typography>
</Box>
}
</Box>
);
}

92
src/pages/PaymentHistory/PaymentHistory.tsx Normal file
View File

@ -0,0 +1,92 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import ComplexNavText from "../../components/ComplexNavText";
import SectionWrapper from "../../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import AccordionWrapper from "./AccordionWrapper";
interface TabPanelProps {
index: number;
value: number;
children?: React.ReactNode;
mt: string;
}
function TabPanel({ index, value, children, mt }: TabPanelProps) {
return (
<Box
hidden={index !== value}
sx={{ mt }}
>
{children}
</Box>
);
}
export default function PaymentHistory() {
const contentArray = [
{
title:"Шаблонизатор",
date:"28.05.2022",
payMethod:"QIWI Кошелек",
totalPrice:3190,
text:"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
title:"Сокращатель ссылок",
date:"08.04.2022",
payMethod:"Юмани",
totalPrice:2190,
text:"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
{
title:"Шаблонизатор",
date:"28.05.2022",
payMethod:"QIWI Кошелек",
totalPrice:1190,
text:"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
},
]
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [tabIndex, setTabIndex] = useState<number>(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: upMd ? "25px" : "20px",
mb: upMd ? "70px" : "37px",
}}
>
{upMd &&
<ComplexNavText text1="Все тарифы — " text2="Корзина" />
}
<Box
sx={{
mt: "20px",
mb: upMd ? "40px" : "20px",
display: "flex",
gap: "10px",
}}
>
{!upMd &&
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
}
<Typography variant="h4">История платежей</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
<AccordionWrapper
content={contentArray}
/>
</TabPanel>
</SectionWrapper >
)
}

11
src/utils/routes/PrivateRoute.tsx
View File

@ -1,11 +0,0 @@
import * as React from "react";
import { useLocation, Navigate } from "react-router-dom";
export default ({ children }: any) => {
const location = useLocation();
//Если пользователь авторизован, перенаправляем его на нужный путь. Иначе выкидываем в регистрацию
if (localStorage.getItem("AT")) {
return children;
}
return <Navigate to="/signup" state={{ from: location }} />;
};

15
src/utils/routes/PublicRoute.tsx
View File

@ -1,15 +0,0 @@
import * as React from "react";
import { useLocation, Navigate } from 'react-router-dom'
import {authStore} from "@stores/makeRequest";
export default ({ children }: any) => {
const location = useLocation()
const { token } = authStore()
console.log(token)
//Если пользователь авторизован, перенаправляем его в приложение. Иначе пускаем куда хотел
if (token) {
return <Navigate to="/" state={{from: location}} />
}
return children
}

0
src/utils/privateRoute.tsx → src/utils/routes/privateRoute.tsx
View File

0
src/utils/publicRoute.tsx → src/utils/routes/publicRoute.tsx
View File