Merge branch 'conditional-cta' into 'develop'

Make CtaBanner and ThreadLoginCta optional

See merge request soapbox-pub/soapbox!1821
This commit is contained in:
marcin mikołajczak 2022-10-09 23:07:28 +00:00
commit 67d47cdafd
4 changed files with 15 additions and 3 deletions

View file

@ -48,6 +48,7 @@ const messages = defineMessages({
promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
displayCtaLabel: { id: 'soapbox_config.cta_label', defaultMessage: 'Display call to action panels if not authenticated' },
singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
@ -261,6 +262,13 @@ const SoapboxConfig: React.FC = () => {
/>
</ListItem>
<ListItem label={intl.formatMessage(messages.displayCtaLabel)}>
<Toggle
checked={soapbox.displayCta === true}
onChange={handleChange(['displayCta'], (e) => e.target.checked)}
/>
</ListItem>
<ListItem
label={intl.formatMessage(messages.authenticatedProfileLabel)}
hint={intl.formatMessage(messages.authenticatedProfileHint)}

View file

@ -2,12 +2,15 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
/** Prompts logged-out users to log in when viewing a thread. */
const ThreadLoginCta: React.FC = () => {
const { displayCta } = useSoapboxConfig();
const siteTitle = useAppSelector(state => state.instance.title);
if (!displayCta) return null;
return (
<Card className='px-6 py-12 space-y-6 text-center' variant='rounded'>
<Stack>

View file

@ -5,11 +5,11 @@ import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
const CtaBanner = () => {
const { singleUserMode } = useSoapboxConfig();
const { displayCta, singleUserMode } = useSoapboxConfig();
const siteTitle = useAppSelector((state) => state.instance.title);
const me = useAppSelector((state) => state.me);
if (me || singleUserMode) return null;
if (me || !displayCta || singleUserMode) return null;
return (
<div data-testid='cta-banner' className='hidden lg:block'>

View file

@ -112,6 +112,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
singleUserModeProfile: '',
linkFooterMessage: '',
links: ImmutableMap<string, string>(),
displayCta: true,
}, 'SoapboxConfig');
type SoapboxConfigMap = ImmutableMap<string, any>;