Client: PortalSettings: DeleteData: disable for not activated email
This commit is contained in:
parent
d383a33e7b
commit
c3647f0ba9
@ -27,16 +27,30 @@ export const MainContainer = styled.div`
|
||||
margin-bottom: 24px;
|
||||
color: ${(props) => props.theme.client.settings.common.descriptionColor};
|
||||
}
|
||||
`;
|
||||
|
||||
.button {
|
||||
@media (${smallTablet}) {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
width: calc(100% - 40px);
|
||||
export const ButtonWrapper = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
@media (${mobile}) {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
.request-again-link {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@media (${smallTablet}) {
|
||||
flex-direction: column-reverse;
|
||||
gap: 16px;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
@media (${mobile}) {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -5,13 +5,21 @@ import { inject } from "mobx-react";
|
||||
import Text from "@docspace/components/text";
|
||||
import Button from "@docspace/components/button";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import { MainContainer } from "./StyledDeleteData";
|
||||
import Link from "@docspace/components/link";
|
||||
import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
|
||||
import { setDocumentTitle } from "../../../../helpers/utils";
|
||||
import { sendSuspendPortalEmail } from "@docspace/common/api/portal";
|
||||
import { isDesktop } from "@docspace/components/utils/device";
|
||||
import { EmployeeActivationStatus } from "@docspace/common/constants";
|
||||
|
||||
const PortalDeactivation = (props) => {
|
||||
const { t, getPortalOwner, owner } = props;
|
||||
const {
|
||||
t,
|
||||
getPortalOwner,
|
||||
owner,
|
||||
currentColorScheme,
|
||||
sendActivationLink,
|
||||
} = props;
|
||||
const [isDesktopView, setIsDesktopView] = useState(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
@ -42,6 +50,13 @@ const PortalDeactivation = (props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const requestAgain = () => {
|
||||
sendActivationLink && sendActivationLink(t);
|
||||
};
|
||||
|
||||
const notActivatedEmail =
|
||||
owner.activationStatus === EmployeeActivationStatus.NotActivated;
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<Text fontSize="16px" fontWeight="700" className="header">
|
||||
@ -51,21 +66,46 @@ const PortalDeactivation = (props) => {
|
||||
{t("PortalDeactivationDescription")}
|
||||
</Text>
|
||||
<Text className="helper">{t("PortalDeactivationHelper")}</Text>
|
||||
<Button
|
||||
className="button"
|
||||
label={t("Deactivate")}
|
||||
primary
|
||||
size={isDesktopView ? "small" : "normal"}
|
||||
onClick={onDeactivateClick}
|
||||
/>
|
||||
<ButtonWrapper>
|
||||
<Button
|
||||
className="button"
|
||||
label={t("Deactivate")}
|
||||
primary
|
||||
size={isDesktopView ? "small" : "normal"}
|
||||
onClick={onDeactivateClick}
|
||||
isDisabled={notActivatedEmail}
|
||||
/>
|
||||
{notActivatedEmail && (
|
||||
<Text fontSize="12px" fontWeight="600">
|
||||
{t("MainBar:ConfirmEmailHeader")}
|
||||
<Link
|
||||
className="request-again-link"
|
||||
color={currentColorScheme?.main?.accent}
|
||||
fontSize="12px"
|
||||
fontWeight="400"
|
||||
onClick={requestAgain}
|
||||
>
|
||||
{t("MainBar:RequestActivation")}
|
||||
</Link>
|
||||
</Text>
|
||||
)}
|
||||
</ButtonWrapper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { getPortalOwner, owner } = auth.settingsStore;
|
||||
const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
|
||||
const { sendActivationLink } = auth.userStore;
|
||||
|
||||
return {
|
||||
getPortalOwner,
|
||||
owner,
|
||||
currentColorScheme,
|
||||
sendActivationLink,
|
||||
};
|
||||
})(withTranslation("Settings")(withRouter(PortalDeactivation)));
|
||||
})(
|
||||
withTranslation(["Settings", "MainBar", "People"])(
|
||||
withRouter(PortalDeactivation)
|
||||
)
|
||||
);
|
||||
|
@ -4,7 +4,8 @@ import { withTranslation } from "react-i18next";
|
||||
import { inject } from "mobx-react";
|
||||
import Text from "@docspace/components/text";
|
||||
import Button from "@docspace/components/button";
|
||||
import { MainContainer } from "./StyledDeleteData";
|
||||
import Link from "@docspace/components/link";
|
||||
import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
|
||||
import { setDocumentTitle } from "../../../../helpers/utils";
|
||||
import { DeletePortalDialog } from "SRC_DIR/components/dialogs";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
@ -13,9 +14,16 @@ import {
|
||||
sendDeletePortalEmail,
|
||||
} from "@docspace/common/api/portal";
|
||||
import { isDesktop } from "@docspace/components/utils/device";
|
||||
import { EmployeeActivationStatus } from "@docspace/common/constants";
|
||||
|
||||
const PortalDeletion = (props) => {
|
||||
const { t, getPortalOwner, owner } = props;
|
||||
const {
|
||||
t,
|
||||
getPortalOwner,
|
||||
owner,
|
||||
currentColorScheme,
|
||||
sendActivationLink,
|
||||
} = props;
|
||||
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
||||
const [stripeUrl, setStripeUrl] = useState(null);
|
||||
const [isDesktopView, setIsDesktopView] = useState(false);
|
||||
@ -54,6 +62,13 @@ const PortalDeletion = (props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const requestAgain = () => {
|
||||
sendActivationLink && sendActivationLink(t);
|
||||
};
|
||||
|
||||
const notActivatedEmail =
|
||||
owner.activationStatus === EmployeeActivationStatus.NotActivated;
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<Text fontSize="16px" fontWeight="700" className="header">
|
||||
@ -63,14 +78,30 @@ const PortalDeletion = (props) => {
|
||||
{t("PortalDeletionDescription")}
|
||||
</Text>
|
||||
<Text className="helper">{t("PortalDeletionHelper")}</Text>
|
||||
<Button
|
||||
className="button"
|
||||
label={t("Common:Delete")}
|
||||
primary
|
||||
size={isDesktopView ? "small" : "normal"}
|
||||
onClick={onDeleteClick}
|
||||
/>
|
||||
|
||||
<ButtonWrapper>
|
||||
<Button
|
||||
className="button"
|
||||
label={t("Common:Delete")}
|
||||
primary
|
||||
size={isDesktopView ? "small" : "normal"}
|
||||
onClick={onDeleteClick}
|
||||
isDisabled={notActivatedEmail}
|
||||
/>
|
||||
{notActivatedEmail && (
|
||||
<Text fontSize="12px" fontWeight="600">
|
||||
{t("MainBar:ConfirmEmailHeader")}
|
||||
<Link
|
||||
className="request-again-link"
|
||||
color={currentColorScheme?.main?.accent}
|
||||
fontSize="12px"
|
||||
fontWeight="400"
|
||||
onClick={requestAgain}
|
||||
>
|
||||
{t("MainBar:RequestActivation")}
|
||||
</Link>
|
||||
</Text>
|
||||
)}
|
||||
</ButtonWrapper>
|
||||
<DeletePortalDialog
|
||||
visible={isDialogVisible}
|
||||
onClose={() => setIsDialogVisible(false)}
|
||||
@ -82,9 +113,17 @@ const PortalDeletion = (props) => {
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { getPortalOwner, owner } = auth.settingsStore;
|
||||
const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
|
||||
const { sendActivationLink } = auth.userStore;
|
||||
|
||||
return {
|
||||
getPortalOwner,
|
||||
owner,
|
||||
currentColorScheme,
|
||||
sendActivationLink,
|
||||
};
|
||||
})(withTranslation(["Settings", "Common"])(withRouter(PortalDeletion)));
|
||||
})(
|
||||
withTranslation(["Settings", "MainBar", "People", "Common"])(
|
||||
withRouter(PortalDeletion)
|
||||
)
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user