Feature: add content to the "Get Started" tab with instructions about how to use the integration (#8205)

Author: glaubersilva

src/PaymentGateways/TheGivingBlock/Actions/RegisterTheGivingBlockSettings.php

@@ -40,13 +40,15 @@ public function __invoke()
                 && give_get_current_setting_tab() === 'gateways'
                 && give_get_current_setting_section() === 'the-giving-block'
             ) {
+                wp_enqueue_style('dashicons');
                 wp_enqueue_style('giveTgbAdminPages', GIVE_PLUGIN_URL . 'src/PaymentGateways/TheGivingBlock/assets/css/adminPages.css', [], GIVE_VERSION);
                 wp_enqueue_script('giveTgbAdminPages', GIVE_PLUGIN_URL . 'src/PaymentGateways/TheGivingBlock/assets/js/adminPages.js', ['jquery', 'wp-i18n'], GIVE_VERSION, true);
-                wp_set_script_translations('giveTgbAdminPages', 'give-tgb');
+                wp_set_script_translations('giveTgbAdminPages', 'give');
 
                 wp_localize_script('giveTgbAdminPages', 'giveTgbSettings', [
                     'ajaxurl' => admin_url('admin-ajax.php'),
                     'nonce' => wp_create_nonce('giveTgbNonce'),
+                    'getStartedUrl' => admin_url('edit.php?post_type=give_forms&page=give-settings&tab=gateways&section=the-giving-block&group=get-started'),
                 ]);
             }
         });

src/PaymentGateways/TheGivingBlock/Admin/CustomFields/GetStartedSettingField.php

@@ -2,6 +2,8 @@
 
 namespace Give\PaymentGateways\TheGivingBlock\Admin\CustomFields;
 
+use Give\PaymentGateways\TheGivingBlock\Admin\Tabs\GetStarted\GetStartedTabContent;
+
 /**
  * Custom setting field for GiveWP > Payment Gateways > The Giving Block > Get Started tab.
  *
@@ -18,58 +20,6 @@ class GetStartedSettingField
      */
     public function handle(array $field): void
     {
-        $classes = !empty($field['wrapper_class']) ? esc_attr($field['wrapper_class']) : '';
-        $organizationTabUrl = admin_url(
-            'edit.php?post_type=give_forms&page=give-settings&tab=gateways&section=the-giving-block&group=organization'
-        );
-        ?>
-        <div class="give-tgb-setting-field give-tgb-get-started <?php echo $classes; ?>">
-            <p class="give-tgb-get-started-welcome">
-                <?php esc_html_e('Welcome to The Giving Block. With this integration, you can accept cryptocurrency and stock donations. The Giving Block provides its own donation form, rendered via a shortcode or block in the WordPress block editor.', 'give'); ?>
-            </p>
-
-            <div class="give-tgb-quick-start-box" style="background: #f0f8ff; border: 1px solid #0073aa; padding: 15px; border-radius: 5px; margin: 20px 0;">
-                <h3 class="give-tgb-quick-start-title" style="margin-top: 0;">
-                    <span class="dashicons dashicons-rocket"></span> <?php esc_html_e('Quick Start', 'give'); ?>
-                </h3>
-                <p class="give-tgb-quick-start-intro">
-                    <?php esc_html_e('To get started with crypto and stock donations:', 'give'); ?>
-                </p>
-                <ol class="give-tgb-quick-start-steps">
-                    <li>
-                        <?php esc_html_e('Use the Organization tab to connect your existing organization or create a new one with The Giving Block.', 'give'); ?>
-                    </li>
-                    <li>
-                        <?php esc_html_e('Add The Giving Block donation form to any page or post using the shortcode or block in the editor.', 'give'); ?>
-                    </li>
-                    <li>
-                        <?php esc_html_e('Use the Options tab to manage your data and configure additional settings.', 'give'); ?>
-                    </li>
-                </ol>
-                <p class="give-tgb-quick-start-actions">
-                    <a href="<?php echo esc_url($organizationTabUrl); ?>" class="button button-secondary give-tgb-connect-organization-btn" data-give-tgb-switch-group="organization">
-                        <?php esc_html_e('Connect Organization', 'give'); ?>
-                    </a>
-                </p>
-            </div>
-        </div>
-        <script>
-        (function() {
-            document.addEventListener('DOMContentLoaded', function() {
-                document.querySelectorAll('[data-give-tgb-switch-group]').forEach(function(btn) {
-                    btn.addEventListener('click', function(e) {
-                        e.preventDefault();
-                        var group = btn.getAttribute('data-give-tgb-switch-group');
-                        var menu = document.querySelector('.give-settings-section-content .give-settings-section-group-menu');
-                        if (!menu) return;
-                        var tabLink = menu.querySelector('a[data-group="' + group.replace(/["\\]/g, '\\$&') + '"]');
-                        if (tabLink) tabLink.click();
-                        return false;
-                    });
-                });
-            });
-        })();
-        </script>
-        <?php
+        give(GetStartedTabContent::class)->display();
     }
 }

src/PaymentGateways/TheGivingBlock/Admin/CustomFields/OptionsSettingField.php

@@ -1,25 +1,25 @@
-<?php
-
-namespace Give\PaymentGateways\TheGivingBlock\Admin\CustomFields;
-
-use Give\PaymentGateways\TheGivingBlock\Admin\Tabs\Options\OptionsTabContent;
-
-/**
- * Custom setting field for GiveWP > Payment Gateways >The Giving Block > Options tab.
- *
- * @unreleased
- */
-class OptionsSettingField
-{
-    /**
-     * Render the Options tab content.
-     *
-     * @unreleased
-     *
-     * @param array $field Field config (id, type, wrapper_class, etc.).
-     */
-    public function handle(array $field): void
-    {
-        OptionsTabContent::display();
-    }
-}
+<?php
+
+namespace Give\PaymentGateways\TheGivingBlock\Admin\CustomFields;
+
+use Give\PaymentGateways\TheGivingBlock\Admin\Tabs\Options\OptionsTabContent;
+
+/**
+ * Custom setting field for GiveWP > Payment Gateways >The Giving Block > Options tab.
+ *
+ * @unreleased
+ */
+class OptionsSettingField
+{
+    /**
+     * Render the Options tab content.
+     *
+     * @unreleased
+     *
+     * @param array $field Field config (id, type, wrapper_class, etc.).
+     */
+    public function handle(array $field): void
+    {
+        OptionsTabContent::display();
+    }
+}