diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx index 6457d4d42bc..1ebbbca67a6 100644 --- a/src/Components/Facility/DoctorVideoSlideover.tsx +++ b/src/Components/Facility/DoctorVideoSlideover.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch } from "react-redux"; import SlideOver from "../../CAREUI/interactive/SlideOver"; import { getFacilityUsers } from "../../Redux/actions"; @@ -8,6 +8,7 @@ import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon"; import { relativeTime } from "../../Utils/utils"; import useAuthUser from "../../Common/hooks/useAuthUser"; import { triggerGoal } from "../../Integrations/Plausible"; +import { Warn } from "../../Utils/Notifications"; export default function DoctorVideoSlideover(props: { show: boolean; @@ -112,6 +113,64 @@ function UserListItem(props: { user: UserAssignedModel }) { user.user_type === "Doctor" ? "l-user-md" : "l-user-nurse"; const authUser = useAuthUser(); + function connectOnWhatsApp(e: React.MouseEvent) { + e.stopPropagation(); + if (!user.alt_phone_number) return; + const phoneNumber = user.alt_phone_number; + const message = `Hey ${user.first_name} ${user.last_name}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`; + const encodedMessage = encodeURIComponent(message); + const whatsappAppURL = `whatsapp://send?phone=${phoneNumber}&text=${encodedMessage}`; + const whatsappWebURL = `https://web.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`; + + const userAgent = navigator.userAgent; + const isEdge = /edge\/\d+/i.test(userAgent); + const isMobileFirefoxOrSafari = + /iPhone|iPad|iPod|Android/i.test(userAgent) && + (/Firefox/i.test(userAgent) || + (/Safari/i.test(userAgent) && !/Chrome/i.test(userAgent))); + const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent); + const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent); + + const openWhatsAppWebFallback = () => { + if (isMobile) { + Warn({ + msg: "Please install WhatsApp to connect with the doctor", + }); + } + window.open(whatsappWebURL, "_blank"); + }; + + if (isEdge) { + if (navigator.msLaunchUri) { + navigator.msLaunchUri(whatsappAppURL, null, openWhatsAppWebFallback); + } else { + openWhatsAppWebFallback(); + } + } else { + const attemptOpenWhatsApp = (url: string) => { + if (isMobileFirefoxOrSafari || isSafari) { + const iframe = document.createElement("iframe"); + iframe.style.display = "none"; + iframe.src = url; + document.body.appendChild(iframe); + } else { + window.location.href = url; + } + }; + + attemptOpenWhatsApp(whatsappAppURL); + + const fallbackTimeout = setTimeout(() => { + openWhatsAppWebFallback(); + }, 1250); + + // Listen for when the window loses focus, indicating app launch success + window.addEventListener("blur", () => { + clearTimeout(fallbackTimeout); + }); + } + } + return (
  • - +
    { // Show online icon based on last_login @@ -178,26 +224,7 @@ function UserListItem(props: { user: UserAssignedModel }) {
    )} - { - triggerGoal("Doctor Connect Click", { - medium: "WhatsApp", - userId: authUser?.id, - targetUserType: user.user_type, - }); - }} - target="_blank" - rel="noopener noreferrer" - > +
    Connect on WhatsApp