Production deploy

e2e/tests/ui-driven/src/create-flow.spec.ts

@@ -73,6 +73,7 @@ test.describe("Flow creation, publish and preview", () => {
     await editor.createResult();
     await editor.createNextSteps();
     await editor.createReview();
+    await editor.createFeedback();
     await editor.createConfirmation();
 
     await expect(editor.nodeList).toContainText([
@@ -91,6 +92,7 @@ test.describe("Flow creation, publish and preview", () => {
       "Planning permission", // default result flag
       "Next steps",
       "Check your answers before sending your application",
+      "Tell us what you think",
       "Confirmation",
     ]);
   });
@@ -290,6 +292,10 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
     await clickContinue({ page });
 
+    await expect(
+      page.locator("h1", { hasText: "Tell us what you think" }),
+    ).toBeVisible();
+    await clickContinue({ page });
     await expect(
       page.locator("h1", { hasText: "Application sent" }),
     ).toBeVisible();

e2e/tests/ui-driven/src/helpers/addComponent.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
-import { Locator, Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 
 const createBaseComponent = async (
   page: Page,
@@ -10,7 +10,10 @@ const createBaseComponent = async (
 ) => {
   await locatingNode.click();
   await page.getByRole("dialog").waitFor();
-  await page.locator("select").selectOption({ value: type.toString() });
+  const headerSelect = page.getByRole("heading", { name: "Question close" });
+  await headerSelect.locator("select").selectOption({ value: type.toString() });
+
+  await expect(page.getByTestId("header-select")).toHaveValue(type.toString());
 
   switch (type) {
     case ComponentType.Question:
@@ -23,7 +26,7 @@ const createBaseComponent = async (
       await page.getByPlaceholder("Notice").fill(title || "");
       break;
     case ComponentType.Checklist:
-      await page.getByPlaceholder("Text").fill(title || "");
+      await page.getByPlaceholder("Text").fill(title || "text");
       if (options) {
         await createComponentOptions(options, "add new option", page);
       }
@@ -114,6 +117,7 @@ const createBaseComponent = async (
         .fill(options?.[0] || "");
       break;
     case ComponentType.Filter:
+    case ComponentType.Feedback:
       break;
     case ComponentType.InternalPortal:
       await page.getByPlaceholder("Portal name").fill(title || "");
@@ -386,3 +390,7 @@ export const createInternalPortal = async (
     portalName,
   );
 };
+
+export const createFeedback = async (page: Page, locatingNode: Locator) => {
+  await createBaseComponent(page, locatingNode, ComponentType.Feedback);
+};

e2e/tests/ui-driven/src/pages/Editor.ts

@@ -9,6 +9,7 @@ import {
   createContent,
   createDateInput,
   createDrawBoundary,
+  createFeedback,
   createFileUpload,
   createFilter,
   createFindProperty,
@@ -240,4 +241,8 @@ export class PlaywrightEditor {
       .fill("A notice inside a portal!");
     await this.page.locator('button[form="modal"][type="submit"]').click();
   }
+
+  async createFeedback() {
+    await createFeedback(this.page, this.getNextNode());
+  }
 }

editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx

@@ -1,11 +1,5 @@
-import {
-  ComponentType as TYPES,
-} from "@opensystemslab/planx-core/types";
-import {
-  parsePay,
-  Pay,
-  validationSchema,
-} from "@planx/components/Pay/model";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { parsePay, Pay, validationSchema } from "@planx/components/Pay/model";
 import { Form, Formik } from "formik";
 import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
@@ -20,13 +14,13 @@ import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../../shared/icons";
 import { EditorProps } from "../../shared/types";
+import { FeeBreakdownSection } from "./FeeBreakdownSection";
 import { GovPayMetadataSection } from "./GovPayMetadataSection";
 import { InviteToPaySection } from "./InviteToPaySection";
 
 export type Props = EditorProps<TYPES.Pay, Pay>;
 
 const Component: React.FC<Props> = (props: Props) => {
-
   const onSubmit = (newValues: Pay) => {
     if (props.handleSubmit) {
       props.handleSubmit({ type: TYPES.Pay, data: newValues });
@@ -41,11 +35,7 @@ const Component: React.FC<Props> = (props: Props) => {
       validateOnChange={true}
       validateOnBlur={true}
     >
-      {({
-        values,
-        handleChange,
-        setFieldValue,
-      }) => (
+      {({ values, handleChange, setFieldValue }) => (
         <Form id="modal" name="modal">
           <ModalSection>
             <ModalSectionContent title="Payment" Icon={ICONS[TYPES.Pay]}>
@@ -112,8 +102,9 @@ const Component: React.FC<Props> = (props: Props) => {
               </InputRow>
             </ModalSectionContent>
           </ModalSection>
-          <GovPayMetadataSection/>
-          <InviteToPaySection/>
+          <GovPayMetadataSection />
+          <InviteToPaySection />
+          <FeeBreakdownSection />
           <MoreInformation
             changeField={handleChange}
             definitionImg={values.definitionImg}

editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx

@@ -0,0 +1,32 @@
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import { useFormikContext } from "formik";
+import { hasFeatureFlag } from "lib/featureFlags";
+import React from "react";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
+
+import { Pay } from "../model";
+
+export const FeeBreakdownSection: React.FC = () => {
+  const { values, setFieldValue } = useFormikContext<Pay>();
+
+  if (!hasFeatureFlag("FEE_BREAKDOWN")) return null;
+
+  return (
+    <ModalSection>
+      <ModalSectionContent title="Fee breakdown" Icon={ReceiptLongIcon}>
+        <InputRow>
+          <Switch
+            checked={values.showFeeBreakdown}
+            onChange={() =>
+              setFieldValue("showFeeBreakdown", !values.showFeeBreakdown)
+            }
+            label="Display a breakdown of the fee to the applicant"
+          />
+        </InputRow>
+      </ModalSectionContent>
+    </ModalSection>
+  );
+};

editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import Box from "@mui/material/Box";
-import {
-  ComponentType as TYPES,
-} from "@opensystemslab/planx-core/types";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { useFormikContext } from "formik";
+import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
@@ -11,7 +10,6 @@ import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../../shared/icons";
-import { useFormikContext } from "formik";
 import { Pay } from "../model";
 
 export const InviteToPaySection: React.FC = () => {
@@ -98,5 +96,5 @@ export const InviteToPaySection: React.FC = () => {
         )}
       </ModalSectionContent>
     </ModalSection>
-  )
-}
+  );
+};

editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx

@@ -14,30 +14,24 @@ import FormWrapper from "ui/public/FormWrapper";
 import ErrorSummary from "ui/shared/ErrorSummary/ErrorSummary";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
-import { formattedPriceWithCurrencySymbol, getDefaultContent } from "../model";
+import {
+  formattedPriceWithCurrencySymbol,
+  getDefaultContent,
+  Pay,
+} from "../model";
+import { FeeBreakdown } from "./FeeBreakdown";
 import InviteToPayForm, { InviteToPayFormProps } from "./InviteToPayForm";
 import { PAY_API_ERROR_UNSUPPORTED_TEAM } from "./Pay";
 
-export interface Props {
+export interface Props extends Omit<Pay, "title" | "fn" | "govPayMetadata"> {
   title?: string;
-  bannerTitle?: string;
-  description?: string;
   fee: number;
-  instructionsTitle?: string;
-  instructionsDescription?: string;
   showInviteToPay?: boolean;
-  secondaryPageTitle?: string;
-  nomineeTitle?: string;
-  nomineeDescription?: string;
-  yourDetailsTitle?: string;
-  yourDetailsDescription?: string;
-  yourDetailsLabel?: string;
   paymentStatus?: PaymentStatus;
   buttonTitle?: string;
   onConfirm: () => void;
   error?: string;
   hideFeeBanner?: boolean;
-  hidePay?: boolean;
 }
 
 interface PayBodyProps extends Props {
@@ -86,7 +80,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
     <Card>
       <PayText>
         <Typography variant="h2" component={props.hideFeeBanner ? "h2" : "h3"}>
-          {props.instructionsTitle || defaults.instructionsTitle }
+          {props.instructionsTitle || defaults.instructionsTitle}
         </Typography>
         <ReactMarkdownOrHtml
           source={
@@ -187,6 +181,7 @@ export default function Confirm(props: Props) {
                 />
               </Typography>
             </FormWrapper>
+            {props.showFeeBreakdown && <FeeBreakdown />}
           </Banner>
         )}
         {page === "Pay" ? (

editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { setup } from "testUtils";
+import { vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { FeeBreakdown } from "./FeeBreakdown";
+
+vi.mock("lib/featureFlags", () => ({
+  hasFeatureFlag: () => true,
+}));
+
+it("should not have any accessibility violations", async () => {
+  const { container } = setup(<FeeBreakdown />);
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});
+
+// Placeholder tests and initial assumptions
+it.todo("displays a planning fee");
+
+it.todo("displays a total");
+
+it.todo("displays a service charge if applicable");
+it.todo("does not display a service charge if not applicable");
+
+it.todo("displays VAT if applicable");
+it.todo("does not display VAT if not applicable");
+
+it.todo("displays exemptions if applicable");
+it.todo("does not exemptions if not applicable");
+
+it.todo("displays reductions if applicable");
+it.todo("does not reductions if not applicable");
+
+it.todo("does not display if fee calculation values are invalid");
+it.todo("silently throws an error if fee calculations are invalid");