230417/smartagenda_pap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add direct call functionality to displayed phone numbers and enhance phone input validation.

Browse Source
This commit is contained in:
230417
2026-03-18 09:16:13 +00:00
parent 56eca5ccee
commit 77825ffaa1
2 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/ShopDetailsTab.tsx
View File

@@ -99,30 +99,30 @@ export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => {
<h3 className="text-xl font-bold mb-4">Contacto</h3>
<div className="flex flex-col gap-3">
{contacts.phone1 && (
<div className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group">
<a href={`tel:${contacts.phone1.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
<div className="flex items-center gap-4">
<div className="w-10 h-10 flex items-center justify-center bg-slate-50 border border-slate-100 rounded-full text-slate-500">
<div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
<Smartphone size={20} />
</div>
<span className="text-slate-700 font-bold text-lg">{contacts.phone1}</span>
<span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone1}</span>
</div>
<button onClick={() => copyToClipboard(contacts.phone1!)} className="text-slate-400 hover:text-indigo-600 transition-colors p-2">
<Copy size={20} />
</button>
</div>
<div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
<Phone size={20} />
</div>
</a>
)}
{contacts.phone2 && (
<div className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group">
<a href={`tel:${contacts.phone2.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
<div className="flex items-center gap-4">
<div className="w-10 h-10 flex items-center justify-center bg-slate-50 border border-slate-100 rounded-full text-slate-500">
<div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
<Phone size={20} />
</div>
<span className="text-slate-700 font-bold text-lg">{contacts.phone2}</span>
<span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone2}</span>
</div>
<button onClick={() => copyToClipboard(contacts.phone2!)} className="text-slate-400 hover:text-indigo-600 transition-colors p-2">
<Copy size={20} />
</button>
</div>
<div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
<Phone size={20} />
</div>
</a>
)}
</div>
</section>

18
web/src/pages/Dashboard.tsx
View File

@@ -1107,15 +1107,25 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
<div className="grid md:grid-cols-2 gap-4">
<Input
label="Telefone Principal"
type="tel"
maxLength={9}
value={editContacts.phone1 || ''}
onChange={(e) => setEditContacts({ ...editContacts, phone1: e.target.value })}
placeholder="Ex: 910 000 000"
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '').slice(0, 9);
setEditContacts({ ...editContacts, phone1: val });
}}
placeholder="Ex: 910000000"
/>
<Input
label="Telefone Secundário"
type="tel"
maxLength={9}
value={editContacts.phone2 || ''}
onChange={(e) => setEditContacts({ ...editContacts, phone2: e.target.value })}
placeholder="Ex: 252 000 000"
onChange={(e) => {
const val = e.target.value.replace(/\D/g, '').slice(0, 9);
setEditContacts({ ...editContacts, phone2: val });
}}
placeholder="Ex: 252000000"
/>
<Input
label="Link do WhatsApp"