Merge branch 'master' into feat/orders

decentraland · Oct 4, 2024 · a20b75e · a20b75e
2 parents 30cd6fd + 8c3a394
commit a20b75e
Show file tree

Hide file tree

Showing 20 changed files with 337 additions and 243 deletions.
diff --git a/src/components/CollectionDetailPage/CollectionDetailPage.tsx b/src/components/CollectionDetailPage/CollectionDetailPage.tsx
@@ -438,11 +438,11 @@ export default function CollectionDetailPage({
   const HUGE_PAGE_SIZE = 5000 // TODO: Remove this ASAP and implement pagination
   return (
     <CollectionProvider id={collection?.id} itemsPage={1} itemsPageSize={HUGE_PAGE_SIZE}>
-      {({ isLoading: isLoadingCollectionData, items }) => (
+      {({ isLoadingCollection, isLoadingCollectionItems, items }) => (
         <LoggedInDetailPage
           className="CollectionDetailPage"
-          hasNavigation={!hasAccess && !isLoading && !isLoadingCollectionData}
-          isLoading={isLoading || isLoadingCollectionData}
+          hasNavigation={!hasAccess && !isLoading && !isLoadingCollection}
+          isLoading={isLoading || isLoadingCollection || isLoadingCollectionItems}
         >
           {hasAccess ? renderPage(items) : <NotFound />}
         </LoggedInDetailPage>

diff --git a/src/components/CollectionProvider/CollectionProvider.container.ts b/src/components/CollectionProvider/CollectionProvider.container.ts
@@ -31,8 +31,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     itemCurations,
     curation,
     isConnected: isConnected(state),
-    isLoading:
-      isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST) ||
+    isLoadingCollection: isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST),
+    isLoadingCollectionItems:
       isLoadingType(getLoadingItemCurations(state), FETCH_ITEM_CURATIONS_REQUEST) ||
       isLoadingType(getLoadingItems(state), FETCH_COLLECTION_ITEMS_REQUEST)
   }

diff --git a/src/components/CollectionProvider/CollectionProvider.tsx b/src/components/CollectionProvider/CollectionProvider.tsx
@@ -87,7 +87,8 @@ export default class CollectionProvider extends React.PureComponent<Props> {
       paginatedItems,
       curation,
       itemCurations,
-      isLoading,
+      isLoadingCollection,
+      isLoadingCollectionItems,
       children,
       onFetchCollectionItems
     } = this.props
@@ -102,7 +103,8 @@ export default class CollectionProvider extends React.PureComponent<Props> {
           paginatedCollections,
           curation,
           itemCurations,
-          isLoading,
+          isLoadingCollection,
+          isLoadingCollectionItems,
           onFetchCollectionItemsPages: onFetchCollectionItems
         })}
       </>

diff --git a/src/components/CollectionProvider/CollectionProvider.types.ts b/src/components/CollectionProvider/CollectionProvider.types.ts
@@ -22,7 +22,8 @@ export type Props = {
   fetchCollectionItemsOptions?: FetchCollectionItemsParams
   curation: CollectionCuration | null
   itemCurations: ItemCuration[] | null
-  isLoading: boolean
+  isLoadingCollection: boolean
+  isLoadingCollectionItems: boolean
   isConnected: boolean
   children: ({
     collection,
@@ -31,7 +32,8 @@ export type Props = {
     curation,
     itemCurations,
     initialPage,
-    isLoading,
+    isLoadingCollection,
+    isLoadingCollectionItems,
     onFetchCollectionItemsPages
   }: {
     collection: Collection | null
@@ -41,7 +43,8 @@ export type Props = {
     curation: CollectionCuration | null
     itemCurations: ItemCuration[] | null
     initialPage: number
-    isLoading: boolean
+    isLoadingCollection: boolean
+    isLoadingCollectionItems: boolean
     onFetchCollectionItemsPages: typeof fetchCollectionItemsRequest
   }) => React.ReactNode
   onFetchCollection: typeof fetchCollectionRequest
@@ -51,7 +54,16 @@ export type Props = {
 
 export type MapStateProps = Pick<
   Props,
-  'id' | 'collection' | 'items' | 'isLoading' | 'isConnected' | 'curation' | 'itemCurations' | 'paginatedItems' | 'paginatedCollections'
+  | 'id'
+  | 'collection'
+  | 'items'
+  | 'isLoadingCollection'
+  | 'isLoadingCollectionItems'
+  | 'isConnected'
+  | 'curation'
+  | 'itemCurations'
+  | 'paginatedItems'
+  | 'paginatedCollections'
 >
 export type MapDispatchProps = Pick<Props, 'onFetchCollection' | 'onFetchCollectionItems'>
 export type MapDispatch = Dispatch<FetchCollectionRequestAction | FetchCollectionItemsRequestAction>

diff --git a/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx b/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx
@@ -208,12 +208,15 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
               collection,
               paginatedItems: collectionItems,
               initialPage: collectionInitialPage,
-              isLoading,
+              isLoadingCollection,
+              isLoadingCollectionItems,
               itemCurations
             }) => {
               const items = this.getItems(collection, collectionItems, itemCurations)
               const isCollectionTab = this.isCollectionTabActive()
-              const showLoader = isLoading && ((isCollectionTab && collections.length === 0) || (!isCollectionTab && items.length === 0))
+              const showLoader =
+                (isLoadingCollection || isLoadingCollectionItems) &&
+                ((isCollectionTab && collections.length === 0) || (!isCollectionTab && items.length === 0))
               const initialPage = selectedCollectionId && collection ? collectionInitialPage : this.state.initialPage
               if (showLoader) {
                 return <Loader size="massive" active />
@@ -262,7 +265,7 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
                       hasHeader={items.length > 0}
                       selectedCollectionId={selectedCollectionId}
                       onLoadPage={this.loadPage}
-                      isLoading={isLoading}
+                      isLoading={isLoadingCollection}
                     />
                   ) : null}
                   {showItems ? (
@@ -280,7 +283,7 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
                         onSetItems={onSetItems}
                         wearableController={wearableController}
                         initialPage={initialPage}
-                        isLoading={isLoading || isLoadingOrphanItems}
+                        isLoading={isLoadingCollectionItems || isLoadingOrphanItems}
                         onLoadRandomPage={() => this.loadRandomPage(items)}
                         onLoadPage={this.loadPage}
                         onSetReviewedItems={onSetReviewedItems}

diff --git a/src/components/LinkedToTooltip/LinkedToToolip.types.ts b/src/components/LinkedToTooltip/LinkedToToolip.types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  className?: string
+}
diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.module.css b/src/components/LinkedToTooltip/LinkedToTooltip.module.css
@@ -0,0 +1,64 @@
+.linkedTooltip {
+  display: grid;
+  width: 458px;
+  margin: 14px;
+  grid-template-columns: auto auto;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.gridItem {
+  position: relative;
+  padding: 10px;
+  display: flex;
+  align-items: start;
+}
+
+.mappingExample {
+  color: #cfcdd4;
+}
+
+.mappingType {
+  display: flex;
+  align-items: center;
+}
+
+.mappingDescription {
+  flex-direction: column;
+}
+
+.mappingIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.tooltipHeader {
+  display: flex;
+  align-items: center;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  padding: 10px;
+  text-transform: uppercase;
+}
+
+.tooltipHeader img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.gridItem::before,
+.gridItem::after {
+  content: '';
+  position: absolute;
+  background-color: #a09ba8;
+  z-index: 1;
+}
+
+.gridItem::after {
+  width: 100vw;
+  height: 1px;
+  left: 0;
+  top: -1px;
+}
diff --git a/src/components/LinkedToTooltip/LinkedToTooltip.tsx b/src/components/LinkedToTooltip/LinkedToTooltip.tsx
@@ -0,0 +1,50 @@
+import classNames from 'classnames'
+import { InfoTooltip } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { MappingType } from '@dcl/schemas'
+import allIcon from '../../icons/all.svg'
+import multipleIcon from '../../icons/multiple.svg'
+import singleIcon from '../../icons/single.svg'
+import rangeIcon from '../../icons/range.svg'
+import lightbulbIcon from '../../icons/lightbulb.svg'
+import styles from './LinkedToTooltip.module.css'
+import { Props } from './LinkedToToolip.types'
+
+const mappingTypeIcons = {
+  [MappingType.ANY]: allIcon,
+  [MappingType.MULTIPLE]: multipleIcon,
+  [MappingType.SINGLE]: singleIcon,
+  [MappingType.RANGE]: rangeIcon
+}
+
+const LinkingTooltipMappingType = ({ type }: { type: MappingType }) => {
+  return (
+    <>
+      <div className={styles.gridItem}>
+        <div className={styles.mappingType}>
+          <img className={styles.mappingIcon} src={mappingTypeIcons[type]} />
+          {t(`mapping_editor.mapping_types.${type}`)}
+        </div>
+      </div>
+      <div className={classNames(styles.gridItem, styles.mappingDescription)}>
+        <div>{t(`mapping_editor.mapping_descriptions.${type}`)}</div>
+        {type !== MappingType.ANY && <div className={styles.mappingExample}>{t(`mapping_editor.mapping_examples.${type}`)}</div>}
+      </div>
+    </>
+  )
+}
+
+export const LinkingToTooltip = ({ className }: Props) => (
+  <InfoTooltip className={className}>
+    <div className={styles.linkedTooltip}>
+      <div className={styles.tooltipHeader}>
+        <img src={lightbulbIcon} />
+        {t('collection_row.linking_tooltip.title')}
+      </div>
+      <LinkingTooltipMappingType type={MappingType.ANY} />
+      <LinkingTooltipMappingType type={MappingType.SINGLE} />
+      <LinkingTooltipMappingType type={MappingType.MULTIPLE} />
+      <LinkingTooltipMappingType type={MappingType.RANGE} />
+    </div>
+  </InfoTooltip>
+)
diff --git a/src/components/LinkedToTooltip/index.ts b/src/components/LinkedToTooltip/index.ts
@@ -0,0 +1 @@
+export * from './LinkedToTooltip'
diff --git a/src/components/MappingEditor/MappingEditor.module.css b/src/components/MappingEditor/MappingEditor.module.css
@@ -127,3 +127,11 @@
 .mappings :global(.dcl.text-area) {
   width: 100%;
 }
+
+/* Tooltip */
+
+.typeLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
diff --git a/src/components/MappingEditor/MappingEditor.tsx b/src/components/MappingEditor/MappingEditor.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { DropdownProps, Field, InputOnChangeData, SelectField, TextAreaField, TextAreaProps } from 'decentraland-ui'
 import { MappingType, MultipleMapping } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation'
+import { LinkingToTooltip } from 'components/LinkedToTooltip'
 import allIcon from '../../icons/all.svg'
 import multipleIcon from '../../icons/multiple.svg'
 import singleIcon from '../../icons/single.svg'
@@ -117,7 +118,13 @@ export const MappingEditor = (props: Props) => {
   return (
     <div className={classNames(styles.main, isCompact ? styles.compact : styles.full)}>
       <SelectField
-        label={isCompact ? undefined : t('mapping_editor.mapping_type_label')}
+        label={
+          isCompact ? undefined : (
+            <div className={styles.typeLabel}>
+              {t('mapping_editor.mapping_type_label')} <LinkingToTooltip />
+            </div>
+          )
+        }
         onChange={handleMappingTypeChange}
         placeholder={t('mapping_editor.mapping_type_placeholder')}
         value={mappingType}

diff --git a/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css b/src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.css
@@ -3,6 +3,10 @@
   visibility: hidden !important;
 }
 
+.CreateSingleItemModalContainer > .ui.page.modals {
+  z-index: 1900;
+}
+
 .CreateSingleItemModal.ui.modal > .content {
   margin-bottom: 32px;
 }

diff --git a/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx b/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx
@@ -263,16 +263,16 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
       />
       <Form onSubmit={handleSubmit} disabled={!isSubmittable}>
         <ModalContent>
-          {thirdParties.length && !isLinkedWearablesPaymentsEnabled && (
+          {thirdParties.length && !isLinkedWearablesPaymentsEnabled ? (
             <SelectField
               label={t('create_third_party_collection_modal.third_party_field.label')}
               options={thirdPartyOptions}
               onChange={handleThirdPartyChange}
               disabled={isLoading}
               value={selectedThirdParty?.id}
             />
-          )}
-          {isLinkedWearablesPaymentsEnabled && collectionNameField}
+          ) : null}
+          {isLinkedWearablesPaymentsEnabled ? collectionNameField : undefined}
           {isLinkedWearablesV2Enabled && (
             <div className={styles.contract}>
               {thirdPartyContractNetworkOptions.length > 0 && !isLinkedWearablesPaymentsEnabled ? (
@@ -315,7 +315,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
               )}
             </div>
           )}
-          {!isLinkedWearablesPaymentsEnabled && collectionNameField}
+          {!isLinkedWearablesPaymentsEnabled ? collectionNameField : null}
           {!isLinkedWearablesV2Enabled && (
             <Field
               label={t('create_third_party_collection_modal.collection_id_field.label')}

diff --git a/...s/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css b/...s/ThirdPartyCollectionDetailPage/CollectionItemHeaderV2/CollectionItemHeaderV2.module.css
@@ -17,71 +17,6 @@
   margin-right: 10px;
 }
 
-.linkedTooltip {
-  display: grid;
-  width: 458px;
-  margin: 14px;
-  grid-template-columns: auto auto;
-  gap: 4px;
-  overflow: hidden;
-}
-
-.gridItem {
-  position: relative;
-  padding: 10px;
-  display: flex;
-  align-items: start;
-}
-
-.mappingExample {
-  color: #cfcdd4;
-}
-
-.mappingType {
-  display: flex;
-  align-items: center;
-}
-
-.mappingDescription {
-  flex-direction: column;
-}
-
-.mappingIcon {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
-
-.tooltipHeader {
-  display: flex;
-  align-items: center;
-  grid-column-start: 1;
-  grid-column-end: 3;
-  padding: 10px;
-  text-transform: uppercase;
-}
-
-.tooltipHeader img {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
-
-.gridItem::before,
-.gridItem::after {
-  content: '';
-  position: absolute;
-  background-color: #a09ba8;
-  z-index: 1;
-}
-
-.gridItem::after {
-  width: 100vw;
-  height: 1px;
-  left: 0;
-  top: -1px;
-}
-
 .linkedToColumn > span {
   margin-right: 6px;
 }