fix shipping forms save button disabled state (#855)

* fix shipping forms save button disabled state

* update defaultMessages

locale/defaultMessages.json

@@ -5283,6 +5283,10 @@
   "src_dot_shipping_dot_components_dot_ShippingZonesList_dot_655374584": {
     "string": "No shipping zones found"
   },
+  "src_dot_shipping_dot_invalid": {
+    "context": "error message",
+    "string": "Value is invalid"
+  },
   "src_dot_shipping_dot_price": {
     "context": "error message",
     "string": "Maximum price cannot be lower than minimum"

src/shipping/components/OrderValue/OrderValue.tsx

@@ -164,6 +164,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
                         })}
                         name={`maxValue:${channel.name}`}
                         value={channel.maxValue}
+                        InputProps={{ inputProps: { min: channel.minValue } }}
                         onChange={e =>
                           onChannelsChange(channel.id, {
                             ...channel,

src/shipping/components/OrderWeight/OrderWeight.tsx

@@ -74,13 +74,18 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
                 formErrors.minimumOrderWeight,
                 intl
               )}
-              error={!!formErrors.maximumOrderWeight}
+              error={!!formErrors.minimumOrderWeight}
               fullWidth
               label={intl.formatMessage({
                 defaultMessage: "Min. Order Weight"
               })}
               name="minValue"
               type="number"
+              inputProps={{
+                min: 0,
+                type: "number"
+              }}
+              InputProps={{ inputProps: { min: 0 } }}
               value={minValue}
               onChange={onChange}
             />
@@ -97,6 +102,7 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
               })}
               name="maxValue"
               type="number"
