stache

client/components/modules/plans/ContactCard/ContactCard.module.scss

@@ -2,9 +2,9 @@
 
 .wrapper {
   background-color: $color-background-overlay;
-  width: 375px;
+  width: 100%;
   border-radius: 20px;
-  padding: 65px;
+  padding: 25px;
   overflow: hidden;
   position: relative;
   margin: 0px 17px 24px;
@@ -24,7 +24,7 @@
 
   h2 {
     @include heading-lg;
-    margin: 0 0 24px;
+    margin: 0 0 12px;
   }
 
   p {

client/components/modules/plans/ContactCard/ContactCard.tsx

@@ -15,7 +15,7 @@ const ContactCard = ({ email, subject, classProp = '' }: ContactCardPropsT) => {
   return (
     <div className={`${styles.wrapper} ${classProp}`}>
       <div className={styles.content}>
-        <h2>Business</h2>
+        <h2>Enterprise</h2>
         <p>Need dedicated infrastructure, custom clients, or something else?</p>
         <Button
           label="contact us"

client/components/modules/plans/plan-cards/BusinessPlanCard.tsx

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+import { Button } from '@mozilla/lilypad-ui';
+import { BUSINESS_COPY } from '../plan.const';
+import BasePlanCard, { Price } from './BasePlanCard';
+import { getPricePageData } from 'util/utilities';
+import { useSelector } from 'react-redux';
+import { selectRegion } from 'store/regionSlice';
+import { BillingPeriodE, PlansE } from 'types/General';
+import styles from './BasePlanCard.module.scss';
+
+type BusinessPlanCardPropsT = {
+  billingPeriod: BillingPeriodE;
+};
+
+const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => {
+  const { regionCode } = useSelector(selectRegion);
+  const { planPrice, planUrl, taxDescription, currencySymbol } =
+    getPricePageData(regionCode, PlansE.BUSINESS, billingPeriod);
+
+  /**
+   * Handle routing user to correct payment plan
+   */
+  const handleSubscribeClick = useCallback(() => {
+    window.open(planUrl);
+  }, [planUrl]);
+
+  return (
+    <BasePlanCard
+      plan={PlansE.BUSINESS}
+      title="Professional"
+      color="rainbow"
+      price={
+        <Price
+          price={`${currencySymbol}${planPrice}`}
+          billingPeriod={`per ${
+            billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
+          }`}
+        />
+      }
+      infoCopyList={BUSINESS_COPY}
+      showDisclaimer={false}
+      additionalContent={
+        <div className="flex-align-center my-20">
+          <span className={styles.circle}></span>
+          <span>Always on — no pausing</span>
+        </div>
+      }
+      confirmButton={
+        <Button
+          label="Subscribe to hubs"
+          text="Get Started"
+          onClick={handleSubscribeClick}
+        />
+      }
+    />
+  );
+};
+
+export default BusinessPlanCard;

client/components/modules/plans/plan-cards/index.ts

@@ -1,3 +1,4 @@
 export { default as PersonalPlanCard } from './PersonalPlanCard';
 export { default as StarterPlanCard } from './StarterPlanCard';
 export { default as ProfessionalPlanCard } from './ProfessionalPlanCard';
+export { default as BusinessPlanCard } from './BusinessPlanCard';

client/components/modules/plans/plan.const.ts

@@ -80,6 +80,39 @@ export const PROFESSIONAL_COPY: PlanInfoCopyT[] = [
   },
 ];
 
+export const BUSINESS_COPY: PlanInfoCopyT[] = [
+  {
+    label: '400 guest capacity',
+    description: 'Free for guests to join',
+    icon: null,
+  },
+  {
+    label: '200GB Asset storage',
+    description: 'For avatars and scenes',
+    icon: null,
+  },
+  {
+    label: 'Everything in Professional',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Support emails answered within 12 business hours',
+    description: '',
+    icon: null,
+  },
+  {
+    label: '90 minutes of synchronous support per month',
+    description: '',
+    icon: null,
+  },
+  {
+    label: '60 minutes of assisted Hubs Cloud data migration',
+    description: '',
+    icon: null,
+  },
+];
+
 export const PLAN_ID_MAP = {
   /**
    * United Kingdom
@@ -189,7 +222,7 @@ export const PLAN_ID_MAP = {
     business: {
       monthly: {
         planId: 'TODO',
-        price: 400.22,
+        price: 499.0,
       },
       yearly: {
         planId: 'TODO',

client/pages/analytics/index.tsx

@@ -4,7 +4,7 @@ import Card from '@Shared/Card/Card';
 import { getAnalytics, HubStat } from 'services/analytics.service';
 import { Button, Input, Pill } from '@mozilla/lilypad-ui';
 import { useState, ChangeEvent } from 'react';
-import { requireAuthenticationAndSubscription } from 'services/routeGuard.service';
+import { analyticsRG } from 'services/routeGuard.service';
 import type { GetServerSidePropsContext } from 'next';
 
 type SandboxPropsT = {
@@ -29,7 +29,7 @@ const initTiers = {
   b0: 0,
 };
 
-const Sandbox = ({ analytics }: SandboxPropsT) => {
+const Analytics = ({ analytics }: SandboxPropsT) => {
   // Fromat Date Util
   const getFormattedDate = () => {
     const today = new Date();
@@ -367,17 +367,11 @@ const Sandbox = ({ analytics }: SandboxPropsT) => {
   );
 };
 
-export default Sandbox;
+export default Analytics;
 
-export async function getS() {}
-
-export const getServerSideProps = requireAuthenticationAndSubscription(
+export const getServerSideProps = analyticsRG(
   (context: GetServerSidePropsContext) => {
     // Your normal `getServerSideProps` code here
-    if (process.env.ENV === 'production') {
-      return { notFound: true };
-    }
-
     return {
       props: {},
     };

client/pages/subscribe/index.tsx

@@ -8,6 +8,7 @@ import {
   PersonalPlanCard,
   StarterPlanCard,
   ProfessionalPlanCard,
+  BusinessPlanCard,
 } from '@Modules/plans/plan-cards';
 import { BillingPeriodE } from 'types/General';
 
@@ -25,18 +26,27 @@ const Subscribe = () => {
 
       <main>
         <div className={styles.wrapper}>
-          <div className={styles.header}>
-            <h1>Choose your plan</h1>
-          </div>
+          <div>
+            <div className={styles.header}>
+              <h1>Choose your plan</h1>
+            </div>
 
-          <div className={styles.cards}>
-            <StarterPlanCard />
-            <PersonalPlanCard billingPeriod={billingPeriod} />
-            <ProfessionalPlanCard billingPeriod={billingPeriod} />
-            <ContactCard
-              email="[email protected]"
-              subject="Subscription inquiries"
-            />
+            <div className="flex-justify-center flex-wrap">
+              <div className="flex-justify-center flex-wrap">
+                <StarterPlanCard />
+                <PersonalPlanCard billingPeriod={billingPeriod} />
+              </div>
+              <div className="flex-justify-center flex-wrap">
+                <ProfessionalPlanCard billingPeriod={billingPeriod} />
+                <BusinessPlanCard billingPeriod={billingPeriod} />
+              </div>
+            </div>
+            <div className="flex">
+              <ContactCard
+                email="[email protected]"
+                subject="Subscription inquiries"
+              />
+            </div>
           </div>
         </div>
       </main>

client/pages/subscribe/subscribe.module.scss

@@ -2,8 +2,8 @@
 
 .wrapper {
   margin-top: 50px;
-  flex-wrap: wrap;
-  flex-grow: 1;
+  display: flex;
+  justify-content: center;
 
   @include mobile-down {
     margin-top: 40px;
@@ -22,9 +22,3 @@
     margin: 0 0 40px;
   }
 }
-
-.cards {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}

client/services/routeGuard.service.ts

@@ -265,6 +265,42 @@ export function SubscribeRG(gssp: Function): GetServerSideProps {
   };
 }
 
+export function analyticsRG(gssp: Function): GetServerSideProps | Redirect {
+  return async (context: GetServerSidePropsContext) => {
+    const { req } = context;
+
+    if (didSetTurkeyauthCookie(context)) {
+      return redirectToDashboard();
+    }
+
+    // If no errors user is authenticated
+    try {
+      const account: AccountT = await getAccount(
+        req.headers as AxiosRequestHeaders
+      );
+
+      const emails = [
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+        '[email protected]',
+      ];
+
+      // User is authenticated
+      if (emails.includes(account.email)) {
+        return await gssp(context);
+      }
+
+      return redirectToDashboard();
+    } catch (error) {
+      return handleUnauthenticatedRedirects(
+        error as AxiosError,
+        req.url as RoutesE
+      );
+    }
+  };
+}
+
 /**************************
  *  LOCAL DEV UTILITIES
  **************************/

client/styles/tools/flex.scss

@@ -46,3 +46,8 @@
   display: flex;
   flex-direction: column;
 }
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}