App: ✨ Add description field to demo request form (#2716)

shipshapecode · Apr 12, 2024 · 78f4731 · 78f4731
1 parent 169f1a0
commit 78f4731
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 10 deletions.
diff --git a/app/api/src/graphql/emails.sdl.ts b/app/api/src/graphql/emails.sdl.ts
@@ -9,6 +9,7 @@ export const schema = gql`
     name: String
     subject: String
     title: String
+    description: String
   }
 
   type EmailResponse {

diff --git a/app/api/src/mail/DemoRequest/DemoRequest.tsx b/app/api/src/mail/DemoRequest/DemoRequest.tsx
@@ -15,7 +15,7 @@ import {
 } from '@react-email/components';
 import { Tailwind } from '@react-email/tailwind';
 
-export function DemoRequest({ from, name, title, when }) {
+export function DemoRequest({ description, from, name, title, when }) {
   return (
     <Html>
       <Head />
@@ -55,6 +55,9 @@ export function DemoRequest({ from, name, title, when }) {
                 <Text className="text-base">
                   {`new demo request on ${when}`}
                 </Text>
+                <Text className="text-base">
+                  {`Customer needs help with: ${description}`}
+                </Text>
               </Row>
             </Section>
 

diff --git a/app/api/src/services/emails/emails.ts b/app/api/src/services/emails/emails.ts
@@ -16,14 +16,14 @@ export const sendDemoRequest: QueryResolvers['sendDemoRequest'] = async ({
   logger.debug(input, 'creating demo email ...');
 
   try {
-    const { from, name, subject, title } = input;
+    const { description, from, name, subject, title } = input;
     const to = defaultEmail;
     const when = new Date().toLocaleString();
 
     logger.debug({ ...input, to, when }, 'sending email ....');
 
     const data: MailResult = await mailer.send(
-      DemoRequest({ from, name, title, when }),
+      DemoRequest({ description, from, name, title, when }),
       {
         from,
         to,

diff --git a/app/api/types/graphql.d.ts b/app/api/types/graphql.d.ts
@@ -131,6 +131,7 @@ export type CreateUserInput = {
 };
 
 export type DemoEmailInput = {
+  description?: InputMaybe<Scalars['String']>;
   from: Scalars['String'];
   name?: InputMaybe<Scalars['String']>;
   subject?: InputMaybe<Scalars['String']>;

diff --git a/app/web/src/components/DemoDialog/DemoDialog.tsx b/app/web/src/components/DemoDialog/DemoDialog.tsx
@@ -2,6 +2,7 @@ import { useLazyQuery } from '@apollo/client';
 
 import {
   Form,
+  TextAreaField,
   TextField,
   EmailField,
   FieldError,
@@ -65,10 +66,10 @@ const DemoDialog = () => {
                 Name
               </label>
               <TextField
-                className="w-full rounded-lg border border-solid border-gray-300 p-[10px] font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
+                className="w-full border border-solid border-gray-300 p-[10px] font-bold shadow-default outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
                 name="name"
                 placeholder="First Last"
-                errorClassName="w-full rounded-lg border border-solid border-red-500 p-[10px] font-bold outline-none"
+                errorClassName="w-full border border-solid border-red-500 p-[10px] font-bold outline-none"
                 validation={{ required: true }}
               />
               <FieldError
@@ -84,9 +85,9 @@ const DemoDialog = () => {
                 Email
               </label>
               <EmailField
-                className="w-full rounded-lg border border-solid border-gray-300 p-[10px] font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
+                className="w-full border border-solid border-gray-300 p-[10px] font-bold shadow-default outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
                 name="email"
-                errorClassName="w-full rounded-lg border border-solid border-red-500 p-[10px] font-bold outline-none"
+                errorClassName="w-full border border-solid border-red-500 p-[10px] font-bold outline-none"
                 validation={{ required: true }}
               />
               <FieldError
@@ -102,24 +103,37 @@ const DemoDialog = () => {
                 Job Title
               </label>
               <TextField
-                className="w-full rounded-lg border border-solid border-gray-300 p-[10px] font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
+                className="w-full border border-solid border-gray-300 p-[10px] font-bold shadow-default outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
                 name="title"
-                errorClassName="w-full rounded-lg border border-solid border-red-500 p-[10px] font-bold outline-none"
+                errorClassName="w-full border border-solid border-red-500 p-[10px] font-bold outline-none"
                 validation={{ required: true }}
               />
               <FieldError
                 className="pl-2 text-xs italic text-red-500"
                 name="title"
               />
             </div>
+            <div className="mb-4">
+              <label
+                className="mb-1 block text-md font-bold text-gray-800"
+                htmlFor="description"
+              >
+                How can we help you? What are your goals?
+              </label>
+              <TextAreaField
+                className="w-full border border-solid border-gray-300 p-[10px] font-bold shadow-default outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
+                name="description"
+              />
+
+            </div>
             <div className="flex justify-center">
               <button
                 className="text-primary-foreground hover:bg-primary/80 mr-2 mt-2 flex cursor-pointer items-center justify-center rounded-md border-2 border-black bg-white px-10 py-3 font-bold shadow-default transition-all hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
                 onClick={closeDialog}
               >
                 Cancel
               </button>
-              <Submit className="bg-primary text-primary-foreground hover:bg-primary/80 mt-2 flex cursor-pointer items-center justify-center rounded-md border-2 border-black bg-[#bc95d4] px-10 py-3 font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none">
+              <Submit className="bg-primary text-primary-foreground hover:bg-primary/80 mt-2 flex cursor-pointer items-center justify-center rounded-md border-2 border-black bg-[#bc95d4] px-10 py-3 font-bold shadow-default transition-all hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none">
                 Submit Info
               </Submit>
             </div>