Create invoice email send dialog

src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx

@@ -0,0 +1,93 @@
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "@saleor/components/ConfirmButton";
+import Form from "@saleor/components/Form";
+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 getInvoiceErrorMessage from "@saleor/utils/errors/invoice";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export interface FormData {
+  amount: number;
+}
+
+export interface OrderInvoiceEmailSendDialogProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  errors: InvoiceErrorFragment[];
+  open: boolean;
+  invoice: InvoiceFragment;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> = ({
+  confirmButtonState,
+  errors,
+  open,
+  invoice,
+  onClose,
+  onSubmit
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
+      <Form onSubmit={onSubmit}>
+        {({ submit }) => (
+          <>
+            <DialogTitle>
+              {intl.formatMessage({
+                defaultMessage: "Send Invoice",
+                description: "dialog header"
+              })}
+            </DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                <FormattedMessage
+                  defaultMessage="Are you sure you want to send this invoice: {invoiceNumber} to the customer?"
+                  values={{
+                    invoiceNumber: <strong>{invoice?.number}</strong>
+                  }}
+                />
+              </DialogContentText>
+              {errors.length > 0 && (
+                <>
+                  <FormSpacer />
+                  {errors.map(err => (
+                    <DialogContentText color="error">
+                      {getInvoiceErrorMessage(err, intl)}
+                    </DialogContentText>
+                  ))}
+                </>
+              )}
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={onClose}>
+                <FormattedMessage {...buttonMessages.back} />
+              </Button>
+              <ConfirmButton
+                transitionState={confirmButtonState}
+                color="primary"
+                variant="contained"
+                onClick={submit}
+              >
+                <FormattedMessage {...buttonMessages.send} />
+              </ConfirmButton>
+            </DialogActions>
+          </>
+        )}
+      </Form>
+    </Dialog>
+  );
+};
+OrderInvoiceEmailSendDialog.displayName = "OrderInvoiceEmailSendDialog";
+export default OrderInvoiceEmailSendDialog;

src/orders/components/OrderInvoiceEmailSendDialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./OrderInvoiceEmailSendDialog";
+export * from "./OrderInvoiceEmailSendDialog";

src/orders/urls.ts

@@ -99,7 +99,8 @@ export type OrderUrlDialog =
   | "finalize"
   | "mark-paid"
   | "refund"
-  | "void";
+  | "void"
+  | "invoice-send";
 export type OrderUrlQueryParams = Dialog<OrderUrlDialog> & SingleAction;
 export const orderUrl = (id: string, params?: OrderUrlQueryParams) =>
   orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/orders/views/OrderDetails/index.tsx

@@ -4,6 +4,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
 import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog";
+import OrderInvoiceEmailSendDialog from "@saleor/orders/components/OrderInvoiceEmailSendDialog";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import { useWarehouseList } from "@saleor/warehouses/queries";
@@ -237,13 +238,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           onInvoiceClick={(invoice) =>
                             window.open(invoice.url, "_blank")
                           }
-                          onGenerateInvoice={() =>
+                          onInvoiceGenerate={() =>
                             orderInvoiceRequest.mutate({
                               orderId: id,
                             })
                           }
-                          onSendInvoice={(invoice) =>
+                          onInvoiceSend={(invoice) =>
-                            orderInvoiceSend.mutate({ id: invoice.id })
+                            openModal("invoice-send", { id: invoice.id })
                           }
                         />
                         <OrderCannotCancelOrderDialog
@@ -375,6 +376,21 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           }
                           onClose={closeModal}
                         />
+                        <OrderInvoiceEmailSendDialog
+                          confirmButtonState={orderInvoiceSend.opts.status}
+                          errors={
+                            orderInvoiceSend.opts.data?.sendInvoiceEmail
+                              .errors || []
+                          }
+                          open={params.action === "invoice-send"}
+                          invoice={order?.invoices?.find(
+                            (invoice) => invoice.id === params.id
+                          )}
+                          onClose={closeModal}
+                          onSubmit={() =>
+                            orderInvoiceSend.mutate({ id: params.id })
+                          }
+                        />
                       </>
                     ) : (
                       <>

src/utils/errors/invoice.ts

@@ -0,0 +1,44 @@
+import { commonMessages } from "@saleor/intl";
+import { InvoiceErrorFragment } from "@saleor/orders/types/InvoiceErrorFragment";
+import { InvoiceErrorCode } from "@saleor/types/globalTypes";
+import { defineMessages, IntlShape } from "react-intl";
+
+import commonErrorMessages from "./common";
+
+const messages = defineMessages({
+  emailNotSet: {
+    defaultMessage: "Email address is not set",
+    description: "error message"
+  }
+});
+
+function getInvoiceErrorMessage(
+  err: InvoiceErrorFragment,
+  intl: IntlShape
+): string {
+  if (err) {
+    switch (err.code) {
+      case InvoiceErrorCode.EMAIL_NOT_SET:
+        return intl.formatMessage(messages.emailNotSet);
+      case InvoiceErrorCode.INVALID_STATUS:
+        // TODO: update error messages
+        return intl.formatMessage({ defaultMessage: "" });
+      case InvoiceErrorCode.NOT_FOUND:
+        return intl.formatMessage({ defaultMessage: "" });
+      case InvoiceErrorCode.NOT_READY:
+        return intl.formatMessage({ defaultMessage: "" });
+      case InvoiceErrorCode.NUMBER_NOT_SET:
+        return intl.formatMessage({ defaultMessage: "" });
+      case InvoiceErrorCode.URL_NOT_SET:
+        return intl.formatMessage({ defaultMessage: "" });
+      case InvoiceErrorCode.REQUIRED:
+        return intl.formatMessage(commonMessages.requiredField);
+      default:
+        return intl.formatMessage(commonErrorMessages.unknownError);
+    }
+  }
+
+  return undefined;
+}
+
+export default getInvoiceErrorMessage;