-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Initial fee breakdown public UI #4006
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
65064c0
feat: Update model, add optional fee breakdown section in Editor modal
DafyddLlyr 1ebd54a
chore: Use existing type to get new `showFeeBreakdown` prop
DafyddLlyr d3b24cc
feat: Dummy initial UI
DafyddLlyr 6c693dc
feat(storybook): Initial setup
DafyddLlyr 023d288
chore: Add feature flag
DafyddLlyr 6ab0d49
feat: Simplify editor interface (for now!)
DafyddLlyr 370f4dd
fix: Import order, default values
DafyddLlyr 26872dd
test: Basic initial tests and a few todo placeholders
DafyddLlyr c507877
chore: Rename to ApplicationFee, update dummy values
DafyddLlyr 74bb00b
fix: Tidy up table styles
DafyddLlyr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ooh didn't know you could do this! 💡