+              InputProps={{ inputProps: { min: minValue } }}
               value={maxValue}
               onChange={onChange}
             />

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -64,6 +64,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
   variant
 }) => {
   const intl = useIntl();
+  const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
   const initialForm: FormData = {
     channelListings: shippingChannels,
     maxValue: rate?.maximumOrderWeight?.value.toString() || "",
@@ -81,10 +82,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
           onChannelsChange,
           triggerChange
         );
-        const formDisabled = data.channelListings?.some(
+        const formDisabled = data.channelListings?.some(channel =>
-          channel =>
-            validatePrice(channel.minValue) ||
-            validatePrice(channel.maxValue) ||
           validatePrice(channel.price)
         );
 
@@ -96,7 +94,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
             <PageHeader
               title={
                 rate?.name ||
-                (variant === ShippingMethodTypeEnum.PRICE
+                (isPriceVariant
                   ? intl.formatMessage({
                       defaultMessage: "Price Rate Create",
                       description: "page title"
@@ -116,7 +114,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                   onChange={change}
                 />
                 <CardSpacer />
-                {variant === ShippingMethodTypeEnum.PRICE ? (
+                {isPriceVariant ? (
                   <OrderValue
                     channels={data.channelListings}
                     errors={channelErrors}

src/shipping/errors.ts

@@ -4,6 +4,10 @@ import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import { defineMessages, IntlShape } from "react-intl";
 
 const messages = defineMessages({
+  invalid: {
+    defaultMessage: "Value is invalid",
+    description: "error message"
+  },
   price: {
     defaultMessage: "Maximum price cannot be lower than minimum",
     description: "error message"
@@ -33,6 +37,8 @@ export function getShippingWeightRateErrorMessage(
   switch (err?.code) {
     case ShippingErrorCode.MAX_LESS_THAN_MIN:
       return intl.formatMessage(messages.weight);
+    case ShippingErrorCode.INVALID:
+      return intl.formatMessage(messages.invalid);
     default:
       getShippingErrorMessage(err, intl);
   }

src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx

@@ -5,7 +5,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { sectionNames } from "@saleor/intl";
+import { commonMessages, sectionNames } from "@saleor/intl";
 import { FormData } from "@saleor/shipping/components/ShippingZoneRatesPage";
 import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
 import {
@@ -19,7 +19,6 @@ import {
   shippingZoneUrl
 } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
-import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -41,6 +40,10 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({ id }) => {
     onCompleted: data => {
       const errors = data.shippingMethodChannelListingUpdate.errors;
       if (errors.length === 0) {
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
         navigate(
           shippingPriceRatesEditUrl(
             id,
@@ -83,13 +86,6 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({ id }) => {
           data.channelListings
         )
       });
-    } else {
-      errors.map(err =>
-        notify({
-          status: "error",
-          text: getShippingErrorMessage(err, intl)
-        })
-      );
     }
   };
   const handleBack = () => navigate(shippingZoneUrl(id));

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -26,7 +26,6 @@ import {
 import { useShippingZone } from "@saleor/shipping/queries";
 import { shippingZoneUrl } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
-import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -113,13 +112,6 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
           shippingChannels
         )
       });
-    } else {
-      errors.map(err =>
-        notify({
-          status: "error",
-          text: getShippingErrorMessage(err, intl)
-        })
-      );
     }
   };
 

src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx

@@ -8,7 +8,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { sectionNames } from "@saleor/intl";
+import { commonMessages, sectionNames } from "@saleor/intl";
 import { FormData } from "@saleor/shipping/components/ShippingZoneRatesPage";
 import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
 import {
@@ -22,7 +22,6 @@ import {
   shippingZoneUrl
 } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
-import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -44,6 +43,10 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({ id }) => {
     onCompleted: data => {
       const errors = data.shippingMethodChannelListingUpdate.errors;
       if (errors.length === 0) {
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
         navigate(
           shippingWeightRatesEditUrl(
             id,
@@ -87,13 +90,6 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({ id }) => {
           data.channelListings
         )
       });
-    } else {
-      errors.map(err =>
-        notify({
-          status: "error",
-          text: getShippingErrorMessage(err, intl)
-        })
-      );
     }
   };
 

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -26,7 +26,6 @@ import { useShippingMethodChannelListingUpdate } from "@saleor/shipping/mutation
 import { useShippingZone } from "@saleor/shipping/queries";
 import { shippingZoneUrl } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
-import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -113,13 +112,6 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
           shippingChannels
         )
       });
-    } else {
-      errors.map(err =>
-        notify({
-          status: "error",
-          text: getShippingErrorMessage(err, intl)
-        })
-      );
     }
   };
 

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -12425,7 +12425,7 @@ exports[`Storyshots Shipping / Order value rates default 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
+                      min="1"
                       name="maxValue:Channel USD"
                       type="number"
                       value="2"
@@ -12671,7 +12671,7 @@ exports[`Storyshots Shipping / Order value rates loading 1`] = `
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                       disabled=""
-                      min="0"
+                      min="1"
                       name="maxValue:Channel USD"
                       type="number"
                       value="2"
@@ -12802,6 +12802,7 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min="0"
               name="minValue"
               type="number"
               value="1"
@@ -12837,6 +12838,7 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min="1"
               name="maxValue"
               type="number"
               value="2"
@@ -12954,6 +12956,7 @@ exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
             <input
               aria-invalid="true"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min="0"
               name="minValue"
               type="number"
               value="1"
@@ -12973,6 +12976,11 @@ exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
               </legend>
             </fieldset>
           </div>
+          <p
+            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+          >
+            Value is invalid
+          </p>
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -12989,6 +12997,7 @@ exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
             <input
               aria-invalid="true"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min="1"
               name="maxValue"
               type="number"
               value="2"
@@ -13008,6 +13017,11 @@ exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
               </legend>
             </fieldset>
           </div>
+          <p
+            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
+          >
+            Value is invalid
+          </p>
         </div>
       </div>
     </div>
@@ -13109,6 +13123,7 @@ exports[`Storyshots Shipping / Order weight rates loading 1`] = `
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
               disabled=""
+              min="0"
               name="minValue"
               type="number"
               value="1"
@@ -13145,6 +13160,7 @@ exports[`Storyshots Shipping / Order weight rates loading 1`] = `
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
               disabled=""
+              min="1"
               name="maxValue"
               type="number"
               value="2"
@@ -13262,6 +13278,7 @@ exports[`Storyshots Shipping / Order weight rates new 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min="0"
               name="minValue"
               type="number"
               value=""
@@ -13297,6 +13314,7 @@ exports[`Storyshots Shipping / Order weight rates new 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              min=""
               name="maxValue"
               type="number"
               value=""
@@ -13898,7 +13916,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page default price 1`] = `
                             <input
                               aria-invalid="false"
                               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
+                              min=""
                               name="maxValue:channel"
                               type="number"
                               value=""
@@ -14326,6 +14344,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page default weight 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
                       name="minValue"
                       type="number"
                       value=""
@@ -14361,6 +14380,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page default weight 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min=""
                       name="maxValue"
                       type="number"
                       value=""
@@ -14891,7 +14911,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page loading 1`] = `
                               aria-invalid="false"
                               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                               disabled=""
-                              min="0"
+                              min=""
                               name="maxValue:channel"
                               type="number"
                               value=""
@@ -15542,7 +15562,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page update price 1`] = `
                             <input
                               aria-invalid="false"
                               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
+                              min="1"
                               name="maxValue:test"
                               type="number"
                               value="20"
@@ -16054,6 +16074,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page update weight 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
                       name="minValue"
                       type="number"
                       value="0"
@@ -16089,6 +16110,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page update weight 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
                       name="maxValue"
                       type="number"
                       value="80"