Merge pull request #263 from alma/develop

Release 3.1.2

.pre-commit-config.yaml

@@ -82,4 +82,4 @@ repos:
     hooks:
       - id: check-branch-name
         args:
-          - "-r^((chore|ci|dependabot|devx|docs|feature|fix|hotfix|hotfix-backport|infra|other|perf|refactor|security|test)\/.+|(snyk)-.+|main|HEAD)$$"
+          - "-r^((chore|ci|dependabot|devx|docs|feature|fix|hotfix|hotfix-backport|infra|other|perf|refactor|security|test)\/.+|(snyk)-.+|main|develop|HEAD)$$"

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v3.1.2
+
+- hotfix: Select payment In-Page without open the modal and try to pay with other payment method
+- fix: Add loader payment button on Prestashop 1.6 before loading In-Page
+
 ## v3.1.1
 
 - hotfix: Pay now is broken if In-Page is disabled

Makefile

@@ -1,6 +1,7 @@
 .PHONY: dist
-dist: clean install-tools
-	./scripts/build-dist.sh
+dist: clean
+	docker build -t alma_prestashop_builder:latest scripts/build/
+	docker run --rm -u $(shell id -u):$(shell id -g) -w ${PWD} -v "${PWD}:${PWD}" alma_prestashop_builder:latest /bin/sh scripts/build/build-dist-docker.sh
 
 .PHONY: clean
 clean:

alma/.htaccess

@@ -9,7 +9,6 @@
 # Apache 2.4
 <IfModule mod_authz_core.c>
    <Files *.php>
-   order allow,deny
-   deny from all
+   Require all denied
    </Files>
 </IfModule>

alma/alma.php

