wip

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to `laravel-support-bubble` will be documented in this file.
 
+## 1.2.0 - 2021-09-07
+
+- add container classes to config
+
+## 1.1.0 - 2021-09-07
+
+- add RTL Support (#14)
+
+## 1.0.3 - 2021-09-06
+
+- fix pointer events on hidden support form
+- don't show missing data in notifications (#11)
+
+## 1.0.2 - 2021-09-03
+
+- make submit button translatable
+
 ## 1.0.1 - 2021-09-02
 
 - replace impersonation with reply-to

README.md

@@ -25,6 +25,10 @@ We invest a lot of resources into creating [best in class open source packages](
 
 We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
 
+## Are you a visual learner?
+
+If [this stream on YouTube](https://www.youtube.com/watch?v=IucDLJI2mvQ), you'll see how to install that package, and how it works under the hood.
+
 ## Installation
 
 You can install the package via composer:
@@ -41,6 +45,17 @@ The views included in this package all use TailwindCSS classes. We've stuck to t
 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 ```
 
+If you use Tailwind [Just-in-Time Mode](https://tailwindcss.com/docs/just-in-time-mode) you should add these additional lines into your `tailwind.config.js` file:
+```js
+purge: [
+    './vendor/spatie/laravel-support-bubble/config/**/*.php',
+    './vendor/spatie/laravel-support-bubble/resources/views/**/*.blade.php',
+    // other places
+],
+```
+
+This way Tailwind JIT will build your styles including those properties used for the support bubble.
+
 #### Add the component to your view
 
 After installing the package, you need to add the `<x-support-bubble />` Blade component in your relevant view files. If you want it to show up on all pages you can add it to your `layout.blade.php` file.
@@ -93,12 +108,6 @@ These are the default contents of the published config file:
 <?php
 
 return [
-    /*
-     * The default route and controller will be registered using this route name.
-     * This is a good place to hook in your own route and controller if necessary.
-     */
-    'form_action_route' => 'supportBubble.submit',
-
     /*
      * Enable or disable fields in the support bubble.
      * Keep in mind that `name` and `email` will be hidden automatically
@@ -110,31 +119,45 @@ return [
         'subject' => true,
         'message' => true,
     ],
-
-    /*
-     * When set to true we'll use currently logged in user to fill in
-     * the name and email fields. Both fields will also be hidden.
-     */
-    'prefill_logged_in_user' => true,
-
+
     /*
      * We'll send any chat bubble responses to this e-mail address.
      *
      * Set this to
      */
     'mail_to' => null,
 
+    /*
+     * When set to true we'll use currently logged in user to fill in
+     * the name and email fields. Both fields will also be hidden.
+     */
+    'prefill_logged_in_user' => true,
+
     /*
      * The TailwindCSS classes used on a couple of key components.
-     * 
+     *
      * To customize the components further, you can publish
      * the views of this package.
      */
     'classes' => [
+        'container' => 'text-base items-end z-10 flex-col m-4 gap-3',
         'bubble' => 'hidden sm:block | bg-purple-400 rounded-full shadow-lg w-14 h-14 text-white p-4',
         'input' => 'bg-gray-100 border border-gray-200 w-full max-w-full p-2 rounded-sm shadow-input text-gray-800 text-base',
         'button' => 'inline-flex place-center px-4 py-3 h-10 border-0 bg-purple-500 hover:bg-purple-600 active:bg-purple-600 overflow-hidden rounded-sm text-white leading-none no-underline',
     ],
+
+    /*
+     * The default route and controller will be registered using this route name.
+     * This is a good place to hook in your own route and controller if necessary.
+     */
+    'form_action_route' => 'supportBubble.submit',
+
+     /**
+     * The positioning of the bubble and the form, change this between right-to-left and left-to-right, if you want to use RTL, you must have your layout set to RTL like this 
+     * <html lang="ar-TN" dir="rtl">
+     * By default, the value of this is LTR
+     */
+    'direction' => 'left-to-right',
 ];
 ```
 
@@ -151,7 +174,7 @@ It is currently not possible to add new fields to the support bubble's form. You
 If you're just looking to customize the field labels, intro text or success text (after the form submitted), you can publish the package's language files:
 
 ```bash
-php artisan vendor:publish --provider="Spatie\LaravelSupportBubble\LaravelSupportBubbleServiceProvider" --tag=support-bubble-translations
+php artisan vendor:publish --provider="Spatie\SupportBubble\SupportBubbleServiceProvider" --tag=support-bubble-translations
 ```
 
 These published files can be found and changed in `resources/lang/vendor/laravel-support-bubble/en/`.
@@ -167,7 +190,7 @@ You you're looking to change any more advanced styles, keep reading to learn how
 You can publish and change all views (including the JavaScript code) in this package:
 
 ```bash
-php artisan vendor:publish --provider="Spatie\LaravelSupportBubble\LaravelSupportBubbleServiceProvider" --tag=support-bubble-views
+php artisan vendor:publish --provider="Spatie\SupportBubble\SupportBubbleServiceProvider" --tag=support-bubble-views
 ```
 These published views can be found and changed in `resources/views/vendor/laravel-support-bubble/`.
 

config/support-bubble.php

@@ -1,12 +1,6 @@
 <?php
 
 return [
-    /*
-     * The default route and controller will be registered using this route name.
-     * This is a good place to hook in your own route and controller if necessary.
-     */
-    'form_action_route' => 'supportBubble.submit',
-
     /*
      * Enable or disable fields in the support bubble.
      * Keep in mind that `name` and `email` will be hidden automatically
@@ -19,28 +13,43 @@
         'message' => true,
     ],
 
-    /*
-     * When set to true we'll use currently logged in user to fill in
-     * the name and email fields. Both fields will also be hidden.
-     */
-    'prefill_logged_in_user' => true,
-
     /*
      * We'll send any chat bubble responses to this e-mail address.
      *
      * Set this to
      */
     'mail_to' => null,
 
+    /*
+     * When set to true we'll use currently logged in user to fill in
+     * the name and email fields. Both fields will also be hidden.
+     */
+    'prefill_logged_in_user' => true,
+
     /*
      * The TailwindCSS classes used on a couple of key components.
      *
      * To customize the components further, you can publish
      * the views of this package.
      */
     'classes' => [
+        'container' => 'text-base items-end z-30 flex-col m-4 gap-3',
         'bubble' => 'hidden sm:block | bg-purple-400 rounded-full shadow-lg w-14 h-14 text-white p-4',
         'input' => 'bg-gray-100 border border-gray-200 w-full max-w-full p-2 rounded-sm shadow-input text-gray-800 text-base',
         'button' => 'inline-flex place-center px-4 py-3 h-10 border-0 bg-purple-500 hover:bg-purple-600 active:bg-purple-600 overflow-hidden rounded-sm text-white leading-none no-underline',
     ],
+
+    /*
+     * The default route and controller will be registered using this route name.
+     * This is a good place to hook in your own route and controller if necessary.
+     */
+    'form_action_route' => 'supportBubble.submit',
+
+     /**
+     * The positioning of the bubble and the form, change this between right-to-left and left-to-right.
+     * If you want to use RTL, you must have your layout set to RTL like this
+     * <html lang="ar-TN" dir="rtl">
+     * By default, the value of this is left-to-right
+     */
+    'direction' => 'left-to-right'
 ];

resources/lang/en/support-bubble.php

@@ -9,4 +9,5 @@
     'email_label' => 'E-mail',
     'subject_label' => 'Subject',
     'message_label' => 'How can we help?',
+    'submit_label' => 'Submit',
 ];

resources/views/components/support-bubble.blade.php

@@ -1,5 +1,6 @@
-<div class="spatie-support-bubble | text-base fixed bottom-0 right-0 items-end z-10 flex-col m-4 gap-3" style="max-width: 340px; display: none;">
-    <div class="spatie-support-bubble__container | bg-white shadow-xl border border-gray-300 rounded p-6 transition transform translate-x-full opacity-0">
+<div class="spatie-support-bubble | pointer-events-none fixed bottom-0 {{ $direction === 'right-to-left' ? 'left-0' : 'right-0' }} {{ config('support-bubble.classes.container') }}"
+     style="max-width: 340px; display: none;">
+    <div class="spatie-support-bubble__container | pointer-events-auto bg-white shadow-xl border border-gray-300 rounded p-6 transition transform {{ $direction === 'right-to-left' ? '-translate-x-full' : 'translate-x-full' }} opacity-0">
         <div class="spatie-support-bubble__form">
             @include('support-bubble::includes.form')
         </div>
@@ -8,7 +9,7 @@
         </div>
     </div>
 
-    <div class="spatie-support-bubble__button">
+    <div class="spatie-support-bubble__button | pointer-events-auto">
         @include('support-bubble::includes.bubble')
     </div>
 </div>

resources/views/includes/form.blade.php

@@ -45,5 +45,5 @@ class="flex flex-col gap-6 text-base"
         />
     @endif
 
-    <button type="submit" class="{{ config('support-bubble.classes.button') }}">Submit</button>
+    <button type="submit" class="{{ config('support-bubble.classes.button') }}">{{ __('support-bubble::support-bubble.submit_label') }}</button>
 </form>

resources/views/includes/script.blade.php

@@ -7,6 +7,14 @@ function bootstrapSupportBubble(element) {
         const responseContainer = element.querySelector('.spatie-support-bubble__response');
         const errorMessage = element.querySelector('.spatie-support-bubble__error');
 
+        let fullTranslateClass = 'translate-x-full';
+        let zeroTranslateClass = 'translate-x-0';
+
+        @if(config('support-bubble.direction') === 'right-to-left')
+            fullTranslateClass = "-"+fullTranslate;
+            zeroTranslateClass = "-"+zeroTranslate;
+        @endif
+
         element
             .querySelector('.spatie-support-bubble__button button')
             .addEventListener('click', () => {
@@ -15,11 +23,12 @@ function bootstrapSupportBubble(element) {
                 if (opening) {
                     responseContainer.style.display = 'none';
                     formContainer.style.display = 'block';
-                    container.classList.remove('translate-x-full', 'opacity-0');
-                    container.classList.add('translate-x-0', 'opacity-100');
+                    
+                    container.classList.remove(fullTranslateClass, 'opacity-0');
+                    container.classList.add(zeroTranslateClass, 'opacity-100');
                 } else {
-                    container.classList.remove('translate-x-0', 'opacity-100');
-                    container.classList.add('translate-x-full', 'opacity-0');
+                    container.classList.remove(zeroTranslateClass, 'opacity-100');
+                    container.classList.add(fullTranslateClass, 'opacity-0');
                 }
             });
 

src/Components/SupportBubbleComponent.php

@@ -9,6 +9,8 @@ class SupportBubbleComponent extends Component
 {
     public string $formAction;
 
+    public string $direction;
+
     public string $email = '';
 
     public string $name = '';
@@ -17,6 +19,8 @@ public function __construct()
     {
         $this->formAction = route(config('support-bubble.form_action_route'));
 
+        $this->direction = config('support-bubble.direction');
+
         if (config('support-bubble.prefill_logged_in_user')) {
             $user = auth()->user();
 

src/Http/Requests/SupportBubbleRequest.php

@@ -3,19 +3,20 @@
 namespace Spatie\SupportBubble\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
 
 class SupportBubbleRequest extends FormRequest
 {
     public function rules()
     {
         return [
-            'name' => config('support-bubble.fields.name') ? 'required' : '',
+            'name' => Rule::requiredIf(config('support-bubble.fields.name')),
             'email' => [
                 'email',
-                config('support-bubble.fields.email') ? 'required' : '',
+                Rule::requiredIf(config('support-bubble.fields.email')),
             ],
-            'subject' => config('support-bubble.fields.subject') ? 'required' : '',
-            'message' => config('support-bubble.fields.message') ? 'required' : '',
+            'subject' => Rule::requiredIf(config('support-bubble.fields.subject')),
+            'message' => Rule::requiredIf(config('support-bubble.fields.message')),
             'url' => ['required', 'url'],
         ];
     }

src/Notifications/BubbleResponseNotification.php

@@ -17,7 +17,7 @@ public function __construct(
         public string $subject,
         public string $message,
         public string $email,
-        public string $name,
+        public string | null $name,
         public string | null $url,
         public string | null $ip,
         public string | null $userAgent,
@@ -30,7 +30,7 @@ public static function fromEvent(SupportBubbleSubmittedEvent $event): self
             $event->subject ?? 'Support bubble message',
             $event->message ?? 'No message',
             $event->email ?? config('support-bubble.mail_to') ?? 'No email',
-            $event->name ?? 'Unknown',
+            $event->name,
             $event->url ?? 'Unknown',
             $event->ip ?? 'Unknown',
             $event->userAgent ?? 'Unknown',
@@ -50,7 +50,7 @@ public function toMail($notifiable): MailMessage
             ->subject("Support bubble message from {$this->name}: {$this->subject}")
             ->replyTo($this->email)
             ->greeting($this->subject)
-            ->line("{$this->name} ({$this->email}) left a new message using the chat bubble:")
+            ->line("{$this->submitter()} left a new message using the chat bubble:")
             ->line(new HtmlString("<blockquote>{$this->message}</blockquote>"))
             ->line($metadataHtml);
     }
@@ -68,4 +68,11 @@ protected function getMetadataHtml(): HtmlString
 
         return new HtmlString(trim($html));
     }
+
+    protected function submitter(): string
+    {
+        return is_null($this->name)
+            ? $this->email
+            : "{$this->name} ({$this->email})";
+    }
 }

tests/Components/SupportBubbleComponentTest.php

@@ -21,3 +21,14 @@
         ->assertDontSee('[email protected]')
         ->assertDontSee('John Doe');
 });
+
+it('can render the submit button using the default translation string')
+    ->blade('<x-support-bubble />')
+    ->assertSee('Submit');
+
+it('can be renderd using right-to-left in the correct place', function () {
+    config()->set('support-bubble.direction', 'right-to-left');
+    test()->blade('<x-support-bubble />')
+    ->assertSee('spatie-support-bubble')
+    ->assertSee('-translate-x-full');
+});

tests/Notifications/MailNotificationTest.php

@@ -37,14 +37,28 @@
 });
 
 it('can be rendered', function () {
-    $allValues = formValues() + [
-        'ip' => '1.2.3.4',
-        'userAgent' => 'my-browser',
-    ];
+    $allValues = formValues([
+            'ip' => '1.2.3.4',
+            'userAgent' => 'my-browser',
+        ]);
 
     $notification = new BubbleResponseNotification(...$allValues);
 
     $html = (string)$notification->toMail(new AnonymousNotifiable())->render();
 
-    expect($html)->toContain('left a new message');
+    expect($html)->toContain('John Doe ([email protected]) left a new message');
+});
+
+it('can render a shorter mail when a name is missing', function () {
+    $allValues = formValues([
+            'name' => null,
+            'ip' => '1.2.3.4',
+            'userAgent' => 'my-browser',
+        ]);
+
+    $notification = new BubbleResponseNotification(...$allValues);
+
+    $html = (string)$notification->toMail(new AnonymousNotifiable())->render();
+
+    expect($html)->toContain('[email protected] left a new message');
 });