Corrected a bug within mail_components config file.

Corrected components publish path within library Publisher helper. Added 'show' property to the Footer component. Updated README.md.
BJNSTNKVC · Oct 22, 2023 · 8cbb5a2 · 8cbb5a2
1 parent 19b8254
commit 8cbb5a2
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,8 @@ This will publish a `mail-components.css` to `resources/views/vendor/mail/html/t
 
 ### Theme
 
-If you like to render an email via [Markdown](https://laravel.com/docs/9.x/mail#markdown-mailables), you'll need to set Mailable `theme` property to `mail-components`.
+If you like to render an email via [Markdown](https://laravel.com/docs/9.x/mail#markdown-mailables), you'll need to set
+Mailable `theme` property to `mail-components`.
 
 ```php
     /**
@@ -90,13 +91,13 @@ In order to render the component, use the following syntax:
 
 List of all properties Header component accepts is as follows:
 
-| Property  | Description                                                      |
-|-----------|------------------------------------------------------------------|
+| Property  | Description                                                       |
+|-----------|-------------------------------------------------------------------|
 | app-url   | Header logo app url (defaults to `APP_URL` property from `.env`). |
-| logo      | Header logo (accepts image url or asset path as an argument).    |
-| width     | Header logo width.                                               |
-| height    | Header logo height.                                              |
-| show-logo | Determine whether to show Header Logo (defaults to `true`).      |
+| logo      | Header logo (accepts image url or asset path as an argument).     |
+| width     | Header logo width.                                                |
+| height    | Header logo height.                                               |
+| show-logo | Determine whether to show Header Logo (defaults to `true`).       |
 
 In order to render the component, use the following syntax:
 
@@ -116,16 +117,17 @@ If you'd like to add additional content to the header, use the following syntax:
 
 List of all properties Footer component accepts is as follows:
 
-| Property       | Description                                                         |
-|----------------|---------------------------------------------------------------------|
-| email          | Footer Email address.                                               |
-| country        | Footer country.                                                     |
-| state          | Footer state.                                                       |
-| city           | Footer city.                                                        |
-| address        | Footer street address.                                              |
-| zip            | Footer zip code.                                                    |
-| phone          | Footer phone number.                                                |
-| show-copyright | Determine whether to display Footer copyright (defaults to `true`). |
+| Property       | Description                                                             |
+|----------------|-------------------------------------------------------------------------|
+| email          | Footer Email address.                                                   |
+| country        | Footer country.                                                         |
+| state          | Footer state.                                                           |
+| city           | Footer city.                                                            |
+| address        | Footer street address.                                                  |
+| zip            | Footer zip code.                                                        |
+| phone          | Footer phone number.                                                    |
+| show           | Determine whether to display the Footer (defaults to `true`).           |
+| show-copyright | Determine whether to display the Footer copyright (defaults to `true`). |
 
 In order to render the component, use the following syntax:
 
@@ -319,10 +321,10 @@ In both cases, following table would be generated:
 
 Let's say we have users table with the following data:
 
-| id  | first_name | last_name | email                | email_verified_at   | created_at          | updated_at          | role_id |
-|-----|------------|-----------|----------------------|---------------------|---------------------|---------------------|---------|
-| 1   | John       | Doe       | john.doe@example.com | 2022-09-01 12:00:00 | 2022-09-30 22:00:00 | 2022-09-01 12:00:00 | 2       |
-| 2   | Jane       | Doe       | jane.doe@example.com | 2022-09-01 10:00:00 | 2022-09-30 23:00:00 | 2022-09-01 12:00:00 | 3       |
+| id | first_name | last_name | email                | email_verified_at   | created_at          | updated_at          | role_id |
+|----|------------|-----------|----------------------|---------------------|---------------------|---------------------|---------|
+| 1  | John       | Doe       | john.doe@example.com | 2022-09-01 12:00:00 | 2022-09-30 22:00:00 | 2022-09-01 12:00:00 | 2       |
+| 2  | Jane       | Doe       | jane.doe@example.com | 2022-09-01 10:00:00 | 2022-09-30 23:00:00 | 2022-09-01 12:00:00 | 3       |
 
 passed from the controller:
 
@@ -508,11 +510,13 @@ class VerifyEmail extends Mailable
     }
 }
 ```
-Next step would be to create a [view](https://laravel.com/docs/9.x/mail#configuring-the-view). For this example, we'll create `verify-email.blade.php` file in `resources/views/emails` directory.
+
+Next step would be to create a [view](https://laravel.com/docs/9.x/mail#configuring-the-view). For this example, we'll
+create `verify-email.blade.php` file in `resources/views/emails` directory.
 
 Finally, we'll use Mail Components to create an HTML for aforementioned email.
 
-Let's start with creating our basic Layout with Header and Footer. Blade syntax below: 
+Let's start with creating our basic Layout with Header and Footer. Blade syntax below:
 
 ```blade
 <x-mail::layout title="Verify Email">
@@ -550,7 +554,7 @@ which will generate following HTML:
 
 ![Verify Email Example 2](docs/images/Example%202.png)
 
-We'll add a Subcopy with verification link as a string in case the user has trouble verifying an email via button. 
+We'll add a Subcopy with verification link as a string in case the user has trouble verifying an email via button.
 
 ```blade
 <x-mail::layout title="Verify Email">
@@ -590,7 +594,8 @@ now, our email looks as follows:
 
 
 - **layout** - *Array containing Mail Components Layout settings.*
-    - **font_link** - *Font link that the Mail Components will use. (E.g. https://fonts.googleapis.com/css2?family=Roboto&display=swap).*
+    - **font_link** - *Font link that the Mail Components will use. (
+      E.g. https://fonts.googleapis.com/css2?family=Roboto&display=swap).*
     - **font_family** - *Font family name (E.g. Roboto).*
     - **background** - *Layout Component background color.*
 
@@ -604,7 +609,8 @@ now, our email looks as follows:
 
 - **footer** - *Array containing Mail Components Footer settings.*
     - **show** - *Determines whether the Footer Mail Component will be visible (defaults to `true`).*
-    - **show_copyright** - *Determines whether the Footer Mail Component copyright line will be visible (defaults to `true`).*
+    - **show_copyright** - *Determines whether the Footer Mail Component copyright line will be visible (defaults
+      to `true`).*
     - **address** - *Street address of your business.*
     - **city** - *City of your business.*
     - **state** - *State of your business.*
@@ -618,7 +624,8 @@ now, our email looks as follows:
 
 - **grid** - *Array containing Mail Components Grid settings.*
     - **background** - *Grid Component background color.*
-    - **spacing** - *Renders spacing between Grid and other components (options: `none`, `top`, `bottom`, `top, bottom`).*
+    - **spacing** - *Renders spacing between Grid and other components (
+      options: `none`, `top`, `bottom`, `top, bottom`).*
 
 
 - **hero** - *Array containing Mail Components Hero settings.*
@@ -651,7 +658,6 @@ now, our email looks as follows:
     - **height** - *New Line height (defaults to `16`).*
     - **background** - *New Line background color*
 
-
 > **Note:** You might need to clear config cache using `php artisan cache:clear` command after you make changes
 > to `.env` file.
 

diff --git a/src/Helpers/Publisher.php b/src/Helpers/Publisher.php
@@ -75,13 +75,13 @@ class Publisher
 
     public function __construct()
     {
-        $this->classRoot          = __DIR__ . '\..\Views\Components\Mail\\';
+        $this->classRoot          = __DIR__ . '\..\View\Components\Mail\\';
         $this->viewsRoot          = __DIR__ . '\..\resources\views\components\mail\\';
         $this->configPath         = config_path('mail_components.php');
         $this->viewPath           = resource_path('views\components\mail\\');
-        $this->defaultNamespace   = 'Bjnstnkvc\MailComponents\Views\Components\Mail';
+        $this->defaultNamespace   = 'Bjnstnkvc\MailComponents\View\Components\Mail';
         $this->publishedNamespace = 'App\View\Components\Form';
-        $this->defaultPath        = 'Bjnstnkvc\MailComponents\Views\Components\Mail\\';
+        $this->defaultPath        = 'Bjnstnkvc\MailComponents\View\Components\Mail\\';
         $this->publishedPath      = 'App\View\Components\Form\\';
         $this->defaultBlade       = 'mail-components::mail.';
         $this->publishedBlade     = 'components.mail.';

diff --git a/src/View/Components/Mail/Footer.php b/src/View/Components/Mail/Footer.php
@@ -44,7 +44,12 @@ class Footer extends Component
     public $phone;
 
     /**
-     * @var bool Determine whether to display Footer copyright.
+     * @var bool Determine whether to display the Footer.
+     */
+    public $show;
+
+    /**
+     * @var bool Determine whether to display the Footer copyright.
      */
     public $showCopyright;
 
