Create story for invoice list
This commit is contained in:
Dawid Tarasiuk
parent
a1624508eb
commit
c4c9895a56
5 changed files with 345 additions and 1 deletions
|
|
@ -35,7 +35,7 @@ const useStyles = makeStyles(
|
||||||
{ name: "OrderInvoiceList" }
|
{ name: "OrderInvoiceList" }
|
||||||
);
|
);
|
||||||
|
|
||||||
interface OrderInvoiceListProps {
|
export interface OrderInvoiceListProps {
|
||||||
invoices: InvoiceFragment[];
|
invoices: InvoiceFragment[];
|
||||||
onInvoiceGenerate: () => void;
|
onInvoiceGenerate: () => void;
|
||||||
onInvoiceClick: (invoiceId: string) => void;
|
onInvoiceClick: (invoiceId: string) => void;
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import {
|
||||||
OrderStatus,
|
OrderStatus,
|
||||||
PaymentChargeStatusEnum
|
PaymentChargeStatusEnum
|
||||||
} from "../types/globalTypes";
|
} from "../types/globalTypes";
|
||||||
|
import { InvoiceFragment } from "./types/InvoiceFragment";
|
||||||
import { OrderDetails_order } from "./types/OrderDetails";
|
import { OrderDetails_order } from "./types/OrderDetails";
|
||||||
import { OrderList_orders_edges_node } from "./types/OrderList";
|
import { OrderList_orders_edges_node } from "./types/OrderList";
|
||||||
import { SearchOrderVariant_search_edges_node } from "./types/SearchOrderVariant";
|
import { SearchOrderVariant_search_edges_node } from "./types/SearchOrderVariant";
|
||||||
|
|
@ -1319,3 +1320,42 @@ export const orderLineSearch = (
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const invoices: InvoiceFragment[] = [
|
||||||
|
{
|
||||||
|
__typename: "Invoice",
|
||||||
|
createdAt: "2020-07-02T12:13:56.901097+00:00",
|
||||||
|
id: "SW52b2ljZTo0",
|
||||||
|
number: "1/07/2020",
|
||||||
|
status: JobStatusEnum.PENDING,
|
||||||
|
url:
|
||||||
|
"http://localhost:8000/media/invoices/invoice-1/07/2020-order-20-1fef611b-7514-4dc6-aee3-09a8232b1d6a.pdf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Invoice",
|
||||||
|
createdAt: "2020-07-02T09:06:17.059412+00:00",
|
||||||
|
id: "SW52b2ljZToz",
|
||||||
|
number: "1/07/2020",
|
||||||
|
status: JobStatusEnum.SUCCESS,
|
||||||
|
url:
|
||||||
|
"http://localhost:8000/media/invoices/invoice-1/07/2020-order-20-8df26967-ad21-4075-a446-cef44ae05197.pdf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Invoice",
|
||||||
|
createdAt: "2020-07-02T09:05:58.300952+00:00",
|
||||||
|
id: "SW52b2ljZToy",
|
||||||
|
number: "1/07/2020",
|
||||||
|
status: JobStatusEnum.SUCCESS,
|
||||||
|
url:
|
||||||
|
"http://localhost:8000/media/invoices/invoice-1/07/2020-order-20-5ebc85e0-e587-4386-8292-9b85839281e6.pdf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Invoice",
|
||||||
|
createdAt: "2020-07-02T09:04:27.257562+00:00",
|
||||||
|
id: "SW52b2ljZTox",
|
||||||
|
number: "1/07/2020",
|
||||||
|
status: JobStatusEnum.SUCCESS,
|
||||||
|
url:
|
||||||
|
"http://localhost:8000/media/invoices/invoice-1/07/2020-order-20-0e449e10-ef4b-4066-bebe-361f670b6820.pdf"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
|
||||||
|
|
@ -9331,6 +9331,286 @@ exports[`Storyshots Orders / OrderHistory default 1`] = `
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Orders / OrderInvoiceList loading 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding:24px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CardTitle-root-id"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
|
||||||
|
>
|
||||||
|
Invoices
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="CardTitle-toolbar-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Generate
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CardTitle-children-id"
|
||||||
|
/>
|
||||||
|
<hr
|
||||||
|
class="CardTitle-hr-id"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiCardContent-root-id"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="Skeleton-skeleton-id"
|
||||||
|
>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding:24px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CardTitle-root-id"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
|
||||||
|
>
|
||||||
|
Invoices
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="CardTitle-toolbar-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Generate
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CardTitle-children-id"
|
||||||
|
/>
|
||||||
|
<hr
|
||||||
|
class="CardTitle-hr-id"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ResponsiveTable-root-id"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
|
||||||
|
>
|
||||||
|
Invoice 1/07/2020
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MuiTypography-caption-id"
|
||||||
|
>
|
||||||
|
created Jul 2, 2020
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root-id"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
|
||||||
|
>
|
||||||
|
Invoice 1/07/2020
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MuiTypography-caption-id"
|
||||||
|
>
|
||||||
|
created Jul 2, 2020
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root-id"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
|
||||||
|
>
|
||||||
|
Invoice 1/07/2020
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MuiTypography-caption-id"
|
||||||
|
>
|
||||||
|
created Jul 2, 2020
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Orders / OrderInvoiceList without invoices 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding:24px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CardTitle-root-id"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
|
||||||
|
>
|
||||||
|
Invoices
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="CardTitle-toolbar-id"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label-id"
|
||||||
|
>
|
||||||
|
Generate
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CardTitle-children-id"
|
||||||
|
/>
|
||||||
|
<hr
|
||||||
|
class="CardTitle-hr-id"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiCardContent-root-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
|
||||||
|
>
|
||||||
|
No invoices to be shown
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Storyshots Orders / OrderMarkAsPaidDialog default 1`] = `
|
exports[`Storyshots Orders / OrderMarkAsPaidDialog default 1`] = `
|
||||||
<div
|
<div
|
||||||
style="padding:24px"
|
style="padding:24px"
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,7 @@ function loadStories() {
|
||||||
require("./stories/orders/OrderPaymentVoidDialog");
|
require("./stories/orders/OrderPaymentVoidDialog");
|
||||||
require("./stories/orders/OrderProductAddDialog");
|
require("./stories/orders/OrderProductAddDialog");
|
||||||
require("./stories/orders/OrderShippingMethodEditDialog");
|
require("./stories/orders/OrderShippingMethodEditDialog");
|
||||||
|
require("./stories/orders/OrderInvoiceList");
|
||||||
|
|
||||||
// Product types
|
// Product types
|
||||||
require("./stories/productTypes/ProductTypeAttributeUnassignDialog");
|
require("./stories/productTypes/ProductTypeAttributeUnassignDialog");
|
||||||
|
|
|
||||||
23
src/storybook/stories/orders/OrderInvoiceList.tsx
Normal file
23
src/storybook/stories/orders/OrderInvoiceList.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import OrderInvoiceList, {
|
||||||
|
OrderInvoiceListProps
|
||||||
|
} from "@saleor/orders/components/OrderInvoiceList";
|
||||||
|
import { storiesOf } from "@storybook/react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { invoices } from "../../../orders/fixtures";
|
||||||
|
import Decorator from "../../Decorator";
|
||||||
|
|
||||||
|
const props: OrderInvoiceListProps = {
|
||||||
|
invoices: undefined,
|
||||||
|
onInvoiceClick: () => undefined,
|
||||||
|
onInvoiceGenerate: () => undefined,
|
||||||
|
onInvoiceSend: () => undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
storiesOf("Orders / OrderInvoiceList", module)
|
||||||
|
.addDecorator(Decorator)
|
||||||
|
.add("with invoices", () => (
|
||||||
|
<OrderInvoiceList {...props} invoices={invoices} />
|
||||||
|
))
|
||||||
|
.add("without invoices", () => <OrderInvoiceList {...props} invoices={[]} />)
|
||||||
|
.add("loading", () => <OrderInvoiceList {...props} />);
|
||||||
Loading…
Reference in a new issue