Web: Refactoring, added downgrade plan button.
This commit is contained in:
parent
3ba7052e2f
commit
150060faff
@ -13,6 +13,7 @@
|
||||
"Bytes": "bytes",
|
||||
"ContactUs": "For sales questions, contact us at",
|
||||
"DelayedPayment": "Delayed payment of the business plan dated {{date}}",
|
||||
"DowngradeNow": "Downgrade now",
|
||||
"FreeStartupPlan": "Free Startup plan",
|
||||
"GracePeriodActivated": "Grace period activated",
|
||||
"Gigabyte": "GB",
|
||||
|
@ -12,6 +12,7 @@
|
||||
"Bytes": "байт",
|
||||
"ContactUs": "По вопросам продаж обращайтесь к нам по адресу",
|
||||
"DelayedPayment": "Просроченная оплата Business плана от {{date}}",
|
||||
"DowngradeNow": "Понизить прямо сейчас",
|
||||
"FreeStartupPlan": "Бесплатный Startup план",
|
||||
"GracePeriodActivated": "Активирован льготный период",
|
||||
"GracePeriodActivatedDescription": "Активирован льготный период с {{fromDate}} - {{byDate}}. Во время льготного периода будут отключены функции создания комнат и добавления новых пользователей. По истечению срока портал будет полностью заблокирован. ",
|
||||
@ -38,6 +39,6 @@
|
||||
"StripeCustomerPortal": "перейти на клиентский портал Stripe",
|
||||
"SendRequest": "Отправить запрос",
|
||||
"Terabyte": "Тб",
|
||||
"UpgradeNow": "Обновитесь прямо сейчас",
|
||||
"UpgradeNow": "Обновить прямо сейчас",
|
||||
"YourPrice": "Ваша стоимость"
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@docspace/components/button";
|
||||
import styled, { css } from "styled-components";
|
||||
import toastr from "client/toastr";
|
||||
import SalesDepartmentRequestDialog from "../../../../../../src/components/dialogs/SalesDepartmentRequestDialog";
|
||||
import RequestButtonContainer from "./RequestButtonContainer";
|
||||
import UpdatePlanButtonContainer from "./UpdatePlanButtonContainer";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
button {
|
||||
@ -11,80 +11,22 @@ const StyledBody = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
let timerId = null;
|
||||
const ButtonContainer = ({
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isAlreadyPaid,
|
||||
managersCount,
|
||||
isDisabled,
|
||||
isLoading,
|
||||
maxTariffManagers,
|
||||
setPortalPaymentsQuotas,
|
||||
isLessCountThanAcceptable,
|
||||
t,
|
||||
isNotPaid,
|
||||
isGracePeriod,
|
||||
accountLink,
|
||||
}) => {
|
||||
const [isVisibleDialog, setIsVisibleDialog] = useState(false);
|
||||
|
||||
const updateMethod = async () => {
|
||||
try {
|
||||
timerId = setTimeout(() => {
|
||||
setIsLoading(true);
|
||||
}, 500);
|
||||
|
||||
await updatePayment(managersCount);
|
||||
await setPortalPaymentsQuotas();
|
||||
} catch (e) {
|
||||
toastr.error(e);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
};
|
||||
|
||||
const onUpdateTariff = () => {
|
||||
if (isAlreadyPaid) {
|
||||
updateMethod();
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentLink) window.open(paymentLink, "_blank");
|
||||
};
|
||||
|
||||
const goToStripeAccount = () => {
|
||||
if (accountLink) window.open(accountLink, "_blank");
|
||||
};
|
||||
|
||||
const toDoRequest = () => {
|
||||
setIsVisibleDialog(true);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setIsVisibleDialog(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
timerId && clearTimeout(timerId);
|
||||
timerId = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const isTheSameCount = managersCount === maxTariffManagers;
|
||||
|
||||
return (
|
||||
<StyledBody>
|
||||
{isVisibleDialog && (
|
||||
<SalesDepartmentRequestDialog
|
||||
visible={isVisibleDialog}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
{isNotPaid || isGracePeriod ? (
|
||||
<Button
|
||||
label={t("Pay")}
|
||||
@ -94,54 +36,26 @@ const ButtonContainer = ({
|
||||
onClick={goToStripeAccount}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
label={isNeedRequest ? t("SendRequest") : t("UpgradeNow")}
|
||||
size={"medium"}
|
||||
primary
|
||||
isDisabled={
|
||||
(!isNeedRequest && isAlreadyPaid && isTheSameCount) ||
|
||||
isLessCountThanAcceptable ||
|
||||
isLoading ||
|
||||
isDisabled
|
||||
}
|
||||
onClick={isNeedRequest ? toDoRequest : onUpdateTariff}
|
||||
) : isNeedRequest ? (
|
||||
<RequestButtonContainer
|
||||
isLoading={isLoading}
|
||||
isDisabled={isDisabled}
|
||||
t={t}
|
||||
/>
|
||||
) : (
|
||||
<UpdatePlanButtonContainer isAlreadyPaid={isAlreadyPaid} t={t} />
|
||||
)}
|
||||
</StyledBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const {
|
||||
portalPaymentQuotas,
|
||||
setPortalPaymentsQuotas,
|
||||
isNotPaid,
|
||||
isGracePeriod,
|
||||
} = auth;
|
||||
const { countAdmin: maxTariffManagers } = portalPaymentQuotas;
|
||||
const {
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
isLessCountThanAcceptable,
|
||||
accountLink,
|
||||
} = payments;
|
||||
const { isNotPaid, isGracePeriod } = auth;
|
||||
const { isNeedRequest, isLoading, accountLink } = payments;
|
||||
|
||||
return {
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
maxTariffManagers,
|
||||
setPortalPaymentsQuotas,
|
||||
isLessCountThanAcceptable,
|
||||
isNotPaid,
|
||||
isGracePeriod,
|
||||
accountLink,
|
||||
|
@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@docspace/components/button";
|
||||
import styled from "styled-components";
|
||||
import DowngradePlanDialog from "../../../../../components/dialogs/DowngradePlanDialog";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const DowngradePlanButtonContainer = ({
|
||||
isDisabled,
|
||||
isLoading,
|
||||
isLessCountThanAcceptable,
|
||||
t,
|
||||
onUpdateTariff,
|
||||
}) => {
|
||||
const [
|
||||
isVisibleDowngradePlanDialog,
|
||||
setIsVisibleDowngradePlanDialog,
|
||||
] = useState(false);
|
||||
|
||||
const isPassesByQuota = () => {
|
||||
return false;
|
||||
};
|
||||
const onDowngradeTariff = () => {
|
||||
if (!isPassesByQuota()) {
|
||||
setIsVisibleDowngradePlanDialog(true);
|
||||
return;
|
||||
}
|
||||
onUpdateTariff && onUpdateTariff();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
isVisibleDowngradePlanDialog && setIsVisibleDowngradePlanDialog(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledBody>
|
||||
{isVisibleDowngradePlanDialog && (
|
||||
<DowngradePlanDialog
|
||||
visible={isVisibleDowngradePlanDialog}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
label={t("DowngradeNow")}
|
||||
size={"medium"}
|
||||
primary
|
||||
isDisabled={isLessCountThanAcceptable || isLoading || isDisabled}
|
||||
onClick={onDowngradeTariff}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</StyledBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ payments }) => {
|
||||
const { isLoading, isLessCountThanAcceptable } = payments;
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
isLessCountThanAcceptable,
|
||||
};
|
||||
})(observer(DowngradePlanButtonContainer));
|
@ -0,0 +1,43 @@
|
||||
import React, { useState } from "react";
|
||||
import Button from "@docspace/components/button";
|
||||
import styled, { css } from "styled-components";
|
||||
import SalesDepartmentRequestDialog from "../../../../../components/dialogs/SalesDepartmentRequestDialog";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const RequestButtonContainer = ({ isDisabled, isLoading, t }) => {
|
||||
const [isVisibleDialog, setIsVisibleDialog] = useState(false);
|
||||
|
||||
const toDoRequest = () => {
|
||||
setIsVisibleDialog(true);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
isVisibleDialog && setIsVisibleDialog(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledBody>
|
||||
{isVisibleDialog && (
|
||||
<SalesDepartmentRequestDialog
|
||||
visible={isVisibleDialog}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
label={t("SendRequest")}
|
||||
size={"medium"}
|
||||
primary
|
||||
isDisabled={isLoading || isDisabled}
|
||||
onClick={toDoRequest}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</StyledBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestButtonContainer;
|
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import Button from "@docspace/components/button";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const SwitchingDifferentPlanButtonContainer = ({
|
||||
isDisabled,
|
||||
isLoading,
|
||||
isLessCountThanAcceptable,
|
||||
t,
|
||||
onUpdateTariff,
|
||||
}) => {
|
||||
return (
|
||||
<StyledBody>
|
||||
<Button
|
||||
label={t("UpgradeNow")}
|
||||
size={"medium"}
|
||||
primary
|
||||
isDisabled={isLessCountThanAcceptable || isLoading || isDisabled}
|
||||
onClick={onUpdateTariff}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</StyledBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitchingDifferentPlanButtonContainer;
|
@ -0,0 +1,130 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@docspace/components/button";
|
||||
import styled, { css } from "styled-components";
|
||||
import toastr from "client/toastr";
|
||||
import SwitchingDifferentPlanButtonContainer from "./SwitchingDifferentPlanButtonContainer";
|
||||
import DowngradePlanButtonContainer from "./DowngradePlanButtonContainer";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
let timerId = null;
|
||||
const UpdatePlanButtonContainer = ({
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isAlreadyPaid,
|
||||
managersCount,
|
||||
isDisabled,
|
||||
isLoading,
|
||||
maxTariffManagers,
|
||||
setPortalPaymentsQuotas,
|
||||
setPortalQuota,
|
||||
isLessCountThanAcceptable,
|
||||
t,
|
||||
}) => {
|
||||
const updateMethod = async () => {
|
||||
try {
|
||||
timerId = setTimeout(() => {
|
||||
setIsLoading(true);
|
||||
}, 500);
|
||||
|
||||
await updatePayment(managersCount);
|
||||
|
||||
await Promise.all([setPortalQuota(), setPortalPaymentsQuotas()]);
|
||||
} catch (e) {
|
||||
toastr.error(e);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
};
|
||||
|
||||
const onUpdateTariff = () => {
|
||||
if (isAlreadyPaid) {
|
||||
updateMethod();
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentLink) window.open(paymentLink, "_blank");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
timerId && clearTimeout(timerId);
|
||||
timerId = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const isTheSameCount = managersCount === maxTariffManagers;
|
||||
const isDowngradePlan = managersCount < maxTariffManagers;
|
||||
|
||||
return (
|
||||
<StyledBody>
|
||||
{isAlreadyPaid ? (
|
||||
isDowngradePlan ? (
|
||||
<DowngradePlanButtonContainer onUpdateTariff={onUpdateTariff} t={t} />
|
||||
) : (
|
||||
<Button
|
||||
label={t("UpgradeNow")}
|
||||
size={"medium"}
|
||||
primary
|
||||
isDisabled={isTheSameCount || isLoading || isDisabled}
|
||||
onClick={onUpdateTariff}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<SwitchingDifferentPlanButtonContainer
|
||||
t={t}
|
||||
onUpdateTariff={onUpdateTariff}
|
||||
isLessCountThanAcceptable={isLessCountThanAcceptable}
|
||||
isLoading={isLoading}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
)}
|
||||
</StyledBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, payments }) => {
|
||||
const {
|
||||
portalQuota,
|
||||
setPortalPaymentsQuotas,
|
||||
setPortalQuota,
|
||||
isNotPaid,
|
||||
isGracePeriod,
|
||||
} = auth;
|
||||
const { countAdmin: maxTariffManagers } = portalQuota;
|
||||
const {
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
isLessCountThanAcceptable,
|
||||
accountLink,
|
||||
} = payments;
|
||||
|
||||
return {
|
||||
updatePayment,
|
||||
setIsLoading,
|
||||
paymentLink,
|
||||
isNeedRequest,
|
||||
isLoading,
|
||||
managersCount,
|
||||
maxTariffManagers,
|
||||
setPortalPaymentsQuotas,
|
||||
setPortalQuota,
|
||||
isLessCountThanAcceptable,
|
||||
isNotPaid,
|
||||
isGracePeriod,
|
||||
accountLink,
|
||||
};
|
||||
})(observer(UpdatePlanButtonContainer));
|
@ -31,6 +31,7 @@ class AuthStore {
|
||||
|
||||
quota = {};
|
||||
portalPaymentQuotas = {};
|
||||
portalQuota = {};
|
||||
portalTariff = {};
|
||||
pricePerManager = null;
|
||||
currencies = [];
|
||||
|
Loading…
Reference in New Issue
Block a user