update referral progress ui (#1158)

SaladTechnologies · Jul 12, 2024 · 6d2c2f3 · 6d2c2f3
1 parent 9cbadbb
commit 6d2c2f3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 49 deletions.
diff --git a/packages/web-app/src/modules/account-views/referral-views/CurrentReferralPanelContainer.tsx b/packages/web-app/src/modules/account-views/referral-views/CurrentReferralPanelContainer.tsx
diff --git a/packages/web-app/src/modules/account-views/referral-views/ReferralSettingsContainer.tsx b/packages/web-app/src/modules/account-views/referral-views/ReferralSettingsContainer.tsx
@@ -2,6 +2,8 @@ import { connect } from '../../../connect'
 import type { RootStore } from '../../../Store'
 import { ReferralSettings } from './components/ReferralSettings'
 
-const mapStoreToProps = (_store: RootStore): any => ({})
+const mapStoreToProps = (store: RootStore): any => ({
+  referral: store.referral.currentReferral,
+})
 
 export const ReferralSettingsContainer = connect(mapStoreToProps, ReferralSettings)
diff --git a/...ages/web-app/src/modules/account-views/referral-views/components/CurrentReferralPanel.tsx b/...ages/web-app/src/modules/account-views/referral-views/components/CurrentReferralPanel.tsx
diff --git a/packages/web-app/src/modules/account-views/referral-views/components/ReferralSettings.tsx b/packages/web-app/src/modules/account-views/referral-views/components/ReferralSettings.tsx
@@ -1,17 +1,15 @@
 import classnames from 'classnames'
-import type { ReactNode } from 'react'
-import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { Divider, Head, SectionHeader } from '../../../../components'
 import type { SaladTheme } from '../../../../SaladTheme'
+import { Divider, Head, SectionHeader } from '../../../../components'
 import { withLogin } from '../../../auth-views'
 import type { Referral } from '../../../referral/models'
-import { CurrentReferralPanelContainer } from '../CurrentReferralPanelContainer'
 import { ReferralCodeContainer } from '../ReferralCodeContainer'
 import { ReferralListContainer } from '../ReferralListContainer'
 import { ReferralStatsContainer } from '../ReferralStatsContainer'
 import { SendReferralContainer } from '../SendReferralContainer'
+import { CurrentReferralProgress } from './CurrentReferralProgress'
 import { ReferralDescription } from './ReferralDescription'
 
 const styles = (theme: SaladTheme) => ({
@@ -36,35 +34,33 @@ const styles = (theme: SaladTheme) => ({
 })
 
 interface Props extends WithStyles<typeof styles> {
-  referrals?: Referral[]
+  referral: Referral
 }
 
-class _ReferralSettings extends Component<Props> {
-  public override render(): ReactNode {
-    const { classes } = this.props
-
-    return (
-      <div className={classnames(classes.container)}>
-        <Head title="Referrals" />
-        <div className={classnames(classes.content)}>
-          <div className={classes.column}>
-            <CurrentReferralPanelContainer />
+const _ReferralSettings = ({ classes, referral }: Props) => (
+  <div className={classnames(classes.container)}>
+    <Head title="Referrals" />
+    <div className={classnames(classes.content)}>
+      <div className={classes.column}>
+        {referral && (
+          <>
+            <CurrentReferralProgress referral={referral} />
             <Divider />
-            <SectionHeader>Your Code</SectionHeader>
-            <ReferralCodeContainer />
-            <SectionHeader>Send Referral</SectionHeader>
-            <SendReferralContainer />
-            <Divider />
-            <ReferralDescription />
-          </div>
-          <div className={classes.column}>
-            <ReferralStatsContainer />
-            <ReferralListContainer />
-          </div>
-        </div>
+          </>
+        )}
+        <SectionHeader>Your Code</SectionHeader>
+        <ReferralCodeContainer />
+        <SectionHeader>Send Referral</SectionHeader>
+        <SendReferralContainer />
+        <Divider />
+        <ReferralDescription />
       </div>
-    )
-  }
-}
+      <div className={classes.column}>
+        <ReferralStatsContainer />
+        <ReferralListContainer />
+      </div>
+    </div>
+  </div>
+)
 
 export const ReferralSettings = withLogin(withStyles(styles)(_ReferralSettings))