Refactor 'Hide shipping costs' Cart attribute logic (https://github.com/woocommerce/woocommerce-blocks/pull/1909)

* Use kebab-case for Cart block attributes

* Simplify Cart edit function

* Refactor showShippingCosts logic

* Update snapshots

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js

@@ -61,8 +61,8 @@ const CartFrontend = ( {
 const getProps = ( el ) => ( {
 	emptyCart: el.innerHTML,
 	isShippingCalculatorEnabled:
-		el.dataset.isshippingcalculatorenabled === 'true',
+		el.dataset.isShippingCalculatorEnabled === 'true',
-	isShippingCostHidden: el.dataset.isshippingcosthidden === 'true',
+	isShippingCostHidden: el.dataset.isShippingCostHidden === 'true',
 } );
 
 const getErrorBoundaryProps = () => {

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js

@@ -4,7 +4,6 @@
  */
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
 import {
 	SubtotalsItem,
 	TotalsFeesItem,
@@ -106,9 +105,6 @@ const Cart = ( {
 } ) => {
 	const { updateShippingAddress, shippingRatesLoading } = useShippingRates();
 	const shippingAddress = shippingRates[ 0 ]?.destination;
-	const [ showShippingCosts, setShowShippingCosts ] = useState(
-		! isShippingCostHidden
-	);
 	const {
 		applyCoupon,
 		removeCoupon,
@@ -116,21 +112,11 @@ const Cart = ( {
 		isRemovingCoupon,
 	} = useStoreCartCoupons();
 
-	useEffect( () => {
+	const showShippingCosts = Boolean(
-		if ( ! SHIPPING_ENABLED ) {
+		SHIPPING_ENABLED &&
-			return setShowShippingCosts( false );
+			isShippingCalculatorEnabled &&
-		}
+			( ! isShippingCostHidden || shippingAddress?.country )
-		if ( isShippingCalculatorEnabled ) {
+	);
-			if ( isShippingCostHidden ) {
-				if ( shippingAddress?.country ) {
-					return setShowShippingCosts( true );
-				}
-			} else {
-				return setShowShippingCosts( true );
-			}
-		}
-		return setShowShippingCosts( false );
-	}, [ isShippingCalculatorEnabled, isShippingCostHidden, shippingAddress ] );
 
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js

@@ -14,7 +14,7 @@ import {
 /**
  * Internal dependencies
  */
-import Editor from './edit';
+import edit from './edit';
 import { example } from './example';
 import './style.scss';
 
@@ -47,14 +47,7 @@ const settings = {
 		},
 	},
 
-	/**
+	edit,
-	 * Renders the edit view for a block.
-	 *
-	 * @param {Object} props Props to pass to block.
-	 */
-	edit( props ) {
-		return <Editor { ...props } />;
-	},
 
 	/**
 	 * Save the props to post content.
@@ -66,8 +59,8 @@ const settings = {
 			isShippingCostHidden,
 		} = attributes;
 		const data = {
-			'data-isshippingcalculatorenabled': isShippingCalculatorEnabled,
+			'data-is-shipping-calculator-enabled': isShippingCalculatorEnabled,
-			'data-isshippingcosthidden': isShippingCostHidden,
+			'data-is-shipping-cost-hidden': isShippingCostHidden,
 		};
 		return (
 			<div

plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/cart.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Cart Block can be created 1`] = `
 "<!-- wp:woocommerce/cart -->
-<div class=\\"wp-block-woocommerce-cart is-loading\\" data-isshippingcalculatorenabled=\\"true\\" data-isshippingcosthidden=\\"false\\"><!-- wp:image {\\"align\\":\\"center\\",\\"sizeSlug\\":\\"small\\"} -->
+<div class=\\"wp-block-woocommerce-cart is-loading\\" data-is-shipping-calculator-enabled=\\"true\\" data-is-shipping-cost-hidden=\\"false\\"><!-- wp:image {\\"align\\":\\"center\\",\\"sizeSlug\\":\\"small\\"} -->
 <div class=\\"wp-block-image\\"><figure class=\\"aligncenter size-small\\"><img src=\\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDBDOC41MDQwMyAwIDAgOC41MDQwMyAwIDE5QzAgMjkuNDk2IDguNTA0MDMgMzggMTkgMzhDMjkuNDk2IDM4IDM4IDI5LjQ5NiAzOCAxOUMzOCA4LjUwNDAzIDI5LjQ5NiAwIDE5IDBaTTI1LjEyOSAxMi44NzFDMjYuNDg1MSAxMi44NzEgMjcuNTgwNiAxMy45NjY1IDI3LjU4MDYgMTUuMzIyNkMyNy41ODA2IDE2LjY3ODYgMjYuNDg1MSAxNy43NzQyIDI1LjEyOSAxNy43NzQyQzIzLjc3MyAxNy43NzQyIDIyLjY3NzQgMTYuNjc4NiAyMi42Nzc0IDE1LjMyMjZDMjIuNjc3NCAxMy45NjY1IDIzLjc3MyAxMi44NzEgMjUuMTI5IDEyLjg3MVpNMTEuNjQ1MiAzMS4yNTgxQzkuNjE0OTIgMzEuMjU4MSA3Ljk2Nzc0IDI5LjY0OTIgNy45Njc3NCAyNy42NTczQzcuOTY3NzQgMjYuMTI1IDEwLjE1MTIgMjMuMDI5OCAxMS4xNTQ4IDIxLjY5NjhDMTEuNCAyMS4zNjczIDExLjg5MDMgMjEuMzY3MyAxMi4xMzU1IDIxLjY5NjhDMTMuMTM5MSAyMy4wMjk4IDE1LjMyMjYgMjYuMTI1IDE1LjMyMjYgMjcuNjU3M0MxNS4zMjI2IDI5LjY0OTIgMTMuNjc1NCAzMS4yNTgxIDExLjY0NTIgMzEuMjU4MVpNMTIuODcxIDE3Ljc3NDJDMTEuNTE0OSAxNy43NzQyIDEwLjQxOTQgMTYuNjc4NiAxMC40MTk0IDE1LjMyMjZDMTAuNDE5NCAxMy45NjY1IDExLjUxNDkgMTIuODcxIDEyLjg3MSAxMi44NzFDMTQuMjI3IDEyLjg3MSAxNS4zMjI2IDEzLjk2NjUgMTUuMzIyNiAxNS4zMjI2QzE1LjMyMjYgMTYuNjc4NiAxNC4yMjcgMTcuNzc0MiAxMi44NzEgMTcuNzc0MlpNMjUuOTEwNSAyOS41ODc5QzI0LjE5NDQgMjcuNTM0NyAyMS42NzM4IDI2LjM1NDggMTkgMjYuMzU0OEMxNy4zNzU4IDI2LjM1NDggMTcuMzc1OCAyMy45MDMyIDE5IDIzLjkwMzJDMjIuNDAxNiAyMy45MDMyIDI1LjYxMTcgMjUuNDA0OCAyNy43ODc1IDI4LjAyNUMyOC44NDQ4IDI5LjI4MTUgMjYuOTI5NCAzMC44MjE0IDI1LjkxMDUgMjkuNTg3OVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\\" alt=\\"\\"/></figure></div>
 <!-- /wp:image -->