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";
const useStyles = makeStyles(
theme => ({
(theme) => ({
date: {
marginBottom: theme.spacing(3)
marginBottom: theme.spacing(3),
},
header: {
display: "flex",
marginBottom: 0
}
marginBottom: 0,
},
}),
{
name: "OrderDetailsPage"
name: "OrderDetailsPage",
}
);
@ -67,7 +67,7 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
onInvoiceClick(invoice: InvoiceFragment);
}
const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const OrderDetailsPage: React.FC<OrderDetailsPageProps> = (props) => {
const {
order,
userPermissions,
@ -84,7 +84,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
onPaymentVoid,
onShippingAddressEdit,
onProfileView,
onInvoiceClick
onInvoiceClick,
} = props;
const classes = useStyles(props);
@ -94,7 +94,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED;
const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED;
const unfulfilled = maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
(line) => line.quantityFulfilled < line.quantity
);
return (
@ -113,10 +113,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
{
label: intl.formatMessage({
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: {
"&:last-child": {
padding: 0
padding: 0,
},
padding: 0
padding: 0,
},
colAction: { paddingRight: "0.5rem", width: "auto" },
colNumber: { width: "100%" },
colNumberClickable: {
cursor: "pointer",
width: "100%"
}
width: "100%",
},
}),
{ name: "OrderInvoiceList" }
);
@ -42,7 +42,7 @@ interface OrderInvoiceListProps {
onInvoiceSend?: (invoice: InvoiceFragment) => void;
}
const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
const OrderInvoiceList: React.FC<OrderInvoiceListProps> = (props) => {
const { invoices, onInvoiceGenerate, onInvoiceClick, onInvoiceSend } = props;
const classes = useStyles(props);
@ -54,7 +54,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
<CardTitle
title={intl.formatMessage({
defaultMessage: "Invoices",
description: "section header"
description: "section header",
})}
toolbar={
onInvoiceGenerate && (
@ -95,7 +95,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
</TableRow>
</TableHead>
<TableBody>
{invoices?.map(invoice => (
{invoices?.map((invoice) => (
<TableRow key={invoice.id}>
<TableCell
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 {
getStringOrPlaceholder,
maybe,
transformAddressToForm
transformAddressToForm,
} from "../../../misc";
import { productUrl } from "../../../products/urls";
import { FulfillmentStatus, OrderStatus } from "../../../types/globalTypes";
@ -23,7 +23,7 @@ import OrderCancelDialog from "../../components/OrderCancelDialog";
import OrderDetailsPage from "../../components/OrderDetailsPage";
import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog";
import OrderDraftFinalizeDialog, {
OrderDraftFinalizeWarning
OrderDraftFinalizeWarning,
} from "../../components/OrderDraftFinalizeDialog";
import OrderDraftPage from "../../components/OrderDraftPage";
import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog";
@ -41,7 +41,7 @@ import {
orderListUrl,
orderUrl,
OrderUrlDialog,
OrderUrlQueryParams
OrderUrlQueryParams,
} from "../../urls";
import { OrderDetailsMessages } from "./OrderDetailsMessages";
@ -59,7 +59,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => {
if (
order &&
order.lines &&
order.lines.filter(line => line.isShippingRequired).length > 0 &&
order.lines.filter((line) => line.isShippingRequired).length > 0 &&
order.shippingMethod === null
) {
warnings.push(OrderDraftFinalizeWarning.NO_SHIPPING_METHOD);
@ -67,7 +67,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => {
if (
order &&
order.lines &&
order.lines.filter(line => line.isShippingRequired).length === 0 &&
order.lines.filter((line) => line.isShippingRequired).length === 0 &&
order.shippingMethod !== null
) {
warnings.push(OrderDraftFinalizeWarning.UNNECESSARY_SHIPPING_METHOD);
@ -86,29 +86,29 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
const {
loadMore: loadMoreCustomers,
search: searchUsers,
result: users
result: users,
} = useCustomerSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
variables: DEFAULT_INITIAL_SEARCH_DATA,
});
const {
loadMore,
search: variantSearch,
result: variantSearchOpts
result: variantSearchOpts,
} = useOrderVariantSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
variables: DEFAULT_INITIAL_SEARCH_DATA,
});
const warehouses = useWarehouseList({
displayLoader: true,
variables: {
first: 30
}
first: 30,
},
});
const intl = useIntl();
const [openModal, closeModal] = createDialogActionHandlers<
OrderUrlDialog,
OrderUrlQueryParams
>(navigate, params => orderUrl(id, params), params);
>(navigate, (params) => orderUrl(id, params), params);
const handleBack = () => navigate(orderListUrl());
@ -123,7 +123,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
return (
<OrderDetailsMessages id={id} params={params}>
{orderMessages => (
{(orderMessages) => (
<OrderOperations
order={id}
onNoteAdd={orderMessages.handleNoteAdd}
@ -165,7 +165,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderFulfillmentUpdateTracking,
orderDraftCancel,
orderDraftFinalize,
orderPaymentMarkAsPaid
orderPaymentMarkAsPaid,
}) => (
<>
{order?.status !== OrderStatus.DRAFT ? (
@ -174,20 +174,20 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
title={intl.formatMessage(
{
defaultMessage: "Order #{orderNumber}",
description: "window title"
description: "window title",
},
{
orderNumber: getStringOrPlaceholder(
data?.order?.number
)
),
}
)}
/>
<OrderDetailsPage
onNoteAdd={variables =>
onNoteAdd={(variables) =>
orderAddNote.mutate({
input: variables,
order: id
order: id,
})
}
onBack={handleBack}
@ -199,26 +199,27 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
userPermissions={user?.userPermissions || []}
onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => navigate(orderFulfillUrl(id))}
onFulfillmentCancel={fulfillmentId =>
onFulfillmentCancel={(fulfillmentId) =>
navigate(
orderUrl(id, {
action: "cancel-fulfillment",
id: fulfillmentId
id: fulfillmentId,
})
)
}
onFulfillmentTrackingNumberUpdate={fulfillmentId =>
onFulfillmentTrackingNumberUpdate={(fulfillmentId) =>
navigate(
orderUrl(id, {
action: "edit-fulfillment",
id: fulfillmentId
id: fulfillmentId,
})
)
}
onPaymentCapture={() => openModal("capture")}
onPaymentVoid={() => openModal("void")}
onPaymentRefund={() => openModal("refund")}
onProductClick={id => () => navigate(productUrl(id))}
onProductClick={(id) => () =>
navigate(productUrl(id))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
}
@ -229,7 +230,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onProfileView={() =>
navigate(customerUrl(order.user.id))
}
onInvoiceClick={invoice =>
onInvoiceClick={(invoice) =>
window.open(invoice.url, "_blank")
}
/>
@ -238,7 +239,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment =>
(fulfillment) =>
fulfillment.status ===
FulfillmentStatus.FULFILLED
)
@ -254,7 +255,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
id
id,
})
}
/>
@ -269,7 +270,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id
id,
})
}
open={params.action === "mark-paid"}
@ -291,10 +292,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "capture"}
variant="capture"
onClose={closeModal}
onSubmit={variables =>
onSubmit={(variables) =>
orderPaymentCapture.mutate({
...variables,
id
id,
})
}
/>
@ -308,10 +309,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "refund"}
variant="refund"
onClose={closeModal}
onSubmit={variables =>
onSubmit={(variables) =>
orderPaymentRefund.mutate({
...variables,
id
id,
})
}
/>
@ -326,13 +327,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
(edge) => edge.node
) || []
}
onConfirm={variables =>
onConfirm={(variables) =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
input: variables,
})
}
onClose={closeModal}
@ -348,16 +349,16 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "edit-fulfillment"}
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
(fulfillment) => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
onConfirm={(variables) =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
notifyCustomer: true,
},
})
}
onClose={closeModal}
@ -369,26 +370,26 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
title={intl.formatMessage(
{
defaultMessage: "Draft Order #{orderNumber}",
description: "window title"
description: "window title",
},
{
orderNumber: getStringOrPlaceholder(
data?.order?.number
)
),
}
)}
/>
<OrderDraftPage
disabled={loading}
onNoteAdd={variables =>
onNoteAdd={(variables) =>
orderAddNote.mutate({
input: variables,
order: id
order: id,
})
}
users={maybe(
() =>
users.data.search.edges.map(edge => edge.node),
users.data.search.edges.map((edge) => edge.node),
[]
)}
hasMore={maybe(
@ -399,10 +400,10 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
fetchUsers={searchUsers}
loading={users.loading}
usersLoading={users.loading}
onCustomerEdit={data =>
onCustomerEdit={(data) =>
orderDraftUpdate.mutate({
id,
input: data
input: data,
})
}
onDraftFinalize={() => openModal("finalize")}
@ -411,12 +412,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onBack={() => navigate(orderListUrl())}
order={order}
countries={maybe(() => data.shop.countries, []).map(
country => ({
(country) => ({
code: country.code,
label: country.country
label: country.country,
})
)}
onProductClick={id => () =>
onProductClick={(id) => () =>
navigate(productUrl(encodeURIComponent(id)))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
@ -427,13 +428,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onShippingMethodEdit={() =>
openModal("edit-shipping")
}
onOrderLineRemove={id =>
onOrderLineRemove={(id) =>
orderLineDelete.mutate({ id })
}
onOrderLineChange={(id, data) =>
orderLineUpdate.mutate({
id,
input: data
input: data,
})
}
saveButtonBarState="default"
@ -477,12 +478,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
onSubmit={(variables) =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
shippingMethod: variables.shippingMethod,
},
})
}
/>
@ -498,18 +499,18 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
variantSearchOpts.data?.search.pageInfo.hasNextPage
}
products={variantSearchOpts.data?.search.edges.map(
edge => edge.node
(edge) => edge.node
)}
onClose={closeModal}
onFetch={variantSearch}
onFetchMore={loadMore}
onSubmit={variants =>
onSubmit={(variants) =>
orderLinesAdd.mutate({
id,
input: variants.map(variant => ({
input: variants.map((variant) => ({
quantity: 1,
variantId: variant.id
}))
variantId: variant.id,
})),
})
}
/>
@ -519,21 +520,21 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.shippingAddress)}
countries={
data?.shop?.countries.map(country => ({
data?.shop?.countries.map((country) => ({
code: country.code,
label: country.country
label: country.country,
})) || []
}
errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-shipping-address"}
variant="shipping"
onClose={closeModal}
onConfirm={shippingAddress =>
onConfirm={(shippingAddress) =>
orderUpdate.mutate({
id,
input: {
shippingAddress
}
shippingAddress,
},
})
}
/>
@ -541,21 +542,21 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.billingAddress)}
countries={
data?.shop?.countries.map(country => ({
data?.shop?.countries.map((country) => ({
code: country.code,
label: country.country
label: country.country,
})) || []
}
errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-billing-address"}
variant="billing"
onClose={closeModal}
onConfirm={billingAddress =>
onConfirm={(billingAddress) =>
orderUpdate.mutate({
id,
input: {
billingAddress
}
billingAddress,
},
})
}
/>

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

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