Create story for invoice list

src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx

@@ -35,7 +35,7 @@ const useStyles = makeStyles(
   { name: "OrderInvoiceList" }
 );
 
-interface OrderInvoiceListProps {
+export interface OrderInvoiceListProps {
   invoices: InvoiceFragment[];
   onInvoiceGenerate: () => void;
   onInvoiceClick: (invoiceId: string) => void;

src/orders/fixtures.ts

@@ -11,6 +11,7 @@ import {
   OrderStatus,
   PaymentChargeStatusEnum
 } from "../types/globalTypes";
+import { InvoiceFragment } from "./types/InvoiceFragment";
 import { OrderDetails_order } from "./types/OrderDetails";
 import { OrderList_orders_edges_node } from "./types/OrderList";
 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"
+  }
+];

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -9331,6 +9331,286 @@ exports[`Storyshots Orders / OrderHistory default 1`] = `
 </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`] = `
 <div
   style="padding:24px"

src/storybook/config.js

@@ -134,6 +134,7 @@ function loadStories() {
   require("./stories/orders/OrderPaymentVoidDialog");
   require("./stories/orders/OrderProductAddDialog");
   require("./stories/orders/OrderShippingMethodEditDialog");
+  require("./stories/orders/OrderInvoiceList");
 
   // Product types
   require("./stories/productTypes/ProductTypeAttributeUnassignDialog");

src/storybook/stories/orders/OrderInvoiceList.tsx

@@ -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} />);