fix: Multi Scene Worlds (#3350)

Author: RocioCM

src/components/Modals/CreatorHubUpgradeModal/CreatorHubUpgradeModal.tsx

@@ -4,6 +4,7 @@ import { Button, ModalActions, ModalContent } from 'decentraland-ui'
 import Modal from 'decentraland-dapps/dist/containers/Modal'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { config } from 'config'
 import { Props, CreatorHubUpgradeModalMetadata } from './CreatorHubUpgradeModal.types'
 import coverImg from 'images/creator-hub-cover.png'
 import codeImg from 'images/creator-hub-step1.png'
@@ -15,7 +16,7 @@ import styles from './CreatorHubUpgradeModal.module.css'
 
 type Variant = CreatorHubUpgradeModalMetadata['variant']
 
-const CREATOR_HUB_DOWNLOAD_URL = 'https://decentraland.org/download/creator-hub/'
+const CREATOR_HUB_DOWNLOAD_URL = config.get('CREATOR_HUB_DOWNLOAD_URL')
 
 const VARIANT_CONFIG: Record<string, { images: [string, string]; translationPrefix: string }> = {
   permissions: { images: [accessImg, collaborationImg], translationPrefix: 'creator_hub_upgrade_modal.permissions_variant' },

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.container.ts

@@ -37,9 +37,7 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onPublish: (projectId: string, name: string) => {
-    return dispatch(deployToWorldRequest(projectId, name))
-  },
+  onPublish: (projectId: string, name: string) => dispatch(deployToWorldRequest(projectId, name)),
   onRecord: () => dispatch(recordMediaRequest()),
   onFetchContributableNames: () => dispatch(fetchContributableNamesRequest())
 })

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.module.css

@@ -61,6 +61,7 @@
   text-align: center;
   font-size: 14px;
   line-height: 20px;
