[Web App] Select target recommendations are taken from the backend / …

…Components structure - refactor (#996)

* Select target recommendations are taken from the backend / components structure refactor

* RewardStore: rewardFromResource functionaliti applied to getRecommendedRewards request response - cover image urls issue resolved

* functionality to minimize target reward thumbnail on 'get inspire' button click - added

* unnecessary functionality - removed

* SelectTargetRewardPage: 'Want something different?' block - added

* SelectTargetRewardContainer: refactor

packages/web-app/package.json

@@ -79,7 +79,7 @@
     "@fortawesome/free-regular-svg-icons": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@saladtechnologies/garden-components": "1.1.2",
+    "@saladtechnologies/garden-components": "1.1.5",
     "@saladtechnologies/garden-fonts": "1.0.3",
     "@saladtechnologies/garden-icons": "1.0.11",
     "@storybook/addon-a11y": "6.5.16",

packages/web-app/src/App.tsx

@@ -71,7 +71,6 @@ const styles = (theme: SaladTheme) => ({
     flex: 1,
     maxWidth: 1600,
     position: 'relative',
-    paddingBottom: 100,
     marginTop: 60,
   },
 })

packages/web-app/src/Routes.tsx

@@ -5,7 +5,7 @@ import { ReferralOnboardingContainer, ReferralWelcomeContainer } from './modules
 import { LoginPageContainer } from './modules/auth-views'
 import { ReplaceBonusModalContainer } from './modules/bonus-views'
 import { EarnMenuContainer } from './modules/earn-views'
-import { RewardDetailsContainer } from './modules/reward-views'
+import { RewardDetailsContainer, SelectTargetRewardContainer } from './modules/reward-views'
 import { SaladPayOrderSummaryContainer } from './modules/salad-pay-views'
 import { SettingsContainer } from './modules/settings-views'
 import { StorefrontHomePage } from './modules/storefront-views/pages/StorefrontHomePage'
