From 681bfd4799e46b6b4b68d5022a18f92742cc4c9a Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 12 Aug 2024 17:20:48 -0500
Subject: [PATCH] Add user_id as a hidden field populated from search params
 (#2660)

* Add user_id as a hidden field populated from search params

* Prepend "body" params into message before submitting

* Put body parameters in support_context hidden field

* Use postmessage rather than redirect for embedded contact form

* Remove unused ref; default user_id from user context

* Extract useAfterSubmit

* Lint
---
 src/app/pages/contact/form.js                 | 31 +++++++++++++++----
 src/app/pages/flex-page/blocks/HeroBlock.tsx  |  2 +-
 .../pages/flex-page/blocks/SectionBlock.tsx   |  2 +-
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/contact/form.js b/src/app/pages/contact/form.js
index cd2600ab1..24894398a 100644
--- a/src/app/pages/contact/form.js
+++ b/src/app/pages/contact/form.js
@@ -1,8 +1,9 @@
 import React, {useState, useRef, useEffect} from 'react';
 import SalesforceForm from '~/components/salesforce-form/salesforce-form';
 import DropdownSelect from '~/components/select/drop-down/drop-down';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate, useLocation} from 'react-router-dom';
 import { FileButton } from '../errata-form/form/FileUploader';
+import useUserContext from '~/contexts/user';
 
 const options = [
     'General',
@@ -58,6 +59,22 @@ function LabeledInputWithInvalidMessage({
     );
 }
 
+function useAfterSubmit() {
+    const navigate = useNavigate();
+    const {pathname} = useLocation();
+
+    return React.useCallback(
+        () => {
+            if (pathname.includes('embedded')) {
+                window.parent.postMessage('contact form submitted');
+            } else {
+                navigate('/confirmation/contact');
+            }
+        },
+        [navigate, pathname]
+    );
+}
+
 // This is an interim site; normally we can leave postTo null and the default
 // in the salesforceForm will be right.
 const newPostSite = 'https://hooks.zapier.com/hooks/catch/175480/3n62dhe/';
@@ -77,7 +94,6 @@ export default function ContactForm() {
         () => (subject === 'OpenStax Polska') ? '/apps/cms/api/mail/send_mail' : newPostSite,
         [subject]
     );
-    const navigate = useNavigate();
     const onChangeSubject = React.useCallback(
         (value) => setSubject(value),
         []
@@ -86,15 +102,18 @@ export default function ContactForm() {
         () => setShowInvalidMessages(true),
         [setShowInvalidMessages]
     );
-    const afterSubmit = React.useCallback(
-        () => navigate('/confirmation/contact'),
-        [navigate]
-    );
+    const afterSubmit = useAfterSubmit();
+    const searchParams = new window.URLSearchParams(window.location.search);
+    const bodyParams = searchParams.getAll('body').join('\n');
+    const {userStatus} = useUserContext();
+    const userUuid = searchParams.get('user_id') ?? userStatus.uuid;
 
     return (
         <SalesforceForm postTo={postTo} afterSubmit={afterSubmit}>
             <input type="hidden" name="external" value="1" />
             <input type="hidden" name="product" value={product} />
+            <input type="hidden" name="user_id" value={userUuid} />
+            <input type="hidden" name="support_context" value={bodyParams} />
             <label>
                 What is your question about?
                 <DropdownSelect
diff --git a/src/app/pages/flex-page/blocks/HeroBlock.tsx b/src/app/pages/flex-page/blocks/HeroBlock.tsx
index d8490ed73..424d7f02c 100644
--- a/src/app/pages/flex-page/blocks/HeroBlock.tsx
+++ b/src/app/pages/flex-page/blocks/HeroBlock.tsx
@@ -28,7 +28,7 @@ export interface HeroBlockConfig {
 export function HeroBlock({data}: {data: HeroBlockConfig}) {
     const padding = findByType(data.value.config, 'padding')?.value ?? 0;
     const backgroundColor = findByType(data.value.config, 'background_color')?.value;
-    const isDark = backgroundColor && Color(backgroundColor).isDark();
+    const isDark = backgroundColor && Color(backgroundColor).isDark(); // eslint-disable-line new-cap
 
     return <section
         className={cn('content-block-hero', {'dark-background': isDark})}
diff --git a/src/app/pages/flex-page/blocks/SectionBlock.tsx b/src/app/pages/flex-page/blocks/SectionBlock.tsx
index 02ed4d4ef..231518dd0 100644
--- a/src/app/pages/flex-page/blocks/SectionBlock.tsx
+++ b/src/app/pages/flex-page/blocks/SectionBlock.tsx
@@ -41,7 +41,7 @@ export function SectionBlock({data}: {data: SectionBlockConfig}) {
     const padding = findByType(data.value.config, 'padding')?.value ?? 0;
     const paddingTop = findByType(data.value.config, 'padding_top')?.value;
     const paddingBottom = findByType(data.value.config, 'padding_bottom')?.value;
-    const isDark = backgroundColor && Color(backgroundColor).isDark();
+    const isDark = backgroundColor && Color(backgroundColor).isDark(); // eslint-disable-line new-cap
 
     return <section
         id={id}