Update simple product availability card (#2144)

* Update simple product availability card

* Update channel availability messages

locale/defaultMessages.json

@@ -1799,6 +1799,10 @@
   "ClFzoD": {
     "string": "Selected values will be used to create variants for the configurable product."
   },
+  "ClKKID": {
+    "context": "channel publication status",
+    "string": "Not published"
+  },
   "Co2U4u": {
     "string": "No plugins found"
   },
@@ -1870,10 +1874,6 @@
   "DILs4b": {
     "string": "Unsupported media provider or incorrect URL"
   },
-  "DIrxt7": {
-    "context": "channel publication date",
-    "string": "Visible since {date}"
-  },
   "DJFPzq": {
     "context": "button",
     "string": "Confirm"
@@ -2892,10 +2892,6 @@
   "KRqgfo": {
     "string": "User is out of your permissions scope"
   },
-  "KSp+8B": {
-    "context": "product available for purchase date",
-    "string": "will become available on {date}"
-  },
   "KXkdMH": {
     "context": "order discount removed title",
     "string": "Order discount was removed by"
@@ -5125,10 +5121,6 @@
     "context": "voucher",
     "string": "Applies to"
   },
-  "beuxAP": {
-    "context": "channel publication status",
-    "string": "Hidden"
-  },
   "bgO+7G": {
     "context": "order return amount button",
     "string": "Return & Replace products"
@@ -5710,10 +5702,6 @@
     "context": "voucher",
     "string": "Times used"
   },
-  "hAcUEl": {
-    "context": "product publication date label",
-    "string": "will become published on {date}"
-  },
   "hHOI7D": {
     "context": "product type name",
     "string": "Type Name"
@@ -5746,6 +5734,10 @@
     "context": "delete webhook",
     "string": "Are you sure you want to delete this webhook?"
   },
+  "hTLCC2": {
+    "context": "channel publication date",
+    "string": "Will become published on {date}"
+  },
   "hWO1SD": {
     "context": "order history message",
     "string": "Draft order was created"
@@ -6108,6 +6100,10 @@
     "context": "product updated at",
     "string": "Last updated"
   },
+  "kYYbrv": {
+    "context": "channel publication date",
+    "string": "Published since {date}"
+  },
   "kZfIl/": {
     "string": "These are general information about this Content Type."
   },
@@ -6302,10 +6298,6 @@
     "context": "order draft creation date",
     "string": "Date"
   },
-  "mDgOmP": {
-    "context": "channel publication status",
-    "string": "Visible"
-  },
   "mE+fru": {
     "context": "tag filter label",
     "string": "Tags"
@@ -6489,10 +6481,6 @@
     "context": "attribute internal name",
     "string": "Slug"
   },
-  "nfbabo": {
-    "context": "channel publication date",
-    "string": "Will become available on {date}"
-  },
   "njBulj": {
     "context": "check to require attribute to have value",
     "string": "Value Required"
@@ -7861,6 +7849,10 @@
     "context": "button refreshing page",
     "string": "Refresh page"
   },
+  "ys0jH2": {
+    "context": "channel publication status",
+    "string": "Published"
+  },
   "yuiyES": {
     "string": "General Settings"
   },
@@ -7972,6 +7964,10 @@
     "context": "header",
     "string": "Translation Sale \"{saleName}\" - {languageCode}"
   },
