more
This commit is contained in:
Kenneth Jannette
538
src/Components/Home/HomePageB.js
Normal file
538
src/Components/Home/HomePageB.js
Normal file
@@ -0,0 +1,538 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { collection, setDoc, doc } from "firebase/firestore";
|
||||
import { db, auth } from "../../firebase";
|
||||
import Button from "../../pageElements/Button";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import arrow from "../../Assets/Images/Arrow.png";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ConfirmModal from "../Modals/ConfirmModal";
|
||||
import { createUserWithEmailAndPassword } from "firebase/auth";
|
||||
import { stateDataValues } from "../../Constants/Fields/SignupFields";
|
||||
import "../../styles/homepage.scss";
|
||||
import LoadingSpinner from "../../pageElements/LoadingSpinner";
|
||||
|
||||
const HomePage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [showPromoModal, setShowPromoModal] = useState(false);
|
||||
const [isBusy, setIsBusy] = useState(false);
|
||||
const [notice, setNotice] = useState("");
|
||||
|
||||
const apiUrl =
|
||||
process.env.NODE_ENV === "development"
|
||||
? process.env.REACT_APP_API_DEV
|
||||
: process.env.REACT_APP_API_PROD;
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window.gtag !== "undefined") {
|
||||
window.gtag("event", "screen_view", {
|
||||
app_name: "novodraft",
|
||||
screen_name: "Home",
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
function clickedTryItButton() {
|
||||
if (typeof window.gtag !== "undefined") {
|
||||
window.gtag("event", "try_it_click", {
|
||||
app_name: "novodraft",
|
||||
screen_name: "Home",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function promoSignup() {
|
||||
if (typeof window.gtag !== "undefined") {
|
||||
window.gtag("event", "promo_sign_up", {
|
||||
send_to: "G-J6SQL5DF6V",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clickedExploreLink() {
|
||||
if (typeof window.gtag !== "undefined") {
|
||||
window.gtag("event", "explore_click", {
|
||||
app_name: "novodraft",
|
||||
screen_name: "Home",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function saveUserData(
|
||||
authId,
|
||||
dataValues,
|
||||
email,
|
||||
password,
|
||||
customerId,
|
||||
subscriptionCreated,
|
||||
subscriptionPeriodStart,
|
||||
subscriptionPeriodEnd,
|
||||
subscriptionId,
|
||||
isPromotionalMebership = true,
|
||||
docsAllowedPeMonth = 1
|
||||
) {
|
||||
if (!email || !password || !dataValues[0]) {
|
||||
return;
|
||||
}
|
||||
const appUserId = uuidv4();
|
||||
const firmId = uuidv4();
|
||||
const fbAuthUid = authId;
|
||||
const tpe = password;
|
||||
let plan = "promo plan";
|
||||
let docsAllowedPerMonth;
|
||||
|
||||
docsAllowedPerMonth = 1;
|
||||
subscriptionId = uuidv4();
|
||||
plan = plan;
|
||||
|
||||
const docsGenerated = 0;
|
||||
|
||||
const {
|
||||
firstName,
|
||||
lastName,
|
||||
firm,
|
||||
telephone,
|
||||
streetAddress,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
barNumber,
|
||||
practiceArea,
|
||||
} = dataValues[0];
|
||||
|
||||
const userState = stateDataValues.filter((value) => {
|
||||
if (value.name === state) return value;
|
||||
});
|
||||
|
||||
const tempData = {
|
||||
docsAllowedPerMonth,
|
||||
docsGenerated,
|
||||
appUserId,
|
||||
fbAuthUid,
|
||||
firmId,
|
||||
firstName,
|
||||
lastName,
|
||||
firm,
|
||||
telephone,
|
||||
streetAddress,
|
||||
city,
|
||||
state: userState,
|
||||
zipCode,
|
||||
barNumber,
|
||||
practiceArea,
|
||||
email,
|
||||
tpe: tpe,
|
||||
isPromotionalMebership,
|
||||
isPromotionalFirstLogin: true,
|
||||
customerId: customerId,
|
||||
subscriptionId: subscriptionId,
|
||||
subscriptionPlan: "flordia-spring-promo-plan",
|
||||
subscriptionCreated: subscriptionCreated,
|
||||
subscriptionPeriodStart: subscriptionPeriodStart,
|
||||
subscriptionPeriodEnd: subscriptionPeriodEnd,
|
||||
};
|
||||
|
||||
function scrubUndef(obj) {
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
if (obj[key] === undefined) {
|
||||
obj[key] = "---";
|
||||
}
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
const userData = scrubUndef(tempData);
|
||||
|
||||
try {
|
||||
const usersRef = collection(db, "users");
|
||||
const res = await setDoc(doc(usersRef, fbAuthUid), userData);
|
||||
promoSignup();
|
||||
return res;
|
||||
} catch (error) {
|
||||
console.log(`Error saving new user to db: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function getFocusData(code) {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/v1/get-focused-data/${code}`, {
|
||||
method: "GET",
|
||||
});
|
||||
const res = await response.json();
|
||||
|
||||
return res;
|
||||
} catch (err) {
|
||||
console.log("Error in get rqst:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleProcessPromoSubscription(code) {
|
||||
setIsBusy(true);
|
||||
setShowPromoModal(false);
|
||||
if (!code) {
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = await getFocusData(code);
|
||||
let email;
|
||||
let password;
|
||||
|
||||
if (userData === undefined) {
|
||||
return;
|
||||
} else {
|
||||
email = userData[0].email;
|
||||
password = userData[0].mspall;
|
||||
}
|
||||
|
||||
if (email && password) {
|
||||
handlePromoSignup(userData, email, password);
|
||||
} else {
|
||||
setIsBusy(false);
|
||||
setShowPromoModal(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePromoSignup(dataValues, email, password) {
|
||||
if (!email || !password) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const customerId = `${uuidv4()}-florida-spring-promo`;
|
||||
const today = new Date();
|
||||
const subscriptionCreated = today;
|
||||
const subscriptionPeriodStart = today;
|
||||
const subscriptionPeriodEnd = today;
|
||||
const subscriptionId = uuidv4();
|
||||
|
||||
const userCredential = await createUserWithEmailAndPassword(
|
||||
auth,
|
||||
email,
|
||||
password
|
||||
);
|
||||
|
||||
const user = userCredential.user;
|
||||
dataValues = { ...dataValues };
|
||||
const isPromotionalMebership = true;
|
||||
|
||||
const res = await saveUserData(
|
||||
user.uid,
|
||||
dataValues,
|
||||
email,
|
||||
password,
|
||||
customerId,
|
||||
subscriptionCreated,
|
||||
subscriptionPeriodStart,
|
||||
subscriptionPeriodEnd,
|
||||
subscriptionId,
|
||||
isPromotionalMebership
|
||||
);
|
||||
|
||||
setIsBusy(false);
|
||||
navigate("/dashboard");
|
||||
} catch (error) {
|
||||
console.log("Error handling request", error, error.message);
|
||||
setIsBusy(false);
|
||||
setNotice("Sorry, something went wrong. Please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
const handleTryItButton = (e) => {
|
||||
clickedTryItButton();
|
||||
setShowPromoModal(true);
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const handleCancelModal = () => {
|
||||
setShowPromoModal(!showPromoModal);
|
||||
navigate("/signup");
|
||||
};
|
||||
|
||||
const handleDemo = () => {
|
||||
const supReq = null;
|
||||
navigate("/requestpage/supReq");
|
||||
};
|
||||
|
||||
const homeContent = (
|
||||
<div className="homepage-container">
|
||||
<section
|
||||
className="section-1"
|
||||
style={{
|
||||
backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/ee5222a0-7480-43ba-0f14-0ea482f31300/public)`,
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="first-section-subcontainer">
|
||||
<div className="row upper-row-one">
|
||||
<div className="col-md-12 mobile-col-up">
|
||||
<div className="heading-one-container">
|
||||
<h1 className="heading-1">Novodraft: Legal AI</h1>
|
||||
<h1 className="heading-1-mobile">Novodraft</h1>
|
||||
<h1 className="heading-2-mobile">AI-Assisted Legal Drafting</h1>
|
||||
<h1 className="heading-2">
|
||||
Draft documents faster <i>and </i> smarter
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mobile-lower-header-1">
|
||||
<div className="mobile-lower-header-top">
|
||||
<div className="mobile-sw-deck">Discovery requests</div>
|
||||
<div className="mobile-sw-deck"> dramatically fast</div>
|
||||
<div className="mobile-sw-reptwo">
|
||||
<div className="ex-arca-two">Draft responses to</div>
|
||||
<div className="ex-arca-two">demands in minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mobile-lower-header-bottom">
|
||||
<div className="mobile-lower-header-bottom-up"></div>
|
||||
<div className="mobile-lower-header-bottom-down">
|
||||
<Button
|
||||
className="primary-button homepage-button"
|
||||
labelText="Try It For Free"
|
||||
onClick={handleTryItButton}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-block-1">
|
||||
Discovery requests dramatically fast – responses ready in
|
||||
minutes.
|
||||
</p>
|
||||
<p className="text-block-two">
|
||||
Reclaim hours every week. Spend more time growing your practice,
|
||||
or just get home in time for dinner.
|
||||
</p>
|
||||
<div className="try-it-button-box">
|
||||
<Button
|
||||
className="primary-button homepage-button"
|
||||
labelText="Try It For Free"
|
||||
onClick={handleTryItButton}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Section 2 */}
|
||||
<section className="section-2">
|
||||
<div className="home-row">
|
||||
<div className="home-col-50">
|
||||
<div className="heading-2-mobile-box">
|
||||
<h2 className="heading-2-mobile">
|
||||
Made by Attorneys, for Attorneys
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="pad-2">
|
||||
<img
|
||||
src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/5f0f6f11-bb56-4f03-b05e-189d4f1a5600/public"
|
||||
alt="image of a laptop computer"
|
||||
className="img-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home-col-50">
|
||||
<div className="pad-2">
|
||||
<h2 className="heading-2">Made by Attorneys, for Attorneys.</h2>
|
||||
<div className="text-block-2-box">
|
||||
<p className="text-block-2">
|
||||
Legal tech developed by people that understand what you need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="section-two-body">
|
||||
Novodraft understands the demands on your time. For example,
|
||||
that discovery request on your desk. With a few clicks, and
|
||||
Novodraft's AI assistant on the task, you can draft a
|
||||
ready-to-serve response in minutes. It's as easy as uploading a
|
||||
.pdf file.
|
||||
</p>
|
||||
<p className="section-two-body">
|
||||
Novodraft cuts through a mire of rote tasks, but does much more
|
||||
than automate.
|
||||
</p>
|
||||
<p className="section-two-body">
|
||||
Intellidraft AI technology powers persuasive arguments and
|
||||
boosts bland, boilerplate objections. Configurable for level of
|
||||
authoritative citation and for infering factual context from
|
||||
pleadings and briefs. Use it to augment your drafting as much or
|
||||
as little as you prefer.
|
||||
</p>
|
||||
<div
|
||||
className="home-link-box"
|
||||
onClick={() => clickedExploreLink()}
|
||||
>
|
||||
<div className="explore-link">
|
||||
Explore Novodraft
|
||||
<img src={arrow} className="img-1" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Section 3 */}
|
||||
<section className="section-3">
|
||||
<div className="section-three-header-box">
|
||||
<h2 className="section-three-header">
|
||||
AI-Powered Legal Drafting Technology{" "}
|
||||
</h2>
|
||||
<h2 className="section-three-header-mobile">
|
||||
Novo Drafting Technology
|
||||
</h2>
|
||||
<p className="section-three-subhead">
|
||||
Created by litigators to give you an edge.
|
||||
</p>
|
||||
</div>
|
||||
<div className="card-section-container">
|
||||
{/*********** CARD ONE *********** */}
|
||||
<div className="home-card">
|
||||
<div className="card-image-container">
|
||||
<img
|
||||
src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/5ff0ba9e-298f-4ee1-88d4-e19a44a00900/public"
|
||||
alt="ai hand"
|
||||
width="100%"
|
||||
className="card-image"
|
||||
/>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-upper-box">
|
||||
<div className="home-card-title">
|
||||
<h3 className="foo-card-title">Discovery Requests</h3>
|
||||
<div className="home-card-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-card-text-box">
|
||||
<p className="card-texts">
|
||||
Generate interrogatories and requests for
|
||||
production/admissions leveraging AI.
|
||||
</p>
|
||||
<p className="card-texts">
|
||||
Edit or add special language with tags. Concise yet
|
||||
comprehensive demands, done in minutes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*********** CARD TWO *********** */}
|
||||
<div className="home-card">
|
||||
<div className="card-image-container">
|
||||
<img
|
||||
src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/7a6dd50e-4d8f-4068-61b2-634dc5603f00/public"
|
||||
alt="scales image"
|
||||
width="100%"
|
||||
className="card-image"
|
||||
/>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-upper-box">
|
||||
<div className="home-card-title">
|
||||
<h3 className="foo-card-title">Discovery Responses</h3>
|
||||
<div className="home-card-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-card-text-box">
|
||||
<p className="card-texts">
|
||||
Use Novodraft AI to quickly draft responses including
|
||||
compelling arguments about what you withhold from disclosure.
|
||||
Finish in minutes with a downloadable .docx file.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*********** CARD THREE *********** */}
|
||||
<div className="home-card">
|
||||
<div className="card-image-container">
|
||||
<img
|
||||
src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/00667aa1-f847-430c-7a5e-d96abeed3300/public"
|
||||
alt=""
|
||||
className="card-image"
|
||||
/>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-upper-box">
|
||||
<div className="home-card-title">
|
||||
<h3 className="foo-card-title">Proactive Alerts</h3>
|
||||
<div className="home-card-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home-card-text-box">
|
||||
<p className="card-texts">
|
||||
Your dashboard displays important deadlines, alerts, and can
|
||||
be configured to auto-draft documents with reminders for tasks
|
||||
such as service or hearings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="section-5 py-5">
|
||||
<div
|
||||
className="home-test-container"
|
||||
style={{
|
||||
backgroundImage: `url(https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/209dcf14-c086-42b4-ca72-f058d9ad1b00/public)`,
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="bottom-header-box">
|
||||
<h4 className="heading-6">
|
||||
Questions about our services? <br></br>
|
||||
We're here to answer!
|
||||
</h4>
|
||||
<h4 className="heading-6-mobile">
|
||||
Questions about our products and services?
|
||||
</h4>
|
||||
<h4 className="heading-6-mobile">We're here to answer!</h4>
|
||||
</div>
|
||||
<h6 className="join-heading">
|
||||
Novodraft will revolutionize your practice.
|
||||
</h6>
|
||||
<h6 className="join-heading">
|
||||
Request a demo - let us show you how.
|
||||
</h6>
|
||||
<h6 className="join-heading-mobile">
|
||||
Revolutionize your practice.
|
||||
</h6>
|
||||
<h6 className="join-heading-mobile">Let us show you how.</h6>
|
||||
</div>
|
||||
<div className="col-md-6 d-flex">
|
||||
<button className="button-2" onClick={handleDemo}>
|
||||
Request a demo
|
||||
</button>
|
||||
<button className="button-2" onClick={handleLogin}>
|
||||
Go to login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{showPromoModal ? (
|
||||
<ConfirmModal
|
||||
titleText="Enter Code"
|
||||
onCancel={handleCancelModal}
|
||||
buttonLabelText="Enter Code"
|
||||
isPromoModal={true}
|
||||
onConfirm={handleProcessPromoSubscription}
|
||||
cancelButtonText="I don't have a code"
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return isBusy ? (
|
||||
<LoadingSpinner message={""} loaderType="MoonLoader" />
|
||||
) : (
|
||||
homeContent
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
Reference in New Issue
Block a user