Merge branch 'dillon/44-customer-satisfaction-feedback-project' into dillon/44-customer-satisfaction-feedback-project-b

app/Classes/General/Eloquent/Filters/ShortUrl.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+
+class ShortUrl implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->where('short_url', $value);
+    }
+
+}

app/Classes/Modules/HelpMenu/ControllersLogic/GenerateFeedbackUrlLogic.php

@@ -4,11 +4,14 @@ namespace App\Classes\Modules\HelpMenu\ControllersLogic;
 
 
 use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\HelpMenu\DataTransferObjects\UrlObject;
 use App\Classes\Modules\HelpMenu\Standards\Rules\CanGenerateFeedbackUrl;
+use App\Classes\Modules\HelpMenu\Services\CreatesUrl;
 use ErrorException;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Crypt;
+use Illuminate\Support\Str;
 
 class GenerateFeedbackUrlLogic extends AbstractControllerLogic
 {
@@ -26,14 +29,18 @@ class GenerateFeedbackUrlLogic extends AbstractControllerLogic
     /** @var CanGenerateFeedbackUrl */
     private $canGenerateFeedbackUrl;
 
+    /** @var CreatesUrl */
+    private $createsUrl;
 
     /**
      * GenerateFeedbackUrlLogic constructor.
      * @param CanGenerateFeedbackUrl $canGenerateFeedbackUrl
+     * @param CreatesUrl $createsUrl
      */
-    public function __construct(CanGenerateFeedbackUrl $canGenerateFeedbackUrl)
+    public function __construct(CanGenerateFeedbackUrl $canGenerateFeedbackUrl, CreatesUrl $createsUrl)
     {
         $this->canGenerateFeedbackUrl = $canGenerateFeedbackUrl;
+        $this->createsUrl = $createsUrl;
     }
 
 
@@ -46,8 +53,14 @@ class GenerateFeedbackUrlLogic extends AbstractControllerLogic
     {
         $this->canGenerateFeedbackUrl->passes();
 
-        $originalText = $request->input('system') . '|' . $request->input('customer_marking'). '|' . $request->input('email'). '|' . $request->input('question_set');
-        $resource =  ['token' => Crypt::encryptString($originalText)];
+        $shortUrl = Str::random(20);
+        $originalText = $request->input('system') . '|' . $request->input('customer_marking'). '|' . $request->input('email'). '|' . $request->input('question_set') . '|' . $shortUrl;
+        $originalUrl =  Crypt::encryptString($originalText);
+
+
+        $url = $this->createsUrl->execute(new UrlObject('feedback', $shortUrl, $originalUrl));
+        $resource = ['token' => $url->short_url];
+
         return $this->response(['data' => $resource]);
     }
 

app/Classes/Modules/HelpMenu/ControllersLogic/ListQuestionsQALogic.php

@@ -5,6 +5,7 @@ namespace App\Classes\Modules\HelpMenu\ControllersLogic;
 
 use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\HelpMenu\Services\ListsHelpMenuQuestions;
+use App\Classes\Modules\HelpMenu\Services\FetchesUrl;
 use App\Http\Resources\HelpMenuQuestionResource;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -27,13 +28,18 @@ class ListQuestionsQALogic extends AbstractControllerLogic
     /** @var ListsHelpMenuQuestions */
     private $listsHelpMenuQuestions;
 
+    /** @var FetchesUrl */
+    private $fetchesUrl;
+
     /**
      * ListQuestionsQALogic constructor.
      * @param ListsHelpMenuQuestions $listsHelpMenuQuestions
+     * @param FetchesUrl $fetchesUrl
      */
-    public function __construct(ListsHelpMenuQuestions $listsHelpMenuQuestions)
+    public function __construct(ListsHelpMenuQuestions $listsHelpMenuQuestions, FetchesUrl $fetchesUrl)
     {
         $this->listsHelpMenuQuestions = $listsHelpMenuQuestions;
+        $this->fetchesUrl = $fetchesUrl;
     }
 
 
@@ -47,17 +53,14 @@ class ListQuestionsQALogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
-        try{
-            $token = $request->input('token');
-            $decriptedToken = Crypt::decryptString($token);
-            $delimiter = "|";
-            $parts = explode($delimiter, $decriptedToken);
-            $questionSet = $parts[3];
-            $query = $this->listsHelpMenuQuestions->execute(['questionnaire_set_id' => $questionSet]);
-            return $this->collectionResponse(HelpMenuQuestionResource::collection($query));
-        } catch(\Exception $exception){
-            throw new ResourceNotFoundException($exception->getMessage());
-        }
+        $url = $this->fetchesUrl->execute(['short_url' => $request->input('token')]);
+        $token = $url->original_url;
+        $decriptedToken = Crypt::decryptString($token);
+        $delimiter = "|";
+        $parts = explode($delimiter, $decriptedToken);
+        $questionSet = $parts[3];
+        $query = $this->listsHelpMenuQuestions->execute(['questionnaire_set_id' => $questionSet]);
+        return $this->collectionResponse(HelpMenuQuestionResource::collection($query));
     }
 
 }

