Host a Zendesk form for all our products by davinotdavid · Pull Request #175 · thunderbird/thunderbird-accounts

davinotdavid · 2025-06-24T14:30:47Z

Description of the Change

[Backend changes]

Adds a new POST /contact route for accounts that hosts a contact form (the form itself is a Vue component) that uses the Zendesk Requests API to replace the current Zendesk form.
Adds a new POST /contact/attach_file route to upload a file to Zendesk and generate a token to be later attached to the ticket creation. [Zendesk Docs for Attaching Files]

[Frontend changes]

Added a new ContactSupportVue that uses the services-ui form components for visual consistency (see image below). Please note that the UI itself will probably evolve / change very soon so please focus on the functionality itself for the time being.

Important

The original Zendesk form is configured with custom_fields that require specific field IDs to work. The Vue form values (the select values) and the Python env vars related to those need to be in sync with whatever is configured in Zendesk. In other words, changing Zendesk's custom_fields will break the form if they don't get updated in the code. More info here.

Benefits

Be able to host the form in our domains instead of redirecting the user to Zendesk's while maintaining similar functionality (potentially even improving on current functionality as we might be a little more flexible on fields).

Applicable Issues

#173

davinotdavid · 2025-06-26T22:32:07Z

For testing, one will need to have the following .env vars:

# Zendesk (contact support form)
ZENDESK_SUBDOMAIN=
ZENDESK_USER_EMAIL=
ZENDESK_API_TOKEN=<Zendesk API Key for accounts.tb.pro in 1Password>

# Zendesk (contact support form) custom fields
ZENDESK_PRODUCT_FIELD_ID=
ZENDESK_TYPE_OF_REQUEST_FIELD_ID=

We currently don't have a Zendesk Sandbox account so beware that creating tickets through this form while running this locally, actually creates tickets that the support team sees. Please label them accordingly. Also, the credentials needed for the .env are therefore sensitive.

MelissaAutumn

Can we dynamically retrieve the product and type fields on the backend and provide them to the frontend?

And thanks for getting this up. Lots of good work, just some feedback.

MelissaAutumn · 2025-06-30T17:35:58Z

.env.example

+
+# Zendesk (contact support form) custom fields
+ZENDESK_PRODUCT_FIELD_ID=
+ZENDESK_TYPE_OF_REQUEST_FIELD_ID=


Could we dynamically pull these on the backend and add them to window._site on page render?

Potentially, there's an endpoint for it in Zendesk API but the API key that we have at the moment doesn't have permissions to make the request.

I can see the "pro" of getting them dynamically by allowing the changes in the Zendesk dashboard to be applied automagically in the form without code intervention but the "con" of it is always having an extra request when loading. I wonder if those fields are going to be changed a lot or not 🤔

Can you follow up with @malini tomorrow if you haven't already gotten a new token with read permissions.

Now getting the fields dynamically! Currently, there is only a specific user that have access to that endpoint so I will DM you the credentials to be used for testing this. Thanks! 🙇

MelissaAutumn · 2025-06-30T17:36:25Z

assets/app/vue/components/ContactSupportForm.vue

+  { label: 'Thunderbird Assist', value: 'thunderbird_assist' },
+  { label: 'Thunderbird Appointment', value: 'thunderbird_appointment' },
+  { label: 'Thunderbird Send', value: 'thunderbird_send' }
+];


I think these will need to just be the product names, we might need to drop Assist for now (I'm not sure if we're launching with that) and add Thundermail.

Hmm I thought these need to be the exact values as expected from the Zendesk form configs so I got those from here: #173 (comment) (happy to change them here and sync with someone who has Zendesk access to change there too, of course!)

assets/app/vue/components/ContactSupportForm.vue

MelissaAutumn · 2025-06-30T17:48:37Z

assets/app/vue/components/ContactSupportForm.vue

+  { label: 'Provide Feedback or Request Features', value: 'provide_feedback_or_request_features' },
+  { label: 'Payments & Billing', value: 'payments___billing' },
+  { label: 'Not listed', value: 'not_listed' }
+];


