Premium gift service message

src/components/chat/bubbles.ts

@@ -134,6 +134,9 @@ import toggleDisability from '../../helpers/dom/toggleDisability';
 import {copyTextToClipboard} from '../../helpers/clipboard';
 import liteMode from '../../helpers/liteMode';
 import getMediaDurationFromMessage from '../../lib/appManagers/utils/messages/getMediaDurationFromMessage';
+import wrapLocalSticker from '../wrappers/localSticker';
+import {LottieAssetName} from '../../lib/rlottie/lottieLoader';
+import clamp from '../../helpers/number/clamp';
 
 export const USER_REACTIONS_INLINE = false;
 const USE_MEDIA_TAILS = false;
@@ -3926,11 +3929,63 @@ export default class ChatBubbles {
           promise = peerTitle.update({peerId: action.channel_id.toPeerId(true), wrapOptions});
           s.append(i18n('ChatMigration.To', [peerTitle.element]));
         } else {
-          s.append(await wrapMessageActionTextNew({
+          promise = wrapMessageActionTextNew({
             message,
             ...wrapOptions
-          }));
+          }).then((el) => s.append(el));
         }
+
+        if(action._ === 'messageActionGiftPremium') {
+          const content = bubbleContainer.cloneNode(false) as HTMLElement;
+          content.classList.add('bubble-premium-gift-container');
+          content.style.height = '12.875rem';
+          content.style.width = '12.5rem';
+
+          const service = s.cloneNode(false) as HTMLElement;
+          service.classList.add('bubble-premium-gift-wrapper');
+
+          const size = 160;
+
+          const months = action.months;
+
+          const durationAssetMap: {[key: number]: LottieAssetName} = {
+            3: 'Gift3',
+            6: 'Gift6',
+            12: 'Gift12'
+          };
+
+          const assetName = durationAssetMap[clamp(months, 3, 12)];
+
+          const promise = wrapLocalSticker({
+            width: size,
+            height: size,
+            assetName,
+            middleware,
+            loop: false,
+            autoplay: liteMode.isAvailable('stickers_chat')
+          }).then(({container, promise}) => {
+            container.classList.add('bubble-premium-gift-sticker');
+            container.style.position = 'relative';
+            container.style.width = container.style.height = size + 'px';
+            service.prepend(container);
+            return promise;
+          });
+
+          const isYears = months >= 12 && !(months % 12);
+          const duration = i18n(isYears ? 'Years' : 'Months', [isYears ? months / 12 : months]);
+
+          const title = i18n('ActionGiftPremiumTitle');
+          const subtitle = i18n('ActionGiftPremiumSubtitle', [duration]);
+          title.classList.add('text-bold');
+
+          service.append(title, subtitle);
+          loadPromises.push(promise);
+
+          content.append(service);
+          bubbleContainer.after(content);
+        }
+
+        loadPromises.push(promise);
       }
       bubbleContainer.append(s);
 

src/components/wrappers/localSticker.ts

@@ -4,38 +4,67 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+import {Middleware} from '../../helpers/middleware';
 import {MyDocument} from '../../lib/appManagers/appDocsManager';
 import {AppManagers} from '../../lib/appManagers/managers';
+import lottieLoader, {LottieAssetName} from '../../lib/rlottie/lottieLoader';
+import RLottiePlayer from '../../lib/rlottie/rlottiePlayer';
 import rootScope from '../../lib/rootScope';
 import wrapSticker from './sticker';
 
