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

Shipping zones button fix (#1804)

Browse source 
* update tests

* wip

* Post-rebase fix

* Revert "wip"

This reverts commit 225276edb5c0730ab0cefba0f98a663d6e4fb37a.

* Post-rebase fixes

* Update tests, messages and stories

* Fixes

* Update messages

* Update tests and messages
This commit is contained in:
Wojciech Mista 2022-02-01 14:28:30 +01:00 committed by GitHub
parent 35e48a635f
commit 44a8a1c182
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 63 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
locale/defaultMessages.json
View file

@ -1584,13 +1584,17 @@
"context": "add shipping zone title", "context": "add shipping zone title",
"string": "Add Shipping Zones" "string": "Add Shipping Zones"
}, },
"src_dot_channels_dot_components_dot_ShippingZonesCard_dot_allSelectedMessage": {
"context": "all selected zones card message",
"string": "All available shipping zones have been selected"
},
"src_dot_channels_dot_components_dot_ShippingZonesCard_dot_subtitle": { "src_dot_channels_dot_components_dot_ShippingZonesCard_dot_subtitle": {
"context": "card subtitle", "context": "card subtitle",
"string": "Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels." "string": "Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels."
}, },
"src_dot_channels_dot_components_dot_ShippingZonesCard_dot_title": { "src_dot_channels_dot_components_dot_ShippingZonesCard_dot_title": {
"context": "title", "context": "title",
"string": "{zonesCount} Shipping Zones" "string": "{zonesCount} / {totalCount} shipping zones"
}, },
"src_dot_channels_dot_pages_dot_ChannelsListPage_dot_2754800034": { "src_dot_channels_dot_pages_dot_ChannelsListPage_dot_2754800034": {
"context": "alert", "context": "alert",

3
src/channels/components/ShippingZonesCard/ShippingZonesCard.stories.tsx
View file

@ -25,7 +25,8 @@ const baseProps = {
fetchMoreShippingZones: { fetchMoreShippingZones: {
loading: false, loading: false,
hasMore: false, hasMore: false,
onFetchMore: () => undefined onFetchMore: () => undefined,
totalCount: 0
}, },
shippingZones: [], shippingZones: [],
shippingZonesChoices: shippingZones as ChannelShippingZones shippingZonesChoices: shippingZones as ChannelShippingZones

32
src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
View file

@ -3,6 +3,7 @@ import {
Card, Card,
CardContent, CardContent,
Divider, Divider,
makeStyles,
Typography Typography
} from "@material-ui/core"; } from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -22,11 +23,24 @@ const messages = defineMessages({
}, },
subtitle: { subtitle: {
defaultMessage: defaultMessage:
"Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels.", "Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.",
description: "card subtitle" description: "card subtitle"
},
allSelectedMessage: {
defaultMessage: "All available shipping zones have been selected",
description: "all selected zones card message"
} }
}); });
const useStyles = makeStyles(
theme => ({
infoMessage: {
padding: theme.spacing(3)
}
}),
{ name: "ShippingZonesCard" }
);
type ShippingZonesCardProps = ShippingZonesProps; type ShippingZonesCardProps = ShippingZonesProps;
const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => { const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
@ -37,6 +51,7 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
} = props; } = props;
const expanderClasses = useExpanderStyles({}); const expanderClasses = useExpanderStyles({});
const classes = useStyles();
const intl = useIntl(); const intl = useIntl();
const hasMoreZonesToBeSelected = totalCount !== shippingZones.length; const hasMoreZonesToBeSelected = totalCount !== shippingZones.length;
@ -48,14 +63,25 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
<Typography>{intl.formatMessage(messages.subtitle)}</Typography> <Typography>{intl.formatMessage(messages.subtitle)}</Typography>
</CardContent> </CardContent>
<Accordion classes={expanderClasses}> <Accordion classes={expanderClasses}>
<ShippingZonesListHeader shippingZones={shippingZones} /> <ShippingZonesListHeader
shippingZones={shippingZones}
totalCount={totalCount}
/>
<Divider /> <Divider />
{shippingZones.map(zone => ( {shippingZones.map(zone => (
<ShippingZoneItem zone={zone} onDelete={removeShippingZone} /> <ShippingZoneItem zone={zone} onDelete={removeShippingZone} />
))} ))}
{hasMoreZonesToBeSelected ? ( {hasMoreZonesToBeSelected ? (
<ShippingZonesCardListFooter {...props} /> <ShippingZonesCardListFooter {...props} />
) : null} ) : (
<Typography
color="textSecondary"
variant="subtitle1"
className={classes.infoMessage}
>
{intl.formatMessage(messages.allSelectedMessage)}
</Typography>
)}
</Accordion> </Accordion>
</Card> </Card>
); );