@@ -53,7 +58,7 @@ class Footer extends Component
      *
      * @return void
      */
-    public function __construct($email = null, $country = null, $state = null, $city = null, $address = null, $zip = null, $phone = null, $showCopyright = null)
+    public function __construct($email = null, $country = null, $state = null, $city = null, $address = null, $zip = null, $phone = null, $show = null, $showCopyright = null)
     {
         $this->email         = $email ?: config('mail_components.footer.email');
         $this->country       = $country ?: config('mail_components.footer.country');
@@ -62,6 +67,7 @@ public function __construct($email = null, $country = null, $state = null, $city
         $this->address       = $address ?: config('mail_components.footer.address');
         $this->zip           = $zip ?: config('mail_components.footer.zip');
         $this->phone         = $phone ?: config('mail_components.footer.phone');
+        $this->show          = filter_var($show ?: config('mail_components.footer.show'), FILTER_VALIDATE_BOOLEAN);
         $this->showCopyright = filter_var($showCopyright ?: config('mail_components.footer.show_copyright'), FILTER_VALIDATE_BOOLEAN);
     }
 

diff --git a/src/config/mail_components.php b/src/config/mail_components.php
@@ -46,7 +46,7 @@
     'header'     => [
 		'show'    => true,
         'app_url' => config('app.url'),
-        'logo'    => 'https://via.placeholder.com/100x100',,
+        'logo'    => 'https://via.placeholder.com/100x100',
         'width'   => 75,
         'height'  => 75,
     ],
@@ -55,11 +55,11 @@
     'footer'     => [
         'show'           => true,
         'show_copyright' => true,
-        'address'        => 'Address',
-        'city'           => 'City',
-        'state'          => 'State',
-        'zip'            => 'Zip',
-        'phone'          => 'Phone',
+        'address'        => null,
+        'city'           => null,
+        'state'          => null,
+        'zip'            => null,
+        'phone'          => null,
     ],
 
     // Mail Content component settings.

diff --git a/src/resources/views/components/mail/footer.blade.php b/src/resources/views/components/mail/footer.blade.php
@@ -1,46 +1,48 @@
-<tr>
-    <td align="center" valign="top">
-        <table class="footer" width="100%" cellpadding="0" cellspacing="0" border="0">
-            <x-mail::new-line />
-
-            @if($slot != '')
-                <x-mail::content>
-                    {{ $slot }}
-                </x-mail::content>
-
-                <x-mail::new-line />
-            @endif
-
-            @if($email)
-                <x-mail::content>
-                    <a href="mailto:{{ $email }}">{{ $email }}</a>
-                </x-mail::content>
-            @endif
-
-            @if($address || $city || $zip || $state || $phone)
-                <x-mail::content>
-
-                    <a href="{{ 'https://www.google.com/maps/place/' . urlencode(($address ? $address . ', ' : '') . ' ' . ($city ? $city . ', ' : '') . $zip) }}">{{ ($address ?: '') . ($address && ($city || $state || $zip) ? ', ' : '') . ($city ?: '') . ($city && ($state || $zip) ? ', ' : '') . ($state ?: '') . ($state && $zip ? ' ' : '') . $zip }}</a>
-
-                    @if($phone)
-                        @if($address || $city || $zip || $state)
-                            •
+@if($show)
+    <tr>
+        <td align="center" valign="top">
+            <table class="footer" width="100%" cellpadding="0" cellspacing="0" border="0">
+                <x-mail::new-line/>
+
+                @if($slot != '')
+                    <x-mail::content>
+                        {{ $slot }}
+                    </x-mail::content>
+
+                    <x-mail::new-line/>
+                @endif
+
+                @if($email)
+                    <x-mail::content>
+                        <a href="mailto:{{ $email }}">{{ $email }}</a>
+                    </x-mail::content>
+                @endif
+
+                @if($address || $city || $zip || $state || $phone)
+                    <x-mail::content>
+
+                        <a href="{{ 'https://www.google.com/maps/place/' . urlencode(($address ? $address . ', ' : '') . ' ' . ($city ? $city . ', ' : '') . $zip) }}">{{ ($address ?: '') . ($address && ($city || $state || $zip) ? ', ' : '') . ($city ?: '') . ($city && ($state || $zip) ? ', ' : '') . ($state ?: '') . ($state && $zip ? ' ' : '') . $zip }}</a>
+
+                        @if($phone)
+                            @if($address || $city || $zip || $state)
+                                •
+                            @endif
+                            <a href="tel:{{ preg_replace('/[^[:digit:]]/', '', $phone) }}}">{{ $phone }}</a>
                         @endif
-                        <a href="tel:{{ preg_replace('/[^[:digit:]]/', '', $phone) }}}">{{ $phone }}</a>
-                    @endif
 
-                </x-mail::content>
-            @endif
+                    </x-mail::content>
+                @endif
 
-            @if($showCopyright)
-                <x-mail::new-line />
+                @if($showCopyright)
+                    <x-mail::new-line/>
 
-                <x-mail::content>
-                    Copyright © {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
-                </x-mail::content>
-            @endif
+                    <x-mail::content>
+                        Copyright © {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
+                    </x-mail::content>
+                @endif
 
-            <x-mail::new-line />
-        </table>
-    </td>
-</tr>
+                <x-mail::new-line/>
+            </table>
+        </td>
+    </tr>
+@endif
diff --git a/src/resources/views/vendor/mail/html/themes/mail-components.css b/src/resources/views/vendor/mail/html/themes/mail-components.css
@@ -148,7 +148,7 @@ table {
 .table {
     display   : inline-block;
     overflow  : auto;
-    /*width     : 100%;*/
+    width     : calc(100vw - 16px);
     max-width : 600px;
 }