djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add description to shipping zone create, refactor defaultMessages

Browse source
This commit is contained in:
Tomasz Szymanski 2021-01-05 12:31:06 +01:00
parent 331ab84440
commit f502aff8b2
6 changed files with 322 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
locale/defaultMessages.json
View file

@ -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"
},

3
schema.graphql
View file

@ -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]
}

114
src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
View file

@ -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<ShippingZoneCreatePageProps> = ({
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<ShippingZoneCreatePageProps> = ({
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.shipping)}
</AppHeader>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Create New Shipping Zone",
description: "header"
})}
/>
<PageHeader title={intl.formatMessage(messages.createZone)} />
<Grid>
<div>
<ShippingZoneInfo
@ -72,6 +122,42 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
onChange={change}
/>
<CardSpacer />
<TextField
error={data.description.length > MAX_DESCRIPTION_LENGTH}
name={"description"}
label={
<div className={classes.labelContainer}>
<div className={classes.label}>
<FormattedMessage {...messages.description} />
</div>
{data.description?.length > 0 && (
<span>
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit"
values={{
maxCharacters: MAX_DESCRIPTION_LENGTH,
numberOfCharacters: data.description.length
}}
/>
</span>
)}
</div>
}
InputProps={{
inputProps: {
maxLength: MAX_DESCRIPTION_LENGTH
}
}}
value={data.description}
onChange={change}
disabled={disabled}
fullWidth
multiline
placeholder={intl.formatMessage(messages.descriptionMessage)}
rows={10}
/>
<CardSpacer />
<CountryList
countries={data.countries.map(selectedCountry =>
countries.find(country => country.code === selectedCountry)
@ -79,14 +165,8 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
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<ShippingZoneCreatePageProps> = ({
}
} as any)
}
title={intl.formatMessage({
defaultMessage: "Countries"
})}
title={intl.formatMessage(messages.countries)}
/>
</div>
</Grid>

61
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -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<ShippingZoneDetailsPageProps> = ({
return (
<Container>
<AppHeader onBack={onBack}>
<FormattedMessage defaultMessage="Shipping" />
<FormattedMessage {...messages.shipping} />
</AppHeader>
<PageHeader title={shippingZone?.name} />
<Grid>
@ -170,20 +199,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
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)}
/>
<CardSpacer />
<ShippingZoneRates
@ -226,12 +247,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
/>
</div>
<TextField
error={description.length > maxDescriptionLength}
error={description.length > MAX_DESCRIPTION_LENGTH}
name={"description"}
label={
<div className={classes.labelContainer}>
<div className={classes.label}>
<FormattedMessage defaultMessage="Description" />
<FormattedMessage {...messages.description} />
</div>
{description?.length > 0 && (
<span>
@ -239,7 +260,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
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<ShippingZoneDetailsPageProps> = ({
}
InputProps={{
inputProps: {
maxLength: maxDescriptionLength
maxLength: MAX_DESCRIPTION_LENGTH
}
}}
value={description}
@ -257,9 +278,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
disabled={loading || disabled}
fullWidth
multiline
placeholder={intl.formatMessage({
defaultMessage: "Description of a shipping zone."
})}
placeholder={intl.formatMessage(messages.descriptionMessage)}
rows={10}
/>
</Grid>

142
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -201898,6 +201898,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
data-shrink="false"
>
<div
class="ShippingZoneCreatePage-labelContainer-id"
>
<div
class="ShippingZoneCreatePage-label-id"
>
Description
</div>
</div>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
>
<textarea
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
maxlength="300"
name="description"
placeholder="Description of a shipping zone."
rows="10"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
>
@ -202086,6 +202133,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
data-shrink="false"
>
<div
class="ShippingZoneCreatePage-labelContainer-id"
>
<div
class="ShippingZoneCreatePage-label-id"
>
Description
</div>
</div>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
>
<textarea
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
maxlength="300"
name="description"
placeholder="Description of a shipping zone."
rows="10"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
>
@ -202270,6 +202364,54 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
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"
>
<div
class="ShippingZoneCreatePage-labelContainer-id"
>
<div
class="ShippingZoneCreatePage-label-id"
>
Description
</div>
</div>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
>
<textarea
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
disabled=""
maxlength="300"
name="description"
placeholder="Description of a shipping zone."
rows="10"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
>

3
src/types/globalTypes.ts
View file

@ -1710,6 +1710,7 @@ export interface ShippingZipCodeRulesCreateInputRange {
export interface ShippingZoneCreateInput {
name?: string | null;
description?: string | null;
countries?: (string | null)[] | null;
default?: boolean | null;
addWarehouses?: (string | null)[] | null;
@ -1717,9 +1718,9 @@ export interface ShippingZoneCreateInput {
export interface ShippingZoneUpdateInput {
name?: string | null;
description?: string | null;
countries?: (string | null)[] | null;
default?: boolean | null;
description?: string | null;
addWarehouses?: (string | null)[] | null;
removeWarehouses?: (string | null)[] | null;
}