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

Add CTA banner

See merge request soapbox-pub/soapbox-fe!1342

app/soapbox/components/ui/text/text.tsx

@@ -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',

app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx

@@ -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);
+    });
+  });
+});

app/soapbox/features/ui/components/cta-banner.tsx

@@ -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;

app/soapbox/features/ui/components/panels/sign-up-panel.tsx

@@ -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>

app/soapbox/features/ui/util/async-components.ts

@@ -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() {

app/soapbox/locales/defaultMessages.json

@@ -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"
   }
-]
+]

app/soapbox/pages/default_page.tsx

@@ -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>

app/soapbox/pages/home_page.tsx

@@ -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>

app/soapbox/pages/profile_page.tsx

@@ -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>