feat: Add programmatic selection for linked wearables (#3205)

* feat: Add programmatic selection for linked wearables

* fix: Test

* feat: Add correct image for programmatic and standard third parties

* fix: Styles

* fix: Correct price

src/components/Badges/CollectionTypeBadge/CollectionTypeBadge.module.css

@@ -0,0 +1,16 @@
+.badge {
+  padding: 4px 8px 4px 8px;
+  border-radius: 32px;
+  width: fit-content;
+  text-wrap: nowrap;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.thirdParty {
+  background-color: #00a146;
+}
+
+.regular {
+  background-color: #1764c0;
+}

src/components/Badges/CollectionTypeBadge/CollectionTypeBadge.tsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import styles from './CollectionTypeBadge.module.css'
+
+export const CollectionTypeBadge = ({ isThirdParty, className }: { isThirdParty?: boolean; className?: string }) => (
+  <div className={classNames(styles.badge, isThirdParty ? styles.thirdParty : styles.regular, className)}>
+    {isThirdParty ? t('collection_type_badge.third_party') : t('collection_type_badge.regular')}
+  </div>
+)

src/components/Badges/CollectionTypeBadge/index.ts

@@ -0,0 +1 @@
+export * from './CollectionTypeBadge'

src/components/Badges/ThirdPartyKindBadge/ThirdPartyKindBadge.module.css

@@ -0,0 +1,16 @@
+.badge {
+  padding: 4px 8px 4px 8px;
+  border-radius: 32px;
+  width: fit-content;
+  text-wrap: nowrap;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.programmatic {
+  background-color: #691fa9;
+}
+
+.standard {
+  background-color: #43404a;
+}

src/components/Badges/ThirdPartyKindBadge/ThirdPartyKindBadge.tsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import styles from './ThirdPartyKindBadge.module.css'
+
+export const ThirdPartyKindBadge = ({ isProgrammatic, className }: { isProgrammatic?: boolean; className?: string }) => (
+  <div className={classNames(styles.badge, isProgrammatic ? styles.programmatic : styles.standard, className)}>
+    {isProgrammatic ? t('third_party_kind_badge.programmatic') : t('third_party_kind_badge.standard')}
+  </div>
+)

src/components/Badges/ThirdPartyKindBadge/index.ts

@@ -0,0 +1 @@
+export * from './ThirdPartyKindBadge'

src/components/CurationPage/CollectionRow/CollectionRow.tsx

@@ -9,11 +9,12 @@ import { isThirdPartyCollection } from 'modules/collection/utils'
 import { CurationStatus } from 'modules/curations/types'
 import CollectionStatus from 'components/CollectionStatus'
 import CollectionImage from 'components/CollectionImage'
+import { CollectionTypeBadge } from 'components/Badges/CollectionTypeBadge'
+import { ThirdPartyKindBadge } from 'components/Badges/ThirdPartyKindBadge'
 import { AssignModalOperationType } from 'components/Modals/EditCurationAssigneeModal/EditCurationAssigneeModal.types'
 import Profile from 'components/Profile'
 import { formatDistanceToNow } from 'lib/date'
 import { Props } from './CollectionRow.types'
-
 import './CollectionRow.css'
 
 export default function CollectionRow(props: Props) {
@@ -91,7 +92,10 @@ export default function CollectionRow(props: Props) {
         </div>
       </Table.Cell>
       <Table.Cell width={2}>
-        <div>{isThirdPartyCollection(collection) ? t('collection_row.type_third_party') : t('collection_row.type_standard')}</div>
+        <CollectionTypeBadge isThirdParty={isThirdPartyCollection(collection)} />
+      </Table.Cell>
+      <Table.Cell width={2}>
+        <ThirdPartyKindBadge isProgrammatic={collection.isProgrammatic} />
       </Table.Cell>
       <Table.Cell width={2}>
         <div>{isThirdPartyCollection(collection) ? '-' : <Profile textOnly address={collection.owner} />}</div>

src/components/CurationPage/CurationPage.tsx

@@ -274,6 +274,7 @@ export default class CurationPage extends React.PureComponent<Props, State> {
                       <Table.Row>
                         <Table.HeaderCell>{t('collection_row.collection')}</Table.HeaderCell>
                         <Table.HeaderCell>{t('collection_row.type')}</Table.HeaderCell>
+                        <Table.HeaderCell>{t('collection_row.kind')}</Table.HeaderCell>
                         <Table.HeaderCell>{t('collection_row.owner')}</Table.HeaderCell>
                         <Table.HeaderCell>{t('collection_row.date')}</Table.HeaderCell>
                         <Table.HeaderCell>{t('collection_row.status')}</Table.HeaderCell>

src/components/Modals/CreateAndEditMultipleItemsModal/CreateAndEditMultipleItemsModal.container.ts

@@ -11,26 +11,34 @@ import {
 import { getError } from 'modules/item/selectors'
 import { Collection } from 'modules/collection/types'
 import { getCollection } from 'modules/collection/selectors'
-import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getIsLinkedWearablesPaymentsEnabled, getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { setThirdPartyKindRequest } from 'modules/thirdParty/actions'
+import { getCollectionThirdParty, isSettingThirdPartyType } from 'modules/thirdParty/selectors'
+import { isTPCollection } from 'modules/collection/utils'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateAndEditMultipleItemsModal.types'
-import CreateAndEditMultipleItemsModal from './CreateAndEditMultipleItemsModal'
+import { CreateAndEditMultipleItemsModal } from './CreateAndEditMultipleItemsModal'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   const collection: Collection | null = ownProps.metadata.collectionId ? getCollection(state, ownProps.metadata.collectionId) : null
+  const thirdParty = collection && isTPCollection(collection) ? getCollectionThirdParty(state, collection) : null
 
   return {
     collection,
+    thirdParty,
+    isSettingThirdPartyType: isSettingThirdPartyType(state),
     error: getError(state),
     savedItemsFiles: getSavedItemsFiles(state),
     notSavedItemsFiles: getNotSavedItemsFiles(state),
     cancelledItemsFiles: getCanceledItemsFiles(state),
     saveMultipleItemsState: getMultipleItemsSaveState(state),
     isLinkedWearablesV2Enabled: getIsLinkedWearablesV2Enabled(state),
+    isLinkedWearablesPaymentsEnabled: getIsLinkedWearablesPaymentsEnabled(state),
     saveItemsProgress: getProgress(state)
   }
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onSetThirdPartyType: (thirdPartyId: string, isProgrammatic: boolean) => dispatch(setThirdPartyKindRequest(thirdPartyId, isProgrammatic)),
   onSaveMultipleItems: builtItems => dispatch(saveMultipleItemsRequest(builtItems)),
   onCancelSaveMultipleItems: () => dispatch(cancelSaveMultipleItems()),
   onModalUnmount: () => dispatch(clearSaveMultipleItems())

src/components/Modals/CreateAndEditMultipleItemsModal/CreateAndEditMultipleItemsModal.module.css

@@ -92,3 +92,55 @@
 .saveItemsError {
   color: var(--primary);
 }
+
+/* Third party type selector */
+
+.selector {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.item {
+  background-color: #43404a;
+  padding: 24px;
+  border-radius: 8px;
+  display: flex;
+  gap: 24px;
+  flex-direction: row;
+  align-items: center;
+}
+
+.item img {
+  width: 225px;
+  height: 88px;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #cfcdd4;
+}
+
+.action {
+  display: flex;
+  justify-content: start;
+  margin-top: 16px;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 421px;
+}