more

src/Components/Account/AccountPage.js

@@ -6,6 +6,7 @@ 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();
@@ -15,7 +16,7 @@ const AccountPage = () => {
   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;
@@ -36,6 +37,10 @@ const AccountPage = () => {
     return null;
   }
 
+  const handleCancelSub = () => {
+    setShowModal(true);
+    // API call
+  };
   const handleSupport = () => {
     const supReq = "5ac45d12";
     navigate(`/requestpage/${supReq}`);
@@ -178,7 +183,11 @@ const AccountPage = () => {
             </div>
           ) : null}
           <div className="account-subscriptions-actions">
-            <Button className="primary-button" labelText="Cancel Account" />
+            <Button
+              className="primary-button cancel-sub-button"
+              labelText="Cancel Subscription"
+              onClick={() => setShowModal(true)}
+            />
           </div>
         </div>
       </div>
@@ -194,6 +203,14 @@ const AccountPage = () => {
           <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>
   );
 };

src/styles/account-page.scss

@@ -87,6 +87,10 @@ $account-support-title-padding: 10px;
   }
 }
 
+.cancel-sub-button {
+  width: 165px;
+}
+
 .account-support {
   display: grid;
   grid-template-columns: 2fr 1fr;