From e794fbcf95ba69fc87f848893f78bfce77bc4d17 Mon Sep 17 00:00:00 2001 From: Nolan Van Hell Date: Mon, 16 Oct 2023 17:42:43 -0700 Subject: [PATCH] FW-5023 Use new contact-us API --- src/common/constants/paths.js | 1 + src/common/dataAdaptors/contactUsAdaptor.js | 7 + src/common/dataHooks/useContactUs.js | 48 +++++ src/common/utils/widgetHelpers.js | 2 +- src/components/Widget/WidgetPresentation.js | 7 +- .../WidgetAreaEditPresentationSettingsPane.js | 39 ++++ .../WidgetContactUsContainer.js | 4 + .../WidgetContactUs/WidgetContactUsData.js | 55 +---- .../WidgetContactUsPresentation.js | 199 +++++++++--------- .../WidgetCrud/WidgetFormContact.js | 31 +++ src/services/api/mail.js | 18 +- 11 files changed, 251 insertions(+), 160 deletions(-) create mode 100644 src/common/dataAdaptors/contactUsAdaptor.js create mode 100644 src/common/dataHooks/useContactUs.js diff --git a/src/common/constants/paths.js b/src/common/constants/paths.js index 04dd056a..3d903f46 100644 --- a/src/common/constants/paths.js +++ b/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' diff --git a/src/common/dataAdaptors/contactUsAdaptor.js b/src/common/dataAdaptors/contactUsAdaptor.js new file mode 100644 index 00000000..eaa35d1d --- /dev/null +++ b/src/common/dataAdaptors/contactUsAdaptor.js @@ -0,0 +1,7 @@ +export function contactUsAdaptor({ formData }) { + return { + name: formData?.name || '', + email: formData?.email || '', + message: formData?.message || '', + } +} diff --git a/src/common/dataHooks/useContactUs.js b/src/common/dataHooks/useContactUs.js new file mode 100644 index 00000000..68bd2d3f --- /dev/null +++ b/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 } +} diff --git a/src/common/utils/widgetHelpers.js b/src/common/utils/widgetHelpers.js index cbe5cbf0..ee1b01ee 100644 --- a/src/common/utils/widgetHelpers.js +++ b/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, diff --git a/src/components/Widget/WidgetPresentation.js b/src/components/Widget/WidgetPresentation.js index d9455814..ba7ecfef 100644 --- a/src/components/Widget/WidgetPresentation.js +++ b/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 - // hiding for FW-4713 - // case WIDGET_CONTACT: - // return + case WIDGET_CONTACT: + return case WIDGET_GALLERY: return diff --git a/src/components/WidgetAreaEdit/WidgetAreaEditPresentationSettingsPane.js b/src/components/WidgetAreaEdit/WidgetAreaEditPresentationSettingsPane.js index d3e7c93e..eb7c22ba 100644 --- a/src/components/WidgetAreaEdit/WidgetAreaEditPresentationSettingsPane.js +++ b/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,41 @@ function WidgetAreaEditPresentationSettingsPane({ {getSettings()} + {currentWidget?.type === WIDGET_CONTACT && ( +
+ {emailListAsString?.length > 0 ? ( +
+
+ Contact List +
+
+
+ (Please contact support at hello@firstvoices.com to + update this list) +
+
+ Contact us emails will be sent to the following + addresses: +
+
{emailListAsString}
+
+
+ ) : ( +
+
+ Contact List +
+
+ (Please contact support at hello@firstvoices.com to update + this list) +
+
+ Could not find any emails to send contact messages to. +
+
+ )} +
+ )} ) : ( diff --git a/src/components/WidgetContactUs/WidgetContactUsContainer.js b/src/components/WidgetContactUs/WidgetContactUsContainer.js index 681e1b0f..18ab71cb 100644 --- a/src/components/WidgetContactUs/WidgetContactUsContainer.js +++ b/src/components/WidgetContactUs/WidgetContactUsContainer.js @@ -4,6 +4,7 @@ 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 @@ -11,6 +12,8 @@ function WidgetContactUsContainer({ widgetData }) { widgetData, }) + const { user } = useUserStore() + return ( ) } diff --git a/src/components/WidgetContactUs/WidgetContactUsData.js b/src/components/WidgetContactUs/WidgetContactUsData.js index 81e9f566..4aaa78de 100644 --- a/src/components/WidgetContactUs/WidgetContactUsData.js +++ b/src/components/WidgetContactUs/WidgetContactUsData.js @@ -1,12 +1,10 @@ // 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 || '' @@ -14,53 +12,10 @@ function ContactUsData({ widgetData }) { 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 { diff --git a/src/components/WidgetContactUs/WidgetContactUsPresentation.js b/src/components/WidgetContactUs/WidgetContactUsPresentation.js index 36c56c1a..5997f1c0 100644 --- a/src/components/WidgetContactUs/WidgetContactUsPresentation.js +++ b/src/components/WidgetContactUs/WidgetContactUsPresentation.js @@ -15,6 +15,7 @@ function ContactUsPresentation({ textWithFormatting, links, submitHandler, + user, }) { const validator = yup.object().shape({ name: yup.string().min(3).required('A name is required').trim(), @@ -26,7 +27,6 @@ function ContactUsPresentation({ .required('A Message is required') .trim(), }) - const defaultValues = { name: '', email: '', @@ -89,111 +89,119 @@ function ContactUsPresentation({ title={title || `Contact ${siteTitle} Team`} /> -
- {subtitle || - 'Please contact us if you have any suggestions or feedback regarding our language content.'} -
-
-
-
-
-
- - -
- {errors?.name && ( -
- {errors?.name?.message} -
- )} + {user.isAnonymous ? ( +
+ Please sign in to use the contact us form. +
+ ) : ( +
+
+ {subtitle || + 'Please contact us if you have any suggestions or feedback regarding our language content.'} +
+
+
+ +
+
+ + +
+ {errors?.name && ( +
+ {errors?.name?.message} +
+ )} -
- - -
- {errors?.email && ( -
- {errors?.email?.message} -
- )} +
+ + +
+ {errors?.email && ( +
+ {errors?.email?.message} +
+ )} -
- -