feat: Add wearable utility (#3096)

* feat: Add wearable utility * fix: Add missing translations * fix: Build * fix: Only show utility if the item has a utility
decentraland · May 3, 2024 · 462f533 · 462f533
1 parent 0aea4ba
commit 462f533
Show file tree

Hide file tree

Showing 26 changed files with 157 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@dcl/crypto": "^3.4.5",
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
-    "@dcl/schemas": "^11.5.0",
+    "@dcl/schemas": "^11.7.0",
     "@dcl/sdk": "^7.4.21",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
@@ -42,7 +42,7 @@
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.6.1",
-    "decentraland-ui": "^5.17.1",
+    "decentraland-ui": "^5.21.0",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",

diff --git a/src/components/ItemDetailPage/ItemDetailPage.container.ts b/src/components/ItemDetailPage/ItemDetailPage.container.ts
@@ -10,6 +10,7 @@ import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { FETCH_ITEMS_REQUEST, DELETE_ITEM_REQUEST, deleteItemRequest, saveItemRequest, SAVE_ITEM_REQUEST } from 'modules/item/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './ItemDetailPage.types'
 import ItemDetailPage from './ItemDetailPage'
+import { getIsWearableUtilityEnabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
   const itemId = getItemId(state)
@@ -25,6 +26,7 @@ const mapState = (state: RootState): MapStateProps => {
     item,
     collection,
     status,
+    isWearableUtilityEnabled: getIsWearableUtilityEnabled(state),
     isLoading:
       isLoadingType(getLoading(state), FETCH_ITEMS_REQUEST) ||
       isLoadingType(getLoading(state), DELETE_ITEM_REQUEST) ||

diff --git a/src/components/ItemDetailPage/ItemDetailPage.css b/src/components/ItemDetailPage/ItemDetailPage.css
@@ -35,6 +35,12 @@
   height: 256px;
 }
 
+.ItemDetailPage .item-data .attribute-row {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
 .ItemDetailPage .item-data .subtitle {
   color: var(--secondary-text);
   font-size: 13px;

diff --git a/src/components/ItemDetailPage/ItemDetailPage.tsx b/src/components/ItemDetailPage/ItemDetailPage.tsx
@@ -127,7 +127,7 @@ export default class ItemDetailPage extends React.PureComponent<Props, State> {
   }
 
   renderPage(item: Item, collection: Collection | null) {
-    const { onNavigate } = this.props
+    const { onNavigate, isWearableUtilityEnabled } = this.props
     const data = item.data
     const isLocked = collection && isCollectionLocked(collection)
     const hasActions = !isLocked
@@ -144,7 +144,7 @@ export default class ItemDetailPage extends React.PureComponent<Props, State> {
 
           <div className="item-data">
             <div className="item-data-left-panel">
-              <ItemImage item={item} hasBadge hasRarityBadge />
+              <ItemImage item={item} hasBadge hasRarityBadge hasUtilityBadge />
               <div>
                 <Button primary onClick={this.handleOpenThumbnailDialog}>
                   <input type="file" ref={this.thumbnailInput} onChange={this.handleThumbnailChange} accept="image/png" />
@@ -291,23 +291,33 @@ export default class ItemDetailPage extends React.PureComponent<Props, State> {
                     ) : null}
                   </div>
                 </div>
-                {item.description && (
-                  <>
-                    <div className="subtitle">{t('global.description')}</div>
-                    <div className="data">{item.description}</div>
-                  </>
-                )}
+                <div className="attribute-row">
+                  {item.description && (
+                    <div className="attribute-column">
+                      <div className="subtitle">{t('global.description')}</div>
+                      <div className="data">{item.description}</div>
+                    </div>
+                  )}
+                  {item.utility && isWearableUtilityEnabled && (
+                    <div className="attribute-column">
+                      <div className="subtitle">{t('global.utility')}</div>
+                      <div className="data">{item.utility}</div>
+                    </div>
+                  )}
+                </div>
                 {item.data.tags.length ? (
-                  <>
-                    <div className="subtitle">{t('item_detail_page.tags.title')}</div>
-                    <div className="data tags-container">
-                      {item.data.tags.map(tag => (
-                        <span className="tag" key={tag}>
-                          {tag}
-                        </span>
-                      ))}
+                  <div className="attribute-row">
+                    <div className="attribute-column">
+                      <div className="subtitle">{t('item_detail_page.tags.title')}</div>
+                      <div className="data tags-container">
+                        {item.data.tags.map(tag => (
+                          <span className="tag" key={tag}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
                     </div>
-                  </>
+                  </div>
                 ) : null}
               </div>
 

diff --git a/src/components/ItemDetailPage/ItemDetailPage.types.ts b/src/components/ItemDetailPage/ItemDetailPage.types.ts
@@ -19,13 +19,17 @@ export type Props = {
   collection: Collection | null
   status: SyncStatus | null
   isLoading: boolean
+  isWearableUtilityEnabled: boolean
   onNavigate: (path: string, locationState?: LocationStateProps) => void
   onOpenModal: typeof openModal
   onDelete: typeof deleteItemRequest
   onSaveItem: typeof saveItemRequest
   hasAccess: boolean
 }
 
-export type MapStateProps = Pick<Props, 'wallet' | 'itemId' | 'item' | 'collection' | 'status' | 'isLoading' | 'hasAccess'>
+export type MapStateProps = Pick<
+  Props,
+  'wallet' | 'itemId' | 'item' | 'collection' | 'status' | 'isLoading' | 'hasAccess' | 'isWearableUtilityEnabled'
+>
 export type MapDispatchProps = Pick<Props, 'onSaveItem' | 'onNavigate' | 'onDelete' | 'onOpenModal'>
 export type MapDispatch = Dispatch<SaveItemRequestAction | CallHistoryMethodAction | DeleteItemRequestAction | OpenModalAction>
diff --git a/src/components/ItemEditorPage/RightPanel/Input/Input.css b/src/components/ItemEditorPage/RightPanel/Input/Input.css
@@ -1,6 +1,6 @@
 .Input {
   height: 38px;
-  border: 1px solid var(--gray);
+  border: 1px solid var(--text-area-border);
   border-radius: 6px;
   display: flex;
   align-items: center;

diff --git a/src/components/ItemEditorPage/RightPanel/Input/Input.types.ts b/src/components/ItemEditorPage/RightPanel/Input/Input.types.ts
@@ -1,5 +1,4 @@
 export type Props = {
-  itemId: string
   label: string
   disabled?: boolean
   maxLength?: number

diff --git a/src/components/ItemEditorPage/RightPanel/MultiSelect/MultiSelect.css b/src/components/ItemEditorPage/RightPanel/MultiSelect/MultiSelect.css
@@ -1,5 +1,5 @@
 .MultiSelect.ui.dropdown.inline {
-  border: 1px solid var(--gray);
+  border: 1px solid var(--text-area-border);
   border-radius: 6px;
   display: flex;
   align-items: center;

diff --git a/src/components/ItemEditorPage/RightPanel/RightPanel.container.ts b/src/components/ItemEditorPage/RightPanel/RightPanel.container.ts
@@ -8,7 +8,7 @@ import { isOwner } from 'modules/item/utils'
 import { getSelectedItemId } from 'modules/location/selectors'
 import { getCollection, hasViewAndEditRights } from 'modules/collection/selectors'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
-import { getIsCampaignEnabled, getIsVrmOptOutEnabled } from 'modules/features/selectors'
+import { getIsCampaignEnabled, getIsVrmOptOutEnabled, getIsWearableUtilityEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './RightPanel.types'
 import RightPanel from './RightPanel'
 
@@ -35,7 +35,8 @@ const mapState = (state: RootState): MapStateProps => {
     isDownloading: isDownloading(state),
     isCommitteeMember: isWalletCommitteeMember(state),
     isCampaignEnabled: getIsCampaignEnabled(state),
-    isVrmOptOutEnabled: getIsVrmOptOutEnabled(state)
+    isVrmOptOutEnabled: getIsVrmOptOutEnabled(state),
+    isWearableUtilityEnabled: getIsWearableUtilityEnabled(state)
   }
 }
 

diff --git a/src/components/ItemEditorPage/RightPanel/RightPanel.css b/src/components/ItemEditorPage/RightPanel/RightPanel.css
@@ -31,9 +31,27 @@
   flex: 1;
 }
 
+.dcl.text-area {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.dcl.text-area > textarea::placeholder {
+  color: var(--secondary-text);
+}
+
+.RightPanel .dcl.text-area > textarea {
+  font-size: 14px;
+  border: 1px solid var(--text-area-border);
+}
+
+.RightPanel .dcl.text-area > p {
+  display: none;
+}
+
 .RightPanel .details {
   display: flex;
-  border: 1px solid var(--gray);
+  border: 1px solid var(--text-area-border);
   border-radius: 6px;
   padding: 8px;
   align-items: stretch;