diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index cbcb95ceb..a04d47c49 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -5380,6 +5380,9 @@ "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_4190792473": { "string": "Actions" }, + "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_579967655": { + "string": "Shipping rate name" + }, "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_1083561409": { "string": "Are you sure you want to remove this ZIP-code rule?" }, @@ -5430,68 +5433,47 @@ "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_3510295703": { "string": "Search Countries" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_3877274856": { - "context": "character limit", - "string": "{numberOfCharacters} of {maxCharacters} characters" - }, "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_countries": { - "context": "countries", + "context": "country list header", "string": "Countries" }, "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_createZone": { - "context": "header", + "context": "section header", "string": "Create New Shipping Zone" }, "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_defaultZone": { - "context": "default shipping zone", "string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_description": { - "context": "description", - "string": "Description" - }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_descriptionMessage": { - "context": "field placeholder", - "string": "Description of a shipping zone." - }, "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_noCountriesAssigned": { - "context": "no countries assigned to zone", "string": "Currently, there are no countries assigned to this shipping zone" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_shipping": { - "context": "shipping", - "string": "Shipping" - }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3877274856": { - "context": "character limit", - "string": "{numberOfCharacters} of {maxCharacters} characters" - }, "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_countries": { - "context": "countries", + "context": "country list header", "string": "Countries" }, "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_defaultZone": { - "context": "default shipping zone", "string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_description": { - "context": "description", - "string": "Description" - }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_descriptionMessage": { - "context": "field placeholder", - "string": "Description of a shipping zone." - }, "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_noCountriesAssigned": { - "context": "no countries assigned to zone", "string": "Currently, there are no countries assigned to this shipping zone" }, "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_shipping": { - "context": "shipping", + "context": "shipping section header", "string": "Shipping" }, - "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": { - "string": "Shipping rate name" + "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1470703814": { + "context": "field placeholder", + "string": "Description of a shipping zone." + }, + "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1560416099": { + "string": "Shipping zone name" + }, + "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3374163063": { + "string": "Description" + }, + "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3877274856": { + "context": "character limit", + "string": "{numberOfCharacters} of {maxCharacters} characters" }, "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1161979494": { "context": "page title", diff --git a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx new file mode 100644 index 000000000..b66937bee --- /dev/null +++ b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx @@ -0,0 +1,52 @@ +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import TextField from "@material-ui/core/TextField"; +import CardTitle from "@saleor/components/CardTitle"; +import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; +import { commonMessages } from "@saleor/intl"; +import { getFormErrors } from "@saleor/utils/errors"; +import getShippingErrorMessage from "@saleor/utils/errors/shipping"; +import React from "react"; +import { useIntl } from "react-intl"; + +export interface ShippingRateInfoProps { + data: Record<"name", string>; + disabled: boolean; + errors: ShippingErrorFragment[]; + onChange: (event: React.ChangeEvent) => void; +} + +const ShippingRateInfo: React.FC = ({ + data, + disabled, + errors, + onChange +}) => { + const intl = useIntl(); + + const formErrors = getFormErrors(["name"], errors); + + return ( + + + + + + + ); +}; +ShippingRateInfo.displayName = "ShippingRateInfo"; +export default ShippingRateInfo; diff --git a/src/shipping/components/ShippingRateInfo/index.ts b/src/shipping/components/ShippingRateInfo/index.ts new file mode 100644 index 000000000..8002507b2 --- /dev/null +++ b/src/shipping/components/ShippingRateInfo/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ShippingRateInfo"; +export * from "./ShippingRateInfo"; diff --git a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx index 30e968e02..c221a5c1c 100644 --- a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx +++ b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx @@ -1,5 +1,3 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; -import TextField from "@material-ui/core/TextField"; import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -13,7 +11,7 @@ import { CountryFragment } from "@saleor/fragments/types/CountryFragment"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { sectionNames } from "@saleor/intl"; import React from "react"; -import { defineMessages, FormattedMessage, useIntl } from "react-intl"; +import { defineMessages, useIntl } from "react-intl"; import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog"; import ShippingZoneInfo from "../ShippingZoneInfo"; @@ -25,53 +23,22 @@ export interface FormData { name: string; } -const MAX_DESCRIPTION_LENGTH = 300; - -const useStyles = makeStyles( - { - label: { - flex: 1 - }, - labelContainer: { - "& span": { - paddingRight: 30 - }, - display: "flex" - } - }, - { name: "ShippingZoneCreatePage" } -); - const messages = defineMessages({ countries: { defaultMessage: "Countries", - description: "countries" + description: "country list header" }, createZone: { defaultMessage: "Create New Shipping Zone", - description: "header" + description: "section header" }, defaultZone: { defaultMessage: - "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones", - description: "default shipping zone" - }, - description: { - defaultMessage: "Description", - description: "description" - }, - descriptionMessage: { - defaultMessage: "Description of a shipping zone.", - description: "field placeholder" + "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" }, noCountriesAssigned: { defaultMessage: - "Currently, there are no countries assigned to this shipping zone", - description: "no countries assigned to zone" - }, - shipping: { - defaultMessage: "Shipping", - description: "shipping" + "Currently, there are no countries assigned to this shipping zone" } }); @@ -93,7 +60,6 @@ const ShippingZoneCreatePage: React.FC = ({ saveButtonBarState }) => { const intl = useIntl(); - const classes = useStyles({}); const [isModalOpened, setModalStatus] = React.useState(false); const toggleModal = () => setModalStatus(!isModalOpened); @@ -122,42 +88,6 @@ const ShippingZoneCreatePage: React.FC = ({ onChange={change} /> - MAX_DESCRIPTION_LENGTH} - name={"description"} - label={ -
-
- -
- {data.description?.length > 0 && ( - - - - )} -
- } - InputProps={{ - inputProps: { - maxLength: MAX_DESCRIPTION_LENGTH - } - }} - value={data.description} - onChange={change} - disabled={disabled} - fullWidth - multiline - placeholder={intl.formatMessage(messages.descriptionMessage)} - rows={10} - /> - countries.find(country => country.code === selectedCountry) diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx index 4c8238bf8..0c7a55b0e 100644 --- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx +++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx @@ -1,5 +1,3 @@ -import makeStyles from "@material-ui/core/styles/makeStyles"; -import TextField from "@material-ui/core/TextField"; import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -39,49 +37,22 @@ export interface FormData extends MetadataFormData { warehouses: string[]; } -const MAX_DESCRIPTION_LENGTH = 300; - -const useStyles = makeStyles( - { - label: { - flex: 1 - }, - labelContainer: { - "& span": { - paddingRight: 30 - }, - display: "flex" - } - }, - { name: "ShippingZoneDetailsPage" } -); - const messages = defineMessages({ countries: { defaultMessage: "Countries", - description: "countries" + description: "country list header" }, defaultZone: { defaultMessage: - "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones", - description: "default shipping zone" - }, - description: { - defaultMessage: "Description", - description: "description" - }, - descriptionMessage: { - defaultMessage: "Description of a shipping zone.", - description: "field placeholder" + "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" }, noCountriesAssigned: { defaultMessage: - "Currently, there are no countries assigned to this shipping zone", - description: "no countries assigned to zone" + "Currently, there are no countries assigned to this shipping zone" }, shipping: { defaultMessage: "Shipping", - description: "shipping" + description: "shipping section header" } }); @@ -140,7 +111,6 @@ const ShippingZoneDetailsPage: React.FC = ({ warehouses }) => { const intl = useIntl(); - const classes = useStyles({}); const initialForm: FormData = { description: shippingZone?.description || "", @@ -175,7 +145,6 @@ const ShippingZoneDetailsPage: React.FC = ({ ); const changeMetadata = makeMetadataChangeHandler(change); - const description = data.description; return ( @@ -246,41 +215,6 @@ const ShippingZoneDetailsPage: React.FC = ({ warehouses={warehouseChoices} /> - MAX_DESCRIPTION_LENGTH} - name={"description"} - label={ -
-
- -
- {description?.length > 0 && ( - - - - )} -
- } - InputProps={{ - inputProps: { - maxLength: MAX_DESCRIPTION_LENGTH - } - }} - value={description} - onChange={change} - disabled={loading || disabled} - fullWidth - multiline - placeholder={intl.formatMessage(messages.descriptionMessage)} - rows={10} - /> ; + data: Record<"name" | "description", string>; disabled: boolean; errors: ShippingErrorFragment[]; onChange: (event: React.ChangeEvent) => void; } +const useStyles = makeStyles( + { + label: { + flex: 1 + }, + labelContainer: { + "& span": { + paddingRight: 30 + }, + display: "flex" + } + }, + { name: "ShippingZoneCreatePage" } +); + +const MAX_DESCRIPTION_LENGTH = 300; + const ShippingZoneInfo: React.FC = ({ data, disabled, @@ -23,6 +42,7 @@ const ShippingZoneInfo: React.FC = ({ onChange }) => { const intl = useIntl(); + const classes = useStyles({}); const formErrors = getFormErrors(["name"], errors); @@ -38,12 +58,51 @@ const ShippingZoneInfo: React.FC = ({ fullWidth helperText={getShippingErrorMessage(formErrors.name, intl)} label={intl.formatMessage({ - defaultMessage: "Shipping rate name" + defaultMessage: "Shipping zone name" })} name="name" value={data.name} onChange={onChange} /> + + MAX_DESCRIPTION_LENGTH} + name={"description"} + label={ +
+
+ +
+ {data.description?.length > 0 && ( + + + + )} +
+ } + InputProps={{ + inputProps: { + maxLength: MAX_DESCRIPTION_LENGTH + } + }} + value={data.description} + onChange={onChange} + disabled={disabled} + fullWidth + multiline + placeholder={intl.formatMessage({ + defaultMessage: "Description of a shipping zone.", + description: "field placeholder" + })} + rows={10} + /> ); diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx index c390d76e1..952c9c421 100644 --- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx +++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx @@ -15,7 +15,7 @@ import { validatePrice } from "@saleor/products/utils/validation"; import OrderValue from "@saleor/shipping/components/OrderValue"; import OrderWeight from "@saleor/shipping/components/OrderWeight"; import PricingCard from "@saleor/shipping/components/PricingCard"; -import ShippingZoneInfo from "@saleor/shipping/components/ShippingZoneInfo"; +import ShippingRateInfo from "@saleor/shipping/components/ShippingRateInfo"; import { createChannelsChangeHandler } from "@saleor/shipping/handlers"; import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; @@ -116,7 +116,7 @@ export const ShippingZoneRatesCreatePage: React.FC
- = ({
- - Shipping rate name + Shipping zone name
-
- -
-
-
-
- -
- - -
-
@@ -209685,7 +209688,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = ` class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id" data-shrink="true" > - Shipping rate name + Shipping zone name
+
+
+ +
+ + +
+
-
- -
- - -
-
@@ -210656,7 +210662,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = ` class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id" data-shrink="false" > - Shipping rate name + Shipping zone name
+
+
+ +
+