diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx index 3079af22e3..958f617c9a 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx @@ -133,7 +133,7 @@ export const FeeBreakdown: React.FC<{ inviteToPayFeeBreakdown?: IFeeBreakdown }> return ( - Fee breakdown + Fee {DESCRIPTION} diff --git a/editor.planx.uk/src/pages/Pay/MakePayment.tsx b/editor.planx.uk/src/pages/Pay/MakePayment.tsx index c8d03f3ee9..f5b888d569 100644 --- a/editor.planx.uk/src/pages/Pay/MakePayment.tsx +++ b/editor.planx.uk/src/pages/Pay/MakePayment.tsx @@ -11,6 +11,7 @@ import { 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"; @@ -172,14 +173,10 @@ export default function MakePayment({ ); - 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, @@ -190,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({ @@ -222,15 +226,17 @@ export default function MakePayment({ ) : ( <>
- + {(currentState === States.Ready || currentState === States.Reset || currentState === States.ReadyToRetry) && !isLoading && ( <> - - - + {hasFeatureFlag("FEE_BREAKDOWN") && ( + + + + )} { 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(paymentURL); return response.data; } @@ -265,11 +270,10 @@ async function fetchPayment({ async function startNewPayment( paymentRequestId: string, ): Promise { - 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(paymentURL); return response.data; }