diff --git a/kitsune/questions/jinja2/questions/includes/aaq_macros.html b/kitsune/questions/jinja2/questions/includes/aaq_macros.html index b9b1ee09015..2d43c9d3331 100644 --- a/kitsune/questions/jinja2/questions/includes/aaq_macros.html +++ b/kitsune/questions/jinja2/questions/includes/aaq_macros.html @@ -196,10 +196,14 @@

{{ _('Topics') }}

{% set switch_to_type = SUPPORT_TYPE_FORUM if is_zendesk else SUPPORT_TYPE_ZENDESK %}
- + {% if is_zendesk %} + {{ _('Megaphone icon') }} + {% else %} + {{ _('Message icon') }} + {% endif %} {% if is_zendesk %} - {{ _('Ask the community') }} + {{ _('Ask the Community') }} {% else %} {{ _('Contact Support') }} {% endif %} diff --git a/kitsune/questions/jinja2/questions/support_choice.html b/kitsune/questions/jinja2/questions/support_choice.html new file mode 100644 index 00000000000..ea712937c61 --- /dev/null +++ b/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 %} +
+
+ {{ progress_bar(3, product_slug=current_product.slug) }} + +
+ +

+ {{ current_product.title }} +

+ +

{{ _('Choose Your Support Option') }}

+

+ {{ _('Direct assistance from our support team is available only in English, but help from our community is available in {language}.').format(language=current_language) }} +

+ +
+
+
+ {{ _('Message icon') }} +
+

{{ _('Contact Support') }}

+
    +
  • {{ _('Direct assistance from our support team') }}
    • +
  • {{ _('Available only in English') }}
    • +
+
+ + {{ _('Continue') }} + +
+
+ +
+
+ {{ _('Megaphone icon') }} +
+

{{ _('Ask the Community') }}

+
    +
  • {{ _('Help from our community of volunteers') }}
    • +
  • {{ _('Available in {language}').format(language=current_language) }}
    • +
+
+ + {{ _('Continue') }} + +
+
+
+ +
+ {{ _('Cancel') }} +
+
+
+
+{% endblock %} + +{% block side %} +{% endblock %} diff --git a/kitsune/questions/views.py b/kitsune/questions/views.py index 164ccae396a..cafa9c8f9ff 100644 --- a/kitsune/questions/views.py +++ b/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, diff --git a/kitsune/sumo/static/sumo/img/message.svg b/kitsune/sumo/static/sumo/img/message.svg new file mode 100644 index 00000000000..8e41be2e835 --- /dev/null +++ b/kitsune/sumo/static/sumo/img/message.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/kitsune/sumo/static/sumo/scss/layout/_aaq.scss b/kitsune/sumo/static/sumo/scss/layout/_aaq.scss index c533d88962a..758f910db77 100644 --- a/kitsune/sumo/static/sumo/scss/layout/_aaq.scss +++ b/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; + } + } + } +}