First commit
This commit is contained in:
Ritul-Work
commit
25ba4c1937
|
|
@ -0,0 +1,45 @@
|
||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
server/node_modules/
|
||||||
|
client/node_modules/
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
dist/
|
||||||
|
dist-ssr/
|
||||||
|
build/
|
||||||
|
coverage/
|
||||||
|
.vite/
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
!.env.*.example
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
*.out
|
||||||
|
*.err
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea/
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# planning files
|
||||||
|
*.md
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>client</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.13.6",
|
||||||
|
"react": "^19.2.4",
|
||||||
|
"react-dom": "^19.2.4",
|
||||||
|
"react-router-dom": "^7.13.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.4",
|
||||||
|
"@tailwindcss/vite": "^4.2.2",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"eslint": "^9.39.4",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.4.0",
|
||||||
|
"tailwindcss": "^4.2.2",
|
||||||
|
"vite": "^8.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
|
|
@ -0,0 +1,24 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1,184 @@
|
||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
||||||
|
import { BusinessProvider, useBusiness } from './context/BusinessContext';
|
||||||
|
import Sidebar from './components/Sidebar';
|
||||||
|
import Businesses from './pages/Businesses';
|
||||||
|
import Providers from './pages/Providers';
|
||||||
|
import GlobalSms from './pages/GlobalSms';
|
||||||
|
import Events from './pages/Events';
|
||||||
|
import Templates from './pages/Templates';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
function SubLayout({ children }) {
|
||||||
|
const { activeBusinessId } = useBusiness();
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-page-bg">
|
||||||
|
<Sidebar />
|
||||||
|
<main className="flex-1 ml-60 flex flex-col">
|
||||||
|
<header className="h-16 border-b border-border-main bg-white flex items-center justify-end px-8 z-10 shrink-0">
|
||||||
|
<Link
|
||||||
|
to={`/${activeBusinessId}/settings`}
|
||||||
|
className="w-10 h-10 rounded-full hover:bg-refresh-hover text-gray-500 hover:text-primary-blue flex items-center justify-center transition-colors shadow-sm border border-border-soft"
|
||||||
|
title="Settings"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||||
|
</Link>
|
||||||
|
</header>
|
||||||
|
<div className="flex-1 p-8 overflow-auto">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Guard: redirect to / if no active business in session
|
||||||
|
// Also enforce cURL-first: redirect to global-sms if no cURL is saved yet.
|
||||||
|
function BusinessGuard({ children, isGlobalSmsRoute }) {
|
||||||
|
const { activeBusinessId, loading, hasGlobalSms } = useBusiness();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-page-bg">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-primary-blue rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!activeBusinessId) {
|
||||||
|
return <Navigate to="/" state={{ from: location }} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasGlobalSms && !isGlobalSmsRoute && !location.pathname.endsWith('/settings')) {
|
||||||
|
// Only allow global SMS page if cURL constraint is not met yet
|
||||||
|
// Optionally allow settings, but strictly planning says "must go to Global SMS first".
|
||||||
|
// We enforce only global SMS by redirecting other pages.
|
||||||
|
return <Navigate to={`/${activeBusinessId}/global-sms`} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BusinessProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Businesses />} />
|
||||||
|
<Route path="/:businessId/settings" element={
|
||||||
|
<BusinessGuard><SubLayout><Providers /></SubLayout></BusinessGuard>
|
||||||
|
} />
|
||||||
|
<Route path="/:businessId/global-sms" element={
|
||||||
|
<BusinessGuard isGlobalSmsRoute><SubLayout><GlobalSms /></SubLayout></BusinessGuard>
|
||||||
|
} />
|
||||||
|
<Route path="/:businessId/events" element={
|
||||||
|
<BusinessGuard><SubLayout><Events /></SubLayout></BusinessGuard>
|
||||||
|
} />
|
||||||
|
<Route path="/:businessId/templates" element={
|
||||||
|
<BusinessGuard><SubLayout><Templates /></SubLayout></BusinessGuard>
|
||||||
|
} />
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</BusinessProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: '/',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default apiClient;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
|
|
@ -0,0 +1,56 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function ImagePicker({ slug, currentImage, onSelect }) {
|
||||||
|
const [images, setImages] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function loadImages() {
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get('/api/templates/images');
|
||||||
|
setImages(res.data.images || []);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load images', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadImages();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="text-sm text-gray-400">Loading brand images…</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (images.length === 0) {
|
||||||
|
return <div className="text-sm text-gray-500 italic bg-gray-50 border border-gray-100 px-4 py-3 rounded-lg">No images available for this brand.</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
{images.map((img, i) => {
|
||||||
|
const isSelected = currentImage === img.url;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => onSelect(img.url)}
|
||||||
|
className={`relative rounded-lg overflow-hidden border-2 aspect-video transition-all ${
|
||||||
|
isSelected
|
||||||
|
? 'border-indigo-600 ring-2 ring-indigo-600 ring-opacity-50 shadow-md'
|
||||||
|
: 'border-transparent hover:border-gray-300 opacity-80 hover:opacity-100 shadow-sm'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<img src={img.url} alt={`brand-pic-${i}`} className="w-full h-full object-cover" />
|
||||||
|
<div className={`absolute inset-0 bg-indigo-600/20 transition-opacity ${isSelected ? 'opacity-100' : 'opacity-0'}`} />
|
||||||
|
{isSelected && (
|
||||||
|
<div className="absolute top-1.5 right-1.5 w-5 h-5 bg-indigo-600 rounded-full flex items-center justify-center shadow-lg border-2 border-white">
|
||||||
|
<svg className="w-3 h-3 text-white" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function RegisterBusinessModal({ onClose }) {
|
||||||
|
const [url, setUrl] = useState('');
|
||||||
|
const [status, setStatus] = useState('idle'); // idle | loading | success | error
|
||||||
|
const [brandName, setBrandName] = useState('');
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
async function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!url.trim()) return;
|
||||||
|
setStatus('loading');
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const res = await apiClient.post('/api/businesses', { websiteUrl: url.trim() });
|
||||||
|
setBrandName(res.data.brandName);
|
||||||
|
setStatus('success');
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Something went wrong. Please try again.');
|
||||||
|
setStatus('error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-8 w-full max-w-md shadow-xl">
|
||||||
|
|
||||||
|
{/* Success */}
|
||||||
|
{status === 'success' && (
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-14 h-14 rounded-full bg-green-50 text-green-600 flex items-center justify-center mx-auto mb-4 text-2xl">✓</div>
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-2">Business Added!</h2>
|
||||||
|
<p className="text-gray-500 text-sm mb-1 font-medium">Brand detected:</p>
|
||||||
|
<p className="text-indigo-600 font-bold text-lg mb-6 tracking-tight">{brandName}</p>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 shadow-sm text-white font-medium transition"
|
||||||
|
>
|
||||||
|
Done
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
{(status === 'idle' || status === 'loading' || status === 'error') && (
|
||||||
|
<>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-2 tracking-tight">Add a Business</h2>
|
||||||
|
<p className="text-gray-500 text-sm leading-relaxed">
|
||||||
|
Enter your website URL. We'll scrape your site and extract brand context to generate TRAI-compliant SMS templates.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-700 mb-1.5 tracking-wide">Website URL</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={url}
|
||||||
|
onChange={e => setUrl(e.target.value)}
|
||||||
|
placeholder="https://yourstore.com"
|
||||||
|
disabled={status === 'loading'}
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-white border border-gray-300 text-gray-900 placeholder-gray-400 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent transition disabled:opacity-50 text-sm shadow-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{status === 'error' && (
|
||||||
|
<p className="text-sm text-red-600 font-medium bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={status === 'loading'}
|
||||||
|
className="flex-[0.8] py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={status === 'loading' || !url.trim()}
|
||||||
|
className="flex-[1.2] py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{status === 'loading' ? (
|
||||||
|
<><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Analysing…</>
|
||||||
|
) : 'Add Business'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{status === 'loading' && (
|
||||||
|
<p className="text-xs text-gray-500 font-medium text-center pt-2">
|
||||||
|
Scraping your site and extracting brand context. This may take 20–30 seconds.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { NavLink, useNavigate } from 'react-router-dom';
|
||||||
|
import { useBusiness } from '../context/BusinessContext';
|
||||||
|
|
||||||
|
const SVG_ICONS = {
|
||||||
|
providers: (
|
||||||
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
globalSms: (
|
||||||
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
events: (
|
||||||
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
templates: (
|
||||||
|
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Sidebar() {
|
||||||
|
const { activeBusiness, activeBusinessId, clearBusiness } = useBusiness();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ id: 'globalSms', to: `/${activeBusinessId}/global-sms`, label: 'Global SMS cURL' },
|
||||||
|
{ id: 'events', to: `/${activeBusinessId}/events`, label: 'Events' },
|
||||||
|
{ id: 'templates', to: `/${activeBusinessId}/templates`, label: 'Templates' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function handleSwitch() {
|
||||||
|
clearBusiness();
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="fixed top-0 left-0 h-screen w-60 bg-white border-r border-gray-200 flex flex-col z-10">
|
||||||
|
{/* Business info + switch */}
|
||||||
|
<div className="px-5 py-5 border-b border-gray-100">
|
||||||
|
<button
|
||||||
|
onClick={handleSwitch}
|
||||||
|
className="flex items-center gap-2 text-gray-500 hover:text-gray-900 transition text-sm group font-medium"
|
||||||
|
>
|
||||||
|
<span className="group-hover:-translate-x-0.5 transition-transform text-lg leading-none">←</span>
|
||||||
|
<span>Switch Business</span>
|
||||||
|
</button>
|
||||||
|
{activeBusiness && (
|
||||||
|
<div className="mt-4 flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-md bg-indigo-600 flex items-center justify-center text-sm font-bold text-white shrink-0 shadow-sm">
|
||||||
|
{activeBusiness.brandName?.[0]?.toUpperCase() || 'B'}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="text-sm font-semibold text-gray-900 truncate">{activeBusiness.brandName}</p>
|
||||||
|
<p className="text-xs text-gray-400 truncate font-medium">{activeBusiness.domain}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nav */}
|
||||||
|
<nav className="flex-1 px-3 pt-5 space-y-1">
|
||||||
|
{navItems.map(({ id, to, label }) => (
|
||||||
|
<NavLink
|
||||||
|
key={id}
|
||||||
|
to={to}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors duration-150 ${
|
||||||
|
isActive
|
||||||
|
? 'bg-refresh-hover text-primary-blue'
|
||||||
|
: 'text-text-muted hover:text-text-primary hover:bg-row-hover'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{SVG_ICONS[id]}
|
||||||
|
{label}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="px-5 py-4 border-t border-gray-100">
|
||||||
|
<p className="text-xs text-gray-500 font-medium tracking-wide">TRAI-compliant SMS</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function TestSmsModal({ businessId, template, onClose }) {
|
||||||
|
const [toNumber, setToNumber] = useState('');
|
||||||
|
const [sending, setSending] = useState(false);
|
||||||
|
const [result, setResult] = useState(null);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
async function handleSend(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!toNumber.trim()) return;
|
||||||
|
setSending(true);
|
||||||
|
setError('');
|
||||||
|
setResult(null);
|
||||||
|
try {
|
||||||
|
const res = await apiClient.post(
|
||||||
|
`/api/businesses/${businessId}/templates/${template.eventSlug}/test`,
|
||||||
|
{ toNumber: toNumber.trim() }
|
||||||
|
);
|
||||||
|
setResult(res.data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || err.response?.data?.details || 'Failed to send test SMS');
|
||||||
|
} finally {
|
||||||
|
setSending(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-8 w-full max-w-md shadow-xl">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-xl">📱</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-900 text-center mb-1">Test SMS</h3>
|
||||||
|
<p className="text-sm text-gray-500 text-center mb-6">
|
||||||
|
Enter a phone number to send a real test SMS for <span className="font-semibold text-gray-800 capitalize">{template.eventLabel || template.eventSlug.replace(/_/g, ' ')}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{!result ? (
|
||||||
|
<form onSubmit={handleSend} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="px-4 py-2.5 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm font-medium">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-700 mb-1.5">Phone Number</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={toNumber}
|
||||||
|
onChange={e => setToNumber(e.target.value)}
|
||||||
|
placeholder="e.g. 919876543210 (with country code)"
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-gray-50 border border-gray-300 font-mono text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-600 text-sm"
|
||||||
|
autoFocus
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-400 mt-1.5 font-medium">Include country code without +. Not stored.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={sending}
|
||||||
|
className="flex-1 py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={sending || !toNumber.trim()}
|
||||||
|
className="flex-1 py-2.5 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{sending ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Sending…</> : 'Send Test SMS'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className={`px-4 py-3 rounded-lg border text-sm font-medium ${result.success ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800'}`}>
|
||||||
|
{result.success ? '✓ SMS sent successfully!' : '✗ SMS send failed'}
|
||||||
|
{result.statusCode && <span className="ml-2 opacity-60">HTTP {result.statusCode}</span>}
|
||||||
|
</div>
|
||||||
|
{result.response && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Provider Response</label>
|
||||||
|
<pre className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs font-mono text-gray-700 overflow-x-auto whitespace-pre-wrap break-all">
|
||||||
|
{typeof result.response === 'string' ? result.response : JSON.stringify(result.response, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-gray-900 hover:bg-gray-800 text-white text-sm font-semibold transition"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function WhitelistModal({ businessId, template, onClose, onSuccess }) {
|
||||||
|
const [templateId, setTemplateId] = useState('');
|
||||||
|
const [toNumber, setToNumber] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const [providers, setProviders] = useState(null);
|
||||||
|
const [form, setForm] = useState({ providerName: '', senderId: '', dltEntityId: '' });
|
||||||
|
const [loadingProviders, setLoadingProviders] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchProviders() {
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get(`/api/businesses/${businessId}/providers`);
|
||||||
|
setProviders(res.data || {});
|
||||||
|
setForm({
|
||||||
|
providerName: res.data?.providerName || '',
|
||||||
|
senderId: res.data?.senderId || '',
|
||||||
|
dltEntityId: res.data?.dltEntityId || ''
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
setProviders({});
|
||||||
|
} finally {
|
||||||
|
setLoadingProviders(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchProviders();
|
||||||
|
}, [businessId]);
|
||||||
|
|
||||||
|
async function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!templateId.trim() || !toNumber.trim()) return;
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/templates/${template.eventSlug}/publish`, {
|
||||||
|
templateId: templateId.trim(),
|
||||||
|
toNumber: toNumber.trim(),
|
||||||
|
providerName: form.providerName,
|
||||||
|
senderId: form.senderId.toUpperCase(),
|
||||||
|
dltEntityId: form.dltEntityId
|
||||||
|
});
|
||||||
|
onSuccess(template.eventSlug, templateId.trim());
|
||||||
|
} catch (err) {
|
||||||
|
if (err.response?.data?.missingFields) {
|
||||||
|
setError(`Missing provider fields: ${err.response.data.missingFields.join(', ')}`);
|
||||||
|
} else {
|
||||||
|
setError(err.response?.data?.error || 'Failed to publish template');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const missingName = !providers?.providerName;
|
||||||
|
const missingSender = !providers?.senderId;
|
||||||
|
const missingDlt = !providers?.dltEntityId;
|
||||||
|
const hasMissingProviders = missingName || missingSender || missingDlt;
|
||||||
|
|
||||||
|
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="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">
|
||||||
|
<span className="text-xl">✅</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-text-primary text-center mb-1">Publish Template</h3>
|
||||||
|
<p className="text-sm text-text-muted text-center mb-1">
|
||||||
|
Provide your DLT details and a test number to publish:
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-semibold text-text-primary text-center mb-6 capitalize">
|
||||||
|
{template.eventLabel || template.eventSlug.replace(/_/g, ' ')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 px-4 py-2.5 rounded-md text-error-text bg-delayed-bg border border-delayed-border text-sm font-medium">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loadingProviders ? (
|
||||||
|
<div className="flex justify-center p-4">
|
||||||
|
<span className="w-6 h-6 border-2 border-spinner-track border-t-primary-blue rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-text-primary mb-1.5">DLT Template ID</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={templateId}
|
||||||
|
onChange={e => setTemplateId(e.target.value)}
|
||||||
|
placeholder="e.g. 1234567890987654321"
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-page-bg border border-border-main font-mono text-text-primary placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue text-sm"
|
||||||
|
autoFocus
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-text-primary mb-1.5">Destination Phone Number</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={toNumber}
|
||||||
|
onChange={e => setToNumber(e.target.value)}
|
||||||
|
placeholder="e.g. 919876543210"
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-page-bg border border-border-main font-mono text-text-primary placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-text-muted mt-1">Number to send the initial request on publish</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{hasMissingProviders && (
|
||||||
|
<div className="pt-2 pb-2">
|
||||||
|
<p className="text-xs text-error-text font-bold mb-3">You MUST provide missing provider details before publishing.</p>
|
||||||
|
<div className="space-y-3 p-4 bg-delayed-bg border border-delayed-border rounded-lg">
|
||||||
|
{missingName && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-semibold text-text-primary mb-1">Provider Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.providerName}
|
||||||
|
onChange={e => setForm({ ...form, providerName: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 rounded border border-border-main bg-surface-white text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{missingSender && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-semibold text-text-primary mb-1">Sender ID (6 Chars)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.senderId}
|
||||||
|
onChange={e => setForm({ ...form, senderId: e.target.value.toUpperCase() })}
|
||||||
|
maxLength={6}
|
||||||
|
className="w-full px-3 py-2 rounded border border-border-main bg-surface-white text-sm font-mono uppercase"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{missingDlt && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-semibold text-text-primary mb-1">DLT Entity ID</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.dltEntityId}
|
||||||
|
onChange={e => setForm({ ...form, dltEntityId: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 rounded border border-border-main bg-surface-white text-sm font-mono"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={saving}
|
||||||
|
className="flex-1 py-2.5 rounded-lg border border-border-main text-text-primary hover:bg-page-bg text-sm font-medium transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving || !templateId.trim() || !toNumber.trim() || (hasMissingProviders && (!form.providerName || !form.senderId || !form.dltEntityId))}
|
||||||
|
className="flex-1 py-2.5 rounded-lg bg-primary-blue hover:bg-primary-dark text-white text-sm font-semibold transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{saving ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Publishing…</> : 'Publish'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
const BrandContext = createContext(null);
|
||||||
|
|
||||||
|
export function BrandProvider({ children }) {
|
||||||
|
const [brand, setBrand] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetchBrand = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get('/api/brand');
|
||||||
|
setBrand(res.data);
|
||||||
|
} catch {
|
||||||
|
setBrand(null);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => { fetchBrand(); }, [fetchBrand]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BrandContext.Provider value={{ brand, loading, refetch: fetchBrand }}>
|
||||||
|
{children}
|
||||||
|
</BrandContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useBrand() {
|
||||||
|
return useContext(BrandContext);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
const BusinessContext = createContext(null);
|
||||||
|
|
||||||
|
const SESSION_KEY = 'sms_active_business';
|
||||||
|
|
||||||
|
export function BusinessProvider({ children }) {
|
||||||
|
const [activeBusiness, setActiveBusinessState] = useState(null);
|
||||||
|
const [hasGlobalSms, setHasGlobalSms] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// On mount: rehydrate from sessionStorage and refresh from API
|
||||||
|
useEffect(() => {
|
||||||
|
async function rehydrate() {
|
||||||
|
const stored = sessionStorage.getItem(SESSION_KEY);
|
||||||
|
if (!stored) { setLoading(false); return; }
|
||||||
|
try {
|
||||||
|
const { businessId } = JSON.parse(stored);
|
||||||
|
const [bizRes, smsRes] = await Promise.all([
|
||||||
|
apiClient.get(`/api/businesses/${businessId}`),
|
||||||
|
apiClient.get(`/api/businesses/${businessId}/global-sms/active`).catch(() => ({ data: {} }))
|
||||||
|
]);
|
||||||
|
setActiveBusinessState(bizRes.data);
|
||||||
|
setHasGlobalSms(!!smsRes.data?.activeProfile);
|
||||||
|
sessionStorage.setItem(SESSION_KEY, JSON.stringify({ businessId }));
|
||||||
|
} catch {
|
||||||
|
// Business no longer exists — clear stale session
|
||||||
|
sessionStorage.removeItem(SESSION_KEY);
|
||||||
|
setActiveBusinessState(null);
|
||||||
|
setHasGlobalSms(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rehydrate();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const setActiveBusiness = useCallback(async (business) => {
|
||||||
|
setActiveBusinessState(business);
|
||||||
|
sessionStorage.setItem(SESSION_KEY, JSON.stringify({ businessId: business.businessId }));
|
||||||
|
try {
|
||||||
|
const smsRes = await apiClient.get(`/api/businesses/${business.businessId}/global-sms/active`);
|
||||||
|
setHasGlobalSms(!!smsRes.data?.activeProfile);
|
||||||
|
} catch {
|
||||||
|
setHasGlobalSms(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const clearBusiness = useCallback(() => {
|
||||||
|
setActiveBusinessState(null);
|
||||||
|
setHasGlobalSms(false);
|
||||||
|
sessionStorage.removeItem(SESSION_KEY);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const activeBusinessId = activeBusiness?.businessId || null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BusinessContext.Provider value={{
|
||||||
|
activeBusiness, activeBusinessId, setActiveBusiness, clearBusiness, loading, hasGlobalSms, setHasGlobalSms
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</BusinessContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useBusiness() {
|
||||||
|
return useContext(BusinessContext);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-primary-blue: #4F5BD5;
|
||||||
|
--color-primary-dark: #2F3DB9;
|
||||||
|
--color-link-blue: #5B72D7;
|
||||||
|
--color-page-bg: #F5F6F8;
|
||||||
|
--color-surface-white: #FFFFFF;
|
||||||
|
--color-table-header: #F4F5F7;
|
||||||
|
--color-pagination-bg: #F8F9FB;
|
||||||
|
--color-refresh-hover: #F4F6FF;
|
||||||
|
--color-refresh-active: #E9EDFF;
|
||||||
|
--color-row-hover: #EEF0F8;
|
||||||
|
--color-text-primary: #3F434C;
|
||||||
|
--color-text-muted: #8B9098;
|
||||||
|
--color-header-text: #4B4F57;
|
||||||
|
--color-channel-name: #61656D;
|
||||||
|
--color-border-main: #E2E5EA;
|
||||||
|
--color-border-soft: #ECEFF3;
|
||||||
|
--color-item-border: #ECEEF2;
|
||||||
|
--color-badge-bg: #F0FAEF;
|
||||||
|
--color-badge-text: #5FA05A;
|
||||||
|
--color-badge-border: #9FCF9B;
|
||||||
|
--color-delayed-bg: #FFF1F0;
|
||||||
|
--color-delayed-text: #D94F4F;
|
||||||
|
--color-delayed-border: #F5A5A5;
|
||||||
|
--color-tags-bg: #FFF8F3;
|
||||||
|
--color-tags-text: #E58D4F;
|
||||||
|
--color-tags-border: #F2B17F;
|
||||||
|
--color-error-text: #C62828;
|
||||||
|
--color-sla-green: #4CAF50;
|
||||||
|
--color-sla-grey: #BDBDBD;
|
||||||
|
--color-spinner-track: #D8DEFE;
|
||||||
|
--color-placeholder-bg: #E0E0E0;
|
||||||
|
--color-empty-bg: #FAFAFA;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--sidebar-width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: var(--color-page-bg, #f9fafb);
|
||||||
|
color: var(--color-text-primary, #111827);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-border-soft, #f3f4f6);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--color-border-main, #d1d5db);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,210 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useBrand } from '../context/BrandContext';
|
||||||
|
import RegisterBusinessModal from '../components/RegisterBusinessModal';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
const NAV_CARDS = [
|
||||||
|
{ to: '/events', label: 'Events', icon: '⚡', desc: 'Manage order events and generate templates' },
|
||||||
|
{ to: '/templates', label: 'Templates', icon: '📄', desc: 'Review and configure approved templates' },
|
||||||
|
{ to: '/providers', label: 'Providers', icon: '🏢', desc: 'Save your SMS provider DLT details' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function DeleteConfirmModal({ brandName, onCancel, onConfirm, deleting }) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-8 w-full max-w-md shadow-xl">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-xl">🗑</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 text-center mb-2">Delete Brand?</h3>
|
||||||
|
<p className="text-sm text-gray-500 text-center mb-6">
|
||||||
|
This will permanently delete <span className="text-gray-900 font-medium">{brandName}</span> and all associated events, templates, and images. This cannot be undone.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={deleting}
|
||||||
|
className="flex-1 py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onConfirm}
|
||||||
|
disabled={deleting}
|
||||||
|
className="flex-1 py-2.5 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{deleting ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Deleting…</> : 'Yes, Delete'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Brand() {
|
||||||
|
const { brand, loading, refetch } = useBrand();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
const [deleteError, setDeleteError] = useState('');
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
setDeleting(true);
|
||||||
|
setDeleteError('');
|
||||||
|
try {
|
||||||
|
await apiClient.delete('/api/brand');
|
||||||
|
setShowDeleteConfirm(false);
|
||||||
|
await refetch();
|
||||||
|
} catch (err) {
|
||||||
|
setDeleteError(err.response?.data?.error || 'Failed to delete brand');
|
||||||
|
setDeleting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// — WELCOME SCREEN —
|
||||||
|
if (!brand) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="text-center max-w-lg px-8">
|
||||||
|
<div className="w-16 h-16 rounded-2xl bg-indigo-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-indigo-600/20">
|
||||||
|
S
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-3 tracking-tight">SMS Template Extension</h1>
|
||||||
|
<p className="text-gray-500 text-base mb-8 leading-relaxed">
|
||||||
|
Generate TRAI-compliant SMS templates for your Fynd store. We'll scrape your website and use AI to extract your brand context automatically.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
className="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium shadow-sm transition-all focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
|
||||||
|
>
|
||||||
|
Register Your Business
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{showModal && <RegisterBusinessModal onClose={() => { setShowModal(false); refetch(); }} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// — BRAND DETAIL PAGE —
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-8">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
|
||||||
|
{/* Brand header card */}
|
||||||
|
<div className="rounded-xl bg-white border border-gray-200 shadow-sm p-8 mb-6">
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 tracking-tight truncate">{brand.brandName}</h1>
|
||||||
|
<p className="text-gray-500 mt-1 text-sm font-medium">{brand.domain}</p>
|
||||||
|
<div className="flex items-center gap-2 mt-4 flex-wrap">
|
||||||
|
<span className="text-xs px-2.5 py-1 rounded-md bg-indigo-50 border border-indigo-100 text-indigo-700 font-medium capitalize">
|
||||||
|
{brand.tone}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400 font-medium tracking-wide">
|
||||||
|
Registered {new Date(brand.scrapedAt).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteConfirm(true)}
|
||||||
|
className="shrink-0 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 border border-red-200 px-3 py-2 rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
Delete Brand
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Taglines */}
|
||||||
|
{brand.taglines?.length > 0 && (
|
||||||
|
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||||
|
<p className="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-3">Taglines</p>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
{brand.taglines.map((t, i) => (
|
||||||
|
<p key={i} className="text-gray-700 text-sm">"{t}"</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Colors */}
|
||||||
|
{brand.colors?.length > 0 && (
|
||||||
|
<div className="mt-6">
|
||||||
|
<p className="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-3">Brand Colors</p>
|
||||||
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
{brand.colors.map((c, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 rounded-md shadow-sm border border-gray-200"
|
||||||
|
style={{ backgroundColor: c }}
|
||||||
|
title={c}
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-gray-500 font-mono">{c}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand images */}
|
||||||
|
{brand.relevantImagePaths?.length > 0 && (
|
||||||
|
<div className="rounded-xl bg-white border border-gray-200 shadow-sm p-6 mb-6">
|
||||||
|
<p className="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-4">Brand Images</p>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||||
|
{brand.relevantImagePaths.map((url, i) => (
|
||||||
|
<div key={i} className="group relative rounded-lg overflow-hidden border border-gray-200 aspect-video bg-gray-50">
|
||||||
|
<img
|
||||||
|
src={url}
|
||||||
|
alt={`brand image ${i + 1}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={e => { e.target.style.opacity = '0.3'; }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gray-900/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
|
||||||
|
<p className="text-xs text-white break-all leading-tight line-clamp-3 font-medium">{url}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Navigation cards */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
{NAV_CARDS.map(card => (
|
||||||
|
<Link
|
||||||
|
key={card.to}
|
||||||
|
to={card.to}
|
||||||
|
className="rounded-xl bg-white border border-gray-200 shadow-sm p-5 hover:border-indigo-300 hover:ring-1 hover:ring-indigo-300 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="text-2xl mb-3 grayscale group-hover:grayscale-0 opacity-80 group-hover:opacity-100 transition-all">{card.icon}</div>
|
||||||
|
<p className="font-semibold text-gray-900 mb-1">{card.label}</p>
|
||||||
|
<p className="text-sm text-gray-500 leading-relaxed">{card.desc}</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{deleteError && (
|
||||||
|
<p className="mt-4 text-sm font-medium text-red-600 text-center">{deleteError}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDeleteConfirm && (
|
||||||
|
<DeleteConfirmModal
|
||||||
|
brandName={brand.brandName}
|
||||||
|
onCancel={() => setShowDeleteConfirm(false)}
|
||||||
|
onConfirm={handleDelete}
|
||||||
|
deleting={deleting}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
import { useBusiness } from '../context/BusinessContext';
|
||||||
|
import RegisterBusinessModal from '../components/RegisterBusinessModal';
|
||||||
|
|
||||||
|
function DeleteConfirmModal({ businessName, onCancel, onConfirm, deleting }) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
|
||||||
|
<div className="bg-white border border-gray-200 rounded-xl p-8 w-full max-w-md shadow-xl">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-xl">🗑</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 text-center mb-2">Delete Business?</h3>
|
||||||
|
<p className="text-sm text-gray-500 text-center mb-6">
|
||||||
|
This will permanently delete <span className="text-gray-900 font-medium">{businessName}</span> and all its events, templates, and images. This cannot be undone.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={deleting}
|
||||||
|
className="flex-1 py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onConfirm}
|
||||||
|
disabled={deleting}
|
||||||
|
className="flex-1 py-2.5 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{deleting ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Deleting…</> : 'Yes, Delete'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Businesses() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { setActiveBusiness } = useBusiness();
|
||||||
|
const [businesses, setBusinesses] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get('/api/businesses');
|
||||||
|
setBusinesses(res.data.businesses || []);
|
||||||
|
} catch {
|
||||||
|
setError('Failed to load businesses');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { load(); }, []);
|
||||||
|
|
||||||
|
function handleSelect(biz) {
|
||||||
|
setActiveBusiness(biz);
|
||||||
|
navigate(`/${biz.businessId}/global-sms`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
if (!deleteTarget) return;
|
||||||
|
setDeleting(true);
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/api/businesses/${deleteTarget.businessId}`);
|
||||||
|
setDeleteTarget(null);
|
||||||
|
await load();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to delete business');
|
||||||
|
setDeleting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── NO BUSINESSES YET ──────────────────────────────────────────────────────
|
||||||
|
if (businesses.length === 0 && !showModal) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="text-center max-w-lg px-8">
|
||||||
|
<div className="w-16 h-16 rounded-2xl bg-indigo-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-indigo-600/20">
|
||||||
|
S
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-3 tracking-tight">SMS Template Extension</h1>
|
||||||
|
<p className="text-gray-500 text-base mb-8 leading-relaxed">
|
||||||
|
Generate TRAI-compliant SMS templates for your Fynd store. Add your first business to get started.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
className="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium shadow-sm transition-all focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
|
||||||
|
>
|
||||||
|
Add Your First Business
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{showModal && <RegisterBusinessModal onClose={() => { setShowModal(false); load(); }} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── BUSINESS LIST ──────────────────────────────────────────────────────────
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 p-8">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Your Businesses</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Select a business to manage its SMS templates.</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
className="px-4 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-sm transition"
|
||||||
|
>
|
||||||
|
+ Add Business
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 font-medium text-sm flex items-center justify-between">
|
||||||
|
{error}
|
||||||
|
<button onClick={() => setError('')} className="text-red-500 hover:text-red-700 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{businesses.map(biz => (
|
||||||
|
<div
|
||||||
|
key={biz.businessId}
|
||||||
|
className="group rounded-xl bg-white border border-gray-200 shadow-sm hover:border-indigo-300 hover:ring-1 hover:ring-indigo-300 transition-all overflow-hidden"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="w-full text-left p-6"
|
||||||
|
onClick={() => handleSelect(biz)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-3">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center text-base font-bold text-white shrink-0 shadow-sm">
|
||||||
|
{biz.brandName?.[0]?.toUpperCase() || 'B'}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="font-bold text-gray-900 truncate">{biz.brandName}</p>
|
||||||
|
<p className="text-xs text-gray-500 font-medium truncate">{biz.domain}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-400 font-medium">
|
||||||
|
Added {new Date(biz.createdAt).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
<div className="px-6 py-3 bg-gray-50 border-t border-gray-100 flex justify-between items-center">
|
||||||
|
<span className="text-xs text-indigo-600 font-semibold group-hover:underline">Click to manage →</span>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); setDeleteTarget(biz); }}
|
||||||
|
className="text-xs text-red-500 hover:text-red-700 font-medium transition"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showModal && <RegisterBusinessModal onClose={() => { setShowModal(false); load(); }} />}
|
||||||
|
{deleteTarget && (
|
||||||
|
<DeleteConfirmModal
|
||||||
|
businessName={deleteTarget.brandName}
|
||||||
|
onCancel={() => setDeleteTarget(null)}
|
||||||
|
onConfirm={handleDelete}
|
||||||
|
deleting={deleting}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function Events() {
|
||||||
|
const { businessId } = useParams();
|
||||||
|
const [events, setEvents] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [newLabel, setNewLabel] = useState('');
|
||||||
|
const [addingEvent, setAddingEvent] = useState(false);
|
||||||
|
const [showAddForm, setShowAddForm] = useState(false);
|
||||||
|
const [genState, setGenState] = useState({});
|
||||||
|
const [variants, setVariants] = useState({});
|
||||||
|
const [selectingSlug, setSelectingSlug] = useState(null);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [readyToGenerate, setReadyToGenerate] = useState(false);
|
||||||
|
|
||||||
|
async function loadEvents() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [eventsRes, providersRes, globalSmsRes] = await Promise.all([
|
||||||
|
apiClient.get(`/api/businesses/${businessId}/events`),
|
||||||
|
apiClient.get(`/api/businesses/${businessId}/providers`).catch(() => ({ data: {} })),
|
||||||
|
apiClient.get(`/api/businesses/${businessId}/global-sms`).catch(() => ({ data: {} })),
|
||||||
|
]);
|
||||||
|
setEvents(eventsRes.data.events || []);
|
||||||
|
const hasProviders = !!providersRes.data?.senderId;
|
||||||
|
const hasGlobalSms = !!globalSmsRes.data?.rawCurl;
|
||||||
|
setReadyToGenerate(hasProviders && hasGlobalSms);
|
||||||
|
} catch {
|
||||||
|
setError('Failed to load events');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { loadEvents(); }, [businessId]);
|
||||||
|
|
||||||
|
async function handleAddEvent(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!newLabel.trim()) return;
|
||||||
|
setAddingEvent(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/events`, { label: newLabel.trim() });
|
||||||
|
setNewLabel('');
|
||||||
|
setShowAddForm(false);
|
||||||
|
await loadEvents();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to add event');
|
||||||
|
} finally {
|
||||||
|
setAddingEvent(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(slug) {
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/api/businesses/${businessId}/events/${slug}`);
|
||||||
|
await loadEvents();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to delete event');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleGenerate(slug) {
|
||||||
|
if (!readyToGenerate) {
|
||||||
|
setError('Configure Provider and Global SMS cURL before generating templates.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setGenState(s => ({ ...s, [slug]: 'loading' }));
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const res = await apiClient.post(`/api/businesses/${businessId}/events/${slug}/generate`);
|
||||||
|
setVariants(v => ({ ...v, [slug]: res.data.variants }));
|
||||||
|
setGenState(s => ({ ...s, [slug]: 'done' }));
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Generation failed');
|
||||||
|
setGenState(s => ({ ...s, [slug]: 'error' }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSelect(slug, variant) {
|
||||||
|
setSelectingSlug(slug);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/templates/${slug}/select`, { selectedVariant: variant });
|
||||||
|
// Clear variants display after selection
|
||||||
|
setVariants(v => ({ ...v, [slug]: [] }));
|
||||||
|
setGenState(s => ({ ...s, [slug]: 'selected' }));
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to select template');
|
||||||
|
} finally {
|
||||||
|
setSelectingSlug(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between pb-5 mb-6 border-b border-gray-200">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Events</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-1 font-medium">Generate SMS templates for each order event.</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddForm(v => !v)}
|
||||||
|
className="px-4 py-2 rounded-lg bg-white border border-gray-300 shadow-sm text-sm text-gray-700 font-semibold hover:bg-gray-50 transition"
|
||||||
|
>
|
||||||
|
{showAddForm ? 'Cancel' : '+ Add Event'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Generation readiness banner */}
|
||||||
|
{!readyToGenerate && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-800 text-sm font-medium flex items-center gap-2">
|
||||||
|
<span>⚠️</span>
|
||||||
|
<span>Set up <strong>Provider</strong> and <strong>Global SMS cURL</strong> before generating templates.</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 font-medium text-sm flex items-center justify-between">
|
||||||
|
{error}
|
||||||
|
<button onClick={() => setError('')} className="text-red-500 hover:text-red-700 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add Event form */}
|
||||||
|
{showAddForm && (
|
||||||
|
<form onSubmit={handleAddEvent} className="mb-8 flex gap-3 p-5 rounded-xl bg-gray-50 border border-gray-200 shadow-sm">
|
||||||
|
<input
|
||||||
|
value={newLabel}
|
||||||
|
onChange={e => setNewLabel(e.target.value)}
|
||||||
|
placeholder="Event name (e.g. Return Initiated)"
|
||||||
|
className="flex-1 px-4 py-2.5 rounded-lg bg-white border border-gray-300 text-gray-900 placeholder-gray-400 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-600 text-sm shadow-sm"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={addingEvent || !newLabel.trim()}
|
||||||
|
className="px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{addingEvent ? 'Adding…' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Events list */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{events.map(event => {
|
||||||
|
const state = genState[event.slug] || 'idle';
|
||||||
|
const eventVariants = variants[event.slug] || [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={event.slug} className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-hidden">
|
||||||
|
{/* Event header */}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between px-6 py-5 gap-4">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
{event.isDefault ? (
|
||||||
|
<div className="mt-0.5 w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200 shrink-0" title="Default event">
|
||||||
|
<svg className="w-3.5 h-3.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(event.slug)}
|
||||||
|
className="mt-0.5 w-6 h-6 rounded-full bg-red-50 hover:bg-red-100 flex items-center justify-center border border-red-100 text-red-500 transition shrink-0"
|
||||||
|
title="Delete event"
|
||||||
|
>
|
||||||
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-base font-bold text-gray-900 tracking-tight">{event.label}</h3>
|
||||||
|
<p className="text-xs text-gray-500 font-mono mt-0.5">{event.slug}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{state === 'selected' && (
|
||||||
|
<span className="text-xs font-semibold px-2.5 py-1 rounded-md bg-green-50 border border-green-200 text-green-700">
|
||||||
|
✓ Template Selected
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerate(event.slug)}
|
||||||
|
disabled={state === 'loading' || !readyToGenerate}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition shadow-sm flex items-center gap-2 disabled:opacity-50 ${
|
||||||
|
state === 'done' || state === 'selected'
|
||||||
|
? 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||||
|
: 'bg-indigo-50 border border-indigo-200 text-indigo-700 hover:bg-indigo-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{state === 'loading' ? (
|
||||||
|
<><span className="w-4 h-4 border-2 border-indigo-300 border-t-indigo-600 rounded-full animate-spin" /> Generating…</>
|
||||||
|
) : state === 'done' || state === 'selected' ? (
|
||||||
|
<>↺ Regenerate</>
|
||||||
|
) : (
|
||||||
|
<>⚡ Generate Template</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Generated variants */}
|
||||||
|
{eventVariants.length > 0 && (
|
||||||
|
<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>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{eventVariants.map((v, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm hover:border-gray-300 transition"
|
||||||
|
>
|
||||||
|
<p className="text-sm text-gray-800 font-mono leading-relaxed">{v}</p>
|
||||||
|
<div className="flex items-center justify-between mt-4">
|
||||||
|
<span className={`text-xs font-semibold px-2.5 py-1 rounded-md ${v.length > 160 ? 'bg-red-50 text-red-700' : 'bg-gray-100 text-gray-600'}`}>
|
||||||
|
{v.length} / 160
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => handleSelect(event.slug, v)}
|
||||||
|
disabled={selectingSlug === event.slug}
|
||||||
|
className="text-xs px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{selectingSlug === event.slug ? 'Selecting…' : 'Use this template'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,275 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
import { useBusiness } from '../context/BusinessContext';
|
||||||
|
|
||||||
|
export default function GlobalSms() {
|
||||||
|
const { businessId } = useParams();
|
||||||
|
const { setHasGlobalSms } = useBusiness();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [profiles, setProfiles] = useState([]);
|
||||||
|
const [activeProfileId, setActiveProfileId] = useState(null);
|
||||||
|
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
|
||||||
|
// Form state for Create / Edit
|
||||||
|
const [editingId, setEditingId] = useState(null);
|
||||||
|
const [formName, setFormName] = useState('');
|
||||||
|
const [formCurl, setFormCurl] = useState('');
|
||||||
|
const [formSetActive, setFormSetActive] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadProfiles();
|
||||||
|
}, [businessId]);
|
||||||
|
|
||||||
|
async function loadProfiles() {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await apiClient.get(`/api/businesses/${businessId}/global-sms/profiles`);
|
||||||
|
setProfiles(res.data.profiles || []);
|
||||||
|
setActiveProfileId(res.data.activeProfileId);
|
||||||
|
if (res.data.activeProfileId) {
|
||||||
|
setHasGlobalSms(true);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to load cURL profiles');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAddClick() {
|
||||||
|
setEditingId(null);
|
||||||
|
setFormName('');
|
||||||
|
setFormCurl('');
|
||||||
|
setFormSetActive(profiles.length === 0);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEditClick(profile) {
|
||||||
|
setEditingId(profile.id);
|
||||||
|
setFormName(profile.name);
|
||||||
|
setFormCurl(profile.rawCurl);
|
||||||
|
setFormSetActive(false); // only matters for create
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!formName.trim() || !formCurl.trim()) return;
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (editingId) {
|
||||||
|
await apiClient.patch(`/api/businesses/${businessId}/global-sms/profiles/${editingId}`, {
|
||||||
|
name: formName,
|
||||||
|
rawCurl: formCurl,
|
||||||
|
});
|
||||||
|
setSuccess('Profile updated successfully.');
|
||||||
|
} else {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/global-sms/profiles`, {
|
||||||
|
name: formName,
|
||||||
|
rawCurl: formCurl,
|
||||||
|
setActive: formSetActive,
|
||||||
|
});
|
||||||
|
setSuccess('Profile created successfully.');
|
||||||
|
}
|
||||||
|
await loadProfiles();
|
||||||
|
setFormName('');
|
||||||
|
setFormCurl('');
|
||||||
|
setEditingId(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to save cURL profile');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(id) {
|
||||||
|
if (!window.confirm('Delete this cURL profile?')) return;
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/api/businesses/${businessId}/global-sms/profiles/${id}`);
|
||||||
|
await loadProfiles();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to delete profile');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleActivate(id) {
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/global-sms/profiles/${id}/activate`);
|
||||||
|
await loadProfiles();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to activate profile');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-64 items-center justify-center">
|
||||||
|
<span className="w-8 h-8 border-4 border-spinner-track border-t-primary-blue rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto space-y-8 pb-12">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-text-primary mb-2">cURL Profiles</h2>
|
||||||
|
<p className="text-sm text-text-muted">
|
||||||
|
Manage the cURL commands used to generate and test SMS templates. The active profile will be used across the application.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="px-4 py-3 rounded-md bg-delayed-bg border border-delayed-border text-error-text text-sm font-medium flex justify-between items-center">
|
||||||
|
{error}
|
||||||
|
<button onClick={() => setError('')} className="text-error-text hover:text-red-900 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<div className="px-4 py-3 rounded-md bg-badge-bg border border-badge-border text-badge-text text-sm font-medium flex justify-between items-center">
|
||||||
|
{success}
|
||||||
|
<button onClick={() => setSuccess('')} className="text-badge-text hover:opacity-75 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Profiles List */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{profiles.length > 0 ? (
|
||||||
|
profiles.map(p => {
|
||||||
|
const isActive = p.id === activeProfileId;
|
||||||
|
return (
|
||||||
|
<div key={p.id} className={`p-5 rounded-xl border ${isActive ? 'border-primary-blue bg-[#f0f2fb]' : 'border-border-main bg-surface-white'} shadow-sm flex flex-col md:flex-row gap-4 items-start md:items-center justify-between transition-colors`}>
|
||||||
|
<div className="flex-1 overflow-hidden">
|
||||||
|
<div className="flex items-center gap-3 mb-1">
|
||||||
|
<h3 className="font-bold text-text-primary text-base truncate">{p.name}</h3>
|
||||||
|
{isActive && (
|
||||||
|
<span className="px-2 py-0.5 rounded text-[11px] font-bold tracking-wider uppercase bg-badge-bg text-badge-text border border-badge-border shrink-0">
|
||||||
|
Active Profile
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{p.isDefault && !isActive && (
|
||||||
|
<span className="px-2 py-0.5 rounded text-[11px] font-bold tracking-wider uppercase bg-tags-bg text-tags-text border border-tags-border shrink-0">
|
||||||
|
Default
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-text-muted font-medium mb-2">Updated: {new Date(p.updatedAt).toLocaleString()}</p>
|
||||||
|
<p className="text-sm font-mono text-text-muted bg-page-bg p-2 rounded border border-border-soft overflow-hidden whitespace-nowrap text-ellipsis max-w-xl">
|
||||||
|
{p.rawCurl}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
|
{!isActive && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleActivate(p.id)}
|
||||||
|
className="px-4 py-2 bg-primary-blue hover:bg-primary-dark text-white text-sm font-semibold rounded-lg shadow-sm transition"
|
||||||
|
>
|
||||||
|
Use this cURL
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => handleEditClick(p)}
|
||||||
|
className="px-3 py-2 border border-border-main text-text-muted hover:text-primary-blue hover:border-primary-blue rounded-lg text-sm font-medium transition"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
{profiles.length > 1 && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(p.id)}
|
||||||
|
className="px-3 py-2 border border-border-main text-text-muted hover:text-error-text hover:border-error-text hover:bg-delayed-bg rounded-lg text-sm font-medium transition"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 bg-surface-white border border-border-dashed rounded-xl">
|
||||||
|
<p className="text-sm font-medium text-text-muted mb-4">No cURL profiles configured yet.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline Form (Create / Edit) */}
|
||||||
|
<div className="bg-surface-white border border-border-main rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<div className="px-6 py-4 border-b border-border-main bg-[#fafafa] flex items-center justify-between">
|
||||||
|
<h3 className="font-bold text-text-primary text-md">
|
||||||
|
{editingId ? 'Edit Profile' : 'Add New Profile'}
|
||||||
|
</h3>
|
||||||
|
{editingId && (
|
||||||
|
<button onClick={handleAddClick} className="text-sm font-semibold text-primary-blue hover:underline">
|
||||||
|
Switch to Add New
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-text-primary mb-1.5">Profile Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formName}
|
||||||
|
onChange={e => setFormName(e.target.value)}
|
||||||
|
placeholder="e.g. Production SMS, Staging Twilio"
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-page-bg border border-border-main text-text-primary placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue transition text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-text-primary mb-1.5">Raw cURL Command</label>
|
||||||
|
<textarea
|
||||||
|
value={formCurl}
|
||||||
|
onChange={e => setFormCurl(e.target.value)}
|
||||||
|
placeholder="curl --request POST --url ..."
|
||||||
|
className="w-full h-40 px-4 py-3 rounded-lg font-mono text-sm bg-page-bg border border-border-main text-text-primary placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue transition resize-none leading-relaxed"
|
||||||
|
required
|
||||||
|
spellCheck="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{!editingId && profiles.length > 0 && (
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="w-4 h-4 text-primary-blue rounded border-border-main focus:ring-primary-blue"
|
||||||
|
checked={formSetActive}
|
||||||
|
onChange={e => setFormSetActive(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-semibold text-text-primary">Set as active profile immediately</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="px-6 py-2.5 rounded-lg bg-primary-blue hover:bg-primary-dark text-white font-semibold text-sm shadow-sm transition disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{saving ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Saving…</> : (editingId ? 'Update Profile' : 'Save Profile')}
|
||||||
|
</button>
|
||||||
|
{editingId && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleAddClick}
|
||||||
|
disabled={saving}
|
||||||
|
className="px-5 py-2.5 rounded-lg border border-border-main text-text-primary hover:bg-page-bg font-medium text-sm transition"
|
||||||
|
>
|
||||||
|
Cancel Edit
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
|
||||||
|
export default function Providers() {
|
||||||
|
const { businessId } = useParams();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
providerName: 'MSG91',
|
||||||
|
senderId: '',
|
||||||
|
dltEntityId: '',
|
||||||
|
authKey: '',
|
||||||
|
});
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get(`/api/businesses/${businessId}/providers`);
|
||||||
|
if (res.data && res.data.providerName) {
|
||||||
|
setForm({
|
||||||
|
providerName: res.data.providerName || 'MSG91',
|
||||||
|
senderId: res.data.senderId || '',
|
||||||
|
dltEntityId: res.data.dltEntityId || '',
|
||||||
|
authKey: res.data.authKey || '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// no providers yet — keep defaults
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
load();
|
||||||
|
}, [businessId]);
|
||||||
|
|
||||||
|
function handleChange(field, value) {
|
||||||
|
setForm(prev => ({ ...prev, [field]: value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
setError('');
|
||||||
|
setSuccess('');
|
||||||
|
if (form.senderId && !/^[A-Za-z]{6}$/.test(form.senderId)) {
|
||||||
|
setError('DLT Sender ID must be exactly 6 alphabet characters');
|
||||||
|
setSaving(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/api/businesses/${businessId}/providers`, form);
|
||||||
|
setSuccess('Provider configuration saved successfully.');
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.error || 'Failed to save configuration');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="pb-5 mb-6 border-b border-gray-200">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Provider Configuration</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-1 font-medium">Save your DLT-approved sender details so the extension can dispatch SMS via your vendor.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 font-medium text-sm flex items-center justify-between">
|
||||||
|
{error}
|
||||||
|
<button onClick={() => setError('')} className="text-red-500 hover:text-red-700 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-md bg-green-50 border border-green-200 text-green-700 font-medium text-sm flex items-center justify-between shadow-sm">
|
||||||
|
{success}
|
||||||
|
<button onClick={() => setSuccess('')} className="text-green-500 hover:text-green-700 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSave} className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
<div>
|
||||||
|
<label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.providerName ? 'text-error-text' : 'text-text-primary'}`}>
|
||||||
|
Provider Name {(!form.providerName) && <span className="text-error-text">*</span>}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.providerName}
|
||||||
|
onChange={e => handleChange('providerName', e.target.value)}
|
||||||
|
className={`w-full px-4 py-2.5 rounded-lg bg-surface-white border ${!form.providerName ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary placeholder-placeholder-bg font-medium focus:outline-none focus:ring-2 focus:border-transparent transition text-sm shadow-sm`}
|
||||||
|
placeholder="e.g. MSG91, Gupshup"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.senderId ? 'text-error-text' : 'text-text-primary'}`}>
|
||||||
|
DLT Sender ID {(!form.senderId) && <span className="text-error-text">*</span>}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.senderId}
|
||||||
|
onChange={e => handleChange('senderId', e.target.value.toUpperCase())}
|
||||||
|
maxLength={6}
|
||||||
|
className={`w-full px-4 py-2.5 rounded-lg bg-surface-white border ${!form.senderId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary font-mono tracking-widest placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:border-transparent transition text-sm shadow-sm uppercase`}
|
||||||
|
placeholder="6 CHARS"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-2 font-medium">Exactly 6 alphabetic characters (e.g. MOKOBA).</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.dltEntityId ? 'text-error-text' : 'text-text-primary'}`}>
|
||||||
|
DLT Entity ID {(!form.dltEntityId) && <span className="text-error-text">*</span>}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.dltEntityId}
|
||||||
|
onChange={e => handleChange('dltEntityId', e.target.value)}
|
||||||
|
className={`w-full px-4 py-2.5 rounded-lg bg-surface-white border ${!form.dltEntityId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary font-mono placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:border-transparent transition text-sm shadow-sm`}
|
||||||
|
placeholder="19-digit DLT PE ID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-text-primary mb-1.5 tracking-wide">API Auth Key <span className="text-text-muted font-normal text-xs">(Optional)</span></label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={form.authKey}
|
||||||
|
onChange={e => handleChange('authKey', e.target.value)}
|
||||||
|
className="w-full px-4 py-2.5 rounded-lg bg-surface-white border border-border-main text-text-primary font-mono placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent transition text-sm shadow-sm"
|
||||||
|
placeholder="Authorization key for your SMS provider"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-2 font-medium">Used as the Authorization header in your SMS requests.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="px-6 py-2.5 rounded-lg bg-primary-blue hover:bg-primary-dark text-white font-semibold text-sm shadow-sm transition disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{saving ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Saving…</> : 'Save Configuration'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import apiClient from '../api/client';
|
||||||
|
import WhitelistModal from '../components/WhitelistModal';
|
||||||
|
import TestSmsModal from '../components/TestSmsModal';
|
||||||
|
|
||||||
|
const STATUS_CONFIG = {
|
||||||
|
generated: { label: 'Generated', bg: 'bg-page-bg', text: 'text-text-muted', border: 'border-border-main' },
|
||||||
|
pending_whitelisting: { label: 'Pending Whitelisting', bg: 'bg-tags-bg', text: 'text-tags-text', border: 'border-tags-border' },
|
||||||
|
whitelisted: { label: 'Published', bg: 'bg-badge-bg', text: 'text-badge-text', border: 'border-badge-border' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Templates() {
|
||||||
|
const { businessId } = useParams();
|
||||||
|
const [templates, setTemplates] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [whitelistTarget, setWhitelistTarget] = useState(null);
|
||||||
|
const [testTarget, setTestTarget] = useState(null);
|
||||||
|
const [activeTab, setActiveTab] = useState('published'); // 'published' | 'pending'
|
||||||
|
|
||||||
|
async function loadTemplates() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await apiClient.get(`/api/businesses/${businessId}/templates`);
|
||||||
|
// Show all templates that have a selected template (status != generated or status exists)
|
||||||
|
const all = (res.data.templates || []).filter(t => t.selectedTemplate);
|
||||||
|
setTemplates(all);
|
||||||
|
} catch {
|
||||||
|
setError('Failed to load templates');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { loadTemplates(); }, [businessId]);
|
||||||
|
|
||||||
|
function handleWhitelistSuccess(slug, templateId) {
|
||||||
|
setTemplates(ts => ts.map(t =>
|
||||||
|
t.eventSlug === slug ? { ...t, status: 'whitelisted', templateId } : t
|
||||||
|
));
|
||||||
|
setWhitelistTarget(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="pb-5 mb-6 border-b border-gray-200">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Templates</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-1 font-medium">Track whitelisting status and test your SMS templates.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 px-4 py-3 rounded-md bg-delayed-bg border border-delayed-border text-error-text font-medium text-sm flex items-center justify-between">
|
||||||
|
{error}
|
||||||
|
<button onClick={() => setError('')} className="text-error-text hover:text-red-900 font-bold">×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex space-x-4 mb-6 border-b border-border-main">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('published')}
|
||||||
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||||
|
activeTab === 'published'
|
||||||
|
? 'border-primary-blue text-primary-dark'
|
||||||
|
: 'border-transparent text-text-muted hover:text-text-primary hover:border-border-main'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Published
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('pending')}
|
||||||
|
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||||
|
activeTab === 'pending'
|
||||||
|
? 'border-primary-blue text-primary-dark'
|
||||||
|
: 'border-transparent text-text-muted hover:text-text-primary hover:border-border-main'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Pending Whitelisting
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{templates.length === 0 ? (
|
||||||
|
<div className="text-center py-16 bg-surface-white border border-border-main rounded-xl shadow-sm">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-page-bg flex items-center justify-center mx-auto mb-4 border border-border-soft">
|
||||||
|
<svg className="w-8 h-8 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-text-primary">No Templates Yet</h3>
|
||||||
|
<p className="text-text-muted text-sm mt-2 font-medium">Generate and select templates in the Events section first.</p>
|
||||||
|
</div>
|
||||||
|
) : (() => {
|
||||||
|
const publishedTabs = templates.filter(t => t.status === 'whitelisted');
|
||||||
|
const pendingTabs = templates.filter(t => t.status === 'pending_whitelisting');
|
||||||
|
const visibleTemplates = activeTab === 'published' ? publishedTabs : pendingTabs;
|
||||||
|
|
||||||
|
if (visibleTemplates.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12 bg-surface-white border border-border-dashed rounded-xl">
|
||||||
|
<p className="text-text-muted text-sm font-medium">No templates in {activeTab === 'published' ? 'Published' : 'Pending'}.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{visibleTemplates.map(tmpl => {
|
||||||
|
const statusCfg = STATUS_CONFIG[tmpl.status] || STATUS_CONFIG.generated;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={tmpl.eventSlug} className="rounded-xl bg-white border border-gray-200 shadow-sm overflow-hidden">
|
||||||
|
{/* Card header */}
|
||||||
|
<div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-base font-bold text-gray-900 capitalize tracking-tight">
|
||||||
|
{tmpl.eventLabel || tmpl.eventSlug.replace(/_/g, ' ')}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-500 font-mono mt-0.5">{tmpl.eventSlug}</p>
|
||||||
|
</div>
|
||||||
|
<span className={`px-3 py-1 rounded-full text-xs font-bold border ${statusCfg.bg} ${statusCfg.text} ${statusCfg.border}`}>
|
||||||
|
{statusCfg.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
{/* Template text */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Selected Template</label>
|
||||||
|
<div className="p-4 rounded-lg bg-gray-50 border border-gray-200 font-mono text-sm text-gray-800 leading-relaxed break-words">
|
||||||
|
{tmpl.selectedTemplate}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Template ID (if whitelisted) */}
|
||||||
|
{tmpl.templateId && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">DLT Template ID</label>
|
||||||
|
<p className="font-mono text-sm text-indigo-700 bg-indigo-50 border border-indigo-100 px-3 py-2 rounded-lg inline-block">
|
||||||
|
{tmpl.templateId}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Variable map */}
|
||||||
|
{tmpl.variableMap && Object.keys(tmpl.variableMap).length > 0 && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Variable Mappings</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{Object.entries(tmpl.variableMap).map(([key, val]) => (
|
||||||
|
<div key={key} className="flex items-center gap-2 text-xs bg-gray-50 border border-gray-200 rounded-md px-3 py-1.5">
|
||||||
|
<span className="font-mono text-indigo-700 font-bold">{key}</span>
|
||||||
|
<span className="text-gray-400">→</span>
|
||||||
|
<span className="font-medium text-gray-700">{val}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-3 pt-2">
|
||||||
|
{tmpl.status === 'pending_whitelisting' && (
|
||||||
|
<button
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
Publish
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{tmpl.status === 'whitelisted' && (
|
||||||
|
<button
|
||||||
|
onClick={() => setTestTarget(tmpl)}
|
||||||
|
className="px-4 py-2 rounded-lg bg-primary-blue hover:bg-primary-dark text-white text-sm font-semibold transition shadow-sm flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||||
|
Test SMS
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{tmpl.status === 'pending_whitelisting' && (
|
||||||
|
<p className="text-xs text-text-muted font-medium">Submit to DLT portal, then enter your Template ID here.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
|
||||||
|
{whitelistTarget && (
|
||||||
|
<WhitelistModal
|
||||||
|
businessId={businessId}
|
||||||
|
template={whitelistTarget}
|
||||||
|
onClose={() => setWhitelistTarget(null)}
|
||||||
|
onSuccess={handleWhitelistSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{testTarget && (
|
||||||
|
<TestSmsModal
|
||||||
|
businessId={businessId}
|
||||||
|
template={testTarget}
|
||||||
|
onClose={() => setTestTarget(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
tailwindcss(),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:3001',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "SMS_Extension",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
FROM node:20-alpine
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm ci --omit=dev
|
||||||
|
COPY index.js ./
|
||||||
|
COPY config ./config
|
||||||
|
COPY routes ./routes
|
||||||
|
COPY services ./services
|
||||||
|
EXPOSE 3001
|
||||||
|
CMD ["node", "index.js"]
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
app: sms-extension-backend
|
||||||
|
region: asia-south1
|
||||||
|
entrypoint: "index.js"
|
||||||
|
|
||||||
|
build:
|
||||||
|
builtin: dockerfile
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
const DEFAULT_EVENTS = [
|
||||||
|
{ slug: 'placed', label: 'Placed', isDefault: true },
|
||||||
|
{ slug: 'confirmed', label: 'Confirmed', isDefault: true },
|
||||||
|
{ slug: 'dp_assigned', label: 'DP Assigned', isDefault: true },
|
||||||
|
{ slug: 'pack', label: 'Pack', isDefault: true },
|
||||||
|
{ slug: 'cancelled', label: 'Cancelled', isDefault: true },
|
||||||
|
{ slug: 'delivery_done', label: 'Delivery Done', isDefault: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
module.exports = DEFAULT_EVENTS;
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
require('dotenv').config();
|
||||||
|
const express = require('express');
|
||||||
|
const cors = require('cors');
|
||||||
|
|
||||||
|
const businessesRoutes = require('./routes/businesses');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const PORT = process.env.PORT || 3001;
|
||||||
|
|
||||||
|
app.use(cors());
|
||||||
|
app.use(express.json({ limit: '10mb' }));
|
||||||
|
|
||||||
|
// Health check
|
||||||
|
app.get('/api/health', (req, res) => res.json({ ok: true, timestamp: new Date().toISOString() }));
|
||||||
|
|
||||||
|
// Routes
|
||||||
|
app.use('/api/businesses', businessesRoutes);
|
||||||
|
|
||||||
|
// 404
|
||||||
|
app.use('*', (req, res) => res.status(404).json({ error: 'Route not found' }));
|
||||||
|
|
||||||
|
// Error handler
|
||||||
|
app.use((err, req, res, next) => {
|
||||||
|
console.error(err.stack);
|
||||||
|
res.status(500).json({ error: 'Internal server error' });
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log(`SMS Extension server running on port ${PORT}`);
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "sms-extension-server",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "SMS Template Extension Backend",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node index.js",
|
||||||
|
"dev": "nodemon index.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@pixelbin/admin": "^2.0.0",
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"dotenv": "^16.4.5",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"multer": "^1.4.5-lts.1",
|
||||||
|
"openai": "^4.28.0",
|
||||||
|
"uuid": "^13.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"nodemon": "^3.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const { scrape } = require('../services/firecrawl');
|
||||||
|
const { parseBrandContext } = require('../services/openai2');
|
||||||
|
const { uploadImageFromUrl, uploadJSON, fetchJSON, deleteAllBrandFiles } = require('../services/pixelbin');
|
||||||
|
const DEFAULT_EVENTS = require('../config/defaultEvents');
|
||||||
|
|
||||||
|
// POST /api/brand/register
|
||||||
|
router.post('/register', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { websiteUrl } = req.body;
|
||||||
|
if (!websiteUrl) return res.status(400).json({ error: 'websiteUrl is required' });
|
||||||
|
|
||||||
|
const merchantId = process.env.MERCHANT_ID;
|
||||||
|
const merchantFolder = `brands/${merchantId}`;
|
||||||
|
const imagesFolder = `${merchantFolder}/images`;
|
||||||
|
|
||||||
|
// 409 if brand already registered
|
||||||
|
const existing = await fetchJSON(merchantFolder, 'context');
|
||||||
|
if (existing) {
|
||||||
|
return res.status(409).json({ error: 'Brand already registered. Delete the current brand first to re-register.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Scrape
|
||||||
|
const scrapedData = await scrape(websiteUrl);
|
||||||
|
|
||||||
|
// 2. Parse brand context
|
||||||
|
const brandContext = await parseBrandContext(scrapedData);
|
||||||
|
|
||||||
|
// 3. Upload relevant images to Pixelbin
|
||||||
|
const imagePaths = [];
|
||||||
|
for (let i = 0; i < Math.min((brandContext.relevantImageUrls || []).length, 5); i++) {
|
||||||
|
const url = await uploadImageFromUrl(brandContext.relevantImageUrls[i], imagesFolder, `image_${i + 1}`);
|
||||||
|
if (url) imagePaths.push(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Build and upload context.json
|
||||||
|
let domain = '';
|
||||||
|
try { domain = new URL(websiteUrl).hostname; } catch { }
|
||||||
|
|
||||||
|
const contextJson = {
|
||||||
|
merchantId,
|
||||||
|
domain,
|
||||||
|
brandName: brandContext.brandName || 'Unknown Brand',
|
||||||
|
tone: brandContext.tone || 'professional',
|
||||||
|
taglines: brandContext.taglines || [],
|
||||||
|
colors: brandContext.colors || [],
|
||||||
|
relevantImagePaths: imagePaths,
|
||||||
|
scrapedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await uploadJSON(merchantFolder, 'context', contextJson);
|
||||||
|
|
||||||
|
// 5. Init events.json
|
||||||
|
await uploadJSON(merchantFolder, 'events', { events: DEFAULT_EVENTS });
|
||||||
|
|
||||||
|
res.json(contextJson);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Brand register error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/brand
|
||||||
|
router.get('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const context = await fetchJSON(`brands/${process.env.MERCHANT_ID}`, 'context');
|
||||||
|
if (!context) return res.status(404).json({ error: 'No brand registered.' });
|
||||||
|
res.json(context);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DELETE /api/brand — wipe all brand files from Pixelbin
|
||||||
|
router.delete('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const merchantId = process.env.MERCHANT_ID;
|
||||||
|
await deleteAllBrandFiles(merchantId);
|
||||||
|
res.json({ ok: true });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Brand delete error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -0,0 +1,803 @@
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const { v4: uuidv4 } = require('uuid');
|
||||||
|
const { scrape } = require('../services/firecrawl');
|
||||||
|
const { parseBrandContext, generateTemplates, processCurl } = require('../services/openai2');
|
||||||
|
const { sendViaWorkflow } = require('../services/workflowSender');
|
||||||
|
const {
|
||||||
|
uploadJSON,
|
||||||
|
fetchJSON,
|
||||||
|
uploadImageFromUrl,
|
||||||
|
listImages,
|
||||||
|
listTemplateFiles,
|
||||||
|
deleteBusinessFiles,
|
||||||
|
} = require('../services/pixelbin');
|
||||||
|
const DEFAULT_EVENTS = require('../config/defaultEvents');
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
const MERCHANT_ID = () => process.env.MERCHANT_ID;
|
||||||
|
|
||||||
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function slugify(text) {
|
||||||
|
return text.toLowerCase().trim().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function businessRoot(merchantId, businessId) {
|
||||||
|
return `${merchantId}/${businessId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexPath(merchantId) {
|
||||||
|
return merchantId; // index.json lives at {merchantId}/index.json
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getIndex(merchantId) {
|
||||||
|
const data = await fetchJSON(indexPath(merchantId), 'index');
|
||||||
|
return Array.isArray(data?.businesses) ? data.businesses : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveIndex(merchantId, businesses) {
|
||||||
|
await uploadJSON(indexPath(merchantId), 'index', { businesses });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Business CRUD ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/businesses
|
||||||
|
router.get('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const businesses = await getIndex(MERCHANT_ID());
|
||||||
|
res.json({ businesses });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses — create new business from websiteUrl
|
||||||
|
router.post('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { websiteUrl } = req.body;
|
||||||
|
if (!websiteUrl) return res.status(400).json({ error: 'websiteUrl is required' });
|
||||||
|
|
||||||
|
const merchantId = MERCHANT_ID();
|
||||||
|
const businessId = uuidv4();
|
||||||
|
const bizRoot = businessRoot(merchantId, businessId);
|
||||||
|
const imagesFolder = `${bizRoot}/images`;
|
||||||
|
|
||||||
|
// 1. Scrape
|
||||||
|
const scrapedData = await scrape(websiteUrl);
|
||||||
|
|
||||||
|
// 2. Parse brand context
|
||||||
|
const brandContext = await parseBrandContext(scrapedData);
|
||||||
|
|
||||||
|
// 3. Upload relevant images
|
||||||
|
const imagePaths = [];
|
||||||
|
for (let i = 0; i < Math.min((brandContext.relevantImageUrls || []).length, 5); i++) {
|
||||||
|
const url = await uploadImageFromUrl(brandContext.relevantImageUrls[i], imagesFolder, `image_${i + 1}`);
|
||||||
|
if (url) imagePaths.push(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Build and upload context.json
|
||||||
|
let domain = '';
|
||||||
|
try { domain = new URL(websiteUrl).hostname; } catch { }
|
||||||
|
|
||||||
|
const contextJson = {
|
||||||
|
businessId,
|
||||||
|
merchantId,
|
||||||
|
domain,
|
||||||
|
brandName: brandContext.brandName || 'Unknown Brand',
|
||||||
|
tone: brandContext.tone || 'professional',
|
||||||
|
taglines: brandContext.taglines || [],
|
||||||
|
colors: brandContext.colors || [],
|
||||||
|
relevantImagePaths: imagePaths,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await uploadJSON(bizRoot, 'context', contextJson);
|
||||||
|
|
||||||
|
// 5. Init events.json
|
||||||
|
await uploadJSON(bizRoot, 'events', { events: DEFAULT_EVENTS });
|
||||||
|
|
||||||
|
// 6. Update index.json
|
||||||
|
const businesses = await getIndex(merchantId);
|
||||||
|
businesses.push({
|
||||||
|
businessId,
|
||||||
|
brandName: contextJson.brandName,
|
||||||
|
domain: contextJson.domain,
|
||||||
|
createdAt: contextJson.createdAt,
|
||||||
|
updatedAt: contextJson.updatedAt,
|
||||||
|
});
|
||||||
|
await saveIndex(merchantId, businesses);
|
||||||
|
|
||||||
|
res.json(contextJson);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Create business error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId
|
||||||
|
router.get('/:businessId', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId } = req.params;
|
||||||
|
const context = await fetchJSON(businessRoot(MERCHANT_ID(), businessId), 'context');
|
||||||
|
if (!context) return res.status(404).json({ error: 'Business not found' });
|
||||||
|
res.json(context);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DELETE /api/businesses/:businessId
|
||||||
|
router.delete('/:businessId', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const merchantId = MERCHANT_ID();
|
||||||
|
const { businessId } = req.params;
|
||||||
|
|
||||||
|
await deleteBusinessFiles(merchantId, businessId);
|
||||||
|
|
||||||
|
const businesses = await getIndex(merchantId);
|
||||||
|
const updated = businesses.filter(b => b.businessId !== businessId);
|
||||||
|
await saveIndex(merchantId, updated);
|
||||||
|
|
||||||
|
res.json({ ok: true });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Delete business error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Providers ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/providers
|
||||||
|
router.get('/:businessId/providers', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const data = await fetchJSON(businessRoot(MERCHANT_ID(), req.params.businessId), 'providers');
|
||||||
|
res.json(data || {});
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/providers
|
||||||
|
// Mandatory fields for publish/send: providerName, senderId, dltEntityId.
|
||||||
|
// Per plan: these are NOT required to save — user can save partial config and is only
|
||||||
|
// blocked when switching a template to Published. senderId format is still validated
|
||||||
|
// if provided, so the stored value is always valid.
|
||||||
|
router.post('/:businessId/providers', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { providerName, senderId, dltEntityId, authKey } = req.body;
|
||||||
|
|
||||||
|
// If senderId is provided, it must still meet the format requirement
|
||||||
|
if (senderId && (senderId.length !== 6 || !/^[A-Za-z]+$/.test(senderId))) {
|
||||||
|
return res.status(400).json({ error: 'Sender ID must be exactly 6 alphabetic characters' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
providerName: providerName || '',
|
||||||
|
senderId: senderId ? senderId.toUpperCase() : '',
|
||||||
|
dltEntityId: dltEntityId || '',
|
||||||
|
authKey: authKey || '',
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await uploadJSON(businessRoot(MERCHANT_ID(), req.params.businessId), 'providers', config);
|
||||||
|
res.json(config);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Global SMS cURL (Compatibility layer — kept so existing sessions/frontend work) ────────────
|
||||||
|
// The new multi-profile system is below. These two routes delegate to the active profile.
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/global-sms
|
||||||
|
// Returns the active cURL profile's rawCurl (or legacy global_sms.json as fallback).
|
||||||
|
router.get('/:businessId/global-sms', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const activeProfile = await getActiveProfile(bizRoot);
|
||||||
|
if (activeProfile) {
|
||||||
|
return res.json({ rawCurl: activeProfile.rawCurl, updatedAt: activeProfile.updatedAt });
|
||||||
|
}
|
||||||
|
// Fallback: legacy global_sms.json (present on businesses created before profile system)
|
||||||
|
const data = await fetchJSON(bizRoot, 'global_sms');
|
||||||
|
res.json(data || {});
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/global-sms
|
||||||
|
// Compat: creates/updates a default profile and sets it active.
|
||||||
|
router.post('/:businessId/global-sms', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { rawCurl } = req.body;
|
||||||
|
if (!rawCurl || !rawCurl.trim()) {
|
||||||
|
return res.status(400).json({ error: 'rawCurl is required' });
|
||||||
|
}
|
||||||
|
if (!rawCurl.trim().toLowerCase().startsWith('curl')) {
|
||||||
|
return res.status(400).json({ error: 'rawCurl must be a valid cURL command' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const profileData = await fetchJSON(bizRoot, 'global_sms_profiles') || { profiles: [] };
|
||||||
|
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
// Find or create the default profile
|
||||||
|
let defaultProfile = profileData.profiles.find(p => p.name === 'Default');
|
||||||
|
if (defaultProfile) {
|
||||||
|
defaultProfile.rawCurl = rawCurl.trim();
|
||||||
|
defaultProfile.updatedAt = now;
|
||||||
|
} else {
|
||||||
|
defaultProfile = { id: uuidv4(), name: 'Default', rawCurl: rawCurl.trim(), isDefault: true, createdAt: now, updatedAt: now };
|
||||||
|
profileData.profiles.push(defaultProfile);
|
||||||
|
}
|
||||||
|
await uploadJSON(bizRoot, 'global_sms_profiles', profileData);
|
||||||
|
await uploadJSON(bizRoot, 'active_curl_profile', { profileId: defaultProfile.id, updatedAt: now });
|
||||||
|
|
||||||
|
res.json({ rawCurl: rawCurl.trim(), updatedAt: now });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── cURL Profile Helpers ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function getActiveProfile(bizRoot) {
|
||||||
|
try {
|
||||||
|
const [profileData, activeRec] = await Promise.all([
|
||||||
|
fetchJSON(bizRoot, 'global_sms_profiles'),
|
||||||
|
fetchJSON(bizRoot, 'active_curl_profile'),
|
||||||
|
]);
|
||||||
|
if (!profileData?.profiles?.length) return null;
|
||||||
|
if (activeRec?.profileId) {
|
||||||
|
const found = profileData.profiles.find(p => p.id === activeRec.profileId);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
// Fall back to first profile
|
||||||
|
return profileData.profiles[0];
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── cURL Profiles CRUD ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/global-sms/profiles
|
||||||
|
router.get('/:businessId/global-sms/profiles', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const [profileData, activeRec] = await Promise.all([
|
||||||
|
fetchJSON(bizRoot, 'global_sms_profiles'),
|
||||||
|
fetchJSON(bizRoot, 'active_curl_profile'),
|
||||||
|
]);
|
||||||
|
const profiles = profileData?.profiles || [];
|
||||||
|
const activeProfileId = activeRec?.profileId || (profiles[0]?.id ?? null);
|
||||||
|
res.json({ profiles, activeProfileId });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/global-sms/profiles
|
||||||
|
router.post('/:businessId/global-sms/profiles', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { name, rawCurl, setActive } = req.body;
|
||||||
|
if (!name || !String(name).trim()) {
|
||||||
|
return res.status(400).json({ error: 'name is required' });
|
||||||
|
}
|
||||||
|
if (!rawCurl || !rawCurl.trim()) {
|
||||||
|
return res.status(400).json({ error: 'rawCurl is required' });
|
||||||
|
}
|
||||||
|
if (!rawCurl.trim().toLowerCase().startsWith('curl')) {
|
||||||
|
return res.status(400).json({ error: 'rawCurl must be a valid cURL command' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const profileData = await fetchJSON(bizRoot, 'global_sms_profiles') || { profiles: [] };
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
|
||||||
|
const newProfile = { id: uuidv4(), name: String(name).trim(), rawCurl: rawCurl.trim(), isDefault: false, createdAt: now, updatedAt: now };
|
||||||
|
profileData.profiles.push(newProfile);
|
||||||
|
await uploadJSON(bizRoot, 'global_sms_profiles', profileData);
|
||||||
|
|
||||||
|
// Activate this profile if requested or if it is the first one
|
||||||
|
if (setActive || profileData.profiles.length === 1) {
|
||||||
|
await uploadJSON(bizRoot, 'active_curl_profile', { profileId: newProfile.id, updatedAt: now });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json(newProfile);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// PATCH /api/businesses/:businessId/global-sms/profiles/:profileId
|
||||||
|
router.patch('/:businessId/global-sms/profiles/:profileId', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, profileId } = req.params;
|
||||||
|
const { name, rawCurl } = req.body;
|
||||||
|
|
||||||
|
if (rawCurl !== undefined && !rawCurl.trim().toLowerCase().startsWith('curl')) {
|
||||||
|
return res.status(400).json({ error: 'rawCurl must be a valid cURL command' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const profileData = await fetchJSON(bizRoot, 'global_sms_profiles') || { profiles: [] };
|
||||||
|
const profile = profileData.profiles.find(p => p.id === profileId);
|
||||||
|
if (!profile) return res.status(404).json({ error: 'Profile not found' });
|
||||||
|
|
||||||
|
if (name !== undefined) profile.name = String(name).trim();
|
||||||
|
if (rawCurl !== undefined) profile.rawCurl = rawCurl.trim();
|
||||||
|
profile.updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
await uploadJSON(bizRoot, 'global_sms_profiles', profileData);
|
||||||
|
res.json(profile);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DELETE /api/businesses/:businessId/global-sms/profiles/:profileId
|
||||||
|
router.delete('/:businessId/global-sms/profiles/:profileId', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, profileId } = req.params;
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const profileData = await fetchJSON(bizRoot, 'global_sms_profiles') || { profiles: [] };
|
||||||
|
|
||||||
|
const idx = profileData.profiles.findIndex(p => p.id === profileId);
|
||||||
|
if (idx === -1) return res.status(404).json({ error: 'Profile not found' });
|
||||||
|
if (profileData.profiles.length === 1) {
|
||||||
|
return res.status(400).json({ error: 'Cannot delete the last cURL profile' });
|
||||||
|
}
|
||||||
|
|
||||||
|
profileData.profiles.splice(idx, 1);
|
||||||
|
await uploadJSON(bizRoot, 'global_sms_profiles', profileData);
|
||||||
|
|
||||||
|
// If deleted profile was active, switch to first remaining
|
||||||
|
const activeRec = await fetchJSON(bizRoot, 'active_curl_profile');
|
||||||
|
if (activeRec?.profileId === profileId) {
|
||||||
|
await uploadJSON(bizRoot, 'active_curl_profile', { profileId: profileData.profiles[0].id, updatedAt: new Date().toISOString() });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ ok: true });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/global-sms/profiles/:profileId/activate
|
||||||
|
router.post('/:businessId/global-sms/profiles/:profileId/activate', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, profileId } = req.params;
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const profileData = await fetchJSON(bizRoot, 'global_sms_profiles') || { profiles: [] };
|
||||||
|
const profile = profileData.profiles.find(p => p.id === profileId);
|
||||||
|
if (!profile) return res.status(404).json({ error: 'Profile not found' });
|
||||||
|
|
||||||
|
await uploadJSON(bizRoot, 'active_curl_profile', { profileId, updatedAt: new Date().toISOString() });
|
||||||
|
res.json({ activeProfileId: profileId });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/global-sms/active
|
||||||
|
router.get('/:businessId/global-sms/active', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const [profileData, activeRec] = await Promise.all([
|
||||||
|
fetchJSON(bizRoot, 'global_sms_profiles'),
|
||||||
|
fetchJSON(bizRoot, 'active_curl_profile'),
|
||||||
|
]);
|
||||||
|
const profiles = profileData?.profiles || [];
|
||||||
|
const activeProfileId = activeRec?.profileId || (profiles[0]?.id ?? null);
|
||||||
|
const activeProfile = profiles.find(p => p.id === activeProfileId) || profiles[0] || null;
|
||||||
|
res.json({ activeProfile, activeProfileId });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Events ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/events
|
||||||
|
router.get('/:businessId/events', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const data = await fetchJSON(businessRoot(MERCHANT_ID(), req.params.businessId), 'events');
|
||||||
|
res.json(data || { events: DEFAULT_EVENTS });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/events — add custom event
|
||||||
|
router.post('/:businessId/events', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { label } = req.body;
|
||||||
|
if (!label) return res.status(400).json({ error: 'label is required' });
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const data = await fetchJSON(bizRoot, 'events') || { events: [...DEFAULT_EVENTS] };
|
||||||
|
const slug = slugify(label);
|
||||||
|
|
||||||
|
if (data.events.some(e => e.slug === slug)) {
|
||||||
|
return res.status(409).json({ error: 'An event with this name already exists' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const newEvent = { slug, label, isDefault: false };
|
||||||
|
data.events.push(newEvent);
|
||||||
|
await uploadJSON(bizRoot, 'events', data);
|
||||||
|
res.json(newEvent);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DELETE /api/businesses/:businessId/events/:slug
|
||||||
|
router.delete('/:businessId/events/:slug', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const data = await fetchJSON(bizRoot, 'events') || { events: [...DEFAULT_EVENTS] };
|
||||||
|
const event = data.events.find(e => e.slug === slug);
|
||||||
|
|
||||||
|
if (!event) return res.status(404).json({ error: 'Event not found' });
|
||||||
|
if (event.isDefault) return res.status(403).json({ error: 'Cannot delete a default event' });
|
||||||
|
|
||||||
|
data.events = data.events.filter(e => e.slug !== slug);
|
||||||
|
await uploadJSON(bizRoot, 'events', data);
|
||||||
|
res.json({ ok: true });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/events/:slug/generate
|
||||||
|
router.post('/:businessId/events/:slug/generate', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
|
||||||
|
// Requirements check
|
||||||
|
const [context, providers] = await Promise.all([
|
||||||
|
fetchJSON(bizRoot, 'context'),
|
||||||
|
fetchJSON(bizRoot, 'providers'),
|
||||||
|
]);
|
||||||
|
if (!context) return res.status(400).json({ error: 'Business context not found.' });
|
||||||
|
if (!providers?.senderId) return res.status(400).json({ error: 'Provider details must be configured before generating templates.' });
|
||||||
|
|
||||||
|
// Require an active cURL profile (new system), falling back to legacy global_sms.json
|
||||||
|
const activeProfile = await getActiveProfile(bizRoot);
|
||||||
|
const legacyGlobalSms = activeProfile ? null : await fetchJSON(bizRoot, 'global_sms');
|
||||||
|
const activeCurl = activeProfile?.rawCurl || legacyGlobalSms?.rawCurl || null;
|
||||||
|
if (!activeCurl) {
|
||||||
|
return res.status(400).json({ error: 'A cURL profile must be configured and active before generating templates.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const eventsData = await fetchJSON(bizRoot, 'events') || { events: DEFAULT_EVENTS };
|
||||||
|
const event = eventsData.events.find(e => e.slug === slug);
|
||||||
|
if (!event) return res.status(404).json({ error: 'Event not found' });
|
||||||
|
|
||||||
|
const variants = await generateTemplates(context, slug, event.label);
|
||||||
|
|
||||||
|
const templateJson = {
|
||||||
|
eventSlug: slug,
|
||||||
|
eventLabel: event.label,
|
||||||
|
generatedVariants: variants,
|
||||||
|
selectedTemplate: null,
|
||||||
|
status: 'generated',
|
||||||
|
templateId: '',
|
||||||
|
curlProfileId: activeProfile?.id || null,
|
||||||
|
rawCurl: '',
|
||||||
|
processedCurl: '',
|
||||||
|
variableMap: {},
|
||||||
|
selectedImagePath: '',
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await uploadJSON(`${bizRoot}/templates`, slug, templateJson);
|
||||||
|
res.json({ variants });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Generate error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Templates ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/templates/images (must be before /:slug)
|
||||||
|
router.get('/:businessId/templates/images', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const images = await listImages(`${businessRoot(MERCHANT_ID(), req.params.businessId)}/images`);
|
||||||
|
res.json({ images });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/templates
|
||||||
|
router.get('/:businessId/templates', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), req.params.businessId);
|
||||||
|
const folder = `${bizRoot}/templates`;
|
||||||
|
const slugs = await listTemplateFiles(folder);
|
||||||
|
const templates = [];
|
||||||
|
for (const slug of slugs) {
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (tmpl) templates.push(tmpl);
|
||||||
|
}
|
||||||
|
res.json({ templates });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/businesses/:businessId/templates/:slug
|
||||||
|
router.get('/:businessId/templates/:slug', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const tmpl = await fetchJSON(`${businessRoot(MERCHANT_ID(), businessId)}/templates`, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/templates/:slug/select
|
||||||
|
router.post('/:businessId/templates/:slug/select', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const { selectedVariant } = req.body;
|
||||||
|
if (!selectedVariant) return res.status(400).json({ error: 'selectedVariant is required' });
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const folder = `${bizRoot}/templates`;
|
||||||
|
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
|
||||||
|
// Resolve active cURL (new profile system first, legacy fallback)
|
||||||
|
const activeProfile = await getActiveProfile(bizRoot);
|
||||||
|
const legacyGlobalSms = activeProfile ? null : await fetchJSON(bizRoot, 'global_sms');
|
||||||
|
const activeCurl = activeProfile?.rawCurl || legacyGlobalSms?.rawCurl || null;
|
||||||
|
if (!activeCurl) {
|
||||||
|
return res.status(400).json({ error: 'A cURL profile must be configured and active before selecting a template' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process the cURL against the selected template
|
||||||
|
const { processedCurl, variableMap } = await processCurl(activeCurl, selectedVariant, slug);
|
||||||
|
|
||||||
|
tmpl.selectedTemplate = selectedVariant;
|
||||||
|
tmpl.generatedVariants = []; // discard non-selected variants
|
||||||
|
tmpl.status = 'pending_whitelisting';
|
||||||
|
tmpl.curlProfileId = activeProfile?.id || null; // snapshot which profile was used
|
||||||
|
tmpl.rawCurl = activeCurl;
|
||||||
|
tmpl.processedCurl = processedCurl;
|
||||||
|
tmpl.variableMap = variableMap;
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
await uploadJSON(folder, slug, tmpl);
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Select error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/templates/:slug/whitelist
|
||||||
|
router.post('/:businessId/templates/:slug/whitelist', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const { templateId } = req.body;
|
||||||
|
if (!templateId || !String(templateId).trim()) {
|
||||||
|
return res.status(400).json({ error: 'templateId is required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const folder = `${businessRoot(MERCHANT_ID(), businessId)}/templates`;
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
if (tmpl.status !== 'pending_whitelisting') {
|
||||||
|
return res.status(400).json({ error: 'Template must be in pending_whitelisting status to whitelist' });
|
||||||
|
}
|
||||||
|
|
||||||
|
tmpl.templateId = String(templateId).trim();
|
||||||
|
tmpl.status = 'whitelisted';
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
|
||||||
|
await uploadJSON(folder, slug, tmpl);
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/templates/:slug/publish
|
||||||
|
// Handles transition from pending_whitelisting -> whitelisted (Published).
|
||||||
|
// Validates mandatory provider fields, collects toNumber, then calls workflow sender.
|
||||||
|
router.post('/:businessId/templates/:slug/publish', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const { templateId, toNumber, providerName, senderId, dltEntityId, authKey } = req.body;
|
||||||
|
|
||||||
|
if (!templateId || !String(templateId).trim()) {
|
||||||
|
return res.status(400).json({ error: 'templateId is required' });
|
||||||
|
}
|
||||||
|
if (!toNumber || !String(toNumber).trim()) {
|
||||||
|
return res.status(400).json({ error: 'toNumber is required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const folder = `${bizRoot}/templates`;
|
||||||
|
|
||||||
|
// Load template
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
if (tmpl.status !== 'pending_whitelisting') {
|
||||||
|
return res.status(400).json({ error: 'Template must be in pending_whitelisting status to publish' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merge any submitted provider fields over stored values
|
||||||
|
const storedProviders = await fetchJSON(bizRoot, 'providers') || {};
|
||||||
|
const mergedProviders = {
|
||||||
|
providerName: providerName || storedProviders.providerName || '',
|
||||||
|
senderId: senderId ? senderId.toUpperCase() : (storedProviders.senderId || ''),
|
||||||
|
dltEntityId: dltEntityId || storedProviders.dltEntityId || '',
|
||||||
|
authKey: authKey || storedProviders.authKey || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Validate mandatory fields
|
||||||
|
const missing = [];
|
||||||
|
if (!mergedProviders.providerName) missing.push('providerName');
|
||||||
|
if (!mergedProviders.senderId) missing.push('senderId');
|
||||||
|
if (!mergedProviders.dltEntityId) missing.push('dltEntityId');
|
||||||
|
if (missing.length > 0) {
|
||||||
|
return res.status(422).json({
|
||||||
|
error: 'Missing mandatory provider fields',
|
||||||
|
missingFields: missing,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate senderId format
|
||||||
|
if (mergedProviders.senderId.length !== 6 || !/^[A-Za-z]+$/.test(mergedProviders.senderId)) {
|
||||||
|
return res.status(400).json({ error: 'Sender ID must be exactly 6 alphabetic characters' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Persist any updated provider data
|
||||||
|
const updatedProviders = { ...mergedProviders, updatedAt: new Date().toISOString() };
|
||||||
|
await uploadJSON(bizRoot, 'providers', updatedProviders);
|
||||||
|
|
||||||
|
// Mark template as whitelisted
|
||||||
|
tmpl.templateId = String(templateId).trim();
|
||||||
|
tmpl.status = 'whitelisted';
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
await uploadJSON(folder, slug, tmpl);
|
||||||
|
|
||||||
|
// Send via workflow (Published path)
|
||||||
|
let sendResult;
|
||||||
|
try {
|
||||||
|
sendResult = await sendViaWorkflow({
|
||||||
|
senderId: mergedProviders.senderId,
|
||||||
|
toNumber: String(toNumber).trim(),
|
||||||
|
content: tmpl.selectedTemplate || '',
|
||||||
|
});
|
||||||
|
} catch (sendErr) {
|
||||||
|
// Template is already whitelisted at this point; report send error separately
|
||||||
|
return res.status(502).json({
|
||||||
|
error: 'Template published but send failed',
|
||||||
|
details: sendErr.message,
|
||||||
|
template: tmpl,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
template: tmpl,
|
||||||
|
sendResult,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Publish error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/businesses/:businessId/templates/:slug/test
|
||||||
|
// For Published (whitelisted) templates: routes to workflow sender (new path).
|
||||||
|
// Legacy cURL execution code below (executeCurl) is kept intact and is NOT deleted.
|
||||||
|
router.post('/:businessId/templates/:slug/test', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { businessId, slug } = req.params;
|
||||||
|
const { toNumber } = req.body;
|
||||||
|
if (!toNumber) return res.status(400).json({ error: 'toNumber is required' });
|
||||||
|
|
||||||
|
const bizRoot = businessRoot(MERCHANT_ID(), businessId);
|
||||||
|
const folder = `${bizRoot}/templates`;
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
if (tmpl.status !== 'whitelisted') {
|
||||||
|
return res.status(400).json({ error: 'Template must be whitelisted before testing' });
|
||||||
|
}
|
||||||
|
if (!tmpl.templateId) {
|
||||||
|
return res.status(400).json({ error: 'templateId must be set before testing' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Published send path: route to workflow sender ──────────────────────────
|
||||||
|
// Per plan: Published (whitelisted) templates use the workflow sender module,
|
||||||
|
// not the legacy cURL execution path. The cURL code below remains but is not
|
||||||
|
// reached for whitelisted templates in this branch.
|
||||||
|
const providers = await fetchJSON(bizRoot, 'providers') || {};
|
||||||
|
if (!providers.senderId) {
|
||||||
|
return res.status(422).json({ error: 'Provider senderId is required for sending' });
|
||||||
|
}
|
||||||
|
|
||||||
|
let smsResult;
|
||||||
|
try {
|
||||||
|
smsResult = await sendViaWorkflow({
|
||||||
|
senderId: providers.senderId,
|
||||||
|
toNumber: String(toNumber).trim(),
|
||||||
|
content: tmpl.selectedTemplate || '',
|
||||||
|
});
|
||||||
|
} catch (sendErr) {
|
||||||
|
return res.status(502).json({ error: 'SMS send failed', details: sendErr.message });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ success: true, statusCode: smsResult.statusCode, response: smsResult.response });
|
||||||
|
|
||||||
|
// ── Legacy cURL execution path (preserved, not reached for whitelisted) ────
|
||||||
|
// The code below is kept for reference and future restoration.
|
||||||
|
// It is NOT executed in the current Published send flow.
|
||||||
|
/*
|
||||||
|
let curlToExecute = String(tmpl.processedCurl || tmpl.rawCurl || '');
|
||||||
|
curlToExecute = curlToExecute.replace(/\{#toNumber#\}/g, toNumber);
|
||||||
|
curlToExecute = curlToExecute.replace(/\{#to#\}/g, toNumber);
|
||||||
|
curlToExecute = curlToExecute.replace(/\{#mobile#\}/g, toNumber);
|
||||||
|
curlToExecute = curlToExecute.replace(/\{#phone#\}/g, toNumber);
|
||||||
|
|
||||||
|
let legacyResult;
|
||||||
|
try {
|
||||||
|
legacyResult = await executeCurl(curlToExecute);
|
||||||
|
} catch (curlErr) {
|
||||||
|
return res.status(502).json({ error: 'SMS send failed', details: curlErr.message });
|
||||||
|
}
|
||||||
|
res.json({ success: true, statusCode: legacyResult.status, response: legacyResult.data });
|
||||||
|
*/
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Minimal cURL parser: extracts method, URL, headers, and body from a cURL string,
|
||||||
|
* then executes via axios.
|
||||||
|
*/
|
||||||
|
async function executeCurl(curlStr) {
|
||||||
|
const method = /-X\s+([A-Z]+)/i.exec(curlStr)?.[1]?.toLowerCase() || 'post';
|
||||||
|
const urlMatch = /curl\s+(?:-[^\s]+\s+)*['"]?(https?:\/\/[^\s'"]+)['"]?/i.exec(curlStr);
|
||||||
|
if (!urlMatch) throw new Error('Could not parse URL from cURL command');
|
||||||
|
const url = urlMatch[1];
|
||||||
|
|
||||||
|
// Extract headers (-H "Key: Value")
|
||||||
|
const headers = {};
|
||||||
|
const headerRegex = /-H\s+['"]([^'"]+)['"]/gi;
|
||||||
|
let hMatch;
|
||||||
|
while ((hMatch = headerRegex.exec(curlStr)) !== null) {
|
||||||
|
const parts = hMatch[1].split(/:\s*(.+)/);
|
||||||
|
if (parts.length >= 2) headers[parts[0].trim()] = parts[1].trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract body (-d or --data or --data-raw)
|
||||||
|
const bodyMatch = /(?:--data-raw|--data|-d)\s+['"]([^'"]+)['"]/i.exec(curlStr)
|
||||||
|
|| /(?:--data-raw|--data|-d)\s+(\S+)/i.exec(curlStr);
|
||||||
|
const body = bodyMatch ? bodyMatch[1].replace(/\\n/g, '\n') : undefined;
|
||||||
|
|
||||||
|
return axios({
|
||||||
|
method,
|
||||||
|
url,
|
||||||
|
headers,
|
||||||
|
data: body,
|
||||||
|
timeout: 15000,
|
||||||
|
validateStatus: () => true, // don't throw on 4xx/5xx so we can relay the response
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const { fetchJSON, uploadJSON } = require('../services/pixelbin');
|
||||||
|
const { generateTemplates } = require('../services/openai2');
|
||||||
|
const DEFAULT_EVENTS = require('../config/defaultEvents');
|
||||||
|
|
||||||
|
function slugify(text) {
|
||||||
|
return text.toLowerCase().trim().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// GET /api/events
|
||||||
|
router.get('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const data = await fetchJSON(`brands/${process.env.MERCHANT_ID}`, 'events');
|
||||||
|
res.json(data || { events: DEFAULT_EVENTS });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/events — add custom event
|
||||||
|
router.post('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { label } = req.body;
|
||||||
|
if (!label) return res.status(400).json({ error: 'label is required' });
|
||||||
|
|
||||||
|
const folder = `brands/${process.env.MERCHANT_ID}`;
|
||||||
|
const data = await fetchJSON(folder, 'events') || { events: [...DEFAULT_EVENTS] };
|
||||||
|
const slug = slugify(label);
|
||||||
|
|
||||||
|
if (data.events.some(e => e.slug === slug)) {
|
||||||
|
return res.status(409).json({ error: 'An event with this name already exists' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const newEvent = { slug, label, isDefault: false };
|
||||||
|
data.events.push(newEvent);
|
||||||
|
await uploadJSON(folder, 'events', data);
|
||||||
|
res.json(newEvent);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// DELETE /api/events/:slug
|
||||||
|
router.delete('/:slug', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { slug } = req.params;
|
||||||
|
const folder = `brands/${process.env.MERCHANT_ID}`;
|
||||||
|
const data = await fetchJSON(folder, 'events') || { events: [...DEFAULT_EVENTS] };
|
||||||
|
const event = data.events.find(e => e.slug === slug);
|
||||||
|
|
||||||
|
if (!event) return res.status(404).json({ error: 'Event not found' });
|
||||||
|
if (event.isDefault) return res.status(403).json({ error: 'Cannot delete a default event' });
|
||||||
|
|
||||||
|
data.events = data.events.filter(e => e.slug !== slug);
|
||||||
|
await uploadJSON(folder, 'events', data);
|
||||||
|
res.json({ ok: true });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/events/:slug/generate
|
||||||
|
router.post('/:slug/generate', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { slug } = req.params;
|
||||||
|
const folder = `brands/${process.env.MERCHANT_ID}`;
|
||||||
|
|
||||||
|
const context = await fetchJSON(folder, 'context');
|
||||||
|
if (!context) return res.status(400).json({ error: 'Register your business before generating templates.' });
|
||||||
|
|
||||||
|
const eventsData = await fetchJSON(folder, 'events') || { events: DEFAULT_EVENTS };
|
||||||
|
const event = eventsData.events.find(e => e.slug === slug);
|
||||||
|
if (!event) return res.status(404).json({ error: 'Event not found' });
|
||||||
|
|
||||||
|
const variants = await generateTemplates(context, slug, event.label);
|
||||||
|
|
||||||
|
const templateJson = {
|
||||||
|
eventSlug: slug,
|
||||||
|
eventLabel: event.label,
|
||||||
|
generatedVariants: variants,
|
||||||
|
approvedVariant: null,
|
||||||
|
whitelistStatus: 'pending',
|
||||||
|
rawCurl: '',
|
||||||
|
processedCurl: '',
|
||||||
|
variableMap: {},
|
||||||
|
selectedImagePath: '',
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await uploadJSON(`${folder}/templates`, slug, templateJson);
|
||||||
|
res.json({ variants });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Generate error:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const { fetchJSON, uploadJSON } = require('../services/pixelbin');
|
||||||
|
|
||||||
|
// GET /api/providers
|
||||||
|
router.get('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const data = await fetchJSON(`brands/${process.env.MERCHANT_ID}`, 'providers');
|
||||||
|
res.json(data || {});
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/providers
|
||||||
|
router.post('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { providerName, senderId, dltEntityId } = req.body;
|
||||||
|
if (!providerName || !senderId || !dltEntityId) {
|
||||||
|
return res.status(400).json({ error: 'providerName, senderId, and dltEntityId are required' });
|
||||||
|
}
|
||||||
|
if (senderId.length !== 6 || !/^[A-Za-z]+$/.test(senderId)) {
|
||||||
|
return res.status(400).json({ error: 'Sender ID must be exactly 6 alphabetic characters' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
providerName,
|
||||||
|
senderId: senderId.toUpperCase(),
|
||||||
|
dltEntityId,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
await uploadJSON(`brands/${process.env.MERCHANT_ID}`, 'providers', config);
|
||||||
|
res.json(config);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
const express = require('express');
|
||||||
|
const router = express.Router();
|
||||||
|
const { fetchJSON, uploadJSON, listImages, listTemplateFiles } = require('../services/pixelbin');
|
||||||
|
const { processCurl } = require('../services/openai2');
|
||||||
|
|
||||||
|
// GET /api/templates/images — must be BEFORE /:slug to avoid conflict
|
||||||
|
router.get('/images', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const images = await listImages(`brands/${process.env.MERCHANT_ID}/images`);
|
||||||
|
res.json({ images });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/templates
|
||||||
|
router.get('/', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const merchantId = process.env.MERCHANT_ID;
|
||||||
|
const folder = `brands/${merchantId}/templates`;
|
||||||
|
console.log(`[Templates] GET /api/templates start | merchant=${merchantId} | pid=${process.pid}`);
|
||||||
|
const slugs = await listTemplateFiles(folder);
|
||||||
|
console.log(`[Templates] GET /api/templates files | merchant=${merchantId} | slugs=[${slugs.join(', ')}]`);
|
||||||
|
const templates = [];
|
||||||
|
for (const slug of slugs) {
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (tmpl) {
|
||||||
|
console.log(
|
||||||
|
`[Templates] GET /api/templates item | merchant=${merchantId} | slug=${slug} | eventSlug=${tmpl.eventSlug || 'n/a'} | approved=${!!tmpl.approvedVariant} | updatedAt=${tmpl.updatedAt || 'n/a'}`
|
||||||
|
);
|
||||||
|
templates.push(tmpl);
|
||||||
|
} else {
|
||||||
|
console.log(`[Templates] GET /api/templates item-miss | merchant=${merchantId} | slug=${slug}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(`[Templates] GET /api/templates done | merchant=${merchantId} | count=${templates.length}`);
|
||||||
|
res.json({ templates });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// GET /api/templates/:slug
|
||||||
|
router.get('/:slug', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const merchantId = process.env.MERCHANT_ID;
|
||||||
|
const slug = req.params.slug;
|
||||||
|
const folder = `brands/${merchantId}/templates`;
|
||||||
|
console.log(`[Templates] GET /api/templates/:slug start | merchant=${merchantId} | slug=${slug} | pid=${process.pid}`);
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
console.log(
|
||||||
|
`[Templates] GET /api/templates/:slug done | merchant=${merchantId} | slug=${slug} | approved=${!!tmpl.approvedVariant} | updatedAt=${tmpl.updatedAt || 'n/a'}`
|
||||||
|
);
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/templates/:slug/approve
|
||||||
|
router.post('/:slug/approve', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { approvedVariant } = req.body;
|
||||||
|
if (!approvedVariant) return res.status(400).json({ error: 'approvedVariant is required' });
|
||||||
|
|
||||||
|
const merchantId = process.env.MERCHANT_ID;
|
||||||
|
const slug = req.params.slug;
|
||||||
|
const folder = `brands/${merchantId}/templates`;
|
||||||
|
console.log(
|
||||||
|
`[Templates] POST /api/templates/:slug/approve start | merchant=${merchantId} | slug=${slug} | incomingLen=${approvedVariant.length} | pid=${process.pid}`
|
||||||
|
);
|
||||||
|
const tmpl = await fetchJSON(folder, slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
console.log(
|
||||||
|
`[Templates] POST /api/templates/:slug/approve before | merchant=${merchantId} | slug=${slug} | approved=${!!tmpl.approvedVariant} | updatedAt=${tmpl.updatedAt || 'n/a'}`
|
||||||
|
);
|
||||||
|
|
||||||
|
tmpl.approvedVariant = approvedVariant;
|
||||||
|
tmpl.whitelistStatus = 'submitted';
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
await uploadJSON(folder, slug, tmpl);
|
||||||
|
console.log(
|
||||||
|
`[Templates] POST /api/templates/:slug/approve after | merchant=${merchantId} | slug=${slug} | approved=${!!tmpl.approvedVariant} | updatedAt=${tmpl.updatedAt}`
|
||||||
|
);
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/templates/:slug/curl
|
||||||
|
router.post('/:slug/curl', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { rawCurl } = req.body;
|
||||||
|
if (!rawCurl) return res.status(400).json({ error: 'rawCurl is required' });
|
||||||
|
|
||||||
|
const folder = `brands/${process.env.MERCHANT_ID}/templates`;
|
||||||
|
const tmpl = await fetchJSON(folder, req.params.slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
if (!tmpl.approvedVariant) return res.status(400).json({ error: 'Template must have an approved variant first' });
|
||||||
|
|
||||||
|
const { processedCurl, variableMap } = await processCurl(rawCurl, tmpl.approvedVariant, req.params.slug);
|
||||||
|
tmpl.rawCurl = rawCurl;
|
||||||
|
tmpl.processedCurl = processedCurl;
|
||||||
|
tmpl.variableMap = variableMap;
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
await uploadJSON(folder, req.params.slug, tmpl);
|
||||||
|
res.json({ processedCurl, variableMap });
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// POST /api/templates/:slug/image
|
||||||
|
router.post('/:slug/image', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { imagePath } = req.body;
|
||||||
|
if (imagePath === undefined) return res.status(400).json({ error: 'imagePath is required' });
|
||||||
|
|
||||||
|
const folder = `brands/${process.env.MERCHANT_ID}/templates`;
|
||||||
|
const tmpl = await fetchJSON(folder, req.params.slug);
|
||||||
|
if (!tmpl) return res.status(404).json({ error: 'Template not found' });
|
||||||
|
|
||||||
|
tmpl.selectedImagePath = imagePath;
|
||||||
|
tmpl.updatedAt = new Date().toISOString();
|
||||||
|
await uploadJSON(folder, req.params.slug, tmpl);
|
||||||
|
res.json(tmpl);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scrape a website using Firecrawl.
|
||||||
|
* Returns { markdown, links } — raw output passed to OpenAI.
|
||||||
|
*/
|
||||||
|
async function scrape(url) {
|
||||||
|
const apiKey = process.env.FIRECRAWL_API_KEY;
|
||||||
|
if (!apiKey) throw new Error('FIRECRAWL_API_KEY not set');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
'https://api.firecrawl.dev/v1/scrape',
|
||||||
|
{ url, formats: ['markdown', 'links'] },
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${apiKey}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
timeout: 30000,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = response.data?.data || response.data;
|
||||||
|
const markdownLen = typeof data?.markdown === 'string' ? data.markdown.length : 0;
|
||||||
|
const linksCount = Array.isArray(data?.links) ? data.links.length : 0;
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`[Firecrawl] scrape success | status=${response.status} | markdownLen=${markdownLen} | links=${linksCount}`
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
markdown: data.markdown || '',
|
||||||
|
links: data.links || [],
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { scrape };
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
const OpenAI = require('openai');
|
||||||
|
|
||||||
|
const WORKFLOW = process.env.WORKFLOW_URL;
|
||||||
|
|
||||||
|
function getClient() {
|
||||||
|
const apiKey = process.env.OPENAI_API_KEY;
|
||||||
|
if (!apiKey) throw new Error('OPENAI_API_KEY not set');
|
||||||
|
return new OpenAI({ apiKey });
|
||||||
|
}
|
||||||
|
|
||||||
|
const TRAI_RULES = `TRAI SMS Template Rules:
|
||||||
|
1. Maximum 160 characters for a single SMS (or 153 per part for multi-part)
|
||||||
|
2. Dynamic variables must use the format {#var#}
|
||||||
|
3. Transactional templates must not contain promotional content or URLs
|
||||||
|
4. The sender ID (header) must be a 6-character alphabetic string registered with DLT
|
||||||
|
5. No special characters except: . , - _ / @ and standard punctuation
|
||||||
|
6. Template must clearly relate to the registered event type
|
||||||
|
7. Do not include any URLs unless explicitly required by the event
|
||||||
|
8. Template must start with context (e.g. "Your order..." not "Hi! Your order...")`;
|
||||||
|
|
||||||
|
const EVENT_DESCRIPTIONS = {
|
||||||
|
placed: 'The customer has successfully placed an order',
|
||||||
|
confirmed: 'The order has been confirmed by the seller/warehouse',
|
||||||
|
dp_assigned: 'A delivery partner has been assigned to deliver the order',
|
||||||
|
pack: 'The order has been packed and is ready for dispatch',
|
||||||
|
cancelled: 'The order has been cancelled',
|
||||||
|
delivery_done: 'The order has been successfully delivered to the customer',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Parse scraped website data into structured brand context. */
|
||||||
|
async function parseBrandContext(scrapedData) {
|
||||||
|
const openai = getClient();
|
||||||
|
const { markdown, links } = scrapedData;
|
||||||
|
|
||||||
|
const prompt = `You are a brand analyst. Analyze the website content below and extract structured brand information.
|
||||||
|
|
||||||
|
Website content (markdown):
|
||||||
|
${markdown.slice(0, 8000)}
|
||||||
|
|
||||||
|
All links found on the page:
|
||||||
|
${JSON.stringify(links.slice(0, 200))}
|
||||||
|
|
||||||
|
Return ONLY a valid JSON object:
|
||||||
|
{
|
||||||
|
"brandName": "string — the business/brand name",
|
||||||
|
"tone": "one of: friendly, professional, formal, casual, energetic",
|
||||||
|
"taglines": ["max 3 key brand taglines or phrases found on the page"],
|
||||||
|
"colors": ["brand color hex codes if found, else empty array"],
|
||||||
|
"relevantImageUrls": ["3-5 relevant brand image URLs — logos, hero images, product shots only. Exclude: social icons, nav icons, tracking pixels, data URIs, generic stock images. Only absolute URLs."]
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: 'gpt-4o',
|
||||||
|
messages: [{ role: 'user', content: prompt }],
|
||||||
|
response_format: { type: 'json_object' },
|
||||||
|
temperature: 0.3,
|
||||||
|
});
|
||||||
|
return JSON.parse(completion.choices[0].message.content);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Generate 3 TRAI-compliant SMS template variants for a given event. */
|
||||||
|
async function generateTemplates(brandContext, eventSlug, eventLabel) {
|
||||||
|
const openai = getClient();
|
||||||
|
const eventDesc = EVENT_DESCRIPTIONS[eventSlug] || `A "${eventLabel}" event in the order lifecycle`;
|
||||||
|
|
||||||
|
const prompt = `You are an SMS template expert for e-commerce in India.
|
||||||
|
|
||||||
|
Brand: ${brandContext.brandName}
|
||||||
|
Tone: ${brandContext.tone}
|
||||||
|
Taglines: ${(brandContext.taglines || []).join(', ') || 'none'}
|
||||||
|
Event: "${eventLabel}" — ${eventDesc}
|
||||||
|
|
||||||
|
${TRAI_RULES}
|
||||||
|
|
||||||
|
Generate exactly 3 distinct SMS templates. Each must:
|
||||||
|
- Strictly follow all TRAI rules
|
||||||
|
- Use {#var#} for every dynamic variable (e.g. customer name, order ID, product name, tracking URL, delivery date)
|
||||||
|
- Be under 160 characters
|
||||||
|
- Reflect the brand tone
|
||||||
|
- Start with order/event context
|
||||||
|
|
||||||
|
Return ONLY valid JSON:
|
||||||
|
{ "templates": ["template 1", "template 2", "template 3"] }`;
|
||||||
|
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: 'gpt-4o',
|
||||||
|
messages: [{ role: 'user', content: prompt }],
|
||||||
|
response_format: { type: 'json_object' },
|
||||||
|
temperature: 0.7,
|
||||||
|
});
|
||||||
|
const result = JSON.parse(completion.choices[0].message.content);
|
||||||
|
return result.templates || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Parse a raw provider cURL and map its placeholders to the approved template's {#var#} positions. */
|
||||||
|
async function processCurl(rawCurl, approvedTemplate, eventSlug) {
|
||||||
|
const openai = getClient();
|
||||||
|
|
||||||
|
const prompt = `You are an SMS provider integration expert.
|
||||||
|
|
||||||
|
Approved SMS template:
|
||||||
|
${approvedTemplate}
|
||||||
|
|
||||||
|
Event: ${eventSlug}
|
||||||
|
|
||||||
|
Raw cURL from SMS provider:
|
||||||
|
${rawCurl}
|
||||||
|
|
||||||
|
Analyze the cURL:
|
||||||
|
1. Identify all placeholder formats (e.g. {{variable}}, %VAR%, <PLACEHOLDER>)
|
||||||
|
2. Map each to a semantic field name (e.g. customerName, orderId, productName, trackingUrl, deliveryDate)
|
||||||
|
3. Normalize to camelCase in processedCurl
|
||||||
|
4. Build variableMap matching positional {#var#} slots in the approved template
|
||||||
|
|
||||||
|
Return ONLY valid JSON:
|
||||||
|
{
|
||||||
|
"processedCurl": "cURL with normalized placeholder names",
|
||||||
|
"variableMap": {
|
||||||
|
"{#var#}[0]": "fieldName for first {#var#}",
|
||||||
|
"{#var#}[1]": "fieldName for second {#var#}"
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: 'gpt-4o',
|
||||||
|
messages: [{ role: 'user', content: prompt }],
|
||||||
|
response_format: { type: 'json_object' },
|
||||||
|
temperature: 0.2,
|
||||||
|
});
|
||||||
|
return JSON.parse(completion.choices[0].message.content);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { parseBrandContext, generateTemplates, processCurl };
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
require('dotenv').config({ path: require('path').resolve(__dirname, '../.env') });
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
const WORKFLOW_URL_SCRAPE = process.env.WORKFLOW_URL_SCRAPE;
|
||||||
|
const WORKFLOW_URL_TEMPLATE = process.env.WORKFLOW_URL_TEMPLATE;
|
||||||
|
const WORKFLOW_URL_CHECK_CURL = process.env.WORKFLOW_URL_CHECK_CURL;
|
||||||
|
|
||||||
|
if (!WORKFLOW_URL_SCRAPE) throw new Error('Missing WORKFLOW_URL_SCRAPE environment variable');
|
||||||
|
if (!WORKFLOW_URL_TEMPLATE) throw new Error('Missing WORKFLOW_URL_TEMPLATE environment variable');
|
||||||
|
if (!WORKFLOW_URL_CHECK_CURL) throw new Error('Missing WORKFLOW_URL_CHECK_CURL environment variable');
|
||||||
|
|
||||||
|
const TRAI_RULES_TEXT = '1) Max 160 chars. 2) Dynamic vars use {#var#}. 3) Transactional: no promo/URLs unless required. 4) Sender ID DLT-compliant. 5) Allowed punctuation only. 6) Must match event type. 7) Avoid URLs unless explicitly needed. 8) Start with event/order context.';
|
||||||
|
|
||||||
|
const EVENT_DESCRIPTIONS = {
|
||||||
|
placed: 'The customer has successfully placed an order',
|
||||||
|
confirmed: 'The order has been confirmed by the seller/warehouse',
|
||||||
|
dp_assigned: 'A delivery partner has been assigned to deliver the order',
|
||||||
|
pack: 'The order has been packed and is ready for dispatch',
|
||||||
|
cancelled: 'The order has been cancelled',
|
||||||
|
delivery_done: 'The order has been successfully delivered to the customer',
|
||||||
|
};
|
||||||
|
|
||||||
|
function requestId(prefix) {
|
||||||
|
return `${prefix}_${Date.now()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseJsonField(value, fallback) {
|
||||||
|
if (typeof value !== 'string') return value ?? fallback;
|
||||||
|
try {
|
||||||
|
return JSON.parse(value);
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function postWorkflow(url, payload) {
|
||||||
|
try {
|
||||||
|
const response = await axios.post(url, payload, {
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
maxBodyLength: Infinity,
|
||||||
|
timeout: 60000,
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
const details = error.response?.data ? ` | response: ${JSON.stringify(error.response.data)}` : '';
|
||||||
|
throw new Error(`Workflow API error (${url}): ${error.message}${details}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function parseBrandContext(scrapedData = {}) {
|
||||||
|
const markdown = String(scrapedData.markdown || '').slice(0, 8000);
|
||||||
|
const links = Array.isArray(scrapedData.links) ? scrapedData.links.slice(0, 200) : [];
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
task: 'parse_brand_context',
|
||||||
|
request_id: requestId('parse_brand_context'),
|
||||||
|
markdown,
|
||||||
|
links_json: JSON.stringify(links),
|
||||||
|
metadata_json: JSON.stringify(scrapedData.metadata || {}),
|
||||||
|
images_json: JSON.stringify(scrapedData.images || []),
|
||||||
|
raw_json_blob: JSON.stringify(scrapedData.json || {}),
|
||||||
|
output_schema_text: 'Return ONLY valid JSON object with exactly these keys: brandName (string), tone (one of: friendly, professional, formal, casual, energetic), taglines (array of strings, max 3), colors (array of hex color strings, or empty array), relevantImageUrls (array of 3-5 absolute image URLs for logo/hero/product images only; no icons/tracking/data URLs). No markdown, no prose, no extra keys.',
|
||||||
|
must_return_json_only: 'true',
|
||||||
|
};
|
||||||
|
|
||||||
|
const data = await postWorkflow(WORKFLOW_URL_SCRAPE, payload);
|
||||||
|
const output = typeof data === 'string' ? parseJsonField(data, {}) : (data || {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
brandName: String(output.brandName || '').trim() || 'Unknown Brand',
|
||||||
|
tone: ['friendly', 'professional', 'formal', 'casual', 'energetic'].includes(String(output.tone || '').toLowerCase())
|
||||||
|
? String(output.tone).toLowerCase()
|
||||||
|
: 'professional',
|
||||||
|
taglines: Array.isArray(output.taglines) ? output.taglines.slice(0, 3).map(String) : [],
|
||||||
|
colors: Array.isArray(output.colors) ? output.colors.map(String) : [],
|
||||||
|
relevantImageUrls: Array.isArray(output.relevantImageUrls) ? output.relevantImageUrls.map(String) : [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function generateTemplates(brandContext = {}, eventSlug, eventLabel) {
|
||||||
|
const eventDesc = EVENT_DESCRIPTIONS[eventSlug] || `A "${eventLabel}" event in the order lifecycle`;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
task: 'generate_sms_templates',
|
||||||
|
request_id: requestId('generate_sms_templates'),
|
||||||
|
brand_name: String(brandContext.brandName || ''),
|
||||||
|
tone: String(brandContext.tone || ''),
|
||||||
|
taglines_json: JSON.stringify(Array.isArray(brandContext.taglines) ? brandContext.taglines : []),
|
||||||
|
event_slug: String(eventSlug || ''),
|
||||||
|
event_label: String(eventLabel || ''),
|
||||||
|
event_description: eventDesc,
|
||||||
|
trai_rules_text: TRAI_RULES_TEXT,
|
||||||
|
templates_count: '3',
|
||||||
|
max_chars: '160',
|
||||||
|
variable_format: '{#var#}',
|
||||||
|
output_schema_text: 'Return ONLY valid JSON object with exactly one key: templates (array of exactly 3 strings). No extra keys.',
|
||||||
|
must_return_json_only: 'true',
|
||||||
|
};
|
||||||
|
|
||||||
|
const data = await postWorkflow(WORKFLOW_URL_TEMPLATE, payload);
|
||||||
|
const output = typeof data === 'string' ? parseJsonField(data, {}) : (data || {});
|
||||||
|
const templates = Array.isArray(output.templates)
|
||||||
|
? output.templates
|
||||||
|
: parseJsonField(output.templates_json, []);
|
||||||
|
|
||||||
|
return Array.isArray(templates) ? templates.map(String).slice(0, 3) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function processCurl(rawCurl, approvedTemplate, eventSlug) {
|
||||||
|
const payload = {
|
||||||
|
task: 'process_provider_curl',
|
||||||
|
request_id: requestId('process_provider_curl'),
|
||||||
|
raw_curl: String(rawCurl || ''),
|
||||||
|
approved_template: String(approvedTemplate || ''),
|
||||||
|
event_slug: String(eventSlug || ''),
|
||||||
|
instructions_text: 'Identify placeholders, map to semantic field names, normalize placeholders in curl to camelCase, and build positional mapping for {#var#} tokens in approved_template.',
|
||||||
|
output_schema_text: 'Return ONLY valid JSON object with exactly these keys: processedCurl (string), variableMap (object where keys are {#var#}[index] and values are field names in camelCase). No extra keys.',
|
||||||
|
must_return_json_only: 'true',
|
||||||
|
};
|
||||||
|
|
||||||
|
const data = await postWorkflow(WORKFLOW_URL_CHECK_CURL, payload);
|
||||||
|
const output = typeof data === 'string' ? parseJsonField(data, {}) : (data || {});
|
||||||
|
const variableMap = typeof output.variableMap === 'object' && output.variableMap !== null
|
||||||
|
? output.variableMap
|
||||||
|
: parseJsonField(output.variable_map_json, {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
processedCurl: String(output.processedCurl || ''),
|
||||||
|
variableMap: variableMap && typeof variableMap === 'object' ? variableMap : {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { parseBrandContext, generateTemplates, processCurl };
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
const { PixelbinConfig, PixelbinClient } = require('@pixelbin/admin');
|
||||||
|
const { Readable } = require('stream');
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
function getPixelbinClient() {
|
||||||
|
const apiToken = process.env.PIXELBIN_API_TOKEN;
|
||||||
|
if (!apiToken) throw new Error('PIXELBIN_API_TOKEN not set');
|
||||||
|
const config = new PixelbinConfig({
|
||||||
|
domain: 'https://api.pixelbin.io',
|
||||||
|
apiSecret: apiToken,
|
||||||
|
});
|
||||||
|
return new PixelbinClient(config);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Upload a JSON object to Pixelbin. Overwrites if already exists. */
|
||||||
|
async function uploadJSON(folderPath, filename, jsonObject) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
const buffer = Buffer.from(JSON.stringify(jsonObject, null, 2), 'utf-8');
|
||||||
|
const stream = Readable.from(buffer);
|
||||||
|
stream.path = `${filename}.json`;
|
||||||
|
|
||||||
|
await pixelbin.assets.fileUpload({
|
||||||
|
file: stream,
|
||||||
|
path: folderPath,
|
||||||
|
name: filename,
|
||||||
|
access: 'public-read',
|
||||||
|
overwrite: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fetch a JSON file from Pixelbin. Returns null if not found. */
|
||||||
|
async function fetchJSON(folderPath, filename) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
try {
|
||||||
|
const result = await pixelbin.assets.listFiles({ path: folderPath });
|
||||||
|
const items = result.items || [];
|
||||||
|
const file = items.find(
|
||||||
|
f => f.type === 'file' && (f.name === filename || f.name === `${filename}.json`)
|
||||||
|
);
|
||||||
|
if (!file?.url) return null;
|
||||||
|
const bustUrl = `${file.url}?t=${Date.now()}`;
|
||||||
|
const res = await axios.get(bustUrl, { timeout: 10000 });
|
||||||
|
return res.data;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Download an image URL and upload it to Pixelbin. Returns CDN URL or null. */
|
||||||
|
async function uploadImageFromUrl(imageUrl, folderPath, filename) {
|
||||||
|
try {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
const res = await axios.get(imageUrl, { responseType: 'arraybuffer', timeout: 15000 });
|
||||||
|
const buffer = Buffer.from(res.data);
|
||||||
|
const rawExt = (imageUrl.split('?')[0].split('.').pop() || 'jpg').toLowerCase();
|
||||||
|
const ext = ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(rawExt) ? rawExt : 'jpg';
|
||||||
|
const stream = Readable.from(buffer);
|
||||||
|
stream.path = `${filename}.${ext}`;
|
||||||
|
const uploaded = await pixelbin.assets.fileUpload({
|
||||||
|
file: stream,
|
||||||
|
path: folderPath,
|
||||||
|
name: filename,
|
||||||
|
access: 'public-read',
|
||||||
|
overwrite: true,
|
||||||
|
});
|
||||||
|
return uploaded?.url || null;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Image upload failed (${imageUrl}):`, err.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** List all image files in a Pixelbin folder. Returns [{ name, url }] */
|
||||||
|
async function listImages(folderPath) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
try {
|
||||||
|
const result = await pixelbin.assets.listFiles({ path: folderPath });
|
||||||
|
return (result.items || [])
|
||||||
|
.filter(f => f.type === 'file')
|
||||||
|
.map(f => ({ name: f.name, url: f.url }));
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** List template file names (slugs) in a Pixelbin folder. */
|
||||||
|
async function listTemplateFiles(folderPath) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
try {
|
||||||
|
const result = await pixelbin.assets.listFiles({ path: folderPath });
|
||||||
|
return (result.items || [])
|
||||||
|
.filter(f => f.type === 'file')
|
||||||
|
.map(f => f.name);
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Delete a single file from Pixelbin by its fileId. */
|
||||||
|
async function deleteFile(fileId) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
try {
|
||||||
|
await pixelbin.assets.deleteFile({ fileId });
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Failed to delete ${fileId}:`, err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** List all file items (with fileId) from a folder. */
|
||||||
|
async function listFilesWithId(folderPath) {
|
||||||
|
const pixelbin = getPixelbinClient();
|
||||||
|
try {
|
||||||
|
const result = await pixelbin.assets.listFiles({ path: folderPath });
|
||||||
|
return (result.items || []).filter(f => f.type === 'file');
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete all files belonging to a specific business.
|
||||||
|
* Business root: {merchantId}/{businessId}/
|
||||||
|
*/
|
||||||
|
async function deleteBusinessFiles(merchantId, businessId) {
|
||||||
|
const root = `${merchantId}/${businessId}`;
|
||||||
|
const [rootFiles, templateFiles, imageFiles] = await Promise.all([
|
||||||
|
listFilesWithId(root),
|
||||||
|
listFilesWithId(`${root}/templates`),
|
||||||
|
listFilesWithId(`${root}/images`),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const all = [...rootFiles, ...templateFiles, ...imageFiles];
|
||||||
|
await Promise.all(all.map(f => deleteFile(f.fileId)));
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
uploadJSON,
|
||||||
|
fetchJSON,
|
||||||
|
uploadImageFromUrl,
|
||||||
|
listImages,
|
||||||
|
listTemplateFiles,
|
||||||
|
deleteFile,
|
||||||
|
listFilesWithId,
|
||||||
|
deleteBusinessFiles,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
/**
|
||||||
|
* workflowSender.js
|
||||||
|
*
|
||||||
|
* Temporary workflow-based send module for Published (whitelisted) templates.
|
||||||
|
* This is a separate code path from the legacy cURL execution route.
|
||||||
|
* The legacy cURL code in businesses.js is preserved and NOT removed.
|
||||||
|
*
|
||||||
|
* Uses env var: WORKFLOW_URL_TEST_SMS
|
||||||
|
*/
|
||||||
|
|
||||||
|
const axios = require('axios');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send an SMS via the temporary workflow endpoint.
|
||||||
|
*
|
||||||
|
* @param {object} params
|
||||||
|
* @param {string} params.senderId - Provider sender ID
|
||||||
|
* @param {string} params.toNumber - Destination phone number
|
||||||
|
* @param {string} params.content - Resolved template content
|
||||||
|
* @returns {Promise<{ success: boolean, statusCode: number, response: any }>}
|
||||||
|
*/
|
||||||
|
async function sendViaWorkflow({ senderId, toNumber, content }) {
|
||||||
|
const workflowUrl = process.env.WORKFLOW_URL_TEST_SMS;
|
||||||
|
|
||||||
|
if (!workflowUrl || !workflowUrl.trim()) {
|
||||||
|
throw new Error('WORKFLOW_URL_TEST_SMS is not configured');
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload = { senderId, toNumber, content };
|
||||||
|
|
||||||
|
const response = await axios.post(workflowUrl.trim(), payload, {
|
||||||
|
timeout: 20000,
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
validateStatus: () => true, // relay all status codes; don't throw on 4xx/5xx
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: response.status >= 200 && response.status < 300,
|
||||||
|
statusCode: response.status,
|
||||||
|
response: response.data,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { sendViaWorkflow };
|
||||||
Loading…
Reference in New Issue
Block a user