Merge pull request #306 from ente-io/master

release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bada-frame",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -39,7 +39,6 @@
     "libsodium-wrappers": "^0.7.8",
     "localforage": "^1.9.0",
     "next": "^11.1.3",
-    "node-forge": "^0.10.0",
     "photoswipe": "file:./thirdparty/photoswipe",
     "piexifjs": "^1.0.6",
     "react": "^17.0.2",

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 {
+    &:hover
+        ${(props) =>
+            !props.currentlySubscribed &&
+            css`
+                 {
                     transform: scale(1.1);
                     background-color: #ffffff11;
                 }
-
-    &:hover > div:first-child::before {
+            `}
+        &: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(
+            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;

yarn.lock

@@ -3434,9 +3434,9 @@ fn-name@~3.0.0:
   integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
 
 follow-redirects@^1.0.0, follow-redirects@^1.14.0:
-  version "1.14.3"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz"
-  integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
 
 foreach@^2.0.5:
   version "2.0.5"
@@ -4684,11 +4684,6 @@ node-fetch@^2.6.0, node-fetch@^2.6.1:
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.2.tgz"
   integrity sha512-aLoxToI6RfZ+0NOjmWAgn9+LEd30YCkJKFSyWacNZdEKTit/ZMcKjGkTRo8uWEsnIb/hfKecNPEbln02PdWbcA==
 
-node-forge@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz"
-  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
-
 node-html-parser@1.4.9:
   version "1.4.9"
   resolved "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.4.9.tgz"