Support: Ability to respond with configurable quick replies to tickets

Web/Presenters/SupportPresenter.php

@@ -164,9 +164,10 @@ final class SupportPresenter extends OpenVKPresenter
             $this->notFound();
 
         $ticketComments = $this->comments->getCommentsById($id);
-        $this->template->ticket   = $ticket;
+        $this->template->ticket      = $ticket;
-        $this->template->comments = $ticketComments;
+        $this->template->comments    = $ticketComments;
-        $this->template->id       = $id;
+        $this->template->id          = $id;
+        $this->template->fastAnswers = OPENVK_ROOT_CONF["openvk"]["preferences"]["support"]["fastAnswers"];
     }
     
     function renderAnswerTicketReply(int $id): void

Web/Presenters/templates/Support/AnswerTicket.xml

@@ -24,18 +24,24 @@
 </div><br/>
 <div>
     <form action="/al_comments.pl/create/support/reply/{$id}" method="post" style="margin:0;">
-        <textarea name="text" style="width: 100%;resize: vertical;"></textarea>
+        <textarea name="text" id="answer_text" style="width: 100%;resize: vertical;"></textarea>
         <div>
             <!-- padding to fix <br/> bug -->
         </div>
         <input type="hidden" name="hash" value="{$csrfToken}" />
-        <br>
+        <br />
-        <input type="submit" value="{_write}" class="button">
+        <div style="float: left;">
-        <select name="status" style="width: unset;">
+            <input type="submit" value="{_write}" class="button">
-          <option value="1">{_support_status_1}</option>
+            <select name="status" style="width: unset;">
-          <option value="2">{_support_status_2}</option>
+                <option value="1">{_support_status_1}</option>
-          <option value="0">{_support_status_0}</option>
+                <option value="2">{_support_status_2}</option>
-        </select>
+                <option value="0">{_support_status_0}</option>
+            </select>
+        </div>
+        <div n:if="!is_null($fastAnswers)" style="float: right;">
+            <a class="button" href="javascript:showSupportFastAnswerDialog(fastAnswers)">{_fast_answers}</a>
+        </div>
+        <br />
     </form>
 </div>
 <br/>
@@ -93,17 +99,17 @@
                        {tr("support_greeting_hi", $ticket->getUser()->getFullName())}
                        <br/>
                        <br/>
-                       
+
                        {$comment->getText()|noescape}
                        <br/>
                        <br/>
-                       
+
                        {tr("support_greeting_regards", OPENVK_ROOT_CONF["openvk"]["appearance"]["name"])|noescape}
                    {else}
                        {$comment->getText()|noescape}
                    {/if}
                </div>
-               
+                
                {if $comment->getUType() === 0}
                 <div class="post-menu">
                     <a href="/support/comment/{$comment->getId()}/delete">{_delete}</a>
@@ -126,4 +132,12 @@
       </tr>
    </tbody>
 </table>
+
+<script>
+    const fastAnswers = [
+        {foreach $fastAnswers as $answer}
+            {$answer},
+        {/foreach}
+    ];
+</script>
 {/block}

Web/static/css/style.css

@@ -1776,3 +1776,16 @@ body.scrolled .toTop:hover {
     margin: -20px;
     padding: 10px;
 }
+
+.hover-box {
+    background-color: white;
+    padding: 10px;
+    margin: 5px;
+    border: 1px solid #C0CAD5;
+    cursor: pointer;
+    user-select: none;
+}
+
+.hover-box:hover {
+    background-color: #C0CAD5;
+}

Web/static/js/openvk.cls.js

@@ -265,3 +265,27 @@ function autoTab(original, next, previous) {
     else if(original.value.length == 0 && previous !== undefined)
         previous.focus();
 }
+
+function showSupportFastAnswerDialog(answers) {
+    let html = "";
+    for(const [index, answer] of Object.entries(answers)) {
+        html += `
+            <div class="hover-box" onclick="supportFastAnswerDialogOnClick(fastAnswers[${index}])">
+                ${answer.replace(/\n/g, "<br />")}
+            </div>
+        `;
+    }
+
+    MessageBox(tr("fast_answers"), html, [tr("close")], [
+        Function.noop
+    ]);
+}
+
+function supportFastAnswerDialogOnClick(answer) {
+    u("body").removeClass("dimmed");
+    u(".ovk-diag-cont").remove();
+
+    const answerInput = document.querySelector("#answer_text");
+    answerInput.value = answer;
+    answerInput.focus();
+}

locales/en.strings

@@ -610,6 +610,8 @@
 "support_rated_bad" = "You left a negative feedback about the answer.";
 "wrong_parameters" = "Invalid request parameters.";
 
+"fast_answers" = "Fast answers";
+
 "comment" = "Comment";
 "sender" = "Sender";
 
@@ -764,6 +766,7 @@
 "cancel" = "Cancel";
 "edit_action" = "Change";
 "transfer" = "Transfer";
+"close" = "Close";
 
 "warning" = "Warning";
 "question_confirm" = "This action can't be undone. Do you really wanna do it?";

locales/ru.strings

@@ -639,6 +639,8 @@
 "support_rated_bad" = "Вы оставили негативный отзыв об ответе.";
 "wrong_parameters" = "Неверные параметры запроса.";
 
+"fast_answers" = "Быстрые ответы";
+
 "comment" = "Комментарий";
 "sender" = "Отправитель";
 
@@ -799,6 +801,7 @@
 "cancel" = "Отмена";
 "edit_action" = "Изменить";
 "transfer" = "Передать";
+"close" = "Закрыть";
 
 "warning" = "Внимание";
 "question_confirm" = "Это действие нельзя отменить. Вы действительно уверены в том что хотите сделать?";

openvk-example.yml

@@ -31,6 +31,10 @@ openvk:
         support:
             supportName: "Moderator"
             adminAccount: 1 # Change this ok
+            fastAnswers:
+                - "This is a list of quick answers to common questions for support. Post your responses here and agents can send it quickly with just 3 clicks"
+                - "There can be as many answers as you want, but it is best to have a maximum of 10.\n\nYou can also remove all answers from the list to disable this feature"
+                - "Good luck filling! If you are a regular support agent, inform the administrator that he forgot to fill the config"
         messages:
             strict: false
         wall: