Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Oct 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/i18n/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
27 changes: 27 additions & 0 deletions src/script/components/BannerPortal/BannerPortal.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* 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 portalContainerCss: CSSObject = {
zIndex: 1000,
position: 'fixed',
boxShadow: '0px 0px 12px 0px var(--background-fade-32)',
borderRadius: '0.5rem',
};
69 changes: 69 additions & 0 deletions src/script/components/BannerPortal/BannerPortal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* 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, useRef} from 'react';

import {createPortal} from 'react-dom';

import {useActiveWindowState} from 'src/script/hooks/useActiveWindow';

import {portalContainerCss} from './BannerPortal.styles';

interface Props {
onClose: () => void;
positionX?: number;
positionY?: number;
children: ReactNode;
e-maad marked this conversation as resolved.
Show resolved Hide resolved
}

export const BannerPortal = ({onClose, positionX = 0, positionY = 0, children}: Props) => {
const bannerRef = useRef<HTMLDivElement | null>(null);

const {activeWindow} = useActiveWindowState.getState();

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (bannerRef.current && !bannerRef.current.contains(event.target as Node)) {
onClose();
}
};

activeWindow.document.addEventListener('mousedown', handleClickOutside);
return () => {
activeWindow.document.removeEventListener('mousedown', handleClickOutside);
};
}, [activeWindow.document, onClose]);

const updateRef = (element: HTMLDivElement) => {
bannerRef.current = element;

if (!element) {
return;
}

element.style.top = `${positionY - element.clientHeight}px`;
};

return createPortal(
<div ref={updateRef} css={{...portalContainerCss, left: positionX}}>
{children}
</div>,
activeWindow.document.body,
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export const ConversationSidebar = ({
conversationRepository={conversationRepository}
onClickPreferences={onClickPreferences}
showNotificationsBadge={showNotificationsBadge}
selfUser={selfUser}
/>
</FadingScrollbar>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -52,6 +57,7 @@ interface ConversationTabsProps {
currentTab: SidebarTabs;
onClickPreferences: () => void;
showNotificationsBadge?: boolean;
selfUser: User;
}

export const ConversationTabs = ({
Expand All @@ -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 =>
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/*
* 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 {SidebarStatus, 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>
);
};

const PADDING_X = 40;
const PADDING_Y = 34;

export const TeamCreationBanner = () => {
const [isBannerVisible, setIsBannerVisible] = useState(false);
const [position, setPosition] = useState<{x: number; y: number}>({x: 0, y: 0});
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 === SidebarStatus.OPEN) {
return <Banner />;
}

return (
<>
<IconButton css={iconButtonCss} onClick={clickHandler}>
<Icon.InfoIcon />
</IconButton>
{isBannerVisible && (
<BannerPortal
// Position + padding
positionX={position.x + PADDING_X}
positionY={position.y + PADDING_Y}
onClose={() => setIsBannerVisible(false)}
>
<Banner />
</BannerPortal>
)}
</>
);
};
Loading