feat(fee-breakdown): Display for "invite to pay" journeys (#4057)

api.planx.uk/package.json

@@ -13,7 +13,7 @@
     "@airbrake/node": "^2.1.8",
     "@aws-sdk/client-s3": "^3.696.0",
     "@aws-sdk/s3-request-presigner": "^3.701.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#29b4851",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6c6f308",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "axios": "^1.7.4",

api.planx.uk/tests/mocks/inviteToPayData.ts

@@ -62,6 +62,16 @@ export const paymentRequestResponse: Partial<PaymentRequest> = {
   payeeEmail: payee.email,
   paymentAmount: paymentAmountPence,
   sessionPreviewData: sessionPreviewData,
+  feeBreakdown: {
+    amount: {
+      payable: 123.45,
+      calculated: 123.45,
+      vat: 0,
+      reduction: 0,
+    },
+    reductions: [],
+    exemptions: [],
+  },
 };
 
 export const validPaymentRequest = {

api.planx.uk/tests/mocks/inviteToPayMocks.ts

@@ -134,6 +134,16 @@ export const createPaymentRequestQueryMock = {
       { key: "paidViaInviteToPay", value: true },
       { key: "flow", value: validSession.flow.slug },
     ],
+    feeBreakdown: {
+      amount: {
+        payable: 123.45,
+        calculated: 123.45,
+        vat: 0,
+        reduction: 0,
+      },
+      reductions: [],
+      exemptions: [],
+    },
   },
 };
 

e2e/tests/api-driven/package.json

@@ -7,7 +7,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#29b4851",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6c6f308",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",

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#29b4851",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6c6f308",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

e2e/tests/ui-driven/src/invite-to-pay/helpers.ts

