From 1784294d95c8fa90fd1d1daff40a918572a9932c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Thu, 21 Nov 2024 09:00:07 +0000 Subject: [PATCH] chore: Move Pay default values to model (#3993) --- .../@planx/components/Pay/Editor/Editor.tsx | 50 +------------------ .../@planx/components/Pay/Public/Confirm.tsx | 15 +++--- .../components/Pay/Public/InviteToPayForm.tsx | 5 +- .../src/@planx/components/Pay/Public/Pay.tsx | 8 +-- .../src/@planx/components/Pay/model.ts | 40 ++++++++++++++- 5 files changed, 54 insertions(+), 64 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx index 0d2c844252..8f0a9fbb6c 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx @@ -2,12 +2,11 @@ import { ComponentType as TYPES, } from "@opensystemslab/planx-core/types"; import { + parsePay, Pay, validationSchema, } from "@planx/components/Pay/model"; -import { parseBaseNodeData } from "@planx/components/shared"; import { Form, Formik } from "formik"; -import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { ComponentTagSelect } from "ui/editor/ComponentTagSelect"; import { InternalNotes } from "ui/editor/InternalNotes"; @@ -27,51 +26,6 @@ import { InviteToPaySection } from "./InviteToPaySection"; export type Props = EditorProps; const Component: React.FC = (props: Props) => { - const [flowName] = useStore((store) => [store.flowName]); - const initialValues: Pay = { - title: props.node?.data?.title || "Pay for your application", - bannerTitle: - props.node?.data?.bannerTitle || - "The planning fee for this application is", - description: - props.node?.data?.description || - `

The planning fee covers the cost of processing your application.\ - Find out more about how planning fees are calculated (opens in new tab).

`, - fn: props.node?.data?.fn, - instructionsTitle: props.node?.data?.instructionsTitle || "How to pay", - instructionsDescription: - props.node?.data?.instructionsDescription || - `

You can pay for your application by using GOV.UK Pay.

\ -

Your application will be sent after you have paid the fee. \ - Wait until you see an application sent message before closing your browser.

`, - hidePay: props.node?.data?.hidePay || false, - allowInviteToPay: props.node?.data?.allowInviteToPay ?? true, - secondaryPageTitle: - props.node?.data?.secondaryPageTitle || - "Invite someone else to pay for this application", - nomineeTitle: - props.node?.data?.nomineeTitle || "Details of the person paying", - nomineeDescription: props.node?.data?.nomineeDescription, - yourDetailsTitle: props.node?.data?.yourDetailsTitle || "Your details", - yourDetailsDescription: props.node?.data?.yourDetailsDescription, - yourDetailsLabel: - props.node?.data?.yourDetailsLabel || "Your name or organisation name", - govPayMetadata: props.node?.data?.govPayMetadata || [ - { - key: "flow", - value: flowName, - }, - { - key: "source", - value: "PlanX", - }, - { - key: "paidViaInviteToPay", - value: "@paidViaInviteToPay", - }, - ], - ...parseBaseNodeData(props.node?.data), - }; const onSubmit = (newValues: Pay) => { if (props.handleSubmit) { @@ -81,7 +35,7 @@ const Component: React.FC = (props: Props) => { return ( - initialValues={initialValues} + initialValues={parsePay(props.node?.data)} onSubmit={onSubmit} validationSchema={validationSchema} validateOnChange={true} diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx index 99b32a8be6..0cf82f91d8 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx @@ -14,7 +14,7 @@ import FormWrapper from "ui/public/FormWrapper"; import ErrorSummary from "ui/shared/ErrorSummary/ErrorSummary"; import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml"; -import { formattedPriceWithCurrencySymbol } from "../model"; +import { formattedPriceWithCurrencySymbol, getDefaultContent } from "../model"; import InviteToPayForm, { InviteToPayFormProps } from "./InviteToPayForm"; import { PAY_API_ERROR_UNSUPPORTED_TEAM } from "./Pay"; @@ -56,6 +56,7 @@ const PayText = styled(Box)(({ theme }) => ({ const PayBody: React.FC = (props) => { const path = useStore((state) => state.path); const isSaveReturn = path === ApplicationPath.SaveAndReturn; + const defaults = getDefaultContent(); if (props.error) { if (props.error.startsWith(PAY_API_ERROR_UNSUPPORTED_TEAM)) { @@ -85,14 +86,11 @@ const PayBody: React.FC = (props) => { - {props.instructionsTitle || "How to pay"} + {props.instructionsTitle || defaults.instructionsTitle } You can pay for your application by using GOV.UK Pay.

\ -

Your application will be sent after you have paid the fee. \ - Wait until you see an application sent message before closing your browser.

` + props.instructionsDescription || defaults.instructionsDescription } openLinksOnNewTab /> @@ -128,6 +126,8 @@ export default function Confirm(props: Props) { const theme = useTheme(); const [page, setPage] = useState<"Pay" | "InviteToPay">("Pay"); + const defaults = getDefaultContent(); + const changePage = () => { if (page === "Pay" && !props.paymentStatus) { setPage("InviteToPay"); @@ -168,8 +168,7 @@ export default function Confirm(props: Props) { className="marginBottom" component="h2" > - {props.bannerTitle || - "The planning fee for this application is"} + {props.bannerTitle || defaults.bannerTitle} = ({ data: { mountpath }, } = useCurrentRoute(); + const defaults = getDefaultContent(); + // Scroll to top when loading component useEffect(() => { window.scrollTo(0, 0); @@ -226,7 +229,7 @@ const InviteToPayForm: React.FC = ({ /> )} - + ({ + title: "Pay for your application", + bannerTitle: "The planning fee for this application is", + fn: "application.fee.payable", + description: `

The planning fee covers the cost of processing your application.\ + Find out more about how planning fees are calculated (opens in new tab).

`, + instructionsTitle: "How to pay", + instructionsDescription: `

You can pay for your application by using GOV.UK Pay.

\ +

Your application will be sent after you have paid the fee. \ + Wait until you see an application sent message before closing your browser.

`, + hidePay: false, + allowInviteToPay: true, + secondaryPageTitle: "Invite someone else to pay for this application", + nomineeTitle: "Details of the person paying", + yourDetailsTitle: "Your details", + yourDetailsLabel: "Your name or organisation name", + govPayMetadata: [ + { + key: "flow", + value: useStore.getState().flowName, + }, + { + key: "source", + value: "PlanX", + }, + { + key: "paidViaInviteToPay", + value: "@paidViaInviteToPay", + }, + ], +}); + +export const parsePay = (data?: Record): Pay => ({ + ...parseBaseNodeData(data), + ...getDefaultContent(), + ...data, +});