Rm whatsapp phone number, hide email for updates (#10334)

cypress/pageObject/Users/UserCreation.ts

@@ -74,10 +74,6 @@ export class UserCreation {
         label: "Phone Number",
         message: "Invalid input",
       },
-      {
-        label: "Alternate Phone Number",
-        message: "Invalid input",
-      },
       { label: "State", message: "Required" },
     ]);
     return this;

src/components/Common/UserColumns.tsx

@@ -3,7 +3,6 @@ import { UserBase } from "@/types/user/user";
 export type userChildProps = {
   userData: UserBase;
   username: string;
-  refetchUserData?: () => void;
 };
 
 export default function UserColumns({

src/components/Users/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -15,9 +15,9 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import { showAvatarEdit } from "@/Utils/permissions";
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import uploadFile from "@/Utils/request/uploadFile";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { formatDisplayName, sleep } from "@/Utils/utils";
 
@@ -27,14 +27,14 @@ export default function UserAvatar({ username }: { username: string }) {
   const authUser = useAuthUser();
   const queryClient = useQueryClient();
 
-  const { data: userData, loading: isLoading } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
+  const { data: userData, isLoading } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
       pathParams: {
         username: username,
       },
-    },
-  );
+    }),
+  });
 
   if (isLoading || !userData) {
     return <Loading />;

src/components/Users/UserForm.tsx

@@ -9,7 +9,6 @@ import * as z from "zod";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -92,8 +91,6 @@ export default function UserForm({
       last_name: z.string().min(1, t("field_required")),
       email: z.string().email(t("invalid_email_address")),
       phone_number: validators.phoneNumber.required,
-      alt_phone_number: validators.phoneNumber.optional,
-      phone_number_is_whatsapp: z.boolean().default(true),
       gender: z.enum(GENDERS),
       /* TODO: Userbase doesn't currently support these, neither does BE
       but we will probably need these */
@@ -130,8 +127,6 @@ export default function UserForm({
       last_name: "",
       email: "",
       phone_number: "",
-      alt_phone_number: "",
-      phone_number_is_whatsapp: true,
     },
   });
 
@@ -151,7 +146,6 @@ export default function UserForm({
         email: userData.email,
         phone_number: userData.phone_number || "",
         gender: userData.gender,
-        phone_number_is_whatsapp: true,
       };
       form.reset(formData);
     }
@@ -163,16 +157,12 @@ export default function UserForm({
   //const userType = form.watch("user_type");
   const usernameInput = form.watch("username");
   const phoneNumber = form.watch("phone_number");
-  const isWhatsApp = form.watch("phone_number_is_whatsapp");
 
   useEffect(() => {
-    if (isWhatsApp) {
-      form.setValue("alt_phone_number", phoneNumber);
-    }
     if (usernameInput && usernameInput.length > 0 && !isEditMode) {
       form.trigger("username");
     }
-  }, [phoneNumber, isWhatsApp, form, usernameInput, isEditMode]);
+  }, [phoneNumber, form, usernameInput, isEditMode]);
 
   const { isLoading: isUsernameChecking, isError: isUsernameTaken } = useQuery({
     queryKey: ["checkUsername", usernameInput],
@@ -496,86 +486,46 @@ export default function UserForm({
           </>
         )}
 
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel required>{t("email")}</FormLabel>
-              <FormControl>
-                <Input
-                  data-cy="email-input"
-                  type="email"
-                  placeholder={t("email")}
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <div className="grid grid-cols-2 gap-4">
+        {!isEditMode && (
           <FormField
             control={form.control}
-            name="phone_number"
+            name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel required>{t("phone_number")}</FormLabel>
+                <FormLabel required>{t("email")}</FormLabel>
                 <FormControl>
-                  <PhoneInput
-                    data-cy="phone-number-input"
-                    placeholder={t("enter_phone_number")}
+                  <Input
+                    data-cy="email-input"
+                    type="email"
+                    placeholder={t("email")}
                     {...field}
                   />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
+        )}
 
+        <div className="grid grid-cols-2 gap-4">
           <FormField
             control={form.control}
-            name="alt_phone_number"
+            name="phone_number"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>{t("alternate_phone_number")}</FormLabel>
+                <FormLabel required>{t("phone_number")}</FormLabel>
                 <FormControl>
                   <PhoneInput
-                    data-cy="alt-phone-number-input"
+                    data-cy="phone-number-input"
                     placeholder={t("enter_phone_number")}
                     {...field}
-                    disabled={isWhatsApp}
                   />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-        </div>
 
-        <FormField
-          control={form.control}
-          name="phone_number_is_whatsapp"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
-              <FormControl>
-                <Checkbox
-                  data-cy="whatsapp-checkbox"
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel>
-                  {t("whatsapp_number_same_as_phone_number")}
-                </FormLabel>
-              </div>
-            </FormItem>
-          )}
-        />
-
-        <div className="grid grid-cols-2 gap-4">
           <FormField
             control={form.control}
             name="gender"

src/components/Users/UserHome.tsx

@@ -1,7 +1,8 @@
-import { Link, navigate } from "raviger";
-import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -11,12 +12,12 @@ import UserAvailabilityTab from "@/components/Users/UserAvailabilityTab";
 import UserBanner from "@/components/Users/UserBanner";
 import UserSummaryTab from "@/components/Users/UserSummary";
 
+import useAppHistory from "@/hooks/useAppHistory";
 import useAuthUser from "@/hooks/useAuthUser";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { classNames, formatName, keysOf } from "@/Utils/utils";
-import { UserBase } from "@/types/user/user";
+import query from "@/Utils/request/query";
+import { formatName, keysOf } from "@/Utils/utils";
 
 export interface UserHomeProps {
   username?: string;
@@ -31,35 +32,32 @@ export interface TabChildProp {
 export default function UserHome(props: UserHomeProps) {
   const { tab } = props;
   let { username } = props;
-  const [userData, setUserData] = useState<UserBase>();
   const { t } = useTranslation();
   const authUser = useAuthUser();
+  const { goBack } = useAppHistory();
   if (!username) {
     username = authUser.username;
   }
   const loggedInUser = username === authUser.username;
 
-  const { loading, refetch: refetchUserDetails } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
+  const {
+    data: userData,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
       pathParams: {
         username: username,
       },
-      onResponse: ({ res, data, error }) => {
-        if (res?.status === 200 && data) {
-          setUserData(data);
-        } else if (res?.status === 400) {
-          navigate("/users");
-        } else if (error) {
-          toast.error(
-            t("error_fetching_user_details") + (error?.message || ""),
-          );
-        }
-      },
-    },
-  );
+    }),
+  });
+
+  if (isError) {
+    goBack("/");
+  }
 
-  if (loading || !userData) {
+  if (isLoading || !userData) {
     return <Loading />;
   }
 
@@ -124,7 +122,7 @@ export default function UserHome(props: UserHomeProps) {
                         return (
                           <Link
                             key={p}
-                            className={classNames(
+                            className={cn(
                               "min-w-max-content cursor-pointer whitespace-nowrap text-sm font-semibold capitalize",
                               currentTab === p
                                 ? "border-b-2 border-primary-500 text-primary-600 hover:border-secondary-300"
@@ -142,12 +140,7 @@ export default function UserHome(props: UserHomeProps) {
                 </div>
               </div>
             </div>
-            <SelectedTab
-              userData={userData}
-              username={username}
-              {...props}
-              refetchUserData={refetchUserDetails}
-            />
+            <SelectedTab userData={userData} username={username} {...props} />
           </>
         }
       </Page>

src/components/Users/UserSummary.tsx

@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -31,42 +32,39 @@ import request from "@/Utils/request/request";
 import EditUserSheet from "@/pages/Organization/components/EditUserSheet";
 import { UserBase } from "@/types/user/user";
 
-export default function UserSummaryTab({
-  userData,
-  refetchUserData,
-}: {
-  userData?: UserBase;
-  refetchUserData?: () => void;
-}) {
+export default function UserSummaryTab({ userData }: { userData?: UserBase }) {
   const { t } = useTranslation();
   const [showDeleteDialog, setshowDeleteDialog] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
   const authUser = useAuthUser();
   const [showEditUserSheet, setShowEditUserSheet] = useState(false);
+
+  const { mutate: deleteUser, isPending: isDeleting } = useMutation({
+    mutationFn: async () => {
+      return await request(routes.deleteUser, {
+        pathParams: { username: userData?.username || "" },
+      });
+    },
+    onSuccess: () => {
+      toast.success(t("user_deleted_successfully"));
+      setshowDeleteDialog(false);
+      navigate("/users");
+    },
+    onError: () => {
+      setshowDeleteDialog(false);
+      toast.error(t("user_delete_error"));
+    },
+  });
   if (!userData) {
     return <></>;
   }
 
   const handleSubmit = async () => {
-    setIsDeleting(true);
-    const { res, error } = await request(routes.deleteUser, {
-      pathParams: { username: userData.username },
-    });
-    setIsDeleting(false);
-    if (res?.status === 204) {
-      toast.success(t("user_deleted_successfully"));
-      setshowDeleteDialog(!showDeleteDialog);
-      navigate("/users");
-    } else {
-      toast.error(t("user_delete_error") + ": " + (error || ""));
-      setshowDeleteDialog(!showDeleteDialog);
-    }
+    deleteUser();
   };
 
   const userColumnsData = {
     userData,
     username: userData.username,
-    refetchUserData,
   };
   const deletePermitted = showUserDelete(authUser, userData);
   const passwordResetPermitted = showUserPasswordReset(authUser, userData);

src/types/user/user.ts

@@ -23,13 +23,14 @@ export type CreateUserModel = {
   last_name: string;
   email: string;
   phone_number: string;
-  phone_number_is_whatsapp: boolean;
-  alt_phone_number?: string;
   gender: (typeof GENDER_TYPES)[number]["id"];
   qualification?: string;
   doctor_experience_commenced_on?: string;
   doctor_medical_council_registration?: string;
   geo_organization: string;
 };
 
-export type UpdateUserModel = Omit<CreateUserModel, "username" | "password">;
+export type UpdateUserModel = Omit<
+  CreateUserModel,
+  "username" | "password" | "email"
+>;