From 32d01affbea7fe6359a08e9406ef2656eec49f08 Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Mon, 18 Jul 2022 11:18:33 +0400
Subject: [PATCH] fix(#2592): fix logic for disable button in popup payment

---
 .../components/PackageSelectionStep/index.tsx        | 12 ++++++++++--
 src/features/BuyMatchPopup/store/hooks/index.tsx     |  3 +++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
index aeabc89f..3664b63d 100644
--- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
@@ -33,7 +33,10 @@ import {
 } from '../../styled'
 
 export const PackageSelectionStep = () => {
-  const { cards, fetchCards } = useCardsStore()
+  const {
+    cards,
+    fetchCards,
+  } = useCardsStore()
   const [isOpenBrasilian, setIsOpenBrasilian] = useState(false)
   const { user } = useAuthStore()
 
@@ -42,12 +45,14 @@ export const PackageSelectionStep = () => {
     disabledBuyBtn,
     goBack,
     hasPreviousStep,
+    lastSelectedPackage,
     loader,
     match,
     onBuyClick,
     selectedPackage,
     selectedSubscription,
     setDisabledBuyBtn,
+    setLastSelectedPackage,
   } = useBuyMatchPopupStore()
 
   useEffect(() => {
@@ -61,12 +66,15 @@ export const PackageSelectionStep = () => {
   const isBrasil = user?.profile.country_code === 'BR'
 
   const onHandleClick = (e?: MouseEvent<HTMLButtonElement>) => {
-    setDisabledBuyBtn(true)
+    cards?.length
+      && lastSelectedPackage === selectedPackage?.id
+      && setDisabledBuyBtn(true)
     if (isBrasil) {
       setIsOpenBrasilian(true)
     } else {
       onBuyClick(e)
     }
+    setLastSelectedPackage(selectedPackage?.id || '')
   }
 
   return (
diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx
index 4dc583c6..38c93c6b 100644
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@@ -53,6 +53,7 @@ export const useBuyMatchPopup = () => {
   const [error, setError] = useState('')
   const [loader, setLoader] = useState(false)
   const [disabledBuyBtn, setDisabledBuyBtn] = useState(false)
+  const [lastSelectedPackage, setLastSelectedPackage] = useState('')
   const setDataHighlights = useSetRecoilState(dataForPayHighlights)
 
   const goTo = useCallback(
@@ -205,6 +206,7 @@ export const useBuyMatchPopup = () => {
     goBack,
     goTo,
     hasPreviousStep: size(steps) > 1,
+    lastSelectedPackage,
     loader,
     match,
     matchSubscriptions,
@@ -223,6 +225,7 @@ export const useBuyMatchPopup = () => {
     selectedPeriod,
     selectedSubscription,
     setDisabledBuyBtn,
+    setLastSelectedPackage,
     subscriptions,
   }
 }