From a6f1452c1c9a85f2d828c103f0f2d21a32b060fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 9 Dec 2024 13:14:32 +0000
Subject: [PATCH 1/3] feat(fee-breakdown): Make Pay component data field a
 static value

---
 .../src/@planx/components/Pay/Editor/Editor.tsx           | 6 +++---
 editor.planx.uk/src/@planx/components/Pay/model.ts        | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
index 82f05da942..94847542d5 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
+++ b/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, PASSPORT_FN, Pay, validationSchema } from "@planx/components/Pay/model";
 import { Form, Formik } from "formik";
 import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
@@ -69,9 +69,9 @@ const Component: React.FC<Props> = (props: Props) => {
                 <Input
                   format="data"
                   name="fn"
-                  value={values.fn}
+                  value={PASSPORT_FN}
                   placeholder="Data field for calculated amount"
-                  onChange={handleChange}
+                  disabled
                 />
               </InputRow>
             </ModalSectionContent>
diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
index eff610376f..1f61371d10 100644
--- a/editor.planx.uk/src/@planx/components/Pay/model.ts
+++ b/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 PASSPORT_FN = "application.fee.payable" as const;
+
 export interface Pay extends BaseNodeData {
   title: string;
   bannerTitle?: string;
   description?: string;
   color?: string;
-  fn: string;
+  fn: typeof PASSPORT_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([PASSPORT_FN]).default(PASSPORT_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: PASSPORT_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",

From 5a3e4275159cb41a77727c1128d6a6be6aafe34d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 9 Dec 2024 13:36:03 +0000
Subject: [PATCH 2/3] test: Upadte test cases

---
 .../components/Pay/Editor/Editor.test.tsx     |  6 ++--
 .../components/Pay/Public/Pay.fixture.tsx     |  2 +-
 .../@planx/components/Pay/Public/Pay.test.tsx | 29 ++++++++-----------
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.test.tsx
index df48b7880c..f5e2235869 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.test.tsx
+++ b/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>,
       );
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.fixture.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.fixture.tsx
index d27d0ad125..d65b881627 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.fixture.tsx
+++ b/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={[]}
     />
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
index 0391100764..cbdef61be1 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
+++ b/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");

From 9bcbb2cf25b8312b3e6a5533aea465041c7cf567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 9 Dec 2024 16:14:31 +0000
Subject: [PATCH 3/3] fix: PR comments

---
 .../src/@planx/components/Pay/Editor/Editor.tsx           | 5 ++---
 editor.planx.uk/src/@planx/components/Pay/model.ts        | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
index 94847542d5..ea2dd22762 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
+++ b/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, PASSPORT_FN, 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,8 +69,7 @@ const Component: React.FC<Props> = (props: Props) => {
                 <Input
                   format="data"
                   name="fn"
-                  value={PASSPORT_FN}
-                  placeholder="Data field for calculated amount"
+                  value={PAY_FN}
                   disabled
                 />
               </InputRow>
diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
index 1f61371d10..9cef8596a6 100644
--- a/editor.planx.uk/src/@planx/components/Pay/model.ts
+++ b/editor.planx.uk/src/@planx/components/Pay/model.ts
@@ -10,14 +10,14 @@ import { array, boolean, object, string } from "yup";
 
 import { type BaseNodeData, parseBaseNodeData } from "../shared";
 
-export const PASSPORT_FN = "application.fee.payable" as const;
+export const PAY_FN = "application.fee.payable" as const;
 
 export interface Pay extends BaseNodeData {
   title: string;
   bannerTitle?: string;
   description?: string;
   color?: string;
-  fn: typeof PASSPORT_FN;
+  fn: typeof PAY_FN;
   instructionsTitle?: string;
   instructionsDescription?: string;
   hidePay?: boolean;
@@ -139,7 +139,7 @@ export const validationSchema = object({
   title: string().trim().required(),
   bannerTitle: string().trim().required(),
   description: string().trim().required(),
-  fn: string().oneOf([PASSPORT_FN]).default(PASSPORT_FN).required(),
+  fn: string().oneOf([PAY_FN]).default(PAY_FN).required(),
   instructionsTitle: string().trim().required(),
   instructionsDescription: string().trim().required(),
   hidePay: boolean(),
@@ -170,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: PASSPORT_FN,
+  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",