Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Fixed loading and error handling bugs in portal settings (#19225)

Browse source 
fixes ADM-31
This commit is contained in:
Jono M 2023-12-04 15:25:58 +00:00 • committed by GitHub
parent 6d0dfbafb1
commit ede2d9c1b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/admin-x-settings/src/components/settings/membership/portal/AccountPage.tsx
View file

@ -6,7 +6,9 @@ import {useGlobalData} from '../../../providers/GlobalDataProvider';
const AccountPage: React.FC<{ const AccountPage: React.FC<{
updateSetting: (key: string, setting: SettingValue) => void updateSetting: (key: string, setting: SettingValue) => void
}> = ({updateSetting}) => { errors: Record<string, string | undefined>
setError: (key: string, error: string | undefined) => void
}> = ({updateSetting, errors, setError}) => {
const {siteData, settings, config} = useGlobalData(); const {siteData, settings, config} = useGlobalData();
const [membersSupportAddress, supportEmailAddress] = getSettingValues(settings, ['members_support_address', 'support_email_address']); const [membersSupportAddress, supportEmailAddress] = getSettingValues(settings, ['members_support_address', 'support_email_address']);
const calculatedSupportAddress = supportEmailAddress?.toString() || fullEmailAddress(membersSupportAddress?.toString() || '', siteData!, config); const calculatedSupportAddress = supportEmailAddress?.toString() || fullEmailAddress(membersSupportAddress?.toString() || '', siteData!, config);
@ -15,6 +17,12 @@ const AccountPage: React.FC<{
const updateSupportAddress: FocusEventHandler<HTMLInputElement> = (e) => { const updateSupportAddress: FocusEventHandler<HTMLInputElement> = (e) => {
let supportAddress = e.target.value; let supportAddress = e.target.value;
if (!supportAddress) {
setError('members_support_address', 'Please enter an email address');
return;
}
let settingValue = emailDomain && supportAddress === `noreply@${emailDomain}` ? 'noreply' : supportAddress; let settingValue = emailDomain && supportAddress === `noreply@${emailDomain}` ? 'noreply' : supportAddress;
updateSetting('members_support_address', settingValue); updateSetting('members_support_address', settingValue);
@ -26,7 +34,14 @@ const AccountPage: React.FC<{
}, [calculatedSupportAddress]); }, [calculatedSupportAddress]);
return <div className='mt-7'><Form> return <div className='mt-7'><Form>
<TextField title='Support email address' value={value} onBlur={updateSupportAddress} onChange={e => setValue(e.target.value)} /> <TextField
error={!!errors.members_support_address}
hint={errors.members_support_address}
title='Support email address'
value={value}
onBlur={updateSupportAddress}
onChange={e => setValue(e.target.value)}
/>
</Form></div>; </Form></div>;
}; };

17
apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx
View file

@ -5,7 +5,7 @@ import PortalPreview from './PortalPreview';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import SignupOptions from './SignupOptions'; import SignupOptions from './SignupOptions';
import useQueryParams from '../../../../hooks/useQueryParams'; import useQueryParams from '../../../../hooks/useQueryParams';
import {ConfirmationModal, PreviewModalContent, Tab, TabView} from '@tryghost/admin-x-design-system'; import {ConfirmationModal, PreviewModalContent, Tab, TabView, showToast} from '@tryghost/admin-x-design-system';
import {Dirtyable, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks'; import {Dirtyable, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
import {Setting, SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings'; import {Setting, SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
import {Tier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers'; import {Tier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
@ -45,7 +45,7 @@ const Sidebar: React.FC<{
{ {
id: 'accountPage', id: 'accountPage',
title: 'Account page', title: 'Account page',
contents: <AccountPage updateSetting={updateSetting} /> contents: <AccountPage errors={errors} setError={setError} updateSetting={updateSetting} />
} }
]; ];
@ -154,6 +154,12 @@ const PortalModal: React.FC = () => {
onSaveError: handleError onSaveError: handleError
}); });
useEffect(() => {
if (!formState.tiers.length && allTiers?.length) {
setFormState(state => ({...state, tiers: allTiers}));
}
}, [allTiers, formState.tiers, setFormState]);
const [errors, setErrors] = useState<Record<string, string | undefined>>({}); const [errors, setErrors] = useState<Record<string, string | undefined>>({});
const updateSetting = (key: string, value: SettingValue) => { const updateSetting = (key: string, value: SettingValue) => {
@ -223,7 +229,12 @@ const PortalModal: React.FC = () => {
testId='portal-modal' testId='portal-modal'
title='Portal' title='Portal'
onOk={async () => { onOk={async () => {
if (!Object.values(errors).filter(Boolean).length) { if (Object.values(errors).filter(Boolean).length) {
showToast({
type: 'pageError',
message: 'Can\'t save settings, please double check that you\'ve filled all mandatory fields.'
});
} else {
await handleSave({force: true}); await handleSave({force: true});
} }
}} }}