c63f9242-8d53-41d1-be32-75f9cb8bcdc9/sms-extension-1777783872
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final UI changes?

This commit is contained in:
Ritul Jadhav 2026-03-27 01:50:18 +05:30
parent 3855c82f8e
commit 0eb09d66a8
3 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/WhitelistModal.jsx
View File

@ -105,7 +105,7 @@ export default function WhitelistModal({ businessId, template, boundProfile, onC
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm overflow-y-auto pt-10 pb-10"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm overflow-y-auto pt-10 pb-10">
<div className="bg-surface-white border border-border-main rounded-xl p-8 w-full max-w-md shadow-xl my-auto"> <div className="bg-surface-white border border-border-main rounded-xl p-8 w-full max-w-md shadow-xl my-auto">
<div className="w-12 h-12 rounded-full bg-orange-bg flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-full bg-tags-bg border border-tags-border flex items-center justify-center mx-auto mb-4">
<span className="text-xl">✅</span> <span className="text-xl">✅</span>
</div> </div>

35
client/src/pages/Events.jsx
View File

@ -11,7 +11,7 @@ export default function Events() {
const [showAddForm, setShowAddForm] = useState(false); const [showAddForm, setShowAddForm] = useState(false);
const [genState, setGenState] = useState({}); const [genState, setGenState] = useState({});
const [variants, setVariants] = useState({}); const [variants, setVariants] = useState({});
const [selectingSlug, setSelectingSlug] = useState(null); const [selectingVariantKey, setSelectingVariantKey] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const [readyToGenerate, setReadyToGenerate] = useState(false); const [readyToGenerate, setReadyToGenerate] = useState(false);
@ -78,8 +78,9 @@ export default function Events() {
} }
} }
async function handleSelect(slug, variant) { async function handleSelect(slug, variant, variantIndex) {
setSelectingSlug(slug); const variantKey = `${slug}:${variantIndex}`;
setSelectingVariantKey(variantKey);
setError(''); setError('');
try { try {
await apiClient.post(`/api/businesses/${businessId}/templates/${slug}/select`, { selectedVariant: variant }); await apiClient.post(`/api/businesses/${businessId}/templates/${slug}/select`, { selectedVariant: variant });
@ -89,7 +90,7 @@ export default function Events() {
} catch (err) { } catch (err) {
setError(err.response?.data?.error || 'Failed to select template'); setError(err.response?.data?.error || 'Failed to select template');
} finally { } finally {
setSelectingSlug(null); setSelectingVariantKey('');
} }
} }
@ -213,10 +214,21 @@ export default function Events() {
<div className="border-t border-gray-100 bg-gray-50/50 px-6 py-5 space-y-4"> <div className="border-t border-gray-100 bg-gray-50/50 px-6 py-5 space-y-4">
<p className="text-xs text-gray-500 font-bold uppercase tracking-wider">Pick a Variant</p> <p className="text-xs text-gray-500 font-bold uppercase tracking-wider">Pick a Variant</p>
<div className="grid gap-4"> <div className="grid gap-4">
{eventVariants.map((v, i) => ( {eventVariants.map((v, i) => {
const variantKey = `${event.slug}:${i}`;
const isSelectingThis = selectingVariantKey === variantKey;
const isSelectingAnotherVariant = !!selectingVariantKey
&& selectingVariantKey !== variantKey
&& selectingVariantKey.startsWith(`${event.slug}:`);
return (
<div <div
key={i} key={i}
className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm hover:border-gray-300 transition" className={`rounded-xl border bg-white p-5 shadow-sm transition ${
isSelectingThis
? 'border-indigo-300 ring-2 ring-indigo-100'
: 'border-gray-200 hover:border-gray-300'
}`}
> >
<p className="text-sm text-gray-800 font-mono leading-relaxed">{v}</p> <p className="text-sm text-gray-800 font-mono leading-relaxed">{v}</p>
<div className="flex items-center justify-between mt-4"> <div className="flex items-center justify-between mt-4">
@ -224,15 +236,16 @@ export default function Events() {
{v.length} / 160 {v.length} / 160
</span> </span>
<button <button
onClick={() => handleSelect(event.slug, v)} onClick={() => handleSelect(event.slug, v, i)}
disabled={selectingSlug === event.slug} disabled={isSelectingThis || isSelectingAnotherVariant}
className="text-xs px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition disabled:opacity-50" className="text-xs px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition disabled:opacity-60 disabled:cursor-not-allowed"
> >
{selectingSlug === event.slug ? 'Selecting…' : 'Use this template'} {isSelectingThis ? 'Selecting…' : 'Use this template'}
</button> </button>
</div> </div>
</div> </div>
))} );
})}
</div> </div>
</div> </div>
)} )}

2
client/src/pages/Templates.jsx
View File

@ -190,7 +190,7 @@ export default function Templates() {
{!isBoundProfileMissing && tmpl.status === 'pending_whitelisting' && ( {!isBoundProfileMissing && tmpl.status === 'pending_whitelisting' && (
<button <button
onClick={() => setWhitelistTarget(tmpl)} onClick={() => setWhitelistTarget(tmpl)}
className="px-4 py-2 rounded-lg bg-orange-text hover:bg-[#c97b45] text-white text-sm font-semibold transition shadow-sm" className="px-4 py-2 rounded-lg bg-tags-text hover:bg-[#cf7b3f] text-white text-sm font-semibold transition shadow-sm border border-[#d47f45]"
> >
Publish Publish
</button> </button>