Preview pills (#1880)

* Add pill component

* Add preview pill to gift card list

* Use outlined prop

* Add arrow to tooltip

* Add preview pill to gift card view headers

* Add preview pills to mark preview features

* Update macaw

* Update tests

* Update messages

* Add black color to pill preview tooltip

Co-authored-by: Wojciech <wojciech.mista@hotmail.com>

locale/defaultMessages.json

@@ -2411,6 +2411,14 @@
     "context": "button",
     "string": "Go back to dashboard"
   },
+  "src_dot_components_dot_PreviewPill_dot_label": {
+    "context": "indicator that feature is in preview mode",
+    "string": "Preview"
+  },
+  "src_dot_components_dot_PreviewPill_dot_tooltip": {
+    "context": "tooltip",
+    "string": "This feature is in a preview state and can be subject to changes at later point"
+  },
   "src_dot_components_dot_PriceField_dot_4072537038": {
     "string": "Price cannot be lower than 0"
   },

package-lock.json

@@ -5332,9 +5332,8 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.3.1-1",
+      "version": "github:saleor/macaw-ui#bdb34e1b7ec1e73cb8b188aef651e599b8b8b35f",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.1-1.tgz",
+      "from": "github:saleor/macaw-ui#SALEOR-5970-mini-pill-variant",
-      "integrity": "sha512-RBi5QY8J+Y2rX9fm3ERXV+KywgbCmoeWcU/Snt0pI2P3f6JuT7x4eCVJ+Z1atLy4gOmoqeI2kB0EqeIel59ZFQ==",
       "requires": {
         "clsx": "^1.1.1",
         "lodash": "^4.17.21",

package.json

@@ -28,7 +28,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.3.1-1",
+    "@saleor/macaw-ui": "github:saleor/macaw-ui#SALEOR-5970-mini-pill-variant",
     "@saleor/sdk": "^0.4.2",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/components/AppLayout/AppLayout.tsx

@@ -73,7 +73,7 @@ const useStyles = makeStyles(
         gridTemplateAreas: `"headerToolbar" 
         "headerAnchor"`
       },
-      marginBottom: theme.spacing(3)
+      marginBottom: theme.spacing(6)
     },
     headerAnchor: {
       gridArea: "headerAnchor"

src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx

@@ -48,7 +48,7 @@ export const ChannelsAvailabilityDropdown: React.FC<ChannelsAvailabilityDropdown
             channelCount: channels.length
           })}
           color={dropdownColor}
-          onClick={() => null} // required for dashed border
+          outlined
         />
       </div>
       <Popper anchorEl={anchor.current} open={isPopupOpen} placement={"left"}>

src/components/Container.tsx

