Move custom domain to Advanced and put an intro instead

simple-analytics.php

@@ -60,6 +60,7 @@
 require __DIR__ . '/src/Settings/Blocks/Fields/Checkboxes.php';
 require __DIR__ . '/src/Settings/Blocks/Fields/Checkbox.php';
 require __DIR__ . '/src/Settings/Blocks/Fields/IpList.php';
+require __DIR__ . '/src/Settings/Blocks/IntroBlock.php';
 require __DIR__ . '/src/Settings/Tab.php';
 require __DIR__ . '/src/UI/LabelComponent.php';
 require __DIR__ . '/src/UI/TabListComponent.php';
@@ -77,10 +78,17 @@
 $adminPage = SimpleAnalytics\Settings\AdminPage::title('Simple Analytics')
     ->slug('simpleanalytics')
     ->tab('General', function (Tab $tab) {
-        $tab->input(SettingName::CUSTOM_DOMAIN, 'Custom Domain')
-            ->placeholder('Enter your custom domain or leave it empty.')
-            ->description('E.g. api.example.com. Leave empty to use the default domain (most users).')
-            ->docs('https://docs.simpleanalytics.com/bypass-ad-blockers');
+        $tab->title('Thanks for choosing Simple Analytics.');
+        $tab->intro([
+            'This plugin adds Simple Analytics to your WordPress site and collects pageviews in a privacy-first way. Your stats appear in your dashboard within minutes.',
+            'To exclude your own visits, open the "Ignore Rules" tab and enable the option for logged-in admins. You can also add your own IP there.',
+            'Want automated events, like downloads, outbound link clicks, and email clicks, collected for you? Check "Collect automated events" in the "Events" tab.',
+            'No account yet? <a href="https://simpleanalytics.com" target="_blank" rel="noopener">Sign up at simpleanalytics.com</a>. The trial includes almost all features, then you can choose a free or paid plan.',
+        ]);
+        $tab->cta(
+            'Visit your analytics dashboard',
+            'https://dashboard.simpleanalytics.com?utm_source=wordpress&utm_medium=plugin&utm_content=go_to_dashboard_button'
+        );
     })
     ->tab('Ignore Rules', function (Tab $tab) {
         $tab->icon(get_icon('eye-slash'));
@@ -105,6 +113,11 @@
     ->tab('Advanced', function (Tab $tab) {
         $tab->icon(get_icon('cog'));
 
+        $tab->input(SettingName::CUSTOM_DOMAIN, 'Custom Domain')
+            ->placeholder('Enter your custom domain or leave it empty.')
+            ->description('E.g. api.example.com. Leave empty to use the default domain (most users).')
+            ->docs('https://docs.simpleanalytics.com/bypass-ad-blockers');
+
         $tab->checkbox(SettingName::COLLECT_DNT, 'Collect Do Not Track')
             ->description('If you want to collect visitors with Do Not Track enabled, turn this on.')
             ->docs('https://docs.simpleanalytics.com/dnt');

src/Settings/Blocks/IntroBlock.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace SimpleAnalytics\Settings\Blocks;
+
+use SimpleAnalytics\Settings\Block;
+
+class IntroBlock implements Block
+{
+    /** @var string[] */
+    private $paragraphs;
+
+    /** @param string[] $paragraphs */
+    public function __construct(array $paragraphs)
+    {
+        $this->paragraphs = $paragraphs;
+    }
+
+    public function render(): void
+    {
+        $allowed = ['strong' => [], 'em' => [], 'a' => ['href' => [], 'target' => [], 'rel' => []]];
+        ?>
+        <div class="space-y-3">
+            <?php foreach ($this->paragraphs as $paragraph): ?>
+                <p class="text-sm text-gray-600"><?php echo wp_kses($paragraph, $allowed); ?></p>
+            <?php endforeach; ?>
+        </div>
+        <?php
+    }
+}

src/Settings/Concerns/ManagesBlocks.php

@@ -4,6 +4,7 @@
 
 use SimpleAnalytics\Settings\Block;
 use SimpleAnalytics\Settings\Blocks\CalloutBlock;
+use SimpleAnalytics\Settings\Blocks\IntroBlock;
 use SimpleAnalytics\Settings\Blocks\Fields\Checkbox;
 use SimpleAnalytics\Settings\Blocks\Fields\Checkboxes;
 use SimpleAnalytics\Settings\Blocks\Fields\Input;
@@ -13,6 +14,14 @@ trait ManagesBlocks
 {
     abstract protected function addBlock(Block $block): self;
 
+    /** @param string[] $paragraphs */
+    public function intro(array $paragraphs): IntroBlock
+    {
+        $block = new IntroBlock($paragraphs);
+        $this->addBlock($block);
+        return $block;
+    }
+
     public function callout(string $text): CalloutBlock
     {
         $block = new CalloutBlock($text);

src/Settings/Tab.php

@@ -2,6 +2,7 @@
 
 namespace SimpleAnalytics\Settings;
 
+use SimpleAnalytics\Settings\Blocks\Fields\Field;
 use SimpleAnalytics\Support\SvgIcon;
 
 class Tab
@@ -31,6 +32,16 @@ class Tab
      */
     protected $title;
 
+    /**
+     * @var string|null
+     */
+    protected $ctaLabel;
+
+    /**
+     * @var string|null
+     */
+    protected $ctaUrl;
+
     /** @var Block[] */
     protected $blocks = [];
 
@@ -69,6 +80,24 @@ public function title(string $title): self
         return $this;
     }
 
+    public function cta(string $label, string $url): self
+    {
+        $this->ctaLabel = $label;
+        $this->ctaUrl = $url;
+
+        return $this;
+    }
+
+    public function getCtaLabel(): ?string
+    {
+        return $this->ctaLabel;
+    }
+
+    public function getCtaUrl(): ?string
+    {
+        return $this->ctaUrl;
+    }
+
     protected function addBlock(Block $block): self
     {
         $this->blocks[] = $block;
@@ -80,14 +109,24 @@ public function getBlocks(): array
         return $this->blocks;
     }
 
+    public function hasFields(): bool
+    {
+        foreach ($this->blocks as $block) {
+            if ($block instanceof Field) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     public function render(): void
     {
         ?>
         <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
             <?php if (isset($this->title) || isset($this->description)): ?>
                 <div class="sm:col-span-4">
                     <?php if (isset($this->title)): ?>
-                        <h1 class="text-sm font-medium leading-6 text-gray-900">
+                        <h1 class="text-lg font-semibold text-gray-900">
                             <?php echo esc_html($this->title); ?>
                             <?php if (isset($this->docs)): ?>
                                 <a href="<?php echo esc_url($this->docs); ?>" target="_blank"

src/UI/PageLayoutComponent.php

@@ -79,12 +79,19 @@ class="inline-flex items-center rounded bg-white px-2 py-1 text-xs font-semibold
                     </div>
 
                     <div class="mt-6 flex items-center justify-start gap-x-6">
-                        <button
-                            type="submit"
-                            class="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm bg-primary hover:bg-red-500 focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                        >
-                            Save Changes
-                        </button>
+                        <?php if ($currentTab->hasFields()): ?>
+                            <button
+                                type="submit"
+                                class="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm bg-primary hover:bg-red-500 focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                            >
+                                Save Changes
+                            </button>
+                        <?php elseif ($currentTab->getCtaLabel() && $currentTab->getCtaUrl()): ?>
+                            <a href="<?php echo esc_url($currentTab->getCtaUrl()); ?>" target="_blank" rel="noopener"
+                               class="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm bg-primary hover:bg-red-500 focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 inline-flex items-center">
+                                <?php echo esc_html($currentTab->getCtaLabel()); ?>
+                            </a>
+                        <?php endif; ?>
                     </div>
                 </div>
             </form>

tests/Browser/pluginSettings.spec.ts

@@ -36,7 +36,7 @@ async function visitAsGuest(browser: Browser, path = '/'): Promise<Page> {
 
 test('adds a script by default', async ({ page, browser }) => {
   await asAdmin(page);
-  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=general');
+  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=advanced');
   await page.fill('[name="simpleanalytics_custom_domain"]', '');
   await saveSettings(page);
 
@@ -244,7 +244,7 @@ test('adds automated events script with override global', async ({ page, browser
 
 test('adds a script with a custom domain name', async ({ page, browser }) => {
   await asAdmin(page);
-  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=general');
+  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=advanced');
   await page.fill('[name="simpleanalytics_custom_domain"]', 'mydomain.com');
   await saveSettings(page);
   await expect(page.locator('[name="simpleanalytics_custom_domain"]')).toHaveValue('mydomain.com');
@@ -253,7 +253,7 @@ test('adds a script with a custom domain name', async ({ page, browser }) => {
   await expect(guest.locator('script[src="https://mydomain.com/latest.js"]')).toBeAttached();
   await guest.context().close();
 
-  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=general');
+  await page.goto('/wp-admin/options-general.php?page=simpleanalytics&tab=advanced');
   await page.fill('[name="simpleanalytics_custom_domain"]', '');
   await saveSettings(page);
 });