From 4d5ba5a9d901574865b0fc2b221a22084e261d0c Mon Sep 17 00:00:00 2001 From: Thomas VERMOT-GAUCHY Date: Tue, 29 Apr 2025 14:04:48 +0200 Subject: [PATCH] PPSYL-136 - sylius v2 - Checkout payment - Oney integration --- assets/package.json | 6 + .../controllers/oney-payment_controller.js | 140 ++++++++++++++++++ .../_payplug_oney_block.html.twig | 9 +- ...lius_checkout_select_payment_row.html.twig | 5 +- 4 files changed, 153 insertions(+), 7 deletions(-) create mode 100644 assets/shop/controllers/oney-payment_controller.js diff --git a/assets/package.json b/assets/package.json index f19b4552..1b184c6d 100644 --- a/assets/package.json +++ b/assets/package.json @@ -30,6 +30,12 @@ "webpackMode": "lazy", "fetch": "lazy", "enabled": true + }, + "oney-payment": { + "main": "shop/controllers/oney-payment_controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true } } }, diff --git a/assets/shop/controllers/oney-payment_controller.js b/assets/shop/controllers/oney-payment_controller.js new file mode 100644 index 00000000..3bd8c278 --- /dev/null +++ b/assets/shop/controllers/oney-payment_controller.js @@ -0,0 +1,140 @@ +import { Controller } from '@hotwired/stimulus'; +import $ from 'jquery'; + +export default class extends Controller { + connect() { + this.options = { + trigger: '.payment-method-choice', + completeInfo: { + modal: '.oney-complete-info-popin', + area: '.ui.grid', + }, + }; + + this.toggleGateway(); + if (typeof completeInfoRoute !== 'undefined') { + this.modalAppear(); + } + + this.tabs(); + window.addEventListener('resize', () => { + setTimeout(this.tabs, 100); + }); + + this.tabsHandler(); + + const form = document.querySelector('form[name="sylius_shop_checkout_select_payment"]'); + form.addEventListener('submit', (event) => { + this.handleForm(); + }); + } + + toggleGateway() { + const paymentMethodSelector = $(this.options.trigger); + const paymentMethodInputId = paymentMethodSelector.data('payment-input-id'); + const checkedPaymentMethodInput = $(`#${paymentMethodInputId}:checked`); + + if (checkedPaymentMethodInput.length) { + $(`.payment-method-choice[data-payment-input-id="${paymentMethodInputId}"]`).show(); + } + + //document.querySelectorAll('input[id*="sylius_shop_checkout_select_payment_payments"]').addEventListener('change', (event) => {alert('change!')}); + const $inputs = $('input[id*=sylius_shop_checkout_select_payment_payments]'); + $inputs.on('change', (event) => { + const clickedPaymentMethodId = $(event.currentTarget).attr('id'); + $('.payment-method-choice').slideUp(); // Hide others + $(`.payment-method-choice[data-payment-input-id="${clickedPaymentMethodId}"]`).slideDown(); // Show current + }); + } + + tabs() { + if (window.innerWidth <= 991) { + $('.oney-payment-choice__item').hide(); + setTimeout(() => { + $.each($('.oney-payment-choice__input'), (k, el) => { + if ($(el).is(':checked')) { + $(el).parent().show(); + $(`a.tablink[data-id=${$(el).val()}]`).addClass('active'); + } + }); + }, 1); + } else { + $('.oney-payment-choice__item').show(); + $('a.tablink').removeClass('active'); + } + } + tabsHandler() { + const $tabLinks = $('a.tablink'); + $.each($tabLinks, (k, el) => { + $(el).click(function (evt) { + $('a.tablink').removeClass('active'); + $(this).addClass('active'); + $('.oney-payment-choice__item').hide(); + $(`#${$(this).data('id')}`).show(); + $(`input[value=${$(this).data('id')}`).prop('checked', true); + }); + }); + } + + modalAppear() { + const self = this; + let path = completeInfoRoute; + $.get(path).then((data) => { + $('body .pusher').append('
'); + $(self.options.completeInfo.area).addClass("inactive"); + $(self.options.completeInfo.area).parent().append(data); + self.modalEvents(); + }); + } + modalFadeaway() { + $(this.options.completeInfo.modal).fadeOut(300, () => { + $(this.options.completeInfo.area).removeClass('inactive'); + $('.overlay').hide(); + }); + } + modalSubmit(evt) { + const self = this; + evt.preventDefault(); + $(evt.currentTarget).addClass('loading'); + + $.ajax({ + method: 'post', + url: completeInfoRoute, + data: $(evt.currentTarget).serialize(), + success: function (res) { + if (Array.isArray(res)) { + $(`${self.options.completeInfo.modal}__content`).fadeOut(() => { + $(`${self.options.completeInfo.modal}__success`).show(); + }); + setTimeout(() => { + self.modalFadeaway(); + }, 2500); + } else { + $(self.options.completeInfo.modal).html(res); + } + self.modalEvents(); + }, + error: function (res) { + console.log(res); + }, + }); + } + modalEvents() { + $('.close').on('click', () => { + this.modalFadeaway(); + }); + $('form[name=form]').on('submit', (e) => { + this.modalSubmit(e); + }); + } + handleForm() { + if ($('.checkbox-oney :radio:checked').length) { + $('.checkbox-payplug').closest('.payment-item').find('.payment-choice__input:checked').prop('checked', false); + } else if ($('.checkbox-payplug :radio:checked').length) { + $('.checkbox-oney').closest('.payment-item').find('.payment-choice__input:checked').prop('checked', false); + } + + $('input#payplug_choice_card_other').attr('disabled', true); + $('form[name="sylius_shop_checkout_select_payment_payments"]').submit(); // old id: sylius_checkout_select_payment + } +} diff --git a/templates/SyliusShopBundle/Checkout/SelectPayment/_payplug_oney_block.html.twig b/templates/SyliusShopBundle/Checkout/SelectPayment/_payplug_oney_block.html.twig index 985b4be0..894d0498 100644 --- a/templates/SyliusShopBundle/Checkout/SelectPayment/_payplug_oney_block.html.twig +++ b/templates/SyliusShopBundle/Checkout/SelectPayment/_payplug_oney_block.html.twig @@ -12,7 +12,7 @@ {% set showOney = true %} {% endif %} -
+
{% if factoryName == oneyFactoryName %} {% if showOney %} - {# TODO: Remove that. It is in another hook -
- {{ form_row(form.parent.parent.oney_payment_choice) }} -
#} +
+ {{ form_row(form.parent.parent.oney_payment_choice) }} +
{% if app.session is not null and app.session.get('oney_has_error') == true %} {# TODO: Move that in controller?#}