✨ Add Onboarding option to career contact form #2660 (#2688)

* 🎨 change category and add as ci with mandatory following input * 🎨 correct validate * 🎨 try change validation mode * 🎨 rewrite issue was elsewhere * 🎨 fix selects and labels * 🎨 update ci * 🎨 update ci this time
equinor · Nov 22, 2024 · 862f669 · 862f669
1 parent 9823e69
commit 862f669
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 41 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,12 +1,11 @@
 {
-  "cssvar.files": [
-    "./web/styles/settings.ts"
-  ],
+  "cssvar.files": ["./web/styles/settings.ts"],
   "azureFunctions.deploySubpath": ".",
   "azureFunctions.postDeployTask": "npm install (functions)",
   "azureFunctions.projectLanguage": "TypeScript",
   "azureFunctions.projectRuntime": "~4",
   "debug.internalConsoleOptions": "neverOpen",
   "azureFunctions.preDeployTask": "npm prune (functions)",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "compile-hero.disable-compile-files-on-did-save-code": false
 }
diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -493,9 +493,9 @@ const snippets: textSnippet = {
     defaultValue: 'Location',
     group: groups.careerContactForm,
   },
-  careers_contact_form_thesis_writing: {
-    title: 'Thesis writing',
-    defaultValue: 'Thesis writing',
+  careers_contact_form_onboarding: {
+    title: 'Onboarding',
+    defaultValue: 'Onboarding',
     group: groups.careerContactForm,
   },
   careers_contact_form_questions_related_to_position: {
@@ -523,6 +523,11 @@ const snippets: textSnippet = {
     defaultValue: 'Please enter your phone number',
     group: groups.careerContactForm,
   },
+  careers_contact_form_positionId_validation: {
+    title: 'Position ID validation',
+    defaultValue: 'Please enter a position ID or name',
+    group: groups.careerContactForm,
+  },
   careers_contact_form_phone_placeholder: {
     title: 'Phone Number placeholder',
     defaultValue: 'Country code and phone number',
@@ -594,6 +599,11 @@ const snippets: textSnippet = {
     defaultValue: 'Sending...',
     group: groups.form,
   },
+  form_please_select_an_option: {
+    title: 'Please select an option',
+    defaultValue: 'Please select an option',
+    group: groups.form,
+  },
   form_failure_title: {
     title: 'Failure title',
     defaultValue: 'Sorry, something went wrong!',

diff --git a/web/pageComponents/topicPages/Form/CareerFairForm.tsx b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
@@ -41,10 +41,7 @@ const CareerFairForm = () => {
       email: '',
       contactPerson: '',
       phone: '',
-      event: intl.formatMessage({
-        id: 'career_fair_form_invite_career_fair',
-        defaultMessage: 'Invite Equinor to a career fair or student event',
-      }),
+      event: '',
       eventDescription: '',
       website: '',
       supportingDocuments: '',
@@ -112,10 +109,10 @@ const CareerFairForm = () => {
                 <FormTextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'career_fair_form_organisation',
                     defaultMessage: 'School / Organisation',
-                  })}
+                  })}*`}
                   inputRef={ref}
                   aria-required="true"
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
@@ -137,10 +134,10 @@ const CareerFairForm = () => {
                 <FormTextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'career_fair_form_contact_person',
                     defaultMessage: 'Contact Person',
-                  })}
+                  })}*`}
                   inputRef={ref}
                   aria-required="true"
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
@@ -169,10 +166,10 @@ const CareerFairForm = () => {
                 <TextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'career_fair_form_phone',
                     defaultMessage: 'Phone Number',
-                  })}
+                  })}*`}
                   description={intl.formatMessage({
                     id: 'country_code_format',
                     defaultMessage: 'Enter phone number with country code',
@@ -231,6 +228,12 @@ const CareerFairForm = () => {
                     aria-describedby="select-helper-text-${id}"
                     label={intl.formatMessage({ id: 'career_fair_form_event', defaultMessage: 'Event' })}
                   >
+                    <option value="">
+                      {intl.formatMessage({
+                        id: 'form_please_select_an_option',
+                        defaultMessage: 'Please select an option',
+                      })}
+                    </option>
                     <option>
                       {intl.formatMessage({
                         id: 'career_fair_form_invite_career_fair',
@@ -284,10 +287,10 @@ const CareerFairForm = () => {
                   rowsMax={10}
                   maxLength={3400}
                   aria-required="true"
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'career_fair_form_event_description',
                     defaultMessage: 'Event Description',
-                  })}
+                  })}*`}
                   description={intl.formatMessage(
                     {
                       id: 'form_validation_maxChars',

diff --git a/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx b/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx
@@ -63,10 +63,7 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
             id: 'contact_form_human_rights_information_request',
             defaultMessage: 'Human Rights Information Request',
           })
-        : intl.formatMessage({
-            id: 'contact_form_ask_us',
-            defaultMessage: 'Ask us a question',
-          }),
+        : '',
     },
   })
 
