Fix UI shell refactor (#98)

* feat: make privacy statement simpler

* chore: improve types for privacy statement

* chore: simplify profile settings

* chore: remove unneccesary optional chaining

* feat: add mock endpoint for delete user

src/components/PrivacyStatement/PrivacyStatement.tsx

@@ -19,6 +19,17 @@ function formatDateTimestamp(timestamp: string) {
   });
 }
 
+type PrivacyStatementContent = {
+  effectiveDate: string;
+  version: string;
+  formContent: {
+    sections: {
+      title: string;
+      content: string;
+    }[];
+  };
+};
+
 type Props = {
   baseServicesUrl: string;
   closeModal: () => void;
@@ -37,28 +48,27 @@ function PrivacyStatement({
   const [resetKey, setResetKey] = React.useState(0);
   const [isConfirmModalOpen, setIsConfirmModalOpen] = React.useState(false);
   const statementUrl = serviceUrl.getStatement({ baseServicesUrl });
-  const statementQuery = useQuery({
+  const statementQuery = useQuery<PrivacyStatementContent>({
     queryKey: statementUrl,
     queryFn: resolver.query(statementUrl),
   });
 
   const { mutateAsync, error: mutateUserConsentError } = useMutation(resolver.putUserConsent);
 
+  function closeConfirmModal() {
+    setIsConfirmModalOpen(false);
+  }
+
   function handleClose() {
     closeModal();
+    closeConfirmModal();
     setResetKey(resetKey + 1);
   }
 
-  async function handleSubmit({
-    closeAlertModal,
-    closeModal,
-  }: {
-    closeAlertModal: () => void;
-    closeModal: () => void;
-  }) {
+  async function handleSubmit() {
     const body = {
       hasConsented: false,
-      version: statementQuery.data.version,
+      version: statementQuery.data?.version,
     };
 
     try {
@@ -67,13 +77,13 @@ function PrivacyStatement({
         <ToastNotification subtitle="Successfully requested account deletion" title="Delete Account" kind="success" />,
         { containerId: `${prefix}--bmrg-header-notifications` }
       );
-      closeAlertModal();
+      closeConfirmModal();
       closeModal();
       if (window.location) {
         window.location.reload();
       }
     } catch (e) {
-      closeAlertModal();
+      closeConfirmModal();
     }
   }
 
@@ -83,6 +93,7 @@ function PrivacyStatement({
       className={`${prefix}--bmrg-privacy-statement-container ${prefix}--bmrg-header-modal`}
       onClose={handleClose}
       open={isOpen}
+      preventCloseOnClickOutside={isConfirmModalOpen}
     >
       <ModalHeader
         closeModal={handleClose}
@@ -96,10 +107,11 @@ function PrivacyStatement({
           ) : statementQuery.error ? (
             <ErrorMessage style={{ color: "#F2F4F8" }} />
           ) : (
-            statementQuery.data?.formContent?.sections?.length > 0 && (
+            statementQuery.data &&
+            statementQuery.data.formContent?.sections?.length > 0 && (
               <>
                 <Accordion>
-                  {statementQuery.data.formContent.sections.map((section: any) => {
+                  {statementQuery.data.formContent.sections.map((section) => {
                     return (
                       <AccordionItem title={section.title} key={section.title}>
                         <p
@@ -136,30 +148,20 @@ function PrivacyStatement({
           Request account deletion
         </Button>
         <div className={`${prefix}--bmrg-privacy-statement-delete`}>
-          <ComposedModal open={isConfirmModalOpen}>
-            <ModalHeader
-              closeModal={() => setIsConfirmModalOpen(false)}
-              label="Delete Account"
-              title="Request account deletion"
-            />
+          <ComposedModal onClose={closeConfirmModal} open={isConfirmModalOpen}>
+            <ModalHeader closeModal={closeConfirmModal} label="Delete Account" title="Request account deletion" />
             <ModalBody>
               <p className={`${prefix}--bmrg-privacy-statement-delete__desc`}>
                 By selecting to delete your account, your account will be deleted along with all of your user data from
                 our system and we will notify your team(s) that you are no longer a memeber of the platform. Are you
                 sure you want to delete your account?
               </p>
             </ModalBody>
-            <ModalFooter style={{ marginTop: "1.125rem" }}>
-              <Button data-modal-primary-focus kind="secondary" onClick={() => setIsConfirmModalOpen(false)}>
+            <ModalFooter>
+              <Button data-modal-primary-focus kind="secondary" onClick={closeConfirmModal}>
                 No, go back to Privacy Statement
               </Button>
-              <Button
-                kind="danger"
-                type="submit"
-                onClick={() => {
-                  handleSubmit({ closeAlertModal: () => setIsConfirmModalOpen(false), closeModal });
-                }}
-              >
+              <Button kind="danger" type="submit" onClick={handleSubmit}>
                 Yes, delete my account
               </Button>
             </ModalFooter>

src/components/PrivacyStatement/__snapshots__/PrivacyStatement.spec.tsx.snap

@@ -165,7 +165,6 @@ exports[`Privacy Statement - snapshot 1`] = `
                     </div>
                     <div
                       class="cds--modal-footer cds--btn-set"
-                      style="margin-top: 1.125rem;"
                     >
                       <button
                         class="cds--btn cds--btn--secondary"

src/components/ProfileSettings/ProfileSettings.tsx

@@ -86,7 +86,7 @@ function ProfileSettings({ baseServicesUrl, src, userName, isOpen, closeModal }:
     setTeams(initialTeams);
   }
 
-  async function handleSubmit({ closeModal }: { closeModal: Function }) {
+  async function handleSubmit() {
     const body = {
       lowerLevelGroups: teams,
     };
@@ -223,7 +223,7 @@ function ProfileSettings({ baseServicesUrl, src, userName, isOpen, closeModal }:
           type="submit"
           onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
             e.preventDefault();
-            handleSubmit({ closeModal: handleClose });
+            handleSubmit();
           }}
         >
           {mutateUserProfileError ? "Try Again" : mutateUserProfileIsLoading ? "Saving..." : "Save changes"}

src/components/UIShell/UIShell.stories.tsx

@@ -161,6 +161,7 @@ export function UIShellKitchenSink(args) {
   mock.onPatch(`${BASE_SERVICES_URL}/users/profile`).reply(200);
   mock.onPost(`${BASE_SERVICES_URL}/support/contact`).reply(200);
   mock.onPut(`${BASE_SERVICES_URL}/notifications`).reply(200, {});
+  mock.onPut(`${BASE_SERVICES_URL}/users/consent`).reply(200, {});
   const [isTutorialOpen, setIsTutorialOpen] = React.useState(false);
   return (
     <Router>