From 742a743a6b7f554222402abec37cfe37119428b7 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 12 Dec 2023 12:03:43 +0700
Subject: [PATCH] Removed extra div when there's no offers to show in the
 settings group (#19322)

---
 .../src/components/settings/growth/Offers.tsx | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
index 25ac87063c..4e03bedbaa 100644
--- a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
@@ -69,26 +69,29 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
             testId='offers'
             title='Offers'
         >
-            <div>
-                <div className='grid grid-cols-1 gap-4 min-[900px]:grid-cols-3'>
-                    {latestThree.map(offer => (<OfferContainer
-                        key={offer.id}
-                        amount={offer.amount}
-                        cadence={offer.cadence}
-                        currency={offer.currency || 'USD'}
-                        goToOfferEdit={goToOfferEdit}
-                        offerCode={offer.code}
-                        offerId={offer.id}
-                        offerTitle={offer.name}
-                        redemptions={offer.redemption_count}
-                        tier={offer.tier}
-                        type={offer.type}
-                    />))}
-                </div>
-                {allOffers.length > 3 && <div className='mt-4 border-t border-t-grey-200 pt-2'>
-                    <span className='text-xs text-grey-700 dark:text-grey-600'>{allOffers.length} offers in total</span>
-                </div>}
-            </div>
+            {latestThree.length > 0 ?
+                <div>
+                    <div className='grid grid-cols-1 gap-4 min-[900px]:grid-cols-3'>
+                        {latestThree.map(offer => (<OfferContainer
+                            key={offer.id}
+                            amount={offer.amount}
+                            cadence={offer.cadence}
+                            currency={offer.currency || 'USD'}
+                            goToOfferEdit={goToOfferEdit}
+                            offerCode={offer.code}
+                            offerId={offer.id}
+                            offerTitle={offer.name}
+                            redemptions={offer.redemption_count}
+                            tier={offer.tier}
+                            type={offer.type}
+                        />))}
+                    </div>
+                    {allOffers.length > 3 && <div className='mt-4 border-t border-t-grey-200 pt-2'>
+                        <span className='text-xs text-grey-700 dark:text-grey-600'>{allOffers.length} offers in total</span>
+                    </div>}
+                </div> :
+                null
+            }
         </TopLevelGroup>
     );
 };