Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add PRs #299 and #301 #302

Merged
merged 2 commits into from
Apr 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions app/main.wasp
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 60 additions & 8 deletions app/src/client/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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(() => {
Expand All @@ -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]);
Expand All @@ -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>
</>
Expand Down
103 changes: 85 additions & 18 deletions app/src/client/Main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/src/client/app/layout/ChatLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
Expand Down
19 changes: 13 additions & 6 deletions app/src/client/auth/Auth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand All @@ -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 && (
Expand All @@ -109,6 +115,7 @@ function Auth({
socialButtonsDirection={socialButtonsDirection}
additionalSignupFields={additionalSignupFields}
errorMessage={errorMessage}
changeHeaderText={changeHeaderText}
/>
)}
</AuthContext.Provider>
Expand Down
Loading
Loading