Gift Modal: Fix build market collectible gifts (#6441)

src/components/main/Main.tsx

@@ -217,7 +217,7 @@ const Main = ({
     loadPremiumGifts,
     loadTonGifts,
     loadStarGifts,
-    loadMyCollectibleGifts,
+    loadMyUniqueGifts,
     loadDefaultTopicIcons,
     loadAddedStickers,
     loadFavoriteStickers,
@@ -333,7 +333,7 @@ const Main = ({
       loadPremiumGifts();
       loadTonGifts();
       loadStarGifts();
-      loadMyCollectibleGifts();
+      loadMyUniqueGifts();
       loadAvailableEffects();
       loadBirthdayNumbersStickers();
       loadRestrictedEmojiStickers();

src/components/modals/gift/GiftModal.tsx

@@ -58,8 +58,8 @@ type StateProps = {
   boostPerSentGift?: number;
   starGiftsById?: Record<string, ApiStarGiftRegular>;
   starGiftIdsByCategory?: Record<StarGiftCategory, string[]>;
-  myCollectibleGiftsById?: Record<string, ApiSavedStarGift>;
+  myUniqueGiftsById?: Record<string, ApiSavedStarGift>;
-  myCollectibleGiftIds?: string[];
+  myUniqueGiftIds?: string[];
   starBalance?: ApiStarsAmount;
   peer?: ApiPeer;
   isSelf?: boolean;
@@ -81,8 +81,8 @@ const GiftModal: FC<OwnProps & StateProps> = ({
   modal,
   starGiftsById,
   starGiftIdsByCategory,
-  myCollectibleGiftsById,
+  myUniqueGiftsById,
-  myCollectibleGiftIds,
+  myUniqueGiftIds,
   starBalance,
   peer,
   isSelf,
@@ -99,7 +99,7 @@ const GiftModal: FC<OwnProps & StateProps> = ({
     loadResaleGifts,
     openGiftInMarket,
     closeResaleGiftsMarket,
-    loadMyCollectibleGifts,
+    loadMyUniqueGifts,
     openGiftTransferConfirmModal,
   } = getActions();
   const dialogRef = useRef<HTMLDivElement>();
@@ -235,7 +235,7 @@ const GiftModal: FC<OwnProps & StateProps> = ({
       });
     }
 
-    if (selectedCategory === 'resale') {
+    if (selectedCategory === 'collectible') {
       return lang('StarGiftDescriptionCollectibles');
     }
 
@@ -293,8 +293,8 @@ const GiftModal: FC<OwnProps & StateProps> = ({
   });
 
   const handleMyGiftClick = useLastCallback((gift: ApiStarGift) => {
-    if (gift.type === 'starGift' || !myCollectibleGiftsById || !peer?.id) return;
+    if (gift.type === 'starGift' || !myUniqueGiftsById || !peer?.id) return;
-    const savedGift = myCollectibleGiftsById[gift.id];
+    const savedGift = myUniqueGiftsById[gift.id];
 
     openGiftTransferConfirmModal({
       gift: savedGift,
@@ -303,23 +303,23 @@ const GiftModal: FC<OwnProps & StateProps> = ({
   });
 
   const handleLoadMore = useLastCallback(() => {
-    if (selectedCategory === 'myCollectibles') {
+    if (selectedCategory === 'myUnique') {
-      loadMyCollectibleGifts();
+      loadMyUniqueGifts();
     }
   });
 
   function renderStarGifts() {
-    if (selectedCategory === 'myCollectibles') {
+    if (selectedCategory === 'myUnique') {
       return (
         <InfiniteScroll
           className={styles.starGiftsContainer}
-          items={myCollectibleGiftIds}
+          items={myUniqueGiftIds}
           onLoadMore={handleLoadMore}
           scrollContainerClosest={`.${styles.main}`}
           itemSelector=".starGiftItem"
         >
-          {myCollectibleGiftsById && myCollectibleGiftIds?.map((giftId) => {
+          {myUniqueGiftsById && myUniqueGiftIds?.map((giftId) => {
-            const savedGift = myCollectibleGiftsById[giftId];
+            const savedGift = myUniqueGiftsById[giftId];
             if (!savedGift) return undefined;
 
             return (
@@ -356,8 +356,7 @@ const GiftModal: FC<OwnProps & StateProps> = ({
         {starGiftsById && filteredGiftIds?.flatMap((giftId) => {
           const gift = starGiftsById[giftId];
           const shouldShowResale = Boolean(gift.availabilityResale) && !areUniqueStarGiftsDisallowed;
-          const shouldDuplicateAsResale = selectedCategory !== 'resale'
+          const shouldDuplicateAsResale = shouldShowResale && !gift.isSoldOut && !areLimitedStarGiftsDisallowed;
-            && shouldShowResale && !gift.isSoldOut && !areLimitedStarGiftsDisallowed;
 
           const elements = [
             <GiftItemStar
@@ -464,9 +463,10 @@ const GiftModal: FC<OwnProps & StateProps> = ({
             {renderStarGiftsHeader()}
             {renderStarGiftsDescription()}
             <StarGiftCategoryList
-              areCollectibleStarGiftsDisallowed={areUniqueStarGiftsDisallowed}
+              areUniqueStarGiftsDisallowed={areUniqueStarGiftsDisallowed}
+              areLimitedStarGiftsDisallowed={areLimitedStarGiftsDisallowed}
               isSelf={isSelf}
-              hasCollectible={Boolean(myCollectibleGiftIds?.length)}
+              hasMyUnique={Boolean(myUniqueGiftIds?.length)}
               onCategoryChanged={onCategoryChanged}
             />
             <Transition
@@ -602,8 +602,8 @@ export default memo(withGlobal<OwnProps>((global, { modal }): Complete<StateProp
     boostPerSentGift: global.appConfig.boostsPerSentGift,
     starGiftsById: starGifts?.byId,
     starGiftIdsByCategory: starGifts?.idsByCategory,
-    myCollectibleGiftsById: global.myCollectibleGifts?.byId,
+    myUniqueGiftsById: global.myUniqueGifts?.byId,
-    myCollectibleGiftIds: global.myCollectibleGifts?.ids,
+    myUniqueGiftIds: global.myUniqueGifts?.ids,
     starBalance: stars?.balance,
     peer,
     isSelf,
@@ -617,6 +617,6 @@ export default memo(withGlobal<OwnProps>((global, { modal }): Complete<StateProp
 
 function getCategoryKey(category: StarGiftCategory) {
   if (category === 'all') return 0;
-  if (category === 'myCollectibles') return 1;
+  if (category === 'myUnique') return 1;
   return 2;
 }

src/components/modals/gift/StarGiftCategoryList.tsx

@@ -13,9 +13,10 @@ import useLang from '../../../hooks/useLang';
 import styles from './StarGiftCategoryList.module.scss';
 
 type OwnProps = {
-  areCollectibleStarGiftsDisallowed?: boolean;
+  areUniqueStarGiftsDisallowed?: boolean;
+  areLimitedStarGiftsDisallowed?: boolean;
   isSelf?: boolean;
-  hasCollectible?: boolean;
+  hasMyUnique?: boolean;
   onCategoryChanged: (category: StarGiftCategory) => void;
 };
 
@@ -26,15 +27,16 @@ type StateProps = {
 const StarGiftCategoryList = ({
   idsByCategory,
   onCategoryChanged,
-  areCollectibleStarGiftsDisallowed,
+  areUniqueStarGiftsDisallowed,
+  areLimitedStarGiftsDisallowed,
   isSelf,
-  hasCollectible,
+  hasMyUnique,
 }: StateProps & OwnProps) => {
   const ref = useRef<HTMLDivElement>();
 
   const lang = useLang();
 
-  const hasResale = idsByCategory && idsByCategory['resale'].length > 0;
+  const hasCollectible = Boolean(idsByCategory?.collectible?.length);
 
   const [selectedCategory, setSelectedCategory] = useState<StarGiftCategory>('all');
 
@@ -47,8 +49,8 @@ const StarGiftCategoryList = ({
 
   function renderCategoryName(category: StarGiftCategory) {
     if (category === 'all') return lang('AllGiftsCategory');
-    if (category === 'myCollectibles') return lang('GiftCategoryMyGifts');
+    if (category === 'myUnique') return lang('GiftCategoryMyGifts');
-    if (category === 'resale') return lang('GiftCategoryCollectibles');
+    if (category === 'collectible') return lang('GiftCategoryCollectibles');
     return category;
   }
 
@@ -71,13 +73,14 @@ const StarGiftCategoryList = ({
   return (
     <div ref={ref} className={buildClassName(styles.list, 'no-scrollbar')}>
       {renderCategoryItem('all')}
-      {!areCollectibleStarGiftsDisallowed && !isSelf && hasCollectible && renderCategoryItem('myCollectibles')}
+      {!areUniqueStarGiftsDisallowed && !isSelf && hasMyUnique && renderCategoryItem('myUnique')}
-      {!areCollectibleStarGiftsDisallowed && hasResale && renderCategoryItem('resale')}
+      {(!areUniqueStarGiftsDisallowed || !areLimitedStarGiftsDisallowed)
+        && hasCollectible && renderCategoryItem('collectible')}
     </div>
   );
 };
 
-export default memo(withGlobal(
+export default memo(withGlobal<OwnProps>(
   (global): Complete<StateProps> => {
     const { starGifts } = global;
 

src/global/actions/api/stars.ts

@@ -138,7 +138,8 @@ addActionHandler('loadStarGifts', async (global): Promise<void> => {
   const allStarGiftIds = Object.keys(byId);
   const allStarGifts = Object.values(byId);
 
-  const resaleStarGiftIds = allStarGifts.map((gift) => (gift.availabilityResale ? gift.id : undefined))
+  const collectibleStarGiftIds = allStarGifts.map((gift) => (
+    (gift.availabilityResale || (gift.isLimited && !gift.isSoldOut)) ? gift.id : undefined))
     .filter(Boolean);
 
   global = {
@@ -147,23 +148,23 @@ addActionHandler('loadStarGifts', async (global): Promise<void> => {
       byId,
       idsByCategory: {
         all: allStarGiftIds,
-        resale: resaleStarGiftIds,
+        collectible: collectibleStarGiftIds,
-        myCollectibles: [],
+        myUnique: [],
       },
     },
   };
   setGlobal(global);
 });
 
-addActionHandler('loadMyCollectibleGifts', async (global, actions, payload): Promise<void> => {
+addActionHandler('loadMyUniqueGifts', async (global, actions, payload): Promise<void> => {
   const { shouldRefresh } = payload || {};
   const currentUserId = global.currentUserId;
   if (!currentUserId) return;
 
-  const currentMyCollectibleGifts = global.myCollectibleGifts;
+  const currentMyUniqueGifts = global.myUniqueGifts;
-  const localNextOffset = currentMyCollectibleGifts?.nextOffset;
+  const localNextOffset = currentMyUniqueGifts?.nextOffset;
 
-  if (currentMyCollectibleGifts && !localNextOffset && !shouldRefresh) return;
+  if (currentMyUniqueGifts && !localNextOffset && !shouldRefresh) return;
 
   const peer = selectPeer(global, currentUserId);
   if (!peer) return;
@@ -196,13 +197,13 @@ addActionHandler('loadMyCollectibleGifts', async (global, actions, payload): Pro
 
   global = {
     ...global,
-    myCollectibleGifts: {
+    myUniqueGifts: {
       byId: {
-        ...!shouldRefresh && (global.myCollectibleGifts?.byId || {}),
+        ...!shouldRefresh && (global.myUniqueGifts?.byId || {}),
         ...byId,
       },
       ids: [
-        ...!shouldRefresh ? (global.myCollectibleGifts?.ids || []) : [],
+        ...!shouldRefresh ? (global.myUniqueGifts?.ids || []) : [],
         ...ids,
       ],
       nextOffset: result.nextOffset,
@@ -372,7 +373,7 @@ addActionHandler('reloadPeerSavedGifts', (global, actions, payload): ActionRetur
     }
   });
   if (peerId === global.currentUserId) {
-    actions.loadMyCollectibleGifts({ shouldRefresh: true });
+    actions.loadMyUniqueGifts({ shouldRefresh: true });
   }
 });
 

src/global/types/actions.ts

@@ -2556,7 +2556,7 @@ export interface ActionPayloads {
   loadPremiumGifts: undefined;
   loadTonGifts: undefined;
   loadStarGifts: undefined;
-  loadMyCollectibleGifts: {
+  loadMyUniqueGifts: {
     shouldRefresh?: true;
   } | undefined;
   updateResaleGiftsFilter: {

src/global/types/globalState.ts

@@ -312,7 +312,7 @@ export type GlobalState = {
     byId: Record<string, ApiStarGiftRegular>;
     idsByCategory: Record<StarGiftCategory, string[]>;
   };
-  myCollectibleGifts?: {
+  myUniqueGifts?: {
     byId: Record<string, ApiSavedStarGift>;
     ids: string[];
     nextOffset?: string;

src/types/index.ts

@@ -670,7 +670,7 @@ export type WebPageMediaSize = 'large' | 'small';
 
 export type AttachmentCompression = 'compress' | 'original';
 
-export type StarGiftCategory = 'all' | 'myCollectibles' | 'resale';
+export type StarGiftCategory = 'all' | 'myUnique' | 'collectible';
 
 export type CallSound = (
   'join' | 'allowTalk' | 'leave' | 'connecting' | 'incoming' | 'end' | 'connect' | 'busy' | 'ringing'