[MIM-1934] Mim 1934 bugfix default selection contact form (#2844)

* Use receiver state value as selectedItem instead of first item in items array MIM-1934 * Minor code refactoring; ts typing and sonarcloud warnings * Remove logging
statisticsnorway · Aug 1, 2024 · 03b0a52 · 03b0a52
1 parent 6c71e46
commit 03b0a52
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "@item-enonic-types/lib-time": "~1.0.4",
     "@reduxjs/toolkit": "~2.2.7",
     "@statisticsnorway/ssb-component-library": "~2.2.3",
+    "@types/grecaptcha": "^3.0.9",
     "@types/ramda": "~0.30.1",
     "@types/react": "~18.3.3",
     "@types/react-mathjax": "^1.0.4",

diff --git a/src/main/resources/site/parts/contactForm/contactForm.tsx b/src/main/resources/site/parts/contactForm/contactForm.tsx
@@ -13,10 +13,14 @@ interface ContactFormProps {
 
 function ContactForm(props: ContactFormProps) {
   const { contactFormServiceUrl, recaptchaSiteKey } = props
+  const DEFAULT_RECEIVER_ITEM = {
+    title: props.phrases.contactFormReceiverGenerell,
+    id: 'generell',
+  }
   const [receiver, setReceiver] = useState({
     error: false,
     errorMsg: props.phrases.contactFormValidateReveicer,
-    value: '',
+    value: DEFAULT_RECEIVER_ITEM,
   })
   const [name, setName] = useState({
     error: false,
@@ -59,7 +63,7 @@ function ContactForm(props: ContactFormProps) {
     setLoading(true)
     grecaptcha.enterprise.ready(function () {
       grecaptcha.enterprise
-        .execute(recaptchaSiteKey, {
+        .execute(recaptchaSiteKey as string, {
           action: 'submitContactForm',
         })
         .then(function (token: string) {
@@ -83,9 +87,6 @@ function ContactForm(props: ContactFormProps) {
               setLoading(false)
             })
         })
-        .catch((e) => {
-          console.trace(e)
-        })
     })
   }
 
@@ -215,6 +216,7 @@ function ContactForm(props: ContactFormProps) {
         </Row>
       )
     }
+    return
   }
 
   function renderEmailSentError() {
@@ -229,15 +231,13 @@ function ContactForm(props: ContactFormProps) {
         </Row>
       )
     }
+    return
   }
 
   function renderForm() {
     if (!emailSent) {
       const items = [
-        {
-          title: props.phrases.contactFormReceiverGenerell,
-          id: 'generell',
-        },
+        DEFAULT_RECEIVER_ITEM,
         {
           title: props.phrases.contactFormReceiverStatistikk,
           id: 'statistikk',
@@ -269,8 +269,7 @@ function ContactForm(props: ContactFormProps) {
                         onChange('receiver', value)
                       }}
                       header={props.phrases.contactFormChooseReceiver}
-                      placeholder={''}
-                      selectedItem={items[0]}
+                      selectedItem={receiver.value}
                       error={receiver.error}
                       errorMessage={receiver.errorMsg}
                       items={items}
@@ -328,6 +327,7 @@ function ContactForm(props: ContactFormProps) {
         </Row>
       )
     }
+    return
   }
 
   function renderContactForm() {
@@ -339,7 +339,6 @@ function ContactForm(props: ContactFormProps) {
       </section>
     )
   }
-
   return renderContactForm()
 }
 

diff --git a/src/tsconfig.react4xp.json b/src/tsconfig.react4xp.json
@@ -16,6 +16,7 @@
     "lib": ["es2021", "dom", "ES2021.String"],
     "types": [
       "@item-enonic-types/global",
+      "@types/grecaptcha"
     ],
     "rootDirs": [
       "./main/resources",