BOPS payload fixes and additions (#530)

* fix: ensure gov pay reference gets sent to bops

* fix: use GOV_PAY_PASSPORT_KEY for passport payment key

* feat: add payment_amount to bops payload

* use formattedPriceWithCurrencySymbol

* change sending payment to bops, include payment_amount

* fix: send payment_amount as integer in pence to bops

* refactor: put resetPreview with other useStore functions

* Delete bops.test.ts

* move store.resultData logic to getResultData to share functionality

* return flag result in BOPS data

* refactor: move various types to Send/model

* fix: BOPS work_status derived from passport application.type

* fix: wrap application.type in String() for bops payload check

not a permanent solution but it fixes the issue right now

* fix: ensure files[] exists for bops when pushing boundary file

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

@@ -15,6 +15,8 @@ import React from "react";
 import Input from "ui/Input";
 import ReactMarkdownOrHtml from "ui/ReactMarkdownOrHtml";
 
+import { formattedPriceWithCurrencySymbol } from "../model";
+
 const useStyles = makeStyles((theme) => ({
   root: {
     "& *": {
@@ -81,7 +83,7 @@ export default function Confirm(props: Props) {
             The planning fee for this application is
           </Typography>
           <Typography variant="h1" gutterBottom className="marginBottom">
-            {`£${props.fee.toFixed(2)}`}
+            {formattedPriceWithCurrencySymbol(props.fee)}
           </Typography>
 
           <Typography variant="h4">

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

@@ -7,7 +7,13 @@ import type { GovUKPayment } from "types";
 
 import { useTeamSlug } from "../../shared/hooks";
 import { makeData } from "../../shared/utils";
-import { createPayload, GOV_UK_PAY_URL, Pay, toDecimal } from "../model";
+import {
+  createPayload,
+  GOV_PAY_PASSPORT_KEY,
+  GOV_UK_PAY_URL,
+  Pay,
+  toDecimal,
+} from "../model";
 import Confirm from "./Confirm";
 
 export default Component;
@@ -106,7 +112,7 @@ function Component(props: Props) {
 
   const handleSuccess = () => {
     dispatch(Action.Success);
-    props.handleSubmit(makeData(props, govUkPayment, "payment"));
+    props.handleSubmit(makeData(props, govUkPayment, GOV_PAY_PASSPORT_KEY));
   };
 
   const updatePayment = (responseData: any): GovUKPayment => {

editor.planx.uk/src/@planx/components/Pay/model.ts

@@ -1,12 +1,5 @@
 import type { MoreInformation } from "../shared";
 
-export function toGBP(amount: number) {
-  return new Intl.NumberFormat("en-GB", {
-    style: "currency",
-    currency: "GBP",
-  }).format(amount);
-}
-
 export interface Pay extends MoreInformation {
   title?: string;
   description?: string;
@@ -38,6 +31,15 @@ export interface GovUKCreatePaymentPayload {
 export const toPence = (decimal: number) => Math.trunc(decimal * 100);
 export const toDecimal = (pence: number) => pence / 100;
 
+export const formattedPriceWithCurrencySymbol = (
+  amount: number,
+  currency = "GBP"
+) =>
+  new Intl.NumberFormat("en-GB", {
+    style: "currency",
+    currency,
+  }).format(amount);
+
 export const createPayload = (
   fee: number,
   reference: string
@@ -49,3 +51,5 @@ export const createPayload = (
 });
 
 export const GOV_UK_PAY_URL = `${process.env.REACT_APP_API_URL}/pay`;
+
+export const GOV_PAY_PASSPORT_KEY = "application.fee.reference.govPay" as const;