ENH: adding configuration options

.env.sample

@@ -28,4 +28,10 @@ REACT_APP_SUPPORT_HELP_PORTAL_URL='http:\/\/bit.ly\/HEALSemanticSearch_Help'
 # Link to a user guide, sample is for HEAL as of 01/25/2024
 REACT_APP_SUPPORT_USER_GUIDE_URL='https:\/\/docs.google.com\/document\/d\/1M43Ex0eg_ObvXIGvWFUuwqKAYpWATXa8vYSpB5gUa6Q\/edit?pli=1'
 # Link to a Faqs page, sample is for HEAL as of 01/25/2024
-REACT_APP_SUPPORT_FAQS_URL='https:\/\/docs.google.com\/document\/d\/1njtRJbdHePRE-1kYtmyli-NqVuwU9bdqZ-42RNQGpBI\/edit'
+REACT_APP_SUPPORT_FAQS_URL='https:\/\/docs.google.com\/document\/d\/1njtRJbdHePRE-1kYtmyli-NqVuwU9bdqZ-42RNQGpBI\/edit'
+# Link to a video with introduction to the brand deployment
+REACT_APP_SUPPORT_INTRO_VIDEO_URL='https:\/\/bit.ly\/Intro_to_HSS'
+# Link to a video with a user guide video
+REACT_APP_SUPPORT_HOWTO_VIDEO_URL='https:\/\/bit.ly\/HSS_Demo'
+# Enable Guided Tour for Search
+REACT_APP_SEARCH_TOUR_ENABLED='false'

bin/populate_env

@@ -25,6 +25,10 @@ login_title="${REACT_APP_LOGIN_TITLE}"
 support_help_url="${REACT_APP_SUPPORT_HELP_PORTAL_URL}"
 support_user_guide_url="${REACT_APP_SUPPORT_USER_GUIDE_URL}"
 support_faqs_url="${REACT_APP_SUPPORT_FAQS_URL}"
+support_intro_video_url="${REACT_APP_SUPPORT_INTRO_VIDEO_URL}"
+support_howto_video_url="${REACT_APP_SUPPORT_HOWTO_VIDEO_URL}"
+search_tour_enabled="${REACT_APP_SEARCH_TOUR_ENABLED:-false}"
+
 
 template='{
     "brand": "%BRAND%",
@@ -51,8 +55,11 @@ template='{
     "support": {
       "help_portal_url": "%SUPPORT_HELP_PORTAL_URL%",
       "user_guide_url": "%SUPPORT_USER_GUIDE_URL%",
-      "faqs_url": "%SUPPORT_FAQS_URL%"
-    }
+      "faqs_url": "%SUPPORT_FAQS_URL%",
+      "intro_video_url": "%SUPPORT_INTRO_VIDEO_URL%",
+      "howto_video_url": "%SUPPORT_HOWTO_VIDEO_URL%"
+    },
+    "search_tour_enabled": "%SEARCH_TOUR_ENABLED%"
 }'
 
 echo "$template" | sed \
@@ -75,4 +82,7 @@ echo "$template" | sed \
   -e "s/%SUPPORT_HELP_PORTAL_URL%/$support_help_url/" \
   -e "s/%SUPPORT_USER_GUIDE_URL%/$support_user_guide_url/" \
   -e "s/%SUPPORT_FAQS_URL%/$support_faqs_url/" \
+  -e "s/%SUPPORT_INTRO_VIDEO_URL%/$support_intro_video_url/" \
+  -e "s/%SUPPORT_HOWTO_VIDEO_URL%/$support_howto_video_url/" \
+  -e "s/%SEARCH_TOUR_ENABLED%/$search_tour_enabled/" \
   > $1

src/components/layout/back-top.js

@@ -16,9 +16,12 @@ export const BackTop = ({ style={}, ...props }) => {
     >
       <div className="ant-back-top-content" style={{
         color: "#fff",
-        backgroundColor: "#1088e9"
+        backgroundColor: "#1088e9",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
       }}>
-        <ArrowUpOutlined className="ant-back-top-icon" style={{ fontSize: "20px", marginTop: "2px" }} />
+        <ArrowUpOutlined className="ant-back-top-icon" style={{ fontSize: "20px" }} />
       </div>
     </AntBackTop>
   )

src/contexts/analytics-context/events/support-events.js

@@ -17,4 +17,18 @@ export function faqsOpened() {
         category: "ui_interaction",
         action: "support_faqs_open"
     });
+}
+
+export function introVideoOpened() {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "support_intro_video_open"
+    });
+}
+
+export function howtoVideoOpened() {
+    this.analytics.trackEvent({
+        category: "ui_interaction",
+        action: "support_howto_video_open"
+    });
 }

src/views/search.js

