Added href link

glific · Feb 2, 2021 · b215a6a · b215a6a
1 parent 651fd32
commit b215a6a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/components/UI/Timer/Timer.tsx b/src/components/UI/Timer/Timer.tsx
@@ -11,6 +11,12 @@ export interface TimerProps {
   contactBspStatus?: string;
 }
 
+const link = (
+  <a target="_blank" rel="noreferrer" href="https://glific.org/session-window/">
+    Learn more about the WhatsApp session window here.
+  </a>
+);
+
 export const Timer: React.FC<TimerProps> = (props: TimerProps) => {
   const [currentTime, setCurrentTime] = useState(moment(new Date()));
   const { contactStatus, contactBspStatus, time } = props;
@@ -35,8 +41,11 @@ export const Timer: React.FC<TimerProps> = (props: TimerProps) => {
 
   let timerStyle = styles.TimerNormal;
   let tooltipStyle = styles.TimerNormalTooltip;
-  let tooltip =
-    'Session window is open to message this contact. Learn more about the WhatsApp session window here.';
+  let tooltip = (
+    <React.Fragment key="sessionTooltip">
+      Session window is open to message this contact. {link}
+    </React.Fragment>
+  );
   const lastMessageTime = moment(time);
   const duration = moment.duration(currentTime.diff(lastMessageTime));
   let hours: string | number = Math.floor(duration.asHours());
@@ -50,13 +59,19 @@ export const Timer: React.FC<TimerProps> = (props: TimerProps) => {
   if (hours === 0) {
     timerStyle = styles.TimerEnd;
     tooltipStyle = styles.TimerApproachTooltip;
-    tooltip =
-      'Session message window has expired! You can only send a template message now. Learn more about the WhatsApp session window here.';
+    tooltip = (
+      <React.Fragment key="sessionTooltip">
+        Session message window has expired! You can only send a template message now. {link}
+      </React.Fragment>
+    );
   } else if (hours < 5) {
     timerStyle = styles.TimerApproachEnd;
     tooltipStyle = styles.TimerApproachTooltip;
-    tooltip =
-      'Your message window is about to expire! Learn more about the WhatsApp session window here.';
+    tooltip = (
+      <React.Fragment key="sessionTooltip">
+        Your message window is about to expire! {link}
+      </React.Fragment>
+    );
   }
 
   if (hours < 10 && hours > 0) {
@@ -69,6 +84,7 @@ export const Timer: React.FC<TimerProps> = (props: TimerProps) => {
       tooltipArrowClass={styles.TooltipArrow}
       title={tooltip}
       placement="bottom"
+      interactive
     >
       <div className={timerStyle} data-testid="timerCount">
         {hours}

diff --git a/src/components/UI/Tooltip/Tooltip.tsx b/src/components/UI/Tooltip/Tooltip.tsx
@@ -4,15 +4,16 @@ import { Tooltip as TooltipElement } from '@material-ui/core';
 import styles from './Tooltip.module.css';
 
 interface TooltipProps {
-  title: String;
+  title: any;
   placement: any;
   children: any;
   tooltipClass?: string;
   tooltipArrowClass?: string;
+  interactive?: boolean;
 }
 
 export const Tooltip: React.SFC<TooltipProps> = (props: TooltipProps) => {
-  const { tooltipClass, tooltipArrowClass, title, placement, children } = props;
+  const { tooltipClass, tooltipArrowClass, title, placement, children, interactive } = props;
   // set the default styling for main tooltip
   const toolTipStyling = [styles.Tooltip];
   // let's add the class passed in props so that we can overide default properties.
@@ -34,6 +35,7 @@ export const Tooltip: React.SFC<TooltipProps> = (props: TooltipProps) => {
       placement={placement}
       arrow
       classes={{ tooltip: toolTipStyling.join(' '), arrow: toolTipArrowStyling.join(' ') }}
+      interactive={interactive}
     >
       {children}
     </TooltipElement>