Add custom image in downloads editor (#41342)

* Add custom image in downloads editor

* Add changelog

packages/js/product-editor/changelog/dev-41254_use_custom_image_in_downloads_editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add custom image in downloads editor #41342

packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx

@@ -22,7 +22,8 @@ import {
  * Internal dependencies
  */
 import { EditDownloadsModalProps } from './types';
-import { UnionIcon } from './union-icon';
+import { UnionIcon } from './images/union-icon';
+import { DownloadsCustomImage } from './images/downloads-custom-image';
 
 export interface Image {
 	id: number;
@@ -131,8 +132,8 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
 			className="woocommerce-edit-downloads-modal"
 		>
 			<div className="woocommerce-edit-downloads-modal__preview">
-				{ isImage( file ) && (
 				<ImageGallery allowDragging={ false } columns={ 1 }>
+					{ isImage( file ) ? (
 						<ImageGalleryItem
 							key={ id }
 							alt={ name }
@@ -140,8 +141,10 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
 							id={ `${ id }` }
 							isCover={ false }
 						/>
-					</ImageGallery>
+					) : (
+						<DownloadsCustomImage />
 					) }
+				</ImageGallery>
 				<FormFileUpload
 					onChange={ handleFormFileUploadChange }
 					render={ ( { openFileDialog } ) => (

packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/downloads-custom-image.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+export const DownloadsCustomImage = () => (
+	<svg
+		width="56"
+		height="72"
+		viewBox="0 0 56 72"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M37.9551 0H1.41177C0.63207 0 0 0.632067 0 1.41176V70.5882C0 71.3679 0.632067 72 1.41176 72H54.5882C55.3679 72 56 71.3679 56 70.5882V17.9261L37.9551 0Z"
+			fill="#F0F0F0"
+		/>
+		<rect
+			x="28.6191"
+			y="40.6892"
+			width="13.3101"
+			height="13.3107"
+			rx="2.85325"
+			fill="#DDDDDD"
+		/>
+		<ellipse
+			cx="18.1551"
+			cy="47.3446"
+			rx="6.65505"
+			ry="6.65537"
+			fill="#DDDDDD"
+		/>
+		<path
+			d="M25.9557 24.1401C26.5048 23.1889 27.8776 23.1889 28.4267 24.1401L34.6041 34.84C35.1531 35.7911 34.4668 36.9799 33.3686 36.9799H21.0139C19.9157 36.9799 19.2293 35.7911 19.7784 34.84L25.9557 24.1401Z"
+			fill="#DDDDDD"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M38.0005 9.53674e-05L56 17.9995H40.824C39.2646 17.9995 38.0005 16.7354 38.0005 15.176V9.53674e-05Z"
+			fill="#DDDDDD"
+		/>
+	</svg>
+);