feat: Show collection creation selector with payments (#3155)

src/components/CollectionsPage/CollectionsPage.container.ts

@@ -14,7 +14,7 @@ import { setCollectionPageView } from 'modules/ui/collection/actions'
 import { getCollectionPageView } from 'modules/ui/collection/selectors'
 import { isThirdPartyManager } from 'modules/thirdParty/selectors'
 import { fetchItemsRequest, fetchOrphanItemRequest, FETCH_ITEMS_REQUEST, FETCH_ORPHAN_ITEM_REQUEST } from 'modules/item/actions'
-import { getIsCampaignEnabled, getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getIsCampaignEnabled, getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
 import { fetchCollectionsRequest, FETCH_COLLECTIONS_REQUEST } from 'modules/collection/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionsPage.types'
 import CollectionsPage from './CollectionsPage'
@@ -37,7 +37,7 @@ const mapState = (state: RootState): MapStateProps => {
     isLoadingCollections: isLoadingType(getLoadingCollections(state), FETCH_COLLECTIONS_REQUEST),
     isLoadingItems: isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST),
     isLoadingOrphanItem: isLoadingType(getLoadingItems(state), FETCH_ORPHAN_ITEM_REQUEST),
-    isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
+    isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
     isCampaignEnabled: getIsCampaignEnabled(state),
     hasUserOrphanItems: hasUserOrphanItems(state)
   }

src/components/CollectionsPage/CollectionsPage.tsx

@@ -50,7 +50,7 @@ export default function CollectionsPage(props: Props) {
     isLoadingItems,
     isLoadingCollections,
     isLoadingOrphanItem,
-    isLinkedWearablesV2Enabled,
+    isLinkedWearablesPaymentsEnabled,
     isThirdPartyManager,
     onFetchCollections,
     onFetchOrphanItem,
@@ -77,15 +77,15 @@ export default function CollectionsPage(props: Props) {
 
   const handleNewThirdPartyCollection = useCallback(() => {
     onOpenModal('CreateThirdPartyCollectionModal')
-  }, [onOpenModal, isLinkedWearablesV2Enabled])
+  }, [onOpenModal])
 
   const handleNewCollection = useCallback(() => {
-    if (isLinkedWearablesV2Enabled) {
+    if (isLinkedWearablesPaymentsEnabled) {
       onOpenModal('CreateCollectionSelectorModal')
     } else {
       onOpenModal('CreateCollectionModal')
     }
-  }, [onOpenModal, isLinkedWearablesV2Enabled])
+  }, [onOpenModal, isLinkedWearablesPaymentsEnabled])
 
   const handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
     setSearch(data.value)
