feat: Add recommendations to item detail

webapp/src/components/ActivityPage/ActivityPage.tsx

@@ -1,6 +1,14 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Page, Header, Button, Modal } from 'decentraland-ui'
+import { useLocation } from 'react-router-dom'
+import {
+  Page,
+  Header,
+  Button,
+  Modal,
+  // Icon,
+  ModalNavigation
+} from 'decentraland-ui'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 
 import { locations } from '../../modules/routing/locations'
@@ -13,11 +21,17 @@ import { Transaction } from './Transaction'
 import { Props } from './ActivityPage.types'
 import './ActivityPage.css'
 import { NavigationTab } from '../Navigation/Navigation.types'
+import { RECO_TYPE, Recommendation } from '../Recommendation'
 
 const ActivityPage = (props: Props) => {
   const { address, transactions, onClearHistory } = props
-
+  const location = useLocation()
+  const boughtItem = useMemo(
+    () => new URLSearchParams(location.search).get('boughtItem'),
+    [location.search]
+  )
   const [showConfirmation, setShowConfirmation] = useState(false)
+  const [isBoughItemOpen, setIsBoughItemOpen] = useState(true)
 
   const handleClear = useCallback(() => {
     if (address) {
@@ -44,7 +58,9 @@ const ActivityPage = (props: Props) => {
               id="wallet.sign_in_required"
               values={{
                 sign_in: (
-                  <Link to={locations.signIn(locations.activity())}>{t('wallet.sign_in')}</Link>
+                  <Link to={locations.signIn(locations.activity())}>
+                    {t('wallet.sign_in')}
+                  </Link>
                 )
               }}
             />
@@ -85,6 +101,21 @@ const ActivityPage = (props: Props) => {
       <Navbar isFullscreen />
       <Navigation activeTab={NavigationTab.ACTIVITY} />
       <Page className="ActivityPage">{content}</Page>
+      {boughtItem ? (
+        <Modal open={isBoughItemOpen}>
+          <ModalNavigation
+            title={'You may also like'}
+            onClose={() => setIsBoughItemOpen(false)}
+          ></ModalNavigation>
+          <Modal.Content>
+            <Recommendation
+              noTitle
+              itemId={boughtItem}
+              type={RECO_TYPE.SIMILARITY}
+            />
+          </Modal.Content>
+        </Modal>
+      ) : null}
       <Modal size="tiny" open={showConfirmation}>
         <Modal.Header>
           {t('activity_page.clear_history_modal.title')}

webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css

@@ -7,3 +7,11 @@
   flex-direction: column;
   gap: 8px;
 }
+
+.recommendations > div {
+  margin-top: 30px;
+}
+
+.recommendations > :global(.Slideshow) {
+  margin-bottom: 0px !important;
+}

webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx

@@ -8,6 +8,7 @@ import { AssetType } from '../../../modules/asset/types'
 import GenderBadge from '../../GenderBadge'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
+import { Recommendation, RECO_TYPE } from '../../Recommendation'
 import CategoryBadge from '../CategoryBadge'
 import SmartBadge from '../SmartBadge'
 import { Description } from '../Description'
@@ -18,6 +19,7 @@ import IconBadge from '../IconBadge'
 import { TransactionHistory } from '../TransactionHistory'
 import { SaleActionBox } from '../SaleActionBox'
 import { Props } from './ItemDetail.types'
+import styles from './ItemDetail.module.css'
 
 const ItemDetail = ({ item }: Props) => {
   let description = ''
@@ -109,7 +111,15 @@ const ItemDetail = ({ item }: Props) => {
       box={null}
       showDetails
       actions={<SaleActionBox asset={item} />}
-      below={<TransactionHistory asset={item} />}
+      below={
+        <div>
+          <TransactionHistory asset={item} />
+          <div className={styles.recommendations}>
+            <Recommendation itemId={item.id} type={RECO_TYPE.SIMILARITY} />
+            <Recommendation itemId={item.id} type={RECO_TYPE.OTHERS_BOUGHT} />
+          </div>
+        </div>
+      }
     />
   )
 }

webapp/src/components/HomePage/Slideshow/ItemsSection.tsx

@@ -14,7 +14,7 @@ import { Section } from '../../../modules/vendor/decentraland/routing/types'
 
 const ItemsSection = (props: {
   view: HomepageView
-  viewAllButton: React.ReactNode
+  viewAllButton?: React.ReactNode
   onChangeItemSection: (view: HomepageView, section: Section) => void
 }) => {
   const { view, viewAllButton, onChangeItemSection } = props
@@ -47,9 +47,11 @@ const ItemsSection = (props: {
           {t(`menu.${Section.EMOTES}`)}
         </div>
       </Tabs.Tab>
-      <div className="view-all-button">
-        <Tabs.Tab>{viewAllButton}</Tabs.Tab>
-      </div>
+      {viewAllButton ? (
+        <div className="view-all-button">
+          <Tabs.Tab>{viewAllButton}</Tabs.Tab>
+        </div>
+      ) : null}
     </Tabs>
   )
 

webapp/src/components/HomePage/Slideshow/Slideshow.tsx

@@ -27,6 +27,7 @@ const Slideshow = (props: Props) => {
     title,
     subtitle,
     viewAllTitle,
+    showViewAll,
     emptyMessage,
     assets,
     isSubHeader,
@@ -63,7 +64,7 @@ const Slideshow = (props: Props) => {
     (asset: Asset) => {
       getAnalytics().track(events.ASSET_CLICK, {
         id: asset.id,
-        section: title
+        section: title ?? 'Unknown'
       })
     },
     [title]
@@ -124,25 +125,27 @@ const Slideshow = (props: Props) => {
       <HeaderMenu>
         <HeaderMenu.Left>
           <div className="slideshow-header">
-            <Header sub={isSubHeader}>{title}</Header>
-            <Header sub>{subtitle}</Header>
+            {title ? <Header sub={isSubHeader}>{title}</Header> : null}
+            {subtitle ? <Header sub>{subtitle}</Header> : null}
             {hasItemsSection ? (
               <ItemsSection
                 view={view}
-                viewAllButton={viewAllButton()}
+                viewAllButton={showViewAll ? viewAllButton() : null}
                 onChangeItemSection={onChangeItemSection!}
               />
             ) : null}
           </div>
         </HeaderMenu.Left>
-        {!hasItemsSection ? (
+        {!hasItemsSection && showViewAll ? (
           <HeaderMenu.Right>{viewAllButton()}</HeaderMenu.Right>
         ) : null}
       </HeaderMenu>
       <div className="assets-container">
-        <div className={classNames("assets", {
-          "full-width": assetsToRender.length === pageSize
-        })}>
+        <div
+          className={classNames('assets', {
+            'full-width': assetsToRender.length === pageSize
+          })}
+        >
           {isLoading ? (
             assets.length === 0 ? (
               <Loader active size="massive" />
@@ -159,7 +162,7 @@ const Slideshow = (props: Props) => {
           className="arrow-container arrow-container-left"
           {...showArrowsHandlers}
         >
-          {showArrows && totalPages > 1 &&  (
+          {showArrows && totalPages > 1 && (
             <Button
               circular
               secondary

webapp/src/components/HomePage/Slideshow/Slideshow.types.ts

@@ -3,10 +3,11 @@ import { HomepageView } from '../../../modules/ui/asset/homepage/types'
 import { Section } from '../../../modules/vendor/routing/types'
 
 export type Props = {
-  title: string
+  title?: string
   subtitle?: string
   viewAllTitle?: string
   emptyMessage?: string
+  showViewAll?: boolean
   assets: Asset[]
   view: HomepageView
   isSubHeader?: boolean

webapp/src/components/Recommendation/Recommendation.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Item } from '@dcl/schemas'
+import { isErrorWithMessage } from '../../lib/error'
+import { ItemAPI } from '../../modules/vendor/decentraland/item/api'
+import { Slideshow } from '../HomePage/Slideshow'
+import { Asset } from '../../modules/asset/types'
+import { View } from '../../modules/ui/types'
+import { NFT_SERVER_URL } from '../../modules/vendor/decentraland'
+import { RECO_TYPE } from './Recommendation.types'
+
+const RECOMMENDER_URL = 'http://localhost:8000'
+
+export const Recommendation = ({
+  itemId,
+  type,
+  noTitle
+}: {
+  itemId: string
+  type: RECO_TYPE
+  noTitle?: boolean
+}) => {
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [items, setItems] = useState<Item[]>([])
+  const itemAPI = useMemo(
+    () =>
+      new ItemAPI(NFT_SERVER_URL, {
+        retries: 3,
+        retryDelay: 1000
+      }),
+    []
+  )
+
+  useEffect(() => {
+    setIsLoading(true)
+    fetch(`${RECOMMENDER_URL}/recommendation/${itemId}?type=${type}`)
+      .then(response => {
+        if (response.ok) {
+          return response.json()
+        } else if (response.status === 404) {
+          throw Error('No recommendation found')
+        }
+      })
+      // mockedFetch()
+      .then(itemIDs => itemAPI.get({ ids: itemIDs }))
+      .then(response => {
+        setItems(response.data)
+        setIsLoading(false)
+      })
+      .catch(error => {
+        setIsLoading(false)
+        setError(isErrorWithMessage(error) ? error.message : 'Unknown error')
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Slideshow
+      view={View.HOME_NEW_ITEMS}
+      title={
+        !noTitle
+          ? type === RECO_TYPE.SIMILARITY
+            ? 'You may also like'
+            : 'People also bought'
+          : undefined
+      }
+      onViewAll={() => undefined}
+      hasItemsSection={false}
+      showViewAll={false}
+      emptyMessage={error ?? undefined}
+      assets={items as Asset[]}
+      isLoading={isLoading}
+    />
+  )
+}

webapp/src/components/Recommendation/Recommendation.types.ts

@@ -0,0 +1,4 @@
+export enum RECO_TYPE {
+  SIMILARITY = 'similarity',
+  OTHERS_BOUGHT = 'othersBought'
+}

webapp/src/components/Recommendation/index.ts

@@ -0,0 +1,2 @@
+export * from './Recommendation'
+export * from './Recommendation.types'

webapp/src/modules/routing/locations.ts

@@ -106,7 +106,8 @@ export const locations = {
     contractAddress: string = ':contractAddress',
     tokenId: string = ':tokenId'
   ) => `/contracts/${contractAddress}/tokens/${tokenId}/bid`,
-  activity: () => `/activity`
+  activity: (boughtItem?: string) =>
+    `/activity${boughtItem ? `?${boughtItem}` : ''}`
 }
 
 function getResource(type: AssetType) {

webapp/src/modules/routing/sagas.ts

@@ -26,6 +26,7 @@ import {
 import { AssetType } from '../asset/types'
 import {
   BUY_ITEM_SUCCESS,
+  BuyItemSuccessAction,
   fetchItemRequest,
   fetchItemsRequest,
   fetchTrendingItemsRequest
@@ -601,6 +602,8 @@ function shouldResetOptions(previous: BrowseOptions, current: BrowseOptions) {
   )
 }
 
-function* handleRedirectToActivity() {
-  yield put(push(locations.activity()))
+function* handleRedirectToActivity(action: BuyItemSuccessAction) {
+  const boughtItem =
+    action.type === BUY_ITEM_SUCCESS ? action.payload.item.id : undefined
+  yield put(push(locations.activity(boughtItem)))
 }