feat: Production-Wide 'Super' Alerts in Booking Flow

components/production/editor/ProductionEditor.vue

@@ -125,6 +125,18 @@
             </div>
           </template>
         </form-label>
+        <form-label :errors="errors" name="productionAlert">
+          Production Warnings
+          <template #control>
+            <UiInputText v-model="production.productionAlert" />
+          </template>
+          <template #helper>
+            Production warnings are displayed alongside content warnings when a
+            user is booking a ticket. Only use this field for information that
+            is essential for users to view, but that cannot otherwise be
+            conveyed through content warnings.
+          </template>
+        </form-label>
         <div class="flex items-end">
           <form-label
             class="lg:w-1/4 w-1/5 mr-4"
@@ -387,6 +399,7 @@ export default {
         ageRating: this.production.ageRating,
         facebookEvent: this.production.facebookEvent,
         contactEmail: this.production.contactEmail,
+        productionAlert: this.production.productionAlert,
         contentWarnings: (this.production.contentWarnings ?? []).map((cw) => ({
           id: cw.warning.id,
           information: cw.information

graphql/fragments/production/ProductionBasicInfoFragment.gql

@@ -31,5 +31,6 @@ fragment ProductionBasicInfo on ProductionNode {
       longDescription
     }
   }
+  productionAlert
   isBookable
 }

graphql/queries/admin/productions/AdminProductionEdit.gql

@@ -36,6 +36,7 @@ query adminProductionEdit($slug: String!) {
     }
     ageRating
     facebookEvent
+    productionAlert
     performances(orderBy: "start") {
       edges {
         node {

pages/production/[slug]/book/[performanceId]/warnings.vue

@@ -9,10 +9,18 @@
       class="w-full mb-2"
     >
       <template #subtitle>
-        <span class="text-xl">Performance Information</span>
+        <span class="text-xl">Performance-Specific Information</span>
       </template>
       {{ booking.performance.description }}
     </UiCard>
+    <div v-if="production.productionAlert" class="w-full p-6 pt-3 text-white">
+      <h3 class="text-h3 font-semibold">
+        <font-awesome-icon icon="exclamation-triangle" class="text-sta-rouge" />
+        Production Warnings
+      </h3>
+      <hr class="my-2 border-sta-gray-light" />
+      <p>{{ production.productionAlert }}</p>
+    </div>
     <div class="mb-2 p-6 pt-3 text-white">
       <h3 class="text-h3 font-semibold">
         <font-awesome-icon icon="exclamation-triangle" class="text-sta-rouge" />
@@ -26,7 +34,6 @@
         }}</a
         >.
       </p>
-
       <hr class="my-2 border-sta-gray-light" />
       <content-warnings-display
         :content-warnings="production.contentWarnings"
@@ -51,11 +58,13 @@ import Booking from '~~/classes/Booking';
 import ContentWarningsDisplay from '@/components/production/content-warnings/ContentWarningsDisplay.vue';
 
 const stageInfo = new BookingStage({
-  name: 'Content Warnings',
+  name: 'Performance Warnings',
   routeName: 'production-slug-book-performanceId-warnings',
   shouldBeUsed: (production, booking) => {
     return (
-      production.contentWarnings.length > 0 || booking?.performance?.description
+      production.contentWarnings.length > 0 ||
+      booking?.performance?.description ||
+      production.productionAlert
     );
   }
 });

tests/unit/pages/booking/stages/AudienceWarningsStage.spec.js

@@ -24,13 +24,20 @@ describe('Audience Warnings Stage', () => {
     });
 
     it('doesnt display any production description', () => {
-      expect(warningComponent.text()).to.not.contain('Performance Information');
+      expect(warningComponent.text()).to.not.contain(
+        'Performance-Specific Information'
+      );
       expect(warningComponent.text()).to.not.contain(
         'the performance description'
       );
     });
 
-    it('displays the warnings', () => {
+    it('displays the production warning', () => {
+      expect(warningComponent.text()).to.contain('Production Warnings');
+      expect(warningComponent.text()).to.contain('This is a production alert.');
+    });
+
+    it('displays the content warnings', () => {
       expect(warningComponent.text()).to.contain('Strobe Lighting');
       expect(warningComponent.text()).to.contain('Nudity');
     });
@@ -46,18 +53,30 @@ describe('Audience Warnings Stage', () => {
       warningComponent = await mount(AudienceWarningsStage, {
         shallow: false,
         propsData: {
-          production: Production({ contentWarnings: [] }),
+          production: Production({
+            contentWarnings: [],
+            productionAlert: null
+          }),
           booking: BookingCls.fromAPIData(Booking())
         }
       });
     });
 
     it('displays the production description', () => {
-      expect(warningComponent.text()).to.contain('Performance Information');
+      expect(warningComponent.text()).to.contain(
+        'Performance-Specific Information'
+      );
       expect(warningComponent.text()).to.contain('the performance description');
     });
 
-    it('doesnt display any warnings', () => {
+    it('doesnt display the production warning', () => {
+      expect(warningComponent.text()).to.not.contain('Production Warnings');
+      expect(warningComponent.text()).to.not.contain(
+        'This is a production alert.'
+      );
+    });
+
+    it('doesnt display any content warnings', () => {
       expect(warningComponent.text()).to.not.contain('Strobe Lighting');
       expect(warningComponent.text()).to.not.contain('Nudity');
     });

tests/unit/support/fixtures/Production.js

@@ -41,6 +41,7 @@ export default (overrides = {}, includePerformance = false) => {
         { warning: { shortDescription: 'Strobe Lighting' } },
         { warning: { shortDescription: 'Nudity' } }
       ],
+      productionAlert: 'This is a production alert.',
       performances: includePerformance
         ? GenericNodeConnection([Performance()])
         : GenericNodeConnection()