From 8f3fb307666fdc0ba4d1fe618171444ca291213a Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Mon, 30 Sep 2024 13:10:45 +0200
Subject: [PATCH 1/9] Basic pages for settings revamp

---
 public/images/logo/black.svg                  |  18 +++
 src/Settings/MollieSettingsPage.php           | 116 ++++++++++++++++++
 src/Settings/Page/AbstractPage.php            |  55 +++++++++
 src/Settings/Page/Components.php              |  68 ----------
 ...ingsPage.php => MollieSettingsPageOld.php} |   0
 src/Settings/Page/PageAdvancedSettings.php    |  18 +++
 src/Settings/Page/PageApiKeys.php             |  18 +++
 src/Settings/Page/PageNoApiKey.php            |  32 +++++
 src/Settings/Page/PagePaymentMethods.php      |  18 +++
 src/Settings/Page/Section/AbstractSection.php |  30 +++++
 .../Page/Section/ConnectionFields.php         |  86 +++++++++++++
 src/Settings/Page/Section/Header.php          |  84 +++++++++++++
 src/Settings/Page/Section/Instructions.php    |  70 +++++++++++
 src/Settings/Page/Section/Notices.php         |  28 +++++
 src/Settings/SettingsModule.php               |  16 +--
 15 files changed, 582 insertions(+), 75 deletions(-)
 create mode 100644 public/images/logo/black.svg
 create mode 100644 src/Settings/MollieSettingsPage.php
 create mode 100644 src/Settings/Page/AbstractPage.php
 delete mode 100644 src/Settings/Page/Components.php
 rename src/Settings/Page/{MollieSettingsPage.php => MollieSettingsPageOld.php} (100%)
 create mode 100644 src/Settings/Page/PageAdvancedSettings.php
 create mode 100644 src/Settings/Page/PageApiKeys.php
 create mode 100644 src/Settings/Page/PageNoApiKey.php
 create mode 100644 src/Settings/Page/PagePaymentMethods.php
 create mode 100644 src/Settings/Page/Section/AbstractSection.php
 create mode 100644 src/Settings/Page/Section/ConnectionFields.php
 create mode 100644 src/Settings/Page/Section/Header.php
 create mode 100644 src/Settings/Page/Section/Instructions.php
 create mode 100644 src/Settings/Page/Section/Notices.php

diff --git a/public/images/logo/black.svg b/public/images/logo/black.svg
new file mode 100644
index 000000000..76e679294
--- /dev/null
+++ b/public/images/logo/black.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 94" style="enable-background:new 0 0 320 94;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M289.3,44.3c6.9,0,13.2,4.5,15.4,11h-30.7C276.1,48.9,282.3,44.3,289.3,44.3z M320,60.9c0-8-3.1-15.6-8.8-21.4
+	c-5.7-5.8-13.3-9-21.3-9h-0.4c-8.3,0.1-16.2,3.4-22.1,9.3c-5.9,5.9-9.2,13.7-9.3,22c-0.1,8.5,3.2,16.5,9.2,22.6
+	c6.1,6.1,14.1,9.5,22.6,9.5h0c11.2,0,21.7-6,27.4-15.6l0.7-1.2l-12.6-6.2l-0.6,1c-3.1,5.2-8.6,8.2-14.7,8.2
+	c-7.7,0-14.4-5.1-16.5-12.5H320V60.9z M241.2,19.8c-5.5,0-9.9-4.4-9.9-9.9c0-5.5,4.4-9.9,9.9-9.9s9.9,4.4,9.9,9.9
+	C251.2,15.3,246.7,19.8,241.2,19.8z M233.6,92.7h15.2V31.8h-15.2V92.7z M204.5,1.3h15.2v91.5h-15.2V1.3z M175.4,92.7h15.2V1.3h-15.2
+	V92.7z M135.3,79c-9.2,0-16.8-7.5-16.8-16.7c0-9.2,7.5-16.7,16.8-16.7s16.8,7.5,16.8,16.7C152.1,71.5,144.6,79,135.3,79z
+	 M135.3,30.5c-17.6,0-31.8,14.2-31.8,31.7S117.8,94,135.3,94c17.5,0,31.8-14.2,31.8-31.7S152.9,30.5,135.3,30.5z M70.4,30.6
+	c-0.8-0.1-1.6-0.1-2.4-0.1c-7.7,0-15,3.1-20.2,8.7c-5.2-5.5-12.5-8.7-20.1-8.7C12.4,30.5,0,42.9,0,58v34.7h14.9V58.5
+	c0-6.3,5.2-12.1,11.3-12.7c0.4,0,0.9-0.1,1.3-0.1c6.9,0,12.5,5.6,12.5,12.5v34.6h15.2V58.4c0-6.3,5.2-12.1,11.3-12.7
+	c0.4,0,0.9-0.1,1.3-0.1c6.9,0,12.5,5.6,12.6,12.4v34.7h15.2V58.5c0-7-2.6-13.6-7.2-18.8C83.7,34.4,77.3,31.2,70.4,30.6z"/>
+</svg>
diff --git a/src/Settings/MollieSettingsPage.php b/src/Settings/MollieSettingsPage.php
new file mode 100644
index 000000000..53cd41b1d
--- /dev/null
+++ b/src/Settings/MollieSettingsPage.php
@@ -0,0 +1,116 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings;
+
+use Mollie\WooCommerce\Settings\Page\AbstractPage;
+use Mollie\WooCommerce\Settings\Page\PageAdvancedSettings;
+use Mollie\WooCommerce\Settings\Page\PageApiKeys;
+use Mollie\WooCommerce\Settings\Page\PageNoApiKey;
+use Mollie\WooCommerce\Settings\Page\PagePaymentMethods;
+use Mollie\WooCommerce\Shared\Data;
+use WC_Settings_Page;
+
+class MollieSettingsPage extends WC_Settings_Page
+{
+    protected Settings $settingsHelper;
+    protected string $pluginPath;
+    protected string $pluginUrl;
+    protected array $gateways;
+    protected array $paymentMethods;
+    protected bool $isTestModeEnabled;
+    protected Data $dataHelper;
+
+    public function __construct(
+            Settings $settingsHelper,
+            string $pluginPath,
+            string $pluginUrl,
+            array $gateways,
+            array $paymentMethods,
+            bool $isTestModeEnabled,
+            Data $dataHelper
+    ) {
+        $this->id = 'mollie_settings';
+        $this->label = __('Mollie Settings', 'mollie-payments-for-woocommerce');
+        $this->settingsHelper = $settingsHelper;
+        $this->pluginPath = $pluginPath;
+        $this->pluginUrl = $pluginUrl;
+        $this->gateways = $gateways;
+        $this->isTestModeEnabled = $isTestModeEnabled;
+        $this->dataHelper = $dataHelper;
+        $this->paymentMethods = $paymentMethods;
+        $this->registerContentFieldType();
+        $this->outputSections();
+        parent::__construct();
+    }
+
+    public function registerContentFieldType(): void
+    {
+        add_action('woocommerce_admin_field_mollie_custom_input', static function ($value): void {
+            ?>
+            <tr valign="top">
+                <th scope="row" class="titledesc">
+                    <label for="<?php
+                    echo esc_attr($value['id']); ?>"><?php
+                        echo esc_html($value['title']); ?></label>
+                </th>
+                <td class="forminp">
+                    <?php
+                    if (!empty($value['value'])): ?>
+                        <?= $value['value']; ?>
+                    <?php
+                    endif; ?>
+                </td>
+            </tr>
+            <?php
+        });
+
+        add_action('woocommerce_admin_field_mollie_content', static function ($value): void {
+            if (!empty($value['value'])) {
+                echo $value['value'];
+            }
+        });
+    }
+
+    public function outputSections()
+    {
+        add_action(
+                'woocommerce_sections_' . $this->id,
+                [$this, 'output_sections']
+        );
+    }
+
+    protected function pages(): array
+    {
+        return [
+                PageNoApiKey::class,
+                PageApiKeys::class,
+                PagePaymentMethods::class,
+                PageAdvancedSettings::class
+        ];
+    }
+
+    public function get_settings($currentSection = '')
+    {
+        $mollieSettings = null;
+        foreach ($this->pages() as $pageClass) {
+            /** @var AbstractPage $page */
+            $page = new $pageClass($this->settingsHelper, $this->pluginUrl);
+            if ($page->slug() === $currentSection) {
+                $mollieSettings = $page->settings();
+                break;
+            }
+        }
+
+        if (!$mollieSettings) {
+            $mollieSettings = (new PageNoApiKey($this->settingsHelper, $this->pluginUrl))->settings();
+        }
+
+        return apply_filters(
+                'woocommerce_get_settings_' . $this->id,
+                $mollieSettings,
+                $currentSection
+        );
+    }
+}
diff --git a/src/Settings/Page/AbstractPage.php b/src/Settings/Page/AbstractPage.php
new file mode 100644
index 000000000..5a9864cf3
--- /dev/null
+++ b/src/Settings/Page/AbstractPage.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page;
+
+use Mollie\WooCommerce\Settings\Page\Section\AbstractSection;
+use Mollie\WooCommerce\Settings\Settings;
+
+abstract class AbstractPage
+{
+    protected Settings $settings;
+    protected string $pluginUrl;
+
+    public function __construct(Settings $settings, string $pluginUrl)
+    {
+        $this->settings = $settings;
+        $this->pluginUrl = $pluginUrl;
+    }
+
+    abstract public function isTab(): bool;
+
+    abstract public function slug(): string;
+
+    public function tabName(): string
+    {
+        return '';
+    }
+
+    protected function sections(): array
+    {
+        return [];
+    }
+
+    public function settings(): array
+    {
+        $settings = [];
+        $styles = [];
+
+        foreach ($this->sections() as $sectionClass) {
+            /** @var AbstractSection $section */
+            $section = new $sectionClass($this->settings, $this->pluginUrl);
+            foreach ($section->config() as $field) {
+                $settings[] = $field;
+            }
+            $styles[$sectionClass] = preg_replace('/\s+/', '', $section->styles());
+        }
+        array_unshift($settings, [
+            'id' => $this->settings->getSettingId('styles'),
+            'type' => 'mollie_content',
+            'value' => implode($styles)
+        ]);
+        return $settings;
+    }
+}
diff --git a/src/Settings/Page/Components.php b/src/Settings/Page/Components.php
deleted file mode 100644
index 59548e33f..000000000
--- a/src/Settings/Page/Components.php
+++ /dev/null
@@ -1,68 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Mollie\WooCommerce\Settings\Page;
-
-use WC_Admin_Settings;
-use WC_Settings_Page;
-
-class Components extends WC_Settings_Page
-{
-    public const FILTER_COMPONENTS_SETTINGS = 'components_settings';
-    /**
-     * @var string
-     */
-    protected $pluginPath;
-
-    public function __construct(string $pluginPath)
-    {
-        $this->id = 'mollie_components';
-        $this->label = __('Mollie Components', 'mollie-payments-for-woocommerce');
-        $this->pluginPath = $pluginPath;
-
-        parent::__construct();
-    }
-
-    public function output()
-    {
-        $settings = $this->get_settings();
-        WC_Admin_Settings::output_fields($settings);
-    }
-
-    public function get_settings()
-    {
-        $componentsSettings = $this->componentsSettings();
-
-        /**
-         * Filter Component Settings
-         *
-         * @param array $componentSettings Default components settings for the Credit Card Gateway
-         */
-        $componentsSettings = apply_filters(self::FILTER_COMPONENTS_SETTINGS, $componentsSettings);
-
-        return $componentsSettings;
-    }
-
-    protected function componentsSettings()
-    {
-        $componentSettingsFilePath = $this->componentsFilePath();
-
-        if (!file_exists($componentSettingsFilePath)) {
-            return [];
-        }
-
-        $components = include $componentSettingsFilePath;
-
-        if (!is_array($components)) {
-            $components = [];
-        }
-
-        return $components;
-    }
-
-    protected function componentsFilePath()
-    {
-        return $this->pluginPath . '/inc/settings/mollie_components.php';
-    }
-}
diff --git a/src/Settings/Page/MollieSettingsPage.php b/src/Settings/Page/MollieSettingsPageOld.php
similarity index 100%
rename from src/Settings/Page/MollieSettingsPage.php
rename to src/Settings/Page/MollieSettingsPageOld.php
diff --git a/src/Settings/Page/PageAdvancedSettings.php b/src/Settings/Page/PageAdvancedSettings.php
new file mode 100644
index 000000000..5f21e8b09
--- /dev/null
+++ b/src/Settings/Page/PageAdvancedSettings.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page;
+
+class PageAdvancedSettings extends AbstractPage {
+
+    public function isTab(): bool
+    {
+        // TODO: Implement isTab() method.
+    }
+
+    public function slug(): string
+    {
+        return 'mollie_advanced';
+    }
+}
diff --git a/src/Settings/Page/PageApiKeys.php b/src/Settings/Page/PageApiKeys.php
new file mode 100644
index 000000000..b393248c5
--- /dev/null
+++ b/src/Settings/Page/PageApiKeys.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page;
+
+class PageApiKeys extends AbstractPage {
+
+    public function isTab(): bool
+    {
+        // TODO: Implement isTab() method.
+    }
+
+    public function slug(): string
+    {
+        return 'mollie_api_keys';
+    }
+}
diff --git a/src/Settings/Page/PageNoApiKey.php b/src/Settings/Page/PageNoApiKey.php
new file mode 100644
index 000000000..4763e18df
--- /dev/null
+++ b/src/Settings/Page/PageNoApiKey.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page;
+
+use Mollie\WooCommerce\Settings\Page\Section\ConnectionFields;
+use Mollie\WooCommerce\Settings\Page\Section\Header;
+use Mollie\WooCommerce\Settings\Page\Section\Instructions;
+use Mollie\WooCommerce\Settings\Page\Section\Notices;
+
+class PageNoApiKey extends AbstractPage {
+    public function isTab(): bool
+    {
+        // TODO: Implement isTab() method.
+    }
+
+    public function slug(): string
+    {
+        return 'mollie_no_api_key';
+    }
+
+    public function sections(): array
+    {
+        return [
+            Header::class,
+            Notices::class,
+            Instructions::class,
+            ConnectionFields::class
+        ];
+    }
+}
diff --git a/src/Settings/Page/PagePaymentMethods.php b/src/Settings/Page/PagePaymentMethods.php
new file mode 100644
index 000000000..f15c9f460
--- /dev/null
+++ b/src/Settings/Page/PagePaymentMethods.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page;
+
+class PagePaymentMethods extends AbstractPage {
+
+    public function isTab(): bool
+    {
+        // TODO: Implement isTab() method.
+    }
+
+    public function slug(): string
+    {
+        return 'mollie_payment_methods';
+    }
+}
diff --git a/src/Settings/Page/Section/AbstractSection.php b/src/Settings/Page/Section/AbstractSection.php
new file mode 100644
index 000000000..89549ae76
--- /dev/null
+++ b/src/Settings/Page/Section/AbstractSection.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+use Mollie\WooCommerce\Settings\Settings;
+
+abstract class AbstractSection
+{
+    protected Settings $settings;
+    protected string $pluginUrl;
+
+    public function __construct(Settings $settings, string $pluginUrl)
+    {
+        $this->settings = $settings;
+        $this->pluginUrl = $pluginUrl;
+    }
+
+    abstract public function config(): array;
+
+    public function styles(): string{
+        return '';
+    }
+
+    public function images(): string
+    {
+        return $this->pluginUrl . '/public/images/';
+    }
+}
diff --git a/src/Settings/Page/Section/ConnectionFields.php b/src/Settings/Page/Section/ConnectionFields.php
new file mode 100644
index 000000000..af708c3ba
--- /dev/null
+++ b/src/Settings/Page/Section/ConnectionFields.php
@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class ConnectionFields extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+            [
+                'id' => $this->settings->getSettingId('title'),
+                'title' => '',
+                'type' => 'title'
+            ],
+            [
+                'id' => $this->settings->getSettingId('test_mode_enabled'),
+                'title' => __('Mollie Payment Mode', 'mollie-payments-for-woocommerce'),
+                'default' => 'no',
+                'type' => 'select',
+                'options' => [
+                    'no' => 'Live API',
+                    'yes' => 'Test API'
+                ],
+                'desc_tip' => __(
+                    'Enable test mode if you want to test the plugin without using real payments.',
+                    'mollie-payments-for-woocommerce'
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('live_api_key'),
+                'title' => __('Live API key', 'mollie-payments-for-woocommerce'),
+                'default' => '',
+                'type' => 'text',
+                'desc' => sprintf(
+                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
+                    __(
+                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    'live',
+                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
+                    '</a>'
+                ),
+                'css' => 'width: 350px',
+                'placeholder' => __(
+                    'Live API key should start with live_',
+                    'mollie-payments-for-woocommerce'
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('test_api_key'),
+                'title' => __('Test API key', 'mollie-payments-for-woocommerce'),
+                'default' => '',
+                'type' => 'text',
+                'desc' => sprintf(
+                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
+                    __(
+                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    'test',
+                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
+                    '</a>'
+                ),
+                'css' => 'width: 350px',
+                'placeholder' => __(
+                    'Test API key should start with test_',
+                    'mollie-payments-for-woocommerce'
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('debug'),
+                'title' => __('Debug Log', 'mollie-payments-for-woocommerce'),
+                'type' => 'checkbox',
+                'desc' => __('Log plugin events.', 'mollie-payments-for-woocommerce'),
+                'default' => 'yes',
+            ],
+            [
+                'id' => $this->settings->getSettingId('sectionend'),
+                'type' => 'sectionend',
+            ],
+        ];
+    }
+}
diff --git a/src/Settings/Page/Section/Header.php b/src/Settings/Page/Section/Header.php
new file mode 100644
index 000000000..c6408fcea
--- /dev/null
+++ b/src/Settings/Page/Section/Header.php
@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class Header extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+                [
+                        'id' => $this->settings->getSettingId('header'),
+                        'type' => 'mollie_content',
+                        'value' => $this->content()
+                ]
+        ];
+    }
+
+    public function styles(): string
+    {
+        ob_start();
+        ?>
+        <style>
+            .mollie-section--header {
+                display: flex;
+                justify-content: center;
+            }
+
+            .mollie-settings-header {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                align-items: center;
+            }
+
+            .mollie-settings-header__image {
+                width: 200px;
+            }
+
+            .mollie-settings-header__description {
+                margin: 0;
+            }
+
+            .mollie-settings-header__buttons {
+                display: flex;
+                gap: 12px;
+            }
+        </style>
+        <?php
+        return ob_get_clean();
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        <div class="mollie-section mollie-section--header">
+            <div class="mollie-settings-header">
+                <img class="mollie-settings-header__image" src="<?= $this->pluginUrl; ?>public/images/logo/black.svg"
+                     alt=""/>
+                <p class="mollie-settings-header__description">
+                    <strong>
+                        <?= __(
+                                'Effortless payments for your customers, designed for growth',
+                                'mollie-payments-for-woocommerce'
+                        ); ?>
+                    </strong>
+                </p>
+                <div class="mollie-settings-header__buttons">
+                    <a href="https://help.mollie.com/hc/en-us/sections/12858723658130-Mollie-for-WooCommerce"
+                       target="_blank" class="button-secondary">
+                        <?= __('Mollie Plugin Documentation', 'mollie-payments-for-woocommerce'); ?>
+                    </a>
+                    <a href="https://www.mollie.com/contact/merchants" target="_blank" class="button-secondary">
+                        <?= __('Contact Mollie Support', 'mollie-payments-for-woocommerce'); ?>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <?php
+        return ob_get_clean();
+    }
+}
diff --git a/src/Settings/Page/Section/Instructions.php b/src/Settings/Page/Section/Instructions.php
new file mode 100644
index 000000000..46ea719cc
--- /dev/null
+++ b/src/Settings/Page/Section/Instructions.php
@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class Instructions extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+                [
+                        'id' => $this->settings->getSettingId('instructions'),
+                        'type' => 'mollie_content',
+                        'value' => $this->content()
+                ]
+        ];
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        <h3><?= __("Mollie API Keys", 'mollie-payments-for-woocommerce'); ?></h3>
+        <p>
+            <?= __(
+                    "To start receiving payments through the Mollie plugin in your WooCommerce store,
+            you'll need to connect it to your Mollie account using an API key.",
+                    'mollie-payments-for-woocommerce'
+            ); ?>
+        </p>
+        <p>
+            <strong>
+                <?= __("How to find your API keys:", 'mollie-payments-for-woocommerce'); ?>
+            </strong>
+        </p>
+        <ol>
+            <li>
+                <?= sprintf(
+                        __(
+                                "Log in to your <a href='%s' target='_blank'>Mollie Dashboard</a>",
+                                'mollie-payments-for-woocommerce'
+                        ),
+                        'https://my.mollie.com/dashboard/login?lang=en'
+                ); ?>
+            </li>
+            <li>
+                <?= __("Navigate to <strong>Developers > API keys.</strong>", 'mollie-payments-for-woocommerce'); ?>
+            </li>
+            <li>
+                <?= __("Click on <strong>Copy</strong> next to your API key.", 'mollie-payments-for-woocommerce'); ?>
+            </li>
+            <li>
+                <?= __(
+                        "Paste the copied API key into the <strong>Live API key</strong> or <strong>Test API key</strong> fields below.",
+                        'mollie-payments-for-woocommerce'
+                ); ?>
+            </li>
+        </ol>
+        <p>
+            <?= __(
+                    "Please note that your API keys are unique to your Mollie account and should be kept
+            private to ensure the security of your transactions.",
+                    'mollie-payments-for-woocommerce'
+            ); ?>
+        </p>
+        <?php
+        return ob_get_clean();
+    }
+}
diff --git a/src/Settings/Page/Section/Notices.php b/src/Settings/Page/Section/Notices.php
new file mode 100644
index 000000000..7c80ae69d
--- /dev/null
+++ b/src/Settings/Page/Section/Notices.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class Notices extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+                [
+                        'id' => $this->settings->getSettingId('notices'),
+                        'type' => 'mollie_content',
+                        'value' => $this->content()
+                ]
+        ];
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        NOTICES
+        <?php
+        return ob_get_clean();
+    }
+}
diff --git a/src/Settings/SettingsModule.php b/src/Settings/SettingsModule.php
index 9dffc59c2..511f87739 100644
--- a/src/Settings/SettingsModule.php
+++ b/src/Settings/SettingsModule.php
@@ -6,15 +6,14 @@
 
 namespace Mollie\WooCommerce\Settings;
 
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
 use Mollie\WooCommerce\Notice\AdminNotice;
 use Mollie\WooCommerce\SDK\Api;
-use Mollie\WooCommerce\Settings\Page\MollieSettingsPage;
 use Mollie\WooCommerce\Shared\Data;
 use Mollie\WooCommerce\Shared\Status;
 use Mollie\WooCommerce\Uninstall\CleanDb;
+use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
+use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
+use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
 use Mollie\WooCommerce\Vendor\Psr\Container\ContainerInterface;
 use Psr\Log\LoggerInterface as Logger;
 
@@ -113,6 +112,7 @@ public function run(ContainerInterface $container): bool
         $this->dataHelper = $container->get('settings.data_helper');
         assert($this->dataHelper instanceof Data);
         $pluginPath = $container->get('shared.plugin_path');
+        $pluginUrl = $container->get('shared.plugin_url');
 
         $paymentMethods = $container->get('gateway.paymentMethods');
         // Add settings link to plugins page
