Update setup to show step by step before letting user submit everything

.gitignore

@@ -27,3 +27,4 @@ storage/migrations
 nbproject
 
 .php_cs.cache
+public/test.pdf

public/mix-manifest.json

@@ -15,6 +15,6 @@
     "/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",
     "/js/clients/shared/multiple-downloads.js": "/js/clients/shared/multiple-downloads.js?id=5c35d28cf0a3286e7c45",
     "/js/clients/shared/pdf.js": "/js/clients/shared/pdf.js?id=fa54bb4229aba6b0817c",
-    "/js/setup/setup.js": "/js/setup/setup.js?id=725362f2ed393909fc8b",
+    "/js/setup/setup.js": "/js/setup/setup.js?id=7ab6418738b4f4672cf1",
     "/css/card-js.min.css": "/css/card-js.min.css?id=62afeb675235451543ad"
 }

resources/js/setup/setup.js

@@ -31,7 +31,7 @@ class Setup {
         };
 
         Axios.post('/setup/check_db', data)
-            .then((response) => this.handleSuccess(this.checkDbAlert))
+            .then((response) => this.handleSuccess(this.checkDbAlert, 'mail-wrapper'))
             .catch((e) =>
                 this.handleFailure(this.checkDbAlert, e.response.data.message)
             );
@@ -55,6 +55,13 @@ class Setup {
 
         this.checkSmtpButton.disabled = true;
 
+        if (data.mail_driver === 'log') {
+            this.handleSuccess(this.checkSmtpAlert, 'account-wrapper');
+            this.handleSuccess(this.checkSmtpAlert, 'submit-wrapper');
+
+            return this.checkSmtpButton.disabled = false;
+        }
+
         Axios.post('/setup/check_mail', data)
             .then((response) => this.handleSuccess(this.checkSmtpAlert))
             .catch((e) =>
@@ -70,9 +77,9 @@ class Setup {
                     let win = window.open(response.data.url, '_blank');
                     win.focus();
 
-                    return this.handleSuccess(this.checkPdfAlert);
+                    return this.handleSuccess(this.checkPdfAlert, 'database-wrapper');
                 } catch (error) {
-                    this.handleSuccess(this.checkPdfAlert);
+                    this.handleSuccess(this.checkPdfAlert, 'database-wrapper');
                     this.checkPdfAlert.textContent = `Success! You can preview test PDF here: ${response.data.url}`;
                 }
             })
@@ -82,10 +89,15 @@ class Setup {
             });
     }
 
-    handleSuccess(element) {
+    handleSuccess(element, nextStep = null) {
         element.classList.remove('alert-failure');
         element.innerText = 'Success!';
         element.classList.add('alert-success');
+
+        if (nextStep) {
+            document.getElementById(nextStep).classList.remove('hidden');
+            document.getElementById(nextStep).scrollIntoView({behavior: 'smooth', block: 'center'});
+        }
     }
 
     handleFailure(element, message = null) {

resources/lang/en/texts.php

@@ -3326,4 +3326,6 @@ return [
     'custom_value4' => 'Custom Value',
     'inclusive_taxes' => 'Include taxes',
     'sort_order' => 'Sort Order',
+
+    'setup_steps_notice' => 'To proceed to next step, make sure you test each section.',
 ];

resources/views/setup/_account.blade.php

@@ -1,4 +1,4 @@
-<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="account-wrapper">
     <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
         <h3 class="text-lg leading-6 font-medium text-gray-900">
             {{ ctrans('texts.user_details') }}

resources/views/setup/_application.blade.php

@@ -22,7 +22,8 @@
                     {{ ctrans('texts.https') }}
                 </dt>
                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="checkbox" class="form-checkbox mr-1" name="https" {{ old('https') ? 'checked': '' }} checked>
+                    <input type="checkbox" class="form-checkbox mr-1" name="https"
+                           {{ old('https') ? 'checked': '' }} checked>
                     <span>{{ ctrans('texts.require') }}</span>
                     <span class="text-gray-600 text-xs ml-2">({{ ctrans('texts.recommended_in_production') }})</span>
                 </dd>
@@ -42,9 +43,11 @@
                     {{ ctrans('texts.reports') }}
                 </dt>
                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                    <input type="checkbox" class="form-checkbox mr-1" name="send_logs" {{ old('send_logs' ? 'checked': '') }}>
+                    <input type="checkbox" class="form-checkbox mr-1"
+                           name="send_logs" {{ old('send_logs' ? 'checked': '') }}>
                     <span>{{ ctrans('texts.send_fail_logs_to_our_server') }}</span>
-                    <a class="button-link mt-1 block" href="https://www.invoiceninja.com/privacy-policy/">Read more about how we use this.</a>
+                    <a class="button-link mt-1 block" href="https://www.invoiceninja.com/privacy-policy/">Read more
+                        about how we use this.</a>
                 </dd>
             </div>
             <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">

resources/views/setup/_database.blade.php

@@ -1,4 +1,4 @@
-<div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="database-wrapper">
     <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
         <h3 class="text-lg leading-6 font-medium text-gray-900">
             {{ ctrans('texts.database_connection') }}

resources/views/setup/_mail.blade.php

@@ -1,4 +1,4 @@
-<div class="bg-white shadow overflow-hidden rounded-lg mt-6" x-data="{ option: 'log' }">
+<div class="bg-white shadow overflow-hidden rounded-lg mt-6 hidden" id="mail-wrapper" x-data="{ option: 'log' }">
     <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
         <h3 class="text-lg leading-6 font-medium text-gray-900">
             {{ ctrans('texts.email_settings') }}
@@ -81,7 +81,7 @@
                     <input type="password" class="input w-full" name="mail_password">
                 </dd>
             </div>
-            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center" x-show="option != 'log'">
+            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:flex sm:items-center">
                 <dt class="text-sm leading-5 font-medium text-gray-500">
                     <button type="button" class="button button-primary bg-blue-600 py-2 px-3 text-xs" id="test-smtp-connection">
                         {{ ctrans('texts.send_test_email') }}

resources/views/setup/index.blade.php

@@ -51,7 +51,9 @@
                     @include('setup._mail')
                     @include('setup._account')
 
-                    <div class="flex justify-center mt-4">
+                    <p class="mt-4 text-sm">{{ ctrans('texts.setup_steps_notice') }}</p>
+
+                    <div class="flex justify-center mt-4 hidden" id="submit-wrapper">
                         <div class="flex flex-col">
                             <div class="mt-4 text-sm">
                                 <input type="checkbox" class="form-checkbox mr-2" name="terms_of_service" required>