Merge pull request #75 from kjannette/foobar4

Foobar4

src/Components/Account/AccountPage.js

@@ -13,8 +13,9 @@ const AccountPage = () => {
   const { currentUserCreatedAt } = useContext(AuthContext);
   const { appState } = useContext(AppContext);
   const { group } = appState;
+  console.log("group", group);
   const [docsGenerated, setDocsGenerated] = useState(null);
-  const [docsAllowed, setDocsAllowed] = useState(10);
+  const [docsAllowed, setDocsAllowed] = useState(group?.docsAllowed);
   const appUserId = group ? group.appUserId : null;
   const [showModal, setShowModal] = useState(false);
 
@@ -23,6 +24,12 @@ const AccountPage = () => {
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
 
+  const handleConfirmUpgrade = () => {
+    const isUpgrade = true;
+    const currentPlan = group?.subscriptionPlan;
+    navigate(`/signup/${isUpgrade}/${currentPlan}`);
+  };
+
   function getDocumentsCount() {
     if (!appUserId) {
       return;
@@ -47,19 +54,20 @@ const AccountPage = () => {
     setShowModal(true);
     try {
       let response = await fetch(`${apiUrl}/cancel-subscription`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           appUserId: appUserId,
         }),
-      })
+      });
     } catch (err) {
       console.log(err);
     }
     setShowModal(false);
   };
+
   const handleSupport = () => {
     const supReq = "5ac45d12";
     navigate(`/requestpage/${supReq}`);
@@ -98,8 +106,9 @@ const AccountPage = () => {
             </div>
             <div className="account-card-actions">
               <Button
-                className="primary-button"
+                className="primary-button upgrade-account"
                 labelText="Upgrade to add more"
+                onClick={handleConfirmUpgrade}
               />
             </div>
           </div>
@@ -187,11 +196,11 @@ const AccountPage = () => {
         <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
+            {group.subscriptionPlan.toUpperCase()}
           </div>
           <div className="account-subscriptions-item">
-            <div className="account-subscriptions-item-label">Amount:</div>
+            <div className="account-subscriptions-item-label"></div>
-            <div className="account-subscriptions-item-value">Free!</div>
+            <div className="account-subscriptions-item-value"></div>
           </div>
           {typeof currentUserCreatedAt !== "undefined" ? (
             <div className="account-subscriptions-item">
@@ -219,7 +228,7 @@ const AccountPage = () => {
           <div>
             <a href={`mailto:${group.email}`}>{group.email}</a>
           </div>
-          <div>{telNumberFormat(group.telephone)}</div>
+          <div>{group.telephone}</div>
         </div>
       </div>
       {showModal ? (

src/styles/buttons.scss

@@ -27,6 +27,10 @@ $button-padding: 0 5px;
   }
 }
 
+.upgrade-account {
+  width: 190px;
+}
+
 .secondary-button {
   height: $button-height;
   padding: $button-padding;