@@ -148,7 +148,7 @@ function () use ($optionName, $defaultAdvancedOptions, $defaultComponentsOptions
 
         $gateways = $container->get('gateway.instances');
         $isSDDGatewayEnabled = $container->get('gateway.isSDDGatewayEnabled');
-        $this->initMollieSettingsPage($isSDDGatewayEnabled, $gateways, $pluginPath, $paymentMethods);
+        $this->initMollieSettingsPage($isSDDGatewayEnabled, $gateways, $pluginPath, $pluginUrl, $paymentMethods);
         add_action(
             'woocommerce_admin_settings_sanitize_option',
             [$this->settingsHelper, 'updateMerchantIdOnApiKeyChanges'],
@@ -247,10 +247,11 @@ public function maybeSaveDefaultSettings($optionName, $testOption, $defaultOptio
      * @param $isSDDGatewayEnabled
      * @param $gateways
      * @param $pluginPath
+     * @param $pluginUrl
      * @param $paymentMethods
      * @return void
      */
-    protected function initMollieSettingsPage($isSDDGatewayEnabled, $gateways, $pluginPath, $paymentMethods): void
+    protected function initMollieSettingsPage($isSDDGatewayEnabled, $gateways, $pluginPath, $pluginUrl, $paymentMethods): void
     {
         if (!$isSDDGatewayEnabled) {
             //remove directdebit gateway from gateways list
@@ -258,10 +259,11 @@ protected function initMollieSettingsPage($isSDDGatewayEnabled, $gateways, $plug
         }
         add_filter(
             'woocommerce_get_settings_pages',
-            function ($settings) use ($pluginPath, $gateways, $paymentMethods) {
+            function ($settings) use ($pluginPath, $pluginUrl, $gateways, $paymentMethods) {
                 $settings[] = new MollieSettingsPage(
                     $this->settingsHelper,
                     $pluginPath,
+                    $pluginUrl,
                     $gateways,
                     $paymentMethods,
                     $this->isTestModeEnabled,

From b26c30e2ddfbad9ade3c7f1560ef198af2e1268c Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 06:19:47 +0200
Subject: [PATCH 2/9] Advanced settings

---
 resources/js/settings.js                      |  11 -
 src/Assets/AssetsModule.php                   |   2 +-
 .../ApplePayButton/ApplePayDataObjectHttp.php |   2 +-
 src/PaymentMethods/Alma.php                   |   1 +
 src/PaymentMethods/Applepay.php               |   1 +
 src/PaymentMethods/Bancomatpay.php            |   1 +
 src/PaymentMethods/Bancontact.php             |   1 +
 src/PaymentMethods/Banktransfer.php           |   1 +
 src/PaymentMethods/Belfius.php                |   1 +
 src/PaymentMethods/Billie.php                 |   1 +
 src/PaymentMethods/Blik.php                   |   1 +
 src/PaymentMethods/Creditcard.php             |   1 +
 src/PaymentMethods/Directdebit.php            |   1 +
 src/PaymentMethods/Eps.php                    |   1 +
 src/PaymentMethods/Giftcard.php               |   1 +
 src/PaymentMethods/Giropay.php                |   1 +
 src/PaymentMethods/Ideal.php                  |   1 +
 src/PaymentMethods/In3.php                    |   1 +
 src/PaymentMethods/Kbc.php                    |   1 +
 src/PaymentMethods/Klarna.php                 |   1 +
 src/PaymentMethods/Klarnapaylater.php         |   1 +
 src/PaymentMethods/Klarnapaynow.php           |   1 +
 src/PaymentMethods/Klarnasliceit.php          |   1 +
 src/PaymentMethods/Mybank.php                 |   1 +
 src/PaymentMethods/Payconiq.php               |   1 +
 src/PaymentMethods/Paypal.php                 |   1 +
 src/PaymentMethods/Paysafecard.php            |   1 +
 src/PaymentMethods/Przelewy24.php             |   1 +
 src/PaymentMethods/Riverty.php                |   1 +
 src/PaymentMethods/Satispay.php               |   1 +
 src/PaymentMethods/Sofort.php                 |   1 +
 src/PaymentMethods/Trustly.php                |   1 +
 src/PaymentMethods/Twint.php                  |   1 +
 src/PaymentMethods/Voucher.php                |   1 +
 src/Settings/MollieSettingsPage.php           | 168 ++++++++++--
 .../{Page => }/MollieSettingsPageOld.php      |   0
 src/Settings/Page/AbstractPage.php            |  53 +++-
 src/Settings/Page/PageAdvancedSettings.php    |  29 ++-
 src/Settings/Page/PageApiKeys.php             |  31 ++-
 src/Settings/Page/PageNoApiKey.php            |  15 +-
 src/Settings/Page/PagePaymentMethods.php      |  30 ++-
 src/Settings/Page/Section/AbstractSection.php |  32 ++-
 src/Settings/Page/Section/Advanced.php        | 231 ++++++++++++++++
 .../Page/Section/ConnectionFields.php         |  33 ++-
 .../Page/Section/ConnectionStatusFields.php   |  46 ++++
 .../Page/Section/ConnectionStatusTrait.php    |  36 +++
 src/Settings/Page/Section/Header.php          |  12 +-
 .../Page/Section/InstructionsConnected.php    |  46 ++++
 ...tions.php => InstructionsNotConnected.php} |  28 +-
 src/Settings/Page/Section/Notices.php         |   8 +-
 src/Settings/Page/Section/PaymentMethods.php  | 246 ++++++++++++++++++
 src/Settings/Page/Section/Tabs.php            |  45 ++++
 src/Settings/Settings.php                     |  24 +-
 53 files changed, 1053 insertions(+), 106 deletions(-)
 rename src/Settings/{Page => }/MollieSettingsPageOld.php (100%)
 create mode 100644 src/Settings/Page/Section/Advanced.php
 create mode 100644 src/Settings/Page/Section/ConnectionStatusFields.php
 create mode 100644 src/Settings/Page/Section/ConnectionStatusTrait.php
 create mode 100644 src/Settings/Page/Section/InstructionsConnected.php
 rename src/Settings/Page/Section/{Instructions.php => InstructionsNotConnected.php} (66%)
 create mode 100644 src/Settings/Page/Section/PaymentMethods.php
 create mode 100644 src/Settings/Page/Section/Tabs.php

diff --git a/resources/js/settings.js b/resources/js/settings.js
index 0cd19c22a..54eb4515c 100644
--- a/resources/js/settings.js
+++ b/resources/js/settings.js
@@ -4,17 +4,6 @@
         const {current_section = false} = mollieSettingsData
         jQuery(function($) {
 
-            $('#mollie-payments-for-woocommerce_test_mode_enabled').change(function() {
-                if ($(this).is(':checked'))
-                {
-                    $('#mollie-payments-for-woocommerce_test_api_key').attr('required', true).closest('tr').show();
-                }
-                else
-                {
-                    $('#mollie-payments-for-woocommerce_test_api_key').removeAttr('required').closest('tr').hide();
-                }
-            }).change();
-
             if(_.isEmpty(mollieSettingsData)){
                 return
             }
diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
index 9cb2e3613..40277df44 100644
--- a/src/Assets/AssetsModule.php
+++ b/src/Assets/AssetsModule.php
@@ -490,7 +490,7 @@ public function enqueueAdvancedSettingsJS($ar)
         if (
             $current_screen->id !== 'woocommerce_page_wc-settings'
             || $current_tab !== 'mollie_settings'
-            || $current_section !== 'advanced'
+            || $current_section !== 'mollie_advanced'
         ) {
             return;
         }
diff --git a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
index db7f6919b..38f91294b 100644
--- a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
+++ b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
@@ -326,7 +326,7 @@ protected function addressHasRequiredFieldsValues(
                     sprintf('ApplePay Data Error: Missing value for %s', $requiredField)
                 );
                 $this->errors[]
-                = [
+ = [
                     'errorCode' => $errorCode,
                     'contactField' => $errorValue,
                 ];
diff --git a/src/PaymentMethods/Alma.php b/src/PaymentMethods/Alma.php
index 57ac08fa4..d127a9864 100644
--- a/src/PaymentMethods/Alma.php
+++ b/src/PaymentMethods/Alma.php
@@ -26,6 +26,7 @@ protected function getConfig(): array
                 'billingAddress',
                 'shippingAddress',
             ],
+            'docs' => 'https://www.mollie.com/gb/payments/alma',
         ];
     }
 
diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php
index 63a32c9ab..b1ae1f9eb 100644
--- a/src/PaymentMethods/Applepay.php
+++ b/src/PaymentMethods/Applepay.php
@@ -24,6 +24,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'Subscription' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/apple-pay',
         ];
     }
 
diff --git a/src/PaymentMethods/Bancomatpay.php b/src/PaymentMethods/Bancomatpay.php
index 054ef951d..7f9600fa1 100644
--- a/src/PaymentMethods/Bancomatpay.php
+++ b/src/PaymentMethods/Bancomatpay.php
@@ -21,6 +21,7 @@ public function getConfig(): array
             ],
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/bancomat-pay',
         ];
     }
 
diff --git a/src/PaymentMethods/Bancontact.php b/src/PaymentMethods/Bancontact.php
index 9d01c9d93..14ac3832d 100644
--- a/src/PaymentMethods/Bancontact.php
+++ b/src/PaymentMethods/Bancontact.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/bancontact',
         ];
     }
 
diff --git a/src/PaymentMethods/Banktransfer.php b/src/PaymentMethods/Banktransfer.php
index 93a6f3f10..6abc75866 100644
--- a/src/PaymentMethods/Banktransfer.php
+++ b/src/PaymentMethods/Banktransfer.php
@@ -42,6 +42,7 @@ protected function getConfig(): array
             'confirmationDelayed' => true,
             'SEPA' => false,
             'customRedirect' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/bank-transfer',
         ];
     }
 
diff --git a/src/PaymentMethods/Belfius.php b/src/PaymentMethods/Belfius.php
index ea98768f9..c8876451b 100644
--- a/src/PaymentMethods/Belfius.php
+++ b/src/PaymentMethods/Belfius.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/belfius',
         ];
     }
 
diff --git a/src/PaymentMethods/Billie.php b/src/PaymentMethods/Billie.php
index 369f49521..0269b9da0 100644
--- a/src/PaymentMethods/Billie.php
+++ b/src/PaymentMethods/Billie.php
@@ -31,6 +31,7 @@ protected function getConfig(): array
                 'mollie-payments-for-woocommerce'
             ),
             'companyPlaceholder' => __('Please enter your company name here.', 'mollie-payments-for-woocommerce'),
+            'docs' => 'https://www.mollie.com/gb/payments/billie',
         ];
     }
 
diff --git a/src/PaymentMethods/Blik.php b/src/PaymentMethods/Blik.php
index 83e05ef2c..c0590dcd6 100644
--- a/src/PaymentMethods/Blik.php
+++ b/src/PaymentMethods/Blik.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/blik',
         ];
     }
 
diff --git a/src/PaymentMethods/Creditcard.php b/src/PaymentMethods/Creditcard.php
index 237ad4ce7..85e26b432 100644
--- a/src/PaymentMethods/Creditcard.php
+++ b/src/PaymentMethods/Creditcard.php
@@ -27,6 +27,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'Subscription' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/credit-card',
         ];
     }
 
diff --git a/src/PaymentMethods/Directdebit.php b/src/PaymentMethods/Directdebit.php
index 5b4b91d34..0b7bf94fa 100644
--- a/src/PaymentMethods/Directdebit.php
+++ b/src/PaymentMethods/Directdebit.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/direct-debit',
         ];
     }
 
diff --git a/src/PaymentMethods/Eps.php b/src/PaymentMethods/Eps.php
index 15bd8eb5d..327a53acd 100644
--- a/src/PaymentMethods/Eps.php
+++ b/src/PaymentMethods/Eps.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/eps',
         ];
     }
 
diff --git a/src/PaymentMethods/Giftcard.php b/src/PaymentMethods/Giftcard.php
index 812e3cd7f..b5154541a 100644
--- a/src/PaymentMethods/Giftcard.php
+++ b/src/PaymentMethods/Giftcard.php
@@ -70,6 +70,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/gift-cards',
         ];
     }
 
diff --git a/src/PaymentMethods/Giropay.php b/src/PaymentMethods/Giropay.php
index 440b8f0b8..8939ce56c 100644
--- a/src/PaymentMethods/Giropay.php
+++ b/src/PaymentMethods/Giropay.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://help.mollie.com/hc/en-gb/articles/19745480480786-Giropay-Depreciation-FAQ',
         ];
     }
 
diff --git a/src/PaymentMethods/Ideal.php b/src/PaymentMethods/Ideal.php
index c7638b054..d4464b366 100644
--- a/src/PaymentMethods/Ideal.php
+++ b/src/PaymentMethods/Ideal.php
@@ -24,6 +24,7 @@ public function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/ideal-2-0',
         ];
     }
 
diff --git a/src/PaymentMethods/In3.php b/src/PaymentMethods/In3.php
index d86beb12d..f839c6e71 100644
--- a/src/PaymentMethods/In3.php
+++ b/src/PaymentMethods/In3.php
@@ -29,6 +29,7 @@ public function getConfig(): array
             ),
             'phonePlaceholder' => __('Please enter your phone here. +316xxxxxxxx', 'mollie-payments-for-woocommerce'),
             'birthdatePlaceholder' => __('Please enter your birthdate here.', 'mollie-payments-for-woocommerce'),
+            'docs' => 'https://www.mollie.com/gb/payments/ideal-in3',
         ];
     }
 
diff --git a/src/PaymentMethods/Kbc.php b/src/PaymentMethods/Kbc.php
index 4005b83fd..99de76e93 100644
--- a/src/PaymentMethods/Kbc.php
+++ b/src/PaymentMethods/Kbc.php
@@ -23,6 +23,7 @@ protected function getConfig(): array
         'filtersOnBuild' => false,
         'confirmationDelayed' => true,
         'SEPA' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/kbc-cbc',
         ];
     }
 
diff --git a/src/PaymentMethods/Klarna.php b/src/PaymentMethods/Klarna.php
index bdad1b516..0c0b3ccc8 100644
--- a/src/PaymentMethods/Klarna.php
+++ b/src/PaymentMethods/Klarna.php
@@ -26,6 +26,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/klarna',
         ];
     }
 
diff --git a/src/PaymentMethods/Klarnapaylater.php b/src/PaymentMethods/Klarnapaylater.php
index 99140ba4a..edd6f6c99 100644
--- a/src/PaymentMethods/Klarnapaylater.php
+++ b/src/PaymentMethods/Klarnapaylater.php
@@ -26,6 +26,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/klarna',
         ];
     }
 
diff --git a/src/PaymentMethods/Klarnapaynow.php b/src/PaymentMethods/Klarnapaynow.php
index 32cd04a98..5cdddfeb3 100644
--- a/src/PaymentMethods/Klarnapaynow.php
+++ b/src/PaymentMethods/Klarnapaynow.php
@@ -26,6 +26,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/klarna',
         ];
     }
 
diff --git a/src/PaymentMethods/Klarnasliceit.php b/src/PaymentMethods/Klarnasliceit.php
index 9b97b3db3..dd8e31c21 100644
--- a/src/PaymentMethods/Klarnasliceit.php
+++ b/src/PaymentMethods/Klarnasliceit.php
@@ -26,6 +26,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/klarna',
         ];
     }
 
diff --git a/src/PaymentMethods/Mybank.php b/src/PaymentMethods/Mybank.php
index a2f38ba23..e656d23ee 100644
--- a/src/PaymentMethods/Mybank.php
+++ b/src/PaymentMethods/Mybank.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => '',
         ];
     }
 
diff --git a/src/PaymentMethods/Payconiq.php b/src/PaymentMethods/Payconiq.php
index 59f9899af..b89696c97 100644
--- a/src/PaymentMethods/Payconiq.php
+++ b/src/PaymentMethods/Payconiq.php
@@ -19,6 +19,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => '',
         ];
     }
 
diff --git a/src/PaymentMethods/Paypal.php b/src/PaymentMethods/Paypal.php
index e3713f017..07be034bf 100644
--- a/src/PaymentMethods/Paypal.php
+++ b/src/PaymentMethods/Paypal.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/paypal',
         ];
     }
 
diff --git a/src/PaymentMethods/Paysafecard.php b/src/PaymentMethods/Paysafecard.php
index b1e180f3d..4e1fe4d58 100644
--- a/src/PaymentMethods/Paysafecard.php
+++ b/src/PaymentMethods/Paysafecard.php
@@ -19,6 +19,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/paysafecard',
         ];
     }
 
diff --git a/src/PaymentMethods/Przelewy24.php b/src/PaymentMethods/Przelewy24.php
index d3e6e9f74..58eb26922 100644
--- a/src/PaymentMethods/Przelewy24.php
+++ b/src/PaymentMethods/Przelewy24.php
@@ -25,6 +25,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/przelewy24',
         ];
     }
 
diff --git a/src/PaymentMethods/Riverty.php b/src/PaymentMethods/Riverty.php
index 9482f69c5..e7db2037b 100644
--- a/src/PaymentMethods/Riverty.php
+++ b/src/PaymentMethods/Riverty.php
@@ -31,6 +31,7 @@ protected function getConfig(): array
             'orderMandatory' => true,
             'phonePlaceholder' => __('Please enter your phone here. +316xxxxxxxx', 'mollie-payments-for-woocommerce'),
             'birthdatePlaceholder' => __('Please enter your birthdate here.', 'mollie-payments-for-woocommerce'),
+            'docs' => 'https://www.mollie.com/gb/payments/riverty',
         ];
     }
 
diff --git a/src/PaymentMethods/Satispay.php b/src/PaymentMethods/Satispay.php
index 5919e9d69..61bd49f7b 100644
--- a/src/PaymentMethods/Satispay.php
+++ b/src/PaymentMethods/Satispay.php
@@ -19,6 +19,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/satispay',
         ];
     }
 
diff --git a/src/PaymentMethods/Sofort.php b/src/PaymentMethods/Sofort.php
index 625f15cd5..d33a08655 100644
--- a/src/PaymentMethods/Sofort.php
+++ b/src/PaymentMethods/Sofort.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => true,
+            'docs' => 'https://help.mollie.com/hc/en-us/articles/20904206772626-SOFORT-Deprecation-30-September-2024',
         ];
     }
 
diff --git a/src/PaymentMethods/Trustly.php b/src/PaymentMethods/Trustly.php
index 05179fbbb..aa73fccf1 100644
--- a/src/PaymentMethods/Trustly.php
+++ b/src/PaymentMethods/Trustly.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => true,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/trustly',
         ];
     }
 
diff --git a/src/PaymentMethods/Twint.php b/src/PaymentMethods/Twint.php
index eeaa9b027..8b33f958d 100644
--- a/src/PaymentMethods/Twint.php
+++ b/src/PaymentMethods/Twint.php
@@ -22,6 +22,7 @@ protected function getConfig(): array
             'filtersOnBuild' => false,
             'confirmationDelayed' => false,
             'SEPA' => false,
+            'docs' => 'https://www.mollie.com/gb/payments/twint',
         ];
     }
 
diff --git a/src/PaymentMethods/Voucher.php b/src/PaymentMethods/Voucher.php
index 1df331bb9..80224f322 100644
--- a/src/PaymentMethods/Voucher.php
+++ b/src/PaymentMethods/Voucher.php
@@ -43,6 +43,7 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'docs' => 'https://www.mollie.com/gb/payments/meal-eco-gift-vouchers',
         ];
     }
 
diff --git a/src/Settings/MollieSettingsPage.php b/src/Settings/MollieSettingsPage.php
index 53cd41b1d..7c521201c 100644
--- a/src/Settings/MollieSettingsPage.php
+++ b/src/Settings/MollieSettingsPage.php
@@ -10,33 +10,36 @@
 use Mollie\WooCommerce\Settings\Page\PageNoApiKey;
 use Mollie\WooCommerce\Settings\Page\PagePaymentMethods;
 use Mollie\WooCommerce\Shared\Data;
+use Mollie\WooCommerce\PaymentMethods\Constants;
+use WC_Gateway_BACS;
 use WC_Settings_Page;
 
 class MollieSettingsPage extends WC_Settings_Page
 {
-    protected Settings $settingsHelper;
+    protected Settings $settings;
     protected string $pluginPath;
     protected string $pluginUrl;
-    protected array $gateways;
+    protected array $mollieGateways;
     protected array $paymentMethods;
     protected bool $isTestModeEnabled;
     protected Data $dataHelper;
 
     public function __construct(
-            Settings $settingsHelper,
-            string $pluginPath,
-            string $pluginUrl,
-            array $gateways,
-            array $paymentMethods,
-            bool $isTestModeEnabled,
-            Data $dataHelper
+        Settings $settings,
+        string $pluginPath,
+        string $pluginUrl,
+        array $mollieGateways,
+        array $paymentMethods,
+        bool $isTestModeEnabled,
+        Data $dataHelper
     ) {
+
         $this->id = 'mollie_settings';
         $this->label = __('Mollie Settings', 'mollie-payments-for-woocommerce');
-        $this->settingsHelper = $settingsHelper;
+        $this->settings = $settings;
         $this->pluginPath = $pluginPath;
         $this->pluginUrl = $pluginUrl;
-        $this->gateways = $gateways;
+        $this->mollieGateways = $mollieGateways;
         $this->isTestModeEnabled = $isTestModeEnabled;
         $this->dataHelper = $dataHelper;
         $this->paymentMethods = $paymentMethods;
@@ -57,9 +60,15 @@ public function registerContentFieldType(): void
                 </th>
                 <td class="forminp">
                     <?php
-                    if (!empty($value['value'])): ?>
+                    if (!empty($value['value'])) : ?>
                         <?= $value['value']; ?>
+                        <?php
+                    endif; ?>
+
                     <?php
+                    if (!empty($value['desc'])) : ?>
+                        <p class="description"><?= $value['desc']; ?></p>
+                        <?php
                     endif; ?>
                 </td>
             </tr>
@@ -76,8 +85,8 @@ public function registerContentFieldType(): void
     public function outputSections()
     {
         add_action(
-                'woocommerce_sections_' . $this->id,
-                [$this, 'output_sections']
+            'woocommerce_sections_' . $this->id,
+            [$this, 'output_sections']
         );
     }
 
@@ -87,30 +96,141 @@ protected function pages(): array
                 PageNoApiKey::class,
                 PageApiKeys::class,
                 PagePaymentMethods::class,
-                PageAdvancedSettings::class
+                PageAdvancedSettings::class,
         ];
     }
 
     public function get_settings($currentSection = '')
     {
+        $defaultSection = $currentSection;
+        $connectionStatus = $this->settings->getConnectionStatus();
+
+        if (!$connectionStatus) {
+            $defaultSection = PageNoApiKey::slug();
+        }
+
+        if ($connectionStatus && $defaultSection === PageNoApiKey::slug()) {
+            $defaultSection = PageApiKeys::slug();
+        }
+
+        if ($defaultSection === '') {
+            $defaultSection = PageApiKeys::slug();
+        }
+
         $mollieSettings = null;
         foreach ($this->pages() as $pageClass) {
             /** @var AbstractPage $page */
-            $page = new $pageClass($this->settingsHelper, $this->pluginUrl);
-            if ($page->slug() === $currentSection) {
+            $page = new $pageClass(
+                $this->settings,
+                $this->pluginUrl,
+                $this->pages(),
+                $defaultSection,
+                $connectionStatus,
+                $this->isTestModeEnabled,
+                $this->mollieGateways,
+                $this->paymentMethods,
+                $this->dataHelper
+            );
+            if ($page::slug() === $defaultSection) {
                 $mollieSettings = $page->settings();
                 break;
             }
         }
 
-        if (!$mollieSettings) {
-            $mollieSettings = (new PageNoApiKey($this->settingsHelper, $this->pluginUrl))->settings();
-        }
-
         return apply_filters(
-                'woocommerce_get_settings_' . $this->id,
-                $mollieSettings,
-                $currentSection
+            'woocommerce_get_settings_' . $this->id,
+            $mollieSettings,
+            $currentSection
         );
     }
+
+    protected function checkDirectDebitStatus($content): string
+    {
+        $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
+        $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty('enabled') === 'yes';
+        $sepaGatewayAllowed = !empty($this->registeredGateways["mollie_wc_gateway_directdebit"]);
+        if ($sepaGatewayAllowed && !$isSepaEnabled) {
+            $warning_message = __(
+                    "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
+                    'mollie-payments-for-woocommerce'
+            );
+
+            $content .= '<div class="notice notice-warning is-dismissible"><p>';
+            $content .= $warning_message;
+            $content .= '</p></div> ';
+
+            return $content;
+        }
+
+        return $content;
+    }
+
+    /**
+     * @param $content
+     *
+     * @return string
+     */
+    protected function checkMollieBankTransferNotBACS($content): string
+    {
+        $woocommerce_banktransfer_gateway = new WC_Gateway_BACS();
+
+        if ($woocommerce_banktransfer_gateway->is_available()) {
+            $content .= '<div class="notice notice-warning is-dismissible"><p>';
+            $content .= __(
+                    'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
+                    'mollie-payments-for-woocommerce'
+            );
+            $content .= '</p></div> ';
+
+            return $content;
+        }
+
+        return $content;
+    }
+
+    /**
+     * @param $content
+     *
+     * @return string
+     */
+    protected function warnAboutRequiredCheckoutFieldForKlarna($content): string
+    {
+        $isKlarnaEnabled = $this->isKlarnaEnabled();
+        if ($isKlarnaEnabled) {
+            $content .= '<div class="notice notice-warning is-dismissible"><p>';
+            $content .= sprintf(
+            /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
+                    __(
+                            'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
+                            'mollie-payments-for-woocommerce'
+                    ),
+                    '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
+                    '</a>',
+                    '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
+                    '</a>'
+            );
+            $content .= '</p></div> ';
+
+            return $content;
+        }
+
+        return $content;
+    }
+
+    protected function isKlarnaEnabled(): bool
+    {
+        $klarnaGateways = [Constants::KLARNAPAYLATER, Constants::KLARNASLICEIT, Constants::KLARNAPAYNOW, Constants::KLARNA];
+        $isKlarnaEnabled = false;
+        foreach ($klarnaGateways as $klarnaGateway) {
+            if (
+                    array_key_exists('mollie_wc_gateway_' . $klarnaGateway, $this->mollieGateways)
+                    && array_key_exists($klarnaGateway, $this->paymentMethods)
+                    && $this->paymentMethods[$klarnaGateway]->getProperty('enabled') === 'yes'
+            ) {
+                $isKlarnaEnabled = true;
+                break;
+            }
+        }
+        return $isKlarnaEnabled;
+    }
 }
