fix: comingSoon in locator results

packages/visual-editor/src/components/Locator.test.tsx

@@ -78,6 +78,7 @@ const createLocatorApiResult = ({
   distance,
   distanceFromFilter,
   services,
+  comingSoon = false,
 }: {
   id: string;
   name: string;
@@ -91,6 +92,7 @@ const createLocatorApiResult = ({
   distance: number;
   distanceFromFilter: number;
   services: string[];
+  comingSoon?: boolean;
 }) => ({
   data: {
     id,
@@ -107,6 +109,7 @@ const createLocatorApiResult = ({
     },
     additionalHoursText: "Holiday hours may vary",
     hours: LOCATOR_TEST_HOURS,
+    comingSoon,
     mainPhone: "+12025550101",
     emails: [`${id}@example.com`],
     services,
@@ -286,7 +289,19 @@ const createLocatorFetchMock = (document: Record<string, any>) => {
 
     if (url.includes("/search/vertical/query")) {
       return new Response(
-        JSON.stringify(createLocatorVerticalSearchResponse(results)),
+        JSON.stringify(
+          createLocatorVerticalSearchResponse(
+            document.comingSoon
+              ? results.map((result: any) => ({
+                  ...result,
+                  data: {
+                    ...result.data,
+                    comingSoon: true,
+                  },
+                }))
+              : results
+          )
+        ),
         {
           status: 200,
         }
@@ -1136,6 +1151,37 @@ const tests: ComponentTest[] = [
     },
     version: 64,
   },
+  {
+    name: "version 74 comingSoon",
+    document: {
+      locale: "en",
+      businessId: "4174974",
+      comingSoon: true,
+      __: {
+        isPrimaryLocale: true,
+      },
+      _env: {
+        ...LOCATOR_TEST_ENV,
+      },
+      _pageset: JSON.stringify({
+        type: "LOCATOR",
+        typeConfig: {
+          locatorConfig: {
+            source: "accounts/4174974/sites/155048/pagesets/locations",
+            experienceKey: "locator-41",
+            entityType: "location",
+          },
+        },
+        config: {
+          urlTemplate: {
+            primary: "[[address.region]]/[[address.city]]/[[address.line1]]",
+          },
+        },
+      }),
+    },
+    props: { ...LocatorComponent.defaultProps },
+    version: 74,
+  },
 ];
 
 const wrappedSelectorValuesMigrationFixture = {

packages/visual-editor/src/components/LocatorResultCard.tsx

@@ -1246,61 +1246,69 @@ const HoursSection = (props: {
   const comingSoon = location["comingSoon"];
   const showHoursSection =
     (hoursData || comingSoon) && hoursProps.liveVisibility;
+  const hoursStatusRow = (
+    <div className="flex flex-row items-center gap-2">
+      {showIcons && (
+        <CardIcon backgroundColor={accentColor}>
+          <FaRegClock className="w-4 h-4" />
+        </CardIcon>
+      )}
+      <HoursStatusAtom
+        hours={(hoursData ?? {}) as HoursType}
+        comingSoon={comingSoon}
+        timezone={location.timezone}
+        className="text-body-fontSize mb-0"
+        showDayNames={false}
+        boldCurrentStatus={true}
+      />
+    </div>
+  );
+
   return (
     showHoursSection && (
       <div className="font-body-fontFamily text-body-fontSize gap-8">
-        <Accordion>
-          <AccordionItem
-            key={`result-${result.index}-hours`}
-            className="py-0"
-            onToggle={(event) => setIsExpanded(event.currentTarget.open)}
-          >
-            <AccordionTrigger
-              id={triggerId}
-              aria-controls={contentId}
-              aria-expanded={isExpanded}
-              className="justify-start"
-              role="button"
-            >
-              <div className="flex flex-row items-center gap-2">
-                {showIcons && (
-                  <CardIcon backgroundColor={accentColor}>
-                    <FaRegClock className="w-4 h-4" />
-                  </CardIcon>
-                )}
-                <HoursStatusAtom
-                  hours={(hoursData ?? {}) as HoursType}
-                  comingSoon={comingSoon}
-                  timezone={location.timezone}
-                  className="text-body-fontSize mb-0"
-                  showDayNames={false}
-                  boldCurrentStatus={true}
-                />
-              </div>
-            </AccordionTrigger>
-            <AccordionContent
-              id={contentId}
-              aria-labelledby={triggerId}
-              role="region"
+        {comingSoon ? (
+          hoursStatusRow
+        ) : (
+          <Accordion>
+            <AccordionItem
+              key={`result-${result.index}-hours`}
+              className="py-0"
+              onToggle={(event) => setIsExpanded(event.currentTarget.open)}
             >
-              <div className="flex flex-col gap-2">
-                <HoursTableAtom
-                  hours={(hoursData ?? {}) as HoursType}
-                  comingSoon={comingSoon}
-                  startOfWeek={hoursProps.table.startOfWeek}
-                  collapseDays={hoursProps.table.collapseDays}
-                  className="[&_.HoursTable-row]:w-fit"
-                />
-                {location.additionalHoursText &&
-                  hoursProps.table.showAdditionalHoursText && (
-                    <div className="text-body-sm-fontSize">
-                      {location.additionalHoursText}
-                    </div>
-                  )}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+              <AccordionTrigger
+                id={triggerId}
+                aria-controls={contentId}
+                aria-expanded={isExpanded}
+                className="justify-start"
+                role="button"
+              >
+                {hoursStatusRow}
+              </AccordionTrigger>
+              <AccordionContent
+                id={contentId}
+                aria-labelledby={triggerId}
+                role="region"
+              >
+                <div className="flex flex-col gap-2">
+                  <HoursTableAtom
+                    hours={(hoursData ?? {}) as HoursType}
+                    comingSoon={comingSoon}
+                    startOfWeek={hoursProps.table.startOfWeek}
+                    collapseDays={hoursProps.table.collapseDays}
+                    className="[&_.HoursTable-row]:w-fit"
+                  />
+                  {location.additionalHoursText &&
+                    hoursProps.table.showAdditionalHoursText && (
+                      <div className="text-body-sm-fontSize">
+                        {location.additionalHoursText}
+                      </div>
+                    )}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
       </div>
     )
   );