From 44a8a1c182126c643cf743f555dee4d06157dc45 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Tue, 1 Feb 2022 14:28:30 +0100
Subject: [PATCH] Shipping zones button fix (#1804)

* 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
---
 locale/defaultMessages.json                   |  8 ++-
 .../ShippingZonesCard.stories.tsx             |  3 +-
 .../ShippingZonesCard/ShippingZonesCard.tsx   | 32 +++++++++-
 .../ShippingZonesListHeader.tsx               |  9 ++-
 .../ChannelDetailsPage.stories.tsx            |  3 +-
 .../__snapshots__/Stories.test.ts.snap        | 59 ++++++-------------
 6 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index daba7e90e..2f6714e25 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -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",
diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCard.stories.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCard.stories.tsx
index b4c3f488e..ce9d99367 100644
--- a/src/channels/components/ShippingZonesCard/ShippingZonesCard.stories.tsx
+++ b/src/channels/components/ShippingZonesCard/ShippingZonesCard.stories.tsx
@@ -25,7 +25,8 @@ const baseProps = {
   fetchMoreShippingZones: {
     loading: false,
     hasMore: false,
-    onFetchMore: () => undefined
+    onFetchMore: () => undefined,
+    totalCount: 0
   },
   shippingZones: [],
   shippingZonesChoices: shippingZones as ChannelShippingZones
diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
index 8967468ba..836be74b5 100644
--- a/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
+++ b/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
@@ -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>
   );
diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
index a75fbfa89..59a811124 100644
--- a/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
+++ b/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
@@ -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>
diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx
index d401781b1..02db72c4d 100644
--- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx
+++ b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx
@@ -43,7 +43,8 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
   fetchMoreShippingZones: {
     loading: false,
     hasMore: false,
-    onFetchMore: () => undefined
+    onFetchMore: () => undefined,
+    totalCount: 0
   }
 };
 
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index c87a2aba5..ccc598531 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -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