Add PRs #299 and #301 (#302)

airtai · Apr 8, 2024 · 09534da · 09534da
2 parents 8c91cdc + 0f2aab4
commit 09534da
Show file tree

Hide file tree

Showing 14 changed files with 605 additions and 282 deletions.
diff --git a/app/main.wasp b/app/main.wasp
@@ -87,8 +87,9 @@ entity User {=psl
   createdAt                 DateTime        @default(now())
   lastActiveTimestamp       DateTime        @default(now())
   isAdmin                   Boolean         @default(false)
-  hasAcceptedTos             Boolean         @default(true)
-  hasSubscribedToMarketingEmails  Boolean         @default(true)
+  hasAcceptedTos             Boolean         @default(false)
+  hasSubscribedToMarketingEmails  Boolean         @default(false)
+  isSignUpComplete          Boolean         @default(false)
   stripeId                  String? 
   checkoutSessionId         String?
   hasPaid                   Boolean         @default(false)
@@ -200,10 +201,10 @@ page LoginPage {
   component: import Login from "@src/client/auth/LoginPage"
 }
 
-route SignupRoute { path: "/signup", to: SignupPage }
-page SignupPage {
-  component: import { Signup } from "@src/client/auth/SignupPage"
-}
+// route SignupRoute { path: "/signup", to: SignupPage }
+// page SignupPage {
+//   component: import { Signup } from "@src/client/auth/SignupPage"
+// }
 
 route TocPageRoute { path: "/toc", to: TocPage }
 page TocPage {

diff --git a/app/migrations/20240408050407_add_column_to_store_signup_complete_status/migration.sql b/app/migrations/20240408050407_add_column_to_store_signup_complete_status/migration.sql
@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "isSignUpComplete" BOOLEAN NOT NULL DEFAULT false,
+ALTER COLUMN "hasAcceptedTos" SET DEFAULT false,
+ALTER COLUMN "hasSubscribedToMarketingEmails" SET DEFAULT false;
diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
@@ -4,7 +4,8 @@ import './Main.css';
 import AppNavBar from './components/AppNavBar';
 import ServerNotRechableComponent from './components/ServerNotRechableComponent';
 import LoadingComponent from './components/LoadingComponent';
-import { useMemo, useEffect, ReactNode } from 'react';
+import TosAndMarketingEmailsModal from './components/TosAndMarketingEmailsModal';
+import { useMemo, useEffect, ReactNode, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 const addServerErrorClass = () => {
@@ -25,6 +26,8 @@ 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(() => {
@@ -43,12 +46,45 @@ export default function App({ children }: { children: ReactNode }) {
     return location.pathname.startsWith('/chat');
   }, [location]);
 
+  const isCheckoutPage = useMemo(() => {
+    return location.pathname.startsWith('/checkout');
+  }, [location]);
+
+  const isAccountPage = useMemo(() => {
+    return location.pathname.startsWith('/account');
+  }, [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 });
+      if (!user.isSignUpComplete) {
+        if (user.hasAcceptedTos && user.hasSubscribedToMarketingEmails) {
+          updateCurrentUser({
+            isSignUpComplete: true,
+          });
+          setShowTosAndMarketingEmailsModal(false);
+        } else {
+          const hasAcceptedTos =
+            localStorage.getItem('hasAcceptedTos') === 'true';
+          const hasSubscribedToMarketingEmails =
+            localStorage.getItem('hasSubscribedToMarketingEmails') === 'true';
+          if (!hasAcceptedTos || !hasSubscribedToMarketingEmails) {
+            setShowTosAndMarketingEmailsModal(true);
+          } else {
+            updateCurrentUser({
+              isSignUpComplete: true,
+              hasAcceptedTos: true,
+              hasSubscribedToMarketingEmails: true,
+            });
+            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]);
@@ -68,17 +104,33 @@ export default function App({ children }: { children: ReactNode }) {
       <div className='min-h-screen dark:text-captn-light-cream dark:bg-boxdark-2 bg-captn-light-cream text-captn-dark-blue'>
         {isError && (addServerErrorClass(), (<ServerNotRechableComponent />))}
         {isAdminDashboard || isChatPage ? (
-          <>{children}</>
+          <>
+            {showTosAndMarketingEmailsModal ? (
+              <>
+                <TosAndMarketingEmailsModal />
+              </>
+            ) : (
+              children
+            )}
+          </>
         ) : (
           <>
             {shouldDisplayAppNavBar && <AppNavBar />}
             <div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>
               {isError ? (
-                <>{children}</>
+                children
               ) : isLoading ? (
                 <LoadingComponent />
               ) : (
-                (removeServerErrorClass(), children)
+                (removeServerErrorClass(),
+                showTosAndMarketingEmailsModal &&
+                (isCheckoutPage || isAccountPage) ? (
+                  <>
+                    <TosAndMarketingEmailsModal />
+                  </>
+                ) : (
+                  children
+                ))
               )}
             </div>
           </>

diff --git a/app/src/client/Main.css b/app/src/client/Main.css
@@ -52,28 +52,95 @@ a {
   list-style: disc;
 }
 
-.custom-auth-wrapper input[type='checkbox'] {
-  display: none;
-}
-
-.custom-auth-wrapper input[type='checkbox'] + label {
+.toc-marketing-checkbox-wrapper .checkbox-container {
+  padding-left: 22px;
+  display: block;
   position: relative;
-  padding-left: 35px;
   cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-
-.custom-auth-wrapper input[type='checkbox'] + label:before {
-  content: '';
+/* 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;
-  top: 0;
-  width: 15px;
-  height: 15px;
-  background: #eae4d9;
+  height: 13px;
+  width: 13px;
+  background-color: #eae4d9;
 }
 
-.custom-auth-wrapper input[type='checkbox']:checked + label:before {
-  background: #6faabc;
+.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;
+  max-height: 280px;
 }
 
 .custom-auth-wrapper div>a {
@@ -138,14 +205,14 @@ a {
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
   height: 100%;
-  justify-content: space-between;
+  justify-content: center;
   position: relative;
   width: 100%;
 }
 
 .gsi-material-button .gsi-material-button-contents {
-  -webkit-flex-grow: 1;
-  flex-grow: 1;
+  -webkit-flex-grow: 0;
+  flex-grow: 0;
   font-family: 'Roboto', arial, sans-serif;
   font-weight: 500;
   overflow: hidden;

diff --git a/app/src/client/app/layout/ChatLayout.tsx b/app/src/client/app/layout/ChatLayout.tsx
@@ -31,7 +31,7 @@ const ChatLayout: FC<Props> = ({
     if (!user) {
       history.push('/login');
     } else {
-      if (!user.hasPaid) {
+      if (!user.hasPaid && user.isSignUpComplete) {
         history.push('/pricing');
       }
     }

diff --git a/app/src/client/auth/Auth.tsx b/app/src/client/auth/Auth.tsx
@@ -48,6 +48,11 @@ export const AuthContext = createContext({
   setSuccessMessage: (successMessage: string | null) => {},
 });
 
+const titles: Record<State, string> = {
+  login: 'Sign in to your account',
+  signup: 'Create a new account',
+};
+
 function Auth({
   state,
   appearance,
@@ -62,21 +67,22 @@ function Auth({
   const [errorMessage, setErrorMessage] = useState<ErrorMessage | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [loginFlow, setLoginFlow] = useState(titles.signup);
 
   // TODO(matija): this is called on every render, is it a problem?
   // If we do it in useEffect(), then there is a glitch between the default color and the
   // user provided one.
   const customTheme = createTheme(appearance ?? {});
 
-  const titles: Record<State, string> = {
-    login: 'Log in to your account',
-    signup: 'Create a new account',
-  };
-  const title = titles[state];
+  // const title = titles[state];
 
   const socialButtonsDirection =
     socialLayout === 'vertical' ? 'vertical' : 'horizontal';
 
+  const changeHeaderText = (loginFlow: string) => {
+    setLoginFlow(loginFlow === 'signIn' ? titles.signup : titles.login);
+  };
+
   return (
     <div className={customTheme}>
       <div>
@@ -89,7 +95,7 @@ function Auth({
           />
         )}
         {/* <HeaderText>{title}</HeaderText> */}
-        <p className='mt-7 text-2xl'>{title}</p>
+        <p className='mt-7 text-2xl'>{loginFlow}</p>
       </div>
 
       {/* {errorMessage && (
@@ -109,6 +115,7 @@ function Auth({
             socialButtonsDirection={socialButtonsDirection}
             additionalSignupFields={additionalSignupFields}
             errorMessage={errorMessage}
+            changeHeaderText={changeHeaderText}
           />
         )}
       </AuthContext.Provider>