+
{title &&
{title}
}
@@ -105,6 +115,11 @@ const UniqueGiftHeader = ({
{subtitle}
)}
+ {savedGift && showManageButtons && (
+
+ )}
{resellPrice && (
diff --git a/src/components/modals/gift/UniqueGiftManageButtons.module.scss b/src/components/modals/gift/UniqueGiftManageButtons.module.scss
new file mode 100644
index 000000000..a8eee242f
--- /dev/null
+++ b/src/components/modals/gift/UniqueGiftManageButtons.module.scss
@@ -0,0 +1,24 @@
+.manageButtons {
+ z-index: 1;
+
+ display: flex;
+ gap: 0.5rem;
+
+ width: 100%;
+ margin-top: 1rem;
+}
+
+.manageButton {
+ flex-basis: 0;
+ flex-grow: 1;
+}
+
+.text {
+ font-size: 0.875rem;
+ font-weight: var(--font-weight-normal);
+ text-transform: lowercase;
+}
+
+.icon {
+ font-size: 1.5rem;
+}
diff --git a/src/components/modals/gift/UniqueGiftManageButtons.tsx b/src/components/modals/gift/UniqueGiftManageButtons.tsx
new file mode 100644
index 000000000..878b91642
--- /dev/null
+++ b/src/components/modals/gift/UniqueGiftManageButtons.tsx
@@ -0,0 +1,212 @@
+import { memo, useMemo } from '../../../lib/teact/teact';
+import { getActions, getGlobal, withGlobal } from '../../../global';
+
+import type {
+ ApiEmojiStatusCollectible,
+ ApiEmojiStatusType,
+ ApiSavedStarGift,
+} from '../../../api/types';
+
+import { DEFAULT_STATUS_ICON_ID } from '../../../config';
+import { STARS_CURRENCY_CODE } from '../../../config';
+import { selectTabState, selectUser } from '../../../global/selectors';
+import { formatDateAtTime } from '../../../util/dates/dateFormat';
+import { getServerTime } from '../../../util/serverTime';
+
+import useLang from '../../../hooks/useLang';
+import useLastCallback from '../../../hooks/useLastCallback';
+import useOldLang from '../../../hooks/useOldLang';
+
+import Button from '../../ui/Button';
+
+import styles from './UniqueGiftManageButtons.module.scss';
+
+type OwnProps = {
+ savedGift?: ApiSavedStarGift;
+};
+
+type StateProps = {
+ currentUserEmojiStatus?: ApiEmojiStatusType;
+ collectibleEmojiStatuses?: ApiEmojiStatusType[];
+};
+
+const UniqueGiftManageButtons = ({
+ savedGift,
+ currentUserEmojiStatus,
+ collectibleEmojiStatuses,
+}: OwnProps & StateProps) => {
+ const {
+ openGiftTransferModal,
+ openGiftResalePriceComposerModal,
+ openGiftStatusInfoModal,
+ setEmojiStatus,
+ updateStarGiftPrice,
+ showNotification,
+ closeGiftInfoModal,
+ } = getActions();
+
+ const lang = useLang();
+ const oldLang = useOldLang();
+
+ const gift = savedGift?.gift;
+ const isGiftUnique = gift?.type === 'starGiftUnique';
+ const giftResalePrice = isGiftUnique ? gift.resellPrice : undefined;
+
+ const global = getGlobal();
+ const modal = selectTabState(global).giftInfoModal;
+ const peerId = modal?.peerId;
+
+ const starGiftUniqueSlug = gift?.type === 'starGiftUnique' ? gift.slug : undefined;
+ const userCollectibleStatus = useMemo(() => {
+ if (!starGiftUniqueSlug) return undefined;
+ return collectibleEmojiStatuses?.find((status) =>
+ status.type === 'collectible' && status.slug === starGiftUniqueSlug,
+ ) as ApiEmojiStatusCollectible | undefined;
+ }, [starGiftUniqueSlug, collectibleEmojiStatuses]);
+
+ const currentUniqueEmojiStatusSlug = currentUserEmojiStatus?.type === 'collectible'
+ ? currentUserEmojiStatus.slug : undefined;
+ const canTakeOff = starGiftUniqueSlug !== undefined && currentUniqueEmojiStatusSlug === starGiftUniqueSlug;
+ const canWear = Boolean(userCollectibleStatus) && !canTakeOff;
+
+ const handleTransfer = useLastCallback(() => {
+ if (!savedGift || savedGift?.gift.type !== 'starGiftUnique') return;
+
+ if (savedGift.canTransferAt && savedGift.canTransferAt > getServerTime()) {
+ showNotification({
+ message: {
+ key: 'NotificationGiftCanTransferAt',
+ variables: { date: formatDateAtTime(oldLang, savedGift.canTransferAt * 1000) },
+ },
+ });
+ return;
+ }
+
+ openGiftTransferModal({ gift: savedGift });
+ });
+
+ const handleWear = useLastCallback(() => {
+ if (canTakeOff) {
+ setEmojiStatus({
+ emojiStatus: { type: 'regular', documentId: DEFAULT_STATUS_ICON_ID },
+ });
+ } else if (userCollectibleStatus) {
+ openGiftStatusInfoModal({ emojiStatus: userCollectibleStatus });
+ }
+ });
+
+ const handleSell = useLastCallback(() => {
+ if (!savedGift || !peerId) return;
+ if (savedGift.canResellAt && savedGift.canResellAt > getServerTime()) {
+ showNotification({
+ message: {
+ key: 'NotificationGiftCanResellAt',
+ variables: { date: formatDateAtTime(oldLang, savedGift.canResellAt * 1000) },
+ },
+ });
+ return;
+ }
+ openGiftResalePriceComposerModal({ peerId, gift: savedGift });
+ });
+
+ const handleUnlist = useLastCallback(() => {
+ if (!savedGift || savedGift.gift.type !== 'starGiftUnique' || !savedGift.inputGift) return;
+ closeGiftInfoModal();
+ updateStarGiftPrice({ gift: savedGift.inputGift, price: {
+ currency: STARS_CURRENCY_CODE, amount: 0, nanos: 0,
+ } });
+ showNotification({
+ icon: 'unlist-outline',
+ message: {
+ key: 'NotificationGiftIsUnlist',
+ variables: { gift: lang('GiftUnique', { title: savedGift.gift.title, number: savedGift.gift.number }) },
+ },
+ });
+ });
+
+ return (
+
+
+ {(canWear || !canTakeOff) && (
+
+ )}
+ {!giftResalePrice && (
+
+ )}
+ {Boolean(giftResalePrice) && (
+
+ )}
+
+ );
+};
+
+export default memo(withGlobal(
+ (global): StateProps => {
+ const { currentUserId } = global;
+ const currentUser = currentUserId ? selectUser(global, currentUserId) : undefined;
+ const currentUserEmojiStatus = currentUser?.emojiStatus;
+ const collectibleEmojiStatuses = global.collectibleEmojiStatuses?.statuses;
+
+ return {
+ currentUserEmojiStatus,
+ collectibleEmojiStatuses,
+ };
+ },
+)(UniqueGiftManageButtons));
diff --git a/src/components/modals/gift/info/GiftInfoModal.module.scss b/src/components/modals/gift/info/GiftInfoModal.module.scss
index 0b2a283bc..eae2ff5d2 100644
--- a/src/components/modals/gift/info/GiftInfoModal.module.scss
+++ b/src/components/modals/gift/info/GiftInfoModal.module.scss
@@ -36,11 +36,21 @@
color: var(--color-error);
}
+.modalContent {
+ position: relative;
+ max-height: min(92vh, 46rem) !important;
+}
+
.headerSplitButton {
position: absolute;
right: 0.375rem;
+
display: flex;
flex-direction: row;
+
+ border-radius: 1rem;
+
+ backdrop-filter: blur(0.5rem);
}
.headerButton,
diff --git a/src/components/modals/gift/info/GiftInfoModal.tsx b/src/components/modals/gift/info/GiftInfoModal.tsx
index c3819d87e..d28334652 100644
--- a/src/components/modals/gift/info/GiftInfoModal.tsx
+++ b/src/components/modals/gift/info/GiftInfoModal.tsx
@@ -145,9 +145,22 @@ const GiftInfoModal = ({
return lang('GiftInfoCollectible', { number: gift.number });
}, [gift, releasedByPeer, lang]);
+ const starGiftUniqueSlug = gift?.type === 'starGiftUnique' ? gift.slug : undefined;
+
+ const selfCollectibleStatus = useMemo(() => {
+ if (!starGiftUniqueSlug) return undefined;
+ return collectibleEmojiStatuses?.find((status) =>
+ status.type === 'collectible' && status.slug === starGiftUniqueSlug);
+ }, [starGiftUniqueSlug, collectibleEmojiStatuses]);
+
+ const isSelfUnique = Boolean(selfCollectibleStatus);
const canFocusUpgrade = Boolean(savedGift?.upgradeMsgId);
+
const canManage = !canFocusUpgrade && savedGift?.inputGift && (
- isTargetChat ? hasAdminRights : renderingTargetPeer?.id === currentUserId
+ isTargetChat ? hasAdminRights
+ : gift?.type === 'starGift'
+ ? renderingTargetPeer?.id === currentUserId
+ : gift?.ownerId === currentUserId || isSelfUnique
);
function getResalePrice(shouldPayInTon?: boolean) {
@@ -164,7 +177,8 @@ const GiftInfoModal = ({
const resellPrice = getResalePrice();
const confirmPrice = getResalePrice(shouldPayInTon);
- const canBuyGift = gift?.type === 'starGiftUnique' && gift.ownerId !== currentUserId && Boolean(resellPrice);
+ const canBuyGift = !isSelfUnique && gift?.type === 'starGiftUnique'
+ && gift.ownerId !== currentUserId && Boolean(resellPrice);
const giftOwnerTitle = (() => {
if (!isGiftUnique) return undefined;
@@ -277,7 +291,7 @@ const GiftInfoModal = ({
);
}
- if (canManage && savedGift.canUpgrade && !savedGift.upgradeMsgId) {
+ if (canManage && savedGift?.canUpgrade && !savedGift.upgradeMsgId) {
return (