kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-11 18:24:41 -06:00
commit 4c1fb67383
103 changed files with 29954 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/Components/Account/AccountPage.js Normal file
View File

@@ -0,0 +1,186 @@
import { useState, useContext, useEffect } from "react";
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";
const AccountPage = () => {
const { currentUserCreatedAt } = useContext(AuthContext);
const { appState } = useContext(AppContext);
const { group } = appState;
const [docsGenerated, setDocsGenerated] = useState(null);
const [docsAllowed, setDocsAllowed] = useState(200);
const appUserId = group ? group.appUserId : null;
function getDocumentsCount() {
if (!appUserId) {
return;
}
return onSnapshot(
query(collection(db, "documents"), where("ownerId", "==", appUserId)),
(snapshot) => setDocsGenerated(snapshot.docs.length)
);
}
useEffect(getDocumentsCount, [appUserId]);
const telNumberFormat = (num) => {
return `(${num.slice(0, 3)}) ${num.slice(4, 7)}-${num.slice(6, 10)}`;
};
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} response
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"
labelText="Upgrade to add more"
/>
</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>
<a href="mailto:test@example.com">test@example.com</a>
</div>
<div>
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>
<a href="#">Billing</a>
</div>
<div>
<a href="#">Privacy</a>
</div>
</div>
</div>
<div className="accound-section">Active Subscriptions</div>
<div className="account-card account-subscriptions">
<div className="account-subscriptions-title">
30 day free trial - 1 allowed document
</div>
<div className="account-subscriptions-item">
<div className="account-subscriptions-item-label">Amount:</div>
<div className="account-subscriptions-item-value">Free!</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" labelText="Cancel Account" />
</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>
<a href={`mailto:${group.email}`}>{group.email}</a>
</div>
<div>{telNumberFormat(group.telephone)}</div>
</div>
</div>
</div>
);
};
export default AccountPage;