From 65064c0e7e5d157d0cd4413c8cd80bb72c480446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Wed, 20 Nov 2024 13:29:34 +0000
Subject: [PATCH 01/10] feat: Update model, add optional fee breakdown section
 in Editor modal

---
 .../@planx/components/Pay/Editor/Editor.tsx   |  2 ++
 .../Pay/Editor/FeeBreakdownSection.tsx        | 32 +++++++++++++++++++
 .../src/@planx/components/Pay/model.ts        |  1 +
 3 files changed, 35 insertions(+)
 create mode 100644 editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx

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 8f0a9fbb6c..cbb7372bf4 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
@@ -22,6 +22,7 @@ import { ICONS } from "../../shared/icons";
 import { EditorProps } from "../../shared/types";
 import { GovPayMetadataSection } from "./GovPayMetadataSection";
 import { InviteToPaySection } from "./InviteToPaySection";
+import { FeeBreakdownSection } from "./FeeBreakdownSection";
 
 export type Props = EditorProps<TYPES.Pay, Pay>;
 
@@ -114,6 +115,7 @@ const Component: React.FC<Props> = (props: Props) => {
           </ModalSection>
           <GovPayMetadataSection/>
           <InviteToPaySection/>
+          <FeeBreakdownSection/>
           <MoreInformation
             changeField={handleChange}
             definitionImg={values.definitionImg}
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
new file mode 100644
index 0000000000..9b8d022bb9
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -0,0 +1,32 @@
+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 ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
+
+import { useFormikContext } from "formik";
+import { Pay } from "../model";
+
+export const FeeBreakdownSection: React.FC = () => {
+  const { values, setFieldValue } = useFormikContext<Pay>();
+
+  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>
+        <>
+        { Boolean(values.showFeeBreakdown) && <p>Fee breakdown fields here</p> }
+        </>
+      </ModalSectionContent>
+    </ModalSection>
+  )
+}
\ No newline at end of file
diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
index 0a905ce14f..b26f10c38c 100644
--- a/editor.planx.uk/src/@planx/components/Pay/model.ts
+++ b/editor.planx.uk/src/@planx/components/Pay/model.ts
@@ -27,6 +27,7 @@ export interface Pay extends BaseNodeData {
   yourDetailsDescription?: string;
   yourDetailsLabel?: string;
   govPayMetadata: GovPayMetadata[];
+  showFeeBreakdown?: boolean;
 }
 
 export const toPence = (decimal: number) => Math.trunc(decimal * 100);

From 1ebd54a82864a643eda3f60cae2be33bee7afffa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 13:37:04 +0000
Subject: [PATCH 02/10] chore: Use existing type to get new `showFeeBreakdown`
 prop