app/Classes/Modules/HelpMenu/ControllersLogic/SubmitQAQuestionsLogic.php

@@ -5,6 +5,7 @@ namespace App\Classes\Modules\HelpMenu\ControllersLogic;
 use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\HelpMenu\Processors\SaveAnswerProcessor;
 use App\Classes\Modules\HelpMenu\Processors\UserSourceForQAProcessor;
+use App\Classes\Modules\HelpMenu\Services\FetchesUrl;
 use ErrorException;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -30,15 +31,20 @@ class SubmitQAQuestionsLogic extends AbstractControllerLogic
     /** @var UserSourceForQAProcessor */
     private $userSourceForQAProcessor;
 
+    /** @var FetchesUrl */
+    private $fetchesUrl;
+
     /**
      * SubmitQAQuestionsLogic constructor.
      * @param SaveAnswerProcessor $saveAnswerProcessor
      * @param UserSourceForQAProcessor $userSourceForQAProcessor
+     * @param FetchesUrl $fetchesUrl
      */
-    public function __construct(SaveAnswerProcessor $saveAnswerProcessor, UserSourceForQAProcessor $userSourceForQAProcessor)
+    public function __construct(SaveAnswerProcessor $saveAnswerProcessor, UserSourceForQAProcessor $userSourceForQAProcessor, FetchesUrl $fetchesUrl)
     {
         $this->saveAnswerProcessor = $saveAnswerProcessor;
         $this->userSourceForQAProcessor = $userSourceForQAProcessor;
+        $this->fetchesUrl = $fetchesUrl;
     }
 
 
@@ -49,11 +55,14 @@ class SubmitQAQuestionsLogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
-        $token = $request->input('token');
+        $originalToken = '';
+        $shortToken = $request->input('token');
         $userId = 0;
         $sourceId = 0;
         try {
-            $decriptedToken = Crypt::decryptString($token);
+            $url = $this->fetchesUrl->execute(['short_url' => $shortToken]);
+            $originalToken = $url->original_url;
+            $decriptedToken = Crypt::decryptString($originalToken);
             $delimiter = "|";
             $parts = explode($delimiter, $decriptedToken);
             $system = $parts[0];
@@ -71,7 +80,7 @@ class SubmitQAQuestionsLogic extends AbstractControllerLogic
         $answers = $request->input('answers');
         foreach ($answers as $answer) {
             $filesUpload = $request->input('files');
-            $this->saveAnswerProcessor->execute($userId, $sourceId, $answer['questionId'], $answer['answer'], $answer['answerId'], $filesUpload);
+            $this->saveAnswerProcessor->execute($userId, $sourceId, $answer['questionId'], $answer['answer'], $answer['answerId'], $filesUpload, $shortToken);
         }
 
         $response =  ['message' => 'Thank you for your feedback.'];

app/Classes/Modules/HelpMenu/DataTransferObjects/UrlObject.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Classes\Modules\HelpMenu\DataTransferObjects;
+
+use App\Classes\General\Interfaces\DataTransferObject;
+
+class UrlObject implements DataTransferObject
+{
+    /** @var string */
+    private $type;
+
+    /** @var string */
+    private $shortUrl;
+
+    /** @var string */
+    private $originalUrl;
+
+    /**
+     * UrlObject constructor.
+     * @param string $type
+     * @param string $shortUrl
+     * @param string $originalUrl
+     */
+    public function __construct(string $type, string $shortUrl, string $originalUrl)
+    {
+        $this->type = $type;
+        $this->shortUrl = $shortUrl;
+        $this->originalUrl = $originalUrl;
+    }
+
+    /**
+     * @return string
+     */
+    public function getType(): string
+    {
+        return $this->type;
+    }
+
+    /**
+     * @return string
+     */
+    public function getShortUrl(): string
+    {
+        return $this->shortUrl;
+    }
+
+    /**
+     * @return string
+     */
+    public function getOriginalUrl(): string
+    {
+        return $this->originalUrl;
+    }
+
+}

app/Classes/Modules/HelpMenu/Processors/SaveAnswerProcessor.php

@@ -26,7 +26,7 @@ class SaveAnswerProcessor
         $this->uploadDocumentForHelpMenuProcessor = $uploadDocumentForHelpMenuProcessor;
     }
 
