From c40f46a966b2d80cf7e956d625a46ce75e40f3e2 Mon Sep 17 00:00:00 2001 From: Birte Rohden Date: Thu, 19 Sep 2024 11:22:41 +0200 Subject: [PATCH] Revert "Merge pull request #1002 from t3n/revert-feature-paywall" This reverts commit 9ad8d7e165019c06697f34886d39daecf3fd43ce, reversing changes made to db139e9ae1cb3db6614fc52f9fe37084fa3dc03c. --- .../src/LegacyFooter/LegacyDesktopFooter.tsx | 8 +++---- .../src/LegacyFooter/LegacyMobileFooter.tsx | 8 +++---- .../src/LegacyHeader/LegacyDesktopHeader.d.ts | 1 + .../src/LegacyHeader/LegacyDesktopHeader.tsx | 4 ++++ .../src/LegacyHeader/LegacyHeader.d.ts | 1 + .../src/LegacyHeader/LegacyHeader.tsx | 4 ++++ .../src/LegacyHeader/LegacyMobileHeader.d.ts | 1 + .../src/LegacyHeader/LegacyMobileHeader.tsx | 3 +++ .../LegacyHeader/components/LegacyMainNav.tsx | 4 ++-- .../components/LegacyMobileNav.d.ts | 1 + .../components/LegacyMobileNav.tsx | 21 +++++++++++++++++-- .../LegacyHeader/components/LegacyT3nNav.d.ts | 1 + .../LegacyHeader/components/LegacyT3nNav.tsx | 3 +++ .../src/LegacyNewsCard/LegacyNewsCard.d.ts | 4 ++-- .../src/LegacyNewsCard/LegacyNewsCard.tsx | 8 +++---- .../LegacyNewsCardHeadline.d.ts | 2 +- .../LegacyNewsCard/LegacyNewsCardHeadline.tsx | 10 ++++----- .../LegacyPageLayout/LegacyPageLayout.d.ts | 1 + .../src/LegacyPageLayout/LegacyPageLayout.tsx | 3 +++ .../components/src/UserMenu/UserMenu.d.ts | 2 ++ packages/components/src/UserMenu/UserMenu.tsx | 20 ++++++++++++++++++ packages/icons/src/svg/t3n/plus.svg | 4 ++++ .../components/content/userMenu.stories.tsx | 1 + .../components/layout/pageHeader.stories.tsx | 1 + .../components/layout/pageLayout.stories.tsx | 1 + .../legacy/content/legacyNewsCard.stories.tsx | 2 +- .../legacy/layout/legacyHeader.stories.tsx | 2 ++ .../layout/legacyPageLayout.stories.tsx | 1 + 28 files changed, 97 insertions(+), 25 deletions(-) create mode 100644 packages/icons/src/svg/t3n/plus.svg diff --git a/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx b/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx index fe56394b..52487ffe 100644 --- a/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx +++ b/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx @@ -178,12 +178,12 @@ const legacyDesktopLinkGroups: DesktopLinkGroupsType = [ label: 't3n', links: [ { - label: 'Pur', - url: '/pur', + label: 'Plus', + url: '/plus-artikel', }, { - label: 'Pro', - url: '/pro-artikel', + label: 'Digitale Abos', + url: '/abos', }, { label: 'News', diff --git a/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx b/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx index d10ec7eb..ffb3c3c6 100644 --- a/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx +++ b/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx @@ -60,12 +60,12 @@ const SmallerText = styled(Text)` const legacyMobileLinks: MobileLinkType = [ { - label: 'Pur', - url: '/pur', + label: 'Plus', + url: '/plus-artikel', }, { - label: 'Pro', - url: '/pro-artikel', + label: 'Digitale Abos', + url: '/abos', }, { label: 'Team', diff --git a/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts b/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts index e0805002..51bce0e5 100644 --- a/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts +++ b/packages/components/src/LegacyHeader/LegacyDesktopHeader.d.ts @@ -8,6 +8,7 @@ export interface LegacyDesktopHeaderProps { showAds?: boolean; adsPreview?: boolean; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; userMenuItems?: ReactNode[]; } diff --git a/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx b/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx index 1a8bb15d..dca0a137 100644 --- a/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx +++ b/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx @@ -29,6 +29,7 @@ export interface LegacyDesktopHeaderProps { showAds?: boolean; adsPreview?: boolean; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; userMenuItems?: ReactNode[]; } @@ -178,6 +179,7 @@ const LegacyDesktopHeader: React.FC = ({ showAds, adsPreview, userEmail, + isPlusUser, isProMember, userMenuItems, }) => { @@ -236,6 +238,7 @@ const LegacyDesktopHeader: React.FC = ({ = ({ = ({ showAds, adsPreview, userEmail, + isPlusUser, isProMember, userMenuItems, }) => { @@ -38,6 +40,7 @@ const LegacyHeader: React.FC = ({ headerCampaignUrl={headerCampaignUrl} headerCampaignImageMobile={headerCampaignImageMobile} userEmail={userEmail} + isPlusUser={isPlusUser} isProMember={isProMember} /> @@ -50,6 +53,7 @@ const LegacyHeader: React.FC = ({ showAds={showAds} adsPreview={adsPreview} userEmail={userEmail} + isPlusUser={isPlusUser} isProMember={isProMember} userMenuItems={userMenuItems} /> diff --git a/packages/components/src/LegacyHeader/LegacyMobileHeader.d.ts b/packages/components/src/LegacyHeader/LegacyMobileHeader.d.ts index a879a10b..cd559833 100644 --- a/packages/components/src/LegacyHeader/LegacyMobileHeader.d.ts +++ b/packages/components/src/LegacyHeader/LegacyMobileHeader.d.ts @@ -3,6 +3,7 @@ export interface LegacyMobileHeaderProps { headerCampaignUrl: string; headerCampaignImageMobile?: string; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; } declare const LegacyMobileHeader: React.FC; diff --git a/packages/components/src/LegacyHeader/LegacyMobileHeader.tsx b/packages/components/src/LegacyHeader/LegacyMobileHeader.tsx index 3a51c50d..ba1e4f2d 100644 --- a/packages/components/src/LegacyHeader/LegacyMobileHeader.tsx +++ b/packages/components/src/LegacyHeader/LegacyMobileHeader.tsx @@ -14,6 +14,7 @@ export interface LegacyMobileHeaderProps { headerCampaignUrl: string; headerCampaignImageMobile?: string; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; } @@ -55,6 +56,7 @@ const LegacyMobileHeader: React.FC = ({ headerCampaignUrl, headerCampaignImageMobile, userEmail, + isPlusUser, isProMember, }) => { return ( @@ -90,6 +92,7 @@ const LegacyMobileHeader: React.FC = ({ = ({ headerCampaignUrl, headerCampaignImageMobile, userEmail, + isPlusUser, isProMember, }) => { const [menuOpen, setMenuOpen] = useState(false); @@ -296,6 +299,20 @@ const LegacyMobileNav: React.FC = ({ ))} {userEmail ? ( <> + {isPlusUser && ( + + + Plus + + )} {isProMember && ( = ({ + isPlusUser, isProMember, userEmail, userMenuItems, @@ -156,6 +158,7 @@ const LegacyT3nNav: React.FC = ({ ))} React.JSX.Element; export declare const LegacyLoadingFeedCard: React.FC<{ withImage?: boolean; }>; -declare const LegacyNewsCard: ({ news, loading, hero, sponsored, popular, pro, tr, withTeaser, withImage, withAuthor, isBookmarked, onBookmarkClick, }: LegacyNewsCardProps) => React.JSX.Element | null; +declare const LegacyNewsCard: ({ news, loading, hero, sponsored, popular, plus, tr, withTeaser, withImage, withAuthor, isBookmarked, onBookmarkClick, }: LegacyNewsCardProps) => React.JSX.Element | null; export default LegacyNewsCard; diff --git a/packages/components/src/LegacyNewsCard/LegacyNewsCard.tsx b/packages/components/src/LegacyNewsCard/LegacyNewsCard.tsx index fd751f56..1a261a86 100644 --- a/packages/components/src/LegacyNewsCard/LegacyNewsCard.tsx +++ b/packages/components/src/LegacyNewsCard/LegacyNewsCard.tsx @@ -19,7 +19,7 @@ export interface LegacyNewsCardProps { popular?: boolean; sponsored?: boolean; hero?: boolean; - pro?: boolean; + plus?: boolean; tr?: boolean; withImage?: boolean; withTeaser?: boolean; @@ -122,7 +122,7 @@ const LegacyNewsCard = ({ hero, sponsored, popular, - pro, + plus, tr, withTeaser, withImage = true, @@ -164,7 +164,7 @@ const LegacyNewsCard = ({ @@ -202,7 +202,7 @@ const LegacyNewsCard = ({ diff --git a/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.d.ts b/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.d.ts index a7b2b1e0..7995a226 100644 --- a/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.d.ts +++ b/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.d.ts @@ -3,7 +3,7 @@ export interface LegacyNewsCardHeadlineProps { type: string; title: string; sponsored?: boolean; - pro?: boolean; + plus?: boolean; tr?: boolean; } declare const LegacyNewsCardHeadline: React.FC; diff --git a/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.tsx b/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.tsx index 522ec5cb..a3784b92 100644 --- a/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.tsx +++ b/packages/components/src/LegacyNewsCard/LegacyNewsCardHeadline.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { border, color, space, typography } from 'styled-system'; -import { T3nPro } from '@t3n/icons'; +import { T3nPlus } from '@t3n/icons'; import Box from '../Box'; import Heading from '../Heading'; @@ -12,7 +12,7 @@ export interface LegacyNewsCardHeadlineProps { type: string; title: string; sponsored?: boolean; - pro?: boolean; + plus?: boolean; tr?: boolean; } @@ -71,7 +71,7 @@ const LegacyNewsCardHeadline: React.FC = ({ type, title, sponsored, - pro, + plus, tr, }) => { return ( @@ -82,9 +82,9 @@ const LegacyNewsCardHeadline: React.FC = ({ Anzeige )} - {pro && ( + {plus && ( - + )} {tr && MIT Technology Review} diff --git a/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts b/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts index 094ed8ed..33dba155 100644 --- a/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts +++ b/packages/components/src/LegacyPageLayout/LegacyPageLayout.d.ts @@ -7,6 +7,7 @@ export interface LegacyPageLayoutProps extends LegacyHeaderProps { adUnits?: LegacyAdName[]; previewAdUnits?: boolean; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; userMenuItems?: ReactNode[]; children?: ReactNode; diff --git a/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx b/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx index bc709c77..6816b1e4 100644 --- a/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx +++ b/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx @@ -13,6 +13,7 @@ export interface LegacyPageLayoutProps extends LegacyHeaderProps { adUnits?: LegacyAdName[]; previewAdUnits?: boolean; userEmail?: string; + isPlusUser?: boolean; isProMember?: boolean; userMenuItems?: ReactNode[]; children?: ReactNode; @@ -35,6 +36,7 @@ const LegacyPageLayout: React.FC = ({ previewAdUnits, overflow, userEmail, + isPlusUser, isProMember, userMenuItems, children, @@ -59,6 +61,7 @@ const LegacyPageLayout: React.FC = ({ showAds={shouldDisplayAdUnit('T3N_D_Right')} adsPreview={previewAdUnits} userEmail={userEmail} + isPlusUser={isPlusUser} isProMember={isProMember} userMenuItems={userMenuItems} /> diff --git a/packages/components/src/UserMenu/UserMenu.d.ts b/packages/components/src/UserMenu/UserMenu.d.ts index 2050300a..a24fe333 100644 --- a/packages/components/src/UserMenu/UserMenu.d.ts +++ b/packages/components/src/UserMenu/UserMenu.d.ts @@ -7,6 +7,8 @@ export interface UserMenuProps { proMembershipLink?: string; readingListLink?: string; accountLink?: string; + isPlusUser?: boolean; + plusLink?: string; isProMember?: boolean; light?: boolean; items?: ReactNode[]; diff --git a/packages/components/src/UserMenu/UserMenu.tsx b/packages/components/src/UserMenu/UserMenu.tsx index a16d8ddf..d9f60471 100644 --- a/packages/components/src/UserMenu/UserMenu.tsx +++ b/packages/components/src/UserMenu/UserMenu.tsx @@ -13,6 +13,7 @@ import { MaterialBookmarkBorder, MaterialPerson, MaterialPersonOutline, + T3nPlus, T3nPro, } from '@t3n/icons'; import { ThemeProps } from '@t3n/theme'; @@ -27,6 +28,8 @@ export interface UserMenuProps { proMembershipLink?: string; readingListLink?: string; accountLink?: string; + isPlusUser?: boolean; + plusLink?: string; isProMember?: boolean; light?: boolean; items?: ReactNode[]; @@ -221,6 +224,8 @@ const UserMenu: React.FC = ({ items, loginLink = '/account/login', logoutLink = '/account/logout', + isPlusUser = false, + plusLink = '/account/plus', proMembershipLink = '/account/pro', readingListLink = '/account/merkliste', accountLink = '/account/', @@ -250,6 +255,21 @@ const UserMenu: React.FC = ({ Hallo {userEmail} + {isPlusUser && ( + <> + + + + + Plus + + + + )} {isProMember && ( <> diff --git a/packages/icons/src/svg/t3n/plus.svg b/packages/icons/src/svg/t3n/plus.svg new file mode 100644 index 00000000..3f6e9bfb --- /dev/null +++ b/packages/icons/src/svg/t3n/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/storybook/src/stories/components/content/userMenu.stories.tsx b/packages/storybook/src/stories/components/content/userMenu.stories.tsx index ce8f3827..4d344dff 100644 --- a/packages/storybook/src/stories/components/content/userMenu.stories.tsx +++ b/packages/storybook/src/stories/components/content/userMenu.stories.tsx @@ -35,6 +35,7 @@ const meta: Meta = { parameters: { controls: { sort: 'requiredFirst' } }, args: { light: false, + isPlusUser: false, isProMember: false, active: false, userEmail: 'john.doe@beispiel.de', diff --git a/packages/storybook/src/stories/components/layout/pageHeader.stories.tsx b/packages/storybook/src/stories/components/layout/pageHeader.stories.tsx index 2908c772..c3b1e379 100644 --- a/packages/storybook/src/stories/components/layout/pageHeader.stories.tsx +++ b/packages/storybook/src/stories/components/layout/pageHeader.stories.tsx @@ -27,6 +27,7 @@ export const withUserMenu: Story = { children: ( diff --git a/packages/storybook/src/stories/components/layout/pageLayout.stories.tsx b/packages/storybook/src/stories/components/layout/pageLayout.stories.tsx index 247c6866..1f0c0a6d 100644 --- a/packages/storybook/src/stories/components/layout/pageLayout.stories.tsx +++ b/packages/storybook/src/stories/components/layout/pageLayout.stories.tsx @@ -34,6 +34,7 @@ export const withUserMenu: Story = { headerContent: ( diff --git a/packages/storybook/src/stories/legacy/content/legacyNewsCard.stories.tsx b/packages/storybook/src/stories/legacy/content/legacyNewsCard.stories.tsx index e165f1d4..dafeacc8 100644 --- a/packages/storybook/src/stories/legacy/content/legacyNewsCard.stories.tsx +++ b/packages/storybook/src/stories/legacy/content/legacyNewsCard.stories.tsx @@ -40,7 +40,7 @@ const meta: Meta = { hero: false, sponsored: false, popular: false, - pro: false, + plus: false, tr: false, isBookmarked: false, withImage: true, diff --git a/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx b/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx index 48c81e7a..eef4f859 100644 --- a/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx +++ b/packages/storybook/src/stories/legacy/layout/legacyHeader.stories.tsx @@ -58,6 +58,7 @@ const meta: Meta = { 'https://storage.googleapis.com/t3n-media/t3n-headercampaign.png', headerCampaignImageMobile: 'https://storage.googleapis.com/t3n-media/t3n-headercampaign-mobile.png', + isPlusUser: true, isProMember: true, userEmail: 'john.doe@beispiel.de', }, @@ -70,6 +71,7 @@ export const legacyHeader: Story = {}; export const notLoggedIn: Story = { args: { + isPlusUser: false, isProMember: false, userEmail: '', }, diff --git a/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx b/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx index 9d5ff43d..5153ac82 100644 --- a/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx +++ b/packages/storybook/src/stories/legacy/layout/legacyPageLayout.stories.tsx @@ -35,6 +35,7 @@ const meta: Meta = { 'https://storage.googleapis.com/t3n-media/t3n-headercampaign.png', headerCampaignImageMobile: 'https://storage.googleapis.com/t3n-media/t3n-headercampaign-mobile.png', + isPlusUser: true, isProMember: true, userEmail: 'john.doe@beispiel.de', children: (