@@ -26,7 +26,7 @@ export const SearchView = () => {
 
       {context.workspaces_enabled === 'true' && <Title level={1}>Search</Title>}
 
-      { context.brand === "heal" && <GuidedTourButton /> }
+      { context.search_tour_enabled === 'true' && <GuidedTourButton /> }
 
       <Results />
 

src/views/support.js

@@ -2,7 +2,7 @@ import { Fragment, useEffect } from 'react'
 import { Typography } from 'antd'
 import { useAnalytics, useEnvironment, useTourContext } from '../contexts'
 import { useTitle } from './'
-import {faqsOpened, userGuideOpened} from "../contexts/analytics-context/events/support-events";
+//import {faqsOpened, userGuideOpened, } from "../contexts/analytics-context/events/support-events";
 import { GuidedTourButton } from '../components';
 
 const { Title, Link } = Typography
@@ -53,10 +53,10 @@ const UserGuide = (context) => {
           </a>
       </li>
   )
- }
+}
 
  // This section points a link with FAQs.
- const Faqs = (context) => {
+const Faqs = (context) => {
   const { analyticsEvents } = useAnalytics()
   return (
       <li>
@@ -72,24 +72,64 @@ const UserGuide = (context) => {
           </a>
       </li>
   )
- }
+}
+
+// This section links to a user documentation.
+const IntroVideo = (context) => {
+  const { analyticsEvents } = useAnalytics()
+  return (
+      <li>
+          <a
+              //example href="https://docs.google.com/document/d/1M43Ex0eg_ObvXIGvWFUuwqKAYpWATXa8vYSpB5gUa6Q/edit?pli=1"
+              href = {context.intro_video_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={ () => {
+                  analyticsEvents.introVideoOpened()
+              } }
+          >
+              <b>Introduction Video</b>
+          </a>
+      </li>
+  )
+}
+
+const HowToVideo = (context) => {
+  const { analyticsEvents } = useAnalytics()
+  return (
+      <li>
+          <a
+              //example href="https://docs.google.com/document/d/1M43Ex0eg_ObvXIGvWFUuwqKAYpWATXa8vYSpB5gUa6Q/edit?pli=1"
+              href = {context.howto_video_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={ () => {
+                  analyticsEvents.howtoVideoOpened()
+              } }
+          >
+              <b>Demo Video</b>
+          </a>
+      </li>
+  )
+}
+
 
  // This section combines user guide, and faqs together.
- const Documentation = (context) => {
+const Documentation = (context) => {
   return (
     <Fragment>
         <Title level={1}>Documentation</Title>
         <Typography>
-          Our documentation is designed to help guide you through your first steps. 
-          We encourage you to get started with these introductory guides
+          Our documentation is designed to help guide you through your first steps of { context.meta_title ?? 'HeLx' }. 
+          We encourage you to get started with these introductory guides.
         </Typography>
         <ul>
           {context.user_guide_url && <UserGuide user_guide_url={context.user_guide_url} />}
           {context.faqs_url && <Faqs faqs_url={context.faqs_url} />}
         </ul>
       </Fragment>
   )
- }
+}
 
 const GuidedTourSection = (context) => {
   return (
@@ -101,7 +141,22 @@ const GuidedTourSection = (context) => {
           onClick={ () => !context.tourStarted && context.tour.start() }>
             <b>Click here</b>
         </Link>
-        &nbsp;to take a brief guided tour of { context.brand === "heal" ? "HEAL Semantic Search" : "Semantic Search" }
+        &nbsp;to take a brief guided tour of { context.meta_title ?? 'Search' }.
+      </Typography>
+    </Fragment>
+  )
+}
+
+const Resources = (context) => {
+  return (
+    <Fragment>
+      <Title level={1}>Other Resources</Title>
+      <Typography>
+        Links for further resources to help you use the {context.meta_title ?? 'site' }.
+        <ul>
+            {context.intro_video_url && <IntroVideo intro_video_url={context.intro_video_url} />}
+            {context.howto_video_url && <HowToVideo howto_video_url={context.howto_video_url} />}
+        </ul>
       </Typography>
     </Fragment>
   )
@@ -115,10 +170,15 @@ export const SupportView = () => {
   return (
     <Fragment>
       {context.support.help_portal_url && <HelpPortal help_portal_url={context.support.help_portal_url} />}
-      {(context.support.user_guide_url || context.support.faqs_url) && <Documentation user_guide_url={context.support.user_guide_url} faqs_url={context.support.faqs_url}/>}
-      { context.brand === "heal" && (
+      {(context.support.user_guide_url || context.support.faqs_url) && 
+        <Documentation user_guide_url={context.support.user_guide_url} faqs_url={context.support.faqs_url} meta_title={ context.meta.title }/>
+      }
+      {(context.support.intro_video_url || context.support.howto_video_url) &&
+        <Resources intro_video_url={ context.support.intro_video_url } howto_video_url={ context.support.howto_video_url } meta_title={ context.meta.title }/>
+      }
+      {context.search_tour_enabled === 'true' && (
         <Fragment>
-          <GuidedTourSection brand={ context.brand } tour={ tour } tourStarted={ tourStarted } />
+          <GuidedTourSection brand={ context.brand } tour={ tour } tourStarted={ tourStarted } meta_title={ context.meta.title }/>
           <GuidedTourButton />
         </Fragment>
       ) }