Merge pull request #670 from input-output-hk/filip/feat/embedded-news…

…letter-form

filip(feat): add hubspot newsletter form

src/components/HubspotForm/ContactHubspotForm.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback, useState } from 'react'
+import HubspotForm from './HubspotForm'
+
+const ContactHubspotForm = ({ formId, portalId, region }) => {
+  const [submitted, setSubmitted] = useState(false)
+
+  const onFormSubmitted = useCallback(() => {
+    setSubmitted(true)
+  }, [])
+
+  return submitted ? (
+    <div className="hs-form-submitted-message">
+      <h3 className="hs-form-submitted-title">Enquiry submitted</h3>
+      <p>We'll be in touch soon!</p>
+    </div>
+  ) : (
+    <HubspotForm
+      componentId="newsletterHSForm"
+      region={region}
+      portalId={portalId}
+      formId={formId}
+      onFormSubmitted={onFormSubmitted}
+    />
+  )
+}
+
+export default ContactHubspotForm

src/components/HubspotForm/HubspotForm.tsx

@@ -0,0 +1,56 @@
+//@ts-nocheck
+import React, { useEffect, useState, useCallback } from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+
+const HubspotForm = (props) => {
+  const { componentId, region, portalId, formId, onFormSubmitted } = props
+
+  const [formReady, setFormReady] = useState(false)
+
+  const onFormReady = useCallback(() => {
+    setFormReady(true)
+  }, [])
+
+  const addScript = () => {
+    let script
+    if (typeof window !== 'undefined') {
+      script = document.createElement('script')
+      script.src = 'https://js.hsforms.net/forms/embed/v2.js'
+      script.async = true
+
+      script.onload = () => {
+        if (window) {
+          if (window.hbspt) {
+            window.hbspt.forms.create({
+              region: region,
+              portalId: portalId,
+              formId: formId,
+              target: `#${componentId}`,
+              onFormSubmitted: onFormSubmitted,
+              onFormReady: onFormReady,
+            })
+          }
+        }
+      }
+    }
+
+    document.body.appendChild(script)
+  }
+
+  useEffect(() => {
+    addScript()
+  }, [])
+
+  return (
+    <>
+      <div id={componentId} />
+      {!formReady && (
+        <div className="hs-loading-container">
+          <div className="hs-loading-spinner" />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default HubspotForm

src/css/custom.css

@@ -382,6 +382,11 @@ body {
     grid-column: 1/4;
     margin-bottom: 3.5rem;
   }
+
+  .footer__col:last-child {
+    grid-column: 1/4;
+    margin-bottom: 3.5rem;
+  }
 }
 
 @media (max-width: 767px) {
@@ -1429,3 +1434,150 @@ pre {
 .wallet-download-copy:active {
   transform: scale(0.8);
 }
+
+/* HubspotForm styles  */
+.hs-form {
+  padding-left: 0;
+  border-radius: 8px;
+}
+.hs-form input,
+.hs-form select,
+.hs-form textarea {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid var(--ifm-body-text-color);
+  border-radius: 0.25rem;
+  background-color: transparent;
+}
+
+.hs-form input:focus,
+.hs-form select:focus,
+.hs-form textarea:focus {
+  outline: none;
+}
+.hs-error-msg {
+  color: #cc0000 !important;
+}
+.inputs-list {
+  list-style-type: none;
+}
+.inputs-list {
+  padding-left: 0 !important;
+  margin-bottom: 0 !important;
+}
+.hs-form label {
+  display: inline-block;
+  margin-bottom: 5px;
+  color: var(--ifm-body-text-color);
+  font-size: 0.813rem;
+}
+
+.input input[type='checkbox'],
+.input input[type='radio'] {
+  width: fit-content;
+
+  margin-bottom: 0;
+  margin-right: 10px;
+}
+
+.hs-form input[type='submit'] {
+  background-color: var(--ifm-link-color);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  padding: 12px;
+  font-size: 0.813rem;
+  transition: background-color 0.3s ease;
+}
+
+.no-list {
+  padding: 0;
+  margin: 0;
+}
+
+.footer-home .hs-form input[type='submit'],
+.footer-home .hs-form input[type='submit']:hover {
+  background-color: #6684cf;
+}
+
+.footer-home a {
+  color: #6684cf;
+}
+
+.footer-home .hs-form input,
+.footer-home .hs-form select,
+.footer-home .hs-form textarea,
+.footer-home .hs-form label {
+  color: #fff;
+  border-color: #fff !important;
+}
+
+.footer-home .hs-error-msg {
+  color: #cc0000 !important;
+}
+
+.footer-home .hs-form input[type='submit']:hover {
+  background-color: var(--ifm-link-color);
+}
+
+.hubspot-form .footer__title {
+  margin-bottom: 0 !important;
+}
+
+.hs_submit {
+  margin-top: 10px;
+}
+
+.hs-loading-container {
+  display: flex;
+  padding: 1rem 0;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.hs-loading-spinner {
+  border-width: 0.5rem;
+  border-style: solid;
+  border-color: var(--ifm-body-text-color) var(--ifm-body-text-color)
+    var(--ifm-body-text-color) var(--ifm-color-primary);
+  width: 3.625rem;
+  height: 3.625rem;
+  border-radius: 50%;
+  position: relative;
+  -webkit-animation: spin 2s infinite;
+  animation: spin 2s infinite;
+}
+
+.hs-form-submitted-message {
+  color: var(--ifm-body-text-color);
+}
+
+.footer-home .hs-form-submitted-message {
+  color: #fff;
+}
+
+.hs-form-submitted-title {
+  padding-top: 1.5rem;
+}
+
+@media (max-width: 1024px) {
+  .hs-form input,
+  .hs-form select,
+  .hs-form textarea,
+  .hs-form {
+    width: 250px;
+  }
+
+  .input input[type='checkbox'],
+  .input input[type='radio'] {
+    width: fit-content;
+
+    margin-bottom: 0;
+    margin-right: 10px;
+  }
+}

src/theme/Footer/Links/MultiColumn/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import LinkItem from '@theme/Footer/LinkItem'
 import FooterLogo from '../../Logo'
+import ContactHubspotForm from '@site/src/components/HubspotForm/ContactHubspotForm'
+
 function ColumnLinkItem({ item }) {
   return item.html ? (
     <li
@@ -36,6 +38,14 @@ export default function FooterLinksMultiColumn({ columns, logo }) {
       {columns.map((column, i) => (
         <Column key={i} column={column} />
       ))}
+      <div className="col footer__col hubspot-form">
+        <div className="footer__title">Subscribe to our newsletter</div>
+        <ContactHubspotForm
+          formId="fd033cc7-cfde-4dd1-ad5a-111418db5538"
+          portalId="8848114"
+          region="na1"
+        />
+      </div>
     </div>
   )
 }