From e88b971735b9181bab59cd7656cca82a604d6352 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Wed, 4 Sep 2024 12:00:21 +0100
Subject: [PATCH] Merge pull request #20169 from
 overleaf/td-contact-modal-acknowledge

Add acknowledgement message to React contact modal after successful submission

GitOrigin-RevId: a27b968351857997df17fedde3baa9da3f82331a
---
 .../web/frontend/extracted-translations.json  |  2 +
 .../features/ui/components/ol/ol-button.tsx   |  6 ++-
 .../stories/contact-us-modal.stories.tsx      | 43 ++++++++++++++++++-
 services/web/locales/en.json                  |  2 +
 4 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 40573a80f9..ba3b738b00 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -867,6 +867,7 @@
   "mendeley_sync_description": "",
   "menu": "",
   "merge_cells": "",
+  "message_received": "",
   "missing_field_for_entry": "",
   "missing_fields_for_entry": "",
   "money_back_guarantee": "",
@@ -1463,6 +1464,7 @@
   "thank_you_exclamation": "",
   "thank_you_for_your_feedback": "",
   "thanks_for_confirming_your_email_address": "",
+  "thanks_for_getting_in_touch": "",
   "thanks_for_subscribing": "",
   "thanks_for_subscribing_you_help_sl": "",
   "thanks_settings_updated": "",
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-button.tsx b/services/web/frontend/js/features/ui/components/ol/ol-button.tsx
index 17e061cbdf..ab2b704200 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-button.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-button.tsx
@@ -4,6 +4,7 @@ import type { ButtonProps } from '@/features/ui/components/types/button-props'
 import type { ButtonProps as BS3ButtonPropsBase } from 'react-bootstrap'
 import Button from '../bootstrap-5/button'
 import classnames from 'classnames'
+import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
 
 export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'
 
@@ -45,10 +46,13 @@ export const mapBsButtonSizes = (
 export default function OLButton(props: OLButtonProps) {
   const { bs3Props, ...rest } = props
 
+  // Get all `aria-*` and `data-*` attributes
+  const extraProps = getAriaAndDataProps(rest)
+
   return (
     <BootstrapVersionSwitcher
       bs3={
-        <BS3Button {...bs3ButtonProps(rest)} {...bs3Props}>
+        <BS3Button {...bs3ButtonProps(rest)} {...bs3Props} {...extraProps}>
           {bs3Props?.loading || rest.children}
         </BS3Button>
       }
diff --git a/services/web/frontend/stories/contact-us-modal.stories.tsx b/services/web/frontend/stories/contact-us-modal.stories.tsx
index e9dc55c451..f220031fd4 100644
--- a/services/web/frontend/stories/contact-us-modal.stories.tsx
+++ b/services/web/frontend/stories/contact-us-modal.stories.tsx
@@ -1,9 +1,10 @@
-import { ComponentProps } from 'react'
+import { ComponentProps, useCallback, useState } from 'react'
 import useFetchMock from './hooks/use-fetch-mock'
 import ContactUsModal from '../../modules/support/frontend/js/components/contact-us-modal'
 import fixedHelpSuggestionSearch from '../../modules/support/test/frontend/util/fixed-help-suggestion-search'
 import { ScopeDecorator } from './decorators/scope'
 import { StoryObj } from '@storybook/react'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 type Story = StoryObj<typeof ContactUsModal>
 type ContactUsModalProps = ComponentProps<typeof ContactUsModal>
@@ -81,6 +82,46 @@ export const RequestErrorBootstrap5: Story = bootstrap5Story(
   renderContactUsModalWithRequestError
 )
 
+const ContactUsModalWithAcknowledgement = (
+  args: Omit<ContactUsModalProps, 'show' | 'handleHide'>
+) => {
+  useFetchMock(fetchMock => {
+    fetchMock.post('/support', { status: 200 }, { delay: 1000 })
+  })
+
+  const [show, setShow] = useState(false)
+
+  const hideModal = useCallback((event?: Event) => {
+    event?.preventDefault()
+    setShow(false)
+  }, [])
+
+  return (
+    <>
+      <OLButton onClick={() => setShow(true)}>Contact Us</OLButton>
+      <ContactUsModal
+        show={show}
+        handleHide={hideModal}
+        helpSuggestionSearch={fixedHelpSuggestionSearch}
+        {...args}
+      />
+    </>
+  )
+}
+
+const renderContactUsModalWithAcknowledgement = (args: ContactUsModalProps) => {
+  const { show, handleHide, ...rest } = args
+  return <ContactUsModalWithAcknowledgement {...rest} />
+}
+
+export const WithAcknowledgement: Story = bootstrap3Story(
+  renderContactUsModalWithAcknowledgement
+)
+
+export const WithAcknowledgementBootstrap5: Story = bootstrap5Story(
+  renderContactUsModalWithAcknowledgement
+)
+
 export default {
   title: 'Shared / Modals / Contact Us',
   component: ContactUsModal,
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 7529f35d1f..bc001e8809 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1228,6 +1228,7 @@
   "merge": "Merge",
   "merge_cells": "Merge cells",
   "merging": "Merging",
+  "message_received": "Message received",
   "missing_field_for_entry": "Missing field for",
   "missing_fields_for_entry": "Missing fields for",
   "money_back_guarantee": "30-day money back guarantee, no questions asked",
@@ -2040,6 +2041,7 @@
   "thank_you_for_your_feedback": "Thank you for your feedback!",
   "thanks": "Thanks",
   "thanks_for_confirming_your_email_address": "Thanks for confirming your email address",
+  "thanks_for_getting_in_touch": "Thanks for getting in touch. Our team will get back to you by email as soon as possible.",
   "thanks_for_subscribing": "Thanks for subscribing!",
   "thanks_for_subscribing_you_help_sl": "Thank you for subscribing to the __planName__ plan. It’s support from people like yourself that allows __appName__ to continue to grow and improve.",
   "thanks_settings_updated": "Thanks, your settings have been updated.",