---
 .../@planx/components/Pay/Public/Confirm.tsx  | 21 +++++++------------
 .../src/@planx/components/Pay/Public/Pay.tsx  | 11 ++++++----
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
index 0cf82f91d8..e302bfca2d 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
@@ -14,30 +14,23 @@ 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 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 +79,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={
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
index b9e4c21442..a89b976d8f 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
@@ -14,7 +14,13 @@ import { useErrorHandler } from "react-error-boundary";
 import type { Session } from "types";
 
 import { makeData } from "../../shared/utils";
-import { createPayload, getDefaultContent, GOV_UK_PAY_URL, Pay, toDecimal } from "../model";
+import {
+  createPayload,
+  getDefaultContent,
+  GOV_UK_PAY_URL,
+  Pay,
+  toDecimal,
+} from "../model";
 import Confirm from "./Confirm";
 
 export default Component;
@@ -53,7 +59,6 @@ function Component(props: Props) {
     passport,
     environment,
     teamSlug,
-    flowSlug,
   ] = useStore((state) => [
     state.id,
     state.sessionId,
@@ -63,7 +68,6 @@ function Component(props: Props) {
     state.computePassport(),
     state.previewEnvironment,
     state.teamSlug,
-    state.flowSlug,
   ]);
   const fee = props.fn ? Number(passport.data?.[props.fn]) : 0;
 
@@ -303,7 +307,6 @@ function Component(props: Props) {
           }
           showInviteToPay={showPayOptions && isTeamSupported}
           paymentStatus={govUkPayment?.state?.status}
-          hidePay={props.hidePay}
         />
       ) : (
         <DelayedLoadingIndicator text={state.displayText || state.status} />

From d3b24cc6764565aff39e7cdd173cfa73818d9351 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 13:46:04 +0000
Subject: [PATCH 03/10] feat: Dummy initial UI

---
 .../Pay/Editor/FeeBreakdownSection.tsx        |  10 +-
 .../@planx/components/Pay/Public/Confirm.tsx  |   2 +
 .../components/Pay/Public/FeeBreakdown.tsx    | 100 ++++++++++++++++++
 3 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
index 9b8d022bb9..4e42b5bf85 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -1,11 +1,11 @@
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import { useFormikContext } from "formik";
 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 ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 
-import { useFormikContext } from "formik";
 import { Pay } from "../model";
 
 export const FeeBreakdownSection: React.FC = () => {
@@ -24,9 +24,9 @@ export const FeeBreakdownSection: React.FC = () => {
           />
         </InputRow>
         <>
-        { Boolean(values.showFeeBreakdown) && <p>Fee breakdown fields here</p> }
+          {Boolean(values.showFeeBreakdown) && <p>Fee breakdown fields here</p>}
         </>
       </ModalSectionContent>
     </ModalSection>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
index e302bfca2d..31913894d9 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
@@ -19,6 +19,7 @@ import {
   getDefaultContent,
   Pay,
 } from "../model";
+import { FeeBreakdown } from "./FeeBreakdown";
 import InviteToPayForm, { InviteToPayFormProps } from "./InviteToPayForm";
 import { PAY_API_ERROR_UNSUPPORTED_TEAM } from "./Pay";
 
@@ -180,6 +181,7 @@ export default function Confirm(props: Props) {
                 />
               </Typography>
             </FormWrapper>
+            {props.showFeeBreakdown && <FeeBreakdown />}
           </Banner>
         )}
         {page === "Pay" ? (
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
new file mode 100644
index 0000000000..75d9328a05
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -0,0 +1,100 @@
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+
+import { formattedPriceWithCurrencySymbol } from "../model";
+
+const VAT_RATE = 20;
+
+const DESCRIPTION =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+const Header = () => (
+  <TableHead>
+    <TableRow>
+      <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>
+        Description
+      </TableCell>
+      <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }} align="right">
+        Amount
+      </TableCell>
+    </TableRow>
+  </TableHead>
+);
+
+const PlanningFee = () => (
+  <TableRow>
+    <TableCell>Planning fee</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(100)}</TableCell>
+  </TableRow>
+);
+
+const Exemptions = () => (
+  <TableRow>
+    <TableCell>Exemptions</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(-20)}</TableCell>
+  </TableRow>
+);
+
+const Reductions = () => (
+  <TableRow>
+    <TableCell>Reductions</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(-30)}</TableCell>
+  </TableRow>
+);
+
+const ServiceCharge = () => (
+  <TableRow>
+    <TableCell>Service charge</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(30)}</TableCell>
+  </TableRow>
+);
+
+const VAT = () => (
+  <TableRow>
+    <TableCell>{`VAT (${VAT_RATE}%)`}</TableCell>
+    <TableCell align="right">-</TableCell>
+  </TableRow>
+);
+
+const Total = () => (
+  <TableRow>
+    <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>Total</TableCell>
+    <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }} align="right">
+      {formattedPriceWithCurrencySymbol(50)}
+    </TableCell>
+  </TableRow>
+);
+
+export const FeeBreakdown: React.FC = () => {
+  return (
+    <Box mt={3}>
+      <Typography variant="h3" mb={1}>
+        Fee breakdown
+      </Typography>
+      <Typography variant="body1" mb={2}>
+        {DESCRIPTION}
+      </Typography>
+      <TableContainer>
+        <Table>
+          <Header />
+          <TableBody>
+            <PlanningFee />
+            <ServiceCharge />
+            <Exemptions />
+            <Reductions />
+            <VAT />
+            <Total />
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};

From 6c693dc2f677ca7c07837bbcaf8b6e49cc85342d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 13:46:58 +0000
Subject: [PATCH 04/10] feat(storybook): Initial setup

---
 .../components/Pay/Public/Pay.stories.tsx       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
index d554de6d28..efa6a44b1f 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
@@ -71,3 +71,20 @@ export const ForInformationOnly = {
     onConfirm: () => {},
   },
 } satisfies Story;
+
+// TODO: Setup fee breakdown amounts
+export const WithFeeBreakdown = {
+  args: {
+    title: "Pay for your application",
+    bannerTitle: "The fee is",
+    description: "The fee covers the cost of processing your application",
+    fee: 103,
+    instructionsTitle: "How to pay",
+    instructionsDescription: "Pay via GOV.UK Pay",
+    buttonTitle: "Pay",
+    onConfirm: () => {},
+    error: undefined,
+    showInviteToPay: false,
+    showFeeBreakdown: true,
+  },
+} satisfies Story;

