[SPIKE] 3DS iframe for token payments

.github/workflows/php.yml

@@ -88,6 +88,9 @@ jobs:
   phpunit:
     name: PHPUnit
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        presta-versions: [ '8.0.0', 'latest' ]
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -111,5 +114,9 @@ jobs:
 
       - run: composer install
 
+      - name: Pull PrestaShop files (Tag ${{ matrix.presta-versions }})
+        run: docker run -tid --rm -v ps-volume:/var/www/html --name temp-ps prestashop/prestashop:${{ matrix.presta-versions }}
+
       - name: Run PHPUnit
-        run: php vendor/bin/phpunit tests/Unit
+        run: docker run --rm --volumes-from temp-ps -v $PWD:/var/www/html/modules/ps_checkout -e _PS_ROOT_DIR_=/var/www/html/ --workdir=/var/www/html/modules/ps_checkout php:7.2 ./vendor/bin/phpunit -c ./tests/Unit/phpunit.xml
+#        run: php vendor/bin/phpunit tests/Unit

_dev/js/front/src/api/ps-checkout.api.js

@@ -227,4 +227,35 @@ export class PsCheckoutApi extends BaseClass {
       })
     );
   }
+
+  postDeleteVaultedToken(data) {
+    return fetch(this.config.vaultUrl, {
+      method: 'post',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      ...(data ? { body: JSON.stringify({action: 'deleteToken', ...data}) } : {})
+    })
+      .then((response) => {
+        const contentType = response.headers.get('content-type');
+        const isJsonResponse =
+          contentType && contentType.indexOf('application/json') !== -1;
+
+        if (isJsonResponse) {
+          if (false === response.ok || response.status >= 400) {
+            return response.json().then((response) => {
+              throw response.body && response.body.error
+                ? response.body.error
+                : { message: this.$('checkout.form.error.label') };
+            });
+          }
+
+          return response.json();
+        }
+
+        throw new Error(this.$('checkout.form.error.label'));
+      });
+  }
 }

_dev/js/front/src/components/1_6/express-button-product.component.js

