diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
new file mode 100644
index 00000000000..26ce959b0d2
--- /dev/null
+++ b/src/components/Divider/Divider.tsx
@@ -0,0 +1,15 @@
+import { Box, BoxProps } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const Divider = (props: BoxProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
new file mode 100644
index 00000000000..dde73a62ccb
--- /dev/null
+++ b/src/components/Divider/index.ts
@@ -0,0 +1 @@
+export * from "./Divider";
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx
index a5145066632..4b7c519e4bc 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx
@@ -1,50 +1,34 @@
+import { Divider } from "@dashboard/components/Divider";
import React from "react";
-import { useIntl } from "react-intl";
-import { variantDetailsChannelsAvailabilityCardMessages as messages } from "./../messages";
import { Channel, ProductChannelListing } from "./../types";
-import { ChannelsList } from "./ChannelsList";
import { ChannelsListItem } from "./ChannelsListItem";
-import { NotAvailable } from "./NotAvailable";
import CardContainer from "./VariantDetailsChannelsAvailabilityCardContainer";
interface AvailabilityCardProps {
items: Channel[];
productChannelListings: ProductChannelListing;
- availabilityCount: Record;
}
export const AvailabilityCard: React.FC = ({
- availabilityCount,
items,
productChannelListings,
children,
}) => {
- const intl = useIntl();
- const channelListSummary = intl.formatMessage(
- messages.subtitle,
- availabilityCount,
- );
-
if (items.length === 0) {
- return (
-
-
-
- );
+ return {};
}
return (
-
- {items.map(channel => (
-
- ))}
-
+ {items.map(channel => (
+
+ ))}
+
);
};
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CardSkeleton.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CardSkeleton.tsx
index 5e53fd386b7..a894e498f57 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CardSkeleton.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CardSkeleton.tsx
@@ -1,13 +1,11 @@
+import { DashboardCard } from "@dashboard/components/Card";
import Skeleton from "@dashboard/components/Skeleton";
-import { CardContent } from "@material-ui/core";
import React from "react";
-import CardContainer from "./VariantDetailsChannelsAvailabilityCardContainer";
-
export const CardSkeleton: React.FC = () => (
-
-
+
+
-
-
+
+
);
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsListItem.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsListItem.tsx
index 96b45b10935..ecc9d31d3a3 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsListItem.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsListItem.tsx
@@ -1,7 +1,7 @@
// @ts-strict-ignore
import { DashboardCard } from "@dashboard/components/Card";
+import { Divider } from "@dashboard/components/Divider";
import useDateLocalize from "@dashboard/hooks/useDateLocalize";
-import { Divider } from "@material-ui/core";
import { Text } from "@saleor/macaw-ui/next";
import React from "react";
import { useIntl } from "react-intl";
@@ -43,14 +43,13 @@ export const ChannelsListItem: React.FC = ({
{name}
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
index def9c59b89b..a5d494976e0 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/CreateVariantTitle.tsx
@@ -1,5 +1,5 @@
import { DashboardCard } from "@dashboard/components/Card";
-import { Box, Button } from "@saleor/macaw-ui/next";
+import { Accordion, Box, Button, Text } from "@saleor/macaw-ui/next";
import React from "react";
import { useIntl } from "react-intl";
@@ -8,26 +8,55 @@ import { variantDetailsChannelsAvailabilityCardMessages as messages } from "./..
interface CreateVariantTitleProps {
onManageClick: () => void;
disabled: boolean;
+ availabilityCount: Record;
+ isEmpty: boolean;
}
export const CreateVariantTitle: React.FC = ({
onManageClick,
disabled,
+ availabilityCount,
+ isEmpty,
}) => {
const intl = useIntl();
+ const getCaptionText = () => {
+ if (isEmpty) {
+ return intl.formatMessage(messages.noItemsAvailable);
+ }
+
+ return intl.formatMessage(messages.subtitle, availabilityCount);
+ };
+
return (
-
- {intl.formatMessage(messages.title)}
-
+
+
+
+ {intl.formatMessage(messages.title)}
+
+ {getCaptionText()}
+
+
+
+
+
+
+
+
+
);
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/NotAvailable.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/NotAvailable.tsx
deleted file mode 100644
index 2750426b43f..00000000000
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/NotAvailable.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CardContent, Typography } from "@material-ui/core";
-import React from "react";
-import { useIntl } from "react-intl";
-
-import { variantDetailsChannelsAvailabilityCardMessages as messages } from "./../messages";
-
-export const NotAvailable: React.FC = () => {
- const intl = useIntl();
-
- return (
-
-
- {intl.formatMessage(messages.noItemsAvailable)}
-
-
- );
-};
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/VariantDetailsChannelsAvailabilityCardContainer.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/VariantDetailsChannelsAvailabilityCardContainer.tsx
index 005110e286d..01e53c49df5 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/VariantDetailsChannelsAvailabilityCardContainer.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/VariantDetailsChannelsAvailabilityCardContainer.tsx
@@ -1,4 +1,5 @@
import { DashboardCard } from "@dashboard/components/Card";
+import { Accordion } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage } from "react-intl";
@@ -14,12 +15,16 @@ const VariantDetailsChannelsAvailabilityCardContainer: React.FC<
> = ({ children, cardTitle }) => (
<>
- {cardTitle || (
-
-
-
- )}
- {children}
+
+
+ {cardTitle || (
+
+
+
+ )}
+ {children}
+
+
>
);
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/index.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/index.tsx
index d76fbb8c3ef..cfd0ef5adec 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/index.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/index.tsx
@@ -44,10 +44,14 @@ export const VariantDetailsChannelsAvailabilityCard: React.FC<
{({ channels }) => (
-
+
)}
@@ -60,10 +64,14 @@ export const ProductDetailsChannelsAvailabilityCard: React.FC<
{({ channels }) => (
-
+
)}
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 866e7386c7b..3195b902ca5 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import { DashboardCard } from "@dashboard/components/Card";
+import { Divider } from "@dashboard/components/Divider";
import Skeleton from "@dashboard/components/Skeleton";
import {
ProductVariantCreateDataQuery,
@@ -58,6 +59,7 @@ const ProductVariantNavigation: React.FC<
{intl.formatMessage(sectionNames.variants)}
+ {variants?.length > 0 && }
{renderCollection(variants, (variant, variantIndex) => {
const isDefault = variant && variant.id === defaultVariantId;
const isActive = variant && variant.id === current;
@@ -87,9 +89,6 @@ const ProductVariantNavigation: React.FC<
maxWidth="100%"
paddingX={5}
paddingY={3}
- borderBottomWidth={1}
- borderBottomStyle="solid"
- borderColor="neutralPlain"
display="flex"
alignItems="center"
gap={5}
@@ -127,6 +126,7 @@ const ProductVariantNavigation: React.FC<
)}
+
);