Gift Modal: Adjust styles for Gift Action Message (#5617)

src/assets/localization/fallback.strings

@@ -1632,4 +1632,4 @@
 "UniqueStatusProofOfOwnershipBenefitTitle" = "Proof of Ownership";
 "UniqueStatusProofOfOwnershipDescription" = "Tapping the icon of this item next to your name will show its info and owner.";
 "UniqueStatusWearButton" = "Start Wearing";
-"CollectibleStatusesCategory" = "Collectibles";
+"CollectibleStatusesCategory" = "Collectibles";

src/components/middle/MessageList.scss

@@ -340,7 +340,8 @@
     position: relative;
     margin-top: 0.5rem;
     display: flex;
-    gap: 0.25rem;
+    flex-wrap: wrap;
+    justify-content: center;
     line-height: 1.5;
     font-weight: var(--font-weight-medium);
   }
@@ -384,7 +385,7 @@
   }
 
   .action-message-user-avatar {
-    margin-left: 0.25rem;
+    margin: 0 0.25rem;
   }
 
   .action-message-subtitle {

src/components/modals/gift/GiftModal.tsx

@@ -70,7 +70,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
   isSelf,
 }) => {
   const {
-    closeGiftModal, requestConfetti,
+    closeGiftModal,
   } = getActions();
   // eslint-disable-next-line no-null/no-null
   const dialogRef = useRef<HTMLDivElement>(null);
@@ -110,29 +110,6 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
     observe: observeIntersection,
   } = useIntersectionObserver({ rootRef: scrollerRef, throttleMs: INTERSECTION_THROTTLE, isDisabled: !isOpen });
 
-  const showConfetti = useLastCallback(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (isOpen) {
-      const {
-        top, left, width, height,
-      } = dialog.querySelector('.modal-content')!.getBoundingClientRect();
-      requestConfetti({
-        top,
-        left,
-        width,
-        height,
-        withStars: true,
-      });
-    }
-  });
-
-  useEffect(() => {
-    if (renderingModal?.isCompleted) {
-      showConfetti();
-    }
-  }, [renderingModal]);
-
   useEffect(() => {
     if (!isOpen) {
       setIsHeaderHidden(true);

src/global/actions/api/payments.ts

@@ -294,7 +294,6 @@ addActionHandler('sendStarPaymentForm', async (global, actions, payload): Promis
   global = updateStarsPayment(global, { status: 'paid' }, tabId);
   setGlobal(global);
   actions.closeStarsPaymentModal({ tabId });
-  actions.closeGiftModal({ tabId });
 
   if ('channelId' in result) {
     actions.openChat({ id: result.channelId, tabId });

src/global/actions/apiUpdaters/payments.ts

@@ -77,12 +77,12 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
         const giftModalState = selectTabState(global, tabId).giftModal;
 
         if (giftModalState && inputInvoice.userIds[0] === giftModalState.forPeerId) {
-          global = updateTabState(global, {
-            giftModal: {
-              ...giftModalState,
-              isCompleted: true,
-            },
-          }, tabId);
+          actions.showNotification({
+            message: langProvider.oldTranslate('StarsGiftCompleted'),
+            tabId,
+          });
+          actions.requestConfetti({ withStars: true, tabId });
+          actions.closeGiftModal({ tabId });
         }
       }
 
@@ -100,9 +100,25 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
             },
           }, tabId);
         }
-
-        actions.requestConfetti({ withStars: true, tabId });
       }
+
+      if (inputInvoice?.type === 'stargift') {
+        if (!inputInvoice.peerId) {
+          return;
+        }
+
+        const starGiftModalState = selectTabState(global, tabId).giftModal;
+
+        if (starGiftModalState && inputInvoice.peerId === starGiftModalState.forPeerId) {
+          actions.showNotification({
+            message: langProvider.oldTranslate('StarsGiftCompleted'),
+            tabId,
+          });
+          actions.requestConfetti({ withStars: true, tabId });
+          actions.closeGiftModal({ tabId });
+        }
+      }
+
       break;
     }
 

src/global/types/tabState.ts

@@ -613,7 +613,6 @@ export type TabState = {
   };
 
   giftModal?: {
-    isCompleted?: boolean;
     forPeerId: string;
     gifts?: ApiPremiumGiftCodeOption[];
   };