-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Initial fee breakdown public UI (#4006)
- Loading branch information
1 parent
618f37d
commit 3a52971
Showing
11 changed files
with
291 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"; | ||
import { useFormikContext } from "formik"; | ||
import { hasFeatureFlag } from "lib/featureFlags"; | ||
import React from "react"; | ||
import ModalSection from "ui/editor/ModalSection"; | ||
import ModalSectionContent from "ui/editor/ModalSectionContent"; | ||
import InputRow from "ui/shared/InputRow"; | ||
import { Switch } from "ui/shared/Switch"; | ||
|
||
import { Pay } from "../model"; | ||
|
||
export const FeeBreakdownSection: React.FC = () => { | ||
const { values, setFieldValue } = useFormikContext<Pay>(); | ||
|
||
if (!hasFeatureFlag("FEE_BREAKDOWN")) return null; | ||
|
||
return ( | ||
<ModalSection> | ||
<ModalSectionContent title="Fee breakdown" Icon={ReceiptLongIcon}> | ||
<InputRow> | ||
<Switch | ||
checked={values.showFeeBreakdown} | ||
onChange={() => | ||
setFieldValue("showFeeBreakdown", !values.showFeeBreakdown) | ||
} | ||
label="Display a breakdown of the fee to the applicant" | ||
/> | ||
</InputRow> | ||
</ModalSectionContent> | ||
</ModalSection> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from "react"; | ||
import { setup } from "testUtils"; | ||
import { vi } from "vitest"; | ||
import { axe } from "vitest-axe"; | ||
|
||
import { FeeBreakdown } from "./FeeBreakdown"; | ||
|
||
vi.mock("lib/featureFlags", () => ({ | ||
hasFeatureFlag: () => true, | ||
})); | ||
|
||
it("should not have any accessibility violations", async () => { | ||
const { container } = setup(<FeeBreakdown />); | ||
const results = await axe(container); | ||
|
||
expect(results).toHaveNoViolations(); | ||
}); | ||
|
||
// Placeholder tests and initial assumptions | ||
it.todo("displays a planning fee"); | ||
|
||
it.todo("displays a total"); | ||
|
||
it.todo("displays a service charge if applicable"); | ||
it.todo("does not display a service charge if not applicable"); | ||
|
||
it.todo("displays VAT if applicable"); | ||
it.todo("does not display VAT if not applicable"); | ||
|
||
it.todo("displays exemptions if applicable"); | ||
it.todo("does not exemptions if not applicable"); | ||
|
||
it.todo("displays reductions if applicable"); | ||
it.todo("does not reductions if not applicable"); | ||
|
||
it.todo("does not display if fee calculation values are invalid"); | ||
it.todo("silently throws an error if fee calculations are invalid"); |
111 changes: 111 additions & 0 deletions
111
editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
import Box from "@mui/material/Box"; | ||
import { styled } from "@mui/material/styles"; | ||
import Table from "@mui/material/Table"; | ||
import TableBody from "@mui/material/TableBody"; | ||
import TableCell, { tableCellClasses } from "@mui/material/TableCell"; | ||
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 { hasFeatureFlag } from "lib/featureFlags"; | ||
import React from "react"; | ||
import { FONT_WEIGHT_SEMI_BOLD } from "theme"; | ||
|
||
import { formattedPriceWithCurrencySymbol } from "../model"; | ||
|
||
const StyledTable = styled(Table)(() => ({ | ||
[`& .${tableCellClasses.root}`]: { | ||
paddingLeft: 0, | ||
paddingRight: 0, | ||
}, | ||
})); | ||
|
||
const BoldTableRow = styled(TableRow)(() => ({ | ||
[`& .${tableCellClasses.root}`]: { | ||
fontWeight: FONT_WEIGHT_SEMI_BOLD, | ||
}, | ||
})); | ||
|
||
const VAT_RATE = 20; | ||
|
||
const DESCRIPTION = | ||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; | ||
|
||
const Header = () => ( | ||
<TableHead> | ||
<BoldTableRow> | ||
<TableCell>Description</TableCell> | ||
<TableCell align="right">Amount</TableCell> | ||
</BoldTableRow> | ||
</TableHead> | ||
); | ||
|
||
const ApplicationFee = () => ( | ||
<TableRow> | ||
<TableCell>Application fee</TableCell> | ||
<TableCell align="right">{formattedPriceWithCurrencySymbol(100)}</TableCell> | ||
</TableRow> | ||
); | ||
|
||
const Exemptions = () => ( | ||
<TableRow> | ||
<TableCell>Exemptions</TableCell> | ||
<TableCell align="right">{formattedPriceWithCurrencySymbol(-20)}</TableCell> | ||
</TableRow> | ||
); | ||
|
||
const Reductions = () => ( | ||
<TableRow> | ||
<TableCell>Reductions</TableCell> | ||
<TableCell align="right">{formattedPriceWithCurrencySymbol(-30)}</TableCell> | ||
</TableRow> | ||
); | ||
|
||
const ServiceCharge = () => ( | ||
<TableRow> | ||
<TableCell>Service charge</TableCell> | ||
<TableCell align="right">{formattedPriceWithCurrencySymbol(30)}</TableCell> | ||
</TableRow> | ||
); | ||
|
||
const VAT = () => ( | ||
<TableRow> | ||
<TableCell>{`VAT (${VAT_RATE}%)`}</TableCell> | ||
<TableCell align="right">-</TableCell> | ||
</TableRow> | ||
); | ||
|
||
const Total = () => ( | ||
<BoldTableRow> | ||
<TableCell>Total</TableCell> | ||
<TableCell align="right">{formattedPriceWithCurrencySymbol(80)}</TableCell> | ||
</BoldTableRow> | ||
); | ||
|
||
export const FeeBreakdown: React.FC = () => { | ||
if (!hasFeatureFlag("FEE_BREAKDOWN")) return null; | ||
|
||
return ( | ||
<Box mt={3}> | ||
<Typography variant="h3" mb={1}> | ||
Fee breakdown | ||
</Typography> | ||
<Typography variant="body1" mb={2}> | ||
{DESCRIPTION} | ||
</Typography> | ||
<TableContainer> | ||
<StyledTable data-testid="fee-breakdown-table"> | ||
<Header /> | ||
<TableBody> | ||
<ApplicationFee /> | ||
<ServiceCharge /> | ||
<Exemptions /> | ||
<Reductions /> | ||
<VAT /> | ||
<Total /> | ||
</TableBody> | ||
</StyledTable> | ||
</TableContainer> | ||
</Box> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.