From bdce60ca3e39256754670d646eace0674c031a40 Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Tue, 2 Jul 2024 11:01:03 +1000
Subject: [PATCH 1/2] feat(@dpc-sdp/nuxt-ripple): add custom content rating
 text

---
 .../features/site/shared-elements.feature     | 22 +++++++++++++
 .../test/fixtures/site/shared-elements.json   |  1 +
 .../nuxt-ripple/components/TideBaseLayout.vue |  1 +
 .../components/TideContentRating.vue          | 17 +++++-----
 packages/nuxt-ripple/mapping/site/index.ts    |  4 +++
 .../common/shared-elements.ts                 | 31 +++++++++++++++++++
 packages/ripple-tide-api/types.d.ts           |  1 +
 7 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/examples/nuxt-app/test/features/site/shared-elements.feature b/examples/nuxt-app/test/features/site/shared-elements.feature
index 0f967b88eb..6fea7fa727 100644
--- a/examples/nuxt-app/test/features/site/shared-elements.feature
+++ b/examples/nuxt-app/test/features/site/shared-elements.feature
@@ -83,6 +83,28 @@ Feature: Shared site elements
       | Demo Topic | /topic/demo-topic |
       | Demo Tag   | /tags/demo-tag    |
 
+  @mockserver
+  Scenario: Content Rating (visible)
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And I load the page fixture with "/landingpage/home"
+    And the content rating form is enabled
+    Then the page endpoint for path "/page" returns the loaded fixture
+
+    Given I visit the page "/page"
+    Then the content rating form should be displayed
+    And I click the content rating option labelled "Yes"
+    Then the content rating form should display the custom text "Test custom rating text."
+
+  @mockserver
+  Scenario: Content Rating (hidden)
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And I load the page fixture with "/landingpage/home"
+    And the content rating form is disabled
+    Then the page endpoint for path "/page" returns the loaded fixture
+
+    Given I visit the page "/page"
+    Then the content rating form should not be displayed
+
   @mockserver
   Scenario: Footer
     Given the site endpoint returns fixture "/site/shared-elements" with status 200
diff --git a/examples/nuxt-app/test/fixtures/site/shared-elements.json b/examples/nuxt-app/test/fixtures/site/shared-elements.json
index c36fd0fd43..4a4c9fa138 100644
--- a/examples/nuxt-app/test/fixtures/site/shared-elements.json
+++ b/examples/nuxt-app/test/fixtures/site/shared-elements.json
@@ -5,6 +5,7 @@
   "acknowledgementHeader": "The Victorian Government acknowledges Aboriginal Traditional Owners of Country throughout Victoria and pays respect to their cultures and Elders past, present and emerging.",
   "acknowledgementFooter": "Test footer acknowledgement",
   "copyrightHtml": "<p>Test <strong>footer</strong> copyright html</p>",
