feat(fee-breakdown): Make Pay component data field a static value (#4058

)

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

@@ -117,7 +117,7 @@ describe("Pay component - Editor Modal", () => {
             <PayComponent
               id="test"
               handleSubmit={handleSubmit}
-              node={{ data: { fn: "fee" } }}
+              node={{ data: { fn: "application.fee.payable" } }}
             />
           </DndProvider>,
         );
@@ -146,7 +146,7 @@ describe("Pay component - Editor Modal", () => {
       act(() => setState({ user: mockUser, flowName: "test flow" }));
       const mockNode = {
         data: {
-          fn: "fee",
+          fn: "application.fee.payable",
           govPayMetadata: [
             { key: "flow", value: "flowName" },
             { key: "source", value: "PlanX" },
@@ -260,7 +260,7 @@ describe("Pay component - Editor Modal", () => {
           <PayComponent
             id="test"
             handleSubmit={handleSubmit}
-            node={{ data: { fn: "fee" } }}
+            node={{ data: { fn: "application.fee.payable" } }}
           />
         </DndProvider>,
       );

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

@@ -1,5 +1,5 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { parsePay, Pay, validationSchema } from "@planx/components/Pay/model";
+import { parsePay, Pay, PAY_FN, validationSchema } from "@planx/components/Pay/model";
 import { Form, Formik } from "formik";
 import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
@@ -69,9 +69,8 @@ const Component: React.FC<Props> = (props: Props) => {
                 <Input
                   format="data"
                   name="fn"
-                  value={values.fn}
-                  placeholder="Data field for calculated amount"
-                  onChange={handleChange}
+                  value={PAY_FN}
+                  disabled
                 />
               </InputRow>
             </ModalSectionContent>

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

@@ -8,7 +8,7 @@ export default function Fixture() {
       handleSubmit={console.log}
       title="Pay"
       description=""
-      fn="fee"
+      fn="application.fee.payable"
       color="#efefef"
       govPayMetadata={[]}
     />

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

@@ -32,18 +32,10 @@ const flowWithUndefinedFee: Store.Flow = {
   _root: {
     edges: ["setValue", "pay"],
   },
-  setValue: {
-    type: TYPES.SetValue,
-    edges: ["pay"],
-    data: {
-      fn: "application.fee.payable",
-      val: "0",
-    },
-  },
   pay: {
     type: TYPES.Pay,
     data: {
-      fn: "application.fee.typo",
+      fn: "application.fee.payable",
     },
   },
 };
@@ -92,22 +84,21 @@ const defaultProps = {
 };
 
 describe("Pay component when fee is undefined or £0", () => {
-  beforeEach(() => {
-    getState().resetPreview();
-  });
+  beforeAll(() => (initialState = getState()));
+  afterEach(() => act(() => setState(initialState)));
 
   it("Shows an error if fee is undefined", () => {
     const handleSubmit = vi.fn();
 
-    setState({ flow: flowWithUndefinedFee, breadcrumbs: breadcrumbs });
+    setState({ flow: flowWithUndefinedFee, breadcrumbs: {} });
     expect(getState().computePassport()).toEqual({
-      data: { "application.fee.payable": ["0"] },
+      data: { "application.fee.payable": undefined },
     });
 
     setup(
       <Pay
         title="Pay for your application"
-        fn="application.fee.typo"
+        fn="application.fee.payable"
         handleSubmit={handleSubmit}
         govPayMetadata={[]}
       />,
@@ -456,6 +447,8 @@ describe("Confirm component in information-only mode", () => {
 });
 
 describe("the demo user view", () => {
+  beforeAll(() => (initialState = getState()));
+
   beforeEach(() => {
     act(() =>
       setState({
@@ -464,14 +457,16 @@ describe("the demo user view", () => {
     );
   });
 
+  afterEach(() => act(() => setState(initialState)));
+
   it("should render an error when teamSlug is demo", async () => {
     const handleSubmit = vi.fn();
     const { queryByText } = setup(
       <Pay
-        title="Pay for your application"
-        fn="application.fee.typo"
+        fn="application.fee.payable"
         handleSubmit={handleSubmit}
         govPayMetadata={[]}
+        {...defaultProps}
       />,
     );
     const errorHeader = queryByText("GOV.UK Pay is not enabled for demo users");

editor.planx.uk/src/@planx/components/Pay/model.ts

@@ -10,12 +10,14 @@ import { array, boolean, object, string } from "yup";
 
 import { type BaseNodeData, parseBaseNodeData } from "../shared";
 
+export const PAY_FN = "application.fee.payable" as const;
+
 export interface Pay extends BaseNodeData {
   title: string;
   bannerTitle?: string;
   description?: string;
   color?: string;
-  fn: string;
+  fn: typeof PAY_FN;
   instructionsTitle?: string;
   instructionsDescription?: string;
   hidePay?: boolean;
@@ -137,7 +139,7 @@ export const validationSchema = object({
   title: string().trim().required(),
   bannerTitle: string().trim().required(),
   description: string().trim().required(),
-  fn: string().trim().required("Data field is required"),
+  fn: string().oneOf([PAY_FN]).default(PAY_FN).required(),
   instructionsTitle: string().trim().required(),
   instructionsDescription: string().trim().required(),
   hidePay: boolean(),
@@ -168,7 +170,7 @@ export const validationSchema = object({
 export const getDefaultContent = (): Pay => ({
   title: "Pay for your application",
   bannerTitle: "The planning fee for this application is",
-  fn: "application.fee.payable",
+  fn: PAY_FN,
   description: `<p>The planning fee covers the cost of processing your application.\
     <a href="https://www.gov.uk/guidance/fees-for-planning-applications" target="_self">Find out more about how planning fees are calculated</a> (opens in new tab).</p>`,
   instructionsTitle: "How to pay",