From ea0131cb4e10825c04d2e38d52039e8fea84ae60 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 28 Nov 2024 23:25:51 +0530
Subject: [PATCH] add help links in JamTracks page

---
 jam-ui/src/components/jamtracks/JKJamTrack.js | 33 ++++++++++++++++---
 jam-ui/src/i18n/locales/en/jamtracks.json     | 20 +++++++++++
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/jam-ui/src/components/jamtracks/JKJamTrack.js b/jam-ui/src/components/jamtracks/JKJamTrack.js
index 900e58d3a..9341522e1 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrack.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrack.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useResponsive } from '@farfetch/react-context-responsive';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import { Card, CardBody, Row, Col } from 'reactstrap';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { getUserDetail, postUserEvent, userOpenedJamTrackWebPlayer } from '../../helpers/rest';
@@ -74,14 +74,39 @@ const JKJamTrack = () => {
               <CardBody className="pt-3">{jamTrack && <JKMyJamTrackMixes />}</CardBody>
             </Card>
           </Col>
-          <Col sm={12} md={4} className={ greaterThan.sm ? null : 'mt-4' }>
+          <Col sm={12} md={4}>
             <Card className="mx-auto">
               <FalconCardHeader title={t('jamtrack.create_mix.title')} titleClass="font-weight-semi-bold" />
               <CardBody className="pt-3">{jamTrack && <JKCreateCustomMix />}</CardBody>
             </Card>
           </Col>
-
-          <Col />
+          <Col sm={12} md={4}>
+            <Card className="mx-auto">
+              <FalconCardHeader title={t('jamtrack.help_resources.title')} titleClass="font-weight-semi-bold" />
+              <CardBody className="pt-3">
+                <div className='mb-3'>
+                  <div><a target='_blank' href="https://jamkazam.freshdesk.com/support/solutions/articles/66000501472">{t('jamtrack.help_resources.using_overview.title')}</a></div>
+                  {t('jamtrack.help_resources.using_overview.description')}
+                </div>
+                <div className='mb-3'>
+                  <div><a target='_blank' href="https://jamkazam.freshdesk.com/support/solutions/articles/66000125792">{t('jamtrack.help_resources.using_mac_windows.title')}</a></div>
+                  {t('jamtrack.help_resources.using_mac_windows.description')}
+                </div>
+                <div className='mb-3'>
+                  <div>
+                    <Link to="/my-jamtracks">{t('jamtrack.help_resources.jamtracks_home.title')}</Link>
+                    </div>
+                  {t('jamtrack.help_resources.jamtracks_home.description')}
+                </div>
+                <div className='mb-3'>
+                  <div>
+                    <Link to="/jamtracks">{t('jamtrack.help_resources.see_more.title')}</Link>
+                    </div>
+                  {t('jamtrack.help_resources.see_more.description')}
+                </div>
+              </CardBody>
+            </Card>
+          </Col>
         </Row>
       ) : null}
     </>
diff --git a/jam-ui/src/i18n/locales/en/jamtracks.json b/jam-ui/src/i18n/locales/en/jamtracks.json
index b5c0f058a..2c7a9b2eb 100644
--- a/jam-ui/src/i18n/locales/en/jamtracks.json
+++ b/jam-ui/src/i18n/locales/en/jamtracks.json
@@ -60,6 +60,26 @@
       "pitch": "Pitch",
       "mix_name": "Mix Name",
       "create": "Create Mix"
+    },
+    "help_resources": {
+      "title": "Helpful Resources",
+      "using_overview": {
+        "title": "Using JamTracks - Overview ",
+        "description": "that explains how to use JamTracks in the browser."
+      },
+      "using_mac_windows": {
+        "title": "Using JamTracks in the Mac or Windows App",
+        "description": "that explains how to use JamTracks in the JamKazam app."
+      },
+      "jamtracks_home": {
+        "title": "Go to the JamTracks Home Page",
+        "description": "where you can access all of your JamTracks and search for more."
+      },
+      "see_more": {
+        "title": "see more JamTracks by this artist",
+        "description": "to checkout more songs you might like."
+      }
+
     }
   }
 }