Add Subscription pricing table (#204)

Co-authored-by: Ruben Buniatyan <[email protected]>

src/@services/ServiceContext.jsx

@@ -4,6 +4,7 @@ import EigenLayerService from './EigenLayerService';
 import LRTService from './LRTService';
 import OperatorService from './OperatorService';
 import RestakingDashboardService from './RestakingDashboardService';
+import SubscriptionService from './SubscriptionService';
 import { useSession } from '@clerk/clerk-react';
 
 export const ServiceContext = createContext();
@@ -31,5 +32,6 @@ const services = {
   lrtService: new LRTService(context),
   operatorService: new OperatorService(context),
   eigenlayerService: new EigenLayerService(context),
-  rdService: new RestakingDashboardService(context)
+  rdService: new RestakingDashboardService(context),
+  subscriptionService: new SubscriptionService(context)
 };

src/@services/SubscriptionService.js

@@ -0,0 +1,21 @@
+import BaseService from './BaseService';
+
+export default class SubscriptionService extends BaseService {
+  constructor(context) {
+    super(context);
+  }
+
+  async getPaymentLink(key) {
+    const response = await this._post('/subscriptions/get-payment-link', {
+      body: {
+        key
+      }
+    });
+
+    if (response.ok) {
+      return await response.json();
+    }
+
+    throw await this._createError(response);
+  }
+}

src/App.jsx

@@ -20,6 +20,7 @@ import OperatorDetails from './operators/OperatorDetails';
 import OperatorList from './operators/OperatorList';
 import Register from './onboarding/Register';
 import { ServiceProvider } from './@services/ServiceContext';
+import SubscriptionPlans from './subscription/SubscriptionPlans';
 import { ThemeProvider } from './shared/ThemeContext';
 
 const router = createBrowserRouter(
@@ -32,6 +33,7 @@ const router = createBrowserRouter(
       <Route element={<OperatorList />} path="/operators" />
       <Route element={<OperatorDetails />} path="/operators/:address/:tab?" />
       <Route element={<LST />} path="/lst" />
+      <Route element={<SubscriptionPlans />} path="/subscriptions" />
       <Route element={<Login />} path="/login" />
       <Route element={<Register />} path="/register" />
       <Route element={<NotFound />} path="*" />

src/onboarding/Login.jsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Input } from '@nextui-org/react';
+import { Button, Input } from '@nextui-org/react';
 import { useSignIn } from '@clerk/clerk-react';
 import { Link } from 'react-router-dom';
 import { reduceState } from '../shared/helpers';
@@ -126,11 +126,11 @@ export default function Login() {
           })}
         />
 
-        <div className="flex w-full items-center gap-x-2">
+        {/* <div className="flex w-full items-center gap-x-2">
           <Divider className="w-[46.5%] bg-outline" />
           <p>or</p>
           <Divider className="w-[46.5%] bg-outline" />
-        </div>
+        </div> */}
         {/* <Button
           className="rounded-sm border border-outline"
           fullWidth

src/subscription/SubscriptionPlans.jsx

@@ -0,0 +1,81 @@
+import { Button } from '@nextui-org/react';
+import { reduceState } from '../shared/helpers';
+import { useAuth } from '@clerk/clerk-react';
+import { useMutativeReducer } from 'use-mutative';
+import { useNavigate } from 'react-router-dom';
+import { useServices } from '../@services/ServiceContext';
+
+export default function SubscriptionPlans() {
+  const { isSignedIn } = useAuth();
+  const navigate = useNavigate();
+  const { subscriptionService } = useServices();
+  const [state, dispatch] = useMutativeReducer(reduceState, {
+    isError: false
+  });
+
+  const handleSubscribe = async () => {
+    if (!isSignedIn) {
+      navigate('/login');
+    }
+    try {
+      dispatch({ isError: false });
+      const res = await subscriptionService.getPaymentLink('monthly_support');
+      window.location.href = res.paymentlink;
+    } catch {
+      dispatch({ isError: true });
+    }
+  };
+
+  return (
+    <div className="mx-auto flex w-full flex-col items-center justify-center gap-y-3">
+      <div className="font-display text-3xl font-medium text-foreground-1">
+        Support plans
+      </div>
+      <div>
+        <div className="w-full text-center text-foreground-2 md:w-[40rem]">
+          Support the development of our dashboard so we can continue adding
+          more amazing features to help the restaking community
+        </div>
+      </div>{' '}
+      <div className="mt-4 flex w-full flex-col gap-6 sm:flex-row">
+        <div className="flex w-full flex-col items-center justify-center gap-x-6 gap-y-4 p-4 sm:h-80">
+          <div className="gap-x-1 font-display text-3xl text-foreground-1">
+            $1.99/month
+          </div>
+
+          <FeatureItem
+            description="Hide promotions throughout the dashboard"
+            heading="Hide promotions"
+          />
+          <FeatureItem
+            description="Cancel it at anytime"
+            heading="Renews monthly"
+          />
+
+          {state.isError && (
+            <p className="text-error-800">
+              Some error occured. Please try again later
+            </p>
+          )}
+          <Button
+            className="mt-4 h-12 w-44 border-secondary text-secondary hover:border-focus hover:text-focus"
+            onPress={handleSubscribe}
+            radius="sm"
+            variant="bordered"
+          >
+            Support us
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FeatureItem({ heading, description }) {
+  return (
+    <div className="text-center">
+      <div className="text-foreground-1">{heading}</div>
+      <div className="text-foreground-2">{description}</div>
+    </div>
+  );
+}