filedownload

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "formik": "^2.2.9",
         "framer-motion": "^6.3.4",
         "gsap": "^3.11.4",
+        "js-file-download": "^0.4.12",
         "mailgun.js": "^8.0.6",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
@@ -11226,6 +11227,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -26152,6 +26158,11 @@
         }
       }
     },
+    "js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

frontend/package.json

@@ -20,6 +20,7 @@
     "formik": "^2.2.9",
     "framer-motion": "^6.3.4",
     "gsap": "^3.11.4",
+    "js-file-download": "^0.4.12",
     "mailgun.js": "^8.0.6",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",

frontend/src/components/WorkClientForm.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import CustomLink from './root/CustomLink';
+import * as Yup from 'yup';
+import { Formik, Form, ErrorMessage } from 'formik';
+import { useState, useRef } from 'react';
+
+
+const WorkClientForm = ({ data, download, onValidated, message, status }) => {
+  const container = useRef();
+  const [suc, setSuc] = useState(false);
+  const [form, setForm] = useState({
+    name: '',
+    surname: '',
+    email: '',
+  });
+
+  const validationSchema = Yup.object({
+    name: Yup.string()
+      .min(2, 'First name too short')
+      .max(50, 'First name too long')
+      .required('First Name is Required'),
+    email: Yup.string().email('Invalid email format').required('Email is Required'),
+    surname: Yup.string()
+      .min(2, 'Last name too short')
+      .max(50, 'Last name too long')
+      .required('Last Name is Required'),
+  });
+
+  return (
+    <div ref={container} className="max-w-[600px] mx-[16px] md:mx-auto md:mt-[-320px] p-[24px] flex flex-col gap-[24px] z-20 bg-white rounded-[16px] shadow-[0_3px_10px_rgb(0,0,0,0.2)] md:shadow-none">
+      <div className="flex flex-col gap-[8px]">
+        <h6 className="n-h3-heading text-dark-gray font-bold">{data.title}</h6>
+        <p className="n-paragraph">{data.paragraph}</p>
+        <Formik
+          initialValues={form}
+          validationSchema={validationSchema}
+          onSubmit={async values => {
+            setForm({
+              ...form,
+              name: values.name,
+              surname: values.surname,
+              email: values.email,
+            });
+            onValidated({
+              FNAME: values.name,
+              LNAME: values.surname,
+              EMAIL: values.email,
+            });
+
+          }}
+        >
+          {props => (
+            <Form onSubmit={props.handleSubmit}>
+              <div className=" sm:rounded-md">
+                <div className="py-2 sm:py-6">
+                  <div className="">
+                    <div className="col-span-1 sm:col-span-1">
+                      <div className="py-1">
+                        <label
+                          htmlFor="name"
+                          className="block text-sm font-medium text-gray-700 dark:text-gray-400"
+                        >
+                          First name
+                        </label>
+                        <input
+                          type="text"
+                          name="name"
+                          id="name"
+                          onChange={props.handleChange}
+                          value={props.values.name}
+                          autoComplete="given-name"
+                          className="mt-1 focus:ring-dg-primary-600 focus:border-dg-primary-900 dark:bg-dg-primary-1500 dark:text-white block w-full shadow-sm sm:text-sm border-dg-primary-600 rounded-md transition duration-200"
+                        />
+                        <div className="h-4">
+                          <ErrorMessage
+                            name="name"
+                            component="div"
+                            className="text-sm text-right text-red-600"
+                          />
+                        </div>
+                      </div>
+                      <div className="py-1">
+                        <label
+                          htmlFor="surname"
+                          className="block text-sm font-medium text-gray-700 dark:text-gray-400"
+                        >
+                          Last name
+                        </label>
+                        <input
+                          type="text"
+                          name="surname"
+                          id="surname"
+                          onChange={props.handleChange}
+                          value={props.values.surname}
+                          autoComplete="family-name"
+                          className="mt-1 focus:ring-dg-primary-900 focus:border-dg-primary-900 dark:bg-dg-primary-1500 dark:text-white block w-full shadow-sm sm:text-sm border-dg-primary-600 rounded-md transition duration-200"
+                        />
+                        <div className="h-4">
+                          <ErrorMessage
+                            name="surname"
+                            component="div"
+                            className="text-sm text-right text-red-600"
+                          />
+                        </div>
+                      </div>
+                      <div className="py-1">
+                        <label
+                          htmlFor="email"
+                          className="block text-sm font-medium text-gray-700 dark:text-gray-400"
+                        >
+                          Email
+                        </label>
+                        <input
+                          type="email"
+                          name="email"
+                          id="email"
+                          onChange={props.handleChange}
+                          value={props.values.email}
+                          autoComplete="email"
+                          className="mt-1 focus:ring-dg-primary-900 focus:border-dg-primary-900 dark:bg-dg-primary-1500 dark:text-white dark:autofill:text-white dark:autofill:bg-dg-primary-1500 block w-full shadow-sm sm:text-sm border-dg-primary-600 rounded-md transition duration-200"
+                        />
+                        <div className="h-4">
+                          <ErrorMessage
+                            name="email"
+                            component="div"
+                            className="text-sm text-right text-red-600"
+                          />
+                        </div>
+                      </div>
+
+                      <div className=" py-3 text-right">
+                        <button type="submit">
+                          <CustomLink
+                            href={download.downloadFilePath}
+                            downloadFile={download.downloadFileName}
+                            context={'Company Overview'}
+                            submit
+                          >
+                            Subscribe and Download
+                          </CustomLink>
+                        </button>
+                        <div>{message}</div>
+                        <div>{status}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  );
+};
+
+export default WorkClientForm;

frontend/src/components/root/CustomLink.jsx

@@ -5,17 +5,15 @@ const CustomLink = ({href, downloadFile, bg, txt, children}) => {
 
 
   return (
-    // <a href={href} {...(downloadFile && { download="My_File.pdf" })} (downloadFile  download="My_File.pdf")>
-    //     {context}
-    // </a>
-    <Link {...{
-        className: 'btn-primary w-fit items-center n-paragraph-title text-white rounded-[16px]' ,
-        to: href,
-        target: '_blank',
-        ...(downloadFile && {download: downloadFile}),
-      }}>
-        {children} 
-    </Link>
+    <div className='btn-primary w-fit items-center n-paragraph-title text-white rounded-[16px]'></div>
+    // <Link {...{
+    //     className: 'btn-primary w-fit items-center n-paragraph-title text-white rounded-[16px]' ,
+    //     to: href,
+    //     target: '_blank',
+    //     ...(downloadFile && {download: downloadFile}),
+    //   }}>
+    //     {children} 
+    // </Link>
   )
 }
 

frontend/src/pages/WorkWithUs.jsx

@@ -1,4 +1,5 @@
 import React, { Children, Fragment, useEffect } from 'react';
+import fileDownload from 'js-file-download';
 import CustomLink from '../components/root/CustomLink';
 import ActionCard from '../components/shared/ActionCard';
 
@@ -14,8 +15,14 @@ import '../App.css';
 import useAnalytics from './../hooks/useAnalytics';
 import { strapiApiBuilder } from './../utils/strapiApiBuilder';
 import ReactHelmet from './../components/shared/ReactHelmet';
+import WorkClientForm from './../components/WorkClientForm';
+
+import MailchimpSubscribe from 'react-mailchimp-subscribe';
+import { useState } from 'react';
 
 const api_url = process.env.REACT_APP_API_URL;
+const mailchimp_url =
+  'https://dilig.us18.list-manage.com/subscribe/post?u=4bd507e0bc2f58fc19f284648&id=09da427d96&f_id=00b927e7f0';
 
 const download = {
   downloadFilePath: `${process.env.PUBLIC_URL}/DiligentCompanyOverview.pdf`,
@@ -44,7 +51,6 @@ const strapiPopulate = [
   'SEO.metaSocial.image',
 ];
 
-
 const NumberIcon = ({ number }) => {
   return (
     <div className="bg-baby-blue rounded-[6px] h-[48px] w-[48px] flex justify-center items-center text-center font-semibold text-dg-primary-900 text-n-h3-heading-mobile md:n-h3-heading">
@@ -54,19 +60,41 @@ const NumberIcon = ({ number }) => {
 };
 
 const WorkWithUs = () => {
+  const [formSuccess, setFormSuccess] = useState(false);
 
   const strapi = strapiApiBuilder('work-with-us-page', strapiPopulate);
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 
-
   useAnalytics('Work With Us');
 
-
   useEffect(() => {
     document.title = 'Work With Us';
   }, []);
 
+  function downloadFile(filePath) {
+    var link = document.createElement('a');
+    link.href = filePath;
+    link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
+    link.click();
+  }
+
+  const handleFileDownload = (url, filename) => {
+    fetch(url).then(response => {
+      return response.blob().then(blob => {
+        //console.log(blob);
+        //console.log(response.body);
+        console.log(blob.raw);
+        //fileDownload(response.headers.get('Content-Type'), blob);
+        //fileDownload(response.url, blob);
+      });
+    });
+  };
+
+  useEffect(() => {
+    formSuccess && downloadFile(download.downloadFilePath);
+  }, [formSuccess]);
+
   if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
@@ -79,7 +107,7 @@ const WorkWithUs = () => {
   } else {
     return (
       <PageLayout>
-        {(data && data.SEO) ? <ReactHelmet seo={data.SEO} /> : null}
+        {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
         <div className="mt-[48px] md:mt-[180px]">
           <Wrapper padding={' py-[48px]'}>
             {data ? (
@@ -240,36 +268,35 @@ const WorkWithUs = () => {
                   ></img>
                 </div>
               </div>
-              <div className="max-w-[600px] mx-[16px] md:mx-auto md:mt-[-320px] p-[24px] flex flex-col gap-[24px] z-20 bg-white rounded-[16px] shadow-[0_3px_10px_rgb(0,0,0,0.2)] md:shadow-none">
-                <div className="flex flex-col gap-[8px]">
-                  <h6 className="n-h3-heading text-dark-gray font-bold">
-                    {data.Download.title}
-                  </h6>
-                  <p className="n-paragraph">{data.Download.paragraph}</p>
-                </div>
-                <CustomLink
-                  href={download.downloadFilePath}
-                  downloadFile={download.downloadFileName}
-                  context={'Company Overview'}
-                >
-                  <p>{data.Download.button}</p>
-                </CustomLink>
-              </div>
+              <MailchimpSubscribe
+                url={mailchimp_url}
+                render={({ subscribe, status, message }) => (
+                  <>
+                    <WorkClientForm
+                      data={data.Download}
+                      download={download}
+                      status={status}
+                      message={message}
+                      onValidated={formData => subscribe(formData)}
+                    />
+                    {status === 'success' ? setFormSuccess(true) : setFormSuccess(false)}
+                  </>
+                )}
+              />
             </div>
           ) : null}
           {data ? (
-               <Wrapper padding={' py-90p'}>
-               <ActionCard
-                 title={data.WorkTogether.title}
-                 text={data.WorkTogether.paragraph}
-                 btn2={data.WorkTogether.ButtonSecondary}
-                 btn1={data.WorkTogether.ButtonPrimary}
-                 link2={'/portfolio'}
-                 link1={'/contact'}
-               />
-             </Wrapper>
-            ) : null}
-         
+            <Wrapper padding={' py-90p'}>
+              <ActionCard
+                title={data.WorkTogether.title}
+                text={data.WorkTogether.paragraph}
+                btn2={data.WorkTogether.ButtonSecondary}
+                btn1={data.WorkTogether.ButtonPrimary}
+                link2={'/portfolio'}
+                link1={'/contact'}
+              />
+            </Wrapper>
+          ) : null}
         </div>
       </PageLayout>
     );

frontend/yarn.lock

@@ -6002,6 +6002,11 @@
     "import-local" "^3.0.2"
     "jest-cli" "^27.4.7"
 
+"js-file-download@^0.4.12":
+  "integrity" "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+  "resolved" "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz"
+  "version" "0.4.12"
+
 "js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0":
   "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
   "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"