Merge pull request #3101 from ONSdigital/EAR-2332-update-introduction…

…-preview-page EAR 2332 update introduction preview page
ONSdigital · Feb 21, 2024 · d74418a · d74418a
2 parents e2fab2f + 518e8e4
commit d74418a
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 15 deletions.
diff --git a/eq-author/src/App/introduction/Preview/IntroductionPreview/__snapshots__/index.test.js.snap b/eq-author/src/App/introduction/Preview/IntroductionPreview/__snapshots__/index.test.js.snap
@@ -10,15 +10,15 @@ exports[`Introduction Preview should render 1`] = `
   />
   If the company details or structure have changed contact us on
    
-  <IntroductionPreview__BlueUnderlined>
+  <IntroductionPreview__DummyLink>
     0300 1234 931
-  </IntroductionPreview__BlueUnderlined>
+  </IntroductionPreview__DummyLink>
    
   or email
    
-  <IntroductionPreview__BlueUnderlined>
+  <IntroductionPreview__DummyLink>
     [email protected]
-  </IntroductionPreview__BlueUnderlined>
+  </IntroductionPreview__DummyLink>
   <IntroductionPreview__Description
     dangerouslySetInnerHTML={
       Object {
@@ -30,7 +30,70 @@ exports[`Introduction Preview should render 1`] = `
   <PageTitle
     title="Your response is legally required"
   />
-  <IntroductionPreview__Description />
+  <IntroductionPreview__Description>
+    Notice is given under section 1 of the Statistics of Trade Act 1947.
+  </IntroductionPreview__Description>
+  <IntroductionPreview__Button>
+    Start survey
+  </IntroductionPreview__Button>
+  <PageTitle
+    missingText="Missing secondary title"
+    title="secondaryTitle"
+  />
+  <IntroductionPreview__Description
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>secondaryDescription</p>",
+      }
+    }
+  />
+  <PageTitle
+    missingText="Missing tertiary title"
+    title="tertiaryTitle"
+  />
+  <IntroductionPreview__Description
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "tertiaryDescription",
+      }
+    }
+  />
+</IntroductionPreview__Container>
+`;
+
+exports[`Introduction Preview should render the word 'the' when legal basis is NOTICE_FUELS 1`] = `
+<IntroductionPreview__Container
+  data-test="introduction-preview-container"
+>
+  <PageTitle
+    missingText="Missing introduction title"
+    title="foo"
+  />
+  If the company details or structure have changed contact us on
+   
+  <IntroductionPreview__DummyLink>
+    0300 1234 931
+  </IntroductionPreview__DummyLink>
+   
+  or email
+   
+  <IntroductionPreview__DummyLink>
+    [email protected]
+  </IntroductionPreview__DummyLink>
+  <IntroductionPreview__Description
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>bar</p>",
+      }
+    }
+    data-test="description"
+  />
+  <PageTitle
+    title="Your response is legally required"
+  />
+  <IntroductionPreview__Description>
+    Notice is given under the Petroleum Act 1998 and Section 1 of the Statistics of Trade Act 1947.
+  </IntroductionPreview__Description>
   <IntroductionPreview__Button>
     Start survey
   </IntroductionPreview__Button>

diff --git a/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js b/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js
@@ -94,7 +94,7 @@ const CollapsiblesContent = styled.div`
   padding: 0.2em 0 0.2em 1em;
 `;
 
-const BlueUnderlined = styled.text`
+const DummyLink = styled.text`
   color: ${colors.blue};
   text-decoration: underline;
 `;
@@ -135,13 +135,13 @@ const IntroductionPreview = ({ introduction }) => {
       <PageTitle missingText="Missing introduction title" title={title} />
       If the company details or structure have changed contact us on{" "}
       {contactDetailsPhoneNumber !== "" ? (
-        <BlueUnderlined>{contactDetailsPhoneNumber}</BlueUnderlined>
+        <DummyLink>{contactDetailsPhoneNumber}</DummyLink>
       ) : (
         <MissingText>Phone number missing</MissingText>
       )}{" "}
       or email{" "}
       {contactDetailsEmailAddress !== "" ? (
-        <BlueUnderlined>{contactDetailsEmailAddress}</BlueUnderlined>
+        <DummyLink>{contactDetailsEmailAddress}</DummyLink>
       ) : (
         <MissingText>Email address missing </MissingText>
       )}
@@ -155,18 +155,26 @@ const IntroductionPreview = ({ introduction }) => {
         data-test="description"
         dangerouslySetInnerHTML={{ __html: description }}
       />
-      {legalBasisCode !== "VOLUNTARY" && (
+      {previewQuestions && (
         <>
-          <PageTitle title="Your response is legally required" />
-          <Description>{legalBasisDescription}</Description>
+          <Description>
+            <DummyLink>
+              View the questions you will be asked in this survey
+            </DummyLink>
+          </Description>
         </>
       )}
-      {previewQuestions && (
+      {legalBasisCode !== "VOLUNTARY" && (
         <>
-          <PageTitle title="Preview the questions before starting the survey" />
+          <PageTitle title="Your response is legally required" />
           <Description>
-            You can <BlueUnderlined>preview the questions</BlueUnderlined> you
-            may be asked in this survey.
+            {`Notice is given under ${
+              legalBasisCode === "NOTICE_FUELS"
+                ? `the ${legalBasisDescription}`
+                : `${legalBasisDescription
+                    ?.charAt(0)
+                    .toLowerCase()}${legalBasisDescription?.slice(1)}`
+            }`}
           </Description>
         </>
       )}

diff --git a/eq-author/src/App/introduction/Preview/IntroductionPreview/index.test.js b/eq-author/src/App/introduction/Preview/IntroductionPreview/index.test.js
@@ -4,6 +4,11 @@ import { shallow } from "enzyme";
 import { useQuery } from "@apollo/react-hooks";
 
 import IntroductionPreview, { Collapsibles } from ".";
+import { useQuestionnaire } from "components/QuestionnaireContext";
+
+jest.mock("components/QuestionnaireContext", () => ({
+  useQuestionnaire: jest.fn(),
+}));
 
 jest.mock("@apollo/react-hooks", () => ({
   ...jest.requireActual("@apollo/react-hooks"),
@@ -18,6 +23,11 @@ useQuery.mockImplementation(() => ({
 
 describe("Introduction Preview", () => {
   let props;
+  useQuestionnaire.mockImplementation(() => ({
+    questionnaire: {
+      legalBasis: "NOTICE_1",
+    },
+  }));
   beforeEach(() => {
     props = {
       loading: false,
@@ -47,6 +57,16 @@ describe("Introduction Preview", () => {
     expect(shallow(<IntroductionPreview {...props} />)).toMatchSnapshot();
   });
 
+  it("should render the word 'the' when legal basis is NOTICE_FUELS", () => {
+    useQuestionnaire.mockImplementation(() => ({
+      questionnaire: {
+        legalBasis: "NOTICE_FUELS",
+      },
+    }));
+
+    expect(shallow(<IntroductionPreview {...props} />)).toMatchSnapshot();
+  });
+
   it("should not show incomplete collapsibles", () => {
     props.introduction.collapsibles = [
       { id: "2", title: "collapsible title", description: "" },