feat: introduce logic to fetch catalog from the marketplace-server (#…

…1967)

* feat: introduce logic to fetch catalog from the marketplace-server

* feat: use correct URL for the marketplace server

* feat: wait for FFs to be loaded

* fix: card overflow is clickeable

* test: fix broken tests

* feat: add generator getCatalogAPI to abstract the API selection logic

* chore: remove unwanted comment

* fix: wait for identity success action before fetching catalog (#1974)

* feat: remove old import

* test: fix broken test

* chore: reset dev.json values

webapp/src/components/AssetCard/AssetCard.css

@@ -4,6 +4,7 @@
 }
 
 .ui.card.AssetCard.catalog {
+  overflow: hidden;
   height: 360px;
 }
 

webapp/src/modules/favorites/sagas.spec.ts

@@ -22,6 +22,7 @@ import {
 import { locations } from '../routing/locations'
 import { SortDirection } from '../routing/types'
 import { CatalogAPI } from '../vendor/decentraland/catalog/api'
+import { getIsMarketplaceServerEnabled } from '../features/selectors'
 import { getData as getItemsData } from '../item/selectors'
 import {
   BULK_PICK_SUCCESS,
@@ -100,7 +101,8 @@ describe('when handling the request for fetching favorited items', () => {
       return expectSaga(favoritesSaga, getIdentity)
         .provide([
           [select(getListId), listId],
-          [select(getAddress), Promise.reject(error)]
+          [select(getAddress), Promise.reject(error)],
+          [select(getIsMarketplaceServerEnabled), true]
         ])
         .put(fetchFavoritedItemsFailure(error.message))
         .dispatch(fetchFavoritedItemsRequest(options))
@@ -114,6 +116,7 @@ describe('when handling the request for fetching favorited items', () => {
         .provide([
           [select(getListId), listId],
           [select(getAddress), address],
+          [select(getIsMarketplaceServerEnabled), true],
           [call(getAccountIdentity), Promise.reject(error)]
         ])
         .put(fetchFavoritedItemsFailure(error.message))
@@ -129,6 +132,7 @@ describe('when handling the request for fetching favorited items', () => {
           .provide([
             [select(getListId), listId],
             [select(getAddress), address],
+            [select(getIsMarketplaceServerEnabled), true],
             [call(getAccountIdentity), Promise.resolve()],
             [
               matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
@@ -149,6 +153,7 @@ describe('when handling the request for fetching favorited items', () => {
       let favoritedItemIds: FavoritedItems
       let createdAt: Record<string, number>
       let total: number
+      let isMarketplaceFFOn: boolean
 
       describe("and there's more than one favorited item", () => {
         beforeEach(() => {
@@ -157,35 +162,79 @@ describe('when handling the request for fetching favorited items', () => {
           total = 1
         })
 
-        describe('and the call to the items api fails', () => {
-          it('should dispatch an action signaling the failure of the handled action', () => {
-            return expectSaga(favoritesSaga, getIdentity)
-              .provide([
-                [select(getListId), listId],
-                [select(getAddress), address],
-                [call(getAccountIdentity), Promise.resolve()],
-                [
-                  matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
-                  Promise.resolve({ results: favoritedItemIds, total })
-                ],
-                [
-                  matchers.call.fn(CatalogAPI.prototype.get),
-                  Promise.reject(error)
-                ]
-              ])
-              .call.like({
-                fn: CatalogAPI.prototype.get,
-                args: [
-                  {
-                    ...options.filters,
-                    first: 1,
-                    ids: [favoritedItemIds[0].itemId]
-                  }
-                ]
-              })
-              .put(fetchFavoritedItemsFailure(error.message))
-              .dispatch(fetchFavoritedItemsRequest(options))
-              .run({ silenceTimeout: true })
+        describe('and the marketplace-server flag is off', () => {
+          beforeEach(() => {
+            isMarketplaceFFOn = false
+          })
+          describe('and the call to the items api fails', () => {
+            it('should dispatch an action signaling the failure of the handled action', () => {
+              return expectSaga(favoritesSaga, getIdentity)
+                .provide([
+                  [select(getListId), listId],
+                  [select(getIsMarketplaceServerEnabled), isMarketplaceFFOn],
+                  [select(getAddress), address],
+                  [call(getAccountIdentity), Promise.resolve()],
+                  [
+                    matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
+                    Promise.resolve({ results: favoritedItemIds, total })
+                  ],
+                  [
+                    matchers.call.fn(CatalogAPI.prototype.get),
+                    Promise.reject(error)
+                  ]
+                ])
+                .call.like({
+                  fn: CatalogAPI.prototype.get,
+                  args: [
+                    {
+                      ...options.filters,
+                      first: 1,
+                      ids: [favoritedItemIds[0].itemId]
+                    }
+                  ]
+                })
+                .put(fetchFavoritedItemsFailure(error.message))
+                .dispatch(fetchFavoritedItemsRequest(options))
+                .run({ silenceTimeout: true })
+            })
+          })
+        })
+
+        describe('and the marketplace-server flag is on', () => {
+          beforeEach(() => {
+            isMarketplaceFFOn = true
+          })
+          describe('and the call to the items api fails', () => {
+            it('should dispatch an action signaling the failure of the handled action', () => {
+              return expectSaga(favoritesSaga, getIdentity)
+                .provide([
+                  [select(getListId), listId],
+                  [select(getIsMarketplaceServerEnabled), isMarketplaceFFOn],
+                  [select(getAddress), address],
+                  [call(getAccountIdentity), Promise.resolve()],
+                  [
+                    matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
+                    Promise.resolve({ results: favoritedItemIds, total })
+                  ],
+                  [
+                    matchers.call.fn(CatalogAPI.prototype.get),
+                    Promise.reject(error)
+                  ]
+                ])
+                .call.like({
+                  fn: CatalogAPI.prototype.get,
+                  args: [
+                    {
+                      ...options.filters,
+                      first: 1,
+                      ids: [favoritedItemIds[0].itemId]
+                    }
+                  ]
+                })
+                .put(fetchFavoritedItemsFailure(error.message))
+                .dispatch(fetchFavoritedItemsRequest(options))
+                .run({ silenceTimeout: true })
+            })
           })
         })
 
@@ -202,6 +251,7 @@ describe('when handling the request for fetching favorited items', () => {
               .provide([
                 [select(getListId), listId],
                 [select(getAddress), address],
+                [select(getIsMarketplaceServerEnabled), true],
                 [call(getAccountIdentity), Promise.resolve()],
                 [
                   matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
@@ -256,6 +306,7 @@ describe('when handling the request for fetching favorited items', () => {
             .provide([
               [select(getListId), listId],
               [select(getAddress), address],
+              [select(getIsMarketplaceServerEnabled), true],
               [call(getAccountIdentity), Promise.resolve()],
               [
                 matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
@@ -296,6 +347,7 @@ describe('when handling the request for fetching favorited items', () => {
           .provide([
             [select(getListId), listId],
             [select(getAddress), null],
+            [select(getIsMarketplaceServerEnabled), true],
             [
               matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
               Promise.reject(error)
@@ -329,6 +381,7 @@ describe('when handling the request for fetching favorited items', () => {
               .provide([
                 [select(getListId), listId],
                 [select(getAddress), null],
+                [select(getIsMarketplaceServerEnabled), true],
                 [
                   matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
                   Promise.resolve({ results: favoritedItemIds, total })
@@ -367,6 +420,7 @@ describe('when handling the request for fetching favorited items', () => {
               .provide([
                 [select(getListId), listId],
                 [select(getAddress), null],
+                [select(getIsMarketplaceServerEnabled), true],
                 [
                   matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
                   Promise.resolve({ results: favoritedItemIds, total })
@@ -420,6 +474,7 @@ describe('when handling the request for fetching favorited items', () => {
             .provide([
               [select(getListId), listId],
               [select(getAddress), null],
+              [select(getIsMarketplaceServerEnabled), true],
               [
                 matchers.call.fn(FavoritesAPI.prototype.getPicksByList),
                 { results: favoritedItemIds, total }
@@ -611,11 +666,12 @@ describe('when handling the request for fetching lists', () => {
           ]
         })
 
-        describe('and there are not items in the state', () => {
+        describe('and there are no items in the state', () => {
           it('should dispatch an action signaling the success of the handled action', () => {
             return expectSaga(favoritesSaga, getIdentity)
               .provide([
                 [call(getAccountIdentity), Promise.resolve()],
+                [select(getIsMarketplaceServerEnabled), true],
                 [
                   matchers.call.fn(FavoritesAPI.prototype.getLists),
                   Promise.resolve({ results: lists, total })
@@ -660,6 +716,7 @@ describe('when handling the request for fetching lists', () => {
             return expectSaga(favoritesSaga, getIdentity)
               .provide([
                 [call(getAccountIdentity), Promise.resolve()],
+                [select(getIsMarketplaceServerEnabled), true],
                 [
                   matchers.call.fn(FavoritesAPI.prototype.getLists),
                   Promise.resolve({ results: lists, total })
@@ -757,6 +814,7 @@ describe('when handling the request for fetching lists', () => {
           return expectSaga(favoritesSaga, getIdentity)
             .provide([
               [call(getAccountIdentity), Promise.resolve()],
+              [select(getIsMarketplaceServerEnabled), true],
               [
                 matchers.call.fn(FavoritesAPI.prototype.getLists),
                 Promise.resolve({ results: lists, total })
@@ -804,6 +862,7 @@ describe('when handling the request for fetching lists', () => {
         return expectSaga(favoritesSaga, getIdentity)
           .provide([
             [call(getAccountIdentity), Promise.resolve()],
+            [select(getIsMarketplaceServerEnabled), true],
             [
               matchers.call.fn(FavoritesAPI.prototype.getLists),
               Promise.resolve({ results: lists, total })
@@ -1034,6 +1093,7 @@ describe('when handling the request for getting a list', () => {
               matchers.call.fn(FavoritesAPI.prototype.getList),
               Promise.resolve(list)
             ],
+            [select(getIsMarketplaceServerEnabled), true],
             [select(getItemsData), {}],
             [
               matchers.call.fn(CatalogAPI.prototype.get),
@@ -1078,6 +1138,7 @@ describe('when handling the request for getting a list', () => {
               matchers.call.fn(FavoritesAPI.prototype.getList),
               Promise.resolve(list)
             ],
+            [select(getIsMarketplaceServerEnabled), true],
             [select(getItemsData), { anotherItemId: {} }],
             [
               matchers.call.fn(CatalogAPI.prototype.get),

webapp/src/modules/favorites/sagas.ts

@@ -23,7 +23,7 @@ import { getIdentity as getAccountIdentity } from '../identity/utils'
 import { CatalogAPI } from '../vendor/decentraland/catalog/api'
 import { retryParams } from '../vendor/decentraland/utils'
 import { getAddress } from '../wallet/selectors'
-import { NFT_SERVER_URL } from '../vendor/decentraland'
+import { MARKETPLACE_SERVER_URL, NFT_SERVER_URL } from '../vendor/decentraland'
 import { locations } from '../routing/locations'
 import { SortDirection } from '../routing/types'
 import { ListsSortBy } from '../vendor/decentraland/favorites/types'
@@ -83,6 +83,7 @@ import {
 import { convertListsBrowseSortByIntoApiSortBy } from './utils'
 import { List } from './types'
 import { getData as getItemsData } from '../item/selectors'
+import { getIsMarketplaceServerEnabled } from '../features/selectors'
 
 export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
   const API_OPTS = {
@@ -95,6 +96,10 @@ export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
     API_OPTS
   )
   const catalogAPI = new CatalogAPI(NFT_SERVER_URL, API_OPTS)
+  const marketplaceServerCatalogAPI = new CatalogAPI(
+    MARKETPLACE_SERVER_URL,
+    API_OPTS
+  )
 
   yield takeEvery(
     FETCH_FAVORITED_ITEMS_REQUEST,
@@ -114,6 +119,13 @@ export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
     handleBulkPickSuccessOrFailure
   )
 
+  function* getCatalogAPI() {
+    const isMarketplaceServerEnabled: boolean = yield select(
+      getIsMarketplaceServerEnabled
+    )
+    return isMarketplaceServerEnabled ? marketplaceServerCatalogAPI : catalogAPI
+  }
+
   function* fetchPreviewItems(previewListsItemIds: string[]) {
     let previewItems: Item[] = []
 
@@ -127,10 +139,8 @@ export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
           ids: previewListsItemIds
         }
 
-        const result: { data: Item[] } = yield call(
-          [catalogAPI, 'get'],
-          itemFilters
-        )
+        const api: CatalogAPI = yield call(getCatalogAPI)
+        const result: { data: Item[] } = yield call([api, 'get'], itemFilters)
         previewItems = result.data
       }
     }
@@ -173,9 +183,11 @@ export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
         filters: optionsFilters
       }
 
+      const api: CatalogAPI = yield call(getCatalogAPI)
+
       if (results.length > 0) {
         const result: { data: Item[] } = yield call(
-          [catalogAPI, 'get'],
+          [api, 'get'],
           optionsFilters
         )
         items = result.data

webapp/src/modules/features/selectors.ts

@@ -206,3 +206,13 @@ export const getIsNewNavbarDropdownEnabled = (state: RootState) => {
   }
   return false
 }
+export const getIsMarketplaceServerEnabled = (state: RootState) => {
+  if (hasLoadedInitialFlags(state)) {
+    return getIsFeatureEnabled(
+      state,
+      ApplicationName.MARKETPLACE,
+      FeatureName.MARKETPLACE_SERVER
+    )
+  }
+  return false
+}

webapp/src/modules/features/types.ts

@@ -14,8 +14,9 @@ export enum FeatureName {
   MAP_VIEW_FILTERS = 'map-view-filters',
   RENTAL_PRICE_FILTER_CHART = 'rental-price-fitler-chart',
   HANDS_CATEGORY = 'hands-category',
-  SMART_WEARABLES_FTU = 'smart-wearables-ftu',
   EMOTES_V2 = 'emotes-2.0',
   EMOTES_V2_FTU = 'emotes-2.0-ftu',
-  NEW_NAVBAR_DROPDOWN = 'new-navbar-dropdown'
+  NEW_NAVBAR_DROPDOWN = 'new-navbar-dropdown',
+  SMART_WEARABLES_FTU = 'smart-wearables-ftu',
+  MARKETPLACE_SERVER = 'marketplace-server'
 }

webapp/src/modules/features/utils.spec.ts

@@ -0,0 +1,32 @@
+import { expectSaga } from 'redux-saga-test-plan'
+import { select } from 'redux-saga/effects'
+import { isLoadingFeatureFlags } from 'decentraland-dapps/dist/modules/features/selectors'
+import {
+  FETCH_APPLICATION_FEATURES_FAILURE,
+  FETCH_APPLICATION_FEATURES_SUCCESS
+} from 'decentraland-dapps/dist/modules/features/actions'
+import { waitForFeatureFlagsToBeLoaded } from './utils'
+
+describe('waitForFeatureFlagsToBeLoaded Util', () => {
+  it('should do nothing if feature flags are already loaded', () => {
+    return expectSaga(waitForFeatureFlagsToBeLoaded)
+      .provide([[select(isLoadingFeatureFlags), false]])
+      .not.take(FETCH_APPLICATION_FEATURES_SUCCESS)
+      .not.take(FETCH_APPLICATION_FEATURES_FAILURE)
+      .run()
+  })
+
+  it('should wait for FETCH_APPLICATION_FEATURES_SUCCESS if feature flags are being fetched', () => {
+    return expectSaga(waitForFeatureFlagsToBeLoaded)
+      .provide([[select(isLoadingFeatureFlags), true]])
+      .take(FETCH_APPLICATION_FEATURES_SUCCESS)
+      .run()
+  })
+
+  it('should wait for FETCH_APPLICATION_FEATURES_FAILURE if feature flags are being fetched and there is an error', () => {
+    return expectSaga(waitForFeatureFlagsToBeLoaded)
+      .provide([[select(isLoadingFeatureFlags), true]])
+      .take(FETCH_APPLICATION_FEATURES_FAILURE)
+      .run()
+  })
+})