From 0fb3c37904bdbca6cabc865efcbcac30c0d39fe6 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 13 Feb 2025 14:28:20 +0100
Subject: [PATCH] Gift Modal: Adjust styles for Gift Action Message (#5617)

---
 src/assets/localization/fallback.strings   |  2 +-
 src/components/middle/MessageList.scss     |  5 ++--
 src/components/modals/gift/GiftModal.tsx   | 25 +----------------
 src/global/actions/api/payments.ts         |  1 -
 src/global/actions/apiUpdaters/payments.ts | 32 ++++++++++++++++------
 src/global/types/tabState.ts               |  1 -
 6 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/assets/localization/fallback.strings b/src/assets/localization/fallback.strings
index be9278104..ba9d66452 100644
--- a/src/assets/localization/fallback.strings
+++ b/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";
\ No newline at end of file
+"CollectibleStatusesCategory" = "Collectibles";
diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index b9b447f40..ce6f38873 100644
--- a/src/components/middle/MessageList.scss
+++ b/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 {
diff --git a/src/components/modals/gift/GiftModal.tsx b/src/components/modals/gift/GiftModal.tsx
index c950cd182..0ad13cb7e 100644
--- a/src/components/modals/gift/GiftModal.tsx
+++ b/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);
diff --git a/src/global/actions/api/payments.ts b/src/global/actions/api/payments.ts
index 17279c0c4..f2307078a 100644
--- a/src/global/actions/api/payments.ts
+++ b/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 });
diff --git a/src/global/actions/apiUpdaters/payments.ts b/src/global/actions/apiUpdaters/payments.ts
index 48a1ebec5..20392e0bf 100644
--- a/src/global/actions/apiUpdaters/payments.ts
+++ b/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;
     }
 
diff --git a/src/global/types/tabState.ts b/src/global/types/tabState.ts
index ac488894c..12c48ae48 100644
--- a/src/global/types/tabState.ts
+++ b/src/global/types/tabState.ts
@@ -613,7 +613,6 @@ export type TabState = {
   };
 
   giftModal?: {
-    isCompleted?: boolean;
     forPeerId: string;
     gifts?: ApiPremiumGiftCodeOption[];
   };