choice of support for enabled non-English locales

kitsune/questions/jinja2/questions/includes/aaq_macros.html

@@ -196,10 +196,14 @@ <h2 class="sumo-page-subheading">{{ _('Topics') }}</h2>
   {% set switch_to_type = SUPPORT_TYPE_FORUM if is_zendesk else SUPPORT_TYPE_ZENDESK %}
   <div class="support-type-switcher-widget {{ css_class }}">
     <div class="switcher-header">
-      <img class="switcher-icon" src="{{ webpack_static('sumo/img/megaphone.svg') }}" alt="" />
+      {% if is_zendesk %}
+        <img class="switcher-icon" src="{{ webpack_static('sumo/img/megaphone.svg') }}" alt="{{ _('Megaphone icon') }}" />
+      {% else %}
+        <img class="switcher-icon" src="{{ webpack_static('sumo/img/message.svg') }}" alt="{{ _('Message icon') }}" />
+      {% endif %}
       <span class="switcher-title">
         {% if is_zendesk %}
-          {{ _('Ask the community') }}
+          {{ _('Ask the Community') }}
         {% else %}
           {{ _('Contact Support') }}
         {% endif %}

kitsune/questions/jinja2/questions/support_choice.html

@@ -0,0 +1,69 @@
+{% extends "questions/base.html" %}
+{% from "questions/includes/aaq_macros.html" import progress_bar %}
+{% set title = _('Choose Support Option') %}
+{% set no_headline = True %}
+{% set hide_locale_switcher = True %}
+{% set meta = [('robots', 'noindex')] %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block contentwrap %}
+<div id="main-content" class="aaq">
+  <article class="main mzp-l-content sumo-page-section--inner">
+    {{ progress_bar(3, product_slug=current_product.slug) }}
+
+    <div class="support-language-choice">
+      <img class="page-heading--logo" src="{{ current_product.image_alternate_url }}" alt="{{ current_product.title }} logo" />
+      <h3 class="mzp-c-menu-list-title sumo-card-heading back-to-product-list">
+        {{ current_product.title }}
+      </h3>
+
+      <h1 class="sumo-page-heading">{{ _('Choose Your Support Option') }}</h1>
+      <p class="choice-intro">
+        {{ _('Direct assistance from our support team is available only in English, but help from our community is available in {language}.').format(language=current_language) }}
+      </p>
+
+      <div class="support-choice-cards">
+        <div class="support-choice-card card highlight-box">
+          <div class="choice-icon">
+            <img src="{{ webpack_static('sumo/img/message.svg') }}" alt="{{ _('Message icon') }}" />
+          </div>
+          <h2 class="choice-title">{{ _('Contact Support') }}</h2>
+          <ul class="choice-features">
+            <li>{{ _('Direct assistance from our support team') }}</li>
+            <li>{{ _('Available only in English') }}</li>
+          </ul>
+          <div class="choice-action">
+            <a href="{{ url('questions.aaq_step3', product_slug=current_product.slug, locale=settings.WIKI_DEFAULT_LANGUAGE) | urlparams(support_type=SUPPORT_TYPE_ZENDESK, next=next_url) }}" class="sumo-button primary-button button-lg">
+              {{ _('Continue') }}
+            </a>
+          </div>
+        </div>
+
+        <div class="support-choice-card card highlight-box">
+          <div class="choice-icon">
+            <img src="{{ webpack_static('sumo/img/megaphone.svg') }}" alt="{{ _('Megaphone icon') }}" />
+          </div>
+          <h2 class="choice-title">{{ _('Ask the Community') }}</h2>
+          <ul class="choice-features">
+            <li>{{ _('Help from our community of volunteers') }}</li>
+            <li>{{ _('Available in {language}').format(language=current_language) }}</li>
+          </ul>
+          <div class="choice-action">
+            <a href="{{ url('questions.aaq_step3', product_slug=current_product.slug) | urlparams(support_type=SUPPORT_TYPE_FORUM, next=next_url) }}" class="sumo-button primary-button button-lg">
+              {{ _('Continue') }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="choice-cancel">
+        <a href="{{ cancel_url }}" class="sumo-button secondary-button">{{ _('Cancel') }}</a>
+      </div>
+    </div>
+  </article>
+</div>
+{% endblock %}
+
+{% block side %}
+{% endblock %}

kitsune/questions/views.py

@@ -639,7 +639,7 @@ def aaq(request, product_slug=None, step=1, is_loginless=False):
 
         context["ga_products"] = f"/{product_slug}/"
         context["current_support_type"] = support_type
-        context["can_switch"] = aaq_context.get("can_switch", False)
+        context["can_switch"] = can_switch = aaq_context.get("can_switch", False)
         context["SUPPORT_TYPE_FORUM"] = ProductSupportConfig.SUPPORT_TYPE_FORUM
         context["SUPPORT_TYPE_ZENDESK"] = ProductSupportConfig.SUPPORT_TYPE_ZENDESK
         context["has_ticketing_support"] = aaq_context.get("has_ticketing_support", False)
@@ -653,26 +653,44 @@ def aaq(request, product_slug=None, step=1, is_loginless=False):
         context["topics"] = build_topics_data(request, product, topics)
 
     elif step == 3:
-        # First, check for redirection cases.
+        context["next_url"] = next_url = get_next_url(request)
+        context["cancel_url"] = next_url or (
+            reverse("products.product", args=[product.slug])
+            if is_loginless
+            else reverse("questions.aaq_step2", args=[product_slug])
+        )
+
+        if (
+            can_switch
+            and has_public_forum
+            and (support_type == ProductSupportConfig.SUPPORT_TYPE_ZENDESK)
+            and (request.LANGUAGE_CODE != settings.WIKI_DEFAULT_LANGUAGE)
+        ):
+            # Allow the user to select a support option depending on
+            # their preferred combination of language and support type.
+            context["current_language"] = settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()]
+            return render(request, "questions/support_choice.html", context)
+
+        # Check for redirection cases.
         if (
             (support_type == ProductSupportConfig.SUPPORT_TYPE_FORUM) and not has_public_forum
         ) or (
             (support_type == ProductSupportConfig.SUPPORT_TYPE_ZENDESK)
             and (request.LANGUAGE_CODE != settings.WIKI_DEFAULT_LANGUAGE)
         ):