@@ -197,6 +194,12 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
                     disabled={isHumanRightsRequest}
                     label={intl.formatMessage({ id: 'category', defaultMessage: 'Category' })}
                   >
+                    <option value="">
+                      {intl.formatMessage({
+                        id: 'form_please_select_an_option',
+                        defaultMessage: 'Please select an option',
+                      })}
+                    </option>
                     <option>
                       {intl.formatMessage({ id: 'contact_form_ask_us', defaultMessage: 'Ask us a question' })}
                     </option>

diff --git a/web/pageComponents/topicPages/Form/PensionForm.tsx b/web/pageComponents/topicPages/Form/PensionForm.tsx
@@ -79,7 +79,7 @@ const PensionForm = () => {
       name: '',
       email: '',
       phone: '',
-      pensionCategory: intl.formatMessage({ id: 'pension_form_select_topic', defaultMessage: 'Select topic' }),
+      pensionCategory: '',
       requests: '',
     },
   })
@@ -185,7 +185,10 @@ const PensionForm = () => {
                     })}
                   >
                     <option value="">
-                      {intl.formatMessage({ id: 'pension_form_select_topic', defaultMessage: 'Select topic' })}
+                      {intl.formatMessage({
+                        id: 'form_please_select_an_option',
+                        defaultMessage: 'Please select an option',
+                      })}
                     </option>
                     <option value="pension">
                       {intl.formatMessage({ id: 'pension_form_category_pension', defaultMessage: 'Pension' })}

diff --git a/web/pageComponents/topicPages/Form/SubscribeForm.tsx b/web/pageComponents/topicPages/Form/SubscribeForm.tsx
@@ -93,6 +93,7 @@ const SubscribeForm = () => {
                     id="subscribe_form_choose"
                     defaultMessage="Please choose one or more of the following"
                   />
+                  *
                 </legend>
               )}
               {errors.categories && (

diff --git a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Icon } from '@equinor/eds-core-react'
-import { useForm, Controller } from 'react-hook-form'
+import { useForm, Controller, useWatch } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { FormTextField, Checkbox, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
-import { BaseSyntheticEvent, useState } from 'react'
+import { BaseSyntheticEvent, useMemo, useState } from 'react'
 import FriendlyCaptcha from '../FriendlyCaptcha'
 import getCatalogType from './getRequestType'
 import { TextField } from '@core/TextField/TextField'
@@ -43,19 +43,28 @@ const CareersContactForm = () => {
       location: '',
       phone: '',
       questions: '',
-      category: intl.formatMessage({
-        id: 'careers_contact_form_thesis_writing',
-        defaultMessage: 'Thesis writing',
-      }),
+      category: '',
       preferredLang: '',
-      candidateType: intl.formatMessage({
-        id: 'careers_contact_form_experienced_professionals',
-        defaultMessage: 'Experienced professionals',
-      }),
+      candidateType: '',
       supportingDocuments: '',
     },
   })
 
