Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added frontend validation to the offers add/edit modals in AdminX

Browse source
This commit is contained in:
Sodbileg Gansukh 2023-11-27 15:01:50 +08:00
parent b111b7c719
commit c2ee21a345
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
View file

@ -131,15 +131,21 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
return durationOptions; return durationOptions;
}; };
const filteredDurationOptions = getFilteredDurationOptions(); const filteredDurationOptions = getFilteredDurationOptions();
const [nameLength, setNameLength] = useState(0);
const nameLengthColor = nameLength > 40 ? 'text-red' : 'text-green';
return ( return (
<div className='pt-7'> <div className='pt-7'>
<Form> <Form>
<TextField <TextField
hint='Visible to members on Stripe Checkout page.' hint={<div className='flex justify-between'><span>Visible to members on Stripe Checkout page</span><strong><span className={`${nameLengthColor}`}>{nameLength}</span> / 40</strong></div>}
maxLength={40}
placeholder='Black Friday' placeholder='Black Friday'
title='Name' title='Name'
onChange={(e) => { onChange={(e) => {
handleNameInput(e); handleNameInput(e);
setNameLength(e.target.value.length);
}} }}
/> />
<section className='mt-4'> <section className='mt-4'>

17
apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
View file

@ -31,6 +31,15 @@ const Sidebar: React.FC<{
const handleError = useHandleError(); const handleError = useHandleError();
const {mutateAsync: editOffer} = useEditOffer(); const {mutateAsync: editOffer} = useEditOffer();
const [nameLength, setNameLength] = useState(offer?.name.length || 0);
const nameLengthColor = nameLength > 40 ? 'text-red' : 'text-green';
useEffect(() => {
if (offer?.name) {
setNameLength(offer?.name.length);
}
}, [offer?.name]);
const offerUrl = `${getHomepageUrl(siteData!)}${offer?.code}`; const offerUrl = `${getHomepageUrl(siteData!)}${offer?.code}`;
const handleCopyClick = async () => { const handleCopyClick = async () => {
try { try {
@ -122,12 +131,16 @@ const Sidebar: React.FC<{
<div className='flex flex-col gap-6'> <div className='flex flex-col gap-6'>
<TextField <TextField
error={Boolean(errors.name)} error={Boolean(errors.name)}
hint={errors.name || 'Visible to members on Stripe Checkout page'} hint={errors.name || <div className='flex justify-between'><span>Visible to members on Stripe Checkout page</span><strong><span className={`${nameLengthColor}`}>{nameLength}</span> / 40</strong></div>}
maxLength={40}
placeholder='Black Friday' placeholder='Black Friday'
title='Name' title='Name'
value={offer?.name} value={offer?.name}
onBlur={validate} onBlur={validate}
onChange={e => updateOffer({name: e.target.value})} onChange={(e) => {
setNameLength(e.target.value.length);
updateOffer({name: e.target.value});
}}
onKeyDown={() => clearError('name')} onKeyDown={() => clearError('name')}
/> />
<div className='flex flex-col gap-1.5'> <div className='flex flex-col gap-1.5'>