Merge branch 'add-cta-banner' into 'develop'

Add CTA banner

See merge request soapbox-pub/soapbox-fe!1342
homepage-hide-logo
Justin 2022-05-10 19:52:38 +00:00
commit 6a11832d67
10 zmienionych plików z 104 dodań i 5 usunięć

Wyświetl plik

@ -31,7 +31,7 @@ const weights = {
const sizes = {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-md',
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
'2xl': 'text-2xl',

Wyświetl plik

@ -0,0 +1,30 @@
import { Map as ImmutableMap } from 'immutable';
import React from 'react';
import { render, screen } from '../../../../jest/test-helpers';
import CtaBanner from '../cta-banner';
describe('<CtaBanner />', () => {
it('renders the banner', () => {
render(<CtaBanner />);
expect(screen.getByTestId('cta-banner')).toHaveTextContent(/sign up/i);
});
describe('with a logged in user', () => {
it('renders empty', () => {
const store = { me: true };
render(<CtaBanner />, null, store);
expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
});
});
describe('with singleUserMode enabled', () => {
it('renders empty', () => {
const store = { soapbox: ImmutableMap({ singleUserMode: true }) };
render(<CtaBanner />, null, store);
expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0);
});
});
});

Wyświetl plik

@ -0,0 +1,37 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
const CtaBanner = () => {
const { singleUserMode } = useSoapboxConfig();
const siteTitle = useAppSelector((state) => state.instance.title);
const me = useAppSelector((state) => state.me);
if (me || singleUserMode) return null;
return (
<div data-testid='cta-banner' className='hidden lg:block fixed bottom-0 left-0 right-0 py-4 bg-primary-600'>
<div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8'>
<HStack alignItems='center' justifyContent='between'>
<Stack>
<Text theme='white' size='xl' weight='bold'>
<FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
</Text>
<Text theme='white' className='opacity-80'>
<FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
</Text>
</Stack>
<Button theme='ghost' to='/'>
<FormattedMessage id='account.register' defaultMessage='Sign up' />
</Button>
</HStack>
</div>
</div>
);
};
export default CtaBanner;

Wyświetl plik

@ -18,7 +18,7 @@ const SignUpPanel = () => {
<FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
</Text>
<Text theme='muted'>
<Text theme='muted' size='sm'>
<FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
</Text>
</Stack>

Wyświetl plik

@ -343,7 +343,11 @@ export function PromoPanel() {
}
export function SignUpPanel() {
return import(/* webpackChunkName: "features/ui" */'../components/sign_up_panel');
return import(/* webpackChunkName: "features/ui" */'../components/panels/sign-up-panel');
}
export function CtaBanner() {
return import(/* webpackChunkName: "features/ui" */'../components/cta-banner');
}
export function FundingPanel() {

Wyświetl plik

@ -6599,7 +6599,7 @@
"id": "account.register"
}
],
"path": "app/soapbox/features/ui/components/sign_up_panel.json"
"path": "app/soapbox/features/ui/components/panels/sign-up-panel.json"
},
{
"descriptors": [
@ -6949,4 +6949,4 @@
],
"path": "app/soapbox/pages/profile_page.json"
}
]
]

Wyświetl plik

@ -6,6 +6,7 @@ import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
@ -19,6 +20,12 @@ const DefaultPage: React.FC = ({ children }) => {
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>

Wyświetl plik

@ -10,6 +10,7 @@ import {
FundingPanel,
CryptoDonatePanel,
BirthdayPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
@ -56,6 +57,12 @@ const HomePage: React.FC = ({ children }) => {
)}
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>

Wyświetl plik

@ -10,6 +10,7 @@ import {
ProfileMediaPanel,
ProfileFieldsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { findAccountByUsername } from 'soapbox/selectors';
@ -134,6 +135,12 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
{children}
</div>
</Column>
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>

Wyświetl plik

@ -7,6 +7,7 @@ import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
import { getFeatures } from 'soapbox/utils/features';
@ -35,6 +36,12 @@ class StatusPage extends ImmutablePureComponent {
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>