AdPlatform-Client/Client-Registration

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:

{
  "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

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:

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