From d27dd304152e6ef4a4e080e9568dbfdc7b2cf2ac Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Sat, 19 Feb 2022 11:56:10 +0530
Subject: [PATCH] feat: Added use case input box in welcome tour to input
 custom use caes (#11171)

---
 app/client/src/ce/constants/messages.ts    |  1 +
 app/client/src/constants/forms.ts          |  1 +
 app/client/src/pages/setup/DetailsForm.tsx |  9 +++++++++
 app/client/src/pages/setup/SetupForm.tsx   | 18 ++++++++++++++++--
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index 34bdb7479e..7d428af0c5 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -849,6 +849,7 @@ export const WELCOME_FORM_CREATE_PASSWORD = () => "Create Password";
 export const WELCOME_FORM_VERIFY_PASSWORD = () => "Verify Password";
 export const WELCOME_FORM_ROLE_DROPDOWN = () => "What Role Do You Play?";
 export const WELCOME_FORM_ROLE = () => "Role";
+export const WELCOME_FORM_CUSTOM_USE_CASE = () => "Use case";
 export const WELCOME_FORM_USE_CASE = () => "Tell Us About Your Use Case";
 export const WELCOME_FORM_DATA_COLLECTION_HEADER = () =>
   "Usage data preference";
diff --git a/app/client/src/constants/forms.ts b/app/client/src/constants/forms.ts
index be40a7032e..7584fbabba 100644
--- a/app/client/src/constants/forms.ts
+++ b/app/client/src/constants/forms.ts
@@ -31,6 +31,7 @@ export const WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME = "verify_password";
 export const WELCOME_FORM_ROLE_FIELD_NAME = "role";
 export const WELCOME_FORM_ROLE_NAME_FIELD_NAME = "role_name";
 export const WELCOME_FORM_USECASE_FIELD_NAME = "useCase";
+export const WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME = "custom_useCase";
 
 export const SETTINGS_FORM_NAME = "SettingsForm";
 export const WELCOME_NON_SUPER_FORM_NAME = "WelcomeNonSuperSetupForm";
diff --git a/app/client/src/pages/setup/DetailsForm.tsx b/app/client/src/pages/setup/DetailsForm.tsx
index 1cc632aac7..0fd97f31ba 100644
--- a/app/client/src/pages/setup/DetailsForm.tsx
+++ b/app/client/src/pages/setup/DetailsForm.tsx
@@ -19,6 +19,7 @@ import {
   WELCOME_FORM_ROLE_DROPDOWN,
   WELCOME_FORM_ROLE,
   WELCOME_FORM_USE_CASE,
+  WELCOME_FORM_CUSTOM_USE_CASE,
   WELCOME_FORM_HEADER,
 } from "@appsmith/constants/messages";
 import FormTextField from "components/ads/formFields/TextField";
@@ -123,6 +124,14 @@ export default function DetailsForm(
             type="text"
           />
         </DropdownWrapper>
+        {props.useCase == "other" && (
+          <StyledFormGroup
+            className="t--welcome-form-use-case-input"
+            label={createMessage(WELCOME_FORM_CUSTOM_USE_CASE)}
+          >
+            <FormTextField name="custom_useCase" placeholder="" type="text" />
+          </StyledFormGroup>
+        )}
         <ButtonWrapper>
           <Button
             category={Category.tertiary}
diff --git a/app/client/src/pages/setup/SetupForm.tsx b/app/client/src/pages/setup/SetupForm.tsx
index 851f4c00f5..e2b03cfb06 100644
--- a/app/client/src/pages/setup/SetupForm.tsx
+++ b/app/client/src/pages/setup/SetupForm.tsx
@@ -14,6 +14,7 @@ import {
   WELCOME_FORM_ROLE_FIELD_NAME,
   WELCOME_FORM_ROLE_NAME_FIELD_NAME,
   WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME,
+  WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
 } from "constants/forms";
 import { formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
 import { isEmail, isStrongPassword } from "utils/formhelpers";
@@ -66,6 +67,7 @@ export type DetailsFormValues = {
   verifyPassword?: string;
   role?: string;
   useCase?: string;
+  custom_useCase?: string;
   role_name?: string;
 };
 
@@ -99,6 +101,9 @@ const validate = (values: DetailsFormValues) => {
     errors.useCase = "Please select a use case";
   }
 
+  if (values.useCase === "other" && !values.custom_useCase)
+    errors.custom_useCase = "Please enter a use case";
+
   return errors;
 };
 
@@ -116,7 +121,7 @@ function SetupForm(props: InjectedFormProps & DetailsFormValues) {
     roleInput.type = "text";
     roleInput.name = "role";
     roleInput.style.display = "none";
-    if (props.role != "other") {
+    if (props.role !== "other") {
       roleInput.value = props.role as string;
     } else {
       roleInput.value = props.role_name as string;
@@ -129,8 +134,16 @@ function SetupForm(props: InjectedFormProps & DetailsFormValues) {
     const useCaseInput = document.createElement("input");
     useCaseInput.type = "text";
     useCaseInput.name = "useCase";
-    useCaseInput.value = props.useCase as string;
     useCaseInput.style.display = "none";
+    if (props.useCase !== "other") {
+      useCaseInput.value = props.useCase as string;
+    } else {
+      useCaseInput.value = props.custom_useCase as string;
+      const customUseCaseInput: HTMLInputElement = document.querySelector(
+        `[name="custom_useCase"]`,
+      ) as HTMLInputElement;
+      if (customUseCaseInput) customUseCaseInput.remove();
+    }
     form.appendChild(useCaseInput);
     return true;
   };
@@ -172,6 +185,7 @@ export default connect((state: AppState) => {
     role: selector(state, WELCOME_FORM_ROLE_FIELD_NAME),
     role_name: selector(state, WELCOME_FORM_ROLE_NAME_FIELD_NAME),
     useCase: selector(state, WELCOME_FORM_USECASE_FIELD_NAME),
+    custom_useCase: selector(state, WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME),
   };
 }, null)(
   reduxForm<DetailsFormValues>({