SMS for Carrier Form (#28)

src/components/blocks/Sbcs.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { NotificationDispatchContext } from '../../contexts/NotificationContext';
-import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';
+// import { ServiceProviderValueContext } from '../../contexts/ServiceProviderContext';
 
 const Container = styled.div`
   margin-top: 0.25rem;
@@ -21,7 +21,7 @@ const Container = styled.div`
 const Sbcs = props => {
   let history = useHistory();
   const dispatch = useContext(NotificationDispatchContext);
-  const currentServiceProvider = useContext(ServiceProviderValueContext);
+  // const currentServiceProvider = useContext(ServiceProviderValueContext);
   const [ sbcs, setSbcs ] = useState('');
   useEffect(() => {
     const getAPIData = async () => {
@@ -38,7 +38,8 @@ const Sbcs = props => {
         const sbcResults = await axios({
           method: 'get',
           baseURL: process.env.REACT_APP_API_BASE_URL,
-          url: `/Sbcs?service_provider_sid=${currentServiceProvider}`,
+          // url: `/Sbcs?service_provider_sid=${currentServiceProvider}`,
+          url: '/Sbcs',
           headers: {
             Authorization: `Bearer ${localStorage.getItem('token')}`,
           },

src/components/elements/Tooltip.js

@@ -1,7 +1,11 @@
 import styled from 'styled-components/macro';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+import Link from './Link';
 
 const Tooltip = styled.span`
   display: none;
+
   label > span:hover > & {
     display: inline;
     position: absolute;
@@ -14,15 +18,105 @@ const Tooltip = styled.span`
     box-shadow: 0 0.375rem 0.25rem rgba(0, 0, 0, 0.12),
                 0 0        0.25rem rgba(0, 0, 0, 0.18);
     z-index: 80;
-    ${props => !props.large ? `
-      white-space: nowrap;
-    ` : `
-        text-align: left;
-        width: 22rem;
-        bottom: calc(100% + 0.5rem);
-    `}
+    white-space: nowrap;
+  }
+`;
+
+const StyledLinkWithTooltip = styled.span`
+  position: relative;
+
+  > span {
+    font-size: 14px;
+    position: absolute;
+    left: 50%;
+    transform: translate3d(-50%, calc(-100% - 5px), 0);
+    padding: 0.75rem 1rem;
+    border-radius: 0.25rem;
+    border: 1px solid #C6C6C6;
+    background: #FFF;
+    z-index: 80;
+    white-space: pre;
+
+    &:after {
+      content: "";
+      width: 0; 
+      height: 0; 
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid #FFF;
+      position: absolute;
+      left: 50%;
+      top: 100%;
+      transform: translateX(-50%);
+      z-index: 2;
+    }
+
+    &:before {
+      content: "";
+      width: 0; 
+      height: 0; 
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid #C6C6C6;
+      position: absolute;
+      left: 50%;
+      top: 100%;
+      transform: translateX(-50%);
+      z-index: 1;
     }
   }
 `;
 
+const LinkWithTooltip = props => {
+  const [isActive, setIsActive] = useState(false);
+  const tooltipRef = useRef();
+  const triggerRef = useRef();
+
+  const handleLinkClick = useCallback(() => {
+    setIsActive((oldActive) => {
+      const newActive = !oldActive;
+      return newActive;
+    });
+  }, [setIsActive]);
+
+  const handleOuterClick = useCallback((e) => {
+    if (!tooltipRef.current) {
+      return;
+    }
+
+    if (tooltipRef.current.contains(e.target)) {
+      return;
+    }
+
+    if (triggerRef.current.contains(e.target)) {
+      return;
+    }
+
+    handleLinkClick();
+  }, [tooltipRef, triggerRef, handleLinkClick]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleOuterClick, false);
+
+    return () => document.removeEventListener('click', handleOuterClick, false);
+  }, [handleOuterClick]);
+
+  return (
+    <StyledLinkWithTooltip>
+      <Link to="#" onClick={handleLinkClick}>
+        <span ref={triggerRef}>{props.children}</span>
+      </Link>
+      {isActive ? (
+        <span ref={tooltipRef}>
+          {props.tipText}
+        </span>
+      ) : null}
+    </StyledLinkWithTooltip>
+  );
+};
+
+export {
+  LinkWithTooltip,
+};
+
 export default Tooltip;

src/components/pages/internal/CarriersAddEdit.js

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import InternalTemplate from '../../templates/InternalTemplate';
 import CarrierForm from '../../forms/CarrierForm';
-import Sbcs from '../../blocks/Sbcs';
 
 const CarriersAddEdit = () => {
   let { voip_carrier_sid } = useParams();
@@ -15,7 +14,6 @@ const CarriersAddEdit = () => {
     <InternalTemplate
       type="form"
       title={pageTitle}
-      subtitle={<Sbcs />}
       breadcrumbs={[
         { name: 'Carriers', url: '/internal/carriers' },
         { name: pageTitle },

src/components/pages/internal/CarriersList.js

@@ -7,7 +7,6 @@ import styled from 'styled-components/macro';
 import { NotificationDispatchContext } from '../../../contexts/NotificationContext';
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
-import Sbcs from '../../blocks/Sbcs';
 import sortSipGateways from '../../../helpers/sortSipGateways';
 import { ServiceProviderValueContext } from '../../../contexts/ServiceProviderContext';
 import InputGroup from '../../../components/elements/InputGroup';
@@ -246,7 +245,6 @@ const CarriersList = () => {
       title="Carriers"
       addButtonText="Add a Carrier"
       addButtonLink="/internal/carriers/add"
-      subtitle={<Sbcs />}
     >
       <StyledInputGroup flexEnd space>
         <FilterLabel htmlFor="account">Used By:</FilterLabel>