-    public function execute($userId, $sourceId, $questionId, $answerInText, $answerOptionId, $filesUpload){
+    public function execute($userId, $sourceId, $questionId, $answerInText, $answerOptionId, $filesUpload, $reference = null){
 
         $answer = null;
         // try{
@@ -45,6 +45,9 @@ class SaveAnswerProcessor
         $answer->question_id = $questionId;
         $answer->answer_option_id = intval($answerOptionId);
         $answer->free_text_answer = $answerInText;
+        if($reference){
+            $answer->reference = $reference;
+        }
         $answer->save();
 
         if($filesUpload){

app/Classes/Modules/HelpMenu/Services/CreatesUrl.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Classes\Modules\HelpMenu\Services;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\Modules\HelpMenu\DataTransferObjects\UrlObject;
+use App\Models\Url;
+
+class CreatesUrl extends AbstractUpdateRecord
+{
+    /**
+     * @param UrlObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(UrlObject $object) {
+        $model = new Url();
+        $model->type = $object->getType();
+        $model->short_url = $object->getShortUrl();
+        $model->original_url = $object->getOriginalUrl();
+
+        return $this->handler($model);
+
+    }
+}

app/Classes/Modules/HelpMenu/Services/FetchesUrl.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Classes\Modules\HelpMenu\Services;
+
+use App\Classes\General\Eloquent\AbstractFetchRecord;
+use App\Models\Url;
+use Illuminate\Database\Eloquent\Builder;
+
+class FetchesUrl extends AbstractFetchRecord
+{
+
+    /** @var Url */
+    private $repository;
+
+    /**
+     * FetchesUrl constructor.
+     * @param Url $repository
+     */
+    public function __construct(Url $repository)
+    {
+        $this->repository = $repository;
+    }
+
+
+    /**
+     * @return Builder
+     */
+    public function getRepository(): Builder
+    {
+        return $this->repository->newQuery();
+    }
+}

app/Classes/Modules/PerfexCRM/Processors/TransactionToPerfexCRMV2Processor.php

@@ -119,13 +119,13 @@ class TransactionToPerfexCRMV2Processor
     }
 
 
-    private function definePaymentTasks(Transaction $model): array //cief todo: to comfirm what tasks need to be created
+    private function definePaymentTasks(Transaction $model): array //cief todo: to comfirm what tasks need to be created at crm
     {
         $tasks = [];
         return $tasks;
     }
 
-    private function defineTasks_handleApprovedStatus_handlePaymentApprovedStatus(): array //cief todo: to comfirm what tasks need to be created
+    private function defineTasks_handleApprovedStatus_handlePaymentApprovedStatus(): array //cief todo: to comfirm what tasks need to be created at crm
     {
         $tasks = [];
         // $tasks = [

app/Classes/Modules/PerfexCRM/Services/CreatesPerfexCRMSupportTicket.php

@@ -37,7 +37,9 @@ class CreatesPerfexCRMSupportTicket
                 return null;
             }
         }catch(\Exception $exception){
-            throw new MalformedRequestException('Unable to get correct response from Perfex CRM server: ' . $exception->getMessage());
+            $error = 'Support Ticket creation failed: ' . $exception->getMessage();
+            Log::error($error.'\nPayload to create ticket: '.json_encode($data));
+            throw new MalformedRequestException($error);
         }
     }
 }

