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

Refactor

Browse source
This commit is contained in:
Magdalena Markusik 2020-10-29 12:59:48 +01:00
parent 66f435bba0
commit b5d92f3c44
3 changed files with 101 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
View file

@ -49,9 +49,9 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
address,
confirmButtonState,
open,
errors,
errors = [],
variant,
countries,
countries = [],
onClose,
onConfirm
} = props;

90
src/orders/views/OrderDetails/OrderAddressFields.tsx Normal file
View file

@ -0,0 +1,90 @@
import { transformAddressToForm } from "@saleor/misc";
import OrderAddressEditDialog from "@saleor/orders/components/OrderAddressEditDialog";
import { OrderDetails } from "@saleor/orders/types/OrderDetails";
import {
OrderDraftUpdate,
OrderDraftUpdateVariables
} from "@saleor/orders/types/OrderDraftUpdate";
import {
OrderUpdate,
OrderUpdateVariables
} from "@saleor/orders/types/OrderUpdate";
import { PartialMutationProviderOutput } from "@saleor/types";
import { AddressInput } from "@saleor/types/globalTypes";
import React from "react";
enum FieldType {
shipping = "shippingAddress",
billing = "billingAddress"
}
interface Props {
action: string;
id: string;
isDraft: boolean;
data: OrderDetails;
onClose: () => void;
orderUpdate: PartialMutationProviderOutput<OrderUpdate, OrderUpdateVariables>;
orderDraftUpdate: PartialMutationProviderOutput<
OrderDraftUpdate,
OrderDraftUpdateVariables
>;
}
const OrderAddressFields = ({
action,
isDraft,
id,
onClose,
orderUpdate,
orderDraftUpdate,
data
}: Props) => {
const order = data?.order;
const handleConfirm = (type: FieldType) => (value: AddressInput) => {
const updateMutation = isDraft ? orderDraftUpdate : orderUpdate;
updateMutation.mutate({
id,
input: {
[type]: value
}
});
};
const addressFieldCommonProps = {
confirmButtonState: isDraft
? orderDraftUpdate.opts.status
: orderUpdate.opts.status,
countries: data?.shop?.countries.map(country => ({
code: country.code,
label: country.country
})),
errors: isDraft
? orderDraftUpdate.opts.data?.draftOrderUpdate.errors
: orderUpdate.opts.data?.orderUpdate.errors,
onClose
};
return (
<>
<OrderAddressEditDialog
{...addressFieldCommonProps}
address={transformAddressToForm(order?.shippingAddress)}
open={action === "edit-shipping-address"}
variant="shipping"
onConfirm={handleConfirm(FieldType.shipping)}
/>
<OrderAddressEditDialog
{...addressFieldCommonProps}
address={transformAddressToForm(order?.billingAddress)}
open={action === "edit-billing-address"}
variant="billing"
onConfirm={handleConfirm(FieldType.billing)}
/>
</>
);
};
export default OrderAddressFields;

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

@ -23,19 +23,13 @@ import React from "react";
import { useIntl } from "react-intl";
import { customerUrl } from "../../../customers/urls";
import {
getMutationState,
getStringOrPlaceholder,
maybe,
transformAddressToForm
} from "../../../misc";
import { getMutationState, getStringOrPlaceholder, maybe } from "../../../misc";
import { productUrl } from "../../../products/urls";
import {
FulfillmentStatus,
JobStatusEnum,
OrderStatus
} from "../../../types/globalTypes";
import OrderAddressEditDialog from "../../components/OrderAddressEditDialog";
import OrderCancelDialog from "../../components/OrderCancelDialog";
import OrderDetailsPage from "../../components/OrderDetailsPage";
import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog";
@ -57,6 +51,7 @@ import {
OrderUrlDialog,
OrderUrlQueryParams
} from "../../urls";
import OrderAddressFields from "./OrderAddressFields";
import { OrderDetailsMessages } from "./OrderDetailsMessages";
interface OrderDetailsProps {
@ -579,73 +574,14 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
/>
</>
)}
<OrderAddressEditDialog
confirmButtonState={
order?.status === OrderStatus.DRAFT
? orderDraftUpdate.opts.status
: orderUpdate.opts.status
}
address={transformAddressToForm(order?.shippingAddress)}
countries={
data?.shop?.countries.map(country => ({
code: country.code,
label: country.country
})) || []
}
errors={
(order?.status === OrderStatus.DRAFT
? orderDraftUpdate.opts.data?.draftOrderUpdate.errors
: orderUpdate.opts.data?.orderUpdate.errors) || []
}
open={params.action === "edit-shipping-address"}
variant="shipping"
<OrderAddressFields
isDraft={order?.status === OrderStatus.DRAFT}
orderUpdate={orderUpdate}
orderDraftUpdate={orderDraftUpdate}
data={data}
id={id}
onClose={closeModal}
onConfirm={shippingAddress => {
const updateMutation =
order?.status === OrderStatus.DRAFT
? orderDraftUpdate
: orderUpdate;
updateMutation.mutate({
id,
input: {
shippingAddress
}
});
}}
/>
<OrderAddressEditDialog
confirmButtonState={
order?.status === OrderStatus.DRAFT
? orderDraftUpdate.opts.status
: orderUpdate.opts.status
}
address={transformAddressToForm(order?.billingAddress)}
countries={
data?.shop?.countries.map(country => ({
code: country.code,
label: country.country
})) || []
}
errors={
(order?.status === OrderStatus.DRAFT
? orderDraftUpdate.opts.data?.draftOrderUpdate.errors
: orderUpdate.opts.data?.orderUpdate.errors) || []
}
open={params.action === "edit-billing-address"}
variant="billing"
onClose={closeModal}
onConfirm={billingAddress => {
const updateMutation =
order?.status === OrderStatus.DRAFT
? orderDraftUpdate
: orderUpdate;
updateMutation.mutate({
id,
input: {
billingAddress
}
});
}}
action={params.action}
/>
</>
)}