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}
       >
+        <div className={classes.container}>
           <Typography>{name}</Typography>
-        <Typography variant="caption">{messages.availableDateText}</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, {
-                {
-                  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>
@@ -4864,6 +4864,9 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
         >
           <div
             class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+          >
+            <div
+              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -4871,9 +4874,11 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
                 Channel1
               </div>
               <div
-              class="MuiTypography-root-id MuiTypography-caption-id"
+                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                style="font-size:12px"
               >
-              available from 07/30/2020
+                Published since Jul 14, 2020
+              </div>
             </div>
           </div>
           <div
@@ -5213,6 +5218,9 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
         >
           <div
             class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+          >
+            <div
+              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
             >
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
@@ -5220,9 +5228,11 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
                 Channel2
               </div>
               <div
-              class="MuiTypography-root-id MuiTypography-caption-id"
+                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                style="font-size:12px"
               >
-              available from 07/30/2020
+                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>
@@ -54555,6 +54565,9 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                   >
                     <div
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                    >
+                      <div
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -54562,8 +54575,12 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           Channel
                         </div>
                         <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      />
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
+                      </div>
                     </div>
                     <div
                       aria-disabled="false"
@@ -56083,6 +56100,9 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                   >
                     <div
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                    >
+                      <div
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -56090,8 +56110,12 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           Channel
                         </div>
                         <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      />
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
+                      </div>
                     </div>
                     <div
                       aria-disabled="false"
@@ -56998,6 +57022,9 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                   >
                     <div
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                    >
+                      <div
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -57005,8 +57032,12 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                           Channel
                         </div>
                         <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      />
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
+                      </div>
                     </div>
                     <div
                       aria-disabled="false"
@@ -57999,6 +58030,9 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                   >
                     <div
                       class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                    >
+                      <div
+                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                       >
                         <div
                           class="MuiTypography-root-id MuiTypography-body1-id"
@@ -58006,8 +58040,12 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                           Channel
                         </div>
                         <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      />
+                          style="font-size:12px"
+                        >
+                          Not published
+                        </div>
+                      </div>
                     </div>
                     <div
                       aria-disabled="false"
@@ -60150,6 +60188,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60157,8 +60198,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -60360,6 +60405,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60367,8 +60415,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -60570,6 +60622,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60577,8 +60632,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -60780,6 +60839,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60787,8 +60849,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -60990,6 +61056,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -60997,8 +61066,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -61200,6 +61273,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -61207,8 +61283,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -61410,6 +61490,9 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -61417,8 +61500,12 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -62060,6 +62147,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62067,8 +62157,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -62270,6 +62364,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62277,8 +62374,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -62480,6 +62581,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62487,8 +62591,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -62690,6 +62798,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62697,8 +62808,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -62900,6 +63015,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -62907,8 +63025,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -63110,6 +63232,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -63117,8 +63242,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -63320,6 +63449,9 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -63327,8 +63459,12 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -63964,6 +64100,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -63971,8 +64110,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -64174,6 +64317,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -64181,8 +64327,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -64384,6 +64534,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -64391,8 +64544,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -64594,6 +64751,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -64601,8 +64761,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -64804,6 +64968,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -64811,8 +64978,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -65014,6 +65185,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -65021,8 +65195,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel test
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"
@@ -65224,6 +65402,9 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                 >
                   <div
                     class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
+                  >
+                    <div
+                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
                     >
                       <div
                         class="MuiTypography-root-id MuiTypography-body1-id"
@@ -65231,8 +65412,12 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                         Channel USD
                       </div>
                       <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                    />
+                        style="font-size:12px"
+                      >
+                        Not published
+                      </div>
+                    </div>
                   </div>
                   <div
                     aria-disabled="false"