diff --git a/src/Settings/Page/MollieSettingsPageOld.php b/src/Settings/MollieSettingsPageOld.php
similarity index 100%
rename from src/Settings/Page/MollieSettingsPageOld.php
rename to src/Settings/MollieSettingsPageOld.php
diff --git a/src/Settings/Page/AbstractPage.php b/src/Settings/Page/AbstractPage.php
index 5a9864cf3..86ce33627 100644
--- a/src/Settings/Page/AbstractPage.php
+++ b/src/Settings/Page/AbstractPage.php
@@ -6,25 +6,50 @@
 
 use Mollie\WooCommerce\Settings\Page\Section\AbstractSection;
 use Mollie\WooCommerce\Settings\Settings;
+use Mollie\WooCommerce\Shared\Data;
 
 abstract class AbstractPage
 {
     protected Settings $settings;
     protected string $pluginUrl;
+    protected string $currentSection;
+    protected bool $connectionStatus;
+    protected bool $testModeEnabled;
+    protected array $pages;
+    protected array $mollieGateways;
+    protected array $paymentMethods;
+    protected Data $dataHelper;
+
+    public function __construct(
+        Settings $settings,
+        string $pluginUrl,
+        array $pages,
+        string $currentSection,
+        bool $connectionStatus,
+        bool $testModeEnabled,
+        array $mollieGateways,
+        array $paymentMethods,
+        Data $dataHelper
+    ) {
 
-    public function __construct(Settings $settings, string $pluginUrl)
-    {
         $this->settings = $settings;
         $this->pluginUrl = $pluginUrl;
+        $this->currentSection = $currentSection;
+        $this->connectionStatus = $connectionStatus;
+        $this->testModeEnabled = $testModeEnabled;
+        $this->pages = $pages;
+        $this->mollieGateways = $mollieGateways;
+        $this->paymentMethods = $paymentMethods;
+        $this->dataHelper = $dataHelper;
     }
 
-    abstract public function isTab(): bool;
+    abstract public static function isTab(): bool;
 
-    abstract public function slug(): string;
+    abstract public static function slug(): string;
 
-    public function tabName(): string
+    public static function tabName(): string
     {
-        return '';
+        return 'tabName';
     }
 
     protected function sections(): array
@@ -39,16 +64,26 @@ public function settings(): array
 
         foreach ($this->sections() as $sectionClass) {
             /** @var AbstractSection $section */
-            $section = new $sectionClass($this->settings, $this->pluginUrl);
+            $section = new $sectionClass(
+                $this->settings,
+                $this->pluginUrl,
+                $this->pages,
+                $this->currentSection,
+                $this->connectionStatus,
+                $this->testModeEnabled,
+                $this->mollieGateways,
+                $this->paymentMethods,
+                $this->dataHelper
+            );
             foreach ($section->config() as $field) {
                 $settings[] = $field;
             }
-            $styles[$sectionClass] = preg_replace('/\s+/', '', $section->styles());
+            $styles[$sectionClass] = $section->styles();
         }
         array_unshift($settings, [
             'id' => $this->settings->getSettingId('styles'),
             'type' => 'mollie_content',
-            'value' => implode($styles)
+            'value' => implode($styles),
         ]);
         return $settings;
     }
diff --git a/src/Settings/Page/PageAdvancedSettings.php b/src/Settings/Page/PageAdvancedSettings.php
index 5f21e8b09..8f9aaadab 100644
--- a/src/Settings/Page/PageAdvancedSettings.php
+++ b/src/Settings/Page/PageAdvancedSettings.php
@@ -4,15 +4,36 @@
 
 namespace Mollie\WooCommerce\Settings\Page;
 
-class PageAdvancedSettings extends AbstractPage {
+use Mollie\WooCommerce\Settings\Page\Section\Advanced;
+use Mollie\WooCommerce\Settings\Page\Section\ConnectionFields;
+use Mollie\WooCommerce\Settings\Page\Section\Header;
+use Mollie\WooCommerce\Settings\Page\Section\Notices;
+use Mollie\WooCommerce\Settings\Page\Section\Tabs;
 
-    public function isTab(): bool
+class PageAdvancedSettings extends AbstractPage
+{
+    public static function isTab(): bool
     {
-        // TODO: Implement isTab() method.
+        return true;
     }
 
-    public function slug(): string
+    public static function tabName(): string
+    {
+        return __('Advanced settings', 'mollie-payments-for-woocommerce');
+    }
+
+    public static function slug(): string
     {
         return 'mollie_advanced';
     }
+
+    public function sections(): array
+    {
+        return [
+            Header::class,
+            Notices::class,
+            Tabs::class,
+            Advanced::class
+        ];
+    }
 }
diff --git a/src/Settings/Page/PageApiKeys.php b/src/Settings/Page/PageApiKeys.php
index b393248c5..99fcd7b56 100644
--- a/src/Settings/Page/PageApiKeys.php
+++ b/src/Settings/Page/PageApiKeys.php
@@ -4,15 +4,38 @@
 
 namespace Mollie\WooCommerce\Settings\Page;
 
-class PageApiKeys extends AbstractPage {
+use Mollie\WooCommerce\Settings\Page\Section\ConnectionFields;
+use Mollie\WooCommerce\Settings\Page\Section\Header;
+use Mollie\WooCommerce\Settings\Page\Section\InstructionsNotConnected;
+use Mollie\WooCommerce\Settings\Page\Section\InstructionsConnected;
+use Mollie\WooCommerce\Settings\Page\Section\Notices;
+use Mollie\WooCommerce\Settings\Page\Section\Tabs;
 
-    public function isTab(): bool
+class PageApiKeys extends AbstractPage
+{
+    public static function isTab(): bool
     {
-        // TODO: Implement isTab() method.
+        return true;
     }
 
-    public function slug(): string
+    public static function slug(): string
     {
         return 'mollie_api_keys';
     }
+
+    public static function tabName(): string
+    {
+        return __('API keys', 'mollie-payments-for-woocommerce');
+    }
+
+    public function sections(): array
+    {
+        return [
+            Header::class,
+            Notices::class,
+            Tabs::class,
+            InstructionsConnected::class,
+            ConnectionFields::class,
+        ];
+    }
 }
diff --git a/src/Settings/Page/PageNoApiKey.php b/src/Settings/Page/PageNoApiKey.php
index 4763e18df..172b01ca0 100644
--- a/src/Settings/Page/PageNoApiKey.php
+++ b/src/Settings/Page/PageNoApiKey.php
@@ -6,16 +6,17 @@
 
 use Mollie\WooCommerce\Settings\Page\Section\ConnectionFields;
 use Mollie\WooCommerce\Settings\Page\Section\Header;
-use Mollie\WooCommerce\Settings\Page\Section\Instructions;
+use Mollie\WooCommerce\Settings\Page\Section\InstructionsNotConnected;
 use Mollie\WooCommerce\Settings\Page\Section\Notices;
 
-class PageNoApiKey extends AbstractPage {
-    public function isTab(): bool
+class PageNoApiKey extends AbstractPage
+{
+    public static function isTab(): bool
     {
-        // TODO: Implement isTab() method.
+        return false;
     }
 
-    public function slug(): string
+    public static function slug(): string
     {
         return 'mollie_no_api_key';
     }
@@ -25,8 +26,8 @@ public function sections(): array
         return [
             Header::class,
             Notices::class,
-            Instructions::class,
-            ConnectionFields::class
+            InstructionsNotConnected::class,
+            ConnectionFields::class,
         ];
     }
 }
diff --git a/src/Settings/Page/PagePaymentMethods.php b/src/Settings/Page/PagePaymentMethods.php
index f15c9f460..04eb9d684 100644
--- a/src/Settings/Page/PagePaymentMethods.php
+++ b/src/Settings/Page/PagePaymentMethods.php
@@ -4,15 +4,37 @@
 
 namespace Mollie\WooCommerce\Settings\Page;
 
-class PagePaymentMethods extends AbstractPage {
+use Mollie\WooCommerce\Settings\Page\Section\ConnectionStatusFields;
+use Mollie\WooCommerce\Settings\Page\Section\Header;
+use Mollie\WooCommerce\Settings\Page\Section\Notices;
+use Mollie\WooCommerce\Settings\Page\Section\PaymentMethods;
+use Mollie\WooCommerce\Settings\Page\Section\Tabs;
 
-    public function isTab(): bool
+class PagePaymentMethods extends AbstractPage
+{
+    public static function isTab(): bool
     {
-        // TODO: Implement isTab() method.
+        return true;
     }
 
-    public function slug(): string
+    public static function tabName(): string
+    {
+        return __('Payment methods', 'mollie-payments-for-woocommerce');
+    }
+
+    public static function slug(): string
     {
         return 'mollie_payment_methods';
     }
+
+    public function sections(): array
+    {
+        return [
+            Header::class,
+            Notices::class,
+            Tabs::class,
+            ConnectionStatusFields::class,
+            PaymentMethods::class,
+        ];
+    }
 }
diff --git a/src/Settings/Page/Section/AbstractSection.php b/src/Settings/Page/Section/AbstractSection.php
index 89549ae76..2a47e23c8 100644
--- a/src/Settings/Page/Section/AbstractSection.php
+++ b/src/Settings/Page/Section/AbstractSection.php
@@ -5,21 +5,47 @@
 namespace Mollie\WooCommerce\Settings\Page\Section;
 
 use Mollie\WooCommerce\Settings\Settings;
+use Mollie\WooCommerce\Shared\Data;
 
 abstract class AbstractSection
 {
     protected Settings $settings;
     protected string $pluginUrl;
+    protected string $currentSection;
+    protected bool $connectionStatus;
+    protected bool $testModeEnabled;
+    protected array $pages;
+    protected array $mollieGateways;
+    protected array $paymentMethods;
+    protected Data $dataHelper;
+
+    public function __construct(
+        Settings $settings,
+        string $pluginUrl,
+        array $pages,
+        string $currentSection,
+        bool $connectionStatus,
+        bool $testModeEnabled,
+        array $mollieGateways,
+        array $paymentMethods,
+        Data $dataHelper
+    ) {
 
-    public function __construct(Settings $settings, string $pluginUrl)
-    {
         $this->settings = $settings;
         $this->pluginUrl = $pluginUrl;
+        $this->currentSection = $currentSection;
+        $this->connectionStatus = $connectionStatus;
+        $this->testModeEnabled = $testModeEnabled;
+        $this->pages = $pages;
+        $this->mollieGateways = $mollieGateways;
+        $this->paymentMethods = $paymentMethods;
+        $this->dataHelper = $dataHelper;
     }
 
     abstract public function config(): array;
 
-    public function styles(): string{
+    public function styles(): string
+    {
         return '';
     }
 
diff --git a/src/Settings/Page/Section/Advanced.php b/src/Settings/Page/Section/Advanced.php
new file mode 100644
index 000000000..e8a4637ac
--- /dev/null
+++ b/src/Settings/Page/Section/Advanced.php
@@ -0,0 +1,231 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+use Mollie\WooCommerce\Shared\SharedDataDictionary;
+use Mollie\WooCommerce\Payment\PaymentService;
+
+class Advanced extends AbstractSection
+{
+    public function config(): array
+    {
+        $config = [
+            [
+                'id' => $this->settings->getSettingId('title'),
+                'title' => __('Mollie advanced settings', 'mollie-payments-for-woocommerce'),
+                'type' => 'title',
+                'desc' => '<p>' . __('The following options are required to use the plugin and are used by all Mollie payment methods', 'mollie-payments-for-woocommerce') . '</p>',
+            ],
+            [
+                'id' => $this->settings->getSettingId('order_status_cancelled_payments'),
+                'title' => __('Order status after cancelled payment', 'mollie-payments-for-woocommerce'),
+                'type' => 'select',
+                'options' => [
+                    'pending' => __('Pending', 'woocommerce'),
+                    'cancelled' => __('Cancelled', 'woocommerce'),
+                ],
+                'desc' => __('Status for orders when a payment (not a Mollie order via the Orders API) is cancelled. Default: pending. Orders with status Pending can be paid with another payment method, customers can try again. Cancelled orders are final. Set this to Cancelled if you only have one payment method or don\'t want customers to re-try paying with a different payment method. This doesn\'t apply to payments for orders via the new Orders API and Klarna payments.', 'mollie-payments-for-woocommerce'),
+                'default' => 'pending',
+            ],
+            [
+                'id' => $this->settings->getSettingId(SharedDataDictionary::SETTING_NAME_PAYMENT_LOCALE),
+                'title' => __('Payment screen language', 'mollie-payments-for-woocommerce'),
+                'type' => 'select',
+                'options' => [
+                    SharedDataDictionary::SETTING_LOCALE_WP_LANGUAGE => __(
+                            'Automatically send WordPress language',
+                            'mollie-payments-for-woocommerce'
+                        ) . ' (' . __('default', 'mollie-payments-for-woocommerce') . ')',
+                    SharedDataDictionary::SETTING_LOCALE_DETECT_BY_BROWSER => __(
+                        'Detect using browser language',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    'en_US' => __('English', 'mollie-payments-for-woocommerce'),
+                    'nl_NL' => __('Dutch', 'mollie-payments-for-woocommerce'),
+                    'nl_BE' => __('Flemish (Belgium)', 'mollie-payments-for-woocommerce'),
+                    'fr_FR' => __('French', 'mollie-payments-for-woocommerce'),
+                    'fr_BE' => __('French (Belgium)', 'mollie-payments-for-woocommerce'),
+                    'de_DE' => __('German', 'mollie-payments-for-woocommerce'),
+                    'de_AT' => __('Austrian German', 'mollie-payments-for-woocommerce'),
+                    'de_CH' => __('Swiss German', 'mollie-payments-for-woocommerce'),
+                    'es_ES' => __('Spanish', 'mollie-payments-for-woocommerce'),
+                    'ca_ES' => __('Catalan', 'mollie-payments-for-woocommerce'),
+                    'pt_PT' => __('Portuguese', 'mollie-payments-for-woocommerce'),
+                    'it_IT' => __('Italian', 'mollie-payments-for-woocommerce'),
+                    'nb_NO' => __('Norwegian', 'mollie-payments-for-woocommerce'),
+                    'sv_SE' => __('Swedish', 'mollie-payments-for-woocommerce'),
+                    'fi_FI' => __('Finnish', 'mollie-payments-for-woocommerce'),
+                    'da_DK' => __('Danish', 'mollie-payments-for-woocommerce'),
+                    'is_IS' => __('Icelandic', 'mollie-payments-for-woocommerce'),
+                    'hu_HU' => __('Hungarian', 'mollie-payments-for-woocommerce'),
+                    'pl_PL' => __('Polish', 'mollie-payments-for-woocommerce'),
+                    'lv_LV' => __('Latvian', 'mollie-payments-for-woocommerce'),
+                    'lt_LT' => __('Lithuanian', 'mollie-payments-for-woocommerce'),
+                ],
+                'desc' => sprintf(
+                /* translators: Placeholder 1: link tag Placeholder 2: closing tag */
+                    __('Sending a language (or locale) is required. The option \'Automatically send WordPress language\' will try to get the customer\'s language in WordPress (and respects multilanguage plugins) and convert it to a format Mollie understands. If this fails, or if the language is not supported, it will fall back to American English. You can also select one of the locales currently supported by Mollie, that will then be used for all customers.', 'mollie-payments-for-woocommerce'),
+                    '<a href="https://www.mollie.com/nl/docs/reference/payments/create" target="_blank">',
+                    '</a>'
+                ),
+                'default' => SharedDataDictionary::SETTING_LOCALE_WP_LANGUAGE,
+            ],
+            [
+                'id' => $this->settings->getSettingId('customer_details'),
+                'title' => __('Store customer details at Mollie', 'mollie-payments-for-woocommerce'),
+                'desc' => sprintf(
+                /* translators: Placeholder 1: enabled or disabled Placeholder 2: translated string */
+                    __(
+                        'Should Mollie store customers name and email address for Single Click Payments? Default <code>%1$s</code>. Required if WooCommerce Subscriptions is being used! Read more about <a href=\'https://help.mollie.com/hc/en-us/articles/115000671249-What-are-single-click-payments-and-how-does-it-work-\'>%2$s</a> and how it improves your conversion.',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    strtolower(__('Enabled', 'mollie-payments-for-woocommerce')),
+                    __('Single Click Payments', 'mollie-payments-for-woocommerce')
+                ),
+                'type' => 'checkbox',
+                'default' => 'yes',
+
+            ],
+            [
+                'id' => $this->settings->getSettingId('api_switch'),
+                'title' => __(
+                    'Select API Method',
+                    'mollie-payments-for-woocommerce'
+                ),
+                'type' => 'select',
+                'options' => [
+                    PaymentService::PAYMENT_METHOD_TYPE_ORDER => ucfirst(
+                            PaymentService::PAYMENT_METHOD_TYPE_ORDER
+                        ) . ' (' . __('default', 'mollie-payments-for-woocommerce')
+                        . ')',
+                    PaymentService::PAYMENT_METHOD_TYPE_PAYMENT => ucfirst(
+                        PaymentService::PAYMENT_METHOD_TYPE_PAYMENT
+                    ),
+                ],
+                'default' => PaymentService::PAYMENT_METHOD_TYPE_ORDER,
+                'desc' => sprintf(
+                /* translators: Placeholder 1: opening link tag, placeholder 2: closing link tag */
+                    __(
+                        'Click %1$shere%2$s to read more about the differences between the Payments and Orders API',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    '<a href="https://docs.mollie.com/orders/why-use-orders" target="_blank">',
+                    '</a>'
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('api_payment_description'),
+                'title' => __(
+                    'API Payment Description',
+                    'mollie-payments-for-woocommerce'
+                ),
+                'type' => 'text',
+                'default' => '{orderNumber}',
+                'desc' => sprintf(
+                    '</p>
+            <div class="available-payment-description-labels hide-if-no-js">
+                <p>%1$s:</p>
+                <ul role="list">
+                    %2$s
+                </ul>
+            </div>
+            <br style="clear: both;" />
+            <p class="description">%3$s',
+                    _x('Available variables', 'Payment description options', 'mollie-payments-for-woocommerce'),
+                    implode('', array_map(
+                        static function ($label, $labelDescription) {
+                            return sprintf(
+                                '<li style="float: left; margin-right: 5px;">
+                            <button type="button"
+                                class="mollie-settings-advanced-payment-desc-label button button-secondary button-small"
+                                data-tag="%1$s"
+                                aria-label="%2$s"
+                                title="%3$s"
+                            >
+                                %1$s
+                            </button>
+                        </li>',
+                                $label,
+                                substr($label, 1, -1),
+                                $labelDescription
+                            );
+                        },
+                        array_keys($this->paymentDescriptionLabels()),
+                        $this->paymentDescriptionLabels()
+                    )),
+                    sprintf(
+                    /* translators: Placeholder 1: Opening paragraph tag, placeholder 2: Closing paragraph tag */
+                        __(
+                            'Select among the available variables the description to be used for this transaction.%1$s(Note: this only works when the method is set to Payments API)%2$s',
+                            'mollie-payments-for-woocommerce'
+                        ),
+                        '<p>',
+                        '</p>'
+                    )
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('gatewayFeeLabel'),
+                'title' => __(
+                    'Surcharge gateway fee label',
+                    'mollie-payments-for-woocommerce'
+                ),
+                'type' => 'text',
+                'custom_attributes' => ['maxlength' => '30'],
+                'default' => __('Gateway Fee', 'mollie-payments-for-woocommerce'),
+                'desc' => __(
+                    'This is the label will appear in frontend when the surcharge applies',
+                    'mollie-payments-for-woocommerce'
+                ),
+            ],
+            [
+                'id' => $this->settings->getSettingId('removeOptionsAndTransients'),
+                'title' => __(
+                    'Remove Mollie data from Database on uninstall',
+                    'mollie-payments-for-woocommerce'
+                ),
+                'type' => 'checkbox',
+                'default' => 'no',
+                'desc' => __("Remove options and scheduled actions from database when uninstalling the plugin.", "mollie-payments-for-woocommerce") . ' (<a href="' . esc_url($this->cleanDbUrl()) . '">' . strtolower(
+                        __('Clear now', 'mollie-payments-for-woocommerce')
+                    ) . '</a>)',
+            ],
+            [
+                'id' => $this->settings->getSettingId('sectionend'),
+                'type' => 'sectionend',
+            ],
+        ];
+
+        return apply_filters(
+            'inpsyde.mollie-advanced-settings',
+            $config,
+            $this->settings->getPluginId()
+        );
+    }
+
+    protected function paymentDescriptionLabels(): array{
+        return  [
+            '{orderNumber}' => _x('Order number', 'Label {orderNumber} description for payment description options', 'mollie-payments-for-woocommerce'),
+            '{storeName}' => _x('Site Title', 'Label {storeName} description for payment description options', 'mollie-payments-for-woocommerce'),
+            '{customer.firstname}' => _x('Customer\'s first name', 'Label {customer.firstname} description for payment description options', 'mollie-payments-for-woocommerce'),
+            '{customer.lastname}' => _x('Customer\'s last name', 'Label {customer.lastname} description for payment description options', 'mollie-payments-for-woocommerce'),
+            '{customer.company}' => _x('Customer\'s company name', 'Label {customer.company} description for payment description options', 'mollie-payments-for-woocommerce'),
+        ];
+    }
+
+    protected function cleanDbUrl(): string{
+        return add_query_arg(
+            ['cleanDB-mollie' => 1, 'nonce_mollie_cleanDb' => wp_create_nonce('nonce_mollie_cleanDb')]
+        );
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        <?php
+        return ob_get_clean();
+    }
+}
diff --git a/src/Settings/Page/Section/ConnectionFields.php b/src/Settings/Page/Section/ConnectionFields.php
index af708c3ba..681c7d437 100644
--- a/src/Settings/Page/Section/ConnectionFields.php
+++ b/src/Settings/Page/Section/ConnectionFields.php
@@ -6,14 +6,17 @@
 
 class ConnectionFields extends AbstractSection
 {
+    use ConnectionStatusTrait;
+
     public function config(): array
     {
         return [
             [
                 'id' => $this->settings->getSettingId('title'),
                 'title' => '',
-                'type' => 'title'
+                'type' => 'title',
             ],
+            $this->connectionStatusField($this->settings, $this->connectionStatus),
             [
                 'id' => $this->settings->getSettingId('test_mode_enabled'),
                 'title' => __('Mollie Payment Mode', 'mollie-payments-for-woocommerce'),
@@ -21,8 +24,12 @@ public function config(): array
                 'type' => 'select',
                 'options' => [
                     'no' => 'Live API',
-                    'yes' => 'Test API'
+                    'yes' => 'Test API',
                 ],
+                'desc' => __(
+                    'Select <strong>Live API</strong> to receive real payments and <strong>Test API</strong> to test transactions without a fee.',
+                    'mollie-payments-for-woocommerce'
+                ),
                 'desc_tip' => __(
                     'Enable test mode if you want to test the plugin without using real payments.',
                     'mollie-payments-for-woocommerce'
@@ -34,14 +41,11 @@ public function config(): array
                 'default' => '',
                 'type' => 'text',
                 'desc' => sprintf(
-                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
                     __(
-                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
+                        "Use your <a href='%s' target='_blank'>Live API key</a> when you're ready to receive real payments.",
                         'mollie-payments-for-woocommerce'
                     ),
-                    'live',
-                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
-                    '</a>'
+                    'https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner'
                 ),
                 'css' => 'width: 350px',
                 'placeholder' => __(
@@ -55,14 +59,11 @@ public function config(): array
                 'default' => '',
                 'type' => 'text',
                 'desc' => sprintf(
-                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
                     __(
-                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
+                        "Use your <a href='%s' target='_blank'>Test APl key</a> to check the connection and test transactions without a fee.",
                         'mollie-payments-for-woocommerce'
                     ),
-                    'test',
-                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
-                    '</a>'
+                    'https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner'
                 ),
                 'css' => 'width: 350px',
                 'placeholder' => __(
@@ -74,7 +75,13 @@ public function config(): array
                 'id' => $this->settings->getSettingId('debug'),
                 'title' => __('Debug Log', 'mollie-payments-for-woocommerce'),
                 'type' => 'checkbox',
-                'desc' => __('Log plugin events.', 'mollie-payments-for-woocommerce'),
+                'desc' => sprintf(
+                    __(
+                        "Log plugin events. <a href='%s'>View logs</a>",
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    $this->settings->getLogsUrl()
+                ),
                 'default' => 'yes',
             ],
             [
diff --git a/src/Settings/Page/Section/ConnectionStatusFields.php b/src/Settings/Page/Section/ConnectionStatusFields.php
new file mode 100644
index 000000000..68312324d
--- /dev/null
+++ b/src/Settings/Page/Section/ConnectionStatusFields.php
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class ConnectionStatusFields extends AbstractSection
+{
+    use ConnectionStatusTrait;
+
+    public function config(): array
+    {
+        return [
+            [
+                'id' => $this->settings->getSettingId('title'),
+                'title' => '',
+                'type' => 'title',
+            ],
+            $this->connectionStatusField($this->settings, $this->connectionStatus),
+            $this->refreshStatusField(),
+            [
+                'id' => $this->settings->getSettingId('sectionend'),
+                'type' => 'sectionend',
+            ],
+        ];
+    }
+
+    public function refreshStatusField(): array
+    {
+        $refreshNonce = wp_create_nonce('nonce_mollie_refresh_methods');
+        $refreshUrl = add_query_arg(
+            ['refresh-methods' => 1, 'nonce_mollie_refresh_methods' => $refreshNonce]
+        );
+
+        return [
+            'id' => $this->settings->getSettingId('refresh_status'),
+            'title' => __('Payment method availability', 'mollie-payments-for-woocommerce'),
+            'value' => '<a class="button-secondary" href="' . $refreshUrl . '">' . __('Refresh Mollie payment methods', 'mollie-payments-for-woocommerce') . '</a>',
+            'desc' => __(
+                'Click this button to refresh your payment methods, e.g. if you recently enabled new payment methods in your Mollie profile',
+                'mollie-payments-for-woocommerce'
+            ),
+            'type' => 'mollie_custom_input',
+        ];
+    }
+}
diff --git a/src/Settings/Page/Section/ConnectionStatusTrait.php b/src/Settings/Page/Section/ConnectionStatusTrait.php
new file mode 100644
index 000000000..ff1c0514c
--- /dev/null
+++ b/src/Settings/Page/Section/ConnectionStatusTrait.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+use Mollie\WooCommerce\Settings\Settings;
+
+trait ConnectionStatusTrait
+{
+    protected function connectionStatusField(Settings $settings, bool $connectionStatus): array
+    {
+
+        return [
+            'id' => $settings->getSettingId('connection_status'),
+            'title' => __('Mollie Connection Status', 'mollie-payments-for-woocommerce'),
+            'value' => $this->connectionStatus($settings, $connectionStatus),
+            'type' => 'mollie_custom_input',
+        ];
+    }
+
+    protected function connectionStatus(Settings $settings, bool $connectionStatus): ?string
+    {
+        $testMode = $settings->isTestModeEnabled();
+        if (!$connectionStatus) {
+            return __(
+                'Failed to connect to Mollie API - check your API keys &#x2716;',
+                'mollie-payments-for-woocommerce'
+            );
+        }
+        if ($testMode) {
+            return __('Successfully connected with Test API &#x2713;', 'mollie-payments-for-woocommerce');
+        }
+        return __('Successfully connected with Live API &#x2713;', 'mollie-payments-for-woocommerce');
+    }
+}
diff --git a/src/Settings/Page/Section/Header.php b/src/Settings/Page/Section/Header.php
index c6408fcea..0f07b0309 100644
--- a/src/Settings/Page/Section/Header.php
+++ b/src/Settings/Page/Section/Header.php
@@ -10,10 +10,10 @@ public function config(): array
     {
         return [
                 [
-                        'id' => $this->settings->getSettingId('header'),
-                        'type' => 'mollie_content',
-                        'value' => $this->content()
-                ]
+                    'id' => $this->settings->getSettingId('header'),
+                    'type' => 'mollie_content',
+                    'value' => $this->content(),
+                ],
         ];
     }
 
@@ -62,8 +62,8 @@ protected function content(): string
                 <p class="mollie-settings-header__description">
                     <strong>
                         <?= __(
-                                'Effortless payments for your customers, designed for growth',
-                                'mollie-payments-for-woocommerce'
+                            'Effortless payments for your customers, designed for growth',
+                            'mollie-payments-for-woocommerce'
                         ); ?>
                     </strong>
                 </p>
diff --git a/src/Settings/Page/Section/InstructionsConnected.php b/src/Settings/Page/Section/InstructionsConnected.php
new file mode 100644
index 000000000..689e9dbf8
--- /dev/null
+++ b/src/Settings/Page/Section/InstructionsConnected.php
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class InstructionsConnected extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+            [
+                'id' => $this->settings->getSettingId('instructions'),
+                'type' => 'mollie_content',
+                'value' => $this->content(),
+            ],
+        ];
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        <h3><?= __("Mollie API Keys", 'mollie-payments-for-woocommerce'); ?></h3>
+        <p>
+            <?= sprintf(
+                __(
+                    "To start receiving payments through the Mollie plugin in your WooCommerce store, 
+                you'll need to connect it to your Mollie account using an <a href='%s' target='_blank'>API key.</a>",
+                    'mollie-payments-for-woocommerce'
+                ),
+                'https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner'
+            ); ?>
+        </p>
+        <p>
+            <?=
+            __(
+                    'Please note that your API keys are unique to your Mollie account and should be kept private 
+                    to ensure the security of your transactions.', 'mollie-payments-for-woocommerce'
+            );
+            ?>
+        </p>
+        <?php
+        return ob_get_clean();
+    }
+}
diff --git a/src/Settings/Page/Section/Instructions.php b/src/Settings/Page/Section/InstructionsNotConnected.php
similarity index 66%
rename from src/Settings/Page/Section/Instructions.php
rename to src/Settings/Page/Section/InstructionsNotConnected.php
index 46ea719cc..fffb2ba42 100644
--- a/src/Settings/Page/Section/Instructions.php
+++ b/src/Settings/Page/Section/InstructionsNotConnected.php
@@ -4,7 +4,7 @@
 
 namespace Mollie\WooCommerce\Settings\Page\Section;
 
-class Instructions extends AbstractSection
+class InstructionsNotConnected extends AbstractSection
 {
     public function config(): array
     {
@@ -12,8 +12,8 @@ public function config(): array
                 [
                         'id' => $this->settings->getSettingId('instructions'),
                         'type' => 'mollie_content',
-                        'value' => $this->content()
-                ]
+                        'value' => $this->content(),
+                ],
         ];
     }
 
@@ -24,9 +24,9 @@ protected function content(): string
         <h3><?= __("Mollie API Keys", 'mollie-payments-for-woocommerce'); ?></h3>
         <p>
             <?= __(
-                    "To start receiving payments through the Mollie plugin in your WooCommerce store,
+                "To start receiving payments through the Mollie plugin in your WooCommerce store,
             you'll need to connect it to your Mollie account using an API key.",
-                    'mollie-payments-for-woocommerce'
+                'mollie-payments-for-woocommerce'
             ); ?>
         </p>
         <p>
@@ -37,11 +37,11 @@ protected function content(): string
         <ol>
             <li>
                 <?= sprintf(
-                        __(
-                                "Log in to your <a href='%s' target='_blank'>Mollie Dashboard</a>",
-                                'mollie-payments-for-woocommerce'
-                        ),
-                        'https://my.mollie.com/dashboard/login?lang=en'
+                    __(
+                        "Log in to your <a href='%s' target='_blank'>Mollie Dashboard</a>",
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    'https://my.mollie.com/dashboard/login?lang=en'
                 ); ?>
             </li>
             <li>
@@ -52,16 +52,16 @@ protected function content(): string
             </li>
             <li>
                 <?= __(
-                        "Paste the copied API key into the <strong>Live API key</strong> or <strong>Test API key</strong> fields below.",
-                        'mollie-payments-for-woocommerce'
+                    "Paste the copied API key into the <strong>Live API key</strong> or <strong>Test API key</strong> fields below.",
+                    'mollie-payments-for-woocommerce'
                 ); ?>
             </li>
         </ol>
         <p>
             <?= __(
-                    "Please note that your API keys are unique to your Mollie account and should be kept
+                "Please note that your API keys are unique to your Mollie account and should be kept
             private to ensure the security of your transactions.",
-                    'mollie-payments-for-woocommerce'
+                'mollie-payments-for-woocommerce'
             ); ?>
         </p>
         <?php
diff --git a/src/Settings/Page/Section/Notices.php b/src/Settings/Page/Section/Notices.php
index 7c80ae69d..07247bdcd 100644
--- a/src/Settings/Page/Section/Notices.php
+++ b/src/Settings/Page/Section/Notices.php
@@ -10,10 +10,10 @@ public function config(): array
     {
         return [
                 [
-                        'id' => $this->settings->getSettingId('notices'),
-                        'type' => 'mollie_content',
-                        'value' => $this->content()
-                ]
+                    'id' => $this->settings->getSettingId('notices'),
+                    'type' => 'mollie_content',
+                    'value' => $this->content(),
+                ],
         ];
     }
 
diff --git a/src/Settings/Page/Section/PaymentMethods.php b/src/Settings/Page/Section/PaymentMethods.php
new file mode 100644
index 000000000..9bf80ea80
--- /dev/null
+++ b/src/Settings/Page/Section/PaymentMethods.php
@@ -0,0 +1,246 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+use Mollie\WooCommerce\PaymentMethods\AbstractPaymentMethod;
+
+class PaymentMethods extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+                [
+                        'id' => $this->settings->getSettingId('notices'),
+                        'type' => 'mollie_content',
+                        'value' => $this->content(),
+                ],
+        ];
+    }
+
+    protected function content(): string
+    {
+        ob_start();
+        ?>
+        <div class="mollie-section">
+            <div class="mollie-settings-pm">
+                <?= $this->renderGateways(); ?>
+            </div>
+        </div>
+        <?php
+        return ob_get_clean();
+    }
+
+    public function renderGateways(): string
+    {
+        $this->refreshIfRequested();
+        $this->cleanDbIfRequested();
+
+        $messageEnabled = '<span class="mollie-settings-pm__status mollie-settings-pm__status--enabled">' . __(
+            'enabled',
+            'mollie-payments-for-woocommerce'
+        ) . '</span>';
+
+        $messageDisabled = '<span class="mollie-settings-pm__status mollie-settings-pm__status--disabled">' . __(
+            'disabled',
+            'mollie-payments-for-woocommerce'
+        ) . '</span>';
+
+        $titleActivePaymentMethods = __(
+            'Currently Active Payment Methods',
+            'mollie-payments-for-woocommerce'
+        );
+        $descriptionActivePaymentMethods = __(
+            'These payment methods are active in your Mollie profile. 
+        You can enable these payment methods in their settings to make them available for your customers.',
+            'mollie-payments-for-woocommerce'
+        );
+        $titleInactivePaymentMethods = __('Inactive Payment Methods', 'mollie-payments-for-woocommerce');
+        $descriptionInactivePaymentMethods = __(
+            'These payment methods are available in your Mollie profile but are 
+        not currently active. Activate them to offer more payment options to your customers.',
+            'mollie-payments-for-woocommerce'
+        );
+
+        $activatedGateways = '';
+        $deactivatedGateways = '';
+
+        /** @var AbstractPaymentMethod $paymentMethod */
+        foreach ($this->paymentMethods as $paymentMethod) {
+            $paymentMethodId = $paymentMethod->getProperty('id');
+            $gatewayKey = 'mollie_wc_gateway_' . $paymentMethodId;
+            $enabledAtMollie = array_key_exists($gatewayKey, $this->mollieGateways);
+            $enabledInWoo = ($paymentMethod->getSettings())['enabled'] === 'yes';
+            $paymentGatewayButton = '<div class="mollie-settings-pm__single">';
+            $paymentGatewayButton .= $paymentMethod->getIconUrl();
+            $paymentGatewayButton .= $paymentMethod->title();
+            $documentationLink = $paymentMethod->getProperty('docs');
+            $moreInformation = '';
+
+            if ($documentationLink) {
+                $moreInformation = "<a class='mollie-settings-pm__info' href='" . $documentationLink . "'>" . __(
+                    'More information',
+                    'mollie-payments-for-woocommerce'
+                ) . '</a>';
+            }
+
+            if ($enabledAtMollie) {
+                if ($enabledInWoo) {
+                    $paymentGatewayButton .= $messageEnabled;
+                } else {
+                    $paymentGatewayButton .= $messageDisabled;
+                }
+                $paymentGatewayButton .= '<a class="button-secondary" href="' . $this->getGatewaySettingsUrl(
+                    $gatewayKey
+                ) . '">' . __(
+                    'Manage Payment Method',
+                    'mollie-payments-for-woocommerce'
+                ) . '</a>';
+            } else {
+                $paymentGatewayButton .= $moreInformation;
+                $paymentGatewayButton .= ' <a class="button-secondary" href="https://my.mollie.com/dashboard/settings/profiles?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">' .
+                        __('Activate Payment Method', 'mollie-payments-for-woocommerce')
+                        . '</a>';
+            }
+
+            $paymentGatewayButton .= '</div>';
+            if ($enabledAtMollie) {
+                $activatedGateways .= $paymentGatewayButton;
+            } else {
+                $deactivatedGateways .= $paymentGatewayButton;
+            }
+        }
+
+        return $this->paymentGatewaysBlock(
+            $titleActivePaymentMethods,
+            $descriptionActivePaymentMethods,
+            $activatedGateways
+        ) . $this->paymentGatewaysBlock(
+            $titleInactivePaymentMethods,
+            $descriptionInactivePaymentMethods,
+            $deactivatedGateways
+        );
+    }
+
+    protected function paymentGatewaysBlock(string $title, string $description, string $html): string
+    {
+        ob_start();
+        ?>
+        <div class="mollie-settings-pm__wrap">
+            <h3><?= $title; ?></h3>
+            <p><?= $description; ?></p>
+            <div class="mollie-settings-pm__list">
+                <?= $html; ?>
+            </div>
+        </div>
+        <?php
+        return ob_get_clean();
+    }
+
+    protected function getGatewaySettingsUrl(string $gatewayClassName): string
+    {
+        return admin_url(
+            'admin.php?page=wc-settings&tab=checkout&section=' . sanitize_title(strtolower($gatewayClassName))
+        );
+    }
+
+    public function styles(): string
+    {
+        ob_start();
+        ?>
+        <style>
+            .mollie-settings-pm {
+                background-color: #fff;
+                padding: 16px;
+                border-radius: 12px;
+                border: 1px solid #c3c4c7;
+                display: flex;
+                flex-direction: column;
+                gap: 24px;
+            }
+
+            .mollie-settings-pm__list {
+                display: flex;
+                justify-content: space-between;
+                flex-wrap: wrap;
+                row-gap: 12px;
+            }
+
+            .mollie-settings-pm__single {
+                background-color: #f0f0f1;
+                width: calc(50% - 6px);
+                display: flex;
+                padding: 8px;
+                box-sizing: border-box;
+                align-items: center;
+                gap: 8px;
+                border-radius: 4px;
+                border: 1px solid #c3c4c7;
+            }
+
+            .mollie-settings-pm__single .button-secondary {
+                margin-left: auto;
+            }
+
+            .mollie-settings-pm__status--enabled {
+                color: green;
+            }
+
+            .mollie-settings-pm__status--disabled {
+                color: red;
+            }
+
+            .mollie-settings-pm__info {
+                color: #646970;
+                text-decoration: none;
+                text-wrap: nowrap;
+                padding-right: 16px;
+            }
+
+        </style>
+
+        <?php
+        return ob_get_clean();
+    }
+
+    protected function refreshIfRequested()
+    {
+        if (
+                isset($_GET['refresh-methods']) &&
+                isset($_GET['nonce_mollie_refresh_methods']) &&
+                wp_verify_nonce(
+                    filter_input(INPUT_GET, 'nonce_mollie_refresh_methods', FILTER_SANITIZE_SPECIAL_CHARS),
+                    'nonce_mollie_refresh_methods'
+                )
+        ) {
+            $testMode = $this->testModeEnabled;
+            $apiKey = $this->settings->getApiKey();
+            /* Reload active Mollie methods */
+            $methods = $this->dataHelper->getAllPaymentMethods($apiKey, $testMode, false);
+            foreach ($methods as $key => $method) {
+                $methods['mollie_wc_gateway_' . $method['id']] = $method;
+                unset($methods[$key]);
+            }
+            $this->mollieGateways = $methods;
+        }
+    }
+
+    protected function cleanDbIfRequested()
+    {
+
+        if (
+                isset($_GET['cleanDB-mollie']) && wp_verify_nonce(
+                    filter_input(INPUT_GET, 'nonce_mollie_cleanDb', FILTER_SANITIZE_SPECIAL_CHARS),
+                    'nonce_mollie_cleanDb'
+                )
+        ) {
+            $cleaner = $this->settings->cleanDb();
+            $cleaner->cleanAll();
+            //set default settings
+            foreach ($this->paymentMethods as $paymentMethod) {
+                $paymentMethod->getSettings();
+            }
+        }
+    }
+}
diff --git a/src/Settings/Page/Section/Tabs.php b/src/Settings/Page/Section/Tabs.php
new file mode 100644
index 000000000..4e373d444
--- /dev/null
+++ b/src/Settings/Page/Section/Tabs.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Mollie\WooCommerce\Settings\Page\Section;
+
+class Tabs extends AbstractSection
+{
+    public function config(): array
+    {
+        return [
+                [
+                    'id' => $this->settings->getSettingId('notices'),
+                    'type' => 'mollie_content',
+                    'value' => $this->content(),
+                ],
+        ];
+    }
+
+    protected function content(): string
+    {
+
+        $content = '<nav class="nav-tab-wrapper woo-nav-tab-wrapper">';
+
+        foreach ($this->pages as $pageClassName) {
+            if ($pageClassName::isTab()) {
+                $currentTabClass = '';
+                if ($pageClassName::slug() === $this->currentSection) {
+                    $currentTabClass = 'nav-tab-active';
+                }
+                $content .= '<a class="nav-tab ' . $currentTabClass . '" href="' . $this->pageUrl($pageClassName::slug()) . '">';
+                $content .= $pageClassName::tabName();
+                $content .= '</a>';
+            }
+        }
+        $content .= '</nav>';
+
+        return $content;
+    }
+
+    protected function pageUrl(string $sectionId): string
+    {
+        return admin_url('admin.php?page=wc-settings&tab=mollie_settings&section=' . sanitize_title($sectionId));
+    }
+}
diff --git a/src/Settings/Settings.php b/src/Settings/Settings.php
index c93589641..2d03aa453 100644
--- a/src/Settings/Settings.php
+++ b/src/Settings/Settings.php
@@ -332,7 +332,7 @@ public function isDebugEnabled()
     /**
      * @return string
      */
-    public function getLogsUrl()
+    public function getLogsUrl(): string
     {
         return admin_url('admin.php?page=wc-status&tab=logs');
     }
@@ -384,6 +384,24 @@ public function updateMerchantIdAfterApiKeyChanges($oldValue, $value, $optionNam
         $this->updateMerchantIdOnApiKeyChanges($value, $option);
     }
 
+    public function getConnectionStatus(): bool
+    {
+
+        $status = $this->statusHelper;
+        if (!$status->isCompatible()) {
+            return false;
+        }
+
+        try {
+            $apiKey = $this->getApiKey();
+            $apiClient = $this->apiHelper->getApiClient($apiKey);
+            $status->getMollieApiStatus($apiClient);
+            return true;
+        } catch (\Mollie\Api\Exceptions\ApiException $e) {
+            return false;
+        }
+    }
+
     /**
      * Get plugin status
      *
@@ -447,6 +465,10 @@ public function getPaymentConfirmationCheckTime()
         return $date->getTimestamp();
     }
 
+    public function getPluginId()
+    {
+        return $this->pluginId;
+    }
     /**
      * @param string $setting
      *

From d39fa16e1e8b817c1913e5cc9e567a0b3d687dcf Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 10:44:58 +0200
Subject: [PATCH 3/9] Code style & Notices

---
 phpcs.xml.dist                                |   2 +-
 .../ApplePayButton/ApplePayDataObjectHttp.php |   2 +-
 src/Gateway/GatewayModule.php                 |   1 +
 src/PaymentMethods/PaymentMethodsIconUrl.php  |  10 +-
 src/Settings/MollieSettingsPage.php           |  56 +-
 src/Settings/MollieSettingsPageOld.php        | 789 ------------------
 src/Settings/Page/PageAdvancedSettings.php    |   2 +-
 src/Settings/Page/Section/Advanced.php        |  22 +-
 src/Settings/Page/Section/Header.php          |  10 +-
 .../Page/Section/InstructionsConnected.php    |  20 +-
 .../Page/Section/InstructionsNotConnected.php |  46 +-
 src/Settings/Page/Section/Notices.php         | 127 ++-
 src/Settings/Page/Section/PaymentMethods.php  | 117 +--
 src/Settings/SettingsModule.php               |   8 +-
 14 files changed, 277 insertions(+), 935 deletions(-)
 delete mode 100644 src/Settings/MollieSettingsPageOld.php

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index 3f6cd5194..33e29a680 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -7,7 +7,7 @@
     <file>./src</file>
     <exclude-pattern>./tests/</exclude-pattern>
 
-    <config name="testVersion" value="7.2"/>
+    <config name="testVersion" value="7.4"/>
     <config name="ignore_warnings_on_exit" value="1"/>
     <rule ref="Inpsyde">
         <exclude name="NeutronStandard.StrictTypes.RequireStrictTypes.StrictTypes"/>
diff --git a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
index 38f91294b..db7f6919b 100644
--- a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
+++ b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
@@ -326,7 +326,7 @@ protected function addressHasRequiredFieldsValues(
                     sprintf('ApplePay Data Error: Missing value for %s', $requiredField)
                 );
                 $this->errors[]
- = [
+                = [
                     'errorCode' => $errorCode,
                     'contactField' => $errorValue,
                 ];
diff --git a/src/Gateway/GatewayModule.php b/src/Gateway/GatewayModule.php
index 72cade0d9..b8987f101 100644
--- a/src/Gateway/GatewayModule.php
+++ b/src/Gateway/GatewayModule.php
@@ -707,6 +707,7 @@ public function buildPaymentMethod(
         Surcharge $surchargeService,
         array $apiMethod
     ) {
+
         $transformedId = ucfirst($id);
         $paymentMethodClassName = 'Mollie\\WooCommerce\\PaymentMethods\\' . $transformedId;
         $paymentMethod = new $paymentMethodClassName(
diff --git a/src/PaymentMethods/PaymentMethodsIconUrl.php b/src/PaymentMethods/PaymentMethodsIconUrl.php
index a1189ff8d..f8fd2c438 100644
--- a/src/PaymentMethods/PaymentMethodsIconUrl.php
+++ b/src/PaymentMethods/PaymentMethodsIconUrl.php
@@ -84,10 +84,16 @@ public function svgUrlForPaymentMethod($paymentMethodName)
             $svgUrl = $this->pluginUrl . '/' . sprintf('public/images/%s', $paymentMethodName) . self::SVG_FILE_EXTENSION;
         }
 
-        return $this->generateIconHtml($svgUrl);
+        return wp_kses($this->generateIconHtml($svgUrl), [
+            'img' => [
+                'src' => [],
+                'class' => [],
+                'alt' => [],
+            ],
+        ]);
     }
 
-    public function generateIconHtml($svgUrl)
+    public function generateIconHtml(string $svgUrl): string
     {
 
         return '<img src="' . esc_url($svgUrl)
diff --git a/src/Settings/MollieSettingsPage.php b/src/Settings/MollieSettingsPage.php
index 7c521201c..04be819e0 100644
--- a/src/Settings/MollieSettingsPage.php
+++ b/src/Settings/MollieSettingsPage.php
@@ -56,18 +56,18 @@ public function registerContentFieldType(): void
                 <th scope="row" class="titledesc">
                     <label for="<?php
                     echo esc_attr($value['id']); ?>"><?php
-                        echo esc_html($value['title']); ?></label>
+                        echo esc_html($value['title']);  ?></label>
                 </th>
                 <td class="forminp">
                     <?php
                     if (!empty($value['value'])) : ?>
-                        <?= $value['value']; ?>
+                        <?= $value['value']; // WPCS: XSS ok. ?>
                         <?php
                     endif; ?>
 
                     <?php
                     if (!empty($value['desc'])) : ?>
-                        <p class="description"><?= $value['desc']; ?></p>
+                        <p class="description"><?= $value['desc']; // WPCS: XSS ok. ?></p>
                         <?php
                     endif; ?>
                 </td>
@@ -77,7 +77,7 @@ public function registerContentFieldType(): void
 
         add_action('woocommerce_admin_field_mollie_content', static function ($value): void {
             if (!empty($value['value'])) {
-                echo $value['value'];
+                echo $value['value']; // WPCS: XSS ok.
             }
         });
     }
@@ -151,8 +151,8 @@ protected function checkDirectDebitStatus($content): string
         $sepaGatewayAllowed = !empty($this->registeredGateways["mollie_wc_gateway_directdebit"]);
         if ($sepaGatewayAllowed && !$isSepaEnabled) {
             $warning_message = __(
-                    "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
-                    'mollie-payments-for-woocommerce'
+                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
+                'mollie-payments-for-woocommerce'
             );
 
             $content .= '<div class="notice notice-warning is-dismissible"><p>';
@@ -177,8 +177,8 @@ protected function checkMollieBankTransferNotBACS($content): string
         if ($woocommerce_banktransfer_gateway->is_available()) {
             $content .= '<div class="notice notice-warning is-dismissible"><p>';
             $content .= __(
-                    'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
-                    'mollie-payments-for-woocommerce'
+                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
+                'mollie-payments-for-woocommerce'
             );
             $content .= '</p></div> ';
 
@@ -193,44 +193,4 @@ protected function checkMollieBankTransferNotBACS($content): string
      *
      * @return string
      */
-    protected function warnAboutRequiredCheckoutFieldForKlarna($content): string
-    {
-        $isKlarnaEnabled = $this->isKlarnaEnabled();
-        if ($isKlarnaEnabled) {
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= sprintf(
-            /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
-                    __(
-                            'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
-                            'mollie-payments-for-woocommerce'
-                    ),
-                    '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
-                    '</a>',
-                    '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
-                    '</a>'
-            );
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    protected function isKlarnaEnabled(): bool
-    {
-        $klarnaGateways = [Constants::KLARNAPAYLATER, Constants::KLARNASLICEIT, Constants::KLARNAPAYNOW, Constants::KLARNA];
-        $isKlarnaEnabled = false;
-        foreach ($klarnaGateways as $klarnaGateway) {
-            if (
-                    array_key_exists('mollie_wc_gateway_' . $klarnaGateway, $this->mollieGateways)
-                    && array_key_exists($klarnaGateway, $this->paymentMethods)
-                    && $this->paymentMethods[$klarnaGateway]->getProperty('enabled') === 'yes'
-            ) {
-                $isKlarnaEnabled = true;
-                break;
-            }
-        }
-        return $isKlarnaEnabled;
-    }
 }
diff --git a/src/Settings/MollieSettingsPageOld.php b/src/Settings/MollieSettingsPageOld.php
deleted file mode 100644
index fd265b692..000000000
--- a/src/Settings/MollieSettingsPageOld.php
+++ /dev/null
@@ -1,789 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Mollie\WooCommerce\Settings\Page;
-
-use Mollie\WooCommerce\Settings\Settings;
-use Mollie\WooCommerce\Shared\Data;
-use Mollie\WooCommerce\PaymentMethods\Constants;
-use WC_Admin_Settings;
-use WC_Gateway_BACS;
-use WC_Settings_Page;
-
-class MollieSettingsPage extends WC_Settings_Page
-{
-    public const FILTER_COMPONENTS_SETTINGS = 'mollie_settings';
-    protected $settingsHelper;
-
-    /**
-     * @var string
-     */
-    protected $pluginPath;
-    /**
-     * @var array
-     */
-    protected $registeredGateways;
-    /**
-     * @var bool
-     */
-    protected $isTestModeEnabled;
-    /**
-     * @var Data
-     */
-    protected $dataHelper;
-    /**
-     * @var array
-     */
-    protected $paymentMethods;
-
-    public function __construct(
-        Settings $settingsHelper,
-        string $pluginPath,
-        array $gateways,
-        array $paymentMethods,
-        bool $isTestModeEnabled,
-        Data $dataHelper
-    ) {
-
-        $this->id = 'mollie_settings';
-        $this->label = __('Mollie Settings', 'mollie-payments-for-woocommerce');
-        $this->settingsHelper = $settingsHelper;
-        $this->pluginPath = $pluginPath;
-        $this->registeredGateways = $gateways;
-        $this->isTestModeEnabled = $isTestModeEnabled;
-        $this->dataHelper = $dataHelper;
-        $this->paymentMethods = $paymentMethods;
-        add_action(
-            'woocommerce_sections_' . $this->id,
-            [$this, 'output_sections']
-        );
-        parent::__construct();
-    }
-
-    public function output()
-    {
-        global $current_section;
-        $settings = $this->get_settings($current_section);
-        $settings = $this->hideKeysIntoStars($settings);
-
-        WC_Admin_Settings::output_fields($settings);
-    }
-
-    public function get_settings($currentSection = '')
-    {
-        $mollieSettings = $this->addGlobalSettingsFields([]);
-
-        if ('mollie_components' === $currentSection) {
-            $mollieSettings = $this->sectionSettings(
-                $this->componentsFilePath()
-            );
-        }
-        if ('applepay_button' === $currentSection) {
-            $mollieSettings = $this->sectionSettings($this->applePaySection());
-        }
-        if ('advanced' === $currentSection) {
-            $mollieSettings = $this->sectionSettings($this->advancedSectionFilePath());
-        }
-
-        /**
-         * Filter Component Settings
-         *
-         * @param array $componentSettings Default components settings for the Credit Card Gateway
-         */
-        $mollieSettings = apply_filters(
-            self::FILTER_COMPONENTS_SETTINGS,
-            $mollieSettings
-        );
-
-        return apply_filters(
-            'woocommerce_get_settings_' . $this->id,
-            $mollieSettings,
-            $currentSection
-        );
-    }
-
-    /**
-     * @param array $settings
-     * @return array
-     */
-    public function addGlobalSettingsFields(array $settings): array
-    {
-        $presentationText = __(
-            'Quickly integrate all major payment methods in WooCommerce, wherever you need them.',
-            'mollie-payments-for-woocommerce'
-        );
-        $presentationText .= __(
-            ' Simply drop them ready-made into your WooCommerce webshop with this powerful plugin by Mollie.',
-            'mollie-payments-for-woocommerce'
-        );
-        $presentationText .= __(
-            ' Mollie is dedicated to making payments better for WooCommerce. ',
-            'mollie-payments-for-woocommerce'
-        );
-        $presentationText .= '<p>' . __(
-            'Please go to',
-            'mollie-payments-for-woocommerce'
-        ) . '<a href="https://my.mollie.com/dashboard/signup?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner">' . __(
-            ' the signup page',
-            'mollie-payments-for-woocommerce'
-        ) . '</a> ';
-        $presentationText .= __(
-            ' to create a new Mollie account and start receiving payments in a couple of minutes. ',
-            'mollie-payments-for-woocommerce'
-        );
-        $presentationText .= __(
-            'Contact ',
-            'mollie-payments-for-woocommerce'
-        ) . '<a href="mailto:info@mollie.com">info@mollie.com</a>';
-        $presentationText .= __(
-            ' if you have any questions or comments about this plugin.',
-            'mollie-payments-for-woocommerce'
-        ) . '</p>';
-        $presentationText .= '<p style="border-left: 4px solid black; padding: 8px; height:32px; font-weight:bold; font-size: medium;">' . __(
-            'Our pricing is always per transaction. No startup fees, no monthly fees, and no gateway fees. No hidden fees, period.',
-            'mollie-payments-for-woocommerce'
-        ) . '</p>';
-
-        $presentation = ''
-            . '<div style="width:1000px"><div style="font-weight:bold;"><a href="https://help.mollie.com/hc/en-us/sections/12858723658130-Mollie-for-WooCommerce">' . __(
-                'Plugin Documentation',
-                'mollie-payments-for-woocommerce'
-            ) . '</a> | <a href="https://www.mollie.com/contact/merchants">' . __(
-                'Contact Support',
-                'mollie-payments-for-woocommerce'
-            ) . '</a></div></div>'
-            . '<span></span>'
-            . '<div id="" class="" style="width: 1000px; padding:5px 0 0 10px"><p>' . $presentationText . '</p></div>';
-
-        $content = ''
-            . $presentation
-            . $this->settingsHelper->getPluginStatus()
-            . $this->getMollieMethods();
-
-        $debugDesc = __('Log plugin events.', 'mollie-payments-for-woocommerce');
-
-        // Display location of log files
-
-
-        $debugDesc .= ' ' . sprintf(
-            /* translators: Placeholder 1: Location of the log files */
-            __(
-                'Log files are saved to <code>%s</code>',
-                'mollie-payments-for-woocommerce'
-            ),
-            defined('WC_LOG_DIR') ? WC_LOG_DIR
-                    : WC()->plugin_path() . '/logs/'
-        );
-
-        // Global Mollie settings
-        $mollieSettings = [
-            [
-                'id' => $this->settingsHelper->getSettingId('title'),
-                'title' => __('Mollie Settings', 'mollie-payments-for-woocommerce'),
-                'type' => 'title',
-                'desc' => '<p id="' . $this->dataHelper->getPluginId() . '">' . $content . '</p>'
-                    . '<p>' . __(
-                        'The following options are required to use the plugin and are used by all Mollie payment methods',
-                        'mollie-payments-for-woocommerce'
-                    ) . '</p>',
-            ],
-            [
-                'id' => $this->settingsHelper->getSettingId('live_api_key'),
-                'title' => __('Live API key', 'mollie-payments-for-woocommerce'),
-                'default' => '',
-                'type' => 'text',
-                'desc' => sprintf(
-                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
-                    __(
-                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
-                        'mollie-payments-for-woocommerce'
-                    ),
-                    'live',
-                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
-                    '</a>'
-                ),
-                'css' => 'width: 350px',
-                'placeholder' => __(
-                    'Live API key should start with live_',
-                    'mollie-payments-for-woocommerce'
-                ),
-            ],
-            [
-                'id' => $this->settingsHelper->getSettingId('test_mode_enabled'),
-                'title' => __('Enable test mode', 'mollie-payments-for-woocommerce'),
-                'default' => 'no',
-                'type' => 'checkbox',
-                'desc_tip' => __(
-                    'Enable test mode if you want to test the plugin without using real payments.',
-                    'mollie-payments-for-woocommerce'
-                ),
-            ],
-            [
-                'id' => $this->settingsHelper->getSettingId('test_api_key'),
-                'title' => __('Test API key', 'mollie-payments-for-woocommerce'),
-                'default' => '',
-                'type' => 'text',
-                'desc' => sprintf(
-                /* translators: Placeholder 1: API key mode (live or test). The surrounding %s's Will be replaced by a link to the Mollie profile */
-                    __(
-                        'The API key is used to connect to Mollie. You can find your <strong>%1$s</strong> API key in your %2$sMollie account%3$s',
-                        'mollie-payments-for-woocommerce'
-                    ),
-                    'test',
-                    '<a href="https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
-                    '</a>'
-                ),
-                'css' => 'width: 350px',
-                'placeholder' => __(
-                    'Test API key should start with test_',
-                    'mollie-payments-for-woocommerce'
-                ),
-            ],
-            [
-                'id' => $this->settingsHelper->getSettingId('debug'),
-                'title' => __('Debug Log', 'mollie-payments-for-woocommerce'),
-                'type' => 'checkbox',
-                'desc' => $debugDesc,
-                'default' => 'yes',
-            ],
-            [
-                'id' => $this->settingsHelper->getSettingId('sectionend'),
-                'type' => 'sectionend',
-            ],
-        ];
-
-        return $this->mergeSettings($settings, $mollieSettings);
-    }
-    /**
-     * @return string
-     */
-    public function getMollieMethods(): string
-    {
-        $content = '';
-
-        $dataHelper = $this->dataHelper;
-
-        // Is Test mode enabled?
-        $testMode = $this->isTestModeEnabled;
-        $apiKey = $this->settingsHelper->getApiKey();
-
-        if (
-            isset($_GET['refresh-methods']) &&
-            isset($_GET['nonce_mollie_refresh_methods']) &&
-            wp_verify_nonce(
-                filter_input(INPUT_GET, 'nonce_mollie_refresh_methods', FILTER_SANITIZE_SPECIAL_CHARS),
-                'nonce_mollie_refresh_methods'
-            )
-        ) {
-            /* Reload active Mollie methods */
-            $methods = $dataHelper->getAllPaymentMethods($apiKey, $testMode, false);
-            foreach ($methods as $key => $method) {
-                $methods['mollie_wc_gateway_' . $method['id']] = $method;
-                unset($methods[$key]);
-            }
-            $this->registeredGateways = $methods;
-        }
-        if (
-            isset($_GET['cleanDB-mollie']) && wp_verify_nonce(
-                filter_input(INPUT_GET, 'nonce_mollie_cleanDb', FILTER_SANITIZE_SPECIAL_CHARS),
-                'nonce_mollie_cleanDb'
-            )
-        ) {
-            $cleaner = $this->settingsHelper->cleanDb();
-            $cleaner->cleanAll();
-            //set default settings
-            foreach ($this->paymentMethods as $paymentMethod) {
-                $paymentMethod->getSettings();
-            }
-        }
-
-        $iconAvailable = ' <span style="color: green; cursor: help;" title="' . __(
-            'Gateway enabled',
-            'mollie-payments-for-woocommerce'
-        ) . '">' . strtolower(__('Enabled', 'mollie-payments-for-woocommerce')) . '</span>';
-        $iconNoAvailable = ' <span style="color: red; cursor: help;" title="' . __(
-            'Gateway disabled',
-            'mollie-payments-for-woocommerce'
-        ) . '">' . strtolower(__('Disabled', 'mollie-payments-for-woocommerce')) . '</span>';
-
-        $content .= '<br /><br />';
-        $content .= '<div id="mol-icons-container">';
-
-        if ($testMode) {
-            $content .= '<strong>' . __('Test mode enabled.', 'mollie-payments-for-woocommerce') . '</strong> ';
-        }
-
-        $content .= sprintf(
-        /* translators: The surrounding %s's Will be replaced by a link to the Mollie profile */
-            __(
-                'The following payment methods are activated in your %1$sMollie profile%2$s:',
-                'mollie-payments-for-woocommerce'
-            ),
-            '<a href="https://my.mollie.com/dashboard/settings/profiles?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">',
-            '</a>'
-        );
-
-        // Set a "refresh" link so payment method status can be refreshed from Mollie API
-        $nonce_mollie_refresh_methods = wp_create_nonce('nonce_mollie_refresh_methods');
-        $refresh_methods_url = add_query_arg(
-            ['refresh-methods' => 1, 'nonce_mollie_refresh_methods' => $nonce_mollie_refresh_methods]
-        );
-
-        $content .= ' (<a href="' . esc_url($refresh_methods_url) . '">' . strtolower(
-            __('Refresh', 'mollie-payments-for-woocommerce')
-        ) . '</a>)';
-
-        $content .= '<ul class="mol-responsive-table-3">';
-
-        $mollieGateways = $this->registeredGateways;//this are the gateways enabled
-        $paymentMethods = $this->paymentMethods;
-        if (empty($mollieGateways)) {
-            $content .= '<li>';
-            $content .= __("No payment methods available", "mollie-payments-for-woocommerce");
-            $content .= '</li></ul></div>';
-            $content .= '<div class="clear"></div>';
-            return $content;
-        }
-        foreach ($paymentMethods as $paymentMethod) {
-            $paymentMethodId = $paymentMethod->getProperty('id');
-            $gatewayKey = 'mollie_wc_gateway_' . $paymentMethodId;
-            $paymentMethodEnabledAtMollie = array_key_exists($gatewayKey, $mollieGateways);
-            $content .= '<li>';
-            $content .= $paymentMethod->getIconUrl();
-            $content .= ' ' . esc_html($paymentMethod->title());
-            if ($paymentMethodEnabledAtMollie) {
-                $content .= $iconAvailable;
-                $content .= ' <a href="' . $this->getGatewaySettingsUrl($gatewayKey) . '">' . strtolower(
-                    __('Edit', 'mollie-payments-for-woocommerce')
-                ) . '</a>';
-
-                $content .= '</li>';
-                continue;
-            }
-            $content .= $iconNoAvailable;
-            $content .= ' <a href="https://my.mollie.com/dashboard/settings/profiles?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">' . strtolower(
-                __('Activate', 'mollie-payments-for-woocommerce')
-            ) . '</a>';
-
-            $content .= '</li>';
-        }
-
-        $content .= '</ul></div>';
-        $content .= '<div class="clear"></div>';
-
-        // Make sure users also enable iDEAL when they enable SEPA Direct Debit
-        // iDEAL is needed for the first payment of subscriptions with SEPA Direct Debit
-        $content = $this->checkDirectDebitStatus($content);
-
-        // Advice users to use bank transfer via Mollie, not
-        // WooCommerce default BACS method
-        $content = $this->checkMollieBankTransferNotBACS($content);
-
-        // Warn users that all default WooCommerce checkout fields
-        // are required to accept Klarna as payment method
-        $content = $this->warnAboutRequiredCheckoutFieldForKlarna($content);
-
-        // Warn users that all default WooCommerce checkout fields
-        // and billing company name
-        // are required to accept Billie as payment method
-        $content = $this->warnAboutRequiredCheckoutFieldForBillie($content);
-
-        return $content;
-    }
-
-    /**
-     * @param string $gateway_class_name
-     * @return string
-     */
-    protected function getGatewaySettingsUrl(string $gateway_class_name): string
-    {
-        return admin_url(
-            'admin.php?page=wc-settings&tab=checkout&section=' . sanitize_title(strtolower($gateway_class_name))
-        );
-    }
-
-    /**
-     * @param $content
-     *
-     * @return string
-     */
-    protected function checkDirectDebitStatus($content): string
-    {
-        $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
-        $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty('enabled') === 'yes';
-        $sepaGatewayAllowed = !empty($this->registeredGateways["mollie_wc_gateway_directdebit"]);
-        if ($sepaGatewayAllowed && !$isSepaEnabled) {
-            $warning_message = __(
-                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
-                'mollie-payments-for-woocommerce'
-            );
-
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= $warning_message;
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @param $content
-     *
-     * @return string
-     */
-    protected function checkMollieBankTransferNotBACS($content): string
-    {
-        $woocommerce_banktransfer_gateway = new WC_Gateway_BACS();
-
-        if ($woocommerce_banktransfer_gateway->is_available()) {
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= __(
-                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
-                'mollie-payments-for-woocommerce'
-            );
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @param $content
-     *
-     * @return string
-     */
-    protected function warnAboutRequiredCheckoutFieldForKlarna($content): string
-    {
-        $isKlarnaEnabled = $this->isKlarnaEnabled();
-        if ($isKlarnaEnabled) {
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= sprintf(
-            /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
-                __(
-                    'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
-                    'mollie-payments-for-woocommerce'
-                ),
-                '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
-                '</a>',
-                '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
-                '</a>'
-            );
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @param array $settings
-     * @param array $mollie_settings
-     * @return array
-     */
-    protected function mergeSettings(array $settings, array $mollie_settings): array
-    {
-        $new_settings = [];
-        $mollie_settings_merged = false;
-
-        // Find payment gateway options index
-        foreach ($settings as $index => $setting) {
-            if (
-                isset($setting['id']) && $setting['id'] === 'payment_gateways_options'
-                && (!isset($setting['type']) || $setting['type'] !== 'sectionend')
-            ) {
-                $new_settings = array_merge($new_settings, $mollie_settings);
-                $mollie_settings_merged = true;
-            }
-
-            $new_settings[] = $setting;
-        }
-
-        // Mollie settings not merged yet, payment_gateways_options not found
-        if (!$mollie_settings_merged) {
-            // Append Mollie settings
-            $new_settings = array_merge($new_settings, $mollie_settings);
-        }
-
-        return $new_settings;
-    }
-
-    /**
-     * @param $filePath
-     *
-     * @return array|mixed
-     */
-    protected function sectionSettings($filePath)
-    {
-        if (!file_exists($filePath)) {
-            return [];
-        }
-
-        $section = include $filePath;
-
-        if (!is_array($section)) {
-            $section = [];
-        }
-
-        return $section;
-    }
-
-    /**
-     * @return string
-     */
-    protected function componentsFilePath(): string
-    {
-        return $this->pluginPath . '/inc/settings/mollie_components.php';
-    }
-
-    /**
-     * @return string
-     */
-    protected function applePaySection(): string
-    {
-        return $this->pluginPath . '/inc/settings/mollie_applepay_settings.php';
-    }
-
-    /**
-     * @return string
-     */
-    protected function advancedSectionFilePath(): string
-    {
-        return $this->pluginPath . '/inc/settings/mollie_advanced_settings.php';
-    }
-
-    /**
-     * @param $settings
-     *
-     * @return array
-     */
-    protected function hideKeysIntoStars($settings): array
-    {
-        $liveKeyName = 'mollie-payments-for-woocommerce_live_api_key';
-        $testKeyName = 'mollie-payments-for-woocommerce_test_api_key';
-        $liveValue = get_option($liveKeyName);
-        $testValue = get_option($testKeyName);
-
-        foreach ($settings as $key => $setting) {
-            if (
-                ($setting['id']
-                    === $liveKeyName
-                    && $liveValue)
-                || ($setting['id']
-                    === $testKeyName
-                    && $testValue)
-            ) {
-                $settings[$key]['value'] = '**********';
-            }
-        }
-        return $settings;
-    }
-
-    /**
-     * Save settings
-     *
-     * @since 1.0
-     */
-    public function save()
-    {
-        global $current_section;
-
-        $settings = $this->get_settings($current_section);
-        if ('applepay_button' === $current_section) {
-            $this->saveApplePaySettings();
-        } else {
-            $settings = $this->saveApiKeys($settings);
-            WC_Admin_Settings::save_fields($settings);
-        }
-    }
-
-    protected function saveApplePaySettings()
-    {
-        $nonce = filter_input(INPUT_POST, '_wpnonce', FILTER_SANITIZE_SPECIAL_CHARS);
-        $isNonceValid = wp_verify_nonce(
-            $nonce,
-            'woocommerce-settings'
-        );
-        if (!$isNonceValid) {
-            return;
-        }
-        $data = filter_var_array($_POST, FILTER_SANITIZE_SPECIAL_CHARS);
-
-        $applepaySettings = [];
-        isset($data['enabled']) && ($data['enabled'] === '1') ?
-            $applepaySettings['enabled'] = 'yes'
-            : $applepaySettings['enabled'] = 'no';
-        isset($data['display_logo']) && ($data['display_logo'] === '1') ?
-            $applepaySettings['display_logo'] = 'yes'
-            : $applepaySettings['display_logo'] = 'no';
-        isset($data['mollie_apple_pay_button_enabled_cart'])
-        && ($data['mollie_apple_pay_button_enabled_cart'] === '1') ?
-            $applepaySettings['mollie_apple_pay_button_enabled_cart'] = 'yes'
-            : $applepaySettings['mollie_apple_pay_button_enabled_cart'] = 'no';
-        isset($data['mollie_apple_pay_button_enabled_product'])
-        && ($data['mollie_apple_pay_button_enabled_product'] === '1')
-            ?
-            $applepaySettings['mollie_apple_pay_button_enabled_product'] = 'yes'
-            :
-            $applepaySettings['mollie_apple_pay_button_enabled_product'] = 'no';
-        isset($data['title']) ? $applepaySettings['title'] = $data['title']
-            : $applepaySettings['title'] = '';
-        isset($data['description']) ?
-            $applepaySettings['description'] = $data['description']
-            : $applepaySettings['description'] = '';
-        update_option(
-            'mollie_wc_gateway_applepay_settings',
-            $applepaySettings
-        );
-    }
-
-    /**
-     * @param $settings
-     *
-     * @return array
-     */
-    protected function saveApiKeys($settings)
-    {
-        $nonce = filter_input(INPUT_POST, '_wpnonce', FILTER_SANITIZE_SPECIAL_CHARS);
-        $isNonceValid = wp_verify_nonce(
-            $nonce,
-            'woocommerce-settings'
-        );
-        if (!$isNonceValid) {
-            return $settings;
-        }
-        $liveKeyName = 'mollie-payments-for-woocommerce_live_api_key';
-        $testKeyName = 'mollie-payments-for-woocommerce_test_api_key';
-        $liveValueInDb = get_option($liveKeyName);
-        $testValueInDb = get_option($testKeyName);
-        $postedLiveValue = isset($_POST[$liveKeyName]) ? sanitize_text_field(wp_unslash($_POST[$liveKeyName])) : '';
-        $postedTestValue = isset($_POST[$testKeyName]) ? sanitize_text_field(wp_unslash($_POST[$testKeyName])) : '';
-
-        foreach ($settings as $setting) {
-            if (
-                $setting['id']
-                === $liveKeyName
-                && $liveValueInDb
-            ) {
-                if ($postedLiveValue === '**********') {
-                    $_POST[$liveKeyName] = $liveValueInDb;
-                } else {
-                    $pattern = '/^live_\w{30,}$/';
-                    $this->validateApiKeyOrRemove(
-                        $pattern,
-                        $postedLiveValue,
-                        $liveKeyName
-                    );
-                }
-            } elseif (
-                $setting['id']
-                === $testKeyName
-                && $testValueInDb
-            ) {
-                if ($postedTestValue === '**********') {
-                    $_POST[$testKeyName] = $testValueInDb;
-                } else {
-                    $pattern = '/^test_\w{30,}$/';
-                    $this->validateApiKeyOrRemove(
-                        $pattern,
-                        $postedTestValue,
-                        $testKeyName
-                    );
-                }
-            }
-        }
-        return $settings;
-    }
-
-    /**
-     * @param       $pattern
-     * @param       $value
-     * @param       $keyName
-     *
-     */
-    protected function validateApiKeyOrRemove($pattern, $value, $keyName)
-    {
-        $nonce = filter_input(INPUT_POST, '_wpnonce', FILTER_SANITIZE_SPECIAL_CHARS);
-        $isNonceValid = wp_verify_nonce(
-            $nonce,
-            'woocommerce-settings'
-        );
-        if (!$isNonceValid) {
-            return;
-        }
-        $hasApiFormat = preg_match($pattern, $value);
-        if (!$hasApiFormat) {
-            unset($_POST[$keyName]);
-        }
-    }
-
-    /**
-     * @return array|mixed|void|null
-     */
-    public function get_sections()
-    {
-        $isAppleEnabled = array_key_exists('mollie_wc_gateway_applepay', $this->registeredGateways);
-        $sections = [
-            '' => __('General', 'mollie-payments-for-woocommerce'),
-            'mollie_components' => __(
-                'Mollie Components',
-                'mollie-payments-for-woocommerce'
-            ),
-            'advanced' => __('Advanced', 'mollie-payments-for-woocommerce'),
-        ];
-        if ($isAppleEnabled) {
-            $sections['applepay_button'] = __(
-                'Apple Pay Button',
-                'mollie-payments-for-woocommerce'
-            );
-        }
-
-        return apply_filters(
-            'woocommerce_get_sections_' . $this->id,
-            $sections
-        );
-    }
-
-    /**
-     * @return bool
-     */
-    protected function isKlarnaEnabled(): bool
-    {
-        $klarnaGateways = [Constants::KLARNAPAYLATER, Constants::KLARNASLICEIT, Constants::KLARNAPAYNOW, Constants::KLARNA];
-        $isKlarnaEnabled = false;
-        foreach ($klarnaGateways as $klarnaGateway) {
-            if (
-                array_key_exists('mollie_wc_gateway_' . $klarnaGateway, $this->registeredGateways)
-                && array_key_exists($klarnaGateway, $this->paymentMethods)
-                && $this->paymentMethods[$klarnaGateway]->getProperty('enabled') === 'yes'
-            ) {
-                $isKlarnaEnabled = true;
-                break;
-            }
-        }
-        return $isKlarnaEnabled;
-    }
-
-    private function warnAboutRequiredCheckoutFieldForBillie(string $content)
-    {
-        $isBillieEnabled = array_key_exists('mollie_wc_gateway_billie', $this->registeredGateways)
-            && array_key_exists('billie', $this->paymentMethods)
-            && $this->paymentMethods['billie']->getProperty('enabled') === 'yes';
-        if ($isBillieEnabled) {
-            $content .= '<div class="notice notice-warning is-dismissible">';
-            $content .= '<p>';
-            $content .= __(
-                'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
-                'mollie-payments-for-woocommerce'
-            );
-            $content .= '</p>';
-            $content .= '</div>';
-        }
-        return $content;
-    }
-}
diff --git a/src/Settings/Page/PageAdvancedSettings.php b/src/Settings/Page/PageAdvancedSettings.php
index 8f9aaadab..8325a6e1a 100644
--- a/src/Settings/Page/PageAdvancedSettings.php
+++ b/src/Settings/Page/PageAdvancedSettings.php
@@ -33,7 +33,7 @@ public function sections(): array
             Header::class,
             Notices::class,
             Tabs::class,
-            Advanced::class
+            Advanced::class,
         ];
     }
 }
diff --git a/src/Settings/Page/Section/Advanced.php b/src/Settings/Page/Section/Advanced.php
index e8a4637ac..df39872bf 100644
--- a/src/Settings/Page/Section/Advanced.php
+++ b/src/Settings/Page/Section/Advanced.php
@@ -35,9 +35,9 @@ public function config(): array
                 'type' => 'select',
                 'options' => [
                     SharedDataDictionary::SETTING_LOCALE_WP_LANGUAGE => __(
-                            'Automatically send WordPress language',
-                            'mollie-payments-for-woocommerce'
-                        ) . ' (' . __('default', 'mollie-payments-for-woocommerce') . ')',
+                        'Automatically send WordPress language',
+                        'mollie-payments-for-woocommerce'
+                    ) . ' (' . __('default', 'mollie-payments-for-woocommerce') . ')',
                     SharedDataDictionary::SETTING_LOCALE_DETECT_BY_BROWSER => __(
                         'Detect using browser language',
                         'mollie-payments-for-woocommerce'
@@ -97,8 +97,8 @@ public function config(): array
                 'type' => 'select',
                 'options' => [
                     PaymentService::PAYMENT_METHOD_TYPE_ORDER => ucfirst(
-                            PaymentService::PAYMENT_METHOD_TYPE_ORDER
-                        ) . ' (' . __('default', 'mollie-payments-for-woocommerce')
+                        PaymentService::PAYMENT_METHOD_TYPE_ORDER
+                    ) . ' (' . __('default', 'mollie-payments-for-woocommerce')
                         . ')',
                     PaymentService::PAYMENT_METHOD_TYPE_PAYMENT => ucfirst(
                         PaymentService::PAYMENT_METHOD_TYPE_PAYMENT
@@ -189,8 +189,8 @@ class="mollie-settings-advanced-payment-desc-label button button-secondary butto
                 'type' => 'checkbox',
                 'default' => 'no',
                 'desc' => __("Remove options and scheduled actions from database when uninstalling the plugin.", "mollie-payments-for-woocommerce") . ' (<a href="' . esc_url($this->cleanDbUrl()) . '">' . strtolower(
-                        __('Clear now', 'mollie-payments-for-woocommerce')
-                    ) . '</a>)',
+                    __('Clear now', 'mollie-payments-for-woocommerce')
+                ) . '</a>)',
             ],
             [
                 'id' => $this->settings->getSettingId('sectionend'),
@@ -205,7 +205,9 @@ class="mollie-settings-advanced-payment-desc-label button button-secondary butto
         );
     }
 
-    protected function paymentDescriptionLabels(): array{
+    protected function paymentDescriptionLabels(): array
+    {
+
         return  [
             '{orderNumber}' => _x('Order number', 'Label {orderNumber} description for payment description options', 'mollie-payments-for-woocommerce'),
             '{storeName}' => _x('Site Title', 'Label {storeName} description for payment description options', 'mollie-payments-for-woocommerce'),
@@ -215,7 +217,9 @@ protected function paymentDescriptionLabels(): array{
         ];
     }
 
-    protected function cleanDbUrl(): string{
+    protected function cleanDbUrl(): string
+    {
+
         return add_query_arg(
             ['cleanDB-mollie' => 1, 'nonce_mollie_cleanDb' => wp_create_nonce('nonce_mollie_cleanDb')]
         );
diff --git a/src/Settings/Page/Section/Header.php b/src/Settings/Page/Section/Header.php
index 0f07b0309..abfe91c8f 100644
--- a/src/Settings/Page/Section/Header.php
+++ b/src/Settings/Page/Section/Header.php
@@ -57,23 +57,23 @@ protected function content(): string
         ?>
         <div class="mollie-section mollie-section--header">
             <div class="mollie-settings-header">
-                <img class="mollie-settings-header__image" src="<?= $this->pluginUrl; ?>public/images/logo/black.svg"
+                <img class="mollie-settings-header__image" src="<?= esc_url($this->pluginUrl); ?>public/images/logo/black.svg"
                      alt=""/>
                 <p class="mollie-settings-header__description">
                     <strong>
-                        <?= __(
+                        <?= esc_html(__(
                             'Effortless payments for your customers, designed for growth',
                             'mollie-payments-for-woocommerce'
-                        ); ?>
+                        )); ?>
                     </strong>
                 </p>
                 <div class="mollie-settings-header__buttons">
                     <a href="https://help.mollie.com/hc/en-us/sections/12858723658130-Mollie-for-WooCommerce"
                        target="_blank" class="button-secondary">
-                        <?= __('Mollie Plugin Documentation', 'mollie-payments-for-woocommerce'); ?>
+                        <?= esc_html(__('Mollie Plugin Documentation', 'mollie-payments-for-woocommerce')); ?>
                     </a>
                     <a href="https://www.mollie.com/contact/merchants" target="_blank" class="button-secondary">
-                        <?= __('Contact Mollie Support', 'mollie-payments-for-woocommerce'); ?>
+                        <?= esc_html(__('Contact Mollie Support', 'mollie-payments-for-woocommerce')); ?>
                     </a>
                 </div>
             </div>
diff --git a/src/Settings/Page/Section/InstructionsConnected.php b/src/Settings/Page/Section/InstructionsConnected.php
index 689e9dbf8..b66867a5c 100644
--- a/src/Settings/Page/Section/InstructionsConnected.php
+++ b/src/Settings/Page/Section/InstructionsConnected.php
@@ -21,23 +21,29 @@ protected function content(): string
     {
         ob_start();
         ?>
-        <h3><?= __("Mollie API Keys", 'mollie-payments-for-woocommerce'); ?></h3>
+        <h3><?= esc_html(__("Mollie API Keys", 'mollie-payments-for-woocommerce')); ?></h3>
         <p>
-            <?= sprintf(
+            <?= wp_kses(sprintf(
                 __(
                     "To start receiving payments through the Mollie plugin in your WooCommerce store, 
                 you'll need to connect it to your Mollie account using an <a href='%s' target='_blank'>API key.</a>",
                     'mollie-payments-for-woocommerce'
                 ),
                 'https://my.mollie.com/dashboard/developers/api-keys?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner'
-            ); ?>
+            ), [
+                    'a' => [
+                            'target' => [],
+                            'href' => [],
+                    ],
+            ]); ?>
         </p>
         <p>
             <?=
-            __(
-                    'Please note that your API keys are unique to your Mollie account and should be kept private 
-                    to ensure the security of your transactions.', 'mollie-payments-for-woocommerce'
-            );
+            esc_html(__(
+                'Please note that your API keys are unique to your Mollie account and should be kept private 
+                    to ensure the security of your transactions.',
+                'mollie-payments-for-woocommerce'
+            ));
             ?>
         </p>
         <?php
diff --git a/src/Settings/Page/Section/InstructionsNotConnected.php b/src/Settings/Page/Section/InstructionsNotConnected.php
index fffb2ba42..e9fccfe80 100644
--- a/src/Settings/Page/Section/InstructionsNotConnected.php
+++ b/src/Settings/Page/Section/InstructionsNotConnected.php
@@ -21,48 +21,68 @@ protected function content(): string
     {
         ob_start();
         ?>
-        <h3><?= __("Mollie API Keys", 'mollie-payments-for-woocommerce'); ?></h3>
+        <h3><?= esc_html(__("Mollie API Keys", 'mollie-payments-for-woocommerce')); ?></h3>
         <p>
-            <?= __(
+            <?= esc_html(__(
                 "To start receiving payments through the Mollie plugin in your WooCommerce store,
             you'll need to connect it to your Mollie account using an API key.",
                 'mollie-payments-for-woocommerce'
-            ); ?>
+            )); ?>
         </p>
         <p>
             <strong>
-                <?= __("How to find your API keys:", 'mollie-payments-for-woocommerce'); ?>
+                <?= esc_html(__("How to find your API keys:", 'mollie-payments-for-woocommerce')); ?>
             </strong>
         </p>
         <ol>
             <li>
-                <?= sprintf(
+                <?= wp_kses(sprintf(
                     __(
                         "Log in to your <a href='%s' target='_blank'>Mollie Dashboard</a>",
                         'mollie-payments-for-woocommerce'
                     ),
                     'https://my.mollie.com/dashboard/login?lang=en'
-                ); ?>
+                ), [
+                        'a' => [
+                                'href' => [],
+                                'target' => [],
+                        ],
+                ]); ?>
             </li>
             <li>
-                <?= __("Navigate to <strong>Developers > API keys.</strong>", 'mollie-payments-for-woocommerce'); ?>
+                <?= wp_kses(
+                    __("Navigate to <strong>Developers > API keys.</strong>", 'mollie-payments-for-woocommerce'),
+                    [
+                                'strong' => [],
+                        ]
+                ); ?>
             </li>
             <li>
-                <?= __("Click on <strong>Copy</strong> next to your API key.", 'mollie-payments-for-woocommerce'); ?>
+                <?= wp_kses(
+                    __("Click on <strong>Copy</strong> next to your API key.", 'mollie-payments-for-woocommerce'),
+                    [
+                        'strong' => [],
+                        ]
+                ); ?>
             </li>
             <li>
-                <?= __(
-                    "Paste the copied API key into the <strong>Live API key</strong> or <strong>Test API key</strong> fields below.",
-                    'mollie-payments-for-woocommerce'
+                <?= wp_kses(
+                    __(
+                        "Paste the copied API key into the <strong>Live API key</strong> or <strong>Test API key</strong> fields below.",
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    [
+                                'strong' => [],
+                        ]
                 ); ?>
             </li>
         </ol>
         <p>
-            <?= __(
+            <?= esc_html(__(
                 "Please note that your API keys are unique to your Mollie account and should be kept
             private to ensure the security of your transactions.",
                 'mollie-payments-for-woocommerce'
-            ); ?>
+            )); ?>
         </p>
         <?php
         return ob_get_clean();
diff --git a/src/Settings/Page/Section/Notices.php b/src/Settings/Page/Section/Notices.php
index 07247bdcd..7c49b11e8 100644
--- a/src/Settings/Page/Section/Notices.php
+++ b/src/Settings/Page/Section/Notices.php
@@ -4,15 +4,18 @@
 
 namespace Mollie\WooCommerce\Settings\Page\Section;
 
+use Mollie\WooCommerce\PaymentMethods\Constants;
+use WC_Gateway_BACS;
+
 class Notices extends AbstractSection
 {
     public function config(): array
     {
         return [
                 [
-                    'id' => $this->settings->getSettingId('notices'),
-                    'type' => 'mollie_content',
-                    'value' => $this->content(),
+                        'id' => $this->settings->getSettingId('notices'),
+                        'type' => 'mollie_content',
+                        'value' => $this->content(),
                 ],
         ];
     }
@@ -21,7 +24,123 @@ protected function content(): string
     {
         ob_start();
         ?>
-        NOTICES
+        <div class="mollie-section mollie-section--notices">
+            <?= $this->warnAboutRequiredCheckoutFieldForBillie(); // WPCS: XSS ok.?>
+            <?= $this->warnAboutRequiredCheckoutFieldForKlarna(); // WPCS: XSS ok.?>
+            <?= $this->warnMollieBankTransferNotBACS(); // WPCS: XSS ok.?>
+            <?= $this->warnDirectDebitStatus(); // WPCS: XSS ok.?>
+        </div>
+        <?php
+        return ob_get_clean();
+    }
+
+    protected function warnDirectDebitStatus(): string
+    {
+        $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
+        $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty(
+            'enabled'
+        ) === 'yes';
+        $sepaGatewayAllowed = !empty($this->mollieGateways["mollie_wc_gateway_directdebit"]);
+
+        if (!($sepaGatewayAllowed && !$isSepaEnabled)) {
+            return '';
+        }
+        return $this->notice(
+            __(
+                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
+                'mollie-payments-for-woocommerce'
+            )
+        );
+    }
+
+    protected function warnAboutRequiredCheckoutFieldForBillie(): string
+    {
+        $isBillieEnabled = array_key_exists('mollie_wc_gateway_billie', $this->mollieGateways)
+                && array_key_exists('billie', $this->paymentMethods)
+                && $this->paymentMethods['billie']->getProperty('enabled') === 'yes';
+
+        if (!$isBillieEnabled) {
+            return '';
+        }
+        return $this->notice(
+            __(
+                'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
+                'mollie-payments-for-woocommerce'
+            )
+        );
+    }
+
+    protected function warnAboutRequiredCheckoutFieldForKlarna(): string
+    {
+        if (!$this->isKlarnaEnabled()) {
+            return '';
+        }
+        return $this->notice(
+            sprintf(
+                /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
+                __(
+                    'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
+                    'mollie-payments-for-woocommerce'
+                ),
+                '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
+                '</a>',
+                '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
+                '</a>'
+            )
+        );
+    }
+
+    protected function warnMollieBankTransferNotBACS(): string
+    {
+        $woocommerceBanktransferGateway = new WC_Gateway_BACS();
+        if (!$woocommerceBanktransferGateway->is_available()) {
+            return '';
+        }
+
+        return $this->notice(
+            __(
+                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
+                'mollie-payments-for-woocommerce'
+            )
+        );
+    }
+
+    protected function isKlarnaEnabled(): bool
+    {
+        $klarnaGateways = [
+                Constants::KLARNAPAYLATER,
+                Constants::KLARNASLICEIT,
+                Constants::KLARNAPAYNOW,
+                Constants::KLARNA,
+        ];
+        $isKlarnaEnabled = false;
+        foreach ($klarnaGateways as $klarnaGateway) {
+            if (
+                    array_key_exists('mollie_wc_gateway_' . $klarnaGateway, $this->mollieGateways)
+                    && array_key_exists($klarnaGateway, $this->paymentMethods)
+                    && $this->paymentMethods[$klarnaGateway]->getProperty('enabled') === 'yes'
+            ) {
+                $isKlarnaEnabled = true;
+                break;
+            }
+        }
+        return $isKlarnaEnabled;
+    }
+
+    protected function notice(string $message)
+    {
+        ob_start();
+        ?>
+        <div class="notice notice-warning is-dismissible">
+            <p>
+                <?= wp_kses($message, [
+                        'a' => [
+                                'href' => [],
+                                'target' => [],
+                        ],
+                ]); ?>
+            </p>
+        </div>
         <?php
         return ob_get_clean();
     }
diff --git a/src/Settings/Page/Section/PaymentMethods.php b/src/Settings/Page/Section/PaymentMethods.php
index 9bf80ea80..e1a9308af 100644
--- a/src/Settings/Page/Section/PaymentMethods.php
+++ b/src/Settings/Page/Section/PaymentMethods.php
@@ -23,9 +23,9 @@ protected function content(): string
     {
         ob_start();
         ?>
-        <div class="mollie-section">
+        <div class="mollie-section mollie-section--pm">
             <div class="mollie-settings-pm">
-                <?= $this->renderGateways(); ?>
+                <?= $this->renderGateways(); // WPCS: XSS ok. ?>
             </div>
         </div>
         <?php
@@ -37,16 +37,6 @@ public function renderGateways(): string
         $this->refreshIfRequested();
         $this->cleanDbIfRequested();
 
-        $messageEnabled = '<span class="mollie-settings-pm__status mollie-settings-pm__status--enabled">' . __(
-            'enabled',
-            'mollie-payments-for-woocommerce'
-        ) . '</span>';
-
-        $messageDisabled = '<span class="mollie-settings-pm__status mollie-settings-pm__status--disabled">' . __(
-            'disabled',
-            'mollie-payments-for-woocommerce'
-        ) . '</span>';
-
         $titleActivePaymentMethods = __(
             'Currently Active Payment Methods',
             'mollie-payments-for-woocommerce'
@@ -70,42 +60,10 @@ public function renderGateways(): string
         foreach ($this->paymentMethods as $paymentMethod) {
             $paymentMethodId = $paymentMethod->getProperty('id');
             $gatewayKey = 'mollie_wc_gateway_' . $paymentMethodId;
-            $enabledAtMollie = array_key_exists($gatewayKey, $this->mollieGateways);
-            $enabledInWoo = ($paymentMethod->getSettings())['enabled'] === 'yes';
-            $paymentGatewayButton = '<div class="mollie-settings-pm__single">';
-            $paymentGatewayButton .= $paymentMethod->getIconUrl();
-            $paymentGatewayButton .= $paymentMethod->title();
-            $documentationLink = $paymentMethod->getProperty('docs');
-            $moreInformation = '';
-
-            if ($documentationLink) {
-                $moreInformation = "<a class='mollie-settings-pm__info' href='" . $documentationLink . "'>" . __(
-                    'More information',
-                    'mollie-payments-for-woocommerce'
-                ) . '</a>';
-            }
+            $enabledInMollie = array_key_exists($gatewayKey, $this->mollieGateways);
 
-            if ($enabledAtMollie) {
-                if ($enabledInWoo) {
-                    $paymentGatewayButton .= $messageEnabled;
-                } else {
-                    $paymentGatewayButton .= $messageDisabled;
-                }
-                $paymentGatewayButton .= '<a class="button-secondary" href="' . $this->getGatewaySettingsUrl(
-                    $gatewayKey
-                ) . '">' . __(
-                    'Manage Payment Method',
-                    'mollie-payments-for-woocommerce'
-                ) . '</a>';
-            } else {
-                $paymentGatewayButton .= $moreInformation;
-                $paymentGatewayButton .= ' <a class="button-secondary" href="https://my.mollie.com/dashboard/settings/profiles?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">' .
-                        __('Activate Payment Method', 'mollie-payments-for-woocommerce')
-                        . '</a>';
-            }
-
-            $paymentGatewayButton .= '</div>';
-            if ($enabledAtMollie) {
+            $paymentGatewayButton = $this->paymentGatewayButton($paymentMethod, $enabledInMollie);
+            if ($enabledInMollie) {
                 $activatedGateways .= $paymentGatewayButton;
             } else {
                 $deactivatedGateways .= $paymentGatewayButton;
@@ -128,10 +86,10 @@ protected function paymentGatewaysBlock(string $title, string $description, stri
         ob_start();
         ?>
         <div class="mollie-settings-pm__wrap">
-            <h3><?= $title; ?></h3>
-            <p><?= $description; ?></p>
+            <h3><?= esc_html($title); ?></h3>
+            <p><?= esc_html($description); ?></p>
             <div class="mollie-settings-pm__list">
-                <?= $html; ?>
+                <?= $html; // WPCS: XSS ok. ?>
             </div>
         </div>
         <?php
@@ -150,6 +108,10 @@ public function styles(): string
         ob_start();
         ?>
         <style>
+            .mollie-section--pm {
+                margin-top: 40px;
+            }
+
             .mollie-settings-pm {
                 background-color: #fff;
                 padding: 16px;
@@ -198,6 +160,12 @@ public function styles(): string
                 padding-right: 16px;
             }
 
+            @media screen and (max-width: 1100px) {
+                .mollie-settings-pm__single {
+                    width: 100%;
+                }
+            }
+
         </style>
 
         <?php
@@ -228,7 +196,6 @@ protected function refreshIfRequested()
 
     protected function cleanDbIfRequested()
     {
-
         if (
                 isset($_GET['cleanDB-mollie']) && wp_verify_nonce(
                     filter_input(INPUT_GET, 'nonce_mollie_cleanDb', FILTER_SANITIZE_SPECIAL_CHARS),
@@ -243,4 +210,52 @@ protected function cleanDbIfRequested()
             }
         }
     }
+
+    protected function paymentGatewayButton(AbstractPaymentMethod $paymentMethod, $enabledInMollie): string
+    {
+        $documentationLink = $paymentMethod->getProperty('docs');
+        $paymentMethodId = $paymentMethod->getProperty('id');
+        $gatewayKey = 'mollie_wc_gateway_' . $paymentMethodId;
+        $button = '<a class="button-secondary" href="' . $this->getGatewaySettingsUrl(
+            $gatewayKey
+        ) . '">' . esc_html(__(
+            'Manage Payment Method',
+            'mollie-payments-for-woocommerce'
+        )) . '</a>';
+        $messageOrLink = '';
+        $enabledInWoo = ($paymentMethod->getSettings())['enabled'] === 'yes';
+
+        if ($enabledInMollie && $enabledInWoo) {
+            $messageOrLink = '<span class="mollie-settings-pm__status mollie-settings-pm__status--enabled">' . esc_html(__(
+                'enabled',
+                'mollie-payments-for-woocommerce'
+            )) . '</span>';
+        } elseif ($enabledInMollie && !$enabledInWoo) {
+            $messageOrLink = '<span class="mollie-settings-pm__status mollie-settings-pm__status--disabled">' . esc_html(__(
+                'disabled',
+                'mollie-payments-for-woocommerce'
+            )) . '</span>';
+        } else {
+            if ($documentationLink) {
+                $messageOrLink = "<a class='mollie-settings-pm__info' href='" . $documentationLink . "'>" . esc_html(__(
+                    'More information',
+                    'mollie-payments-for-woocommerce'
+                )) . '</a>';
+            }
+            $button = '<a class="button-secondary" href="https://my.mollie.com/dashboard/settings/profiles?utm_source=woocommerce&utm_medium=plugin&utm_campaign=partner" target="_blank">' .
+                    esc_html(__('Activate Payment Method', 'mollie-payments-for-woocommerce'))
+                    . '</a>';
+        }
+
+        ob_start();
+        ?>
+        <div class="mollie-settings-pm__single">
+            <?= $paymentMethod->getIconUrl();  // WPCS: XSS ok.?>
+            <?= esc_html($paymentMethod->title());?>
+            <?= $messageOrLink;  // WPCS: XSS ok.?>
+            <?= $button;  // WPCS: XSS ok.?>
+        </div>
+        <?php
+        return ob_get_clean();
+    }
 }
diff --git a/src/Settings/SettingsModule.php b/src/Settings/SettingsModule.php
index 511f87739..efdbb4590 100644
--- a/src/Settings/SettingsModule.php
+++ b/src/Settings/SettingsModule.php
@@ -11,10 +11,10 @@
 use Mollie\WooCommerce\Shared\Data;
 use Mollie\WooCommerce\Shared\Status;
 use Mollie\WooCommerce\Uninstall\CleanDb;
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
-use Mollie\WooCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
-use Mollie\WooCommerce\Vendor\Psr\Container\ContainerInterface;
+use Inpsyde\Modularity\Module\ExecutableModule;
+use Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
+use Inpsyde\Modularity\Module\ServiceModule;
+use Psr\Container\ContainerInterface;
 use Psr\Log\LoggerInterface as Logger;
 
 class SettingsModule implements ServiceModule, ExecutableModule

From f77c7254b8ee36238c721fab167578934edf278f Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 11:37:42 +0200
Subject: [PATCH 4/9] Fix unit test

---
 src/PaymentMethods/PaymentMethodsIconUrl.php | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/PaymentMethods/PaymentMethodsIconUrl.php b/src/PaymentMethods/PaymentMethodsIconUrl.php
index f8fd2c438..ed4c09a73 100644
--- a/src/PaymentMethods/PaymentMethodsIconUrl.php
+++ b/src/PaymentMethods/PaymentMethodsIconUrl.php
@@ -84,13 +84,7 @@ public function svgUrlForPaymentMethod($paymentMethodName)
             $svgUrl = $this->pluginUrl . '/' . sprintf('public/images/%s', $paymentMethodName) . self::SVG_FILE_EXTENSION;
         }
 
-        return wp_kses($this->generateIconHtml($svgUrl), [
-            'img' => [
-                'src' => [],
-                'class' => [],
-                'alt' => [],
-            ],
-        ]);
+        return $this->generateIconHtml($svgUrl);
     }
 
     public function generateIconHtml(string $svgUrl): string

From a00d2c4cc219d33b9eb0a946c92aefefb335a3b8 Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 12:48:45 +0200
Subject: [PATCH 5/9] Move notices under header and implement close click

---
 resources/js/mollie-settings-2024.js  |  11 +++
 src/Assets/AssetsModule.php           |  21 ++++++
 src/Settings/Page/Section/Notices.php | 101 ++++++++++++++++++--------
 webpack.config.js                     |   3 +-
 4 files changed, 106 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/mollie-settings-2024.js

diff --git a/resources/js/mollie-settings-2024.js b/resources/js/mollie-settings-2024.js
new file mode 100644
index 000000000..659f2f5d2
--- /dev/null
+++ b/resources/js/mollie-settings-2024.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const noticeCancelButtons = document.querySelectorAll('.mollie-notice button');
+    if (noticeCancelButtons.length === 0) {
+        return;
+    }
+    noticeCancelButtons.forEach((button) => {
+        button.addEventListener('click', function(){
+           button.parentNode.remove();
+        });
+    })
+});
diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
index eb32faf3a..467162f93 100644
--- a/src/Assets/AssetsModule.php
+++ b/src/Assets/AssetsModule.php
@@ -640,9 +640,30 @@ function () use ($container, $hasBlocksEnabled, $pluginVersion, $dataService, $p
                         true
                     );
 
+                    wp_register_script(
+                        'mollie_wc_settings_2024',
+                        $this->getPluginUrl(
+                            $pluginUrl,
+                            '/public/js/mollie-settings-2024.min.js'
+                        ),
+                        ['underscore', 'jquery'],
+                        $pluginVersion,
+                        true
+                    );
+                    $this->enqueueMollieSettings();
                     $this->enqueueIconSettings($current_section);
                 }
             }
         );
     }
+
+    protected function enqueueMollieSettings(){
+        $uri = isset($_SERVER['REQUEST_URI']) ? wc_clean(
+        // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+            wp_unslash($_SERVER['REQUEST_URI'])
+        ) : '';
+        if (is_string($uri) && strpos($uri, 'tab=mollie_settings')) {
+            wp_enqueue_script('mollie_wc_settings_2024');
+        }
+    }
 }
diff --git a/src/Settings/Page/Section/Notices.php b/src/Settings/Page/Section/Notices.php
index 7c49b11e8..11484f1ac 100644
--- a/src/Settings/Page/Section/Notices.php
+++ b/src/Settings/Page/Section/Notices.php
@@ -25,10 +25,10 @@ protected function content(): string
         ob_start();
         ?>
         <div class="mollie-section mollie-section--notices">
-            <?= $this->warnAboutRequiredCheckoutFieldForBillie(); // WPCS: XSS ok.?>
-            <?= $this->warnAboutRequiredCheckoutFieldForKlarna(); // WPCS: XSS ok.?>
-            <?= $this->warnMollieBankTransferNotBACS(); // WPCS: XSS ok.?>
-            <?= $this->warnDirectDebitStatus(); // WPCS: XSS ok.?>
+            <?= $this->warnAboutRequiredCheckoutFieldForBillie(); // WPCS: XSS ok.     ?>
+            <?= $this->warnAboutRequiredCheckoutFieldForKlarna(); // WPCS: XSS ok.     ?>
+            <?= $this->warnMollieBankTransferNotBACS(); // WPCS: XSS ok.     ?>
+            <?= $this->warnDirectDebitStatus(); // WPCS: XSS ok.     ?>
         </div>
         <?php
         return ob_get_clean();
@@ -38,18 +38,18 @@ protected function warnDirectDebitStatus(): string
     {
         $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
         $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty(
-            'enabled'
-        ) === 'yes';
+                        'enabled'
+                ) === 'yes';
         $sepaGatewayAllowed = !empty($this->mollieGateways["mollie_wc_gateway_directdebit"]);
 
         if (!($sepaGatewayAllowed && !$isSepaEnabled)) {
             return '';
         }
         return $this->notice(
-            __(
-                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
-                'mollie-payments-for-woocommerce'
-            )
+                __(
+                        "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
+                        'mollie-payments-for-woocommerce'
+                )
         );
     }
 
@@ -63,10 +63,10 @@ protected function warnAboutRequiredCheckoutFieldForBillie(): string
             return '';
         }
         return $this->notice(
-            __(
-                'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
-                'mollie-payments-for-woocommerce'
-            )
+                __(
+                        'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
+                        'mollie-payments-for-woocommerce'
+                )
         );
     }
 
@@ -76,17 +76,17 @@ protected function warnAboutRequiredCheckoutFieldForKlarna(): string
             return '';
         }
         return $this->notice(
-            sprintf(
+                sprintf(
                 /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
-                __(
-                    'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
-                    'mollie-payments-for-woocommerce'
-                ),
-                '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
-                '</a>',
-                '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
-                '</a>'
-            )
+                        __(
+                                'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
+                                'mollie-payments-for-woocommerce'
+                        ),
+                        '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
+                        '</a>',
+                        '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
+                        '</a>'
+                )
         );
     }
 
@@ -98,10 +98,10 @@ protected function warnMollieBankTransferNotBACS(): string
         }
 
         return $this->notice(
-            __(
-                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
-                'mollie-payments-for-woocommerce'
-            )
+                __(
+                        'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
+                        'mollie-payments-for-woocommerce'
+                )
         );
     }
 
@@ -129,9 +129,10 @@ protected function isKlarnaEnabled(): bool
 
     protected function notice(string $message)
     {
+        //notice-warning is-dismissible
         ob_start();
         ?>
-        <div class="notice notice-warning is-dismissible">
+        <div class="mollie-notice">
             <p>
                 <?= wp_kses($message, [
                         'a' => [
@@ -140,8 +141,50 @@ protected function notice(string $message)
                         ],
                 ]); ?>
             </p>
+            <button type="button" class="notice-dismiss">
+                <span class="screen-reader-text">Dismiss this notice.</span>
+            </button>
         </div>
         <?php
         return ob_get_clean();
     }
+
+    public function styles(): string
+    {
+        ob_start();
+        ?>
+        <style>
+            .mollie-notice {
+                margin: 15px 0;
+                background: #fff;
+                border: 1px solid #c3c4c7;
+                border-left-width: 4px;
+                border-left-color: #dba617;
+                box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
+                padding: 12px 12px;
+                box-sizing: border-box;
+                position: relative;
+            }
+
+            .mollie-notice p {
+                margin: 0;
+                padding-right: 40px;
+            }
+
+            .mollie-notice button::before {
+                background: 0 0;
+                color: #787c82;
+                content: "\f153";
+                display: block;
+                font: normal 16px / 20px dashicons;
+                speak: never;
+                height: 20px;
+                text-align: center;
+                width: 20px;
+                -webkit-font-smoothing: antialiased;
+            }
+        </style>
+        <?php
+        return ob_get_clean();
+    }
 }
diff --git a/webpack.config.js b/webpack.config.js
index fbd545086..19805a960 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,7 +31,8 @@ function configJavaScript ({ basePath })
     .addEntry('paypalButtonBlockComponent.min', './resources/js/paypalButtonBlockComponent.js')
     .addEntry('applepayButtonBlockComponent.min', './resources/js/applepayButtonBlockComponent.js')
     .addEntry('rivertyCountryPlaceholder.min', './resources/js/rivertyCountryPlaceholder.js')
-    .enableSourceMaps(!Encore.isProduction())
+      .addEntry('mollie-settings-2024.min', './resources/js/mollie-settings-2024.js')
+      .enableSourceMaps(!Encore.isProduction())
 
   return extractEncoreConfig('javascript-configuration')
 }

From f68de0488969b8ea411531358bfd6b906c527987 Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 12:52:38 +0200
Subject: [PATCH 6/9] phpcs

---
 src/Assets/AssetsModule.php                   |  4 +-
 .../ApplePayButton/ApplePayDataObjectHttp.php |  2 +-
 src/Settings/Page/Section/Notices.php         | 48 +++++++++----------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
index 467162f93..b4312bad7 100644
--- a/src/Assets/AssetsModule.php
+++ b/src/Assets/AssetsModule.php
@@ -657,7 +657,9 @@ function () use ($container, $hasBlocksEnabled, $pluginVersion, $dataService, $p
         );
     }
 
-    protected function enqueueMollieSettings(){
+    protected function enqueueMollieSettings()
+    {
+
         $uri = isset($_SERVER['REQUEST_URI']) ? wc_clean(
         // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
             wp_unslash($_SERVER['REQUEST_URI'])
diff --git a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
index db7f6919b..38f91294b 100644
--- a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
+++ b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
@@ -326,7 +326,7 @@ protected function addressHasRequiredFieldsValues(
                     sprintf('ApplePay Data Error: Missing value for %s', $requiredField)
                 );
                 $this->errors[]
-                = [
+ = [
                     'errorCode' => $errorCode,
                     'contactField' => $errorValue,
                 ];
diff --git a/src/Settings/Page/Section/Notices.php b/src/Settings/Page/Section/Notices.php
index 11484f1ac..cffbf754d 100644
--- a/src/Settings/Page/Section/Notices.php
+++ b/src/Settings/Page/Section/Notices.php
@@ -38,18 +38,18 @@ protected function warnDirectDebitStatus(): string
     {
         $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
         $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty(
-                        'enabled'
-                ) === 'yes';
+            'enabled'
+        ) === 'yes';
         $sepaGatewayAllowed = !empty($this->mollieGateways["mollie_wc_gateway_directdebit"]);
 
         if (!($sepaGatewayAllowed && !$isSepaEnabled)) {
             return '';
         }
         return $this->notice(
-                __(
-                        "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
-                        'mollie-payments-for-woocommerce'
-                )
+            __(
+                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
+                'mollie-payments-for-woocommerce'
+            )
         );
     }
 
@@ -63,10 +63,10 @@ protected function warnAboutRequiredCheckoutFieldForBillie(): string
             return '';
         }
         return $this->notice(
-                __(
-                        'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
-                        'mollie-payments-for-woocommerce'
-                )
+            __(
+                'You have activated Billie. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. The billing company field is required as well. Make sure to enable the billing company field in the WooCommerce settings if you are using Woocommerce blocks.',
+                'mollie-payments-for-woocommerce'
+            )
         );
     }
 
@@ -76,17 +76,17 @@ protected function warnAboutRequiredCheckoutFieldForKlarna(): string
             return '';
         }
         return $this->notice(
-                sprintf(
+            sprintf(
                 /* translators: Placeholder 1: Opening link tag. Placeholder 2: Closing link tag. Placeholder 3: Opening link tag. Placeholder 4: Closing link tag. */
-                        __(
-                                'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
-                                'mollie-payments-for-woocommerce'
-                        ),
-                        '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
-                        '</a>',
-                        '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
-                        '</a>'
-                )
+                __(
+                    'You have activated Klarna. To accept payments, please make sure all default WooCommerce checkout fields are enabled and required. For more information, go to %1$sKlarna Pay Later documentation%2$s or  %3$sKlarna Slice it documentation%4$s',
+                    'mollie-payments-for-woocommerce'
+                ),
+                '<a href="https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Pay-later-gateway">',
+                '</a>',
+                '<a href=" https://github.com/mollie/WooCommerce/wiki/Setting-up-Klarna-Slice-it-gateway">',
+                '</a>'
+            )
         );
     }
 
@@ -98,10 +98,10 @@ protected function warnMollieBankTransferNotBACS(): string
         }
 
         return $this->notice(
-                __(
-                        'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
-                        'mollie-payments-for-woocommerce'
-                )
+            __(
+                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
+                'mollie-payments-for-woocommerce'
+            )
         );
     }
 

From 287a0dc5ed46611a02828f80a1e76f36c8f5883b Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Thu, 3 Oct 2024 12:56:12 +0200
Subject: [PATCH 7/9] phpcs

---
 src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
index 38f91294b..db7f6919b 100644
--- a/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
+++ b/src/Buttons/ApplePayButton/ApplePayDataObjectHttp.php
@@ -326,7 +326,7 @@ protected function addressHasRequiredFieldsValues(
                     sprintf('ApplePay Data Error: Missing value for %s', $requiredField)
                 );
                 $this->errors[]
- = [
+                = [
                     'errorCode' => $errorCode,
                     'contactField' => $errorValue,
                 ];

From 1f470cdc0275b6aaf3e633bf7b4d5e9b853144c1 Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Tue, 8 Oct 2024 06:45:57 +0200
Subject: [PATCH 8/9] Remove settings files

---
 inc/settings/mollie_advanced_settings.php | 207 ----------------------
 inc/settings/mollie_applepay_settings.php | 122 -------------
 inc/settings/mollie_components.php        | 170 ------------------
 src/Settings/MollieSettingsPage.php       |  52 ------
 4 files changed, 551 deletions(-)
 delete mode 100644 inc/settings/mollie_advanced_settings.php
 delete mode 100644 inc/settings/mollie_applepay_settings.php
 delete mode 100644 inc/settings/mollie_components.php

diff --git a/inc/settings/mollie_advanced_settings.php b/inc/settings/mollie_advanced_settings.php
deleted file mode 100644
index e108e62d9..000000000
--- a/inc/settings/mollie_advanced_settings.php
+++ /dev/null
@@ -1,207 +0,0 @@
-<?php
-
-use Mollie\WooCommerce\Payment\PaymentService;
-use Mollie\WooCommerce\Settings\Settings;
-use Mollie\WooCommerce\Shared\SharedDataDictionary;
-
-$pluginName = 'mollie-payments-for-woocommerce';
-$nonce_mollie_cleanDb = wp_create_nonce('nonce_mollie_cleanDb');
-$cleanDB_mollie_url = add_query_arg(
-    ['cleanDB-mollie' => 1, 'nonce_mollie_cleanDb' => $nonce_mollie_cleanDb]
-);
-$api_payment_description_labels = [
-    '{orderNumber}' => _x('Order number', 'Label {orderNumber} description for payment description options', 'mollie-payments-for-woocommerce'),
-    '{storeName}' => _x('Site Title', 'Label {storeName} description for payment description options', 'mollie-payments-for-woocommerce'),
-    '{customer.firstname}' => _x('Customer\'s first name', 'Label {customer.firstname} description for payment description options', 'mollie-payments-for-woocommerce'),
-    '{customer.lastname}' => _x('Customer\'s last name', 'Label {customer.lastname} description for payment description options', 'mollie-payments-for-woocommerce'),
-    '{customer.company}' => _x('Customer\'s company name', 'Label {customer.company} description for payment description options', 'mollie-payments-for-woocommerce'),
-];
-
-$mollieAdvancedSettings =  [
-    [
-        'id' => $pluginName . '_title',
-        'title' => __('Mollie advanced settings', 'mollie-payments-for-woocommerce'),
-        'type' => 'title',
-        'desc' => '<p>' . __('The following options are required to use the plugin and are used by all Mollie payment methods', 'mollie-payments-for-woocommerce') . '</p>',
-    ],
-    [
-        'id' => $pluginName . '_order_status_cancelled_payments',
-        'title' => __('Order status after cancelled payment', 'mollie-payments-for-woocommerce'),
-        'type' => 'select',
-        'options' => [
-            'pending' => __('Pending', 'woocommerce'),
-            'cancelled' => __('Cancelled', 'woocommerce'),
-        ],
-        'desc' => __('Status for orders when a payment (not a Mollie order via the Orders API) is cancelled. Default: pending. Orders with status Pending can be paid with another payment method, customers can try again. Cancelled orders are final. Set this to Cancelled if you only have one payment method or don\'t want customers to re-try paying with a different payment method. This doesn\'t apply to payments for orders via the new Orders API and Klarna payments.', 'mollie-payments-for-woocommerce'),
-        'default' => 'pending',
-    ],
-    [
-        'id' => $pluginName . '_' . SharedDataDictionary::SETTING_NAME_PAYMENT_LOCALE,
-        'title' => __('Payment screen language', 'mollie-payments-for-woocommerce'),
-        'type' => 'select',
-        'options' => [
-            SharedDataDictionary::SETTING_LOCALE_WP_LANGUAGE => __(
-                'Automatically send WordPress language',
-                'mollie-payments-for-woocommerce'
-            ) . ' (' . __('default', 'mollie-payments-for-woocommerce') . ')',
-            SharedDataDictionary::SETTING_LOCALE_DETECT_BY_BROWSER => __(
-                'Detect using browser language',
-                'mollie-payments-for-woocommerce'
-            ),
-            'en_US' => __('English', 'mollie-payments-for-woocommerce'),
-            'nl_NL' => __('Dutch', 'mollie-payments-for-woocommerce'),
-            'nl_BE' => __('Flemish (Belgium)', 'mollie-payments-for-woocommerce'),
-            'fr_FR' => __('French', 'mollie-payments-for-woocommerce'),
-            'fr_BE' => __('French (Belgium)', 'mollie-payments-for-woocommerce'),
-            'de_DE' => __('German', 'mollie-payments-for-woocommerce'),
-            'de_AT' => __('Austrian German', 'mollie-payments-for-woocommerce'),
-            'de_CH' => __('Swiss German', 'mollie-payments-for-woocommerce'),
-            'es_ES' => __('Spanish', 'mollie-payments-for-woocommerce'),
-            'ca_ES' => __('Catalan', 'mollie-payments-for-woocommerce'),
-            'pt_PT' => __('Portuguese', 'mollie-payments-for-woocommerce'),
-            'it_IT' => __('Italian', 'mollie-payments-for-woocommerce'),
-            'nb_NO' => __('Norwegian', 'mollie-payments-for-woocommerce'),
-            'sv_SE' => __('Swedish', 'mollie-payments-for-woocommerce'),
-            'fi_FI' => __('Finnish', 'mollie-payments-for-woocommerce'),
-            'da_DK' => __('Danish', 'mollie-payments-for-woocommerce'),
-            'is_IS' => __('Icelandic', 'mollie-payments-for-woocommerce'),
-            'hu_HU' => __('Hungarian', 'mollie-payments-for-woocommerce'),
-            'pl_PL' => __('Polish', 'mollie-payments-for-woocommerce'),
-            'lv_LV' => __('Latvian', 'mollie-payments-for-woocommerce'),
-            'lt_LT' => __('Lithuanian', 'mollie-payments-for-woocommerce'),
-        ],
-        'desc' => sprintf(
-        /* translators: Placeholder 1: link tag Placeholder 2: closing tag */
-            __('Sending a language (or locale) is required. The option \'Automatically send WordPress language\' will try to get the customer\'s language in WordPress (and respects multilanguage plugins) and convert it to a format Mollie understands. If this fails, or if the language is not supported, it will fall back to American English. You can also select one of the locales currently supported by Mollie, that will then be used for all customers.', 'mollie-payments-for-woocommerce'),
-            '<a href="https://www.mollie.com/nl/docs/reference/payments/create" target="_blank">',
-            '</a>'
-        ),
-        'default' => SharedDataDictionary::SETTING_LOCALE_WP_LANGUAGE,
-    ],
-    [
-        'id' => $pluginName . '_customer_details',
-        'title' => __('Store customer details at Mollie', 'mollie-payments-for-woocommerce'),
-        'desc' => sprintf(
-        /* translators: Placeholder 1: enabled or disabled Placeholder 2: translated string */
-            __(
-                'Should Mollie store customers name and email address for Single Click Payments? Default <code>%1$s</code>. Required if WooCommerce Subscriptions is being used! Read more about <a href=\'https://help.mollie.com/hc/en-us/articles/115000671249-What-are-single-click-payments-and-how-does-it-work-\'>%2$s</a> and how it improves your conversion.',
-                'mollie-payments-for-woocommerce'
-            ),
-            strtolower(__('Enabled', 'mollie-payments-for-woocommerce')),
-            __('Single Click Payments', 'mollie-payments-for-woocommerce')
-        ),
-        'type' => 'checkbox',
-        'default' => 'yes',
-
-    ],
-    [
-        'id' => $pluginName . '_api_switch',
-        'title' => __(
-            'Select API Method',
-            'mollie-payments-for-woocommerce'
-        ),
-        'type' => 'select',
-        'options' => [
-            PaymentService::PAYMENT_METHOD_TYPE_ORDER => ucfirst(
-                PaymentService::PAYMENT_METHOD_TYPE_ORDER
-            ) . ' (' . __('default', 'mollie-payments-for-woocommerce')
-                . ')',
-            PaymentService::PAYMENT_METHOD_TYPE_PAYMENT => ucfirst(
-                PaymentService::PAYMENT_METHOD_TYPE_PAYMENT
-            ),
-        ],
-        'default' => PaymentService::PAYMENT_METHOD_TYPE_ORDER,
-        'desc' => sprintf(
-        /* translators: Placeholder 1: opening link tag, placeholder 2: closing link tag */
-            __(
-                'Click %1$shere%2$s to read more about the differences between the Payments and Orders API',
-                'mollie-payments-for-woocommerce'
-            ),
-            '<a href="https://docs.mollie.com/orders/why-use-orders" target="_blank">',
-            '</a>'
-        ),
-    ],
-    [
-        'id' => $pluginName . '_api_payment_description',
-        'title' => __(
-            'API Payment Description',
-            'mollie-payments-for-woocommerce'
-        ),
-        'type' => 'text',
-        'default' => '{orderNumber}',
-        'desc' => sprintf(
-            '</p>
-            <div class="available-payment-description-labels hide-if-no-js">
-                <p>%1$s:</p>
-                <ul role="list">
-                    %2$s
-                </ul>
-            </div>
-            <br style="clear: both;" />
-            <p class="description">%3$s',
-            _x('Available variables', 'Payment description options', 'mollie-payments-for-woocommerce'),
-            implode('', array_map(
-                static function ($label, $label_description) {
-                    return sprintf(
-                        '<li style="float: left; margin-right: 5px;">
-                            <button type="button"
-                                class="mollie-settings-advanced-payment-desc-label button button-secondary button-small"
-                                data-tag="%1$s"
-                                aria-label="%2$s"
-                                title="%3$s"
-                            >
-                                %1$s
-                            </button>
-                        </li>',
-                        $label,
-                        substr($label, 1, -1),
-                        $label_description
-                    );
-                },
-                array_keys($api_payment_description_labels),
-                $api_payment_description_labels
-            )),
-            sprintf(
-            /* translators: Placeholder 1: Opening paragraph tag, placeholder 2: Closing paragraph tag */
-                __(
-                    'Select among the available variables the description to be used for this transaction.%1$s(Note: this only works when the method is set to Payments API)%2$s',
-                    'mollie-payments-for-woocommerce'
-                ),
-                '<p>',
-                '</p>'
-            )
-        ),
-    ],
-    [
-        'id' => $pluginName . '_gatewayFeeLabel',
-        'title' => __(
-            'Surcharge gateway fee label',
-            'mollie-payments-for-woocommerce'
-        ),
-        'type' => 'text',
-        'custom_attributes' => ['maxlength' => '30'],
-        'default' => __('Gateway Fee', 'mollie-payments-for-woocommerce'),
-        'desc' => __(
-            'This is the label will appear in frontend when the surcharge applies',
-            'mollie-payments-for-woocommerce'
-        ),
-    ],
-    [
-        'id' => $pluginName . '_removeOptionsAndTransients',
-        'title' => __(
-            'Remove Mollie data from Database on uninstall',
-            'mollie-payments-for-woocommerce'
-        ),
-        'type' => 'checkbox',
-        'default' => 'no',
-        'desc' => __("Remove options and scheduled actions from database when uninstalling the plugin.", "mollie-payments-for-woocommerce") . ' (<a href="' . esc_url($cleanDB_mollie_url) . '">' . strtolower(
-            __('Clear now', 'mollie-payments-for-woocommerce')
-        ) . '</a>)',
-    ],
-    [
-        'id' => $pluginName . '_sectionend',
-        'type' => 'sectionend',
-    ],
-];
-
-return apply_filters('inpsyde.mollie-advanced-settings', $mollieAdvancedSettings, $pluginName);
diff --git a/inc/settings/mollie_applepay_settings.php b/inc/settings/mollie_applepay_settings.php
deleted file mode 100644
index 2ef1c3fa0..000000000
--- a/inc/settings/mollie_applepay_settings.php
+++ /dev/null
@@ -1,122 +0,0 @@
-<?php
-
-$pluginName = 'mollie-payments-for-woocommerce';
-$title = 'Apple Pay';
-$description = 'Apple description';
-$pluginId = 'mollie-payments-for-woocommerce';
-$applePayOption = get_option('mollie_wc_gateway_applepay_settings');
-
-return [
-    [
-        'id' => $title . '_' . 'title',
-        'title' => __('Apple Pay', 'mollie-payments-for-woocommerce'),
-        'type' => 'title',
-        'desc' => '<p>' . __('The following options are required to use the Apple Pay gateway', 'mollie-payments-for-woocommerce') . '</p>',
-    ],
-
-    [
-        'id' => 'enabled',
-        'title' => __('Enable/Disable', 'mollie-payments-for-woocommerce'),
-        /* translators: Placeholder 1: Gateway title */
-        'desc' => sprintf(__('Enable %s', 'mollie-payments-for-woocommerce'), $title),
-        'type' => 'checkbox',
-        'default' =>  'yes',
-        'value' => isset($applePayOption['enabled']) ? $applePayOption['enabled'] : 'yes',
-
-    ],
-    [
-        'id' => 'title',
-        'title' => __('Title', 'mollie-payments-for-woocommerce'),
-        'desc' => sprintf(
-            /* translators: Placeholder 1: Gateway title */
-            __(
-                'This controls the title which the user sees during checkout. Default <code>%s</code>',
-                'mollie-payments-for-woocommerce'
-            ),
-            $title
-        ),
-        'desc_tip' => true,
-        'type' => 'text',
-        'default' =>  $title,
-        'value' => isset($applePayOption['title']) ? $applePayOption['title'] : $title,
-
-    ],
-    [
-        'id' => 'display_logo',
-        'title' => __('Display logo', 'mollie-payments-for-woocommerce'),
-        'desc' => __(
-            'Display logo',
-            'mollie-payments-for-woocommerce'
-        ),
-        'desc_tip' => true,
-        'type' => 'checkbox',
-        'default' => 'yes',
-        'value' => isset($applePayOption['display_logo']) ? $applePayOption['display_logo'] : 'yes',
-
-    ],
-    [
-        'id' => 'description',
-        'title' => __('Description', 'mollie-payments-for-woocommerce'),
-        'desc' => sprintf(
-            /* translators: Placeholder 1: Gateway description */
-            __(
-                'Payment method description that the customer will see on your checkout. Default <code>%s</code>',
-                'mollie-payments-for-woocommerce'
-            ),
-            $description
-        ),
-        'desc_tip' => true,
-        'type' => 'text',
-        'default' => $description,
-        'value' => isset($applePayOption['description']) ? $applePayOption['description'] : $description,
-    ],
-    [
-        'id' => $pluginId . '_' . 'sectionend',
-        'type' => 'sectionend',
-    ],
-    [
-        'id' => $title . '_' . 'title_button',
-        'title' =>  __(
-            'Apple Pay button settings',
-            'mollie-payments-for-woocommerce'
-        ),
-        'type' => 'title',
-        'desc' => '<p>' . __('The following options are required to use the Apple Pay Direct Button', 'mollie-payments-for-woocommerce') . '</p>',
-    ],
-    [
-        'id' => 'mollie_apple_pay_button_enabled_cart',
-        'title' => __('Enable Apple Pay Button on Cart page', 'mollie-payments-for-woocommerce'),
-        'desc' => sprintf(
-        /* translators: Placeholder 1: enabled or disabled */
-            __(
-                'Enable the Apple Pay direct buy button on the Cart page',
-                'mollie-payments-for-woocommerce'
-            ),
-            $description
-        ),
-        'type' => 'checkbox',
-        'default' => 'no',
-        'value' => isset($applePayOption['mollie_apple_pay_button_enabled_cart']) ? $applePayOption['mollie_apple_pay_button_enabled_cart'] : 'no',
-
-    ],
-    [
-        'id' => 'mollie_apple_pay_button_enabled_product',
-        'title' => __('Enable Apple Pay Button on Product page', 'mollie-payments-for-woocommerce'),
-        'desc' => sprintf(
-        /* translators: Placeholder 1: enabled or disabled */
-            __(
-                'Enable the Apple Pay direct buy button on the Product page',
-                'mollie-payments-for-woocommerce'
-            ),
-            $description
-        ),
-        'type' => 'checkbox',
-        'default' => 'no',
-        'value' => isset($applePayOption['mollie_apple_pay_button_enabled_product']) ? $applePayOption['mollie_apple_pay_button_enabled_product'] : 'no',
-
-    ],
-    [
-        'id' => $pluginName . '_' . 'sectionend',
-        'type' => 'sectionend',
-    ],
-];
diff --git a/inc/settings/mollie_components.php b/inc/settings/mollie_components.php
deleted file mode 100644
index ac81476d9..000000000
--- a/inc/settings/mollie_components.php
+++ /dev/null
@@ -1,170 +0,0 @@
-<?php
-
-use Mollie\WooCommerce\Components\StylesPropertiesDictionary;
-
-return [
-    [
-        'type' => 'title',
-        'id' => 'mollie_components_styles',
-        'title' => _x(
-            'Base Styles',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-    ],
-    StylesPropertiesDictionary::BACKGROUND_COLOR => [
-        'type' => 'color',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::BACKGROUND_COLOR,
-        'title' => _x('Background Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => '#ffffff',
-    ],
-    StylesPropertiesDictionary::TEXT_COLOR => [
-        'type' => 'color',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::TEXT_COLOR,
-        'title' => _x('Text Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => '#000000',
-    ],
-    StylesPropertiesDictionary::INPUT_PLACEHOLDER => [
-        'type' => 'color',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::INPUT_PLACEHOLDER,
-        'title' => _x('Placeholder Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => '#cccccc',
-    ],
-    StylesPropertiesDictionary::FONT_SIZE => [
-        'type' => 'text',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::FONT_SIZE,
-        'title' => _x('Font Size', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'desc_tip' => _x(
-            'Defines the component font size. Allowed units: \'em\', \'px\', \'rem\'.',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-        'default' => '16px',
-    ],
-    StylesPropertiesDictionary::FONT_WEIGHT => [
-        'type' => 'select',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::FONT_WEIGHT,
-        'title' => _x('Font Weight', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => 'normal',
-        'options' => [
-            'lighter' => _x('Lighter', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-            'normal' => _x('Regular', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-            'bolder' => _x('Bold', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        ],
-    ],
-    StylesPropertiesDictionary::LETTER_SPACING => [
-        'type' => 'number',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::LETTER_SPACING,
-        'title' => _x('Letter Spacing', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => '0',
-    ],
-    StylesPropertiesDictionary::LINE_HEIGHT => [
-        'type' => 'number',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::LINE_HEIGHT,
-        'title' => _x('Line Height', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => '1.2',
-        'custom_attributes' => [
-            'step' => '.1',
-        ],
-    ],
-    StylesPropertiesDictionary::PADDING => [
-        'type' => 'text',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::PADDING,
-        'title' => _x('Padding', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'desc_tip' => _x(
-            'Add padding to the components. Allowed units include `16px 16px 16px 16px` and `em`, `px`, `rem`.',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-        'default' => '.63em',
-    ],
-    StylesPropertiesDictionary::TEXT_ALIGN => [
-        'type' => 'select',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::TEXT_ALIGN,
-        'title' => _x('Align Text', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => 'left',
-        'options' => [
-            'left' => _x('Left', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-            'right' => _x('Right', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-            'center' => _x('Center', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-            'justify' => _x('Justify', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        ],
-    ],
-    StylesPropertiesDictionary::TEXT_TRANSFORM => [
-        'type' => 'select',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::TEXT_TRANSFORM,
-        'title' => _x('Transform Text ', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'default' => 'none',
-        'options' => [
-            'none' => _x(
-                'None',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-            'capitalize' => _x(
-                'Capitalize',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-            'uppercase' => _x(
-                'Uppercase',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-            'lowercase' => _x(
-                'Lowercase',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-            'full-width' => _x(
-                'Full Width',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-            'full-size-kana' => _x(
-                'Full Size Kana',
-                'Mollie Components Settings',
-                'mollie-payments-for-woocommerce'
-            ),
-        ],
-    ],
-    [
-        'type' => 'sectionend',
-        'id' => 'mollie_components_styles',
-    ],
-    [
-        'type' => 'title',
-        'id' => 'mollie_components_invalid_styles',
-        'title' => _x(
-            'Invalid Status Styles',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-    ],
-    StylesPropertiesDictionary::INVALID_TEXT_COLOR => [
-        'type' => 'color',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::INVALID_TEXT_COLOR,
-        'title' => _x('Text Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'desc_tip' => _x(
-            'Text Color for invalid input.',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-        'default' => '#000000',
-    ],
-    StylesPropertiesDictionary::INVALID_BACKGROUND_COLOR => [
-        'type' => 'color',
-        'id' => 'mollie_components_' . StylesPropertiesDictionary::INVALID_BACKGROUND_COLOR,
-        'title' => _x('Background Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
-        'desc_tip' => _x(
-            'Background Color for invalid input.',
-            'Mollie Components Settings',
-            'mollie-payments-for-woocommerce'
-        ),
-        'default' => '#FFF0F0',
-    ],
-    [
-        'type' => 'sectionend',
-        'id' => 'mollie_components_invalid_styles',
-    ],
-];
diff --git a/src/Settings/MollieSettingsPage.php b/src/Settings/MollieSettingsPage.php
index 04be819e0..6e225d5e7 100644
--- a/src/Settings/MollieSettingsPage.php
+++ b/src/Settings/MollieSettingsPage.php
@@ -10,8 +10,6 @@
 use Mollie\WooCommerce\Settings\Page\PageNoApiKey;
 use Mollie\WooCommerce\Settings\Page\PagePaymentMethods;
 use Mollie\WooCommerce\Shared\Data;
-use Mollie\WooCommerce\PaymentMethods\Constants;
-use WC_Gateway_BACS;
 use WC_Settings_Page;
 
 class MollieSettingsPage extends WC_Settings_Page
@@ -143,54 +141,4 @@ public function get_settings($currentSection = '')
             $currentSection
         );
     }
-
-    protected function checkDirectDebitStatus($content): string
-    {
-        $hasCustomSepaSettings = $this->paymentMethods["directdebit"]->getProperty('enabled') !== false;
-        $isSepaEnabled = !$hasCustomSepaSettings || $this->paymentMethods["directdebit"]->getProperty('enabled') === 'yes';
-        $sepaGatewayAllowed = !empty($this->registeredGateways["mollie_wc_gateway_directdebit"]);
-        if ($sepaGatewayAllowed && !$isSepaEnabled) {
-            $warning_message = __(
-                "You have WooCommerce Subscriptions activated, but not SEPA Direct Debit. Enable SEPA Direct Debit if you want to allow customers to pay subscriptions with iDEAL and/or other 'first' payment methods.",
-                'mollie-payments-for-woocommerce'
-            );
-
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= $warning_message;
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @param $content
-     *
-     * @return string
-     */
-    protected function checkMollieBankTransferNotBACS($content): string
-    {
-        $woocommerce_banktransfer_gateway = new WC_Gateway_BACS();
-
-        if ($woocommerce_banktransfer_gateway->is_available()) {
-            $content .= '<div class="notice notice-warning is-dismissible"><p>';
-            $content .= __(
-                'You have the WooCommerce default Direct Bank Transfer (BACS) payment gateway enabled in WooCommerce. Mollie strongly advices only using Bank Transfer via Mollie and disabling the default WooCommerce BACS payment gateway to prevent possible conflicts.',
-                'mollie-payments-for-woocommerce'
-            );
-            $content .= '</p></div> ';
-
-            return $content;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @param $content
-     *
-     * @return string
-     */
 }

From 07b89edcfb4b675cdf72ccfecc5f3c6ff5815533 Mon Sep 17 00:00:00 2001
From: inpsyde-maticluznar <m.luznar@inpsyde.com>
Date: Tue, 29 Oct 2024 14:26:08 +0100
Subject: [PATCH 9/9] Fix notice behaviour & apply visual fixes

---
 src/Activation/ActivationModule.php           |   3 +-
 src/Settings/MollieSettingsPage.php           | 124 +++++++++++++++++-
 src/Settings/Page/Section/Advanced.php        |  13 ++
 .../Page/Section/ConnectionFields.php         |  13 --
 .../Page/Section/ConnectionStatusTrait.php    |   4 +-
 src/Settings/SettingsModule.php               |   3 +-
 6 files changed, 142 insertions(+), 18 deletions(-)

diff --git a/src/Activation/ActivationModule.php b/src/Activation/ActivationModule.php
index 598bcef29..03fa454fb 100644
--- a/src/Activation/ActivationModule.php
+++ b/src/Activation/ActivationModule.php
@@ -40,9 +40,10 @@ public function run(ContainerInterface $container): bool
             'init',
             [$this, 'pluginInit']
         );
+
+        add_action('admin_init', [$this, 'mollieWcNoticeApiKeyMissing']);
         $this->declareCompatibleWithHPOS();
         $this->handleTranslations();
-        $this->mollieWcNoticeApiKeyMissing();
         $this->appleValidationFileRewriteRules();
         return true;
     }
diff --git a/src/Settings/MollieSettingsPage.php b/src/Settings/MollieSettingsPage.php
index 6e225d5e7..ac0625360 100644
--- a/src/Settings/MollieSettingsPage.php
+++ b/src/Settings/MollieSettingsPage.php
@@ -10,6 +10,7 @@
 use Mollie\WooCommerce\Settings\Page\PageNoApiKey;
 use Mollie\WooCommerce\Settings\Page\PagePaymentMethods;
 use Mollie\WooCommerce\Shared\Data;
+use WC_Admin_Settings;
 use WC_Settings_Page;
 
 class MollieSettingsPage extends WC_Settings_Page
@@ -130,7 +131,7 @@ public function get_settings($currentSection = '')
                 $this->dataHelper
             );
             if ($page::slug() === $defaultSection) {
-                $mollieSettings = $page->settings();
+                $mollieSettings = $this->hideKeysIntoStars($page->settings());
                 break;
             }
         }
@@ -141,4 +142,125 @@ public function get_settings($currentSection = '')
             $currentSection
         );
     }
+
+    /**
+     * @param $settings
+     *
+     * @return array
+     */
+    protected function hideKeysIntoStars($settings): array
+    {
+        $liveKeyName = 'mollie-payments-for-woocommerce_live_api_key';
+        $testKeyName = 'mollie-payments-for-woocommerce_test_api_key';
+        $liveValue = get_option($liveKeyName);
+        $testValue = get_option($testKeyName);
+
+        foreach ($settings as $key => $setting) {
+            if (
+                    ($setting['id']
+                            === $liveKeyName
+                            && $liveValue)
+                    || ($setting['id']
+                            === $testKeyName
+                            && $testValue)
+            ) {
+                $settings[$key]['value'] = '**********';
+            }
+        }
+        return $settings;
+    }
+
+    /**
+     * Save settings
+     *
+     * @since 1.0
+     */
+    public function save()
+    {
+        global $current_section;
+
+        $settings = $this->get_settings($current_section);
+        $settings = $this->saveApiKeys($settings);
+        WC_Admin_Settings::save_fields($settings);
+    }
+
+    /**
+     * @param $settings
+     *
+     * @return array
+     */
+    protected function saveApiKeys($settings)
+    {
+        $nonce = filter_input(INPUT_POST, '_wpnonce', FILTER_SANITIZE_SPECIAL_CHARS);
+        $isNonceValid = wp_verify_nonce(
+            $nonce,
+            'woocommerce-settings'
+        );
+        if (!$isNonceValid) {
+            return $settings;
+        }
+        $liveKeyName = 'mollie-payments-for-woocommerce_live_api_key';
+        $testKeyName = 'mollie-payments-for-woocommerce_test_api_key';
+        $liveValueInDb = get_option($liveKeyName);
+        $testValueInDb = get_option($testKeyName);
+        $postedLiveValue = isset($_POST[$liveKeyName]) ? sanitize_text_field(wp_unslash($_POST[$liveKeyName])) : '';
+        $postedTestValue = isset($_POST[$testKeyName]) ? sanitize_text_field(wp_unslash($_POST[$testKeyName])) : '';
+
+        foreach ($settings as $setting) {
+            if (
+                    $setting['id']
+                    === $liveKeyName
+                    && $liveValueInDb
+            ) {
+                if ($postedLiveValue === '**********') {
+                    $_POST[$liveKeyName] = $liveValueInDb;
+                } else {
+                    $pattern = '/^live_\w{30,}$/';
+                    $this->validateApiKeyOrRemove(
+                        $pattern,
+                        $postedLiveValue,
+                        $liveKeyName
+                    );
+                }
+            } elseif (
+                    $setting['id']
+                    === $testKeyName
+                    && $testValueInDb
+            ) {
+                if ($postedTestValue === '**********') {
+                    $_POST[$testKeyName] = $testValueInDb;
+                } else {
+                    $pattern = '/^test_\w{30,}$/';
+                    $this->validateApiKeyOrRemove(
+                        $pattern,
+                        $postedTestValue,
+                        $testKeyName
+                    );
+                }
+            }
+        }
+        return $settings;
+    }
+
+    /**
+     * @param       $pattern
+     * @param       $value
+     * @param       $keyName
+     *
+     */
+    protected function validateApiKeyOrRemove($pattern, $value, $keyName)
+    {
+        $nonce = filter_input(INPUT_POST, '_wpnonce', FILTER_SANITIZE_SPECIAL_CHARS);
+        $isNonceValid = wp_verify_nonce(
+            $nonce,
+            'woocommerce-settings'
+        );
+        if (!$isNonceValid) {
+            return;
+        }
+        $hasApiFormat = preg_match($pattern, $value);
+        if (!$hasApiFormat) {
+            unset($_POST[$keyName]);
+        }
+    }
 }
diff --git a/src/Settings/Page/Section/Advanced.php b/src/Settings/Page/Section/Advanced.php
index df39872bf..8b3c8967e 100644
--- a/src/Settings/Page/Section/Advanced.php
+++ b/src/Settings/Page/Section/Advanced.php
@@ -18,6 +18,19 @@ public function config(): array
                 'type' => 'title',
                 'desc' => '<p>' . __('The following options are required to use the plugin and are used by all Mollie payment methods', 'mollie-payments-for-woocommerce') . '</p>',
             ],
+            [
+                'id' => $this->settings->getSettingId('debug'),
+                'title' => __('Debug Log', 'mollie-payments-for-woocommerce'),
+                'type' => 'checkbox',
+                'desc' => sprintf(
+                    __(
+                        "Log plugin events. <a href='%s'>View logs</a>",
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    $this->settings->getLogsUrl()
+                ),
+                'default' => 'yes',
+            ],
             [
                 'id' => $this->settings->getSettingId('order_status_cancelled_payments'),
                 'title' => __('Order status after cancelled payment', 'mollie-payments-for-woocommerce'),
diff --git a/src/Settings/Page/Section/ConnectionFields.php b/src/Settings/Page/Section/ConnectionFields.php
index 681c7d437..0708ba200 100644
--- a/src/Settings/Page/Section/ConnectionFields.php
+++ b/src/Settings/Page/Section/ConnectionFields.php
@@ -71,19 +71,6 @@ public function config(): array
                     'mollie-payments-for-woocommerce'
                 ),
             ],
-            [
-                'id' => $this->settings->getSettingId('debug'),
-                'title' => __('Debug Log', 'mollie-payments-for-woocommerce'),
-                'type' => 'checkbox',
-                'desc' => sprintf(
-                    __(
-                        "Log plugin events. <a href='%s'>View logs</a>",
-                        'mollie-payments-for-woocommerce'
-                    ),
-                    $this->settings->getLogsUrl()
-                ),
-                'default' => 'yes',
-            ],
             [
                 'id' => $this->settings->getSettingId('sectionend'),
                 'type' => 'sectionend',
diff --git a/src/Settings/Page/Section/ConnectionStatusTrait.php b/src/Settings/Page/Section/ConnectionStatusTrait.php
index ff1c0514c..2639fd9b5 100644
--- a/src/Settings/Page/Section/ConnectionStatusTrait.php
+++ b/src/Settings/Page/Section/ConnectionStatusTrait.php
@@ -29,8 +29,8 @@ protected function connectionStatus(Settings $settings, bool $connectionStatus):
             );
         }
         if ($testMode) {
-            return __('Successfully connected with Test API &#x2713;', 'mollie-payments-for-woocommerce');
+            return __('Successfully connected with <strong>Test API</strong> &#x2713;', 'mollie-payments-for-woocommerce');
         }
-        return __('Successfully connected with Live API &#x2713;', 'mollie-payments-for-woocommerce');
+        return __('Successfully connected with <strong>Live API</strong> &#x2713;', 'mollie-payments-for-woocommerce');
     }
 }
diff --git a/src/Settings/SettingsModule.php b/src/Settings/SettingsModule.php
index efdbb4590..61ecb6632 100644
--- a/src/Settings/SettingsModule.php
+++ b/src/Settings/SettingsModule.php
@@ -194,7 +194,8 @@ public function addPluginActionLinks(array $links): array
     public function maybeTestModeNotice(): bool
     {
         $testModeEnabled = get_option('mollie-payments-for-woocommerce_test_mode_enabled', true);
-        $shouldShowNotice = $testModeEnabled === 'yes';
+        $testKeyEntered = get_option('mollie-payments-for-woocommerce_test_api_key', true);
+        $shouldShowNotice = $testModeEnabled === 'yes' && !empty($testKeyEntered);
         if (!$shouldShowNotice) {
             return false;
         }