first commit for refactored project
This commit is contained in:
KS Jannette
242
ax3Client/src/Components/Account/AccountPage.js
Normal file
242
ax3Client/src/Components/Account/AccountPage.js
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useState, useContext, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { db } from "../../firebase";
|
||||
import { collection, onSnapshot, query, where } from "firebase/firestore";
|
||||
import Button from "../../pageElements/Button";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext";
|
||||
import { AuthContext } from "../../Context/AuthProvider";
|
||||
import ProgressBar from "../../pageElements/ProgressBar";
|
||||
import ConfirmModal from "../Modals/ConfirmModal";
|
||||
|
||||
const AccountPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { currentUserCreatedAt } = useContext(AuthContext);
|
||||
const { appState } = useContext(AppContext);
|
||||
const { group } = appState;
|
||||
const [docsGenerated, setDocsGenerated] = useState(null);
|
||||
const appUserId = group ? group.appUserId : null;
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const subscriptionPlan = group?.subscriptionPlan[0].label;
|
||||
|
||||
const apiUrl =
|
||||
process.env.NODE_ENV === "development"
|
||||
? process.env.REACT_APP_API_DEV
|
||||
: process.env.REACT_APP_API_PROD;
|
||||
|
||||
const docsAllowed = group?.docsAllowedPerMonth;
|
||||
|
||||
const handleConfirmUpgrade = () => {
|
||||
const isUpgrade = true;
|
||||
const currentPlan = group?.subscriptionPlan;
|
||||
navigate(`/signup/${isUpgrade}/${currentPlan}`);
|
||||
};
|
||||
|
||||
function getDocumentsCount() {
|
||||
if (!appUserId) {
|
||||
return;
|
||||
}
|
||||
return onSnapshot(
|
||||
query(collection(db, "documents"), where("ownerId", "==", appUserId)),
|
||||
(snapshot) => setDocsGenerated(snapshot.docs.length)
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(getDocumentsCount, [appUserId]);
|
||||
|
||||
const handleCancelSub = async () => {
|
||||
setShowModal(true);
|
||||
try {
|
||||
let response = await fetch(`${apiUrl}/cancel-subscription`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
appUserId: appUserId,
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
const handleSupport = () => {
|
||||
const supReq = "5ac45d12";
|
||||
navigate(`/requestpage/${supReq}`);
|
||||
};
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="account-container">
|
||||
<div className="account-left-column">
|
||||
<div className="account-menu">
|
||||
{/*
|
||||
<div className="account-menu-item">
|
||||
<a href="#">Personal Settings</a>
|
||||
</div>
|
||||
<div className="account-menu-item">
|
||||
<a href="#">Payment Settings</a>
|
||||
</div>
|
||||
<div className="account-menu-item">
|
||||
<a href="#">Membership Settings</a>
|
||||
</div>
|
||||
<div className="account-menu-item">
|
||||
<a href="#">Order History</a>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-column">
|
||||
{docsGenerated !== null ? (
|
||||
<div className="account-card account-docs-generated">
|
||||
<div>
|
||||
You have generated {docsGenerated} out of {docsAllowed} documents
|
||||
this billing period.
|
||||
</div>
|
||||
<div className="account-card-title">Upgrade to get more</div>
|
||||
<div className="account-docs-progress-bar">
|
||||
<ProgressBar value={docsGenerated} total={docsAllowed} />
|
||||
</div>
|
||||
<div className="account-card-actions">
|
||||
<Button
|
||||
className="primary-button upgrade-account"
|
||||
labelText="Upgrade to add more"
|
||||
onClick={handleConfirmUpgrade}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{/*
|
||||
<div className="accound-section">
|
||||
Take full advantage of the features included in your account
|
||||
</div>
|
||||
<div className="account-group">
|
||||
<div className="account-card">
|
||||
<div className="account-card-title">Give the gift of Novodraft</div>
|
||||
<div className="account-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div className="account-card-actions">
|
||||
<Button className="primary-button" labelText="Upgrade" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-card">
|
||||
<div className="account-card-title">Give the gift of Novodraft</div>
|
||||
<div className="account-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div className="account-card-actions">
|
||||
<Button className="primary-button" labelText="Upgrade" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-card">
|
||||
<div className="account-card-title">Give the gift of Novodraft</div>
|
||||
<div className="account-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div className="account-card-actions">
|
||||
<Button className="primary-button" labelText="Upgrade" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-card">
|
||||
<div className="account-card-title">Give the gift of Novodraft</div>
|
||||
<div className="account-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div className="account-card-actions">
|
||||
<Button className="primary-button" labelText="Upgrade" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
<div className="account-card account-support">
|
||||
<div className="account-support-info">
|
||||
<div className="account-support-title account-support-info-title">
|
||||
Need Support?
|
||||
</div>
|
||||
{/*
|
||||
<div>
|
||||
<a href="tel:+12223334444">1-222-333-4444</a>
|
||||
</div>
|
||||
*/}
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
<a href="mailto:support@novodraft.ai">support@novodraft.ai</a>
|
||||
</div>
|
||||
<div style={{ marginTop: "4px" }} onClick={handleSupport}>
|
||||
Or use our <a href="">contact form</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-support-links">
|
||||
<div className="account-support-title account-support-links-title">
|
||||
FAQ
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Support</a>
|
||||
</div>
|
||||
<div onClick={handleSupport}>
|
||||
<a href="#">Billing</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/privacy">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-section">Active Subscriptions</div>
|
||||
<div className="account-card account-subscriptions">
|
||||
<div className="account-subscriptions-title">
|
||||
{`${subscriptionPlan?.toUpperCase()} PLAN`}
|
||||
</div>
|
||||
<div className="account-subscriptions-item">
|
||||
<div className="account-subscriptions-item-label"></div>
|
||||
<div className="account-subscriptions-item-value"></div>
|
||||
</div>
|
||||
{typeof currentUserCreatedAt !== "undefined" ? (
|
||||
<div className="account-subscriptions-item">
|
||||
<div className="account-subscriptions-item-label">Activated:</div>
|
||||
<div className="account-subscriptions-item-value">
|
||||
{currentUserCreatedAt?.toLocaleDateString("en-US")}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="account-subscriptions-actions">
|
||||
<Button
|
||||
className="primary-button cancel-sub-button"
|
||||
labelText="Cancel Subscription"
|
||||
onClick={() => setShowModal(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="account-column">
|
||||
<div className="account-card account-card-right-account account-info">
|
||||
<div className="account-info-name">
|
||||
{group?.firstName} {group?.lastName}
|
||||
</div>
|
||||
<div>{group?.firm}</div>
|
||||
<div>
|
||||
<a href={`mailto:${group?.email}`}>{group?.email}</a>
|
||||
</div>
|
||||
<div>{group?.telephone}</div>
|
||||
</div>
|
||||
</div>
|
||||
{showModal ? (
|
||||
<ConfirmModal
|
||||
onCancel={() => setShowModal(false)}
|
||||
onConfirm={handleCancelSub}
|
||||
buttonLabelText="Confirm Cancel"
|
||||
modalText="Are you sure? Your subscription will end at the conclusion of the current billing period."
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountPage;
|
||||
Reference in New Issue
Block a user