Skip to content

Commit

Permalink
Merge pull request #4278 from unicef/pp-filter
Browse files Browse the repository at this point in the history 
[AB#208629]-add new column in payments table
  • Loading branch information
@mmaciekk
mmaciekk authored Oct 8, 2024
2 parents 3ab9666 + aae4fc9 commit b024d0d
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 123 deletions.
18 changes: 9 additions & 9 deletions src/frontend/src/components/programs/ProgramDetails/ProgramDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { Box, Grid, Typography } from '@mui/material';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { ProgrammeChoiceDataQuery, ProgramQuery } from '@generated/graphql';
import { MiśTheme } from '../../../theme';
import { choicesToDict, programStatusToColor } from '@utils/utils';
import { PartnerAccess } from '@components/programs/constants';
import { ContainerColumnWithBorder } from '@core/ContainerColumnWithBorder';
import { DividerLine } from '@core/DividerLine';
import { LabelizedField } from '@core/LabelizedField';
import { OverviewContainer } from '@core/OverviewContainer';
import { StatusBox } from '@core/StatusBox';
import { Title } from '@core/Title';
import { UniversalMoment } from '@core/UniversalMoment';
import { PartnerAccess } from '@components/programs/constants';
import { DividerLine } from '@core/DividerLine';
import { ProgrammeChoiceDataQuery, ProgramQuery } from '@generated/graphql';
import { Box, Grid, Typography } from '@mui/material';
import { choicesToDict, programStatusToColor } from '@utils/utils';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { MiśTheme } from '../../../theme';

const NumberOfHouseHolds = styled.div`
padding: ${({ theme }) => theme.spacing(8)};
Expand Down
64 changes: 32 additions & 32 deletions ...rontend/src/components/programs/ProgramDetails/__snapshots__/ProgramDetails.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`components/ProgramDetails should render 1`] = `
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 sc-beySPh fvkwGO css-1ps6pg7-MuiPaper-root"
>
<div
class="sc-gLLuof bNTvKV"
class="sc-fsYfdN hnQuqu"
>
<h6
class="MuiTypography-root MuiTypography-h6 css-1j53xw6-MuiTypography-root"
Expand All @@ -15,7 +15,7 @@ exports[`components/ProgramDetails should render 1`] = `
</h6>
</div>
<div
class="sc-hLQSwg ehkTgD"
class="sc-jTQCzO GcLEc"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-6 css-zow5z4-MuiGrid-root"
Expand All @@ -25,7 +25,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
status
Expand All @@ -34,14 +34,14 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-status"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
<div
class="sc-eDLKkx deAQag"
class="sc-gLLuof PuEQG"
>
<div
class="sc-jTQCzO cQZnmW status-box-container"
class="sc-iBdnpw jiYZmp status-box-container"
data-cy="status-container"
>
FINISHED
Expand All @@ -56,7 +56,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
START DATE
Expand All @@ -65,7 +65,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-START DATE"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
<time
Expand All @@ -82,7 +82,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
END DATE
Expand All @@ -91,7 +91,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-END DATE"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
<time
Expand All @@ -108,7 +108,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Programme Code
Expand All @@ -125,7 +125,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Sector
Expand All @@ -134,7 +134,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Sector"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Child Protection
Expand All @@ -147,7 +147,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Data Collecting Type
Expand All @@ -164,7 +164,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Frequency of Payment
Expand All @@ -173,7 +173,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Frequency of Payment"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Regular
Expand All @@ -186,7 +186,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Administrative Areas of implementation
Expand All @@ -195,7 +195,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Administrative Areas of implementation"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Crime book.
Expand All @@ -208,7 +208,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Description
Expand All @@ -217,7 +217,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Description"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Yeah worry might newspaper drive her many.
Expand All @@ -230,7 +230,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
CASH+
Expand All @@ -239,7 +239,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-CASH+"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
No
Expand All @@ -252,7 +252,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Partner Access
Expand All @@ -261,7 +261,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Partner Access"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Only Selected Partners within the business area
Expand All @@ -275,7 +275,7 @@ exports[`components/ProgramDetails should render 1`] = `
>
<div>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Programme size
Expand All @@ -284,7 +284,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Programme size"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
<div
Expand All @@ -298,14 +298,14 @@ exports[`components/ProgramDetails should render 1`] = `
</div>
</div>
<div
class="sc-iBdnpw fHCMfN"
class="sc-guDLey cGgsPx"
>
<div
class="sc-fsYfdN fnzeIa"
class="sc-dmyCSP hqweMa"
/>
</div>
<div
class="sc-gLLuof bNTvKV"
class="sc-fsYfdN hnQuqu"
>
<h6
class="MuiTypography-root MuiTypography-h6 css-1j53xw6-MuiTypography-root"
Expand All @@ -314,7 +314,7 @@ exports[`components/ProgramDetails should render 1`] = `
</h6>
</div>
<div
class="sc-hLQSwg ehkTgD"
class="sc-jTQCzO GcLEc"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-6 css-zow5z4-MuiGrid-root"
Expand All @@ -333,7 +333,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="labelized-field-container-area-access-field"
>
<span
class="sc-guDLey RwNuC"
class="sc-hLQSwg hqLXmS"
color="textSecondary"
>
Area Access
Expand All @@ -342,7 +342,7 @@ exports[`components/ProgramDetails should render 1`] = `
data-cy="label-Area Access"
>
<span
class="sc-dmyCSP bGPBYf"
class="sc-eDLKkx gpSOvu"
color="textSecondary"
>
Business Area
Expand Down
7 changes: 7 additions & 0 deletions src/frontend/src/containers/tables/paymentmodule/PaymentsTable/PaymentsTableHeadCells.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ export const headCells: HeadCell<
id: 'delivered_quantity',
numeric: false,
},
{
disablePadding: false,
label: 'Status',
id: 'status',
numeric: false,
disableSort: true,
},
{
disablePadding: false,
label: 'FSP Auth Code',
Expand Down
48 changes: 14 additions & 34 deletions src/frontend/src/containers/tables/paymentmodule/PaymentsTable/PaymentsTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,14 @@ import { ClickableTableRow } from '@components/core/Table/ClickableTableRow';
import { WarningTooltip } from '@components/core/WarningTooltip';
import {
formatCurrencyWithSymbol,
opacityToHex,
paymentStatusDisplayMap,
paymentStatusToColor,
renderSomethingOrDash,
} from '@utils/utils';
import { AllPaymentsForTableQuery, PaymentStatus } from '@generated/graphql';
import { AllPaymentsForTableQuery } from '@generated/graphql';
import { useBaseUrl } from '@hooks/useBaseUrl';
import { hasPermissions, PERMISSIONS } from '../../../../config/permissions';

export const StyledLink = styled.div`
color: #000;
text-decoration: underline;
cursor: pointer;
display: flex;
align-content: center;
`;

const RoutedBox = styled.div`
color: ${({ theme }) => theme.hctPalette.red};
background-color: ${({ theme }) =>
`${theme.hctPalette.red}${opacityToHex(0.15)}`};
border-radius: 16px;
font-family: Roboto;
font-size: 10px;
font-weight: 500;
letter-spacing: 1.2px;
line-height: 16px;
padding: ${({ theme }) => theme.spacing(1)};
text-align: center;
margin-right: 20px;
`;
import { StatusBox } from '@components/core/StatusBox';

const OrangeError = styled(ErrorOutlineRoundedIcon)`
color: ${({ theme }) => theme.hctPalette.orange};
Expand Down Expand Up @@ -80,16 +59,10 @@ export function PaymentsTableRow({
};

const renderDeliveredQuantity = (): React.ReactElement => {
const { deliveredQuantity, currency, deliveredQuantityUsd, status } =
payment;
if (status === PaymentStatus.TransactionErroneous) {
return <RoutedBox>UNSUCCESSFUL</RoutedBox>;
}
if (status === PaymentStatus.ManuallyCancelled) {
return <RoutedBox>CANCELLED</RoutedBox>;
}
const { deliveredQuantity, currency, deliveredQuantityUsd } = payment;

if (deliveredQuantity === null) {
return <></>;
return <>-</>;
}
return (
<>
Expand Down Expand Up @@ -176,6 +149,13 @@ export function PaymentsTableRow({
<TableCell data-cy="delivered-quantity-cell" align="left">
{renderDeliveredQuantity()}
</TableCell>
<TableCell>
<StatusBox
status={payment.status}
statusToColor={paymentStatusToColor}
statusNameMapping={paymentStatusDisplayMap}
/>
</TableCell>
{hasPermissions(PERMISSIONS.PM_VIEW_FSP_AUTH_CODE, permissions) && (
<TableCell data-cy="fsp-auth-code-cell" align="left">
{payment.fspAuthCode || '-'}
Expand Down
Loading

0 comments on commit b024d0d

Please sign in to comment.