From 023d2882285a7b1110fdc8d6975d47e2dca15fe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 14:05:21 +0000
Subject: [PATCH 05/10] chore: Add feature flag

---
 .../src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx   | 3 +++
 .../src/@planx/components/Pay/Public/FeeBreakdown.tsx          | 3 +++
 .../src/@planx/components/Pay/Public/Pay.stories.tsx           | 3 +++
 editor.planx.uk/src/lib/featureFlags.ts                        | 2 +-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
index 4e42b5bf85..787e48b235 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -1,5 +1,6 @@
 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";
@@ -11,6 +12,8 @@ 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}>
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
index 75d9328a05..2f82c4b536 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -6,6 +6,7 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
@@ -74,6 +75,8 @@ const Total = () => (
 );
 
 export const FeeBreakdown: React.FC = () => {
+  if (!hasFeatureFlag("FEE_BREAKDOWN")) return null;
+
   return (
     <Box mt={3}>
       <Typography variant="h3" mb={1}>
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
index efa6a44b1f..619503a550 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
@@ -17,6 +17,9 @@ const meta = {
       }),
     },
   },
+  loaders: [
+    () => window.localStorage.setItem("FEATURE_FLAGS", '["FEE_BREAKDOWN"]'),
+  ],
 } satisfies Meta<typeof Confirm>;
 
 type Story = StoryObj<typeof meta>;
diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts
index 5fd7349747..1e34728156 100644
--- a/editor.planx.uk/src/lib/featureFlags.ts
+++ b/editor.planx.uk/src/lib/featureFlags.ts
@@ -1,5 +1,5 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = [] as const;
+const AVAILABLE_FEATURE_FLAGS = ["FEE_BREAKDOWN"] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 

From 6ab0d49b962fdc1eb7aed5d54ef2455af8267ecc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 14:14:36 +0000
Subject: [PATCH 06/10] feat: Simplify editor interface (for now!)

---
 .../src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
index 787e48b235..5db61ca8ae 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -26,9 +26,6 @@ export const FeeBreakdownSection: React.FC = () => {
             label="Display a breakdown of the fee to the applicant"
           />
         </InputRow>
-        <>
-          {Boolean(values.showFeeBreakdown) && <p>Fee breakdown fields here</p>}
-        </>
       </ModalSectionContent>
     </ModalSection>
   );

From 370f4ddc255b79feb9008a30bfdeb04e59b16e9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 14:18:32 +0000
Subject: [PATCH 07/10] fix: Import order, default values

---
 .../@planx/components/Pay/Editor/Editor.tsx   | 25 ++++++-------------
 .../Pay/Editor/InviteToPaySection.tsx         | 12 ++++-----
 .../src/@planx/components/Pay/model.ts        |  3 ++-
 3 files changed, 14 insertions(+), 26 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 cbb7372bf4..450c13a4d5 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
+++ b/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,14 +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";
-import { FeeBreakdownSection } from "./FeeBreakdownSection";
 
 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 });
