Add a suport form to create tickets in zendesk

This commit is contained in:
Adrià Casajús 2022-02-08 22:04:25 +01:00
parent 049bd746ad
commit 219d5b998f
No known key found for this signature in database
GPG Key ID: F0033226A5AFC9B9
3 changed files with 148 additions and 0 deletions

View File

@ -31,4 +31,5 @@ from .views import (
app,
delete_account,
notification,
support,
)

View File

@ -0,0 +1,57 @@
import json
import requests
from flask import render_template, request, flash, url_for, redirect
from flask_login import login_required, current_user
from app.dashboard.base import dashboard_bp
from app.db import Session
from app.log import LOG
from app.models import Alias, Mailbox
@dashboard_bp.route("/support", methods=["GET"])
@login_required
def show_support_dialog():
return render_template( "dashboard/support.html" )
def createZendeskTicket(email: str, contents: str):
data = {
'request': {
'subject': 'Ticket created for user {}'.format(current_user.id),
'comment': {
'type': 'Comment',
'body': contents
},
'requester': {
'name': "SimpleLogin user {}".format(current_user.id),
'email': email
}
}
}
url = 'https://simplelogin.zendesk.com/api/v2/requests.json'
headers = {'content-type': 'application/json'}
r = requests.post(url, data=json.dumps(data), headers=headers)
if r.status_code != 201:
if r.status_code == 401 or 422:
LOG.debug('Could not authenticate')
else:
LOG.debug('Problem with the request. Status ' + str(r.status_code))
else:
flash("Ticket was created. You should receive an email notification", "success")
LOG.debug('Ticket created')
@dashboard_bp.route("/support", methods=["POST"])
@login_required
def process_support_dialog():
contents = request.form.get("ticketContents") or ""
email = request.form.get("ticketEmail") or ""
if not contents:
flash("Please add a description", "warning")
return render_template("dashboard/support.html", ticketEmail=email)
if not email:
flash("Please add an email", "warning")
return render_template("dashboard/support.html", ticketContents=contents)
createZendeskTicket(email, contents)
return redirect(url_for('dashboard.index'))

View File

@ -0,0 +1,90 @@
{% extends 'default.html' %}
{% set active_page = None %}
{% block title %}
Support
{% endblock %}
{% block head %}
<style>
.card-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 3px;
}
</style>
<script src="{{ url_for('static', filename='node_modules/vue/dist/vue.min.js') }}"></script>
<script>
$( document ).ready(function() {
var app = new Vue({
el: '#supportZendeskForm',
data: {
ticketEmail: document.querySelector("input[name=ticketEmail]").value
},
methods: {
generateRandomAlias: async function(event){
let result = await fetch('/api/alias/random/new', { method: 'POST'})
if(result.ok){
let data = await result.json();
this.ticketEmail = data.alias;
}
}
}
});
})
</script>
{% endblock %}
{% block default_content %}
<div class="col pb-3">
<!-- Current plan -->
<div class="card">
<div class="card-body">
<div class="card-title mb-3">Report a problem</div>
<div class="card-subtitle mt-2 mb-2 pl-3 border-left border-warning" style="border-left-width: 5px !important;" >
If an email cannot be delivered to your mailbox, please check <a href="/dashboard/notifications">your notifications</a> for error messages
</div>
<div class="mt-2">
A support ticket will be created in Zendesk. Please do not include any sensitive information in the ticket.
</div>
<form id="supportZendeskForm" method="post">
<div class="mt-4 mb-5">
<label for="issueDescription" class="form-label">What happened?</label>
<textarea class="form-control" name="ticketContents" id="issueDescription" rows="3" placeholder="Please provide as much information as possible. For example which alias(es), mailbox(es) ar affected, if this is a persistent issue...">{{- ticketContents or '' -}}</textarea>
</div>
<div class="mt-5 font-weight-bold">
Attach files to support request
</div>
<div class="custom-file mt-2">
<input type="file" class="custom-file-input" name="ticketFiles" id="ticketFileGroup" multiple>
<label class="custom-file-label" for="ticketFileGroup">Choose file</label>
</div>
<div class="mt-5 font-weight-bold">
Where can we reach you?
</div>
<div class="mt-2">
Conversations related to this ticket will be sent to this address. Feel free to use an alias here.
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" value="{{ ticketEmail }}" name="ticketEmail" v-model='ticketEmail' aria-label="Email to send responses to" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" @click="generateRandomAlias" id="button-addon2">Generate a random alias</button>
</div>
</div>
<div class="mt-5">
<button class="btn btn-primary">Create support ticket</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}