Add installments simulator

_dev/js/blocks/checkout-blik.ts → _dev/js/blocks/checkout-blik.tsx

@@ -1,19 +1,18 @@
-let settings = window.wc.wcSettings.getPaymentMethodData('tpayblik', {});
-let label = window.wp.htmlEntities.decodeEntities(settings.title || 'tpayblik') || window.wp.i18n.__('Tpay', 'tpay');
-const react = window.React;
+import {getSetting} from '@woocommerce/settings';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+import {useEffect} from '@wordpress/element';
+import {decodeEntities} from '@wordpress/html-entities';
 
-const {decodeEntities} = wp.htmlEntities;
-const {getSetting} = wc.wcSettings;
-const {registerPaymentMethod} = wc.wcBlocksRegistry;
-const {useEffect} = wp.element;
+
+let settings = getSetting('tpayblik_data');
 
 function validateBlikZero(code: string): boolean {
     let match: RegExpExecArray | null = /[0-9]{6}/.exec(code);
 
     return !!match;
 }
 
-const Content = (props: { eventRegistration: any; emitResponse: any; }) => {
+const Content = (props) => {
     const {eventRegistration, emitResponse} = props;
     const {onPaymentSetup} = eventRegistration;
 
@@ -34,7 +33,7 @@ const Content = (props: { eventRegistration: any; emitResponse: any; }) => {
                 return blikError();
             }
 
-            if (settings.blikZero && blikCode) {
+            if (settings.blikZero && blikCode !== false) {
                 if (!validateBlikZero(blikCode)) {
                     return blikError();
                 }
@@ -55,13 +54,27 @@ const Content = (props: { eventRegistration: any; emitResponse: any; }) => {
         })
     }, [onPaymentSetup]);
 
-    return react.createElement('div', {dangerouslySetInnerHTML: {__html: settings.fields}});
+    return (
+        <>
+            <div dangerouslySetInnerHTML={{__html: settings.fields}}></div>
+        </>
+    )
+};
+
+let Label = () => {
+    return (
+        <>
+            <label>
+                {decodeEntities(settings.title || 'tpayblik')} <img src={settings.icon} />
+            </label>
+        </>
+    )
 };
 
 const TpayBlikOptions = {
     name: 'tpayblik',
-    label: react.createElement('label', null, `${settings.title} `, react.createElement('img', {src: settings.icon})),
-    content: react.createElement(Content),
+    label: <Label />,
+    content: <Content />,
     edit: null,
     canMakePayment: () => true,
     ariaLabel: settings.title ?? ''

_dev/js/blocks/checkout-cc.tsx

@@ -0,0 +1,38 @@
+import {getSetting} from '@woocommerce/settings';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+
+let settings = getSetting('tpaycc_data');
+
+let Label = () => {
+    return (
+        <>
+            <label>
+                {settings.title} <img src={settings.icon}/>
+            </label>
+        </>
+    );
+};
+
+let Content = () => {
+    return (
+        <>
+            <div dangerouslySetInnerHTML={{__html: settings.fields}}></div>
+        </>
+    )
+};
+
+let Block_Gateway = {
+    name: 'tpaycc',
+    label: <Label/>,
+    content: <Content/>,
+    edit: null,
+    canMakePayment: () => true,
+    ariaLabel: settings.title ?? '',
+    supports: {
+        features: settings.supports,
+    },
+};
+
+registerPaymentMethod(Block_Gateway);
+
+

_dev/js/blocks/checkout-gpay.tsx

@@ -0,0 +1,36 @@
+import {getSetting} from '@woocommerce/settings';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+
+let settings = getSetting('tpaygpay_data');
+
+let Label = () => {
+    return (
+        <>
+            <label>
+                {settings.title} <img src={settings.icon}/>
+            </label>
+        </>
+    );
+};
+
+let Content = () => {
+    return (
+        <>
+            <div dangerouslySetInnerHTML={{__html: settings.fields}}></div>
+        </>
+    )
+};
+
+let Block_Gateway = {
+    name: 'tpaygpay',
+    label: <Label />,
+    content: <Content />,
+    edit: null,
+    canMakePayment: () => true,
+    ariaLabel: settings.title ?? '',
+    supports: {
+        features: settings.supports,
+    },
+};
+
+registerPaymentMethod(Block_Gateway);

_dev/js/blocks/checkout-installments.tsx

@@ -0,0 +1,38 @@
+import {getSetting} from '@woocommerce/settings';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+
+let settings = getSetting('tpayinstallments_data');
+
+let Label = () => {
+    return (
+        <>
+            <label>
+                {settings.title} <img src={settings.icon}/>
+            </label>
+        </>
+    );
+};
+
+let Content = () => {
+    return (
+        <>
+            <div dangerouslySetInnerHTML={{__html: settings.fields}}></div>
+        </>
+    )
+};
+
+let Block_Gateway = {
+    name: 'tpayinstallments',
+    label: <Label/>,
+    content: <Content/>,
+    edit: null,
+    canMakePayment: () => true,
+    ariaLabel: settings.title ?? '',
+    supports: {
+        features: settings.supports,
+    },
+};
+
+registerPaymentMethod(Block_Gateway);
+
+

_dev/js/blocks/checkout-pekao.ts → _dev/js/blocks/checkout-pekao.tsx

@@ -1,10 +1,10 @@
-let settings = wc.wcSettings.getPaymentMethodData('pekaoinstallments', {});
-const react = window.React;
+import {getSetting} from '@woocommerce/settings';
+import {registerPaymentMethod} from '@woocommerce/blocks-registry';
+import {useEffect} from '@wordpress/element';
 
-const {registerPaymentMethod} = wc.wcBlocksRegistry;
-const {useEffect} = wp.element;
+let settings = getSetting('pekaoinstallments_data');
 
-const Content = (props: { eventRegistration: any; emitResponse: any; }) => {
+const Content = (props) => {
     const {eventRegistration, emitResponse} = props;
     const {onPaymentSetup} = eventRegistration;
     useEffect(() => {
@@ -34,13 +34,27 @@ const Content = (props: { eventRegistration: any; emitResponse: any; }) => {
         emitResponse.responseTypes.SUCCESS,
         onPaymentSetup,
     ]);
-    return react.createElement('div', {dangerouslySetInnerHTML: {__html: settings.fields}});
+    return (
+        <>
+            <div dangerouslySetInnerHTML={{__html: settings.fields}}></div>
+        </>
+    )
+};
+
+let Label = () => {
+    return (
+        <>
+            <label>
+                {settings.title} <img src={settings.icon} />
+            </label>
+        </>
+    )
 };
 
 let Block_Gateway = {
     name: 'pekaoinstallments',
-    label: react.createElement('label', null, `${settings.title} `, react.createElement('img', {src: settings.icon})),
-    content: react.createElement(Content),
+    label: <Label />,
+    content: <Content />,
     edit: null,
     canMakePayment: () => true,
     ariaLabel: settings.title ?? '',