Skip to content

Commit dbbc397

Browse files
linkoln-1linkoln-1
committed
new modified
1 parent 3b50e2e commit dbbc397

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+3730
-464
lines changed

‎db.json

+726
Large diffs are not rendered by default.

‎package-lock.json

+2,072-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@testing-library/user-event": "^12.8.3",
1414
"bootstrap": "^5.1.2",
1515
"jquery": "^3.6.0",
16+
"json-server": "^0.17.0",
1617
"prettier": "^2.4.1",
1718
"react": "^17.0.2",
1819
"react-dom": "^17.0.2",
@@ -33,7 +34,9 @@
3334
"build": "react-scripts build",
3435
"test": "react-scripts test",
3536
"eject": "react-scripts eject",
36-
"prettify": "prettier --write ./src"
37+
"prettify": "prettier --write ./src",
38+
"watch": "npx json-server --watch db.json --port 8000",
39+
"dev": "nodemon server.js"
3740
},
3841
"eslintConfig": {
3942
"extends": [
@@ -52,5 +55,8 @@
5255
"last 1 firefox version",
5356
"last 1 safari version"
5457
]
58+
},
59+
"devDependencies": {
60+
"nodemon": "^2.0.14"
5561
}
5662
}

‎server.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let jsonServer = require('json-server');
2+
const server = jsonServer.create();
3+
const router = jsonServer.router('db.json');
4+
const middlewares = jsonServer.defaults({
5+
static: './build',
6+
});
7+
server.use(jsonServer.bodyParser);
8+
server.use(middlewares);
9+
10+
server.use(router);
11+
server.listen(process.env.PORT || 8000, () => {
12+
console.log(`JSON Server is running on 8000`);
13+
});

‎src/components/Finance/Finance.module.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.Finance {
2+
width: 74%;
3+
margin-left: 30px;
4+
}
5+
.Navigation {
6+
border-bottom: 1px solid #d5d5d5;
7+
}
8+
.FinanceCard {
9+
display: flex;
10+
flex-wrap: wrap;
11+
justify-content: space-between;
12+
margin-top: 30px;
13+
}
14+
.TopUpYourBalance,
15+
.InvoicesAndDocuments,
16+
.Rate,
17+
.OrderedServices,
18+
.OperationHistory,
19+
.AdditionalServices {
20+
width: 355px;
21+
padding: 20px 15px 20px 15px;
22+
background-color: #f1f1f1;
23+
color: black;
24+
margin-bottom: 20px;
25+
border: 1px solid #c2c2c2;
26+
border-radius: 3px;
27+
text-align: center;
28+
}

‎src/components/Finance/FinanceProperties.jsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from "react";
2+
import styles from "./Finance.module.css";
3+
import { useHistory } from "react-router-dom";
4+
5+
function FinanceProperties(props) {
6+
const history = useHistory();
7+
const handleTopUpYourBalance = () => {
8+
history.push("/Finance/TopUpYourBalance");
9+
};
10+
const handleRate = () => {
11+
history.push("/Finance/Rate");
12+
};
13+
return (
14+
<div className={styles.FinanceCard}>
15+
<div
16+
className={styles.TopUpYourBalance}
17+
onClick={handleTopUpYourBalance}
18+
style={{ cursor: "pointer" }}
19+
>
20+
Пополнить баланс
21+
</div>
22+
23+
<div
24+
className={styles.InvoicesAndDocuments}
25+
style={{ cursor: "pointer" }}
26+
>
27+
Счета и документы
28+
</div>
29+
30+
<div
31+
className={styles.Rate}
32+
onClick={handleRate}
33+
style={{ cursor: "pointer" }}
34+
>
35+
Тариф
36+
</div>
37+
38+
<div className={styles.OrderedServices} style={{ cursor: "pointer" }}>
39+
Заказанные услуги
40+
</div>
41+
42+
<div className={styles.OperationHistory} style={{ cursor: "pointer" }}>
43+
История операции
44+
</div>
45+
46+
<div className={styles.AdditionalServices} style={{ cursor: "pointer" }}>
47+
Дополнительные услуги
48+
</div>
49+
</div>
50+
);
51+
}
52+
53+
export default FinanceProperties;

