1337/homepage coming soon

sites/public/pages/index.module.scss

@@ -1,39 +1,95 @@
-.latest-listings {
-  padding: 24px 0 0 0;
+.section-container {
+  max-width: 1600px;
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  @apply mx-auto;
 }
 
-.regions {
-  padding: 24px 0;
+.title {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 2rem;
+    @screen sm {
+      font-size: 2rem;
+      line-height: 2.25rem;
+    }
+  }
+  svg {
+    padding: 0 0.5rem 0 0;
+    fill: $tailwind-primary;
+    height: 2rem;
+    width: 2rem;
+    @screen sm {
+      height: 2.5rem;
+      width: 2.5rem;
+    }
+  }
 }
 
-.region {
-  @apply bg-primary;
-  background-size: cover;
-  background-position: 50% 50%;
-  border-radius: 14px 14px 2px 2px;
-  height: 130px;
-  margin: 0 33px 2.2rem 0;
-  position: relative;
-  width: 209px;
+.cards-container {
+  padding-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @screen lg {
+    flex-direction: row;
+    align-items: unset;
+  }
+  :last-child {
+    @apply pb-0;
+  }
+}
 
-  @screen sm {
-    height: 170px;
-    width: 278px;
+.region-background {
+  padding-top: 1rem;
+  width: 100%;
+  background-color: #f7f7f7;
+}
+
+.region {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 48rem;
+  min-height: 100%;
+  overflow: hidden;
+  @apply px-4;
+  @apply pb-6;
+  @screen lg {
+    width: 25%;
+    @apply pb-0;
+  }
+  img {
+    object-fit: cover;
+    border-radius: 24px 24px 0 0;
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 3/2;
+    @apply pb-2;
   }
 }
 .region:hover {
   opacity: 0.9;
 }
 
 .region__text {
-  bottom: -2rem;
+  display: flex;
+  justify-content: center;
   font-size: 1.3rem;
   font-weight: 700;
-  line-height: 1rem;
-  max-width: 236px;
+  line-height: 1.3rem;
+  max-width: 278px;
   overflow: hidden;
-  position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   @apply text-primary-dark;
 }
+
+.latest-listings {
+  padding: 24px 0 0 0;
+}

sites/public/pages/index.tsx

@@ -30,9 +30,8 @@ import {
   encodeToFrontendFilterString,
 } from "@bloom-housing/shared-helpers"
 
-export default function Home({ latestListings }) {
+export default function Home({ latestListings, comingSoonListings }) {
   const showLatestListings = false // Disabled for now
-
   const blankAlertInfo = {
     alertMessage: null,
     alertType: null,
@@ -75,12 +74,22 @@ export default function Home({ latestListings }) {
       href={`/listings/filtered?page=1${encodeToFrontendFilterString({
         region: props.region[1],
       })}`}
-      style={{ backgroundImage: `url(${regionImageUrls.get(props.region[1])})` }}
     >
+      <img src={`${regionImageUrls.get(props.region[1])}`} />
       <p className={styles.region__text}>{props.region[1]}</p>
     </a>
   )
 
+  const ComingSoonButton = () => (
+    <LinkButton
+      href={`/listings/filtered?page=1${encodeToFrontendFilterString({
+        availability: "comingSoon",
+      })}`}
+    >
+      {t("welcome.comingSoonButton")}
+    </LinkButton>
+  )
+
   const metaDescription = t("pageDescription.welcome", { regionName: t("region.name") })
   const metaImage = "" // TODO: replace with hero image
   const alertClasses = "flex-grow mt-6 max-w-6xl w-full"
@@ -122,16 +131,37 @@ export default function Home({ latestListings }) {
           {getListings(latestListings.items)}
         </HorizontalScrollSection>
       )}
-      <HorizontalScrollSection
-        title={t("welcome.cityRegions")}
-        scrollAmount={311}
-        icon="map"
-        className={styles.regions}
-      >
-        {Object.entries(Region).map((region, index) => (
-          <RegionButton region={region} key={index} />
-        ))}
-      </HorizontalScrollSection>
+      {comingSoonListings?.items?.length > 0 && (
+        <div className={styles["section-container"]}>
+          <section className={`coming-soon-listings`}>
+            <div className={`${styles["title"]}`}>
+              <Icon size="xlarge" symbol="clock" ariaHidden={true} />
+              <h2>{t("listings.comingSoon")}</h2>
+            </div>
+            <div className={`${styles["cards-container"]}`}>
+              {getListings(comingSoonListings?.items)}
+            </div>
+            <div className={`${styles["title"]}`}>
+              <ComingSoonButton />
+            </div>
+          </section>
+        </div>
+      )}
+      <div className={styles["region-background"]}>
+        <div className={styles["section-container"]}>
+          <section className={styles.regions}>
+            <div className={`${styles["title"]}`}>
+              <Icon size="xlarge" symbol={"map"} className={styles.icon} ariaHidden={true} />
+              <h2>{t("welcome.cityRegions")}</h2>
+            </div>
+            <div className={styles["cards-container"]}>
+              {Object.entries(Region).map((region, index) => (
+                <RegionButton region={region} key={index} />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
       <section className="homepage-extra">
         <div className="action-blocks mt-4 mb-4 w-full">
           <ActionBlock
@@ -164,6 +194,7 @@ export default function Home({ latestListings }) {
           />
         </div>
       </section>
+
       <ConfirmationModal
         setSiteAlertMessage={(alertMessage, alertType) => setAlertInfo({ alertMessage, alertType })}
       />
@@ -173,8 +204,9 @@ export default function Home({ latestListings }) {
 
 export async function getStaticProps() {
   let latestListings = []
+  let comingSoonListings = []
   try {
-    const response = await axios.get(process.env.listingServiceUrl, {
+    const latestResponse = await axios.get(process.env.listingServiceUrl, {
       params: {
         limit: 5,
         orderBy: "mostRecentlyUpdated",
@@ -191,9 +223,33 @@ export async function getStaticProps() {
         return qs.stringify(params)
       },
     })
-    latestListings = response.data
+    latestListings = latestResponse.data
   } catch (error) {
     console.error(error)
   }
-  return { props: { latestListings }, revalidate: process.env.cacheRevalidate }
+
+  try {
+    const comingSoonResponse = await axios.get(process.env.listingServiceUrl, {
+      params: {
+        limit: 3,
+        view: "base",
+        orderBy: "comingSoon",
+        filter: [
+          {
+            $comparison: EnumListingFilterParamsComparison["="],
+            status: EnumListingFilterParamsStatus.active,
+            marketingType: "comingSoon",
+          },
+        ],
+      },
+      paramsSerializer: (params) => {
+        return qs.stringify(params)
+      },
+    })
+    comingSoonListings = comingSoonResponse.data
+  } catch (error) {
+    console.error(error)
+  }
+
+  return { props: { latestListings, comingSoonListings }, revalidate: process.env.cacheRevalidate }
 }

sites/public/styles/listings.scss

@@ -72,6 +72,7 @@
   }
 }
 
+// Toggled off
 .latest-listings {
   .listings-row_table,
   .listings-row_footer_container {
@@ -111,3 +112,32 @@
     }
   }
 }
+
+.coming-soon-listings {
+  .listings-row_table,
+  .listings-row_footer_container {
+    display: none;
+  }
+  .listings-row {
+    @apply mt-0;
+    @apply mb-2;
+    @apply px-4;
+    flex: 1;
+    @screen lg {
+      display: block;
+    }
+  }
+  .listings-row_content {
+    width: 100%;
+    padding: 1rem 0 0 0;
+  }
+
+  .listings-row_figure {
+    width: 100%;
+    border-radius: 24px 24px 0 0;
+    padding: 0;
+  }
+  .image-card img {
+    border-radius: 24px 24px 0 0;
+  }
+}

ui-components/src/locales/ar.json

@@ -614,7 +614,7 @@
     "listings.browseListings": "تصفح القوائم",
     "listings.buildingImageAltText": "صورة المبنى",
     "listings.closedListings": "القوائم المغلقة",
-    "listings.comingSoon": "قريبا",
+    "listings.comingSoon": "قريبًا",
     "listings.communityProgramsDescription": "يتضمن هذا البرنامج فرصًا لأعضاء مجتمعات معينة",
     "listings.confirmedPreferenceList": "تم تأكيد قائمة٪ {preference}",
     "listings.creditHistory": "تاريخ الرصيد",
@@ -1139,6 +1139,7 @@
     "welcome.signUp": "احصل على رسائل عبر البريد الإلكتروني كلما تم نشر قائمة جديدة",
     "welcome.signUpToday": "سجّل اليوم",
     "welcome.subTitle": "انقر فوق الزر أدناه للعثور على سكن مستأجر بناءً على دخلك واحتياجات أسرتك",
+    "welcome.comingSoonButton": "الاطلاع على جميع ما سيُتاح قريبًا",
     "whatToExpect.label": "ماذا تتوقع",
     "whatToExpect.default": "سيتم الاتصال بالمتقدمين من قبل وكيل الملكية بترتيب الترتيب حتى يتم ملء الشواغر. سيتم التحقق من جميع المعلومات التي قدمتها وتأكيد أهليتك. ستتم إزالة طلبك من قائمة الانتظار إذا قدمت أي بيانات احتيالية. إذا لم نتمكن من التحقق من تفضيل السكن الذي طالبت به ، فلن تحصل على الأفضلية ولكن لن يتم معاقبتك بطريقة أخرى. إذا تم اختيار طلبك ، فكن مستعدًا لملء طلب أكثر تفصيلاً وتقديم المستندات الداعمة المطلوبة.",
     "listingFilters.allRentals": "جميع الإيجارات",

ui-components/src/locales/bn.json

@@ -1137,6 +1137,7 @@
     "welcome.signUp": "কোনো নতুন তালিকা পোস্ট করা হলেই ইমেইল পাওয়ার সুযোগ নিন",
     "welcome.signUpToday": "আজই সাইন-আপ করুন",
     "welcome.subTitle": "আপনার আয় এবং গৃহস্থালি চাহিদার উপর ভিত্তি করে ভাড়া আবাসন খুঁজে পেতে নীচের বোতামে ক্লিক করুন",
+    "welcome.comingSoonButton": "শীঘ্রই আসছে এরূপ সব দেখুন",
     "whatToExpect.label": "কি আশা করছ",
     "whatToExpect.default": "শূন্যপদ পূরণ না হওয়া পর্যন্ত আবেদনকারীরা র agent্যাঙ্ক ক্রমে সম্পত্তি এজেন্টের সাথে যোগাযোগ করবে। আপনার দেওয়া সমস্ত তথ্য যাচাই করা হবে এবং আপনার যোগ্যতা নিশ্চিত করা হবে। যদি আপনি কোন প্রতারণামূলক বিবৃতি দিয়ে থাকেন তাহলে আপনার আবেদনটি প্রতীক্ষার তালিকা থেকে সরিয়ে দেওয়া হবে। যদি আমরা আপনার দাবি করা আবাসন পছন্দ যাচাই করতে না পারি, তাহলে আপনি অগ্রাধিকার পাবেন না কিন্তু অন্যথায় শাস্তি পাবেন না। আপনার আবেদন নির্বাচন করা উচিত, আরো বিস্তারিত আবেদন পূরণ এবং প্রয়োজনীয় সহায়ক নথি প্রদান করার জন্য প্রস্তুত থাকুন।",
     "listingFilters.allRentals": "সমস্ত ভাড়া",

ui-components/src/locales/es.json

@@ -702,6 +702,7 @@
   "welcome.title": "Haga su solicitud de vivienda de precio accesible en",
   "welcome.viewAdditionalHousing": "Vea Oportunidades y recursos adicionales de vivienda",
   "welcome.viewAdditionalHousingTruncated": "Ver oportunidades y recursos",
+  "welcome.comingSoonButton": "Ver todas las próximas novedades",
   "whatToExpect.default": "Los solicitantes serán contactados por el agente de la propiedad en orden de clasificación hasta que se hayan llenado todas las vacantes. Toda la información que usted ha proporcionado será verificada y su elegibilidad será confirmada. Su solicitud será retirada de la lista de espera si usted hizo alguna declaración fraudulenta. Si nos es imposible verificar una preferencia de vivienda que usted haya solicitado, no recibirá la preferencia pero no será penalizado de ninguna otra manera. Si su solicitud fuera elegida, esté preparado para llenar una solicitud más detallada y proporcionar los documentos de apoyo requeridos.",
   "whatToExpect.label": "Lo que puede esperar"
 }

ui-components/src/locales/general.json

@@ -1405,13 +1405,14 @@
   "welcome.findRentalsForMe": "Find rentals for me",
   "welcome.latestListings": "Latest listings",
   "welcome.lastUpdated": "Last updated %{date}",
-  "welcome.cityRegions": "City regions",
+  "welcome.cityRegions": "City Regions",
   "welcome.subTitle": "Click the button below to find rental housing based on your income and household needs",
   "welcome.seeMoreOpportunitiesTruncated": "See more housing opportunities and resources",
   "welcome.signUp": "Get emails whenever a new listing is posted ",
   "welcome.signUpToday": "Sign up today",
   "welcome.viewAdditionalHousing": "View additional housing opportunities and resources",
   "welcome.viewAdditionalHousingTruncated": "View opportunities and resources",
+  "welcome.comingSoonButton": "See all coming soon",
   "whatToExpect.label": "What to Expect",
   "whatToExpect.default": "Applicants will be contacted by the property agent in rank order until vacancies are filled. All of the information that you have provided will be verified and your eligibility confirmed. Your application will be removed from the waitlist if you have made any fraudulent statements. If we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized. Should your application be chosen, be prepared to fill out a more detailed application and provide required supporting documents.",
   "listingFilters.allRentals": "All rentals",