Merge branch 'feat/update-newsletter-form' into staging

wri · Sep 9, 2024 · 6b5cfc1 · 6b5cfc1
2 parents c5b2e81 + ce9438c
commit 6b5cfc1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/components/users/newsletter.js b/components/users/newsletter.js
@@ -29,6 +29,7 @@ function fetchCountries(lang) {
 const NewsletterForm = ({ language }) => {
   const intl = useIntl();
   const formRef = useRef(null);
+  const [loadTime, _setLoadTime] = useState(Date.now());
   const [countryOptions, setCountryOptions] = useState([]);
   const [ipAddress, setIPAddress] = useState('');
   useEffect(() => {
@@ -65,6 +66,7 @@ const NewsletterForm = ({ language }) => {
   }, []);
 
   const handleSubmit = () => {
+    formRef.current['ts-submit'].value = Date.now();
     formRef.current.submit();
     return Promise.resolve();
   }
@@ -75,6 +77,7 @@ const NewsletterForm = ({ language }) => {
     email: '',
     organization: '',
     country: '',
+    address: ''
   }
 
   return (
@@ -88,6 +91,8 @@ const NewsletterForm = ({ language }) => {
             <input type="hidden" name="interests" value="Forests" />
             <input type="hidden" name="preferred_language" value={language} />
             <input type="hidden" name="ip_addr" value={ipAddress} />
+            <input type="hidden" name="ts-load" value={loadTime} />
+            <input type="hidden" name="ts-submit" value="" />
             <fieldset className="c-field-container">
               <Field
                 validations={['required']}
@@ -111,6 +116,17 @@ const NewsletterForm = ({ language }) => {
               >
                 {Input}
               </Field>
+              <Field
+                className="-fluid address-field"
+                properties={{
+                  name: 'address',
+                  tabIndex: -1,
+                  autoComplete: 'off',
+                  label: intl.formatMessage({ id: 'Address' })
+                }}
+              >
+                {Input}
+              </Field>
               <Field
                 validations={['required', 'email']}
                 className="-fluid"

diff --git a/css/pages/newsletters.scss b/css/pages/newsletters.scss
@@ -81,3 +81,10 @@
     white-space: nowrap;
   }
 }
+
+form {
+  .address-field {
+    position: absolute;
+    left: -8000px;
+  }
+}
diff --git a/pages/newsletter.js b/pages/newsletter.js
@@ -38,11 +38,11 @@ const Newsletter = ({ url, newsletters, language }) => {
               {intl.formatMessage({ id: 'newsletter.showing_results', defaultMessage: 'Showing {count} previous newsletters' }, { count: newsletters.length })}
             </h2>
 
-            {/* <Link href="/newsletter/sign-up">
+            <Link href="/newsletter/sign-up">
               <a className="card-link c-button -secondary">
                 {intl.formatMessage({ id: 'newsletter.subscribe_to', defaultMessage: 'Subscribe to our newsletter' })}
               </a>
-            </Link> */}
+            </Link>
           </div>
 
           <div className="newsletter-grid">
@@ -67,10 +67,10 @@ const Newsletter = ({ url, newsletters, language }) => {
             ))}
           </div>
 
-          {/* <div className="newsletter-cta">
+          <div className="newsletter-cta">
             {intl.formatMessage({ id: 'newsletter.want_to_receive', defaultMessage: 'Want to receive the latest updates from the Open Timber Portal?' })}
             &nbsp;<Link href="/newsletter/sign-up"><a>{intl.formatMessage({ id: 'newsletter.subscribe_to', defaultMessage: 'Subscribe to our newsletter' })}</a></Link>.
-          </div> */}
+          </div>
         </div>
       </div>
     </Layout>

diff --git a/pages/newsletter/sign-up.js b/pages/newsletter/sign-up.js
@@ -32,9 +32,6 @@ const NewsletterSignUp = ({ url }) => {
 NewsletterSignUp.propTypes = {
   url: PropTypes.shape({}).isRequired,
 };
-NewsletterSignUp.getInitialProps = ({ url }) => {
-  return { redirectTo: '/newsletter', redirectPermanent: false };
-  // return { url };
-};
+NewsletterSignUp.getInitialProps = ({ url }) => ({ url });
 
 export default NewsletterSignUp;