Credit card components are now a javascript plugin, live mode is fixe…

…d. A test button for the API configuration is available.

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "kiener/mollie-payments-plugin",
   "description": "Mollie Payments",
-  "version": "v1.0.15",
+  "version": "v1.0.16",
   "type": "shopware-platform-plugin",
   "license": "MIT",
   "authors": [
@@ -11,6 +11,8 @@
   ],
   "require": {
     "shopware/core": "*",
+    "shopware/administration": "*",
+    "shopware/storefront": "*",
     "mollie/mollie-api-php": "^2.0"
   },
   "extra": {

src/Factory/MollieApiFactory.php

@@ -86,7 +86,7 @@ public function getClient(?string $salesChannelId = null, ?Context $context = nu
 
             // @todo Add plugin version variable
             $this->apiClient->addVersionString(
-                'MollieShopware6/1.0.15'
+                'MollieShopware6/1.0.16'
             );
         } catch (Exception $e) {
             $this->logger->error($e->getMessage(), [$e]);

src/Resources/app/administration/src/core/service/api/mollie-payments-config.service.js

@@ -0,0 +1,25 @@
+const ApiService = Shopware.Classes.ApiService;
+
+class MolliePaymentsConfigService extends ApiService {
+    constructor(httpClient, loginService, apiEndpoint = 'mollie') {
+        super(httpClient, loginService, apiEndpoint);
+    }
+
+    testApiKeys(data = {liveApiKey: null, testApiKey: null}) {
+        const headers = this.getBasicHeaders();
+
+        return this.httpClient
+            .post(
+                `_action/${this.getApiBasePath()}/config/test-api-keys`,
+                JSON.stringify(data),
+                {
+                    headers: headers
+                }
+            )
+            .then((response) => {
+                return ApiService.handleResponse(response);
+            });
+    }
+}
+
+export default MolliePaymentsConfigService;

src/Resources/app/administration/src/init/api-service.init.js

@@ -1,3 +1,6 @@
+import MolliePaymentsConfigService
+    from '../core/service/api/mollie-payments-config.service';
+
 import MolliePaymentsRefundService
     from '../core/service/api/mollie-payments-refund.service';
 
@@ -6,6 +9,12 @@ import MolliePaymentsShippingService
 
 const { Application } = Shopware;
 
+Application.addServiceProvider('MolliePaymentsConfigService', (container) => {
+    const initContainer = Application.getContainer('init');
+
+    return new MolliePaymentsConfigService(initContainer.httpClient, container.loginService);
+});
+
 Application.addServiceProvider('MolliePaymentsRefundService', (container) => {
     const initContainer = Application.getContainer('init');
 

src/Resources/app/administration/src/module/mollie-payments/extension/sw-plugin/component/sw-plugin-config/index.js

@@ -0,0 +1,55 @@
+import template from './sw-plugin-config.html.twig';
+
+const { Component, Mixin } = Shopware;
+
+Component.override('sw-plugin-config', {
+    template,
+
+    inject: [
+        'MolliePaymentsConfigService',
+    ],
+
+    mixins: [
+        Mixin.getByName('notification')
+    ],
+
+    methods: {
+        onTestButtonClicked() {
+            let me = this;
+
+            const liveApiKeyInput = document.querySelector('input[name="MolliePayments.config.liveApiKey"]');
+            const testApiKeyInput = document.querySelector('input[name="MolliePayments.config.testApiKey"]');
+
+            const liveApiKey = !!liveApiKeyInput ? liveApiKeyInput.value : null;
+            const testApiKey = !!testApiKeyInput ? testApiKeyInput.value : null;
+
+            this.MolliePaymentsConfigService.testApiKeys({liveApiKey, testApiKey})
+                .then((response) => {
+                    if (typeof response.results) {
+                        response.results.forEach(function (result) {
+                            let messageData = {
+                                title: me.$tc('sw-payment.testApiKeys.title'),
+                                message: `${me.$tc('sw-payment.testApiKeys.apiKey')} "${result.key}" (${result.mode}) ${(result.valid === true ? me.$tc('sw-payment.testApiKeys.isValid') : me.$tc('sw-payment.testApiKeys.isInvalid'))}.`
+                            };
+
+                            let input = result.mode === 'live' ? liveApiKeyInput : testApiKeyInput;
+
+                            if (!!input) {
+                                input.parentNode.parentNode.classList.remove('has--error');
+                            }
+
+                            if (result.valid === true) {
+                                me.createNotificationSuccess(messageData);
+                            } else {
+                                me.createNotificationError(messageData);
+
+                                if (!!input) {
+                                    input.parentNode.parentNode.classList.add('has--error');
+                                }
+                            }
+                        });
+                    }
+                });
+        }
+    }
+});

src/Resources/app/administration/src/module/mollie-payments/extension/sw-plugin/component/sw-plugin-config/sw-plugin-config.html.twig

@@ -0,0 +1,23 @@
+{#{% sw_extends 'administration/module/sw-plugin/component/sw-plugin-config/sw-plugin-config.html.twig' %}#}
+
+{% block sw_plugin_config_actions %}
+<template #smart-bar-actions>
+    {% block sw_plugin_config_actions_abort %}
+    <sw-button :routerLink="{ name: 'sw.plugin.index' }">
+        {{ $tc('global.default.cancel') }}
+    </sw-button>
+    {% endblock %}
+
+    {% block sw_plugin_config_actions_test %}
+    <sw-button @click="onTestButtonClicked">
+        {{ $tc('sw-payment.testButton') }}
+    </sw-button>
+    {% endblock %}
+
+    {% block sw_plugin_config_actions_save %}
+    <sw-button variant="primary" class="sw-plugin-config__save-action" @click.prevent="onSave">
+        {{ $tc('global.default.save') }}
+    </sw-button>
+    {% endblock %}
+</template>
+{% endblock %}

src/Resources/app/administration/src/module/mollie-payments/extension/sw-plugin/index.js

@@ -0,0 +1 @@
+import './component/sw-plugin-config';

src/Resources/app/administration/src/module/mollie-payments/index.js

@@ -1,4 +1,5 @@
 import './extension/sw-order';
+import './extension/sw-plugin';
 
 import deDE from './snippet/de-DE.json';
 import enGB from './snippet/en-GB.json';

src/Resources/app/administration/src/module/mollie-payments/snippet/de-DE.json

@@ -31,5 +31,14 @@
       "totalRefunds": "Refunded amount ({quantity} items)",
       "totalShipments": "Shipped amount ({quantity} items)"
     }
+  },
+  "sw-payment": {
+    "testButton": "Prüfung",
+    "testApiKeys": {
+      "title": "Mollie Payments",
+      "apiKey": "API Schlüssel",
+      "isValid": "ist gültig",
+      "isInvalid": "ist gültig"
+    }
   }
 }

src/Resources/app/administration/src/module/mollie-payments/snippet/en-GB.json

@@ -31,5 +31,14 @@
       "totalRefunds": "Refunded amount ({quantity} items)",
       "totalShipments": "Shipped amount ({quantity} items)"
     }
+  },
+  "sw-payment": {
+    "testButton": "Test",
+    "testApiKeys": {
+      "title": "Mollie Payments",
+      "apiKey": "API key",
+      "isValid": "is valid",
+      "isInvalid": "is invalid"
+    }
   }
 }

src/Resources/app/storefront/src/main.js

@@ -12,6 +12,6 @@ import MollieApplePayPaymentMethod
 
 // Register them via the existing PluginManager
 const PluginManager = window.PluginManager;
-PluginManager.register('MollieCreditCardComponents', MollieCreditCardComponents);
+PluginManager.register('MollieCreditCardComponents', MollieCreditCardComponents, '#mollie_components_credit_card');
 PluginManager.register('MollieIDealIssuer', MollieIDealIssuer);
 PluginManager.register('MollieApplePayPaymentMethod', MollieApplePayPaymentMethod);