fix: amount in installment plan checkout block + update translation

.gitignore

@@ -13,4 +13,9 @@ node_modules/
 .npmrc
 .phpunit.result.cache
 package-lock.json
-.task/
+.task/
+.DS_Store
+.composer/
+src/.DS_Store
+src/.composer/
+src/.subversion/

crowdin.yml.example

@@ -1,10 +1,10 @@
 "project_id" : "17"
-"api_token" : "CROWDIN_ALMA_TOKEN"
+"api_token_env" : "CROWDIN_ALMA_TOKEN"
 "base_path" : "src/"
 "base_url" : "https://almapay.crowdin.com"
 "preserve_hierarchy": true
 
 files:
   -
     source: /languages/alma-gateway-for-woocommerce.pot
-    translation: /languages/alma-gateway-for-woocommerce-%locale_with_underscore%.po
+    translation: /languages/alma-gateway-for-woocommerce-%locale_with_underscore%.po

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@alma/react-components": "^2.37.1",
+    "@wordpress/i18n": "^5.12.0",
     "postcss": "^8.4.35",
     "react-intl": "^6.6.2"
   }

src/assets/js/components/Installments/Installment.tsx

@@ -1,17 +1,22 @@
 import React from "react";
-import { FormattedDate, FormattedMessage, FormattedNumber } from "react-intl";
+import { FormattedDate, FormattedNumber } from "react-intl";
 import classNames from "classnames";
+import {__} from "@wordpress/i18n";
 
 type Props = {
   installment: any;
   totalAmountInEuros: number;
 };
 
 export const Installment: React.FC<Props> = ({
-  installment: { due_date, localized_due_date }, totalAmountInEuros
+  installment: { due_date }, totalAmountInEuros
 }: Props) => {
   const date = new Date(due_date * 1000);
-  const isToday = localized_due_date === "today";
+  const dateToday = new Date();
+  const dateTodayWithoutHour = new Intl.DateTimeFormat().format(dateToday);
+  const dateWithoutHour = new Intl.DateTimeFormat().format(date);
+
+  const isToday = dateWithoutHour === dateTodayWithoutHour;
 
   return (
     <div
@@ -22,7 +27,7 @@ export const Installment: React.FC<Props> = ({
       <div className={classNames("bullet", { firstBullet: isToday })} />
       <div className={"installment"} data-testid="installment">
         {isToday ? (
-          <FormattedMessage id="installments.today" defaultMessage="Today" />
+            __( 'Today', 'alma-gateway-for-woocommerce' )
         ) : (
           <FormattedDate
             value={date}

src/assets/js/components/Installments/InstallmentsContent.tsx

@@ -21,27 +21,26 @@ export const InstallmentsContent: React.FC<InstallmentsContentProps> = ({
   const centsToEuros = (cents : number) => {
     return cents /100
   }
-
     return (
     <>
       <div className={"separator"} />
       <div className={"installments"}>
         {feePlan.paymentPlan.map((installment: PaymentPlan, index: number) => (
           <Installment
-            key={`${installment.due_date}-${installment.customer_fee}-${installment.purchase_amount}`}
+            key={index}
             installment={installment}
-            totalAmountInEuros={index === 0 ? centsToEuros(amountInCents) + centsToEuros(customerFees) : centsToEuros(amountInCents)}
+            totalAmountInEuros={centsToEuros(installment.total_amount)}
           />
         ))}
       </div>
       <div className={"footerCard"}>
         <CardFooter className={"footer"}>
           <InstallmentsTotal
             totalAmount={amountInCents}
-            customerFees={feePlan.paymentPlan[0].customer_fee}
+            customerFees={customerFees}
           />
           <InstallmentsTotalFees
-            customerFees={feePlan.paymentPlan[0].customer_fee}
+            customerFees={customerFees}
           />
         </CardFooter>
       </div>

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

@@ -1,6 +1,7 @@
 import React from "react";
-import {FormattedMessage, FormattedNumber} from "react-intl";
+import {FormattedNumber} from "react-intl";
 import "./InstallmentsTotal.css";
+import { __ } from '@wordpress/i18n';
 
 type Props = {
     totalAmount: number;
@@ -13,7 +14,7 @@ export const InstallmentsTotal: React.FC<Props> = ({totalAmount, customerFees})
         return (
             <div className={"total"}>
                 <div>
-                    <FormattedMessage id="installments.total" defaultMessage="Total TTC"/>
+                    {__( 'Total incl. VAT', 'alma-gateway-for-woocommerce' )}
                 </div>
                 <div>
                     <FormattedNumber

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

@@ -1,14 +1,17 @@
 import React from "react";
 import "./InstallmentsTotal.css";
 import {FormattedNumber} from "react-intl";
+import {__} from "@wordpress/i18n";
 
 type Props = {
   customerFees: number;
 };
 
 export const InstallmentsTotalFees: React.FC<Props> = ({customerFees}) => (
   <div className={"fees"}>
-    <div>Payment costs</div>
+    <div>
+        {__( 'Payment costs', 'alma-gateway-for-woocommerce' )}
+    </div>
     <div className={"feesNumbers"}><FormattedNumber
       value={customerFees / 100}
       style="currency"

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-data', 'wp-element'), 'version' => '34f2e04d5d1de70bce2f');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '23af4fd34c1818c028a7');