‎src/components/Finance/HeaderFinance.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import styles from "../the product is in stock/ProductIsInStock.module.css";
3+
import burgerMenu from "../../images/menu_burger.svg";
4+
import selectLanguage from "../../images/Polygon 1.svg";
5+
import KolokolProductIsInStock from "../../images/kolokolchik.svg";
6+
7+
function HeaderFinance(props) {
8+
return (
9+
<div className={styles.HeaderProductIsInStock}>
10+
<div className={styles.ImageBurgerProductIsInStock}>
11+
<img src={burgerMenu} alt="" />
12+
</div>
13+
<div className={styles.LanguageSettingsProductIsInStock}>
14+
<div className={styles.LanguageProductIsInStock}>
15+
<p>Русский</p>
16+
<img src={selectLanguage} alt="" />
17+
</div>
18+
<div className={styles.KolokolProductIsInStock}>
19+
<img src={KolokolProductIsInStock} alt="" />
20+
</div>
21+
</div>
22+
</div>
23+
);
24+
}
25+
26+
export default HeaderFinance;

‎src/components/Finance/NavFinance.jsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
import styles from "../Overview/Overview.module.css";
3+
4+
function NavFinance(props) {
5+
return (
6+
<div className={styles.Navigation}>
7+
<p>обзор/Финансы</p>
8+
</div>
9+
);
10+
}
11+
12+
export default NavFinance;

‎src/components/Finance/SubWindow/Rate/HeaderRate.jsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import styles from "../../../the product is in stock/ProductIsInStock.module.css";
3+
import burgerMenu from "../../../../images/menu_burger.svg";
4+
import selectLanguage from "../../../../images/Polygon 1.svg";
5+
import KolokolProductIsInStock from "../../../../images/kolokolchik.svg";
6+
7+
function HeaderRate(props) {
8+
return (
9+
<div>
10+
<div className={styles.HeaderProductIsInStock}>
11+
<div className={styles.ImageBurgerProductIsInStock}>
12+
<img src={burgerMenu} alt="" />
13+
</div>
14+
<div className={styles.LanguageSettingsProductIsInStock}>
15+
<div className={styles.LanguageProductIsInStock}>
16+
<p>Русский</p>
17+
<img src={selectLanguage} alt="" />
18+
</div>
19+
<div className={styles.KolokolProductIsInStock}>
20+
<img src={KolokolProductIsInStock} alt="" />
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
);
26+
}
27+
28+
export default HeaderRate;

‎src/components/Finance/SubWindow/Rate/NavRate.jsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
import styles from "../../../Overview/Overview.module.css";
3+
4+
function NavRate(props) {
5+
return (
6+
<div className={styles.Navigation}>
7+
<p>обзор/Финансы/Тарифы</p>
8+
</div>
9+
);
10+
}
11+
12+
export default NavRate;

‎src/components/Finance/SubWindow/Rate/Rate.module.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.Rate {
2+
width: 74%;
3+
margin-left: 30px;
4+
}
5+
.UpText {
6+
margin-top: 10px;
7+
}
8+
.Text {
9+
margin-top: 60px;
10+
margin-bottom: 20px;
11+
}
12+
.RateCards {
13+
width: 150px;
14+
border: 1px solid #d0d0d0;
15+
border-radius: 4px;
16+
padding: 10px;
17+
background-color: #efefef;
18+
margin-bottom: 20px;
19+
}
20+
.RateCards p {
21+
margin: 0;
22+
padding: 0;
23+
text-align: center;
24+
}
25+
.RateParent {
26+
width: 60%;
27+
display: flex;
28+
justify-content: space-between;
29+
flex-wrap: wrap;
30+
}
31+
.DownText {
32+
margin-top: 40px;
33+
display: flex;
34+
/*align-items: center;*/
35+
}
36+
.DownText p {
37+
margin-left: 5px;
38+
}

