Skip to content

Commit

Permalink
Merge pull request #4896 from Giveth/disable-continue-creation
Browse files Browse the repository at this point in the history
disable continue creation button and add tooltip for unverified users in draft project page
  • Loading branch information
maryjaf authored Dec 15, 2024
2 parents 7bea3e4 + cb1b173 commit f0acee4
Showing 1 changed file with 78 additions and 17 deletions.
95 changes: 78 additions & 17 deletions src/components/views/project/ProjectIndex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,15 @@ const ProjectIndex: FC<IProjectBySlug> = () => {
const hasStellarAddress = recipientAddresses?.some(
address => address.chainType === ChainType.STELLAR,
);
const [isTooltipVisible, setTooltipVisible] = useState(false);

const handleMouseEnter = () => {
setTooltipVisible(true);
};

const handleMouseLeave = () => {
setTooltipVisible(false);
};

const isEmailVerifiedStatus = isAdmin ? isAdminEmailVerified : true;

Expand Down Expand Up @@ -258,19 +267,42 @@ const ProjectIndex: FC<IProjectBySlug> = () => {
{activeTab === 2 && <ProjectDonations />}
{activeTab === 3 && <ProjectGIVPowerIndex />}
{isDraft && (
<Flex $justifyContent='flex-end'>
<ContinueCreationButton
label={formatMessage({
id: 'label.continue_creation',
})}
buttonType='primary'
type='submit'
onClick={() =>
router.push(
idToProjectEdit(projectData?.id || ''),
)
}
/>
<Flex
$justifyContent='flex-end'
style={{ position: 'relative' }}
>
{/* Show tooltip only when the button is disabled (email not verified) */}
{!isEmailVerifiedStatus && (
<TooltipWrapper
isTooltipVisible={isTooltipVisible}
>
{formatMessage({
id: 'label.email_tooltip',
})}
</TooltipWrapper>
)}

{/* Wrapper for hover events */}
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<ContinueCreationButton
label={formatMessage({
id: 'label.continue_creation',
})}
disabled={!isEmailVerifiedStatus} // Button disabled when email is not verified
buttonType='primary'
type='submit'
onClick={() =>
router.push(
idToProjectEdit(
projectData?.id || '',
),
)
}
/>
</div>
</Flex>
)}
<ProjectDevouchBox />
Expand Down Expand Up @@ -318,10 +350,6 @@ const Separator = styled.hr`
margin: 40px 0;
`;

const ContinueCreationButton = styled(Button)`
align-self: flex-end;
`;

const MobileContainer = styled.div<{ $hasActiveRound: boolean }>`
padding: ${props =>
props.$hasActiveRound ? '0 26px 26px 26px' : '0 26px'};
Expand Down Expand Up @@ -387,5 +415,38 @@ const LinkItem = styled(P)<{ color: string }>`
font-weight: 500;
text-transform: capitalize;
`;
const ContinueCreationButton = styled(Button)`
align-self: flex-end;
position: relative;
cursor: pointer;
`;
interface TooltipWrapperProps {
isTooltipVisible: boolean;
top?: string;
left?: string;
}
const TooltipWrapper = styled.div<TooltipWrapperProps>`
visibility: ${isTooltipVisible => (isTooltipVisible ? 'visible' : 'hidden')};
opacity: ${({ isTooltipVisible }) => (isTooltipVisible ? 1 : 0)};
position: absolute;
bottom: -35px;
left: buttonRect.left + window.scrollX + 10;
transform: translateX(-50%);
background: #1a1a1a;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
transition: 'opacity 0.2s ease';
z-index: 1000;
/* Tooltip on hover */
${ContinueCreationButton}:hover & {
opacity: 1;
visibility: visible;
display: 'inline-block', // Ensures it wraps the button
cursor: !isEmailVerifiedStatus ? 'not-allowed' : 'pointer'
}
`;

export default ProjectIndex;

0 comments on commit f0acee4

Please sign in to comment.