ax3Client/src/Components/Account/AccountPage.js

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 [docsAllowed, setDocsAllowed] = useState(10);
  const appUserId = group ? group.appUserId : null;
  const [showModal, setShowModal] = useState(false);
  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;
  }

  const handleCancelSub = () => {
    setShowModal(true);
    // API call
  };
  const handleSupport = () => {
    const supReq = "5ac45d12";
    navigate(`/requestpage/${supReq}`);
  };

  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 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">
            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 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>{telNumberFormat(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;