Skip to content

Commit

Permalink
Merge pull request #5027 from novuhq/nv-3193-questionnaire-in-the-sig…
Browse files Browse the repository at this point in the history
…n-up-flow

Questionnaire in the sign-up flow
  • Loading branch information
djabarovgeorge authored Dec 31, 2023
2 parents c809bd7 + a964ed1 commit 07a9280
Show file tree
Hide file tree
Showing 17 changed files with 560 additions and 228 deletions.
14 changes: 11 additions & 3 deletions apps/web/cypress/tests/auth.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as capitalize from 'lodash.capitalize';
import { JobTitleEnum, jobTitleToLabelMapper } from '@novu/shared';

describe('User Sign-up and Login', function () {
describe('Sign up', function () {
Expand All @@ -14,10 +15,17 @@ describe('User Sign-up and Login', function () {
cy.getByTestId('email').type('[email protected]');
cy.getByTestId('password').type('usEr_password_123!');
cy.getByTestId('accept-cb').click({ force: true });

cy.getByTestId('submitButton').click();

cy.location('pathname').should('equal', '/auth/application');
cy.getByTestId('app-creation').type('Organization Name');
cy.getByTestId('questionnaire-job-title').click();
cy.get('.mantine-Select-item').contains(jobTitleToLabelMapper[JobTitleEnum.PRODUCT_MANAGER]).click();
cy.getByTestId('questionnaire-company-name').type('Company Name');
cy.getByTestId('check-box-container-multi_channel').trigger('mouseover').click();

cy.getByTestId('submit-btn').click();

cy.location('pathname').should('equal', '/get-started');
});

Expand Down Expand Up @@ -51,7 +59,7 @@ describe('User Sign-up and Login', function () {
cy.loginWithGitHub();

cy.location('pathname').should('equal', '/auth/application');
cy.getByTestId('app-creation').type('Organization Name');
cy.getByTestId('questionnaire-company-name').type('Organization Name');
cy.getByTestId('submit-btn').click();

cy.location('pathname').should('equal', '/quickstart');
Expand Down Expand Up @@ -82,7 +90,7 @@ describe('User Sign-up and Login', function () {
cy.getByTestId('submitButton').click();

cy.location('pathname').should('equal', '/auth/application');
cy.getByTestId('app-creation').type('Organization Name');
cy.getByTestId('questionnaire-company-name').type('Organization Name');
cy.getByTestId('submit-btn').click();

cy.location('pathname').should('equal', '/quickstart');
Expand Down
2 changes: 1 addition & 1 deletion apps/web/cypress/tests/invites.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe('Invites module', function () {
cy.loginWithGitHub();

cy.location('pathname').should('equal', '/auth/application');
cy.getByTestId('app-creation').type('Organization Name');
cy.getByTestId('questionnaire-company-name').type('Organization Name');
cy.getByTestId('submit-btn').click();
cy.url().should('include', '/quickstart');

Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { api } from './api/api.client';
import { PasswordResetPage } from './pages/auth/PasswordResetPage';
import { AppLayout } from './components/layout/AppLayout';
import { MembersInvitePage } from './pages/invites/MembersInvitePage';
import CreateOrganizationPage from './pages/auth/CreateOrganizationPage';
import QuestionnairePage from './pages/auth/QuestionnairePage';
import { ENV, LAUNCH_DARKLY_CLIENT_SIDE_ID, SENTRY_DSN, CONTEXT_PATH } from './config';
import { PromoteChangesPage } from './pages/changes/PromoteChangesPage';
import { LinkVercelProjectPage } from './pages/partner-integrations/LinkVercelProjectPage';
Expand Down Expand Up @@ -130,7 +130,7 @@ function App() {
<Route path={ROUTES.AUTH_RESET_REQUEST} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_RESET_TOKEN} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_INVITATION_TOKEN} element={<InvitationPage />} />
<Route path={ROUTES.AUTH_APPLICATION} element={<CreateOrganizationPage />} />
<Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
<Route
path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS}
element={
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import AuthLayout from '../../components/layout/components/AuthLayout';
import AuthContainer from '../../components/layout/components/AuthContainer';
import { CreateOrganization } from './components/CreateOrganizationForm';
import { QuestionnaireForm } from './components/QuestionnaireForm';
import { useVercelIntegration } from '../../hooks';
import SetupLoader from './components/SetupLoader';

export default function CreateOrganizationPage() {
export default function QuestionnairePage() {
const { isLoading } = useVercelIntegration();

return (
<AuthLayout>
{isLoading ? (
<SetupLoader title="Loading..." />
) : (
<AuthContainer title="Create organization" description="Create your organization!">
<CreateOrganization />
<AuthContainer
title="Customize your experience"
description="Your answers can decrease the time to get started"
>
<QuestionnaireForm />
</AuthContainer>
)}
</AuthLayout>
Expand Down
117 changes: 0 additions & 117 deletions apps/web/src/pages/auth/components/CreateOrganizationForm.tsx

This file was deleted.

68 changes: 5 additions & 63 deletions apps/web/src/pages/auth/components/LoginForm.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useMutation } from '@tanstack/react-query';
import styled from '@emotion/styled';
import { useForm } from 'react-hook-form';
import * as Sentry from '@sentry/react';
import { Divider, Button as MantineButton, Center } from '@mantine/core';
import { Center } from '@mantine/core';

import { PasswordInput, Button, colors, Input, Text } from '@novu/design-system';

import { useAuthContext } from '../../../components/providers/AuthProvider';
import { api } from '../../../api/api.client';
import { PasswordInput, Button, colors, Input, Text, GitHub } from '@novu/design-system';
import { IS_DOCKER_HOSTED } from '../../../config';
import { useVercelParams } from '../../../hooks';
import { useAcceptInvite } from './useAcceptInvite';
import { buildGithubLink, buildGoogleLink, buildVercelGithubLink } from './gitHubUtils';
import { ROUTES } from '../../../constants/routes.enum';
import { When } from '../../../components/utils/When';
import { OAuth } from './OAuth';

type LoginFormProps = {
invitationToken?: string;
Expand All @@ -38,10 +36,6 @@ export function LoginForm({ email, invitationToken }: LoginFormProps) {
const vercelQueryParams = `code=${code}&next=${next}&configurationId=${configurationId}`;
const signupLink = isFromVercel ? `/auth/signup?${vercelQueryParams}` : ROUTES.AUTH_SIGNUP;
const resetPasswordLink = isFromVercel ? `/auth/reset/request?${vercelQueryParams}` : ROUTES.AUTH_RESET_REQUEST;
const githubLink = isFromVercel
? buildVercelGithubLink({ code, next, configurationId })
: buildGithubLink({ invitationToken });
const googleLink = buildGoogleLink({ invitationToken });

const {
register,
Expand Down Expand Up @@ -96,39 +90,7 @@ export function LoginForm({ email, invitationToken }: LoginFormProps) {

return (
<>
<When truthy={!IS_DOCKER_HOSTED}>
<>
<OAuth>
<GoogleButton
component="a"
href={githubLink}
my={30}
variant="white"
fullWidth
radius="md"
leftIcon={<GitHub />}
sx={{ color: colors.B40, fontSize: '16px', fontWeight: 700, height: '50px', marginRight: 10 }}
data-test-id="github-button"
>
Sign In with GitHub
</GoogleButton>
{/* <GoogleButton
component="a"
href={googleLink}
my={30}
variant="white"
fullWidth
radius="md"
leftIcon={<Google />}
data-test-id="google-button"
sx={{ color: colors.B40, fontSize: '16px', fontWeight: 700, height: '50px', marginLeft: 10 }}
>
Sign In with Google
</GoogleButton>*/}
</OAuth>
<Divider label={<Text color={colors.B40}>Or</Text>} color={colors.B30} labelPosition="center" my="md" />
</>
</When>
<OAuth />
<form noValidate onSubmit={handleSubmit(onLogin)}>
<Input
error={errors.email?.message || emailServerError}
Expand Down Expand Up @@ -189,23 +151,3 @@ export function LoginForm({ email, invitationToken }: LoginFormProps) {
</>
);
}

const OAuth = styled.div`
display: flex;
justify-content: space-between;
`;

const GoogleButton = styled(MantineButton)<{
component: 'a';
my: number;
href: string;
variant: 'white';
fullWidth: boolean;
radius: 'md';
leftIcon: any;
sx: any;
}>`
:hover {
color: ${colors.B40};
}
`;
75 changes: 75 additions & 0 deletions apps/web/src/pages/auth/components/OAuth.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { Divider } from '@mantine/core';
import styled from '@emotion/styled';
import { Button as MantineButton } from '@mantine/core';

import { colors, GitHub, Google, Text } from '@novu/design-system';

import { When } from '../../../components/utils/When';
import { IS_DOCKER_HOSTED } from '../../../config';
import { buildGithubLink, buildGoogleLink, buildVercelGithubLink } from './gitHubUtils';
import { useVercelParams } from '../../../hooks';

export function OAuth({ invitationToken }: { invitationToken?: string | undefined }) {
const { isFromVercel, code, next, configurationId } = useVercelParams();

const githubLink = isFromVercel
? buildVercelGithubLink({ code, next, configurationId })
: buildGithubLink({ invitationToken });
const googleLink = buildGoogleLink({ invitationToken });

return (
<When truthy={!IS_DOCKER_HOSTED}>
<>
<Container>
<OAuthButton
component="a"
href={githubLink}
my={30}
variant="white"
fullWidth
radius="md"
leftIcon={<GitHub />}
sx={{ color: colors.B40, fontSize: '16px', fontWeight: 700, height: '50px', marginRight: 10 }}
data-test-id="github-button"
>
Sign In with GitHub
</OAuthButton>
<OAuthButton
component="a"
href={googleLink}
my={30}
variant="white"
fullWidth
radius="md"
leftIcon={<Google />}
data-test-id="google-button"
sx={{ color: colors.B40, fontSize: '16px', fontWeight: 700, height: '50px', marginLeft: 10 }}
>
Sign In with Google
</OAuthButton>
</Container>
<Divider label={<Text color={colors.B40}>Or</Text>} color={colors.B30} labelPosition="center" my="md" />
</>
</When>
);
}

const Container = styled.div`
display: flex;
justify-content: space-between;
`;

const OAuthButton = styled(MantineButton)<{
component: 'a';
my: number;
href: string;
variant: 'white';
fullWidth: boolean;
radius: 'md';
leftIcon: any;
sx: any;
}>`
:hover {
color: ${colors.B40};
}
`;
Loading

0 comments on commit 07a9280

Please sign in to comment.