Web: Client: InvitePanel: Added ExternalLinks component

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -8,6 +8,7 @@ import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
 import HelpButton from "@docspace/components/help-button";
 import Link from "@docspace/components/link";
+import ToggleButton from "@docspace/components/toggle-button";
 
 import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
 import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
@@ -49,6 +50,14 @@ const StyledSubHeader = styled(Heading)`
   padding-left: 16px;
   padding-right: 16px;
   margin: 20px 0;
+
+  ${(props) =>
+    props.inline &&
+    css`
+      display: inline-flex;
+      align-items: center;
+      gap: 16px;
+    `};
 `;
 
 const StyledRow = styled.div`
@@ -109,6 +118,7 @@ const StyledInviteInputContainer = styled.div`
 
 const StyledDropDown = styled(DropDown)`
   ${(props) => props.width && `width: ${props.width}px`};
+
   .list-item {
     display: flex;
     align-items: center;
@@ -190,6 +200,11 @@ const StyledLink = styled(Link)`
 
 StyledButtons.defaultProps = { theme: Base };
 
+const StyledToggleButton = styled(ToggleButton)`
+  right: 8px;
+  margin-top: -4px;
+`;
+
 export {
   StyledBlock,
   StyledHeading,
@@ -211,4 +226,5 @@ export {
   StyledLink,
   ScrollList,
   StyledAccessSelector,
+  StyledToggleButton,
 };

packages/client/src/components/panels/InvitePanel/index.js

@@ -6,18 +6,16 @@ import Backdrop from "@docspace/components/backdrop";
 import Aside from "@docspace/components/aside";
 import Button from "@docspace/components/button";
 
-import { EmbeddingPanel } from "../index";
-
 import {
   StyledBlock,
   StyledHeading,
   StyledInvitePanel,
-  StyledSubHeader,
   StyledButtons,
 } from "./StyledInvitePanel";
 
 import ItemsList from "./sub-components/ItemsList";
 import InviteInput from "./sub-components/InviteInput";
+import ExternalLinks from "./sub-components/ExternalLinks";
 
 const InvitePanel = ({
   folders,
@@ -87,9 +85,7 @@ const InvitePanel = ({
           <StyledHeading>{t("InviteUsersToRoom")}</StyledHeading>
         </StyledBlock>
 
-        <StyledBlock noPadding>
-          <StyledSubHeader>{t("SharingPanel:ExternalLink")}</StyledSubHeader>
-        </StyledBlock>
+        <ExternalLinks t={t} />
 
         <InviteInput t={t} onClose={onClose} />
 

packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js

@@ -4,13 +4,24 @@ import { getAccessOptions } from "../utils";
 
 import { StyledAccessSelector } from "../StyledInvitePanel";
 
-const AccessSelector = ({ t, roomType, onSelectAccess, containerRef }) => {
+const AccessSelector = ({
+  t,
+  roomType,
+  onSelectAccess,
+  containerRef,
+  defaultAccess,
+}) => {
   const width = containerRef?.current?.offsetWidth - 32;
   const accessOptions = getAccessOptions(t, roomType, false, true);
+
+  const selectedOption = accessOptions.filter(
+    (access) => access.access === defaultAccess
+  )[0];
+
   return (
     <StyledAccessSelector>
       <AccessRightSelect
-        selectedOption={accessOptions[0]}
+        selectedOption={selectedOption}
         onSelect={onSelectAccess}
         accessOptions={accessOptions}
         noBorder={false}

packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js

@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useRef, memo, useCallback } from "react";
+import { inject, observer } from "mobx-react";
+import copy from "copy-to-clipboard";
+
+import toastr from "@docspace/components/toast/toastr";
+import { objectToGetParams } from "@docspace/common/utils";
+
+import InputBlock from "@docspace/components/input-block";
+import IconButton from "@docspace/components/icon-button";
+import DropDown from "@docspace/components/drop-down";
+import DropDownItem from "@docspace/components/drop-down-item";
+
+import AccessSelector from "./AccessSelector";
+
+import {
+  StyledBlock,
+  StyledSubHeader,
+  StyledInviteInput,
+  StyledInviteInputContainer,
+  StyledToggleButton,
+} from "../StyledInvitePanel";
+
+const ExternalLinks = ({
+  t,
+  hideSelector,
+  roomId,
+  defaultAccess,
+  getInvitationLinks,
+}) => {
+  const [linksVisible, setLinksVisible] = useState(false);
+  const [shareLinks, setShareLinks] = useState([]);
+  const [actionLinksVisible, setActionLinksVisible] = useState(false);
+
+  const inputsRef = useRef();
+  const actionLinkRef = useRef();
+
+  useEffect(() => {
+    getInvitationLinks(roomId).then((links) => setShareLinks(links));
+  }, [roomId]);
+
+  const toggleLinks = (e) => {
+    setLinksVisible(!linksVisible);
+
+    if (!linksVisible) copyLink(shareLinks[0].shareLink);
+  };
+
+  const onSelectAccess = (access) => {
+    console.log(access);
+  };
+
+  const copyLink = (link) => {
+    toastr.success(t("Translations:LinkCopySuccess"));
+    copy(link);
+  };
+
+  const toggleActionLinks = () => {
+    setActionLinksVisible(!actionLinksVisible);
+  };
+
+  const closeActionLinks = () => {
+    setActionLinksVisible(false);
+  };
+
+  const shareEmail = useCallback(
+    (link) => {
+      const { title, shareLink } = link;
+      const subject = t("SharingPanel:ShareEmailSubject", { title });
+      const body = t("SharingPanel:ShareEmailBody", { title, shareLink });
+
+      const mailtoLink =
+        "mailto:" +
+        objectToGetParams({
+          subject,
+          body,
+        });
+      window.open(mailtoLink, "_self");
+
+      closeActionLinks();
+    },
+    [closeActionLinks, links, t]
+  );
+
+  const links =
+    !!shareLinks.length &&
+    shareLinks?.map((link) => {
+      return (
+        <StyledInviteInputContainer key={link.id}>
+          <StyledInviteInput>
+            <InputBlock
+              scale
+              value={link.shareLink}
+              isReadOnly
+              iconName="/static/images/copy.react.svg"
+              onIconClick={() => copyLink(link.shareLink)}
+              hoverColor="#333333"
+              iconColor="#A3A9AE"
+            />
+          </StyledInviteInput>
+
+          {!hideSelector && (
+            <AccessSelector
+              t={t}
+              roomType={5}
+              defaultAccess={defaultAccess}
+              onSelectAccess={onSelectAccess}
+              containerRef={inputsRef}
+            />
+          )}
+        </StyledInviteInputContainer>
+      );
+    });
+
+  return (
+    <StyledBlock noPadding ref={inputsRef}>
+      <StyledSubHeader inline>
+        {t("SharingPanel:ExternalLink")}
+        <div style={{ position: "relative" }}>
+          <IconButton
+            size={16}
+            iconName="/static/images/media.download.react.svg"
+            hoverColor="#333333"
+            iconColor="#A3A9AE"
+            onClick={toggleActionLinks}
+          />
+          <DropDown
+            open={actionLinksVisible}
+            clickOutsideAction={closeActionLinks}
+            withBackdrop={false}
+            isDefaultMode={false}
+            fixedDirection={true}
+          >
+            <DropDownItem
+              label={`${t("SharingPanel:ShareVia")} e-mail`}
+              onClick={() => shareEmail(links[0])}
+            />
+            <DropDownItem
+              label={`${t("SharingPanel:ShareVia")} Twitter`}
+              onClick={closeActionLinks}
+            />
+          </DropDown>
+        </div>
+        <StyledToggleButton isChecked={linksVisible} onChange={toggleLinks} />
+      </StyledSubHeader>
+      {linksVisible && links}
+    </StyledBlock>
+  );
+};
+
+export default inject(({ dialogsStore, filesStore }) => {
+  const { invitePanelOptions } = dialogsStore;
+  const { getInvitationLinks } = filesStore;
+
+  return {
+    roomId: invitePanelOptions.roomId,
+    hideSelector: invitePanelOptions.hideSelector,
+    defaultAccess: invitePanelOptions.defaultAccess,
+    getInvitationLinks,
+  };
+})(observer(ExternalLinks));

packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js

@@ -218,6 +218,7 @@ const InviteInput = ({
           <AccessSelector
             t={t}
             roomType={5}
+            defaultAccess={defaultAccess}
             onSelectAccess={onSelectAccess}
             containerRef={inputsRef}
           />