Feature/pre 3550

Makefile

@@ -50,8 +50,6 @@ install-sylius:
 	${COMPOSER} require --dev sylius/test-application:"^${SYLIUS_VERSION}@alpha" -n -W # TODO: Remove alpha when stable
 	${COMPOSER} test-application:install
 
-
-
 behat-configure: ## Configure Behat
 	(cd ${TEST_DIRECTORY} && cp behat.yml.dist behat.yml)
 	(cd ${TEST_DIRECTORY} && sed -i "s#vendor/sylius/sylius/src/Sylius/Behat/Resources/config/suites.yml#vendor/${PLUGIN_NAME}/tests/Behat/Resources/suites.yml#g" behat.yml)

assets/controllers.json

@@ -16,6 +16,13 @@
                     "@payplug/sylius-payplug-plugin/shop/dist/payment/integrated.css": true
                 }
             },
+            "hosted-fields": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "@payplug/sylius-payplug-plugin/shop/dist/payment/hosted-fields.css": true
+                }
+            },
             "oney-payment": {
                 "enabled": true,
                 "fetch": "lazy"

assets/package.json

@@ -34,6 +34,15 @@
           "@payplug/sylius-payplug-plugin/shop/dist/payment/integrated.css": true
         }
       },
+      "hosted-fields": {
+        "main": "shop/controllers/hosted-fields_controller.js",
+        "webpackMode": "lazy",
+        "fetch": "lazy",
+        "enabled": true,
+        "autoimport": {
+          "@payplug/sylius-payplug-plugin/shop/dist/payment/hosted-fields.css": true
+        }
+      },
       "oney-payment": {
         "main": "shop/controllers/oney-payment_controller.js",
         "webpackMode": "lazy",

assets/shop/controllers/hosted-fields_controller.js

@@ -0,0 +1,170 @@
+import { Controller } from '@hotwired/stimulus';
+
+const ALLOWED_BRANDS = ['CB', 'VISA', 'MASTERCARD'];
+
+// Applied inside each hosted iframe (Dalenys renders these rules into the field's own
+// document). The SDK only accepts a small whitelist of CSS properties here — anything
+// outside it (we tried "height": SDK logged "Css property ... is not supported" and threw,
+// which aborted ALL fields, not just the one it complained about) — so stick to exactly the
+// properties confirmed by PayPlug's own documented example (font-size/color/font-style).
+// Background and sizing/centering of the field's content are NOT controllable this way.
+const FIELD_STYLE = {
+  input: {
+    'font-size': '14px',
+    color: '#2B343D',
+    'background-color': 'transparent',
+  },
+  '::placeholder': {
+    'font-size': '14px',
+    color: '#969a9f',
+  },
+};
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['container', 'error', 'submitButton'];
+
+  connect() {
+    if (typeof payplug_hosted_fields_params === 'undefined') {
+      return;
+    }
+
+    this.form = this.element.closest('form');
+    this.hfields = null;
+
+    if (this.hasSubmitButtonTarget) {
+      this.submitButtonTarget.addEventListener('click', (event) => {
+        event.preventDefault();
+        this.tokenizeAndSubmit();
+      });
+    }
+
+    // Stimulus connects as soon as the markup is in the DOM, even though the payment method
+    // container starts hidden (see shop/select_payment/choice.html.twig). Mounting the
+    // cross-origin Dalenys iframes into a display:none container breaks their rendering, so
+    // load them only once this payment method is actually selected.
+    const isChecked = this.getPaymentMethodSelectors({
+      methodCode: payplug_hosted_fields_params.payment_method_code,
+      checked: true,
+    });
+    if (isChecked.length) {
+      this.openFields();
+    }
+
+    this.getPaymentMethodSelectors().forEach((element) => {
+      element.addEventListener('change', (e) => {
+        if (payplug_hosted_fields_params.payment_method_code === e.currentTarget.value && e.currentTarget.checked) {
+          this.openFields();
+        }
+      });
+    });
+  }
+
+  handleShow(event) {
+    if (this.hasContainerTarget) {
+      import('jquery').then(({ default: $ }) => {
+        $(this.containerTarget).slideDown();
+      });
+      this.openFields();
+      this.containerTarget.dataset.paymentInlineSubmit = "true";
+      this.element.dispatchEvent(new CustomEvent('payment-method-state-change', { bubbles: true }));
+    }
+  }
+
+  handleHide(event) {
+    if (this.hasContainerTarget) {
+      import('jquery').then(({ default: $ }) => {
+        $(this.containerTarget).slideUp();
+      });
+      this.closeFields();
+      this.containerTarget.dataset.paymentInlineSubmit = "false";
+      this.element.dispatchEvent(new CustomEvent('payment-method-state-change', { bubbles: true }));
+    }
+  }
+
+  getPaymentMethodSelectors({ methodCode, checked } = {}) {
+    const baseSelector = '[id*=checkout_select_payment_payments]';
+
+    if (methodCode) {
+      if (checked) {
+        return document.querySelectorAll(`${baseSelector}[value=${methodCode}]:checked`);
+      }
+      return document.querySelectorAll(`${baseSelector}[value=${methodCode}]`);
+    }
+    return document.querySelectorAll(baseSelector);
+  }
+
+  openFields() {
+    if (this.hasContainerTarget) {
+      this.containerTarget.classList.add('payplugHostedFields--loaded');
+    }
+    if (null === this.hfields) {
+      this.load();
+    }
+  }
+
+  closeFields() {
+    if (this.hasContainerTarget) {
+      this.containerTarget.classList.remove('payplugHostedFields--loaded');
+    }
+  }
+
+  load() {
+    this.hfields = window.dalenys.hostedFields({
+      companyId: payplug_hosted_fields_params.companyId,
+      fields: {
+        brand: { id: 'brand-container', style: FIELD_STYLE },
+        card: { id: 'card-container', style: FIELD_STYLE },
+        expiry: { id: 'expiry-container', style: FIELD_STYLE },
+        cryptogram: { id: 'cvv-container', style: FIELD_STYLE },
+      },
+      location: payplug_hosted_fields_params.locale,
+    });
+    this.hfields.load();
+  }
+
+  tokenizeAndSubmit() {
+    if (null === this.hfields) {
+      // Fields were never mounted (payment method not selected yet): nothing to tokenize.
+      return;
+    }
+
+    this.hideError();
+    this.hfields.createToken((result) => {
+      if (result.execCode !== '0000') {
+        this.showError(payplug_hosted_fields_params.error.tokenization_failed);
+        return;
+      }
+
+      const selectedBrand = (result.selectedBrand || '').toUpperCase();
+      if (!ALLOWED_BRANDS.includes(selectedBrand)) {
+        this.showError(payplug_hosted_fields_params.error.unsupported_brand);
+        return;
+      }
+
+      const saveCardElement = this.element.querySelector('#hostedfields_savecard');
+      const saveCard = null !== saveCardElement && saveCardElement.checked;
+
+      this.form.querySelector('#hostedfields_token').value = result.hfToken;
+      this.form.querySelector('#hostedfields_selected_brand').value = selectedBrand;
+      this.form.querySelector('#hostedfields_save_card').value = saveCard ? 'true' : 'false';
+      this.form.submit();
+    });
+  }
+
+  showError(message) {
+    if (!this.hasErrorTarget) {
+      return;
+    }
+    this.errorTarget.textContent = message;
+    this.errorTarget.classList.remove('payplugHostedFields__error--hide');
+  }
+
+  hideError() {
+    if (!this.hasErrorTarget) {
+      return;
+    }
+    this.errorTarget.textContent = '';
+    this.errorTarget.classList.add('payplugHostedFields__error--hide');
+  }
+}