@@ -13,7 +13,8 @@ const useStyles = makeStyles(
       [theme.breakpoints.up("sm")]: {
         padding: theme.spacing(0, 3)
       },
-      padding: theme.spacing(0, 1)
+      padding: theme.spacing(0, 1),
+      position: "relative"
     }
   }),
   {

src/components/NavigatorButton/NavigatorButton.tsx

@@ -1,69 +1,60 @@
 import { Grow, Paper, Popper } from "@material-ui/core";
 import { IconButtonProps } from "@material-ui/core/IconButton";
 import { LayoutButton, makeStyles, NavigatorIcon } from "@saleor/macaw-ui";
+import { triangle } from "@saleor/styles/mixins";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 const useStyles = makeStyles(
-  theme => {
+  theme => ({
-    const triangle = (color: string, width: number) => ({
+    keyTile: {
-      borderBottom: `${width}px solid ${color}`,
+      "&:first-child": {
-      borderLeft: `${width}px solid transparent`,
+        marginLeft: theme.spacing()
-      borderRight: `${width}px solid transparent`,
+      },
-      height: 0,
+      alignItems: "center",
-      width: 0
+      background: theme.palette.background.default,
-    });
+      borderRadius: 8,
+      display: "inline-flex",
+      height: 32,
+      justifyContent: "center",
+      marginLeft: theme.spacing(0.5),
+      padding: theme.spacing(),
+      width: 32
+    },
+    keyTileLabel: {
+      verticalAlign: "middle"
+    },
+    paper: {
+      "&:after": {
+        ...triangle(theme.palette.background.paper, 7),
+        content: "''",
+        left: 18,
+        position: "absolute",
+        top: -7
+      },
+      "&:before": {
+        ...triangle(theme.palette.divider, 8),
+        content: "''",
+        left: `calc(1px + ${theme.spacing(2)})`,
+        position: "absolute",
+        top: theme.spacing(-1)
+      },
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: 6,
+      marginTop: theme.spacing(2),
+      padding: theme.spacing(2),
+      position: "relative"
+    },
 
-    return {
+    root: {
-      keyTile: {
+      "&:hover path": {
-        "&:first-child": {
+        color: theme.palette.primary.main
-          marginLeft: theme.spacing()
-        },
-        alignItems: "center",
-        background: theme.palette.background.default,
-        borderRadius: 8,
-        display: "inline-flex",
-        height: 32,
-        justifyContent: "center",
-        marginLeft: theme.spacing(0.5),
-        padding: theme.spacing(),
-        width: 32
       },
-      keyTileLabel: {
+      marginRight: theme.spacing(2),
-        verticalAlign: "middle"
+      width: 40
-      },
+    }
-      paper: {
+  }),
-        "&:after": {
-          ...triangle(theme.palette.background.paper, 7),
-          content: "''",
-          left: 18,
-          position: "absolute",
-          top: -7
-        },
-        "&:before": {
-          ...triangle(theme.palette.divider, 8),
-          content: "''",
-          left: `calc(1px + ${theme.spacing(2)})`,
-          position: "absolute",
-          top: theme.spacing(-1)
-        },
-        border: `1px solid ${theme.palette.divider}`,
-        borderRadius: 6,
-        marginTop: theme.spacing(2),
-        padding: theme.spacing(2),
-        position: "relative"
-      },
-
-      root: {
-        "&:hover path": {
-          color: theme.palette.primary.main
-        },
-        marginRight: theme.spacing(2),
-        width: 40
-      }
-    };
-  },
   {
     name: "NavigatorButton"
   }

src/components/PageHeader/PageHeader.tsx

@@ -3,6 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 import ExtendedPageHeader from "../ExtendedPageHeader";
+import PreviewPill from "../PreviewPill";
 import Skeleton from "../Skeleton";
 
 const useStyles = makeStyles(
@@ -10,6 +11,10 @@ const useStyles = makeStyles(
     limit: {
       marginRight: theme.spacing(4)
     },
+    preview: {
+      position: "absolute",
+      top: theme.spacing(-4)
+    },
     root: {
       alignItems: "center",
       display: "flex",
@@ -47,6 +52,7 @@ interface PageHeaderProps {
   limitText?: string;
   title?: React.ReactNode;
   cardMenu?: React.ReactNode;
+  preview?: boolean;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
@@ -57,39 +63,43 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
     underline,
     limitText,
     title,
-    cardMenu
+    cardMenu,
+    preview
   } = props;
 
   const classes = useStyles(props);
 
   return (
-    <ExtendedPageHeader
+    <>
-      testId="page-header"
+      {preview && <PreviewPill className={classes.preview} />}
-      className={className}
+      <ExtendedPageHeader
-      inline={inline}
+        testId="page-header"
-      underline={underline}
+        className={className}
-      title={
+        inline={inline}
-        <>
+        underline={underline}
-          <Typography className={classes.title} variant="h1">
+        title={
-            {title !== undefined ? (
+          <>
-              title
+            <Typography className={classes.title} variant="h1">
-            ) : (
+              {title !== undefined ? (
-              <Skeleton style={{ width: "10em" }} />
+                title
-            )}
+              ) : (
-          </Typography>
+                <Skeleton style={{ width: "10em" }} />
-          {cardMenu}
+              )}
-        </>
+            </Typography>
-      }
+            {cardMenu}
-    >
+          </>
-      <div className={classes.root}>
+        }
-        {limitText && (
+      >
-          <Typography className={classes.limit} color="textSecondary">
+        <div className={classes.root}>
-            {limitText}
+          {limitText && (
-          </Typography>
+            <Typography className={classes.limit} color="textSecondary">
-        )}
+              {limitText}
-        {children}
+            </Typography>
-      </div>
+          )}
-    </ExtendedPageHeader>
+          {children}
+        </div>
+      </ExtendedPageHeader>
+    </>
   );
 };
 

src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx

@@ -1,39 +0,0 @@
-import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
-import { makeStyles } from "@saleor/macaw-ui";
-import React from "react";
-
-import ExtendedPageHeader from "../ExtendedPageHeader";
-export interface PageTitleWithStatusChipProps {
-  title: string;
-}
-
-const useStyles = makeStyles(
-  () => ({
-    container: {
-      alignItems: "center",
-      display: "flex"
-    }
-  }),
-  { name: "OrderDetailsPageTitleWithStatusChip" }
-);
-
-const PageTitleWithStatusChip: React.FC<PageTitleWithStatusChipProps> = ({
-  title,
-  children
-}) => {
-  const classes = useStyles({});
-
-  return (
-    <ExtendedPageHeader
-      title={title}
-      childrenWrapperClassName={classes.container}
-    >
-      <>
-        <HorizontalSpacer spacing={2} />
-        {children}
-      </>
-    </ExtendedPageHeader>
-  );
-};
-
-export default PageTitleWithStatusChip;

src/components/PageTitleWithStatusChip/index.tsx

@@ -1,2 +0,0 @@
-export * from "./PageTitleWithStatusChip";
-export { default } from "./PageTitleWithStatusChip";

src/components/PreviewPill/PreviewPill.stories.tsx

@@ -0,0 +1,9 @@
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import PreviewPill from "./PreviewPill";
+
+storiesOf("Component / Preview Pill", module)
+  .addDecorator(Decorator)
+  .add("default", () => <PreviewPill />);

src/components/PreviewPill/PreviewPill.tsx

@@ -0,0 +1,53 @@
+import { Grow, Paper, Popper, Typography } from "@material-ui/core";
+import { Pill } from "@saleor/macaw-ui";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import messages from "./messages";
+import useStyles from "./styles";
+
+export interface PreviewPillProps {
+  className?: string;
+}
+
+export const PreviewPill: React.FC<PreviewPillProps> = ({ className }) => {
+  const intl = useIntl();
+  const [active, setActive] = React.useState(false);
+  const anchor = React.useRef<HTMLDivElement>(null);
+  const classes = useStyles();
+
+  return (
+    <>
+      <Pill
+        className={className}
+        active={active}
+        color="warning"
+        size="small"
+        label={intl.formatMessage(messages.label)}
+        ref={anchor}
+        onMouseEnter={() => setActive(true)}
+        onMouseLeave={() => setActive(false)}
+      />
+      <Popper
+        className={classes.popper}
+        open={active}
+        anchorEl={anchor.current}
+        transition
+        placement="bottom-start"
+      >
+        {({ TransitionProps }) => (
+          <Grow {...TransitionProps}>
+            <Paper elevation={16} className={classes.tooltip}>
+              <Typography className={classes.tooltipText}>
+                {intl.formatMessage(messages.tooltip)}
+              </Typography>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+PreviewPill.displayName = "PreviewPill";
+export default PreviewPill;

src/components/PreviewPill/index.ts

@@ -0,0 +1,2 @@
+export * from "./PreviewPill";
+export { default } from "./PreviewPill";

src/components/PreviewPill/messages.ts

@@ -0,0 +1,15 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  label: {
+    defaultMessage: "Preview",
+    description: "indicator that feature is in preview mode"
+  },
+  tooltip: {
+    defaultMessage:
+      "This feature is in a preview state and can be subject to changes at later point",
+    description: "tooltip"
+  }
+});
+
+export default messages;

src/components/PreviewPill/styles.ts

@@ -0,0 +1,31 @@
+import { makeStyles } from "@saleor/macaw-ui";
+import { triangle } from "@saleor/styles/mixins";
+
+const useStyles = makeStyles(
+  theme => ({
+    popper: {
+      zIndex: 11
+    },
+    tooltip: {
+      "&:before": {
+        ...triangle(theme.palette.saleor.warning.mid, 8),
+        content: "''",
+        position: "absolute",
+        left: 17,
+        top: -8
+      },
+      background: theme.palette.saleor.warning.mid,
+      borderRadius: 8,
+      marginTop: theme.spacing(1.5),
+      padding: theme.spacing(2.5),
+      maxWidth: 400,
+      position: "relative"
+    },
+    tooltipText: {
+      color: theme.palette.common.black
+    }
+  }),
+  { name: "PreviewPill" }
+);
+
+export default useStyles;

src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx

@@ -68,7 +68,11 @@ const GiftCardSettingsPage: React.FC = () => {
       <Backlink onClick={navigateBack}>
         {intl.formatMessage(sectionNames.giftCards)}
       </Backlink>
-      <PageHeader title={intl.formatMessage(messages.title)} underline={true} />
+      <PageHeader
+        preview
+        title={intl.formatMessage(messages.title)}
+        underline={true}
+      />
       <Form initial={initialData} onSubmit={handleSubmit}>
         {({ data: formData, submit, hasChanged, change }) => (
           <Grid variant="inverted">

src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx

@@ -1,9 +1,9 @@
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import PageHeader from "@saleor/components/PageHeader";
-import PageTitleWithStatusChip from "@saleor/components/PageTitleWithStatusChip";
 import GiftCardStatusChip from "@saleor/giftCards/components/GiftCardStatusChip/GiftCardStatusChip";
 import { sectionNames } from "@saleor/intl";
 import { Backlink, Button } from "@saleor/macaw-ui";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -12,8 +12,10 @@ import useGiftCardDetails from "../providers/GiftCardDetailsProvider/hooks/useGi
 import useGiftCardUpdateDialogs from "../providers/GiftCardUpdateDialogsProvider/hooks/useGiftCardUpdateDialogs";
 import GiftCardEnableDisableSection from "./GiftCardEnableDisableSection";
 import { giftCardUpdatePageHeaderMessages as messages } from "./messages";
+import useStyles from "./styles";
 
 const GiftCardUpdatePageHeader: React.FC = () => {
+  const classes = useStyles();
   const intl = useIntl();
   const { giftCard } = useGiftCardDetails();
   const { navigateBack } = useGiftCardUpdateDialogs();
@@ -21,7 +23,7 @@ const GiftCardUpdatePageHeader: React.FC = () => {
   const { openResendCodeDialog } = useGiftCardUpdateDialogs();
 
   if (!giftCard) {
-    return null;
+    return <PageHeader preview title={getStringOrPlaceholder(undefined)} />;
   }
 
   const { last4CodeChars, isExpired } = giftCard;
@@ -36,11 +38,14 @@ const GiftCardUpdatePageHeader: React.FC = () => {
         {intl.formatMessage(sectionNames.giftCards)}
       </Backlink>
       <PageHeader
+        preview
         inline
         title={
-          <PageTitleWithStatusChip title={title}>
+          <div className={classes.title}>
+            {title}
+            <HorizontalSpacer spacing={2} />
             <GiftCardStatusChip giftCard={giftCard} />
-          </PageTitleWithStatusChip>
+          </div>
         }
       >
         <GiftCardEnableDisableSection />

src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles(
+  {
+    title: {
+      alignItems: "center",
+      display: "inline-flex"
+    }
+  },
+  { name: "GiftCardUpdatePageHeader" }
+);
+
+export default useStyles;

src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx

@@ -45,6 +45,7 @@ const GiftCardsListHeader: React.FC = () => {
   return (
     <>
       <PageHeader
+        preview
         title={intl.formatMessage(sectionNames.giftCards)}
         cardMenu={<CardMenu menuItems={menuItems} data-test-id="menu" />}
       >

src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles(
+  theme => ({
+    preview: {
+      position: "absolute",
+      top: theme.spacing(-4)
+    },
+    title: {
+      position: "relative"
+    }
+  }),
+  { name: "GiftCardListHeader" }
+);
+
+export default useStyles;

src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx

@@ -43,7 +43,7 @@ const PluginAvailabilityStatus: React.FC<PluginAvailabilityStatusProps> = ({
             })
       }
       color={isStatusActive ? "success" : "error"}
-      onClick={() => null} // required for dashed border
+      outlined
     />
   );
 };

src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx

@@ -6,6 +6,7 @@ import {
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
+import PreviewPill from "@saleor/components/PreviewPill";
 import RadioGroupField from "@saleor/components/RadioGroupField";
 import { commonMessages } from "@saleor/intl";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -25,6 +26,9 @@ const useStyles = makeStyles(
     option: {
       marginTop: theme.spacing(-0.25),
       marginBottom: theme.spacing()
+    },
+    preview: {
+      marginLeft: theme.spacing(1)
     }
   }),
   { name: "ProductTypeDetails" }
@@ -41,24 +45,24 @@ interface ProductTypeDetailsProps {
   onKindChange: (event: React.ChangeEvent<any>) => void;
 }
 
+const kindOptions = [
+  {
+    title: messages.optionNormalTitle,
+    type: ProductTypeKindEnum.NORMAL
+  },
+  {
+    title: messages.optionGiftCardTitle,
+    subtitle: messages.optionGiftCardDescription,
+    type: ProductTypeKindEnum.GIFT_CARD
+  }
+];
+
 const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
   const { data, disabled, errors, onChange, onKindChange } = props;
   const classes = useStyles(props);
 
   const intl = useIntl();
 
-  const kindOptions = [
-    {
-      title: messages.optionNormalTitle,
-      type: ProductTypeKindEnum.NORMAL
-    },
-    {
-      title: messages.optionGiftCardTitle,
-      subtitle: messages.optionGiftCardDescription,
-      type: ProductTypeKindEnum.GIFT_CARD
-    }
-  ];
-
   return (
     <Card className={classes.root}>
       <CardTitle
@@ -88,6 +92,9 @@ const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
               >
                 <Typography variant="body1">
                   <FormattedMessage {...option.title} />
+                  {option.type === ProductTypeKindEnum.GIFT_CARD && (
+                    <PreviewPill className={classes.preview} />
+                  )}
                 </Typography>
                 {option.subtitle && (
                   <Typography color="textSecondary" variant="caption">

src/products/components/ProductStocks/ProductStocks.tsx

@@ -24,6 +24,7 @@ import { DateTimeTimezoneField } from "@saleor/components/DateTimeTimezoneField"
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import Link from "@saleor/components/Link";
+import PreviewPill from "@saleor/components/PreviewPill";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { FormChange, FormErrors } from "@saleor/hooks/useForm";
@@ -172,6 +173,9 @@ const useStyles = makeStyles(
     },
     preorderLimitInfo: {
       marginTop: theme.spacing(3)
+    },
+    preview: {
+      marginLeft: theme.spacing(1)
     }
   }),
   {
@@ -247,10 +251,13 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
           }
           disabled={disabled}
           label={
-            <FormattedMessage
+            <>
-              defaultMessage="Variant currently in preorder"
+              <FormattedMessage
-              description="product inventory, checkbox"
+                defaultMessage="Variant currently in preorder"
-            />
+                description="product inventory, checkbox"
+              />
+              <PreviewPill className={classes.preview} />
+            </>
           }
         />
 

src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent, TextField } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
+import PreviewPill from "@saleor/components/PreviewPill";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { FormChange } from "@saleor/hooks/useForm";
 import { getFormErrors } from "@saleor/utils/errors";
@@ -7,6 +8,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { messages } from "./messages";
+import useStyles from "./styles";
 
 interface ProductVariantCheckoutSettingsProps {
   data: {
@@ -21,12 +23,20 @@ const ProductVariantCheckoutSettings: React.FC<ProductVariantCheckoutSettingsPro
   const { data, disabled, errors, onChange } = props;
 
   const intl = useIntl();
+  const classes = useStyles();
 
   const formErrors = getFormErrors(["quantityLimitPerCustomer"], errors);
 
   return (
     <Card>
-      <CardTitle title={intl.formatMessage(messages.checkoutLimits)} />
+      <CardTitle
+        title={
+          <>
+            {intl.formatMessage(messages.checkoutLimits)}
+            <PreviewPill className={classes.preview} />
+          </>
+        }
+      />
       <CardContent>
         <TextField
           disabled={disabled}

src/products/components/ProductVariantCheckoutSettings/styles.ts

@@ -0,0 +1,12 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles(
+  theme => ({
+    preview: {
+      marginLeft: theme.spacing(1)
+    }
+  }),
+  { name: "ProductVariantCheckoutSettings" }
+);
+
+export default useStyles;

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

@@ -3113,6 +3113,22 @@ exports[`Storyshots Channels / Channels with variants availability card default
 </div>
 `;
 
+exports[`Storyshots Component / Preview Pill default 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+  >
+    <span
+      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+    >
+      Preview
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Customers / Address editing dialog default 1`] = `
 <div
   style="padding:24px"
@@ -5212,15 +5228,15 @@ exports[`Storyshots Generics / ChannelsAvailabilityDropdown default 1`] = `
       aria-haspopup="true"
       role="button"
     >
-      <button
+      <div
-        class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+        class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
       >
         <span
           class="MuiChip-label-id Pill-label-id"
         >
           3 Channels
         </span>
-      </button>
+      </div>
     </div>
   </div>
 </div>
@@ -51542,15 +51558,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -51655,15 +51671,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -51768,15 +51784,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -51881,15 +51897,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -53018,15 +53034,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -53131,15 +53147,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -53244,15 +53260,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -53357,15 +53373,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               2 Channels
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -56035,15 +56051,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <button
+                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                     >
                       <span
                         class="MuiChip-label-id Pill-label-id"
                       >
                         1 Channel
                       </span>
-                    </button>
+                    </div>
                   </div>
                 </div>
               </td>
@@ -56111,15 +56127,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <button
+                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                     >
                       <span
                         class="MuiChip-label-id Pill-label-id"
                       >
                         1 Channel
                       </span>
-                    </button>
+                    </div>
                   </div>
                 </div>
               </td>
@@ -56187,15 +56203,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <button
+                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                     >
                       <span
                         class="MuiChip-label-id Pill-label-id"
                       >
                         1 Channel
                       </span>
-                    </button>
+                    </div>
                   </div>
                 </div>
               </td>
@@ -56263,15 +56279,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <button
+                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                     >
                       <span
                         class="MuiChip-label-id Pill-label-id"
                       >
                         1 Channel
                       </span>
-                    </button>
+                    </div>
                   </div>
                 </div>
               </td>
@@ -56339,15 +56355,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
                     aria-haspopup="true"
                     role="button"
                   >
-                    <button
+                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
+                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                     >
                       <span
                         class="MuiChip-label-id Pill-label-id"
                       >
                         1 Channel
                       </span>
-                    </button>
+                    </div>
                   </div>
                 </div>
               </td>
@@ -85329,15 +85345,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               1 Channel
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -85442,15 +85458,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               1 Channel
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -85555,15 +85571,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               1 Channel
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -85668,15 +85684,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                           aria-haspopup="true"
                           role="button"
                         >
-                          <button
+                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                           >
                             <span
                               class="MuiChip-label-id Pill-label-id"
                             >
                               1 Channel
                             </span>
-                          </button>
+                          </div>
                         </div>
                       </div>
                     </td>
@@ -162603,15 +162619,15 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
                 colspan="2"
               >
-                <button
+                <div
-                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                 >
                   <span
                     class="MuiChip-label-id Pill-label-id"
                   >
                     Active in 1
                   </span>
-                </button>
+                </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
@@ -162653,15 +162669,15 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id"
                 colspan="2"
               >
-                <button
+                <div
-                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
+                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                 >
                   <span
                     class="MuiChip-label-id Pill-label-id"
                   >
                     Active in 1
                   </span>
-                </button>
+                </div>
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
@@ -163488,6 +163504,15 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -164016,6 +164041,15 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -164550,6 +164584,15 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -165076,6 +165119,15 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -166196,6 +166248,15 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -167322,6 +167383,15 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -168030,6 +168100,15 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                           class="MuiTypography-root-id MuiTypography-body1-id"
                         >
                           Gift card product type
+                          <div
+                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                          >
+                            <span
+                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                            >
+                              Preview
+                            </span>
+                          </div>
                         </div>
                         <div
                           class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
@@ -180572,6 +180651,15 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -180820,6 +180908,15 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -181601,6 +181698,15 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -181849,6 +181955,15 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -182630,6 +182745,15 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -182878,6 +183002,15 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -183418,6 +183551,15 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -183671,6 +183813,15 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -184459,6 +184610,15 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -184712,6 +184872,15 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -192490,6 +192659,15 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -194090,6 +194268,15 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -195690,6 +195877,15 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -198676,6 +198872,15 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -201728,6 +201933,15 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -219492,6 +219706,15 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -219727,6 +219950,15 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -221344,6 +221576,15 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -221574,6 +221815,15 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -223191,6 +223441,15 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -223421,6 +223680,15 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
             </div>
@@ -224324,6 +224592,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                 >
                   Checkout limits
+                  <div
+                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </div>
             </div>
@@ -224548,6 +224825,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                 >
                   Variant currently in preorder
+                  <div
+                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                  >
+                    <span
+                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                    >
+                      Preview
+                    </span>
+                  </div>
                 </span>
               </label>
               <div
@@ -246467,6 +246753,15 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
                 class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
               >
                 Pickup
+                <div
+                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
               </div>
               <div
                 class="CardSpacer-spacer-id"
@@ -247261,6 +247556,15 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
                 class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
               >
                 Pickup
+                <div
+                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
               </div>
               <div
                 class="CardSpacer-spacer-id"
@@ -247990,6 +248294,15 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
                 class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
               >
                 Pickup
+                <div
+                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
               </div>
               <div
                 class="CardSpacer-spacer-id"

src/styles/mixins.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export const triangle = (color: string, width: number): CSSProperties => ({
+  borderBottom: `${width}px solid ${color}`,
+  borderLeft: `${width}px solid transparent`,
+  borderRight: `${width}px solid transparent`,
+  height: 0,
+  width: 0
+});

src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx

@@ -3,6 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import Link from "@saleor/components/Link";
+import PreviewPill from "@saleor/components/PreviewPill";
 import { RadioGroupField } from "@saleor/components/RadioGroupField";
 import Skeleton from "@saleor/components/Skeleton";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -30,6 +31,9 @@ const useStyles = makeStyles(
       "&:not(:last-of-type)": {
         marginBottom: theme.spacing()
       }
+    },
+    preview: {
+      marginLeft: theme.spacing(1)
     }
   }),
   {
@@ -181,6 +185,7 @@ const WarehouseSettings: React.FC<WarehouseSettingsProps> = ({
       <CardContent>
         <Typography color="textSecondary" variant="h6">
           <FormattedMessage {...messages.warehouseSettingsPickupTitle} />
+          <PreviewPill className={classes.preview} />
         </Typography>
         <CardSpacer />
         <RadioGroupField