Skip to content

Commit 1d42a41

Browse files
bitboxerm0pperssalimhb
authored
✨ add affiliate logo for checkins (#116)
closes [#85](railslove/recover-backlog#85) Co-authored-by: Andreas Streichardt <[email protected]> Co-authored-by: salimhb <[email protected]>
1 parent 5244e35 commit 1d42a41

File tree

5 files changed

+90
-23
lines changed

5 files changed

+90
-23
lines changed

Diff for: ‎lib/api/areas.ts

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface AreaRes {
2323
ownerIsBlocked: boolean
2424
frontendUrl: string
2525
publicKey: string
26+
affiliateLogo?: string
2627
}
2728

2829
export async function getArea(id: AreaRes['id']): Promise<AreaRes> {

Diff for: ‎pages/checkin.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export default function CheckinPage() {
155155
}, [isReady, publicKey, tryAutoCheckin])
156156

157157
return (
158-
<MobileApp logoVariant="big">
158+
<MobileApp logoVariant="big" secondaryLogo={areaInfo.data?.affiliateLogo}>
159159
<Head>
160160
<title key="title">Checkin... | recover</title>
161161
</Head>

Diff for: ‎pages/my-checkins.tsx

+22-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useMutation } from 'react-query'
55
import { checkout } from '~lib/actions'
66
import { isCareEnv } from '~lib/config'
77
import { Checkin } from '~lib/db'
8-
import { useCheckins, useDelayedLoading } from '~lib/hooks'
8+
import { useArea, useCheckins, useDelayedLoading } from '~lib/hooks'
99
import { FixedBottomBar } from '~ui/blocks/BottomBar'
1010
import { CheckinCard, CheckinCardContainer } from '~ui/blocks/CheckinCard'
1111
import { LastCheckins } from '~ui/blocks/LastCheckins'
@@ -30,17 +30,19 @@ export default function MyCheckinsPage() {
3030
[setIsLoading, checkoutFn]
3131
)
3232

33+
const sortedCheckins = React.useMemo(() => {
34+
// Sort from old to new
35+
return checkinsInfo.data?.sort(
36+
(c1, c2) => c1.enteredAt.getTime() - c2.enteredAt.getTime()
37+
)
38+
}, [checkinsInfo.data])
39+
3340
// Sorts checkins by time and groups proxy checkins together with their "main" checkins
3441
//
3542
// We do this by first sorting the checkins by checkin time, thus we always have a main checkin
3643
// and followed by the associated proxy checkins. We take each of these consecutive checkins
3744
// and put them in an array so we can render them as a group.
3845
const groupedCheckins = React.useMemo(() => {
39-
// Sort from old to new
40-
const sortedCheckins = checkinsInfo.data?.sort(
41-
(c1, c2) => c1.enteredAt.getTime() - c2.enteredAt.getTime()
42-
)
43-
4446
return sortedCheckins?.reduce((result: Checkin[][], checkin: Checkin) => {
4547
if (!checkin.proxyCheckin) {
4648
result.unshift([checkin]) // main checkins are added in a new array
@@ -50,10 +52,22 @@ export default function MyCheckinsPage() {
5052

5153
return result
5254
}, [])
53-
}, [checkinsInfo.data])
55+
}, [sortedCheckins])
56+
57+
const lastCheckin = React.useMemo(() => {
58+
if (!sortedCheckins) {
59+
return
60+
}
61+
if (sortedCheckins.length < 1) {
62+
return
63+
}
64+
return sortedCheckins[sortedCheckins.length - 1]
65+
}, [sortedCheckins])
66+
67+
const area = useArea(lastCheckin?.areaId)
5468

5569
return (
56-
<MobileApp logoVariant="sticky">
70+
<MobileApp logoVariant="sticky" secondaryLogo={area?.data?.affiliateLogo}>
5771
<Head>
5872
<title key="title">Meine Checkins | recover</title>
5973
</Head>

Diff for: ‎ui/layouts/MobileApp.tsx

+63-11
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,31 @@ import { SharedMeta } from '~ui/blocks/SharedMeta'
1919
interface Props {
2020
children: React.ReactNode
2121
logoVariant?: 'big' | 'small' | 'sticky'
22+
secondaryLogo?: string
2223
}
2324

2425
export const MobileApp: React.FC<Props> = ({
2526
children,
2627
logoVariant = 'small',
28+
secondaryLogo = null,
2729
}) => {
2830
return (
2931
<Limit>
3032
<Head>
3133
<title key="title">{pageTitle}</title>
3234
</Head>
3335
<SharedMeta />
34-
<LogoBox variant={logoVariant} layoutId="appLogo">
35-
<Logo />
36-
</LogoBox>
37-
<Box height={logoVariant === 'sticky' ? 6 : 4} />
36+
<LogoContainer variant={logoVariant}>
37+
<LogoBox variant={logoVariant} layoutId="appLogo">
38+
<Logo />
39+
</LogoBox>
40+
{secondaryLogo ? (
41+
<SecondaryLogoBox>
42+
<SecondaryLogo src={secondaryLogo} />
43+
</SecondaryLogoBox>
44+
) : null}
45+
</LogoContainer>
46+
<Box height={logoVariant === 'sticky' ? 10 : 4} />
3847
{children}
3948
</Limit>
4049
)
@@ -60,25 +69,68 @@ const LogoBox = styled(motion.div)(
6069
width: '100%',
6170
height: '100%',
6271
},
72+
flexShrink: 0,
73+
display: 'flex',
6374
},
6475
variant({
6576
variants: {
6677
big: {
67-
width: logoBigWidth,
78+
maxWidth: logoBigWidth,
79+
maxHeight: logoBigHeight,
80+
},
81+
small: {
82+
maxWidth: logoSmallWidth,
83+
maxHeight: logoSmallHeight,
84+
},
85+
sticky: {
86+
maxWidth: logoSmallWidth,
87+
maxHeight: logoSmallHeight,
88+
},
89+
},
90+
})
91+
)
92+
93+
const LogoContainer = styled('div')(
94+
{
95+
'div:first-child': {
96+
paddingRight: '5px',
97+
},
98+
'div:last-child': {
99+
paddingLeft: '5px',
100+
},
101+
width: '356px',
102+
},
103+
css({
104+
display: 'flex',
105+
}),
106+
variant({
107+
variants: {
108+
big: {
68109
height: logoBigHeight,
69-
maxWidth: '100%',
70110
},
71111
small: {
72-
width: logoSmallWidth,
73112
height: logoSmallHeight,
74-
maxWidth: '100%',
75113
},
76114
sticky: {
77-
top: 4,
78-
position: 'fixed',
79-
width: logoSmallWidth,
80115
height: logoSmallHeight,
116+
position: 'fixed',
81117
},
82118
},
83119
})
84120
)
121+
122+
const SecondaryLogoBox = styled('div')(
123+
css({
124+
width: '100%',
125+
height: '100%',
126+
})
127+
)
128+
129+
const SecondaryLogo = styled('img')(
130+
css({
131+
width: '100%',
132+
height: '100%',
133+
objectFit: 'contain',
134+
objectPosition: 'right',
135+
})
136+
)

Diff for: ‎ui/whitelabels.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const envs = {
1313
secondaryHighlightColor: '#EA28EE',
1414
Logo: LogoRcvr,
1515
logoSmallWidth: '122px',
16-
logoSmallHeight: '20px',
16+
logoSmallHeight: '35px',
1717
logoBigWidth: '182px',
1818
logoBigHeight: '40px',
1919
privacyUrl: 'https://railslove.com/privacy/',
@@ -135,7 +135,7 @@ const envs = {
135135
secondaryHighlightColor: '',
136136
Logo: LogoCare,
137137
logoSmallWidth: '184px',
138-
logoSmallHeight: '20px',
138+
logoSmallHeight: '35px',
139139
logoBigWidth: '240px',
140140
logoBigHeight: '40px',
141141
privacyUrl: 'https://www.recovercare.de/datenschutzerklarung',
@@ -235,7 +235,7 @@ const envs = {
235235
secondaryHighlightColor: '#10D4FF',
236236
Logo: LogoHealth,
237237
logoSmallWidth: '184px',
238-
logoSmallHeight: '20px',
238+
logoSmallHeight: '35px',
239239
logoBigWidth: '240px',
240240
logoBigHeight: '40px',
241241
privacyUrl: 'https://www.recover-health.de/datenschutzerklarung',

0 commit comments

Comments
 (0)