diff --git a/src/assets/js/alma-checkout-blocks.js b/src/assets/js/alma-checkout-blocks.js index fb8c1495..28df0601 100644 --- a/src/assets/js/alma-checkout-blocks.js +++ b/src/assets/js/alma-checkout-blocks.js @@ -10,173 +10,109 @@ // phpcs:ignoreFile import {useEffect, useState} from '@wordpress/element'; -import {select} from '@wordpress/data'; -import {Logo} from '@alma/react-components'; -import {AlmaBlocks} from "./components/alma-blocks-component.tsx"; +import {select, useSelect} from '@wordpress/data'; +import {fetchAlmaEligibility} from "./hooks/fetchAlmaEligibility"; +import {Label} from "./components/Label"; +import {DisplayAlmaBlocks} from "./components/DisplayAlmaBlocks"; +import {DisplayAlmaInPageBlocks} from "./components/DisplayAlmaInPageBlocks"; import '../css/alma-checkout-blocks.css'; (function ($) { - const gateways = ['alma_pay_now', 'alma_in_page_pay_now', 'alma', 'alma_in_page', 'alma_pay_later', 'alma_in_page_pay_later', 'alma_pnx_plus_4']; + const store_key = 'alma/alma-store' var inPage = undefined; - var propsData = null; - var globalSelectedFeePlan = null; - - $.each(gateways, function (index, gateway) { - const settings = window.wc.wcSettings.getSetting(`${gateway}_data`, null); - - if (!settings) { - return - } - - const label = window.wp.htmlEntities.decodeEntities(settings.title); - const Label = props => { - const {PaymentMethodLabel} = props.components; - const icon = - const text =
{settings.title}
- return - - - } - - function DisplayAlmaBlocks(props) { - const {CART_STORE_KEY} = window.wc.wcBlocksData - const cartStore = select(CART_STORE_KEY) - const {total_price} = (cartStore.getCartTotals()) - const [selectedFeePlan, setSelectedFeePlan] = useState(settings.default_plan) - const {eventRegistration, emitResponse} = props; - const { - onCheckoutValidationBeforeProcessing - } = eventRegistration; - propsData = props - - useEffect(() => { - globalSelectedFeePlan = selectedFeePlan; - }, [selectedFeePlan]); - - useEffect(() => { - const unsubscribe = onCheckoutValidationBeforeProcessing(() => { - return true - }); - return unsubscribe; - }, [onCheckoutValidationBeforeProcessing - ]); - - - // There cannot be two iframes in the same page, so this is the function to unmount it - function initializeInpage(settingsInPage) { - if ( - inPage !== undefined - && document.getElementById('alma-embedded-iframe') !== null - ) { - inPage.unmount(); - } + const {CART_STORE_KEY} = window.wc.wcBlocksData + + const CartObserver = () => { + // Subscribe to the cart total + const {cartTotal} = useSelect((select) => ({ + cartTotal: select(CART_STORE_KEY).getCartTotals() + }), []); + + // Subscribe to the eligibility + const {eligibility} = useSelect( + (select) => ({ + eligibility: select(store_key).getAlmaEligibility() + }), [] + ); - inPage = Alma.InPage.initialize({ - merchantId: settingsInPage.merchant_id, - amountInCents: total_price, - installmentsCount: settings.plans[selectedFeePlan].installmentsCount, - selector: "#alma-inpage-alma_in_page", - deferredDays: settings.plans[selectedFeePlan].deferredDays, - deferredMonths: settings.plans[selectedFeePlan].deferredMonths, - environment: settingsInPage.environment, - locale: settingsInPage.locale, - }); + // Use the cart total to fetch the new eligibility + useEffect(() => { + // BlockData is a global variable defined in the PHP file with the wp_localize_script function + fetchAlmaEligibility(store_key, BlocksData.url) + }, [cartTotal]); + + // Register the payment gateway blocks + useEffect(() => { + // For each gateway in eligibility result, we register a block + for (const gateway in eligibility) { + const settings = window.wc.wcSettings.getSetting(`${gateway}_data`, null) + const is_in_page = settings.is_in_page + const blockContent = getContentBlock(is_in_page, settings, cartTotal, gateway) + + const Block_Gateway_Alma = { + name: settings.gateway_name, + label: ( +