diff --git a/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalObjectFieldTemplate.tsx b/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalObjectFieldTemplate.tsx index e907502a69..f9c7d93d86 100644 --- a/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalObjectFieldTemplate.tsx +++ b/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalObjectFieldTemplate.tsx @@ -34,6 +34,11 @@ const StyledFlex = styled.div` width: 100%; } + input[inputmode='decimal'] { + margin-top: 0; + min-width: 284px; + } + ${(props) => props.theme.breakpoint.smallUp} { .pg-select-wrapper { min-width: 330px; @@ -46,6 +51,10 @@ const StyledFlex = styled.div` .datepicker-widget { min-width: 330px; } + + input[inputmode='decimal'] { + min-width: 330px; + } } ${(props) => props.theme.breakpoint.mediumUp} { @@ -69,6 +78,10 @@ const StyledFlex = styled.div` min-width: 340px; } + input[inputmode='decimal'] { + min-width: 212px; + } + padding-bottom: 0px; flex-wrap: nowrap; diff --git a/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalReadOnlyTheme.ts b/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalReadOnlyTheme.ts index a845747ebd..cf122a5338 100644 --- a/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalReadOnlyTheme.ts +++ b/app/components/Analyst/Project/ConditionalApproval/ConditionalApprovalReadOnlyTheme.ts @@ -6,6 +6,7 @@ import { ReadOnlyResponseWidget, ReadOnlyStatusWidget, ReadOnlyWidget, + ReadOnlyRequestedMoneyWidget, } from './widgets'; import ProjectTheme from '../ProjectTheme'; import ConditionalApprovalObjectFieldTemplate from './ConditionalApprovalObjectFieldTemplate'; @@ -22,6 +23,7 @@ const ConditionalApprovalReadOnlyTheme: ThemeProps = { ReadOnlyDecisionWidget, ReadOnlyResponseWidget, ReadOnlyStatusWidget, + ReadOnlyRequestedMoneyWidget, }, ObjectFieldTemplate: ConditionalApprovalObjectFieldTemplate, }; diff --git a/app/components/Analyst/Project/ConditionalApproval/widgets/ReadOnlyRequestedMoneyWidget.tsx b/app/components/Analyst/Project/ConditionalApproval/widgets/ReadOnlyRequestedMoneyWidget.tsx new file mode 100644 index 0000000000..6ff82938c5 --- /dev/null +++ b/app/components/Analyst/Project/ConditionalApproval/widgets/ReadOnlyRequestedMoneyWidget.tsx @@ -0,0 +1,11 @@ +import { WidgetProps } from '@rjsf/core'; +import formatMoney from 'utils/formatMoney'; +import { StyledValue } from './ReadOnlyWidget'; + +const ReadOnlyRequestedMoneyWidget: React.FC = ({ value }) => ( + + {value ? `${formatMoney(value)} requested` : null} + +); + +export default ReadOnlyRequestedMoneyWidget; diff --git a/app/components/Analyst/Project/ConditionalApproval/widgets/index.ts b/app/components/Analyst/Project/ConditionalApproval/widgets/index.ts index e803517fd2..8e465a40db 100644 --- a/app/components/Analyst/Project/ConditionalApproval/widgets/index.ts +++ b/app/components/Analyst/Project/ConditionalApproval/widgets/index.ts @@ -5,3 +5,4 @@ export { default as ReadOnlyStatusWidget } from './ReadOnlyStatusWidget'; export { default as ReadOnlyWidget } from './ReadOnlyWidget'; export { default as StatusSelectWidget } from './StatusSelectWidget'; export { default as HiddenWidget } from './HiddenWidget'; +export { default as ReadOnlyRequestedMoneyWidget } from './ReadOnlyRequestedMoneyWidget'; diff --git a/app/formSchema/analyst/conditionalApproval.ts b/app/formSchema/analyst/conditionalApproval.ts index eb1553dd7b..cf366de9a5 100644 --- a/app/formSchema/analyst/conditionalApproval.ts +++ b/app/formSchema/analyst/conditionalApproval.ts @@ -21,6 +21,9 @@ const conditionalApproval: JSONSchema7 = { type: 'string', enum: ['Announce immediately', 'Hold announcement'], }, + provincialRequested: { + type: 'number', + }, }, }, isedDecisionObj: { @@ -39,6 +42,9 @@ const conditionalApproval: JSONSchema7 = { type: 'string', enum: ['Announce immediately', 'Hold announcement'], }, + federalRequested: { + type: 'number', + }, }, }, letterOfApproval: { diff --git a/app/formSchema/uiSchema/analyst/conditionalApprovalReadOnlyUiSchema.tsx b/app/formSchema/uiSchema/analyst/conditionalApprovalReadOnlyUiSchema.tsx index 8f032971f0..032b56f11f 100644 --- a/app/formSchema/uiSchema/analyst/conditionalApprovalReadOnlyUiSchema.tsx +++ b/app/formSchema/uiSchema/analyst/conditionalApprovalReadOnlyUiSchema.tsx @@ -7,12 +7,18 @@ const conditionalApprovalReadOnlyUiSchema = { ministerDecision: { 'ui:widget': 'ReadOnlyDecisionWidget', }, + provincialRequested: { + 'ui:widget': 'ReadOnlyRequestedMoneyWidget', + }, }, isedDecisionObj: { ...conditionalApprovalUiSchema.isedDecisionObj, isedDecision: { 'ui:widget': 'ReadOnlyDecisionWidget', }, + federalRequested: { + 'ui:widget': 'ReadOnlyRequestedMoneyWidget', + }, }, letterOfApproval: { ...conditionalApprovalUiSchema.letterOfApproval, diff --git a/app/formSchema/uiSchema/analyst/conditionalApprovalUiSchema.tsx b/app/formSchema/uiSchema/analyst/conditionalApprovalUiSchema.tsx index ad17797270..0eb7dba621 100644 --- a/app/formSchema/uiSchema/analyst/conditionalApprovalUiSchema.tsx +++ b/app/formSchema/uiSchema/analyst/conditionalApprovalUiSchema.tsx @@ -37,6 +37,10 @@ const conditionalApprovalUiSchema = { 'ui:widget': 'SelectWidget', 'ui:placeholder': 'No recommendation', }, + provincialRequested: { + 'ui:widget': 'MoneyWidget', + 'ui:placeholder': '$ requested', + }, }, isedDecisionObj: { 'ui:title': '‎', @@ -55,6 +59,9 @@ const conditionalApprovalUiSchema = { 'ui:widget': 'SelectWidget', 'ui:placeholder': 'No recommendation', }, + federalRequested: { + 'ui:placeholder': '$ requested', + }, }, letterOfApproval: { diff --git a/app/tests/components/Review/ReviewTheme.ts b/app/tests/components/Review/ReviewTheme.ts index b27eb68612..cec7334676 100644 --- a/app/tests/components/Review/ReviewTheme.ts +++ b/app/tests/components/Review/ReviewTheme.ts @@ -178,14 +178,14 @@ const sharedReviewThemeTests = (renderTest) => { .getByText(/Total project cost/i) .closest('tr') .getElementsByTagName('td')[0] - ).toHaveTextContent('$1 230'); + ).toHaveTextContent('$1,230'); expect( section .getByText(/Total eligible cost/i) .closest('tr') .getElementsByTagName('td')[0] - ).toHaveTextContent('$1 000'); + ).toHaveTextContent('$1,000'); }); it('should display headings in the estimated employment', () => { diff --git a/app/utils/formatMoney.ts b/app/utils/formatMoney.ts index bf46288293..97532616c2 100644 --- a/app/utils/formatMoney.ts +++ b/app/utils/formatMoney.ts @@ -1,6 +1,7 @@ const formatMoney = (number: number) => { if (!number) return; - return '$' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' '); + // eslint-disable-next-line consistent-return + return `$${number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`; }; export default formatMoney;