From 32164c8b9edb5cec2299f626084dc3dd4f17c7b2 Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Wed, 5 Jan 2022 09:57:49 +0000
Subject: [PATCH] Implement billing control

---
 .eslintrc.js                         |   1 +
 components/Layout/Footer.tsx         |  38 ++++---
 components/Layout/Header.module.scss |   2 +-
 components/Layout/Main.tsx           |   4 +-
 components/Panels/Billing.tsx        | 156 +++++++++++++++++++++++++++
 components/Panels/Login.tsx          |  20 +++-
 components/Panels/Pricing.tsx        | 117 ++++++++++++++++++++
 lib/constants.ts                     |   7 +-
 lib/utils.ts                         |  11 ++
 next.config.js                       |   2 +-
 pages/_document.tsx                  |   1 +
 pages/billing.tsx                    |  64 +++++++++++
 pages/index.tsx                      |   5 +
 pages/pricing.tsx                    |  63 +++++++++++
 styles/_common.scss                  |   2 +-
 15 files changed, 469 insertions(+), 24 deletions(-)
 create mode 100644 components/Panels/Billing.tsx
 create mode 100644 components/Panels/Pricing.tsx
 create mode 100644 pages/billing.tsx
 create mode 100644 pages/pricing.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index dfc7bd0..b4a7851 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -71,6 +71,7 @@ const eslint = {
     'react/jsx-curly-newline': 'off',
     'react/function-component-definition': 'off',
     'react/jsx-no-useless-fragment': 'off',
+    'no-nested-ternary': 'off',
   },
   parserOptions: {
     ecmaFeatures: {
diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx
index 32e16a9..59c9345 100644
--- a/components/Layout/Footer.tsx
+++ b/components/Layout/Footer.tsx
@@ -1,6 +1,8 @@
+import Link from 'next/link';
+
 import styles from './Footer.module.scss';
 
-const Footer = () => {
+const Footer = ({ hasValidSession }: { hasValidSession: boolean }) => {
   return (
     <footer className={styles.Footer}>
       <section className={styles.Footer__faq}>
@@ -10,20 +12,32 @@ const Footer = () => {
           <div className={styles['Footer__faq-item']}>
             <h4>What is Budget Zen?</h4>
             <p>
-              Simple and easy budget management.{' '}
+              Simple and encrypted budget management.{' '}
               <a href="https://budgetzen.net">Read more here</a>.
             </p>
           </div>
 
-          <div className={styles['Footer__faq-item']}>
-            <h4>How can I get a Sync Token?</h4>
-            <p>
-              <a href="https://budgetzen.net/get-sync-token">
-                See instructions here
-              </a>
-              .
-            </p>
-          </div>
+          {hasValidSession ? (
+            <div className={styles['Footer__faq-item']}>
+              <h4>How can I manage my subscription?</h4>
+              <p>
+                <Link href="/billing">
+                  <a>In your billing section</a>
+                </Link>
+                .
+              </p>
+            </div>
+          ) : (
+            <div className={styles['Footer__faq-item']}>
+              <h4>How can I subscribe?</h4>
+              <p>
+                <Link href="/pricing">
+                  <a>In the pricing section</a>
+                </Link>
+                .
+              </p>
+            </div>
+          )}
 
           <div className={styles['Footer__faq-item']}>
             <h4>Where's the code for this web app?</h4>
@@ -37,7 +51,7 @@ const Footer = () => {
         </div>
       </section>
       <h3 className={styles.Footer__links}>
-        <a href="https://privacy.onbrn.com">Privacy Policy</a> |{' '}
+        <a href="https://budgetzen.net/privacy">Privacy Policy</a> |{' '}
         <a href="mailto:me@brunobernardino.com">Get Help</a> | by{' '}
         <a href="https://brunobernardino.com">Bruno Bernardino</a>
       </h3>
diff --git a/components/Layout/Header.module.scss b/components/Layout/Header.module.scss
index c6ae427..cd55170 100644
--- a/components/Layout/Header.module.scss
+++ b/components/Layout/Header.module.scss
@@ -6,7 +6,7 @@
 
   &__logo {
     display: block;
-    margin: 3.5em 1em 0;
+    margin: 0 1em;
 
     img {
       width: 220px;
diff --git a/components/Layout/Main.tsx b/components/Layout/Main.tsx
index 4519e62..4f550a4 100644
--- a/components/Layout/Main.tsx
+++ b/components/Layout/Main.tsx
@@ -9,6 +9,7 @@ interface MainLayoutProps {
   title?: string;
   description?: string;
   keywords?: string;
+  hasValidSession?: boolean;
 }
 
 const MainLayout = ({
@@ -16,6 +17,7 @@ const MainLayout = ({
   title,
   description,
   keywords,
+  hasValidSession,
 }: MainLayoutProps) => {
   const metaTags = [
     { property: 'og:title', content: title },
@@ -42,7 +44,7 @@ const MainLayout = ({
       </Head>
       {SEOOverride}
       <div className="wrapper">{children}</div>
-      <Footer />
+      <Footer hasValidSession={Boolean(hasValidSession)} />
     </>
   );
 };
diff --git a/components/Panels/Billing.tsx b/components/Panels/Billing.tsx
new file mode 100644
index 0000000..3c9ac86
--- /dev/null
+++ b/components/Panels/Billing.tsx
@@ -0,0 +1,156 @@
+import React, { useCallback } from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import userbase from 'userbase-js';
+
+import { Title, Subtitle, Paragraph } from 'components';
+import { Header } from 'components/Layout';
+import Button from 'components/Button';
+
+interface BillingProps {
+  hasValidSession: boolean;
+  hasValidSubscription: boolean;
+  isTrialing: boolean;
+  isSubscriptionCanceled: boolean;
+  isSubscriptionMonthly: boolean;
+}
+
+const Hero = styled.section`
+  @media only screen and (min-width: 600px) {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const HeroText = styled.section`
+  margin-right: 1em;
+`;
+
+const Billing = ({
+  hasValidSession,
+  hasValidSubscription,
+  isTrialing,
+  isSubscriptionCanceled,
+  isSubscriptionMonthly,
+}: BillingProps) => {
+  const handleSubscriptionCancelClick = useCallback(async () => {
+    await userbase.cancelSubscription();
+    window.location.reload();
+  }, []);
+
+  const handleSubscriptionResumeClick = useCallback(async () => {
+    await userbase.resumeSubscription();
+    window.location.reload();
+  }, []);
+
+  const handlePaymentDetailsUpdateClick = useCallback(async () => {
+    await userbase.updatePaymentMethod({
+      successUrl: window.location.href,
+      cancelUrl: window.location.href,
+    });
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <Title>Billing</Title>
+      <Hero>
+        <HeroText>
+          <Paragraph>Billing is simple.</Paragraph>
+          <Paragraph>
+            Below, you can easily cancel your subscription anytime and email me
+            to ask for a refund. You can also update your payment details.
+          </Paragraph>
+        </HeroText>
+      </Hero>
+      {hasValidSession ? (
+        hasValidSubscription ? (
+          <>
+            <Subtitle>Thank you so much for your support!</Subtitle>
+            <Paragraph>
+              You're currently paying{' '}
+              <strong>
+                {isSubscriptionMonthly ? '€2 / month' : '€18 / year'}
+              </strong>
+              .
+            </Paragraph>
+            <Button
+              onClick={handlePaymentDetailsUpdateClick}
+              type="primary"
+              width="large"
+              style={{ margin: '2rem auto 1rem' }}
+            >
+              Update payment details
+            </Button>
+            {!isSubscriptionCanceled ? (
+              <>
+                <Button
+                  onClick={handleSubscriptionCancelClick}
+                  type="delete"
+                  style={{ margin: '5rem auto 1rem' }}
+                >
+                  Cancel subscription
+                </Button>
+                <Paragraph isCentered>
+                  The subscription will be canceled at the end of the current
+                  billing period.
+                </Paragraph>
+              </>
+            ) : null}
+            {isSubscriptionCanceled ? (
+              <>
+                <Paragraph style={{ marginTop: '5rem' }}>
+                  Your subscription is currently set to be canceled at the end
+                  of the current billing period.
+                </Paragraph>
+                <Button
+                  onClick={handleSubscriptionResumeClick}
+                  type="secondary"
+                  width="large"
+                  style={{ margin: '2rem auto 1rem' }}
+                >
+                  Resume subscription
+                </Button>
+              </>
+            ) : null}
+          </>
+        ) : isTrialing ? (
+          <>
+            <Subtitle>Your are on an active trial!</Subtitle>
+            <Paragraph>
+              If you're ready to pay, you probably want to check out the{' '}
+              <Link href="/pricing">
+                <a>pricing section</a>
+              </Link>{' '}
+              instead.
+            </Paragraph>
+          </>
+        ) : (
+          <>
+            <Subtitle>Your subscription has expired!</Subtitle>
+            <Paragraph>
+              You probably want to check out the{' '}
+              <Link href="/pricing">
+                <a>pricing section</a>
+              </Link>{' '}
+              instead.
+            </Paragraph>
+          </>
+        )
+      ) : (
+        <>
+          <Subtitle>Signup or Login first</Subtitle>
+          <Paragraph>
+            Before you can pay, you need to{' '}
+            <Link href="/">
+              <a>Signup or Login</a>
+            </Link>{' '}
+            first.
+          </Paragraph>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Billing;
diff --git a/components/Panels/Login.tsx b/components/Panels/Login.tsx
index 37a9b15..dfe60e8 100644
--- a/components/Panels/Login.tsx
+++ b/components/Panels/Login.tsx
@@ -20,19 +20,29 @@ const Login = () => {
   return (
     <>
       <Header />
-      <Title>Simple Budget Management</Title>
+      <Title>Simple + Encrypted Budget Management</Title>
       <Hero>
         <HeroText>
-          <Paragraph>Budget Zen is a simple budget management app.</Paragraph>
+          <Paragraph>
+            Budget Zen is a simple and <strong>encrypted</strong> budget
+            management app. You can{' '}
+            <a href="https://budgetzen.net">learn more about it here</a>, as
+            this is the app.
+          </Paragraph>
           <Paragraph>
             Currently it's available on every device via web browser, and you
             can browse its source code.
           </Paragraph>
+          <Paragraph>
+            You have a <strong>30-day free trial</strong> (no credit card
+            required), and at the end, you can pay <strong>€18 / year</strong>,
+            or <strong>€2 / month</strong>, no limits.
+          </Paragraph>
           <LoginButton />
           <Paragraph>
-            Note that logging in can take up to 30 seconds. This is because the
-            encryption logic is intentionally slow, in order to generate a safer
-            assymetric encryption key.
+            Note that logging in will take up a few seconds. This is
+            intentional, in order to generate a safer assymetric encryption key.
+            After logging in, the app should be blazing fast in any device.
           </Paragraph>
         </HeroText>
       </Hero>
diff --git a/components/Panels/Pricing.tsx b/components/Panels/Pricing.tsx
new file mode 100644
index 0000000..76e35d5
--- /dev/null
+++ b/components/Panels/Pricing.tsx
@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import userbase from 'userbase-js';
+
+import { Title, Subtitle, Paragraph } from 'components';
+import { Header } from 'components/Layout';
+import Button from 'components/Button';
+
+interface PricingProps {
+  hasValidSession: boolean;
+  hasValidSubscription: boolean;
+  trialDaysLeft: number;
+}
+
+const Hero = styled.section`
+  @media only screen and (min-width: 600px) {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const HeroText = styled.section`
+  margin-right: 1em;
+`;
+
+const Pricing = ({
+  hasValidSession,
+  hasValidSubscription,
+  trialDaysLeft,
+}: PricingProps) => {
+  const handleMonthlySubscriptionClick = useCallback(async () => {
+    await userbase.purchaseSubscription({
+      successUrl: window.location.href,
+      cancelUrl: window.location.href,
+      priceId: 'budget-zen-v2-monthly',
+    });
+  }, []);
+
+  const handleYearlySubscriptionClick = useCallback(async () => {
+    await userbase.purchaseSubscription({
+      successUrl: window.location.href,
+      cancelUrl: window.location.href,
+      priceId: 'budget-zen-v2-annual',
+    });
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <Title>Pricing</Title>
+      <Hero>
+        <HeroText>
+          <Paragraph>Pricing is simple.</Paragraph>
+          <Paragraph>
+            You have a <strong>30-day free trial</strong> (no credit card
+            required), and at the end, you can pay <strong>€18 / year</strong>,
+            or <strong>€2 / month</strong>, no limits.
+          </Paragraph>
+        </HeroText>
+      </Hero>
+      {hasValidSession ? (
+        hasValidSubscription ? (
+          <>
+            <Subtitle>You're already a customer!</Subtitle>
+            <Paragraph>
+              You probably want to check out the{' '}
+              <Link href="/billing">
+                <a>billing section</a>
+              </Link>{' '}
+              instead.
+            </Paragraph>
+          </>
+        ) : (
+          <>
+            <Paragraph>
+              Your trial{' '}
+              {trialDaysLeft > 0
+                ? `will expire in ${trialDaysLeft} day${
+                    trialDaysLeft !== 1 ? 's' : ''
+                  }`
+                : 'has expired'}
+              .
+            </Paragraph>
+            <Button
+              onClick={handleMonthlySubscriptionClick}
+              type="secondary"
+              style={{ margin: '3rem auto 1.5rem' }}
+            >
+              Pay €2 / month
+            </Button>
+            <Button
+              onClick={handleYearlySubscriptionClick}
+              type="primary"
+              width="large"
+            >
+              Pay €18 / year
+            </Button>
+          </>
+        )
+      ) : (
+        <>
+          <Subtitle>Signup or Login first</Subtitle>
+          <Paragraph>
+            Before you can pay, you need to{' '}
+            <Link href="/">
+              <a>Signup or Login</a>
+            </Link>{' '}
+            first.
+          </Paragraph>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Pricing;
diff --git a/lib/constants.ts b/lib/constants.ts
index 8f1a46c..d3b3549 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -1,9 +1,10 @@
 import { getUserInfo } from 'lib/utils';
 
-export const defaultTitle = 'Budget Zen — Simple and Easy Budget Management';
-export const defaultDescription = 'Simple and easy budget management.';
+export const defaultTitle =
+  'Budget Zen — Simple and Encrypted Budget Management';
+export const defaultDescription = 'Simple and encryped budget management.';
 export const defaultKeywords =
-  'budget, zen, simple, easy, app, web, ios, macos';
+  'budget, zen, encrypted, e2ee, end-to-end, simple, app, web, android, linux, ios, macos';
 
 export const sessionNamespace = 'BudgetZen_v2_appSession';
 
diff --git a/lib/utils.ts b/lib/utils.ts
index 34db4bb..684be14 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -187,3 +187,14 @@ export const isLoggedIn = async () => {
 
   return false;
 };
+
+export const getUserSession = async () => {
+  try {
+    const session = await userbase.init({ appId: USERBASE_APP_ID });
+    return session.user;
+  } catch (error) {
+    // Do nothing
+  }
+
+  return null;
+};
diff --git a/next.config.js b/next.config.js
index 9c288f9..6e1e50d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,7 +9,7 @@ const securityHeaders = [
   {
     key: 'Content-Security-Policy',
     value:
-      "default-src 'self' https://*.userbase.com wss://*.userbase.com data: blob:; child-src 'self' data: blob:; img-src 'self' https://*.usefathom.com data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.usefathom.com",
+      "default-src 'self' https://*.userbase.com wss://*.userbase.com https://*.stripe.com data: blob:; child-src 'self' data: blob: https://*.stripe.com; img-src 'self' https://*.usefathom.com data: blob: https://*.stripe.com; style-src 'self' 'unsafe-inline' https://*.stripe.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.usefathom.com https://*.stripe.com",
   },
   {
     key: 'Strict-Transport-Security',
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 491bfc9..9ed9c52 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -57,6 +57,7 @@ export default class MyDocument extends Document {
             data-site="SMOFTKDK"
             defer
           />
+          <script src="https://js.stripe.com/v3/" defer />
         </body>
       </Html>
     );
diff --git a/pages/billing.tsx b/pages/billing.tsx
new file mode 100644
index 0000000..2517cea
--- /dev/null
+++ b/pages/billing.tsx
@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+
+import { Main } from 'components/Layout';
+import Billing from 'components/Panels/Billing';
+import Loading from 'components/Loading';
+import { getUserSession } from 'lib/utils';
+import {
+  defaultTitle,
+  defaultDescription,
+  defaultKeywords,
+} from 'lib/constants';
+
+const BillingPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasValidSession, setHasValidSession] = useState(false);
+  const [hasValidSubscription, setHasValidSubscription] = useState(false);
+  const [isTrialing, setIsTrialing] = useState(false);
+  const [isSubscriptionCanceled, setIsSubscriptionCanceled] = useState(false);
+  const [isSubscriptionMonthly, setIsSubscriptionMonthly] = useState(false);
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const userSession = await getUserSession();
+      if (userSession) {
+        setHasValidSession(true);
+        setHasValidSubscription(userSession.subscriptionStatus === 'active');
+        setIsTrialing(
+          userSession.subscriptionStatus !== 'active' &&
+            Boolean(userSession.trialExpirationDate),
+        );
+        setIsSubscriptionCanceled(Boolean(userSession.cancelSubscriptionAt));
+        setIsSubscriptionMonthly(
+          userSession.subscriptionPlanId === 'budget-zen-v2-monthly',
+        );
+      }
+
+      setIsLoading(false);
+    };
+
+    checkSession();
+  }, []);
+
+  return (
+    <Main
+      title={defaultTitle}
+      description={defaultDescription}
+      keywords={defaultKeywords}
+      hasValidSession={hasValidSession}
+    >
+      <div className="billing common">
+        <Billing
+          hasValidSession={hasValidSession}
+          hasValidSubscription={hasValidSubscription}
+          isTrialing={isTrialing}
+          isSubscriptionCanceled={isSubscriptionCanceled}
+          isSubscriptionMonthly={isSubscriptionMonthly}
+        />
+      </div>
+      <Loading isShowing={isLoading} />
+    </Main>
+  );
+};
+
+export default BillingPage;
diff --git a/pages/index.tsx b/pages/index.tsx
index ed7a647..48e1d2c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Main } from 'components/Layout';
 import Login from 'components/Panels/Login';
 import AllPanels from 'components/Panels/All';
+import Loading from 'components/Loading';
 import { isLoggedIn } from 'lib/utils';
 import {
   defaultTitle,
@@ -11,12 +12,14 @@ import {
 } from 'lib/constants';
 
 const IndexPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
   const [hasValidSession, setHasValidSession] = useState(false);
 
   useEffect(() => {
     const checkSession = async () => {
       const isUserLoggedIn = await isLoggedIn();
       setHasValidSession(isUserLoggedIn);
+      setIsLoading(false);
     };
 
     checkSession();
@@ -27,10 +30,12 @@ const IndexPage = () => {
       title={defaultTitle}
       description={defaultDescription}
       keywords={defaultKeywords}
+      hasValidSession={hasValidSession}
     >
       <div className="index common">
         {!hasValidSession ? <Login /> : <AllPanels />}
       </div>
+      <Loading isShowing={isLoading} />
     </Main>
   );
 };
diff --git a/pages/pricing.tsx b/pages/pricing.tsx
new file mode 100644
index 0000000..36ac6d6
--- /dev/null
+++ b/pages/pricing.tsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+
+import { Main } from 'components/Layout';
+import Pricing from 'components/Panels/Pricing';
+import Loading from 'components/Loading';
+import { getUserSession } from 'lib/utils';
+import {
+  defaultTitle,
+  defaultDescription,
+  defaultKeywords,
+} from 'lib/constants';
+
+const PricingPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasValidSession, setHasValidSession] = useState(false);
+  const [hasValidSubscription, setHasValidSubscription] = useState(false);
+  const [trialDaysLeft, setTrialDaysLeft] = useState(30);
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const userSession = await getUserSession();
+      // TODO: Remove this
+      console.log('======== Pricing.userSession');
+      console.log(userSession);
+      if (userSession) {
+        setHasValidSession(true);
+        setHasValidSubscription(userSession.subscriptionStatus === 'active');
+        if (userSession.subscriptionStatus !== 'trialing') {
+          const daysLeft = moment(userSession.trialExpirationDate).diff(
+            moment(),
+            'days',
+          );
+          setTrialDaysLeft(daysLeft < 0 ? 0 : daysLeft);
+        }
+      }
+
+      setIsLoading(false);
+    };
+
+    checkSession();
+  }, []);
+
+  return (
+    <Main
+      title={defaultTitle}
+      description={defaultDescription}
+      keywords={defaultKeywords}
+      hasValidSession={hasValidSession}
+    >
+      <div className="pricing common">
+        <Pricing
+          hasValidSession={hasValidSession}
+          hasValidSubscription={hasValidSubscription}
+          trialDaysLeft={trialDaysLeft}
+        />
+      </div>
+      <Loading isShowing={isLoading} />
+    </Main>
+  );
+};
+
+export default PricingPage;
diff --git a/styles/_common.scss b/styles/_common.scss
index 0e84e24..e818974 100644
--- a/styles/_common.scss
+++ b/styles/_common.scss
@@ -11,7 +11,7 @@
     text-align: left;
 
     strong {
-      font-weight: 500;
+      font-weight: bold;
     }
   }