refactor: map feature toggle (#994)

.github/workflows/cypress_public.yml

@@ -41,6 +41,7 @@ env:
   SHOW_PUBLIC_LOTTERY: "TRUE"
   GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
   GOOGLE_MAPS_MAP_ID: ${{ secrets.GOOGLE_MAPS_MAP_ID }}
+  SHOW_ALL_MAP_PINS: "TRUE"
 
 jobs:
   public-cypress:

api/src/controllers/listing.controller.ts

@@ -251,6 +251,7 @@ export class ListingController {
       listingId,
       language,
       queryParams.view,
+      queryParams.combined,
     );
   }
 }

api/src/dtos/listings/listings-retrieve-params.dto.ts

@@ -15,4 +15,11 @@ export class ListingsRetrieveParams {
     groups: [ValidationsGroupsEnum.default],
   })
   view?: ListingViews;
+
+  @Expose()
+  @ApiPropertyOptional({
+    type: Boolean,
+    example: true,
+  })
+  combined?: boolean;
 }

api/src/services/listing.service.ts

@@ -650,8 +650,11 @@ export class ListingService implements OnModuleInit {
     listingId: string,
     lang: LanguagesEnum = LanguagesEnum.en,
     view: ListingViews = ListingViews.full,
+    combined?: boolean,
   ): Promise<Listing> {
-    const listingRaw = await this.findOrThrow(listingId, view);
+    const listingRaw = combined
+      ? await this.findOrThrowCombined(listingId)
+      : await this.findOrThrow(listingId, view);
 
     let result = mapTo(Listing, listingRaw);
 
@@ -1318,6 +1321,21 @@ export class ListingService implements OnModuleInit {
     return listing;
   }
 
+  async findOrThrowCombined(id: string) {
+    const listing = await this.prisma.combinedListings.findUnique({
+      where: {
+        id,
+      },
+    });
+
+    if (!listing) {
+      throw new NotFoundException(
+        `listingId ${id} was requested but not found`,
+      );
+    }
+    return listing;
+  }
+
   /*
     This should be run for all address fields on an update of a listing.
     The address either needs to be updated if fields are changed, deleted if no longer attached,

ci/buildspec/build_public.yml

@@ -47,6 +47,7 @@ phases:
         --build-arg "API_PASS_KEY=${API_PASS_KEY}"
         --build-arg "GOOGLE_MAPS_API_KEY=${GOOGLE_MAPS_API_KEY}"
         --build-arg "GOOGLE_MAPS_MAP_ID=${GOOGLE_MAPS_MAP_ID}"
+        --build-arg "SHOW_ALL_MAP_PINS=${SHOW_ALL_MAP_PINS}"
         --target test
         -t sites/public:test
         .
@@ -78,6 +79,7 @@ phases:
         --build-arg "API_PASS_KEY=${API_PASS_KEY}"
         --build-arg "GOOGLE_MAPS_API_KEY=${GOOGLE_MAPS_API_KEY}"
         --build-arg "GOOGLE_MAPS_MAP_ID=${GOOGLE_MAPS_MAP_ID}"
+        --build-arg "SHOW_ALL_MAP_PINS=${SHOW_ALL_MAP_PINS}"
         --target run
         -t sites/public:run-candidate
         .

shared-helpers/src/types/backend-swagger.ts

@@ -351,6 +351,8 @@ export class ListingsService {
       id: string
       /**  */
       view?: ListingViews
+      /**  */
+      combined?: boolean
     } = {} as any,
     options: IRequestOptions = {}
   ): Promise<string> {
@@ -359,7 +361,7 @@ export class ListingsService {
       url = url.replace("{id}", params["id"] + "")
 
       const configs: IRequestConfig = getConfigs("get", "application/json", url, options)
-      configs.params = { view: params["view"] }
+      configs.params = { view: params["view"], combined: params["combined"] }
 
       /** 适配ios13，get请求不允许带body */
 
@@ -438,6 +440,8 @@ export class ListingsService {
       id: string
       /**  */
       view?: ListingViews
+      /**  */
+      combined?: boolean
     } = {} as any,
     options: IRequestOptions = {}
   ): Promise<Listing> {
@@ -446,7 +450,7 @@ export class ListingsService {
       url = url.replace("{id}", params["id"] + "")
 
       const configs: IRequestConfig = getConfigs("get", "application/json", url, options)
-      configs.params = { view: params["view"] }
+      configs.params = { view: params["view"], combined: params["combined"] }
 
       /** 适配ios13，get请求不允许带body */
 
@@ -2934,6 +2938,9 @@ export interface ListingsQueryParams {
 export interface ListingsRetrieveParams {
   /**  */
   view?: ListingViews
+
+  /**  */
+  combined?: boolean
 }
 
 export interface PaginationAllowsAllQueryParams {

sites/public/.env.template

@@ -38,6 +38,7 @@ SHOW_PWDLESS=TRUE
 BLOOM_API_BASE=https://api.housingbayarea.bloom.exygy.dev
 GOOGLE_MAPS_API_KEY=SUPER_SECRET_KEY
 GOOGLE_MAPS_MAP_ID=
+SHOW_ALL_MAP_PINS=
 
 
 # API passkey, requests missing this will not be alllowed to progress

sites/public/package.json

@@ -51,6 +51,7 @@
     "react-dom": "18.2.0",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hook-form": "^6.15.5",
+    "react-swipeable": "^7.0.2",
     "tailwindcss": "2.2.10",
     "tough-cookie": "4.1.3",
     "winston": "^3.13.0"

sites/public/src/components/listings/ListingsCombinedDeprecated.module.scss

@@ -0,0 +1,118 @@
+.swipe-area {
+  display: none;
+
+  @media (max-width: $screen-md) {
+    display: block;
+    position: absolute;
+    top: 0;
+    height: 3.25rem;
+    width: 100%;
+    z-index: var(--seeds-z-index-overlay);
+    background-color: var(--background-color);
+    border-top-left-radius: var(--bloom-rounded-3xl);
+    border-top-right-radius: var(--bloom-rounded-3xl);
+  }
+}
+
+.swipe-area-bottom {
+  display: none;
+
+  @media (max-width: $screen-md) {
+    display: block;
+    position: absolute;
+    top: calc(var(--listings-component-height));
+    height: 3.25rem;
+    width: 100%;
+    z-index: var(--seeds-z-index-overlay);
+    background-color: var(--background-color);
+    border-top-left-radius: var(--bloom-rounded-3xl);
+    border-top-right-radius: var(--bloom-rounded-3xl);
+  }
+}
+
+.swipe-area-line {
+  display: none;
+
+  @media (max-width: $screen-md) {
+    display: block;
+    width: 30%;
+    margin-left: 35%;
+    margin-right: 35%;
+    margin-top: var(--bloom-s4);
+    border-top: 1px solid var(--line-color);
+  }
+}
+
+.listings-list-deprecated {
+  overflow-y: auto;
+  width: var(--listings-list-width);
+
+  @media (max-width: $screen-md) {
+    padding-top: 0;
+    z-index: 1;
+    top: var(--seeds-s10);
+    width: 100%;
+    overflow-y: auto;
+    background-color: var(--background-color);
+    display: block;
+    position: static;
+    z-index: 1;
+    height: calc(100dvh - 370px);
+    overflow-y: auto;
+    background-color: var(--background-color);
+  }
+}
+
+.listings-outer-container-deprecated {
+  overflow-y: auto;
+  width: var(--listings-list-width);
+
+  @media (max-width: $screen-md) {
+    position: absolute;
+    max-height: var(--listings-component-height-mobile);
+    z-index: 1;
+    top: calc(calc(calc(100vh - 183px) / 2));
+    width: 100%;
+    border-top-left-radius: var(--bloom-rounded-3xl);
+    border-top-right-radius: var(--bloom-rounded-3xl);
+  }
+}
+
+.listings-list-wrapper-deprecated {
+  @media (max-width: $screen-md) {
+    padding-top: var(--seeds-s10);
+  }
+}
+
+.listings-list-expanded-deprecated {
+  overflow-y: auto;
+  width: var(--listings-list-width);
+
+  @media (max-width: $screen-md) {
+    margin-top: var(--seeds-s4);
+    z-index: 1;
+    top: var(--seeds-s10);
+    width: 100%;
+    overflow-y: auto;
+    background-color: var(--background-color);
+    display: block;
+    position: static;
+    z-index: 1;
+    height: calc(100dvh - 230px);
+    overflow-y: auto;
+    background-color: var(--background-color);
+  }
+}
+
+.listings-map-deprecated {
+  flex: 1;
+  position: relative;
+  display: flex;
+  height: 100%;
+  @media (max-width: $screen-md) {
+    position: absolute;
+    z-index: 0;
+    height: calc(100dvh - 230px);
+    width: 100%;
+  }
+}