Updated file-upload component

client/src/containers/profile/file-upload/description/index.tsx

@@ -0,0 +1,70 @@
+import { FC } from "react";
+
+import { FileDownIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+const downloadFiles = (files: iFile[]) => {
+  files.forEach((f) => {
+    const link = document.createElement("a");
+    link.href = f.path;
+    link.download = f.path.split("/").pop() || "";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  });
+};
+
+const openFileUploadWindow = () =>
+  document.getElementById("share-information-input")?.click();
+
+interface iFile {
+  name: string;
+  path: string;
+}
+
+interface FileUploadDescriptionProps {
+  files: iFile[];
+}
+
+const FileUploadDescription: FC<FileUploadDescriptionProps> = ({ files }) => {
+  return (
+    <>
+      <p>
+        Provide your input on the methodology and data by&nbsp;
+        <Button
+          variant="link"
+          className="p-0 text-primary"
+          onClick={() => downloadFiles(files)}
+        >
+          downloading
+        </Button>
+        &nbsp;the required templates, completing them with the necessary
+        information, and&nbsp;
+        <Button
+          variant="link"
+          className="p-0 text-primary"
+          onClick={openFileUploadWindow}
+        >
+          uploading
+        </Button>
+        &nbsp;them to contribute new insights for evaluation.
+      </p>
+
+      <ol className="flex gap-4">
+        {files.map((f) => (
+          <li key={`file-${f.name}`}>
+            <Button variant="link" className="p-0" asChild>
+              <a href={f.path}>
+                <FileDownIcon className="h-5 w-5" strokeWidth={1} />
+                <span>{f.name}</span>
+              </a>
+            </Button>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+};
+
+export default FileUploadDescription;

client/src/containers/profile/file-upload/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from "react";
 
 import { useDropzone } from "react-dropzone";
 
-import { FilePlusIcon, XIcon } from "lucide-react";
+import { FileUpIcon, XIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 
 import { client } from "@/lib/query-client";
@@ -13,10 +13,18 @@ import { Card } from "@/components/ui/card";
 import { useToast } from "@/components/ui/toast/use-toast";
 
 // Array should be in this order
-const REQUIRED_FILES = [
-  "carbon-input-template.xlsx",
-  "cost-input-template.xlsx",
+export const EXCEL_FILES = [
+  {
+    name: "carbon-input-template.xlsx",
+    path: "/forms/carbon-input-template.xlsx",
+  },
+  {
+    name: "cost-input-template.xlsx",
+    path: "/forms/cost-input-template.xlsx",
+  },
 ];
+
+const REQUIRED_FILE_NAMES = EXCEL_FILES.map((f) => f.name);
 const EXCEL_EXTENSIONS = [".xlsx", ".xls"];
 const MAX_FILES = 2;
 
@@ -27,7 +35,7 @@ const FileUpload: FC = () => {
   const onDropAccepted = useCallback(
     (acceptedFiles: File[]) => {
       const validFiles = acceptedFiles.filter((file) =>
-        REQUIRED_FILES.includes(file.name),
+        REQUIRED_FILE_NAMES.includes(file.name),
       );
 
       if (validFiles.length !== acceptedFiles.length) {
@@ -64,7 +72,7 @@ const FileUpload: FC = () => {
   };
   const handleUploadClick = async () => {
     const fileNames = files.map((file) => file.name);
-    const missingFiles = REQUIRED_FILES.filter(
+    const missingFiles = REQUIRED_FILE_NAMES.filter(
       (name) => !fileNames.includes(name),
     );
 
@@ -76,7 +84,7 @@ const FileUpload: FC = () => {
     }
 
     const formData = new FormData();
-    const sortedFiles = REQUIRED_FILES.map(
+    const sortedFiles = REQUIRED_FILE_NAMES.map(
       (name) => files.find((file) => file.name === name)!,
     );
 
@@ -117,19 +125,24 @@ const FileUpload: FC = () => {
         {...getRootProps()}
         variant="secondary"
         className={cn({
-          "select-none border-dashed p-10 transition-colors": true,
+          "select-none border bg-big-stone-950 p-10 transition-colors": true,
           "bg-card": isDragActive,
           "cursor-pointer hover:bg-card": files.length < MAX_FILES,
           "cursor-not-allowed opacity-50": files.length >= MAX_FILES,
         })}
       >
-        <input {...getInputProps()} />
+        <input id="share-information-input" {...getInputProps()} />
         <div className="flex flex-col items-center gap-2">
-          <FilePlusIcon className="h-5 w-5" />
+          <FileUpIcon className="h-5 w-5" strokeWidth={1} />
           <p className="text-sm">
-            {files.length < MAX_FILES
-              ? "Drop files, or click to upload"
-              : "You've attached the maximum of 2 files"}
+            {files.length < MAX_FILES ? (
+              <>
+                Drag and drop the files or&nbsp;
+                <span className="text-primary">click</span> to upload
+              </>
+            ) : (
+              "You've attached the maximum of 2 files"
+            )}
           </p>
         </div>
       </Card>

client/src/containers/profile/index.tsx

@@ -7,13 +7,13 @@ import Link from "next/link";
 import { useSetAtom } from "jotai";
 
 import CustomProjects from "@/containers/profile/custom-projects";
-import FileUpload from "@/containers/profile/file-upload";
+import FileUpload, { EXCEL_FILES } from "@/containers/profile/file-upload";
+import FileUploadDescription from "@/containers/profile/file-upload/description";
 import ProfileSection from "@/containers/profile/profile-section";
 import ProfileSidebar from "@/containers/profile/profile-sidebar";
 import { intersectingAtom } from "@/containers/profile/store";
 import UserDetails from "@/containers/profile/user-details";
 
-import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import DeleteAccount from "src/containers/profile/delete-account";
@@ -40,33 +40,9 @@ const sections = [
     Component: CustomProjects,
   },
   {
-    id: "data-upload",
-    title: "Data upload",
-    description: (
-      <>
-        <p>
-          Download the required templates, fill them in, and upload the
-          completed files below.
-        </p>
-
-        <ol className="flex gap-4">
-          <li>
-            <Button variant="link" className="p-0" asChild>
-              <a href="/forms/carbon-input-template.xlsx">
-                carbon-input-template.xlsx
-              </a>
-            </Button>
-          </li>
-          <li>
-            <Button variant="link" className="p-0" asChild>
-              <a href="/forms/cost-input-template.xlsx">
-                cost-input-template.xlsx
-              </a>
-            </Button>
-          </li>
-        </ol>
-      </>
-    ),
+    id: "share-information",
+    title: "Share information",
+    description: <FileUploadDescription files={EXCEL_FILES} />,
     Component: FileUpload,
   },
   {