Web: Refactoring.
This commit is contained in:
parent
84790c8076
commit
66c6ad0b68
@ -1,6 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { smallTablet } from "@docspace/components/utils/device";
|
||||
@ -21,10 +20,10 @@ const StyledBody = styled.div`
|
||||
p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.tariff-benefits_text {
|
||||
.payment-benefits_text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tariff-benefits {
|
||||
.payment-benefits {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
align-items: baseline;
|
||||
@ -40,14 +39,14 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
|
||||
<Text
|
||||
fontSize={"16px"}
|
||||
fontWeight={"600"}
|
||||
className="tariff-benefits_text"
|
||||
className="payment-benefits_text"
|
||||
noSelect
|
||||
>
|
||||
{t("Benefits")}
|
||||
</Text>
|
||||
{availableTariffs.map((item, index) => {
|
||||
return (
|
||||
<div className="tariff-benefits" key={index}>
|
||||
<div className="payment-benefits" key={index}>
|
||||
<Text noSelect>{"*" + item}</Text>
|
||||
</div>
|
||||
);
|
||||
@ -56,7 +55,7 @@ const BenefitsContainer = ({ t, availableTariffs }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
export default inject(({ payments }) => {
|
||||
const { tariffsInfo } = payments;
|
||||
|
||||
const availableTariffs = ["first", "second", "third", "forth", "five"];
|
||||
|
||||
@ -18,13 +18,13 @@ import toastr from "@docspace/components/toast/toastr";
|
||||
const StyledBody = styled.div`
|
||||
max-width: 660px;
|
||||
|
||||
.payments-info_suggestion {
|
||||
.payment-info_suggestion {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.payments-info_managers-price {
|
||||
.payment-info_managers-price {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.payments-info {
|
||||
.payment-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(100px, 320px));
|
||||
grid-gap: 20px;
|
||||
@ -43,10 +43,10 @@ const PaymentsPage = ({
|
||||
pricePerManager,
|
||||
setPortalQuota,
|
||||
}) => {
|
||||
const { t, ready } = useTranslation("Payments");
|
||||
const { t, ready } = useTranslation(["Payments", "Settings"]);
|
||||
|
||||
useEffect(() => {
|
||||
setDocumentTitle(t("TariffsPlans")); //TODO: need to specify
|
||||
setDocumentTitle(t("Settings:Payments")); //TODO: need to specify
|
||||
}, [ready]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -65,17 +65,12 @@ const PaymentsPage = ({
|
||||
{isStartup ? t("StartupTitle") : t("BusinessTitle")}
|
||||
</Text>
|
||||
<CurrentTariffContainer />
|
||||
<Text
|
||||
noSelect
|
||||
fontSize="16px"
|
||||
isBold
|
||||
className="payments-info_suggestion"
|
||||
>
|
||||
<Text noSelect fontSize="16px" isBold className="payment-info_suggestion">
|
||||
{isStartup ? t("StartupSuggestion") : t("BusinessSuggestion")}
|
||||
</Text>
|
||||
|
||||
{!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">
|
||||
{{ finalDate: finalDate }}
|
||||
</Trans>
|
||||
@ -86,14 +81,14 @@ const PaymentsPage = ({
|
||||
noSelect
|
||||
fontWeight={600}
|
||||
fontSize={"14"}
|
||||
className="payments-info_managers-price"
|
||||
className="payment-info_managers-price"
|
||||
>
|
||||
<Trans t={t} i18nKey="StartPrice" ns="Payments">
|
||||
{{ price: pricePerManager }}
|
||||
</Trans>
|
||||
</Text>
|
||||
|
||||
<div className="payments-info">
|
||||
<div className="payment-info">
|
||||
<PriceCalculation t={t} />
|
||||
<BenefitsContainer t={t} />
|
||||
</div>
|
||||
|
||||
@ -39,7 +39,7 @@ const StyledBody = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.payments-operations_input {
|
||||
.payment-operations_input {
|
||||
width: 111px;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
@ -52,12 +52,12 @@ const StyledBody = styled.div`
|
||||
`}
|
||||
}
|
||||
|
||||
.tariff-users {
|
||||
.payment-users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
.tariff-score {
|
||||
.payment-score {
|
||||
path {
|
||||
${(props) =>
|
||||
props.isDisabled &&
|
||||
@ -67,7 +67,7 @@ const StyledBody = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.tariff-score,
|
||||
.payment-score,
|
||||
.circle {
|
||||
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
|
||||
}
|
||||
@ -83,14 +83,14 @@ const StyledBody = styled.div`
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.tariff-users_count {
|
||||
.payment-users_count {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
width: 102px;
|
||||
}
|
||||
|
||||
.tariff-users_text {
|
||||
.payment-users_text {
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -121,23 +121,23 @@ const SelectUsersCountContainer = ({
|
||||
|
||||
return (
|
||||
<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")}
|
||||
</Text>
|
||||
<div className="tariff-users">
|
||||
<div className="payment-users">
|
||||
<div className="circle" {...onClickProp} data-operation={"minus"}>
|
||||
<MinusIcon {...onClickProp} className="tariff-score" />
|
||||
<MinusIcon {...onClickProp} className="payment-score" />
|
||||
</div>
|
||||
|
||||
<TextInput
|
||||
isReadOnly={isDisabled}
|
||||
withBorder={false}
|
||||
className="payments-operations_input"
|
||||
className="payment-operations_input"
|
||||
value={value}
|
||||
{...onchangeNumberProp}
|
||||
/>
|
||||
<div className="circle" {...onClickProp} data-operation={"plus"}>
|
||||
<PlusIcon {...onClickProp} className="tariff-score" />
|
||||
<PlusIcon {...onClickProp} className="payment-score" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import { Trans } from "react-i18next";
|
||||
import Text from "@docspace/components/text";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@docspace/components/button";
|
||||
@ -14,7 +14,7 @@ const StyledBody = styled.div`
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.total-tariff_user {
|
||||
.payment_price_user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -28,21 +28,21 @@ const StyledBody = styled.div`
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.total-tariff_price {
|
||||
.payment_price_total-price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 65px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
.total-tariff_description,
|
||||
.total-tariff_price-text {
|
||||
.payment_price_description,
|
||||
.payment_price_price-text {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.total-tariff_description {
|
||||
.payment_price_description {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.total-tariff_month-text {
|
||||
.payment_price_month-text {
|
||||
margin: auto 0;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
@ -71,7 +71,7 @@ const TotalTariffContainer = ({
|
||||
|
||||
return (
|
||||
<StyledBody>
|
||||
<div className="total-tariff_user">
|
||||
<div className="payment_price_user">
|
||||
<Text fontSize="16px" textAlign="center" isBold noSelect {...color}>
|
||||
{pricePerManager}
|
||||
</Text>
|
||||
@ -85,7 +85,7 @@ const TotalTariffContainer = ({
|
||||
{t("PerUserMonth")}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="total-tariff_price">
|
||||
<div className="payment_price_total-price">
|
||||
{isNeedRequest ? (
|
||||
<Text
|
||||
noSelect
|
||||
@ -104,7 +104,7 @@ const TotalTariffContainer = ({
|
||||
fontSize="48px"
|
||||
isBold
|
||||
textAlign={"center"}
|
||||
className="total-tariff_price-text"
|
||||
className="payment_price_price-text"
|
||||
noSelect
|
||||
{...color}
|
||||
>
|
||||
@ -114,7 +114,7 @@ const TotalTariffContainer = ({
|
||||
fontSize="16px"
|
||||
isBold
|
||||
textAlign={"center"}
|
||||
className="total-tariff_month-text"
|
||||
className="payment_price_month-text"
|
||||
noSelect
|
||||
{...color}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user