@@ -30,9 +30,8 @@ const _Routes = ({ location }: RouteComponentProps) => {
       <Route path={['/store', '/store/search']} exact render={() => <StorefrontHomePage />} />
       <Route path="/store/rewards/:id" exact component={RewardDetailsContainer} />
       <Route path="/store/vault" exact component={VaultListContainer} />
-      {/* Target Reward Page */}
-      {/* * NOTE: Should be uncommented when backend is ready */}
-      {/* <Route path="/store/select-target-reward" exact component={SelectTargetRewardContainer} /> */}
+      {/* Recommended Target Rewards Page */}
+      <Route path="/store/select-target-reward" exact component={SelectTargetRewardContainer} />
 
       {/* Modals */}
       {/* SaladPay: This is stand in until we figure out iFrames, popups... */}

packages/web-app/src/modules/home-views/NavigationBarContainer.tsx

@@ -10,7 +10,6 @@ const mapStoreToProps = (store: RootStore): any => {
     store.auth.login()
   }
 
-  const goToAccount = () => store.routing.push('/account/summary')
   const bonus = store.bonuses.firstExpiringUnclaimedBonus
 
   const selectedAvatar = store.profile.profileAvatar
@@ -27,6 +26,10 @@ const mapStoreToProps = (store: RootStore): any => {
       }
     : null
 
+  const goToAccount = () => store.routing.push('/account/summary')
+  const goToSelectTargetRewardPage = () => store.routing.push('/store/select-target-reward')
+  const goToTargetRewardPage = () => store.routing.push(`/store/rewards/${targetReward?.id}`)
+
   return {
     avatar: isAuthenticated ? (
       selectedAvatar ? (
@@ -63,6 +66,8 @@ const mapStoreToProps = (store: RootStore): any => {
     startButtonHoverLabel: undefined,
     startButtonErrorClick: startButton.onClickWithError,
     onRemoveTargetRewardClick: store.rewards.removeSelectedTargetReward,
+    onSelectTargetRewardClick: goToSelectTargetRewardPage,
+    onOpenTargetRewardClick: goToTargetRewardPage,
     startButtonProgress: startButton.progress,
     startButtonRunningTime: startButton.runningTime,
     startButtonToolTip: startButton.toolTip,

packages/web-app/src/modules/reward-views/SelectTargetRewardContainer.tsx

@@ -2,10 +2,16 @@ import { connect } from '../../connect'
 import type { RootStore } from '../../Store'
 import { SelectTargetRewardPage } from './pages'
 
-const mapStoreToProps = (store: RootStore): any => ({
-  // * NOTE: Should be replaced with real data when backend is ready
-  targetRewards: [],
-  onConfirmTargetReward: store.rewards.setSelectedTargetReward,
-})
+const mapStoreToProps = (store: RootStore): any => {
+  const navigateToStorePage = () => store.routing.push(`/store`)
+  return {
+    recommendedRewards: store.rewards.recommendedRewards,
+    targetReward: store.rewards.selectedTargetReward,
+    onConfirmTargetReward: store.rewards.setSelectedTargetReward,
+    onSelectDifferentReward: store.rewards.removeSelectedTargetReward,
+    fetchRecommendedRewards: store.rewards.fetchRecommendedRewards,
+    navigateToStorePage,
+  }
+}
 
 export const SelectTargetRewardContainer = connect(mapStoreToProps, SelectTargetRewardPage)

packages/web-app/src/modules/reward-views/components/index.tsx

@@ -1,9 +1,9 @@
+export * from '../../storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBar'
 export * from './RewardDescriptionPanel'
 export * from './RewardDisclaimers'
 export * from './RewardHeaderBar'
 export * from './RewardHowToPanel'
 export * from './RewardImageCarousel'
 export * from './RewardInfoPanel'
 export * from './RewardRequirementsPanel'
-export * from './RewardSearchBar'
 export * from './RewardSlider'

packages/web-app/src/modules/reward-views/index.tsx

@@ -1,4 +1,2 @@
-export * from './RewardDetailsContainer'
-export * from './RewardSearchBarContainer'
-export * from './RewardSearchResultContainer'
 export * from './SelectTargetRewardContainer'
+export * from './RewardDetailsContainer'

packages/web-app/src/modules/reward-views/pages/RewardDetailsPage.tsx → packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/RewardDetailsPage.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { Head, Scrollbar } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
-import type { Reward } from '../../reward/models'
+import { Head, Scrollbar } from '../../../../components'
+import type { SaladTheme } from '../../../../SaladTheme'
+import type { Reward } from '../../../reward/models'
 import {
   RewardDescriptionPanel,
   RewardDisclaimers,
@@ -13,7 +13,7 @@ import {
   RewardImageCarousel,
   RewardInfoPanel,
   RewardRequirementsPanel,
-} from '../components'
+} from '../../components'
 
 const styles = (theme: SaladTheme) => ({
   container: {

packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/index.ts

@@ -0,0 +1,2 @@
+export * from './RewardDetailsPage';
+

packages/web-app/src/modules/reward-views/components/RewardCard/RewardCard.tsx → packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/RewardCard.tsx

@@ -5,12 +5,12 @@ import { Img } from 'react-image'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import Skeleton from 'react-loading-skeleton'
-import type { SaladTheme } from '../../../../SaladTheme'
-import { DefaultTheme } from '../../../../SaladTheme'
-import type { Reward } from '../../../reward/models'
-import { RewardMissingImage } from '../RewardMissingImage'
+import type { SaladTheme } from '../../../../../../SaladTheme'
+import { DefaultTheme } from '../../../../../../SaladTheme'
+import type { Reward } from '../../../../../reward/models'
+import { RewardMissingImage } from '../../../../components/RewardMissingImage'
 
-const styles = (theme: SaladTheme) => ({
+export const styles = (theme: SaladTheme) => ({
   selected: {},
   imageOverlay: {
     display: 'none',
@@ -128,7 +128,7 @@ const _RewardCard: FunctionComponent<Props> = ({ classes, reward, isSelected, on
         </div>
       </div>
       <div className={classes.name}>{reward.name}</div>
-      <div className={classes.price}>{reward.price.toFixed(2)}</div>
+      <div className={classes.price}>${reward.price.toFixed(2)}</div>
     </div>
   )
 }

packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardsList.tsx

@@ -0,0 +1,48 @@
+import type { FunctionComponent } from 'react'
+import { useState } from 'react'
+import type { WithStyles } from 'react-jss'
+import withStyles from 'react-jss'
+import type { Reward } from '../../../../reward/models'
+import { RewardCard } from './RewardCard'
+
+export const styles = {
+  rewards: {
+    display: 'flex',
+    gap: '32px',
+    alignItems: 'stretch',
+    maxWidth: 655,
+    flexWrap: 'wrap',
+    paddingBottom: '40px',
+  },
+}
+
+interface Props extends WithStyles<typeof styles> {
+  rewards: Reward[]
+  onConfirmTargetReward: (reward: Reward) => void
+}
+
+const visibleRewardsAmount = 6
+
+const _RewardsList: FunctionComponent<Props> = ({ classes, rewards, onConfirmTargetReward }) => {
+  const [selectedRewardId, setSelectedRewardId] = useState<string | null>(null)
+
+  const selectTargetReward = (rewardId: string) => {
+    setSelectedRewardId(rewardId)
+  }
+
+  return (
+    <div className={classes.rewards}>
+      {rewards.slice(0, visibleRewardsAmount).map((reward) => (
+        <RewardCard
+          key={reward.id}
+          reward={reward}
+          isSelected={selectedRewardId === reward.id}
+          onSelectReward={selectTargetReward}
+          onConfirmReward={onConfirmTargetReward}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const RewardsList = withStyles(styles)(_RewardsList)

packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/index.ts

@@ -0,0 +1,2 @@
+export * from './RewardsList';
+