app/Classes/Modules/Transactions/ControllersLogic/CreatePaymentTransactionLogic.php

@@ -47,7 +47,7 @@ class CreatePaymentTransactionLogic extends AbstractControllerLogic
 
         $payment_transaction = $this->createPaymentTransactionProcessor->execute($invoice_transaction, $payment_method , $request->input('bank_code'));
 
-        //cief todo: at exchange there is a transition step
+        //cief todo: at exchange there is a transition step - starts
         // if(PaymentMethodType::PAYMENT_METHODS[$request->input('payment_method')] == PaymentMethodType::PAYMENT_GATEWAY){
         //     $this->updatesTransactionStatus->execute($transaction, ApprovalStatus::PENDING_VERIFICATION);
         // }
@@ -59,7 +59,7 @@ class CreatePaymentTransactionLogic extends AbstractControllerLogic
         //To use
         //ApprovalStatus::PENDING_VERIFICATION;
         //use this to trigger  $this->transactionToPerfexCRMV2Processor->execute > defineTasks > defineTasks_handlePendingVerificationStatus > definePaymentTasks
-
+        //cief todo: at exchange there is a transition step - ends
 
         return $this->resourceResponse(new TransactionResource($payment_transaction));
     }

app/Models/Url.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace App\Models;
+
+
+class Url extends AbstractModel
+{
+	protected $table = 'urls';
+}

database/migrations/2023_09_19_164120_create_qa_user_answer_selected_table.php

@@ -20,6 +20,7 @@ class CreateQAUserAnswerSelectedTable extends Migration
             $table->unsignedBigInteger('question_id');
             $table->unsignedBigInteger('answer_option_id')->default(0);
             $table->string('free_text_answer')->nullable();
+            $table->string('reference')->nullable();
             $table->timestamps();
             $table->softDeletes();
 

database/migrations/2023_10_03_230901_create_urls_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUrlsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('urls', function (Blueprint $table) {
+            $table->id();
+            $table->string('type');
+            $table->string('short_url');
+            $table->text('original_url');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('urls');
+    }
+}

resources/assets/vue/components/feedback/forms/FeedbackFormComponent.vue

@@ -20,16 +20,21 @@
                                 <div v-html="ans.display_text"></div>
                             </div>
                         </div>
-                        <div class="row m-b-10" v-else-if="questions[index].question_type === 1" >
-                            <div class="col" >
-                                <validation-wrapper-component :validator="$v.answers.$each[index]" class="col">
-                                    <div class="col" v-for="ans in questions[index].question_answers">
-                                        <div :class="'col question-answers-' + index">
-                                            <div class="btn btn-xs btn-block" :answerValue="ans.value" :answerId=ans.id @click="addClass($event, 'question-answers-' + index, index)">{{ ans.display_text }}</div>
-                                        </div>
-                                    </div>
-                                </validation-wrapper-component>
+                        <div class="row m-b-25" v-else-if="questions[index].question_type === 1" >
+                            <div class="col" v-for="ans in questions[index].question_answers">
+                                <div :class="'question-answers-' + index">
+                                    <div class="btn btn-xs btn-block p-t-35 p-b-35 fs-16" :answerValue="ans.value" :answerId=ans.id @click="addClass($event, 'question-answers-' + index, index)">{{ ans.display_text }}</div>
+                                </div>
                             </div>
+<!--                            <div class="col" >-->
+<!--                                <validation-wrapper-component :validator="$v.answers.$each[index]" class="row">-->
+<!--                                    <div class="col" v-for="ans in questions[index].question_answers">-->
+<!--                                        <div :class="'question-answers-' + index">-->
+<!--                                            <div class="btn btn-xs btn-block p-t-35 p-b-35 fs-16" :answerValue="ans.value" :answerId=ans.id @click="addClass($event, 'question-answers-' + index, index)">{{ ans.display_text }}</div>-->
+<!--                                        </div>-->
+<!--                                    </div>-->
+<!--                                </validation-wrapper-component>-->
+<!--                            </div>-->
                         </div>
 
                         <div class="row m-b-10" v-else-if="questions[index].question_type === 6" >
