Achievements Page - added (#1057)

packages/web-app/src/SaladTheme.tsx

@@ -31,6 +31,7 @@ export interface SaladTheme {
   fontGroteskLight09: string
   fontGroteskLight25: string
   fontGroteskMedium25: string
+  fontMallory: string
 }
 
 export const DefaultTheme: SaladTheme = {
@@ -66,4 +67,5 @@ export const DefaultTheme: SaladTheme = {
   fontGroteskLight09: 'SharpGroteskLight09',
   fontGroteskLight25: 'SharpGroteskLight25',
   fontGroteskMedium25: 'sharpGroteskMedium25',
+  fontMallory: 'Mallory',
 }

packages/web-app/src/modules/achievements-views/AchievementPageContainer.tsx

@@ -0,0 +1,10 @@
+import { connect } from '../../connect'
+import type { RootStore } from '../../Store'
+import { AchievementPage } from './components/AchievementPage'
+
+const mapStoreToProps = (_store: RootStore): any => ({
+  // TODD: add store mapping
+  // Example: unclaimedBonuses: store.bonuses.unclaimedBonuses,
+})
+
+export const AchievementPageContainer = connect(mapStoreToProps, AchievementPage)

packages/web-app/src/modules/achievements-views/components/AchievementCard.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames'
+import type CSS from 'csstype'
+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'
+
+const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
+  achievementCardWrapper: {
+    width: '346px',
+    height: '179px',
+    position: 'relative',
+    opacity: 0.35,
+    backgroundColor: theme.darkBlue,
+  },
+  achievementCardWrapperAchieved: {
+    opacity: 1,
+  },
+  achievementImage: {
+    position: 'relative',
+    width: '155px',
+    height: '155px',
+  },
+  achievementTitle: {
+    fontFamily: theme.fontMallory,
+    fontSize: theme.medium,
+    fontWeight: 700,
+    color: theme.green,
+    margin: 0,
+  },
+  achievementDescription: {
+    fontFamily: theme.fontMallory,
+    fontSize: theme.medium,
+    color: theme.lightGreen,
+    width: '155px',
+    margin: 0,
+  },
+  achievementContent: {
+    position: 'absolute',
+    top: '43px',
+    left: '68px',
+    width: '278px',
+    height: '86px',
+    padding: '24px',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    gap: '8px',
+    flexShrink: 0,
+    borderRadius: '4px',
+    border: '1px solid rgba(234, 236, 239, 0.5) ',
+    background:
+      'linear-gradient(187deg, rgba(252, 252, 252, 0.06) -32.65%, rgba(252, 252, 252, 0.01) 33.12%, rgba(252, 252, 252, 0.06) 56.13%, rgba(252, 252, 252, 0.12) 99.63%)',
+    boxShadow:
+      '16px 8px 73px 0px rgba(252, 252, 252, 0.05), 34px 34px 50px 0px rgba(0, 0, 0, 0.10), -8px -6px 80px 0px rgba(252, 252, 252, 0.05) inset',
+    backdropFilter: 'blur(17.5px)',
+  },
+
+  achievementDate: {
+    fontFamily: theme.fontMallory,
+    fontSize: theme.small,
+    position: 'absolute',
+    right: 0,
+    top: '140px',
+    color: '#859099',
+    textAlign: 'right',
+    margin: 0,
+  },
+})
+
+interface Props extends WithStyles<typeof styles> {
+  imageUrl: string
+  title: string
+  description: string
+  isAchieved: boolean
+  dateAchieved?: string
+}
+
+const _AchievementCard = ({ title, imageUrl, description, isAchieved, dateAchieved, classes }: Props) => {
+  return (
+    <div
+      className={classNames(classes.achievementCardWrapper, isAchieved && classes.achievementCardWrapperAchieved)}
+      aria-label={title}
+    >
+      <p className={classes.achievementTitle}>{title}</p>
+      <div className={classes.achievementContent}>
+        <p className={classes.achievementDescription}>{description}</p>
+      </div>
+      <Img
+        className={classes.achievementImage}
+        src={imageUrl}
+        draggable={false}
+        alt={title}
+        loader={<Skeleton height={'100%'} />}
+      />
+      {dateAchieved && <p className={classes.achievementDate}>{dateAchieved}</p>}
+    </div>
+  )
+}
+
+export const AchievementCard = withStyles(styles)(_AchievementCard)

