TelegramPWA/src/components/modals/gift/message/GiftDescriptionRemoveModal.tsx
Alexander Zinchuk cf8a933b4c Gifts: Support remove gift message (#6404)
Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>
2025-11-06 11:36:44 +01:00

95 lines
2.9 KiB
TypeScript

import { memo } from '../../../../lib/teact/teact';
import { getActions, withGlobal } from '../../../../global';
import type { ApiPeer } from '../../../../api/types';
import type { TabState } from '../../../../global/types';
import { selectPeer } from '../../../../global/selectors';
import { formatStarsAsIcon } from '../../../../util/localization/format';
import { renderGiftOriginalInfo } from '../../../common/helpers/giftOriginalInfo';
import useCurrentOrPrev from '../../../../hooks/useCurrentOrPrev';
import useLang from '../../../../hooks/useLang';
import useLastCallback from '../../../../hooks/useLastCallback';
import ConfirmDialog from '../../../ui/ConfirmDialog';
import styles from './GiftDescriptionRemoveModal.module.scss';
export type OwnProps = {
modal: TabState['giftDescriptionRemoveModal'];
};
type StateProps = {
senderPeer?: ApiPeer;
recipientPeer?: ApiPeer;
};
const GiftDescriptionRemoveModal = ({
modal, senderPeer, recipientPeer,
}: OwnProps & StateProps) => {
const {
closeGiftDescriptionRemoveModal, removeGiftDescription, openChat,
} = getActions();
const lang = useLang();
const isOpen = Boolean(modal);
const renderingModal = useCurrentOrPrev(modal);
const renderingSenderPeer = useCurrentOrPrev(senderPeer);
const renderingRecipientPeer = useCurrentOrPrev(recipientPeer);
const openChatHandler = useLastCallback((id: string) => {
closeGiftDescriptionRemoveModal();
openChat({ id });
});
const handleConfirm = useLastCallback(() => {
if (!renderingModal?.gift.inputGift || !renderingModal.price) return;
removeGiftDescription({
gift: renderingModal.gift.inputGift,
price: renderingModal.price,
});
});
if (!renderingModal || !renderingRecipientPeer) return undefined;
const { price, details } = renderingModal;
const description = renderGiftOriginalInfo({
originalDetails: details, recipient: renderingRecipientPeer,
sender: renderingSenderPeer, onOpenChat: openChatHandler, lang,
});
return (
<ConfirmDialog
isOpen={isOpen}
title={lang('RemoveGiftDescriptionTitle')}
onClose={closeGiftDescriptionRemoveModal}
confirmLabel={lang('RemoveGiftDescriptionButton', {
amount: formatStarsAsIcon(lang, price, { asFont: true }),
}, { withNodes: true })}
confirmHandler={handleConfirm}
>
<div className={styles.confirmText}>{lang('RemoveGiftDescriptionConfirmText')}</div>
{Boolean(description) && (
<div className={styles.giftDescription}>
{description}
</div>
)}
</ConfirmDialog>
);
};
export default memo(
withGlobal<OwnProps>((global, { modal }): Complete<StateProps> => {
const senderPeer = modal?.details.senderId ? selectPeer(global, modal.details.senderId) : undefined;
const recipientPeer = modal?.details.recipientId ? selectPeer(global, modal.details.recipientId) : undefined;
return {
senderPeer,
recipientPeer,
};
})(GiftDescriptionRemoveModal),
);