diff --git a/src/v2/Components/DownloadAppBadge.tsx b/src/v2/Components/DownloadAppBadge.tsx index eb15eb81e01..f29f1e7d124 100644 --- a/src/v2/Components/DownloadAppBadge.tsx +++ b/src/v2/Components/DownloadAppBadge.tsx @@ -4,18 +4,20 @@ import { clickedAppDownload, ContextModule } from "@artsy/cohesion" import { useAnalyticsContext } from "v2/Artsy" import Events from "v2/Utils/Events" import { Box, Link } from "@artsy/palette" +import { Device } from "v2/Utils/Hooks/useDeviceDetection" interface DownloadAppBadgeProps { contextModule: ContextModule + device: Device + downloadAppUrl: string } // @ts-expect-error STRICT_NULL_CHECK export const DownloadAppBadge: React.FC = track(null, { dispatch: data => Events.postEvent(data), -})(({ contextModule }) => { +})(({ contextModule, device, downloadAppUrl }) => { const tracking = useTracking() - const downloadAppUrl = - "https://apps.apple.com/us/app/artsy-buy-sell-original-art/id703796080" + const { contextPageOwnerId, contextPageOwnerSlug, @@ -42,13 +44,14 @@ export const DownloadAppBadge: React.FC = track(null, { onClick={trackClickedDownloadAppBadge} title="Download on the App Store" > - + {device === Device.iPhone && } + {device === Device.Android && } ) }) -const DownloadAppBadgeSVG = () => ( +const DownloadIPhoneAppBadgeSVG = () => ( ( ) + +const DownloadAndroidAppBadgeSVG = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/src/v2/Components/Footer/Footer.tsx b/src/v2/Components/Footer/Footer.tsx index ebe2b437362..226b235fa71 100644 --- a/src/v2/Components/Footer/Footer.tsx +++ b/src/v2/Components/Footer/Footer.tsx @@ -23,10 +23,13 @@ import { ContextModule } from "@artsy/cohesion" import { CCPARequest } from "../CCPARequest" import { FooterDownloadAppBanner } from "./FooterDownloadAppBanner" import { RouterLink, RouterLinkProps } from "v2/Artsy/Router/RouterLink" +import { Device, useDeviceDetection } from "v2/Utils/Hooks/useDeviceDetection" interface FooterProps extends BoxProps {} export const Footer: React.FC = props => { + const { device, downloadAppUrl } = useDeviceDetection() + const tokens = useThemeConfig({ v2: { header: "mediumText" as TextVariant, @@ -53,10 +56,13 @@ export const Footer: React.FC = props => { - Get the iOS app + Get the App - - + @@ -150,7 +156,11 @@ export const Footer: React.FC = props => { Get the iOS app - + diff --git a/src/v2/Components/Footer/__tests__/Footer.jest.tsx b/src/v2/Components/Footer/__tests__/Footer.jest.tsx index aea62c56e3e..63da2cc49dc 100644 --- a/src/v2/Components/Footer/__tests__/Footer.jest.tsx +++ b/src/v2/Components/Footer/__tests__/Footer.jest.tsx @@ -39,4 +39,23 @@ describe("Footer", () => { expect(wrapper.find(CCPARequest).length).toEqual(1) }) }) + + describe("renders proper badge for downloading the app", () => { + let userAgentGetter + beforeEach(() => { + userAgentGetter = jest.spyOn(window.navigator, "userAgent", "get") + }) + + it("to iPhone", () => { + userAgentGetter.mockReturnValue("iPhone") + const wrapper = getWrapper("xs") + expect(wrapper.find("DownloadIPhoneAppBadgeSVG").exists()).toBeTruthy() + }) + + it("to Android", () => { + userAgentGetter.mockReturnValue("Android") + const wrapper = getWrapper("xs") + expect(wrapper.find("DownloadAndroidAppBadgeSVG").exists()).toBeTruthy() + }) + }) }) diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx index c43a536f359..c3d607a32ab 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx +++ b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx @@ -34,6 +34,7 @@ import { } from "./NavigatorContextProvider" import { NAV_BAR_BORDER_OFFSET, MOBILE_NAV_HEIGHT } from "v2/Components/NavBar" import { ArtistsLetterNav } from "v2/Apps/Artists/Components/ArtistsLetterNav" +import { useDeviceDetection } from "v2/Utils/Hooks/useDeviceDetection" const Close = styled(Clickable)` position: absolute; @@ -59,6 +60,7 @@ export const MobileNavMenu: React.FC = ({ onClose, }) => { const { user } = useSystemContext() + const { downloadAppUrl } = useDeviceDetection() return ( @@ -101,6 +103,7 @@ export const MobileNavMenu: React.FC = ({ Editorial {user ? : } + Get the app diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/__tests__/MobileNavMenu.jest.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/__tests__/MobileNavMenu.jest.tsx index 344d774da9d..c139db739d5 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/__tests__/MobileNavMenu.jest.tsx +++ b/src/v2/Components/NavBar/Menus/MobileNavMenu/__tests__/MobileNavMenu.jest.tsx @@ -46,10 +46,13 @@ describe("MobileNavMenu", () => { it("calls logout auth action on logout menu click", () => { const wrapper = getWrapper({ user: { type: "NotAdmin" } }) + + const MobileLink = wrapper.find("MobileLink") + const length = MobileLink.length // @ts-expect-error STRICT_NULL_CHECK wrapper .find("MobileLink") - .last() + .at(length - 2) .props() .onClick({ preventDefault: () => {}, @@ -115,9 +118,7 @@ describe("MobileNavMenu", () => { const linkContainer = getMobileMenuLinkContainer("notAdmin") const mobileSubmenuLinks = linkContainer.children() let linkText = mobileSubmenuLinks.last().text() - expect(linkText).toContain("Account") - - expect(linkText).toContain("Works for you") + expect(linkText).toContain("Get the app") }) }) diff --git a/src/v2/Components/__tests__/DownloadAppBadge.jest.tsx b/src/v2/Components/__tests__/DownloadAppBadge.jest.tsx index 4d1700d9181..c6a6009b796 100644 --- a/src/v2/Components/__tests__/DownloadAppBadge.jest.tsx +++ b/src/v2/Components/__tests__/DownloadAppBadge.jest.tsx @@ -4,9 +4,23 @@ import { useTracking } from "react-tracking" import { Link } from "@artsy/palette" import { DownloadAppBadge } from "v2/Components/DownloadAppBadge" import { ContextModule } from "@artsy/cohesion" +import { Device } from "v2/Utils/Hooks/useDeviceDetection" describe("DownloadAppBadge", () => { const trackEvent = jest.fn() + const event = { + context_module: "footer", + subject: "Download on the App Store", + destination_path: + "https://apps.apple.com/us/app/artsy-buy-sell-original-art/id703796080", + } + const props = { + contextModule: ContextModule.footer, + device: Device.iPhone, + downloadAppUrl: + "https://apps.apple.com/us/app/artsy-buy-sell-original-art/id703796080", + } + beforeEach(() => { const mockTracking = useTracking as jest.Mock mockTracking.mockImplementation(() => { @@ -21,19 +35,10 @@ describe("DownloadAppBadge", () => { }) it("tracks clicks on the app download badge", () => { - const badge = mount( - - ) + const badge = mount() const downloadLink = badge.find(Link) // @ts-expect-error STRICT_NULL_CHECK downloadLink.props().onClick({} as any) - expect(trackEvent).toHaveBeenCalledWith( - expect.objectContaining({ - context_module: "footer", - destination_path: - "https://apps.apple.com/us/app/artsy-buy-sell-original-art/id703796080", - subject: "Download on the App Store", - }) - ) + expect(trackEvent).toHaveBeenCalledWith(expect.objectContaining(event)) }) }) diff --git a/src/v2/Utils/Hooks/useDeviceDetection.tsx b/src/v2/Utils/Hooks/useDeviceDetection.tsx new file mode 100644 index 00000000000..c0ade613388 --- /dev/null +++ b/src/v2/Utils/Hooks/useDeviceDetection.tsx @@ -0,0 +1,29 @@ +import { useEffect, useState } from "react" + +export enum Device { + iPhone, + Android, +} + +export const useDeviceDetection = () => { + // @ts-expect-error STRICT_NULL_CHECK + const [device, setDevice] = useState(undefined) + // @ts-expect-error STRICT_NULL_CHECK + const [downloadAppUrl, setDownloadAppUrl] = useState(undefined) + + useEffect(() => { + if (window.navigator.userAgent.match(/Android/)) { + setDevice(Device.Android) + setDownloadAppUrl( + "https://play.google.com/store/apps/details?id=net.artsy.app" + ) + } else if (window.navigator.userAgent.match(/iPhone/)) { + setDevice(Device.iPhone) + setDownloadAppUrl( + "https://apps.apple.com/us/app/artsy-buy-sell-original-art/id703796080" + ) + } + }, []) + + return { device, downloadAppUrl } +}