From 1fddb9451da88fba6fe8c1a0d9b18c626bd509c0 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Thu, 13 Aug 2020 14:24:51 +0100
Subject: [PATCH] Use real previews for the Cart and Checkout blocks
 (https://github.com/woocommerce/woocommerce-blocks/pull/2992)

* Use real previews for the cart and checkout

* remove extra files and css
---
 .../assets/img/cart-preview.svg               | 20 -------------------
 .../assets/img/checkout-preview.svg           | 20 -------------------
 .../js/blocks/cart-checkout/cart/edit.js      | 13 ++++++------
 .../js/blocks/cart-checkout/cart/editor.scss  |  5 +++++
 .../js/blocks/cart-checkout/checkout/edit.js  | 17 +++++++++-------
 .../blocks/cart-checkout/checkout/editor.scss |  5 +++++
 .../assets/js/previews/cart-block.js          | 16 ---------------
 .../assets/js/previews/checkout-block.js      | 16 ---------------
 .../assets/js/previews/index.js               |  2 --
 9 files changed, 27 insertions(+), 87 deletions(-)
 delete mode 100644 plugins/woocommerce-blocks/assets/img/cart-preview.svg
 delete mode 100644 plugins/woocommerce-blocks/assets/img/checkout-preview.svg
 delete mode 100644 plugins/woocommerce-blocks/assets/js/previews/cart-block.js
 delete mode 100644 plugins/woocommerce-blocks/assets/js/previews/checkout-block.js

diff --git a/plugins/woocommerce-blocks/assets/img/cart-preview.svg b/plugins/woocommerce-blocks/assets/img/cart-preview.svg
deleted file mode 100644
index bf40f4ca3f0..00000000000
--- a/plugins/woocommerce-blocks/assets/img/cart-preview.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 250">
-  <g fill="#E1E3E6" fill-rule="evenodd">
-    <g transform="translate(0 43)">
-      <path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
-      <rect width="28" height="14" x="87" rx="2"/>
-      <path d="M38 10h44v8H38zM0 38h148v1H0z"/>
-    </g>
-    <g transform="translate(0 87)">
-      <path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
-      <rect width="28" height="14" x="87" rx="2"/>
-      <path d="M38 10h44v8H38zM0 38h148v1H0z"/>
-    </g>
-    <g transform="translate(0 131)">
-      <path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
-      <rect width="28" height="14" x="87" rx="2"/>
-      <path d="M38 10h44v8H38zM0 38h148v1H0z"/>
-    </g>
-    <path d="M164 0h66v170h-66zM0 24h33v8H0zM120 24h28v8h-28zM87 24h28v8H87zM0 37h148v1H0zM0 0h66v14H0z"/>
-  </g>
-</svg>
diff --git a/plugins/woocommerce-blocks/assets/img/checkout-preview.svg b/plugins/woocommerce-blocks/assets/img/checkout-preview.svg
deleted file mode 100644
index 790fb7dfe07..00000000000
--- a/plugins/woocommerce-blocks/assets/img/checkout-preview.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 250">
-  <g fill="none" fill-rule="evenodd">
-    <g transform="translate(0 72)">
-      <path fill="#E1E3E6" d="M15 33h125V0H15z"/>
-      <circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
-      <path fill="#D8D8D8" d="M5 16h1v23H5z"/>
-    </g>
-    <g transform="translate(0 113)">
-      <path fill="#E1E3E6" d="M15 33h125V0H15z"/>
-      <circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
-      <path fill="#D8D8D8" d="M5 16h1v23H5z"/>
-    </g>
-    <g transform="translate(0 154)">
-      <path fill="#E1E3E6" d="M15 33h125V0H15z"/>
-      <circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
-    </g>
-    <path fill="#E1E3E6" d="M164 0h66v148h-66zM61 57h33v8H61zM107 194h33v11h-33zM15 61h43v1H15zM97 60h43v1H97z"/>
-    <rect width="154" height="50" fill="#E1E3E6" rx="3"/>
-  </g>
-</svg>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
index 58e7845a1bf..b1efab5ce63 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/block-components/feedback-prompt';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -23,7 +24,7 @@ import {
 import { __experimentalCreateInterpolateElement } from 'wordpress-element';
 import { useRef } from '@wordpress/element';
 import { getAdminLink } from '@woocommerce/settings';
-import { previewCart, cartBlockPreview } from '@woocommerce/resource-previews';
+import { previewCart } from '@woocommerce/resource-previews';
 
 /**
  * Internal dependencies
@@ -143,12 +144,12 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
  *       in the frontend.
  */
 const CartEditor = ( { className, attributes, setAttributes } ) => {
-	if ( attributes.isPreview ) {
-		return cartBlockPreview;
-	}
-
 	return (
-		<div className={ className }>
+		<div
+			className={ classnames( className, 'wp-block-woocommerce-cart', {
+				'is-editor-preview': attributes.isPreview,
+			} ) }
+		>
 			<ViewSwitcher
 				label={ __( 'Edit', 'woo-gutenberg-products-block' ) }
 				views={ [
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/editor.scss
index 80dc6e8a37b..c8bb25f59bd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/editor.scss
@@ -1,3 +1,8 @@
 .wc-block-cart__page-notice {
 	margin: 0;
 }
+
+.wp-block-woocommerce-cart.is-editor-preview {
+	max-height: 1000px;
+	overflow: hidden;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
index d692015f40e..66571497988 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/block-components/feedback-prompt';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -25,7 +26,6 @@ import PageSelector from '@woocommerce/block-components/page-selector';
 import {
 	previewCart,
 	previewSavedPaymentMethods,
-	checkoutBlockPreview,
 } from '@woocommerce/resource-previews';
 
 /**
@@ -270,16 +270,19 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
 
 const CheckoutEditor = ( { attributes, setAttributes } ) => {
 	const { className, isPreview } = attributes;
-
-	if ( isPreview ) {
-		return checkoutBlockPreview;
-	}
-
 	return (
 		<EditorProvider
 			previewData={ { previewCart, previewSavedPaymentMethods } }
 		>
-			<div className={ className }>
+			<div
+				className={ classnames(
+					className,
+					'wp-block-woocommerce-checkout',
+					{
+						'is-editor-preview': isPreview,
+					}
+				) }
+			>
 				<BlockSettings
 					attributes={ attributes }
 					setAttributes={ setAttributes }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
index 2557e2800ee..f84ad002c71 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
@@ -22,3 +22,8 @@
 .components-panel__body-title .components-button {
 	opacity: 1;
 }
+
+.wp-block-woocommerce-checkout.is-editor-preview {
+	max-height: 1000px;
+	overflow: hidden;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/previews/cart-block.js b/plugins/woocommerce-blocks/assets/js/previews/cart-block.js
deleted file mode 100644
index 7195e71d898..00000000000
--- a/plugins/woocommerce-blocks/assets/js/previews/cart-block.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_BLOCKS_ASSET_URL } from '@woocommerce/block-settings';
-
-export const cartBlockPreview = (
-	<img
-		src={ WC_BLOCKS_ASSET_URL + 'img/cart-preview.svg' }
-		alt=""
-		width="230"
-		height="250"
-		style={ {
-			width: '100%',
-		} }
-	/>
-);
diff --git a/plugins/woocommerce-blocks/assets/js/previews/checkout-block.js b/plugins/woocommerce-blocks/assets/js/previews/checkout-block.js
deleted file mode 100644
index b3e7d62e608..00000000000
--- a/plugins/woocommerce-blocks/assets/js/previews/checkout-block.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_BLOCKS_ASSET_URL } from '@woocommerce/block-settings';
-
-export const checkoutBlockPreview = (
-	<img
-		src={ WC_BLOCKS_ASSET_URL + 'img/checkout-preview.svg' }
-		alt=""
-		width="230"
-		height="250"
-		style={ {
-			width: '100%',
-		} }
-	/>
-);
diff --git a/plugins/woocommerce-blocks/assets/js/previews/index.js b/plugins/woocommerce-blocks/assets/js/previews/index.js
index 923569598b5..c64cd463cd8 100644
--- a/plugins/woocommerce-blocks/assets/js/previews/index.js
+++ b/plugins/woocommerce-blocks/assets/js/previews/index.js
@@ -5,7 +5,5 @@ export { previewCategories } from './categories';
 export { previewShippingRates } from './shipping-rates';
 export { previewSavedPaymentMethods } from './saved-payment-methods';
 
-export { cartBlockPreview } from './cart-block';
-export { checkoutBlockPreview } from './checkout-block';
 export { gridBlockPreview } from './grid-block';
 export { singleProductBlockPreview } from './single-product-block';