Merge pull request #244 from mirumee/fix/minor-bugs

Fix minor bugs

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable, unreleased changes to this project will be documented in this file.
 
 ## [Unreleased]
 
-..
+- Fix minor bugs - #244 by @dominik-zeglen
 
 ## 2.0.0
 

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
-
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -13,10 +12,13 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
+import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { AddressTypeInput } from "../../types";
 import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
@@ -32,7 +34,7 @@ export interface CustomerAddressDialogProps {
   open: boolean;
   variant: "create" | "edit";
   onClose: () => void;
-  onConfirm: (data: AddressTypeInput) => void;
+  onConfirm: (data: AddressInput) => void;
 }
 
 const styles = createStyles({
@@ -56,6 +58,15 @@ const CustomerAddressDialog = withStyles(styles, {})(
     const [countryDisplayName, setCountryDisplayName] = useStateFromProps(
       maybe(() => address.country.country, "")
     );
+    const {
+      errors: validationErrors,
+      submit: handleSubmit
+    } = useAddressValidation(onConfirm);
+    const dialogErrors = useModalDialogErrors(
+      [...errors, ...validationErrors],
+      open
+    );
+
     const initialForm: AddressTypeInput = {
       city: maybe(() => address.city, ""),
       cityArea: maybe(() => address.cityArea, ""),
@@ -87,8 +98,12 @@ const CustomerAddressDialog = withStyles(styles, {})(
         fullWidth
         maxWidth="sm"
       >
-        <Form initial={initialForm} errors={errors} onSubmit={onConfirm}>
+        <Form
-          {({ change, data, errors }) => {
+          initial={initialForm}
+          errors={dialogErrors}
+          onSubmit={handleSubmit}
+        >
+          {({ change, data, errors: formErrors }) => {
             const handleCountrySelect = createSingleAutocompleteSelectHandler(
               change,
               setCountryDisplayName,
@@ -115,7 +130,7 @@ const CustomerAddressDialog = withStyles(styles, {})(
                     countries={countryChoices}
                     data={data}
                     countryDisplayValue={countryDisplayName}
-                    errors={errors}
+                    errors={formErrors}
                     onChange={change}
                     onCountryChange={handleCountrySelect}
                   />

src/customers/views/CustomerAddresses.tsx

@@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
-import { getMutationState, maybe, transformFormToAddress } from "../../misc";
+import { getMutationState, maybe } from "../../misc";
 import CustomerAddressDialog from "../components/CustomerAddressDialog";
 import CustomerAddressListPage from "../components/CustomerAddressListPage";
 import {
@@ -176,7 +176,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                                 createCustomerAddress({
                                   variables: {
                                     id,
-                                    input: transformFormToAddress(input)
+                                    input
                                   }
                                 })
                               }
@@ -202,7 +202,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                                 updateCustomerAddress({
                                   variables: {
                                     id: params.id,
-                                    input: transformFormToAddress(input)
+                                    input
                                   }
                                 })
                               }

src/customers/views/CustomerCreate.tsx

@@ -8,6 +8,7 @@ import { maybe, transformFormToAddress } from "../../misc";
 import CustomerCreatePage from "../components/CustomerCreatePage";
 import { TypedCreateCustomerMutation } from "../mutations";
 import { TypedCustomerCreateDataQuery } from "../queries";
+import { AddressTypeInput } from "../types";
 import { CreateCustomer } from "../types/CreateCustomer";
 import { customerListUrl, customerUrl } from "../urls";
 
@@ -57,6 +58,21 @@ export const CustomerCreate: React.FC<{}> = () => {
                 }
                 onBack={() => navigate(customerListUrl())}
                 onSubmit={formData => {
+                  const areAddressInputFieldsModified = ([
+                    "city",
+                    "companyName",
+                    "country",
+                    "countryArea",
+                    "firstName",
+                    "lastName",
+                    "phone",
+                    "postalCode",
+                    "streetAddress1",
+                    "streetAddress2"
+                  ] as Array<keyof AddressTypeInput>)
+                    .map(key => formData[key])
+                    .some(field => field !== "");
+
                   const address = {
                     city: formData.city,
                     cityArea: formData.cityArea,
@@ -73,8 +89,12 @@ export const CustomerCreate: React.FC<{}> = () => {
                   createCustomer({
                     variables: {
                       input: {
-                        defaultBillingAddress: transformFormToAddress(address),
+                        defaultBillingAddress: areAddressInputFieldsModified
-                        defaultShippingAddress: transformFormToAddress(address),
+                          ? transformFormToAddress(address)
+                          : null,
+                        defaultShippingAddress: areAddressInputFieldsModified
+                          ? transformFormToAddress(address)
+                          : null,
                         email: formData.email,
                         firstName: formData.customerFirstName,
                         lastName: formData.customerLastName,

src/hooks/useAddressValidation.ts

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+import { AddressTypeInput } from "@saleor/customers/types";
+import { commonMessages } from "@saleor/intl";
+import { transformFormToAddress } from "@saleor/misc";
+import { UserError } from "@saleor/types";
+import { AddressInput } from "@saleor/types/globalTypes";
+import { add, remove } from "@saleor/utils/lists";
+
+interface UseAddressValidation {
+  errors: UserError[];
+  submit: (data: AddressTypeInput) => void;
+}
+
+function useAddressValidation(
+  onSubmit: (address: AddressInput) => void
+): UseAddressValidation {
+  const intl = useIntl();
+  const [validationErrors, setValidationErrors] = useState<UserError[]>([]);
+
+  const countryRequiredError = {
+    field: "country",
+    message: intl.formatMessage(commonMessages.requiredField)
+  };
+
+  return {
+    errors: validationErrors,
+    submit: (data: AddressTypeInput) => {
+      try {
+        setValidationErrors(
+          remove(
+            countryRequiredError,
+            validationErrors,
+            (a, b) => a.field === b.field
+          )
+        );
+        onSubmit(transformFormToAddress(data));
+      } catch {
+        setValidationErrors(add(countryRequiredError, validationErrors));
+      }
+    }
+  };
+}
+
+export default useAddressValidation;

src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx

@@ -12,12 +12,15 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
+import { AddressTypeInput } from "@saleor/customers/types";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
+import { UserError } from "@saleor/types";
+import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { AddressTypeInput } from "../../../customers/types";
-import { UserError } from "../../../types";
 
 const styles = createStyles({
   overflow: {
@@ -36,7 +39,7 @@ interface OrderAddressEditDialogProps extends WithStyles<typeof styles> {
     label: string;
   }>;
   onClose();
-  onConfirm(data: AddressTypeInput);
+  onConfirm(data: AddressInput);
 }
 
 const OrderAddressEditDialog = withStyles(styles, {
@@ -59,6 +62,15 @@ const OrderAddressEditDialog = withStyles(styles, {
         () => countries.find(country => address.country === country.code).label
       )
     );
+    const {
+      errors: validationErrors,
+      submit: handleSubmit
+    } = useAddressValidation(onConfirm);
+    const dialogErrors = useModalDialogErrors(
+      [...errors, ...validationErrors],
+      open
+    );
+
     const countryChoices = countries.map(country => ({
       label: country.label,
       value: country.code
@@ -70,7 +82,7 @@ const OrderAddressEditDialog = withStyles(styles, {
         open={open}
         classes={{ paper: classes.overflow }}
       >
-        <Form initial={address} errors={errors} onSubmit={onConfirm}>
+        <Form initial={address} errors={dialogErrors} onSubmit={handleSubmit}>
           {({ change, data, errors, submit }) => {
             const handleCountrySelect = createSingleAutocompleteSelectHandler(
               change,

src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx

@@ -36,9 +36,9 @@ const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
     >
       <DialogContentText>
         <FormattedMessage
-          defaultMessage="Are you sure you want to delete draft #{number}?"
+          defaultMessage="Are you sure you want to delete draft #{orderNumber}?"
           values={{
-            orderNumber
+            orderNumber: <strong>{orderNumber}</strong>
           }}
         />
       </DialogContentText>

src/orders/views/OrderDetails/index.tsx

@@ -6,12 +6,7 @@ import useUser from "@saleor/hooks/useUser";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
 import SearchCustomers from "../../../containers/SearchCustomers";
 import { customerUrl } from "../../../customers/urls";
-import {
+import { getMutationState, maybe, transformAddressToForm } from "../../../misc";
-  getMutationState,
-  maybe,
-  transformAddressToForm,
-  transformFormToAddress
-} from "../../../misc";
 import { productUrl } from "../../../products/urls";
 import { OrderStatus } from "../../../types/globalTypes";
 import OrderAddressEditDialog from "../../components/OrderAddressEditDialog";
@@ -604,9 +599,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                               orderUpdate.mutate({
                                 id,
                                 input: {
-                                  shippingAddress: transformFormToAddress(
                                   shippingAddress
-                                  )
                                 }
                               })
                             }
@@ -639,9 +632,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                               orderUpdate.mutate({
                                 id,
                                 input: {
-                                  billingAddress: transformFormToAddress(
                                   billingAddress
-                                  )
                                 }
                               })
                             }

src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx

@@ -49,7 +49,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
         title={intl.formatMessage(
           {
             defaultMessage:
-              'Translation Category "{categoryNane}" - {languageCode}'
+              'Translation Category "{categoryName}" - {languageCode}'
           },
           {
             categoryName: maybe(() => category.name, "..."),