From c0c3415ec17138ee09ed51a04117ee9b5b95a344 Mon Sep 17 00:00:00 2001
From: Arie Peterson <arie@greenhost.nl>
Date: Tue, 25 May 2021 17:57:17 +0200
Subject: [PATCH 1/2] Enable form submission from Greenhost website

---
 src/App.tsx                                   |  9 +---
 .../contact-form/ContactForm.test.tsx         |  8 ++--
 src/components/contact-form/ContactForm.tsx   | 48 ++++++++-----------
 .../urgent-request/UrgentRequest.test.tsx     |  5 +-
 .../urgent-request/UrgentRequest.tsx          | 13 +----
 src/config.yml                                |  2 +
 6 files changed, 31 insertions(+), 54 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 696c6c4..ca926af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -105,14 +105,7 @@ export const App: React.FC = () => {
       <h1>
         <Markdown>{t('contact.title')}</Markdown>
       </h1>
-      <ContactForm {...{ problem, problemGroup }} />
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-
+      <ContactForm problem={problem} problemGroup={problemGroup} formAction={config.formAction} />
     </Suspense>
   );
 }
diff --git a/src/components/contact-form/ContactForm.test.tsx b/src/components/contact-form/ContactForm.test.tsx
index 0a3379e..30c28e7 100644
--- a/src/components/contact-form/ContactForm.test.tsx
+++ b/src/components/contact-form/ContactForm.test.tsx
@@ -41,7 +41,7 @@ describe('<ContactForm problemGroup="%s"}>', () => {
     'renders the contact form with problemGroup: %s',
     (problemGroup) => {
       const { getByRole, queryByRole, getByText } = render(
-        <ContactForm {...{ problemGroup, problem }} />,
+        <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
       );
       const contactDetailFieldset = getByRole('group', {
         name: /Contact details/i,
@@ -73,7 +73,7 @@ describe('<ContactForm problemGroup="%s"}>', () => {
   ])('confirmation modal closes on %s %s', (action, value) => {
     const problemGroup = 'technical';
     const { getByRole } = render(
-      <ContactForm {...{ problemGroup, problem }} />,
+      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
     );
     const regularSubmit = getByRole('button', { name: /submit request/i });
 
@@ -97,7 +97,7 @@ describe('<ContactForm problemGroup="%s"}>', () => {
   it('can be submitted by a form submit event', ()=>{
     const problemGroup = 'technical';
     const { getByRole } = render(
-      <ContactForm {...{ problemGroup, problem }} />,
+      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
     );
     const form = getByRole("form", {name:"Contact form"});
     fireEvent.submit(form);
@@ -108,7 +108,7 @@ describe('<ContactForm problemGroup="%s"}>', () => {
   it('has an option to make the request urgent', () => {
     const problemGroup = 'technical';
     const { getByText, getByRole } = render(
-      <ContactForm {...{ problemGroup, problem }} />,
+      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
     );
     const urgencyCheckbox = getByRole('checkbox', {
       name: /urgent request/i,
diff --git a/src/components/contact-form/ContactForm.tsx b/src/components/contact-form/ContactForm.tsx
index c169789..808aa2c 100644
--- a/src/components/contact-form/ContactForm.tsx
+++ b/src/components/contact-form/ContactForm.tsx
@@ -9,10 +9,12 @@ import Input from '../input/Input';
 import Modal from '../modal/Modal';
 
 export interface ContactFormProps {
+  formAction: string;
   problemGroup: string;
   problem: string;
 }
 export const ContactForm: React.FC<ContactFormProps> = ({
+  formAction,
   problemGroup,
   problem,
 }: ContactFormProps) => {
@@ -31,54 +33,42 @@ export const ContactForm: React.FC<ContactFormProps> = ({
     setUrgentIntent(event.target.checked);
   };
 
-  const submit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    sendRequest();
-  };
-
-  const sendRequest = (urgent = false) => {
-    const formData = { ...state, ...{ urgent: urgent ? 'yes' : 'no' } };
-
-    Object.fromEntries(
-      Object.entries(formData).map(([name, value]) => [
-        `SupportForm[${name}]`,
-        value,
-      ]),
-    );
-    setModalContent(JSON.stringify(formData));
-  };
-
   // For use in the CSSTransition, see
   // https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879
   const submitRef = React.useRef<any>(null);
 
   return (
-    <form onSubmit={submit} name="HelpfulContactForm" className={`${styles.ContactForm} cosmosForm`} aria-label={t("Contact form")}>
+    <form
+      action={formAction}
+      name="HelpfulContactForm"
+      className={`${styles.ContactForm} cosmosForm`}
+      aria-label={t("Contact form")}
+    >
       <Fieldset legend={t('contact.details')}>
         <Input
           label={t('contact.name')}
           id="name"
-          name="name"
+          name="HelpfulContactForm[name]"
           required
           onChange={changeHandler}
         />
         <Input
           label={t('contact.phone')}
           id="phone"
-          name="phone"
+          name="HelpfulContactForm[phone]"
           onChange={changeHandler}
         />
         <Input
           label={t('contact.identification')}
           id="identification"
-          name="identification"
+          name="HelpfulContactForm[identification]"
           onChange={changeHandler}
           required
         />
         <Input
           label={t('contact.email')}
           id="email"
-          name="email"
+          name="HelpfulContactForm[email]"
           onChange={changeHandler}
           required
         />
@@ -87,7 +77,7 @@ export const ContactForm: React.FC<ContactFormProps> = ({
         <Input
           label={t('Message')}
           id="message"
-          name="message"
+          name="HelpfulContactForm[message]"
           onChange={changeHandler}
           type="textarea"
           required
@@ -119,15 +109,17 @@ export const ContactForm: React.FC<ContactFormProps> = ({
             }}
           >
             <div ref={submitRef}>
+              <input
+                name="HelpfulContactForm[urgency]"
+                value={urgentIntent ? 'urgent' : 'normal'}
+                type="hidden"
+              />
               {urgentIntent ? (
-                <UrgentRequest sendUrgent={() => sendRequest(true)} />
+                <UrgentRequest/>
               ) : (
                 <button
                   className="good"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    sendRequest();
-                  }}
+                  type="submit"
                 >
                   {t('submit')}
                 </button>
diff --git a/src/components/urgent-request/UrgentRequest.test.tsx b/src/components/urgent-request/UrgentRequest.test.tsx
index 456f4aa..bc181e9 100644
--- a/src/components/urgent-request/UrgentRequest.test.tsx
+++ b/src/components/urgent-request/UrgentRequest.test.tsx
@@ -8,9 +8,7 @@ const mockSendUrgent = jest.fn();
 describe('<UrgentRequest>', () => {
   it('renders the option to make a contact request urgent', () => {
     const { getByRole } = render(
-      <UrgentRequest
-        sendUrgent={mockSendUrgent}
-      />,
+      <UrgentRequest/>,
     );
     const urgentFieldset = getByRole('group');
     const urgentInput = getByRole('textbox');
@@ -36,6 +34,7 @@ describe('<UrgentRequest>', () => {
     expect(urgentSubmit).toBeEnabled();
 
     // Can submit now..
+    urgentSubmit.onsubmit = mockSendUrgent;
     userEvent.click(urgentSubmit);
     // Triggers a message sent up the hierarchy..
     expect(mockSendUrgent).toBeCalled();
diff --git a/src/components/urgent-request/UrgentRequest.tsx b/src/components/urgent-request/UrgentRequest.tsx
index aca8588..cab86ce 100644
--- a/src/components/urgent-request/UrgentRequest.tsx
+++ b/src/components/urgent-request/UrgentRequest.tsx
@@ -3,13 +3,7 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './UrgentRequest.module.scss';
 
-export interface UrgentRequestProps {
-  sendUrgent: CallableFunction;
-}
-
-export const UrgentRequest: React.FC<UrgentRequestProps> = ({
-  sendUrgent,
-}: UrgentRequestProps) => {
+export const UrgentRequest: React.FC = () => {
   const [urgent, setUrgent] = useState<boolean>(false);
   const [urgentText, setUrgentText] = useState<string>('');
   const { t } = useTranslation();
@@ -36,10 +30,7 @@ export const UrgentRequest: React.FC<UrgentRequestProps> = ({
       <button
         disabled={!urgent}
         className="bad"
-        onClick={(event) => {
-          event?.preventDefault();
-          sendUrgent();
-        }}
+        type="submit"
       >
         {t('urgency.submit')}
       </button>
diff --git a/src/config.yml b/src/config.yml
index f4a2403..079e5d4 100644
--- a/src/config.yml
+++ b/src/config.yml
@@ -1,5 +1,7 @@
 # This determines where to mount the "app" in the DOM.
 mountingElementId: 'helpful-contact-form'
+formAction: 'https://service.greenhost.net/site/helpfulContact'
+#formAction: 'http://cosmos2.local/site/helpfulContact'
 urgentRequestFee: 420
 localisations:
   en:
-- 
GitLab


From 3831bba4b59f26a0e88ec712c5c9db0ba038416f Mon Sep 17 00:00:00 2001
From: Arie Peterson <arie@greenhost.nl>
Date: Thu, 27 May 2021 14:40:36 +0200
Subject: [PATCH 2/2] Fix tests and dev environment

---
 public/index.html                             | 28 +-------
 .../contact-form/ContactForm.test.tsx         | 11 ----
 src/components/contact-form/ContactForm.tsx   | 65 ++++++++-----------
 .../urgent-request/UrgentRequest.test.tsx     |  9 +--
 .../urgent-request/UrgentRequest.tsx          | 11 +++-
 webpack.config.js                             | 16 ++++-
 6 files changed, 58 insertions(+), 82 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7419aad..0032925 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/style-copied-from-website.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Web site created using create-snowpack-app" />
-    <title>Snowpack App</title>
+    <title>Helpful contact form | Development version</title>
   </head>
   <body>
     <div style="border: 2pt solid red; font-size: 200%; padding: 5pt;">Warning: this is a development version of
@@ -14,28 +14,6 @@
       for actual support.</div>
     <div lang="en" id="helpful-contact-form" style="width: 40rem; margin:10rem auto 0 auto"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/dist/index.js"></script>
-    <script>
-      if ('%MODE%' === 'development') {
-        // we wrap this in a function to prevent the variables from leaking out
-        (function () {
-          console.log('[dev] injecting greenhost stylesheet..')
-          var greenhostCss = document.createElement('link');
-          greenhostCss.setAttribute('rel', 'stylesheet');
-          greenhostCss.setAttribute('href', '/style-copied-from-website.css');
-          document.head.appendChild(greenhostCss);
-        }())
-      }
-    </script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/bundle.js"></script>
   </body>
 </html>
diff --git a/src/components/contact-form/ContactForm.test.tsx b/src/components/contact-form/ContactForm.test.tsx
index 30c28e7..fc41797 100644
--- a/src/components/contact-form/ContactForm.test.tsx
+++ b/src/components/contact-form/ContactForm.test.tsx
@@ -94,17 +94,6 @@ describe('<ContactForm problemGroup="%s"}>', () => {
     expect(modal).not.toBeInTheDocument();
   });
 
-  it('can be submitted by a form submit event', ()=>{
-    const problemGroup = 'technical';
-    const { getByRole } = render(
-      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
-    );
-    const form = getByRole("form", {name:"Contact form"});
-    fireEvent.submit(form);
-    const modal = getByRole('dialog', { name: /thank you/i });
-    expect(modal).toBeInTheDocument();
-  });
-
   it('has an option to make the request urgent', () => {
     const problemGroup = 'technical';
     const { getByText, getByRole } = render(
diff --git a/src/components/contact-form/ContactForm.tsx b/src/components/contact-form/ContactForm.tsx
index 808aa2c..b0b94d5 100644
--- a/src/components/contact-form/ContactForm.tsx
+++ b/src/components/contact-form/ContactForm.tsx
@@ -1,7 +1,6 @@
-import React, { ChangeEvent, FormEvent, useState } from 'react';
+import React, { ChangeEvent, MouseEventHandler, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import UrgentRequest from '../urgent-request/UrgentRequest';
-import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import styles from './ContactForm.module.scss';
 import panelTransition from '../../styles/transitions/panel.module.scss';
 import Fieldset from '../fieldset/Fieldset';
@@ -33,9 +32,14 @@ export const ContactForm: React.FC<ContactFormProps> = ({
     setUrgentIntent(event.target.checked);
   };
 
-  // For use in the CSSTransition, see
-  // https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879
-  const submitRef = React.useRef<any>(null);
+  const submit: MouseEventHandler<HTMLButtonElement> = (event) => {
+    if (process.env.NODE_ENV !== 'production') {
+      event.preventDefault();
+      console.log('Not submitting if not in production mode.');
+      const formData = { ...state, ...{ urgent: urgentIntent ? 'yes' : 'no' } };
+      setModalContent('form contents: ' + JSON.stringify(formData));
+    }
+  };
 
   return (
     <form
@@ -95,38 +99,25 @@ export const ContactForm: React.FC<ContactFormProps> = ({
         </div>
       )}
       <div className="field">
-        <SwitchTransition>
-          <CSSTransition
-            key={urgentIntent ? 'urgent' : 'normal'}
-            in={urgentIntent}
-            classNames={{ ...panelTransition }}
-            nodeRef={submitRef}
-            unmountOnExit={true}
-            mountOnEnter={true}
-            addEndListener={(done: () => void) => {
-              // use the css transitionend event to mark the finish of a transition
-              submitRef.current?.addEventListener('transitionend', done, false);
-            }}
-          >
-            <div ref={submitRef}>
-              <input
-                name="HelpfulContactForm[urgency]"
-                value={urgentIntent ? 'urgent' : 'normal'}
-                type="hidden"
-              />
-              {urgentIntent ? (
-                <UrgentRequest/>
-              ) : (
-                <button
-                  className="good"
-                  type="submit"
-                >
-                  {t('submit')}
-                </button>
-              )}
-            </div>
-          </CSSTransition>
-        </SwitchTransition>
+        <div>
+          <input
+            name="HelpfulContactForm[urgency]"
+            value={urgentIntent ? 'urgent' : 'normal'}
+            type="hidden"
+          />
+          {urgentIntent && (
+            <UrgentRequest submit={submit}/>
+          )}
+          {!urgentIntent && (
+            <button
+              className="good"
+              type="submit"
+              onClick={submit}
+            >
+              {t('submit')}
+            </button>
+          )}
+        </div>
       </div>
       {modalContent && (
         <Modal
diff --git a/src/components/urgent-request/UrgentRequest.test.tsx b/src/components/urgent-request/UrgentRequest.test.tsx
index bc181e9..4dc8f3c 100644
--- a/src/components/urgent-request/UrgentRequest.test.tsx
+++ b/src/components/urgent-request/UrgentRequest.test.tsx
@@ -3,12 +3,14 @@ import { render } from '@testing-library/react';
 import UrgentRequest from './UrgentRequest';
 import userEvent from '@testing-library/user-event';
 
-const mockSendUrgent = jest.fn();
+const mockSubmit: React.MouseEventHandler<HTMLButtonElement> = jest.fn().mockImplementation((e) => e.preventDefault());
 
 describe('<UrgentRequest>', () => {
   it('renders the option to make a contact request urgent', () => {
     const { getByRole } = render(
-      <UrgentRequest/>,
+      <UrgentRequest
+        submit={mockSubmit}
+      />,
     );
     const urgentFieldset = getByRole('group');
     const urgentInput = getByRole('textbox');
@@ -34,9 +36,8 @@ describe('<UrgentRequest>', () => {
     expect(urgentSubmit).toBeEnabled();
 
     // Can submit now..
-    urgentSubmit.onsubmit = mockSendUrgent;
     userEvent.click(urgentSubmit);
     // Triggers a message sent up the hierarchy..
-    expect(mockSendUrgent).toBeCalled();
+    expect(mockSubmit).toBeCalled();
   });
 });
diff --git a/src/components/urgent-request/UrgentRequest.tsx b/src/components/urgent-request/UrgentRequest.tsx
index cab86ce..247b378 100644
--- a/src/components/urgent-request/UrgentRequest.tsx
+++ b/src/components/urgent-request/UrgentRequest.tsx
@@ -1,9 +1,15 @@
 import Markdown from 'markdown-to-jsx';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, MouseEventHandler, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './UrgentRequest.module.scss';
 
-export const UrgentRequest: React.FC = () => {
+export interface UrgentRequestProps {
+  submit: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const UrgentRequest: React.FC<UrgentRequestProps> = ({
+  submit,
+}: UrgentRequestProps) => {
   const [urgent, setUrgent] = useState<boolean>(false);
   const [urgentText, setUrgentText] = useState<string>('');
   const { t } = useTranslation();
@@ -31,6 +37,7 @@ export const UrgentRequest: React.FC = () => {
         disabled={!urgent}
         className="bad"
         type="submit"
+        onClick={submit}
       >
         {t('urgency.submit')}
       </button>
diff --git a/webpack.config.js b/webpack.config.js
index 9ec38ee..0d503d2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,15 @@ const CopyPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 
+staticFiles = [
+  { from: "public/style-copied-from-website.css" },
+];
+if (process.env.NODE_ENV === 'development') {
+  staticFiles.append(
+    { from: "public/index.html" }
+  );
+}
+
 module.exports = {
   entry: './src/index.tsx',
   plugins: [
@@ -11,14 +20,15 @@ module.exports = {
       ignoreOrder: false, // Enable to remove warnings about conflicting order
     }),
     new CopyPlugin({
-      patterns: [
-        { from: "public/style-copied-from-website.css" },
-      ],
+      patterns: staticFiles,
       options: {
         concurrency: 100,
       },
     }),
   ],
+  devServer: {
+    contentBase: path.join(__dirname, 'public'),
+  },
   module: {
     rules: [
       {
-- 
GitLab