From 7c19bcacb763e1e8215828c01def3dabeb1456d1 Mon Sep 17 00:00:00 2001
From: Yiin <stanislovas.janonis@gmail.com>
Date: Thu, 5 Dec 2019 07:27:36 +0200
Subject: [PATCH 1/2] Do not show upgrade storage button when on visionary or
 lifetime plan

Fixes https://github.com/ProtonMail/react-components/issues/459
---
 containers/sidebar/StorageSpaceStatus.js | 25 ++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/containers/sidebar/StorageSpaceStatus.js b/containers/sidebar/StorageSpaceStatus.js
index ec2e6f706..7dfa5856e 100644
--- a/containers/sidebar/StorageSpaceStatus.js
+++ b/containers/sidebar/StorageSpaceStatus.js
@@ -1,15 +1,32 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { c } from 'ttag';
-import { CircularProgress, Dropdown, Icon, generateUID, useUser, usePopperAnchor } from 'react-components';
+import {
+    CircularProgress,
+    Dropdown,
+    Icon,
+    generateUID,
+    useUser,
+    usePopperAnchor,
+    useSubscription
+} from 'react-components';
 import humanSize from 'proton-shared/lib/helpers/humanSize';
+import { getPlanName, hasLifetime } from 'proton-shared/lib/helpers/subscription';
+import { PLANS } from 'proton-shared/lib/constants';
 
 import { classnames } from '../../helpers/component';
 
-const StorageSpaceStatus = ({ children }) => {
+const { VISIONARY } = PLANS;
+
+const StorageSpaceStatus = ({ upgradeButton }) => {
     const [{ MaxSpace, UsedSpace }] = useUser();
+    const [subscription = {}] = useSubscription();
     const [uid] = useState(generateUID('dropdown'));
     const { anchorRef, isOpen, toggle, close } = usePopperAnchor();
+    const planName = getPlanName(subscription);
+    const hasVisionaryPlan = planName === VISIONARY;
+    const hasLifetimePlan = hasLifetime(subscription);
+    const canUpgradeStorage = !hasVisionaryPlan && !hasLifetimePlan;
 
     // round with 0.01 precision
     const usedPercent = Math.round((UsedSpace / MaxSpace) * 10000) / 100;
@@ -69,7 +86,7 @@ const StorageSpaceStatus = ({ children }) => {
                                     {c('Info').t`Your storage space is shared across all Proton products.`}
                                 </span>
                             </div>
-                            {children}
+                            {canUpgradeStorage ? upgradeButton : null}
                         </div>
                     </div>
                 </div>
@@ -79,7 +96,7 @@ const StorageSpaceStatus = ({ children }) => {
 };
 
 StorageSpaceStatus.propTypes = {
-    children: PropTypes.node
+    upgradeButton: PropTypes.node
 };
 
 export default StorageSpaceStatus;

From c1e6b1a338dcd25e4e2c1a4fc578a4dbd8d44727 Mon Sep 17 00:00:00 2001
From: Yiin <stanislovas.janonis@gmail.com>
Date: Thu, 5 Dec 2019 13:39:17 +0200
Subject: [PATCH 2/2] Review with EpokK

Co-Authored-By: Richard <EpokK@users.noreply.github.com>
---
 containers/sidebar/StorageSpaceStatus.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/containers/sidebar/StorageSpaceStatus.js b/containers/sidebar/StorageSpaceStatus.js
index 7dfa5856e..4a73394c4 100644
--- a/containers/sidebar/StorageSpaceStatus.js
+++ b/containers/sidebar/StorageSpaceStatus.js
@@ -5,28 +5,23 @@ import {
     CircularProgress,
     Dropdown,
     Icon,
+    Loader,
     generateUID,
     useUser,
     usePopperAnchor,
     useSubscription
 } from 'react-components';
 import humanSize from 'proton-shared/lib/helpers/humanSize';
-import { getPlanName, hasLifetime } from 'proton-shared/lib/helpers/subscription';
-import { PLANS } from 'proton-shared/lib/constants';
+import { hasVisionary, hasLifetime } from 'proton-shared/lib/helpers/subscription';
 
 import { classnames } from '../../helpers/component';
 
-const { VISIONARY } = PLANS;
-
 const StorageSpaceStatus = ({ upgradeButton }) => {
     const [{ MaxSpace, UsedSpace }] = useUser();
-    const [subscription = {}] = useSubscription();
+    const [subscription, loadingSubscription] = useSubscription();
     const [uid] = useState(generateUID('dropdown'));
     const { anchorRef, isOpen, toggle, close } = usePopperAnchor();
-    const planName = getPlanName(subscription);
-    const hasVisionaryPlan = planName === VISIONARY;
-    const hasLifetimePlan = hasLifetime(subscription);
-    const canUpgradeStorage = !hasVisionaryPlan && !hasLifetimePlan;
+    const canUpgradeStorage = !hasVisionary(subscription) && !hasLifetime(subscription);
 
     // round with 0.01 precision
     const usedPercent = Math.round((UsedSpace / MaxSpace) * 10000) / 100;
@@ -86,7 +81,7 @@ const StorageSpaceStatus = ({ upgradeButton }) => {
                                     {c('Info').t`Your storage space is shared across all Proton products.`}
                                 </span>
                             </div>
-                            {canUpgradeStorage ? upgradeButton : null}
+                            {loadingSubscription ? <Loader /> : canUpgradeStorage ? upgradeButton : null}
                         </div>
                     </div>
                 </div>
@@ -96,7 +91,7 @@ const StorageSpaceStatus = ({ upgradeButton }) => {
 };
 
 StorageSpaceStatus.propTypes = {
-    upgradeButton: PropTypes.node
+    upgradeButton: PropTypes.node.isRequired
 };
 
 export default StorageSpaceStatus;