@@ -221,7 +221,7 @@ export default function CollectionsPage(props: Props) {
           isClearable
         />
         <Row className="actions" grow={false}>
-          {isThirdPartyManager && !isLinkedWearablesV2Enabled && (
+          {isThirdPartyManager && !isLinkedWearablesPaymentsEnabled && (
             <Button className="action-button" size="small" basic onClick={handleNewThirdPartyCollection}>
               {t('collections_page.new_third_party_collection')}
             </Button>
@@ -236,7 +236,7 @@ export default function CollectionsPage(props: Props) {
         </Row>
       </div>
     )
-  }, [search, isThirdPartyManager, isLinkedWearablesV2Enabled, handleSearchChange, handleOpenEditor, handleNewCollection])
+  }, [search, isThirdPartyManager, isLinkedWearablesPaymentsEnabled, handleSearchChange, handleOpenEditor, handleNewCollection])
 
   const renderViewActions = useCallback(() => {
     return (

src/components/CollectionsPage/CollectionsPage.types.ts

@@ -19,7 +19,7 @@ export type Props = {
   items: Item[]
   collections: Collection[]
   collectionsPaginationData: CollectionPaginationData | null
-  isLinkedWearablesV2Enabled: boolean
+  isLinkedWearablesPaymentsEnabled: boolean
   itemsPaginationData?: ItemPaginationData | null
   view: CollectionPageView
   isThirdPartyManager: boolean
@@ -49,7 +49,7 @@ export type MapStateProps = Pick<
   | 'isLoadingOrphanItem'
   | 'isCampaignEnabled'
   | 'hasUserOrphanItems'
-  | 'isLinkedWearablesV2Enabled'
+  | 'isLinkedWearablesPaymentsEnabled'
 >
 export type MapDispatchProps = Pick<Props, 'onSetView' | 'onOpenModal' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'>
 export type MapDispatch = Dispatch<

src/components/Modals/CreateCollectionModal/CreateCollectionModal.container.ts

@@ -7,12 +7,12 @@ import { getLoading, getError } from 'modules/collection/selectors'
 import { SAVE_COLLECTION_REQUEST, saveCollectionRequest } from 'modules/collection/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateCollectionModal.types'
 import CreateCollectionModal from './CreateCollectionModal'
-import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => ({
   address: getAddress(state),
   isLoading: isLoadingType(getLoading(state), SAVE_COLLECTION_REQUEST),
-  isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
+  isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
   error: getError(state)
 })
 

src/components/Modals/CreateCollectionModal/CreateCollectionModal.tsx

@@ -38,7 +38,7 @@ export default class CreateCollectionModal extends React.PureComponent<Props, St
   }
 
   render() {
-    const { name, onClose, onBack, isLoading, error, isLinkedWearablesV2Enabled } = this.props
+    const { name, onClose, onBack, isLoading, error, isLinkedWearablesPaymentsEnabled } = this.props
     const { collectionName } = this.state
     const isDisabled = !collectionName || isLoading
 
@@ -53,7 +53,7 @@ export default class CreateCollectionModal extends React.PureComponent<Props, St
           title={t('create_collection_modal.title')}
           subtitle={t('create_collection_modal.subtitle')}
           onClose={onClose}
-          onBack={isLinkedWearablesV2Enabled ? onBack : undefined}
+          onBack={isLinkedWearablesPaymentsEnabled ? onBack : undefined}
         />
         <Form onSubmit={this.handleSubmit} disabled={isDisabled}>
           <ModalContent>

src/components/Modals/CreateCollectionModal/CreateCollectionModal.types.ts

@@ -8,15 +8,15 @@ export type Props = ModalProps & {
   isLoading: boolean
   onSubmit: typeof saveCollectionRequest
   onBack: () => void
-  isLinkedWearablesV2Enabled: boolean
+  isLinkedWearablesPaymentsEnabled: boolean
   error: string | null
 }
 
 export type State = {
   collectionName: string
 }
 
-export type MapStateProps = Pick<Props, 'address' | 'isLoading' | 'error' | 'isLinkedWearablesV2Enabled'>
+export type MapStateProps = Pick<Props, 'address' | 'isLoading' | 'error' | 'isLinkedWearablesPaymentsEnabled'>
 export type MapDispatchProps = Pick<Props, 'onSubmit' | 'onBack'>
 export type OwnProps = Pick<Props, 'metadata' | 'onClose' | 'name'>
 export type MapDispatch = Dispatch<SaveCollectionRequestAction | OpenModalAction>

src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.tsx

@@ -9,7 +9,7 @@ import { Props } from './CreateCollectionSelectorModal.types'
 import styles from './CreateCollectionSelectorModal.module.css'
 import { CREATE_BUTTON_TEST_ID, DISABLED_DATA_TEST_ID } from './constants'
 
-const CollectionSelection = ({
+const CollectionSelectionModal = ({
   image,
   title,
   subtitle,
@@ -60,16 +60,14 @@ export const CreateCollectionSelectorModal = (props: Props) => {
       />
       <ModalContent>
         <div className={styles.modalContent}>
-          <CollectionSelection
-            // Temporary image for the collections
+          <CollectionSelectionModal
             image={collectionsImage}
             title={t('create_collection_selector_modal.collection.title')}
             subtitle={t('create_collection_selector_modal.collection.subtitle')}
             onCreate={onCreateCollection}
             learnMoreUrl={COLLECTIONS_LEARN_MORE_URL}
           />
-          <CollectionSelection
-            // Temporary image for the linked wearables collections
+          <CollectionSelectionModal
             image={linkedCollectionsImage}
             title={t('create_collection_selector_modal.linked_collection.title')}
             subtitle={t('create_collection_selector_modal.linked_collection.subtitle')}

src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.container.ts

@@ -6,15 +6,16 @@ import { getLoading } from 'modules/collection/selectors'
 import { openModal } from 'decentraland-dapps/dist/modules/modal'
 import { SAVE_COLLECTION_REQUEST, saveCollectionRequest } from 'modules/collection/actions'
 import { getWalletThirdParties, getError } from 'modules/thirdParty/selectors'
-import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getIsLinkedWearablesV2Enabled, getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateThirdPartyCollectionModal.types'
 import { CreateThirdPartyCollectionModal } from './CreateThirdPartyCollectionModal'
 
 const mapState = (state: RootState): MapStateProps => ({
   ownerAddress: getAddress(state),
   thirdParties: getWalletThirdParties(state),
   error: getError(state),
-  isThirdPartyV2Enabled: getIsLinkedWearablesV2Enabled(state),
+  isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
+  isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
   isCreatingCollection: isLoadingType(getLoading(state), SAVE_COLLECTION_REQUEST)
 })
 

src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx

@@ -31,7 +31,18 @@ const imgSrcByNetwork = {
 }
 
 export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
-  const { name, thirdParties, onClose, isCreatingCollection, isThirdPartyV2Enabled, error, ownerAddress, onSubmit, onBack } = props
+  const {
+    name,
+    thirdParties,
+    onClose,
+    isCreatingCollection,
+    isLinkedWearablesV2Enabled,
+    isLinkedWearablesPaymentsEnabled,
+    error,
+    ownerAddress,
+    onSubmit,
+    onBack
+  } = props
   const [collectionName, setCollectionName] = useState('')
   const [hasCollectionIdBeenTyped, setHasCollectionIdBeenTyped] = useState(false)
   const [collectionId, setCollectionId] = useState('')
@@ -137,7 +148,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
   }, [onSubmit, collectionId, collectionName, selectedThirdParty, ownerAddress, analytics])
 
   const isSubmittable = collectionName && ownerAddress && !isCollectionNameInvalid && collectionId
-  !isCreatingCollection && (isThirdPartyV2Enabled ? selectedContract && selectedNetwork : true)
+  !isCreatingCollection && (isLinkedWearablesV2Enabled ? selectedContract && selectedNetwork : true)
   const isLoading = isCreatingCollection
 
   return (
@@ -146,7 +157,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
         title={t('create_third_party_collection_modal.title')}
         subtitle={t('create_third_party_collection_modal.subtitle')}
         onClose={isLoading ? undefined : onClose}
-        onBack={isLoading ? undefined : onBack}
+        onBack={isLoading || !isLinkedWearablesPaymentsEnabled ? undefined : onBack}
       />
       <Form onSubmit={handleSubmit} disabled={!isSubmittable}>
         <ModalContent>
@@ -157,7 +168,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
             disabled={isLoading}
             value={selectedThirdParty.id}
           />
-          {isThirdPartyV2Enabled && thirdPartyContractNetworkOptions.length > 0 && (
+          {isLinkedWearablesV2Enabled && thirdPartyContractNetworkOptions.length > 0 && (
             <div className={styles.contract}>
               <SelectField
                 label={t('global.network')}
@@ -185,7 +196,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
             message={isCollectionNameInvalid ? t('create_third_party_collection_modal.name_field.message') : ''}
             disabled={isLoading}
           />
-          {!isThirdPartyV2Enabled && (
+          {!isLinkedWearablesV2Enabled && (
             <Field
               label={t('create_third_party_collection_modal.collection_id_field.label')}
               placeholder="0x..."

src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.types.ts

@@ -8,13 +8,17 @@ export type Props = ModalProps & {
   ownerAddress?: string
   thirdParties: ThirdParty[]
   isCreatingCollection: boolean
-  isThirdPartyV2Enabled: boolean
+  isLinkedWearablesPaymentsEnabled: boolean
+  isLinkedWearablesV2Enabled: boolean
   error: string | null
   onSubmit: typeof saveCollectionRequest
   onBack: () => void
 }
 
-export type MapStateProps = Pick<Props, 'ownerAddress' | 'thirdParties' | 'error' | 'isCreatingCollection' | 'isThirdPartyV2Enabled'>
+export type MapStateProps = Pick<
+  Props,
+  'ownerAddress' | 'thirdParties' | 'error' | 'isCreatingCollection' | 'isLinkedWearablesPaymentsEnabled' | 'isLinkedWearablesV2Enabled'
+>
 export type MapDispatchProps = Pick<Props, 'onSubmit' | 'onBack'>
 export type OwnProps = Pick<Props, 'metadata' | 'onClose'>
 export type MapDispatch = Dispatch<SaveCollectionRequestAction | OpenModalAction>

src/modules/features/selectors.spec.ts

@@ -3,6 +3,7 @@ import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
 import { RootState } from 'modules/common/types'
 import {
   getIsCreateSceneOnlySDK7Enabled,
+  getIsLinkedWearablesPaymentsEnabled,
   getIsLinkedWearablesV2Enabled,
   getIsMaintenanceEnabled,
   getIsPublishCollectionsWertEnabled,
@@ -67,7 +68,8 @@ const ffSelectors = [
   { selector: getIsVrmOptOutEnabled, app: ApplicationName.BUILDER, feature: FeatureName.VRM_OPTOUT },
   { selector: getIsWearableUtilityEnabled, app: ApplicationName.DAPPS, feature: FeatureName.WEARABLE_UTILITY },
   { selector: getIsWorldContributorEnabled, app: ApplicationName.BUILDER, feature: FeatureName.WORLD_CONTRIBUTOR },
-  { selector: getIsLinkedWearablesV2Enabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_V2 }
+  { selector: getIsLinkedWearablesV2Enabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_V2 },
+  { selector: getIsLinkedWearablesPaymentsEnabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_PAYMENTS }
 ]
 
 ffSelectors.forEach(({ selector, app, feature }) => {

src/modules/features/selectors.ts

@@ -69,3 +69,11 @@ export const getIsLinkedWearablesV2Enabled = (state: RootState) => {
     return false
   }
 }
+
+export const getIsLinkedWearablesPaymentsEnabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.LINKED_WEARABLES_PAYMENTS)
+  } catch (e) {
+    return false
+  }
+}

src/modules/features/types.ts

@@ -8,5 +8,6 @@ export enum FeatureName {
   VRM_OPTOUT = 'vrm-optout',
   WEARABLE_UTILITY = 'wearable-utility',
   WORLD_CONTRIBUTOR = 'world-contributor',
-  LINKED_WEARABLES_V2 = 'linked-wearables-v2'
+  LINKED_WEARABLES_V2 = 'linked-wearables-v2',
+  LINKED_WEARABLES_PAYMENTS = 'linked-wearables-payments'
 }