Skip to content

Commit 4fc3aa6

Browse files
author
Bogdan Tsechoev
committed
Consulting section UI polishing
1 parent 3851492 commit 4fc3aa6

File tree

3 files changed

+84
-69
lines changed

3 files changed

+84
-69
lines changed

‎ui/packages/platform/src/pages/Consulting/TransactionsTable/TransactionsTable.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
3+
import { Transaction } from "stores/consulting";
4+
import { formatPostgresInterval } from "../utils";
5+
import { Link } from "@postgres.ai/shared/components/Link2";
6+
7+
8+
type TransactionsTableProps = {
9+
transactions: Transaction[],
10+
alias: string
11+
}
12+
13+
export const TransactionsTable = ({ transactions, alias }: TransactionsTableProps) => (
14+
<TableContainer component={Paper} sx={{ mt: 1 }}>
15+
<Table>
16+
<TableHead>
17+
<TableRow>
18+
<TableCell>ActionTableCell>
19+
<TableCell>AmountTableCell>
20+
<TableCell>DateTableCell>
21+
<TableCell>DetailsTableCell>
22+
TableRow>
23+
TableHead>
24+
<TableBody>
25+
{transactions.map(({ amount, created_at, issue_id, description, id }: Transaction) => (
26+
<TableRow key={id}>
27+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{amount.charAt(0) === '-' ? 'Utilize' : 'Replenish'}TableCell>
28+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{formatPostgresInterval(amount || '00')}TableCell>
29+
<TableCell sx={{ whiteSpace: 'nowrap' }}>{new Date(created_at)?.toISOString()?.split('T')?.[0]}TableCell>
30+
<TableCell>
31+
{issue_id ? (
32+
<Link external to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${alias}/-/issues/${issue_id}`} target="_blank">
33+
{description}
34+
Link>
35+
) : description}
36+
TableCell>
37+
TableRow>
38+
))}
39+
TableBody>
40+
Table>
41+
TableContainer>
42+
);

‎ui/packages/platform/src/pages/Consulting/index.tsx

Lines changed: 41 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React, { useEffect } from "react";
22
import ConsolePageTitle from "../../components/ConsolePageTitle";
3-
import Table from '@mui/material/Table';
4-
import TableBody from '@mui/material/TableBody';
5-
import TableCell from '@mui/material/TableCell';
6-
import TableContainer from '@mui/material/TableContainer';
7-
import TableHead from '@mui/material/TableHead';
8-
import TableRow from '@mui/material/TableRow';
9-
import { Grid, Paper, Typography } from "@mui/material";
3+
import Alert from "@mui/material/Alert";
4+
import { Grid, Typography } from "@mui/material";
105
import Button from "@mui/material/Button";
116
import Box from "@mui/material/Box/Box";
127
import { observer } from "mobx-react-lite";
@@ -16,11 +11,9 @@ import { makeStyles } from "@material-ui/core";
1611
import { PageSpinner } from "@postgres.ai/shared/components/PageSpinner";
1712
import { ProductCardWrapper } from "../../components/ProductCard/ProductCardWrapper";
1813
import { Link } from "@postgres.ai/shared/components/Link2";
19-
import Permissions from "../../utils/permissions";
20-
import { WarningWrapper } from "../../components/Warning/WarningWrapper";
21-
import { messages } from "../../assets/messages";
2214
import { ConsoleBreadcrumbsWrapper } from "../../components/ConsoleBreadcrumbs/ConsoleBreadcrumbsWrapper";
2315
import { formatPostgresInterval } from "./utils";
16+
import { TransactionsTable } from "./TransactionsTable/TransactionsTable";
2417

2518

2619

@@ -88,16 +81,6 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
8881
)
8982
}
9083

91-
if (orgData === null || !Permissions.isAdmin(orgData)) {
92-
return (
93-
<Box>
94-
{breadcrumbs}
95-
<ConsolePageTitle title={"Consulting"} />
96-
<WarningWrapper>{messages.noPermissionPage}WarningWrapper>
97-
Box>
98-
)
99-
}
100-
10184
if (orgData.consulting_type === null) {
10285
return (
10386
<Box>
@@ -132,19 +115,11 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
132115
{breadcrumbs}
133116
<ConsolePageTitle title={"Consulting"} />
134117
<Grid container spacing={3}>
135-
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
136-
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
137-
Retainer balance:
138-
Typography>
139-
<Typography variant="h5" sx={{ marginTop: 1}}>
140-
{formatPostgresInterval(consultingStore.orgBalance?.[0]?.balance || '00') || 0}
141-
Typography>
142-
Grid>}
143118
<Grid item xs={12} md={8}>
144119
<Box>
145-
<Button variant="contained" component="a" href="https://buy.stripe.com/7sI5odeXt3tB0Eg3cm" target="_blank">
146-
Replenish consulting hours
147-
Button>
120+
<Typography variant="body1" sx={{ fontSize: 14 }}>
121+
Thank you for choosing Postgres.AI as your PostgreSQL consulting partner. Your plan: {orgData.consulting_type.toUpperCase()}.
122+
Typography>
148123
Box>
149124
Grid>
150125
<Grid item xs={12} md={8}>
@@ -172,6 +147,37 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
172147
Box>
173148
Grid>
174149
<Grid item xs={12} md={8}>
150+
<Box>
151+
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
152+
Email:
153+
Typography>
154+
<Typography variant="body1" sx={{ marginTop: 1, fontSize: 14}}>
155+
<Link to={`mailto:[email protected]`} external target="_blank">
156+
[email protected]
157+
Link>
158+
Typography>
159+
Box>
160+
Grid>
161+
{consultingStore.orgBalance?.[0]?.balance?.charAt(0) === '-' && <Grid item xs={12} md={8}>
162+
<Alert severity="warning">Consulting hours overdrawnAlert>
163+
Grid>}
164+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
165+
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
166+
Retainer balance:
167+
Typography>
168+
<Typography variant="h5" sx={{ marginTop: 1}}>
169+
{formatPostgresInterval(consultingStore.orgBalance?.[0]?.balance || '00') || 0}
170+
Typography>
171+
Grid>}
172+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
173+
<Box>
174+
<Button variant="contained" component="a" href="https://buy.stripe.com/7sI5odeXt3tB0Eg3cm" target="_blank">
175+
Replenish consulting hours
176+
Button>
177+
Box>
178+
Grid>}
179+
180+
{orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
175181
<Typography variant="h6" classes={{root: classes.sectionLabel}}>
176182
Activity:
177183
Typography>
@@ -180,44 +186,11 @@ export const Consulting = observer((props: ConsultingWrapperProps) => {
180186
? <Typography variant="body1" sx={{ marginTop: 1}}>
181187
No activity yet
182188
Typography>
183-
: <TableContainer component={Paper} sx={{ marginTop: 1}}>
184-
<Table>
185-
<TableHead>
186-
<TableRow>
187-
<TableCell>ActionTableCell>
188-
<TableCell>AmountTableCell>
189-
<TableCell>DateTableCell>
190-
<TableCell>DetailsTableCell>
191-
TableRow>
192-
TableHead>
193-
<TableBody>
194-
{
195-
consultingStore.transactions.map((transaction, index) => {
196-
return (
197-
<TableRow key={index}>
198-
<TableCell sx={{whiteSpace: 'nowrap'}}>{transaction.amount.charAt(0) === '-' ? 'Utilize' : 'Replenish'}TableCell>
199-
<TableCell sx={{color: transaction.amount.charAt(0) === '-' ? 'red' : 'green', whiteSpace: 'nowrap'}}>
200-
{formatPostgresInterval(transaction.amount || '00')}
201-
TableCell>
202-
<TableCell sx={{whiteSpace: 'nowrap'}}>{new Date(transaction.created_at)?.toISOString()?.split('T')?.[0]}TableCell>
203-
<TableCell>
204-
{transaction.issue_id
205-
? <Link external to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${orgData.alias}/-/issues/${transaction.issue_id}`} target="_blank">
206-
{transaction.description}
207-
Link>
208-
: transaction.description
209-
}
210-
TableCell>
211-
TableRow>
212-
);
213-
})
214-
}
215-
TableBody>
216-
Table>
217-
TableContainer>
189+
: <TransactionsTable transactions={consultingStore.transactions} alias={orgData.alias} />
218190
}
219-
Grid>
191+
Grid>}
220192
Grid>
221193
div>
222194
);
223-
});
195+
});
196+

‎ui/packages/platform/src/stores/consulting.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { request } from "../helpers/request";
33

44
const apiServer = process.env.REACT_APP_API_URL_PREFIX || '';
55

6-
interface Transaction {
6+
export interface Transaction {
77
id: string;
88
org_id: number;
99
issue_id: number;

0 commit comments

Comments
 (0)