From 4a6eb8a4bce61e307814364bcff91b71b58f6dcb Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <lausuper@gmail.com>
Date: Thu, 18 May 2023 17:01:47 -0300
Subject: [PATCH 1/2] feat: Add recommendations to item detail

---
 .../ItemDetail/ItemDetail.module.css          |  8 +++
 .../AssetPage/ItemDetail/ItemDetail.tsx       | 12 +++-
 .../HomePage/Slideshow/ItemsSection.tsx       | 10 +--
 .../HomePage/Slideshow/Slideshow.tsx          | 17 +++--
 .../HomePage/Slideshow/Slideshow.types.ts     |  1 +
 .../Recommendation/Recommendation.tsx         | 71 +++++++++++++++++++
 .../Recommendation/Recommendation.types.ts    |  4 ++
 webapp/src/components/Recommendation/index.ts |  2 +
 8 files changed, 113 insertions(+), 12 deletions(-)
 create mode 100644 webapp/src/components/Recommendation/Recommendation.tsx
 create mode 100644 webapp/src/components/Recommendation/Recommendation.types.ts
 create mode 100644 webapp/src/components/Recommendation/index.ts

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
index c2d6c0c652..ed51db0f63 100644
--- a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
index 9edf7d89a9..2e703d6b1d 100644
--- a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
+++ b/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>
+      }
     />
   )
 }
diff --git a/webapp/src/components/HomePage/Slideshow/ItemsSection.tsx b/webapp/src/components/HomePage/Slideshow/ItemsSection.tsx
index 83bc828657..48ca846619 100644
--- a/webapp/src/components/HomePage/Slideshow/ItemsSection.tsx
+++ b/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>
   )
 