+  "znbVYT": {
+    "context": "product available for purchase date",
+    "string": "Will become available on {date}"
+  },
   "zqarUF": {
     "context": "modal information under title",
     "string": "Select an address you want to use from the list below"

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelWithVariantAvailabilityItemWrapper.tsx

@@ -98,9 +98,9 @@ const ChannelWithVariantsAvailabilityItemWrapper: React.FC<ChannelAvailabilityIt
   messages: commonChannelMessages,
   children,
 }) => {
-  const expanderClasses = useExpanderStyles({});
+  const expanderClasses = useExpanderStyles();
-  const summaryClasses = useSummaryStyles({});
+  const summaryClasses = useSummaryStyles();
-  const classes = useStyles({});
+  const classes = useStyles();
   const intl = useIntl();
 
   const { name } = channels.find(getById(channelId));

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx

@@ -2,6 +2,7 @@ import { Accordion, AccordionSummary, Typography } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
 import IconChevronDown from "@saleor/icons/ChevronDown";
 import { makeStyles } from "@saleor/macaw-ui";
+import Label from "@saleor/orders/components/OrderHistory/Label";
 import React from "react";
 
 import { Messages } from "../types";
@@ -55,6 +56,16 @@ const useSummaryStyles = makeStyles(
   { name: "ChannelContentWrapperExpanderSummary" },
 );
 
+const useStyles = makeStyles(
+  () => ({
+    container: {
+      display: "flex",
+      flexDirection: "column",
+    },
+  }),
+  { name: "ChannelWithVariantAvailabilityItemWrapper" },
+);
+
 export interface ChannelContentWrapperProps {
   data: ChannelData;
   children: React.ReactNode;
@@ -66,8 +77,9 @@ const ChannelContentWrapper: React.FC<ChannelContentWrapperProps> = ({
   messages,
   children,
 }) => {
-  const expanderClasses = useExpanderStyles({});
+  const expanderClasses = useExpanderStyles();
-  const summaryClasses = useSummaryStyles({});
+  const summaryClasses = useSummaryStyles();
+  const classes = useStyles();
 
   const { name } = data;
 
@@ -80,8 +92,10 @@ const ChannelContentWrapper: React.FC<ChannelContentWrapperProps> = ({
         expandIcon={<IconChevronDown />}
         classes={summaryClasses}
       >
-        <Typography>{name}</Typography>
+        <div className={classes.container}>
-        <Typography variant="caption">{messages.availableDateText}</Typography>
+          <Typography>{name}</Typography>
+          <Label text={messages.availableDateText} />
+        </div>
       </AccordionSummary>
       {children}
     </Accordion>

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.tsx

@@ -70,7 +70,11 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityCardProps> = pro
               errors?.filter(error => error.channels.includes(data.id)) || [];
 
             return (
-              <ChannelAvailabilityItemWrapper messages={messages} data={data}>
+              <ChannelAvailabilityItemWrapper
+                key={data.id}
+                messages={channelsMessages[data.id]}
+                data={data}
+              >
                 <ChannelAvailabilityItemContent
                   data={data}
                   onChange={onChange}

src/components/ChannelsAvailabilityCard/messages.ts

@@ -0,0 +1,44 @@
+import { defineMessages } from "react-intl";
+
+export const publicationMessages = defineMessages({
+  published: {
+    id: "ys0jH2",
+    defaultMessage: "Published",
+    description: "channel publication status",
+  },
+  notPublished: {
+    id: "ClKKID",
+    defaultMessage: "Not published",
+    description: "channel publication status",
+  },
+  willBecomePublishedOn: {
+    id: "hTLCC2",
+    defaultMessage: "Will become published on {date}",
+    description: "channel publication date",
+  },
+  willBecomeAvailableOn: {
+    id: "znbVYT",
+    defaultMessage: "Will become available on {date}",
+    description: "product available for purchase date",
+  },
+  availableForPurchase: {
+    id: "P/oGtb",
+    defaultMessage: "Available for purchase",
+    description: "product availability",
+  },
+  unavailableForPurchase: {
+    id: "Y9lv8z",
+    defaultMessage: "Unavailable for purchase",
+    description: "product unavailability",
+  },
+  publishedSince: {
+    id: "kYYbrv",
+    defaultMessage: "Published since {date}",
+    description: "channel publication date",
+  },
+  setAvailabilityDate: {
+    id: "YFQBs1",
+    defaultMessage: "Set availability date",
+    description: "product availability date label",
+  },
+});

src/components/ChannelsAvailabilityCard/utils.ts

@@ -2,6 +2,7 @@ import { ChannelData } from "@saleor/channels/utils";
 import { LocalizeDate } from "@saleor/hooks/useDateLocalize";
 import { IntlShape } from "react-intl";
 
+import { publicationMessages } from "./messages";
 import { Messages } from "./types";
 
 export const getChannelsAvailabilityMessages = ({
@@ -22,73 +23,37 @@ export const getChannelsAvailabilityMessages = ({
         ...messages,
         availableDateText:
           currVal.publicationDate && !currVal.isPublished
-            ? intl.formatMessage(
+            ? intl.formatMessage(publicationMessages.willBecomePublishedOn, {
-                {
+                date: localizeDate(currVal.publicationDate),
-                  id: "nfbabo",
-                  defaultMessage: "Will become available on {date}",
-                  description: "channel publication date",
-                },
-                {
-                  date: localizeDate(currVal.publicationDate),
-                },
-              )
-            : currVal.publicationDate
-            ? intl.formatMessage(
-                {
-                  id: "DIrxt7",
-                  defaultMessage: "Visible since {date}",
-                  description: "channel publication date",
-                },
-                {
-                  date: localizeDate(currVal.publicationDate),
-                },
-              )
-            : currVal.isPublished
-            ? intl.formatMessage({
-                id: "mDgOmP",
-                defaultMessage: "Visible",
-                description: "channel publication status",
               })
-            : intl.formatMessage({
+            : currVal.publicationDate
-                id: "beuxAP",
+            ? intl.formatMessage(publicationMessages.publishedSince, {
-                defaultMessage: "Hidden",
+                date: localizeDate(currVal.publicationDate),
-                description: "channel publication status",
+              })
-              }),
+            : currVal.isPublished
-        availableLabel: intl.formatMessage({
+            ? intl.formatMessage(publicationMessages.published)
-          id: "P/oGtb",
+            : intl.formatMessage(publicationMessages.notPublished),
-          defaultMessage: "Available for purchase",
+        availableLabel: intl.formatMessage(
-          description: "product availability",
+          publicationMessages.availableForPurchase,
-        }),
+        ),
         availableSecondLabel: intl.formatMessage(
-          {
+          publicationMessages.willBecomeAvailableOn,
-            id: "KSp+8B",
-            defaultMessage: "will become available on {date}",
-            description: "product available for purchase date",
-          },
           {
             date: localizeDate(currVal.availableForPurchase),
           },
         ),
         hiddenSecondLabel: intl.formatMessage(
-          {
+          publicationMessages.willBecomePublishedOn,
-            id: "hAcUEl",
-            defaultMessage: "will become published on {date}",
-            description: "product publication date label",
-          },
           {
             date: localizeDate(currVal.publicationDate),
           },
         ),
-        setAvailabilityDateLabel: intl.formatMessage({
+        setAvailabilityDateLabel: intl.formatMessage(
-          id: "YFQBs1",
+          publicationMessages.setAvailabilityDate,
-          defaultMessage: "Set availability date",
+        ),
-          description: "product availability date label",
+        unavailableLabel: intl.formatMessage(
-        }),
+          publicationMessages.unavailableForPurchase,
-        unavailableLabel: intl.formatMessage({
+        ),
-          id: "Y9lv8z",
-          defaultMessage: "Unavailable for purchase",
-          description: "product unavailability",
-        }),
       },
     }),
     {} as Messages,

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -2749,7 +2749,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
                   class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                   style="font-size:12px"
                 >
-                  Visible since Jul 30, 2020
+                  Published since Jul 30, 2020
                 </div>
               </div>
             </div>
@@ -3097,7 +3097,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
                   class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                   style="font-size:12px"
                 >
-                  Visible since Jul 30, 2020
+                  Published since Jul 30, 2020
                 </div>
               </div>
             </div>
@@ -4866,14 +4866,19 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
             class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
           >
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
+              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
             >
-              Channel1
+              <div
-            </div>
+                class="MuiTypography-root-id MuiTypography-body1-id"
-            <div
+              >
-              class="MuiTypography-root-id MuiTypography-caption-id"
+                Channel1
-            >
+              </div>
-              available from 07/30/2020
+              <div
+                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                style="font-size:12px"
+              >
+                Published since Jul 14, 2020
+              </div>
             </div>
           </div>
           <div
@@ -5215,14 +5220,19 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
             class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
           >
             <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
+              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
             >
-              Channel2
+              <div
-            </div>
+                class="MuiTypography-root-id MuiTypography-body1-id"
-            <div
+              >
-              class="MuiTypography-root-id MuiTypography-caption-id"
+                Channel2
-            >
+              </div>
-              available from 07/30/2020
+              <div
+                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                style="font-size:12px"
+              >
+                Will become published on Jul 30, 2020
+              </div>
             </div>
           </div>
           <div
@@ -5367,7 +5377,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
                           <span
                             class="ChannelsAvailabilityCard-secondLabel-id"
                           >
-                            will become published on Jul 30, 2020
+                            Will become published on Jul 30, 2020
                           </span>
                         </span>
                       </label>
@@ -54557,13 +54567,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
-                        Channel
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Channel
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
                       </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      />
                     </div>
                     <div
                       aria-disabled="false"
@@ -56085,13 +56102,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
-                        Channel
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Channel
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
                       </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      />
                     </div>
                     <div
                       aria-disabled="false"
@@ -57000,13 +57024,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
-                        Channel
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Channel
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
                       </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      />
                     </div>
                     <div
                       aria-disabled="false"
@@ -58001,13 +58032,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
-                        Channel
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Channel
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
                       </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      />
                     </div>
                     <div
                       aria-disabled="false"
@@ -60152,13 +60190,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -60362,13 +60407,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -60572,13 +60624,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -60782,13 +60841,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -60992,13 +61058,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -61202,13 +61275,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -61412,13 +61492,20 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -62062,13 +62149,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -62272,13 +62366,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -62482,13 +62583,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -62692,13 +62800,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -62902,13 +63017,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -63112,13 +63234,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -63322,13 +63451,20 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -63966,13 +64102,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -64176,13 +64319,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -64386,13 +64536,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -64596,13 +64753,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -64806,13 +64970,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -65016,13 +65187,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel test
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel test
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"
@@ -65226,13 +65404,20 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                   >
                     <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
-                      Channel USD
+                      <div
+                        class="MuiTypography-root-id MuiTypography-body1-id"
+                      >
+                        Channel USD
+                      </div>
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
                     </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    />
                   </div>
                   <div
                     aria-disabled="false"