This isn't getting passed into zendesk correctly.

This looks correct to me 🤔 Wasn't this submitted as "Not listed" from the form? When I create tickets with other request types, it creates them correctly as well like:

I believe I chose provide_feedback_or_request_features

src/thunderbird_accounts/mail/views.py

MelissaAutumn · 2025-06-30T17:56:46Z

src/thunderbird_accounts/mail/zendesk.py

+                    {
+                        "id": settings.ZENDESK_TYPE_OF_REQUEST_FIELD_ID,
+                        "value": ticket_fields.get("ticket_type")
+                    }


Might need to double check this as it's not being passed through.

templates/mail/contact.html

MelissaAutumn

Some minor things, looking good!

MelissaAutumn · 2025-07-09T15:50:47Z

src/thunderbird_accounts/mail/views.py

+    return JsonResponse({
+        'success': True,
+        'ticket_fields': fields_with_options
+    })


Since we control the returb structure here, we should return the data in a way that the frontend can just use without any post processing.

I think making field_with_options a dict keyed by title would work

Ah that makes sense, much better indeed! Changed in this commit.

MelissaAutumn · 2025-07-09T15:51:54Z

assets/app/vue/components/ContactSupportForm.vue

+
+    const data = await response.json();
+
+    if (data.success && data.ticket_fields) {


We should be able to just pick the field type out of the return value and set it without any looping.

Yep, that makes sense! Thanks! Changed in this commit.

MelissaAutumn · 2025-07-09T15:53:17Z

assets/app/vue/components/ContactSupportForm.vue

+    const data = await response.json();
+
+    if (!data.success) {
+      errorText.value = 'Failed to submit contact form';


Do we get an error from the server? if so please show the error on the frontend

We do indeed, changed here, thanks!

MelissaAutumn · 2025-07-09T15:55:20Z

src/thunderbird_accounts/mail/views.py

+    if not result['success']:
+        return JsonResponse({
+            'success': False,
+            'error': result.get('error', 'Failed to fetch ticket fields')


On the backend can you wrap text with _( ... ). Eventually we'll have localization, and _() is just an easy way to extract and replace strings.

TIL! Thanks, changed here and will keep that in mind for the next tasks on accounts 🙇

MelissaAutumn · 2025-07-09T15:57:23Z

src/thunderbird_accounts/mail/views.py

+            zendesk_api_response = zendesk_client.upload_file(uploaded_file)
+
+            if not zendesk_api_response['success']:
+                return JsonResponse(


missing l10n _( ... ). For strings with variables you'll want to switch to .format iirc.

MelissaAutumn · 2025-07-09T15:57:32Z

src/thunderbird_accounts/mail/views.py

+        except Exception as e:
+            return JsonResponse({
+                'success': False,
+                'error': f'Failed to upload file {uploaded_file.name}: {str(e)}'


MelissaAutumn

LGTM, I'll add the secrets post merge.

MelissaAutumn · 2025-07-09T17:33:31Z

assets/app/vue/components/ContactSupportForm.vue

+
+      // Set Product field options and ID
+      if (fields['Product']) {
+        const productField = fields['Product'];


We should probably constify these titles. But it's a non-blocking issue.

Good point, thanks! Added the constants to the same file for now but can move it to a move designated space in the future

davinotdavid temporarily deployed to staging June 25, 2025 17:00 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging June 25, 2025 20:17 — with GitHub Actions Failure

davinotdavid temporarily deployed to staging June 25, 2025 20:17 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging June 26, 2025 20:27 — with GitHub Actions Failure

davinotdavid temporarily deployed to staging June 26, 2025 20:27 — with GitHub Actions Inactive

davinotdavid temporarily deployed to staging June 26, 2025 21:40 — with GitHub Actions Inactive

davinotdavid temporarily deployed to staging June 26, 2025 22:23 — with GitHub Actions Inactive

davinotdavid changed the title ~~[WIP] Host a Zendesk form for all our products~~ Host a Zendesk form for all our products Jun 26, 2025

davinotdavid marked this pull request as ready for review June 26, 2025 22:27

davinotdavid requested a review from malini June 26, 2025 22:28

davinotdavid requested a review from MelissaAutumn June 26, 2025 22:32

MelissaAutumn requested changes Jun 30, 2025

View reviewed changes

davinotdavid temporarily deployed to staging June 30, 2025 23:08 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging June 30, 2025 23:08 — with GitHub Actions Failure

davinotdavid temporarily deployed to staging June 30, 2025 23:18 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging June 30, 2025 23:18 — with GitHub Actions Failure

davinotdavid had a problem deploying to staging June 30, 2025 23:30 — with GitHub Actions Failure

davinotdavid force-pushed the host-zendesk-form branch from 8d6f6da to 7545d8e Compare July 2, 2025 15:44

davinotdavid had a problem deploying to staging July 2, 2025 15:44 — with GitHub Actions Failure

davinotdavid temporarily deployed to staging July 2, 2025 15:44 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging July 2, 2025 15:54 — with GitHub Actions Failure

davinotdavid had a problem deploying to staging July 2, 2025 16:05 — with GitHub Actions Failure

davinotdavid temporarily deployed to staging July 2, 2025 16:05 — with GitHub Actions Inactive

davinotdavid temporarily deployed to staging July 2, 2025 17:56 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging July 2, 2025 17:56 — with GitHub Actions Failure

davinotdavid added 2 commits July 3, 2025 10:34

add contact form barebones skeleton in /contact

4d1888e

allow room for future form validations and add zendesk API call

c8cf7f8

add contact link in self-serve nav bar

1be7a7b

davinotdavid force-pushed the host-zendesk-form branch from 8c04919 to 5f584f0 Compare July 3, 2025 16:35

davinotdavid had a problem deploying to staging July 3, 2025 16:35 — with GitHub Actions Error

bump services-ui version to fix textarea

e1c9a9c

davinotdavid force-pushed the host-zendesk-form branch from 5f584f0 to e1c9a9c Compare July 3, 2025 16:36

davinotdavid temporarily deployed to staging July 3, 2025 16:36 — with GitHub Actions Inactive

davinotdavid added the blocked label Jul 3, 2025

get custom ticket fields dynamically

9a10a1e

davinotdavid temporarily deployed to staging July 8, 2025 21:35 — with GitHub Actions Inactive

davinotdavid had a problem deploying to staging July 8, 2025 21:35 — with GitHub Actions Failure

update test suite to accomodate dynamically contact fields

faabd2f

davinotdavid temporarily deployed to staging July 9, 2025 15:13 — with GitHub Actions Inactive

davinotdavid removed the blocked label Jul 9, 2025

davinotdavid requested a review from MelissaAutumn July 9, 2025 15:22

MelissaAutumn requested changes Jul 9, 2025

View reviewed changes

davinotdavid added 3 commits July 9, 2025 10:23

better error handling + i18n prep

da9b0b6

reduce frontend work to get product and type of request custom options

69bd540

update test suite with the payload structure

cded742

davinotdavid temporarily deployed to staging July 9, 2025 16:34 — with GitHub Actions Inactive

davinotdavid requested a review from MelissaAutumn July 9, 2025 16:37

MelissaAutumn approved these changes Jul 9, 2025

View reviewed changes

constantify product and type of request fields

544b797

davinotdavid temporarily deployed to staging July 9, 2025 18:13 — with GitHub Actions Inactive

davinotdavid merged commit 532f663 into main Jul 9, 2025
2 checks passed

davinotdavid deleted the host-zendesk-form branch July 9, 2025 18:51


		const data = await response.json();

		if (data.success && data.ticket_fields) {

Conversation

davinotdavid commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the Change

Benefits

Applicable Issues

Uh oh!

davinotdavid commented Jun 26, 2025

Uh oh!

MelissaAutumn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davinotdavid Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MelissaAutumn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MelissaAutumn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

davinotdavid commented Jun 24, 2025 •

edited

Loading

davinotdavid Jun 30, 2025 •

edited

Loading