@@ -30,7 +30,7 @@
 
 class Alma extends PaymentModule
 {
-    const VERSION = '3.1.1';
+    const VERSION = '3.1.2';
 
     public $_path;
     public $local_path;
@@ -65,7 +65,7 @@ public function __construct()
     {
         $this->name = 'alma';
         $this->tab = 'payments_gateways';
-        $this->version = '3.1.1';
+        $this->version = '3.1.2';
         $this->author = 'Alma';
         $this->need_instance = false;
         $this->bootstrap = true;

alma/views/css/admin/almaPage.css

@@ -160,7 +160,8 @@ fieldset .form-alma.disabled::before{
     top: 49%;
 }
 
-.bootstrap .alma.alert {
+.bootstrap .alma.alert,
+#main-div .alma.alert{
     font-family: 'Public-Sans', sans-serif;
     font-weight: 300;
     padding-left: 180px;
@@ -171,53 +172,64 @@ fieldset .form-alma.disabled::before{
     border-radius: 4px;
 }
 
-.bootstrap .alma.alert h2, .bootstrap .alma.alert .btn {
+.bootstrap .alma.alert h2, .bootstrap .alma.alert .btn,
+#main-div .alma.alert h2, #main-div .alma.alert .btn{
     font-family: 'Eina04-Bold', sans-serif;
     font-weight: 400;
 }
 
-.bootstrap .alma.alert b{
+.bootstrap .alma.alert b,
+#main-div .alma.alert b{
     font-weight: 600;
 }
 
-.bootstrap .alma.alert .h2, .bootstrap .alma.alert h2 {
+.bootstrap .alma.alert .h2, .bootstrap .alma.alert h2,
+#main-div .alma.alert .h2, #main-div .alma.alert h2{
     font-size: 24px;
 }
 
-.bootstrap .alma.alert.alert-info {
+.bootstrap .alma.alert.alert-info,
+#main-div .alma.alert.alert-info{
     background-color: #E9F4FF;
     border: 1px solid #E1E4E6;
     color: #00425D;
     font-size: 16px;
 }
 
-.bootstrap .alma.alert.alert-info:before {
+.bootstrap .alma.alert.alert-info:before,
+#main-div .alma.alert.alert-info:before{
     content: '';
 }
 
-.bootstrap .alma.alert ul {
+.bootstrap .alma.alert ul,
+#main-div .alma.alert ul{
     list-style-type: disc;
     padding-left: 40px;
 }
 
-.bootstrap .alma.alert.alert-info a:not(.btn) {
+.bootstrap .alma.alert.alert-info a:not(.btn),
+#main-div .alma.alert.alert-info a:not(.btn){
     color: #00425D;
     text-decoration: underline;
 }
 
-.bootstrap .alma.alert .btn {
+.bootstrap .alma.alert .btn,
+#main-div .alma.alert .btn{
     line-height: 1;
     padding: 12px 16px;
     border: 2px solid transparent;
     border-radius: 4px;
     text-transform: uppercase;
+    text-decoration: none;
 }
-.bootstrap .alma.alert .btn.btn-default {
+.bootstrap .alma.alert .btn.btn-default,
+#main-div .alma.alert .btn.btn-default{
     background: #FFFFFF;
     border-color: #00425D;
     color: #00425D;
 }
-.bootstrap .alma.alert .btn.btn-primary {
+.bootstrap .alma.alert .btn.btn-primary,
+#main-div .alma.alert .btn.btn-primary{
     background: #00425D;
     border-color: #00425D;
     color: #FFFFFF;

alma/views/css/alma.css

@@ -206,6 +206,10 @@ p.payment_module a.disable-arrow-icon {
     font-weight: normal;
 }
 
+/**
+-- In-Page
+*/
+
 .alma-loader--wrapper {
     position: fixed;
     left: 0;
@@ -225,3 +229,69 @@ p.payment_module a.disable-arrow-icon {
     justify-content: center;
     height: 100%;
 }
+
+.alma-inpage.ps16.loading.disabled{
+    pointer-events: none;
+}
+
+.alma-button-with-bkg .alma-loader-dot-container {
+    height: fit-content;
+    display: flex !important;
+    column-gap: 6px;
+    justify-content: center;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    background-color: #fa5022;
+    border-radius: 50%;
+}
+
+.one {
+    animation: change-color 1.34s normal 0.1s infinite, bounce 1.34s linear 0s infinite;
+}
+
+.two {
+    animation: change-color 1.34s normal 0.34s infinite, bounce 1.34s linear 0.24s infinite;
+}
+
+.three {
+    animation: change-color 1.34s normal 0.58s infinite, bounce 1.34s linear 0.48s infinite;
+}
+
+@keyframes bounce {
+    0%,
+    40%,
+    63%,
+    100% {
+        transform: translateY(0);
+    }
+
+    26% {
+        transform: translateY(-7px);
+    }
+
+    47% {
+        transform: translateY(1px);
+    }
+}
+
+@keyframes change-color {
+    0%,
+    13%,
+    63%,
+    100% {
+        background-color: #fa5022;
+    }
+
+    40% {
+        background-color: #ff5147;
+    }
+}

alma/views/js/alma-inpage.js

@@ -26,38 +26,49 @@ let paymentButtonEvents = [];
 
 window.addEventListener("load", function() {
     onloadAlma();
+    window.__alma_refreshInpage = onloadAlma;
 });
 
+function removeLoaderButtonPayment(button) {
+    button.classList.remove('disabled', 'loading');
+    let dots = button.querySelector('.alma-loader-dot-container');
+    if (dots) {
+        dots.remove();
+    }
+}
+
 function onloadAlma() {
-    let radioButtons = document.querySelectorAll('input[name="payment-option"][data-module-name=alma]');
+    let radioButtons = document.querySelectorAll('input[name="payment-option"]');
 
     //Prestashop 1.7+
     radioButtons.forEach(function (input) {
         input.addEventListener("change", function () {
             let paymentOptionId = input.getAttribute('id');
             let blockForm = document.querySelector('#pay-with-' + paymentOptionId + '-form');
-            let formInpage = blockForm.querySelector('.alma-inpage');
             removeAlmaEventsFromPaymentButton();
             if (inPage !== undefined) {
                 inPage.unmount();
             }
-            if (this.dataset.moduleName === 'alma' && this.checked && formInpage) {
-                let installment = formInpage.dataset.installment;
-                if (installment === '1') {
-                    blockForm.hidden = true;
-                }
-                let url = formInpage.dataset.action;
-
-                inPage = createAlmaIframe(formInpage);
+            if (this.dataset.moduleName === 'alma') {
+                let formInpage = blockForm.querySelector('.alma-inpage');
+                if (this.checked && formInpage) {
+                    let installment = formInpage.dataset.installment;
+                    if (installment === '1') {
+                        blockForm.hidden = true;
+                    }
+                    let url = formInpage.dataset.action;
 
-                mapPaymentButtonToAlmaPaymentCreation(url, inPage, input);
+                    inPage = createAlmaIframe(formInpage);
+                    mapPaymentButtonToAlmaPaymentCreation(url, inPage, input);
+                }
             }
         });
     });
 
     //Prestashop 1.6-
     let paymentButtonsPs16 = document.querySelectorAll(".alma-inpage.ps16");
     paymentButtonsPs16.forEach(function (button) {
+        removeLoaderButtonPayment(button);
         button.addEventListener('click', function (e) {
             e.preventDefault();
             let paymentOptionId = this.getAttribute('id');

alma/views/templates/hook/_partials/displayPayment_deferred.tpl

@@ -48,7 +48,14 @@
         <div class="row">
             <div class="col-xs-12">
                 <p class="payment_module">
-                    <a href="{$option.link}" class="{if $option.isInPageEnabled}alma-inpage ps16{/if} {$almaButton} {$iconDisplay}" id="payment-option-{$option.paymentOptionKey}">
+                    <a href="{$option.link}" class="{if $option.isInPageEnabled}alma-inpage ps16 loading disabled{/if} {$almaButton} {$iconDisplay}" id="payment-option-{$option.paymentOptionKey}">
+                        {if $option.isInPageEnabled}
+                            <span class="alma-loader-dot-container">
+                                <span class="dot one"></span>
+                                <span class="dot two"></span>
+                                <span class="dot three"></span>
+                            </span>
+                        {/if}
                         <span class="alma-button--logo">
                             <img src="{$option.logo|escape:'htmlall':'UTF-8'}" alt="Alma">
                         </span>
@@ -63,6 +70,7 @@
                             </span>
                         </span>
                     </a>
+                    <script type="text/javascript">window.__alma_refreshInpage && __alma_refreshInpage();</script>
                 </p>
             </div>
             {if $option.isInPageEnabled}

alma/views/templates/hook/_partials/displayPayment_pnx.tpl

@@ -48,7 +48,15 @@
         <div class="row">
             <div class="col-xs-12">
                 <p class="payment_module">
-                    <a href="{$option.link}"  class="{if $option.isInPageEnabled}alma-inpage ps16{/if} {$almaButton} {$iconDisplay}" id="payment-option-{$option.paymentOptionKey}">
+                    <a href="{$option.link}" class="{if $option.isInPageEnabled}alma-inpage ps16 loading disabled{/if} {$almaButton} {$iconDisplay}" id="payment-option-{$option.paymentOptionKey}">
+                        {if $option.isInPageEnabled}
+                            <span class="alma-loader-dot-container">
+                                <span class="dot one"></span>
+                                <span class="dot two"></span>
+                                <span class="dot three"></span>
+                            </span>
+                        {/if}
+
                         <span class="alma-button--logo">
                             <img src="{$option.logo|escape:'htmlall':'UTF-8'}" alt="Alma">
                         </span>                        
@@ -64,6 +72,7 @@
                             </span>
                         </span>
                     </a>
+                    <script type="text/javascript">window.__alma_refreshInpage && __alma_refreshInpage();</script>
                 </p>
             </div>
             {if $option.isInPageEnabled}

scripts/build/Dockerfile

@@ -0,0 +1,9 @@
+FROM composer:2.2 AS composer
+FROM php:5.6-cli-alpine AS php
+
+# Prepare Packages requirements
+RUN apk update && apk add zip
+
+COPY --from=composer /usr/bin/composer /usr/bin/composer
+
+ENTRYPOINT []

scripts/build/build-dist-docker.sh

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+
+# Build alma.zip from the module's source directory
+
+SRC_DIR=$(pwd)
+BUILD_DIR="/tmp/build/alma"
+
+mkdir -p $BUILD_DIR
+cp CHANGELOG.md $SRC_DIR/alma/
+cp -r $SRC_DIR/alma/* $BUILD_DIR
+cp $SRC_DIR/alma/.htaccess $BUILD_DIR/
+
+if [ ! -d "./dist" ]; then
+  mkdir ./dist
+fi
+
+cd $BUILD_DIR
+
+rm -f composer.lock config.xml config_*.xml phpunit.ci.xml phpunit.dist.xml
+rm -rf tests vendor 
+
+php /usr/bin/composer install --no-dev --optimize-autoloader
+php /usr/bin/composer dump-autoload --optimize
+php vendor/bin/autoindex prestashop:add:index
+
+cd ..
+
+zip -9 -r "$SRC_DIR/dist/alma.zip" alma --exclude "*/*/.*" "*/build.sh" "*/dist" "*/docker*"
+
+rm -rf $BUILD_DIR
+rm -rf "$SRC_DIR/alma/CHANGELOG.md"