diff --git a/src/components/Sidebar/SubscriptionStatus/index.tsx b/src/components/Sidebar/SubscriptionStatus/index.tsx index d62739a29..4b7206c60 100644 --- a/src/components/Sidebar/SubscriptionStatus/index.tsx +++ b/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) { - if (isSubscriptionActive(userDetails.subscription)) { - if (hasExceededStorageQuota(userDetails)) { - return showPlanSelectorModal; - } - } else { - if (hasStripeSubscription(userDetails.subscription)) { - return billingService.redirectToCustomerPortal; + const eventHandler: MouseEventHandler = (e) => { + e.stopPropagation(); + if (userDetails) { + if (isSubscriptionActive(userDetails.subscription)) { + if (hasExceededStorageQuota(userDetails)) { + showPlanSelectorModal(); + } } 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( - hasStripeSubscription(userDetails.subscription) - ? billingService.redirectToCustomerPortal - : showPlanSelectorModal - )} + : constants.SUBSCRIPTION_EXPIRED_MESSAGE(handleClick)} ); diff --git a/src/components/Upload/Uploader.tsx b/src/components/Upload/Uploader.tsx index 3bf574f1d..4162f9021 100644 --- a/src/components/Upload/Uploader.tsx +++ b/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; diff --git a/src/utils/billing/index.ts b/src/utils/billing/index.ts index 2394eb487..84308a074 100644 --- a/src/utils/billing/index.ts +++ b/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 );