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

Shipping zone description

Browse source
This commit is contained in:
Tomasz Szymanski 2020-12-30 13:25:40 +01:00
parent 71b4b329d8
commit 5af85e5157
15 changed files with 229 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
locale/defaultMessages.json
View file

@ -5452,6 +5452,13 @@
"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_ShippingZoneDetailsPage_dot_3877274856": {
"context": "character limit",
"string": "{numberOfCharacters} of {maxCharacters} characters"
},
"src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_4270729636": {
"string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
},

2
schema.graphql
View file

@ -4782,6 +4782,7 @@ type ShippingZone implements Node & ObjectWithMetadata {
countries: [CountryDisplay]
shippingMethods: [ShippingMethod]
warehouses: [Warehouse]
description: String
}
type ShippingZoneBulkDelete {
@ -4830,6 +4831,7 @@ input ShippingZoneUpdateInput {
name: String
countries: [String]
default: Boolean
description: String
addWarehouses: [ID]
removeWarehouses: [ID]
}

1
src/fragments/shipping.ts
View file

@ -13,6 +13,7 @@ export const shippingZoneFragment = gql`
country
}
name
description
}
`;

1
src/fragments/types/ShippingZoneDetailsFragment.ts
View file

@ -117,6 +117,7 @@ export interface ShippingZoneDetailsFragment {
id: string;
countries: (ShippingZoneDetailsFragment_countries | null)[] | null;
name: string;
description: string | null;
default: boolean;
shippingMethods: (ShippingZoneDetailsFragment_shippingMethods | null)[] | null;
warehouses: (ShippingZoneDetailsFragment_warehouses | null)[] | null;

1
src/fragments/types/ShippingZoneFragment.ts
View file

@ -31,4 +31,5 @@ export interface ShippingZoneFragment {
id: string;
countries: (ShippingZoneFragment_countries | null)[] | null;
name: string;
description: string | null;
}

58
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.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";
@ -33,9 +35,27 @@ import ShippingZoneWarehouses from "../ShippingZoneWarehouses";
export interface FormData extends MetadataFormData {
name: string;
description: string;
warehouses: string[];
}
const maxDescriptionLength = 300;
const useStyles = makeStyles(
{
label: {
flex: 1
},
labelContainer: {
"& span": {
paddingRight: 30
},
display: "flex"
}
},
{ name: "ShippingZoneDetailsPage" }
);
export interface ShippingZoneDetailsPageProps
extends FetchMoreProps,
SearchProps,
@ -91,8 +111,10 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
warehouses
}) => {
const intl = useIntl();
const classes = useStyles({});
const initialForm: FormData = {
description: shippingZone?.description || "",
metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
name: shippingZone?.name || "",
privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput),
@ -124,6 +146,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
);
const changeMetadata = makeMetadataChangeHandler(change);
const description = data.description;
return (
<Container>
@ -202,6 +225,41 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
warehouses={warehouseChoices}
/>
</div>
<TextField
error={description.length > maxDescriptionLength}
name={"description"}
label={
<div className={classes.labelContainer}>
<div className={classes.label}>
<FormattedMessage defaultMessage="Description" />
</div>
{description?.length > 0 && (
<span>
<FormattedMessage
defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit"
values={{
maxCharacters: maxDescriptionLength,
numberOfCharacters: description.length
}}
/>
</span>
)}
</div>
}
InputProps={{
inputProps: {
maxLength: maxDescriptionLength
}
}}
value={description}
onChange={change}
disabled={loading || disabled}
fullWidth
multiline
placeholder={"placeholder"}
rows={10}
/>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}

8
src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
View file

@ -37,15 +37,15 @@ const useStyles = makeStyles(
paddingRight: 24,
width: ICONBUTTON_SIZE + theme.spacing(0.5)
},
buttonColumn: {
padding: "4px 0",
width: "62px"
},
nameColumn: {
width: "auto"
},
valueColumn: {
width: "auto"
},
buttonColumn: {
width: "62px",
padding: "4px 0"
}
}),
{ name: "ShippingZoneRates" }

9
src/shipping/fixtures.ts
View file

