feat(user-migration): added banner to start migration flow [WPB-11265]

src/i18n/en-US.json

@@ -1586,5 +1586,8 @@
   "wireLinux": "{{brandName}} for Linux",
   "wireMacos": "{{brandName}} for macOS",
   "wireWindows": "{{brandName}} for Windows",
-  "wire_for_web": "{{brandName}} for Web"
-}
+  "wire_for_web": "{{brandName}} for Web",
+  "teamUpgradeBannerHeader": "Enjoy benefits of a team",
+  "teamUpgradeBannerContent": "Explore extra features for free with the same level of security.",
+  "teamUpgradeBannerButtonText": "Create Wire Team"
+}

src/script/components/BannerPortal/BannerPortal.tsx

@@ -0,0 +1,71 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {ReactNode, useEffect, useState} from 'react';
+
+import {CSSObject} from '@emotion/react';
+import {createPortal} from 'react-dom';
+
+import {useActiveWindowState} from 'src/script/hooks/useActiveWindow';
+
+export const BannerPortal = ({
+  onClose,
+  positionX = 0,
+  positionY = 0,
+  children,
+}: {
+  onClose: () => void;
+  positionX?: number;
+  positionY?: number;
+  children: ReactNode;
+}) => {
+  const [bannerRef, setBannerRef] = useState<HTMLDivElement | null>();
+
+  const {activeWindow} = useActiveWindowState.getState();
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (bannerRef && !bannerRef.contains(event.target as Node)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    activeWindow.document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      activeWindow.document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  const top = positionY - (bannerRef?.clientHeight || 0);
+  const left = positionX;
+
+  return createPortal(
+    <div ref={setBannerRef} css={{...portalContainerCss, top, left}}>
+      {children}
+    </div>,
+    activeWindow.document.body,
+  );
+};
+
+const portalContainerCss: CSSObject = {
+  zIndex: 1000,
+  position: 'fixed',
+  boxShadow: '0px 0px 12px 0px var(--background-fade-32)',
+  borderRadius: '0.5rem',
+};

src/script/page/LeftSidebar/panels/Conversations/ConversationSidebar/ConversationSidebar.tsx

@@ -93,6 +93,7 @@ export const ConversationSidebar = ({
           conversationRepository={conversationRepository}
           onClickPreferences={onClickPreferences}
           showNotificationsBadge={showNotificationsBadge}
+          selfUser={selfUser}
         />
       </FadingScrollbar>
 

src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx

@@ -17,12 +17,16 @@
  *
  */
 
+import {container} from 'tsyringe';
+
 import {GroupIcon, MessageIcon, StarIcon, ExternalLinkIcon, Tooltip, SupportIcon} from '@wireapp/react-ui-kit';
 
 import * as Icon from 'Components/Icon';
 import {ConversationRepository} from 'src/script/conversation/ConversationRepository';
+import {User} from 'src/script/entity/User';
 import {ConversationFolderTab} from 'src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationFolderTab';
 import {SidebarTabs} from 'src/script/page/LeftSidebar/panels/Conversations/useSidebarStore';
+import {TeamState} from 'src/script/team/TeamState';
 import {isDataDogEnabled} from 'Util/DataDog';
 import {getWebEnvironment} from 'Util/Environment';
 import {replaceLink, t} from 'Util/LocalizerUtil';
@@ -34,6 +38,7 @@ import {
   iconStyle,
 } from './ConversationTabs.styles';
 import {FolderIcon} from './FolderIcon';
+import {TeamCreationBanner} from './TeamCreation/TeamCreationBanner';
 
 import {Config} from '../../../../../Config';
 import {Conversation} from '../../../../../entity/Conversation';
@@ -52,6 +57,7 @@ interface ConversationTabsProps {
   currentTab: SidebarTabs;
   onClickPreferences: () => void;
   showNotificationsBadge?: boolean;
+  selfUser: User;
 }
 
 export const ConversationTabs = ({
@@ -65,7 +71,9 @@ export const ConversationTabs = ({
   currentTab,
   onClickPreferences,
   showNotificationsBadge = false,
+  selfUser,
 }: ConversationTabsProps) => {
+  const teamState = container.resolve(TeamState);
   const totalUnreadConversations = unreadConversations.length;
 
   const totalUnreadFavoriteConversations = favoriteConversations.filter(favoriteConversation =>
@@ -185,6 +193,8 @@ export const ConversationTabs = ({
         aria-owns="tab-1 tab-2"
         className="conversations-sidebar-list-footer"
       >
+        {!teamState.isInTeam(selfUser) && <TeamCreationBanner />}
+
         {!getWebEnvironment().isProduction && isDataDogEnabled() && (
           <div css={footerDisclaimer}>
             <Tooltip

src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/TeamCreation/TeamCreation.styles.ts

@@ -0,0 +1,57 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const teamUpgradeBannerContainerCss: CSSObject = {
+  border: '1px solid var(--accent-color-500)',
+  padding: '0.5rem',
+  borderRadius: '0.5rem',
+  // fixed with the width of collapsable sidebar
+  width: '203px',
+  fill: 'var(--main-color)',
+  background: 'var(--accent-color-50)',
+  '.theme-dark &': {
+    background: 'var(--accent-color-800)',
+  },
+};
+
+export const teamUpgradeBannerHeaderCss: CSSObject = {
+  lineHeight: 'var(--line-height-sm)',
+  marginLeft: '0.5rem',
+  verticalAlign: 'text-top',
+};
+
+export const teamUpgradeBannerContentCss: CSSObject = {
+  lineHeight: '.875rem',
+  marginBottom: '0.5rem',
+};
+
+export const teamUpgradeBannerButtonCss: CSSObject = {
+  margin: 0,
+  height: '2.1rem',
+  fontSize: 'var(--font-size-medium)',
+  padding: '0.25rem 0.5rem',
+  borderRadius: '12px',
+};
+
+export const iconButtonCss: CSSObject = {
+  width: '2rem',
+  marginBottom: '0.5rem',
+};

src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/TeamCreation/TeamCreationBanner.tsx

@@ -0,0 +1,86 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useState} from 'react';
+
+import {Button, ButtonVariant, IconButton} from '@wireapp/react-ui-kit';
+
+import {BannerPortal} from 'Components/BannerPortal/BannerPortal';
+import * as Icon from 'Components/Icon';
+import {t} from 'Util/LocalizerUtil';
+
+import {
+  iconButtonCss,
+  teamUpgradeBannerButtonCss,
+  teamUpgradeBannerContainerCss,
+  teamUpgradeBannerContentCss,
+  teamUpgradeBannerHeaderCss,
+} from './TeamCreation.styles';
+
+import {useSidebarStore} from '../../useSidebarStore';
+
+const Banner = () => {
+  return (
+    <div css={teamUpgradeBannerContainerCss}>
+      <Icon.InfoIcon />
+      <span className="heading-h4" css={teamUpgradeBannerHeaderCss}>
+        {t('teamUpgradeBannerHeader')}
+      </span>
+      <div className="subline" css={teamUpgradeBannerContentCss}>
+        {t('teamUpgradeBannerContent')}
+      </div>
+      <Button css={teamUpgradeBannerButtonCss} variant={ButtonVariant.SECONDARY}>
+        {t('teamUpgradeBannerButtonText')}
+      </Button>
+    </div>
+  );
+};
+
+export const TeamCreationBanner = () => {
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
+  const [position, setPosition] = useState<{x?: number; y?: number}>({});
+  const {status: sidebarStatus} = useSidebarStore();
+  const clickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsBannerVisible(true);
+    const rect = event.currentTarget.getBoundingClientRect();
+    setPosition({x: rect.x, y: rect.y});
+  };
+
+  if (sidebarStatus === 'OPEN') {
+    return <Banner />;
+  }
+
+  return (
+    <>
+      <IconButton css={iconButtonCss} onClick={clickHandler}>
+        <Icon.InfoIcon />
+      </IconButton>
+      {isBannerVisible && (
+        <BannerPortal
+          // Position + padding
+          positionX={(position.x || 0) + 40}
+          positionY={(position.y || 0) + 34}
+          onClose={() => setIsBannerVisible(false)}
+        >
+          <Banner />
+        </BannerPortal>
+      )}
+    </>
+  );
+};