Merge pull request #6185 from vishalvivekm/form

chore: update form
layer5io · Jan 20, 2025 · 0ad981b · 0ad981b
2 parents 0c315dd + 12f2c0f
commit 0ad981b
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 13 deletions.
diff --git a/src/components/CommonForm/commonForm.style.js b/src/components/CommonForm/commonForm.style.js
@@ -33,9 +33,10 @@ const CommonFormWrapper = styled.section`
 }
 
 .form-body{
-box-shadow: 0px 5px 5px 2px ${props => props.theme.primaryLightColor};
+box-shadow: 0px -2px 5px 2px ${props => props.theme.primaryLightColor};
 margin: 1rem;
 
+
 .form-title {
     padding: 1rem;
     text-align: center;
@@ -45,6 +46,7 @@ margin: 1rem;
 
 .form{
     font-size: .9rem;
+    width: fit-content !important;
     margin: 0 1rem 1rem;
     padding: 1rem;
     

diff --git a/src/components/CommonForm/index.js b/src/components/CommonForm/index.js
@@ -7,7 +7,7 @@ import { Container } from "../../reusecore/Layout";
 import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
 
 
-const CommonForm = ({ form, title, submit_title, submit_body }) => {
+const CommonForm = ({ form, title, submit_title, submit_body, submit_button_title }) => {
 
   const [stepNumber, setStepNumber] = useState(0);
   const [memberFormOne, setMemberFormOne] = useState({});
@@ -84,7 +84,11 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
       {
         stepNumber === 0 &&
   <div className="form-body">
-    <h2 className="form-title">{title}</h2>
+    { form !== "contact" && (
+      <>
+        <h2 className="form-title">{title}</h2>
+      </>
+    )}
     <Formik
       initialValues={{
         firstname: firstname,
@@ -186,6 +190,27 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
             <option className="options" value="Other">Other</option>
           </Field>
         </div>
+        {form === "contact" && (
+          <>
+            <label htmlFor="subject" className="form-name">
+              Subject <span className="required-sign">*</span>
+            </label>
+            <Field type="text" required className="text-field" id="subject" name="subject" />
+            <label htmlFor="message" className="form-name">
+            Message <span className="required-sign">*</span>
+            </label>
+            <Field as="textarea" required rows="8" type="text" className="text-field" id="message" name="message" />
+            {/* <label>
+              <Field
+                type="checkbox"
+                name="subscribed"
+                className="form-check"
+              />
+              <span>Subscribe to our newsletter</span>
+            </label> */}
+            <div>By providing my contact information, I authorize Layer5 to contact me with communications about Layer5's products and services.</div>
+          </>
+        )}
         {form == "open-source-pricing" && (
           <>
             <label htmlFor="projectname" className="form-name">
@@ -264,7 +289,7 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
         )}
 
 
-        <Button $secondary className="btn" title="Submit" />
+        <Button $secondary className="btn" title={submit_button_title || "Submit"} />
       </Form>
     </Formik>
   </div>
@@ -291,4 +316,4 @@ const ThankYou = forwardRef(({ title, description }, ref) => {
 });
 
 
-export default CommonForm;
+export default CommonForm;
diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
@@ -1,10 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "../../reusecore/Button";
 import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
+import Modal from "react-modal";
+import CommonForm from "../CommonForm";
 
 const PlanCard = ({ planData , isYearly }) => {
+
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const openModal = () => setModalIsOpen(true);
+  const closeModal = () => setModalIsOpen(false);
+
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
     return <div>No plan data available</div>;
   }
@@ -76,9 +84,9 @@ const PlanCard = ({ planData , isYearly }) => {
                       ? "price-button-disabled"
                       : "price-button-link"
                   }
-                  $url={x.button[1]}
+                  onClick={x.tier === "Enterprise" ? openModal : undefined}
                 >
-                  {x.button[0]}
+                  {x.tier === "Enterprise" ? "Contact Sales" : x.button[0]}
                 </Button>
 
                 <h6>{x.byline2}</h6>
@@ -101,6 +109,58 @@ const PlanCard = ({ planData , isYearly }) => {
           ))}
         </Row>
       </Container>
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        className="Modal"
+        overlayClassName="Overlay"
+        ariaHideApp={false}
+        contentLabel="Enterprise Inquiry Form"
+        style={{
+          content: {
+            maxHeight: "90vh",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          overlay: {
+            overflow: "auto",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          }
+        }}
+      >
+        <Button $secondary className="close-modal-btn" onClick={closeModal}>
+    X
+        </Button>
+        <h2 className="modal-heading">Contact sales</h2>
+        <div style={{
+          flex: 1,
+          overflow: "auto",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        }}>
+          <CommonForm
+            title="Contact sales"
+            form="contact"
+            account_desc=""
+            submit_title="Thanks for contacting us!"
+            submit_body="We'll get back to you as soon as we can."
+            submit_button_title="Contact sales"
+          />
+        </div>
+      </Modal>
     </PlanCardWrapper>
   );
 };

diff --git a/src/sections/Company/Contact/contactpage.style.js b/src/sections/Company/Contact/contactpage.style.js
@@ -44,7 +44,7 @@ const ContactPageWrapper = styled.section`
   .showForm {
     display: flex;
     flex-wrap: wrap;
-    height: 70rem;
+    height: auto;
     margin: auto -15px;
   }
 

diff --git a/src/sections/Company/Contact/index.js b/src/sections/Company/Contact/index.js
@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { Container, Row } from "../../../reusecore/Layout";
+import { Container, Row, Col } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
 import Jobs_Icon from "../../../assets/images/contact/job.svg";
 import Support_Icon from "../../../assets/images/contact/support.svg";
@@ -8,6 +8,7 @@ import Contact_Icon from "../../../assets/images/contact/contact.svg";
 import CardOutline from "../../../components/Card-Outline";
 import ContactPageWrapper from "./contactpage.style";
 import ContactForm from "../../../components/ContactForm";
+import CommonForm from "../../../components/CommonForm";
 
 const ContactPage = () => {
   const expandForm = useRef();
@@ -64,7 +65,17 @@ const ContactPage = () => {
           </Row>
           <div className="contact-form" ref={expandForm}>
             <Container>
-              <ContactForm />
+              {/* <ContactForm /> */}
+              <Col $lg={5} $md={6} $sm={12} style={{ padding: "0", marginLeft: "auto", marginRight: "auto" }}>
+                <CommonForm
+                  title="Contact us"
+                  form="contact"
+                  account_desc=""
+                  submit_title="Thanks for contacting us!"
+                  submit_body="We'll get back to you as soon as we can."
+                  submit_button_title="Contact us"
+                />
+              </Col>
             </Container>
           </div>
         </Row>
@@ -73,4 +84,4 @@ const ContactPage = () => {
   );
 };
 
-export default ContactPage;
+export default ContactPage;
diff --git a/src/sections/General/Faq/index.js b/src/sections/General/Faq/index.js
@@ -106,7 +106,7 @@ const Faq = (props) => {
         </Accordion>
         <div className="askus_section">
           <h2>Didn't find an answer to your question?</h2>
-          <ContactFormModal callout_text="Just Ask" form_header="Send Us An Email" />
+          <Button $secondary title="Just Ask" $url="https://layer5.io/company/contact" $external={ true } />
         </div>
       </Container>
     </FaqSectionWrapper>