Added an option to upload cover image while facility registration (#7297)

src/Routers/routes/FacilityRoutes.tsx

@@ -1,6 +1,7 @@
 import CentralNursingStation from "@/components/Facility/CentralNursingStation";
 import DischargedPatientsList from "@/components/Facility/DischargedPatientsList";
 import { FacilityConfigure } from "@/components/Facility/FacilityConfigure";
+import { FacilityCover } from "@/components/Facility/FacilityCover";
 import { FacilityCreate } from "@/components/Facility/FacilityCreate";
 import { FacilityHome } from "@/components/Facility/FacilityHome";
 import { FacilityList } from "@/components/Facility/FacilityList";
@@ -14,6 +15,9 @@ import FacilityLocationRoutes from "@/Routers/routes/FacilityLocationRoutes";
 const FacilityRoutes: AppRoutes = {
   "/facility": () => <FacilityList />,
   "/facility/create": () => <FacilityCreate />,
+  "/facility/:facilityId/cover": ({ facilityId }) => (
+    <FacilityCover facilityId={facilityId} />
+  ),
   "/facility/:facilityId/update": ({ facilityId }) => (
     <FacilityCreate facilityId={facilityId} />
   ),

src/components/Facility/CoverImage.tsx

@@ -0,0 +1,104 @@
+import careConfig from "@careConfig";
+import { navigate } from "raviger";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LocalStorageKeys } from "@/common/constants";
+
+import * as Notification from "@/Utils/Notifications";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+import uploadFile from "@/Utils/request/uploadFile";
+import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { sleep } from "@/Utils/utils";
+
+import AvatarEditModal from "../Common/AvatarEditModal";
+import AvatarEditable from "../Common/AvatarEditable";
+
+interface CoverImageProps {
+  facilityId: string;
+}
+
+export const CoverImage = ({ facilityId }: CoverImageProps) => {
+  const { t } = useTranslation();
+
+  const [openUploadModal, setOpenUploadModal] = useState(false);
+
+  const { data: facilityData, refetch: facilityFetch } =
+    useTanStackQueryInstead(routes.getPermittedFacility, {
+      pathParams: {
+        id: facilityId,
+      },
+      onResponse: ({ res }) => {
+        if (!res?.ok) {
+          navigate("/not-found");
+        }
+      },
+    });
+
+  const handleCoverImageUpload = async (file: File, onError: () => void) => {
+    const formData = new FormData();
+    formData.append("cover_image", file);
+    const url = `${careConfig.apiUrl}/api/v1/facility/${facilityId}/cover_image/`;
+
+    uploadFile(
+      url,
+      formData,
+      "POST",
+      {
+        Authorization:
+          "Bearer " + localStorage.getItem(LocalStorageKeys.accessToken),
+      },
+      async (xhr: XMLHttpRequest) => {
+        if (xhr.status === 200) {
+          await sleep(1000);
+          facilityFetch();
+          Notification.Success({ msg: "Cover image updated." });
+          setOpenUploadModal(false);
+        } else {
+          onError();
+        }
+      },
+      null,
+      () => {
+        onError();
+      },
+    );
+  };
+
+  const handleCoverImageDelete = async (onError: () => void) => {
+    const { res } = await request(routes.deleteFacilityCoverImage, {
+      pathParams: { id: facilityId },
+    });
+    if (res?.ok) {
+      Notification.Success({ msg: "Cover image deleted" });
+      facilityFetch();
+      setOpenUploadModal(false);
+    } else {
+      onError();
+    }
+  };
+
+  return (
+    <div className="my-auto mx-auto flex">
+      <AvatarEditModal
+        title={t("edit_cover_photo")}
+        open={openUploadModal}
+        imageUrl={facilityData?.read_cover_image_url}
+        handleUpload={handleCoverImageUpload}
+        handleDelete={handleCoverImageDelete}
+        onClose={() => setOpenUploadModal(false)}
+      />
+      <div>
+        <AvatarEditable
+          id="facility-coverimage"
+          imageUrl={facilityData?.read_cover_image_url}
+          name={facilityData?.name ? facilityData.name : ""}
+          editable={true}
+          onClick={() => setOpenUploadModal(true)}
+          className="md:mr-2 lg:mr-6 md:w-80 md:h-80 lg:h-100 lg:w-100"
+        />
+      </div>
+    </div>
+  );
+};

src/components/Facility/FacilityCover.tsx

@@ -0,0 +1,75 @@
+import { navigate } from "raviger";
+import { useEffect } from "react";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import * as Notification from "@/Utils/Notifications";
+
+import { Cancel, Submit } from "../Common/ButtonV2";
+import Page from "../Common/Page";
+import { CoverImage } from "./CoverImage";
+
+interface FacilityProps {
+  facilityId?: string;
+}
+
+export const FacilityCover = (props: FacilityProps) => {
+  const { facilityId } = props;
+
+  const authUser = useAuthUser();
+  useEffect(() => {
+    if (
+      authUser &&
+      authUser.user_type !== "StateAdmin" &&
+      authUser.user_type !== "DistrictAdmin" &&
+      authUser.user_type !== "DistrictLabAdmin"
+    ) {
+      navigate("/facility");
+      Notification.Error({
+        msg: "You don't have permission to perform this action. Contact the admin",
+      });
+    }
+  }, [authUser]);
+
+  return (
+    <Page
+      title="Cover Image"
+      className="h-[90vh]"
+      crumbsReplacements={{
+        [facilityId || "????"]: { name: "Upload" },
+      }}
+    >
+      <div className="md:pt-[10vh] md:pr-[5vw] pt-[5vh]">
+        <div className="flex flex-col md:flex-row gap-5 relative">
+          <CoverImage facilityId={facilityId ? facilityId : ""} />
+          <div className="w-full h-full sm:px-[10vh] md:px-0">
+            <p className="text-2xl font-extrabold mb-3">
+              Hover the default cover image to upload a new cover image for your
+              facility
+            </p>
+            <h5>Guidelines for cover image selection</h5>
+            <ul className="list-disc pl-6 text-sm text-color-body-dark">
+              <li>Max size for image uploaded should be 1mb</li>
+              <li>Allowed formats are jpg,png,jpeg</li>
+              <li>Recommended aspect ratio for the image is 1:1</li>
+            </ul>
+            <div className="mt-20 flex flex-col-reverse justify-end gap-3 sm:flex-row md:absolute md:right-0 md:bottom-5">
+              <Cancel
+                onClick={() => {
+                  navigate(`/facility/${facilityId}`);
+                }}
+              />
+              <Submit
+                type="button"
+                onClick={() => {
+                  navigate(`/facility/${facilityId}`);
+                }}
+                label={"Update Cover Image"}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};

src/components/Facility/FacilityCreate.tsx

@@ -414,7 +414,7 @@ export const FacilityCreate = (props: FacilityProps) => {
             msg: "Facility updated successfully",
           });
         }
-        navigate(`/facility/${id}`);
+        navigate(`/facility/${id}/cover`);
       }
       setIsLoading(false);
     }