Draft location management page

src/components/AddressField/AddressField.tsx

@@ -21,7 +21,7 @@ export const AddressField = ({ countryFieldProps, regionFieldProps }: AddressFie
   return (
     <>
       <CountryField onChange={onCountryFieldChange} {...countryFieldProps}/>
-      <RegionField {...regionFieldProps}/>
+      <RegionField {...regionFieldProps} countryFieldName={countryFieldProps.name}/>
     </>
   );
 };

src/components/AddressField/RegionField.tsx

@@ -1,5 +1,5 @@
 import { AutocompleteRenderInputParams } from "@mui/material/Autocomplete";
-import { Field, FieldProps, useFormikContext } from "formik";
+import { Field, FieldProps, getIn, useFormikContext } from "formik";
 import { useEffect, useState } from "react";
 
 import { InputWithLabel } from "@components/TextField";
@@ -30,13 +30,12 @@ export const RegionField =
      values,
      setFieldValue
    } = useFormikContext<FormValues>();
-   const fieldValue = values[name]?.value;
+   const fieldValue = getIn(values, name)?.value;
    const [inputValue, setInputValue] = useState(fieldValue || "");
 
-   const country = values[countryFieldName];
+   const country = getIn(values, countryFieldName);
    const states = country?.value && locales[country.value] ? locales[country.value].states : undefined;
 
-
    useEffect(() => {
      if (!fieldValue) {
        setInputValue("");

src/components/Sidebar/defaultSidebarItems.tsx

@@ -9,6 +9,7 @@ import LocalOfferOutlinedIcon from "@mui/icons-material/LocalOfferOutlined";
 import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";
 import AdminPanelSettingsOutlinedIcon from "@mui/icons-material/AdminPanelSettingsOutlined";
 import FaceIcon from "@mui/icons-material/Face";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
 
 import { SidebarItemProps } from "./SidebarItem";
 
@@ -25,7 +26,8 @@ export const FEATURE_KEYS = {
   shippingFulfillment: "shippingFulfillment",
   categories: "categories",
   emails: "emails",
-  stores: "stores"
+  stores: "stores",
+  locations: "locations"
 };
 
 export type ItemProps = SidebarItemProps & {
@@ -101,6 +103,12 @@ export const CORE_FEATURES: ItemProps[] = [
         icon: <LocalShippingOutlinedIcon fontSize="small" />,
         to: "/settings/shipping-fulfillment"
       },
+      {
+        key: FEATURE_KEYS.locations,
+        text: "Locations",
+        icon: <LocationOnIcon fontSize="small" />,
+        to: "/settings/locations/warehouses"
+      },
       {
         key: FEATURE_KEYS.emails,
         text: "Transactional Emails",

src/components/TimePickerField/TimePickerField.tsx

@@ -0,0 +1,57 @@
+import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
+import { FieldProps, getIn } from "formik";
+
+import { InputWithLabel } from "@components/TextField";
+
+
+type TimePickerFieldProps = TimePickerProps<unknown, Date> & FieldProps
+export const DEFAULT_TIME_FORMAT = "hh:mm a";
+
+export const TimePickerField = ({
+  field,
+  form: { isSubmitting, errors, setFieldValue },
+  onChange,
+  disabled,
+  onAccept,
+  inputFormat = DEFAULT_TIME_FORMAT,
+  ...props
+}: TimePickerFieldProps) => {
+  const {
+    onChange: fieldOnChange,
+    onBlur: fieldOnBlur,
+    multiple: _multiple,
+    ...restFieldProps
+  } = field;
+
+  const fieldError = getIn(errors, restFieldProps.name) as string;
+  const helperText = fieldError ?? undefined;
+
+  const _onChange =
+    onChange ?? ((value) => setFieldValue(restFieldProps.name, value));
+
+
+  const _onAccept = (value: Date | null) => {
+    onAccept?.(value) ?? setFieldValue(restFieldProps.name, value);
+  };
+
+  return (
+    <TimePicker
+      {...props}
+      {...restFieldProps}
+      onChange={_onChange}
+      disabled={disabled ?? isSubmitting}
+      inputFormat={inputFormat}
+      onAccept={_onAccept}
+      mask="__:__ _M"
+      renderInput={
+        ({ inputRef, ...params }) =>
+          <InputWithLabel
+            {...params}
+            ref={inputRef}
+            error={!!helperText}
+            helperText={helperText}
+          />
+      }
+    />
+  );
+};

src/components/TimePickerField/index.ts

@@ -0,0 +1 @@
+export * from "./TimePickerField";