feat(GlobalCarousel/Share): move download buttom to share jumper

components/system/components/GlobalCarousel/jumpers/Share.js

@@ -6,9 +6,13 @@ import * as SVG from "~/common/svg";
 import * as Utilities from "~/common/utilities";
 import * as Constants from "~/common/constants";
 import * as MobileJumper from "~/components/core/MobileJumper";
-import * as Strings from "~/common/strings";
+import * as Events from "~/common/custom-events";
+import * as UserBehaviors from "~/common/user-behaviors";
 
 import { css } from "@emotion/react";
+import { LoaderSpinner } from "~/components/system/components/Loaders";
+
+/* -----------------------------------------------------------------------------------------------*/
 
 const STYLES_SHARING_BUTTON = (theme) => css`
   ${Styles.BUTTON_RESET};
@@ -24,30 +28,12 @@ const STYLES_SHARING_BUTTON = (theme) => css`
     color: ${theme.semantic.textBlack};
   }
 `;
-
-const getSlateURLFromViewer = ({ viewer, file }) => {
-  const username = viewer?.username;
-  const rootUrl = window?.location?.origin;
-  const collection = viewer.slates.find(
-    (item) => item.isPublic && item.objects.some((object) => object.id === file.id)
-  );
-
-  return `${rootUrl}/${username}/${collection.slatename}?cid=${file.cid}`;
-};
-
 const getFileURL = ({ file }) => {
   const rootUrl = window?.location?.origin;
 
   return `${rootUrl}/_/object/${file.id}`;
 };
 
-const getSlateURLFromData = ({ data, file }) => {
-  const username = data?.user?.username;
-  const rootUrl = window?.location?.origin;
-
-  return `${rootUrl}/${username}/${data.slatename}?cid=${file.cid}`;
-};
-
 function FileSharingButtons({ file, data, viewer }) {
   const fileName = file?.name || file?.filename;
   const username = data?.user?.username || viewer?.username;
@@ -93,12 +79,52 @@ function FileSharingButtons({ file, data, viewer }) {
           {copyState.isCidCopied ? "Copied" : "Copy CID "}
         </System.P2>
       </button>
+      <DownloadButton file={file} viewer={viewer} />
     </>
   );
 }
 
 /* -----------------------------------------------------------------------------------------------*/
 
+const useFileDownload = ({ file, viewer, downloadRef }) => {
+  const [isDownloading, setDownloadingState] = React.useState(false);
+  const handleDownload = async () => {
+    if (!viewer) {
+      Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
+      return;
+    }
+    setDownloadingState(true);
+    const response = await UserBehaviors.download(file, downloadRef);
+    setDownloadingState(false);
+    Events.hasError(response);
+  };
+
+  return [isDownloading, handleDownload];
+};
+
+function DownloadButton({ file, viewer, ...props }) {
+  /**NOTE(amine):  UserBehaviors.download creates a link and clicks it to trigger a download,
+                   which triggers the Boundary component and closes the jumper. 
+                   To fix this we create the link inside the downloadRef element */
+  const downloadRef = React.useRef();
+  const [isDownloading, handleDownload] = useFileDownload({ file, viewer, downloadRef });
+
+  return !file.isLink ? (
+    <div ref={downloadRef}>
+      <button css={STYLES_SHARING_BUTTON} onClick={handleDownload} {...props}>
+        {isDownloading ? (
+          <LoaderSpinner style={{ height: 16, width: 16 }} />
+        ) : (
+          <SVG.Download width={16} />
+        )}
+        <System.P2 style={{ marginLeft: 12 }}>Download File</System.P2>
+      </button>
+    </div>
+  ) : null;
+}
+
+/* -----------------------------------------------------------------------------------------------*/
+
 const STYLES_SHARE_FILE_FOOTER = (theme) => css`
   ${Styles.HORIZONTAL_CONTAINER_CENTERED};
   position: absolute;