Add support for card icons to Axo Block and move the Change Card Link handling to the store. Also migrate the Change Card Link markup management logic to React

modules/ppcp-axo-block/resources/js/hooks/useCardOptions.js

@@ -0,0 +1,36 @@
+import { useMemo } from '@wordpress/element';
+
+const DEFAULT_ALLOWED_CARDS = [ 'VISA', 'MASTERCARD', 'AMEX', 'DISCOVER' ];
+
+/**
+ * Custom hook to determine the allowed card options based on configuration.
+ *
+ * @param {Object} axoConfig - The AXO configuration object.
+ * @return {Array} The final list of allowed card options.
+ */
+const useCardOptions = ( axoConfig ) => {
+	const merchantCountry = axoConfig.merchant_country || 'US';
+
+	return useMemo( () => {
+		const allowedCards = new Set(
+			axoConfig.allowed_cards?.[ merchantCountry ] ||
+				DEFAULT_ALLOWED_CARDS
+		);
+
+		// Create a Set of disabled cards, converting each to uppercase
+		const disabledCards = new Set(
+			( axoConfig.disable_cards || [] ).map( ( card ) =>
+				card.toUpperCase()
+			)
+		);
+
+		// Filter out disabled cards from the allowed cards
+		const finalCardOptions = [ ...allowedCards ].filter(
+			( card ) => ! disabledCards.has( card )
+		);
+
+		return finalCardOptions;
+	}, [ axoConfig.allowed_cards, axoConfig.disable_cards, merchantCountry ] );
+};
+
+export default useCardOptions;