diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index bbb5911a6a..e45425ae9c 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -1596,6 +1596,8 @@ export const WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE = () => "Please select a proficiency level"; export const WELCOME_FORM_USE_CASE_ERROR_MESSAGE = () => "Please select an use case"; +export const WELCOME_FORM_FULL_NAME_ERROR_MESSAGE = () => + "Please enter your full name"; export const WELCOME_FORM_EMAIL_ERROR_MESSAGE = () => "Enter a valid email address."; diff --git a/app/client/src/pages/setup/DetailsForm.tsx b/app/client/src/pages/setup/DetailsForm.tsx index d5861700b2..9105d8cf10 100644 --- a/app/client/src/pages/setup/DetailsForm.tsx +++ b/app/client/src/pages/setup/DetailsForm.tsx @@ -23,7 +23,6 @@ import { proficiencyOptions, useCaseOptions } from "./constants"; import { isAirgapped } from "ee/utils/airgapHelpers"; import { setFirstTimeUserOnboardingTelemetryCalloutVisibility } from "utils/storage"; import RadioButtonGroup from "components/editorComponents/RadioButtonGroup"; -import { Space } from "./NonSuperUserProfilingQuestions"; import CsrfTokenInput from "../UserAuth/CsrfTokenInput"; export interface DetailsFormValues { @@ -78,6 +77,10 @@ const ButtonWrapper = styled.div` gap: ${(props) => props.theme.spaces[4]}px; `; +const Space = styled.div` + height: 40px; +`; + export default function DetailsForm( props: SetupFormProps & { isFirstPage: boolean; diff --git a/app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx b/app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx index b4c9e8a393..4e39e721f1 100644 --- a/app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx +++ b/app/client/src/pages/setup/NonSuperUserProfilingQuestions.tsx @@ -13,6 +13,7 @@ import { WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE, WELCOME_FORM_USE_CASE_ERROR_MESSAGE, WELCOME_FORM_FULL_NAME, + WELCOME_FORM_FULL_NAME_ERROR_MESSAGE, } from "ee/constants/messages"; import { connect } from "react-redux"; import type { DefaultRootState } from "react-redux"; @@ -33,6 +34,30 @@ const StyledButton = styled(Button)` width: 160px; `; +const StyledFormTextField = styled(FormTextField)` + .ads-v2-input__input { + height: 36px; + border-radius: var(--ads-v2-border-radius); + padding: var(--ads-v2-spaces-3); + font-size: var(--ads-font-size-4); + width: 100%; + box-sizing: border-box; + } + + .ads-v2-input__label { + font-size: var(--ads-font-size-4); + font-weight: var(--ads-font-weight-bold-xl); + color: var(--ads-v2-color-gray-700); + margin-bottom: 0.5rem; + } +`; + +const InputSection = styled.div` + margin-bottom: ${(props) => props.theme.spaces[12]}px; + margin-top: ${(props) => props.theme.spaces[10]}px; + max-width: 505px; +`; + interface UserFormProps { onGetStarted?: (proficiency?: string, useCase?: string) => void; } @@ -40,18 +65,15 @@ interface UserFormProps { interface NonSuperUserFormData { proficiency?: string; useCase?: string; + fullName?: string; } export const Space = styled.div` - height: 40px; + height: 20px; `; -// TODO: Fix this the next time the file is edited -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const validate = (values: any) => { - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const errors: any = {}; +const validate = (values: NonSuperUserFormData) => { + const errors: Partial = {}; if (!values.proficiency) { errors.proficiency = createMessage(WELCOME_FORM_PROFICIENCY_ERROR_MESSAGE); @@ -61,6 +83,10 @@ const validate = (values: any) => { errors.useCase = createMessage(WELCOME_FORM_USE_CASE_ERROR_MESSAGE); } + if (!values.fullName) { + errors.fullName = createMessage(WELCOME_FORM_FULL_NAME_ERROR_MESSAGE); + } + return errors; }; @@ -76,17 +102,16 @@ function NonSuperUserProfilingQuestions( return (
{isCloudBillingEnabled && ( - <> - - + - - + )} +