+  white-space: pre-line;
 }
 
 .modalBodyStateActions {

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.tsx

@@ -8,7 +8,7 @@ import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { config } from 'config'
 import { isDevelopment } from 'lib/environment'
 import { locations } from 'routing/locations'
-import { Deployment } from 'modules/deployment/types'
+import { Deployment, DeploymentError } from 'modules/deployment/types'
 import CopyToClipboard from 'components/CopyToClipboard/CopyToClipboard'
 import Icon from 'components/Icon'
 import { InfoIcon } from 'components/InfoIcon'
@@ -23,6 +23,7 @@ import { ENS } from 'modules/ens/types'
 import Profile from 'components/Profile'
 import { marketplace } from 'lib/api/marketplace'
 
+const CREATOR_HUB_DOWNLOAD_URL = config.get('CREATOR_HUB_DOWNLOAD_URL')
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 const WORLDS_CONTENT_SERVER_URL = config.get('WORLDS_CONTENT_SERVER', '')
 const ENS_DOMAINS_URL = config.get('ENS_DOMAINS_URL', '')
@@ -85,7 +86,11 @@ export default function DeployToWorld({
   }, [ensList, externalNames, contributableNames, onRecord, analytics])
 
   useEffect(() => {
-    if (view === DeployToWorldView.FORM && loading && error) {
+    if (view === DeployToWorldView.FORM && loading && error === DeploymentError.MULTI_SCENE_BLOCKED) {
+      setView(DeployToWorldView.MULTI_SCENE_BLOCKED)
+      setLoading(false)
+      analytics?.track('Publish to World step', { step: DeployToWorldView.MULTI_SCENE_BLOCKED })
+    } else if (view === DeployToWorldView.FORM && loading && error) {
       setView(DeployToWorldView.ERROR)
       setLoading(false)
       analytics?.track('Publish to World step', { step: DeployToWorldView.ERROR })
@@ -354,6 +359,29 @@ export default function DeployToWorld({
     )
   }
 
+  const renderMultiSceneBlockedState = () => {
+    return (
+      <div className={styles.emptyState}>
+        <div className={styles.modalHeader}>
+          <h3>{t('deployment_modal.deploy_world.multi_scene_blocked.title')}</h3>
+        </div>
+        <div className={`${styles.modalBodyState} ${styles.modalBodyEmptyState}`}>
+          <div className={styles.emptyThumbnail} aria-label={project?.description} role="img" />
+          <span className={styles.description}>{t('deployment_modal.deploy_world.multi_scene_blocked.description')}</span>
+        </div>
+        <div className={styles.modalBodyStateActions}>
+          <Button
+            primary
+            className={styles.modalBodyStateActionButton}
+            onClick={() => window.open(CREATOR_HUB_DOWNLOAD_URL, '_blank', 'noopener,noreferrer')}
+          >
+            {t('deployment_modal.deploy_world.multi_scene_blocked.download_creator_hub')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
   const renderMetrics = () => {
     const { rows, cols } = project.layout
     return (
@@ -476,6 +504,8 @@ export default function DeployToWorld({
         return renderFailureState()
       case DeployToWorldView.EMPTY:
         return renderEmptyState()
+      case DeployToWorldView.MULTI_SCENE_BLOCKED:
+        return renderMultiSceneBlockedState()
       default:
         return null
     }

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.types.ts

@@ -59,7 +59,8 @@ export enum DeployToWorldView {
   PROGRESS = 'PROGRESS',
   SUCCESS = 'SUCCESS',
   EMPTY = 'EMPTY',
-  ERROR = 'ERROR'
+  ERROR = 'ERROR',
+  MULTI_SCENE_BLOCKED = 'MULTI_SCENE_BLOCKED'
 }
 
 export type DeployToWorldModalMetadata = DeployModalMetadata & {

src/components/Modals/WorldPermissionsModal/ModelTabs/WorldPermissionsCollaborators/WorldPermissionsCollaborators.module.css

@@ -26,3 +26,29 @@
   color: #716b7c;
   justify-content: center;
 }
+
+.callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  background-color: #1a1820;
+  border: 1px solid #3d3450;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.callout :global(.icon) {
+  color: #716b7c;
+}
+
+.callout p {
+  color: #a09ba8;
+}
+
+.callout a {
+  color: #ffffff;
+  text-decoration: underline;
+}

src/components/Modals/WorldPermissionsModal/ModelTabs/WorldPermissionsCollaborators/WorldPermissionsCollaborators.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Icon, Popup, Table } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 
+import { config } from 'config'
 import { WorldPermissionsCollaboratorsProps } from './WorldPermissionsCollaborators.types'
 import { WorldPermissionsAddUserForm } from '../Layouts/WorldPermissionsAddUserForm'
 import { WorldPermissionsHeader } from '../Layouts/WorldPermissionsHeader'
@@ -11,6 +12,8 @@ import LoadingText from 'decentraland-ui/dist/components/Loader/LoadingText'
 
 import styles from './WorldPermissionsCollaborators.module.css'
 
+const CREATOR_HUB_DOWNLOAD_URL = config.get('CREATOR_HUB_DOWNLOAD_URL')
+
 export default React.memo((props: WorldPermissionsCollaboratorsProps) => {
   const {
     loading,
@@ -24,7 +27,8 @@ export default React.memo((props: WorldPermissionsCollaboratorsProps) => {
     onRemoveCollaborator,
     error,
     worldDeploymentPermissions,
-    worldStreamingPermissions
+    worldStreamingPermissions,
+    permissionsSummary
   } = props
   return (
     <div>
@@ -41,6 +45,23 @@ export default React.memo((props: WorldPermissionsCollaboratorsProps) => {
         }
         loading={loading}
       />
+      {!loading && (
+        <div className={styles.callout}>
+          <Icon name="info circle" />
+          <p>
+            <T
+              id="world_permissions_modal.tab_collaborators.parcel_permissions_callout"
+              values={{
+                link: (content: React.ReactNode) => (
+                  <a href={CREATOR_HUB_DOWNLOAD_URL} target="_blank" rel="noopener noreferrer">
+                    {content}
+                  </a>
+                )
+              }}
+            />
+          </p>
+        </div>
+      )}
 
       {(!collaboratorUserList || collaboratorUserList.length < 10) && (
         <WorldPermissionsAddUserForm
@@ -117,6 +138,7 @@ export default React.memo((props: WorldPermissionsCollaboratorsProps) => {
                     onRemoveCollaborator={onRemoveCollaborator}
                     hasWorldDeploymentPermission={worldDeploymentPermissions?.wallets.includes(wallet)}
                     hasWorldStreamingPermission={worldStreamingPermissions?.wallets.includes(wallet)}
+                    permissionsSummary={permissionsSummary?.[wallet] ?? []}
                     key={index}
                     walletAddress={wallet}
                   />

src/components/Modals/WorldPermissionsModal/ModelTabs/WorldPermissionsCollaborators/WorldPermissionsCollaborators.types.ts

@@ -1,10 +1,11 @@
 import { ButtonProps, InputOnChangeData } from 'decentraland-ui'
-import { AllowListPermissionSetting, WorldPermissionNames } from 'lib/api/worlds'
+import { WorldCollaboratorPermission, AllowListPermissionSetting, WorldPermissionNames } from 'lib/api/worlds'
 
 export type WorldPermissionsCollaboratorsProps = {
   loading: boolean
   worldDeploymentPermissions?: AllowListPermissionSetting
   worldStreamingPermissions?: AllowListPermissionSetting
+  permissionsSummary?: Record<string, WorldCollaboratorPermission[]>
   collaboratorUserList?: string[]
   showAddUserForm: boolean
   newAddress: string

src/components/Modals/WorldPermissionsModal/ModelTabs/WorldPermissionsCollaborators/WorldPermissionsCollaboratorsItem/WorldPermissionsCollaboratorsItem.module.css

@@ -0,0 +1,9 @@
+.userCell {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.parcelBadge {
+  margin-right: 100%;
+}

src/components/Modals/WorldPermissionsModal/ModelTabs/WorldPermissionsCollaborators/WorldPermissionsCollaboratorsItem/WorldPermissionsCollaboratorsItem.tsx

@@ -1,11 +1,14 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Checkbox, Table } from 'decentraland-ui'
+import { Chip } from 'decentraland-ui2'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import LoadingText from 'decentraland-ui/dist/components/Loader/LoadingText'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { WorldPermissionNames } from 'lib/api/worlds'
 import Icon from 'components/Icon'
 import { Props } from './WorldPermissionsCollaboratorsItem.types'
 import { WorldPermissionsAvatarWithInfo } from '../../Layouts/WorldPermissionsAvatarWithInfo'
+import styles from './WorldPermissionsCollaboratorsItem.module.css'
 
 export const WORLD_PERMISSIONS_COLLABORATORS_ITEM_LOADING_ROW_TEST_ID = 'world-permissions-collaborators-item-test-id'
 export const WORLD_PERMISSIONS_COLLABORATORS_ITEM_DEPLOYMENT_CHECKBOX_TEST_ID =
@@ -19,11 +22,17 @@ export const WorldPermissionsCollaboratorsItem = React.memo((props: Props) => {
     walletAddress,
     hasWorldDeploymentPermission,
     hasWorldStreamingPermission,
+    permissionsSummary,
     onUserPermissionListChange,
     onRemoveCollaborator,
     loading
   } = props
 
+  const parcelCount: number = useMemo(
+    () => permissionsSummary?.find(p => p.permission === 'deployment')?.parcel_count ?? 0,
+    [permissionsSummary]
+  )
+
   if (loading || !walletAddress || !onUserPermissionListChange) {
     return (
       <Table.Row data-testid={WORLD_PERMISSIONS_COLLABORATORS_ITEM_LOADING_ROW_TEST_ID}>
@@ -45,8 +54,14 @@ export const WorldPermissionsCollaboratorsItem = React.memo((props: Props) => {
 
   return (
     <Table.Row>
-      <Table.Cell>
+      <Table.Cell className={styles.userCell}>
         <WorldPermissionsAvatarWithInfo walletAddress={walletAddress} />
+        {parcelCount > 0 && (
+          <Chip
+            className={styles.parcelBadge}
+            label={t('world_permissions_modal.tab_collaborators.parcel_count_badge', { count: parcelCount })}
+          />
+        )}
       </Table.Cell>
       <Table.Cell>
         <Checkbox