djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update order invoices list design

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-07-08 15:29:47 +02:00
parent 8d6d50fbc8
commit 8a22155b6e
3 changed files with 17 additions and 549 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
locale/defaultMessages.json
View file

@ -2693,10 +2693,6 @@
"context": "section header",
"string": "Invoices"
},
"src_dot_orders_dot_components_dot_OrderInvoiceList_dot_2489266682": {
"context": "invoice number",
"string": "Invoice no"
},
"src_dot_orders_dot_components_dot_OrderInvoiceList_dot_2739475235": {
"context": "invoice create date prefix",
"string": "created"
@ -2708,10 +2704,6 @@
"context": "invoice number prefix",
"string": "Invoice"
},
"src_dot_orders_dot_components_dot_OrderInvoiceList_dot_4120604650": {
"context": "action for invoice",
"string": "Action"
},
"src_dot_orders_dot_components_dot_OrderInvoiceList_dot_949234851": {
"context": "generate invoice button",
"string": "Generate"

22
src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
View file

@ -4,14 +4,12 @@ import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import CardTitle from "@saleor/components/CardTitle";
import Date from "@saleor/components/Date";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableCellHeader from "@saleor/components/TableCellHeader";
import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment";
import { buttonMessages } from "@saleor/intl";
import React from "react";
@ -82,27 +80,9 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
</Typography>
) : (
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCellHeader className={classes.colNumber}>
<FormattedMessage
defaultMessage="Invoice no"
description="invoice number"
/>
</TableCellHeader>
{onInvoiceSend && (
<TableCellHeader className={classes.colAction}>
<FormattedMessage
defaultMessage="Action"
description="action for invoice"
/>
</TableCellHeader>
)}
</TableRow>
</TableHead>
<TableBody>
{generatedInvoices.map(invoice => (
<TableRow key={invoice.id}>
<TableRow key={invoice.id} hover={!!invoice}>
<TableCell
className={
onInvoiceClick

536
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -9427,47 +9427,11 @@ exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -9496,7 +9460,7 @@ exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
</td>
</tr>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -9525,7 +9489,7 @@ exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
</td>
</tr>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -67363,47 +67327,11 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -68555,47 +68483,11 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -69747,47 +69639,11 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -71570,47 +71426,11 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -72762,47 +72582,11 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -73954,47 +73738,11 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -75146,47 +74894,11 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -76338,47 +76050,11 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -77530,47 +77206,11 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -78722,47 +78362,11 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -79914,47 +79518,11 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -81106,47 +80674,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
@ -82298,47 +81830,11 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
<table
class="MuiTable-root-id"
>
<thead
class="MuiTableHead-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-head-id"
>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colNumber-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Invoice no
</div>
</div>
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderInvoiceList-colAction-id"
scope="col"
>
<div
class="TableCellHeader-labelContainer-id"
>
<div
class="TableCellHeader-label-id"
>
Action
</div>
</div>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id"
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"