@griddo/ax 11.14.1 → 11.14.2-rc.1

package/src/components/Fields/Wysiwyg/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import FroalaEditorComponent from "react-froala-wysiwyg";
 import { connect } from "react-redux";
 
@@ -12,7 +13,7 @@ import "./vendors";
 
 import * as S from "./style";
 
-const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
+const Wysiwyg = (props: IWysiwygProps) => {
 	const {
 		value,
 		error,
@@ -28,12 +29,20 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 	} = props;
 
 	const imageSite = site ? site.id : "global";
+	const editorRef = useRef<any>(null);
+	const errorRef = useRef(error);
+	errorRef.current = error;
+
+	useEffect(() => {
+		if (!editorRef.current) return;
+		disabled ? editorRef.current.edit.off() : editorRef.current.edit.on();
+	}, [disabled]);
 
 	const handleChange = (model: string) => {
 		onChange(model);
 		const stripedHtml = decodeEntities(model);
 		setTimeout(() => {
-			error && handleValidation && handleValidation(stripedHtml);
+			errorRef.current && handleValidation?.(stripedHtml);
 		}, 300);
 	};
 
@@ -49,28 +58,26 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 			Authorization: `bearer ${token}`,
 		},
 		events: {
-			initialized() {
-				// biome-ignore lint/complexity/noUselessThisAlias: TODO: fix this
-				const editor: any = this;
+			initialized(this: any) {
+				editorRef.current = this;
+
 				if (disabled) {
-					setTimeout(() => {
-						editor.edit.off();
-					}, 1000);
+					this.edit.off();
 				}
 			},
-			"image.beforeUpload": async function (images: FileList) {
-				// biome-ignore lint/complexity/noUselessThisAlias: TODO: fix this
-				const editor: any = this;
-				const result = await uploadImage(images[0], imageSite);
-				if (result) {
-					editor.image.insert(result.url, true, null, editor.image.get(), null);
+			"image.beforeUpload": async function (this: any, images: FileList) {
+				try {
+					const result = await uploadImage(images[0], imageSite);
+					if (result) {
+						this.image.insert(result.url, true, null, this.image.get(), null);
+					}
+				} catch {
+					this.popups.hideAll();
 				}
 				return false;
 			},
-			blur: function () {
-				// biome-ignore lint/complexity/noUselessThisAlias: TODO: fix this
-				const editor: any = this;
-				const html = editor.html.get();
+			blur: function (this: any) {
+				const html = this.html.get();
 				const stripedHtml = decodeEntities(html);
 				handleValidation?.(stripedHtml);
 			},
@@ -88,9 +95,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
 interface IProps {
 	value: string;
-	title: string;
 	full?: boolean;
-	helptext?: string;
 	error?: boolean;
 	placeholder?: string;
 	token: string;

package/src/components/FileGallery/GalleryPanel/index.tsx

@@ -1,25 +1,33 @@
-import React, { memo } from "react";
+import { memo } from "react";
 
-import { IFile } from "@ax/types";
+import FileDragAndDrop from "@ax/modules/FileDrive/FileDragAndDrop";
+import type { IFile } from "@ax/types";
 
 import DetailPanel from "./DetailPanel";
-import FileDragAndDrop from "@ax/modules/FileDrive/FileDragAndDrop";
 
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-	const { selectedFile, validFormats, setFile, scope, currentFolderID, isAllowedToAdd, isAllowedToEdit, handleUpload } =
-		props;
+	const {
+		selectedFile,
+		setFile,
+		scope,
+		currentFolderID,
+		isAllowedToAdd,
+		isAllowedToEdit,
+		customFormats,
+		handleUpload,
+	} = props;
 
 	return (
 		<S.GalleryPanel>
 			{!selectedFile ? (
 				<FileDragAndDrop
-					validFormats={validFormats}
 					folderID={currentFolderID}
 					handleUpload={handleUpload}
 					siteID={scope}
 					isAllowedToUpload={isAllowedToAdd}
+					customFormats={customFormats}
 				/>
 			) : (
 				<DetailPanel selectedFile={selectedFile} setFile={setFile} isAllowedToEdit={isAllowedToEdit} />
@@ -30,7 +38,7 @@ const GalleryPanel = (props: IGalleryPanelProps) => {
 
 export interface IGalleryPanelProps {
 	selectedFile: IFile | null;
-	validFormats: string[];
+	customFormats?: string[];
 	setFile: (fileData: any) => void;
 	scope: number | "global";
 	currentFolderID: number | null;

package/src/components/FileGallery/index.tsx

@@ -1,43 +1,51 @@
-import React, { useEffect, useState, memo, useRef, useCallback, useLayoutEffect } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IQueryValue, IRootState, ISite } from "@ax/types";
 import {
-	Loader,
-	Tabs,
-	SearchField,
+	BackFolder,
 	EmptyState,
 	ErrorToast,
-	Notification,
-	Tooltip,
+	FilterTagsBar,
 	Icon,
-	BackFolder,
+	Loader,
+	Notification,
+	SearchField,
 	SearchTagsBar,
-	FilterTagsBar,
+	Tabs,
+	Tooltip,
 } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { usePermission, useResizable } from "@ax/hooks";
-
-import GalleryPanel from "./GalleryPanel";
-import GridItem from "./GridItem";
-import FolderItem from "./FolderItem";
-
-import * as S from "./style";
-
 // refactor
 import Breadcrumb from "@ax/modules/FileDrive/Breadcrumb";
-import FolderTree from "@ax/modules/FileDrive/FolderTree";
-import Type from "@ax/modules/FileDrive/FileFilters/Type";
 import SortBy from "@ax/modules/FileDrive/FileFilters/SortBy";
+import Type from "@ax/modules/FileDrive/FileFilters/Type";
+import FolderTree from "@ax/modules/FileDrive/FolderTree";
 import { useFilterQuery, useSortedListStatus } from "@ax/modules/FileDrive/hooks";
 import { getSortedListStatus } from "@ax/modules/FileDrive/utils";
+import type {
+	IFile,
+	IFilesFolder,
+	IFolder,
+	IFolderTree,
+	IGetFolderParams,
+	IQueryValue,
+	IRootState,
+	ISite,
+} from "@ax/types";
+
+import FolderItem from "./FolderItem";
+import GalleryPanel from "./GalleryPanel";
+import GridItem from "./GridItem";
+
+import * as S from "./style";
 
 const FileGallery = (props: IProps): JSX.Element => {
 	const {
 		currentFolderContent,
 		site,
 		currentFolderID,
-		validFormats,
+		customFormats,
 		breadcrumb,
 		toggleModal,
 		getFolderContent,
@@ -288,13 +296,10 @@ const FileGallery = (props: IProps): JSX.Element => {
 									</S.EmptyWrapper>
 								) : (
 									<S.Grid>
-										{items &&
-											items.map((item: IFile) => {
-												const isSelected = item.id === selectedFile?.id;
-												return (
-													<GridItem file={item} onClick={handleClick} key={item.fileName} isSelected={isSelected} />
-												);
-											})}
+										{items?.map((item: IFile) => {
+											const isSelected = item.id === selectedFile?.id;
+											return <GridItem file={item} onClick={handleClick} key={item.fileName} isSelected={isSelected} />;
+										})}
 									</S.Grid>
 								)}
 							</S.SectionWrapper>
@@ -304,7 +309,7 @@ const FileGallery = (props: IProps): JSX.Element => {
 			</S.ContentWrapper>
 			<GalleryPanel
 				selectedFile={selectedFile}
-				validFormats={validFormats}
+				customFormats={customFormats}
 				setFile={setFile}
 				scope={galleryScope}
 				currentFolderID={currentFolderID}
@@ -321,7 +326,7 @@ export interface IGalleryProps {
 	currentFolderContent: IFilesFolder | null;
 	currentFolderID: number | null;
 	isLoading: boolean;
-	validFormats: string[];
+	customFormats?: string[];
 	breadcrumb: IFolderTree[];
 	toggleModal: () => void;
 	addFile: (file: IFile) => void;

package/src/components/Gallery/GalleryPanel/index.tsx

@@ -1,30 +1,20 @@
-import React, { memo } from "react";
+import { memo } from "react";
 
-import { IGetFolderParams, IImage } from "@ax/types";
+import { ImageDragAndDrop } from "@ax/components";
+import type { IGetFolderParams, IImage } from "@ax/types";
 
 import DetailPanel from "./DetailPanel";
-import ImageDragAndDrop from "@ax/modules/MediaGallery/ImageDragAndDrop";
 
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-	const {
-		selectedImage,
-		validFormats,
-		setImage,
-		scope,
-		currentFolderID,
-		isAllowedToAdd,
-		isAllowedToEdit,
-		handleUpload,
-		getParams,
-	} = props;
+	const { selectedImage, setImage, scope, currentFolderID, isAllowedToAdd, isAllowedToEdit, handleUpload, getParams } =
+		props;
 
 	return (
 		<S.GalleryPanel>
 			{!selectedImage ? (
 				<ImageDragAndDrop
-					validFormats={validFormats}
 					folderID={currentFolderID}
 					handleUpload={handleUpload}
 					siteID={scope}
@@ -44,7 +34,6 @@ const GalleryPanel = (props: IGalleryPanelProps) => {
 
 export interface IGalleryPanelProps {
 	selectedImage: IImage | null;
-	validFormats: string[];
 	setImage: (fileData: any) => void;
 	scope: number | "global";
 	currentFolderID: number | null;

package/src/components/Gallery/index.tsx

@@ -60,7 +60,6 @@ const Gallery = (props: IProps): JSX.Element => {
 	const galleryScope = isLocalTab && site ? site.id : "global";
 	const hasFolders = !!folders?.length;
 	const isRoot = !breadcrumb?.length;
-	const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
 	const galleryRef = useRef<HTMLDivElement>(null);
 
@@ -345,7 +344,6 @@ const Gallery = (props: IProps): JSX.Element => {
 			</S.ContentWrapper>
 			<GalleryPanel
 				selectedImage={selectedImage}
-				validFormats={validFormats}
 				setImage={setImage}
 				scope={galleryScope}
 				currentFolderID={currentFolderID}

package/src/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Icon, Tooltip } from "@ax/components";
 
@@ -7,13 +7,19 @@ import type { IHeadingError } from "../../utils";
 import * as S from "./style";
 
 const ErrorsItem = (props: IErrorsItemProps) => {
-	const { error, onSelectHeading, onDelete } = props;
+	const { error, onSelectHeading, onDelete, onNavigateHeading, parentIsOpen } = props;
 	const { message, description, headingIds } = error;
 
 	const [isOpen, setIsOpen] = useState(false);
 	const [isDeleted, setIsDeleted] = useState(false);
 	const [currentIndex, setCurrentIndex] = useState<number | null>(null);
 
+	useEffect(() => {
+		if (!parentIsOpen) {
+			setIsOpen(false);
+		}
+	}, [parentIsOpen]);
+
 	const handlePrevious = () => {
 		if (!currentIndex) return;
 		const newIndex = currentIndex - 1;
@@ -32,6 +38,7 @@ const ErrorsItem = (props: IErrorsItemProps) => {
 		setIsOpen(!isOpen);
 		setCurrentIndex(0);
 		onSelectHeading(headingIds[0])();
+		!isOpen && onNavigateHeading();
 	};
 
 	const errorText =
@@ -86,6 +93,8 @@ interface IErrorsItemProps {
 	error: IHeadingError;
 	onSelectHeading: (id: number) => () => void;
 	onDelete: () => void;
+	onNavigateHeading: () => void;
+	parentIsOpen: boolean;
 }
 
 export default ErrorsItem;

package/src/components/HeadingsPreviewModal/ErrorsBanner/index.tsx

@@ -12,6 +12,7 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 
 	const [isDeleted, setIsDeleted] = useState(false);
 	const [deletedErrorIndices, setDeletedErrorIndices] = useState<Set<number>>(new Set());
+	const [isSticky, setIsSticky] = useState(false);
 
 	const allErrorsDeleted = useMemo(
 		() => deletedErrorIndices.size === errors.length && errors.length > 0,
@@ -22,22 +23,37 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 		setDeletedErrorIndices((prev) => new Set([...prev, index]));
 	};
 
+	const handleNavigateHeading = () => {
+		setIsSticky(true);
+	};
+
 	if (isDeleted || allErrorsDeleted) {
 		return <></>;
 	}
 
 	return (
-		<S.ErrorsWrapper>
+		<S.ErrorsWrapper isSticky={isSticky}>
 			<S.ErrorsHeader>
 				<S.WarningWrapper>
 					<Icon name="warning" size="16" />
 				</S.WarningWrapper>
 				<S.HeaderText>SEO Alerts</S.HeaderText>
 				<S.HeaderActions>
-					<S.ToggleWrapper onClick={() => setIsOpen(!isOpen)}>
+					<S.ToggleWrapper
+						onClick={() => {
+							setIsOpen(!isOpen);
+							setIsSticky(false);
+						}}
+					>
 						<Icon name={isOpen ? "UpArrow" : "DownArrow"} size="24" />
 					</S.ToggleWrapper>
-					<S.IconWrapper onClick={() => setIsDeleted(true)}>
+					<S.IconWrapper
+						onClick={() => {
+							setIsDeleted(true);
+							setIsSticky(false);
+							setIsOpen(false);
+						}}
+					>
 						<Icon name="close" size="16" />
 					</S.IconWrapper>
 				</S.HeaderActions>
@@ -53,6 +69,8 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 							error={error}
 							onSelectHeading={onSelectHeading}
 							onDelete={() => handleErrorDelete(index)}
+							onNavigateHeading={handleNavigateHeading}
+							parentIsOpen={isOpen}
 						/>
 					))}
 				</S.ErrorListWrapper>

package/src/components/HeadingsPreviewModal/ErrorsBanner/style.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-const ErrorsWrapper = styled.div`
-  position: sticky;
+const ErrorsWrapper = styled.div<{ isSticky: boolean }>`
+  position: ${(p) => (p.isSticky ? "sticky" : "static")};
   top: 0;
   background-color: ${(p) => p.theme.colors.uiBackground03};
   width: 100%;

package/src/components/HeadingsPreviewModal/index.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import { EmptyState, FloatingPanel } from "@ax/components";
+import { EmptyState, FloatingPanel, ToggleField } from "@ax/components";
 import type { HeadingFilter, HeadingNode } from "@ax/types";
 
 import ErrorsBanner from "./ErrorsBanner";
 import HeadingItem from "./HeadingItem";
-import { analyzeHeadings, extractUniqueHeadingTypes, filterHeadings, parseHeadingsTree } from "./utils";
+import { analyzeHeadings, extractUniqueHeadingTypes, filterHeadings, hasHiddenHeadings, parseHeadingsTree } from "./utils";
 
 import * as S from "./style";
 
@@ -17,12 +17,14 @@ const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
 
 	const [headings, setHeadings] = useState<HeadingNode[]>([]);
 	const [selected, setSelected] = useState<number | null>(null);
+	const [toggleStatus, setToggleStatus] = useState<boolean>(true);
 	const [isErrorsBannerOpen, setIsErrorsBannerOpen] = useState(false);
 	const [errorsResetKey, setErrorsResetKey] = useState(0);
 	const listRef = useRef<HTMLDivElement>(null);
 
 	const filters = useMemo<HeadingFilter[]>(() => ["all", ...extractUniqueHeadingTypes(headings)], [headings]);
-	const filteredHeadings = useMemo(() => filterHeadings(headings, headingsFilter), [headings, headingsFilter]);
+	const filteredHeadings = useMemo(() => filterHeadings(headings, headingsFilter, toggleStatus), [headings, headingsFilter, toggleStatus]);
+	const showToggleWrapper = useMemo(() => hasHiddenHeadings(headings, headingsFilter), [headings, headingsFilter]);
 	const errors = useMemo(() => analyzeHeadings(filteredHeadings, isFiltering), [filteredHeadings, isFiltering]);
 
 	const getSEOHeadings = useCallback(() => {
@@ -117,6 +119,14 @@ const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
 									</S.FilterItem>
 								))}
 							</S.FiltersWrapper>
+							{showToggleWrapper && (
+								<S.ToggleWrapper>
+									<S.ToggleText>
+										Show <strong>hidden headings</strong> (not visible on page)
+									</S.ToggleText>
+									<ToggleField name="hideHidden" value={toggleStatus} onChange={setToggleStatus} size="s" />
+								</S.ToggleWrapper>
+							)}
 							<S.HeadingsListWrapper ref={listRef}>
 								{filteredHeadings.map((head, index) => (
 									<HeadingItem

package/src/components/HeadingsPreviewModal/style.tsx

@@ -45,6 +45,22 @@ const FiltersWrapper = styled.div`
   }
 `;
 
+const ToggleWrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.colors.uiBackground03};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  gap: ${(p) => p.theme.spacing.xs};
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ToggleText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+`;
+
 const FilterText = styled.div`
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.colors.textHighEmphasis};
@@ -79,4 +95,6 @@ export {
 	FilterItem,
 	HeadingsListWrapper,
 	EmptyWrapper,
+	ToggleWrapper,
+	ToggleText,
 };

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -275,11 +275,29 @@ const extractUniqueHeadingTypes = (headings: HeadingNode[]): HeadingFilter[] =>
 	return Array.from(types).sort();
 };
 
-const filterHeadings = (headings: HeadingNode[], selectedType: string): HeadingNode[] => {
-	if (selectedType === "all") return headings;
+const filterHeadings = (headings: HeadingNode[], selectedType: string, includeHidden = true): HeadingNode[] => {
+	if (selectedType === "all" && includeHidden) return headings;
 
+	if (selectedType === "all") {
+		// Filter by visibility but keep hierarchy
+		const filterNode = (node: HeadingNode): HeadingNode | null => {
+			const isVisible = !node.isHidden;
+			const filteredChildren = node.children.map(filterNode).filter((n): n is HeadingNode => n !== null);
+
+			if (isVisible) {
+				return { ...node, children: filteredChildren };
+			}
+
+			return filteredChildren.length > 0 ? { ...node, children: filteredChildren } : null;
+		};
+
+		return headings.map(filterNode).filter((n): n is HeadingNode => n !== null);
+	}
+
+	// For specific types, flatten the result
 	return flattenHeadings(headings)
 		.filter((h) => h.tag === selectedType)
+		.filter((h) => includeHidden || !h.isHidden)
 		.map((h) => ({
 			level: h.level,
 			tag: h.tag,
@@ -289,6 +307,16 @@ const filterHeadings = (headings: HeadingNode[], selectedType: string): HeadingN
 		}));
 };
 
+const hasHiddenHeadings = (headings: HeadingNode[], filterType = "all"): boolean => {
+	const check = (node: HeadingNode): boolean => {
+		const matchesType = filterType === "all" || node.tag === filterType;
+		if (matchesType && node.isHidden) return true;
+		return node.children.length > 0 && node.children.some(check);
+	};
+
+	return headings.some(check);
+};
+
 interface IHeadingError {
 	message: string;
 	description: React.ReactNode;
@@ -303,5 +331,5 @@ interface IFlatHeading {
 	isHidden: boolean;
 }
 
-export { parseHeadingsTree, extractUniqueHeadingTypes, filterHeadings, analyzeHeadings, getHeadColor };
+export { parseHeadingsTree, extractUniqueHeadingTypes, filterHeadings, analyzeHeadings, getHeadColor, hasHiddenHeadings };
 export type { IHeadingError };

package/src/components/Image/index.tsx

@@ -1,5 +1,5 @@
-import { GriddoImage, GriddoImageCommonProps } from "@griddo/core";
-import React from "react";
+import { GriddoImage, type GriddoImageCommonProps } from "@griddo/core";
+
 import { createCloudinaryUrl, isCloudinary } from "./utils";
 
 const DAM_DEFAULTS = {

package/src/components/ImageDragAndDrop/CropStep/index.tsx

@@ -0,0 +1,95 @@
+import { memo, useCallback, useState } from "react";
+import type { Area } from "react-easy-crop";
+import Cropper from "react-easy-crop";
+
+import { Button } from "@ax/components";
+
+import * as S from "./style";
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.1;
+
+const CropStep = (props: IProps) => {
+	const { imageSrc, onConfirm, onCancel } = props;
+
+	const [crop, setCrop] = useState({ x: 0, y: 0 });
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+	const [objectFit, setObjectFit] = useState<"vertical-cover" | "horizontal-cover">("vertical-cover");
+
+	const onCropComplete = useCallback((_: Area, pixels: Area) => {
+		setCroppedAreaPixels(pixels);
+	}, []);
+
+	const onMediaLoaded = useCallback((mediaSize: { width: number; height: number }) => {
+		const isPortrait = mediaSize.height > mediaSize.width;
+		setObjectFit(isPortrait ? "vertical-cover" : "horizontal-cover");
+	}, []);
+
+	const handleConfirm = () => {
+		if (croppedAreaPixels) onConfirm(croppedAreaPixels);
+	};
+
+	const handleZoomIn = () => setZoom((z) => Math.min(z + ZOOM_STEP, MAX_ZOOM));
+	const handleZoomOut = () => setZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM));
+
+	return (
+		<S.Wrapper>
+			<S.CropArea>
+				<S.CropContent>
+					<S.CropContainer>
+						<Cropper
+							image={imageSrc}
+							crop={crop}
+							zoom={zoom}
+							aspect={1}
+							cropShape="round"
+							showGrid={false}
+							onCropChange={setCrop}
+							onZoomChange={setZoom}
+							onCropComplete={onCropComplete}
+							onMediaLoaded={onMediaLoaded}
+							objectFit={objectFit}
+						/>
+					</S.CropContainer>
+					<S.ZoomControls>
+						<S.ZoomButton type="button" onClick={handleZoomIn} aria-label="Zoom in">
+							+
+						</S.ZoomButton>
+						<S.ZoomSlider
+							type="range"
+							min={MIN_ZOOM}
+							max={MAX_ZOOM}
+							step={ZOOM_STEP}
+							value={zoom}
+							onChange={(e) => setZoom(Number(e.target.value))}
+							aria-label="Zoom"
+						/>
+						<S.ZoomButton type="button" onClick={handleZoomOut} aria-label="Zoom out">
+							{"\u2212"}
+						</S.ZoomButton>
+					</S.ZoomControls>
+				</S.CropContent>
+			</S.CropArea>
+			<S.CancelButtonContainer>
+				<Button type="button" buttonStyle="minimal" icon="refresh" onClick={onCancel}>
+					Upload new image
+				</Button>
+			</S.CancelButtonContainer>
+			<S.Actions>
+				<Button type="button" buttonStyle="solid" onClick={handleConfirm}>
+					Done
+				</Button>
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IProps {
+	imageSrc: string;
+	onConfirm: (croppedAreaPixels: Area) => void;
+	onCancel: () => void;
+}
+
+export default memo(CropStep);