import { Head, useForm, router, usePage } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { useState } from 'react'; import { Eye, EyeOff, FlaskConical, RotateCcw, ArrowLeft, CheckCircle, XCircle, HardDrive, Info, BookOpen, ChevronDown, ChevronUp, Copy, Check, Link2 } from 'lucide-react'; import axios from 'axios'; import { formatInTz } from '@/Utils/datetime'; import { useTranslation, Trans } from 'react-i18next'; const SETUP_GUIDES = { storage_s3: { title: 'Amazon S3 Setup', steps: [ 'Sign in to the AWS Console at aws.amazon.com.', 'Go to IAM → Users → Create user with programmatic access.', 'Attach the AmazonS3FullAccess policy (or a scoped bucket policy).', 'Copy the Access Key ID and Secret Access Key.', 'Create an S3 bucket and note the bucket name and region.', ], link: 'https://s3.console.aws.amazon.com', linkLabel: 'Open AWS Console', }, storage_do: { title: 'DigitalOcean Spaces Setup', steps: [ 'Log in to cloud.digitalocean.com.', 'Navigate to Spaces → Create a Space, choose a region.', 'Go to API → Spaces Access Keys → Generate New Key.', 'Copy the Access Key and Secret.', 'Enter the Space name and region endpoint.', ], link: 'https://cloud.digitalocean.com/spaces', linkLabel: 'Open DigitalOcean', }, storage_wasabi: { title: 'Wasabi Cloud Storage Setup', steps: [ 'Sign up or log in at console.wasabisys.com.', 'Create a new bucket and note its name and region.', 'Go to Access Keys → Create New Access Key.', 'Copy the Access Key ID and Secret Access Key.', ], link: 'https://console.wasabisys.com', linkLabel: 'Open Wasabi Console', }, meta_app: { title: 'Meta App — Complete Setup Guide', subtitle: 'Covers WhatsApp Business API · Instagram DMs · Messenger · Facebook Social Posting · Embedded Signup', sections: [ { heading: 'Step 1 — Create & Configure Your Meta App', icon: 'create', steps: [ 'Go to developers.facebook.com → "My Apps" → "Create App".', 'Select app type: "Business" (required for WhatsApp + Messenger).', 'Fill in app name, contact email, and attach your Business Manager account.', 'Under Settings → Basic, copy your App ID and App Secret into the fields below.', 'Set App Domain to your production domain (e.g. yourdomain.com).', 'Under Settings → Advanced, enable "Allow API access to App settings" for system user tokens.', ], }, { heading: 'Step 2 — WhatsApp Business API', icon: 'whatsapp', note: 'Required for WhatsApp messaging and Embedded Signup (Connect WhatsApp button).', steps: [ 'In your app dashboard, click "Add Product" → add WhatsApp.', 'Go to WhatsApp → Getting Started to see your test WABA and phone number.', 'In Meta Business Suite → System Users, create a System User with ADMIN role.', 'Click "Add Assets" → assign your WhatsApp Business Account to the system user.', 'Generate a Permanent Token for the system user with these permissions:', ], permissions: [ 'whatsapp_business_management', 'whatsapp_business_messaging', 'business_management', ], steps2: [ 'Paste the generated token into the "System User Access Token" field below.', 'For the Webhook: go to WhatsApp → Configuration, set Callback URL to: {APP_URL}/webhooks/whatsapp/{VERIFY_TOKEN} (shown in Channel Setup after adding a WABA).', ], }, { heading: 'Step 3 — Embedded Signup (One-Click Connect)', icon: 'signup', note: 'Lets your clients connect WhatsApp / Instagram / Messenger with a single button click instead of manual token entry.', steps: [ 'Add "Facebook Login for Business" product to your app.', 'Go to Facebook Login for Business → Configurations → Create Configuration.', 'WhatsApp config: set Permissions to whatsapp_business_management + whatsapp_business_messaging. Copy the config_id → paste into "Embedded Signup Config ID (WhatsApp)" below.', 'Social config (Instagram + Messenger): set the permissions listed below. Copy the config_id → paste into "Embedded Signup Config ID (Instagram / Messenger)" below.', ], permissions: [ 'instagram_basic', 'instagram_manage_messages', 'pages_messaging', 'pages_manage_metadata', 'pages_read_engagement', 'pages_show_list', ], steps2: [ 'Under your app Settings → Basic → App Domains, add your domain.', 'Under Facebook Login → Settings, add Valid OAuth Redirect URIs: {APP_URL}/app/inbox/setup', ], }, { heading: 'Step 4 — Instagram Business DMs', icon: 'instagram', note: 'Allows receiving and sending Instagram Direct Messages in the Inbox.', steps: [ 'Add "Messenger" product to your app (Instagram DMs use the Messenger API).', 'Go to Messenger → Instagram Settings → enable "Connected Tools".', 'Set the Webhook callback URL to: {APP_URL}/webhooks/meta/{VERIFY_TOKEN} (shown in Channel Setup).', 'Subscribe to these webhook fields:', ], permissions: [ 'instagram_basic', 'instagram_manage_messages', 'pages_manage_metadata', ], webhookFields: [ 'messages', 'messaging_postbacks', 'messaging_optins', 'message_deliveries', 'message_reads', ], }, { heading: 'Step 5 — Facebook Messenger DMs', icon: 'messenger', note: 'Allows receiving and sending Facebook Page messages in the Inbox.', steps: [ 'Go to Messenger → Settings in your app dashboard.', 'Set Webhook callback URL to: {APP_URL}/webhooks/meta/{VERIFY_TOKEN}.', 'Subscribe the webhook to these fields:', ], permissions: [ 'pages_messaging', 'pages_manage_metadata', 'pages_read_engagement', ], webhookFields: [ 'messages', 'messaging_postbacks', 'messaging_optins', 'message_deliveries', 'message_reads', ], steps2: [ 'Pages are subscribed automatically when a client connects via Embedded Signup.', ], }, { heading: 'Step 6 — Facebook & Instagram Social Posting', icon: 'social', note: 'Required only if you use the Social Posting feature to publish posts to Facebook Pages or Instagram.', steps: [ 'Add "Facebook Login" product to your app.', 'Go to Facebook Login → Settings and add Valid OAuth Redirect URI: {APP_URL}/auth/facebook/callback', 'Request the following permissions (some require App Review for Advanced Access):', ], permissions: [ 'pages_manage_posts', 'pages_read_engagement', 'pages_show_list', 'instagram_basic', 'instagram_content_publish', 'public_profile', 'email', ], steps2: [ 'Submit your app for App Review for any permissions marked as "Advanced Access" (pages_manage_posts, instagram_content_publish).', 'Add a Privacy Policy URL and Terms of Service URL under Settings → Basic before submitting for review.', ], }, { heading: 'Step 7 — Go Live', icon: 'live', steps: [ 'Switch your app from Development to Live mode (top toggle in Meta App Dashboard).', 'In App Review → Permissions, request Advanced Access for any restricted permissions.', 'Add Privacy Policy URL and Terms of Service URL under Settings → Basic.', 'Enable the integration using the toggle at the top of this admin page.', ], }, ], links: [ { href: 'https://developers.facebook.com/apps', label: 'Meta App Dashboard' }, { href: 'https://business.facebook.com/settings/system-users', label: 'System Users' }, { href: 'https://developers.facebook.com/docs/whatsapp/embedded-signup', label: 'Embedded Signup Docs' }, { href: 'https://developers.facebook.com/docs/messenger-platform', label: 'Messenger Platform Docs' }, ], }, oauth_linkedin: { title: 'LinkedIn OAuth Setup', steps: [ 'Go to linkedin.com/developers and sign in.', 'Click "Create App", fill in company and app details.', 'Under "Auth" tab, add redirect URL: {your-domain}/auth/linkedin/callback', 'Copy the Client ID and Client Secret.', 'Request r_liteprofile and r_emailaddress permissions.', ], link: 'https://www.linkedin.com/developers/apps', linkLabel: 'Open LinkedIn Developers', }, oauth_twitter: { title: 'Twitter / X OAuth Setup', steps: [ 'Go to developer.twitter.com and apply for a developer account.', 'Create a new Project and App.', 'Under "User authentication settings", enable OAuth 2.0.', 'Set the callback URL to: {your-domain}/auth/twitter/callback', 'Copy the Client ID and Client Secret from "Keys and tokens" tab.', ], link: 'https://developer.twitter.com/en/portal/apps/new', linkLabel: 'Open Twitter Developer Portal', }, oauth_youtube: { title: 'YouTube / Google OAuth Setup', steps: [ 'Go to console.cloud.google.com and create or select a project.', 'Navigate to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID.', 'Set the authorized redirect URI to: {your-domain}/auth/google/callback', 'Enable the YouTube Data API v3 in APIs & Services → Library.', 'Copy the Client ID and Client Secret.', ], link: 'https://console.cloud.google.com/apis/credentials', linkLabel: 'Open Google Cloud Console', }, oauth_shopify: { title: 'Shopify App (OAuth) Setup', subtitle: 'Lets merchants connect their Shopify store with one click instead of pasting an API token.', steps: [ 'Go to the Shopify Partner dashboard → Apps → Create app → Create app manually.', 'Open the app → Configuration. Under "App URL" put your app URL, and under "Allowed redirection URL(s)" add the Callback URL shown above this guide.', 'For unlisted/custom distribution you do NOT need to submit for App Store review.', 'Open "API credentials" / "Client credentials" and copy the API key (Client ID) and API secret key (Client secret) into the fields below.', 'Request scopes are handled automatically by this app (orders, customers, products, checkouts, fulfillments).', 'Save, then merchants can connect from E-Commerce → Stores → Connect with Shopify.', ], link: 'https://partners.shopify.com', linkLabel: 'Open Shopify Partners', }, oauth_bigcommerce: { title: 'BigCommerce App (OAuth) Setup', subtitle: 'Lets merchants install your app from their BigCommerce control panel to auto-connect.', steps: [ 'Go to the BigCommerce Developer Portal → My Apps → Create an app.', 'Under "Technical", set the Auth Callback URL to the Callback URL shown above this guide. Load/Uninstall callbacks can point to the same host.', 'Enable OAuth scopes: Orders, Customers (read), Products, Information & Settings (read), Carts (read), Webhooks (manage).', 'Copy the Client ID and Client Secret into the fields below.', 'Keep the app in Draft for unlisted use — no marketplace review needed; install it from your store\'s control panel under Apps → My Apps.', ], link: 'https://devtools.bigcommerce.com/my/apps', linkLabel: 'Open BigCommerce Dev Portal', }, oauth_tiktok: { title: 'TikTok OAuth Setup', steps: [ 'Go to developers.tiktok.com and sign in.', 'Create an app under "Manage apps".', 'Add the callback URL: {your-domain}/auth/tiktok/callback', 'Request the user.info.basic scope.', 'Copy the Client Key and Client Secret.', ], link: 'https://developers.tiktok.com', linkLabel: 'Open TikTok Developers', }, llm_openai_default: { title: 'OpenAI API Setup', steps: [ 'Sign up or log in at platform.openai.com.', 'Go to API Keys → Create new secret key.', 'Copy the key immediately — it won\'t be shown again.', 'Add billing details under Settings → Billing.', ], link: 'https://platform.openai.com/api-keys', linkLabel: 'Open OpenAI Platform', }, llm_anthropic_default: { title: 'Anthropic Claude API Setup', steps: [ 'Sign up or log in at console.anthropic.com.', 'Go to Account Settings → API Keys → Create Key.', 'Copy the key — shown only once.', 'Add a credit card under Billing to activate the API.', ], link: 'https://console.anthropic.com/keys', linkLabel: 'Open Anthropic Console', }, llm_gemini_default: { title: 'Google Gemini API Setup', steps: [ 'Go to aistudio.google.com and sign in with a Google account.', 'Click "Get API key" → "Create API key in new project".', 'Copy the generated API key.', ], link: 'https://aistudio.google.com/app/apikey', linkLabel: 'Open Google AI Studio', }, sms_twilio_default: { title: 'Twilio SMS Setup', steps: [ 'Sign up at twilio.com and verify your account.', 'From the Console Dashboard, copy your Account SID and Auth Token.', 'Go to Phone Numbers → Buy a Number with SMS capability.', 'Enter the Account SID, Auth Token, and the Twilio phone number.', ], link: 'https://console.twilio.com', linkLabel: 'Open Twilio Console', }, sms_nexmo_default: { title: 'Vonage (Nexmo) SMS Setup', steps: [ 'Sign up at vonage.com.', 'From the API Dashboard, copy your API Key and API Secret.', 'Purchase a virtual number under Numbers → Buy Numbers.', ], link: 'https://dashboard.nexmo.com', linkLabel: 'Open Vonage Dashboard', }, sms_messagebird_default: { title: 'MessageBird SMS Setup', steps: [ 'Sign up at messagebird.com.', 'Go to Developers → API access keys → Add access key.', 'Copy the live API key.', 'Optionally buy a virtual number under Numbers.', ], link: 'https://dashboard.messagebird.com/en/developers/access', linkLabel: 'Open MessageBird Dashboard', }, google_places: { title: 'Google Places API Setup', steps: [ 'Go to console.cloud.google.com and create or select a project.', 'Navigate to APIs & Services → Library → search "Places API" → Enable.', 'Go to APIs & Services → Credentials → Create Credentials → API Key.', 'Optionally restrict the key to Places API only for security.', ], link: 'https://console.cloud.google.com/apis/library/places-backend.googleapis.com', linkLabel: 'Open Google Cloud Console', }, qdrant: { title: 'Qdrant Vector Store Setup', steps: [ 'Option A — Qdrant Cloud: Sign up at cloud.qdrant.io, create a cluster, copy the cluster URL and API key.', 'Option B — Self-hosted: Run with Docker: docker run -p 6333:6333 qdrant/qdrant', 'For self-hosted, the URL is typically http://localhost:6333 (no API key needed).', 'Paste the URL and API key (if applicable) into the credentials form.', ], link: 'https://cloud.qdrant.io', linkLabel: 'Open Qdrant Cloud', }, }; function PermBadge({ p }) { return ( {p} ); } function CallbackUrlCard({ url }) { const { t } = useTranslation(); const [copied, setCopied] = useState(false); if (!url) return null; const copy = () => { navigator.clipboard?.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

{t('integrations.callback_url_title')}

{t('integrations.callback_url_desc')}

{url}
); } function SetupGuide({ provider }) { const { t } = useTranslation(); const [open, setOpen] = useState(false); const guide = SETUP_GUIDES[provider]; if (!guide) return null; const hasSections = Array.isArray(guide.sections); return (
{open && (
{guide.subtitle && (

{guide.subtitle}

)} {hasSections ? (
{guide.sections.map((sec, si) => (

{sec.heading}

{sec.note && (
{t('integrations.note')}

{sec.note}

)} {sec.steps && (
    {sec.steps.map((s, i) => (
  1. {i + 1}. {s}
    2. ))}
)} {sec.permissions && (

{t('integrations.required_permissions')}

{sec.permissions.map(p => )}
)} {sec.webhookFields && (

{t('integrations.webhook_fields')}

{sec.webhookFields.map(f => ( {f} ))}
)} {sec.steps2 && (
    {sec.steps2.map((s, i) => (
  1. {(sec.steps ? sec.steps.length : 0) + i + 1}. {s}
    2. ))}
)}
))}
) : (
    {guide.steps.map((step, i) => (
  1. {i + 1}. {step}
    2. ))}
)} {guide.links ? (
{guide.links.map(l => ( {l.label} → ))}
) : guide.link ? ( {guide.linkLabel} → ) : null}
)}
); } const BRAND = { storage_local: { bg: 'bg-sky-100 dark:bg-sky-900/40', color: '#0ea5e9', icon: }, storage_s3: { bg: 'bg-orange-100 dark:bg-orange-900/30', color: '#FF9900', icon: }, storage_do: { bg: 'bg-blue-100 dark:bg-blue-900/30', color: '#0080FF', icon: }, storage_wasabi: { bg: 'bg-green-100 dark:bg-green-900/30', color: '#3CBA54', icon: }, meta_app: { bg: 'bg-blue-100 dark:bg-blue-900/30', color: '#0866FF', icon: }, oauth_linkedin: { bg: 'bg-sky-100 dark:bg-sky-900/30', color: '#0A66C2', icon: }, oauth_twitter: { bg: 'bg-neutral-200 dark:bg-neutral-700/60', color: '#0f0f0f', icon: }, oauth_youtube: { bg: 'bg-red-100 dark:bg-red-900/30', color: '#FF0000', icon: }, oauth_tiktok: { bg: 'bg-neutral-200 dark:bg-neutral-700/60', color: '#000000', icon: }, llm_openai_default: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', color: '#10a37f', icon: }, llm_anthropic_default: { bg: 'bg-orange-100 dark:bg-orange-900/30', color: '#d4793b', icon: }, llm_gemini_default: { bg: 'bg-blue-100 dark:bg-blue-900/30', color: '#4285F4', icon: }, sms_twilio_default: { bg: 'bg-red-100 dark:bg-red-900/30', color: '#F22F46', icon: }, sms_nexmo_default: { bg: 'bg-purple-100 dark:bg-purple-900/30', color: '#6E3697', icon: }, sms_messagebird_default: { bg: 'bg-blue-100 dark:bg-blue-900/30', color: '#2481CC', icon: }, sms_smsbd_default: { bg: 'bg-teal-100 dark:bg-teal-900/30', color: '#0d9488', icon: }, sms_reve_default: { bg: 'bg-indigo-100 dark:bg-indigo-900/30', color: '#4f46e5', icon: }, google_places: { bg: 'bg-red-100 dark:bg-red-900/30', color: '#EA4335', icon: }, qdrant: { bg: 'bg-rose-100 dark:bg-rose-900/30', color: '#DC143C', icon: }, }; function SecretField({ label, fieldKey, value, onChange, required, hint }) { const { t } = useTranslation(); const [visible, setVisible] = useState(false); const isMasked = value && /^•+/.test(value); return (
onChange(fieldKey, e.target.value)} placeholder={isMasked ? t('integrations.unchanged_placeholder') : t('integrations.enter_value')} className="w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-3 py-2 pr-10 text-sm text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-brand-500" />
{hint &&

{hint}

}
); } function PlainField({ label, fieldKey, value, onChange, required, hint }) { return (
onChange(fieldKey, e.target.value)} className="w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-brand-500" /> {hint &&

{hint}

}
); } const STORAGE_PROVIDERS = ['storage_local', 'storage_s3', 'storage_do', 'storage_wasabi']; function StorageBanner({ provider }) { const { t } = useTranslation(); if (!STORAGE_PROVIDERS.includes(provider)) return null; const isLocal = provider === 'storage_local'; return (

{t('integrations.storage_provider')}

{isLocal ? (

{t('integrations.storage_local_banner')}

) : (

, code: }} />

)}
); } export default function IntegrationsEdit({ provider, label, category, fields, config, callbackUrl = null }) { const { t } = useTranslation(); const adminTz = usePage().props.timezone || 'Asia/Dhaka'; const { data, setData, put, processing, errors } = useForm({ enabled: config.enabled, mode: config.mode, credentials: { ...config.credentials }, }); const [testResult, setTestResult] = useState(null); const [testing, setTesting] = useState(false); const [rotating, setRotating] = useState(false); const setCredential = (key, val) => { setData('credentials', { ...data.credentials, [key]: val }); }; const handleSubmit = (e) => { e.preventDefault(); put(route('admin.integrations.update', provider), { preserveScroll: true }); }; const handleTest = async () => { setTesting(true); setTestResult(null); try { const { data: res } = await axios.post(route('admin.integrations.test', provider)); setTestResult(res); } catch (e) { setTestResult({ ok: false, message: e?.response?.data?.message || t('integrations.request_failed') }); } finally { setTesting(false); } }; const handleRotate = async () => { if (! confirm(t('integrations.rotate_confirm'))) return; setRotating(true); try { await axios.post(route('admin.integrations.rotate', provider)); router.reload({ only: ['config'] }); } finally { setRotating(false); } }; return (
{BRAND[provider] && (
{BRAND[provider].icon}
)}

{category}

{label}

{/* Status toggles */}

{t('integrations.status')}

{t('integrations.mode_label')}
{/* Credential fields */}

{t('integrations.credentials')}

{provider === 'storage_local' ? (
{t('integrations.no_credentials_local')}
) : ( <>

{t('integrations.encrypted_note')}

{fields.map(f => ( f.type === 'password' ? : ))} {provider === 'meta_app' && data.credentials.config_id_whatsapp && data.credentials.config_id_social && data.credentials.config_id_whatsapp === data.credentials.config_id_social && (
, em: }} />
)} )} {errors && Object.values(errors).map((e, i) => (

{e}

))}
{/* Test result */} {testResult && (
{testResult.ok ? : } {testResult.message}
)} {/* Actions */}
{!STORAGE_PROVIDERS.includes(provider) && ( )}
{/* Last test status */} {config.last_test_status !== 'untested' && (
{t('integrations.last_tested')}: {config.last_tested_at ? formatInTz(config.last_tested_at, adminTz) : t('integrations.never')} {' · '} {config.last_test_status} {config.last_test_message && ` · ${config.last_test_message}`}
)}
); }