Merge pull request #230 from alma/feature/ecom-1402-wc-blocks-pnx-and…

…-credit-blocks-are-displayed

Feature/ecom 1402 wc blocks pnx and credit blocks are displayed

src/assets/js/alma-checkout-blocks.js

@@ -44,12 +44,12 @@ import '../css/alma-checkout-blocks.css'
         function DisplayAlmaBlocks(props) {
             const [selectedFeePlan, setSelectedFeePlan] = useState(settings.default_plan)
             const {eventRegistration, emitResponse} = props;
-            
+
             if (!settings.is_in_page) {
-                const {onPaymentProcessing} = eventRegistration;
+                const {onPaymentSetup} = eventRegistration;
                 useEffect(
                     () => {
-                        const unsubscribe = onPaymentProcessing(
+                        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.
@@ -76,7 +76,8 @@ import '../css/alma-checkout-blocks.css'
                     [
                         emitResponse.responseTypes.ERROR,
                         emitResponse.responseTypes.SUCCESS,
-                        onPaymentProcessing,
+                        onPaymentSetup,
+                        selectedFeePlan
                     ]
                 );
                 return (
@@ -97,6 +98,7 @@ import '../css/alma-checkout-blocks.css'
 
         }
 
+
         const Block_Gateway_Alma = {
             name: settings.gateway_name,
             label: <Label/>,

src/assets/js/components/Installments/InstallmentsTotal/InstallmentsTotalFees.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 import "./InstallmentsTotal.css";
+import {FormattedNumber} from "react-intl";
 
 type Props = {
   customerFees: number;
 };
 
-export const InstallmentsTotalFees: React.FC<Props> = ({ customerFees }) => (
+export const InstallmentsTotalFees: React.FC<Props> = ({customerFees}) => (
   <div className={"fees"}>
     <div>Payment costs</div>
-    <div className={"feesNumbers"}>{customerFees} € </div>
+    <div className={"feesNumbers"}><FormattedNumber
+      value={customerFees / 100}
+      style="currency"
+      currency="EUR"
+    />
+    </div>
   </div>
 );

src/assets/js/components/alma-blocks-component.tsx

@@ -67,7 +67,11 @@ export const AlmaBlocks: React.FC<AlmaBlocksProps> = (
   Object.keys(settings.plans).forEach(function (key, index) {
     values.push(key);
     if (settings.gateway_name === "alma_pay_later") {
-      labels[key] = "+" + settings.plans[key].deferredDays;
+      if (settings.plans[key].deferredDays > 0){
+        labels[key] = "D+" + settings.plans[key].deferredDays;
+      } else if (settings.plans[key].deferredMonths > 0){
+        labels[key] = "M+" + settings.plans[key].deferredMonths;
+      }
     } else {
       labels[key] = settings.plans[key].installmentsCount + "x";
     }

src/build/alma-checkout-blocks.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-element'), 'version' => 'e5d4ee68bbe0e17fced8');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-element'), 'version' => '3e13f8ef10e106e226d4');