Update Workfront Campaign ID field: simplify placeholder and remove format validation
- Change placeholder from '#WF_12345' to 'WF1234567' - Remove format validation and error messaging (field is optional, free-form) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
71639030ba
commit
41ea5dc57b
1 changed files with 4 additions and 39 deletions
|
|
@ -24,41 +24,16 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
|
||||||
const [workfrontId, setWorkfrontId] = useState('');
|
const [workfrontId, setWorkfrontId] = useState('');
|
||||||
const [clientLead, setClientLead] = useState('');
|
const [clientLead, setClientLead] = useState('');
|
||||||
const [agencyLead, setAgencyLead] = useState('');
|
const [agencyLead, setAgencyLead] = useState('');
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Reset form when modal opens
|
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
setName('');
|
setName('');
|
||||||
setSelectedBrandGuideline('');
|
setSelectedBrandGuideline('');
|
||||||
setWorkfrontId('');
|
setWorkfrontId('');
|
||||||
setClientLead('');
|
setClientLead('');
|
||||||
setAgencyLead('');
|
setAgencyLead('');
|
||||||
setError(null);
|
|
||||||
}
|
}
|
||||||
}, [isOpen]);
|
}, [isOpen]);
|
||||||
|
|
||||||
const validateWorkfrontId = (id: string): boolean => {
|
|
||||||
// Empty is valid (field is optional)
|
|
||||||
if (id.length === 0) {
|
|
||||||
setError(null);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
const isValid = /^#WF_\d+$/.test(id);
|
|
||||||
if (!isValid) {
|
|
||||||
setError("Workfront Campaign ID must be in the format '#WF_12345'");
|
|
||||||
} else {
|
|
||||||
setError(null);
|
|
||||||
}
|
|
||||||
return isValid;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleWorkfrontIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const newId = e.target.value;
|
|
||||||
setWorkfrontId(newId);
|
|
||||||
validateWorkfrontId(newId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
|
@ -66,13 +41,6 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate workfrontId format only if provided
|
|
||||||
if (workfrontId.trim() && !/^#WF_\d+$/.test(workfrontId)) {
|
|
||||||
setError("Workfront Campaign ID must be in the format '#WF_12345'");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setError(null);
|
|
||||||
onAddCampaign({ name, workfrontId: workfrontId.trim(), clientLead, agencyLead, brandGuidelines: selectedBrandGuideline });
|
onAddCampaign({ name, workfrontId: workfrontId.trim(), clientLead, agencyLead, brandGuidelines: selectedBrandGuideline });
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
@ -132,13 +100,10 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
|
||||||
type="text"
|
type="text"
|
||||||
id="workfront-id"
|
id="workfront-id"
|
||||||
value={workfrontId}
|
value={workfrontId}
|
||||||
onChange={handleWorkfrontIdChange}
|
onChange={(e) => setWorkfrontId(e.target.value)}
|
||||||
className={`mt-1 block w-full p-2 border-2 rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black placeholder:text-oliver-black/60 ${error ? 'border-error focus:border-error focus:ring-error' : 'border-oliver-azure'}`}
|
className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black placeholder:text-oliver-black/60"
|
||||||
placeholder="#WF_12345"
|
placeholder="WF1234567"
|
||||||
aria-invalid={!!error}
|
|
||||||
aria-describedby="workfront-id-error"
|
|
||||||
/>
|
/>
|
||||||
{error && <p id="workfront-id-error" className="mt-1 text-sm text-error">{error}</p>}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="client-lead" className="block text-sm font-medium text-oliver-black">Client Lead</label>
|
<label htmlFor="client-lead" className="block text-sm font-medium text-oliver-black">Client Lead</label>
|
||||||
|
|
@ -183,7 +148,7 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||||
disabled={isFormInvalid || !!error}
|
disabled={isFormInvalid}
|
||||||
>
|
>
|
||||||
Create Campaign
|
Create Campaign
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue