Add video connect link and Cypress Tests for User Profile

src/Components/Facility/DoctorVideoSlideover.tsx

@@ -152,6 +152,20 @@ function UserListItem(props: { user: UserAssignedModel }) {
                 {user.first_name} {user.last_name}
               </span>
               <div className="flex gap-2">
+                {user.video_connect_link && (
+                  <a
+                    href={user.video_connect_link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div className="tooltip">
+                      <span className="tooltip-text tooltip-left">
+                        Connect on a Video Call
+                      </span>
+                      <CareIcon icon="l-video" className="h-5 w-5" />
+                    </div>
+                  </a>
+                )}
                 <a
                   href={
                     user.alt_phone_number

src/Components/Users/UserProfile.tsx

@@ -5,7 +5,7 @@ import * as Notification from "../../Utils/Notifications.js";
 import LanguageSelector from "../../Components/Common/LanguageSelector";
 import TextFormField from "../Form/FormFields/TextFormField";
 import ButtonV2, { Submit } from "../Common/components/ButtonV2";
-import { classNames, parsePhoneNumber } from "../../Utils/utils";
+import { classNames, isValidUrl, parsePhoneNumber } from "../../Utils/utils";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
@@ -27,6 +27,7 @@ type EditForm = {
   age: string;
   gender: GenderType;
   email: string;
+  video_connect_link: string | undefined;
   phoneNumber: string;
   altPhoneNumber: string;
   user_type: string | undefined;
@@ -41,6 +42,7 @@ type ErrorForm = {
   age: string;
   gender: string;
   email: string;
+  video_connect_link: string | undefined;
   phoneNumber: string;
   altPhoneNumber: string;
   user_type: string | undefined;
@@ -62,6 +64,7 @@ const initForm: EditForm = {
   lastName: "",
   age: "",
   gender: "Male",
+  video_connect_link: "",
   email: "",
   phoneNumber: "",
   altPhoneNumber: "",
@@ -145,6 +148,7 @@ export default function UserProfile() {
         age: result.data.age?.toString() || "",
         gender: result.data.gender || "Male",
         email: result.data.email,
+        video_connect_link: result.data.video_connect_link,
         phoneNumber: result.data.phone_number?.toString() || "",
         altPhoneNumber: result.data.alt_phone_number?.toString() || "",
         user_type: result.data.user_type,
@@ -262,6 +266,14 @@ export default function UserProfile() {
             invalidForm = true;
           }
           return;
+        case "video_connect_link":
+          if (states.form[field]) {
+            if (isValidUrl(states.form[field]) === false) {
+              errors[field] = "Please enter a valid url";
+              invalidForm = true;
+            }
+          }
+          return;
       }
     });
     dispatch({ type: "set_error", errors });
@@ -294,6 +306,7 @@ export default function UserProfile() {
         first_name: states.form.firstName,
         last_name: states.form.lastName,
         email: states.form.email,
+        video_connect_link: states.form.video_connect_link,
         phone_number: parsePhoneNumber(states.form.phoneNumber) ?? "",
         alt_phone_number: parsePhoneNumber(states.form.altPhoneNumber) ?? "",
         gender: states.form.gender,
@@ -578,6 +591,28 @@ export default function UserProfile() {
                       {userData?.weekly_working_hours || "-"}
                     </dd>
                   </div>
+                  <div
+                    className="my-2 sm:col-span-2"
+                    id="videoconnectlink-profile-details"
+                  >
+                    <dt className="text-sm font-medium leading-5 text-black">
+                      Video Connect Link
+                    </dt>
+                    <dd className="mt-1 break-words text-sm leading-5 text-gray-900">
+                      {userData?.video_connect_link ? (
+                        <a
+                          className="text-blue-500"
+                          href={userData?.video_connect_link}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {userData?.video_connect_link}
+                        </a>
+                      ) : (
+                        "-"
+                      )}
+                    </dd>
+                  </div>
                 </dl>
               </div>
             )}
@@ -679,6 +714,12 @@ export default function UserProfile() {
                           min={0}
                           max={168}
                         />
+                        <TextFormField
+                          {...fieldProps("video_connect_link")}
+                          label="Video Conference Link"
+                          className="col-span-6 sm:col-span-6"
+                          type="url"
+                        />
                       </div>
                     </div>
                     <div className="bg-gray-50 px-4 py-3 text-right sm:px-6">

src/Components/Users/models.tsx

@@ -28,6 +28,7 @@ export type UserModel = UserBareMinimum & {
   local_body?: number;
   district?: number;
   state?: number;
+  video_connect_link: string;
   phone_number?: string;
   alt_phone_number?: string;
   gender?: GenderType;
@@ -62,6 +63,7 @@ export interface UserAssignedModel extends UserBareMinimum {
   state?: number;
   phone_number?: string;
   alt_phone_number?: string;
+  video_connect_link: string;
   gender?: number;
   age?: number;
   is_superuser?: boolean;

src/Utils/utils.ts

@@ -462,3 +462,12 @@ export const compareBy = <T extends object>(key: keyof T) => {
     return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0;
   };
 };
+
+export const isValidUrl = (url?: string) => {
+  try {
+    new URL(url ?? "");
+    return true;
+  } catch {
+    return false;
+  }
+};