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",
"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": {
"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": {
"context": "title",
"string": "{zonesCount} Shipping Zones"
"string": "{zonesCount} / {totalCount} shipping zones"
},
"src_dot_channels_dot_pages_dot_ChannelsListPage_dot_2754800034": {
"context": "alert",

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

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

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

@ -3,6 +3,7 @@ import {
Card,
CardContent,
Divider,
makeStyles,
Typography
} from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle";
@ -22,11 +23,24 @@ const messages = defineMessages({
},
subtitle: {
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"
},
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;
const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
@ -37,6 +51,7 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
} = props;
const expanderClasses = useExpanderStyles({});
const classes = useStyles();
const intl = useIntl();
const hasMoreZonesToBeSelected = totalCount !== shippingZones.length;
@ -48,14 +63,25 @@ const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {
<Typography>{intl.formatMessage(messages.subtitle)}</Typography>
</CardContent>
<Accordion classes={expanderClasses}>
<ShippingZonesListHeader shippingZones={shippingZones} />
<ShippingZonesListHeader
shippingZones={shippingZones}
totalCount={totalCount}
/>
<Divider />
{shippingZones.map(zone => (
<ShippingZoneItem zone={zone} onDelete={removeShippingZone} />
))}
{hasMoreZonesToBeSelected ? (
<ShippingZonesCardListFooter {...props} />
) : null}
) : (
<Typography
color="textSecondary"
variant="subtitle1"
className={classes.infoMessage}
>
{intl.formatMessage(messages.allSelectedMessage)}
</Typography>
)}
</Accordion>
</Card>
);

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

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

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

@ -43,7 +43,8 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
fetchMoreShippingZones: {
loading: 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
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
@ -23160,7 +23160,7 @@ exports[`Storyshots Shipping zones card with no options selected 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
0 Shipping Zones
0 / 0 shipping zones
</div>
</div>
<div
@ -23210,32 +23210,9 @@ exports[`Storyshots Shipping zones card with no options selected 1`] = `
class="MuiDivider-root-id"
/>
<div
class="CardAddItemsFooter-container-id"
class="MuiTypography-root-id ShippingZonesCard-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
>
<a
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>
All available shipping zones have been selected
</div>
</div>
</div>
@ -23272,7 +23249,7 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
<div
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
@ -23294,7 +23271,7 @@ exports[`Storyshots Shipping zones card with options selected 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -46157,7 +46134,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
<div
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
@ -46179,7 +46156,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -46655,7 +46632,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
<div
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
@ -46677,7 +46654,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -47149,7 +47126,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
<div
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
@ -47171,7 +47148,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -47643,7 +47620,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
<div
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
@ -47665,7 +47642,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -48143,7 +48120,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
<div
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
@ -48165,7 +48142,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div
@ -48588,7 +48565,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
<div
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
@ -48610,7 +48587,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
<div
class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
>
2 Shipping Zones
2 / 0 shipping zones
</div>
</div>
<div