From a1624508eb93101c8792df138fe5b694f2afd99a Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Thu, 2 Jul 2020 13:58:44 +0200
Subject: [PATCH] Refactor order details props types

---
 .../components/OrderDetailsPage/OrderDetailsPage.tsx |  5 ++---
 .../OrderInvoiceEmailSendDialog.tsx                  |  5 ++---
 .../components/OrderInvoiceList/OrderInvoiceList.tsx |  8 ++++----
 src/orders/views/OrderDetails/index.tsx              | 12 ++++++++----
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 3590b53d2..bd0062055 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -9,7 +9,6 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
-import { InvoiceFragment } from "@saleor/orders/types/InvoiceFragment";
 import { UserPermissionProps } from "@saleor/types";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -64,9 +63,9 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
   onOrderCancel();
   onNoteAdd(data: HistoryFormData);
   onProfileView();
-  onInvoiceClick(invoice: InvoiceFragment);
+  onInvoiceClick(invoiceId: string);
   onInvoiceGenerate();
-  onInvoiceSend(invoice: InvoiceFragment);
+  onInvoiceSend(invoiceId: string);
 }
 
 const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 95da0d1b7..2f9ff6456 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -11,16 +11,15 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import { buttonMessages } from "@saleor/intl";
 import { InvoiceErrorFragment } from "@saleor/orders/types/InvoiceErrorFragment";
 import { InvoiceFragment } from "@saleor/orders/types/InvoiceFragment";
+import { DialogProps } from "@saleor/types";
 import getInvoiceErrorMessage from "@saleor/utils/errors/invoice";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-export interface OrderInvoiceEmailSendDialogProps {
+export interface OrderInvoiceEmailSendDialogProps extends DialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   errors: InvoiceErrorFragment[];
-  open: boolean;
   invoice: InvoiceFragment;
-  onClose: () => void;
   onSend: () => void;
 }
 
diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
index 40e7232a7..ced7044cf 100644
--- a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
+++ b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
@@ -38,8 +38,8 @@ const useStyles = makeStyles(
 interface OrderInvoiceListProps {
   invoices: InvoiceFragment[];
   onInvoiceGenerate: () => void;
-  onInvoiceClick: (invoice: InvoiceFragment) => void;
-  onInvoiceSend: (invoice: InvoiceFragment) => void;
+  onInvoiceClick: (invoiceId: string) => void;
+  onInvoiceSend: (invoiceId: string) => void;
 }
 
 const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
@@ -109,7 +109,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
                         ? classes.colNumberClickable
                         : classes.colNumber
                     }
-                    onClick={() => onInvoiceClick(invoice)}
+                    onClick={() => onInvoiceClick(invoice.id)}
                   >
                     <FormattedMessage
                       defaultMessage="Invoice"
@@ -127,7 +127,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
                   {onInvoiceSend && (
                     <TableCell
                       className={classes.colAction}
-                      onClick={() => onInvoiceSend(invoice)}
+                      onClick={() => onInvoiceSend(invoice.id)}
                     >
                       <Button color="primary">
                         <FormattedMessage {...buttonMessages.send} />
diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx
index 401700ecb..f81e59cf7 100644
--- a/src/orders/views/OrderDetails/index.tsx
+++ b/src/orders/views/OrderDetails/index.tsx
@@ -256,16 +256,20 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           onProfileView={() =>
                             navigate(customerUrl(order.user.id))
                           }
-                          onInvoiceClick={invoice =>
-                            window.open(invoice.url, "_blank")
+                          onInvoiceClick={id =>
+                            window.open(
+                              order.invoices.find(invoice => invoice.id === id)
+                                ?.url,
+                              "_blank"
+                            )
                           }
                           onInvoiceGenerate={() =>
                             orderInvoiceRequest.mutate({
                               orderId: id
                             })
                           }
-                          onInvoiceSend={invoice =>
-                            openModal("invoice-send", { id: invoice.id })
+                          onInvoiceSend={id =>
+                            openModal("invoice-send", { id })
                           }
                         />
                         <OrderCannotCancelOrderDialog