Allow creating warehouse from shipping zone view

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -0,0 +1,190 @@
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import React from "react";
+import { useIntl, IntlShape } from "react-intl";
+
+import FormSpacer from "@saleor/components/FormSpacer";
+import Grid from "@saleor/components/Grid";
+import SingleAutocompleteSelectField, {
+  SingleAutocompleteChoiceType
+} from "@saleor/components/SingleAutocompleteSelectField";
+import { AddressTypeInput } from "@saleor/customers/types";
+import { ChangeEvent } from "@saleor/hooks/useForm";
+import getShopErrorMessage from "@saleor/utils/errors/shop";
+import { getFormErrors } from "@saleor/utils/errors";
+import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
+import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
+
+export interface CompanyAddressFormProps {
+  countries: SingleAutocompleteChoiceType[];
+  data: AddressTypeInput;
+  displayCountry: string;
+  errors: Array<AccountErrorFragment | ShopErrorFragment>;
+  disabled: boolean;
+  onChange: (event: ChangeEvent) => void;
+  onCountryChange: (event: ChangeEvent) => void;
+}
+
+const useStyles = makeStyles(
+  {
+    root: {}
+  },
+  { name: "CompanyAddressForm" }
+);
+
+function getErrorMessage(
+  err: AccountErrorFragment | ShopErrorFragment,
+  intl: IntlShape
+): string {
+  if (err?.__typename === "AccountError") {
+    return getAccountErrorMessage(err, intl);
+  }
+
+  return getShopErrorMessage(err, intl);
+}
+
+const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
+  const {
+    countries,
+    data,
+    disabled,
+    displayCountry,
+    errors,
+    onChange,
+    onCountryChange
+  } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  const formFields = [
+    "companyName",
+    "streetAddress1",
+    "streetAddress2",
+    "city",
+    "postalCode",
+    "country",
+    "companyArea",
+    "phone"
+  ];
+  const formErrors = getFormErrors(formFields, errors);
+
+  return (
+    <div className={classes.root}>
+      <TextField
+        disabled={disabled}
+        error={!!formErrors.companyName}
+        helperText={getErrorMessage(formErrors.companyName, intl)}
+        label={intl.formatMessage({
+          defaultMessage: "Company"
+        })}
+        name={"companyName" as keyof AddressTypeInput}
+        onChange={onChange}
+        value={data.companyName}
+        fullWidth
+      />
+      <FormSpacer />
+      <TextField
+        disabled={disabled}
+        error={!!formErrors.streetAddress1}
+        helperText={getErrorMessage(formErrors.streetAddress1, intl)}
+        label={intl.formatMessage({
+          defaultMessage: "Address line 1"
+        })}
+        name={"streetAddress1" as keyof AddressTypeInput}
+        onChange={onChange}
+        value={data.streetAddress1}
+        fullWidth
+      />
+      <FormSpacer />
+      <TextField
+        disabled={disabled}
+        error={!!formErrors.streetAddress2}
+        helperText={getErrorMessage(formErrors.streetAddress2, intl)}
+        label={intl.formatMessage({
+          defaultMessage: "Address line 2"
+        })}
+        name={"streetAddress2" as keyof AddressTypeInput}
+        onChange={onChange}
+        value={data.streetAddress2}
+        fullWidth
+      />
+      <FormSpacer />
+      <Grid>
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.city}
+          helperText={getErrorMessage(formErrors.city, intl)}
+          label={intl.formatMessage({
+            defaultMessage: "City"
+          })}
+          name={"city" as keyof AddressTypeInput}
+          onChange={onChange}
+          value={data.city}
+          fullWidth
+        />
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.postalCode}
+          helperText={getErrorMessage(formErrors.postalCode, intl)}
+          label={intl.formatMessage({
+            defaultMessage: "ZIP / Postal code"
+          })}
+          name={"postalCode" as keyof AddressTypeInput}
+          onChange={onChange}
+          value={data.postalCode}
+          fullWidth
+        />
+      </Grid>
+      <FormSpacer />
+      <Grid>
+        <SingleAutocompleteSelectField
+          disabled={disabled}
+          displayValue={displayCountry}
+          error={!!formErrors.country}
+          helperText={getErrorMessage(formErrors.country, intl)}
+          label={intl.formatMessage({
+            defaultMessage: "Country"
+          })}
+          name={"country" as keyof AddressTypeInput}
+          onChange={onCountryChange}
+          value={data.country}
+          choices={countries}
+          InputProps={{
+            inputProps: {
+              autocomplete: "plsdontautocomplete" // Somehow it shuts it down
+            }
+          }}
+        />
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.countryArea}
+          helperText={getErrorMessage(formErrors.countryArea, intl)}
+          label={intl.formatMessage({
+            defaultMessage: "Country area"
+          })}
+          name={"countryArea" as keyof AddressTypeInput}
+          onChange={onChange}
+          value={data.countryArea}
+          fullWidth
+        />
+      </Grid>
+      <FormSpacer />
+      <TextField
+        disabled={disabled}
+        error={!!formErrors.phone}
+        fullWidth
+        helperText={getErrorMessage(formErrors.phone, intl)}
+        label={intl.formatMessage({
+          defaultMessage: "Phone"
+        })}
+        name={"phone" as keyof AddressTypeInput}
+        value={data.phone}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+CompanyAddressForm.displayName = "CompanyAddressForm";
+export default CompanyAddressForm;

