Fix bug with cart not updating (#1258)

* fix bug with add to cart

* prettier

* migrate to Event

* prettier

* Update assets/js/atomic/components/product/button/index.js

update to fix on sequential adds

Co-Authored-By: Albert Juhé Lluveras <[email protected]>

* Avoid dispatching cart update event on initial mount

* add condition to check if Event is defined

Author: senadir

assets/js/atomic/components/product/button/index.js

@@ -80,6 +80,8 @@ const useAddToCart = ( productId ) => {
 	};
 };
 
+const Event = window.Event || {};
+
 const ProductButton = ( { product, className } ) => {
 	const {
 		id,
@@ -97,6 +99,7 @@ const ProductButton = ( { product, className } ) => {
 	} = useAddToCart( id );
 	const { layoutStyleClassPrefix } = useProductLayoutContext();
 	const addedToCart = cartQuantity > 0;
+	const firstMount = useRef( true );
 	const getButtonText = () => {
 		if ( Number.isFinite( cartQuantity ) && addedToCart ) {
 			return sprintf(
@@ -106,6 +109,29 @@ const ProductButton = ( { product, className } ) => {
 		}
 		return productCartDetails.text;
 	};
+
+	// This is a hack to trigger cart updates till we migrate to block based card
+	// that relies on the store, see
+	// https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1247
+	useEffect( () => {
+		if ( firstMount.current ) {
+			firstMount.current = false;
+			return;
+		}
+		// Test if we have our Event defined
+		if ( Object.entries( Event ).length !== 0 ) {
+			const event = new Event( 'wc_fragment_refresh', {
+				bubbles: true,
+				cancelable: true,
+			} );
+			document.body.dispatchEvent( event );
+		} else {
+			const event = document.createEvent( 'Event' );
+			event.initEvent( 'wc_fragment_refresh', true, true );
+			document.body.dispatchEvent( event );
+		}
+	}, [ cartQuantity ] );
+
 	const wrapperClasses = classnames(
 		className,
 		`${ layoutStyleClassPrefix }__product-add-to-cart`,