TelegramPWA/src/components/middle/message/SponsoredMessageContextMenuContainer.tsx

79 lines
2.2 KiB
TypeScript

import type { FC } from '../../../lib/teact/teact';
import React, { memo, useCallback } from '../../../lib/teact/teact';
import { getActions, withGlobal } from '../../../global';
import type { ApiSponsoredMessage } from '../../../api/types';
import type { IAnchorPosition } from '../../../types';
import { selectIsCurrentUserPremium, selectIsPremiumPurchaseBlocked } from '../../../global/selectors';
import buildClassName from '../../../util/buildClassName';
import useShowTransition from '../../../hooks/useShowTransition';
import useFlag from '../../../hooks/useFlag';
import MessageContextMenu from './MessageContextMenu';
export type OwnProps = {
isOpen: boolean;
message: ApiSponsoredMessage;
anchor: IAnchorPosition;
onAboutAds: () => void;
onClose: () => void;
onCloseAnimationEnd: () => void;
};
type StateProps = {
canBuyPremium?: boolean;
};
const SponsoredMessageContextMenuContainer: FC<OwnProps & StateProps> = ({
message,
anchor,
onAboutAds,
onClose,
onCloseAnimationEnd,
canBuyPremium,
}) => {
const { openPremiumModal } = getActions();
const [isMenuOpen, , closeMenu] = useFlag(true);
const { transitionClassNames } = useShowTransition(isMenuOpen, onCloseAnimationEnd, undefined, false);
const handleAboutAdsOpen = useCallback(() => {
onAboutAds();
closeMenu();
}, [closeMenu, onAboutAds]);
const handleSponsoredHide = useCallback(() => {
closeMenu();
openPremiumModal();
onClose();
}, [closeMenu, onClose, openPremiumModal]);
if (!anchor) {
return undefined;
}
return (
<div className={buildClassName('ContextMenuContainer', transitionClassNames)}>
<MessageContextMenu
isOpen={isMenuOpen}
anchor={anchor}
message={message}
onClose={closeMenu}
onCloseAnimationEnd={closeMenu}
onAboutAds={handleAboutAdsOpen}
onSponsoredHide={canBuyPremium ? handleSponsoredHide : undefined}
/>
</div>
);
};
export default memo(withGlobal<OwnProps>(
(global): StateProps => {
return {
canBuyPremium: !selectIsCurrentUserPremium(global) && !selectIsPremiumPurchaseBlocked(global),
};
},
)(SponsoredMessageContextMenuContainer));