2021-05-30 16:56:48 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-03-12 03:31:19 +00:00
|
|
|
|
2021-05-30 16:56:48 +00:00
|
|
|
import { slide as Menu } from 'react-burger-menu';
|
2021-03-12 03:31:19 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
|
|
|
import { getToken } from 'utils/common/key';
|
|
|
|
import { getEndpoint } from 'utils/common/apiUtil';
|
|
|
|
import { Button } from 'react-bootstrap';
|
2021-03-17 07:27:26 +00:00
|
|
|
import {
|
2021-04-17 13:48:25 +00:00
|
|
|
isSubscriptionActive,
|
2021-03-17 07:27:26 +00:00
|
|
|
convertBytesToGBs,
|
|
|
|
getUserSubscription,
|
2021-03-17 10:44:29 +00:00
|
|
|
isOnFreePlan,
|
2021-03-18 15:26:43 +00:00
|
|
|
isSubscriptionCancelled,
|
|
|
|
isSubscribed,
|
2021-08-05 09:08:27 +00:00
|
|
|
convertToHumanReadable,
|
2021-03-17 07:27:26 +00:00
|
|
|
} from 'utils/billingUtil';
|
2021-03-12 03:31:19 +00:00
|
|
|
|
2021-03-27 13:52:53 +00:00
|
|
|
import isElectron from 'is-electron';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { Collection } from 'services/collectionService';
|
|
|
|
import { useRouter } from 'next/router';
|
2021-06-06 17:28:08 +00:00
|
|
|
import LinkButton from './pages/gallery/LinkButton';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { downloadApp } from 'utils/common';
|
2021-08-05 04:19:42 +00:00
|
|
|
import { getUserDetails, logoutUser } from 'services/userService';
|
2021-05-30 16:56:48 +00:00
|
|
|
import { LogoImage } from 'pages/_app';
|
|
|
|
import { SetDialogMessage } from './MessageDialog';
|
2021-05-29 06:27:52 +00:00
|
|
|
import EnteSpinner from './EnteSpinner';
|
|
|
|
import RecoveryKeyModal from './RecoveryKeyModal';
|
2021-06-24 08:31:05 +00:00
|
|
|
import TwoFactorModal from './TwoFactorModal';
|
2021-07-13 14:01:26 +00:00
|
|
|
import ExportModal from './ExportModal';
|
2021-06-24 08:31:05 +00:00
|
|
|
import { SetLoading } from 'pages/gallery';
|
2021-07-06 09:21:38 +00:00
|
|
|
import InProgressIcon from './icons/InProgressIcon';
|
2021-07-13 14:01:26 +00:00
|
|
|
import exportService from 'services/exportService';
|
2021-08-05 04:19:42 +00:00
|
|
|
import { Subscription } from 'services/billingService';
|
2021-04-07 07:18:45 +00:00
|
|
|
|
2021-03-12 04:50:58 +00:00
|
|
|
interface Props {
|
2021-04-23 07:12:56 +00:00
|
|
|
collections: Collection[];
|
2021-04-20 11:09:03 +00:00
|
|
|
setDialogMessage: SetDialogMessage;
|
2021-08-13 02:38:38 +00:00
|
|
|
setLoading: SetLoading;
|
2021-05-11 04:48:47 +00:00
|
|
|
showPlanSelectorModal: () => void;
|
2021-03-12 04:50:58 +00:00
|
|
|
}
|
|
|
|
export default function Sidebar(props: Props) {
|
2021-03-12 03:31:19 +00:00
|
|
|
const [usage, SetUsage] = useState<string>(null);
|
2021-03-17 07:27:26 +00:00
|
|
|
const [user, setUser] = useState(null);
|
|
|
|
const [subscription, setSubscription] = useState<Subscription>(null);
|
|
|
|
useEffect(() => {
|
|
|
|
setUser(getData(LS_KEYS.USER));
|
|
|
|
setSubscription(getUserSubscription());
|
|
|
|
}, []);
|
2021-03-12 04:24:01 +00:00
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
2021-04-22 14:30:07 +00:00
|
|
|
const [recoverModalView, setRecoveryModalView] = useState(false);
|
2021-06-24 08:31:05 +00:00
|
|
|
const [twoFactorModalView, setTwoFactorModalView] = useState(false);
|
2021-07-07 05:31:48 +00:00
|
|
|
const [exportModalView, setExportModalView] = useState(false);
|
2021-03-12 03:31:19 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const main = async () => {
|
2021-03-13 05:31:46 +00:00
|
|
|
if (!isOpen) {
|
|
|
|
return;
|
|
|
|
}
|
2021-08-13 02:38:38 +00:00
|
|
|
const userDetails = await getUserDetails();
|
2021-08-05 04:19:42 +00:00
|
|
|
setUser({ ...user, email: userDetails.email });
|
2021-08-05 09:08:27 +00:00
|
|
|
SetUsage(convertToHumanReadable(userDetails.usage));
|
2021-08-05 04:19:42 +00:00
|
|
|
setSubscription(userDetails.subscription);
|
2021-08-13 02:38:38 +00:00
|
|
|
setData(LS_KEYS.USER, {
|
|
|
|
...getData(LS_KEYS.USER),
|
|
|
|
email: userDetails.email,
|
|
|
|
});
|
2021-08-07 10:30:48 +00:00
|
|
|
setData(LS_KEYS.SUBSCRIPTION, userDetails.subscription);
|
2021-03-12 03:31:19 +00:00
|
|
|
};
|
|
|
|
main();
|
2021-03-13 05:31:46 +00:00
|
|
|
}, [isOpen]);
|
2021-03-12 03:31:19 +00:00
|
|
|
|
2021-03-14 07:41:50 +00:00
|
|
|
function openFeedbackURL() {
|
2021-08-13 02:38:38 +00:00
|
|
|
const feedbackURL: string = `${getEndpoint()}/users/feedback?token=${encodeURIComponent(
|
|
|
|
getToken()
|
|
|
|
)}`;
|
2021-05-29 06:27:52 +00:00
|
|
|
const win = window.open(feedbackURL, '_blank');
|
2021-03-14 07:41:50 +00:00
|
|
|
win.focus();
|
|
|
|
}
|
2021-04-19 08:29:12 +00:00
|
|
|
function openSupportMail() {
|
2021-05-29 06:27:52 +00:00
|
|
|
const a = document.createElement('a');
|
2021-04-19 08:29:12 +00:00
|
|
|
a.href = 'mailto:contact@ente.io';
|
2021-06-04 11:44:30 +00:00
|
|
|
|
2021-04-19 08:29:12 +00:00
|
|
|
a.rel = 'noreferrer noopener';
|
|
|
|
a.click();
|
|
|
|
}
|
2021-07-06 09:21:38 +00:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
2021-03-29 05:15:01 +00:00
|
|
|
function exportFiles() {
|
|
|
|
if (isElectron()) {
|
2021-07-07 05:31:48 +00:00
|
|
|
setExportModalView(true);
|
2021-03-29 05:15:01 +00:00
|
|
|
} else {
|
2021-04-25 15:16:58 +00:00
|
|
|
props.setDialogMessage({
|
|
|
|
title: constants.DOWNLOAD_APP,
|
|
|
|
content: constants.DOWNLOAD_APP_MESSAGE(),
|
|
|
|
staticBackdrop: true,
|
|
|
|
proceed: {
|
|
|
|
text: constants.DOWNLOAD,
|
|
|
|
action: downloadApp,
|
|
|
|
variant: 'success',
|
|
|
|
},
|
|
|
|
close: {
|
|
|
|
text: constants.CLOSE,
|
|
|
|
},
|
2021-04-22 12:56:06 +00:00
|
|
|
});
|
2021-03-29 05:15:01 +00:00
|
|
|
}
|
|
|
|
}
|
2021-04-19 08:29:12 +00:00
|
|
|
|
2021-04-05 05:12:37 +00:00
|
|
|
const router = useRouter();
|
2021-04-22 05:22:42 +00:00
|
|
|
function onManageClick() {
|
2021-04-23 05:19:45 +00:00
|
|
|
setIsOpen(false);
|
2021-05-11 04:48:47 +00:00
|
|
|
props.showPlanSelectorModal();
|
2021-04-22 05:22:42 +00:00
|
|
|
}
|
2021-03-12 03:31:19 +00:00
|
|
|
return (
|
2021-03-12 05:33:33 +00:00
|
|
|
<Menu
|
|
|
|
isOpen={isOpen}
|
|
|
|
onStateChange={(state) => setIsOpen(state.isOpen)}
|
2021-08-13 02:38:38 +00:00
|
|
|
itemListElement="div">
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
outline: 'none',
|
|
|
|
textAlign: 'center',
|
|
|
|
}}>
|
2021-05-24 15:58:45 +00:00
|
|
|
<LogoImage
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ height: '24px', padding: '3px' }}
|
2021-05-24 15:58:45 +00:00
|
|
|
alt="logo"
|
|
|
|
src="/icon.svg"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-04-25 15:16:58 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
outline: 'none',
|
|
|
|
color: 'rgb(45, 194, 98)',
|
|
|
|
fontSize: '16px',
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
2021-04-20 11:27:27 +00:00
|
|
|
{user?.email}
|
2021-03-16 21:07:07 +00:00
|
|
|
</div>
|
2021-08-13 02:38:38 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
overflow: 'auto',
|
|
|
|
outline: 'none',
|
|
|
|
paddingTop: '0',
|
|
|
|
}}>
|
2021-05-30 16:56:48 +00:00
|
|
|
<div style={{ outline: 'none' }}>
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
|
<h5 style={{ margin: '4px 0 12px 2px' }}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.SUBSCRIPTION_PLAN}
|
|
|
|
</h5>
|
2021-04-20 11:27:27 +00:00
|
|
|
</div>
|
2021-05-30 16:56:48 +00:00
|
|
|
<div style={{ color: '#959595' }}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{isSubscriptionActive(subscription) ? (
|
|
|
|
isOnFreePlan(subscription) ? (
|
|
|
|
constants.FREE_SUBSCRIPTION_INFO(
|
2021-08-13 02:38:38 +00:00
|
|
|
subscription?.expiryTime
|
2021-05-23 05:49:53 +00:00
|
|
|
)
|
|
|
|
) : isSubscriptionCancelled(subscription) ? (
|
|
|
|
constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO(
|
2021-08-13 02:38:38 +00:00
|
|
|
subscription?.expiryTime
|
2021-05-23 05:49:53 +00:00
|
|
|
)
|
|
|
|
) : (
|
|
|
|
constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO(
|
2021-08-13 02:38:38 +00:00
|
|
|
subscription?.expiryTime
|
2021-05-23 05:49:53 +00:00
|
|
|
)
|
2021-03-18 15:15:13 +00:00
|
|
|
)
|
2021-03-16 12:52:57 +00:00
|
|
|
) : (
|
2021-05-23 05:49:53 +00:00
|
|
|
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
|
|
|
)}
|
|
|
|
<Button
|
2021-05-23 12:04:29 +00:00
|
|
|
variant="outline-success"
|
|
|
|
block
|
2021-05-23 05:49:53 +00:00
|
|
|
size="sm"
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={onManageClick}>
|
2021-08-12 15:40:02 +00:00
|
|
|
{isSubscribed(subscription)
|
|
|
|
? constants.MANAGE
|
|
|
|
: constants.SUBSCRIBE}
|
2021-05-23 05:49:53 +00:00
|
|
|
</Button>
|
|
|
|
</div>
|
2021-03-14 07:19:41 +00:00
|
|
|
</div>
|
2021-05-30 16:56:48 +00:00
|
|
|
<div style={{ outline: 'none', marginTop: '30px' }} />
|
2021-05-23 05:49:53 +00:00
|
|
|
<div>
|
2021-05-30 16:56:48 +00:00
|
|
|
<h5 style={{ marginBottom: '12px' }}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.USAGE_DETAILS}
|
|
|
|
</h5>
|
2021-05-30 16:56:48 +00:00
|
|
|
<div style={{ color: '#959595' }}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{usage ? (
|
|
|
|
constants.USAGE_INFO(
|
|
|
|
usage,
|
2021-08-13 02:38:38 +00:00
|
|
|
Number(convertBytesToGBs(subscription?.storage))
|
2021-03-12 03:31:19 +00:00
|
|
|
)
|
2021-05-23 05:49:53 +00:00
|
|
|
) : (
|
2021-05-30 16:56:48 +00:00
|
|
|
<div style={{ textAlign: 'center' }}>
|
2021-05-23 05:49:53 +00:00
|
|
|
<EnteSpinner
|
|
|
|
style={{
|
|
|
|
borderWidth: '2px',
|
|
|
|
width: '20px',
|
|
|
|
height: '20px',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
2021-03-12 03:31:19 +00:00
|
|
|
</div>
|
2021-05-23 05:49:53 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
height: '1px',
|
|
|
|
marginTop: '40px',
|
|
|
|
background: '#242424',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
2021-05-24 03:50:47 +00:00
|
|
|
/>
|
|
|
|
<LinkButton
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ marginTop: '30px' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={openFeedbackURL}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.REQUEST_FEATURE}
|
|
|
|
</LinkButton>
|
2021-05-24 03:50:47 +00:00
|
|
|
<LinkButton
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ marginTop: '30px' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={openSupportMail}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.SUPPORT}
|
|
|
|
</LinkButton>
|
|
|
|
<>
|
|
|
|
<RecoveryKeyModal
|
|
|
|
show={recoverModalView}
|
|
|
|
onHide={() => setRecoveryModalView(false)}
|
2021-08-13 02:38:38 +00:00
|
|
|
somethingWentWrong={() =>
|
|
|
|
props.setDialogMessage({
|
|
|
|
title: constants.RECOVER_KEY_GENERATION_FAILED,
|
|
|
|
close: { variant: 'danger' },
|
|
|
|
})
|
|
|
|
}
|
2021-05-23 05:49:53 +00:00
|
|
|
/>
|
|
|
|
<LinkButton
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ marginTop: '30px' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={() => setRecoveryModalView(true)}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.DOWNLOAD_RECOVERY_KEY}
|
|
|
|
</LinkButton>
|
|
|
|
</>
|
2021-06-24 08:31:05 +00:00
|
|
|
<>
|
|
|
|
<TwoFactorModal
|
|
|
|
show={twoFactorModalView}
|
|
|
|
onHide={() => setTwoFactorModalView(false)}
|
|
|
|
setDialogMessage={props.setDialogMessage}
|
2021-06-29 11:52:26 +00:00
|
|
|
closeSidebar={() => setIsOpen(false)}
|
2021-06-24 08:31:05 +00:00
|
|
|
setLoading={props.setLoading}
|
|
|
|
/>
|
|
|
|
<LinkButton
|
|
|
|
style={{ marginTop: '30px' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={() => setTwoFactorModalView(true)}>
|
2021-06-24 08:31:05 +00:00
|
|
|
{constants.TWO_FACTOR}
|
|
|
|
</LinkButton>
|
|
|
|
</>
|
2021-05-23 05:49:53 +00:00
|
|
|
<LinkButton
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ marginTop: '30px' }}
|
2021-05-23 05:49:53 +00:00
|
|
|
onClick={() => {
|
2021-05-30 16:56:48 +00:00
|
|
|
setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
|
2021-06-26 11:44:06 +00:00
|
|
|
router.push('change-password');
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
2021-05-23 05:49:53 +00:00
|
|
|
{constants.CHANGE_PASSWORD}
|
|
|
|
</LinkButton>
|
2021-08-04 08:13:59 +00:00
|
|
|
<LinkButton
|
|
|
|
style={{ marginTop: '30px' }}
|
|
|
|
onClick={() => {
|
|
|
|
setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
|
|
|
|
router.push('change-email');
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
2021-08-04 08:13:59 +00:00
|
|
|
{constants.UPDATE_EMAIL}
|
|
|
|
</LinkButton>
|
2021-07-06 09:21:38 +00:00
|
|
|
<>
|
2021-08-13 02:38:38 +00:00
|
|
|
<ExportModal
|
|
|
|
show={exportModalView}
|
|
|
|
onHide={() => setExportModalView(false)}
|
|
|
|
usage={usage}
|
|
|
|
/>
|
|
|
|
<LinkButton
|
|
|
|
style={{ marginTop: '30px' }}
|
|
|
|
onClick={exportFiles}>
|
2021-07-06 09:21:38 +00:00
|
|
|
<div style={{ display: 'flex' }}>
|
2021-08-13 02:38:38 +00:00
|
|
|
{constants.EXPORT}
|
|
|
|
<div style={{ width: '20px' }} />
|
|
|
|
{exportService.isExportInProgress() && (
|
2021-07-09 03:48:19 +00:00
|
|
|
<InProgressIcon />
|
2021-08-13 02:38:38 +00:00
|
|
|
)}
|
2021-07-06 09:21:38 +00:00
|
|
|
</div>
|
|
|
|
</LinkButton>
|
|
|
|
</>
|
2021-05-23 05:49:53 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
height: '1px',
|
|
|
|
marginTop: '40px',
|
|
|
|
background: '#242424',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
2021-05-24 03:50:47 +00:00
|
|
|
/>
|
2021-05-23 05:49:53 +00:00
|
|
|
<LinkButton
|
|
|
|
variant="danger"
|
2021-05-30 16:56:48 +00:00
|
|
|
style={{ marginTop: '30px' }}
|
2021-08-13 02:38:38 +00:00
|
|
|
onClick={() =>
|
|
|
|
props.setDialogMessage({
|
|
|
|
title: `${constants.CONFIRM} ${constants.LOGOUT}`,
|
|
|
|
content: constants.LOGOUT_MESSAGE,
|
|
|
|
staticBackdrop: true,
|
|
|
|
proceed: {
|
|
|
|
text: constants.LOGOUT,
|
|
|
|
action: logoutUser,
|
|
|
|
variant: 'danger',
|
|
|
|
},
|
|
|
|
close: { text: constants.CANCEL },
|
|
|
|
})
|
|
|
|
}>
|
2021-06-04 11:42:23 +00:00
|
|
|
{constants.LOGOUT}
|
2021-04-19 08:29:12 +00:00
|
|
|
</LinkButton>
|
2021-05-24 03:50:47 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
marginTop: '40px',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
|
|
|
/>
|
2021-05-23 05:49:53 +00:00
|
|
|
</div>
|
2021-08-13 02:38:38 +00:00
|
|
|
</Menu>
|
2021-03-12 03:31:19 +00:00
|
|
|
);
|
|
|
|
}
|