saveinmed/frontend/src/pages/marketplace/HelpCenter.tsx

113 lines
6.7 KiB
TypeScript

import { Shell } from '@/layouts/Shell'
const faqs = [
{
question: 'Como faço para cadastrar minha farmácia?',
answer: 'Clique em "Cadastrar" na tela de login, preencha os dados da sua empresa (CNPJ, nome, endereço) e aguarde a verificação. Após aprovado, você terá acesso completo à plataforma.'
},
{
question: 'Como funciona o pagamento?',
answer: 'Aceitamos Pix, cartão de crédito e boleto. O pagamento é processado de forma segura através dos nossos parceiros (Mercado Pago, Stripe, Asaas). Os valores são repassados aos vendedores após confirmação da entrega.'
},
{
question: 'Qual a taxa cobrada pelo marketplace?',
answer: 'O valor exibido já contempla a taxa do marketplace. Não mostramos taxas separadas para o comprador e não há taxas de cadastro ou mensalidades.'
},
{
question: 'Como rastrear meu pedido?',
answer: 'Acesse "Meus Pedidos" no menu. Lá você verá o status atualizado de cada pedido, desde a confirmação até a entrega. Você também receberá notificações por email e push.'
},
{
question: 'Posso comprar de vários distribuidores no mesmo pedido?',
answer: 'Sim! Você pode adicionar produtos de diferentes distribuidores ao carrinho. No checkout, cada distribuidor será tratado como um pedido separado para facilitar o frete e rastreamento.'
},
{
question: 'Como funciona o crédito (Boleto a Prazo)?',
answer: 'Farmácias verificadas podem solicitar um limite de crédito. Com crédito aprovado, você pode comprar e pagar em até 30 dias. O limite é definido com base no seu histórico de compras.'
},
{
question: 'Posso convidar outros funcionários para a minha conta?',
answer: 'Sim! Na seção "Equipe", você pode convidar colaboradores com diferentes níveis de acesso (Gerente, Comprador, etc.).'
},
{
question: 'Como faço para vender na plataforma?',
answer: 'Se você é distribuidor, cadastre sua empresa e aguarde verificação. Após aprovado, vá em "Meus Produtos" para cadastrar seu catálogo. Você pode importar via CSV para grandes volumes.'
},
]
const contacts = [
{ icon: '📧', label: 'Email', value: 'suporte@saveinmed.com.br' },
{ icon: '📱', label: 'WhatsApp', value: '(62) 99999-0000' },
{ icon: '🕐', label: 'Horário', value: 'Seg-Sex: 08:00-18:00' },
]
export function HelpCenterPage() {
return (
<Shell>
<div className="max-w-4xl mx-auto p-6">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
📚 Central de Ajuda
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-2">
Encontre respostas para as perguntas mais frequentes
</p>
</div>
{/* FAQ Section */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
<h2 className="text-lg font-semibold p-6 border-b border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white">
Perguntas Frequentes
</h2>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
{faqs.map((faq, index) => (
<details key={index} className="group">
<summary className="px-6 py-4 cursor-pointer list-none flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
<span className="font-medium text-gray-900 dark:text-white">{faq.question}</span>
<span className="text-gray-400 group-open:rotate-180 transition-transform"></span>
</summary>
<div className="px-6 pb-4 text-gray-600 dark:text-gray-400">
{faq.answer}
</div>
</details>
))}
</div>
</div>
{/* Contact Section */}
<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
<h2 className="text-lg font-semibold mb-4">📞 Contato</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{contacts.map((contact, index) => (
<div key={index} className="bg-white/10 rounded-lg p-4">
<div className="text-2xl mb-2">{contact.icon}</div>
<div className="text-sm opacity-80">{contact.label}</div>
<div className="font-medium">{contact.value}</div>
</div>
))}
</div>
</div>
{/* Quick Links */}
<div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="/orders" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
<div className="text-2xl mb-2">📦</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">Meus Pedidos</div>
</a>
<a href="/wallet" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
<div className="text-2xl mb-2">💰</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">Carteira</div>
</a>
<a href="/team" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
<div className="text-2xl mb-2">👥</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">Equipe</div>
</a>
<a href="/shipping-settings" className="bg-white dark:bg-gray-800 p-4 rounded-lg text-center hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
<div className="text-2xl mb-2">🚚</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">Frete</div>
</a>
</div>
</div>
</Shell>
)
}