@@ -64,8 +69,8 @@
                     </div>
                 </div>
                 <div class="row" v-if="!$store.getters.isLoading(section)">
-                    <div class="col">
-                        <div class="btn btn-sm btn-primary btn-block b-rad-none" :disabled="!$v.$dirty || !$v.$valid" @click="formTouched = true; submitForm()">Submit</div>
+                    <div class="col text-center">
+                        <div class="btn btn-lg btn-info b-rad-none padding-25 w-50 fs-20" :disabled="!$v.$dirty || !$v.$valid" @click="formTouched = true; submitForm()">Submit Feedback</div>
                     </div>
                 </div>
             </div>
@@ -125,7 +130,7 @@
                 this.answers[index].answer = div.getAttribute('answerValue');
                 this.answers[index].answerId = div.getAttribute('answerId');
                 this.removeClass(cls);
-                div.classList.add('btn-primary');
+                div.classList.add('btn-success');
             },
             setRating(value, index) {
                 this.answers[index].answer = value;
@@ -133,9 +138,9 @@
             },
             removeClass(cls) {
                 document.getElementsByClassName(cls).forEach(el => {
-                    const btnPrimaryEl = el.getElementsByClassName('btn-primary')[0];
+                    const btnPrimaryEl = el.getElementsByClassName('btn-success')[0];
                     if (btnPrimaryEl) {
-                        btnPrimaryEl.classList.remove('btn-primary');
+                        btnPrimaryEl.classList.remove('btn-success');
                     }
                 });
             },

resources/assets/vue/components/feedback/sections/FeedbackCustomerSectionComponent.vue

@@ -46,6 +46,11 @@
             successHandler(response){
                 this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                 this.questions = response.payload.data;
+            },
+            errorHandler(error, status){
+                if(status == 404){
+                    window.location.href = this.route('error.404');
+                }
             }
         }
     }

resources/assets/vue/components/general/forms/HelpMenuFormComponent.vue

@@ -175,7 +175,7 @@
                                 let payload = [];
                                 payload.push(result);
                                 $crisp.push(["set", "session:data", payload]);
-                                $crisp.push(["do", "message:send", ["text", "Hello there!"]]);
+                                $crisp.push(["do", "message:send", ["text", "Hello there!"]]); //cief todo: need to update what message to send from customer to operator
                                 this.closeModal();
                                 this.reset();
                                 this.fetchFirstQuestion();

resources/views/errors/404.blade.php

@@ -0,0 +1,5 @@
+@extends('errors::illustrated-layout')
+
+@section('title', __('Not Found'))
+@section('code', '404')
+@section('message', __('Not Found'))