diff --git a/webapp/src/components/HomePage/Slideshow/Slideshow.tsx b/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
index 89c3e382c1..2c9aff3557 100644
--- a/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
+++ b/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
@@ -27,6 +27,7 @@ const Slideshow = (props: Props) => {
     title,
     subtitle,
     viewAllTitle,
+    showViewAll,
     emptyMessage,
     assets,
     isSubHeader,
@@ -125,24 +126,26 @@ const Slideshow = (props: Props) => {
         <HeaderMenu.Left>
           <div className="slideshow-header">
             <Header sub={isSubHeader}>{title}</Header>
-            <Header sub>{subtitle}</Header>
+            {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
diff --git a/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts b/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
index b79ec6455e..96b63dff25 100644
--- a/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
+++ b/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
@@ -7,6 +7,7 @@ export type Props = {
   subtitle?: string
   viewAllTitle?: string
   emptyMessage?: string
+  showViewAll?: boolean
   assets: Asset[]
   view: HomepageView
   isSubHeader?: boolean
diff --git a/webapp/src/components/Recommendation/Recommendation.tsx b/webapp/src/components/Recommendation/Recommendation.tsx
new file mode 100644
index 0000000000..29026db30c
--- /dev/null
+++ b/webapp/src/components/Recommendation/Recommendation.tsx
@@ -0,0 +1,71 @@
+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
+}: {
+  itemId: string
+  type: RECO_TYPE
+}) => {
+  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={
+        type === RECO_TYPE.SIMILARITY
+          ? 'You may also like'
+          : 'People also bought'
+      }
+      onViewAll={() => undefined}
+      hasItemsSection={false}
+      showViewAll={false}
+      emptyMessage={error ?? undefined}
+      assets={items as Asset[]}
+      isLoading={isLoading}
+    />
+  )
+}
diff --git a/webapp/src/components/Recommendation/Recommendation.types.ts b/webapp/src/components/Recommendation/Recommendation.types.ts
new file mode 100644
index 0000000000..edb12791b6
--- /dev/null
+++ b/webapp/src/components/Recommendation/Recommendation.types.ts
@@ -0,0 +1,4 @@
+export enum RECO_TYPE {
+  SIMILARITY = 'similarity',
+  OTHERS_BOUGHT = 'othersBought'
+}
diff --git a/webapp/src/components/Recommendation/index.ts b/webapp/src/components/Recommendation/index.ts
new file mode 100644
index 0000000000..379bcdc1e9
--- /dev/null
+++ b/webapp/src/components/Recommendation/index.ts
@@ -0,0 +1,2 @@
+export * from './Recommendation'
+export * from './Recommendation.types'

From 788fba168bbad692618ab3f66801247578b46740 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <lausuper@gmail.com>
Date: Thu, 18 May 2023 18:28:01 -0300
Subject: [PATCH 2/2] feat: Add recommendation on buy

---
 .../components/ActivityPage/ActivityPage.tsx  | 39 +++++++++++++++++--
 .../HomePage/Slideshow/Slideshow.tsx          |  4 +-
 .../HomePage/Slideshow/Slideshow.types.ts     |  2 +-
 .../Recommendation/Recommendation.tsx         | 12 ++++--
 webapp/src/modules/routing/locations.ts       |  3 +-
 webapp/src/modules/routing/sagas.ts           |  7 +++-
 6 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/ActivityPage/ActivityPage.tsx b/webapp/src/components/ActivityPage/ActivityPage.tsx
index c2fa5e8a37..6e6c9db28d 100644
--- a/webapp/src/components/ActivityPage/ActivityPage.tsx
+++ b/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')}
diff --git a/webapp/src/components/HomePage/Slideshow/Slideshow.tsx b/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
index 2c9aff3557..16aa517635 100644
--- a/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
+++ b/webapp/src/components/HomePage/Slideshow/Slideshow.tsx
@@ -64,7 +64,7 @@ const Slideshow = (props: Props) => {
     (asset: Asset) => {
       getAnalytics().track(events.ASSET_CLICK, {
         id: asset.id,
-        section: title
+        section: title ?? 'Unknown'
       })
     },
     [title]
@@ -125,7 +125,7 @@ const Slideshow = (props: Props) => {
       <HeaderMenu>
         <HeaderMenu.Left>
           <div className="slideshow-header">
-            <Header sub={isSubHeader}>{title}</Header>
+            {title ? <Header sub={isSubHeader}>{title}</Header> : null}
             {subtitle ? <Header sub>{subtitle}</Header> : null}
             {hasItemsSection ? (
               <ItemsSection
diff --git a/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts b/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
index 96b63dff25..278f63c22c 100644
--- a/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
+++ b/webapp/src/components/HomePage/Slideshow/Slideshow.types.ts
@@ -3,7 +3,7 @@ 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
diff --git a/webapp/src/components/Recommendation/Recommendation.tsx b/webapp/src/components/Recommendation/Recommendation.tsx
index 29026db30c..79d58778b0 100644
--- a/webapp/src/components/Recommendation/Recommendation.tsx
+++ b/webapp/src/components/Recommendation/Recommendation.tsx
@@ -12,10 +12,12 @@ const RECOMMENDER_URL = 'http://localhost:8000'
 
 export const Recommendation = ({
   itemId,
-  type
+  type,
+  noTitle
 }: {
   itemId: string
   type: RECO_TYPE
+  noTitle?: boolean
 }) => {
   const [error, setError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -56,9 +58,11 @@ export const Recommendation = ({
     <Slideshow
       view={View.HOME_NEW_ITEMS}
       title={
-        type === RECO_TYPE.SIMILARITY
-          ? 'You may also like'
-          : 'People also bought'
+        !noTitle
+          ? type === RECO_TYPE.SIMILARITY
+            ? 'You may also like'
+            : 'People also bought'
+          : undefined
       }
       onViewAll={() => undefined}
       hasItemsSection={false}
diff --git a/webapp/src/modules/routing/locations.ts b/webapp/src/modules/routing/locations.ts
index fb41b98b70..135f4ee8d2 100644
--- a/webapp/src/modules/routing/locations.ts
+++ b/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) {
diff --git a/webapp/src/modules/routing/sagas.ts b/webapp/src/modules/routing/sagas.ts
index 959eba1b0a..e8b8a9115b 100644
--- a/webapp/src/modules/routing/sagas.ts
+++ b/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)))
 }