Skip to content
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.

Sign up for GitHub

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(fee-breakdown): Initial Editor UI #4030

Closed
wants to merge 1 commit into from
Closed

feat(fee-breakdown): Initial Editor UI #4030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 125 additions & 1 deletion editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,134 @@
import HelpIcon from "@mui/icons-material/Help";
import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
import Box from "@mui/material/Box";
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 Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { BoldTableRow } from "@planx/components/shared/Table/TableRow";
import { useFormikContext } from "formik";
import { hasFeatureFlag } from "lib/featureFlags";
import React from "react";
import React, { PropsWithChildren } 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";
import { VAT_RATE } from "../Public/FeeBreakdown";

const DataField: React.FC<PropsWithChildren> = ({ children }) => (
<Typography variant="data" sx={(theme) => ({ fontSize: theme.typography.body3.fontSize, pr: 2 })}>{children}</Typography>
);

const HelpTooltip: React.FC<{ text: string }> = ({ text }) => (
<Tooltip title={text} placement="bottom-end">
<HelpIcon color="primary"/>
</Tooltip>
)

const ExampleTable: React.FC = () => (
<TableContainer>
<Table sx={{ [`& .${tableCellClasses.root}`]: { px: 0 } }} >
<TableHead>
<BoldTableRow>
<TableCell>Description</TableCell>
<TableCell align="right">Passport field</TableCell>
</BoldTableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Application fee</TableCell>
<TableCell align="right" sx={{ display: "flex", alignItems: "center"}}>
<HelpTooltip text="The fee will be the calculated amount (if set), or the payable amount" />
<DataField>£ application.fee.calculated</DataField>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Reduction</TableCell>
<TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
<HelpTooltip text="This is the sum of all reductions applied to the application fee. The list of reductions will be listed below" />
<DataField>- £ (calculated - payable)</DataField>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this shorthand for application.fee.calculated - application.fee.payable is that clear?

The "full" version pretty much always overflows and feels less clear even though the above is not technically correct.

image

</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.reduction.x.reason</DataField>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.reduction.y.reason</DataField>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.reduction.z.reason</DataField>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Exemptions</TableCell>
<TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
<HelpTooltip text="Exemptions will set the fee to £0.00, and list the reasons below" />
<DataField>- £ application.fee.payable</DataField>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.exemption.x.reason</DataField>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.exemption.y.reason</DataField>
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box sx={{ pl: 4 }}>
<DataField>application.fee.exemption.z.reason</DataField>
</Box>
</TableCell>
</TableRow>
<BoldTableRow>
<TableCell>Total</TableCell>
<TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
<HelpTooltip text="This is the sum the applicant will pay via GovPay" />
<DataField>£ application.fee.payable</DataField>
</TableCell>
</BoldTableRow>
<TableRow>
<TableCell>VAT ({VAT_RATE * 100}%)</TableCell>
<TableCell align="right" sx={{ display: "flex", alignItems: "center"}}>
<HelpTooltip text='If this value is set to "true" in the flow, we will display the calculated VAT amount' />
<DataField>application.fee.payable.includesVAT</DataField>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
)

const Details: React.FC = () => (
<>
<Typography variant="body2" py={2}>The table below describes the structure and passport variables that describe how the fee breakdown is displayed to the user. A validation check will run at publish to ensure the necessary fields are set by your service.</Typography>
<ExampleTable />
</>
);

export const FeeBreakdownSection: React.FC = () => {
const { values, setFieldValue } = useFormikContext<Pay>();
Expand All @@ -26,6 +147,9 @@ export const FeeBreakdownSection: React.FC = () => {
label="Display a breakdown of the fee to the applicant"
/>
</InputRow>
<>
{values.showFeeBreakdown && <Details /> }
</>
</ModalSectionContent>
</ModalSection>
);
Expand Down
12 changes: 3 additions & 9 deletions editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ 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 { BoldTableRow } from "@planx/components/shared/Table/TableRow";
import { hasFeatureFlag } from "lib/featureFlags";
import React from "react";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";

import { formattedPriceWithCurrencySymbol } from "../model";

Expand All @@ -20,13 +20,7 @@ const StyledTable = styled(Table)(() => ({
},
}));

const BoldTableRow = styled(TableRow)(() => ({
[`& .${tableCellClasses.root}`]: {
fontWeight: FONT_WEIGHT_SEMI_BOLD,
},
}));

const VAT_RATE = 20;
export const VAT_RATE = 0.2;

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.";
Expand Down Expand Up @@ -70,7 +64,7 @@ const ServiceCharge = () => (

const VAT = () => (
<TableRow>
<TableCell>{`VAT (${VAT_RATE}%)`}</TableCell>
<TableCell>{`VAT (${VAT_RATE * 100}%)`}</TableCell>
<TableCell align="right">-</TableCell>
</TableRow>
);
Expand Down
10 changes: 10 additions & 0 deletions editor.planx.uk/src/@planx/components/shared/Table/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";

export const BoldTableRow = styled(TableRow)(() => ({
[`& .${tableCellClasses.root}`]: {
fontWeight: FONT_WEIGHT_SEMI_BOLD,
},
}));
Loading