added conditional manage or subscribe button

src/components/Sidebar.tsx

@@ -64,13 +64,19 @@ export default function Sidebar(props: Props) {
                     {constants.SUBSCRIPTION_PLAN}
                 </h5>
                 <div style={{ color: '#959595' }}>
-                    {subscription?.productID == 'free'
-                        ? constants.FREE_SUBSCRIPTION_INFO(
-                              subscription?.expiryTime
-                          )
-                        : constants.PAID_SUBSCRIPTION_INFO(
-                              subscription?.expiryTime
-                          )}
+                    {subscriptionService.planIsActive(subscription) ? (
+                        subscription?.productID == 'free' ? (
+                            constants.FREE_SUBSCRIPTION_INFO(
+                                subscription?.expiryTime
+                            )
+                        ) : (
+                            constants.PAID_SUBSCRIPTION_INFO(
+                                subscription?.expiryTime
+                            )
+                        )
+                    ) : (
+                        <p>{constants.SUBSCRIPTION_EXPIRED}</p>
+                    )}
                 </div>
                 <Button
                     variant="success"
@@ -79,7 +85,9 @@ export default function Sidebar(props: Props) {
                         subscriptionService.redirectToCustomerPortal()
                     }
                 >
-                    {constants.CHANGE}
+                    {subscriptionService.hasActivePaidPlan()
+                        ? constants.MANAGE
+                        : constants.SUBSCRIBE}
                 </Button>
             </div>
             <div style={{ outline: 'none', marginTop: '30px' }}>

src/pages/gallery/index.tsx

@@ -354,7 +354,7 @@ export default function Gallery(props: Props) {
                 </div>
             )}
             <AlertBanner bannerErrorCode={bannerErrorCode} />
-            {subscriptionService.isOnFreePlan() && (
+            {!subscriptionService.hasActivePaidPlan() && (
                 <Button
                     id="checkout"
                     variant="primary"

src/services/subscriptionService.ts

@@ -108,7 +108,7 @@ class SubscriptionService {
                     'X-Auth-Token': getToken(),
                 }
             );
-            window.location.href = response.data['URL'];
+            window.location.href = response.data['url'];
         } catch (e) {
             console.error('unable to get customer portal url');
         }
@@ -131,9 +131,16 @@ class SubscriptionService {
     public convertBytesToGBs(bytes, precision?): string {
         return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2);
     }
-    public isOnFreePlan() {
+    public hasActivePaidPlan() {
         const subscription: Subscription = getData(LS_KEYS.SUBSCRIPTION);
-        return subscription?.productID === FREE_PLAN;
+        return (
+            subscription &&
+            this.planIsActive(subscription) &&
+            subscription.productID !== FREE_PLAN
+        );
+    }
+    public planIsActive(subscription): boolean {
+        return subscription && subscription.expiryTime > Date.now() * 1000;
     }
 }
 

src/utils/strings/englishConstants.tsx

@@ -60,8 +60,7 @@ const englishConstants = {
     },
     UPLOADING_FILES: `uploading files`,
     OF: 'of',
-    SUBSCRIPTION_EXPIRED:
-        'your subscription has expired, please renew it form the mobile app',
+    SUBSCRIPTION_EXPIRED: 'your subscription has expired, please renew it',
     STORAGE_QUOTA_EXCEEDED:
         'you have exceeded your storage quota, please upgrade your plan from the mobile app',
     INITIAL_LOAD_DELAY_WARNING: 'the first load may take some time',
@@ -102,6 +101,7 @@ const englishConstants = {
     LOGOUT_WARNING: 'sure you want to logout?',
     CANCEL: 'cancel',
     SUBSCRIBE: 'subscribe',
+    MANAGE: 'manage',
     SUBSCRIPTION_CHANGE_DISABLED:
         'sorry, this operation is currently not supported on the web, please check your mobile app',
     SUBSCRIPTION_PLAN: 'subscription plan',