fix: Break link between isInviteToPay Pay component prop and `paidV…

…iaInviteToPay` metadata value (#3038)
theopensystemslab · Apr 23, 2024 · 95bd622 · 95bd622
1 parent 0f34e73
commit 95bd622
Show file tree

Hide file tree

Showing 18 changed files with 112 additions and 97 deletions.
diff --git a/api.planx.uk/modules/pay/middleware.ts b/api.planx.uk/modules/pay/middleware.ts
@@ -137,10 +137,11 @@ export async function buildPaymentPayload(
   }
 
   // Convert metadata to format required by GovPay
-  const metadata = formatGovPayMetadata(
-    res.locals.govPayMetadata,
-    res.locals.passport,
-  );
+  const metadata = formatGovPayMetadata({
+    metadata: res.locals.govPayMetadata,
+    userPassport: res.locals.passport,
+    paidViaInviteToPay: true,
+  });
 
   const createPaymentBody: GovPayCreatePayment = {
     amount: parseInt(req.params.paymentAmount),

diff --git a/api.planx.uk/package.json b/api.planx.uk/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#52f76e7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#4e67b2e",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",

diff --git a/api.planx.uk/pnpm-lock.yaml b/api.planx.uk/pnpm-lock.yaml
diff --git a/api.planx.uk/tests/mocks/inviteToPayMocks.ts b/api.planx.uk/tests/mocks/inviteToPayMocks.ts
@@ -129,7 +129,7 @@ export const createPaymentRequestQueryMock = {
     sessionPreviewData: sessionPreviewData,
     govPayMetadata: [
       { key: "source", value: "PlanX" },
-      { key: "isInviteToPay", value: true },
+      { key: "paidViaInviteToPay", value: true },
       { key: "flow", value: validSession.flow.slug },
     ],
   },

diff --git a/e2e/tests/api-driven/package.json b/e2e/tests/api-driven/package.json
@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#52f76e7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#4e67b2e",
     "axios": "^1.6.8",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",

diff --git a/e2e/tests/api-driven/pnpm-lock.yaml b/e2e/tests/api-driven/pnpm-lock.yaml
diff --git a/e2e/tests/api-driven/src/invite-to-pay/mocks/flow.json b/e2e/tests/api-driven/src/invite-to-pay/mocks/flow.json
@@ -72800,9 +72800,9 @@
         "secondaryPageTitle": "Invite someone else to pay for this application",
         "instructionsDescription": "<p>You can pay for your application by using GOV.UK Pay.</p>         <p>Your application will be sent after you have paid the fee.          Wait until you see an application sent message before closing your browser.</p>",
         "govPayMetadata": [
-          { "value": "flow-name", "key": "flow" },
-          { "value": "PlanX", "key": "source" },
-          { "value": true, "key": "isInviteToPay" }
+          { "key": "flow", "value": "flow-name" },
+          { "key": "source", "value": "PlanX" },
+          { "key": "paidViaInviteToPay", "value": "@paidViaInviteToPay" }
         ]
       },
       "type": 400

diff --git a/e2e/tests/ui-driven/package.json b/e2e/tests/ui-driven/package.json
@@ -8,7 +8,7 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#52f76e7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#4e67b2e",
     "axios": "^1.6.8",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

diff --git a/e2e/tests/ui-driven/pnpm-lock.yaml b/e2e/tests/ui-driven/pnpm-lock.yaml
diff --git a/e2e/tests/ui-driven/src/mocks/flows/invite-to-pay-flow.ts b/e2e/tests/ui-driven/src/mocks/flows/invite-to-pay-flow.ts
@@ -85,9 +85,9 @@ const flow: FlowGraph = {
       yourDetailsTitle: "Your details",
       yourDetailsLabel: "Your name or organisation name",
       govPayMetadata: [
-        { value: "flow-name", key: "flow" },
-        { value: "PlanX", key: "source" },
-        { value: true, key: "isInviteToPay" },
+        { key: "flow", value: "flow-name" },
+        { key: "source", value: "PlanX" },
+        { key: "paidViaInviteToPay", value: "@paidViaInviteToPay" },
       ],
     },
     type: ComponentType.Pay,

diff --git a/e2e/tests/ui-driven/src/mocks/flows/pay-flow.json b/e2e/tests/ui-driven/src/mocks/flows/pay-flow.json
@@ -22,9 +22,18 @@
       "title": "Pay for your application",
       "description": "<p>The planning fee covers the cost of processing your application.         Find out more about how planning fees are calculated          <a href=\"https://www.gov.uk/guidance/fees-for-planning-applications\" target=\"_self\">here</a>.</p>",
       "govPayMetadata": [
-        { "value": "flow-name", "key": "flow" },
-        { "value": "PlanX", "key": "source" },
-        { "value": true, "key": "isInviteToPay" }
+        {
+          "key": "flow",
+          "value": "flow-name"
+        },
+        {
+          "key": "source",
+          "value": "PlanX"
+        },
+        {
+          "key": "paidViaInviteToPay",
+          "value": "@paidViaInviteToPay"
+        }
       ]
     },
     "type": 400

diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -12,7 +12,7 @@
     "@mui/material": "^5.15.2",
     "@mui/utils": "^5.15.2",
     "@opensystemslab/map": "^0.8.1",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#52f76e7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#4e67b2e",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx
@@ -67,7 +67,7 @@ describe("Pay component - Editor Modal", () => {
       );
       expect(getByDisplayValue("flow")).toBeInTheDocument();
       expect(getByDisplayValue("source")).toBeInTheDocument();
-      expect(getByDisplayValue("isInviteToPay")).toBeInTheDocument();
+      expect(getByDisplayValue("paidViaInviteToPay")).toBeInTheDocument();
     });
 
     it("does not allow default sections to be deleted", () => {
@@ -85,32 +85,6 @@ describe("Pay component - Editor Modal", () => {
       expect(deleteIcons[2]).toBeDisabled();
     });
 
-    it("updates the 'isInviteToPay' metadata value inline with the 'isInviteToPay' form value", async () => {
-      const node = {
-        data: {
-          allowInviteToPay: false,
-        },
-      };
-
-      const { user, getAllByLabelText, getByText } = setup(
-        <DndProvider backend={HTML5Backend}>
-          <PayComponent id="test" node={node} />
-        </DndProvider>,
-      );
-
-      const keyInputs = getAllByLabelText("Key");
-      const valueInputs = getAllByLabelText("Value");
-
-      expect(keyInputs[2]).toHaveDisplayValue("isInviteToPay");
-      expect(valueInputs[2]).toHaveDisplayValue("false");
-
-      await user.click(
-        getByText("Allow applicants to invite someone else to pay"),
-      );
-
-      expect(valueInputs[2]).toHaveValue("true");
-    });
-
     it("pre-populates existing values", () => {
       const node = {
         data: {
@@ -177,7 +151,7 @@ describe("Pay component - Editor Modal", () => {
           govPayMetadata: [
             { key: "flow", value: "flowName" },
             { key: "source", value: "PlanX" },
-            { key: "isInviteToPay", value: "true" },
+            { key: "paidViaInviteToPay", value: "@paidViaInviteToPay" },
             { key: "deleteMe", value: "abc123" },
           ],
         },
@@ -208,7 +182,7 @@ describe("Pay component - Editor Modal", () => {
       expect(handleSubmit.mock.lastCall[0].data.govPayMetadata).toEqual([
         { key: "flow", value: "flowName" },
         { key: "source", value: "PlanX" },
-        { key: "isInviteToPay", value: "true" },
+        { key: "paidViaInviteToPay", value: "@paidViaInviteToPay" },
       ]);
     });
 

diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.tsx
@@ -2,7 +2,10 @@ import DataObjectIcon from "@mui/icons-material/DataObject";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
-import { GovPayMetadata, ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import {
+  ComponentType as TYPES,
+  GovPayMetadata,
+} from "@opensystemslab/planx-core/types";
 import {
   Pay,
   REQUIRED_GOVPAY_METADATA,
@@ -173,8 +176,8 @@ const Component: React.FC<Props> = (props: Props) => {
         value: "PlanX",
       },
       {
-        key: "isInviteToPay",
-        value: props.node?.data?.allowInviteToPay ?? true,
+        key: "paidViaInviteToPay",
+        value: "@paidViaInviteToPay",
       },
     ],
     ...parseMoreInformation(props.node?.data),
@@ -287,11 +290,14 @@ const Component: React.FC<Props> = (props: Props) => {
                 </Link>{" "}
                 for more details.
               </Typography>
-              <Typography variant="subtitle2" sx={{ mb: 2 }}>Any values beginning with @ will be dynamically read from data values set throughout the flow.</Typography>
+              <Typography variant="subtitle2" sx={{ mb: 2 }}>
+                Any values beginning with @ will be dynamically read from data
+                values set throughout the flow.
+              </Typography>
               <ErrorWrapper
                 error={
                   typeof errors.govPayMetadata === "string" &&
-                    touched.govPayMetadata
+                  touched.govPayMetadata
                     ? errors.govPayMetadata
                     : undefined
                 }
@@ -348,14 +354,6 @@ const Component: React.FC<Props> = (props: Props) => {
                 selected={values.allowInviteToPay}
                 onClick={() => {
                   setFieldValue("allowInviteToPay", !values.allowInviteToPay);
-                  // Update GovUKMetadata
-                  const inviteToPayIndex = values.govPayMetadata?.findIndex(
-                    ({ key }) => key === "isInviteToPay",
-                  );
-                  setFieldValue(
-                    `govPayMetadata[${inviteToPayIndex}].value`,
-                    !values.allowInviteToPay,
-                  );
                 }}
                 style={{ width: "100%" }}
               >

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
@@ -72,7 +72,7 @@ function Component(props: Props) {
   const defaultMetadata = [
     { key: "source", value: "PlanX" },
     { key: "flow", value: flowSlug },
-    { key: "isInviteToPay", value: false },
+    { key: "paidViaInviteToPay", value: "@paidViaInviteToPay" },
   ];
   const metadata = props.govPayMetadata?.length
     ? props.govPayMetadata
@@ -273,9 +273,9 @@ function Component(props: Props) {
   return (
     <>
       {state.status === "init" ||
-        state.status === "retry" ||
-        state.status === "unsupported_team" ||
-        state.status === "undefined_fee" ? (
+      state.status === "retry" ||
+      state.status === "unsupported_team" ||
+      state.status === "undefined_fee" ? (
         <Confirm
           {...props}
           fee={fee}

diff --git a/editor.planx.uk/src/@planx/components/Pay/model.test.ts b/editor.planx.uk/src/@planx/components/Pay/model.test.ts
@@ -7,14 +7,14 @@ describe("GovPayMetadata Schema", () => {
   const defaults = [
     { key: "flow", value: "flowName" },
     { key: "source", value: "PlanX" },
-    { key: "isInviteToPay", value: "true" },
+    { key: "paidViaInviteToPay", value: "@paidViaInviteToPay" },
   ];
 
   test("it requires all default values", async () => {
     const errors = await validate([]);
     expect(errors).toHaveLength(1);
     expect(errors[0]).toMatch(
-      /Keys flow, source and isInviteToPay must be present/
+      /Keys flow, source and paidViaInviteToPay must be present/,
     );
   });
 
@@ -57,7 +57,7 @@ describe("GovPayMetadata Schema", () => {
     expect(errors[0]).toMatch(/Value is a required field/);
   });
 
-  test("value cannot be greater than 100 characters", async () => {
+  test("static values cannot be greater than 100 characters", async () => {
     const input = [
       ...defaults,
       {
@@ -71,6 +71,21 @@ describe("GovPayMetadata Schema", () => {
     expect(errors[0]).toMatch(/Value length cannot exceed 100 characters/);
   });
 
+  test("dynamic passport value can be greater than 100 characters", async () => {
+    const input = [
+      ...defaults,
+      {
+        key: "myPassportVariable",
+        value:
+          "@thisIsAVeryLongPassportVariable.itsUnlikelyToHappenButWeDontNeedToRestrict.theDynamicValueThisReadsWillBeTruncatedAtTimeOfSubmission",
+      },
+    ];
+    const result = await validate(input);
+
+    // No errors, input returned from validation
+    expect(result).toEqual(input);
+  });
+
   test("keys must be unique", async () => {
     const input = [
       ...defaults,