‎src/components/Finance/SubWindow/Rate/RateCards.jsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from "react";
2+
import styles from "./Rate.module.css";
3+
import { useSelector } from "react-redux";
4+
5+
function RateCards(props) {
6+
const RateCards = useSelector((state) => state.LoadRateCard.RateCard);
7+
const AnnualCard = useSelector((state) => state.LoadAnnualCard.AnnualCard);
8+
return (
9+
<div>
10+
<div className={styles.UpText}>
11+
Подключение тарифного плана ПО СеллерМАРКЕТ
12+
</div>
13+
14+
<div className={styles.Text}>Ежемесячная подписка</div>
15+
<div className={styles.RateParent}>
16+
{RateCards.map((item, index) => {
17+
return (
18+
<div className={styles.RateCards} key={index}>
19+
<p>{item.activity}</p>
20+
<p>{item.price}</p>
21+
<p style={{ fontSize: "12px" }}>{item.forTime}</p>
22+
</div>
23+
);
24+
})}
25+
</div>
26+
27+
<div className={styles.DownText}>
28+
<p style={{ fontSize: "20px" }}>Годовая подписка</p>
29+
<p style={{ marginTop: "5px" }}>при выборе на год</p>
30+
<p
31+
style={{
32+
margin: "5px 0 0 5px",
33+
width: "160px",
34+
paddingTop: "2px",
35+
textAlign: "center",
36+
borderRadius: "50px",
37+
backgroundColor: "green",
38+
color: "white",
39+
height: "24px",
40+
fontSize: "14px",
41+
}}
42+
>
43+
2 месяца в подарок
44+
</p>
45+
</div>
46+
47+
<div className={styles.RateParent}>
48+
{AnnualCard.map((item, index) => {
49+
return (
50+
<div className={styles.RateCards} key={index}>
51+
<p>{item.activity}</p>
52+
<p>{item.price}</p>
53+
<p style={{ fontSize: "12px" }}>{item.forTime}</p>
54+
</div>
55+
);
56+
})}
57+
</div>
58+
</div>
59+
);
60+
}
61+
62+
export default RateCards;

‎src/components/Finance/SubWindow/Rate/index.jsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useEffect } from "react";
2+
import HeaderRate from "./HeaderRate";
3+
import styles from "./Rate.module.css";
4+
import NavRate from "./NavRate";
5+
import RateCards from "./RateCards";
6+
import { useDispatch } from "react-redux";
7+
import { LoadAnnualCard, LoadRateCard } from "../../../../redux/actions";
8+
9+
function Rate(props) {
10+
const dispatch = useDispatch();
11+
useEffect(() => {
12+
dispatch(LoadRateCard());
13+
dispatch(LoadAnnualCard());
14+
});
15+
return (
16+
<div className={styles.Rate}>
17+
<HeaderRate />
18+
<NavRate />
19+
<RateCards />
20+
</div>
21+
);
22+
}
23+
24+
export default Rate;

‎src/components/Finance/SubWindow/TopUpYourBalance/HeaderTopUpYourBalance.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import styles from "../../../the product is in stock/ProductIsInStock.module.css";
3+
import burgerMenu from "../../../../images/menu_burger.svg";
4+
import selectLanguage from "../../../../images/Polygon 1.svg";
5+
import KolokolProductIsInStock from "../../../../images/kolokolchik.svg";
6+
7+
function HeaderTopUpYourBalance(props) {
8+
return (
9+
<div className={styles.HeaderProductIsInStock}>
10+
<div className={styles.ImageBurgerProductIsInStock}>
11+
<img src={burgerMenu} alt="" />
12+
</div>
13+
<div className={styles.LanguageSettingsProductIsInStock}>
14+
<div className={styles.LanguageProductIsInStock}>
15+
<p>Русский</p>
16+
<img src={selectLanguage} alt="" />
17+
</div>
18+
<div className={styles.KolokolProductIsInStock}>
19+
<img src={KolokolProductIsInStock} alt="" />
20+
</div>
21+
</div>
22+
</div>
23+
);
24+
}
25+
26+
export default HeaderTopUpYourBalance;

0 commit comments

Comments
 (0)