Add Zendesk Link (#873)

* Adjust ContactView to redirect, and also align it with ReportBugView.

* Update emails to always include the contact form link

* Fix lint

* Swap for an external redirect component.

* 🌐 Language update

---------

Co-authored-by: Andreas Müller <mail@devmount.de>

Author: MelissaAutumn

backend/src/appointment/controller/mailer.py

@@ -51,7 +51,7 @@ def __init__(
         self,
         to: str,
         sender: str = os.getenv('SERVICE_EMAIL'),
-        reply_to: str = os.getenv('SUPPORT_EMAIL'),
+        reply_to: str = None,
         subject: str = '',
         html: str = '',
         plain: str = '',
@@ -100,7 +100,8 @@ def build(self):
         message['Subject'] = self.subject
         message['From'] = self.sender
         message['To'] = self.to
-        message['Reply-To'] = self.reply_to
+        if self.reply_to:
+            message['Reply-To'] = self.reply_to
 
         # add body as html and text parts
         message.set_content(self.text())

backend/src/appointment/templates/email/includes/base.jinja2

@@ -49,19 +49,14 @@
   {% block call_to_action %}{% endblock %}
 </div>
 {% endif %}
-{% if show_contact_form_support_hint %}
 <div style="text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 24px; padding: 12px; max-width: 310px;">
-  {{ l10n('mail-brand-support-hint', lang=lang if lang else None)|safe }}
-</div>
-{% endif %}
 {% if show_contact_form_reply_hint %}
-{% set link = '<a href="%(url)s">%(label)s</a>'|format(url=homepage_url + '/contact', label=l10n('mail-brand-contact-form', lang=lang if lang else None)) %}
-<div style="text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 24px; padding: 12px; max-width: 310px;">
   {{ l10n('mail-brand-reply-hint-attendee-info', { 'name': name }, lang if lang else None)|safe }}
   <br/><br/>
+{% endif %}
+{% set link = '<a href="%(url)s">%(label)s</a>'|format(url=homepage_url + '/contact', label=l10n('mail-brand-contact-form', lang=lang if lang else None)) %}
   {{ l10n('mail-brand-reply-hint', {'contact_form_link': link}, lang if lang else None)|safe }}
 </div>
-{% endif %}
 {% include './includes/footer.jinja2' %}
 </body>
 </html>

frontend/.env.example

@@ -31,3 +31,7 @@ VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assign
 
 # If the browser's hour setting is empty or missing fallback to this value
 VITE_DEFAULT_HOUR_FORMAT=12
+
+# You could use a url or a mailto: email address.
+VITE_SUPPORT_URL=
+

frontend/.env.prod.example

@@ -22,3 +22,5 @@ VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assign
 
 # If the browser's hour setting is empty or missing fallback to this value
 VITE_DEFAULT_HOUR_FORMAT=12
+
+VITE_SUPPORT_URL=https://tbpro.zendesk.com/hc/requests/new

frontend/.env.stage.example

@@ -22,3 +22,5 @@ VITE_REPORT_BUG_URL=https://github.com/thunderbird/appointment/issues/new?assign
 
 # If the browser's hour setting is empty or missing fallback to this value
 VITE_DEFAULT_HOUR_FORMAT=12
+
+VITE_SUPPORT_URL=https://tbpro.zendesk.com/hc/requests/new

frontend/src/components/ExternalRedirect.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import LoadingSpinner from '@/elements/LoadingSpinner.vue';
+
+// component properties
+interface Props {
+  redirectUrl: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  redirectUrl: '/',
+});
+
+const redirect = async () => {
+  window.location.replace(props.redirectUrl);
+};
+
+onMounted(() => {
+  redirect();
+});
+</script>
+<template>
+  <div class="full-page">
+    <h2>
+      <i18n-t keypath="text.redirectedNotice">
+        <template v-slot:url>
+          <a class="underline underline-offset-2"
+             :href="redirectUrl">
+            {{ redirectUrl }}
+          </a>
+        </template>
+      </i18n-t>
+    </h2>
+    <loading-spinner/>
+  </div>
+</template>
+<style scoped>
+@import '@/assets/styles/mixins.pcss';
+
+.full-page {
+  @mixin faded-background var(--colour-neutral-border);
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 50;
+}
+</style>

frontend/src/components/NavBar.vue

@@ -90,8 +90,8 @@ const isNavEntryActive = (item: string) => {
             <router-link :to="{ name: 'report-bug' }" class="flex items-center justify-between gap-1 p-2" data-testid="user-nav-report-bug-menu">
               {{ t('navBar.reportBug') }} <icon-external-link class="size-4"/>
             </router-link>
-            <router-link :to="{ name: 'contact' }" class="p-2" data-testid="user-nav-contact-menu">
-              {{ t('label.contact') }}
+            <router-link :to="{ name: 'contact' }" class="flex items-center justify-between gap-1 p-2" data-testid="user-nav-contact-menu">
+              {{ t('label.contact') }} <icon-external-link class="size-4"/>
             </router-link>
             <hr class="border-teal-500" />
             <router-link :to="{ name: 'logout' }" class="p-2" data-testid="user-nav-logout-menu">

frontend/src/locales/de.json

@@ -357,13 +357,13 @@
       "title": "Log dich ein oder erstelle ein Benutzerkonto"
     },
     "remoteError": {
-      "email-mismatch": "Die E-Mail, mit der Du dich angemeldet hast, muss mit Deinem Mozilla-Konto übereinstimmen.",
-      "invite-not-valid": "Der eingegebene Einladungscode ist ungültig.",
-      "unknown-error": "Ein unbekannter Fehler ist aufgetreten.",
       "disabled-account": "Dieses Konto ist deaktiviert.",
+      "email-mismatch": "Die E-Mail, mit der Du dich angemeldet hast, muss mit Deinem Mozilla-Konto übereinstimmen.",
+      "email-not-in-session": "Es gab ein Problem mit der Anmeldesitzung. Bitte versuch es erneut.",
       "invalid-credentials": "Es gab ein Problem mit Deinen Anmeldedaten.",
       "invalid-state": "Die Anmeldesitzung ist abgelaufen. Bitte versuch es erneut.",
-      "email-not-in-session": "Es gab ein Problem mit der Anmeldesitzung. Bitte versuch es erneut."
+      "invite-not-valid": "Der eingegebene Einladungscode ist ungültig.",
+      "unknown-error": "Ein unbekannter Fehler ist aufgetreten."
     },
     "signUp": {
       "title": "Du hast einen Einladungscode? Gib ihn hier ein"
@@ -448,6 +448,7 @@
     "ownerNeedsToConfirmBooking": "Wenn diese Option aktiviert ist, müssen Buchungen dieses Zeitplans bestätigt oder ablehnt werden. Wenn diese Option deaktiviert ist, werden alle Zeiten automatisch bestätigt.",
     "preferredEmailHelp": "Die E-Mail-Adresse festlegen, die für ausgehende Kommunikation in Kalenderereignissen verwendet werden soll.",
     "recipientsCanScheduleBetween": "Empfänger können einen Termin zwischen {earliest} und {farthest} ab dem aktuellen Zeitpunkt wählen. ",
+    "redirectedNotice": "Du wirst weitergeleitet nach {url}.",
     "refreshLinkNotice": "Dadurch wird dein Link erneuert. Deine alten Links werden nicht länger funktionieren.",
     "requestInformationSentToOwner": "Der Kalenderbesitzer wurde per E-Mail über deine Buchungsanfrage informiert.",
     "scheduleSettings": {

frontend/src/locales/en.json

@@ -357,13 +357,13 @@
       "title": "Sign in or create an account"
     },
     "remoteError": {
-      "email-mismatch": "The email you've signed up and logged in with must be the same as your Mozilla Account.",
-      "invite-not-valid": "The invite code you've entered is not valid.",
-      "unknown-error": "An unknown error occurred.",
       "disabled-account": "This account is disabled.",
+      "email-mismatch": "The email you've signed up and logged in with must be the same as your Mozilla Account.",
+      "email-not-in-session": "There was a problem with the login session. Please try again.",
       "invalid-credentials": "There was a problem with your credentials.",
       "invalid-state": "The login session has expired. Please try again.",
-      "email-not-in-session": "There was a problem with the login session. Please try again."
+      "invite-not-valid": "The invite code you've entered is not valid.",
+      "unknown-error": "An unknown error occurred."
     },
     "signUp": {
       "title": "Have an invite code? Enter it here"
@@ -448,6 +448,7 @@
     "ownerNeedsToConfirmBooking": "When this option is active, you will be required to confirm or decline times booked on your schedule. When this option is deactivated, all times will automatically be confirmed.",
     "preferredEmailHelp": "Set the email you'll use for out-going communication. This will be used in calendar events and emails.",
     "recipientsCanScheduleBetween": "Recipients can schedule a {duration} appointment between {earliest} and {farthest} ahead of time.",
+    "redirectedNotice": "You are being redirected to {url}.",
     "refreshLinkNotice": "This refreshes your link. Your old links will no longer work.",
     "requestInformationSentToOwner": "An information about this booking request has been emailed to the owner.",
     "scheduleSettings": {

frontend/src/views/ContactView.vue

@@ -1,93 +1,9 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from '@/stores/user-store';
-import { AlertSchemes } from '@/definitions';
-import { callKey } from '@/keys';
-import { BooleanResponse } from '@/models';
-import PrimaryButton from '@/elements/PrimaryButton.vue';
-import AlertBox from '@/elements/AlertBox.vue';
-import TextInput from '@/elements/TextInput.vue';
+import ExternalRedirect from '@/components/ExternalRedirect.vue';
 
-// icons
-import { IconSend } from '@tabler/icons-vue';
+const redirectUrl = import.meta.env?.VITE_SUPPORT_URL;
 
-// component constants
-const user = useUserStore();
-const { t } = useI18n();
-const call = inject(callKey);
-
-// form data
-const form = ref<HTMLFormElement>(null);
-const topic = ref('');
-const details = ref('');
-const sendingState = ref(0);
-
-// empty all form inputs
-const resetForm = () => {
-  topic.value = '';
-  details.value = '';
-};
-
-// send support request
-const send = async () => {
-  if (!form.value.checkValidity()) {
-    form.value.reportValidity();
-    return;
-  }
-  const postObj = { topic: topic.value, details: details.value };
-  const { error, data }: BooleanResponse = await call('support').post(postObj).json();
-  if (!error.value && data.value) {
-    sendingState.value = AlertSchemes.Success;
-    resetForm();
-  } else {
-    sendingState.value = AlertSchemes.Error;
-  }
-};
 </script>
-
 <template>
-  <!-- page title area -->
-  <div v-if="user.authenticated" class="flex flex-col items-center justify-center gap-4">
-    <div class="text-4xl font-light">{{ t('heading.contactRequest') }}</div>
-    <div class="w-full max-w-lg">{{ t('text.contactRequestForm') }}</div>
-    <alert-box
-      v-if="sendingState === AlertSchemes.Success"
-      :title="t('label.success')"
-      @close="sendingState = 0"
-      :scheme="AlertSchemes.Success"
-    >
-      {{ t('info.messageWasSent') }}
-    </alert-box>
-    <alert-box
-      v-if="sendingState === AlertSchemes.Error"
-      :title="t('label.error')"
-      @close="sendingState = 0"
-      :scheme="AlertSchemes.Error"
-    >
-      {{ t('info.messageWasNotSent') }}
-    </alert-box>
-    <form class="flex w-full max-w-lg flex-col gap-2" ref="form">
-      <label class="flex flex-col gap-1">
-        <div class="font-medium text-gray-500 dark:text-gray-300">
-          {{ t("label.topic") }}
-        </div>
-        <input type="text" v-model="topic" class="w-full rounded-md" required />
-      </label>
-      <label class="flex flex-col gap-1">
-        <div class="font-medium text-gray-500 dark:text-gray-300">
-          {{ t("label.message") }}
-        </div>
-        <text-input
-          v-model="details"
-          :placeholder="t('placeholder.writeHere')"
-          :maxlength="2500"
-        />
-      </label>
-    </form>
-    <primary-button class="btn-send" @click="send" :title="t('label.send')">
-      <icon-send />
-      {{ t('label.send') }}
-    </primary-button>
-  </div>
+  <external-redirect :redirect-url="redirectUrl"/>
 </template>