feat/life time access

config/env.js

@@ -22,7 +22,7 @@ const dotenvFiles = [
   // results for everyone
   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
+  paths.dotenv
 ].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
@@ -32,9 +32,9 @@ const dotenvFiles = [
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
+    require('dotenv-expand').expand(
       require('dotenv').config({
-        path: dotenvFile,
+        path: dotenvFile
       })
     );
   }
@@ -87,15 +87,15 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false'
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
-    }, {}),
+    }, {})
   };
 
   return { raw, stringified };

src/pages/HomePage/components/Sections/tier/TierSection.tsx

@@ -1,4 +1,4 @@
-import { getSubscribeLink } from '../../../../PricingPage/getSubscribeLink';
+import { getSubscribeLink } from '../../../../PricingPage/payment.links';
 import { TierInfoColumn } from './TierInfoColumn';
 import { useIsLoggedIn } from '../../../../../lib/useIsLoggedIn';
 

src/pages/PricingPage/PricingPage.tsx

@@ -1,13 +1,14 @@
 import { PageContainer } from '../../components/styled';
 import { getVisibleText } from '../../lib/text/getVisibleText';
-import { getSubscribeLink } from './getSubscribeLink';
+import { getLifetimeLink, getSubscribeLink } from './payment.links';
 import { PricingCard } from './components/PricingCard';
 import TopMessage from '../../components/TopMessage/TopMessage';
 import { useIsLoggedIn } from '../../lib/useIsLoggedIn';
 
 export default function PricingPage() {
   const isLoggedIn = useIsLoggedIn();
   const subcribeLink = isLoggedIn ? getSubscribeLink() : '/login';
+  const lifetimeLink = isLoggedIn ? getLifetimeLink() : '/login';
 
   return (
     <PageContainer>
@@ -35,6 +36,10 @@ export default function PricingPage() {
                 <PricingCard price="$2" title="Subscriber Plan" benefits={['Unlimited Flashcards (9GB++)']}
                              link={subcribeLink} linkText="Subscribe" />
               </div>
+              <div className="column is-4">
+                <PricingCard price="$96" title="Lifetime Access" benefits={['Forever premium access to 2anki.net']}
+                             link={lifetimeLink} linkText="Buy" />
+              </div>
             </div>
           </div>
         </section>

src/pages/PricingPage/components/PricingCard.tsx

@@ -17,9 +17,7 @@ export function PricingCard({ price, title, benefits, linkText, link }: Readonly
     </div>
     <div className="card-content">
       <div className="content">
-        <ul>
-          {benefits.map((benefit) => (<li key={benefit}>{benefit}</li>))}
-        </ul>
+        {benefits.map((benefit) => (<p key={benefit}>{benefit}</p>))}
       </div>
     </div>
     {link && linkText && <div className="card-footer">

src/pages/PricingPage/getSubscribeLink.tsx → src/pages/PricingPage/payment.links.ts

@@ -2,3 +2,8 @@ export const getSubscribeLink = () =>
   process.env.NODE_ENV === 'development' ?
     'https://buy.stripe.com/test_fZebM83k00Rj6PeeUU' :
     'https://buy.stripe.com/cN2cPC6ek7RCbjGdQU';
+
+export const getLifetimeLink = () =>
+  process.env.NODE_ENV === 'development' ?
+    'https://buy.stripe.com/test_14kbM82fW43v6PeeUV' :
+    'https://buy.stripe.com/28obLyeKQ3BmcnK8wB';