-export default async function wrapLocalSticker({emoji, width, height, managers = rootScope.managers}: {
+export default async function wrapLocalSticker({
+  emoji,
+  width,
+  height,
+  assetName,
+  middleware,
+  managers = rootScope.managers,
+  loop = false,
+  autoplay = true
+}: {
   doc?: MyDocument,
-  url?: string,
+  // url?: string,
   emoji?: string,
+  assetName?: LottieAssetName,
   width: number,
   height: number,
-  managers?: AppManagers
+  managers?: AppManagers,
+  middleware?: Middleware,
+  autoplay?: boolean,
+  loop?: false
 }) {
   const container = document.createElement('div');
+  container.classList.add('media-sticker-wrapper');
 
-  const doc = await managers.appStickersManager.getAnimatedEmojiSticker(emoji);
-  if(doc) {
-    wrapSticker({
+  let playerPromise: Promise<RLottiePlayer>;
+  if(assetName) {
+    playerPromise = lottieLoader.loadAnimationAsAsset({
+      container,
+      loop,
+      autoplay,
+      width,
+      height,
+      noCache: true,
+      middleware
+    }, assetName).then((animation) => {
+      return lottieLoader.waitForFirstFrame(animation);
+    });
+  } else if(emoji) {
+    const doc = await managers.appStickersManager.getAnimatedEmojiSticker(emoji);
+    if(doc) playerPromise = wrapSticker({
       doc,
       div: container,
-      loop: false,
-      play: true,
+      loop,
+      play: autoplay,
       width,
       height,
       emoji,
-      managers
-    }).then(() => {
-      // this.animation = player;
+      managers,
+      middleware
+    }).then((result) => {
+      return result.render as Promise<RLottiePlayer>;
     });
-  } else {
-    container.classList.add('media-sticker-wrapper');
   }
 
-  return {container};
+  return {container, promise: playerPromise};
 }

src/components/wrappers/messageActionTextNew.ts

@@ -10,7 +10,8 @@ import wrapMessageActionTextNewUnsafe from './messageActionTextNewUnsafe';
 export type WrapMessageActionTextOptions = {
   message: MyMessage,
   plain?: boolean,
-  noLinks?: boolean
+  noLinks?: boolean,
+  noTextFormat?: boolean
 } & WrapSomethingOptions;
 
 export default async function wrapMessageActionTextNew<T extends WrapMessageActionTextOptions>(

src/components/wrappers/messageActionTextNewUnsafe.ts

@@ -482,6 +482,22 @@ export default async function wrapMessageActionTextNewUnsafe(options: WrapMessag
         break;
       }
 
+      case 'messageActionGiftPremium': {
+        const isMe = !!message.pFlags.out;
+        let authorElement: ReturnType<typeof getNameDivHTML>;
+        if(!isMe) {
+          authorElement = getNameDivHTML(message.fromId, plain);
+        }
+
+        args = authorElement ? [authorElement] : [];
+
+        args.push(paymentsWrapCurrencyAmount(action.amount, action.currency, false, true));
+
+        langPackKey = isMe ? 'ActionGiftOutbound' : 'ActionGiftInbound';
+
+        break;
+      }
+
       default:
         langPackKey = (langPack[_] || `[${action._}]`) as any;
         break;

src/components/wrappers/messageForReply.ts

@@ -211,7 +211,8 @@ export default async function wrapMessageForReply<T extends WrapMessageForReplyO
     const actionWrapped = await wrapMessageActionTextNew({
       message: (message as Message.messageService),
       plain,
-      noLinks: true
+      noLinks: true,
+      noTextFormat: true
     });
 
     if(actionWrapped) {

src/config/app.ts

@@ -21,7 +21,7 @@ const App = {
   version: process.env.VERSION,
   versionFull: process.env.VERSION_FULL,
   build: +process.env.BUILD,
-  langPackVersion: '1.0.3',
+  langPackVersion: '1.0.4',
   langPack: 'webk',
   langPackCode: 'en',
   domains: MAIN_DOMAINS,

src/lang.ts

@@ -945,6 +945,10 @@ const lang = {
   'GiftTelegramPremiumDescription': 'Give **%1$s** access to exclusive features with **Telegram Premium**.',
   'PricePerMonth': '%1$s / month',
   'GiftSubscriptionFor': 'Gift Subscription for %1$s',
+  'ActionGiftInbound': 'un1 sent you a gift for **un2**',
+  'ActionGiftOutbound': 'You have sent a gift for **un2**',
+  'ActionGiftPremiumTitle': 'Telegram Premium',
+  'ActionGiftPremiumSubtitle': 'for %1$s',
 
   // * macos
   'AccountSettings.Filters': 'Chat Folders',

src/lib/appManagers/appProfileManager.ts

@@ -672,7 +672,7 @@ export class AppProfileManager extends AppManager {
 
   public canGiftPremium(userId: UserId) {
     const user = this.appUsersManager.getUser(userId);
-    if(user?.pFlags?.premium || true) {
+    if(user?.pFlags?.premium) {
       return false;
     }
 

src/lib/rlottie/lottieLoader.ts

@@ -4,8 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
-import type {LiteModeKey} from '../../helpers/liteMode';
-import animationIntersector, {AnimationItemGroup} from '../../components/animationIntersector';
+import animationIntersector from '../../components/animationIntersector';
 import {MOUNT_CLASS_TO} from '../../config/debug';
 import pause from '../../helpers/schedulers/pause';
 import {logger, LogTypes} from '../logger';
@@ -21,7 +20,8 @@ export type LottieAssetName = 'EmptyFolder' | 'Folders_1' | 'Folders_2' |
   'TwoFactorSetupMonkeyClose' | 'TwoFactorSetupMonkeyCloseAndPeek' |
   'TwoFactorSetupMonkeyCloseAndPeekToIdle' | 'TwoFactorSetupMonkeyIdle' |
   'TwoFactorSetupMonkeyPeek' | 'TwoFactorSetupMonkeyTracking' |
-  'voice_outlined2' | 'voip_filled' | 'voice_mini' | 'jolly_roger';
+  'voice_outlined2' | 'voip_filled' | 'voice_mini' | 'jolly_roger' |
+  'Gift3' | 'Gift6' | 'Gift12';
 
 export class LottieLoader {
   private loadPromise: Promise<void> = !IS_WEB_ASSEMBLY_SUPPORTED ? Promise.reject() : undefined;

src/scss/partials/_chatBubble.scss

@@ -2470,6 +2470,23 @@ $bubble-border-radius-big: 12px;
     }
   }
 
+  &-premium-gift {
+    &-container {
+      margin-top: .5rem !important;
+    }
+
+    &-wrapper {
+      flex-direction: column;
+      width: 12.5rem;
+      height: 12.875rem;
+    }
+
+    &-sticker {
+      margin-bottom: 10px;
+      margin-top: -20px;
+    }
+  }
+
   // .document-message + .audio-transcribed-text {
   //   margin-bottom: .75rem;
   // }