From 9381b37e8a632ec2df9a5da823e81e154c60f4e4 Mon Sep 17 00:00:00 2001
From: Live <41640774+LiveZX@users.noreply.github.com>
Date: Sat, 14 Jan 2023 06:45:37 +0100
Subject: [PATCH] Add clubgifts requirements & correct sorting (#119)

---
 .../layout/vip-gifts/CatalogLayoutVipGiftsView.tsx | 14 ++++++++++++--
 .../page/layout/vip-gifts/VipGiftItemView.tsx      |  8 +++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
index 5aa5f96f..44119250 100644
--- a/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
@@ -1,5 +1,5 @@
 import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../../api';
 import { AutoGrid, Text } from '../../../../../../common';
 import { useCatalog, useNotification, usePurse } from '../../../../../../hooks';
@@ -40,12 +40,22 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
             });
         }, null);
     }, [ setCatalogOptions, showConfirm ]);
+
+    const sortGifts = useMemo(() => 
+    {
+        let gifts = clubGifts.offers.sort((a,b) => 
+        {
+            return clubGifts.getOfferExtraData(a.offerId).daysRequired - clubGifts.getOfferExtraData(b.offerId).daysRequired;
+        })
+        return gifts;
+    },[ clubGifts ]);
+    
     
     return (
         <>
             <Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
             <AutoGrid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid">
-                { (clubGifts.offers.length > 0) && clubGifts.offers.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } onSelect={ selectGift }/>) }
+                { (clubGifts.offers.length > 0) && sortGifts.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } onSelect={ selectGift } daysRequired={ clubGifts.getOfferExtraData(offer.offerId).daysRequired }/>) }
             </AutoGrid>
         </>
     )
diff --git a/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
index 6b69a503..e5798e82 100644
--- a/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
@@ -7,12 +7,13 @@ export interface VipGiftItemViewProps
 {
     offer: CatalogPageMessageOfferData;
     isAvailable: boolean;
+    daysRequired: number;
     onSelect(localizationId: string): void;
 }
 
 export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
 {
-    const { offer = null, isAvailable = false, onSelect = null } = props;
+    const { offer = null, isAvailable = false, daysRequired = 0, onSelect = null } = props;
     
     const getImageUrlForOffer = useCallback( () =>
     {
@@ -45,6 +46,11 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
         return LocalizeText(localizationKey);
     }, [ offer ]);
 
+    const getMonthsRequired = useCallback(() => 
+    {
+        return Math.floor(daysRequired / 31);
+    },[ daysRequired ]);
+
     return (
         <LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
             <LayoutImage imageUrl={ getImageUrlForOffer() } />