feat: Remove toggle for FeeBreakdown

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

@@ -1,31 +1,17 @@
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
-import { useFormikContext } from "formik";
 import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 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>
+      <FeaturePlaceholder title="TODO: Fee breakdown explanation"/>
       </ModalSectionContent>
     </ModalSection>
   );

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

@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import { PaymentStatus } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import SaveResumeButton from "@planx/components/shared/Preview/SaveResumeButton";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useState } from "react";
 import { ApplicationPath } from "types";
@@ -181,7 +182,7 @@ export default function Confirm(props: Props) {
                 />
               </Typography>
             </FormWrapper>
-            {props.showFeeBreakdown && <FeeBreakdown />}
+            {hasFeatureFlag("FEE_BREAKDOWN") && <FeeBreakdown />}
           </Banner>
         )}
         {page === "Pay" ? (

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

@@ -88,6 +88,5 @@ export const WithFeeBreakdown = {
     onConfirm: () => {},
     error: undefined,
     showInviteToPay: false,
-    showFeeBreakdown: true,
   },
 } satisfies Story;

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

@@ -487,40 +487,3 @@ 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();
-  });
-});

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

@@ -27,7 +27,6 @@ export interface Pay extends BaseNodeData {
   yourDetailsDescription?: string;
   yourDetailsLabel?: string;
   govPayMetadata: GovPayMetadata[];
-  showFeeBreakdown?: boolean;
 }
 
 export const toPence = (decimal: number) => Math.trunc(decimal * 100);
@@ -182,7 +181,6 @@ export const getDefaultContent = (): Pay => ({
   nomineeTitle: "Details of the person paying",
   yourDetailsTitle: "Your details",
   yourDetailsLabel: "Your name or organisation name",
-  showFeeBreakdown: false,
   govPayMetadata: [
     {
       key: "flow",