-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12530 from guardian/doml/guardian-different-desktop
Add expandable marketing card component to standard articles on desktop behind 0% test
- Loading branch information
Showing
13 changed files
with
393 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { getCookie } from '@guardian/libs'; | ||
| import { useEffect, useState } from 'react'; | ||
| import type { DailyArticle } from '../lib/dailyArticleCount'; | ||
| import { getDailyArticleCount } from '../lib/dailyArticleCount'; | ||
| import { getLocaleCode } from '../lib/getCountryCode'; | ||
| import { useAB } from '../lib/useAB'; | ||
| import { ExpandableMarketingCard } from './ExpandableMarketingCard'; | ||
|
|
||
| interface Props { | ||
| guardianBaseURL: string; | ||
| } | ||
|
|
||
| const isFirstArticle = () => { | ||
| const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? []; | ||
| return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1; | ||
| }; | ||
|
|
||
| const isNewUSUser = async () => { | ||
| const isUserInUS = (await getLocaleCode()) === 'US'; | ||
| if (!isUserInUS) { | ||
| return false; | ||
| } | ||
|
|
||
| // Exclude users who have selected a non-US edition. | ||
| const editionCookie = getCookie({ name: 'GU_EDITION' }); | ||
| const hasUserSelectedNonUSEdition = | ||
| !!editionCookie && editionCookie !== 'US'; | ||
|
|
||
| // This check must happen AFTER we've ensured that the user is in the US. | ||
| const isNewUser = isFirstArticle(); | ||
|
|
||
| return !hasUserSelectedNonUSEdition && !isNewUser; | ||
| }; | ||
|
|
||
| // todo - semantic html accordion-details? | ||
| export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { | ||
| const [isExpanded, setIsExpanded] = useState(false); | ||
| const [isClosed, setIsClosed] = useState(false); | ||
| const [isApplicableUser, setIsApplicableUser] = useState(false); | ||
|
|
||
| const abTestAPI = useAB()?.api; | ||
| const isInVariantFree = !!abTestAPI?.isUserInVariant( | ||
| 'UsaExpandableMarketingCard', | ||
| 'variant-free', | ||
| ); | ||
| const isInVariantBubble = !!abTestAPI?.isUserInVariant( | ||
| 'UsaExpandableMarketingCard', | ||
| 'variant-bubble', | ||
| ); | ||
| const isInEitherVariant = isInVariantFree || isInVariantBubble; | ||
|
|
||
| useEffect(() => { | ||
| void isNewUSUser().then((show) => { | ||
| if (show) { | ||
| setIsApplicableUser(true); | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| if (!isInEitherVariant || !isApplicableUser || isClosed) { | ||
| return null; | ||
| } | ||
|
|
||
| const heading = isInVariantBubble | ||
| ? 'Pop your US news bubble' | ||
| : 'Yes, this story is free'; | ||
|
|
||
| const kicker = isInVariantBubble | ||
| ? 'How the Guardian is different' | ||
| : 'Why the Guardian has no paywall'; | ||
|
|
||
| return ( | ||
| <ExpandableMarketingCard | ||
| guardianBaseURL={guardianBaseURL} | ||
| heading={heading} | ||
| kicker={kicker} | ||
| isExpanded={isExpanded} | ||
| setIsExpanded={setIsExpanded} | ||
| setIsClosed={setIsClosed} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.