feat: Show confirmation modal when publishing listings (#1847)

* feat: Show confirmation modal when publishing listings issue #1772 * Update changelog with #1772
bloom-housing · Sep 22, 2021 · 2de8062 · 2de8062
1 parent 69ea88b
commit 2de8062
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file. The format
 
 - Added:
 
+  - Show confirmation modal when publishing listings ([#1772](https://github.com/bloom-housing/bloom/pull/1772)) (Jared White)
   - Split Listing form up into two main tabs ([#1644](https://github.com/bloom-housing/bloom/pull/1644)) (Jared White)
   - Allow lottery results to be uploaded for a closed listing ([#1568](https://github.com/bloom-housing/bloom/pull/1568)) (Jared White)
   - Update buttons / pages visibility depending on a user role ([#1609](https://github.com/bloom-housing/bloom/pull/1609)) (Dominik Barcikowski)

diff --git a/sites/partners/src/listings/Aside.tsx b/sites/partners/src/listings/Aside.tsx
@@ -21,6 +21,7 @@ type AsideProps = {
   setStatus?: (status: ListingStatus) => void
   showCloseListingModal?: () => void
   showLotteryResultsDrawer?: () => void
+  showPublishModal?: () => void
 }
 
 type AsideType = "add" | "edit" | "details"
@@ -30,6 +31,7 @@ const Aside = ({
   setStatus,
   showCloseListingModal,
   showLotteryResultsDrawer,
+  showPublishModal,
 }: AsideProps) => {
   const listing = useContext(ListingContext)
 
@@ -77,7 +79,7 @@ const Aside = ({
           <Button
             styleType={AppearanceStyleType.success}
             fullWidth
-            onClick={() => setStatus(ListingStatus.active)}
+            onClick={() => showPublishModal && showPublishModal()}
           >
             {t("listings.actions.publish")}
           </Button>
@@ -109,9 +111,10 @@ const Aside = ({
         elements.push(
           <GridCell key="btn-publish">
             <Button
+              type="button"
               styleType={AppearanceStyleType.success}
               fullWidth
-              onClick={() => setStatus(ListingStatus.active)}
+              onClick={() => showPublishModal && showPublishModal()}
             >
               {t("listings.actions.publish")}
             </Button>
@@ -213,7 +216,15 @@ const Aside = ({
     }
 
     return elements
-  }, [listing, listingId, setStatus, showCloseListingModal, showLotteryResultsDrawer, type])
+  }, [
+    listing,
+    listingId,
+    setStatus,
+    showCloseListingModal,
+    showLotteryResultsDrawer,
+    showPublishModal,
+    type,
+  ])
 
   return (
     <>

diff --git a/sites/partners/src/listings/PaperListingForm/index.tsx b/sites/partners/src/listings/PaperListingForm/index.tsx
@@ -425,6 +425,11 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
    */
   const [closeModal, setCloseModal] = useState(false)
 
+  /**
+   * Publish modal
+   */
+  const [publishModal, setPublishModal] = useState(false)
+
   /**
    * Lottery results drawer
    */
@@ -662,6 +667,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                         setStatus={setStatus}
                         showCloseListingModal={() => setCloseModal(true)}
                         showLotteryResultsDrawer={() => setLotteryResultsDrawer(true)}
+                        showPublishModal={() => setPublishModal(true)}
                       />
                     </aside>
                   </div>
@@ -701,6 +707,36 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
       >
         {t("listings.closeThisListing")}
       </Modal>
+
+      <Modal
+        open={!!publishModal}
+        title={t("t.areYouSure")}
+        ariaDescription={t("listings.publishThisListing")}
+        onClose={() => setPublishModal(false)}
+        actions={[
+          <Button
+            styleType={AppearanceStyleType.success}
+            onClick={() => {
+              setStatus(ListingStatus.active)
+              triggerSubmit(getValues())
+              setPublishModal(false)
+            }}
+          >
+            {t("listings.actions.publish")}
+          </Button>,
+          <Button
+            styleType={AppearanceStyleType.secondary}
+            border={AppearanceBorderType.borderless}
+            onClick={() => {
+              setPublishModal(false)
+            }}
+          >
+            {t("t.cancel")}
+          </Button>,
+        ]}
+      >
+        {t("listings.publishThisListing")}
+      </Modal>
     </>
   )
 }

diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json
@@ -725,6 +725,7 @@
   "listings": {
     "error": "There was an issue submitting the form.",
     "closeThisListing": "Do you really want to close this listing?",
+    "publishThisListing": "Publishing will push the listing live on the public site.",
     "active": "Accepting Applications",
     "pending": "Coming Soon",
     "closed": "Closed",