Merge pull request #726 from ente-io/expired-subscription-renewal

src/components/Sidebar/SubscriptionStatus/index.tsx

@@ -1,5 +1,5 @@
 import { GalleryContext } from 'pages/gallery';
-import React, { useContext, useMemo } from 'react';
+import React, { MouseEventHandler, useContext, useMemo } from 'react';
 import {
     hasPaidSubscription,
     isFamilyAdmin,
@@ -43,19 +43,23 @@ export default function SubscriptionStatus({
     }, [userDetails]);
 
     const handleClick = useMemo(() => {
-        if (userDetails) {
+        const eventHandler: MouseEventHandler<HTMLSpanElement> = (e) => {
-            if (isSubscriptionActive(userDetails.subscription)) {
+            e.stopPropagation();
-                if (hasExceededStorageQuota(userDetails)) {
+            if (userDetails) {
-                    return showPlanSelectorModal;
+                if (isSubscriptionActive(userDetails.subscription)) {
-                }
+                    if (hasExceededStorageQuota(userDetails)) {
-            } else {
+                        showPlanSelectorModal();
-                if (hasStripeSubscription(userDetails.subscription)) {
+                    }
-                    return billingService.redirectToCustomerPortal;
                 } else {
-                    return showPlanSelectorModal;
+                    if (hasStripeSubscription(userDetails.subscription)) {
+                        billingService.redirectToCustomerPortal();
+                    } else {
+                        showPlanSelectorModal();
+                    }
                 }
             }
-        }
+        };
+        return eventHandler;
     }, [userDetails]);
 
     if (!hasAMessage) {
@@ -80,13 +84,9 @@ export default function SubscriptionStatus({
                           )
                         : hasExceededStorageQuota(userDetails) &&
                           constants.STORAGE_QUOTA_EXCEEDED_SUBSCRIPTION_INFO(
-                              showPlanSelectorModal
+                              handleClick
                           )
-                    : constants.SUBSCRIPTION_EXPIRED_MESSAGE(
+                    : constants.SUBSCRIPTION_EXPIRED_MESSAGE(handleClick)}
-                          hasStripeSubscription(userDetails.subscription)
-                              ? billingService.redirectToCustomerPortal
-                              : showPlanSelectorModal
-                      )}
             </Typography>
         </Box>
     );

src/components/Upload/Uploader.tsx

@@ -454,7 +454,8 @@ export default function Uploader(props: Props) {
                     message: constants.SUBSCRIPTION_EXPIRED,
                     action: {
                         text: constants.RENEW_NOW,
-                        callback: billingService.redirectToCustomerPortal,
+                        callback: () =>
+                            billingService.redirectToCustomerPortal(),
                     },
                 };
                 break;

src/utils/billing/index.ts

@@ -153,7 +153,6 @@ export function isUserSubscribedPlan(plan: Plan, subscription: Subscription) {
 }
 export function hasStripeSubscription(subscription: Subscription) {
     return (
-        hasPaidSubscription(subscription) &&
         subscription.paymentProvider.length > 0 &&
         subscription.paymentProvider === PAYMENT_PROVIDER_STRIPE
     );