resources/views/errors/illustrated-layout.blade.php

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <title>@yield('title')</title>
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
+
+        <!-- Styles -->
+        <style>
+            html {
+                line-height: 1.15;
+                    -ms-text-size-adjust: 100%;
+                -webkit-text-size-adjust: 100%;
+            }
+
+            body {
+                margin: 0;
+            }
+
+            header,
+            nav,
+            section {
+                display: block;
+            }
+
+            figcaption,
+            main {
+                display: block;
+            }
+
+            a {
+                background-color: transparent;
+                -webkit-text-decoration-skip: objects;
+            }
+
+            strong {
+                font-weight: inherit;
+            }
+
+            strong {
+                font-weight: bolder;
+            }
+
+            code {
+                font-family: monospace, monospace;
+                font-size: 1em;
+            }
+
+            dfn {
+                font-style: italic;
+            }
+
+            svg:not(:root) {
+                overflow: hidden;
+            }
+
+            button,
+            input {
+                font-family: sans-serif;
+                font-size: 100%;
+                line-height: 1.15;
+                margin: 0;
+            }
+
+            button,
+            input {
+                overflow: visible;
+            }
+
+            button {
+                text-transform: none;
+            }
+
+            button,
+            html [type="button"],
+            [type="reset"],
+            [type="submit"] {
+                -webkit-appearance: button;
+            }
+
+            button::-moz-focus-inner,
+            [type="button"]::-moz-focus-inner,
+            [type="reset"]::-moz-focus-inner,
+            [type="submit"]::-moz-focus-inner {
+                border-style: none;
+                padding: 0;
+            }
+
+            button:-moz-focusring,
+            [type="button"]:-moz-focusring,
+            [type="reset"]:-moz-focusring,
+            [type="submit"]:-moz-focusring {
+                outline: 1px dotted ButtonText;
+            }
+
+            legend {
+                -webkit-box-sizing: border-box;
+                        box-sizing: border-box;
+                color: inherit;
+                display: table;
+                max-width: 100%;
+                padding: 0;
+                white-space: normal;
+            }
+
+            [type="checkbox"],
+            [type="radio"] {
+                -webkit-box-sizing: border-box;
+                        box-sizing: border-box;
+                padding: 0;
+            }
+
+            [type="number"]::-webkit-inner-spin-button,
+            [type="number"]::-webkit-outer-spin-button {
+                height: auto;
+            }
+
+            [type="search"] {
+                -webkit-appearance: textfield;
+                outline-offset: -2px;
+            }
+
+            [type="search"]::-webkit-search-cancel-button,
+            [type="search"]::-webkit-search-decoration {
+                -webkit-appearance: none;
+            }
+
+            ::-webkit-file-upload-button {
+                -webkit-appearance: button;
+                font: inherit;
+            }
+
+            menu {
+                display: block;
+            }
+
+            canvas {
+                display: inline-block;
+            }
+
+            template {
+                display: none;
+            }
+
+            [hidden] {
+                display: none;
+            }
+
+            html {
+                -webkit-box-sizing: border-box;
+                        box-sizing: border-box;
+                font-family: sans-serif;
+            }
+
+            *,
+            *::before,
+            *::after {
+                -webkit-box-sizing: inherit;
+                        box-sizing: inherit;
+            }
+
+            p {
+                margin: 0;
+            }
+
+            button {
+                background: transparent;
+                padding: 0;
+            }
+
+            button:focus {
+                outline: 1px dotted;
+                outline: 5px auto -webkit-focus-ring-color;
+            }
+
+            *,
+            *::before,
+            *::after {
+                border-width: 0;
+                border-style: solid;
+                border-color: #dae1e7;
+            }
+
+            button,
+            [type="button"],
+            [type="reset"],
+            [type="submit"] {
+                border-radius: 0;
+            }
+
+            button,
+            input {
+                font-family: inherit;
+            }
+
+            input::-webkit-input-placeholder {
+                color: inherit;
+                opacity: .5;
+            }
+
+            input:-ms-input-placeholder {
+                color: inherit;
+                opacity: .5;
+            }
+
+            input::-ms-input-placeholder {
+                color: inherit;
+                opacity: .5;
+            }
+
+            input::placeholder {
+                color: inherit;
+                opacity: .5;
+            }
+
+            button,
+            [role=button] {
+                cursor: pointer;
+            }
+
+            .bg-transparent {
+                background-color: transparent;
+            }
+
+            .bg-white {
+                background-color: #fff;
+            }
+
+            .bg-teal-light {
+                background-color: #64d5ca;
+            }
+
+            .bg-blue-dark {
+                background-color: #2779bd;
+            }
+
+            .bg-indigo-light {
+                background-color: #7886d7;
+            }
+
+            .bg-purple-light {
+                background-color: #a779e9;
+            }
+
+            .bg-no-repeat {
+                background-repeat: no-repeat;
+            }
+
+            .bg-cover {
+                background-size: cover;
+            }
+
+            .border-grey-light {
+                border-color: #dae1e7;
+            }
+
+            .hover\:border-grey:hover {
+                border-color: #b8c2cc;
+            }
+
+            .rounded-lg {
+                border-radius: .5rem;
+            }
+
+            .border-2 {
+                border-width: 2px;
+            }
+
+            .hidden {
+                display: none;
+            }
+
+            .flex {
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+            }
+
+            .items-center {
+                -webkit-box-align: center;
+                    -ms-flex-align: center;
+                        align-items: center;
+            }
+
+            .justify-center {
+                -webkit-box-pack: center;
+                    -ms-flex-pack: center;
+                        justify-content: center;
+            }
+
+            .font-sans {
+                font-family: Nunito, sans-serif;
+            }
+
+            .font-light {
+                font-weight: 300;
+            }
+
+            .font-bold {
+                font-weight: 700;
+            }
+
+            .font-black {
+                font-weight: 900;
+            }
+
+            .h-1 {
+                height: .25rem;
+            }
+
+            .leading-normal {
+                line-height: 1.5;
+            }
+
+            .m-8 {
+                margin: 2rem;
+            }
+
+            .my-3 {
+                margin-top: .75rem;
+                margin-bottom: .75rem;
+            }
+
+            .mb-8 {
+                margin-bottom: 2rem;
+            }
+
+            .max-w-sm {
+                max-width: 30rem;
+            }
+
+            .min-h-screen {
+                min-height: 100vh;
+            }
+
+            .py-3 {
+                padding-top: .75rem;
+                padding-bottom: .75rem;
+            }
+
+            .px-6 {
+                padding-left: 1.5rem;
+                padding-right: 1.5rem;
+            }
+
+            .pb-full {
+                padding-bottom: 100%;
+            }
+
+            .absolute {
+                position: absolute;
+            }
+
+            .relative {
+                position: relative;
+            }
+
+            .pin {
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+            }
+
+            .text-black {
+                color: #22292f;
+            }
+
+            .text-grey-darkest {
+                color: #3d4852;
+            }
+
+            .text-grey-darker {
+                color: #606f7b;
+            }
+
+            .text-2xl {
+                font-size: 1.5rem;
+            }
+
+            .text-5xl {
+                font-size: 3rem;
+            }
+
+            .uppercase {
+                text-transform: uppercase;
+            }
+
+            .antialiased {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+
+            .tracking-wide {
+                letter-spacing: .05em;
+            }
+
+            .w-16 {
+                width: 4rem;
+            }
+
+            .w-full {
+                width: 100%;
+            }
+
+            @media (min-width: 768px) {
+                .md\:bg-left {
+                    background-position: left;
+                }
+
+                .md\:bg-right {
+                    background-position: right;
+                }
+
+                .md\:flex {
+                    display: -webkit-box;
+                    display: -ms-flexbox;
+                    display: flex;
+                }
+
+                .md\:my-6 {
+                    margin-top: 1.5rem;
+                    margin-bottom: 1.5rem;
+                }
+
+                .md\:min-h-screen {
+                    min-height: 100vh;
+                }
+
+                .md\:pb-0 {
+                    padding-bottom: 0;
+                }
+
+                .md\:text-3xl {
+                    font-size: 1.875rem;
+                }
+
+                .md\:text-15xl {
+                    font-size: 9rem;
+                }
+
+                .md\:w-1\/2 {
+                    width: 50%;
+                }
+            }
+
+            @media (min-width: 992px) {
+                .lg\:bg-center {
+                    background-position: center;
+                }
+            }
+        </style>
+    </head>
+    <body class="antialiased font-sans">
+        <div class="md:flex min-h-screen">
+            <div class="w-full md:w-1/2 bg-white flex items-center justify-center">
+                <div class="max-w-sm m-8">
+                    <div class="text-black text-5xl md:text-15xl font-black">
+                        @yield('code', __('Oh no'))
+                    </div>
+
+                    <div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div>
+
+                    <p class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+                        @yield('message')
+                    </p>
+
+                    <!-- <a href="{{ app('router')->has('home') ? route('home') : url('/') }}">
+                        <button class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">
+                            {{ __('Go Home') }}
+                        </button>
+                    </a> -->
+                </div>
+            </div>
+
+            <div class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2">
+                @yield('image')
+            </div>
+        </div>
+    </body>
+</html>

routes/web.php

@@ -1197,3 +1197,7 @@ Route::get('/feedback/{token}', function ($token) {
 Route::get('/feedback', function () {
     return view('pages.feedback');
 })->name('admin.feedback');
+
+Route::get('/404', function () {
+    abort(404);
+})->name('error.404');