feat: APPS-2743 Assemble the EventDetail page

app.vue

@@ -1,6 +1,9 @@
 <script setup>
+import { provideTheme } from '@/composables/provideTheme'
+provideTheme()
 const { enabled, state } = usePreviewMode()
 </script>
+
 <template>
   <div>
     <NuxtLoadingIndicator

composables/provideTheme.js

@@ -0,0 +1,3 @@
+export function provideTheme() {
+  provide('theme', computed(() => 'ftva'))
+}

cypress/e2e/eventDetailPage.cy.js

@@ -0,0 +1,9 @@
+describe('Event Detail page', () => {
+  it('Visit a event Detail Page', () => {
+    cy.visit('/events/la-région-centrale-03-08-24')
+
+    cy.get('h3.title-no-link').should('contain', 'TEST - La Région Centrale')
+
+    cy.percySnapshot({ widths: [768, 992, 1200] })
+  })
+})

cypress/e2e/homepage.cy.js

@@ -4,14 +4,15 @@ describe('Website Homepage', () => {
     cy.viewport(1200, 1200)
 
     // UCLA brand
-    cy.get('.site-brand-bar').should('be.visible')
+    // TODO Un comment this once header and footer are added back to default layout file.
+    /* cy.get('.site-brand-bar').should('be.visible')
     cy.get('.visually-hidden').should('contain', 'UCLA Home')
     cy.get('.ucla-logo')
       .parent()
       .should('have.attr', 'href', 'https://www.ucla.edu')
     cy.get('.svg__logo-library')
       .parent()
-      .should('have.attr', 'href', 'https://www.library.ucla.edu')
+      .should('have.attr', 'href', 'https://www.library.ucla.edu') */
 
     // cy.get('a.logo-ucla')
     //   .should('have.attr', 'href', 'https://www.library.ucla.edu')

gql/queries/FTVAEventDetail.gql

@@ -6,6 +6,7 @@ query FTVAEventDetail($slug: [String!]) {
     typeHandle
     slug
     uri
+
     imageCarousel {
       ...on imageCarousel_imageCarousel_BlockType {
         image {
@@ -27,6 +28,28 @@ query FTVAEventDetail($slug: [String!]) {
     guestSpeaker
     acknowledements: richText
 
+    ftvaEventScreeningDetails {
+      ...on ftvaEventScreeningDetails_screeningDetails_BlockType {
+        screeningTitle
+        alternateTitle
+        languageTranslated
+        year
+        country
+        languageInfo
+        runtime
+        screeningTags {
+          title
+        }
+        descriptionOfScreening
+        trailer
+        image {
+          ...on mediaAndDocuments_Asset {
+            ...Image
+          }
+        }
+      }
+    }
+
     # SIDEBAR
     # BlockEventDetail
     startDateWithTime
@@ -38,43 +61,21 @@ query FTVAEventDetail($slug: [String!]) {
       publicUrl
       address
     }
+
     # BlockInfo / Ticket Info
     ftvaTicketInformation {
-      id
       title
       uri
     }
-
     ftvaEventRegistration {
       ...on ftvaEventRegistration_eventRegistration_BlockType {
         registrationText
         registrationUrlLink
       }
     }
-
-    ftvaEventScreeningDetails {
-      ...on ftvaEventScreeningDetails_screeningDetails_BlockType {
-        screeningTitle
-        alternateTitle
-        languageTranslated
-        year
-        country
-        languageInfo
-        runtime
-        screeningTags {
-          title
-        }
-        descriptionOfScreening
-        trailer
-        image {
-          ...on mediaAndDocuments_Asset {
-            ...Image
-          }
-        }
-      }
-    }
   }
 
+  # SectionTeaserCard
   ftvaEventSeries: entries(
     section: "ftvaEventSeries",  orderBy: "postDate",
     relatedToEntries: {section: "ftvaEvent", slug: $slug}) {
@@ -85,12 +86,11 @@ query FTVAEventDetail($slug: [String!]) {
       title
       ftvaEvent {
         ... on ftvaEvent_ftvaEvent_Entry {
-        id
-        title
-        startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
-        startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
-
-          ftvaImage {
+          id
+          title
+          startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
+          startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
+          media: ftvaImage {
             ...Image
           }
         }

layouts/default.vue

@@ -24,7 +24,7 @@ const classes = computed(() => {
 </script>
 <template lang="html">
   <div :class="classes">
-    <header
+    <!--header
       v-show="!isMobile"
       class="header-main"
     >
@@ -49,17 +49,17 @@ const classes = computed(() => {
         title="Film And Telivision Archive"
         acronym="FTVA"
       />
-    </header>
+    </header-->
 
     <slot />
 
-    <footer>
+    <!--footer>
       <footer-primary
         v-if="globalStore.footerPrimary"
         :form="false"
       />
       <footer-sock v-if="globalStore.footerSock" />
-    </footer>
+    </footer-->
   </div>
 </template>
 <style lang="scss" scoped>

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "meap-website-nuxt",
+	"name": "ftva-website-nuxt",
 	"type": "module",
 	"scripts": {
 		"build": "nuxt build",
@@ -38,7 +38,7 @@
 		"lodash": "^4.17.21",
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
-		"ucla-library-design-tokens": "^5.12.6",
-		"ucla-library-website-components": "2.39.0-alpha.100"
+		"ucla-library-design-tokens": "^5.20.0",
+		"ucla-library-website-components": "3.5.0"
 	}
 }