Removed onBlur error feedback on Tier detail modal (#19381)

Fixes
[PROD-265](https://linear.app/tryghost/issue/PROD-265/remove-onblur-error-feedback-on-tier-detail-modal)
This commit is contained in:
Princi Vershwal 2023-12-14 17:23:35 +05:30 committed by GitHub
parent bb42faf694
commit 8d3f3d60f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -37,7 +37,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
yearly_price: () => (formState.type !== 'free' ? validateCurrencyAmount(formState.yearly_price || 0, formState.currency, {allowZero: false}) : undefined)
};
const {formState, saveState, updateForm, handleSave, errors, setErrors, clearError, okProps} = useForm<TierFormState>({
const {formState, saveState, updateForm, handleSave, errors, clearError, okProps} = useForm<TierFormState>({
initialState: {
...(tier || {}),
trial_days: tier?.trial_days?.toString() || '',
@ -105,16 +105,6 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
onSaveError: handleError
});
const validateField = (key: string) => {
const error = validators[key as keyof Tier]?.();
if (error) {
setErrors({...errors, [key]: error});
} else {
clearError(key);
}
};
const benefits = useSortableIndexedList({
items: formState.benefits || [],
setItems: newBenefits => updateForm(state => ({...state, benefits: newBenefits})),
@ -227,8 +217,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
title='Name'
value={formState.name || ''}
autoFocus
onBlur={() => validateField('name')}
onChange={e => updateForm(state => ({...state, name: e.target.value}))}
onKeyDown={() => clearError('name')}
/>}
<TextField
autoComplete='off'
@ -267,8 +257,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
title='Monthly price'
valueInCents={formState.monthly_price || ''}
hideTitle
onBlur={() => validateField('monthly_price')}
onChange={price => updateForm(state => ({...state, monthly_price: price}))}
onKeyDown={() => clearError('monthly_price')}
/>
<CurrencyField
error={Boolean(errors.yearly_price)}
@ -278,8 +268,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
title='Yearly price'
valueInCents={formState.yearly_price || ''}
hideTitle
onBlur={() => validateField('yearly_price')}
onChange={price => updateForm(state => ({...state, yearly_price: price}))}
onKeyDown={() => clearError('yearly_price')}
/>
</div>
</div>