Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI]: Open source Pricing form #6129

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[UI]: Open source Pricing form #6129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9606732
[UI] PRicing Form added
SAHU-01 Dec 23, 2024
504bd08
[UI] Pricing Form added
SAHU-01 Dec 23, 2024
bc19fc0
styling updated modal added
SAHU-01 Dec 27, 2024
0bf65b9
Products Page plan card data fixed
SAHU-01 Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 67 additions & 29 deletions src/components/PlanCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
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 PricingForm from "../PricingForm";

const PlanCard = ({ planData, isYearly }) => {
const [modalIsOpen, setModalIsOpen] = useState(false);

const openModal = () => setModalIsOpen(true);
const closeModal = () => setModalIsOpen(false);

const PlanCard = ({ planData , isYearly }) => {
if (!planData || !Array.isArray(planData) || planData.length === 0) {
return <div>No plan data available</div>;
}
Expand All @@ -14,18 +21,13 @@ const PlanCard = ({ planData , isYearly }) => {
<Container>
<Row $Hcenter>
{planData.map((x) => (
// <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
<Col key={x.tier}>
<div className={`${x.featured ? "featured" : ""} pricing-table`}>

{x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}

{x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
{x.tier === "Personal" && <div className="pricing-label">Free Forever</div>}
{x.tier === "Team Designer" && <div className="featured-label">Most Popular</div>}

{x.pricing_coming_soon && (
<div className="pricing_coming_soon">
{x.pricing_coming_soon}
</div>
<div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
)}

<h2>{x.tier}</h2>
Expand All @@ -35,50 +37,42 @@ const PlanCard = ({ planData , isYearly }) => {
{isYearly ? (
x.yearlyprice !== undefined ? (
<div className="price">
<span className="price-amount"><sup>$</sup>
{x.yearlyprice === 0
? "0"
: x.yearlyprice.toFixed(0)}
<span className="price-amount">
<sup>$</sup>
{x.yearlyprice === 0 ? "0" : x.yearlyprice.toFixed(0)}
</span>
<span className="currency">USD</span>
<span className="price-per">per user/year</span>
</div>
) : (
<div className="pricing_coming_soon">
{x.pricing_coming_soon}
</div>
<div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
)
) : (
x.monthlyprice !== undefined ? (
<div className="price">
<span className="price-amount"><sup>$</sup>
{x.monthlyprice === 0
? "0"
: x.monthlyprice.toFixed(0)}
<span className="price-amount">
<sup>$</sup>
{x.monthlyprice === 0 ? "0" : x.monthlyprice.toFixed(0)}
</span>
<span className="currency">USD</span>
<span className="price-per">per user/month</span>
</div>
) : (
<div className="pricing_coming_soon">
{x.pricing_coming_soon}
</div>
<div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
)
)}
</div>


<Button
// disabled={x.tier === "Team Operator"}
$primary
className={
x.button[0] === "Coming Soon"
? "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>
Expand All @@ -95,12 +89,56 @@ const PlanCard = ({ planData , isYearly }) => {
</div>
))}
</div>

</div>
</Col>
))}
</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"
}
}}>
<PricingForm />
</div>
</Modal>
</PlanCardWrapper>
);
};
Expand Down
122 changes: 122 additions & 0 deletions src/components/PricingForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Formik, Form, Field } from "formik";
import PricingFormWrapper from "./pricingForm.style";

const PricingForm = () => {
const [memberFormOne, setMemberFormOne] = useState({});
const [submit, setSubmit] = useState(false);

useEffect(() => {
if (submit) {
axios
.post("https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0", {
memberFormOne,
})
.catch((err) => {
console.error("Error submitting the form:", err);
});
}
}, [submit, memberFormOne]);

return (
<PricingFormWrapper>
<Formik
initialValues={{
firstName: "",
lastName: "",
workEmail: "",
companyName: "",
companySize: "",
summary: "",
}}
onSubmit={(values) => {
setMemberFormOne(values);
setSubmit(true);
}}
>
{() => (
<Form className="pricing-form">
{/* Scrollable Form Fields */}
<div className="form-content">
{/* All form fields here */}
<div className="form-field">
<label htmlFor="firstName">First Name</label>
<Field
id="firstName"
name="firstName"
type="text"
placeholder="Your First Name"
required
/>
</div>
<div className="form-field">
<label htmlFor="lastName">Last Name</label>
<Field
id="lastName"
name="lastName"
type="text"
placeholder="Your Last Name"
required
/>
</div>

<div className="form-field">
<label htmlFor="workEmail">Work Email</label>
<Field
id="workEmail"
name="workEmail"
type="email"
placeholder="Your Work Email"
required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"
/>
</div>

<div className="form-field">
<label htmlFor="companyName">Company Name</label>
<Field
id="companyName"
name="companyName"
type="text"
placeholder="Your Company Name"
required
/>
</div>

<div className="form-field">
<label htmlFor="companySize">Company Size / Number of Employees</label>
<Field
id="companySize"
name="companySize"
type="number"
placeholder="Number of Employees"
required
min="1"
/>
</div>
<div className="form-field">
<label htmlFor="summary">Summary</label>
<Field
id="summary"
name="summary"
as="textarea"
placeholder="Briefly describe your inquiry or needs"
required
/>
</div>
</div>

{/* Submit Button */}
<div className="form-footer">
<button type="submit" className="submit-button">Submit</button>
</div>
</Form>
)}
</Formik>
</PricingFormWrapper>
);
};

export default PricingForm;

Loading
Loading