djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Preview pills (#1880)

Browse source 
* 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>
This commit is contained in:
Dominik Żegleń 2022-02-21 12:38:27 +01:00 committed by GitHub
parent 8e8fcc775c
commit 1eab4ac8a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 695 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
locale/defaultMessages.json
View file

@ -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"
},

5
package-lock.json generated
View file

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

2
package.json
View file

@ -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",

2
src/components/AppLayout/AppLayout.tsx
View file

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

2
src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx
View file

@ -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"}>

3
src/components/Container.tsx
View file

@ -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"
}
}),
{

15
src/components/NavigatorButton/NavigatorButton.tsx
View file

@ -1,21 +1,13 @@
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 => {
const triangle = (color: string, width: number) => ({
borderBottom: `${width}px solid ${color}`,
borderLeft: `${width}px solid transparent`,
borderRight: `${width}px solid transparent`,
height: 0,
width: 0
});
return {
theme => ({
keyTile: {
"&:first-child": {
marginLeft: theme.spacing()
@ -62,8 +54,7 @@ const useStyles = makeStyles(
marginRight: theme.spacing(2),
width: 40
}
};
},
}),
{
name: "NavigatorButton"
}

12
src/components/PageHeader/PageHeader.tsx
View file

@ -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,12 +63,15 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
underline,
limitText,
title,
cardMenu
cardMenu,
preview
} = props;
const classes = useStyles(props);
return (
<>
{preview && <PreviewPill className={classes.preview} />}
<ExtendedPageHeader
testId="page-header"
className={className}
@ -90,6 +99,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
{children}
</div>
</ExtendedPageHeader>
</>
);
};

39
src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx
View file

@ -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;

2
src/components/PageTitleWithStatusChip/index.tsx
View file

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

9
src/components/PreviewPill/PreviewPill.stories.tsx Normal file
View file

@ -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 />);

53
src/components/PreviewPill/PreviewPill.tsx Normal file
View file

@ -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;

2
src/components/PreviewPill/index.ts Normal file
View file

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

15
src/components/PreviewPill/messages.ts Normal file
View file

@ -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;

31
src/components/PreviewPill/styles.ts Normal file
View file

@ -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;

6
src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
View file

@ -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">

13
src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
View file

@ -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 />

13
src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts Normal file
View file

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

1
src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
View file

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

16
src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts Normal file
View file

@ -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;

2
src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx
View file

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

23
src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx
View file

@ -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,13 +45,7 @@ interface ProductTypeDetailsProps {
onKindChange: (event: React.ChangeEvent<any>) => void;
}
const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
const { data, disabled, errors, onChange, onKindChange } = props;
const classes = useStyles(props);
const intl = useIntl();
const kindOptions = [
const kindOptions = [
{
title: messages.optionNormalTitle,
type: ProductTypeKindEnum.NORMAL
@ -57,7 +55,13 @@ const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
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();
return (
<Card className={classes.root}>
@ -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">

7
src/products/components/ProductStocks/ProductStocks.tsx
View file

@ -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"
description="product inventory, checkbox"
/>
<PreviewPill className={classes.preview} />
</>
}
/>

12
src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx
View file

@ -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}

12
src/products/components/ProductVariantCheckoutSettings/styles.ts Normal file
View file

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

433
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-error-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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
class="MuiChip-root-id Pill-root-id Pill-success-id Pill-clickable-id"
<div
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"

9
src/styles/mixins.ts Normal file
View file

@ -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
});

5
src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx
View file

@ -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