From 5325029d438ab8d0c75a2b961fb994ecd661ce49 Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Wed, 22 Jan 2025 15:50:11 +0100
Subject: [PATCH] add Academy link to HelpBubble and update text of other ones

---
 jsapp/js/components/support/helpBubble.tsx | 27 +++++++++++++++-------
 jsapp/js/envStore.ts                       |  3 +++
 jsapp/svg-icons/help-academy.svg           |  1 +
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 jsapp/svg-icons/help-academy.svg

diff --git a/jsapp/js/components/support/helpBubble.tsx b/jsapp/js/components/support/helpBubble.tsx
index 87372726b3..6b2dc32140 100644
--- a/jsapp/js/components/support/helpBubble.tsx
+++ b/jsapp/js/components/support/helpBubble.tsx
@@ -148,11 +148,9 @@ class HelpBubble extends React.Component<{}, HelpBubbleState> {
               onClick={this.close.bind(this)}
             >
               <i className='k-icon k-icon-help-articles' />
-              <header>{t('KoboToolbox Help Center')}</header>
+              <header>{t('Help Center')}</header>
               <p>
-                {t(
-                  'A vast collection of user support articles and tutorials related to Kobo'
-                )}
+                {t('Find answers in our extensive library of user support articles and tutorials.')}
               </p>
             </bem.HelpBubble__rowAnchor>
           )}
@@ -165,11 +163,24 @@ class HelpBubble extends React.Component<{}, HelpBubbleState> {
               onClick={this.close.bind(this)}
             >
               <i className='k-icon k-icon-forum' />
-              <header>{t('KoboToolbox Community Forum')}</header>
+              <header>{t('Community Forum')}</header>
               <p>
-                {t(
-                  'Post your questions to get answers from experienced Kobo users around the world'
-                )}
+                {t('Connect with thousands of KoboToolbox users, ask questions, and share ideas.')}
+              </p>
+            </bem.HelpBubble__rowAnchor>
+          )}
+
+          {envStore.isReady && envStore.data.academy_url && (
+            <bem.HelpBubble__rowAnchor
+              m='link'
+              target='_blank'
+              href={envStore.data.academy_url}
+              onClick={this.close.bind(this)}
+            >
+              <i className='k-icon k-icon-help-academy' />
+              <header>{t('KoboToolbox Academy')}</header>
+              <p>
+                {t('Enroll in an online self-paced course designed by Kobo staff experts.')}
               </p>
             </bem.HelpBubble__rowAnchor>
           )}
diff --git a/jsapp/js/envStore.ts b/jsapp/js/envStore.ts
index 23621c92a2..03eea05bca 100644
--- a/jsapp/js/envStore.ts
+++ b/jsapp/js/envStore.ts
@@ -13,6 +13,7 @@ export interface EnvironmentResponse {
   support_email: string;
   support_url: string;
   community_url: string;
+  academy_url: string;
   project_metadata_fields: EnvStoreFieldItem[];
   user_metadata_fields: UserMetadataField[];
   sector_choices: string[][];
@@ -101,6 +102,7 @@ export class EnvStoreData {
   public support_email = '';
   public support_url = '';
   public community_url = '';
+  public academy_url = '';
   public min_retry_time = 4; // seconds
   public max_retry_time: number = 4 * 60; // seconds
   public project_metadata_fields: EnvStoreFieldItem[] = [];
@@ -210,6 +212,7 @@ class EnvStore {
     this.data.support_email = response.support_email;
     this.data.support_url = response.support_url;
     this.data.community_url = response.community_url;
+    this.data.academy_url = response.academy_url;
     this.data.min_retry_time = response.frontend_min_retry_time;
     this.data.max_retry_time = response.frontend_max_retry_time;
     this.data.project_metadata_fields = response.project_metadata_fields;
diff --git a/jsapp/svg-icons/help-academy.svg b/jsapp/svg-icons/help-academy.svg
new file mode 100644
index 0000000000..086ba606dd
--- /dev/null
+++ b/jsapp/svg-icons/help-academy.svg
@@ -0,0 +1 @@
+<svg height="280" viewBox="0 0 280 280" width="280" xmlns="http://www.w3.org/2000/svg"><path d="m53.8812577 208.54936c-3.9358485-2.224943-7.0635565-5.247798-9.3831241-9.068563-2.322125-3.820765-3.4831875-8.106978-3.4831875-12.858639v-59.490388l-24.432182-13.541467c-2.2249436-1.337523-3.8783068-2.914164-4.9600897-4.729923-1.0817829-1.815758-1.6226744-3.832273-1.6226744-6.049544 0-2.217272.5408915-4.2312293 1.6226744-6.0418731 1.0817829-1.8106437 2.7351461-3.3847273 4.9600897-4.7222509l104.6529059-57.0813108c1.856677-1.0331921 3.774732-1.7710039 5.754164-2.2134352 1.979433-.4424313 4.010014-.663647 6.091742-.663647 2.081729 0 4.11231.2212157 6.091742.663647 1.979433.4424313 3.901324 1.1776857 5.765673 2.205763l118.482081 64.2318191c2.163566 1.2787029 3.801585 2.8834759 4.914056 4.8143179 1.109915 1.930841 1.664872 4.013849 1.664872 6.249022v82.859967c0 2.173796-.735254 3.995948-2.205763 5.466457-1.473066 1.473066-3.297776 2.209599-5.474128 2.209599-2.178911 0-4.001063-.736533-5.466457-2.209599-1.465393-1.470509-2.19809-3.292661-2.19809-5.466457v-81.678445l-29.507355 15.69736v59.490388c0 4.751661-1.161063 9.037874-3.483188 12.858639-2.319567 3.820765-5.447276 6.84362-9.383124 9.068563l-67.27769 36.412353c-1.907825 1.081783-3.851454 1.84389-5.830887 2.286321-1.979432.442431-4.010013.663647-6.091742.663647-2.081728 0-4.112309-.221216-6.091742-.663647-1.979432-.442431-3.923061-1.204538-5.830886-2.286321zm75.6595893-50.728713c1.375885.787681 2.604719 1.181522 3.686502 1.181522 1.08434 0 2.314452-.393841 3.690337-1.181522l100.977913-55.002139-100.977913-54.7105953c-1.375885-.7851237-2.605997-1.1776856-3.690337-1.1776856-1.081783 0-2.310617.3925619-3.686502 1.1776856l-101.2732931 54.7105953zm-.29538 74.155835c1.375884.787681 2.654588 1.181521 3.836109 1.181521 1.181522 0 2.460225-.39384 3.83611-1.181521l68.459212-37.003113c1.575362-.984602 2.707014-2.116254 3.394957-3.394957.687942-1.278704 1.031913-2.901378 1.031913-4.868024v-51.139177l-64.711333 35.322898c-1.907825 1.081783-3.846339 1.84389-5.815542 2.286321-1.966645.442431-4.031751.663647-6.195317.663647-2.163565 0-4.228671-.221216-6.195317-.663647-1.969203-.442431-3.907717-1.204538-5.815542-2.286321l-64.7113325-35.322898v51.139177c0 1.575363.3439711 3.100856 1.0319134 4.576479.6879424 1.473066 1.8195947 2.7019 3.394957 3.686502z"/></svg>
\ No newline at end of file