Merge pull request #826 from dpc-sdp/feature/openforms

Adds openforms support

examples/nuxt-app/test/features/landingpage/openforms.feature

@@ -0,0 +1,14 @@
+Feature: Openforms
+
+  As a citizens I can submit forms that contain sensitive data to Openforms
+
+  Background:
+    Given the page endpoint for path "/" returns fixture "/landingpage/openforms" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/"
+
+  @mockserver
+  Scenario: Renders form
+    Given I visit the page "/"
+    Then there is an openforms embed with the url "https://au.openforms.com/Form/3e7396c7-dbaf-4276-be99-833d9b64c701"
+    And the openforms iframe height is at least 1890

examples/nuxt-app/test/fixtures/landingpage/openforms.json

@@ -0,0 +1,87 @@
+{
+  "title": "test openforms",
+  "changed": "2023-08-31T14:42:34+10:00",
+  "created": "2023-08-31T14:42:34+10:00",
+  "type": "landing_page",
+  "nid": "52bc2168-a1b2-4cf2-bfaa-2766e6d8f18f",
+  "sidebar": {
+    "contacts": [],
+    "relatedLinks": [],
+    "whatsNext": [],
+    "socialShareNetworks": ["Facebook", "Twitter", "LinkedIn"],
+    "siteSectionNav": null
+  },
+  "status": "published",
+  "topicTags": [
+    {
+      "text": "Another Demo Topic",
+      "url": "/topic/another-demo-topic"
+    }
+  ],
+  "siteSection": {
+    "id": 4,
+    "name": "vic.gov.au"
+  },
+  "meta": {
+    "url": "/test-openforms",
+    "langcode": "en",
+    "description": "sdfsdf",
+    "additional": [
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "test openforms | Victorian Government"
+        }
+      },
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.vic.gov.au/test-openforms"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": null
+  },
+  "showContentRating": true,
+  "summary": "sdfsdf",
+  "showHeroAcknowledgement": false,
+  "showInPageNav": false,
+  "showHeroImageCaption": false,
+  "showTopicTags": true,
+  "inPageNavHeadingLevel": "h2",
+  "background": "default",
+  "header": {
+    "title": "test openforms",
+    "summary": "",
+    "links": {
+      "title": "",
+      "items": [],
+      "more": null
+    },
+    "backgroundImageCaption": "",
+    "theme": "default",
+    "logoImage": null,
+    "backgroundImage": null,
+    "cornerTop": null,
+    "cornerBottom": null,
+    "primaryAction": null,
+    "secondaryAction": null,
+    "secondaryActionLabel": ""
+  },
+  "primaryCampaign": null,
+  "secondaryCampaign": null,
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "051fbf96-4722-488e-8409-6a8ced4e55db",
+      "component": "TideLandingPageOpenForms",
+      "id": "2197735",
+      "props": {
+        "formLink": "https://au.openforms.com/Form/3e7396c7-dbaf-4276-be99-833d9b64c701"
+      }
+    }
+  ]
+}

packages/ripple-test-utils/step_definitions/components/forms.ts

@@ -338,3 +338,15 @@ Then(
     })
   }
 )
+
+// Open forms
+
+Then('there is an openforms embed with the url {string}', (url: string) => {
+  cy.get(`iframe[src^="${url}"]`).should('exist')
+})
+
+Then('the openforms iframe height is at least {int}', (height: number) => {
+  cy.get(`.tide-open-form iframe`).invoke('height').as('iframeHeight')
+  cy.wait(4000)
+  cy.get('@iframeHeight').should('be.at.least', height)
+})

packages/ripple-tide-landing-page/components/global/TideLandingPage/OpenForms.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="tide-open-form">
+    <a class="openforms-embed tide-open-form__link" :href="formLink"
+      >Click here to view form.</a
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  formLink: string
+}
+
+withDefaults(defineProps<Props>(), {})
+
+onMounted(() => {
+  let openFormsEmbedScript = document.createElement('script')
+  openFormsEmbedScript.setAttribute(
+    'src',
+    'https://au.openforms.com/Scripts/embed-iframe.js?immediate=true'
+  )
+  document.head.appendChild(openFormsEmbedScript)
+})
+</script>
+
+<style></style>

packages/ripple-tide-landing-page/mapping/components.ts

@@ -15,6 +15,7 @@ import webformMapping from './components/webforms/webforms-mapping'
 import complexImageMapping from './components/complex-image/complex-image-mapping'
 import dataTableMapping from './components/data-table/data-table-mapping'
 import compactCardsMapping from './components/compact-cards/compact-cards-mapping'
+import openFormsMapping from './components/openforms/openforms-mapping'
 
 export default {
   'paragraph--basic_text': basicTextMapping,
@@ -33,5 +34,6 @@ export default {
   'paragraph--embedded_webform': webformMapping,
   'paragraph--complex_image': complexImageMapping,
   'paragraph--data_table': dataTableMapping,
-  'paragraph--compact_card_collection': compactCardsMapping
+  'paragraph--compact_card_collection': compactCardsMapping,
+  'paragraph--form_embed_openforms': openFormsMapping
 }

packages/ripple-tide-landing-page/mapping/components/openforms/openforms-mapping.test.ts

@@ -0,0 +1,48 @@
+import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
+import { expect, describe, it } from '@jest/globals'
+import { openFormsMapping, ITideOpenForms } from './openforms-mapping'
+
+const rawData = {
+  links: {
+    self: {
+      href: 'https://develop.content.vic.gov.au/api/v1/paragraph/form_embed_openforms/051fbf96-4722-488e-8409-6a8ced4e55db?resourceVersion=id%3A4187158'
+    }
+  },
+  meta: {
+    target_revision_id: 4187158,
+    drupal_internal__target_id: 2197735
+  },
+  drupal_internal__id: 2197735,
+  drupal_internal__revision_id: 4187158,
+  langcode: 'en',
+  status: true,
+  created: '2023-08-31T04:41:47+00:00',
+  parent_id: '34793',
+  parent_type: 'node',
+  parent_field_name: 'field_landing_page_component',
+  behavior_settings: [],
+  default_langcode: true,
+  revision_translation_affected: true,
+  field_form_link: {
+    uri: 'https://au.openforms.com/Form/e3942530-e860-476c-a349-b04e013c5e0f',
+    title: '',
+    options: []
+  },
+  id: '051fbf96-4722-488e-8409-6a8ced4e55db',
+  type: 'paragraph--form_embed_openforms'
+}
+
+describe('openformsMapping', () => {
+  it('maps a raw json api response to the correct structure', () => {
+    const result: TideDynamicPageComponent<ITideOpenForms> = {
+      component: 'TideLandingPageOpenForms',
+      id: '2197735',
+      props: {
+        formLink:
+          'https://au.openforms.com/Form/e3942530-e860-476c-a349-b04e013c5e0f'
+      }
+    }
+
+    expect(openFormsMapping(rawData)).toEqual(result)
+  })
+})

packages/ripple-tide-landing-page/mapping/components/openforms/openforms-mapping.ts

@@ -0,0 +1,25 @@
+import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
+
+export interface ITideOpenForms {
+  formLink: string
+}
+
+export const openFormsMapping = (
+  field
+): TideDynamicPageComponent<ITideOpenForms> => {
+  return {
+    component: 'TideLandingPageOpenForms',
+    id: field.drupal_internal__id.toString(),
+    props: {
+      formLink: field.field_form_link.uri
+    }
+  }
+}
+
+export const openFormsIncludes = []
+
+export default {
+  includes: openFormsIncludes,
+  mapping: openFormsMapping,
+  contentTypes: ['landing_page']
+}