Add toc and privacy page

airtai · Apr 12, 2024 · 505b12c · 505b12c
1 parent 30d5590
commit 505b12c
Show file tree

Hide file tree

Showing 15 changed files with 1,428 additions and 29 deletions.
diff --git a/app/main.wasp b/app/main.wasp
@@ -67,6 +67,9 @@ entity User {=psl
   createdAt                 DateTime        @default(now())
   lastActiveTimestamp       DateTime        @default(now())
   isAdmin                   Boolean         @default(false)
+  hasAcceptedTos             Boolean         @default(false)
+  hasSubscribedToMarketingEmails  Boolean         @default(false)
+  isSignUpComplete          Boolean         @default(false)
   stripeId                  String? 
   checkoutSessionId         String?
   hasPaid                   Boolean         @default(false)
@@ -148,6 +151,15 @@ page CheckoutPage {
   component: import Checkout from "@src/client/app/CheckoutPage"
 }
 
+route TocPageRoute { path: "/toc", to: TocPage }
+page TocPage {
+  component: import TocPage from "@src/client/app/TocPage",
+}
+route PrivacyRoute { path: "/privacy", to: PrivacyPage }
+page PrivacyPage {
+  component: import PrivacyPage from "@src/client/app/PrivacyPage",
+}
+
 route AdminRoute { path: "/admin", to: DashboardPage }
 page DashboardPage {
   authRequired: true,

diff --git a/...ns/20240412085104_add_fields_to_user_entity_to_trach_signup_complete_status/migration.sql b/...ns/20240412085104_add_fields_to_user_entity_to_trach_signup_complete_status/migration.sql
@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "hasAcceptedTos" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "hasSubscribedToMarketingEmails" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "isSignUpComplete" BOOLEAN NOT NULL DEFAULT false;
diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useEffect, ReactNode } from 'react';
+import { useMemo, useEffect, ReactNode, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import './Main.css';
@@ -10,6 +10,7 @@ import AppNavBar from './components/AppNavBar';
 import Footer from './components/Footer';
 import ServerNotRechableComponent from './components/ServerNotRechableComponent';
 import LoadingComponent from './components/LoadingComponent';
+import TosAndMarketingEmailsModal from './components/TosAndMarketingEmailsModal';
 
 const addServerErrorClass = () => {
   if (!document.body.classList.contains('server-error')) {
@@ -29,6 +30,7 @@ const removeServerErrorClass = () => {
  */
 export default function App({ children }: { children: ReactNode }) {
   const location = useLocation();
+  const [showTosAndMarketingEmailsModal, setShowTosAndMarketingEmailsModal] = useState(false);
   const { data: user, isError, isLoading } = useAuth();
 
   const shouldDisplayAppNavBar = useMemo(() => {
@@ -39,12 +41,48 @@ export default function App({ children }: { children: ReactNode }) {
     return location.pathname.startsWith('/admin');
   }, [location]);
 
+  const isCheckoutPage = useMemo(() => {
+    return location.pathname.startsWith('/checkout');
+  }, [location]);
+
+  const isAccountPage = useMemo(() => {
+    return location.pathname.startsWith('/account');
+  }, [location]);
+
+  const isChatPage = useMemo(() => {
+    return location.pathname.startsWith('/chat');
+  }, [location]);
+
   useEffect(() => {
     if (user) {
-      const lastSeenAt = new Date(user.lastActiveTimestamp);
-      const today = new Date();
-      if (today.getTime() - lastSeenAt.getTime() > 5 * 60 * 1000) {
-        updateCurrentUser({ lastActiveTimestamp: today });
+      console.log('user', user);
+      if (!user.isSignUpComplete) {
+        if (user.hasAcceptedTos) {
+          updateCurrentUser({
+            isSignUpComplete: true,
+          });
+          setShowTosAndMarketingEmailsModal(false);
+        } else {
+          const hasAcceptedTos = localStorage.getItem('hasAcceptedTos') === 'true';
+          const hasSubscribedToMarketingEmails = localStorage.getItem('hasSubscribedToMarketingEmails') === 'true';
+          if (!hasAcceptedTos) {
+            setShowTosAndMarketingEmailsModal(true);
+          } else {
+            updateCurrentUser({
+              isSignUpComplete: true,
+              hasAcceptedTos: hasAcceptedTos,
+              hasSubscribedToMarketingEmails: hasSubscribedToMarketingEmails,
+            });
+            setShowTosAndMarketingEmailsModal(false);
+          }
+        }
+      } else {
+        setShowTosAndMarketingEmailsModal(false);
+        const lastSeenAt = new Date(user.lastActiveTimestamp);
+        const today = new Date();
+        if (today.getTime() - lastSeenAt.getTime() > 5 * 60 * 1000) {
+          updateCurrentUser({ lastActiveTimestamp: today });
+        }
       }
     }
   }, [user]);
@@ -63,13 +101,34 @@ export default function App({ children }: { children: ReactNode }) {
     <>
       <div className='bg-gradient-to-b from-airt-hero-gradient-start via-airt-hero-gradient-middle to-airt-secondary min-h-screen dark:text-white dark:bg-boxdark-2'>
         {isError && (addServerErrorClass(), (<ServerNotRechableComponent />))}
-        {isAdminDashboard ? (
-          <>{children}</>
+        {isAdminDashboard || isChatPage ? (
+          <>
+            {showTosAndMarketingEmailsModal ? (
+              <>
+                <TosAndMarketingEmailsModal />
+              </>
+            ) : (
+              children
+            )}
+          </>
         ) : (
           <div className='relative flex flex-col min-h-screen justify-between'>
             {shouldDisplayAppNavBar && <AppNavBar />}
             <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 w-full'>
-              {isError ? children : isLoading ? <LoadingComponent /> : (removeServerErrorClass(), children)}
+              {isError ? (
+                children
+              ) : isLoading ? (
+                <LoadingComponent />
+              ) : (
+                (removeServerErrorClass(),
+                showTosAndMarketingEmailsModal && (isCheckoutPage || isAccountPage) ? (
+                  <>
+                    <TosAndMarketingEmailsModal />
+                  </>
+                ) : (
+                  children
+                ))
+              )}
             </div>
             <div>
               <Footer />

diff --git a/app/src/client/Main.css b/app/src/client/Main.css
@@ -27,6 +27,203 @@ code {
     monospace;
 }
 
+
+.toc-marketing-checkbox-wrapper .checkbox-container {
+  padding-left: 22px;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* Hide the browser's default checkbox */
+.toc-marketing-checkbox-wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+/* Create a custom checkbox */
+.toc-marketing-checkbox-wrapper .checkmark {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  height: 13px;
+  width: 13px;
+  background-color: #eae4d9;
+}
+
+.toc-marketing-checkbox-wrapper.light .checkmark {
+  background-color: #fff;
+}
+
+/* On mouse-over, add a grey background color */
+.toc-marketing-checkbox-wrapper .checkbox-container:hover input ~ .checkmark {
+  background-color: #eae4d9;
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container:hover input ~ .checkmark {
+  background-color: #fff;
+}
+
+
+/* When the checkbox is checked, add a blue background */
+.toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark {
+  background-color: #6faabc;
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container input:checked ~ .checkmark {
+  background-color: #fff;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.toc-marketing-checkbox-wrapper .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.toc-marketing-checkbox-wrapper .checkbox-container .checkmark:after {
+  left: 4px;
+  top: 0px;
+  width: 6px;
+  height: 11px;
+  border: solid #eae4d9;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container .checkmark:after {
+  border: solid #6faabc;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.toc-marketing-container{
+  -webkit-transition: max-height 0.5s; 
+  -moz-transition: max-height 0.5s; 
+  -ms-transition: max-height 0.5s; 
+  -o-transition: max-height 0.5s; 
+  transition: max-height 0.5s;
+  overflow: hidden;
+}
+
+/* Google login button */
+.gsi-material-button {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -webkit-appearance: none;
+  background-color: WHITE;
+  background-image: none;
+  border: 1px solid #747775;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #1f1f1f;
+  cursor: pointer;
+  font-family: 'Roboto', arial, sans-serif;
+  font-size: 14px;
+  height: 40px;
+  letter-spacing: 0.25px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+  transition: background-color .218s, border-color .218s, box-shadow .218s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+  max-width: 400px;
+  min-width: min-content;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+  height: 20px;
+  margin-right: 12px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+  -webkit-flex-grow: 0;
+  flex-grow: 0;
+  font-family: 'Roboto', arial, sans-serif;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+  -webkit-transition: opacity .218s;
+  transition: opacity .218s;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.gsi-material-button:disabled {
+  cursor: default;
+  background-color: #ffffff61;
+  border-color: #1f1f1f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+  opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+  opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+  background-color: #303030;
+  opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+  background-color: #303030;
+  opacity: 8%;
+}
+/* Google login button */
+
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {