Skip to content

Commit cfb309f

Browse files
LautaroPetaccioLautaroPetaccio
authored
feat: Show collection creation selector with payments (#3155)
1 parent 8e1dbca commit cfb309f

13 files changed

+57
-32
lines changed

‎src/components/CollectionsPage/CollectionsPage.container.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { setCollectionPageView } from 'modules/ui/collection/actions'
1414
import { getCollectionPageView } from 'modules/ui/collection/selectors'
1515
import { isThirdPartyManager } from 'modules/thirdParty/selectors'
1616
import { fetchItemsRequest, fetchOrphanItemRequest, FETCH_ITEMS_REQUEST, FETCH_ORPHAN_ITEM_REQUEST } from 'modules/item/actions'
17-
import { getIsCampaignEnabled, getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
17+
import { getIsCampaignEnabled, getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
1818
import { fetchCollectionsRequest, FETCH_COLLECTIONS_REQUEST } from 'modules/collection/actions'
1919
import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionsPage.types'
2020
import CollectionsPage from './CollectionsPage'
@@ -37,7 +37,7 @@ const mapState = (state: RootState): MapStateProps => {
3737
isLoadingCollections: isLoadingType(getLoadingCollections(state), FETCH_COLLECTIONS_REQUEST),
3838
isLoadingItems: isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST),
3939
isLoadingOrphanItem: isLoadingType(getLoadingItems(state), FETCH_ORPHAN_ITEM_REQUEST),
40-
isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
40+
isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
4141
isCampaignEnabled: getIsCampaignEnabled(state),
4242
hasUserOrphanItems: hasUserOrphanItems(state)
4343
}

‎src/components/CollectionsPage/CollectionsPage.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default function CollectionsPage(props: Props) {
5050
isLoadingItems,
5151
isLoadingCollections,
5252
isLoadingOrphanItem,
53-
isLinkedWearablesV2Enabled,
53+
isLinkedWearablesPaymentsEnabled,
5454
isThirdPartyManager,
5555
onFetchCollections,
5656
onFetchOrphanItem,
@@ -77,15 +77,15 @@ export default function CollectionsPage(props: Props) {
7777

7878
const handleNewThirdPartyCollection = useCallback(() => {
7979
onOpenModal('CreateThirdPartyCollectionModal')
80-
}, [onOpenModal, isLinkedWearablesV2Enabled])
80+
}, [onOpenModal])
8181

8282
const handleNewCollection = useCallback(() => {
83-
if (isLinkedWearablesV2Enabled) {
83+
if (isLinkedWearablesPaymentsEnabled) {
8484
onOpenModal('CreateCollectionSelectorModal')
8585
} else {
8686
onOpenModal('CreateCollectionModal')
8787
}
88-
}, [onOpenModal, isLinkedWearablesV2Enabled])
88+
}, [onOpenModal, isLinkedWearablesPaymentsEnabled])
8989

9090
const handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
9191
setSearch(data.value)
@@ -221,7 +221,7 @@ export default function CollectionsPage(props: Props) {
221221
isClearable
222222
/>
223223
<Row className="actions" grow={false}>
224-
{isThirdPartyManager && !isLinkedWearablesV2Enabled && (
224+
{isThirdPartyManager && !isLinkedWearablesPaymentsEnabled && (
225225
<Button className="action-button" size="small" basic onClick={handleNewThirdPartyCollection}>
226226
{t('collections_page.new_third_party_collection')}
227227
</Button>
@@ -236,7 +236,7 @@ export default function CollectionsPage(props: Props) {
236236
</Row>
237237
</div>
238238
)
239-
}, [search, isThirdPartyManager, isLinkedWearablesV2Enabled, handleSearchChange, handleOpenEditor, handleNewCollection])
239+
}, [search, isThirdPartyManager, isLinkedWearablesPaymentsEnabled, handleSearchChange, handleOpenEditor, handleNewCollection])
240240

241241
const renderViewActions = useCallback(() => {
242242
return (

‎src/components/CollectionsPage/CollectionsPage.types.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export type Props = {
1919
items: Item[]
2020
collections: Collection[]
2121
collectionsPaginationData: CollectionPaginationData | null
22-
isLinkedWearablesV2Enabled: boolean
22+
isLinkedWearablesPaymentsEnabled: boolean
2323
itemsPaginationData?: ItemPaginationData | null
2424
view: CollectionPageView
2525
isThirdPartyManager: boolean
@@ -49,7 +49,7 @@ export type MapStateProps = Pick<
4949
| 'isLoadingOrphanItem'
5050
| 'isCampaignEnabled'
5151
| 'hasUserOrphanItems'
52-
| 'isLinkedWearablesV2Enabled'
52+
| 'isLinkedWearablesPaymentsEnabled'
5353
>
5454
export type MapDispatchProps = Pick<Props, 'onSetView' | 'onOpenModal' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'>
5555
export type MapDispatch = Dispatch<

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { getLoading, getError } from 'modules/collection/selectors'
77
import { SAVE_COLLECTION_REQUEST, saveCollectionRequest } from 'modules/collection/actions'
88
import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateCollectionModal.types'
99
import CreateCollectionModal from './CreateCollectionModal'
10-
import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
10+
import { getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
1111

1212
const mapState = (state: RootState): MapStateProps => ({
1313
address: getAddress(state),
1414
isLoading: isLoadingType(getLoading(state), SAVE_COLLECTION_REQUEST),
15-
isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
15+
isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
1616
error: getError(state)
1717
})
1818

‎src/components/Modals/CreateCollectionModal/CreateCollectionModal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default class CreateCollectionModal extends React.PureComponent<Props, St
3838
}
3939

4040
render() {
41-
const { name, onClose, onBack, isLoading, error, isLinkedWearablesV2Enabled } = this.props
41+
const { name, onClose, onBack, isLoading, error, isLinkedWearablesPaymentsEnabled } = this.props
4242
const { collectionName } = this.state
4343
const isDisabled = !collectionName || isLoading
4444

@@ -53,7 +53,7 @@ export default class CreateCollectionModal extends React.PureComponent<Props, St
5353
title={t('create_collection_modal.title')}
5454
subtitle={t('create_collection_modal.subtitle')}
5555
onClose={onClose}
56-
onBack={isLinkedWearablesV2Enabled ? onBack : undefined}
56+
onBack={isLinkedWearablesPaymentsEnabled ? onBack : undefined}
5757
/>
5858
<Form onSubmit={this.handleSubmit} disabled={isDisabled}>
5959
<ModalContent>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ export type Props = ModalProps & {
88
isLoading: boolean
99
onSubmit: typeof saveCollectionRequest
1010
onBack: () => void
11-
isLinkedWearablesV2Enabled: boolean
11+
isLinkedWearablesPaymentsEnabled: boolean
1212
error: string | null
1313
}
1414

1515
export type State = {
1616
collectionName: string
1717
}
1818

19-
export type MapStateProps = Pick<Props, 'address' | 'isLoading' | 'error' | 'isLinkedWearablesV2Enabled'>
19+
export type MapStateProps = Pick<Props, 'address' | 'isLoading' | 'error' | 'isLinkedWearablesPaymentsEnabled'>
2020
export type MapDispatchProps = Pick<Props, 'onSubmit' | 'onBack'>
2121
export type OwnProps = Pick<Props, 'metadata' | 'onClose' | 'name'>
2222
export type MapDispatch = Dispatch<SaveCollectionRequestAction | OpenModalAction>

‎src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Props } from './CreateCollectionSelectorModal.types'
99
import styles from './CreateCollectionSelectorModal.module.css'
1010
import { CREATE_BUTTON_TEST_ID, DISABLED_DATA_TEST_ID } from './constants'
1111

12-
const CollectionSelection = ({
12+
const CollectionSelectionModal = ({
1313
image,
1414
title,
1515
subtitle,
@@ -60,16 +60,14 @@ export const CreateCollectionSelectorModal = (props: Props) => {
6060
/>
6161
<ModalContent>
6262
<div className={styles.modalContent}>
63-
<CollectionSelection
64-
// Temporary image for the collections
63+
<CollectionSelectionModal
6564
image={collectionsImage}
6665
title={t('create_collection_selector_modal.collection.title')}
6766
subtitle={t('create_collection_selector_modal.collection.subtitle')}
6867
onCreate={onCreateCollection}
6968
learnMoreUrl={COLLECTIONS_LEARN_MORE_URL}
7069
/>
71-
<CollectionSelection
72-
// Temporary image for the linked wearables collections
70+
<CollectionSelectionModal
7371
image={linkedCollectionsImage}
7472
title={t('create_collection_selector_modal.linked_collection.title')}
7573
subtitle={t('create_collection_selector_modal.linked_collection.subtitle')}

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import { getLoading } from 'modules/collection/selectors'
66
import { openModal } from 'decentraland-dapps/dist/modules/modal'
77
import { SAVE_COLLECTION_REQUEST, saveCollectionRequest } from 'modules/collection/actions'
88
import { getWalletThirdParties, getError } from 'modules/thirdParty/selectors'
9-
import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
9+
import { getIsLinkedWearablesV2Enabled, getIsLinkedWearablesPaymentsEnabled } from 'modules/features/selectors'
1010
import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateThirdPartyCollectionModal.types'
1111
import { CreateThirdPartyCollectionModal } from './CreateThirdPartyCollectionModal'
1212

1313
const mapState = (state: RootState): MapStateProps => ({
1414
ownerAddress: getAddress(state),
1515
thirdParties: getWalletThirdParties(state),
1616
error: getError(state),
17-
isThirdPartyV2Enabled: getIsLinkedWearablesV2Enabled(state),
17+
isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
18+
isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
1819
isCreatingCollection: isLoadingType(getLoading(state), SAVE_COLLECTION_REQUEST)
1920
})
2021

‎src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx

+16-5
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,18 @@ const imgSrcByNetwork = {
3131
}
3232

3333
export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
34-
const { name, thirdParties, onClose, isCreatingCollection, isThirdPartyV2Enabled, error, ownerAddress, onSubmit, onBack } = props
34+
const {
35+
name,
36+
thirdParties,
37+
onClose,
38+
isCreatingCollection,
39+
isLinkedWearablesV2Enabled,
40+
isLinkedWearablesPaymentsEnabled,
41+
error,
42+
ownerAddress,
43+
onSubmit,
44+
onBack
45+
} = props
3546
const [collectionName, setCollectionName] = useState('')
3647
const [hasCollectionIdBeenTyped, setHasCollectionIdBeenTyped] = useState(false)
3748
const [collectionId, setCollectionId] = useState('')
@@ -137,7 +148,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
137148
}, [onSubmit, collectionId, collectionName, selectedThirdParty, ownerAddress, analytics])
138149

139150
const isSubmittable = collectionName && ownerAddress && !isCollectionNameInvalid && collectionId
140-
!isCreatingCollection && (isThirdPartyV2Enabled ? selectedContract && selectedNetwork : true)
151+
!isCreatingCollection && (isLinkedWearablesV2Enabled ? selectedContract && selectedNetwork : true)
141152
const isLoading = isCreatingCollection
142153

143154
return (
@@ -146,7 +157,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
146157
title={t('create_third_party_collection_modal.title')}
147158
subtitle={t('create_third_party_collection_modal.subtitle')}
148159
onClose={isLoading ? undefined : onClose}
149-
onBack={isLoading ? undefined : onBack}
160+
onBack={isLoading || !isLinkedWearablesPaymentsEnabled ? undefined : onBack}
150161
/>
151162
<Form onSubmit={handleSubmit} disabled={!isSubmittable}>
152163
<ModalContent>
@@ -157,7 +168,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
157168
disabled={isLoading}
158169
value={selectedThirdParty.id}
159170
/>
160-
{isThirdPartyV2Enabled && thirdPartyContractNetworkOptions.length > 0 && (
171+
{isLinkedWearablesV2Enabled && thirdPartyContractNetworkOptions.length > 0 && (
161172
<div className={styles.contract}>
162173
<SelectField
163174
label={t('global.network')}
@@ -185,7 +196,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
185196
message={isCollectionNameInvalid ? t('create_third_party_collection_modal.name_field.message') : ''}
186197
disabled={isLoading}
187198
/>
188-
{!isThirdPartyV2Enabled && (
199+
{!isLinkedWearablesV2Enabled && (
189200
<Field
190201
label={t('create_third_party_collection_modal.collection_id_field.label')}
191202
placeholder="0x..."

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,17 @@ export type Props = ModalProps & {
88
ownerAddress?: string
99
thirdParties: ThirdParty[]
1010
isCreatingCollection: boolean
11-
isThirdPartyV2Enabled: boolean
11+
isLinkedWearablesPaymentsEnabled: boolean
12+
isLinkedWearablesV2Enabled: boolean
1213
error: string | null
1314
onSubmit: typeof saveCollectionRequest
1415
onBack: () => void
1516
}
1617

17-
export type MapStateProps = Pick<Props, 'ownerAddress' | 'thirdParties' | 'error' | 'isCreatingCollection' | 'isThirdPartyV2Enabled'>
18+
export type MapStateProps = Pick<
19+
Props,
20+
'ownerAddress' | 'thirdParties' | 'error' | 'isCreatingCollection' | 'isLinkedWearablesPaymentsEnabled' | 'isLinkedWearablesV2Enabled'
21+
>
1822
export type MapDispatchProps = Pick<Props, 'onSubmit' | 'onBack'>
1923
export type OwnProps = Pick<Props, 'metadata' | 'onClose'>
2024
export type MapDispatch = Dispatch<SaveCollectionRequestAction | OpenModalAction>

‎src/modules/features/selectors.spec.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
33
import { RootState } from 'modules/common/types'
44
import {
55
getIsCreateSceneOnlySDK7Enabled,
6+
getIsLinkedWearablesPaymentsEnabled,
67
getIsLinkedWearablesV2Enabled,
78
getIsMaintenanceEnabled,
89
getIsPublishCollectionsWertEnabled,
@@ -67,7 +68,8 @@ const ffSelectors = [
6768
{ selector: getIsVrmOptOutEnabled, app: ApplicationName.BUILDER, feature: FeatureName.VRM_OPTOUT },
6869
{ selector: getIsWearableUtilityEnabled, app: ApplicationName.DAPPS, feature: FeatureName.WEARABLE_UTILITY },
6970
{ selector: getIsWorldContributorEnabled, app: ApplicationName.BUILDER, feature: FeatureName.WORLD_CONTRIBUTOR },
70-
{ selector: getIsLinkedWearablesV2Enabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_V2 }
71+
{ selector: getIsLinkedWearablesV2Enabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_V2 },
72+
{ selector: getIsLinkedWearablesPaymentsEnabled, app: ApplicationName.BUILDER, feature: FeatureName.LINKED_WEARABLES_PAYMENTS }
7173
]
7274

7375
ffSelectors.forEach(({ selector, app, feature }) => {

‎src/modules/features/selectors.ts

+8
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,11 @@ export const getIsLinkedWearablesV2Enabled = (state: RootState) => {
6969
return false
7070
}
7171
}
72+
73+
export const getIsLinkedWearablesPaymentsEnabled = (state: RootState) => {
74+
try {
75+
return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.LINKED_WEARABLES_PAYMENTS)
76+
} catch (e) {
77+
return false
78+
}
79+
}

‎src/modules/features/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ export enum FeatureName {
88
VRM_OPTOUT = 'vrm-optout',
99
WEARABLE_UTILITY = 'wearable-utility',
1010
WORLD_CONTRIBUTOR = 'world-contributor',
11-
LINKED_WEARABLES_V2 = 'linked-wearables-v2'
11+
LINKED_WEARABLES_V2 = 'linked-wearables-v2',
12+
LINKED_WEARABLES_PAYMENTS = 'linked-wearables-payments'
1213
}

0 commit comments

Comments
 (0)