@@ -69,6 +69,7 @@ export async function getPaymentRequestBySessionId({
               paymentAmount: payment_amount
               applicantName: applicant_name
               paidAt: paid_at
+              feeBreakdown: fee_breakdown
             }
           }
         `,

e2e/tests/ui-driven/src/invite-to-pay/mocks.ts

@@ -18,6 +18,16 @@ export const mockPaymentRequest: Partial<PaymentRequest> = {
   },
   paymentAmount: 12345,
   applicantName: "Mr Agent (Agency Ltd)",
+  feeBreakdown: {
+    amount: {
+      calculated: 123.45,
+      payable: 123.45,
+      vat: 0,
+      reduction: 0,
+    },
+    reductions: [],
+    exemptions: [],
+  },
 };
 
 export const mockSessionData: Omit<SessionData, "id"> = {

e2e/tests/ui-driven/src/invite-to-pay/nominee.spec.ts

@@ -60,6 +60,8 @@ test.describe("Nominee journey @regression", async () => {
       "Add a verandah or deck and changes to internal walls or layout";
     await expect(page.getByText(formattedProjectType)).toBeVisible();
 
+    await expect(page.getByText("Fee breakdown")).toBeVisible();
+
     const payButton = page.getByRole("button", {
       name: "Pay using GOV.UK Pay",
     });

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#29b4851",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6c6f308",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

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

@@ -7,6 +7,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 type { FeeBreakdown as IFeeBreakdown } from "@opensystemslab/planx-core/types";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
@@ -122,16 +123,17 @@ const Total: React.FC<{ amount: number }> = ({ amount }) => (
   </BoldTableRow>
 );
 
-export const FeeBreakdown: React.FC = () => {
-  const breakdown = useFeeBreakdown();
+export const FeeBreakdown: React.FC<{ inviteToPayFeeBreakdown?: IFeeBreakdown }> = ({ inviteToPayFeeBreakdown }) => {
+  const passportFeeBreakdown = useFeeBreakdown();
+  const breakdown = passportFeeBreakdown || inviteToPayFeeBreakdown;
   if (!breakdown) return null;
 
   const { amount, reductions, exemptions } = breakdown;
 
   return (
     <Box mt={3}>
       <Typography variant="h3" mb={1}>
-        Fee breakdown
+        Fee
       </Typography>
       <Typography variant="body1" mb={2}>
         {DESCRIPTION}

editor.planx.uk/src/pages/Pay/MakePayment.tsx

@@ -8,8 +8,10 @@ import {
   type PaymentRequest,
   PaymentStatus,
 } from "@opensystemslab/planx-core/types";
+import { FeeBreakdown } from "@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown";
 import axios from "axios";
 import { format } from "date-fns";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { getExpiryDateForPaymentRequest } from "lib/pay";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
@@ -63,6 +65,7 @@ export default function MakePayment({
   govPayPaymentId,
   paymentAmount,
   paidAt,
+  feeBreakdown,
 }: PaymentRequest) {
   const { address, rawProjectTypes } =
     parseSessionPreviewData(sessionPreviewData);
@@ -170,14 +173,10 @@ export default function MakePayment({
       </Container>
     );
 
-  const PaymentDetails = () => {
+  const PaymentDetails: React.FC<{ hasFeeBreakdown: boolean}> = ({ hasFeeBreakdown }) => {
     const projectType = formatRawProjectTypes(rawProjectTypes);
     const data = [
       { term: "Application type", details: flowName },
-      {
-        term: "Fee",
-        details: formattedPriceWithCurrencySymbol(toDecimal(paymentAmount)),
-      },
       {
         term: "Property address",
         details: address,
@@ -188,6 +187,13 @@ export default function MakePayment({
       },
     ];
 
+    if (!hasFeeBreakdown) {
+      data.splice(1, 0, {
+        term: "Fee",
+        details: formattedPriceWithCurrencySymbol(toDecimal(paymentAmount))
+      });
+    };
+
     // Handle payments completed before page load
     if (paidAt) {
       data.push({
@@ -220,19 +226,26 @@ export default function MakePayment({
   ) : (
     <>
       <Header />
-      <PaymentDetails />
+        <PaymentDetails hasFeeBreakdown={Boolean(feeBreakdown)}/>
       {(currentState === States.Ready ||
         currentState === States.Reset ||
         currentState === States.ReadyToRetry) &&
         !isLoading && (
-          <Confirm
-            fee={toDecimal(paymentAmount)}
-            onConfirm={readyAction}
-            buttonTitle={currentState.button!}
-            showInviteToPay={false}
-            hideFeeBanner={true}
-            paymentStatus={payment?.state.status}
-          />
+          <>
+            {hasFeatureFlag("FEE_BREAKDOWN") && (
+              <Container maxWidth="contentWrap" sx={{ mt: 6, pb: 0 }}>
+                <FeeBreakdown inviteToPayFeeBreakdown={feeBreakdown} />
+              </Container>
+            )}
+            <Confirm
+              fee={toDecimal(paymentAmount)}
+              onConfirm={readyAction}
+              buttonTitle={currentState.button!}
+              showInviteToPay={false}
+              hideFeeBanner={true}
+              paymentStatus={payment?.state.status}
+            />
+          </>
         )}
     </>
   );
@@ -247,9 +260,8 @@ async function fetchPayment({
   govPayPaymentId?: string;
 }): Promise<GovUKPayment | null> {
   if (!govPayPaymentId) return Promise.resolve(null);
-  const paymentURL = `${
-    import.meta.env.VITE_APP_API_URL
-  }/payment-request/${paymentRequestId}/payment/${govPayPaymentId}`;
+  const paymentURL = `${import.meta.env.VITE_APP_API_URL
+    }/payment-request/${paymentRequestId}/payment/${govPayPaymentId}`;
   const response = await axios.get<GovUKPayment>(paymentURL);
   return response.data;
 }
@@ -258,11 +270,10 @@ async function fetchPayment({
 async function startNewPayment(
   paymentRequestId: string,
 ): Promise<GovUKPayment> {
-  const paymentURL = `${
-    import.meta.env.VITE_APP_API_URL
-  }/payment-request/${paymentRequestId}/pay?returnURL=${encodeURIComponent(
-    window.location.href,
-  )}`;
+  const paymentURL = `${import.meta.env.VITE_APP_API_URL
+    }/payment-request/${paymentRequestId}/pay?returnURL=${encodeURIComponent(
+      window.location.href,
+    )}`;
   const response = await axios.post<GovUKPayment>(paymentURL);
   return response.data;
 }

editor.planx.uk/src/routes/pay.tsx

@@ -112,6 +112,7 @@ const fetchPaymentRequest = async (paymentRequestId: string) => {
           ) {
             id
             sessionPreviewData: session_preview_data
+            feeBreakdown: fee_breakdown
             createdAt: created_at
             paymentAmount: payment_amount
             govPayPaymentId: govpay_payment_id

hasura.planx.uk/metadata/tables.yaml

@@ -1235,6 +1235,7 @@
         columns:
           - applicant_name
           - created_at
+          - fee_breakdown
           - govpay_metadata
           - govpay_payment_id
           - id
@@ -1250,6 +1251,7 @@
         columns:
           - applicant_name
           - created_at
+          - fee_breakdown
           - govpay_metadata
           - govpay_payment_id
           - id
@@ -1265,6 +1267,7 @@
         columns:
           - applicant_name
           - created_at
+          - fee_breakdown
           - govpay_payment_id
           - id
           - paid_at
@@ -1279,6 +1282,7 @@
         columns:
           - applicant_name
           - created_at
+          - fee_breakdown
           - govpay_metadata
           - govpay_payment_id
           - id

hasura.planx.uk/migrations/1733686124805_alter_table_public_payment_requests_add_column_fee_breakdown/down.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "public"."payment_requests"
+DROP COLUMN "fee_breakdown";

hasura.planx.uk/migrations/1733686124805_alter_table_public_payment_requests_add_column_fee_breakdown/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."payment_requests" add column "fee_breakdown" jsonb
+ null;