+  const watchCategory = useWatch({
+    name: 'category',
+    control,
+  })
+
+  const setPositionIdMandatory = useMemo(() => {
+    return (
+      watchCategory !==
+        intl.formatMessage({
+          id: 'careers_contact_form_suspected_recruitment_scam',
+          defaultMessage: 'Suspected recruitment scam',
+        }) && watchCategory !== ''
+    )
+  }, [intl, watchCategory])
+
   const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
     data.preferredLang = intl.locale
     if (isFriendlyChallengeDone) {
@@ -206,10 +215,16 @@ const CareersContactForm = () => {
                   id={props.name}
                   label={intl.formatMessage({ id: 'category', defaultMessage: 'Category' })}
                 >
+                  <option value="">
+                    {intl.formatMessage({
+                      id: 'form_please_select_an_option',
+                      defaultMessage: 'Please select an option',
+                    })}
+                  </option>
                   <option>
                     {intl.formatMessage({
-                      id: 'careers_contact_form_thesis_writing',
-                      defaultMessage: 'Thesis writing',
+                      id: 'careers_contact_form_onboarding',
+                      defaultMessage: 'Onboarding',
                     })}
                   </option>
                   <option>
@@ -237,14 +252,34 @@ const CareersContactForm = () => {
             <Controller
               name="positionId"
               control={control}
-              render={({ field: { ref, ...props } }) => (
+              rules={{
+                validate: {
+                  require: (value) => {
+                    if (!value && setPositionIdMandatory) {
+                      console.log('not validated required field')
+                      return intl.formatMessage({
+                        id: 'careers_contact_form_positionId_validation',
+                        defaultMessage: 'Please enter a position ID or name ',
+                      })
+                    }
+                    return true
+                  },
+                },
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
                 <FormTextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'careers_contact_form_position',
                     defaultMessage: 'Position ID/name',
+                  })}${setPositionIdMandatory ? '*' : ''}`}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  {...(setPositionIdMandatory && {
+                    'aria-required': true,
                   })}
+                  {...(invalid && { variant: 'error' })}
                   inputRef={ref}
                 />
               )}
@@ -293,6 +328,12 @@ const CareersContactForm = () => {
                     defaultMessage: 'Candidate type',
                   })}
                 >
+                  <option value="">
+                    {intl.formatMessage({
+                      id: 'form_please_select_an_option',
+                      defaultMessage: 'Please select an option',
+                    })}
+                  </option>
                   <option>
                     {intl.formatMessage({
                       id: 'careers_contact_form_experienced_professionals',

diff --git a/web/pageComponents/topicPages/Form/careersContactForm/getRequestType.ts b/web/pageComponents/topicPages/Form/careersContactForm/getRequestType.ts
@@ -10,6 +10,10 @@ export default function getCatalogType(
     id: 'careers_contact_form_suspected_recruitment_scam',
     defaultMessage: 'Suspected recruitment scam',
   })
+  const onboarding = intl.formatMessage({
+    id: 'careers_contact_form_onboarding',
+    defaultMessage: 'Onboarding',
+  })
 
   const graduates = intl.formatMessage({
     id: ' careers_contact_form_graduates',
@@ -26,6 +30,7 @@ export default function getCatalogType(
   })
 
   if (category.includes(suspectedRecruitmentScam)) return 'suspectedRecruitmentScamRequest'
+  else if (category.includes(onboarding)) return 'onboarding'
   else if (candidateType.includes(graduates) || candidateType.includes(interns) || candidateType.includes(apprentices))
     return 'emergingTalentsQueries'
   else return 'others'

diff --git a/web/pages/api/forms/service-now-careers-contact.ts b/web/pages/api/forms/service-now-careers-contact.ts
@@ -7,6 +7,8 @@ const getCatalogIdentifier = (catalogType: CareersContactFormCatalogType | null)
   switch (catalogType) {
     case 'suspectedRecruitmentScamRequest':
       return 'b04a9748832d8610347af830feaad382'
+    case 'onboarding':
+      return '59e02ac8375a3640615af01643990e7c'
     case 'emergingTalentsQueries':
       return '3971e24c375a3640615af01643990ebf'
     default:

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -417,8 +417,12 @@ export type IframeCarouselData = {
 
 export type ContactFormCatalogType = 'humanRightsInformationRequest' | 'loginIssues'
 
-export type CareersContactFormCatalogType = 'suspectedRecruitmentScamRequest' | 'emergingTalentsQueries' | 'others'
-export type PensionFormCatalogType=  'pension'|'travelInsurance'|'otherPensionInsuranceRelated';
+export type CareersContactFormCatalogType =
+  | 'suspectedRecruitmentScamRequest'
+  | 'onboarding'
+  | 'emergingTalentsQueries'
+  | 'others'
+export type PensionFormCatalogType = 'pension' | 'travelInsurance' | 'otherPensionInsuranceRelated'
 export type KeyNumberItemData = {
   type: 'keyNumberItem'
   id: string