src/components/CompanyAddressInput/CompanyAddressInput.tsx

@@ -1,33 +1,17 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import { makeStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
 import React from "react";
-import { useIntl, IntlShape } from "react-intl";
+import classNames from "classnames";
 
-import CardTitle from "@saleor/components/CardTitle";
-import FormSpacer from "@saleor/components/FormSpacer";
-import Grid from "@saleor/components/Grid";
-import SingleAutocompleteSelectField, {
-  SingleAutocompleteChoiceType
-} from "@saleor/components/SingleAutocompleteSelectField";
-import { ChangeEvent } from "@saleor/hooks/useForm";
-import { getFormErrors } from "@saleor/utils/errors";
-import { ShopErrorFragment } from "@saleor/siteSettings/types/ShopErrorFragment";
-import getShopErrorMessage from "@saleor/utils/errors/shop";
-import { AccountErrorFragment } from "@saleor/customers/types/AccountErrorFragment";
-import getAccountErrorMessage from "@saleor/utils/errors/account";
-import { AddressTypeInput } from "@saleor/customers/types";
+import CardTitle from "../CardTitle";
+import CompanyAddressForm, {
+  CompanyAddressFormProps
+} from "./CompanyAddressForm";
 
-interface CompanyAddressInputProps {
-  countries: SingleAutocompleteChoiceType[];
-  data: AddressTypeInput;
-  displayCountry: string;
-  errors: Array<AccountErrorFragment | ShopErrorFragment>;
-  disabled: boolean;
+interface CompanyAddressInputProps extends CompanyAddressFormProps {
+  className: string;
   header: string;
-  onChange: (event: ChangeEvent) => void;
-  onCountryChange: (event: ChangeEvent) => void;
 }
 
 const useStyles = makeStyles(
@@ -39,159 +23,15 @@ const useStyles = makeStyles(
   { name: "CompanyAddressInput" }
 );
 
-function getErrorMessage(
-  err: AccountErrorFragment | ShopErrorFragment,
-  intl: IntlShape
-): string {
-  if (err?.__typename === "AccountError") {
-    return getAccountErrorMessage(err, intl);
-  }
-
-  return getShopErrorMessage(err, intl);
-}
-
 const CompanyAddressInput: React.FC<CompanyAddressInputProps> = props => {
-  const {
-    countries,
-    data,
-    disabled,
-    displayCountry,
-    errors,
-    header,
-    onChange,
-    onCountryChange
-  } = props;
-
+  const { className, header, ...formProps } = props;
   const classes = useStyles(props);
-  const intl = useIntl();
-
-  const formFields = [
-    "companyName",
-    "streetAddress1",
-    "streetAddress2",
-    "city",
-    "postalCode",
-    "country",
-    "companyArea",
-    "phone"
-  ];
-  const formErrors = getFormErrors(formFields, errors);
 
   return (
-    <Card className={classes.root}>
+    <Card className={classNames(classes.root, className)}>
       <CardTitle title={header} />
       <CardContent>
-        <TextField
-          disabled={disabled}
-          error={!!formErrors.companyName}
-          helperText={getErrorMessage(formErrors.companyName, intl)}
-          label={intl.formatMessage({
-            defaultMessage: "Company"
-          })}
-          name={"companyName" as keyof AddressTypeInput}
-          onChange={onChange}
-          value={data.companyName}
-          fullWidth
-        />
-        <FormSpacer />
-        <TextField
-          disabled={disabled}
-          error={!!formErrors.streetAddress1}
-          helperText={getErrorMessage(formErrors.streetAddress1, intl)}
-          label={intl.formatMessage({
-            defaultMessage: "Address line 1"
-          })}
-          name={"streetAddress1" as keyof AddressTypeInput}
-          onChange={onChange}
-          value={data.streetAddress1}
-          fullWidth
-        />
-        <FormSpacer />
-        <TextField
-          disabled={disabled}
-          error={!!formErrors.streetAddress2}
-          helperText={getErrorMessage(formErrors.streetAddress2, intl)}
-          label={intl.formatMessage({
-            defaultMessage: "Address line 2"
-          })}
-          name={"streetAddress2" as keyof AddressTypeInput}
-          onChange={onChange}
-          value={data.streetAddress2}
-          fullWidth
-        />
-        <FormSpacer />
-        <Grid>
-          <TextField
-            disabled={disabled}
-            error={!!formErrors.city}
-            helperText={getErrorMessage(formErrors.city, intl)}
-            label={intl.formatMessage({
-              defaultMessage: "City"
-            })}
-            name={"city" as keyof AddressTypeInput}
-            onChange={onChange}
-            value={data.city}
-            fullWidth
-          />
-          <TextField
-            disabled={disabled}
-            error={!!formErrors.postalCode}
-            helperText={getErrorMessage(formErrors.postalCode, intl)}
-            label={intl.formatMessage({
-              defaultMessage: "ZIP / Postal code"
-            })}
-            name={"postalCode" as keyof AddressTypeInput}
-            onChange={onChange}
-            value={data.postalCode}
-            fullWidth
-          />
-        </Grid>
-        <FormSpacer />
-        <Grid>
-          <SingleAutocompleteSelectField
-            disabled={disabled}
-            displayValue={displayCountry}
-            error={!!formErrors.country}
-            helperText={getErrorMessage(formErrors.country, intl)}
-            label={intl.formatMessage({
-              defaultMessage: "Country"
-            })}
-            name={"country" as keyof AddressTypeInput}
-            onChange={onCountryChange}
-            value={data.country}
-            choices={countries}
-            InputProps={{
-              inputProps: {
-                autocomplete: "plsdontautocomplete" // Somehow it shuts it down
-              }
-            }}
-          />
-          <TextField
-            disabled={disabled}
-            error={!!formErrors.countryArea}
-            helperText={getErrorMessage(formErrors.countryArea, intl)}
-            label={intl.formatMessage({
-              defaultMessage: "Country area"
-            })}
-            name={"countryArea" as keyof AddressTypeInput}
-            onChange={onChange}
-            value={data.countryArea}
-            fullWidth
-          />
-        </Grid>
-        <FormSpacer />
-        <TextField
-          disabled={disabled}
-          error={!!formErrors.phone}
-          fullWidth
-          helperText={getErrorMessage(formErrors.phone, intl)}
-          label={intl.formatMessage({
-            defaultMessage: "Phone"
-          })}
-          name={"phone" as keyof AddressTypeInput}
-          value={data.phone}
-          onChange={onChange}
-        />
+        <CompanyAddressForm {...formProps} />
       </CardContent>
     </Card>
   );

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles(
 
 export interface SingleAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {
-  add: SingleAutocompleteActionType;
+  add?: SingleAutocompleteActionType;
   error?: boolean;
   name: string;
   displayValue: string;
@@ -147,13 +147,15 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                 />
                 {isOpen && (!!inputValue || !!choices.length) && (
                   <SingleAutocompleteSelectFieldContent
-                    add={{
-                      ...add,
-                      onClick: () => {
-                        add.onClick();
-                        closeMenu();
+                    add={
+                      !!add && {
+                        ...add,
+                        onClick: () => {
+                          add.onClick();
+                          closeMenu();
+                        }
                       }
-                    }}
+                    }
                     choices={choices}
                     displayCustomValue={displayCustomValue}
                     emptyOption={emptyOption}

src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx

@@ -0,0 +1,162 @@
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import TextField from "@material-ui/core/TextField";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "@saleor/components/ConfirmButton";
+import { DialogProps, UserError } from "@saleor/types";
+import { AddressTypeInput } from "@saleor/customers/types";
+import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
+import CompanyAddressForm from "@saleor/components/CompanyAddressInput/CompanyAddressForm";
+import { buttonMessages } from "@saleor/intl";
+import Hr from "@saleor/components/Hr";
+import Form from "@saleor/components/Form";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
+import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
+import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import FormSpacer from "@saleor/components/FormSpacer";
+
+export interface ShippingZoneAddWarehouseDialogSubmitData
+  extends AddressTypeInput {
+  name: string;
+}
+export interface ShippingZoneAddWarehouseDialogProps extends DialogProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  countries: ShopInfo_shop_countries[];
+  disabled: boolean;
+  errors: UserError[];
+  onSubmit: (data: ShippingZoneAddWarehouseDialogSubmitData) => void;
+}
+
+const initialForm: ShippingZoneAddWarehouseDialogSubmitData = {
+  city: "",
+  cityArea: "",
+  companyName: "",
+  country: "",
+  countryArea: "",
+  firstName: "",
+  lastName: "",
+  name: "",
+  phone: "",
+  postalCode: "",
+  streetAddress1: "",
+  streetAddress2: ""
+};
+
+const useStyles = makeStyles(
+  {
+    overflow: {
+      overflowY: "visible"
+    }
+  },
+  {
+    name: "ShippingZoneAddWarehouseDialog"
+  }
+);
+
+const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogProps> = ({
+  confirmButtonState,
+  countries,
+  disabled,
+  errors: apiErrors,
+  open,
+  onClose,
+  onSubmit
+}) => {
+  const classes = useStyles({});
+  const [countryDisplayName, setCountryDisplayName] = useStateFromProps("");
+  const {
+    errors: validationErrors,
+    submit: handleSubmit
+  } = useAddressValidation(onSubmit);
+  const errors = useModalDialogErrors(
+    [...apiErrors, ...validationErrors],
+    open
+  );
+  useModalDialogOpen(open, {});
+  const intl = useIntl();
+
+  const countryChoices = countries.map(country => ({
+    label: country.country,
+    value: country.code
+  }));
+
+  return (
+    <Dialog
+      classes={{ paper: classes.overflow }}
+      onClose={onClose}
+      open={open}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>
+        <FormattedMessage
+          defaultMessage="Create New Warehouse"
+          description="header, dialog"
+        />
+      </DialogTitle>
+      <Form errors={errors} initial={initialForm} onSubmit={handleSubmit}>
+        {({ change, data, errors: formErrors, submit }) => {
+          const handleCountrySelect = createSingleAutocompleteSelectHandler(
+            change,
+            setCountryDisplayName,
+            countryChoices
+          );
+
+          return (
+            <>
+              <DialogContent className={classes.overflow}>
+                <TextField
+                  fullWidth
+                  label={intl.formatMessage({
+                    defaultMessage: "Warehouse Name"
+                  })}
+                  name="name"
+                  value={data.name}
+                  onChange={change}
+                />
+                <FormSpacer />
+                <Hr />
+                <FormSpacer />
+                <CompanyAddressForm
+                  countries={countryChoices}
+                  data={data}
+                  disabled={disabled}
+                  displayCountry={countryDisplayName}
+                  errors={formErrors}
+                  onChange={change}
+                  onCountryChange={handleCountrySelect}
+                />
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={onClose}>
+                  <FormattedMessage {...buttonMessages.back} />
+                </Button>
+                <ConfirmButton
+                  transitionState={confirmButtonState}
+                  color="primary"
+                  variant="contained"
+                  type="submit"
+                >
+                  <FormattedMessage {...buttonMessages.create} />
+                </ConfirmButton>
+              </DialogActions>
+            </>
+          );
+        }}
+      </Form>
+    </Dialog>
+  );
+};
+
+ShippingZoneAddWarehouseDialog.displayName = "ShippingZoneAddWarehouseDialog";
+export default ShippingZoneAddWarehouseDialog;

src/shipping/components/ShippingZoneAddWarehouseDialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ShippingZoneAddWarehouseDialog";
+export * from "./ShippingZoneAddWarehouseDialog";

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -21,8 +21,13 @@ import ShippingZoneRateDialog from "@saleor/shipping/components/ShippingZoneRate
 import useShop from "@saleor/hooks/useShop";
 import ShippingZoneCountriesAssignDialog from "@saleor/shipping/components/ShippingZoneCountriesAssignDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
-import { getStringOrPlaceholder } from "../../../misc";
-import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
+import ShippingZoneAddWarehouseDialog from "@saleor/shipping/components/ShippingZoneAddWarehouseDialog";
+import { useWarehouseCreate } from "@saleor/warehouses/mutations";
+import { getStringOrPlaceholder, findValueInEnum } from "../../../misc";
+import {
+  ShippingMethodTypeEnum,
+  CountryCode
+} from "../../../types/globalTypes";
 import ShippingZoneDetailsPage, {
   FormData
 } from "../../components/ShippingZoneDetailsPage";
@@ -126,6 +131,17 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     }
   });
 
+  const [createWarehouse, createWarehouseOpts] = useWarehouseCreate({
+    onCompleted: data => {
+      if (data.createWarehouse.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        closeModal();
+      }
+    }
+  });
+
   const handleSubmit = (data: FormData) => {
     updateShippingZone({
       variables: {
@@ -138,7 +154,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     assignToWarehouse({
       variables: {
         shippingZoneId: id,
-        warehouseId: data.warehouse
+        warehouseId: data.warehouses[0]
       }
     });
   };
@@ -346,6 +362,34 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
           />
         </DialogContentText>
       </ActionDialog>
+      <ShippingZoneAddWarehouseDialog
+        countries={shop?.countries || []}
+        disabled={createWarehouseOpts.loading}
+        open={params.action === "add-warehouse"}
+        confirmButtonState={createWarehouseOpts.status}
+        errors={createWarehouseOpts.data?.createWarehouse.errors || []}
+        onClose={closeModal}
+        onSubmit={data =>
+          createWarehouse({
+            variables: {
+              input: {
+                address: {
+                  city: data.city,
+                  cityArea: data.cityArea,
+                  country: findValueInEnum(data.country, CountryCode),
+                  countryArea: data.countryArea,
+                  phone: data.phone,
+                  postalCode: data.postalCode,
+                  streetAddress1: data.streetAddress1,
+                  streetAddress2: data.streetAddress2
+                },
+                companyName: data.companyName,
+                name: data.name
+              }
+            }
+          })
+        }
+      />
     </>
   );
 };