Skip to content

Commit bfdc630

Browse files
dzucconidzucconi
authored
Merge pull request #14988 from artsy/revert-14987-revert-14985-DIA-1030-re-implement-logged-out-homepage-banner-and-update-copy-creative
chore: Revert "chore: Revert "feat: adds download app split test for logged out hero units""
2 parents ad95afa + 177737a commit bfdc630

File tree

6 files changed

+288
-63
lines changed

6 files changed

+288
-63
lines changed

‎src/Apps/Home/Components/HomeHeroUnits/HomeHeroUnit.tsx‎

Lines changed: 138 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -17,43 +17,66 @@ import { HomeHeroUnitCredit } from "./HomeHeroUnitCredit"
1717
import { createFragmentContainer, graphql } from "react-relay"
1818
import { HomeHeroUnit_heroUnit$data } from "__generated__/HomeHeroUnit_heroUnit.graphql"
1919
import { getInternalHref } from "Utils/url"
20+
import { useTracking } from "react-tracking"
21+
import { OwnerType } from "@artsy/cohesion"
22+
import { ActionType } from "@artsy/cohesion"
23+
import { ClickedHeroUnitGroup } from "@artsy/cohesion"
2024

21-
interface HomeHeroUnitProps {
22-
heroUnit: HomeHeroUnit_heroUnit$data
25+
export interface HomeHeroUnitBaseProps {
26+
title: string
27+
body: string
28+
imageUrl?: string | null
29+
credit?: string | null
30+
label?: string | null
31+
link: {
32+
desktop: {
33+
text: string
34+
url: string
35+
}
36+
mobile: {
37+
text: string
38+
url: string
39+
}
40+
}
2341
index: number
2442
onClick?: () => void
2543
}
2644

27-
export const HomeHeroUnit: React.FC<React.PropsWithChildren<
28-
HomeHeroUnitProps
29-
>> = props => {
30-
return (
31-
<Box width="100%" height="100%">
32-
<Media at="xs">
33-
<HomeHeroUnitSmall {...props} />
34-
</Media>
45+
const HomeHeroUnitBaseSmall: React.FC<HomeHeroUnitBaseProps> = ({
46+
title,
47+
body,
48+
imageUrl,
49+
link,
50+
index,
51+
onClick,
52+
}) => {
53+
const image = imageUrl ? cropped(imageUrl, { width: 500, height: 333 }) : null
54+
const href = getInternalHref(link.mobile.url)
3555

36-
<Media greaterThan="xs">
37-
<HomeHeroUnitLarge {...props} />
38-
</Media>
39-
</Box>
40-
)
41-
}
56+
const { trackEvent } = useTracking()
4257

43-
const HomeHeroUnitSmall: React.FC<React.PropsWithChildren<
44-
HomeHeroUnitProps
45-
>> = ({ heroUnit, index, onClick }) => {
46-
const imageUrl = heroUnit.image?.imageURL
47-
const image = imageUrl && cropped(imageUrl, { width: 500, height: 333 })
48-
const href = getInternalHref(heroUnit.link.url)
58+
const handleClick = () => {
59+
onClick?.()
60+
61+
const payload: ClickedHeroUnitGroup = {
62+
action: ActionType.clickedHeroUnitGroup,
63+
context_module: "heroUnitsRail",
64+
context_page_owner_type: OwnerType.home,
65+
destination_path: href,
66+
horizontal_slide_position: index,
67+
type: "thumbnail",
68+
}
69+
70+
trackEvent(payload)
71+
}
4972

5073
return (
5174
<RouterLink
52-
aria-label={`${heroUnit.title} - ${heroUnit.body}`}
75+
aria-label={`${title} - ${body}`}
5376
bg="black5"
5477
display="block"
5578
height="100%"
56-
onClick={onClick}
79+
onClick={handleClick}
5780
textDecoration="none"
5881
to={href}
5982
width="100%"
@@ -78,42 +101,66 @@ const HomeHeroUnitSmall: React.FC<React.PropsWithChildren<
78101

79102
<Box p={4}>
80103
<Text as={index === 0 ? "h1" : "h2"} variant="lg-display" lineClamp={3}>
81-
{heroUnit.title}
104+
{title}
82105
</Text>
83106

84107
<Spacer y={1} />
85108

86109
<Text variant="xs" color="black60" lineClamp={4}>
87-
{heroUnit.body}
110+
{body}
88111
</Text>
89112

90113
<Spacer y={1} />
91114

92-
<Text variant="xs">{heroUnit.link.text}</Text>
115+
<Text variant="xs">{link.mobile.text}</Text>
93116
</Box>
94117
</RouterLink>
95118
)
96119
}
97120

98-
const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
99-
HomeHeroUnitProps
100-
>> = ({ heroUnit, index, onClick }) => {
101-
const imageUrl = heroUnit.image?.imageURL
102-
const image = imageUrl && cropped(imageUrl, { width: 1270, height: 500 })
103-
const href = getInternalHref(heroUnit.link.url)
104-
121+
const HomeHeroUnitBaseLarge: React.FC<HomeHeroUnitBaseProps> = ({
122+
title,
123+
body,
124+
imageUrl,
125+
credit,
126+
label,
127+
link,
128+
index,
129+
onClick,
130+
}) => {
131+
const image = imageUrl
132+
? cropped(imageUrl, { width: 1270, height: 500 })
133+
: null
134+
const href = getInternalHref(link.desktop.url)
105135
const { theme } = useTheme()
106136

107137
const background =
108138
theme.name === "light"
109139
? "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%)"
110140
: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%)"
111141

142+
const { trackEvent } = useTracking()
143+
144+
const handleClick = () => {
145+
onClick?.()
146+
147+
const payload: ClickedHeroUnitGroup = {
148+
action: ActionType.clickedHeroUnitGroup,
149+
context_module: "heroUnitsRail",
150+
context_page_owner_type: OwnerType.home,
151+
destination_path: href,
152+
horizontal_slide_position: index,
153+
type: "thumbnail",
154+
}
155+
156+
trackEvent(payload)
157+
}
158+
112159
return (
113160
<RouterLink
114-
aria-label={`${heroUnit.title} - ${heroUnit.body}`}
161+
aria-label={`${title} - ${body}`}
115162
display="block"
116-
onClick={onClick}
163+
onClick={handleClick}
117164
textDecoration="none"
118165
to={href}
119166
>
@@ -128,13 +175,12 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
128175
srcSet={image.srcSet}
129176
style={{ objectFit: "cover" }}
130177
width="100%"
131-
// LCP optimization
132178
lazyLoad={index > 0}
133179
fetchPriority={index > 0 ? "auto" : "high"}
134180
/>
135181
)}
136182

137-
{heroUnit.credit && (
183+
{credit && (
138184
<Box
139185
position="absolute"
140186
bottom={0}
@@ -145,7 +191,7 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
145191
pt={6}
146192
background={background}
147193
>
148-
<HomeHeroUnitCredit>{heroUnit.credit}</HomeHeroUnitCredit>
194+
<HomeHeroUnitCredit>{credit}</HomeHeroUnitCredit>
149195
</Box>
150196
)}
151197
</Box>
@@ -161,10 +207,9 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
161207
span={8}
162208
start={3}
163209
>
164-
{heroUnit.label && (
210+
{label && (
165211
<>
166-
<Text variant="xs">{heroUnit.label}</Text>
167-
212+
<Text variant="xs">{label}</Text>
168213
<Spacer y={1} />
169214
</>
170215
)}
@@ -174,7 +219,7 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
174219
lineClamp={3}
175220
variant={["lg-display", "xl", "xl"]}
176221
>
177-
{heroUnit.title}
222+
{title}
178223
</Text>
179224

180225
<Spacer y={2} />
@@ -184,15 +229,15 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
184229
lineClamp={4}
185230
variant={["xs", "sm-display", "lg-display"]}
186231
>
187-
{heroUnit.body}
232+
{body}
188233
</Text>
189234

190235
<Spacer y={[2, 2, 4]} />
191236

192237
<GridColumns>
193238
<Column span={[12, 12, 6]}>
194239
<Button variant="secondaryBlack" width="100%" tabIndex={-1}>
195-
{heroUnit.link.text}
240+
{link.desktop.text}
196241
</Button>
197242
</Column>
198243
</GridColumns>
@@ -204,6 +249,54 @@ const HomeHeroUnitLarge: React.FC<React.PropsWithChildren<
204249
)
205250
}
206251

252+
export const HomeHeroUnitBase: React.FC<HomeHeroUnitBaseProps> = props => {
253+
return (
254+
<Box width="100%" height="100%">
255+
<Media at="xs">
256+
<HomeHeroUnitBaseSmall {...props} />
257+
</Media>
258+
259+
<Media greaterThan="xs">
260+
<HomeHeroUnitBaseLarge {...props} />
261+
</Media>
262+
</Box>
263+
)
264+
}
265+
266+
interface HomeHeroUnitProps {
267+
heroUnit: HomeHeroUnit_heroUnit$data
268+
index: number
269+
onClick?: () => void
270+
}
271+
272+
export const HomeHeroUnit: React.FC<HomeHeroUnitProps> = ({
273+
heroUnit,
274+
index,
275+
onClick,
276+
}) => {
277+
return (
278+
<HomeHeroUnitBase
279+
title={heroUnit.title}
280+
body={heroUnit.body}
281+
imageUrl={heroUnit.image?.imageURL}
282+
credit={heroUnit.credit}
283+
label={heroUnit.label}
284+
link={{
285+
desktop: {
286+
text: heroUnit.link.text,
287+
url: heroUnit.link.url,
288+
},
289+
mobile: {
290+
text: heroUnit.link.text,
291+
url: heroUnit.link.url,
292+
},
293+
}}
294+
index={index}
295+
onClick={onClick}
296+
/>
297+
)
298+
}
299+
207300
export const HomeHeroUnitFragmentContainer = createFragmentContainer(
208301
HomeHeroUnit,
209302
{

‎src/Apps/Home/Components/HomeHeroUnits/HomeHeroUnitLoggedOut.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from "react"
2+
import { HomeHeroUnitBase, HomeHeroUnitBaseProps } from "./HomeHeroUnit"
3+
import { useDeviceDetection } from "Utils/Hooks/useDeviceDetection"
4+
import { useFeatureVariant } from "System/Hooks/useFeatureFlag"
5+
6+
export const HomeHeroUnitLoggedOut: React.FC<{ index: number }> = ({
7+
index,
8+
}) => {
9+
const { downloadAppUrl } = useDeviceDetection()
10+
11+
const variants: Record<string, Omit<HomeHeroUnitBaseProps, "index">> = {
12+
control: {
13+
title: "The art world online",
14+
body:
15+
"Artsy is the world’s leading platform to discover, buy, and manage the art you love",
16+
imageUrl: "https://files.artsy.net/images/01_Artsy_App-Download-HP.jpg",
17+
link: {
18+
desktop: {
19+
text: "Sign up",
20+
url: "/signup",
21+
},
22+
mobile: {
23+
text: "Get the App",
24+
url: downloadAppUrl,
25+
},
26+
},
27+
credit: "France-Lise McGurn, 90s mirror, 2023. Margot Samel",
28+
},
29+
experiment: {
30+
title: "Your guide to the art world",
31+
body: "Artsy makes it easy to discover artists and artworks you’ll love",
32+
imageUrl: "https://files.artsy.net/images/02_Artsy_App-Download-HP.jpg",
33+
link: {
34+
desktop: {
35+
text: "Sign up",
36+
url: "/signup",
37+
},
38+
mobile: {
39+
text: "Get the App",
40+
url: downloadAppUrl,
41+
},
42+
},
43+
credit: "Sam Gilliam, Annie, 2021. David Kordansky Gallery",
44+
},
45+
}
46+
47+
const featureVariant = useFeatureVariant("diamond_hero-app-download")
48+
const variant = variants[featureVariant?.name || "control"]
49+
50+
return (
51+
<HomeHeroUnitBase
52+
title={variant.title}
53+
body={variant.body}
54+
imageUrl={variant.imageUrl}
55+
link={variant.link}
56+
index={index}
57+
credit={variant.credit}
58+
/>
59+
)
60+
}

‎src/Apps/Home/Components/HomeHeroUnits/HomeHeroUnits.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,28 @@ import { HomeHeroUnitFragmentContainer } from "./HomeHeroUnit"
44
import { createFragmentContainer, graphql } from "react-relay"
55
import { HomeHeroUnits_heroUnits$data } from "__generated__/HomeHeroUnits_heroUnits.graphql"
66
import { extractNodes } from "Utils/extractNodes"
7+
import { useSystemContext } from "System/Hooks/useSystemContext"
8+
import { HomeHeroUnitLoggedOut } from "./HomeHeroUnitLoggedOut"
79

810
interface HomeHeroUnitsProps {
911
heroUnits: HomeHeroUnits_heroUnits$data
1012
}
1113

12-
export const HomeHeroUnits: React.FC<React.PropsWithChildren<HomeHeroUnitsProps>> = ({ heroUnits }) => {
14+
export const HomeHeroUnits: React.FC<React.PropsWithChildren<
15+
HomeHeroUnitsProps
16+
>> = ({ heroUnits }) => {
17+
const { isLoggedIn } = useSystemContext()
1318
const nodes = extractNodes(heroUnits)
1419

1520
return (
1621
<HeroCarousel>
22+
{!isLoggedIn && <HomeHeroUnitLoggedOut index={0} />}
1723
{nodes.map((heroUnit, index) => {
1824
return (
1925
<HomeHeroUnitFragmentContainer
2026
heroUnit={heroUnit}
21-
index={index}
27+
// Increment index if we inserted the logged out unit
28+
index={!isLoggedIn ? index + 1 : index}
2229
key={index}
2330
/>
2431
)

0 commit comments

Comments
 (0)