GiftInfoModal: Update upgrade button (#6101)

src/assets/localization/fallback.strings

@@ -1439,6 +1439,7 @@
 "GiftInfoPeerDescriptionOutConverted_one" = "{peer} converted this gift to **{amount}** Star.";
 "GiftInfoPeerDescriptionOutConverted_other" = "{peer} converted this gift to **{amount}** Stars.";
 "GiftInfoDescriptionFreeUpgrade" = "Upgrade this gift for free to turn it to a unique collectible.";
+"GiftInfoDescriptionUpgrade" = "Upgrade this gift to turn it to a unique collectible.";
 "GiftInfoPeerDescriptionFreeUpgradeOut" = "{peer} can turn this gift to a unique collectible";
 "GiftInfoDescriptionUpgraded" = "This gift was turned into a unique collectible.";
 "GiftInfoFrom" = "From";
@@ -1487,6 +1488,7 @@
 "GiftInfoViewUpgraded" = "View Upgraded Gift";
 "GiftInfoUpgradeBadge" = "upgrade";
 "GiftInfoUpgradeForFree" = "Upgrade For Free";
+"GiftInfoUpgrade" = "Upgrade";
 "GiftInfoWithdraw" = "Withdraw";
 "GiftInfoWear" = "Wear";
 "GiftInfoTakeOff" = "Take Off";

src/components/modals/gift/info/GiftInfoModal.module.scss

@@ -16,6 +16,12 @@
   color: var(--color-text-secondary);
 }
 
+.upgradeIcon {
+  transform: rotateX(180deg);
+  margin-left: 0.25rem;
+  font-size: 1.25rem;
+}
+
 .header {
   display: flex;
   flex-direction: column;

src/components/modals/gift/info/GiftInfoModal.tsx

@@ -272,6 +272,16 @@ const GiftInfoModal = ({
       return (
         <Button size="smaller" isShiny onClick={handleOpenUpgradeModal}>
           {lang('GiftInfoUpgradeForFree')}
+          <Icon name="arrow-down-circle" className={styles.upgradeIcon} />
+        </Button>
+      );
+    }
+
+    if (canManage && savedGift.canUpgrade && !savedGift.upgradeMsgId) {
+      return (
+        <Button size="smaller" isShiny onClick={handleOpenUpgradeModal}>
+          {lang('GiftInfoUpgrade')}
+          <Icon name="arrow-down-circle" className={styles.upgradeIcon} />
         </Button>
       );
     }
@@ -316,7 +326,10 @@ const GiftInfoModal = ({
       if (isTargetChat) return undefined;
 
       if (savedGift.upgradeMsgId) return lang('GiftInfoDescriptionUpgraded');
-      if (savedGift.canUpgrade && savedGift.alreadyPaidUpgradeStars) {
+      if (canManage && savedGift.canUpgrade && savedGift.alreadyPaidUpgradeStars && !savedGift.upgradeMsgId) {
+        return lang('GiftInfoDescriptionUpgrade');
+      }
+      if (savedGift.canUpgrade && canManage) {
         return canManage
           ? lang('GiftInfoDescriptionFreeUpgrade')
           : lang('GiftInfoPeerDescriptionFreeUpgradeOut', { peer: getPeerTitle(lang, renderingTargetPeer!)! });
@@ -547,7 +560,6 @@ const GiftInfoModal = ({
           lang('GiftInfoStatus'),
           <div className={styles.giftValue}>
             {lang('GiftInfoStatusNonUnique')}
-            {canManage && <BadgeButton onClick={handleOpenUpgradeModal}>{lang('GiftInfoUpgradeBadge')}</BadgeButton>}
           </div>,
         ]);
       }

src/types/language.d.ts

@@ -1208,6 +1208,7 @@ export interface LangPair {
   'GiftInfoDescriptionRegular': undefined;
   'GiftInfoDescriptionUpgradeRegular': undefined;
   'GiftInfoDescriptionFreeUpgrade': undefined;
+  'GiftInfoDescriptionUpgrade': undefined;
   'GiftInfoDescriptionUpgraded': undefined;
   'GiftInfoFrom': undefined;
   'GiftInfoDate': undefined;
@@ -1234,6 +1235,7 @@ export interface LangPair {
   'GiftInfoViewUpgraded': undefined;
   'GiftInfoUpgradeBadge': undefined;
   'GiftInfoUpgradeForFree': undefined;
+  'GiftInfoUpgrade': undefined;
   'GiftInfoWithdraw': undefined;
   'GiftInfoWear': undefined;
   'GiftInfoTakeOff': undefined;