674 add how did you hear about us (#892)

* ⚡ Add field * ⚡ Add referral options * ⚡ Add validation
SSWConsulting · Jul 5, 2023 · 09667a8 · 09667a8
1 parent b6be29f
commit 09667a8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 3 deletions.
diff --git a/components/bookingForm/bookingForm.tsx b/components/bookingForm/bookingForm.tsx
@@ -1,18 +1,19 @@
 import axios from "axios";
 import { Form, Formik } from "formik";
-import { useEffect, useContext, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
+import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import FormGroupInput from "../form/formGroupInput";
 import FormGroupSelect from "../form/formGroupSelect";
 import FormGroupTextArea from "../form/formGroupTextArea";
-import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import {
   ACTIVE_INPUT,
   AUSTRALIA,
   AustralianStatesList,
   CONTACT_FORM_TITLE,
   FORM_INPUT,
   FormCountriesList,
+  ReferralSourceList,
   STATE_DEFAULT_VALUE,
 } from "../util/constants";
 import { bookingFormSubmissionData } from "./bookingFormSubmissionData";
@@ -44,6 +45,7 @@ export const BookingForm = (props) => {
     referredCompany: "",
     referredFullName: "",
     referredEmail: "",
+    referralSource: "",
   };
 
   //Condition to avoid SSR (Server-Side Rendering) for getting page path
@@ -147,6 +149,9 @@ export const BookingForm = (props) => {
   };
   const locationDefaultOption = getDefaultOption(FORM_INPUT.Location);
   const statesDefaultOption = getDefaultOption(FORM_INPUT.States);
+  const referralSourcesDefaultOption = getDefaultOption(
+    FORM_INPUT.ReferralSource
+  );
 
   return (
     <div className="rounded bg-white font-sans">
@@ -233,6 +238,27 @@ export const BookingForm = (props) => {
                   {...getCommonFieldProps(FORM_INPUT.Company)}
                 />
 
+                <FormGroupSelect
+                  label={ACTIVE_INPUT.ReferralSource}
+                  name={FORM_INPUT.ReferralSource}
+                  {...getCommonFieldProps(referralSourcesDefaultOption.name)}
+                >
+                  <option className="hidden" value="">
+                    How did you hear about us?
+                  </option>
+                  {ReferralSourceList.map((source) => {
+                    return (
+                      <option
+                        className="cursor-pointer !p-1"
+                        key={source.value}
+                        value={source.value}
+                      >
+                        {source.label}
+                      </option>
+                    );
+                  })}
+                </FormGroupSelect>
+
                 <FormGroupTextArea
                   label={ACTIVE_INPUT.Note}
                   placeholder="How can we help you?"

diff --git a/components/bookingForm/bookingFormSubmissionData.ts b/components/bookingForm/bookingFormSubmissionData.ts
@@ -55,6 +55,7 @@ export const bookingFormSubmissionData = (
     SourceWebPageURL: sourceWebPageURL,
     EmailSubject: subject,
     EmailBody: body + "The associated CRM lead is ",
+    ReferralSource: values.referralSource,
   };
 
   return data;

diff --git a/components/bookingForm/validationSchema.tsx b/components/bookingForm/validationSchema.tsx
@@ -15,6 +15,9 @@ export const ValidationSchema = (isShowStates: boolean, isShareForm: boolean) =>
           .string()
           .notOneOf([STATE_DEFAULT_VALUE, ""], VALIDATION_ERROR_MESSAGE.STATES)
       : yup.string(),
+    referralSource: yup
+      .string()
+      .required(VALIDATION_ERROR_MESSAGE.REFERRAL_SOURCE),
     note: isShareForm
       ? yup.string()
       : yup.string().required(VALIDATION_ERROR_MESSAGE.NOTE),

diff --git a/components/form/formGroupSelect.tsx b/components/form/formGroupSelect.tsx
@@ -1,8 +1,8 @@
 import classNames from "classnames";
 import { ErrorMessage, Field, FieldHookConfig, useField } from "formik";
 import { ChangeEvent, ChangeEventHandler, FC } from "react";
-import { FormGroupProps } from "./formGroupTypes";
 import styles from "./formGroup.module.css";
+import { FormGroupProps } from "./formGroupTypes";
 
 const FormGroupSelect: FC<
   FieldHookConfig<string> & FormGroupProps<HTMLSelectElement>

diff --git a/components/util/constants.tsx b/components/util/constants.tsx
@@ -47,6 +47,7 @@ export const VALIDATION_ERROR_MESSAGE = {
   NOTE: "A message is required.",
   REFERRED_FULL_NAME: "Please enter referred name",
   REFERRED_EMAIL: "Please enter referred email",
+  REFERRAL_SOURCE: "Please select referral source.",
 };
 export const VALIDATION_SUCCESS_MESSAGE = "Looks good!";
 
@@ -67,6 +68,7 @@ export const ACTIVE_INPUT = {
   ReferredFullName: "Referred Full Name",
   ReferredEmail: "Referred Email",
   None: "",
+  ReferralSource: "Referral Source",
 };
 
 //FORMS INPUTS
@@ -83,6 +85,7 @@ export const FORM_INPUT = {
   ReferredFullName: "referredFullName",
   ReferredEmail: "referredEmail",
   None: "",
+  ReferralSource: "referralSource",
 };
 
 //Australian all States list
@@ -135,3 +138,27 @@ export const months = [
   "November",
   "December",
 ];
+
+export const ReferralSource = {
+  Conference: 8,
+  Google: 1,
+  ["Government Suppliers List"]: 20,
+  ["Outbound Call"]: 15,
+  ["Repeat Business"]: 4,
+  [".NET User Group"]: 3,
+  ["SSW Training Event"]: 2,
+  Referral: 12,
+  Signage: 7,
+  ["Yellow Pages"]: 9,
+  ["SSW TV"]: 17,
+  Webinars: 16,
+  ["Other search engines"]: 10,
+  Other: 14,
+};
+
+export const ReferralSourceList = Object.keys(ReferralSource).map((key) => {
+  return {
+    label: key,
+    value: ReferralSource[key as keyof typeof ReferralSource],
+  };
+});