From dd2e1a97f14d8be84efba65c587570c4a2b47bdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 23 Mar 2023 12:16:26 +0100
Subject: [PATCH] Refactor variants

---
 .../mini-cart-cart-button-block/block.tsx        |  7 ++-----
 .../mini-cart-cart-button-block/edit.tsx         |  7 ++-----
 .../mini-cart-checkout-button-block/block.tsx    |  7 ++-----
 .../mini-cart-checkout-button-block/edit.tsx     |  7 ++-----
 .../mini-cart-shopping-button-block/block.tsx    |  7 ++-----
 .../mini-cart-shopping-button-block/edit.tsx     |  7 ++-----
 .../mini-cart-contents/inner-blocks/utils.ts     | 16 ++++++++++++++++
 7 files changed, 28 insertions(+), 30 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 4038780d0ee..d00afbfa8b4 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -10,6 +10,7 @@ import { useColorProps } from '@woocommerce/base-hooks';
  * Internal dependencies
  */
 import { defaultCartButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartCartButtonBlockProps = {
 	cartButtonLabel: string;
@@ -28,10 +29,6 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-fill' )
-		? 'contained'
-		: 'outlined';
-
 	return (
 		<Button
 			className={ classNames(
@@ -41,7 +38,7 @@ const Block = ( {
 			) }
 			style={ { ...colorProps.style } }
 			href={ CART_URL }
-			variant={ variant }
+			variant={ getVariant( className, 'outlined' ) }
 		>
 			{ cartButtonLabel || defaultCartButtonLabel }
 		</Button>
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
index 33cd4d64b56..e85e93a2bf3 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/edit.tsx
@@ -8,6 +8,7 @@ import EditableButton from '@woocommerce/editor-components/editable-button';
  * Internal dependencies
  */
 import { defaultCartButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -21,15 +22,11 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { cartButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-fill' )
-		? 'contained'
-		: 'outlined';
-
 	return (
 		<EditableButton
 			{ ...blockProps }
 			className="wc-block-mini-cart__footer-cart"
-			variant={ variant }
+			variant={ getVariant( blockProps.className, 'outlined' ) }
 			value={ cartButtonLabel }
 			placeholder={ defaultCartButtonLabel }
 			onChange={ ( content ) => {
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 564ec15b7dc..251bbef6bc8 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -10,6 +10,7 @@ import { useColorProps } from '@woocommerce/base-hooks';
  * Internal dependencies
  */
 import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartCheckoutButtonBlockProps = {
 	checkoutButtonLabel: string;
@@ -28,10 +29,6 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<Button
 			className={ classNames(
@@ -39,7 +36,7 @@ const Block = ( {
 				colorProps.className,
 				'wc-block-mini-cart__footer-checkout'
 			) }
-			variant={ variant }
+			variant={ getVariant( className, 'contained' ) }
 			style={ { ...colorProps.style } }
 			href={ CHECKOUT_URL }
 		>
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
index ba4f0fedc3a..c6a6e96eba4 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
@@ -9,6 +9,7 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import { defaultCheckoutButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -22,10 +23,6 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { checkoutButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<EditableButton
 			{ ...blockProps }
@@ -33,7 +30,7 @@ export const Edit = ( {
 				'wc-block-mini-cart__footer-checkout',
 				blockProps.className
 			) }
-			variant={ variant }
+			variant={ getVariant( blockProps.className, 'contained' ) }
 			value={ checkoutButtonLabel }
 			placeholder={ defaultCheckoutButtonLabel }
 			onChange={ ( content ) => {
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
index 54cc7a854dc..91806e64d85 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
@@ -9,6 +9,7 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import { defaultStartShoppingButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 type MiniCartShoppingButtonBlockProps = {
 	className: string;
@@ -23,10 +24,6 @@ const Block = ( {
 		return null;
 	}
 
-	const variant = className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
@@ -34,7 +31,7 @@ const Block = ( {
 					className,
 					'wc-block-mini-cart__shopping-button'
 				) }
-				variant={ variant }
+				variant={ getVariant( className, 'contained' ) }
 				href={ SHOP_URL }
 			>
 				{ startShoppingButtonLabel || defaultStartShoppingButtonLabel }
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
index 28586082307..f8af7f0d6fb 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
@@ -8,6 +8,7 @@ import EditableButton from '@woocommerce/editor-components/editable-button';
  * Internal dependencies
  */
 import { defaultStartShoppingButtonLabel } from './constants';
+import { getVariant } from '../utils';
 
 export const Edit = ( {
 	attributes,
@@ -21,10 +22,6 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	const { startShoppingButtonLabel } = attributes;
 
-	const variant = blockProps.className.includes( 'is-style-outline' )
-		? 'outlined'
-		: 'contained';
-
 	return (
 		<div className="wp-block-button aligncenter">
 			<EditableButton
@@ -37,7 +34,7 @@ export const Edit = ( {
 						startShoppingButtonLabel: content,
 					} );
 				} }
-				variant={ variant }
+				variant={ getVariant( blockProps.className, 'contained' ) }
 			/>
 		</div>
 	);
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts
new file mode 100644
index 00000000000..f3c3cad9635
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/utils.ts
@@ -0,0 +1,16 @@
+type Variant = 'text' | 'contained' | 'outlined';
+
+export const getVariant = (
+	className: string,
+	defaultVariant: Variant
+): Variant => {
+	if ( className.includes( 'is-style-outline' ) ) {
+		return 'outlined';
+	}
+
+	if ( className.includes( 'is-style-fill' ) ) {
+		return 'contained';
+	}
+
+	return defaultVariant;
+};