IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Refactoring.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2022-08-18 12:44:35 +03:00
parent 84790c8076
commit 66c6ad0b68
4 changed files with 38 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
View File

@ -1,6 +1,5 @@
import React, { useState } from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useTranslation, Trans } from "react-i18next";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { smallTablet } from "@docspace/components/utils/device"; import { smallTablet } from "@docspace/components/utils/device";
@ -21,10 +20,10 @@ const StyledBody = styled.div`
p { p {
margin-bottom: 24px; margin-bottom: 24px;
} }
.tariff-benefits_text { .payment-benefits_text {
margin-bottom: 20px; margin-bottom: 20px;
} }
.tariff-benefits { .payment-benefits {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
align-items: baseline; align-items: baseline;
@ -40,14 +39,14 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
<Text <Text
fontSize={"16px"} fontSize={"16px"}
fontWeight={"600"} fontWeight={"600"}
className="tariff-benefits_text" className="payment-benefits_text"
noSelect noSelect
> >
{t("Benefits")} {t("Benefits")}
</Text> </Text>
{availableTariffs.map((item, index) => { {availableTariffs.map((item, index) => {
return ( return (
<div className="tariff-benefits" key={index}> <div className="payment-benefits" key={index}>
<Text noSelect>{"*" + item}</Text> <Text noSelect>{"*" + item}</Text>
</div> </div>
); );
@ -56,7 +55,7 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
); );
}; };
export default inject(({ auth, payments }) => { export default inject(({ payments }) => {
const { tariffsInfo } = payments; const { tariffsInfo } = payments;
const availableTariffs = ["first", "second", "third", "forth", "five"]; const availableTariffs = ["first", "second", "third", "forth", "five"];

23
packages/client/src/pages/PortalSettings/categories/payments/index.js
View File

@ -18,13 +18,13 @@ import toastr from "@docspace/components/toast/toastr";
const StyledBody = styled.div` const StyledBody = styled.div`
max-width: 660px; max-width: 660px;
.payments-info_suggestion { .payment-info_suggestion {
margin-bottom: 12px; margin-bottom: 12px;
} }
.payments-info_managers-price { .payment-info_managers-price {
margin-bottom: 20px; margin-bottom: 20px;
} }
.payments-info { .payment-info {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(100px, 320px)); grid-template-columns: repeat(2, minmax(100px, 320px));
grid-gap: 20px; grid-gap: 20px;
@ -43,10 +43,10 @@ const PaymentsPage = ({
pricePerManager, pricePerManager,
setPortalQuota, setPortalQuota,
}) => { }) => {
const { t, ready } = useTranslation("Payments"); const { t, ready } = useTranslation(["Payments", "Settings"]);
useEffect(() => { useEffect(() => {
setDocumentTitle(t("TariffsPlans")); //TODO: need to specify setDocumentTitle(t("Settings:Payments")); //TODO: need to specify
}, [ready]); }, [ready]);
useEffect(() => { useEffect(() => {
@ -65,17 +65,12 @@ const PaymentsPage = ({
{isStartup ? t("StartupTitle") : t("BusinessTitle")} {isStartup ? t("StartupTitle") : t("BusinessTitle")}
</Text> </Text>
<CurrentTariffContainer /> <CurrentTariffContainer />
<Text <Text noSelect fontSize="16px" isBold className="payment-info_suggestion">
noSelect
fontSize="16px"
isBold
className="payments-info_suggestion"
>
{isStartup ? t("StartupSuggestion") : t("BusinessSuggestion")} {isStartup ? t("StartupSuggestion") : t("BusinessSuggestion")}
</Text> </Text>
{!isStartup && ( {!isStartup && (
<Text noSelect fontSize={"14"} className="payments-info_managers-price"> <Text noSelect fontSize={"14"} className="payment-info_managers-price">
<Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments"> <Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments">
{{ finalDate: finalDate }} {{ finalDate: finalDate }}
</Trans> </Trans>
@ -86,14 +81,14 @@ const PaymentsPage = ({
noSelect noSelect
fontWeight={600} fontWeight={600}
fontSize={"14"} fontSize={"14"}
className="payments-info_managers-price" className="payment-info_managers-price"
> >
<Trans t={t} i18nKey="StartPrice" ns="Payments"> <Trans t={t} i18nKey="StartPrice" ns="Payments">
{{ price: pricePerManager }} {{ price: pricePerManager }}
</Trans> </Trans>
</Text> </Text>
<div className="payments-info"> <div className="payment-info">
<PriceCalculation t={t} /> <PriceCalculation t={t} />
<BenefitsContainer t={t} /> <BenefitsContainer t={t} />
</div> </div>

22
packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
View File

@ -39,7 +39,7 @@ const StyledBody = styled.div`
} }
} }
.payments-operations_input { .payment-operations_input {
width: 111px; width: 111px;
font-size: 44px; font-size: 44px;
text-align: center; text-align: center;
@ -52,12 +52,12 @@ const StyledBody = styled.div`
`} `}
} }
.tariff-users { .payment-users {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
width: max-content; width: max-content;
.tariff-score { .payment-score {
path { path {
${(props) => ${(props) =>
props.isDisabled && props.isDisabled &&
@ -67,7 +67,7 @@ const StyledBody = styled.div`
} }
} }
.tariff-score, .payment-score,
.circle { .circle {
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")}; cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
} }
@ -83,14 +83,14 @@ const StyledBody = styled.div`
align-items: center; align-items: center;
} }
} }
.tariff-users_count { .payment-users_count {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
text-align: center; text-align: center;
width: 102px; width: 102px;
} }
.tariff-users_text { .payment-users_text {
margin-bottom: 12px; margin-bottom: 12px;
text-align: center; text-align: center;
} }
@ -121,23 +121,23 @@ const SelectUsersCountContainer = ({
return ( return (
<StyledBody theme={theme} isDisabled={isDisabled}> <StyledBody theme={theme} isDisabled={isDisabled}>
<Text noSelect fontWeight={600} className="tariff-users_text" {...color}> <Text noSelect fontWeight={600} className="payment-users_text" {...color}>
{t("ManagersNumber")} {t("ManagersNumber")}
</Text> </Text>
<div className="tariff-users"> <div className="payment-users">
<div className="circle" {...onClickProp} data-operation={"minus"}> <div className="circle" {...onClickProp} data-operation={"minus"}>
<MinusIcon {...onClickProp} className="tariff-score" /> <MinusIcon {...onClickProp} className="payment-score" />
</div> </div>
<TextInput <TextInput
isReadOnly={isDisabled} isReadOnly={isDisabled}
withBorder={false} withBorder={false}
className="payments-operations_input" className="payment-operations_input"
value={value} value={value}
{...onchangeNumberProp} {...onchangeNumberProp}
/> />
<div className="circle" {...onClickProp} data-operation={"plus"}> <div className="circle" {...onClickProp} data-operation={"plus"}>
<PlusIcon {...onClickProp} className="tariff-score" /> <PlusIcon {...onClickProp} className="payment-score" />
</div> </div>
</div> </div>

24
packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useEffect } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useTranslation, Trans } from "react-i18next"; import { Trans } from "react-i18next";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -14,7 +14,7 @@ const StyledBody = styled.div`
max-width: 520px; max-width: 520px;
} }
.total-tariff_user { .payment_price_user {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -28,21 +28,21 @@ const StyledBody = styled.div`
margin-top: 5px; margin-top: 5px;
} }
} }
.total-tariff_price { .payment_price_total-price {
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 65px; min-height: 65px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
.total-tariff_description, .payment_price_description,
.total-tariff_price-text { .payment_price_price-text {
margin-bottom: 0px; margin-bottom: 0px;
} }
.total-tariff_description { .payment_price_description {
margin-top: 16px; margin-top: 16px;
} }
.total-tariff_month-text { .payment_price_month-text {
margin: auto 0; margin: auto 0;
margin-bottom: 13px; margin-bottom: 13px;
} }
@ -71,7 +71,7 @@ const TotalTariffContainer = ({
return ( return (
<StyledBody> <StyledBody>
<div className="total-tariff_user"> <div className="payment_price_user">
<Text fontSize="16px" textAlign="center" isBold noSelect {...color}> <Text fontSize="16px" textAlign="center" isBold noSelect {...color}>
{pricePerManager} {pricePerManager}
</Text> </Text>
@ -85,7 +85,7 @@ const TotalTariffContainer = ({
{t("PerUserMonth")} {t("PerUserMonth")}
</Text> </Text>
</div> </div>
<div className="total-tariff_price"> <div className="payment_price_total-price">
{isNeedRequest ? ( {isNeedRequest ? (
<Text <Text
noSelect noSelect
@ -104,7 +104,7 @@ const TotalTariffContainer = ({
fontSize="48px" fontSize="48px"
isBold isBold
textAlign={"center"} textAlign={"center"}
className="total-tariff_price-text" className="payment_price_price-text"
noSelect noSelect
{...color} {...color}
> >
@ -114,7 +114,7 @@ const TotalTariffContainer = ({
fontSize="16px" fontSize="16px"
isBold isBold
textAlign={"center"} textAlign={"center"}
className="total-tariff_month-text" className="payment_price_month-text"
noSelect noSelect
{...color} {...color}
> >