Merge 2f05c3c into f578a79

src/components/CollectionDetailPage/CollectionAction/CollectionAction.container.ts

@@ -0,0 +1,46 @@
+import { connect } from 'react-redux'
+import { getData as getAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors'
+import { getData as getWallet } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { RootState } from 'modules/common/types'
+import { getCollectionId } from 'modules/location/selectors'
+import { getCollection, getCollectionItems, getStatusByCollectionId } from 'modules/collection/selectors'
+import { openModal } from 'modules/modal/actions'
+import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionAction.types'
+import CollectionAction from './CollectionAction'
+import { fetchCurationRequest } from 'modules/curation/actions'
+import { getIsValidCuration } from 'modules/curation/selectors'
+
+const mapState = (state: RootState): MapStateProps => {
+  const collectionId = getCollectionId(state) || ''
+  const collection = getCollection(state, collectionId)!
+  const statusByCollectionId = getStatusByCollectionId(state)
+
+  return {
+    wallet: getWallet(state)!,
+    collection,
+    items: getCollectionItems(state, collectionId),
+    authorizations: getAuthorizations(state),
+    status: statusByCollectionId[collection.id],
+    isAwaitingCuration: getIsValidCuration(state, collection.id)
+  }
+}
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onPublish: (collectionId: string) => dispatch(openModal('PublishCollectionModal', { collectionId })),
+  onPush: (collectionId: string) => dispatch(openModal('PushCollectionChangesModal', { collectionId })),
+  onInit: (collectionId: string) => dispatch(fetchCurationRequest(collectionId))
+})
+
+const merge = (stateProps: MapStateProps, dispatchProps: MapDispatchProps) => {
+  const { id: collectionId } = stateProps.collection
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    onPublish: () => dispatchProps.onPublish(collectionId),
+    onPush: () => dispatchProps.onPush(collectionId),
+    onInit: () => dispatchProps.onInit(collectionId)
+  }
+}
+
+export default connect(mapState, mapDispatch, merge)(CollectionAction)

src/components/CollectionDetailPage/CollectionAction/CollectionAction.tsx

@@ -0,0 +1,119 @@
+import React, { ReactNode, useEffect, useState } from 'react'
+import { Network } from '@dcl/schemas'
+import { ChainButton } from 'decentraland-dapps/dist/containers'
+import { getChainIdByNetwork } from 'decentraland-dapps/dist/lib/eth'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Button, Popup } from 'decentraland-ui'
+import { env } from 'decentraland-commons'
+import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization/types'
+import { hasAuthorization } from 'decentraland-dapps/dist/modules/authorization/utils'
+import { ContractName, getContract } from 'decentraland-transactions'
+import { AuthorizationModal } from 'components/AuthorizationModal'
+import { SyncStatus } from 'modules/item/types'
+import { isComplete } from 'modules/item/utils'
+import { Props } from './CollectionAction.types'
+
+const CollectionAction = ({ wallet, collection, items, authorizations, status, isAwaitingCuration, onPublish, onPush, onInit }: Props) => {
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
+
+  useEffect(() => {
+    onInit()
+  }, [])
+
+  const isPublishDisabled = () => {
+    return !env.get('REACT_APP_FF_WEARABLES_PUBLISH') || items.length === 0 || !items.every(isComplete)
+  }
+
+  const getAuthorization = () => {
+    const chainId = wallet.networks.MATIC.chainId
+    const contractAddress = getContract(ContractName.MANAToken, chainId).address
+    const authorizedAddress = getContract(ContractName.CollectionManager, chainId).address
+
+    return {
+      type: AuthorizationType.ALLOWANCE,
+      address: wallet.address,
+      contractName: ContractName.MANAToken,
+      contractAddress,
+      authorizedAddress,
+      chainId
+    }
+  }
+
+  const handlePublish = () => {
+    const hasAuth = hasAuthorization(authorizations, getAuthorization())
+    if (hasAuth) onPublish()
+    setIsAuthModalOpen(!hasAuth)
+  }
+
+  const handleAuthModalClose = () => {
+    setIsAuthModalOpen(false)
+  }
+
+  const isPublishUnderReview = collection.isPublished && !collection.isApproved
+  const isPublishedAndApproved = collection.isPublished && collection.isApproved
+  const isCollectionUnsynced = isPublishedAndApproved && status === SyncStatus.UNSYNCED
+  const areChangesUnderReview = isCollectionUnsynced && isAwaitingCuration
+  const canChangesBePushed = isCollectionUnsynced && !isAwaitingCuration
+
+  let button: ReactNode
+
+  if (areChangesUnderReview) {
+    button = <UnderReview type="push" />
+  } else if (canChangesBePushed) {
+    button = (
+      <Button primary compact onClick={onPush}>
+        {t('collection_detail_page.push_changes')}
+      </Button>
+    )
+  } else if (isPublishedAndApproved) {
+    button = (
+      <Button secondary compact disabled={true}>
+        {t('global.published')}
+      </Button>
+    )
+  } else if (isPublishUnderReview) {
+    button = <UnderReview type="publish" />
+  } else {
+    button = (
+      <ChainButton disabled={isPublishDisabled()} primary compact onClick={handlePublish} chainId={getChainIdByNetwork(Network.MATIC)}>
+        {t('collection_detail_page.publish')}
+      </ChainButton>
+    )
+  }
+
+  return (
+    <>
+      {button}
+      <AuthorizationModal
+        open={isAuthModalOpen}
+        authorization={getAuthorization()}
+        onProceed={handlePublish}
+        onCancel={handleAuthModalClose}
+      />
+    </>
+  )
+}
+
+type UnderReviewProps = {
+  type: 'publish' | 'push'
+}
+
+const UnderReview = ({ type }: UnderReviewProps) => (
+  <Popup
+    content={t(type === 'publish' ? 'collection_detail_page.cant_mint' : 'collection_detail_page.cant_push')}
+    position="top center"
+    trigger={
+      <div className="popup-button">
+        <Button secondary compact disabled={true}>
+          {t('collection_detail_page.under_review')}
+        </Button>
+      </div>
+    }
+    hideOnScroll={true}
+    on="hover"
+    inverted
+    flowing={type === 'publish'}
+  />
+)
+
+export default React.memo(CollectionAction)

src/components/CollectionDetailPage/CollectionAction/CollectionAction.types.ts

@@ -0,0 +1,27 @@
+import { Dispatch } from 'react'
+import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { OpenModalAction } from 'modules/modal/actions'
+import { Collection } from 'modules/collection/types'
+import { Item, SyncStatus } from 'modules/item/types'
+import { FetchCurationRequestAction } from 'modules/curation/actions'
+
+export type Props = {
+  wallet: Wallet
+  collection: Collection
+  items: Item[]
+  authorizations: Authorization[]
+  status: SyncStatus
+  isAwaitingCuration: boolean
+  onPublish: () => void
+  onPush: () => void
+  onInit: () => void
+}
+
+export type MapStateProps = Pick<Props, 'wallet' | 'collection' | 'items' | 'authorizations' | 'status' | 'isAwaitingCuration'>
+export type MapDispatchProps = {
+  onPublish: (collectionId: string) => void
+  onPush: (collectionId: string) => void
+  onInit: (collectionId: string) => void
+}
+export type MapDispatch = Dispatch<OpenModalAction | FetchCurationRequestAction>

src/components/CollectionDetailPage/CollectionAction/index.ts

@@ -0,0 +1,3 @@
+import CollectionAction from './CollectionAction.container'
+
+export default CollectionAction