fix: APPS-3004 Fix Location links in component BlockEventDetail (#635)

* update stories & component * fix default links * update default links * update default links * update target-link to blank * linting * update == to === * Fix linting errors * fix parsedTheme * load fonts to percy before snapshot is taken in BlockDetail & RchText * update the specs to load the fonts before the snapshot in these components BannerFeatured, ButtonShow, Flexible_CardWithImage, Flexible_MediaWithText * update the specs to load the fonts before the snapshot in these components BannerFeatured, ButtonShow, Flexible_CardWithImage, Flexible_MediaWithText * add cypress custom command and update specs * add another lint in the files to wait for the fonts * trying waitForFonts * trying waitForFonts * update the preview ts to vue decorator * revert all changes that tried to fix the percy snapshot to preload the fonts * revert all changes that tried to fix the percy snapshot to preload the fonts * revert all changes that tried to fix the percy snapshot to preload the fonts
UCLALibrary · Oct 18, 2024 · 5546329 · 5546329 · github-actions · Oct 18, 2024
1 parent 537326b
commit 5546329
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 38 deletions.
diff --git a/src/lib-components/BlockEventDetail.vue b/src/lib-components/BlockEventDetail.vue
@@ -19,6 +19,7 @@ interface BlockEventDetailLocation {
   title: string
   url?: string
   uri?: string
+  publicUrl?: string
 }
 
 const { startDate, endDate, time, ongoing, locations } = defineProps({
@@ -63,6 +64,10 @@ const themeSettings = computed(() => {
   }
 })
 
+const parsedTarget = computed(() => {
+  return theme?.value === 'ftva' ? '_blank' : ''
+})
+
 // Display date based on which data is provided
 const parsedDateDisplay = computed(() => {
   if (ongoing)
@@ -80,11 +85,17 @@ const parsedDateDisplay = computed(() => {
   <div :class="classes">
     <div class="event-list date">
       <span>
-        <SvgIconCalendar v-if="startDate" class="row-icon" /> {{ parsedDateDisplay }}
+        <SvgIconCalendar
+          v-if="startDate"
+          class="row-icon"
+        /> {{ parsedDateDisplay }}
       </span>
     </div>
 
-    <div v-if="time" class="event-list time">
+    <div
+      v-if="time"
+      class="event-list time"
+    >
       <span>
         <SvgIconClock class="row-icon" /> {{ formatTimes(time, time) }}
       </span>
@@ -96,31 +107,42 @@ const parsedDateDisplay = computed(() => {
     >
       <span>
         <SvgIconLocation class="row-icon" />
+
         <span v-if="themeSettings?.multiLocationMsgDisplay && locations.length > 1">
           Multiple Locations
         </span>
-        <span v-else class="locations-wrapper">
+
+        <span v-else-if="themeSettings?.multiLocationMsgDisplay && locations.length === 1">
+          <SmartLink
+            :to="locations[0].publicUrl"
+            :link-target="parsedTarget"
+          >
+            {{ locations[0].title }}
+          </SmartLink>
+        </span>
+
+        <span
+          v-else
+          class="locations-wrapper"
+        >
           <span
             v-for="(location, index) in locations"
             :key="location.title"
             class="location-link"
           >
             <SmartLink
-              :to="location.title"
-              :link-target="location.uri ? location.uri : ''"
+              :to="location.url"
+              :link-target="parsedTarget"
             >
               {{ location.title }}
             </SmartLink>
-            {{ index
-              < locations.length
-              - 1
-              ? ', '
-              : ''
-            }}
+
+            {{ index < locations.length - 1 ? ', ' : '' }}
           </span>
         </span>
       </span>
     </div>
+
     <slot />
   </div>
 </template>

diff --git a/src/stories/BlockEventDetail.stories.js b/src/stories/BlockEventDetail.stories.js
@@ -17,15 +17,30 @@ const mockEventDetailData = {
   location: [
     {
       id: '195746',
-      title: 'Billy Wilder Theater',
-      url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
-      uri: 'locations/billy-wilder-theater'
+      title: 'LA Opera',
+      url: 'https://www.laopera.org',
     },
     {
       id: '195746',
-      title: 'Other Location',
-      url: 'https://test-craft.library.ucla.edu/locations/other-locations',
-      uri: 'locations/somelocation'
+      title: 'Pasadena Symphony',
+      url: 'https://pasadenasymphony-pops.org',
+    }
+  ]
+}
+
+const mockFtvaEventDetailData = {
+  id: '2847944',
+  typeHandle: 'ftvaEvent',
+  title: 'La Région Centrale 03-08-24',
+  startDateWithTime: '2024-03-09T03:30:00+00:00',
+  location: [
+    {
+      title: 'Billy Wilder Theater',
+      publicUrl: 'https://cinema.ucla.edu/billy-wilder-theater',
+    },
+    {
+      title: 'Vidiots',
+      publicUrl: 'https://vidiotsfoundation.org/',
     }
   ]
 }
@@ -41,18 +56,32 @@ const mockEventSeriesData = {
     {
       id: '195746',
       title: 'Billy Wilder Theater',
-      url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
-      uri: 'locations/billy-wilder-theater'
+      publicUrl: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater'
     },
     {
       id: '195746',
       title: 'Other Location',
-      url: 'https://test-craft.library.ucla.edu/locations/other-locations',
-      uri: 'locations/somelocation'
+      publicUrl: 'https://test-craft.library.ucla.edu/locations/other-locations'
     }
   ]
 }
 
+const mockFtvaSeriesDetailDataRange = {
+  id: '2847944',
+  typeHandle: 'eventSeries',
+  title: 'The Films of Michael Snow',
+  startDate: '2027-03-06T00:00',
+  endDate: '2027-09-17T00:00',
+  ongoing: false,
+  location: [
+    {
+      title: 'Billy Wilder Theater',
+      publicUrl: 'https://www.cinema.ucla.edu/billy-wilder-theater',
+    }
+  ]
+}
+
+// STORIES
 export function Default() {
   return {
     data() {
@@ -65,19 +94,37 @@ export function Default() {
     <block-event-detail
       :startDate="data.startDateWithTime"
       :time="data.startDateWithTime"
-      :locations="data.location"
+      :locations="[data.location[0]]"
     />
     `,
   }
 }
 
-export function FTVAMultipleLocations() {
+export function MoreThanOneLocation() {
   return {
     data() {
       return {
         data: mockEventDetailData,
       }
     },
+    components: { BlockEventDetail },
+    template: `
+    <block-event-detail
+      :startDate="data.startDateWithTime"
+      :time="data.startDateWithTime"
+      :locations="data.location"
+    />
+    `,
+  }
+}
+
+export function FtvaOneLocation() {
+  return {
+    data() {
+      return {
+        data: mockFtvaEventDetailData,
+      }
+    },
     provide() {
       return {
         theme: computed(() => 'ftva'),
@@ -88,17 +135,17 @@ export function FTVAMultipleLocations() {
     <block-event-detail
       :startDate="data.startDateWithTime"
       :time="data.startDateWithTime"
-      :locations="data.location"
+      :locations="[data.location[0]]"
     />
     `,
   }
 }
 
-export function FTVAOneLocation() {
+export function FtvaMultipleLocations() {
   return {
     data() {
       return {
-        data: mockEventDetailData,
+        data: mockFtvaEventDetailData,
       }
     },
     provide() {
@@ -111,7 +158,7 @@ export function FTVAOneLocation() {
     <block-event-detail
       :startDate="data.startDateWithTime"
       :time="data.startDateWithTime"
-      :locations="[data.location[0]]"
+      :locations="data.location"
     />
     `,
   }
@@ -121,7 +168,7 @@ export function FtvaNoLocation() {
   return {
     data() {
       return {
-        data: mockEventDetailData,
+        data: mockFtvaEventDetailData,
       }
     },
     provide() {
@@ -140,11 +187,11 @@ export function FtvaNoLocation() {
   }
 }
 
-export function EventSeries() {
+export function FtvaDateRange() {
   return {
     data() {
       return {
-        data: mockEventSeriesData,
+        data: mockFtvaSeriesDetailDataRange,
       }
     },
     provide() {
@@ -154,21 +201,21 @@ export function EventSeries() {
     },
     components: { BlockEventDetail },
     template: `
-    <block-event-detail
-      :startDate="data.startDateWithTime"
-      :endDate="data.endDate"
-      :ongoing="data.ongoing"
-      :locations="data.location"
-    />
+      <BlockEventDetail
+        :start-date="data.startDate"
+        :end-date="data.endDate"
+        :ongoing="data.ongoing"
+        :locations="data.location"
+      />
     `,
   }
 }
 
-export function EventSeriesOngoing() {
+export function FtvaOngoing() {
   return {
     data() {
       return {
-        data: mockEventSeriesData,
+        data: mockFtvaEventDetailData,
       }
     },
     provide() {