import { ChannelSaleData } from "@saleor/channels/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import Savebar from "@saleor/components/Savebar"; import { Tab, TabContainer } from "@saleor/components/Tab"; import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import React from "react"; import { useIntl } from "react-intl"; import { maybe, splitDateTime } from "../../../misc"; import { ChannelProps, ListProps, TabListActions } from "../../../types"; import { PermissionEnum, SaleType as SaleTypeEnum } from "../../../types/globalTypes"; import { SaleDetails_sale } from "../../types/SaleDetails"; import DiscountCategories from "../DiscountCategories"; import DiscountCollections from "../DiscountCollections"; import DiscountDates from "../DiscountDates"; import DiscountProducts from "../DiscountProducts"; import SaleInfo from "../SaleInfo"; import SaleSummary from "../SaleSummary"; import SaleType from "../SaleType"; import SaleValue from "../SaleValue"; export interface SaleDetailsPageFormData { channelListings: ChannelSaleData[]; endDate: string; endTime: string; hasEndDate: boolean; name: string; startDate: string; startTime: string; type: SaleTypeEnum; } export enum SaleDetailsPageTab { categories = "categories", collections = "collections", products = "products" } export function saleDetailsPageTab(tab: string): SaleDetailsPageTab { return tab === SaleDetailsPageTab.products ? SaleDetailsPageTab.products : tab === SaleDetailsPageTab.collections ? SaleDetailsPageTab.collections : SaleDetailsPageTab.categories; } export interface SaleDetailsPageProps extends Pick>, TabListActions< "categoryListToolbar" | "collectionListToolbar" | "productListToolbar" >, ChannelProps { activeTab: SaleDetailsPageTab; errors: DiscountErrorFragment[]; sale: SaleDetails_sale; allChannelsCount: number; channelListings: ChannelSaleData[]; hasChannelChanged: boolean; saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; onCategoryAssign: () => void; onCategoryUnassign: (id: string) => void; onCategoryClick: (id: string) => () => void; onCollectionAssign: () => void; onCollectionUnassign: (id: string) => void; onCollectionClick: (id: string) => () => void; onProductAssign: () => void; onProductUnassign: (id: string) => void; onProductClick: (id: string) => () => void; onRemove: () => void; onSubmit: (data: SaleDetailsPageFormData) => void; onTabClick: (index: SaleDetailsPageTab) => void; onChannelsChange: (data: ChannelSaleData[]) => void; openChannelsModal: () => void; } const CategoriesTab = Tab(SaleDetailsPageTab.categories); const CollectionsTab = Tab(SaleDetailsPageTab.collections); const ProductsTab = Tab(SaleDetailsPageTab.products); const SaleDetailsPage: React.FC = ({ activeTab, allChannelsCount, channelListings = [], disabled, errors, onRemove, onSubmit, onTabClick, hasChannelChanged, openChannelsModal, pageInfo, sale, saveButtonBarState, onBack, onCategoryAssign, onCategoryUnassign, onCategoryClick, onChannelsChange, onCollectionAssign, onCollectionUnassign, onCollectionClick, onNextPage, onPreviousPage, onProductAssign, onProductUnassign, onProductClick, categoryListToolbar, collectionListToolbar, productListToolbar, isChecked, selected, selectedChannelId, toggle, toggleAll }) => { const intl = useIntl(); const initialForm: SaleDetailsPageFormData = { channelListings, endDate: splitDateTime(maybe(() => sale.endDate, "")).date, endTime: splitDateTime(maybe(() => sale.endDate, "")).time, hasEndDate: maybe(() => !!sale.endDate), name: maybe(() => sale.name, ""), startDate: splitDateTime(maybe(() => sale.startDate, "")).date, startTime: splitDateTime(maybe(() => sale.startDate, "")).time, type: maybe(() => sale.type, SaleTypeEnum.FIXED) }; return (
{({ change, data, hasChanged, submit, triggerChange }) => { const handleChannelChange = createSaleChannelsChangeHandler( data.channelListings, onChannelsChange, triggerChange ); const formDisabled = data.channelListings?.some(channel => validatePrice(channel.discountValue) ); return ( {intl.formatMessage(sectionNames.sales)} sale.name)} />
{intl.formatMessage( { defaultMessage: "Categories ({quantity})", description: "number of categories", id: "saleDetailsPageCategoriesQuantity" }, { quantity: maybe( () => sale.categories.totalCount.toString(), "…" ) } )} {intl.formatMessage( { defaultMessage: "Collections ({quantity})", description: "number of collections", id: "saleDetailsPageCollectionsQuantity" }, { quantity: maybe( () => sale.collections.totalCount.toString(), "…" ) } )} {intl.formatMessage( { defaultMessage: "Products ({quantity})", description: "number of products", id: "saleDetailsPageProductsQuantity" }, { quantity: maybe( () => sale.products.totalCount.toString(), "…" ) } )} {activeTab === SaleDetailsPageTab.categories ? ( ) : activeTab === SaleDetailsPageTab.collections ? ( ) : ( )}
({ id: channel.id, name: channel.name }))} disabled={disabled} openModal={openChannelsModal} />
); }}
); }; SaleDetailsPage.displayName = "SaleDetailsPage"; export default SaleDetailsPage;