Merge pull request #304 from ente-io/update-plan-fetching

Update plan fetching

src/components/pages/gallery/PlanSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Form, Modal, Button } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Plan, Subscription } from 'types/billing';
 import {
     convertBytesToGBs,
@@ -25,7 +25,7 @@ import { DeadCenter } from 'pages/gallery';
 import billingService from 'services/billingService';
 import { SetLoading } from 'types/gallery';
 
-export const PlanIcon = styled.div<{ selected: boolean }>`
+export const PlanIcon = styled.div<{ currentlySubscribed: boolean }>`
     border-radius: 20px;
     width: 220px;
     border: 2px solid #333;
@@ -38,8 +38,9 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    cursor: ${(props) => (props.selected ? 'not-allowed' : 'pointer')};
-    border-color: ${(props) => props.selected && '#56e066'};
+    cursor: ${(props) =>
+        props.currentlySubscribed ? 'not-allowed' : 'pointer'};
+    border-color: ${(props) => props.currentlySubscribed && '#56e066'};
     transition: all 0.3s ease-out;
     overflow: hidden;
     position: relative;
@@ -56,12 +57,17 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
         transition: all 0.5s ease-out;
     }
 
-    &:hover {
-        transform: scale(1.1);
-        background-color: #ffffff11;
-    }
-
-    &:hover > div:first-child::before {
+    &:hover
+        ${(props) =>
+            !props.currentlySubscribed &&
+            css`
+                 {
+                    transform: scale(1.1);
+                    background-color: #ffffff11;
+                }
+            `}
+        &:hover
+        > div:first-child::before {
         transform: rotate(45deg) translateX(300px);
     }
 `;
@@ -163,8 +169,12 @@ function PlanSelector(props: Props) {
             <PlanIcon
                 key={plan.stripeID}
                 className="subscription-plan-selector"
-                selected={isUserSubscribedPlan(plan, subscription)}
-                onClick={async () => await onPlanSelect(plan)}>
+                currentlySubscribed={isUserSubscribedPlan(plan, subscription)}
+                onClick={
+                    isUserSubscribedPlan(plan, subscription)
+                        ? () => {}
+                        : async () => await onPlanSelect(plan)
+                }>
                 <div>
                     <span
                         style={{

src/services/billingService.ts

@@ -16,10 +16,22 @@ enum PaymentActionType {
 
 class billingService {
     public async getPlans(): Promise<Plan[]> {
+        const token = getToken();
         try {
-            const response = await HTTPService.get(
-                `${ENDPOINT}/billing/plans/v2`
-            );
+            let response;
+            if (!token) {
+                response = await HTTPService.get(
+                    `${ENDPOINT}/billing/plans/v2`
+                );
+            } else {
+                response = await HTTPService.get(
+                    `${ENDPOINT}/billing/user-plans`,
+                    null,
+                    {
+                        'X-Auth-Token': getToken(),
+                    }
+                );
+            }
             const { plans } = response.data;
             return plans;
         } catch (e) {

src/utils/common/key.ts

@@ -22,8 +22,4 @@ export const getActualKey = async () => {
     }
 };
 
-export const getStripePublishableKey = () =>
-    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ??
-    'pk_live_51HAhqDK59oeucIMOiTI6MDDM2UWUbCAJXJCGsvjJhiO8nYJz38rQq5T4iyQLDMKxqEDUfU5Hopuj4U5U4dff23oT00fHvZeodC';
-
 export const getToken = () => getData(LS_KEYS.USER)?.token;