101 lines
4.4 KiB
TypeScript
101 lines
4.4 KiB
TypeScript
import React from "react";
|
|
import { Building2, Palette, Bell, Mail, Scale, MessageCircle, LayoutDashboard } from "lucide-react";
|
|
import { GuideItem } from "@/components/shared/GuideItem";
|
|
import type { HelpContent } from "./types";
|
|
|
|
/** Help content for Site Settings (/dashboard/admin/settings), matching its six tabs. */
|
|
export const siteSettingsHelpContent: HelpContent = {
|
|
title: "Site Settings help",
|
|
subtitle: "Configure your organisation, branding, email, WhatsApp, and legal pages.",
|
|
quickLinks: [
|
|
{ label: "Back to Admin dashboard", href: "/dashboard/admin", icon: LayoutDashboard },
|
|
],
|
|
tabs: [
|
|
{
|
|
key: "organisation",
|
|
label: "Organisation",
|
|
icon: Building2,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>Your organisation's name, tagline, and contact details.</p>
|
|
<div className="space-y-4">
|
|
<GuideItem icon={Building2} title="Contact email, phone, and address" tone="brand">
|
|
These feed the public Contact page directly — update them here and the Contact page updates automatically.
|
|
</GuideItem>
|
|
<GuideItem icon={Building2} title="Site URL" tone="gray">
|
|
The public URL of this site, used in email links like password resets and ticket delivery.
|
|
</GuideItem>
|
|
<GuideItem icon={Building2} title="Google Search Console verification" tone="gray">
|
|
Proves to Google that you own this site, so you can see search traffic and submit <code>/sitemap.xml</code> in Search Console. Add the site there as a URL-prefix property (e.g. <code>https://events.yourchurch.org/</code>), pick the <strong>HTML tag</strong> method, paste the tag here and save, then click Verify. Each site has its own code. Google finds your events without this; it only unlocks the Search Console reports.
|
|
</GuideItem>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "branding",
|
|
label: "Branding",
|
|
icon: Palette,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>Your logo and accent color.</p>
|
|
<GuideItem icon={Palette} title="Accent color" tone="violet">
|
|
This only recolors the organisation name next to the logo in the top navigation bar. Every other button, link, and highlight across the site uses a fixed color scheme by design — changing this setting won't change anything else.
|
|
</GuideItem>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "notifications",
|
|
label: "Notifications",
|
|
icon: Bell,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>The email address(es) that get notified whenever someone registers for an event — separate multiple addresses with commas.</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "email",
|
|
label: "Email",
|
|
icon: Mail,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>Outgoing SMTP settings used for tickets, payment confirmations, and account emails.</p>
|
|
<GuideItem icon={Mail} title="Leave blank for defaults" tone="gray">
|
|
If left blank, the server falls back to its own environment configuration. The SMTP password is stored encrypted.
|
|
</GuideItem>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "legal",
|
|
label: "Legal",
|
|
icon: Scale,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>Details used to populate the site's Privacy Policy and Terms pages — operator name, information officer details, website URL, and effective date.</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "whatsapp",
|
|
label: "WhatsApp",
|
|
icon: MessageCircle,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<p>Connects the site to a WhatsApp number (via WAWP) for sending tickets and notifications.</p>
|
|
<div className="space-y-4">
|
|
<GuideItem icon={MessageCircle} title="Three-step setup" tone="brand">
|
|
Enter your WAWP access token, set up a session instance (create new or enter an existing one), then scan the QR code (or use a phone pairing code) to link a WhatsApp number.
|
|
</GuideItem>
|
|
<GuideItem icon={MessageCircle} title="Session status" tone="green">
|
|
Once connected, the status card shows live connection health and auto-refreshes while reconnecting. If it fails, the system attempts to auto-recover and emails an admin alert if that doesn't work.
|
|
</GuideItem>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
};
|