diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index c885269b2..cbcb95ceb 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -5430,41 +5430,66 @@ "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_3510295703": { "string": "Search Countries" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_2364051773": { - "string": "Currently, there are no countries assigned to this shipping zone" + "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_3109712047": { + "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_countries": { + "context": "countries", "string": "Countries" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4049462680": { + "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_createZone": { "context": "header", "string": "Create New Shipping Zone" }, - "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4270729636": { + "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_ShippingZoneDetailsPage_dot_1325966144": { - "string": "Shipping" + "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_description": { + "context": "description", + "string": "Description" }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_1470703814": { + "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_descriptionMessage": { + "context": "field placeholder", "string": "Description of a shipping zone." }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_2364051773": { + "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_ShippingZoneDetailsPage_dot_3109712047": { - "string": "Countries" - }, - "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3374163063": { - "string": "Description" + "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_4270729636": { + "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_countries": { + "context": "countries", + "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", + "string": "Shipping" + }, "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": { "string": "Shipping rate name" }, diff --git a/schema.graphql b/schema.graphql index 8e6b828a1..0bdaec696 100644 --- a/schema.graphql +++ b/schema.graphql @@ -4810,6 +4810,7 @@ type ShippingZoneCreate { input ShippingZoneCreateInput { name: String + description: String countries: [String] default: Boolean addWarehouses: [ID] @@ -4829,9 +4830,9 @@ type ShippingZoneUpdate { input ShippingZoneUpdateInput { name: String + description: String countries: [String] default: Boolean - description: String addWarehouses: [ID] removeWarehouses: [ID] } diff --git a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx index a357ef81d..30e968e02 100644 --- a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx +++ b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx @@ -1,3 +1,5 @@ +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"; @@ -11,7 +13,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 { useIntl } from "react-intl"; +import { defineMessages, FormattedMessage, useIntl } from "react-intl"; import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog"; import ShippingZoneInfo from "../ShippingZoneInfo"; @@ -19,9 +21,60 @@ import ShippingZoneInfo from "../ShippingZoneInfo"; export interface FormData { countries: string[]; default: boolean; + description: string; 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" + }, + createZone: { + defaultMessage: "Create New Shipping Zone", + description: "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" + }, + noCountriesAssigned: { + defaultMessage: + "Currently, there are no countries assigned to this shipping zone", + description: "no countries assigned to zone" + }, + shipping: { + defaultMessage: "Shipping", + description: "shipping" + } +}); + export interface ShippingZoneCreatePageProps { countries: CountryFragment[]; disabled: boolean; @@ -40,12 +93,14 @@ const ShippingZoneCreatePage: React.FC = ({ saveButtonBarState }) => { const intl = useIntl(); + const classes = useStyles({}); const [isModalOpened, setModalStatus] = React.useState(false); const toggleModal = () => setModalStatus(!isModalOpened); const initialForm: FormData = { countries: [], default: false, + description: "", name: "" }; @@ -57,12 +112,7 @@ const ShippingZoneCreatePage: React.FC = ({ {intl.formatMessage(sectionNames.shipping)} - +
= ({ 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) @@ -79,14 +165,8 @@ const ShippingZoneCreatePage: React.FC = ({ disabled={disabled} emptyText={ data.default - ? intl.formatMessage({ - defaultMessage: - "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" - }) - : intl.formatMessage({ - defaultMessage: - "Currently, there are no countries assigned to this shipping zone" - }) + ? intl.formatMessage(messages.defaultZone) + : intl.formatMessage(messages.noCountriesAssigned) } onCountryAssign={toggleModal} onCountryUnassign={countryCode => @@ -99,9 +179,7 @@ const ShippingZoneCreatePage: React.FC = ({ } } as any) } - title={intl.formatMessage({ - defaultMessage: "Countries" - })} + title={intl.formatMessage(messages.countries)} />
diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx index 6e8b681ac..4c8238bf8 100644 --- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx +++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx @@ -24,7 +24,7 @@ import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAu import { mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { defineMessages, FormattedMessage, useIntl } from "react-intl"; import { getStringOrPlaceholder } from "../../../misc"; import { ChannelProps, FetchMoreProps, SearchProps } from "../../../types"; @@ -39,7 +39,7 @@ export interface FormData extends MetadataFormData { warehouses: string[]; } -const maxDescriptionLength = 300; +const MAX_DESCRIPTION_LENGTH = 300; const useStyles = makeStyles( { @@ -56,6 +56,35 @@ const useStyles = makeStyles( { name: "ShippingZoneDetailsPage" } ); +const messages = defineMessages({ + countries: { + defaultMessage: "Countries", + description: "countries" + }, + 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" + }, + noCountriesAssigned: { + defaultMessage: + "Currently, there are no countries assigned to this shipping zone", + description: "no countries assigned to zone" + }, + shipping: { + defaultMessage: "Shipping", + description: "shipping" + } +}); + export interface ShippingZoneDetailsPageProps extends FetchMoreProps, SearchProps, @@ -151,7 +180,7 @@ const ShippingZoneDetailsPage: React.FC = ({ return ( - + @@ -170,20 +199,12 @@ const ShippingZoneDetailsPage: React.FC = ({ shippingZone?.default === undefined ? undefined : shippingZone.default - ? intl.formatMessage({ - defaultMessage: - "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones" - }) - : intl.formatMessage({ - defaultMessage: - "Currently, there are no countries assigned to this shipping zone" - }) + ? intl.formatMessage(messages.defaultZone) + : intl.formatMessage(messages.noCountriesAssigned) )} onCountryAssign={onCountryAdd} onCountryUnassign={onCountryRemove} - title={intl.formatMessage({ - defaultMessage: "Countries" - })} + title={intl.formatMessage(messages.countries)} /> = ({ /> maxDescriptionLength} + error={description.length > MAX_DESCRIPTION_LENGTH} name={"description"} label={
- +
{description?.length > 0 && ( @@ -239,7 +260,7 @@ const ShippingZoneDetailsPage: React.FC = ({ defaultMessage="{numberOfCharacters} of {maxCharacters} characters" description="character limit" values={{ - maxCharacters: maxDescriptionLength, + maxCharacters: MAX_DESCRIPTION_LENGTH, numberOfCharacters: description.length }} /> @@ -249,7 +270,7 @@ const ShippingZoneDetailsPage: React.FC = ({ } InputProps={{ inputProps: { - maxLength: maxDescriptionLength + maxLength: MAX_DESCRIPTION_LENGTH } }} value={description} @@ -257,9 +278,7 @@ const ShippingZoneDetailsPage: React.FC = ({ disabled={loading || disabled} fullWidth multiline - placeholder={intl.formatMessage({ - defaultMessage: "Description of a shipping zone." - })} + placeholder={intl.formatMessage(messages.descriptionMessage)} rows={10} /> diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 84c23d269..c078abf63 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -201898,6 +201898,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
+
+ +
+