Skip to content

Commit

Permalink
inPage / not inPage blocks now work together
Browse files Browse the repository at this point in the history
  • Loading branch information
@CamilleFljt
CamilleFljt committed Mar 26, 2024
1 parent ff873e3 commit 6865eb0
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 137 deletions.
262 changes: 133 additions & 129 deletions src/assets/js/alma-checkout-blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,169 +9,173 @@

// phpcs:ignoreFile

import {useEffect, useState} from '@wordpress/element';
import {Logo} from '@alma/react-components'
import {AlmaBlocks} from "./components/alma-blocks-component.tsx";
import '../css/alma-checkout-blocks.css'
import { useEffect, useState } from '@wordpress/element';
import { Logo } from '@alma/react-components';
import { AlmaBlocks } from "./components/alma-blocks-component.tsx";
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 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'];
var inPage = undefined;
var hasInPage = false;
var billingAddress = {};
var shippingAddress = {};
var customerNote = '';

$.each(gateways, function( index, gateway ) {

const settings = window.wc.wcSettings.getSetting(`${gateway}_data`, null);
$.each(gateways, function (index, gateway) {
const settings = window.wc.wcSettings.getSetting(`${gateway}_data`, null);

if (!settings) {
return;
}
if (!settings) {
return
}

const label = window.wp.htmlEntities.decodeEntities(settings.title);
const Label = props => {
const {PaymentMethodLabel} = props.components;
const icon = <Logo style={{width: 'auto', height: '1em'}} logo="alma-orange"/>
const text = <div>{settings.title}</div>
return <span className='paymentMethodLabel'>
<PaymentMethodLabel text={text} icon={icon}/>
const label = window.wp.htmlEntities.decodeEntities(settings.title);
const Label = props => {
const { PaymentMethodLabel } = props.components;
const icon = <Logo style={{ width: 'auto', height: '1em' }} logo="alma-orange" />
const text = <div>{settings.title}</div>
return <span className='paymentMethodLabel'>
<PaymentMethodLabel text={text} icon={icon} />
</span>
};
}

function DisplayAlmaBlocks(props) {
const [selectedFeePlan, setSelectedFeePlan] = useState(settings.default_plan)
const {eventRegistration, emitResponse} = props;

// 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();
function DisplayAlmaBlocks(props) {
const [selectedFeePlan, setSelectedFeePlan] = useState(settings.default_plan)
const { eventRegistration, emitResponse } = props;

// 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();
}
inPage = Alma.InPage.initialize(
{
merchantId: settingsInPage.merchant_id,
amountInCents: settings.amount_in_cents,
installmentsCount: settings.plans[selectedFeePlan].installmentsCount,
selector: "#alma-inpage-alma_in_page",
environment: settingsInPage.environment,
locale: settingsInPage.locale,
}
);
}

console.log(settings.plans[selectedFeePlan].paymentPlan[0].purchase_amount, 'settingsInPage')
// Each time the settings change, we need to unmout the iframe and remount it with the new settings
useEffect(() => {
if (
settings.gateway_name === 'alma_in_page_pay_now'
|| settings.gateway_name === 'alma_in_page_pay_later'
|| settings.gateway_name === 'alma_in_page') {
initializeInpage(settings)
}
}, [settings, selectedFeePlan])

inPage = Alma.InPage.initialize(
{
merchantId: settingsInPage.merchant_id,
amountInCents: settings.amount_in_cents,
installmentsCount: settings.plans[selectedFeePlan].installmentsCount,
selector: "#alma-inpage-alma_in_page",
environment: settingsInPage.environment,
locale: settingsInPage.locale,
}
);
}
useEffect(() => {
// removeEventListener('onCheckoutBeforeProcessing')
billingAddress = props.billing.billingAddress

// Each time the settings change, we need to unmout the iframe and remount it with the new settings
useEffect(() => {
initializeInpage(settings)
}, [settings, selectedFeePlan])
if (props.shippingData.shippingAddress) {
shippingAddress = props.shippingData.shippingAddress
}
}, [props]);

if (
settings.gateway_name === 'alma_in_page_pay_now'
|| settings.gateway_name === 'alma_in_page_pay_later'
|| settings.gateway_name === 'alma_in_page') {
window.addEventListener(
'load',
(event) => {

function add_loader() {
var loading = "<div class='loadingIndicator'><img src='https://cdn.almapay.com/img/animated-logo-a.svg' alt='Loading' /></div>";
$("body").append("<div class='alma-loader-wrapper'>" + loading + "</div>");
}

useEffect(() => {
// removeEventListener('onCheckoutBeforeProcessing')
billingAddress = props.billing.billingAddress

if (props.shippingData.shippingAddress) {
shippingAddress = props.shippingData.shippingAddress
// todo ne devrait pas etre dans la boucle
addActionToPaymentButton()
}
}, [props]);

if (!settings.is_in_page) {
const {onPaymentSetup} = eventRegistration;
useEffect(
() => {
const unsubscribe = onPaymentSetup(
async () => {
// Here we can do any processing we need, and then emit a response.
// For example, we might validate a custom field, or perform an AJAX request, and then emit a response indicating it is valid or not.
const nonceKey = `alma_checkout_nonce${settings.gateway_name}`;
const paymentMethodData = {
[nonceKey]: `${settings.nonce_value}`,
alma_fee_plan: selectedFeePlan,
payment_method: settings.gateway_name,
}
)
return <>
<AlmaBlocks hasInPage={settings.is_in_page} settings={settings} selectedFeePlan={selectedFeePlan}
setSelectedFeePlan={setSelectedFeePlan} />
<div id='alma-inpage-alma_in_page'></div>
</>
}

return {
type: emitResponse.responseTypes.SUCCESS,
meta: {
paymentMethodData
}
};
else {
const { onPaymentSetup } = eventRegistration;
useEffect(
() => {
const unsubscribe = onPaymentSetup(
async () => {
// Here we can do any processing we need, and then emit a response.
// For example, we might validate a custom field, or perform an AJAX request, and then emit a response indicating it is valid or not.
const nonceKey = `alma_checkout_nonce${settings.gateway_name}`;
const paymentMethodData = {
[nonceKey]: `${settings.nonce_value}`,
alma_fee_plan: selectedFeePlan,
payment_method: settings.gateway_name,
}
);
// Unsubscribes when this component is unmounted.
return () => {
unsubscribe();
};
},
[
emitResponse.responseTypes.ERROR,
emitResponse.responseTypes.SUCCESS,
onPaymentSetup,
selectedFeePlan
]
);
return (
<AlmaBlocks hasInPage={settings.is_in_page} settings={settings} selectedFeePlan={selectedFeePlan}
setSelectedFeePlan={setSelectedFeePlan}/>
)
}


if (settings.is_in_page) {
window.addEventListener(
'load',
(event) => {

function add_loader() {
var loading = "<div class='loadingIndicator'><img src='https://cdn.almapay.com/img/animated-logo-a.svg' alt='Loading' /></div>";
$("body").append("<div class='alma-loader-wrapper'>" + loading + "</div>");
return {
type: emitResponse.responseTypes.SUCCESS,
meta: {
paymentMethodData
}
};
}
);
// Unsubscribes when this component is unmounted.
return () => {
unsubscribe();
};
},
[
emitResponse.responseTypes.ERROR,
emitResponse.responseTypes.SUCCESS,
onPaymentSetup,
selectedFeePlan
]
);
return (
<AlmaBlocks hasInPage={settings.is_in_page} settings={settings} selectedFeePlan={selectedFeePlan}
setSelectedFeePlan={setSelectedFeePlan} />


// todo ne devrait pas etre dans la boucle
addActionToPaymentButton()
}
)
return <>
<AlmaBlocks hasInPage={settings.is_in_page} settings={settings} selectedFeePlan={selectedFeePlan}
setSelectedFeePlan={setSelectedFeePlan}/>
<div id='alma-inpage-alma_in_page'></div>
</>
}
// customerNote = props.customerNote
)
}

// customerNote = props.customerNote
}

const Block_Gateway_Alma = {
name: settings.gateway_name,
label: <Label/>,
content: <DisplayAlmaBlocks/>, // phpcs:ignore
edit: <DisplayAlmaBlocks/>, // phpcs:ignore
placeOrderButtonLabel: settings.label_button,
canMakePayment: () => true,
ariaLabel: label
};

window.wc.wcBlocksRegistry.registerPaymentMethod(Block_Gateway_Alma);
const Block_Gateway_Alma = {
name: settings.gateway_name,
label: <Label />,
content: <DisplayAlmaBlocks />, // phpcs:ignore
edit: <DisplayAlmaBlocks />, // phpcs:ignore
placeOrderButtonLabel: settings.label_button,
canMakePayment: () => true,
ariaLabel: label
};

if (settings.is_in_page) {
hasInPage = true
}
window.wc.wcBlocksRegistry.registerPaymentMethod(Block_Gateway_Alma);

if (settings.is_in_page) {
hasInPage = true
}

}
);

$( 'body' ).on(
$('body').on(
'change',
'input[type=\'radio\'][name=\'radio-control-wc-payment-method-options\']',
function() {
function () {
document.getElementsByClassName("wc-block-components-checkout-place-order-button")[0].removeEventListener("click", addActionToPaymentButtonListener);
addActionToPaymentButton()
}
Expand All @@ -185,7 +189,7 @@ import '../css/alma-checkout-blocks.css'
}

const addActionToPaymentButtonListener = (event) => {
const gateway = $( "input[type='radio'][name='radio-control-wc-payment-method-options']:checked" ).val();
const gateway = $("input[type='radio'][name='radio-control-wc-payment-method-options']:checked").val();

const settings = window.wc.wcSettings.getSetting(`${gateway}_data`, null);

Expand Down
2 changes: 1 addition & 1 deletion src/build/alma-checkout-blocks.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'wp-element'), 'version' => '6c9a5a4a0725a6410eb7');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-element'), 'version' => 'a6545eb71eba0f44b00f');
14 changes: 7 additions & 7 deletions src/build/alma-checkout-blocks.js
View file

Large diffs are not rendered by default.

0 comments on commit 6865eb0

Please sign in to comment.