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

Query invoices for order

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-06-22 18:34:59 +02:00
parent 624f3954df
commit cd761d0990
5 changed files with 307 additions and 305 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
View file

@ -26,17 +26,17 @@ import OrderPayment from "../OrderPayment/OrderPayment";
import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems"; import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems";
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ (theme) => ({
date: { date: {
marginBottom: theme.spacing(3) marginBottom: theme.spacing(3),
}, },
header: { header: {
display: "flex", display: "flex",
marginBottom: 0 marginBottom: 0,
} },
}), }),
{ {
name: "OrderDetailsPage" name: "OrderDetailsPage",
} }
); );
@ -67,7 +67,7 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
onInvoiceClick(invoice: InvoiceFragment); onInvoiceClick(invoice: InvoiceFragment);
} }
const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => { const OrderDetailsPage: React.FC<OrderDetailsPageProps> = (props) => {
const { const {
order, order,
userPermissions, userPermissions,
@ -84,7 +84,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
onPaymentVoid, onPaymentVoid,
onShippingAddressEdit, onShippingAddressEdit,
onProfileView, onProfileView,
onInvoiceClick onInvoiceClick,
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
@ -94,7 +94,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED; const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED;
const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED; const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED;
const unfulfilled = maybe(() => order.lines, []).filter( const unfulfilled = maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity (line) => line.quantityFulfilled < line.quantity
); );
return ( return (
@ -113,10 +113,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
{ {
label: intl.formatMessage({ label: intl.formatMessage({
defaultMessage: "Cancel order", defaultMessage: "Cancel order",
description: "button" description: "button",
}), }),
onSelect: onOrderCancel onSelect: onOrderCancel,
} },
]} ]}
/> />
)} )}

14
src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
View file

@ -21,16 +21,16 @@ const useStyles = makeStyles(
() => ({ () => ({
cardContentTable: { cardContentTable: {
"&:last-child": { "&:last-child": {
padding: 0 padding: 0,
}, },
padding: 0 padding: 0,
}, },
colAction: { paddingRight: "0.5rem", width: "auto" }, colAction: { paddingRight: "0.5rem", width: "auto" },
colNumber: { width: "100%" }, colNumber: { width: "100%" },
colNumberClickable: { colNumberClickable: {
cursor: "pointer", cursor: "pointer",
width: "100%" width: "100%",
} },
}), }),
{ name: "OrderInvoiceList" } { name: "OrderInvoiceList" }
); );
@ -42,7 +42,7 @@ interface OrderInvoiceListProps {
onInvoiceSend?: (invoice: InvoiceFragment) => void; onInvoiceSend?: (invoice: InvoiceFragment) => void;
} }
const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => { const OrderInvoiceList: React.FC<OrderInvoiceListProps> = (props) => {
const { invoices, onInvoiceGenerate, onInvoiceClick, onInvoiceSend } = props; const { invoices, onInvoiceGenerate, onInvoiceClick, onInvoiceSend } = props;
const classes = useStyles(props); const classes = useStyles(props);
@ -54,7 +54,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
<CardTitle <CardTitle
title={intl.formatMessage({ title={intl.formatMessage({
defaultMessage: "Invoices", defaultMessage: "Invoices",
description: "section header" description: "section header",
})} })}
toolbar={ toolbar={
onInvoiceGenerate && ( onInvoiceGenerate && (
@ -95,7 +95,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{invoices?.map(invoice => ( {invoices?.map((invoice) => (
<TableRow key={invoice.id}> <TableRow key={invoice.id}>
<TableCell <TableCell
className={ className={

438
src/orders/fixtures.ts
View file

File diff suppressed because it is too large Load diff

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

@ -14,7 +14,7 @@ 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 { FulfillmentStatus, OrderStatus } from "../../../types/globalTypes"; import { FulfillmentStatus, OrderStatus } from "../../../types/globalTypes";
@ -23,7 +23,7 @@ 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";
@ -41,7 +41,7 @@ import {
orderListUrl, orderListUrl,
orderUrl, orderUrl,
OrderUrlDialog, OrderUrlDialog,
OrderUrlQueryParams OrderUrlQueryParams,
} from "../../urls"; } from "../../urls";
import { OrderDetailsMessages } from "./OrderDetailsMessages"; import { OrderDetailsMessages } from "./OrderDetailsMessages";
@ -59,7 +59,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);
@ -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.UNNECESSARY_SHIPPING_METHOD); warnings.push(OrderDraftFinalizeWarning.UNNECESSARY_SHIPPING_METHOD);
@ -86,29 +86,29 @@ 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 intl = useIntl(); const intl = useIntl();
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());
@ -123,7 +123,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}
@ -165,7 +165,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderFulfillmentUpdateTracking, orderFulfillmentUpdateTracking,
orderDraftCancel, orderDraftCancel,
orderDraftFinalize, orderDraftFinalize,
orderPaymentMarkAsPaid orderPaymentMarkAsPaid,
}) => ( }) => (
<> <>
{order?.status !== OrderStatus.DRAFT ? ( {order?.status !== OrderStatus.DRAFT ? (
@ -174,20 +174,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}
@ -199,26 +199,27 @@ 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 => () => navigate(productUrl(id))} onProductClick={(id) => () =>
navigate(productUrl(id))}
onBillingAddressEdit={() => onBillingAddressEdit={() =>
openModal("edit-billing-address") openModal("edit-billing-address")
} }
@ -229,7 +230,7 @@ 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")
} }
/> />
@ -238,7 +239,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
) )
@ -254,7 +255,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal} onClose={closeModal}
onSubmit={() => onSubmit={() =>
orderCancel.mutate({ orderCancel.mutate({
id id,
}) })
} }
/> />
@ -269,7 +270,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"}
@ -291,10 +292,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,
}) })
} }
/> />
@ -308,10 +309,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,
}) })
} }
/> />
@ -326,13 +327,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}
@ -348,16 +349,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}
@ -369,26 +370,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(
@ -399,10 +400,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")}
@ -411,12 +412,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")
@ -427,13 +428,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"
@ -477,12 +478,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,
} },
}) })
} }
/> />
@ -498,18 +499,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,
})) })),
}) })
} }
/> />
@ -519,21 +520,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,
} },
}) })
} }
/> />
@ -541,21 +542,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,
} },
}) })
} }
/> />

1
src/storybook/stories/orders/OrderDetailsPage.tsx
View file

@ -21,6 +21,7 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
countries, countries,
onBack: () => undefined, onBack: () => undefined,
onBillingAddressEdit: undefined, onBillingAddressEdit: undefined,
onClickInvoice: () => undefined,
onFulfillmentCancel: () => undefined, onFulfillmentCancel: () => undefined,
onFulfillmentTrackingNumberUpdate: () => undefined, onFulfillmentTrackingNumberUpdate: () => undefined,
onInvoiceClick: () => undefined, onInvoiceClick: () => undefined,