FW-5023 Use new contact-us API (#165)

src/common/constants/paths.js

@@ -2,6 +2,7 @@
 
 export const CATEGORIES = 'categories'
 export const CHARACTERS = 'characters'
+export const CONTACT_US = 'contact-us'
 export const DICTIONARY = 'dictionary'
 export const PAGES = 'pages'
 export const PARTS_OF_SPEECH = 'parts-of-speech'

src/common/dataAdaptors/contactUsAdaptor.js

@@ -0,0 +1,7 @@
+export function contactUsAdaptor({ formData }) {
+  return {
+    name: formData?.name || '',
+    email: formData?.email || '',
+    message: formData?.message || '',
+  }
+}

src/common/dataHooks/useContactUs.js

@@ -0,0 +1,48 @@
+import { useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+// FPCC
+import { CONTACT_US } from 'common/constants'
+import api from 'services/api'
+import { contactUsAdaptor } from 'common/dataAdaptors/contactUsAdaptor'
+import useMutationWithNotification from 'common/dataHooks/useMutationWithNotification'
+
+export function useContactUsEmailList() {
+  const { sitename } = useParams()
+  const response = useQuery(
+    [CONTACT_US, sitename],
+    () => api.mail.get({ sitename }),
+    { enabled: !!sitename },
+  )
+
+  const emailList = response?.data?.[0]?.emailList
+  const emailListAsString = emailList
+    ?.map((v) => Object.values(v).join(''))
+    .join(' - ')
+
+  return { ...response, emailListAsString }
+}
+
+export function useContactUsSendEmail() {
+  const { sitename } = useParams()
+
+  const sendMail = async (formData) => {
+    const properties = contactUsAdaptor({ formData })
+    return api.mail.post({
+      sitename,
+      properties,
+    })
+  }
+
+  const mutation = useMutationWithNotification({
+    mutationFn: sendMail,
+    redirectTo: ``,
+    queryKeyToInvalidate: [CONTACT_US, sitename],
+    actionWord: 'sent',
+    type: 'email',
+  })
+
+  const onSubmit = (formData) => mutation.mutate(formData)
+
+  return { onSubmit }
+}

src/common/utils/widgetHelpers.js

@@ -21,7 +21,7 @@ export const getEditableWidgetsForUser = (isSuperAdmin) =>
   [
     isSuperAdmin && WIDGET_ALPHABET,
     isSuperAdmin && WIDGET_APPS,
-    // WIDGET_CONTACT,
+    WIDGET_CONTACT,
     // isSuperAdmin && WIDGET_GALLERY,
     //   WIDGET_IFRAME,
     isSuperAdmin && WIDGET_KEYBOARDS,

src/components/Widget/WidgetPresentation.js

@@ -21,7 +21,7 @@ import {
 
 import Alphabet from 'components/Alphabet'
 import WidgetApps from 'components/WidgetApps'
-// import WidgetContactUs from 'components/WidgetContactUs'
+import WidgetContactUs from 'components/WidgetContactUs'
 import Gallery from 'components/Gallery'
 import WidgetIframe from 'components/WidgetIframe'
 import WidgetKeyboards from 'components/WidgetKeyboards'
@@ -42,9 +42,8 @@ function WidgetPresentation({ data, type }) {
     case WIDGET_APPS:
       return <WidgetApps.Container widgetData={data} />
 
-    // hiding for FW-4713
-    // case WIDGET_CONTACT:
-    //   return <WidgetContactUs.Container widgetData={data} />
+    case WIDGET_CONTACT:
+      return <WidgetContactUs.Container widgetData={data} />
 
     case WIDGET_GALLERY:
       return <Gallery.Container widgetData={data} />

src/components/WidgetAreaEdit/WidgetAreaEditPresentationSettingsPane.js

@@ -17,12 +17,14 @@ import {
 } from 'common/utils/widgetHelpers'
 import getWidgetIcon from 'common/utils/getWidgetIcon'
 import {
+  WIDGET_CONTACT,
   WIDGET_WOTD,
   SETTING_WYSIWYG,
   SETTING_AUDIO,
   SETTING_IMAGE,
 } from 'common/constants'
 import MediaThumbnail from 'components/MediaThumbnail'
+import { useContactUsEmailList } from 'common/dataHooks/useContactUs'
 
 function WidgetAreaEditPresentationSettingsPane({
   currentWidget,
@@ -37,6 +39,8 @@ function WidgetAreaEditPresentationSettingsPane({
     setRemoveModalOpen(false)
   }
 
+  const { emailListAsString } = useContactUsEmailList()
+
   const getSettings = () => {
     if (currentWidget?.type === WIDGET_WOTD) {
       return (
@@ -189,6 +193,32 @@ function WidgetAreaEditPresentationSettingsPane({
               </div>
               {getSettings()}
             </div>
+            {currentWidget?.type === WIDGET_CONTACT && (
+              <div className="mt-6">
+                <dt className="mb-1 text-sm font-bold text-primary-light">
+                  Contact List
+                </dt>
+                <div className="col-span-12">
+                  <div className="mt-2 text-xs text-fv-charcoal-light italic">
+                    (Please contact support at hello@firstvoices.com to update
+                    this list)
+                  </div>
+                  {emailListAsString?.length > 0 ? (
+                    <div>
+                      <div>
+                        Contact us emails will be sent to the following
+                        addresses:
+                      </div>
+                      <div>{emailListAsString}</div>
+                    </div>
+                  ) : (
+                    <div>
+                      Could not find any emails to send contact messages to.
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
         </div>
       ) : (

src/components/WidgetContactUs/WidgetContactUsContainer.js

@@ -4,13 +4,16 @@ import PropTypes from 'prop-types'
 // FPCC
 import WidgetContactUsPresentation from 'components/WidgetContactUs/WidgetContactUsPresentation'
 import WidgetContactUsData from 'components/WidgetContactUs/WidgetContactUsData'
+import { useUserStore } from 'context/UserContext'
 
 function WidgetContactUsContainer({ widgetData }) {
   const { title, text, textWithFormatting } = widgetData?.settings
   const { siteTitle, links, submitHandler } = WidgetContactUsData({
     widgetData,
   })
 
+  const { user } = useUserStore()
+
   return (
     <WidgetContactUsPresentation
       title={title}
@@ -19,6 +22,7 @@ function WidgetContactUsContainer({ widgetData }) {
       textWithFormatting={textWithFormatting}
       links={links}
       submitHandler={submitHandler}
+      user={user}
     />
   )
 }

src/components/WidgetContactUs/WidgetContactUsData.js

@@ -1,66 +1,21 @@
 // FPCC
 import { useSiteStore } from 'context/SiteContext'
-import api from 'services/api'
-import { useNotification } from 'context/NotificationContext'
+import { useContactUsSendEmail } from 'common/dataHooks/useContactUs'
 
 function ContactUsData({ widgetData }) {
   const { site } = useSiteStore()
-  const { title, id } = site
-  const { setNotification } = useNotification()
+  const { title } = site
 
   let links = []
   const linkString = widgetData?.settings?.urls || ''
   if (linkString) {
     links = linkString.split(',')
   }
 
-  const submitHandler = async (formData) => {
-    if (formData) {
-      sendMessage(formData)
-    }
-  }
+  const { onSubmit: sendMail } = useContactUsSendEmail()
 
-  const sendMessage = async (formData) => {
-    try {
-      const response = await api.mail.post({
-        siteId: id,
-        name: formData.name,
-        from: formData.email,
-        message: formData.message,
-      })
-
-      if (response?.status === 202) {
-        setNotification({
-          type: 'SUCCESS',
-          message: 'Thank you for emailing the Language Team.',
-        })
-      }
-    } catch (error) {
-      if (error?.name === 'HTTPError') {
-        switch (error?.response?.status) {
-          case 400:
-            setNotification({
-              type: 'ERROR',
-              message: `We've encountered the following error: ${error?.message}.`,
-            })
-            break
-          case 429:
-            setNotification({
-              type: 'ERROR',
-              message:
-                'We have detected potential SPAM issue. Please try again in a few minutes or contact our Help Desk.',
-            })
-            break
-          default:
-            setNotification({
-              type: 'ERROR',
-              message:
-                'We have encountered an unexpected error. Please report this to our Help Desk.',
-            })
-            break
-        }
-      }
-    }
+  const submitHandler = async (formData) => {
+    sendMail(formData)
   }
 
   return {