9
src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
View file

@ -41,17 +41,19 @@ const useStyles = makeStyles(
const messages = defineMessages({ const messages = defineMessages({
title: { title: {
defaultMessage: "{zonesCount} Shipping Zones", defaultMessage: "{zonesCount} / {totalCount} shipping zones",
description: "title" description: "title"
} }
}); });
interface ShippingZonesListHeaderProps { interface ShippingZonesListHeaderProps {
shippingZones: ChannelShippingZones; shippingZones: ChannelShippingZones;
totalCount: number;
} }
const ShippingZonesListHeader: React.FC<ShippingZonesListHeaderProps> = ({ const ShippingZonesListHeader: React.FC<ShippingZonesListHeaderProps> = ({
shippingZones shippingZones,
totalCount
}) => { }) => {
const classes = useStyles({}); const classes = useStyles({});
const intl = useIntl(); const intl = useIntl();
@ -61,7 +63,8 @@ const ShippingZonesListHeader: React.FC<ShippingZonesListHeaderProps> = ({
<AccordionSummary expandIcon={<IconChevronDown />} classes={classes}> <AccordionSummary expandIcon={<IconChevronDown />} classes={classes}>
<Typography variant="subtitle2" color="textSecondary"> <Typography variant="subtitle2" color="textSecondary">
{intl.formatMessage(messages.title, { {intl.formatMessage(messages.title, {
zonesCount: shippingZones.length zonesCount: shippingZones.length,
totalCount
})} })}
</Typography> </Typography>
</AccordionSummary> </AccordionSummary>

3
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx
View file

@ -43,7 +43,8 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
fetchMoreShippingZones: { fetchMoreShippingZones: {
loading: false, loading: false,
hasMore: false, hasMore: false,
onFetchMore: () => undefined onFetchMore: () => undefined,
totalCount: 0
} }
}; };

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

@ -23138,7 +23138,7 @@ exports[`Storyshots Shipping zones card with no options selected 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -23160,7 +23160,7 @@ exports[`Storyshots Shipping zones card with no options selected 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
0 Shipping Zones 0 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -23210,32 +23210,9 @@ exports[`Storyshots Shipping zones card with no options selected 1`] = `
class="MuiDivider-root-id" class="MuiDivider-root-id"
/> />
<div <div
class="CardAddItemsFooter-container-id" class="MuiTypography-root-id ShippingZonesCard-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
> >
<a All available shipping zones have been selected
class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
data-test-id="add-shipping-zone-link"
>
Add Shipping Zones
</a>
<button
class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
color="primary"
data-test-id="add-shipping-zone-button"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/>
</svg>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -23272,7 +23249,7 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -23294,7 +23271,7 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -46157,7 +46134,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -46179,7 +46156,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -46655,7 +46632,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -46677,7 +46654,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -47149,7 +47126,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -47171,7 +47148,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -47643,7 +47620,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -47665,7 +47642,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -48143,7 +48120,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -48165,7 +48142,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div
@ -48588,7 +48565,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id MuiTypography-body1-id"
> >
Select Shipping Zones that will be supplied via this channel. You can assign Shipping Zones to multiple channels. Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
</div> </div>
</div> </div>
<div <div
@ -48610,7 +48587,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
<div <div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id" class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
> >
2 Shipping Zones 2 / 0 shipping zones
</div> </div>
</div> </div>
<div <div