Refactor

src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx

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

src/orders/views/OrderDetails/OrderAddressFields.tsx

@@ -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;

src/orders/views/OrderDetails/index.tsx

@@ -23,19 +23,13 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { customerUrl } from "../../../customers/urls";
-import {
+import { getMutationState, getStringOrPlaceholder, maybe } from "../../../misc";
-  getMutationState,
-  getStringOrPlaceholder,
-  maybe,
-  transformAddressToForm
-} 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
+                    <OrderAddressFields
-                      confirmButtonState={
+                      isDraft={order?.status === OrderStatus.DRAFT}
-                        order?.status === OrderStatus.DRAFT
+                      orderUpdate={orderUpdate}
-                          ? orderDraftUpdate.opts.status
+                      orderDraftUpdate={orderDraftUpdate}
-                          : orderUpdate.opts.status
+                      data={data}
-                      }
+                      id={id}
-                      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"
                       onClose={closeModal}
-                      onConfirm={shippingAddress => {
+                      action={params.action}
-                        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
-                          }
-                        });
-                      }}
                     />
                   </>
                 )}