Render the front-end chat with a front:chat tag

dist/build/manifest.json

@@ -9,7 +9,7 @@
     ]
   },
   "resources/js/cp.js": {
-    "file": "assets/cp-peOtejVL.js",
+    "file": "assets/cp-CYSYRrr0.js",
     "name": "cp",
     "src": "resources/js/cp.js",
     "isEntry": true

resources/js/cp.js

@@ -1,23 +1,12 @@
 Statamic.booted(() => {
-    let frontConfig = Statamic.$config.get('front');
+    const frontConfig = Statamic.$config.get('front');
 
-    if (frontConfig && frontConfig.chatId) {
-        var script = document.createElement("script");
-        script.src = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
-
-        // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
-        document.body.appendChild(script);
-        script.addEventListener('load', () => {
-            window.FrontChat(
-                'init',
-                {
-                    chatId: frontConfig.chatId,
-                    email: frontConfig.email,
-                    name: frontConfig.name,
-                    userHash: frontConfig.hash,
-                    useDefaultLauncher: true
-                }
-            );
-        });
+    if (! frontConfig) {
+        return;
     }
+
+    const script = document.createElement('script');
+    script.src = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
+    script.addEventListener('load', () => window.FrontChat('init', { ...frontConfig, useDefaultLauncher: true }));
+    document.body.appendChild(script);
 });

src/ChatConfig.php

@@ -13,8 +13,8 @@ public static function forCurrentUser(): array
         return [
             'chatId' => config('front.chat.id'),
             'email' => $email,
-            'hash' => $email ? hash_hmac('sha256', $email, config('front.secret_key')) : null,
             'name' => User::current()?->name(),
+            'userHash' => $email ? hash_hmac('sha256', $email, config('front.secret_key')) : null,
         ];
     }
 }

src/ServiceProvider.php

@@ -8,10 +8,6 @@
 
 class ServiceProvider extends AddonServiceProvider
 {
-    protected $routes = [
-        'actions' => __DIR__.'/../routes/actions.php',
-    ];
-
     protected $vite = [
         'input' => [
             'resources/css/cp.css',

src/Tags/Front.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace TransformStudios\Front\Tags;
+
+use Illuminate\Support\Js;
+use Statamic\Support\Arr;
+use Statamic\Tags\Tags;
+use TransformStudios\Front\ChatConfig;
+
+class Front extends Tags
+{
+    public function chat(): string
+    {
+        if (! $this->isConfigured()) {
+            return '';
+        }
+
+        $options = Js::from(Arr::removeNullValues(ChatConfig::forCurrentUser()));
+
+        return <<<HTML
+        <script src="https://chat-assets.frontapp.com/v1/chat.bundle.js"></script>
+        <script>
+            window.addEventListener('load', () => window.FrontChat('init', { ...{$options}, useDefaultLauncher: true }));
+        </script>
+        HTML;
+    }
+
+    private function isConfigured(): bool
+    {
+        return config('front.chat.show_on_front_end')
+            && config('front.chat.id')
+            && config('front.secret_key');
+    }
+}

tests/ServiceProviderTest.php

@@ -16,8 +16,8 @@
     expect(Statamic::jsonVariables(request())['front'])->toBe([
         'chatId' => 'chat-id',
         'email' => 'erin@transformstudios.com',
-        'hash' => hash_hmac('sha256', 'erin@transformstudios.com', 'secret'),
         'name' => 'Erin',
+        'userHash' => hash_hmac('sha256', 'erin@transformstudios.com', 'secret'),
     ]);
 });
 

tests/Tags/FrontTest.php

@@ -0,0 +1,43 @@
+<?php
+
+use Statamic\Facades\Antlers;
+use Statamic\Facades\User;
+
+beforeEach(function () {
+    config()->set('front.secret_key', 'secret');
+    config()->set('front.chat.id', 'chat-id');
+    config()->set('front.chat.show_on_front_end', true);
+});
+
+it('renders the chat script for a guest', function () {
+    $html = (string) Antlers::parse('{{ front:chat }}', trusted: true);
+
+    expect($html)
+        ->toContain('https://chat-assets.frontapp.com/v1/chat.bundle.js')
+        ->toContain('chatId')
+        ->toContain('chat-id')
+        ->not->toContain('userHash');
+});
+
+it('identifies the current user', function () {
+    $user = tap(User::make()->email('erin@transformstudios.com')->set('name', 'Erin'))->save();
+
+    $this->actingAs($user);
+
+    expect((string) Antlers::parse('{{ front:chat }}', trusted: true))
+        ->toContain('erin@transformstudios.com')
+        ->toContain('Erin')
+        ->toContain(hash_hmac('sha256', 'erin@transformstudios.com', 'secret'));
+});
+
+it('renders nothing when hidden on the front end', function () {
+    config()->set('front.chat.show_on_front_end', false);
+
+    expect((string) Antlers::parse('{{ front:chat }}', trusted: true))->toBe('');
+});
+
+it('renders nothing without a chat id', function () {
+    config()->set('front.chat.id', null);
+
+    expect((string) Antlers::parse('{{ front:chat }}', trusted: true))->toBe('');
+});