beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added subcription message component and extracted strings

Browse source
This commit is contained in:
Abhinav-grd 2021-03-11 21:57:07 +05:30
parent 86b733982d
commit ad6f92cf38
2 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/FullScreenDropZone.tsx
View file

@ -6,6 +6,8 @@ import ConfirmLogout from 'components/ConfirmLogout';
import Spinner from 'react-bootstrap/Spinner';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import subscriptionService from 'services/subscriptionService';
import ChangeDisabledMessage from './ChangeDisabledMessage';
import constants from 'utils/strings/constants';
export const getColor = (props) => {
if (props.isDragActive) {
@ -63,7 +65,10 @@ interface Subscription {
}
export default function FullScreenDropZone(props: Props) {
const [logoutModalView, setLogoutModalView] = useState(false);
const [
changeDisabledMessageModalView,
setChangeDisabledMessageModalView,
] = useState(false);
function showLogoutModal() {
setLogoutModalView(true);
}
@ -85,15 +90,25 @@ export default function FullScreenDropZone(props: Props) {
<DropDiv {...props.getRootProps()} onDragEnter={props.onDragEnter}>
<Menu className="text-center">
<div>
Subscription Plans{' '}
<Button variant="success" size="sm">
{constants.SUBCRIPTION_PLAN}
<Button
variant="success"
size="sm"
onClick={() => setChangeDisabledMessageModalView(true)}
>
Change
</Button>
<ChangeDisabledMessage
show={changeDisabledMessageModalView}
onHide={() => setChangeDisabledMessageModalView(false)}
logout={() => {
setLogoutModalView(false);
props.logout();
}}
/>
<br />
<br />
you are currently on{' '}
<strong>{subscription?.productID}</strong> plan
<br />
{constants.SUBSCRIPTION_INFO(subscription?.productID)}
<br />
<br />
</div>
@ -102,9 +117,12 @@ export default function FullScreenDropZone(props: Props) {
<br />
<div>
{usage ? (
`you have used ${usage} GB out of your ${subscriptionService.convertBytesToGBs(
subscription.storage
)} GB quota`
constants.USAGE_INFO(
usage,
subscriptionService.convertBytesToGBs(
subscription?.storage
)
)
) : (
<Spinner animation="border" />
)}
@ -132,7 +150,7 @@ export default function FullScreenDropZone(props: Props) {
onDragLeave={props.onDragLeave}
isDragActive={props.isDragActive}
>
drop to backup your files
{constants.UPLOAD_DROPZONE_MESSAGE}
</Overlay>
)}
{props.children}

24
src/utils/strings/englishConstants.tsx
View file

@ -81,11 +81,17 @@ const englishConstants = {
INSTALL_MOBILE_APP: () => (
<div>
install our{' '}
<a href="https://play.google.com/store/apps/details?id=io.ente.photos" target="_blank">
<a
href="https://play.google.com/store/apps/details?id=io.ente.photos"
target="_blank"
>
android
</a>{' '}
or{' '}
<a href="https://apps.apple.com/in/app/ente-photos/id1542026904" target="_blank">
<a
href="https://apps.apple.com/in/app/ente-photos/id1542026904"
target="_blank"
>
ios app{' '}
</a>
to automatically backup all your photos
@ -94,6 +100,20 @@ const englishConstants = {
LOGOUT: 'logout',
LOGOUT_WARNING: 'sure you want to logout?',
CANCEL: 'cancel',
SUBSCRIPTION_CHANGE_DISABLED:
'sorry, you can only change the subscription on the mobile app.',
SUBCRIPTION_PLAN: 'subscription plan',
SUBSCRIPTION_INFO: (productID) => (
<p>
you are currently on <strong>{productID}</strong> plan
</p>
),
USAGE_INFO: (usage, quota) => (
<p>
you have used {usage} GB out of your {quota} GB quota
</p>
),
UPLOAD_DROPZONE_MESSAGE: 'drop to backup your files',
};
export default englishConstants;