packages/web-app/src/modules/achievements-views/components/AchievementPage.tsx

@@ -0,0 +1,70 @@
+import type CSS from 'csstype'
+import Scrollbars from 'react-custom-scrollbars'
+import type { IntlShape } from 'react-intl'
+import { injectIntl } from 'react-intl'
+import type { WithStyles } from 'react-jss'
+import withStyles from 'react-jss'
+import type { SaladTheme } from '../../../SaladTheme'
+import { withLogin } from '../../auth-views'
+import defaultAchievementImage from '../assets/Achievement.png'
+import { AchievementCard } from './AchievementCard'
+
+const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
+  achievementPageWrapper: {
+    width: '100%',
+    height: '100%',
+    padding: '30px',
+    boxSizing: 'border-box',
+  },
+  achievementPageGrid: {
+    marginTop: '32px',
+    width: '100%',
+    display: 'inline-grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(296px, 4fr))',
+    gridGap: '50px',
+    boxSizing: 'border-box',
+    marginBottom: '96px',
+  },
+  achievementPageHeader: {
+    margin: 0,
+    fontFamily: theme.fontGroteskLight09,
+    color: theme.green,
+    fontSize: '56px',
+    fontWeight: 300,
+    textShadow: '0px 0px 24px rgba(178, 213, 48, 0.7)',
+  },
+})
+
+interface Props extends WithStyles<typeof styles> {
+  intl: IntlShape
+}
+
+const _AchievementPage = ({ classes }: Props) => {
+  const achievements = new Array(28).fill({
+    title: 'When Chef’s Mix, You Earn Six',
+    imageUrl: defaultAchievementImage,
+    description: 'Earn your first $6',
+    dateAchieved: 'Achieved on Sept 8, 2023',
+    isAchieved: true,
+  })
+  return (
+    <Scrollbars>
+      <div className={classes.achievementPageWrapper}>
+        <h2 className={classes.achievementPageHeader}>Achievements</h2>
+        <div className={classes.achievementPageGrid}>
+          {achievements.map((achievement) => (
+            <AchievementCard
+              title={achievement.title}
+              imageUrl={achievement.imageUrl}
+              description={achievement.description}
+              dateAchieved={achievement.dateAchieved}
+              isAchieved={achievement.isAchieved}
+            />
+          ))}
+        </div>
+      </div>
+    </Scrollbars>
+  )
+}
+
+export const AchievementPage = withLogin(withStyles(styles)(injectIntl(_AchievementPage)))

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

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

packages/web-app/src/modules/settings-views/SettingsContainer.tsx

@@ -1,9 +1,10 @@
+import type { RootStore } from '../../Store'
 import { SettingsPage } from '../../components'
 import { config } from '../../config'
 import { connect } from '../../connect'
-import type { RootStore } from '../../Store'
 import { AccountContainer } from '../account-views/account-views'
 import { ReferralSettingsContainer } from '../account-views/referral-views'
+import { AchievementPageContainer } from '../achievements-views'
 import { BonusPageContainer } from '../bonus-views'
 
 const mapStoreToProps = (store: RootStore): any => {
@@ -24,6 +25,7 @@ const mapStoreToProps = (store: RootStore): any => {
       { url: '/account/summary', text: 'Account', component: AccountContainer },
       { url: '/account/referrals', text: 'Referrals', component: ReferralSettingsContainer },
       { url: '/account/bonuses', text: 'Bonuses', component: BonusPageContainer },
+      { url: '/account/achievements', text: 'Achievements', component: AchievementPageContainer },
     ],
     onClose: () => {
       store.analytics.trackSmartLink('/store', 'Back')