From 6ed961e6e1f5b273fbf6446d45cf7f81611fdb8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Wed, 10 Apr 2024 17:14:07 +0100
Subject: [PATCH] chore: Drop `GOVPAY_METADATA` feature flag (#2915)

---
 .../src/@planx/components/Pay/Editor.test.tsx |   3 -
 .../src/@planx/components/Pay/Editor.tsx      | 140 +++++++++---------
 editor.planx.uk/src/lib/featureFlags.ts       |  10 +-
 3 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx
index 7824c32e27..ab5d70006c 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx
@@ -34,9 +34,6 @@ describe("Pay component - Editor Modal", () => {
   describe("GOV.UK Pay Metadata section", () => {
     jest.setTimeout(20000);
 
-    beforeAll(() => toggleFeatureFlag("GOVPAY_METADATA"));
-    afterAll(() => toggleFeatureFlag("GOVPAY_METADATA"));
-
     // Set up mock state with platformAdmin user so all Editor features are enabled
     const { getState, setState } = vanillaStore;
     const mockUser: User = {
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.tsx
index afb17f929a..0cef28938e 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor.tsx
@@ -17,7 +17,6 @@ import {
   MoreInformation,
 } from "@planx/components/ui";
 import { Form, Formik, useFormikContext } from "formik";
-import { hasFeatureFlag } from "lib/featureFlags";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import ListManager, {
@@ -132,7 +131,6 @@ export type Props = EditorProps<TYPES.Pay, Pay>;
 
 const Component: React.FC<Props> = (props: Props) => {
   const [flowName] = useStore((store) => [store.flowName]);
-  const displayGovPayMetadataSection = hasFeatureFlag("GOVPAY_METADATA");
 
   const initialValues: Pay = {
     title: props.node?.data?.title || "Pay for your application",
@@ -269,79 +267,77 @@ const Component: React.FC<Props> = (props: Props) => {
               Hide the pay buttons and show fee for information only
             </OptionButton>
           </ModalSection>
-          {displayGovPayMetadataSection && (
-            <ModalSection>
-              <ModalSectionContent
-                title="GOV.UK Pay Metadata"
-                Icon={DataObjectIcon}
+          <ModalSection>
+            <ModalSectionContent
+              title="GOV.UK Pay Metadata"
+              Icon={DataObjectIcon}
+            >
+              <Typography variant="subtitle2" sx={{ mb: 2 }}>
+                Include metadata alongside payments, such as VAT codes, cost
+                centers, or ledger codes. See{" "}
+                <Link
+                  href={GOVPAY_DOCS_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  GOV.UK Pay documentation
+                </Link>{" "}
+                for more details.
+              </Typography>
+              <ErrorWrapper
+                error={
+                  typeof errors.govPayMetadata === "string" &&
+                  touched.govPayMetadata
+                    ? errors.govPayMetadata
+                    : undefined
+                }
               >
-                <Typography variant="subtitle2" sx={{ mb: 2 }}>
-                  Include metadata alongside payments, such as VAT codes, cost
-                  centers, or ledger codes. See{" "}
-                  <Link
-                    href={GOVPAY_DOCS_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                <>
+                  <Box
+                    sx={{
+                      width: "100%",
+                      mb: 1,
+                      display: "flex",
+                      justifyContent: "space-evenly",
+                    }}
                   >
-                    GOV.UK Pay documentation
-                  </Link>{" "}
-                  for more details.
-                </Typography>
-                <ErrorWrapper
-                  error={
-                    typeof errors.govPayMetadata === "string" &&
-                    touched.govPayMetadata
-                      ? errors.govPayMetadata
-                      : undefined
-                  }
-                >
-                  <>
-                    <Box
-                      sx={{
-                        width: "100%",
-                        mb: 1,
-                        display: "flex",
-                        justifyContent: "space-evenly",
-                      }}
+                    <Typography
+                      sx={{ width: "100%", ml: 5 }}
+                      variant="subtitle2"
+                      component="label"
+                      id="key-label"
                     >
-                      <Typography
-                        sx={{ width: "100%", ml: 5 }}
-                        variant="subtitle2"
-                        component="label"
-                        id="key-label"
-                      >
-                        Key
-                      </Typography>
-                      <Typography
-                        sx={{ width: "100%", ml: -5 }}
-                        variant="subtitle2"
-                        component="label"
-                        id="value-label"
-                      >
-                        Value
-                      </Typography>
-                    </Box>
-                    <ListManager
-                      maxItems={10}
-                      disableDragAndDrop
-                      values={values.govPayMetadata || []}
-                      onChange={(metadata) => {
-                        setFieldValue("govPayMetadata", metadata);
-                      }}
-                      Editor={GovPayMetadataEditor}
-                      newValue={() => {
-                        setTouched({});
-                        return { key: "", value: "" };
-                      }}
-                      isFieldDisabled={({ key }, index) =>
-                        isFieldDisabled(key, index)
-                      }
-                    />
-                  </>
-                </ErrorWrapper>
-              </ModalSectionContent>
-            </ModalSection>
-          )}
+                      Key
+                    </Typography>
+                    <Typography
+                      sx={{ width: "100%", ml: -5 }}
+                      variant="subtitle2"
+                      component="label"
+                      id="value-label"
+                    >
+                      Value
+                    </Typography>
+                  </Box>
+                  <ListManager
+                    maxItems={10}
+                    disableDragAndDrop
+                    values={values.govPayMetadata || []}
+                    onChange={(metadata) => {
+                      setFieldValue("govPayMetadata", metadata);
+                    }}
+                    Editor={GovPayMetadataEditor}
+                    newValue={() => {
+                      setTouched({});
+                      return { key: "", value: "" };
+                    }}
+                    isFieldDisabled={({ key }, index) =>
+                      isFieldDisabled(key, index)
+                    }
+                  />
+                </>
+              </ErrorWrapper>
+            </ModalSectionContent>
+          </ModalSection>
           <ModalSection>
             <ModalSectionContent title="Invite to Pay" Icon={ICONS[TYPES.Pay]}>
               <OptionButton
diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts
index 9caeb92efe..25e6735304 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 = ["GOVPAY_METADATA"] as const;
+const AVAILABLE_FEATURE_FLAGS = [] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 
@@ -25,7 +25,7 @@ const activeFeatureFlags = (() => {
  */
 export const toggleFeatureFlag = (
   featureFlag: FeatureFlag,
-  autoReload = true,
+  autoReload = true
 ) => {
   const supportedFlag = AVAILABLE_FEATURE_FLAGS.includes(featureFlag);
 
@@ -35,13 +35,13 @@ export const toggleFeatureFlag = (
     activeFeatureFlags.add(featureFlag);
   } else {
     throw new Error(
-      `${featureFlag} is not a supported feature flag, try again. Available flags are: ${AVAILABLE_FEATURE_FLAGS}`,
+      `${featureFlag} is not a supported feature flag, try again. Available flags are: ${AVAILABLE_FEATURE_FLAGS}`
     );
   }
 
   localStorage.setItem(
     "FEATURE_FLAGS",
-    JSON.stringify(Array.from(activeFeatureFlags)),
+    JSON.stringify(Array.from(activeFeatureFlags))
   );
 
   if (autoReload) window.location.reload();
@@ -71,6 +71,6 @@ if (process.env.REACT_APP_ENV !== "test") {
         ]
           .sort()
           .join(", ")}`
-      : `🎏 no active feature flags`,
+      : `🎏 no active feature flags`
   );
 }