feat: Don't show slots if LW payments is enabled (#3186)

Author: LautaroPetaccio

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.container.ts

@@ -13,7 +13,8 @@ import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getCollectionThirdParty, isFetchingAvailableSlots } from 'modules/thirdParty/selectors'
 import { fetchThirdPartyAvailableSlotsRequest } from 'modules/thirdParty/actions'
 import { isThirdPartyCollection } from 'modules/collection/utils'
-import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { Collection } from 'modules/collection/types'
+import { getIsLinkedWearablesPaymentsEnabled, getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
 import { getLastLocation } from 'modules/ui/location/selector'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './ThirdPartyCollectionDetailPage.types'
 import CollectionDetailPage from './ThirdPartyCollectionDetailPage'
@@ -33,6 +34,7 @@ const mapState = (state: RootState): MapStateProps => {
     wallet: getWallet(state)!,
     collection,
     isThirdPartyV2Enabled: getIsLinkedWearablesV2Enabled(state),
+    isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
     thirdParty: collection && isThirdPartyCollection(collection) ? getCollectionThirdParty(state, collection) : null,
     authorizations: getAuthorizations(state),
     isLoading:
@@ -45,7 +47,8 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
+  onNewItem: (collectionId: string) => dispatch(openModal('CreateItemsModal', { collectionId })),
+  onEditName: (collection: Collection) => dispatch(openModal('EditCollectionNameModal', { collection })),
   onFetchAvailableSlots: (thirdPartyId: string) => dispatch(fetchThirdPartyAvailableSlotsRequest(thirdPartyId))
 })
 

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx

@@ -64,8 +64,10 @@ export default function ThirdPartyCollectionDetailPage({
   totalItems,
   isLoading,
   isThirdPartyV2Enabled,
-  onOpenModal,
+  isLinkedWearablesPaymentsEnabled,
   onFetchAvailableSlots,
+  onNewItem,
+  onEditName,
   isLoadingAvailableSlots
 }: Props) {
   const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>({})
@@ -100,14 +102,16 @@ export default function ThirdPartyCollectionDetailPage({
   }, [page, shouldFetchAllPages, items, thirdParty, currentPage])
 
   const handleNewItems = useCallback(() => {
-    onOpenModal('CreateItemsModal', { collectionId: collection!.id })
-  }, [collection, onOpenModal])
+    if (collection?.id) {
+      onNewItem(collection.id)
+    }
+  }, [collection?.id, onNewItem])
 
   const handleEditName = useCallback(() => {
     if (collection) {
-      onOpenModal('EditCollectionNameModal', { collection })
+      onEditName(collection)
     }
-  }, [collection, onOpenModal])
+  }, [collection, onEditName])
 
   const handleGoBack = useCallback(() => {
     if (isComingFromTheCollectionsPage) {
@@ -255,16 +259,21 @@ export default function ThirdPartyCollectionDetailPage({
                     </CopyToClipboard>
                   </Info>
                 )}
-                <Info title={t('third_party_collection_detail_page.slots_short')} info={t('third_party_collection_detail_page.slots_long')}>
-                  <div className={styles.slotsIcon} />
-                  {isLoadingAvailableSlots ? (
-                    <Loader active inline size="tiny" />
-                  ) : (
-                    <span>
-                      {thirdParty.availableSlots ?? 0} / {thirdParty.maxItems}
-                    </span>
-                  )}
-                </Info>
+                {!isLinkedWearablesPaymentsEnabled && (
+                  <Info
+                    title={t('third_party_collection_detail_page.slots_short')}
+                    info={t('third_party_collection_detail_page.slots_long')}
+                  >
+                    <div className={styles.slotsIcon} />
+                    {isLoadingAvailableSlots ? (
+                      <Loader active inline size="tiny" />
+                    ) : (
+                      <span>
+                        {thirdParty.availableSlots ?? 0} / {thirdParty.maxItems}
+                      </span>
+                    )}
+                  </Info>
+                )}
                 <Button inverted onClick={handleNewItems}>
                   <Icon name="plus" />
                   {t('third_party_collection_detail_page.new_items')}
@@ -393,6 +402,8 @@ export default function ThirdPartyCollectionDetailPage({
       collection,
       selectedItems,
       isLoadingAvailableSlots,
+      isLinkedWearablesPaymentsEnabled,
+      isThirdPartyV2Enabled,
       totalItems,
       page,
       handleSelectItemChange,

src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.types.ts

@@ -2,7 +2,7 @@ import { Dispatch } from 'redux'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types'
 import { FetchCollectionsParams } from 'lib/api/builder'
-import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
+import { OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Item } from 'modules/item/types'
 import { Collection } from 'modules/collection/types'
 import { ThirdParty } from 'modules/thirdParty/types'
@@ -29,7 +29,9 @@ export type Props = {
   isLoading: boolean
   isLoadingAvailableSlots: boolean
   isThirdPartyV2Enabled: boolean
-  onOpenModal: typeof openModal
+  isLinkedWearablesPaymentsEnabled: boolean
+  onNewItem: (collectionId: string) => unknown
+  onEditName: (collection: Collection) => unknown
   onFetchAvailableSlots: typeof fetchThirdPartyAvailableSlotsRequest
 }
 
@@ -49,6 +51,7 @@ export type MapStateProps = Pick<
   | 'thirdParty'
   | 'isLoading'
   | 'isLoadingAvailableSlots'
+  | 'isLinkedWearablesPaymentsEnabled'
   | 'authorizations'
   | 'currentPage'
   | 'totalItems'
@@ -57,7 +60,7 @@ export type MapStateProps = Pick<
   | 'paginatedData'
   | 'lastLocation'
 >
-export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onFetchAvailableSlots'>
+export type MapDispatchProps = Pick<Props, 'onNewItem' | 'onEditName' | 'onFetchAvailableSlots'>
 export type MapDispatch = Dispatch<
   OpenModalAction | FetchItemCurationsRequestAction | FetchThirdPartyAvailableSlotsRequestAction | FetchCollectionItemsRequestAction
 >