assets/shop/dist/payment/hosted-fields.css

@@ -0,0 +1,169 @@
+.payplugHostedFields {
+    justify-self: center;
+    display: none
+}
+
+.payplugHostedFields * {
+    font-family: Poppins, Arial, sans-serif !important
+}
+
+.payplugHostedFields--loaded {
+    width: 100%;
+    max-width: 400px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 20px auto 0;
+    display: flex;
+    position: relative
+}
+
+.payplugHostedFields__container {
+    width: 100%;
+    margin: 0 0 10px;
+    padding: 0;
+    display: flex;
+    position: relative
+}
+
+.payplugHostedFields__container--brand,
+.payplugHostedFields__container--card,
+.payplugHostedFields__container--expiry,
+.payplugHostedFields__container--cvv {
+    height: 40px;
+    cursor: text;
+    border: 1px solid #d5d6d8;
+    border-radius: 2px;
+    line-height: 40px
+}
+
+.payplugHostedFields__container--card,
+.payplugHostedFields__container--expiry,
+.payplugHostedFields__container--cvv {
+    padding: 0 16px 0 50px
+}
+
+.payplugHostedFields__container--card:before,
+.payplugHostedFields__container--expiry:before,
+.payplugHostedFields__container--cvv:before {
+    content: "";
+    width: 24px;
+    height: 24px;
+    background: #95999e 50%/100% no-repeat;
+    position: absolute;
+    top: 20%;
+    left: 16px
+}
+
+.payplugHostedFields__container--card:before {
+    -webkit-mask-image: url(card.0d2bd9bc.svg);
+    mask-image: url(card.0d2bd9bc.svg)
+}
+
+.payplugHostedFields__container--expiry:before {
+    -webkit-mask-image: url(calendar.3c23bb16.svg);
+    mask-image: url(calendar.3c23bb16.svg)
+}
+
+.payplugHostedFields__container--cvv:before {
+    -webkit-mask-image: url(lock.fe8a73cd.svg);
+    mask-image: url(lock.fe8a73cd.svg)
+}
+
+.payplugHostedFields__container--expiry,
+.payplugHostedFields__container--cvv {
+    max-width: calc(50% - 2px);
+    display: inline-block
+}
+
+.payplugHostedFields__container--brand,
+.payplugHostedFields__container--card,
+.payplugHostedFields__container--expiry,
+.payplugHostedFields__container--cvv {
+    overflow: hidden
+}
+
+.payplugHostedFields__container--brand iframe,
+.payplugHostedFields__container--card iframe,
+.payplugHostedFields__container--expiry iframe,
+.payplugHostedFields__container--cvv iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block
+}
+
+.payplugHostedFields__container--saveCard {
+    height: auto;
+    align-items: center;
+    padding: 10px 0 0;
+    display: flex
+}
+
+.payplugHostedFields__container--saveCard input {
+    display: none
+}
+
+.payplugHostedFields__container--saveCard input:checked+label span:before {
+    opacity: 1
+}
+
+.payplugHostedFields__container--saveCard label {
+    cursor: pointer;
+    color: #918f8f;
+    margin: 0 !important;
+    font-size: 12px !important
+}
+
+.payplugHostedFields__container--saveCard label span {
+    cursor: pointer;
+    height: 16px;
+    -o-transition: border .4s;
+    width: 16px;
+    border: 1px solid #d5d6d8;
+    border-radius: 2px;
+    margin: 0 10px -3px 0;
+    transition: border .4s;
+    display: inline-block;
+    position: relative
+}
+
+.payplugHostedFields__container--saveCard label span:before {
+    content: "";
+    height: 5px;
+    opacity: 0;
+    width: 10px;
+    border-top: none;
+    border-bottom: 2.5px solid #2b343d;
+    border-left: 2.5px solid #2b343d;
+    border-right: none;
+    border-radius: 1px;
+    transition: opacity .4s;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -55%)rotate(-48deg)
+}
+
+.payplugHostedFields__container--saveCard label:hover {
+    color: #2b343d;
+    transition: all .1s
+}
+
+.payplugHostedFields__container--saveCard label:hover span {
+    border-color: #2b343d;
+    transition: all .1s
+}
+
+.payplugHostedFields__error {
+    color: #e91932;
+    width: 100%;
+    margin: -10px 0 10px;
+    padding-left: 4px;
+    font-size: 12px;
+    line-height: 18px
+}
+
+.payplugHostedFields__error--hide {
+    display: none
+}

config/services.yaml

@@ -35,6 +35,11 @@ services:
     PayPlug\SyliusPayPlugPlugin\Provider\OneySimulation\OneySimulationDataProviderInterface:
         class: PayPlug\SyliusPayPlugPlugin\Provider\OneySimulation\OneySimulationDataProvider
 
+    # Alias (not a separate definition) so the interface resolves to the service auto-registered by the
+    # `PayPlug\SyliusPayPlugPlugin\:` prototype above, keeping its `@monolog.logger.payplug` binding.
+    PayPlug\SyliusPayPlugPlugin\PaymentProcessing\HostedFieldsPaymentProcessorInterface:
+        alias: PayPlug\SyliusPayPlugPlugin\PaymentProcessing\NullHostedFieldsPaymentProcessor
+
     payplug_sylius_payplug_plugin.action.capture:
         class: PayPlug\SyliusPayPlugPlugin\Action\CaptureAction