diff --git a/.changeset/shiny-moons-wave.md b/.changeset/shiny-moons-wave.md new file mode 100644 index 000000000..0308112b3 --- /dev/null +++ b/.changeset/shiny-moons-wave.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Migrate Home page to new macaw components diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index df35740ed..6330ef401 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -427,10 +427,6 @@ "context": "section header", "string": "Refunded Amount" }, - "0opVvi": { - "context": "number of ordered products", - "string": "{amount, plural,one {One ordered}other {{amount} Ordered}}" - }, "0qg33z": { "context": "table column header", "string": "Return" @@ -1053,9 +1049,6 @@ "context": "vat not included in order price", "string": "does not apply" }, - "5LRkEs": { - "string": "The new dashboard and the GraphQL API are preview-quality software." - }, "5ObBlW": { "string": "Dark Mode" }, @@ -1198,10 +1191,6 @@ "context": "button", "string": "Create page type" }, - "6L6Fy2": { - "context": "header", - "string": "Disclaimer" - }, "6QjMei": { "string": "Preorder end time needs to be set in the future" }, @@ -2500,9 +2489,6 @@ "context": "tooltip", "string": "Checkout reservation time threshold is enabled in settings." }, - "G7mu0y": { - "string": "The GraphQL API is beta quality. It is not fully optimized and some mutations or queries may be missing." - }, "GAmGog": { "context": "value input label", "string": "Discount value" @@ -5859,6 +5845,10 @@ "context": "current balance filter label", "string": "Current balance" }, + "e08xWz": { + "context": "header", + "string": "Top products" + }, "e0RKe+": { "context": "generate invoice button", "string": "Generate" @@ -7041,6 +7031,10 @@ "context": "order history message", "string": "Fulfilled {quantity} items" }, + "nII/qB": { + "context": "number of ordered products", + "string": "{amount, plural,one {One ordered}other {{amount} ordered}}" + }, "nIrjSR": { "context": "section header", "string": "Ongoing Installations" @@ -7616,10 +7610,6 @@ "context": "order status", "string": "Ready to capture" }, - "rr8fyf": { - "context": "header", - "string": "Top Products" - }, "rs815i": { "context": "text field label", "string": "Group name" diff --git a/src/components/Layouts/Detail/Root.tsx b/src/components/Layouts/Detail/Root.tsx index 109e81eac..d1f43762a 100644 --- a/src/components/Layouts/Detail/Root.tsx +++ b/src/components/Layouts/Detail/Root.tsx @@ -4,7 +4,7 @@ import { savebarHeight, } from "@dashboard/components/AppLayout/consts"; import { Box, Sprinkles } from "@saleor/macaw-ui/next"; -import React from "react"; +import React, { useMemo } from "react"; interface DetailPageLayoutProps { children: React.ReactNode; @@ -19,17 +19,39 @@ export const RootLayout: React.FC = ({ children, gridTemplateColumns = 12, withSavebar = true, -}) => ( - - {children} - -); +}) => { + const gridTemplateColumnsValue = + useMemo((): Sprinkles["gridTemplateColumns"] => { + if (gridTemplateColumns instanceof Object) { + return { + mobile: gridTemplateColumns.mobile ?? 1, + ...gridTemplateColumns, + }; + } + + return { + mobile: 1, + desktop: gridTemplateColumns, + }; + }, [gridTemplateColumns]); + + const heightValue = useMemo(() => { + return withSavebar ? contentWithSidebarHeight : contentWithoutSidebarHeight; + }, [withSavebar]); + + return ( + + {children} + + ); +}; diff --git a/src/home/components/HomeActivityCard/HomeActivityCard.tsx b/src/home/components/HomeActivityCard/HomeActivityCard.tsx index 9b695cf89..b278aa118 100644 --- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx +++ b/src/home/components/HomeActivityCard/HomeActivityCard.tsx @@ -1,104 +1,84 @@ -// @ts-strict-ignore -import CardTitle from "@dashboard/components/CardTitle"; +import { DashboardCard } from "@dashboard/components/Card"; import { DateTime } from "@dashboard/components/Date"; import Skeleton from "@dashboard/components/Skeleton"; -import { HomeQuery } from "@dashboard/graphql"; -import { RelayToFlat } from "@dashboard/types"; -import { - Card, - CardContent, - List, - ListItem, - ListItemText, - Typography, -} from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Activities } from "@dashboard/home/types"; +import { Box, List, Text, useTheme } from "@saleor/macaw-ui/next"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { renderCollection } from "../../../misc"; import { getActivityMessage } from "./activityMessages"; -const useStyles = makeStyles( - { - loadingProducts: { - paddingBottom: "10px", - paddingTop: "10px", - }, - noProducts: { - paddingBottom: "16px", - paddingTop: "16px", - }, - listItem: { - paddingLeft: 0, - }, - }, - { name: "HomeActivityCard" }, -); - interface HomeActivityCardProps { - activities: RelayToFlat; + activities: Activities; testId?: string; } -const HomeActivityCard: React.FC = props => { - const { activities, testId } = props; - const classes = useStyles(props); - +export const HomeActivityCard = ({ + activities, + testId, +}: HomeActivityCardProps) => { const intl = useIntl(); + const { themeValues } = useTheme(); return ( - - + + {intl.formatMessage({ id: "BXkF8Z", defaultMessage: "Activity", description: "header", })} - /> - - + + + {renderCollection( activities, (activity, activityId) => ( - + {activity ? ( - - {getActivityMessage(activity, intl)} - - } - secondary={} - /> + <> + + {getActivityMessage(activity, intl)} + + + + + ) : ( - - - - - + + + )} - + ), () => ( - - - - - } - /> - + + + + + ), )} - - + + ); }; -HomeActivityCard.displayName = "HomeActivityCard"; -export default HomeActivityCard; diff --git a/src/home/components/HomeActivityCard/index.ts b/src/home/components/HomeActivityCard/index.ts index bec23d02f..e5dc2928f 100644 --- a/src/home/components/HomeActivityCard/index.ts +++ b/src/home/components/HomeActivityCard/index.ts @@ -1,2 +1 @@ -export { default } from "./HomeActivityCard"; export * from "./HomeActivityCard"; diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx index 21c8a75b7..08cf29f52 100644 --- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx +++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx @@ -8,33 +8,32 @@ interface HomeAnalyticsCardProps { children?: React.ReactNode; } -const HomeAnalyticsCard: React.FC = props => { - const { children, title, testId } = props; - - return ( - - - - {title} - - - - - - - {children} +export const HomeAnalyticsCard = ({ + children, + title, + testId, +}: HomeAnalyticsCardProps) => ( + + + + {title} + + + - ); -}; -HomeAnalyticsCard.displayName = "HomeAnalyticsCard"; -export default HomeAnalyticsCard; + + {children} + + +); diff --git a/src/home/components/HomeAnalyticsCard/index.ts b/src/home/components/HomeAnalyticsCard/index.ts index 209b4b54e..367a2b98e 100644 --- a/src/home/components/HomeAnalyticsCard/index.ts +++ b/src/home/components/HomeAnalyticsCard/index.ts @@ -1,2 +1 @@ -export { default } from "./HomeAnalyticsCard"; export * from "./HomeAnalyticsCard"; diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx index efc38b816..8c6a6753b 100644 --- a/src/home/components/HomeHeader/HomeHeader.tsx +++ b/src/home/components/HomeHeader/HomeHeader.tsx @@ -1,71 +1,46 @@ import Skeleton from "@dashboard/components/Skeleton"; -import { Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Text } from "@saleor/macaw-ui/next"; import React from "react"; import { FormattedMessage } from "react-intl"; -const useStyles = makeStyles( - theme => ({ - headerContainer: { - alignItems: "flex-end", - display: "flex", - justifyContent: "space-between", - marginBottom: theme.spacing(6), - }, - pageHeader: { - fontWeight: 600 as 600, - }, - subtitle: { - color: theme.typography.caption.color, - }, - }), - { name: "HomeHeader" }, -); - -interface HomeOrdersCardProps { +interface HomeHeaderProps { userName: string; } -const HomeOrdersCard: React.FC = props => { - const { userName } = props; - - const classes = useStyles(props); - - return ( -
-
- - {userName ? ( - - ) : ( - - )} - - - {userName ? ( - - ) : ( - - )} - -
-
- ); -}; -HomeOrdersCard.displayName = "HomeOrdersCard"; -export default HomeOrdersCard; +export const HomeHeader: React.FC = ({ + userName, +}: HomeHeaderProps) => ( +
+ + {userName ? ( + + ) : ( + + )} + + + {userName ? ( + + ) : ( + + )} + +
+); diff --git a/src/home/components/HomeHeader/index.ts b/src/home/components/HomeHeader/index.ts index be3bc03ae..815a01a81 100644 --- a/src/home/components/HomeHeader/index.ts +++ b/src/home/components/HomeHeader/index.ts @@ -1,2 +1 @@ -export { default } from "./HomeHeader"; export * from "./HomeHeader"; diff --git a/src/home/components/HomeNotificationList/HomeNotificationList.tsx b/src/home/components/HomeNotificationList/HomeNotificationList.tsx new file mode 100644 index 000000000..ab9148a11 --- /dev/null +++ b/src/home/components/HomeNotificationList/HomeNotificationList.tsx @@ -0,0 +1,78 @@ +import RequirePermissions from "@dashboard/components/RequirePermissions"; +import { PermissionEnum } from "@dashboard/graphql"; +import { List } from "@saleor/macaw-ui/next"; +import React from "react"; +import { useIntl } from "react-intl"; + +import { HomeNotificationListItem } from "./HomeNotificationListItem"; +import { homeNotificationTableMessages as messages } from "./messages"; +import { + getOrdersToCaptureText, + getOrderToFulfillText, + getProductsOutOfStockText, +} from "./utils"; + +interface HomeNotificationTableProps { + ordersToCapture: number; + ordersToFulfill: number; + productsOutOfStock: number; + createNewChannelHref: string; + ordersToFulfillHref: string; + ordersToCaptureHref: string; + productsOutOfStockHref: string; + noChannel: boolean; +} + +export const HomeNotificationList = ({ + createNewChannelHref, + ordersToFulfillHref, + ordersToCaptureHref, + productsOutOfStockHref, + ordersToCapture, + ordersToFulfill, + productsOutOfStock, + noChannel, +}: HomeNotificationTableProps) => { + const intl = useIntl(); + + return ( + + {noChannel && ( + + + {intl.formatMessage(messages.createNewChannel)} + + + )} + + + + {getOrderToFulfillText(ordersToFulfill, intl)} + + + + {getOrdersToCaptureText(ordersToCapture, intl)} + + + + + + {getProductsOutOfStockText(productsOutOfStock, intl)} + + + + ); +}; diff --git a/src/home/components/HomeNotificationList/HomeNotificationListItem.tsx b/src/home/components/HomeNotificationList/HomeNotificationListItem.tsx new file mode 100644 index 000000000..cc51d0e39 --- /dev/null +++ b/src/home/components/HomeNotificationList/HomeNotificationListItem.tsx @@ -0,0 +1,43 @@ +import { + Box, + ChevronRightIcon, + List, + sprinkles, + Text, +} from "@saleor/macaw-ui/next"; +import React, { ReactNode } from "react"; +import { Link } from "react-router-dom"; + +interface HomeNotificationListItemProps { + dataTestId?: string; + linkUrl: string; + children: ReactNode; +} + +export const HomeNotificationListItem = ({ + dataTestId, + linkUrl, + children, +}: HomeNotificationListItemProps) => ( + + + + {children} + + + + +); diff --git a/src/home/components/HomeNotificationList/index.ts b/src/home/components/HomeNotificationList/index.ts new file mode 100644 index 000000000..54e2a856f --- /dev/null +++ b/src/home/components/HomeNotificationList/index.ts @@ -0,0 +1 @@ +export * from "./HomeNotificationList"; diff --git a/src/home/components/HomeNotificationTable/messages.ts b/src/home/components/HomeNotificationList/messages.ts similarity index 100% rename from src/home/components/HomeNotificationTable/messages.ts rename to src/home/components/HomeNotificationList/messages.ts diff --git a/src/home/components/HomeNotificationList/utils.tsx b/src/home/components/HomeNotificationList/utils.tsx new file mode 100644 index 000000000..803e44220 --- /dev/null +++ b/src/home/components/HomeNotificationList/utils.tsx @@ -0,0 +1,56 @@ +import Skeleton from "@dashboard/components/Skeleton"; +import React from "react"; +import { IntlShape } from "react-intl"; + +import { homeNotificationTableMessages as messages } from "./messages"; + +export const getOrderToFulfillText = ( + ordersToFulfill: number | undefined, + intl: IntlShape, +) => { + if (ordersToFulfill === undefined) { + return ; + } + + if (ordersToFulfill === 0) { + return intl.formatMessage(messages.noOrders); + } + + return intl.formatMessage(messages.orderReady, { + amount: {ordersToFulfill}, + }); +}; + +export const getOrdersToCaptureText = ( + ordersToCapture: number | undefined, + intl: IntlShape, +) => { + if (ordersToCapture === undefined) { + return ; + } + + if (ordersToCapture === 0) { + return intl.formatMessage(messages.noPaymentWaiting); + } + + return intl.formatMessage(messages.paymentCapture, { + amount: {ordersToCapture}, + }); +}; + +export const getProductsOutOfStockText = ( + productsOutOfStock: number | undefined, + intl: IntlShape, +) => { + if (productsOutOfStock === undefined) { + return ; + } + + if (productsOutOfStock === 0) { + return intl.formatMessage(messages.noProductsOut); + } + + return intl.formatMessage(messages.productOut, { + amount: {productsOutOfStock}, + }); +}; diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx deleted file mode 100644 index 14ab07c61..000000000 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import RequirePermissions from "@dashboard/components/RequirePermissions"; -import ResponsiveTable from "@dashboard/components/ResponsiveTable"; -import Skeleton from "@dashboard/components/Skeleton"; -import TableRowLink from "@dashboard/components/TableRowLink"; -import { PermissionEnum } from "@dashboard/graphql"; -import { - Card, - CardContent, - TableBody, - TableCell, - Typography, -} from "@material-ui/core"; -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; -import { makeStyles } from "@saleor/macaw-ui"; -import { vars } from "@saleor/macaw-ui/next"; -import React from "react"; -import { useIntl } from "react-intl"; - -import { homeNotificationTableMessages as messages } from "./messages"; - -const useStyles = makeStyles( - () => ({ - arrowIcon: { - textAlign: "right", - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - }, - tableCard: { - overflow: "hidden", - borderRadius: 0, - }, - tableRow: { - cursor: "pointer", - /* Table to be replaced with Box */ - "& .MuiTableCell-root": { - paddingLeft: `${vars.spacing[5]} !important`, - paddingRight: `${vars.spacing[5]} !important`, - }, - }, - cardContent: { - padding: 0, - }, - }), - { name: "HomeNotificationTable" }, -); - -interface HomeNotificationTableProps { - ordersToCapture: number; - ordersToFulfill: number; - productsOutOfStock: number; - createNewChannelHref: string; - ordersToFulfillHref: string; - ordersToCaptureHref: string; - productsOutOfStockHref: string; - noChannel: boolean; -} - -const HomeNotificationTable: React.FC = props => { - const { - createNewChannelHref, - ordersToFulfillHref, - ordersToCaptureHref, - productsOutOfStockHref, - ordersToCapture, - ordersToFulfill, - productsOutOfStock, - noChannel, - } = props; - - const classes = useStyles(props); - - const intl = useIntl(); - - return ( - - - - - {noChannel && ( - - - - - {intl.formatMessage(messages.createNewChannel)} - - - - - - - - )} - - - - {ordersToFulfill === undefined ? ( - - ) : ordersToFulfill === 0 ? ( - - {intl.formatMessage(messages.noOrders)} - - ) : ( - - {intl.formatMessage(messages.orderReady, { - amount: {ordersToFulfill}, - })} - - )} - - - - - - - - {ordersToCapture === undefined ? ( - - ) : ordersToCapture === 0 ? ( - - {intl.formatMessage(messages.noPaymentWaiting)} - - ) : ( - - {intl.formatMessage(messages.paymentCapture, { - amount: {ordersToCapture}, - })} - - )} - - - - - - - - - - {productsOutOfStock === undefined ? ( - - ) : productsOutOfStock === 0 ? ( - - {intl.formatMessage(messages.noProductsOut)} - - ) : ( - - {intl.formatMessage(messages.productOut, { - amount: {productsOutOfStock}, - })} - - )} - - - - - - - - - - - ); -}; -HomeNotificationTable.displayName = "HomeNotificationTable"; -export default HomeNotificationTable; diff --git a/src/home/components/HomeNotificationTable/index.ts b/src/home/components/HomeNotificationTable/index.ts deleted file mode 100644 index 5f13ce2da..000000000 --- a/src/home/components/HomeNotificationTable/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./HomeNotificationTable"; -export * from "./HomeNotificationTable"; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 582615d60..f07f678ff 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -1,4 +1,3 @@ -// @ts-strict-ignore import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import CardSpacer from "@dashboard/components/CardSpacer"; import { DetailPageLayout } from "@dashboard/components/Layouts"; @@ -6,26 +5,26 @@ import Money from "@dashboard/components/Money"; import RequirePermissions from "@dashboard/components/RequirePermissions"; import Skeleton from "@dashboard/components/Skeleton"; import { HomeQuery, PermissionEnum } from "@dashboard/graphql"; -import { RelayToFlat } from "@dashboard/types"; +import { Activities, ProductTopToday } from "@dashboard/home/types"; import { Box } from "@saleor/macaw-ui/next"; import React from "react"; import { useIntl } from "react-intl"; -import HomeActivityCard from "../HomeActivityCard"; -import HomeAnalyticsCard from "../HomeAnalyticsCard"; -import HomeHeader from "../HomeHeader"; -import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable"; -import HomeProductListCard from "../HomeProductListCard"; +import { HomeActivityCard } from "../HomeActivityCard"; +import { HomeAnalyticsCard } from "../HomeAnalyticsCard"; +import { HomeHeader } from "../HomeHeader"; +import { HomeNotificationList } from "../HomeNotificationList"; +import { HomeProductList } from "../HomeProductList"; import { homePageMessages } from "./messages"; export interface HomePageProps { - activities: RelayToFlat; + activities: Activities; orders: number | null; ordersToCapture: number | null; ordersToFulfill: number | null; productsOutOfStock: number; - sales: HomeQuery["salesToday"]["gross"]; - topProducts: RelayToFlat | null; + sales: NonNullable["gross"]; + topProducts: ProductTopToday | null; userName: string; createNewChannelHref: string; ordersToFulfillHref: string; @@ -93,13 +92,13 @@ const HomePage: React.FC = props => { - @@ -111,7 +110,7 @@ const HomePage: React.FC = props => { PermissionEnum.MANAGE_PRODUCTS, ]} > - diff --git a/src/home/components/HomeProductList/HomeProductList.tsx b/src/home/components/HomeProductList/HomeProductList.tsx new file mode 100644 index 000000000..daaed978f --- /dev/null +++ b/src/home/components/HomeProductList/HomeProductList.tsx @@ -0,0 +1,118 @@ +import Money from "@dashboard/components/Money"; +import Skeleton from "@dashboard/components/Skeleton"; +import { ProductTopToday } from "@dashboard/home/types"; +import { productVariantEditUrl } from "@dashboard/products/urls"; +import { Box, Text } from "@saleor/macaw-ui/next"; +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; + +import { renderCollection } from "../../../misc"; +import { HomeProductListItem } from "./HomeProductListItem"; + +interface HomeProductListProps { + testId?: string; + topProducts: ProductTopToday; +} + +export const HomeProductList = ({ + topProducts, + testId, +}: HomeProductListProps) => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage({ + id: "e08xWz", + defaultMessage: "Top products", + description: "header", + })} + + + {renderCollection( + topProducts, + variant => ( + + {variant ? ( + <> + + + + + {variant.product.name} + + + {variant.attributes + .map(attribute => attribute.values[0].name) + .join(" / ")} + + + + + + + + + + {variant.revenue ? ( + + ) : ( + "-" + )} + + + ) : ( + + )} + + ), + () => ( + + + + + + ), + )} + + + ); +}; + +HomeProductList.displayName = "HomeProductList"; +export default HomeProductList; diff --git a/src/home/components/HomeProductList/HomeProductListItem.tsx b/src/home/components/HomeProductList/HomeProductListItem.tsx new file mode 100644 index 000000000..a15e612e4 --- /dev/null +++ b/src/home/components/HomeProductList/HomeProductListItem.tsx @@ -0,0 +1,33 @@ +import { Box, List, sprinkles } from "@saleor/macaw-ui/next"; +import React, { ReactNode } from "react"; +import { Link } from "react-router-dom"; + +interface HomeNotificationListItemProps { + dataTestId?: string; + linkUrl: string; + children: ReactNode; +} + +export const HomeProductListItem = ({ + dataTestId, + linkUrl, + children, +}: HomeNotificationListItemProps) => ( + + + + {children} + + + +); diff --git a/src/home/components/HomeProductList/index.ts b/src/home/components/HomeProductList/index.ts new file mode 100644 index 000000000..aad721f51 --- /dev/null +++ b/src/home/components/HomeProductList/index.ts @@ -0,0 +1 @@ +export * from "./HomeProductList"; diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx deleted file mode 100644 index d25fc0527..000000000 --- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx +++ /dev/null @@ -1,175 +0,0 @@ -// @ts-strict-ignore -import CardTitle from "@dashboard/components/CardTitle"; -import Money from "@dashboard/components/Money"; -import ResponsiveTable from "@dashboard/components/ResponsiveTable"; -import Skeleton from "@dashboard/components/Skeleton"; -import TableCellAvatar from "@dashboard/components/TableCellAvatar"; -import TableRowLink from "@dashboard/components/TableRowLink"; -import { HomeQuery } from "@dashboard/graphql"; -import { productVariantEditUrl } from "@dashboard/products/urls"; -import { RelayToFlat } from "@dashboard/types"; -import { - Card, - CardContent, - TableBody, - TableCell, - Typography, -} from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; -import { vars } from "@saleor/macaw-ui/next"; -import clsx from "clsx"; -import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; - -import { maybe, renderCollection } from "../../../misc"; - -const useStyles = makeStyles( - theme => ({ - avatarProps: { - height: 64, - width: 64, - }, - colAvatar: { - paddingBottom: theme.spacing(2), - paddingRight: theme.spacing(), - paddingTop: theme.spacing(2), - width: 112, - }, - colName: { - width: "auto", - }, - label: { - paddingLeft: 0, - }, - noProducts: { - paddingBottom: 20, - paddingTop: 20, - paddingLeft: "0 !important", - }, - tableRow: { - cursor: "pointer", - /* Table to be replaced with Box */ - "& .MuiTableCell-root": { - paddingLeft: `${vars.spacing[5]} !important`, - paddingRight: `${vars.spacing[5]} !important`, - }, - }, - cardContent: { - padding: 0, - }, - cardTitle: { - padding: 0, - }, - }), - { name: "HomeProductListCard" }, -); - -interface HomeProductListProps { - testId?: string; - topProducts: RelayToFlat; -} - -export const HomeProductList: React.FC = props => { - const { topProducts, testId } = props; - const classes = useStyles(props); - - const intl = useIntl(); - - return ( - - - - - - - - - - - {renderCollection( - topProducts, - variant => ( - - variant.product.thumbnail.url)} - avatarProps={classes.avatarProps} - /> - - - {variant ? ( - <> - - {variant.product.name} - - - {maybe(() => - variant.attributes - .map(attribute => attribute.values[0].name) - .join(" / "), - )} - - - - - - ) : ( - - )} - - - - - {maybe( - () => ( - - ), - , - )} - - - - ), - () => ( - - - - - - - - ), - )} - - - - - ); -}; - -HomeProductList.displayName = "HomeProductList"; -export default HomeProductList; diff --git a/src/home/components/HomeProductListCard/index.ts b/src/home/components/HomeProductListCard/index.ts deleted file mode 100644 index 139cd4fe3..000000000 --- a/src/home/components/HomeProductListCard/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./HomeProductListCard"; -export * from "./HomeProductListCard"; diff --git a/src/home/components/HomeScreen.tsx b/src/home/components/HomeScreen.tsx deleted file mode 100644 index f26fa03bd..000000000 --- a/src/home/components/HomeScreen.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { TopNav } from "@dashboard/components/AppLayout/TopNav"; -import CardTitle from "@dashboard/components/CardTitle"; -import { Card, CardContent, Typography } from "@material-ui/core"; -import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; - -interface HomeScreenProps { - user: { - email: string; - }; -} - -export const HomeScreen: React.FC = ({ user }) => { - const intl = useIntl(); - - return ( - <> - - - - - - - - - - - - - - ); -}; diff --git a/src/home/fixtures.ts b/src/home/fixtures.ts index 2b05581de..d357a1601 100644 --- a/src/home/fixtures.ts +++ b/src/home/fixtures.ts @@ -316,7 +316,7 @@ export const shop: (placeholderImage: string) => HomeQuery = ( { __typename: "AttributeValue", id: "QXR0cmlidXRlVmFsdWU6OTI=", - name: "XS", + name: "XL", sortOrder: 0, }, ], @@ -326,7 +326,83 @@ export const shop: (placeholderImage: string) => HomeQuery = ( product: { __typename: "Product", id: "UHJvZHVjdDo4", - name: "Gardner-Martin", + name: "Black Hoodie", + thumbnail: { + __typename: "Image", + url: placeholderImage, + }, + }, + quantityOrdered: 1, + revenue: { + __typename: "TaxedMoney", + gross: { + __typename: "Money", + amount: 37.65, + currency: "USD", + }, + }, + }, + }, + { + __typename: "ProductVariantCountableEdge", + node: { + __typename: "ProductVariant", + attributes: [ + { + __typename: "SelectedAttribute", + values: [ + { + __typename: "AttributeValue", + id: "QXR0cmlidXRlVmFsdWU6OTI2=", + name: "2l", + sortOrder: 0, + }, + ], + }, + ], + id: "UHJvZHVjdFZhcmlhbnQ6NDM=2", + product: { + __typename: "Product", + id: "UHJvZHVjdDo4", + name: "Bean Juice", + thumbnail: { + __typename: "Image", + url: placeholderImage, + }, + }, + quantityOrdered: 1, + revenue: { + __typename: "TaxedMoney", + gross: { + __typename: "Money", + amount: 37.65, + currency: "USD", + }, + }, + }, + }, + { + __typename: "ProductVariantCountableEdge", + node: { + __typename: "ProductVariant", + attributes: [ + { + __typename: "SelectedAttribute", + values: [ + { + __typename: "AttributeValue", + id: "QXR0cmlidXRlVmFsdWU6OTI=3", + name: "L", + sortOrder: 0, + }, + ], + }, + ], + id: "UHJvZHVjdFZhcmlhbnQ6NDM=3", + product: { + __typename: "Product", + id: "UHJvZHVjdDo4", + name: "Black Hoodie", thumbnail: { __typename: "Image", url: placeholderImage, diff --git a/src/home/types.ts b/src/home/types.ts new file mode 100644 index 000000000..aca07b694 --- /dev/null +++ b/src/home/types.ts @@ -0,0 +1,7 @@ +import { HomeQuery } from "@dashboard/graphql"; +import { RelayToFlat } from "@dashboard/types"; + +export type Activities = RelayToFlat>; +export type ProductTopToday = RelayToFlat< + NonNullable +>; diff --git a/src/index.css b/src/index.css index da7be7c09..7fcfbc95b 100644 --- a/src/index.css +++ b/src/index.css @@ -48,3 +48,13 @@ body { [id*="ScrollableDialog"] .infinite-scroll-component { overflow: hidden !important; } + +/* + TODO: Remove it when macaw will handle media queries in custom properties + https://github.com/saleor/macaw-ui/issues/498 +*/ +@media screen and (max-width: 1024px) { + .mobile-full-height { + height: auto !important; + } +}