Add a notice bar to the preview page of a listing (#1532)

* Add a notice bar to the preview page of a listing

* Move style to TW classes

* Update changelog with #1507

Co-authored-by: seanmalbert <smabert@gmail.com>

CHANGELOG.md

@@ -35,6 +35,7 @@ All notable changes to this project will be documented in this file. The format
   - refactors listing form submit to fix double submit issue ([#1501](https://github.com/bloom-housing/bloom/pull/1501))
 
 - Added:
+  - A notice bar to the preview page of a listing ([#1532](https://github.com/bloom-housing/bloom/pull/1532)) (Jared White)
   - Photo upload and preview to the Partner Listing screens ([#1491](https://github.com/bloom-housing/bloom/pull/1491)) (Jared White)
   - AG-grid sorting now is connected with the backend sorting ([#1083](https://github.com/bloom-housing/bloom/issues/1083)) (Michał Plebański)
 

sites/public/pages/preview/listings/[id].tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import Head from "next/head"
 import axios from "axios"
 import { Listing } from "@bloom-housing/backend-core/types"
@@ -13,6 +13,7 @@ interface ListingProps {
 
 export default function ListingPage(props: ListingProps) {
   const { listing } = props
+  const [previewBarVisible, setPreviewBarVisible] = useState(true)
   const pageTitle = `${listing.name} - ${t("nav.siteTitle")}`
   const metaDescription = t("pageDescription.listing", {
     regionName: t("region.name"),
@@ -26,6 +27,19 @@ export default function ListingPage(props: ListingProps) {
         <title>{pageTitle}</title>
       </Head>
       <MetaTags title={listing.name} image={metaImage} description={metaDescription} />
+      {previewBarVisible && (
+        <div className="pt-6 pb-4 bg-red-700 text-white font-bold text-sm">
+          <div className="max-w-5xl m-auto">{t("listings.listingPreviewOnly")}</div>
+          <button
+            className="-mt-8 alert-box__close text-white"
+            onClick={() => {
+              setPreviewBarVisible(false)
+            }}
+          >
+            &times;
+          </button>
+        </div>
+      )}
       <ListingView listing={listing} preview={true} />
     </Layout>
   )

ui-components/src/locales/general.json

@@ -797,6 +797,7 @@
     "includesPriorityUnits": "Includes Priority Units for %{priorities}",
     "latitude": "Latitude",
     "leasingAgentAddress": "Leasing Agent Address",
+    "listingPreviewOnly": "This is a listing preview only.",
     "listingStatus": {
       "active": "Open",
       "pending": "Draft",