@ -264,6 +264,7 @@ export const shippingZones: ShippingZoneFragment[] = [
country: "Wielka Brytania"
}
],
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjE=",
metadata: [],
name: "Europe",
@ -418,6 +419,7 @@ export const shippingZones: ShippingZoneFragment[] = [
country: "Wallis i Futuna"
}
],
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjI=",
metadata: [],
name: "Oceania",
@ -425,7 +427,6 @@ export const shippingZones: ShippingZoneFragment[] = [
},
{
__typename: "ShippingZone",
countries: [
{
__typename: "CountryDisplay",
@ -683,6 +684,7 @@ export const shippingZones: ShippingZoneFragment[] = [
country: "Jemen"
}
],
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjM=",
metadata: [],
name: "Asia",
@ -690,7 +692,6 @@ export const shippingZones: ShippingZoneFragment[] = [
},
{
__typename: "ShippingZone",
countries: [
{
__typename: "CountryDisplay",
@ -978,6 +979,7 @@ export const shippingZones: ShippingZoneFragment[] = [
country: "Wyspy Dziewicze Stanów Zjednoczonych"
}
],
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjQ=",
metadata: [],
name: "Americas",
@ -985,7 +987,6 @@ export const shippingZones: ShippingZoneFragment[] = [
},
{
__typename: "ShippingZone",
countries: [
{
__typename: "CountryDisplay",
@ -1289,6 +1290,7 @@ export const shippingZones: ShippingZoneFragment[] = [
country: "Zimbabwe"
}
],
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjU=",
metadata: [],
name: "Africa",
@ -1556,6 +1558,7 @@ export const shippingZone: ShippingZone_shippingZone = {
}
],
default: false,
description: "Shipping zone description",
id: "U2hpcHBpbmdab25lOjE=",
metadata: [],
name: "Europe",

1
src/shipping/types/CreateShippingRate.ts
View file

@ -123,6 +123,7 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone {
id: string;
countries: (CreateShippingRate_shippingPriceCreate_shippingZone_countries | null)[] | null;
name: string;
description: string | null;
default: boolean;
shippingMethods: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods | null)[] | null;
warehouses: (CreateShippingRate_shippingPriceCreate_shippingZone_warehouses | null)[] | null;

1
src/shipping/types/DeleteShippingRate.ts
View file

@ -123,6 +123,7 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone {
id: string;
countries: (DeleteShippingRate_shippingPriceDelete_shippingZone_countries | null)[] | null;
name: string;
description: string | null;
default: boolean;
shippingMethods: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods | null)[] | null;
warehouses: (DeleteShippingRate_shippingPriceDelete_shippingZone_warehouses | null)[] | null;

1
src/shipping/types/ShippingZone.ts
View file

@ -149,6 +149,7 @@ export interface ShippingZone_shippingZone {
id: string;
countries: (ShippingZone_shippingZone_countries | null)[] | null;
name: string;
description: string | null;
default: boolean;
shippingMethods: (ShippingZone_shippingZone_shippingMethods | null)[] | null;
warehouses: (ShippingZone_shippingZone_warehouses | null)[] | null;

1
src/shipping/types/ShippingZones.ts
View file

@ -31,6 +31,7 @@ export interface ShippingZones_shippingZones_edges_node {
id: string;
countries: (ShippingZones_shippingZones_edges_node_countries | null)[] | null;
name: string;
description: string | null;
}
export interface ShippingZones_shippingZones_edges {

1
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -144,6 +144,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
id,
input: {
addWarehouses: warehouseDiff.added,
description: submitData.description,
name: submitData.name,
removeWarehouses: warehouseDiff.removed
}

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

@ -209429,6 +209429,55 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
</div>
</div>
</div>
<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-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
data-shrink="true"
>
<div
class="ShippingZoneDetailsPage-labelContainer-id"
>
<div
class="ShippingZoneDetailsPage-label-id"
>
Description
</div>
<span>
25 of 300 characters
</span>
</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="placeholder"
rows="10"
>
Shipping zone description
</textarea>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
</div>
</div>
</form>
@ -210346,6 +210395,55 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
</div>
</div>
</div>
<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-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
data-shrink="true"
>
<div
class="ShippingZoneDetailsPage-labelContainer-id"
>
<div
class="ShippingZoneDetailsPage-label-id"
>
Description
</div>
<span>
25 of 300 characters
</span>
</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="placeholder"
rows="10"
>
Shipping zone description
</textarea>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
</div>
</div>
</form>
@ -211040,6 +211138,51 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
</div>
</div>
</div>
<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="ShippingZoneDetailsPage-labelContainer-id"
>
<div
class="ShippingZoneDetailsPage-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="placeholder"
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>
</div>
</form>

1
src/types/globalTypes.ts
View file

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