Add better state management utilizing Redux

modules/ppcp-axo-block/resources/js/components/CreditCard.js

@@ -11,7 +11,12 @@ const cardIcons = {
 	UNIONPAY: 'unionpay-light.svg',
 };
 
-export const CreditCard = ( { card, shippingAddress, fastlaneSdk } ) => {
+export const CreditCard = ( {
+	card,
+	shippingAddress,
+	fastlaneSdk,
+	showWatermark = true,
+} ) => {
 	const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
 	const { fullName } = shippingAddress?.name ?? {};
 
@@ -48,11 +53,13 @@ export const CreditCard = ( { card, shippingAddress, fastlaneSdk } ) => {
 					</div>
 				</div>
 				<div className="wc-block-checkout-axo-block-card__watermark">
-					<FastlaneWatermark
-						fastlaneSdk={ fastlaneSdk }
-						name="wc-block-checkout-axo-card-watermark"
-						includeAdditionalInfo={ false }
-					/>
+					{ showWatermark && (
+						<FastlaneWatermark
+							fastlaneSdk={ fastlaneSdk }
+							name="wc-block-checkout-axo-card-watermark"
+							includeAdditionalInfo={ false }
+						/>
+					) }
 				</div>
 			</div>
 		</div>

modules/ppcp-axo-block/resources/js/components/FastlaneWatermark.js

@@ -1,21 +1,46 @@
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 export const FastlaneWatermark = ( {
 	fastlaneSdk,
 	name = 'fastlane-watermark-container',
 	includeAdditionalInfo = true,
 } ) => {
-	// This web component can be instantiated inside of a useEffect.
-	useEffect( () => {
-		( async () => {
-			const watermark = await fastlaneSdk.FastlaneWatermarkComponent( {
-				includeAdditionalInfo,
-			} );
-			// The ID can be a react element
-			watermark.render( `#${ name }` );
-		} )();
-	}, [] );
+	const containerRef = useRef( null );
+	const watermarkRef = useRef( null );
 
-	// Give the react element the ID that you will render the watermark component into.
-	return <div id={ name } />;
+	useEffect( () => {
+		const renderWatermark = async () => {
+			if ( ! containerRef.current ) {
+				return;
+			}
+
+			// Clear the container
+			containerRef.current.innerHTML = '';
+
+			try {
+				const watermark = await fastlaneSdk.FastlaneWatermarkComponent(
+					{
+						includeAdditionalInfo,
+					}
+				);
+
+				watermarkRef.current = watermark;
+				watermark.render( `#${ name }` );
+
+				console.log( 'Watermark rendered successfully' );
+			} catch ( error ) {
+				console.error( 'Error rendering watermark:', error );
+			}
+		};
+
+		renderWatermark();
+
+		return () => {
+			if ( containerRef.current ) {
+				containerRef.current.innerHTML = '';
+			}
+		};
+	}, [ fastlaneSdk, name, includeAdditionalInfo ] );
+
+	return <div id={ name } ref={ containerRef } />;
 };

modules/ppcp-axo-block/resources/js/components/Payment.js

@@ -1,13 +1,18 @@
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { CreditCard } from './CreditCard';
+import { STORE_NAME } from '../stores/axoStore';
 
 export const Payment = ( {
 	fastlaneSdk,
 	card,
 	shippingAddress,
-	isGuest,
 	onPaymentLoad,
 } ) => {
+	const isGuest = useSelect( ( select ) =>
+		select( STORE_NAME ).getIsGuest()
+	);
+
 	// Memoized Fastlane card rendering
 	const loadPaymentComponent = useCallback( async () => {
 		if ( isGuest ) {
@@ -31,6 +36,7 @@ export const Payment = ( {
 			card={ card }
 			shippingAddress={ shippingAddress }
 			fastlaneSdk={ fastlaneSdk }
+			showWatermark={ ! isGuest }
 		/>
 	);
 };