@@ -43,24 +43,11 @@ export class ExpressButtonProductComponent extends BaseComponent {
 
     buttonContainer.append(this.checkoutExpressButton);
 
-    const {
-      id_product,
-      id_product_attribute,
-      id_customization,
-      quantity_wanted
-    } = this.prestashopService.getProductDetails();
-
     this.children.expressCheckoutButton = new ExpressCheckoutButtonComponent(
       this.app,
       {
         fundingSource: 'paypal',
-        querySelector: '#ps-checkout-express-button',
-        data: {
-          id_product,
-          id_product_attribute,
-          id_customization,
-          quantity_wanted
-        }
+        querySelector: '#ps-checkout-express-button'
       }
     ).render();
 

_dev/js/front/src/components/1_6/pay-later-button-product.component.js

@@ -47,24 +47,11 @@ export class PayLaterButtonProductComponent extends BaseComponent {
       buttonContainer.append(this.checkoutExpressButton);
     }
 
-    const {
-      id_product,
-      id_product_attribute,
-      id_customization,
-      quantity_wanted
-    } = this.prestashopService.getProductDetails();
-
     this.children.expressCheckoutButton = new ExpressCheckoutButtonComponent(
       this.app,
       {
         fundingSource: 'paylater',
-        querySelector: '#ps-checkout-express-button',
-        data: {
-          id_product,
-          id_product_attribute,
-          id_customization,
-          quantity_wanted
-        }
+        querySelector: '#ps-checkout-express-button'
       }
     ).render();
 

_dev/js/front/src/components/1_6/payment-options.component.js

@@ -78,7 +78,8 @@ export class PaymentOptionsComponent extends BaseComponent {
         if (
           this.config.expressCheckout.active &&
           'ps_checkout-' + this.payPalService.getFundingSource() !==
-            HTMLListenerElements[index].button.dataset.moduleName
+            HTMLListenerElements[index].button.dataset.moduleName &&
+          this.payPalService.getOrderId()
         ) {
           this.psCheckoutApi
             .postCancelOrder({

_dev/js/front/src/components/1_7/express-button-product.component.js

@@ -51,24 +51,11 @@ export class ExpressButtonProductComponent extends BaseComponent {
       this.updateButtonContainerVisibility();
     });
 
-    const {
-      id_product,
-      id_product_attribute,
-      id_customization,
-      quantity_wanted
-    } = this.prestashopService.getProductDetails();
-
     this.children.expressCheckoutButton = new ExpressCheckoutButtonComponent(
       this.app,
       {
         fundingSource: 'paypal',
-        querySelector: `#${BUTTON_CONTAINER_SELECTOR}`,
-        data: {
-          id_product,
-          id_product_attribute,
-          id_customization,
-          quantity_wanted
-        }
+        querySelector: `#${BUTTON_CONTAINER_SELECTOR}`
       }
     ).render();
 

_dev/js/front/src/components/1_7/pay-later-button-product.component.js

@@ -55,24 +55,11 @@ export class PayLaterButtonProductComponent extends BaseComponent {
       this.updateButtonContainerVisibility();
     });
 
-    const {
-      id_product,
-      id_product_attribute,
-      id_customization,
-      quantity_wanted
-    } = this.prestashopService.getProductDetails();
-
     this.children.expressCheckoutButton = new ExpressCheckoutButtonComponent(
       this.app,
       {
         fundingSource: 'paylater',
-        querySelector: `#${BUTTON_CONTAINER_SELECTOR}`,
-        data: {
-          id_product,
-          id_product_attribute,
-          id_customization,
-          quantity_wanted
-        }
+        querySelector: `#${BUTTON_CONTAINER_SELECTOR}`
       }
     ).render();
 

_dev/js/front/src/components/1_7/payment-options.component.js

@@ -69,7 +69,8 @@ export class PaymentOptionsComponent extends BaseComponent {
         if (
           this.config.expressCheckout.active &&
           'ps_checkout-' + this.payPalService.getFundingSource() !==
-            radio.dataset.moduleName
+            radio.dataset.moduleName &&
+          this.payPalService.getOrderId()
         ) {
           this.psCheckoutApi
             .postCancelOrder({

_dev/js/front/src/components/common/card-fields.component.js

@@ -186,6 +186,18 @@ export class CardFieldsComponent extends BaseComponent {
     this.toggleCardFieldsErrors();
   }
 
+  getVaultFormData() {
+    if (this.data.HTMLElementCardForm) {
+      const formData = new FormData(this.data.HTMLElementCardForm);
+      return {
+        vault: formData.get(`ps_checkout-vault-payment-${this.data.name}`) === '1',
+        favorite: formData.get(`ps_checkout-favorite-payment-${this.data.name}`) === '1'
+      };
+
+    }
+    return {};
+  }
+
   renderPayPalCardFields() {
     this.data.HTMLElementCardForm.classList.toggle('loading', true);
 
@@ -223,10 +235,10 @@ export class CardFieldsComponent extends BaseComponent {
 
             return this.psCheckoutApi
               .postCreateOrder({
+                ...this.getVaultFormData(),
                 ...data,
                 fundingSource: this.data.name,
-                isHostedFields: true
-                // vault: storeCardInVault
+                isCardFields: true
               })
               .then((data) => {
                 this.data.orderId = data;

_dev/js/front/src/components/common/express-checkout-button.component.js

@@ -22,6 +22,7 @@ export class ExpressCheckoutButtonComponent extends BaseComponent {
   static Inject = {
     payPalService: 'PayPalService',
     psCheckoutApi: 'PsCheckoutApi',
+    prestashopService: 'PrestashopService',
     $: '$'
   };
 
@@ -88,7 +89,22 @@ export class ExpressCheckoutButtonComponent extends BaseComponent {
   }
 
   createOrder(data) {
-    const extraData = this.props?.data ? this.props.data : {};
+    let extraData = {};
+
+    if (this.prestashopService.isProductPage()) {
+      let {
+        id_product,
+        id_product_attribute,
+        id_customization,
+        quantity_wanted
+      } = this.prestashopService.getProductDetails();
+      extraData = {
+        id_product,
+        id_product_attribute,
+        id_customization,
+        quantity_wanted
+      };
+    }
 
     return this.psCheckoutApi
       .postCreateOrder({

_dev/js/front/src/components/common/iframe.component.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+import { BaseComponent } from '../../core/dependency-injection/base.component';
+
+export class IframeComponent extends BaseComponent {
+  static Inject = {
+    querySelectorService: 'QuerySelectorService',
+    config: 'PsCheckoutConfig',
+    $: '$'
+  };
+
+  created() {
+    this.data.parent = this.querySelectorService.getLoaderParent();
+    this.data.src = this.props.src;
+    this.data.onConfirm = this.props.onConfirm || (() => {});
+    this.data.onClose = this.props.onClose || (() => {});
+  }
+
+  render() {
+    this.overlay = document.createElement('div');
+    this.overlay.classList.add('ps-checkout', 'overlay');
+
+    this.iframe = document.createElement('iframe');
+    this.iframe.src = this.data.src;
+    this.iframe.classList.add('ps-checkout', 'ps-checkout-iframe');
+
+    this.overlay.append(this.iframe);
+    this.data.parent.append(this.overlay);
+
+    return this;
+  }
+
+  reload(url = null) {
+    if (url) {
+      this.iframe.src = url;
+    }
+    this.iframe.contentWindow.location.reload();
+  }
+
+  show() {
+    this.overlay.classList.add('visible');
+    document.body.style.overflow = 'hidden';
+  }
+
+  hide() {
+    this.overlay.classList.remove('visible');
+    document.body.style.overflow = '';
+  }
+}

_dev/js/front/src/components/common/marker.component.js

@@ -48,7 +48,7 @@ export class MarkComponent extends BaseComponent {
     const src = this.config.customMark[this.data.name];
     let logoList = [];
 
-    if (this.config.cardSupportedBrands && this.config.cardLogoBrands) {
+    if (this.data.name === 'card' && this.config.cardSupportedBrands && this.config.cardLogoBrands) {
       this.config.cardSupportedBrands.forEach(brand => {
         if (this.config.cardLogoBrands[brand]) {
           let customMarkImg = document.createElement('img');