diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 350b12752..68bd40eca 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -19,9 +19,9 @@ import React from "react"; import SVG from "react-inlinesvg"; import { RouteComponentProps, withRouter } from "react-router"; -import saleorDarkLogoSmall from "@assets/logo-dark-small.svg"; -import saleorDarkLogo from "@assets/logo-dark.svg"; -import menuArrowIcon from "@assets/menu-arrow-icon.svg"; +import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg"; +import saleorDarkLogo from "@assets/images/logo-dark.svg"; +import menuArrowIcon from "@assets/images/menu-arrow-icon.svg"; import AppProgressProvider from "@saleor/components/AppProgress"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import useNavigator from "@saleor/hooks/useNavigator"; diff --git a/src/components/ConfirmFormLeaveDialog.tsx b/src/components/ConfirmFormLeaveDialog.tsx deleted file mode 100644 index 4c5334a26..000000000 --- a/src/components/ConfirmFormLeaveDialog.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogContentText from "@material-ui/core/DialogContentText"; -import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; -import React from "react"; -import NavigationPrompt from "react-router-navigation-prompt"; - -import i18n from "../i18n"; -import { FormContext } from "./Form"; - -const styles = (theme: Theme) => - createStyles({ - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.main - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - } - }); - -export const ConfirmFormLeaveDialog = withStyles(styles, { - name: "ConfirmFormLeaveDialog" -})(({ classes }: WithStyles) => ( - - {({ hasChanged: hasFormChanged }) => ( - - {({ isActive, onCancel, onConfirm }) => ( - - {i18n.t("Unsaved changes")} - - - {i18n.t( - "If you leave this page, unsaved changes will be lost. Are you sure you want to leave?", - { - context: "form leave confirmation" - } - )} - - - - - - - - )} - - )} - -)); diff --git a/src/components/Form/FormActions.tsx b/src/components/Form/FormActions.tsx deleted file mode 100644 index a6a26bf53..000000000 --- a/src/components/Form/FormActions.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import Button from "@material-ui/core/Button"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; -import Toolbar from "@material-ui/core/Toolbar"; -import React from "react"; - -import i18n from "../../i18n"; - -const styles = createStyles({ - cardActions: { - flexDirection: "row-reverse" as "row-reverse" - } -}); - -interface FormActionsProps extends WithStyles { - submitLabel: string; - onCancel?(); - onSubmit?(event: React.FormEvent); -} - -const FormActions = withStyles(styles, { name: "FormActions" })( - ({ classes, onCancel, onSubmit, submitLabel }: FormActionsProps) => ( - - - {onCancel && ( - - )} - - ) -); -FormActions.displayName = "FormActions"; -export default FormActions; diff --git a/src/components/Form/FormContext.tsx b/src/components/Form/FormContext.tsx deleted file mode 100644 index 4ef3b8101..000000000 --- a/src/components/Form/FormContext.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; - -import FormComponent, { FormProps } from "./Form"; - -interface IFormContext { - hasChanged: boolean; - toggle: () => void; -} - -export const FormContext = React.createContext(undefined); - -interface FormProviderState { - hasChanged: boolean; -} - -export class FormProvider extends React.Component<{}, FormProviderState> { - state: FormProviderState = { - hasChanged: false - }; - - toggle = () => - this.setState(prevState => ({ - hasChanged: !prevState.hasChanged - })); - - render() { - return ( - - {this.props.children} - - ); - } -} - -export function Form(props: FormProps) { - return ( - - {({ hasChanged, toggle }) => ( - - )} - - ); -} - -export default Form; diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts index 98ebc8cc6..a5c6fdf72 100644 --- a/src/components/Form/index.ts +++ b/src/components/Form/index.ts @@ -1,4 +1,2 @@ export * from "./Form"; export { default } from "./Form"; -export { default as FormActions } from "./FormActions"; -export * from "./FormActions"; diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx index 35147ec4f..185064156 100644 --- a/src/components/Timeline/TimelineNote.tsx +++ b/src/components/Timeline/TimelineNote.tsx @@ -1,7 +1,7 @@ import Avatar from "@material-ui/core/Avatar"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import colors from "@material-ui/core/colors"; +import * as colors from "@material-ui/core/colors"; import { createStyles, Theme, diff --git a/src/discounts/components/VoucherOptions/VoucherOptions.tsx b/src/discounts/components/VoucherOptions/VoucherOptions.tsx deleted file mode 100644 index 62731257c..000000000 --- a/src/discounts/components/VoucherOptions/VoucherOptions.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; -import TextField from "@material-ui/core/TextField"; -import Typography from "@material-ui/core/Typography"; -import React from "react"; - -import CardTitle from "@saleor/components/CardTitle"; -import ControlledSwitch from "@saleor/components/ControlledSwitch"; -import FormSpacer from "@saleor/components/FormSpacer"; -import Hr from "@saleor/components/Hr"; -import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice"; -import i18n from "../../../i18n"; -import { FormErrors } from "../../../types"; -import { VoucherDiscountValueType } from "../../../types/globalTypes"; -import { FormData } from "../VoucherDetailsPage"; - -interface VoucherOptionsProps { - data: FormData; - defaultCurrency: string; - disabled: boolean; - errors: FormErrors< - | "discountType" - | "discountValue" - | "endDate" - | "minAmountSpent" - | "startDate" - | "usageLimit" - >; - onChange: (event: React.ChangeEvent) => void; -} - -const styles = (theme: Theme) => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing.unit * 2 + "px", - gridTemplateColumns: "1fr 1fr" - } - }); - -const VoucherOptions = withStyles(styles, { - name: "VoucherOptions" -})( - ({ - classes, - data, - defaultCurrency, - disabled, - errors, - onChange - }: VoucherOptionsProps & WithStyles) => ( - - - - - - -
- - - {i18n.t("Discount Specific Information")} - - -
- -
- - - {i18n.t("Only once per order", { - context: "voucher application" - })} - - {i18n.t( - "If this option is disabled, discount will be counted for every eligible product" - )} - - - } - onChange={onChange} - name={"applyOncePerOrder" as keyof FormData} - disabled={disabled} - /> - -
- - {i18n.t("Time Frame")} - -
- - -
- - - ) -); -export default VoucherOptions; diff --git a/src/discounts/components/VoucherOptions/index.ts b/src/discounts/components/VoucherOptions/index.ts deleted file mode 100644 index 3b2411d35..000000000 --- a/src/discounts/components/VoucherOptions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./VoucherOptions"; -export * from "./VoucherOptions"; diff --git a/src/products/components/ProductListCard/ProductListCard.tsx b/src/products/components/ProductListCard/ProductListCard.tsx deleted file mode 100644 index 618c7a480..000000000 --- a/src/products/components/ProductListCard/ProductListCard.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import Button from "@material-ui/core/Button"; -import Card from "@material-ui/core/Card"; -import AddIcon from "@material-ui/icons/Add"; -import React from "react"; - -import Container from "@saleor/components/Container"; -import PageHeader from "@saleor/components/PageHeader"; -import ProductList from "@saleor/components/ProductList"; -import { CategoryDetails_category_products_edges_node } from "../../../categories/types/CategoryDetails"; -import i18n from "../../../i18n"; -import { FilterPageProps, ListActions, PageListProps } from "../../../types"; -import { ProductListUrlFilters } from "../../urls"; -import ProductListFilter from "../ProductListFilter"; - -export interface ProductListCardProps - extends PageListProps, - ListActions, - FilterPageProps { - currencySymbol: string; - products: CategoryDetails_category_products_edges_node[]; -} - -export const ProductListCard: React.StatelessComponent< - ProductListCardProps -> = ({ - currencySymbol, - currentTab, - filtersList, - filterTabs, - initialSearch, - onAdd, - onAll, - onSearchChange, - onFilterAdd, - onFilterSave, - onTabChange, - onFilterDelete, - ...listProps -}) => ( - - - - - - - - - -); -ProductListCard.displayName = "ProductListCard"; -export default ProductListCard; diff --git a/src/products/components/ProductListCard/index.ts b/src/products/components/ProductListCard/index.ts deleted file mode 100644 index 995a575ae..000000000 --- a/src/products/components/ProductListCard/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./ProductListCard"; -export * from "./ProductListCard"; diff --git a/src/products/views/ProductUpdate.tsx b/src/products/views/ProductUpdate.tsx deleted file mode 100644 index 9080c2738..000000000 --- a/src/products/views/ProductUpdate.tsx +++ /dev/null @@ -1,366 +0,0 @@ -import DialogContentText from "@material-ui/core/DialogContentText"; -import IconButton from "@material-ui/core/IconButton"; -import DeleteIcon from "@material-ui/icons/Delete"; -import React from "react"; -import { arrayMove } from "react-sortable-hoc"; - -import placeholderImg from "@assets/images/placeholder255x255.png"; -import ActionDialog from "@saleor/components/ActionDialog"; -import { WindowTitle } from "@saleor/components/WindowTitle"; -import useBulkActions from "@saleor/hooks/useBulkActions"; -import useNavigator from "@saleor/hooks/useNavigator"; -import useNotifier from "@saleor/hooks/useNotifier"; -import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config"; -import SearchCategories from "../../containers/SearchCategories"; -import SearchCollections from "../../containers/SearchCollections"; -import i18n from "../../i18n"; -import { decimal, getMutationState, maybe } from "../../misc"; -import { productTypeUrl } from "../../productTypes/urls"; -import ProductUpdatePage, { FormData } from "../components/ProductUpdatePage"; -import ProductUpdateOperations from "../containers/ProductUpdateOperations"; -import { TypedProductDetailsQuery } from "../queries"; -import { - ProductImageCreate, - ProductImageCreateVariables -} from "../types/ProductImageCreate"; -import { ProductVariantBulkDelete } from "../types/ProductVariantBulkDelete"; -import { - productImageUrl, - productListUrl, - productUrl, - ProductUrlQueryParams, - productVariantAddUrl, - productVariantEditUrl -} from "../urls"; - -interface ProductUpdateProps { - id: string; - params: ProductUrlQueryParams; -} - -export const ProductUpdate: React.StatelessComponent = ({ - id, - params -}) => { - const navigate = useNavigator(); - const notify = useNotifier(); - const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions( - params.ids - ); - - return ( - - {({ search: searchCategories, result: searchCategoriesOpts }) => ( - - {({ search: searchCollections, result: searchCollectionsOpts }) => ( - - {({ data, loading, refetch }) => { - const handleDelete = () => { - notify({ text: i18n.t("Product removed") }); - navigate(productListUrl()); - }; - const handleUpdate = () => - notify({ text: i18n.t("Saved changes") }); - const handleImageCreate = (data: ProductImageCreate) => { - const imageError = data.productImageCreate.errors.find( - error => - error.field === - ("image" as keyof ProductImageCreateVariables) - ); - if (imageError) { - notify({ - text: imageError.message - }); - } - }; - const handleImageDeleteSuccess = () => - notify({ - text: i18n.t("Image successfully deleted") - }); - const handleVariantAdd = () => - navigate(productVariantAddUrl(id)); - - const handleBulkProductVariantDelete = ( - data: ProductVariantBulkDelete - ) => { - if (data.productVariantBulkDelete.errors.length === 0) { - navigate(productUrl(id), true); - reset(); - refetch(); - } - }; - - const product = data ? data.product : undefined; - return ( - - {({ - bulkProductVariantDelete, - createProductImage, - deleteProduct, - deleteProductImage, - reorderProductImages, - updateProduct, - updateSimpleProduct - }) => { - const handleImageDelete = (id: string) => () => - deleteProductImage.mutate({ id }); - const handleImageEdit = (imageId: string) => () => - navigate(productImageUrl(id, imageId)); - const handleSubmit = (data: FormData) => { - if (product) { - if (product.productType.hasVariants) { - updateProduct.mutate({ - attributes: data.attributes, - basePrice: decimal(data.basePrice), - category: data.category.value, - chargeTaxes: data.chargeTaxes, - collections: data.collections.map( - collection => collection.value - ), - descriptionJson: JSON.stringify(data.description), - id: product.id, - isPublished: data.isPublished, - name: data.name, - publicationDate: - data.publicationDate !== "" - ? data.publicationDate - : null - }); - } else { - updateSimpleProduct.mutate({ - attributes: data.attributes, - basePrice: decimal(data.basePrice), - category: data.category.value, - chargeTaxes: data.chargeTaxes, - collections: data.collections.map( - collection => collection.value - ), - descriptionJson: JSON.stringify(data.description), - id: product.id, - isPublished: data.isPublished, - name: data.name, - productVariantId: product.variants[0].id, - productVariantInput: { - quantity: data.stockQuantity, - sku: data.sku - }, - publicationDate: - data.publicationDate !== "" - ? data.publicationDate - : null - }); - } - } - }; - - const disableFormSave = - createProductImage.opts.loading || - deleteProduct.opts.loading || - reorderProductImages.opts.loading || - updateProduct.opts.loading || - loading; - const formTransitionState = getMutationState( - updateProduct.opts.called || - updateSimpleProduct.opts.called, - updateProduct.opts.loading || - updateSimpleProduct.opts.loading, - maybe( - () => updateProduct.opts.data.productUpdate.errors - ), - maybe( - () => - updateSimpleProduct.opts.data.productUpdate.errors - ), - maybe( - () => - updateSimpleProduct.opts.data.productVariantUpdate - .errors - ) - ); - const deleteTransitionState = getMutationState( - deleteProduct.opts.called, - deleteProduct.opts.loading, - maybe( - () => deleteProduct.opts.data.productDelete.errors - ) - ); - - const bulkProductVariantDeleteTransitionState = getMutationState( - bulkProductVariantDelete.opts.called, - bulkProductVariantDelete.opts.loading, - maybe( - () => - bulkProductVariantDelete.opts.data - .productVariantBulkDelete.errors - ) - ); - - return ( - <> - data.product.name)} /> - searchCategoriesOpts.data.categories.edges, - [] - ).map(edge => edge.node)} - collections={maybe( - () => - searchCollectionsOpts.data.collections.edges, - [] - ).map(edge => edge.node)} - disabled={disableFormSave} - errors={maybe( - () => - updateProduct.opts.data.productUpdate.errors, - [] - )} - fetchCategories={searchCategories} - fetchCollections={searchCollections} - saveButtonBarState={formTransitionState} - images={maybe(() => data.product.images)} - header={maybe(() => product.name)} - placeholderImage={placeholderImg} - product={product} - productCollections={maybe( - () => product.collections - )} - variants={maybe(() => product.variants)} - onAttributesEdit={() => - navigate( - productTypeUrl(data.product.productType.id) - ) - } - onBack={() => { - navigate(productListUrl()); - }} - onDelete={() => - navigate( - productUrl(id, { - action: "remove" - }) - ) - } - onProductShow={() => { - if (product) { - window.open(product.url); - } - }} - onImageReorder={({ newIndex, oldIndex }) => { - if (product) { - let ids = product.images.map(image => image.id); - ids = arrayMove(ids, oldIndex, newIndex); - reorderProductImages.mutate({ - imagesIds: ids, - productId: product.id - }); - } - }} - onSubmit={handleSubmit} - onVariantAdd={handleVariantAdd} - onVariantShow={variantId => () => - navigate( - productVariantEditUrl(product.id, variantId) - )} - onImageUpload={file => { - if (product) { - createProductImage.mutate({ - alt: "", - image: file, - product: product.id - }); - } - }} - onImageEdit={handleImageEdit} - onImageDelete={handleImageDelete} - toolbar={ - - navigate( - productUrl(id, { - action: "remove-variants", - ids: listElements - }) - ) - } - > - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - navigate(productUrl(id), true)} - confirmButtonState={deleteTransitionState} - onConfirm={() => deleteProduct.mutate({ id })} - variant="delete" - title={i18n.t("Remove product")} - > - {{ name }}?", - { - name: product ? product.name : undefined - } - ) - }} - /> - - navigate(productUrl(id), true)} - confirmButtonState={ - bulkProductVariantDeleteTransitionState - } - onConfirm={() => - bulkProductVariantDelete.mutate({ - ids: params.ids - }) - } - variant="delete" - title={i18n.t("Remove product variants")} - > - {{ number }} variants?", - { - number: maybe( - () => params.ids.length.toString(), - "..." - ) - } - ) - }} - /> - - - ); - }} - - ); - }} - - )} - - )} - - ); -}; -export default ProductUpdate; diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index cd62a252c..626d60907 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -3,6 +3,7 @@ import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; +import placeholderImg from "@assets/images/placeholder255x255.png"; import ActionDialog from "@saleor/components/ActionDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useBulkActions from "@saleor/hooks/useBulkActions"; @@ -32,7 +33,6 @@ import { productVariantAddUrl, productVariantEditUrl } from "../../urls"; -import placeholderImg from "../@assets/images/placeholder255x255.png"; import { createImageReorderHandler, createImageUploadHandler, diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx index 17a1a0517..acb28f07f 100644 --- a/src/staff/components/StaffProperties/StaffProperties.tsx +++ b/src/staff/components/StaffProperties/StaffProperties.tsx @@ -11,13 +11,12 @@ import Typography from "@material-ui/core/Typography"; import React from "react"; import SVG from "react-inlinesvg"; +import photoIcon from "@assets/images/photo-icon.svg"; import CardTitle from "@saleor/components/CardTitle"; import i18n from "../../../i18n"; import { getUserInitials, maybe } from "../../../misc"; import { StaffMemberDetails_user } from "../../types/StaffMemberDetails"; -import photoIcon from "../@assets/images/photo-icon.svg"; - const styles = (theme: Theme) => createStyles({ avatar: { diff --git a/src/storybook/Stories.test.ts b/src/storybook/Stories.test.ts index 3cb047195..a79facced 100644 --- a/src/storybook/Stories.test.ts +++ b/src/storybook/Stories.test.ts @@ -27,7 +27,7 @@ jest.mock("draft-js/lib/generateRandomKey"); (generateRandomKey as any).mockImplementation(() => "testKey"); initStoryshots({ - configPath: "saleor/static/dashboard-next/storybook/", + configPath: "src/storybook/", test({ story }) { const result = render(story.render() as any); expect(toJSON(result)).toMatchSnapshot(); diff --git a/src/storybook/stories/products/ProductListCard.tsx b/src/storybook/stories/products/ProductListCard.tsx deleted file mode 100644 index d7399817f..000000000 --- a/src/storybook/stories/products/ProductListCard.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import placeholderImage from "@assets/images/placeholder255x255.png"; -import { category as categoryFixture } from "../../../categories/fixtures"; -import { - filterPageProps, - filters, - listActionsProps, - pageListProps -} from "../../../fixtures"; -import ProductListCard, { - ProductListCardProps -} from "../../../products/components/ProductListCard"; -import Decorator from "../../Decorator"; - -const products = categoryFixture(placeholderImage).products.edges.map( - edge => edge.node -); - -const props: ProductListCardProps = { - ...listActionsProps, - ...pageListProps.default, - ...filterPageProps, - products -}; - -storiesOf("Views / Products / Product list", module) - .addDecorator(Decorator) - .add("default", () => ) - .add("with custom filters", () => ( - - )) - .add("loading", () => ( - - )) - .add("no data", () => );