Updated CTA form to use Jotform as per website (#607)

* Updated CTA form to use Jotform as per website
Relates to SSWConsulting/SSW.Rules#1262

* fixed linting

* fixing merge conflicts

package.json

@@ -80,9 +80,10 @@
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.1",
+    "react-jotform": "^1.0.2",
     "react-lazy-youtube": "^1.0.1",
-    "react-modal": "^3.16.1",
     "react-pose": "^4.0.10",
+    "react-responsive-modal": "^6.4.2",
     "react-tooltip": "^5.26.3",
     "react-youtube": "^10.1.0",
     "rollup": "^4.12.0",

src/components/contact/contact.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ContactInfo from '../contact-info/contact-info';
-import ContactForm from '../contact-form/contact-form';
-import Modal from 'react-modal';
+import JotFormEmbed from '../jobform/jobFormEmbed.jsx';
 
-const Contact = ({ firstNameOrNickname, fullName, alumni }) => {
+const Contact = ({ firstNameOrNickname, alumni }) => {
   const [displayContactForm, setDisplayContactForm] = useState(false);
 
   const onContactButtonClick = () => {
@@ -17,16 +16,11 @@ const Contact = ({ firstNameOrNickname, fullName, alumni }) => {
         profileName={firstNameOrNickname}
         alumni={alumni}
       />
-      <Modal
-        isOpen={displayContactForm}
-        contentLabel="Contact Form"
-        className="modal"
-      >
-        <ContactForm
-          profileName={fullName}
-          onClose={() => setDisplayContactForm(false)}
-        />
-      </Modal>
+      <JotFormEmbed
+        jotFormId="233468468973070"
+        open={displayContactForm}
+        onClose={onContactButtonClick}
+      />
     </>
   );
 };

src/components/jobform/jobFormEmbed.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Jotform from 'react-jotform';
+import Popup from '../popup/popup';
+
+const JobFormEmbed = ({ jotFormId, open, onClose }) => {
+  if (!jotFormId) return <></>;
+
+  return (
+    <>
+      <Popup isVisible={open} showCloseIcon={true} onClose={onClose}>
+        <Jotform src={`https://form.jotform.com/${jotFormId}`}></Jotform>
+      </Popup>
+    </>
+  );
+};
+
+export default JobFormEmbed;
+
+JobFormEmbed.propTypes = {
+  jotFormId: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+};

src/components/popup/popup.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import Modal from 'react-responsive-modal';
+import PropTypes from 'prop-types';
+import * as styles from './popup.module.css';
+
+const Popup = ({ isVisible, onClose, showCloseIcon, className, children }) => {
+  return (
+    <div>
+      <Modal
+        open={isVisible}
+        onClose={onClose}
+        showCloseIcon={!!showCloseIcon}
+        classNames={{
+          closeButton: styles.closeButton,
+          modalAnimationIn: styles.formEnterModalAnimation,
+          modalAnimationOut: styles.formLeaveModalAnimation,
+          overlay: 'bg-black/50',
+          modal: classNames([
+            'sm:max-w-3xl sm:m-5 sm:p-5',
+            'w-full mx-0',
+            'shadow-none bg-black/0',
+            className,
+          ]),
+        }}
+        animationDuration={700}
+        center
+      >
+        {children}
+      </Modal>
+    </div>
+  );
+};
+
+export default Popup;
+
+Popup.propTypes = {
+  isVisible: PropTypes.bool,
+  showCloseIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

src/components/popup/popup.module.css

@@ -0,0 +1,50 @@
+@keyframes formEnterOverlayAnimation {
+    0% {
+        top: 0px;
+        margin-top: -100%;
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+        margin-top: -100%;
+    }
+}
+
+@keyframes formLeaveOverlayAnimation {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes formEnterModalAnimation {
+    0% {
+        top: 0px;
+        margin-top: -100%;
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes formLeaveModalAnimation {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1);
+        margin-top: -100%;
+    }
+}
+
+.closeButton {
+    background-color: #fff;
+    border-radius: 15px;
+}

src/style.css

@@ -7,6 +7,10 @@
 
 @tailwind base;
 
+@layer components {
+  @import 'react-responsive-modal/styles.css';
+}
+
 .text-ssw-red {
   color: #cc4141;
 }

src/templates/person.js

@@ -203,7 +203,6 @@ const Person = ({ pageContext }) => {
             )}
             <Contact
               firstNameOrNickname={firstNameOrNickname}
-              fullName={fullName}
               alumni={!isActive}
             />
           </div>