Release v7.8.0

Author: Mercado Pago

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-.phpunit.result.cache
+*.cache
 
 clover.xml
 coverage

.php-cs-fixer.php

@@ -0,0 +1,7 @@
+<?php
+
+return (new PhpCsFixer\Config())
+    ->setRules(array_fill_keys([
+        'nullable_type_declaration_for_default_null_value',
+    ], true))
+    ->setFinder(PhpCsFixer\Finder::create()->in(__DIR__));

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [7.8.0] - 2024-09-23
+
+### Changed
+- **Rebranded and revamped the CreditsGateway**, improving overall user experience and aligning the visual identity with our updated brand guidelines, making it more intuitive and modern.
+- **Compressed several images without losing quality**, which reduces the plugin bundle size and leads to faster download and installation times, improving performance without sacrificing visual fidelity.
+- **Removed implicit nullable parameter marking** and replaced it with explicit nullable types, enhancing code clarity and reducing potential bugs related to type handling, thus improving code reliability.
+
+### Fixed
+- **Corrected the support component's link URL**, ensuring users are directed to the appropriate help resources without encountering broken or incorrect links, improving support accessibility.
+
+
 ## [7.7.0] - 2024-09-11
 
 ### Added

Makefile

@@ -3,8 +3,8 @@
 build:
 	./bin/create-release-zip.sh
 
+watch:
+	npm run watch:release
+
 release:
 	./bin/setup-release.sh
-
-sync:
-	./bin/sync-sdk.sh $(tag)

assets/css/checkouts/mp-plugins-components.min.css

@@ -65,6 +65,15 @@
   justify-content: center;
 }
 
+.mp-credits-modal-brand-title {
+  display: flex;
+  justify-content: center;
+}
+
+.mp-credits-modal-brand-title > span {
+  width: 300px !important;
+}
+
 .mp-credits-modal-step-circle {
   width: 26px;
   height: 26px;
@@ -97,7 +106,13 @@
   line-height: 18px;
 }
 
+.mp-credits-modal-info {
+  display: flex;
+  justify-content: center;
+}
+
 .mp-credits-modal-how-to-use {
+  width: 85%;
   display: flex;
   flex-direction: column;
   padding-top: 24px;
@@ -112,7 +127,7 @@
 
 .mp-credits-modal-container-content {
   display: flex;
-  width: 480px;
+  width: 450px;
   padding: 32px;
   flex-direction: column;
   align-items: flex-end;
@@ -251,6 +266,10 @@
     height: 122px !important;
   }
 
+  .mp-credits-modal-how-to-use {
+    width: 75%;
+  }
+
   .mp-credits-modal-container-content {
     width: fit-content;
   }

assets/css/products/credits-modal.css

@@ -0,0 +1,5 @@
+const CheckoutBenefits = ({ title, items, titleAlign = 'left'}) => (
+    <checkout-benefits-list title={title} title-align={titleAlign} items={items}/>
+);
+
+export default CheckoutBenefits;

assets/css/products/credits-modal.min.css

@@ -0,0 +1,5 @@
+const CheckoutRedirectV3 = ({ title, description, src, alt }) => (
+    <checkout-redirect-v3 title={title} description={description} src={src} alt={alt} />
+);
+
+export default CheckoutRedirectV3;

assets/images/checkouts/credits/checkout_preview.png

@@ -0,0 +1,35 @@
+const RowImageSelect = ({text, imgSrc}) => {
+    return (
+        <div style={
+          {
+            height: "18px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignContent: "center",
+            alignItems: "center",
+            flexDirection: "row"
+          }
+        }>
+          <img 
+            style={
+              {
+                marginRight: "8px", 
+                height: "25px",
+                width: "30px",
+                padding: 0
+              }
+            }
+            src={imgSrc} 
+          />
+          <p style={
+            {
+              fontFamily: '"Proxima Nova", -apple-system, "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif', 
+              fontSize: "18px",
+              padding: 0
+            }
+          }>{text}</p>
+        </div>
+      );
+}
+
+export default RowImageSelect;

assets/images/checkouts/credits/es_checkout_preview.png

@@ -7,16 +7,17 @@ import { getSetting } from '@woocommerce/settings';
 import { addDiscountAndCommission, removeDiscountAndCommission } from './helpers/cart-update.helper';
 
 import TestMode from './components/TestMode';
-import ChoRedirectV2 from './components/ChoRedirectV2';
-import CheckoutBenefits from './components/CheckoutBenefits';
+import CheckoutRedirectV3 from './components/CheckoutRedirectV3';
+import CheckoutBenefitsList from './components/CheckoutBenefitsList';
 import TermsAndConditions from './components/TermsAndConditions';
+import RowImageSelect from './components/RowImageSelect';
 import sendMetric from "./helpers/metrics.helper";
 
 const targetName = "mp_checkout_blocks";
 const paymentMethodName = 'woo-mercado-pago-credits';
 
 const settings = getSetting(`woo-mercado-pago-credits_data`, {});
-const defaultLabel = decodeEntities(settings.title) || 'Checkout Creditss';
+const defaultLabel = decodeEntities(settings.title) || 'Checkout Credits';
 
 const updateCart = (props) => {
   const { extensionCartUpdate } = wc.blocksCheckout;
@@ -62,13 +63,15 @@ const updateCart = (props) => {
 
 };
 
-const Label = (props) => {
-  const { PaymentMethodLabel } = props.components;
-
+const Label = () => {
   const feeTitle = decodeEntities(settings?.params?.fee_title || '');
   const text = `${defaultLabel} ${feeTitle}`;
 
-  return <PaymentMethodLabel text={text} />;
+  return (
+    <RowImageSelect
+      text={text}
+      imgSrc={settings.params.checkout_blocks_row_image_src}/>
+  );
 };
 
 const Content = (props) => {
@@ -81,8 +84,8 @@ const Content = (props) => {
     test_mode_link_src,
     checkout_benefits_title,
     checkout_benefits_items,
-    checkout_benefits_tip,
-    checkout_redirect_text,
+    checkout_redirect_title,
+    checkout_redirect_description,
     checkout_redirect_src,
     checkout_redirect_alt,
     terms_and_conditions_description,
@@ -99,8 +102,8 @@ const Content = (props) => {
 
   return (
     <div className="mp-checkout-container">
-      <div className="mp-checkout-pro-container">
-        <div className="mp-checkout-pro-content">
+      <div className="mp-checkout-credits-container">
+        <div className="mp-checkout-credits-content">
           {test_mode ? (
             <TestMode
               title={test_mode_title}
@@ -111,19 +114,20 @@ const Content = (props) => {
           ) : null}
 
           <div class="mp-credits-checkout-benefits">
-            <CheckoutBenefits
+            <CheckoutBenefitsList
               title={checkout_benefits_title}
               items={checkout_benefits_items}
-              titleAlign="center"
-              listMode="image"
+              titleAlign="left"
             />
           </div>
 
-          <div class="mp-checkout-pro-tip">
-              <p>{checkout_benefits_tip}</p>
+          <div class="mp-checkout-credits-redirect">
+            <CheckoutRedirectV3
+              title={checkout_redirect_title}
+              description={checkout_redirect_description}
+              src={checkout_redirect_src}
+              alt={checkout_redirect_alt} />
           </div>
-
-          <ChoRedirectV2 text={checkout_redirect_text} src={checkout_redirect_src} alt={checkout_redirect_alt} />
         </div>
       </div>
 

assets/images/checkouts/credits/es_view_desktop.gif

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities'), 'version' => '5c9b681e20f4f7456c7e');
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities'), 'version' => 'b12dad067a3c500c4037');