updated sidebar and plan selector to manage plans

src/components/Sidebar.tsx

@@ -83,25 +83,16 @@ export default function Sidebar(props: Props) {
                         <p>{constants.SUBSCRIPTION_EXPIRED}</p>
                     )}
                 </div>
-                {subscriptionService.hasActivePaidPlan() ? (
-                    <Button
-                        variant="success"
-                        size="sm"
-                        onClick={() =>
-                            subscriptionService.redirectToCustomerPortal()
-                        }
-                    >
-                        {constants.MANAGE}
-                    </Button>
-                ) : (
-                    <Button
-                        variant="success"
-                        size="sm"
-                        onClick={() => props.setPlanModalView(true)}
-                    >
-                        {constants.SUBSCRIBE}
-                    </Button>
-                )}
+
+                <Button
+                    variant="success"
+                    size="sm"
+                    onClick={() => props.setPlanModalView(true)}
+                >
+                    {subscriptionService.hasActivePaidPlan()
+                        ? constants.MANAGE
+                        : constants.SUBSCRIBE}
+                </Button>
             </div>
             <div style={{ outline: 'none', marginTop: '30px' }}>
                 <h5 style={{ marginBottom: '12px' }}>

src/pages/gallery/components/PlanSelector.tsx

@@ -2,15 +2,20 @@ import React, { useState } from 'react';
 import { Modal, Spinner } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 import styled from 'styled-components';
-import subscriptionService, { Plan } from 'services/subscriptionService';
+import subscriptionService, {
+    Plan,
+    Subscription,
+} from 'services/subscriptionService';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
 
-export const PlanIcon = styled.div`
+export const PlanIcon = styled.div<{ selected: boolean }>`
     height: 192px;
     width: 250px;
     border: 1px solid #404040;
     text-align: center;
     font-size: 20px;
-    cursor: pointer;
+    cursor: ${(props) => (props.selected ? 'not-allowed' : 'pointer')};
+    background: ${(props) => props.selected && '#404040'};
 `;
 
 const LoaderOverlay = styled.div`
@@ -28,16 +33,35 @@ interface Props {
     plans: Plan[];
     modalView: boolean;
     closeModal: any;
+    setBannerErrorCode;
 }
 function PlanSelector(props: Props) {
     const [loading, setLoading] = useState(false);
+    const subscription: Subscription = getData(LS_KEYS.SUBSCRIPTION);
+    const selectPlan = async (plan) => {
+        try {
+            setLoading(true);
+            if (subscriptionService.hasActivePaidPlan()) {
+                if (plan.androidID === subscription.productID) {
+                    return;
+                }
+                await subscriptionService.updateSubscription(plan.stripeID);
+            } else {
+                await subscriptionService.buySubscription(plan.stripeID);
+            }
+        } catch (err) {
+            props.setBannerErrorCode(err.message);
+            setLoading(false);
+            props.closeModal();
+        }
+    };
     const PlanIcons: JSX.Element[] = props.plans?.map((plan) => (
         <PlanIcon
             key={plan.stripeID}
             onClick={() => {
-                setLoading(true);
-                subscriptionService.buySubscription(plan.stripeID);
+                selectPlan(plan);
             }}
+            selected={plan.androidID === subscription.productID}
         >
             <span
                 style={{
@@ -63,6 +87,18 @@ function PlanSelector(props: Props) {
             >
                 {`${plan.price} / ${constants.MONTH}`}
             </div>
+            {plan.androidID === subscription.productID && (
+                <div
+                    style={{
+                        color: '#ECECEC',
+                        lineHeight: '24px',
+                        fontSize: '24px',
+                        marginTop: '20px',
+                    }}
+                >
+                    current plan
+                </div>
+            )}
         </PlanIcon>
     ));
     return (
@@ -74,7 +110,9 @@ function PlanSelector(props: Props) {
         >
             <Modal.Header closeButton>
                 <Modal.Title style={{ marginLeft: '12px' }}>
-                    {constants.CHOOSE_PLAN}
+                    {subscriptionService.hasActivePaidPlan()
+                        ? constants.MANAGE_PLAN
+                        : constants.CHOOSE_PLAN}
                 </Modal.Title>
             </Modal.Header>
             <Modal.Body
@@ -82,10 +120,11 @@ function PlanSelector(props: Props) {
                     display: 'flex',
                     justifyContent: 'space-between',
                     flexWrap: 'wrap',
+                    minHeight: '150px',
                 }}
             >
                 {PlanIcons}
-                {loading && (
+                {(!props.plans || loading) && (
                     <LoaderOverlay>
                         <Spinner animation="border" />
                     </LoaderOverlay>

src/pages/gallery/index.tsx

@@ -370,6 +370,7 @@ export default function Gallery(props: Props) {
                 plans={plans}
                 modalView={props.planModalView}
                 closeModal={() => props.setPlanModalView(false)}
+                setBannerErrorCode={setBannerErrorCode}
             />
             <Collections
                 collections={collections}

src/utils/strings/englishConstants.tsx

@@ -139,6 +139,7 @@ const englishConstants = {
     CHANGE: 'change',
     CHANGE_EMAIL: 'change email ?',
     CHOOSE_PLAN: 'choose your subscription plan',
+    MANAGE_PLAN: 'manage your subscription plan',
     MONTH: 'month',
 };