Hide Offers when Stripe is disabled in AdminX (#19217)

refs ADM-56

- Hides Offers from setting menus when Stripe is disabled on Admin X settings.
This commit is contained in:
Ronald Langeveld 2023-12-04 10:10:36 +02:00 committed by GitHub
parent 6f3d16f75b
commit 24ab28a8fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions

View File

@ -4,6 +4,7 @@ import clsx from 'clsx';
import useFeatureFlag from '../hooks/useFeatureFlag'; import useFeatureFlag from '../hooks/useFeatureFlag';
import {Button, Icon, SettingNavItem, SettingNavItemProps, SettingNavSection, TextField, useFocusContext} from '@tryghost/admin-x-design-system'; import {Button, Icon, SettingNavItem, SettingNavItemProps, SettingNavSection, TextField, useFocusContext} from '@tryghost/admin-x-design-system';
import {searchKeywords as advancedSearchKeywords} from './settings/advanced/AdvancedSettings'; import {searchKeywords as advancedSearchKeywords} from './settings/advanced/AdvancedSettings';
import {checkStripeEnabled} from '@tryghost/admin-x-framework/api/settings';
import {searchKeywords as emailSearchKeywords} from './settings/email/EmailSettings'; import {searchKeywords as emailSearchKeywords} from './settings/email/EmailSettings';
import {searchKeywords as generalSearchKeywords} from './settings/general/GeneralSettings'; import {searchKeywords as generalSearchKeywords} from './settings/general/GeneralSettings';
import {getSettingValues} from '@tryghost/admin-x-framework/api/settings'; import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@ -35,7 +36,7 @@ const Sidebar: React.FC = () => {
const {updateRoute} = useRouting(); const {updateRoute} = useRouting();
const searchInputRef = useRef<HTMLInputElement | null>(null); const searchInputRef = useRef<HTMLInputElement | null>(null);
const {isAnyTextFieldFocused} = useFocusContext(); const {isAnyTextFieldFocused} = useFocusContext();
const hasOffers = useFeatureFlag('adminXOffers'); const hasOffersLabs = useFeatureFlag('adminXOffers');
// Focus in on search field when pressing "/" // Focus in on search field when pressing "/"
useEffect(() => { useEffect(() => {
@ -67,6 +68,7 @@ const Sidebar: React.FC = () => {
const {settings, config} = useGlobalData(); const {settings, config} = useGlobalData();
const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string]; const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string];
const hasStripeEnabled = checkStripeEnabled(settings || [], config || {});
const handleSectionClick = (e?: React.MouseEvent<HTMLAnchorElement>) => { const handleSectionClick = (e?: React.MouseEvent<HTMLAnchorElement>) => {
if (e) { if (e) {
@ -128,7 +130,7 @@ const Sidebar: React.FC = () => {
<SettingNavSection isVisible={checkVisible(Object.values(growthSearchKeywords).flat())} title="Growth"> <SettingNavSection isVisible={checkVisible(Object.values(growthSearchKeywords).flat())} title="Growth">
{hasRecommendations && <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />} {hasRecommendations && <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
<NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} /> <NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} />
{hasOffers && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />} {hasOffersLabs && hasStripeEnabled && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
{hasTipsAndDonations && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />} {hasTipsAndDonations && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
</SettingNavSection> </SettingNavSection>

View File

@ -5,6 +5,8 @@ import Recommendations from './Recommendations';
import SearchableSection from '../../SearchableSection'; import SearchableSection from '../../SearchableSection';
import TipsOrDonations from './TipsOrDonations'; import TipsOrDonations from './TipsOrDonations';
import useFeatureFlag from '../../../hooks/useFeatureFlag'; import useFeatureFlag from '../../../hooks/useFeatureFlag';
import {checkStripeEnabled} from '@tryghost/admin-x-framework/api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider';
export const searchKeywords = { export const searchKeywords = {
tips: ['growth', 'tip', 'donation', 'one time', 'payment'], tips: ['growth', 'tip', 'donation', 'one time', 'payment'],
@ -16,13 +18,15 @@ export const searchKeywords = {
const GrowthSettings: React.FC = () => { const GrowthSettings: React.FC = () => {
const hasTipsAndDonations = useFeatureFlag('tipsAndDonations'); const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
const hasRecommendations = useFeatureFlag('recommendations'); const hasRecommendations = useFeatureFlag('recommendations');
const hasOffers = useFeatureFlag('adminXOffers'); const hasOffersLabs = useFeatureFlag('adminXOffers');
const {config, settings} = useGlobalData();
const hasStripeEnabled = checkStripeEnabled(settings || [], config || {});
return ( return (
<SearchableSection keywords={Object.values(searchKeywords).flat()} title='Growth'> <SearchableSection keywords={Object.values(searchKeywords).flat()} title='Growth'>
{hasRecommendations && <Recommendations keywords={searchKeywords.recommendations} />} {hasRecommendations && <Recommendations keywords={searchKeywords.recommendations} />}
<EmbedSignupForm keywords={searchKeywords.embedSignupForm} /> <EmbedSignupForm keywords={searchKeywords.embedSignupForm} />
{hasOffers && <Offers keywords={searchKeywords.offers} />} {hasOffersLabs && hasStripeEnabled && <Offers keywords={searchKeywords.offers} />}
{hasTipsAndDonations && <TipsOrDonations keywords={searchKeywords.tips} />} {hasTipsAndDonations && <TipsOrDonations keywords={searchKeywords.tips} />}
</SearchableSection> </SearchableSection>
); );