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

Remove form from OrderInvoiceEmailSendDialog

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-07-02 12:54:15 +02:00
parent acef5b7f44
commit 3c49c28968
2 changed files with 112 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
View file

@ -7,7 +7,6 @@ import DialogTitle from "@material-ui/core/DialogTitle";
import ConfirmButton, { import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { InvoiceErrorFragment } from "@saleor/orders/types/InvoiceErrorFragment"; import { InvoiceErrorFragment } from "@saleor/orders/types/InvoiceErrorFragment";
@ -16,17 +15,13 @@ import getInvoiceErrorMessage from "@saleor/utils/errors/invoice";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
export interface FormData {
amount: number;
}
export interface OrderInvoiceEmailSendDialogProps { export interface OrderInvoiceEmailSendDialogProps {
confirmButtonState: ConfirmButtonTransitionState; confirmButtonState: ConfirmButtonTransitionState;
errors: InvoiceErrorFragment[]; errors: InvoiceErrorFragment[];
open: boolean; open: boolean;
invoice: InvoiceFragment; invoice: InvoiceFragment;
onClose: () => void; onClose: () => void;
onSubmit: () => void; onSend: () => void;
} }
const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> = ({ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> = ({
@ -35,15 +30,12 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
open, open,
invoice, invoice,
onClose, onClose,
onSubmit onSend
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="xs"> <Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
<Form onSubmit={onSubmit}>
{({ submit }) => (
<>
<DialogTitle> <DialogTitle>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Send Invoice", defaultMessage: "Send Invoice",
@ -78,14 +70,11 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
transitionState={confirmButtonState} transitionState={confirmButtonState}
color="primary" color="primary"
variant="contained" variant="contained"
onClick={submit} onClick={onSend}
> >
<FormattedMessage {...buttonMessages.send} /> <FormattedMessage {...buttonMessages.send} />
</ConfirmButton> </ConfirmButton>
</DialogActions> </DialogActions>
</>
)}
</Form>
</Dialog> </Dialog>
); );
}; };

151
src/orders/views/OrderDetails/index.tsx
View file

@ -18,20 +18,20 @@ import { customerUrl } from "../../../customers/urls";
import { import {
getStringOrPlaceholder, getStringOrPlaceholder,
maybe, maybe,
transformAddressToForm, transformAddressToForm
} from "../../../misc"; } from "../../../misc";
import { productUrl } from "../../../products/urls"; import { productUrl } from "../../../products/urls";
import { import {
FulfillmentStatus, FulfillmentStatus,
JobStatusEnum, JobStatusEnum,
OrderStatus, OrderStatus
} from "../../../types/globalTypes"; } from "../../../types/globalTypes";
import OrderAddressEditDialog from "../../components/OrderAddressEditDialog"; import OrderAddressEditDialog from "../../components/OrderAddressEditDialog";
import OrderCancelDialog from "../../components/OrderCancelDialog"; import OrderCancelDialog from "../../components/OrderCancelDialog";
import OrderDetailsPage from "../../components/OrderDetailsPage"; import OrderDetailsPage from "../../components/OrderDetailsPage";
import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog"; import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog";
import OrderDraftFinalizeDialog, { import OrderDraftFinalizeDialog, {
OrderDraftFinalizeWarning, OrderDraftFinalizeWarning
} from "../../components/OrderDraftFinalizeDialog"; } from "../../components/OrderDraftFinalizeDialog";
import OrderDraftPage from "../../components/OrderDraftPage"; import OrderDraftPage from "../../components/OrderDraftPage";
import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog"; import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog";
@ -49,7 +49,7 @@ import {
orderListUrl, orderListUrl,
orderUrl, orderUrl,
OrderUrlDialog, OrderUrlDialog,
OrderUrlQueryParams, OrderUrlQueryParams
} from "../../urls"; } from "../../urls";
import { OrderDetailsMessages } from "./OrderDetailsMessages"; import { OrderDetailsMessages } from "./OrderDetailsMessages";
@ -67,7 +67,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => {
if ( if (
order && order &&
order.lines && order.lines &&
order.lines.filter((line) => line.isShippingRequired).length > 0 && order.lines.filter(line => line.isShippingRequired).length > 0 &&
order.shippingMethod === null order.shippingMethod === null
) { ) {
warnings.push(OrderDraftFinalizeWarning.NO_SHIPPING_METHOD); warnings.push(OrderDraftFinalizeWarning.NO_SHIPPING_METHOD);
@ -75,7 +75,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => {
if ( if (
order && order &&
order.lines && order.lines &&
order.lines.filter((line) => line.isShippingRequired).length === 0 && order.lines.filter(line => line.isShippingRequired).length === 0 &&
order.shippingMethod !== null order.shippingMethod !== null
) { ) {
warnings.push(OrderDraftFinalizeWarning.UNNECESSARY_SHIPPING_METHOD); warnings.push(OrderDraftFinalizeWarning.UNNECESSARY_SHIPPING_METHOD);
@ -94,22 +94,22 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
const { const {
loadMore: loadMoreCustomers, loadMore: loadMoreCustomers,
search: searchUsers, search: searchUsers,
result: users, result: users
} = useCustomerSearch({ } = useCustomerSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA, variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const { const {
loadMore, loadMore,
search: variantSearch, search: variantSearch,
result: variantSearchOpts, result: variantSearchOpts
} = useOrderVariantSearch({ } = useOrderVariantSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA, variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const warehouses = useWarehouseList({ const warehouses = useWarehouseList({
displayLoader: true, displayLoader: true,
variables: { variables: {
first: 30, first: 30
}, }
}); });
const { queue } = useBackgroundTask(); const { queue } = useBackgroundTask();
const intl = useIntl(); const intl = useIntl();
@ -117,7 +117,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
const [openModal, closeModal] = createDialogActionHandlers< const [openModal, closeModal] = createDialogActionHandlers<
OrderUrlDialog, OrderUrlDialog,
OrderUrlQueryParams OrderUrlQueryParams
>(navigate, (params) => orderUrl(id, params), params); >(navigate, params => orderUrl(id, params), params);
const handleBack = () => navigate(orderListUrl()); const handleBack = () => navigate(orderListUrl());
@ -132,7 +132,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
return ( return (
<OrderDetailsMessages id={id} params={params}> <OrderDetailsMessages id={id} params={params}>
{(orderMessages) => ( {orderMessages => (
<OrderOperations <OrderOperations
order={id} order={id}
onNoteAdd={orderMessages.handleNoteAdd} onNoteAdd={orderMessages.handleNoteAdd}
@ -167,8 +167,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
queue(Task.INVOICE_GENERATE, { queue(Task.INVOICE_GENERATE, {
params: { params: {
invoiceId: data.invoiceRequest.invoice.id, invoiceId: data.invoiceRequest.invoice.id,
orderId: id, orderId: id
}, }
}); });
} }
}} }}
@ -192,7 +192,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderDraftFinalize, orderDraftFinalize,
orderPaymentMarkAsPaid, orderPaymentMarkAsPaid,
orderInvoiceRequest, orderInvoiceRequest,
orderInvoiceSend, orderInvoiceSend
}) => ( }) => (
<> <>
{order?.status !== OrderStatus.DRAFT ? ( {order?.status !== OrderStatus.DRAFT ? (
@ -201,20 +201,20 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
title={intl.formatMessage( title={intl.formatMessage(
{ {
defaultMessage: "Order #{orderNumber}", defaultMessage: "Order #{orderNumber}",
description: "window title", description: "window title"
}, },
{ {
orderNumber: getStringOrPlaceholder( orderNumber: getStringOrPlaceholder(
data?.order?.number data?.order?.number
), )
} }
)} )}
/> />
<OrderDetailsPage <OrderDetailsPage
onNoteAdd={(variables) => onNoteAdd={variables =>
orderAddNote.mutate({ orderAddNote.mutate({
input: variables, input: variables,
order: id, order: id
}) })
} }
onBack={handleBack} onBack={handleBack}
@ -226,27 +226,26 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
userPermissions={user?.userPermissions || []} userPermissions={user?.userPermissions || []}
onOrderCancel={() => openModal("cancel")} onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => navigate(orderFulfillUrl(id))} onOrderFulfill={() => navigate(orderFulfillUrl(id))}
onFulfillmentCancel={(fulfillmentId) => onFulfillmentCancel={fulfillmentId =>
navigate( navigate(
orderUrl(id, { orderUrl(id, {
action: "cancel-fulfillment", action: "cancel-fulfillment",
id: fulfillmentId, id: fulfillmentId
}) })
) )
} }
onFulfillmentTrackingNumberUpdate={(fulfillmentId) => onFulfillmentTrackingNumberUpdate={fulfillmentId =>
navigate( navigate(
orderUrl(id, { orderUrl(id, {
action: "edit-fulfillment", action: "edit-fulfillment",
id: fulfillmentId, id: fulfillmentId
}) })
) )
} }
onPaymentCapture={() => openModal("capture")} onPaymentCapture={() => openModal("capture")}
onPaymentVoid={() => openModal("void")} onPaymentVoid={() => openModal("void")}
onPaymentRefund={() => openModal("refund")} onPaymentRefund={() => openModal("refund")}
onProductClick={(id) => () => onProductClick={id => () => navigate(productUrl(id))}
navigate(productUrl(id))}
onBillingAddressEdit={() => onBillingAddressEdit={() =>
openModal("edit-billing-address") openModal("edit-billing-address")
} }
@ -257,15 +256,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onProfileView={() => onProfileView={() =>
navigate(customerUrl(order.user.id)) navigate(customerUrl(order.user.id))
} }
onInvoiceClick={(invoice) => onInvoiceClick={invoice =>
window.open(invoice.url, "_blank") window.open(invoice.url, "_blank")
} }
onInvoiceGenerate={() => onInvoiceGenerate={() =>
orderInvoiceRequest.mutate({ orderInvoiceRequest.mutate({
orderId: id, orderId: id
}) })
} }
onInvoiceSend={(invoice) => onInvoiceSend={invoice =>
openModal("invoice-send", { id: invoice.id }) openModal("invoice-send", { id: invoice.id })
} }
/> />
@ -274,7 +273,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={ open={
params.action === "cancel" && params.action === "cancel" &&
order?.fulfillments.some( order?.fulfillments.some(
(fulfillment) => fulfillment =>
fulfillment.status === fulfillment.status ===
FulfillmentStatus.FULFILLED FulfillmentStatus.FULFILLED
) )
@ -290,7 +289,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal} onClose={closeModal}
onSubmit={() => onSubmit={() =>
orderCancel.mutate({ orderCancel.mutate({
id, id
}) })
} }
/> />
@ -305,7 +304,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
orderPaymentMarkAsPaid.mutate({ orderPaymentMarkAsPaid.mutate({
id, id
}) })
} }
open={params.action === "mark-paid"} open={params.action === "mark-paid"}
@ -327,10 +326,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "capture"} open={params.action === "capture"}
variant="capture" variant="capture"
onClose={closeModal} onClose={closeModal}
onSubmit={(variables) => onSubmit={variables =>
orderPaymentCapture.mutate({ orderPaymentCapture.mutate({
...variables, ...variables,
id, id
}) })
} }
/> />
@ -344,10 +343,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "refund"} open={params.action === "refund"}
variant="refund" variant="refund"
onClose={closeModal} onClose={closeModal}
onSubmit={(variables) => onSubmit={variables =>
orderPaymentRefund.mutate({ orderPaymentRefund.mutate({
...variables, ...variables,
id, id
}) })
} }
/> />
@ -362,13 +361,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "cancel-fulfillment"} open={params.action === "cancel-fulfillment"}
warehouses={ warehouses={
warehouses.data?.warehouses.edges.map( warehouses.data?.warehouses.edges.map(
(edge) => edge.node edge => edge.node
) || [] ) || []
} }
onConfirm={(variables) => onConfirm={variables =>
orderFulfillmentCancel.mutate({ orderFulfillmentCancel.mutate({
id: params.id, id: params.id,
input: variables, input: variables
}) })
} }
onClose={closeModal} onClose={closeModal}
@ -384,16 +383,16 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "edit-fulfillment"} open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder( trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find( data?.order?.fulfillments.find(
(fulfillment) => fulfillment.id === params.id fulfillment => fulfillment.id === params.id
)?.trackingNumber )?.trackingNumber
)} )}
onConfirm={(variables) => onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({ orderFulfillmentUpdateTracking.mutate({
id: params.id, id: params.id,
input: { input: {
...variables, ...variables,
notifyCustomer: true, notifyCustomer: true
}, }
}) })
} }
onClose={closeModal} onClose={closeModal}
@ -406,10 +405,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
} }
open={params.action === "invoice-send"} open={params.action === "invoice-send"}
invoice={order?.invoices?.find( invoice={order?.invoices?.find(
(invoice) => invoice.id === params.id invoice => invoice.id === params.id
)} )}
onClose={closeModal} onClose={closeModal}
onSubmit={() => onSend={() =>
orderInvoiceSend.mutate({ id: params.id }) orderInvoiceSend.mutate({ id: params.id })
} }
/> />
@ -420,26 +419,26 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
title={intl.formatMessage( title={intl.formatMessage(
{ {
defaultMessage: "Draft Order #{orderNumber}", defaultMessage: "Draft Order #{orderNumber}",
description: "window title", description: "window title"
}, },
{ {
orderNumber: getStringOrPlaceholder( orderNumber: getStringOrPlaceholder(
data?.order?.number data?.order?.number
), )
} }
)} )}
/> />
<OrderDraftPage <OrderDraftPage
disabled={loading} disabled={loading}
onNoteAdd={(variables) => onNoteAdd={variables =>
orderAddNote.mutate({ orderAddNote.mutate({
input: variables, input: variables,
order: id, order: id
}) })
} }
users={maybe( users={maybe(
() => () =>
users.data.search.edges.map((edge) => edge.node), users.data.search.edges.map(edge => edge.node),
[] []
)} )}
hasMore={maybe( hasMore={maybe(
@ -450,10 +449,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
fetchUsers={searchUsers} fetchUsers={searchUsers}
loading={users.loading} loading={users.loading}
usersLoading={users.loading} usersLoading={users.loading}
onCustomerEdit={(data) => onCustomerEdit={data =>
orderDraftUpdate.mutate({ orderDraftUpdate.mutate({
id, id,
input: data, input: data
}) })
} }
onDraftFinalize={() => openModal("finalize")} onDraftFinalize={() => openModal("finalize")}
@ -462,12 +461,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onBack={() => navigate(orderListUrl())} onBack={() => navigate(orderListUrl())}
order={order} order={order}
countries={maybe(() => data.shop.countries, []).map( countries={maybe(() => data.shop.countries, []).map(
(country) => ({ country => ({
code: country.code, code: country.code,
label: country.country, label: country.country
}) })
)} )}
onProductClick={(id) => () => onProductClick={id => () =>
navigate(productUrl(encodeURIComponent(id)))} navigate(productUrl(encodeURIComponent(id)))}
onBillingAddressEdit={() => onBillingAddressEdit={() =>
openModal("edit-billing-address") openModal("edit-billing-address")
@ -478,13 +477,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onShippingMethodEdit={() => onShippingMethodEdit={() =>
openModal("edit-shipping") openModal("edit-shipping")
} }
onOrderLineRemove={(id) => onOrderLineRemove={id =>
orderLineDelete.mutate({ id }) orderLineDelete.mutate({ id })
} }
onOrderLineChange={(id, data) => onOrderLineChange={(id, data) =>
orderLineUpdate.mutate({ orderLineUpdate.mutate({
id, id,
input: data, input: data
}) })
} }
saveButtonBarState="default" saveButtonBarState="default"
@ -528,12 +527,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
shippingMethod={order?.shippingMethod?.id} shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods} shippingMethods={order?.availableShippingMethods}
onClose={closeModal} onClose={closeModal}
onSubmit={(variables) => onSubmit={variables =>
orderShippingMethodUpdate.mutate({ orderShippingMethodUpdate.mutate({
id, id,
input: { input: {
shippingMethod: variables.shippingMethod, shippingMethod: variables.shippingMethod
}, }
}) })
} }
/> />
@ -549,18 +548,18 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
variantSearchOpts.data?.search.pageInfo.hasNextPage variantSearchOpts.data?.search.pageInfo.hasNextPage
} }
products={variantSearchOpts.data?.search.edges.map( products={variantSearchOpts.data?.search.edges.map(
(edge) => edge.node edge => edge.node
)} )}
onClose={closeModal} onClose={closeModal}
onFetch={variantSearch} onFetch={variantSearch}
onFetchMore={loadMore} onFetchMore={loadMore}
onSubmit={(variants) => onSubmit={variants =>
orderLinesAdd.mutate({ orderLinesAdd.mutate({
id, id,
input: variants.map((variant) => ({ input: variants.map(variant => ({
quantity: 1, quantity: 1,
variantId: variant.id, variantId: variant.id
})), }))
}) })
} }
/> />
@ -570,21 +569,21 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
confirmButtonState={orderUpdate.opts.status} confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.shippingAddress)} address={transformAddressToForm(order?.shippingAddress)}
countries={ countries={
data?.shop?.countries.map((country) => ({ data?.shop?.countries.map(country => ({
code: country.code, code: country.code,
label: country.country, label: country.country
})) || [] })) || []
} }
errors={orderUpdate.opts.data?.orderUpdate.errors || []} errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-shipping-address"} open={params.action === "edit-shipping-address"}
variant="shipping" variant="shipping"
onClose={closeModal} onClose={closeModal}
onConfirm={(shippingAddress) => onConfirm={shippingAddress =>
orderUpdate.mutate({ orderUpdate.mutate({
id, id,
input: { input: {
shippingAddress, shippingAddress
}, }
}) })
} }
/> />
@ -592,21 +591,21 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
confirmButtonState={orderUpdate.opts.status} confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.billingAddress)} address={transformAddressToForm(order?.billingAddress)}
countries={ countries={
data?.shop?.countries.map((country) => ({ data?.shop?.countries.map(country => ({
code: country.code, code: country.code,
label: country.country, label: country.country
})) || [] })) || []
} }
errors={orderUpdate.opts.data?.orderUpdate.errors || []} errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-billing-address"} open={params.action === "edit-billing-address"}
variant="billing" variant="billing"
onClose={closeModal} onClose={closeModal}
onConfirm={(billingAddress) => onConfirm={billingAddress =>
orderUpdate.mutate({ orderUpdate.mutate({
id, id,
input: { input: {
billingAddress, billingAddress
}, }
}) })
} }
/> />