Skip to content

Commit 5e7fc4d

Browse files
youngkidwarrioryoungkidwarrior
committed
Affiliate Page Styles
1 parent ed01af7 commit 5e7fc4d

File tree

1 file changed

+75
-40
lines changed

1 file changed

+75
-40
lines changed

‎packages/app/features/affiliate/screen.tsx

+75-40
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
AnimatePresence,
3+
Avatar,
34
Button,
45
Card,
56
CardHeader,
@@ -11,6 +12,7 @@ import {
1112
Stack,
1213
XStack,
1314
YStack,
15+
Link,
1416
} from '@my/ui'
1517

1618
import { useAffiliateReferrals } from './utils/useAffiliateReferrals'
@@ -22,7 +24,7 @@ import { useAffiliateStats } from './utils/useAffiliateStats'
2224

2325
export const AffiliateScreen = () => {
2426
return (
25-
<YStack f={1} width={'100%'} gap="$4">
27+
<YStack width={'100%'} gap="$4" pb="$6">
2628
<XStack alignItems="center" width={'100%'} jc="flex-end" gap="$6">
2729
<LinkableButton href="/leaderboard" fontWeight={'bold'}>
2830
Check Leaderboard
@@ -57,36 +59,36 @@ const StatsCards = () => {
5759
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
5860
) : (
5961
<>
60-
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
62+
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$11'}>
6163
{affiliateStats?.referral_count || 0}
6264
</Paragraph>
6365
</>
6466
)}
6567
</Card>
6668
<Card $gtLg={{ flexShrink: 0, flexBasis: '32%' }} w="100%" mih={152}>
6769
<CardHeader>
68-
<Label color={'$color10'}>Affiliate Send Score</Label>
70+
<Label color={'$color10'}>Network Rewards Share</Label>
6971
</CardHeader>
7072
{isLoading ? (
7173
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
7274
) : (
7375
<>
74-
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
75-
{formatAmount(affiliateStats?.affiliate_send_score || 0, 10)}
76+
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$11'}>
77+
{formatAmount(affiliateStats?.affiliate_send_score || 0, 10, 0)}
7678
</Paragraph>
7779
</>
7880
)}
7981
</Card>
8082
<Card $gtLg={{ flexShrink: 0, flexBasis: '32%' }} w="100%" mih={152}>
8183
<CardHeader>
82-
<Label color={'$color10'}>Affiliate Network +/-</Label>
84+
<Label color={'$color10'}>Network +/-</Label>
8385
</CardHeader>
8486
{isLoading ? (
8587
<Spinner alignSelf="flex-start" size="large" color="$color12" mt="auto" p="$4" />
8688
) : (
8789
<>
88-
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$10'}>
89-
{affiliateStats?.send_plus_minus || 0}
90+
<Paragraph pl="$4" pb="$3" fontWeight="600" size={'$12'} lineHeight={'$11'}>
91+
{formatAmount(affiliateStats?.network_plus_minus || 0, 10, 0)}
9092
</Paragraph>
9193
</>
9294
)}
@@ -100,7 +102,7 @@ const StatsCards = () => {
100102
}
101103

102104
const ReferralsList = () => {
103-
const pageSize = 10
105+
const pageSize = 30
104106
const result = useAffiliateReferrals({
105107
pageSize,
106108
})
@@ -115,13 +117,14 @@ const ReferralsList = () => {
115117
} = result
116118

117119
const { pages } = data ?? {}
120+
118121
return (
119-
<YStack f={1} width={'100%'} space="$4">
120-
<XStack alignItems="center" width={'100%'} gap="$3">
122+
<YStack space="$4">
123+
<XStack alignItems="center" gap="$3">
121124
<H3 fontWeight={'normal'}>Referrals</H3>
122125
</XStack>
123-
<YStack f={1} width={'100%'} p="$6" bg="$background" space="$4" br="$8">
124-
<ReferralsHeader />
126+
127+
<Card gap="$5" p="$5" w="100%" fd="row" flexWrap="wrap">
125128
{(() => {
126129
switch (true) {
127130
case isLoadingReferrals:
@@ -141,19 +144,11 @@ const ReferralsList = () => {
141144
default: {
142145
return pages?.map((referrals) => {
143146
return referrals?.map(({ referral }) => {
147+
if (!referral) return null
144148
return (
145149
<Fragment key={`${referral.referred_id}-${referral.tag}`}>
146150
<AnimateEnter>
147-
<XStack gap="$1" ai="center">
148-
<Paragraph w="12%" f={1} mb="0" size="$5" lineHeight="$4" ta="center">
149-
/{referral.tag}
150-
</Paragraph>
151-
<XStack f={1} ai="center" w="12%" jc="center" mb="0" gap="$2">
152-
<Paragraph size="$5" lineHeight="$4" ta="center">
153-
?
154-
</Paragraph>
155-
</XStack>
156-
</XStack>
151+
<ReferralsListRow referral={referral} />
157152
</AnimateEnter>
158153
</Fragment>
159154
)
@@ -172,38 +167,78 @@ const ReferralsList = () => {
172167
fetchNextPage()
173168
}}
174169
disabled={isFetchingNextPageReferrals || isFetchingReferrals}
175-
color="$color"
176170
width={200}
177171
mx="auto"
178172
mb="$6"
173+
bc="$color3"
179174
>
180175
Load More
181176
</Button>
182177
)}
183178
</>
184179
) : null}
185180
</AnimateEnter>
186-
</YStack>
181+
</Card>
187182
</YStack>
188183
)
189184
}
190185

191-
const ReferralsHeader = () => (
192-
<XStack gap="$1" ai="center">
193-
<Paragraph w="12%" mb="0" size="$5" lineHeight="$4">
194-
#
195-
</Paragraph>
196-
<Paragraph w="12%" f={1} mb="0" size="$5" lineHeight="$4" ta="center">
197-
Sendtag
198-
</Paragraph>
199-
<Paragraph w="12%" f={1} mb="0" size="$5" lineHeight="$4" ta="center">
200-
Referred Date
201-
</Paragraph>
202-
</XStack>
203-
)
186+
const ReferralsListRow = ({ referral }) => {
187+
const date = new Date(referral?.created_at).toLocaleString(undefined, { dateStyle: 'medium' })
188+
189+
return (
190+
<Card bc="$color0" ai="center">
191+
<Link
192+
href={`/profile/${referral.profile?.send_id}`}
193+
f={1}
194+
als="stretch"
195+
px="$5"
196+
py="$3"
197+
w="100%"
198+
h="100%"
199+
>
200+
<XStack gap="$5" f={1} ai="center" jc={'space-between'}>
201+
<XStack gap="$3.5" f={1} ai="center">
202+
<Avatar size="$4.5" br="$4" gap="$2">
203+
<Avatar.Image src={referral.avatar_url ?? ''} />
204+
<Avatar.Fallback jc="center" bc="$olive">
205+
<Avatar size="$4.5" br="$4">
206+
<Avatar.Image
207+
src={
208+
'https://ui-avatars.com/api/?name=TODO&size=256&format=png&background=86ad7f'
209+
}
210+
/>
211+
</Avatar>
212+
</Avatar.Fallback>
213+
</Avatar>
204214

205-
const ReferralsListRow = () => {
206-
return <YStack f={1} width={'100%'} space="$4" />
215+
<YStack>
216+
<XStack gap="$1.5" width={'100%'}>
217+
<Paragraph color="$color12" fontSize="$5">
218+
/{referral.tag}
219+
</Paragraph>
220+
</XStack>
221+
222+
<Stack>
223+
<Paragraph color="$color10" size={'$3'}>
224+
{date}
225+
</Paragraph>
226+
</Stack>
227+
</YStack>
228+
</XStack>
229+
<Stack als="flex-start">
230+
<Paragraph
231+
theme={referral.send_plus_minus >= 0 ? 'green_active' : 'red_active'}
232+
size={'$8'}
233+
lh={'$1'}
234+
>
235+
{referral.send_plus_minus >= 0 ? '+' : '-'}
236+
</Paragraph>
237+
</Stack>
238+
</XStack>
239+
</Link>
240+
</Card>
241+
)
207242
}
208243

209244
function AnimateEnter({ children }: { children: React.ReactNode }) {

0 commit comments

Comments
 (0)