@@ -42,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]}>
@@ -113,9 +102,9 @@ const Component: React.FC<Props> = (props: Props) => {
               </InputRow>
             </ModalSectionContent>
           </ModalSection>
-          <GovPayMetadataSection/>
-          <InviteToPaySection/>
-          <FeeBreakdownSection/>
+          <GovPayMetadataSection />
+          <InviteToPaySection />
+          <FeeBreakdownSection />
           <MoreInformation
             changeField={handleChange}
             definitionImg={values.definitionImg}
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx
index 0e14c3da24..9d0b7912e5 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx
+++ b/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>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
index b26f10c38c..5b390e42c6 100644
--- a/editor.planx.uk/src/@planx/components/Pay/model.ts
+++ b/editor.planx.uk/src/@planx/components/Pay/model.ts
@@ -8,7 +8,7 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import { ApplicationPath, Passport } from "types";
 import { array, boolean, object, string } from "yup";
 
-import { parseBaseNodeData, type BaseNodeData } from "../shared";
+import { type BaseNodeData, parseBaseNodeData } from "../shared";
 
 export interface Pay extends BaseNodeData {
   title: string;
@@ -182,6 +182,7 @@ export const getDefaultContent = (): Pay => ({
   nomineeTitle: "Details of the person paying",
   yourDetailsTitle: "Your details",
   yourDetailsLabel: "Your name or organisation name",
+  showFeeBreakdown: false,
   govPayMetadata: [
     {
       key: "flow",

From 26872dd5a9f5c6ad6a6e81127fe4c2bae1b43ca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 15:16:01 +0000
Subject: [PATCH 08/10] test: Basic initial tests and a few todo placeholders

---
 .../Pay/Public/FeeBreakdown.test.tsx          | 37 ++++++++++
 .../components/Pay/Public/FeeBreakdown.tsx    |  2 +-
 .../@planx/components/Pay/Public/Pay.test.tsx | 72 +++++++++++++++----
 3 files changed, 97 insertions(+), 14 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx
new file mode 100644
index 0000000000..33f37a5d66
--- /dev/null
+++ b/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");
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
index 2f82c4b536..a8d2da7e1f 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -86,7 +86,7 @@ export const FeeBreakdown: React.FC = () => {
         {DESCRIPTION}
       </Typography>
       <TableContainer>
-        <Table>
+        <Table data-testid="fee-breakdown-table">
           <Header />
           <TableBody>
             <PlanningFee />
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 14f6d42c37..be94bc59f8 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
@@ -1,6 +1,7 @@
 import { PaymentStatus } from "@opensystemslab/planx-core/types";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { screen } from "@testing-library/react";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { FullStore, Store, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { act } from "react-dom/test-utils";
@@ -8,6 +9,7 @@ import * as ReactNavi from "react-navi";
 import { setup } from "testUtils";
 import { ApplicationPath, Breadcrumbs } from "types";
 import { vi } from "vitest";
+import { Mock } from "vitest";
 import { axe } from "vitest-axe";
 
 import Confirm, { Props } from "./Confirm";
@@ -21,6 +23,12 @@ vi.spyOn(ReactNavi, "useCurrentRoute").mockImplementation(
   () => ({ data: { mountpath: "mountpath" } }) as any,
 );
 
+vi.mock("lib/featureFlags", () => ({
+  hasFeatureFlag: vi.fn(),
+}));
+
+const mockHasFeatureFlag = hasFeatureFlag as Mock;
+
 const resumeButtonText = "Resume an application you have already started";
 const saveButtonText = "Save and return to this application later";
 
@@ -74,6 +82,19 @@ const breadcrumbs: Breadcrumbs = {
   },
 };
 
+const defaultProps = {
+  title: "Pay for your application",
+  bannerTitle: "The fee is",
+  description: "The fee covers the cost of processing your application",
+  fee: 103,
+  instructionsTitle: "How to pay",
+  instructionsDescription: "Pay via GOV.UK Pay",
+  buttonTitle: "Pay",
+  onConfirm: vi.fn(),
+  error: undefined,
+  showInviteToPay: false,
+};
+
 describe("Pay component when fee is undefined or £0", () => {
   beforeEach(() => {
     getState().resetPreview();
@@ -126,19 +147,6 @@ describe("Pay component when fee is undefined or £0", () => {
   });
 });
 
-const defaultProps = {
-  title: "Pay for your application",
-  bannerTitle: "The fee is",
-  description: "The fee covers the cost of processing your application",
-  fee: 103,
-  instructionsTitle: "How to pay",
-  instructionsDescription: "Pay via GOV.UK Pay",
-  buttonTitle: "Pay",
-  onConfirm: vi.fn(),
-  error: undefined,
-  showInviteToPay: false,
-};
-
 describe("Confirm component without inviteToPay", () => {
   beforeAll(() => (initialState = getState()));
   afterEach(() => act(() => setState(initialState)));
@@ -459,6 +467,7 @@ describe("the demo user view", () => {
       }),
     );
   });
+
   it("should render an error when teamSlug is demo", async () => {
     const handleSubmit = vi.fn();
     const { queryByText } = setup(
@@ -478,3 +487,40 @@ describe("the demo user view", () => {
     expect(errorHeader).toBeInTheDocument();
   });
 });
+
+describe("Displaying the fee breakdown", () => {
+  beforeAll(() => (initialState = getState()));
+  afterEach(() => act(() => setState(initialState)));
+
+  test("if the showFeeBreakdown prop is set, the breakdown is displayed to the user", () => {
+    mockHasFeatureFlag.mockReturnValue(true);
+
+    const { getByRole, getByTestId } = setup(
+      <Confirm {...defaultProps} showFeeBreakdown={true} />,
+    );
+
+    expect(mockHasFeatureFlag).toHaveBeenCalledWith("FEE_BREAKDOWN");
+    expect(mockHasFeatureFlag).toHaveBeenCalledTimes(1);
+
+    expect(
+      getByRole("heading", { level: 3, name: "Fee breakdown" }),
+    ).toBeVisible();
+    expect(getByTestId("fee-breakdown-table")).toBeVisible();
+  });
+
+  test("if the showFeeBreakdown prop is not set, the breakdown is not displayed to the user", () => {
+    mockHasFeatureFlag.mockReturnValue(true);
+
+    const { queryByRole, queryByTestId } = setup(
+      <Confirm {...defaultProps} showFeeBreakdown={false} />,
+    );
+
+    expect(mockHasFeatureFlag).toHaveBeenCalledWith("FEE_BREAKDOWN");
+    expect(mockHasFeatureFlag).toHaveBeenCalledTimes(1);
+
+    expect(
+      queryByRole("heading", { level: 3, name: "Fee breakdown" }),
+    ).not.toBeInTheDocument();
+    expect(queryByTestId("fee-breakdown-table")).not.toBeInTheDocument();
+  });
+});

From c5078770921863b51f47fb5998e3d4ea8c7862fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 17:30:18 +0000
Subject: [PATCH 09/10] chore: Rename to ApplicationFee, update dummy values

---
 .../src/@planx/components/Pay/Public/FeeBreakdown.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
index a8d2da7e1f..c4705c08fd 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -30,9 +30,9 @@ const Header = () => (
   </TableHead>
 );
 
-const PlanningFee = () => (
+const ApplicationFee = () => (
   <TableRow>
-    <TableCell>Planning fee</TableCell>
+    <TableCell>Application fee</TableCell>
     <TableCell align="right">{formattedPriceWithCurrencySymbol(100)}</TableCell>
   </TableRow>
 );
@@ -69,7 +69,7 @@ const Total = () => (
   <TableRow>
     <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>Total</TableCell>
     <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }} align="right">
-      {formattedPriceWithCurrencySymbol(50)}
+      {formattedPriceWithCurrencySymbol(80)}
     </TableCell>
   </TableRow>
 );
@@ -89,7 +89,7 @@ export const FeeBreakdown: React.FC = () => {
         <Table data-testid="fee-breakdown-table">
           <Header />
           <TableBody>
-            <PlanningFee />
+            <ApplicationFee />
             <ServiceCharge />
             <Exemptions />
             <Reductions />

From 74bb00beed3b11da1c2bfd981cc9a44fbd9adc05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 19:39:53 +0000
Subject: [PATCH 10/10] fix: Tidy up table styles

---
 .../components/Pay/Public/FeeBreakdown.tsx    | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
index c4705c08fd..2bb415aca3 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -1,7 +1,8 @@
 import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
@@ -12,6 +13,19 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 import { formattedPriceWithCurrencySymbol } from "../model";
 
+const StyledTable = styled(Table)(() => ({
+  [`& .${tableCellClasses.root}`]: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+const BoldTableRow = styled(TableRow)(() => ({
+  [`& .${tableCellClasses.root}`]: {
+    fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  },
+}));
+
 const VAT_RATE = 20;
 
 const DESCRIPTION =
@@ -19,14 +33,10 @@ const DESCRIPTION =
 
 const Header = () => (
   <TableHead>
-    <TableRow>
-      <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>
-        Description
-      </TableCell>
-      <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }} align="right">
-        Amount
-      </TableCell>
-    </TableRow>
+    <BoldTableRow>
+      <TableCell>Description</TableCell>
+      <TableCell align="right">Amount</TableCell>
+    </BoldTableRow>
   </TableHead>
 );
 
@@ -66,12 +76,10 @@ const VAT = () => (
 );
 
 const Total = () => (
-  <TableRow>
-    <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>Total</TableCell>
-    <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }} align="right">
-      {formattedPriceWithCurrencySymbol(80)}
-    </TableCell>
-  </TableRow>
+  <BoldTableRow>
+    <TableCell>Total</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(80)}</TableCell>
+  </BoldTableRow>
 );
 
 export const FeeBreakdown: React.FC = () => {
@@ -86,7 +94,7 @@ export const FeeBreakdown: React.FC = () => {
         {DESCRIPTION}
       </Typography>
       <TableContainer>
-        <Table data-testid="fee-breakdown-table">
+        <StyledTable data-testid="fee-breakdown-table">
           <Header />
           <TableBody>
             <ApplicationFee />
@@ -96,7 +104,7 @@ export const FeeBreakdown: React.FC = () => {
             <VAT />
             <Total />
           </TableBody>
-        </Table>
+        </StyledTable>
       </TableContainer>
     </Box>
   );