-            old_lang = settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()]
+            current_lang = settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()]
             new_lang = settings.LANGUAGES_DICT[settings.WIKI_DEFAULT_LANGUAGE.lower()]
 
             if support_type == ProductSupportConfig.SUPPORT_TYPE_FORUM:
                 msg = _(
-                    "The questions forum isn't available for {product} in {old_lang}, we "
+                    "The questions forum isn't available for {product} in {current_lang}, we "
                     "have redirected you to the {new_lang} questions forum."
-                ).format(product=product.title, old_lang=old_lang, new_lang=new_lang)
+                ).format(product=product.title, current_lang=current_lang, new_lang=new_lang)
             else:
                 msg = _(
-                    "Mozilla Support isn't available for {product} in {old_lang}, we "
+                    "Mozilla Support isn't available for {product} in {current_lang}, we "
                     "have redirected you to Mozilla Support in {new_lang}."
-                ).format(product=product.title, old_lang=old_lang, new_lang=new_lang)
+                ).format(product=product.title, current_lang=current_lang, new_lang=new_lang)
 
             messages.add_message(request, messages.WARNING, msg)
 
@@ -685,14 +703,6 @@ def aaq(request, product_slug=None, step=1, is_loginless=False):
                 + (f"?{request.GET.urlencode()}" if request.GET else "")
             )
 
-        context["next_url"] = next_url = get_next_url(request)
-
-        context["cancel_url"] = next_url or (
-            reverse("products.product", args=[product.slug])
-            if is_loginless
-            else reverse("questions.aaq_step2", args=[product_slug])
-        )
-
         if support_type == ProductSupportConfig.SUPPORT_TYPE_ZENDESK:
             zendesk_form = ZendeskForm(
                 data=request.POST or None,

kitsune/sumo/static/sumo/scss/layout/_aaq.scss

@@ -169,3 +169,133 @@ aside .aaq-widget {
     }
   }
 }
+
+// Support Language Choice Page
+.support-language-choice {
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  .page-heading--logo {
+    margin: 0 auto p.$spacing-lg;
+  }
+
+  .sumo-page-heading {
+    @include c.text-display-md();
+    margin-bottom: p.$spacing-md;
+  }
+
+  .choice-intro {
+    font-size: 18px;
+    line-height: 1.6;
+    color: var(--color-text);
+    margin-bottom: p.$spacing-2xl;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .support-choice-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: p.$spacing-xl;
+    margin-bottom: p.$spacing-2xl;
+
+    @media #{p.$mq-md} {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .support-choice-card {
+    padding: p.$spacing-xl;
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 2px solid var(--color-marketing-gray-03);
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+    }
+
+    .choice-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 56px;
+      height: 56px;
+      margin: 0 auto p.$spacing-lg;
+      padding: p.$spacing-sm;
+      border-radius: 50%;
+      background: var(--color-blue-01);
+
+      img {
+        width: 28px;
+        height: 28px;
+      }
+    }
+
+    .choice-title {
+      @include c.text-display-xs('no-fam');
+      line-height: 1.3;
+      margin: 0 0 p.$spacing-md 0;
+    }
+
+    .choice-features {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto p.$spacing-lg;
+      text-align: left;
+      display: inline-block;
+
+      li {
+        position: relative;
+        padding-left: p.$spacing-lg;
+        margin-bottom: p.$spacing-xs;
+        font-size: 15px;
+        color: var(--color-text);
+
+        &:before {
+          content: "✓";
+          position: absolute;
+          left: 0;
+          color: var(--color-green-07);
+          font-weight: 700;
+          font-size: 18px;
+        }
+
+        &:nth-child(2) {
+          font-weight: 700;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .choice-action {
+      margin-top: auto;
+      text-align: center;
+
+      .sumo-button {
+        display: inline-block;
+        width: auto;
+      }
+    }
+  }
+
+  .choice-cancel {
+    margin-top: p.$spacing-xl;
+  }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    .support-choice-card {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+    }
+  }
+}