+  "contentRatingText": "<p>Test custom rating text.</p>",
   "footerLogos": [
     {
       "alt": "Test logo 1",
diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
index 127e820deb..6d89d9a48d 100644
--- a/packages/nuxt-ripple/components/TideBaseLayout.vue
+++ b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -63,6 +63,7 @@
       <slot name="belowBody"></slot>
       <TideContentRating
         v-if="showContentRating"
+        :contentRatingText="site?.contentRatingText"
         :siteSectionName="siteSection ? siteSection.name : ''"
       />
     </template>
diff --git a/packages/nuxt-ripple/components/TideContentRating.vue b/packages/nuxt-ripple/components/TideContentRating.vue
index 7c10483b19..4bc9015bc9 100644
--- a/packages/nuxt-ripple/components/TideContentRating.vue
+++ b/packages/nuxt-ripple/components/TideContentRating.vue
@@ -3,10 +3,12 @@ import { onMounted, ref } from 'vue'
 
 interface Props {
   siteSectionName: string
+  contentRatingText: string
 }
 
 withDefaults(defineProps<Props>(), {
-  siteSectionName: ''
+  siteSectionName: '',
+  contentRatingText: ''
 })
 
 // This is an actual webform that exists in drupal
@@ -78,14 +80,11 @@ onMounted(() => {
                       matches: 'You must enter between 1 and 500 words'
                     }"
                   />
-                  <RplContent>
-                    <p>
-                      If you need a response, please use our
-                      <RplTextLink url="/contact-us"
-                        >contact us form</RplTextLink
-                      >.
-                    </p>
-                  </RplContent>
+                  <RplContent
+                    v-if="contentRatingText"
+                    :html="contentRatingText"
+                    class="tide-content-rating__text"
+                  />
                   <FormKit
                     v-if="value.was_this_page_helpful"
                     type="RplFormActions"
diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
index 595cd8945a..936d094456 100644
--- a/packages/nuxt-ripple/mapping/site/index.ts
+++ b/packages/nuxt-ripple/mapping/site/index.ts
@@ -1,6 +1,7 @@
 import {
   getImageFromField,
   getBody,
+  getBodyFromField,
   getLinkFromField,
   getSiteKeyValues,
   TideSiteApi
@@ -42,6 +43,9 @@ export default {
       bottom: (src: any) =>
         getImageFromField(src, 'field_bottom_corner_graphic')
     },
+    contentRatingText: (src: any) => {
+      return getBodyFromField(src, 'field_additional_comment')
+    },
     acknowledgementFooter: 'field_acknowledgement_to_country',
     copyrightHtml: (src: any) => {
       return getBody(src.field_site_footer_text?.processed)
diff --git a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts
index d28b2e372a..a2bcdf325c 100644
--- a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts
+++ b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts
@@ -241,6 +241,37 @@ Then('the quick exit should not be displayed', () => {
   cy.get('.rpl-primary-nav__quick-exit').should('not.exist')
 })
 
+Then('the content rating form should be displayed', () => {
+  cy.get('.tide-content-rating').should('be.visible')
+})
+
+Then('the content rating form should not be displayed', () => {
+  cy.get('.tide-content-rating').should('not.exist')
+})
+
+Then(
+  'the content rating form should display the custom text {string}',
+  (text: string) => {
+    cy.get('.tide-content-rating__text').should('have.text', text)
+  }
+)
+
+Then('I click the content rating option labelled {string}', (label: string) => {
+  cy.get('.tide-content-rating label').contains(label).click()
+})
+
+Given('the content rating form is enabled', () => {
+  cy.get('@pageFixture').then((response) => {
+    set(response, 'showContentRating', true)
+  })
+})
+
+Given('the content rating form is disabled', () => {
+  cy.get('@pageFixture').then((response) => {
+    set(response, 'showContentRating', false)
+  })
+})
+
 Given('the site sections share links are set to included WhatsApp', () => {
   cy.get('@pageFixture').then((response) => {
     set(
diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
index d185e7c0be..648fc3ba1e 100644
--- a/packages/ripple-tide-api/types.d.ts
+++ b/packages/ripple-tide-api/types.d.ts
@@ -30,6 +30,7 @@ export interface TideSiteData {
     top?: TideImageField
     bottom?: TideImageField
   }
+  contentRatingText?: string
   acknowledgementHeader?: string
   acknowledgementFooter: string
   copyrightHtml: string

From 28d0cdce5d3cc05e21baba95a4fd9ab99ec78dd0 Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Mon, 15 Jul 2024 10:43:53 +1000
Subject: [PATCH 2/2] feat(@dpc-sdp/nuxt-ripple): add fallback for legacy tide
 versions

---
 packages/nuxt-ripple/mapping/site/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
index 936d094456..202119b2c4 100644
--- a/packages/nuxt-ripple/mapping/site/index.ts
+++ b/packages/nuxt-ripple/mapping/site/index.ts
@@ -44,7 +44,9 @@ export default {
         getImageFromField(src, 'field_bottom_corner_graphic')
     },
     contentRatingText: (src: any) => {
-      return getBodyFromField(src, 'field_additional_comment')
+      return src.hasOwnProperty('field_additional_comment')
+        ? getBodyFromField(src, 'field_additional_comment')
+        : '<p>If you need a response, please use our <a href="/contact-us" class="rpl-text-link rpl-u-focusable-inline">contact us form</a>.</p>'
     },
     acknowledgementFooter: 'field_acknowledgement_to_country',
     copyrightHtml: (src: any) => {