96 lines
3.6 KiB
Markdown
96 lines
3.6 KiB
Markdown
# AdPlatform Registration Portal
|
||
|
||
Client-facing registration wizard for new AdPlatform prospects. Collects contact and business information through a multi-step wizard, then submits to the Registration Azure Function for review.
|
||
|
||
## Architecture
|
||
|
||
```
|
||
RegistrationPortal/ React frontend (webpack)
|
||
├── src/
|
||
│ ├── auth/ Entra External ID (CIAM) auth provider
|
||
│ ├── context/ RegistrationContext — wizard state management
|
||
│ ├── services/ API service layer (calls Registration Function)
|
||
│ ├── components/
|
||
│ │ ├── Shell.jsx Layout wrapper (matches Admin shell)
|
||
│ │ ├── ProgressStepper Visual step indicator
|
||
│ │ └── steps/ Individual wizard step components
|
||
│ └── styles/ CSS (custom properties, matches Admin theme)
|
||
│
|
||
Registration/ Azure Function backend (already deployed)
|
||
├── Functions/ HTTP endpoints (register, pending, complete, reject)
|
||
├── Data/ Interface + SqlDataService (SP caller)
|
||
└── Mock/ In-memory mock for development
|
||
```
|
||
|
||
## Wizard Flow
|
||
|
||
| Step | Component | API Call |
|
||
|------|-----------|----------|
|
||
| 0 - Sign In | `SignInStep` | Entra External ID (MSAL popup) |
|
||
| 1 - Contact | `ContactStep` | (client-side only) |
|
||
| 2 - Business | `BusinessStep` | (client-side only) |
|
||
| 3 - Review | `ReviewStep` | `POST /api/registration/register` |
|
||
| 4 - Confirm | `ConfirmationStep` | — |
|
||
|
||
Data is collected across steps 1–2 and submitted as a single `RegisterRequest` in step 3, matching the Registration Function's contract.
|
||
|
||
## Data Contract
|
||
|
||
The wizard submits a `RegisterRequest` matching `RegistrationFunctions.cs`:
|
||
|
||
```json
|
||
{
|
||
"businessName": "Acme Corp",
|
||
"websiteUrl": "https://acme.com",
|
||
"businessCategory": "retail",
|
||
"businessDescription": "...",
|
||
"contactName": "Jane Smith",
|
||
"contactEmail": "jane@acme.com",
|
||
"contactPhone": "(555) 123-4567",
|
||
"entraSubjectId": "entra-abc123"
|
||
}
|
||
```
|
||
|
||
## Development
|
||
|
||
```bash
|
||
npm install
|
||
npm start # http://localhost:3001
|
||
```
|
||
|
||
Runs in **mock mode** when `API_BASE_URL` is empty in `authConfig.js`. To connect to the real Registration Function, update the constants in `src/auth/authConfig.js`:
|
||
|
||
```js
|
||
export const API_BASE_URL = 'https://adpregapi.usimdev.com';
|
||
export const API_FUNCTION_KEY = 'your-function-key';
|
||
```
|
||
|
||
## Auth Setup (TODO)
|
||
|
||
The `AuthProvider` is currently **stubbed** for development. To wire Entra External ID:
|
||
|
||
1. Create an External ID tenant in Azure
|
||
2. Register an app with redirect URI = portal URL
|
||
3. Enable social providers (Google, Apple) in the External ID user flows
|
||
4. Update `authConfig.js` with tenant details
|
||
5. Replace stub logic in `AuthProvider.jsx` with MSAL `loginPopup` / `logoutPopup`
|
||
|
||
## Approval Flow
|
||
|
||
After submission, the Registration Function holds the application as `Pending`. The Admin console's **Clients → Pending** tab shows these for review. When an admin clicks **Approve**, the system:
|
||
|
||
1. Calls `POST /api/registration/action/{id}/complete` with a `platformClientId`
|
||
2. Creates advertising sub-accounts with naming convention: `ADP-{BusinessName}-{ClientId}`
|
||
- Google Ads (under MCC)
|
||
- Meta Business Manager
|
||
- TikTok Business Center
|
||
3. Creates the client record in the main platform database
|
||
|
||
## Conventions
|
||
|
||
- **React**: Context pattern (createContext / useHook / Provider), no prop drilling
|
||
- **CSS**: Custom properties, DM Sans, kebab-case class names
|
||
- **Build**: Webpack + Babel (matches Admin project)
|
||
- **API**: Azure Functions with `x-functions-key` auth
|
||
- **Backend**: `@action`/`@rqst`/`@resp` stored procedure pattern
|