Merge branch 'develop' of https://github.com/Cameleonapp/dcb-backoffice into develop
This commit is contained in:
diallolatoile
commit
a3deab2a32
@ -53,7 +53,8 @@
|
||||
"node_modules/datatables.net-buttons/js/buttons.html5.js",
|
||||
"node_modules/datatables.net-buttons/js/buttons.print.min.js",
|
||||
"node_modules/datatables.net-select/js/dataTables.select.min.js",
|
||||
"node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.js"
|
||||
"node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.js",
|
||||
"node_modules/mermaid/dist/mermaid.min.js"
|
||||
],
|
||||
"allowedCommonJsDependencies": [
|
||||
"jsvectormap/dist/maps/world-merc.js",
|
||||
|
||||
1224
package-lock.json
generated
1224
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -56,6 +56,7 @@
|
||||
"keycloak-js": "^26.2.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mermaid": "^11.12.2",
|
||||
"ng-otp-input": "^2.0.9",
|
||||
"ng2-charts": "^8.0.0",
|
||||
"ngx-countup": "^13.2.0",
|
||||
|
||||
@ -1 +1,785 @@
|
||||
<p>Documentation</p>
|
||||
<div class="documentation-container">
|
||||
<!-- Background Effects -->
|
||||
<div class="bg-effects">
|
||||
<div class="bg-blob bg-blob-1"></div>
|
||||
<div class="bg-blob bg-blob-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<!-- Header -->
|
||||
<header class="doc-header">
|
||||
<div class="version-badge">
|
||||
<ng-icon name="lucideZap" size="16"></ng-icon>
|
||||
<span>DCB Hub v1.0</span>
|
||||
</div>
|
||||
<h1 class="doc-title">Documentation d'Intégration</h1>
|
||||
<p class="doc-subtitle">
|
||||
Guide complet pour intégrer le DCB Hub - Plateforme d'agrégation de paiements Direct Carrier Billing
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="doc-nav">
|
||||
@for (section of sections; track section.id) {
|
||||
<button
|
||||
class="nav-btn"
|
||||
[class.active]="activeSection() === section.id"
|
||||
(click)="setActiveSection(section.id)"
|
||||
>
|
||||
<ng-icon [name]="section.icon" size="18"></ng-icon>
|
||||
{{ section.label }}
|
||||
</button>
|
||||
}
|
||||
</nav>
|
||||
|
||||
<!-- Content Sections -->
|
||||
<div class="sections-container">
|
||||
<!-- Overview Section -->
|
||||
@if (activeSection() === 'overview') {
|
||||
<section class="section-content animate-fadeIn">
|
||||
<!-- Feature Cards -->
|
||||
<div class="feature-grid">
|
||||
@for (feature of features; track feature.title) {
|
||||
<div class="feature-card" [class]="'feature-' + feature.color">
|
||||
<div class="feature-icon" [class]="'icon-' + feature.color">
|
||||
<ng-icon [name]="feature.icon" size="24"></ng-icon>
|
||||
</div>
|
||||
<h3 class="feature-title">{{ feature.title }}</h3>
|
||||
<p class="feature-desc">{{ feature.desc }}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<div class="config-section">
|
||||
<h2 class="config-title">
|
||||
<ng-icon name="lucideSettings" size="24"></ng-icon>
|
||||
Configuration Requise
|
||||
</h2>
|
||||
<div class="config-grid">
|
||||
<div class="config-block">
|
||||
<h3 class="config-block-title">Headers Obligatoires</h3>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span class="code-label">HTTP Headers</span>
|
||||
<span class="code-lang">http</span>
|
||||
</div>
|
||||
<pre class="code-content"><code>X-Merchant-ID: votre-merchant-id
|
||||
X-API-Key: votre-api-key
|
||||
X-COUNTRY: CI (Côte d'Ivoire), SN (Sénégal), etc.
|
||||
X-OPERATOR: ORANGE, MTN, AIRTEL</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-block">
|
||||
<h3 class="config-block-title">Environnements</h3>
|
||||
<div class="env-list">
|
||||
<div class="env-item">
|
||||
<div class="env-indicator env-sandbox"></div>
|
||||
<div class="env-info">
|
||||
<p class="env-name">Sandbox</p>
|
||||
<p class="env-url">https://sandbox.dcb-hub.pixpay.sn/api/v1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="env-item">
|
||||
<div class="env-indicator env-prod"></div>
|
||||
<div class="env-info">
|
||||
<p class="env-name">Production</p>
|
||||
<p class="env-url">https://api.dcb-hub.pixpay.sn/api/v1</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
<!-- Call Flow Section -->
|
||||
@if (activeSection() === 'flow') {
|
||||
<section class="section-content animate-fadeIn">
|
||||
<div class="flow-header">
|
||||
<h2 class="flow-title">
|
||||
<ng-icon name="lucidePlay" size="20"></ng-icon>
|
||||
Flux Principal d'Intégration
|
||||
</h2>
|
||||
<p class="flow-desc">
|
||||
Ce diagramme illustre le flux complet depuis l'authentification OTP jusqu'à l'activation du service.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mermaid-container">
|
||||
<pre class="mermaid">{{ mermaidDiagram }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="phases-grid">
|
||||
<div class="phase-card">
|
||||
<span class="phase-badge phase-indigo">Phase 1-2</span>
|
||||
<h3 class="phase-title">Authentification</h3>
|
||||
<p class="phase-desc">OTP Challenge & Validation</p>
|
||||
</div>
|
||||
<div class="phase-card">
|
||||
<span class="phase-badge phase-blue">Phase 3-4</span>
|
||||
<h3 class="phase-title">Souscription</h3>
|
||||
<p class="phase-desc">Création abonnement & Webhook</p>
|
||||
</div>
|
||||
<div class="phase-card">
|
||||
<span class="phase-badge phase-orange">Phase 5-6</span>
|
||||
<h3 class="phase-title">Facturation</h3>
|
||||
<p class="phase-desc">Charge & SMS confirmation</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
<!-- Integration Steps Section -->
|
||||
@if (activeSection() === 'steps') {
|
||||
<section class="section-content animate-fadeIn steps-section">
|
||||
@for (step of steps; track step.id) {
|
||||
<div class="step-card">
|
||||
<button class="step-header" (click)="toggleStep(step)">
|
||||
<div class="step-icon" [class]="getStepColorClass(step.color)">
|
||||
<ng-icon [name]="step.icon" size="22"></ng-icon>
|
||||
</div>
|
||||
<div class="step-info">
|
||||
<span class="step-label">Étape {{ step.id }}</span>
|
||||
<h3 class="step-title">{{ step.title }}</h3>
|
||||
<p class="step-desc">{{ step.description }}</p>
|
||||
</div>
|
||||
<div class="step-chevron" [class.open]="step.isOpen">
|
||||
<ng-icon name="lucideChevronRight" size="20"></ng-icon>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@if (step.isOpen) {
|
||||
<div class="step-content animate-fadeIn">
|
||||
@if (step.endpoint) {
|
||||
<div class="endpoint-badge">
|
||||
<span class="method" [class]="getMethodClass(step.endpoint.method)">
|
||||
{{ step.endpoint.method }}
|
||||
</span>
|
||||
<span class="path">{{ step.endpoint.path }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (step.headers) {
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span class="code-label">Headers requis</span>
|
||||
<button class="copy-btn" (click)="copyCode(step.headers, 'headers-' + step.id)">
|
||||
@if (copiedCode() === 'headers-' + step.id) {
|
||||
<ng-icon name="lucideCheck" size="14"></ng-icon>
|
||||
} @else {
|
||||
<ng-icon name="lucideCopy" size="14"></ng-icon>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<pre class="code-content"><code>{{ step.headers }}</code></pre>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (step.requestBody) {
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span class="code-label">Request Body</span>
|
||||
<div class="code-actions">
|
||||
<span class="code-lang">json</span>
|
||||
<button class="copy-btn" (click)="copyCode(step.requestBody, 'request-' + step.id)">
|
||||
@if (copiedCode() === 'request-' + step.id) {
|
||||
<ng-icon name="lucideCheck" size="14"></ng-icon>
|
||||
} @else {
|
||||
<ng-icon name="lucideCopy" size="14"></ng-icon>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code-content"><code>{{ step.requestBody }}</code></pre>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (step.responseBody) {
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span class="code-label">Response</span>
|
||||
<div class="code-actions">
|
||||
<span class="code-lang">json</span>
|
||||
<button class="copy-btn" (click)="copyCode(step.responseBody, 'response-' + step.id)">
|
||||
@if (copiedCode() === 'response-' + step.id) {
|
||||
<ng-icon name="lucideCheck" size="14"></ng-icon>
|
||||
} @else {
|
||||
<ng-icon name="lucideCopy" size="14"></ng-icon>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code-content"><code>{{ step.responseBody }}</code></pre>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (step.note) {
|
||||
<div class="note-box" [class]="getNoteClass(step.note.type)">
|
||||
<p>{{ step.note.text }}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
|
||||
<!-- API Reference Section -->
|
||||
@if (activeSection() === 'api') {
|
||||
<section class="section-content animate-fadeIn">
|
||||
<!-- API Tabs -->
|
||||
<div class="api-tabs">
|
||||
@for (tab of apiTabs; track tab.id) {
|
||||
<button
|
||||
class="api-tab"
|
||||
[class.active]="activeApiTab() === tab.id"
|
||||
(click)="setActiveApiTab(tab.id)"
|
||||
>
|
||||
@if (tab.id === 'swagger') {
|
||||
<ng-icon name="lucideFileJson" size="16"></ng-icon>
|
||||
}
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- OTP Tab -->
|
||||
@if (activeApiTab() === 'otp') {
|
||||
<div class="api-content animate-fadeIn">
|
||||
<div class="api-section">
|
||||
<h3 class="api-section-title">
|
||||
<ng-icon name="lucideShield" size="24"></ng-icon>
|
||||
OTP Challenge Endpoints
|
||||
</h3>
|
||||
|
||||
<div class="api-endpoints">
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/otp-challenge/initiate</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Initie un challenge OTP pour authentifier l'utilisateur</p>
|
||||
<div class="endpoint-details">
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Paramètres</h4>
|
||||
<table class="params-table">
|
||||
<tbody>
|
||||
<tr><td>msisdn</td><td>string, required</td></tr>
|
||||
<tr><td>channel</td><td>SMS | USSD | IVR</td></tr>
|
||||
<tr><td>serviceId</td><td>string</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Headers</h4>
|
||||
<table class="params-table">
|
||||
<tbody>
|
||||
<tr><td>X-Merchant-ID</td><td>required</td></tr>
|
||||
<tr><td>X-API-Key</td><td>required</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/otp-challenge/{challengeId}/verify</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Vérifie le code OTP entré par l'utilisateur</p>
|
||||
<div class="endpoint-details">
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Path Parameters</h4>
|
||||
<table class="params-table">
|
||||
<tbody>
|
||||
<tr><td>challengeId</td><td>string, required</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Responses</h4>
|
||||
<div class="responses-list">
|
||||
<div class="response-item">
|
||||
<span class="response-code response-success">200</span>
|
||||
<span>Code validé</span>
|
||||
</div>
|
||||
<div class="response-item">
|
||||
<span class="response-code response-warning">400</span>
|
||||
<span>Code invalide</span>
|
||||
</div>
|
||||
<div class="response-item">
|
||||
<span class="response-code response-error">404</span>
|
||||
<span>Challenge non trouvé</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Subscriptions Tab -->
|
||||
@if (activeApiTab() === 'subscriptions') {
|
||||
<div class="api-content animate-fadeIn">
|
||||
<div class="api-section">
|
||||
<h3 class="api-section-title">
|
||||
<ng-icon name="lucideUsers" size="24"></ng-icon>
|
||||
Subscriptions Endpoints
|
||||
</h3>
|
||||
|
||||
<div class="api-endpoints">
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/subscriptions</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Créer une nouvelle souscription</p>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/subscriptions</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Liste des souscriptions avec pagination et filtres</p>
|
||||
<div class="param-tags">
|
||||
<span class="param-tag">page</span>
|
||||
<span class="param-tag">limit</span>
|
||||
<span class="param-tag">status</span>
|
||||
<span class="param-tag">periodicity</span>
|
||||
<span class="param-tag">serviceId</span>
|
||||
<span class="param-tag">merchantPartnerId</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/subscriptions/{id}</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Détails d'une souscription</p>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-delete">DELETE</span>
|
||||
<span class="path">/api/v1/subscriptions/{id}</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Annuler une souscription</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-box">
|
||||
<h4 class="status-title">Statuts possibles</h4>
|
||||
<div class="status-tags">
|
||||
@for (status of subscriptionStatuses; track status) {
|
||||
<span class="status-tag">{{ status }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Payments Tab -->
|
||||
@if (activeApiTab() === 'payments') {
|
||||
<div class="api-content animate-fadeIn">
|
||||
<div class="api-section">
|
||||
<h3 class="api-section-title">
|
||||
<ng-icon name="lucideCreditCard" size="24"></ng-icon>
|
||||
Payments Endpoints
|
||||
</h3>
|
||||
|
||||
<div class="api-endpoints">
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/payments/charge</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Créer une nouvelle charge</p>
|
||||
|
||||
<div class="code-block mt-3">
|
||||
<div class="code-header">
|
||||
<span class="code-label">ChargeDto Schema</span>
|
||||
<span class="code-lang">typescript</span>
|
||||
</div>
|
||||
<pre class="code-content"><code>interface ChargeDto {
|
||||
userToken: string; // ISE2 token from OTP validation
|
||||
amount: number; // Amount to charge
|
||||
currency: string; // XOF, XAF, USD, EUR
|
||||
description: string; // Payment description
|
||||
reference?: string; // Unique payment reference
|
||||
subscriptionId?: number;
|
||||
callbackUrl?: string;
|
||||
metadata?: Record<string, any>;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/payments</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Liste des paiements avec filtres avancés</p>
|
||||
<div class="endpoint-details three-cols">
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Pagination</h4>
|
||||
<ul class="detail-list">
|
||||
<li>page (default: 1)</li>
|
||||
<li>limit (max: 100)</li>
|
||||
<li>sortBy, sortOrder</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Filtres</h4>
|
||||
<ul class="detail-list">
|
||||
<li>type: MM, BANK, CHEQUE</li>
|
||||
<li>status: SUCCESS, FAILED, PENDING</li>
|
||||
<li>currency, amountMin, amountMax</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="detail-col">
|
||||
<h4 class="detail-title">Dates</h4>
|
||||
<ul class="detail-list">
|
||||
<li>createdFrom, createdTo</li>
|
||||
<li>completedFrom, completedTo</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/payments/{paymentId}</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Détails d'un paiement par ID</p>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/payments/{paymentId}/refund</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Rembourser un paiement (total ou partiel)</p>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-post">POST</span>
|
||||
<span class="path">/api/v1/payments/{paymentId}/retry</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Réessayer un paiement échoué</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Operators Tab -->
|
||||
@if (activeApiTab() === 'operators') {
|
||||
<div class="api-content animate-fadeIn">
|
||||
<div class="api-section">
|
||||
<h3 class="api-section-title">
|
||||
<ng-icon name="lucideSettings" size="24"></ng-icon>
|
||||
Operators Endpoints
|
||||
</h3>
|
||||
|
||||
<div class="api-endpoints">
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/operators</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Liste des opérateurs disponibles</p>
|
||||
<div class="param-tags">
|
||||
<span class="param-tag">operatorCode</span>
|
||||
<span class="param-tag">period</span>
|
||||
<span class="param-tag">startDate</span>
|
||||
<span class="param-tag">endDate</span>
|
||||
<span class="param-tag">active</span>
|
||||
<span class="param-tag">country</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/operators/{operatorCode}/health</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Métriques de santé d'un opérateur</p>
|
||||
</div>
|
||||
|
||||
<div class="api-endpoint">
|
||||
<div class="endpoint-badge">
|
||||
<span class="method method-get">GET</span>
|
||||
<span class="path">/api/v1/operators/detect/{msisdn}</span>
|
||||
</div>
|
||||
<p class="endpoint-desc">Détection automatique de l'opérateur à partir du MSISDN</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-block mt-4">
|
||||
<div class="code-header">
|
||||
<span class="code-label">OperatorResponseDto</span>
|
||||
<span class="code-lang">typescript</span>
|
||||
</div>
|
||||
<pre class="code-content"><code>interface OperatorResponseDto {
|
||||
id: string;
|
||||
code: string; // ORANGE, MTN, AIRTEL, etc.
|
||||
name: string; // Nom complet
|
||||
country: string; // CI, SN, CM, CD, etc.
|
||||
active: boolean;
|
||||
features: {
|
||||
otp: boolean;
|
||||
subscription: boolean;
|
||||
oneTimePayment: boolean;
|
||||
refund: boolean;
|
||||
};
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Swagger Tab -->
|
||||
@if (activeApiTab() === 'swagger') {
|
||||
<div class="api-content animate-fadeIn">
|
||||
<!-- Swagger Header -->
|
||||
<div class="swagger-header">
|
||||
<div class="swagger-info">
|
||||
<h3 class="swagger-title">
|
||||
<ng-icon name="lucideFileJson" size="24"></ng-icon>
|
||||
{{ swaggerInfo.title }}
|
||||
</h3>
|
||||
<p class="swagger-desc">{{ swaggerInfo.description }}</p>
|
||||
<span class="swagger-version">Version {{ swaggerInfo.version }}</span>
|
||||
</div>
|
||||
<div class="swagger-search">
|
||||
<ng-icon name="lucideSearch" size="18"></ng-icon>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher un endpoint..."
|
||||
[value]="swaggerSearch()"
|
||||
(input)="onSwaggerSearch($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swagger-layout">
|
||||
<!-- Endpoints List -->
|
||||
<div class="swagger-sidebar">
|
||||
@for (tag of getFilteredSwaggerTags(); track tag.name) {
|
||||
<div class="swagger-tag-group">
|
||||
<button class="swagger-tag-header" (click)="toggleSwaggerTag(tag)">
|
||||
<span class="tag-name">{{ tag.name }}</span>
|
||||
<span class="tag-count">{{ tag.endpoints.length }}</span>
|
||||
<ng-icon
|
||||
[name]="tag.isOpen ? 'lucideChevronDown' : 'lucideChevronRight'"
|
||||
size="16"
|
||||
></ng-icon>
|
||||
</button>
|
||||
@if (tag.isOpen) {
|
||||
<div class="swagger-tag-endpoints">
|
||||
@for (endpoint of tag.endpoints; track endpoint.operationId) {
|
||||
<button
|
||||
class="swagger-endpoint-item"
|
||||
[class.selected]="selectedSwaggerEndpoint()?.operationId === endpoint.operationId"
|
||||
(click)="selectSwaggerEndpoint(endpoint)"
|
||||
>
|
||||
<span class="endpoint-method" [class]="getMethodClass(endpoint.method)">
|
||||
{{ endpoint.method }}
|
||||
</span>
|
||||
<span class="endpoint-path">{{ endpoint.path }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Endpoint Detail -->
|
||||
<div class="swagger-detail">
|
||||
@if (selectedSwaggerEndpoint(); as endpoint) {
|
||||
<div class="endpoint-detail-card">
|
||||
<div class="endpoint-detail-header">
|
||||
<div class="endpoint-badge large">
|
||||
<span class="method" [class]="getMethodClass(endpoint.method)">
|
||||
{{ endpoint.method }}
|
||||
</span>
|
||||
<span class="path">{{ endpoint.path }}</span>
|
||||
</div>
|
||||
<button class="close-btn" (click)="closeSwaggerDetail()">×</button>
|
||||
</div>
|
||||
|
||||
<h4 class="endpoint-summary">{{ endpoint.summary }}</h4>
|
||||
@if (endpoint.description) {
|
||||
<p class="endpoint-description">{{ endpoint.description }}</p>
|
||||
}
|
||||
|
||||
<!-- Parameters -->
|
||||
@if (endpoint.parameters && endpoint.parameters.length > 0) {
|
||||
<div class="endpoint-section">
|
||||
<h5 class="section-title">Paramètres</h5>
|
||||
|
||||
@if (getParametersByLocation(endpoint.parameters, 'path').length > 0) {
|
||||
<div class="params-group">
|
||||
<h6 class="params-group-title">Path Parameters</h6>
|
||||
<div class="params-list">
|
||||
@for (param of getParametersByLocation(endpoint.parameters, 'path'); track param.name) {
|
||||
<div class="param-item">
|
||||
<div class="param-name">
|
||||
{{ param.name }}
|
||||
@if (param.required) {
|
||||
<span class="required-badge">required</span>
|
||||
}
|
||||
</div>
|
||||
<div class="param-type">{{ param.schema?.type || 'string' }}</div>
|
||||
@if (param.description) {
|
||||
<div class="param-desc">{{ param.description }}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (getParametersByLocation(endpoint.parameters, 'query').length > 0) {
|
||||
<div class="params-group">
|
||||
<h6 class="params-group-title">Query Parameters</h6>
|
||||
<div class="params-list">
|
||||
@for (param of getParametersByLocation(endpoint.parameters, 'query'); track param.name) {
|
||||
<div class="param-item">
|
||||
<div class="param-name">
|
||||
{{ param.name }}
|
||||
@if (param.required) {
|
||||
<span class="required-badge">required</span>
|
||||
}
|
||||
</div>
|
||||
<div class="param-type">
|
||||
{{ param.schema?.type || 'string' }}
|
||||
@if (param.schema?.enum) {
|
||||
<span class="param-enum">enum: {{ param.schema.enum.join(', ') }}</span>
|
||||
}
|
||||
</div>
|
||||
@if (param.description) {
|
||||
<div class="param-desc">{{ param.description }}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (getParametersByLocation(endpoint.parameters, 'header').length > 0) {
|
||||
<div class="params-group">
|
||||
<h6 class="params-group-title">Header Parameters</h6>
|
||||
<div class="params-list">
|
||||
@for (param of getParametersByLocation(endpoint.parameters, 'header'); track param.name) {
|
||||
<div class="param-item">
|
||||
<div class="param-name">
|
||||
{{ param.name }}
|
||||
@if (param.required) {
|
||||
<span class="required-badge">required</span>
|
||||
}
|
||||
</div>
|
||||
<div class="param-type">{{ param.schema?.type || 'string' }}</div>
|
||||
@if (param.description) {
|
||||
<div class="param-desc">{{ param.description }}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Request Body -->
|
||||
@if (endpoint.requestBody) {
|
||||
<div class="endpoint-section">
|
||||
<h5 class="section-title">Request Body</h5>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span class="code-label">application/json</span>
|
||||
<span class="code-lang">json</span>
|
||||
</div>
|
||||
<pre class="code-content"><code>{{ formatJson(endpoint.requestBody) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Responses -->
|
||||
@if (endpoint.responses) {
|
||||
<div class="endpoint-section">
|
||||
<h5 class="section-title">Responses</h5>
|
||||
<div class="responses-grid">
|
||||
@for (response of endpoint.responses | keyvalue; track response.key) {
|
||||
<div class="response-card" [class]="'response-' + $any(response.value).charAt(0)">
|
||||
<span class="response-status">{{ response.key }}</span>
|
||||
<span class="response-desc"> {{ $any(response.value).description }}</span>
|
||||
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Security -->
|
||||
@if (endpoint.security && endpoint.security.length > 0) {
|
||||
<div class="endpoint-section">
|
||||
<h5 class="section-title">
|
||||
<ng-icon name="lucideShield" size="16"></ng-icon>
|
||||
Authentification requise
|
||||
</h5>
|
||||
<div class="security-badge">
|
||||
<ng-icon name="lucideShield" size="14"></ng-icon>
|
||||
Bearer Token (JWT)
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="swagger-placeholder">
|
||||
<ng-icon name="lucideFileJson" size="48"></ng-icon>
|
||||
<p>Sélectionnez un endpoint pour voir les détails</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="doc-footer">
|
||||
<div class="footer-brand">
|
||||
<ng-icon name="lucideZap" size="20"></ng-icon>
|
||||
<span class="footer-name">DCB Hub</span>
|
||||
<span class="footer-divider">|</span>
|
||||
<span class="footer-version">v1.0.0</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#" class="footer-link">
|
||||
<ng-icon name="lucideExternalLink" size="14"></ng-icon>
|
||||
API Status
|
||||
</a>
|
||||
<a href="#" class="footer-link">
|
||||
<ng-icon name="lucideExternalLink" size="14"></ng-icon>
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
1504
src/app/modules/documentation/documentation.scss
Normal file
1504
src/app/modules/documentation/documentation.scss
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,784 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit, AfterViewInit, signal } from '@angular/core';
|
||||
import { CommonModule, KeyValuePipe } from '@angular/common';
|
||||
import { NgIcon, provideIcons } from '@ng-icons/core';
|
||||
import {
|
||||
lucideZap,
|
||||
lucideShield,
|
||||
lucideUsers,
|
||||
lucideCreditCard,
|
||||
lucideBell,
|
||||
lucideSettings,
|
||||
lucideBookOpen,
|
||||
lucideCode,
|
||||
lucideArrowRight,
|
||||
lucideExternalLink,
|
||||
lucideChevronRight,
|
||||
lucideChevronDown,
|
||||
lucidePlay,
|
||||
lucideCopy,
|
||||
lucideCheck,
|
||||
lucideMessageSquare,
|
||||
lucideHome,
|
||||
lucideFileJson,
|
||||
lucideSearch,
|
||||
lucideFilter,
|
||||
} from '@ng-icons/lucide';
|
||||
|
||||
declare var mermaid: any;
|
||||
|
||||
interface Step {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
isOpen: boolean;
|
||||
endpoint?: {
|
||||
method: string;
|
||||
path: string;
|
||||
};
|
||||
requestBody?: string;
|
||||
responseBody?: string;
|
||||
note?: {
|
||||
type: 'warning' | 'success' | 'info' | 'purple';
|
||||
text: string;
|
||||
};
|
||||
headers?: string;
|
||||
}
|
||||
|
||||
interface SwaggerEndpoint {
|
||||
method: string;
|
||||
path: string;
|
||||
summary: string;
|
||||
description?: string;
|
||||
operationId: string;
|
||||
tags: string[];
|
||||
parameters?: any[];
|
||||
requestBody?: any;
|
||||
responses?: any;
|
||||
security?: any[];
|
||||
}
|
||||
|
||||
interface SwaggerTag {
|
||||
name: string;
|
||||
endpoints: SwaggerEndpoint[];
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-documentation',
|
||||
standalone: true,
|
||||
imports: [CommonModule, NgIcon, KeyValuePipe],
|
||||
viewProviders: [
|
||||
provideIcons({
|
||||
lucideZap,
|
||||
lucideShield,
|
||||
lucideUsers,
|
||||
lucideCreditCard,
|
||||
lucideBell,
|
||||
lucideSettings,
|
||||
lucideBookOpen,
|
||||
lucideCode,
|
||||
lucideArrowRight,
|
||||
lucideExternalLink,
|
||||
lucideChevronRight,
|
||||
lucideChevronDown,
|
||||
lucidePlay,
|
||||
lucideCopy,
|
||||
lucideCheck,
|
||||
lucideMessageSquare,
|
||||
lucideHome,
|
||||
lucideFileJson,
|
||||
lucideSearch,
|
||||
lucideFilter,
|
||||
}),
|
||||
],
|
||||
templateUrl: './documentation.html',
|
||||
styleUrl: './documentation.scss',
|
||||
})
|
||||
export class Documentation {}
|
||||
export class Documentation implements OnInit, AfterViewInit {
|
||||
activeSection = signal<string>('overview');
|
||||
activeApiTab = signal<string>('otp');
|
||||
copiedCode = signal<string | null>(null);
|
||||
swaggerSearch = signal<string>('');
|
||||
selectedSwaggerEndpoint = signal<SwaggerEndpoint | null>(null);
|
||||
|
||||
sections = [
|
||||
{ id: 'overview', label: "Vue d'ensemble", icon: 'lucideBookOpen' },
|
||||
{ id: 'flow', label: 'Call Flow', icon: 'lucidePlay' },
|
||||
{ id: 'steps', label: "Étapes d'intégration", icon: 'lucideArrowRight' },
|
||||
{ id: 'api', label: 'API Reference', icon: 'lucideCode' },
|
||||
];
|
||||
|
||||
apiTabs = [
|
||||
{ id: 'otp', label: 'OTP Challenge' },
|
||||
{ id: 'subscriptions', label: 'Subscriptions' },
|
||||
{ id: 'payments', label: 'Payments' },
|
||||
{ id: 'operators', label: 'Operators' },
|
||||
{ id: 'swagger', label: 'Swagger API' },
|
||||
];
|
||||
|
||||
features = [
|
||||
{
|
||||
icon: 'lucideShield',
|
||||
title: 'OTP Challenge',
|
||||
desc: 'Authentification sécurisée par SMS',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
icon: 'lucideUsers',
|
||||
title: 'Subscriptions',
|
||||
desc: 'Gestion des abonnements récurrents',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: 'lucideCreditCard',
|
||||
title: 'Payments',
|
||||
desc: 'Facturation et charges',
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
icon: 'lucideBell',
|
||||
title: 'Webhooks',
|
||||
desc: 'Notifications en temps réel',
|
||||
color: 'purple',
|
||||
},
|
||||
];
|
||||
|
||||
steps: Step[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Initier le Challenge OTP',
|
||||
description: "Envoi d'un code OTP au numéro de téléphone de l'utilisateur",
|
||||
icon: 'lucideShield',
|
||||
color: 'indigo',
|
||||
isOpen: true,
|
||||
endpoint: { method: 'POST', path: '/api/v1/otp-challenge/initiate' },
|
||||
requestBody: `{
|
||||
"msisdn": "225XXXXXXXXX",
|
||||
"channel": "SMS",
|
||||
"serviceId": "your-service-id",
|
||||
"merchantId": "your-merchant-id"
|
||||
}`,
|
||||
responseBody: `{
|
||||
"challengeId": "chg_abc123xyz",
|
||||
"status": "PENDING",
|
||||
"expiresAt": "2024-01-15T10:30:00Z",
|
||||
"channel": "SMS"
|
||||
}`,
|
||||
note: {
|
||||
type: 'warning',
|
||||
text: "⚠️ Note: Le code OTP expire après 15 minutes. Maximum 3 tentatives de validation.",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Valider le Code OTP',
|
||||
description: "Vérification du code saisi par l'utilisateur et récupération du token ISE2",
|
||||
icon: 'lucideCheck',
|
||||
color: 'green',
|
||||
isOpen: false,
|
||||
endpoint: { method: 'POST', path: '/api/v1/otp-challenge/{challengeId}/verify' },
|
||||
requestBody: `{
|
||||
"otp": "123456"
|
||||
}`,
|
||||
responseBody: `{
|
||||
"challengeId": "chg_abc123xyz",
|
||||
"status": "VALIDATED",
|
||||
"ise2Token": "eyJhbGciOiJSUzI1NiIs...",
|
||||
"validatedAt": "2024-01-15T10:28:45Z"
|
||||
}`,
|
||||
note: {
|
||||
type: 'success',
|
||||
text: "✅ Important: Conservez le ise2Token - il sera nécessaire pour la souscription et les charges.",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Créer une Souscription',
|
||||
description: "Enregistrement de l'abonnement utilisateur au service",
|
||||
icon: 'lucideUsers',
|
||||
color: 'blue',
|
||||
isOpen: false,
|
||||
endpoint: { method: 'POST', path: '/api/v1/subscriptions' },
|
||||
requestBody: `{
|
||||
"userToken": "ise2_token_from_otp_validation",
|
||||
"userAlias": "225XXXXXXXXX",
|
||||
"planId": 1,
|
||||
"callbackUrl": "https://your-domain.com/webhooks/subscription",
|
||||
"metadata": {
|
||||
"customerId": "cust_123",
|
||||
"source": "mobile_app"
|
||||
}
|
||||
}`,
|
||||
responseBody: `{
|
||||
"id": 456,
|
||||
"status": "ACTIVE",
|
||||
"planId": 1,
|
||||
"startDate": "2024-01-15",
|
||||
"nextPaymentDate": "2024-02-15",
|
||||
"createdAt": "2024-01-15T10:29:00Z"
|
||||
}`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Recevoir les Webhooks',
|
||||
description: 'Notifications automatiques des événements (souscription, paiement, etc.)',
|
||||
icon: 'lucideBell',
|
||||
color: 'purple',
|
||||
isOpen: false,
|
||||
responseBody: `{
|
||||
"event": "subscription.created",
|
||||
"timestamp": "2024-01-15T10:29:05Z",
|
||||
"data": {
|
||||
"subscriptionId": 456,
|
||||
"ise2": "ise2_token",
|
||||
"productId": "prod_abc",
|
||||
"serviceId": "svc_xyz",
|
||||
"status": "ACTIVE",
|
||||
"msisdn": "225XXXXXXXXX"
|
||||
},
|
||||
"signature": "sha256=..."
|
||||
}`,
|
||||
note: {
|
||||
type: 'purple',
|
||||
text: "🔔 Types d'événements: subscription.created, subscription.cancelled, payment.success, payment.failed",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Effectuer une Charge',
|
||||
description: "Facturation du montant sur le compte mobile de l'utilisateur",
|
||||
icon: 'lucideCreditCard',
|
||||
color: 'orange',
|
||||
isOpen: false,
|
||||
endpoint: { method: 'POST', path: '/api/v1/payments/charge' },
|
||||
headers: `X-Merchant-ID: your-merchant-id
|
||||
X-COUNTRY: CI
|
||||
X-OPERATOR: ORANGE`,
|
||||
requestBody: `{
|
||||
"userToken": "ise2_token",
|
||||
"amount": 500,
|
||||
"currency": "XOF",
|
||||
"description": "Abonnement Premium - Janvier 2024",
|
||||
"reference": "PAY-2024-001-ABC",
|
||||
"subscriptionId": 456,
|
||||
"callbackUrl": "https://your-domain.com/webhooks/payment",
|
||||
"metadata": {
|
||||
"orderId": "ord_789"
|
||||
}
|
||||
}`,
|
||||
responseBody: `{
|
||||
"id": "pay_xyz789",
|
||||
"status": "SUCCESS",
|
||||
"amount": 500,
|
||||
"currency": "XOF",
|
||||
"reference": "PAY-2024-001-ABC",
|
||||
"operatorReference": "OPR-123456",
|
||||
"completedAt": "2024-01-15T10:30:15Z"
|
||||
}`,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Envoyer un SMS de Confirmation',
|
||||
description: "Notification SMS à l'utilisateur confirmant l'activation du service",
|
||||
icon: 'lucideMessageSquare',
|
||||
color: 'pink',
|
||||
isOpen: false,
|
||||
endpoint: { method: 'POST', path: '/smsmessaging/service/mea/v1/outbound/{senderMsisdn}/requests' },
|
||||
requestBody: `{
|
||||
"outboundSMSMessageRequest": {
|
||||
"address": ["tel:+225XXXXXXXXX"],
|
||||
"senderAddress": "tel:+225YYYYYYYYYY",
|
||||
"outboundSMSTextMessage": {
|
||||
"message": "Félicitations! Votre abonnement Premium est maintenant actif."
|
||||
}
|
||||
}
|
||||
}`,
|
||||
},
|
||||
];
|
||||
|
||||
subscriptionStatuses = ['ACTIVE', 'TRIAL', 'PENDING', 'SUSPENDED', 'EXPIRED', 'CANCELLED'];
|
||||
|
||||
// Swagger data parsed from the JSON
|
||||
swaggerTags: SwaggerTag[] = [];
|
||||
swaggerInfo = {
|
||||
title: 'Payment Hub API',
|
||||
description: 'Unified DCB Payment Aggregation Platform',
|
||||
version: '1.0.0'
|
||||
};
|
||||
|
||||
mermaidDiagram = `sequenceDiagram
|
||||
participant USER as 👤 Utilisateur
|
||||
participant Partner as 🏪 Partner
|
||||
participant HUB as ⚡ HUB DCB
|
||||
participant DigiPay as 📱 DigiPay
|
||||
|
||||
rect rgb(99, 102, 241, 0.1)
|
||||
Note over Partner,DigiPay: 🔐 Phase 1: OTP Challenge
|
||||
Partner->>HUB: POST /api/v1/otp-challenge/initiate
|
||||
HUB->>DigiPay: POST /challenge/v1/challenges
|
||||
DigiPay-->>HUB: challengeId + status
|
||||
HUB-->>Partner: challengeId + status
|
||||
end
|
||||
|
||||
DigiPay->>USER: 📨 SMS avec code OTP
|
||||
USER->>Partner: Saisie du code OTP
|
||||
|
||||
rect rgb(34, 197, 94, 0.1)
|
||||
Note over Partner,DigiPay: ✅ Phase 2: Validation OTP
|
||||
Partner->>HUB: POST /api/v1/otp-challenge/{id}/verify
|
||||
HUB->>DigiPay: POST /challenge/v1/challenges/{id}
|
||||
DigiPay-->>HUB: ise2 token
|
||||
HUB-->>Partner: ise2 token
|
||||
end
|
||||
|
||||
rect rgb(59, 130, 246, 0.1)
|
||||
Note over Partner,DigiPay: 📋 Phase 3: Souscription
|
||||
Partner->>HUB: POST /api/v1/subscriptions
|
||||
HUB->>DigiPay: POST /digipay_sub/productOrder/
|
||||
DigiPay-->>HUB: subscription response
|
||||
HUB-->>Partner: subscription details
|
||||
end
|
||||
|
||||
rect rgb(168, 85, 247, 0.1)
|
||||
Note over Partner,DigiPay: 🔔 Notification Webhook
|
||||
DigiPay->>HUB: Subscription notification
|
||||
HUB->>Partner: Webhook callback
|
||||
end
|
||||
|
||||
rect rgb(249, 115, 22, 0.1)
|
||||
Note over Partner,DigiPay: 💳 Phase 4: Facturation
|
||||
Partner->>HUB: POST /api/v1/payments/charge
|
||||
HUB->>DigiPay: POST /payment/mea/v1/.../transactions/amount
|
||||
DigiPay-->>HUB: payment response
|
||||
HUB-->>Partner: payment confirmation
|
||||
end
|
||||
|
||||
rect rgb(236, 72, 153, 0.1)
|
||||
Note over Partner,DigiPay: 📱 Phase 5: SMS Confirmation
|
||||
Partner->>HUB: POST /smsmessaging/.../requests
|
||||
HUB->>DigiPay: Send SMS
|
||||
DigiPay->>USER: 📨 SMS de confirmation
|
||||
end
|
||||
|
||||
HUB->>USER: 🎉 Service activé`;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.parseSwaggerSpec();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.initMermaid();
|
||||
}
|
||||
|
||||
private parseSwaggerSpec(): void {
|
||||
// Parse the Swagger JSON spec
|
||||
const swaggerSpec = {
|
||||
"openapi": "3.0.0",
|
||||
"paths": {
|
||||
"/api/v1/operators": {
|
||||
"get": {
|
||||
"operationId": "OperatorsController_getOperatorStatistics",
|
||||
"parameters": [
|
||||
{"name": "operatorCode", "required": true, "in": "path", "schema": {"type": "string"}},
|
||||
{"name": "period", "required": false, "in": "query", "schema": {"enum": ["daily", "weekly", "monthly", "yearly"], "type": "string"}},
|
||||
{"name": "startDate", "required": false, "in": "query", "schema": {"format": "date-time", "type": "string"}},
|
||||
{"name": "endDate", "required": false, "in": "query", "schema": {"format": "date-time", "type": "string"}},
|
||||
{"name": "active", "required": false, "in": "query", "schema": {"type": "boolean"}},
|
||||
{"name": "country", "required": false, "in": "query", "schema": {}}
|
||||
],
|
||||
"responses": {"200": {"description": "List of operators"}},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "List all available operators",
|
||||
"tags": ["operators"]
|
||||
}
|
||||
},
|
||||
"/api/v1/operators/{operatorCode}/health": {
|
||||
"get": {
|
||||
"operationId": "OperatorsController_getOperatorHealth",
|
||||
"parameters": [{"name": "operatorCode", "required": true, "in": "path", "schema": {"type": "string"}}],
|
||||
"responses": {"200": {"description": "Operator health metrics"}},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Get operator health metrics",
|
||||
"tags": ["operators"]
|
||||
}
|
||||
},
|
||||
"/api/v1/operators/detect/{msisdn}": {
|
||||
"get": {
|
||||
"operationId": "OperatorsController_detectOperator",
|
||||
"parameters": [{"name": "msisdn", "required": true, "in": "path", "schema": {"type": "string"}}],
|
||||
"responses": {"200": {"description": "Detected operator information"}},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Detect operator from MSISDN",
|
||||
"tags": ["operators"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments/charge": {
|
||||
"post": {
|
||||
"operationId": "PaymentsController_createCharge",
|
||||
"parameters": [
|
||||
{"name": "X-Merchant-ID", "required": true, "in": "header", "schema": {"type": "string"}},
|
||||
{"name": "X-COUNTRY", "required": true, "in": "header", "schema": {"type": "string"}},
|
||||
{"name": "X-OPERATOR", "required": true, "in": "header", "schema": {"type": "string"}}
|
||||
],
|
||||
"requestBody": {"required": true, "content": {"application/json": {"schema": {"$ref": "#/components/schemas/ChargeDto"}}}},
|
||||
"responses": {
|
||||
"201": {"description": "Payment created successfully"},
|
||||
"400": {"description": "Bad request"},
|
||||
"401": {"description": "Unauthorized"}
|
||||
},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Create a new charge",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments/{paymentId}/refund": {
|
||||
"post": {
|
||||
"operationId": "PaymentsController_refundPayment",
|
||||
"parameters": [{"name": "paymentId", "required": true, "in": "path", "schema": {"type": "string"}}],
|
||||
"requestBody": {"required": true, "content": {"application/json": {"schema": {"$ref": "#/components/schemas/RefundDto"}}}},
|
||||
"responses": {
|
||||
"200": {"description": "Refund processed successfully"},
|
||||
"404": {"description": "Payment not found"}
|
||||
},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Refund a payment",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments/{paymentId}": {
|
||||
"get": {
|
||||
"operationId": "PaymentsController_getPayment",
|
||||
"parameters": [{"name": "paymentId", "required": true, "in": "path", "schema": {"type": "number"}}],
|
||||
"responses": {
|
||||
"200": {"description": "Payment details retrieved"},
|
||||
"404": {"description": "Payment not found"}
|
||||
},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Get payment details",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments/reference/{reference}": {
|
||||
"get": {
|
||||
"operationId": "PaymentsController_getPaymentByReference",
|
||||
"parameters": [{"name": "reference", "required": true, "in": "path", "schema": {"type": "string"}}],
|
||||
"responses": {"200": {"description": "Payment details retrieved"}},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Get payment by reference",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments": {
|
||||
"get": {
|
||||
"description": "Retrieve payments with optional filters on status, type, dates, amounts, etc.",
|
||||
"operationId": "PaymentsController_getAll",
|
||||
"parameters": [
|
||||
{"name": "page", "required": false, "in": "query", "description": "Page number", "schema": {"minimum": 1, "default": 1, "type": "number"}},
|
||||
{"name": "limit", "required": false, "in": "query", "description": "Number of items per page", "schema": {"minimum": 1, "maximum": 100, "default": 10, "type": "number"}},
|
||||
{"name": "type", "required": false, "in": "query", "description": "Filter by payment type", "schema": {"type": "string", "enum": ["MM", "BANK", "CHEQUE"]}},
|
||||
{"name": "status", "required": false, "in": "query", "description": "Filter by transaction status", "schema": {"type": "string", "enum": ["SUCCESS", "FAILED", "PENDING"]}},
|
||||
{"name": "merchantPartnerId", "required": false, "in": "query", "description": "Filter by merchant partner ID", "schema": {"type": "number"}},
|
||||
{"name": "currency", "required": false, "in": "query", "description": "Filter by currency code", "schema": {"example": "XOF", "type": "string"}},
|
||||
{"name": "amountMin", "required": false, "in": "query", "description": "Filter payments with amount >= this value", "schema": {"type": "number"}},
|
||||
{"name": "amountMax", "required": false, "in": "query", "description": "Filter payments with amount <= this value", "schema": {"type": "number"}},
|
||||
{"name": "createdFrom", "required": false, "in": "query", "description": "Filter payments created from this date", "schema": {"type": "string"}},
|
||||
{"name": "createdTo", "required": false, "in": "query", "description": "Filter payments created until this date", "schema": {"type": "string"}},
|
||||
{"name": "sortBy", "required": false, "in": "query", "description": "Sort field", "schema": {"default": "createdAt", "type": "string", "enum": ["createdAt", "completedAt", "amount"]}},
|
||||
{"name": "sortOrder", "required": false, "in": "query", "description": "Sort order", "schema": {"default": "desc", "type": "string", "enum": ["asc", "desc"]}}
|
||||
],
|
||||
"responses": {"200": {"description": "Paginated list of payments"}},
|
||||
"summary": "Get payment list with pagination and filters",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/payments/{paymentId}/retry": {
|
||||
"post": {
|
||||
"operationId": "PaymentsController_retryPayment",
|
||||
"parameters": [{"name": "paymentId", "required": true, "in": "path", "schema": {"type": "string"}}],
|
||||
"responses": {
|
||||
"200": {"description": "Payment retry initiated"},
|
||||
"400": {"description": "Payment cannot be retried"}
|
||||
},
|
||||
"security": [{"bearer": []}],
|
||||
"summary": "Retry a failed payment",
|
||||
"tags": ["payments"]
|
||||
}
|
||||
},
|
||||
"/api/v1/subscriptions": {
|
||||
"post": {
|
||||
"operationId": "SubscriptionsController_create",
|
||||
"requestBody": {"required": true, "content": {"application/json": {"schema": {"$ref": "#/components/schemas/CreateSubscriptionDto"}}}},
|
||||
"responses": {"201": {"description": "Subscription created successfully"}},
|
||||
"summary": "Create subscription",
|
||||
"tags": ["subscriptions"]
|
||||
},
|
||||
"get": {
|
||||
"operationId": "SubscriptionsController_getAll",
|
||||
"parameters": [
|
||||
{"name": "page", "required": false, "in": "query", "description": "Page number", "schema": {"minimum": 1, "default": 1, "type": "number"}},
|
||||
{"name": "limit", "required": false, "in": "query", "description": "Number of items per page", "schema": {"minimum": 1, "maximum": 100, "default": 10, "type": "number"}},
|
||||
{"name": "status", "required": false, "in": "query", "description": "Filter by subscription status", "schema": {"type": "string", "enum": ["ACTIVE", "TRIAL", "PENDING", "SUSPENDED", "EXPIRED", "CANCELLED"]}},
|
||||
{"name": "periodicity", "required": false, "in": "query", "description": "Filter by periodicity", "schema": {"type": "string", "enum": ["Daily", "Weekly", "Monthly", "OneTime"]}},
|
||||
{"name": "serviceId", "required": false, "in": "query", "description": "Filter by service ID", "schema": {"type": "number"}}
|
||||
],
|
||||
"responses": {"200": {"description": "Paginated list of subscriptions"}},
|
||||
"summary": "Get subscription list with pagination",
|
||||
"tags": ["subscriptions"]
|
||||
}
|
||||
},
|
||||
"/api/v1/subscriptions/{id}": {
|
||||
"get": {
|
||||
"operationId": "SubscriptionsController_get",
|
||||
"parameters": [{"name": "id", "required": true, "in": "path", "schema": {"type": "number"}}],
|
||||
"responses": {"200": {"description": "Subscription details"}},
|
||||
"summary": "Get subscription details",
|
||||
"tags": ["subscriptions"]
|
||||
},
|
||||
"delete": {
|
||||
"operationId": "SubscriptionsController_cancel",
|
||||
"parameters": [{"name": "id", "required": true, "in": "path", "schema": {"type": "number"}}],
|
||||
"responses": {"200": {"description": "Subscription cancelled"}},
|
||||
"summary": "Cancel subscription",
|
||||
"tags": ["subscriptions"]
|
||||
}
|
||||
},
|
||||
"/api/v1/otp-challenge/initiate": {
|
||||
"post": {
|
||||
"description": "Envoie un code OTP au numéro de téléphone spécifié via SMS, USSD ou IVR",
|
||||
"operationId": "OtpChallengeController_initiateChallenge",
|
||||
"parameters": [
|
||||
{"name": "X-Merchant-ID", "required": true, "in": "header", "description": "Identifiant du merchant", "schema": {"type": "string"}},
|
||||
{"name": "X-API-Key", "required": true, "in": "header", "description": "Clé API du merchant", "schema": {"type": "string"}}
|
||||
],
|
||||
"requestBody": {"required": true, "content": {"application/json": {"schema": {"$ref": "#/components/schemas/OtpChallengeRequestDto"}}}},
|
||||
"responses": {
|
||||
"201": {"description": "Challenge OTP initié avec succès"},
|
||||
"400": {"description": "Requête invalide"},
|
||||
"500": {"description": "Erreur serveur"}
|
||||
},
|
||||
"summary": "Initier un challenge OTP",
|
||||
"tags": ["OTP Challenge"]
|
||||
}
|
||||
},
|
||||
"/api/v1/otp-challenge/{challengeId}/verify": {
|
||||
"post": {
|
||||
"description": "Vérifie le code OTP entré par l'utilisateur",
|
||||
"operationId": "OtpChallengeController_verifyOtp",
|
||||
"parameters": [
|
||||
{"name": "challengeId", "required": true, "in": "path", "description": "Identifiant du challenge", "schema": {"type": "string"}},
|
||||
{"name": "X-Merchant-ID", "required": true, "in": "header", "description": "Identifiant du merchant", "schema": {"type": "string"}},
|
||||
{"name": "X-API-Key", "required": true, "in": "header", "description": "Clé API du merchant", "schema": {"type": "string"}}
|
||||
],
|
||||
"responses": {
|
||||
"200": {"description": "Code OTP vérifié avec succès"},
|
||||
"400": {"description": "Code OTP invalide"},
|
||||
"404": {"description": "Challenge non trouvé"}
|
||||
},
|
||||
"summary": "Vérifier un code OTP",
|
||||
"tags": ["OTP Challenge"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"info": {
|
||||
"title": "Payment Hub API",
|
||||
"description": "Unified DCB Payment Aggregation Platform",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"components": {
|
||||
"schemas": {
|
||||
"ChargeDto": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"userToken": {"type": "string", "description": "User token from authentication"},
|
||||
"amount": {"type": "number", "description": "Amount to charge"},
|
||||
"currency": {"type": "string", "description": "Currency code (XOF, XAF, USD, etc.)"},
|
||||
"description": {"type": "string", "description": "Payment description"},
|
||||
"reference": {"type": "string", "description": "Unique payment reference"},
|
||||
"subscriptionId": {"type": "number", "description": "Subscription ID if recurring"},
|
||||
"callbackUrl": {"type": "string", "description": "Callback URL for notifications"},
|
||||
"metadata": {"type": "object", "description": "Additional metadata"}
|
||||
},
|
||||
"required": ["userToken", "amount", "currency", "description"]
|
||||
},
|
||||
"RefundDto": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"amount": {"type": "number", "description": "Amount to refund (partial refund)"},
|
||||
"reason": {"type": "string", "description": "Reason for refund"},
|
||||
"metadata": {"type": "object", "description": "Additional metadata"}
|
||||
},
|
||||
"required": ["reason"]
|
||||
},
|
||||
"CreateSubscriptionDto": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"userToken": {"type": "string"},
|
||||
"userAlias": {"type": "string"},
|
||||
"planId": {"type": "number"},
|
||||
"callbackUrl": {"type": "string"},
|
||||
"metadata": {"type": "object"}
|
||||
},
|
||||
"required": ["userToken", "userAlias", "planId"]
|
||||
},
|
||||
"OtpChallengeRequestDto": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"msisdn": {"type": "string", "description": "Phone number"},
|
||||
"channel": {"type": "string", "enum": ["SMS", "USSD", "IVR"]},
|
||||
"serviceId": {"type": "string"}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Group endpoints by tags
|
||||
const tagGroups: Record<string, SwaggerEndpoint[]> = {};
|
||||
|
||||
Object.entries(swaggerSpec.paths).forEach(([path, methods]) => {
|
||||
Object.entries(methods as Record<string, any>).forEach(([method, details]) => {
|
||||
const endpoint: SwaggerEndpoint = {
|
||||
method: method.toUpperCase(),
|
||||
path: path,
|
||||
summary: details.summary || '',
|
||||
description: details.description || '',
|
||||
operationId: details.operationId || '',
|
||||
tags: details.tags || ['default'],
|
||||
parameters: details.parameters || [],
|
||||
requestBody: details.requestBody,
|
||||
responses: details.responses,
|
||||
security: details.security
|
||||
};
|
||||
|
||||
const tag = endpoint.tags[0] || 'default';
|
||||
if (!tagGroups[tag]) {
|
||||
tagGroups[tag] = [];
|
||||
}
|
||||
tagGroups[tag].push(endpoint);
|
||||
});
|
||||
});
|
||||
|
||||
this.swaggerTags = Object.entries(tagGroups).map(([name, endpoints]) => ({
|
||||
name,
|
||||
endpoints,
|
||||
isOpen: name === 'payments'
|
||||
}));
|
||||
}
|
||||
|
||||
private initMermaid(): void {
|
||||
if (typeof mermaid !== 'undefined') {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
themeVariables: {
|
||||
primaryColor: '#6366f1',
|
||||
primaryTextColor: '#1e293b',
|
||||
primaryBorderColor: '#818cf8',
|
||||
lineColor: '#64748b',
|
||||
secondaryColor: '#f1f5f9',
|
||||
tertiaryColor: '#ffffff',
|
||||
background: '#ffffff',
|
||||
mainBkg: '#f8fafc',
|
||||
textColor: '#1e293b',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderMermaid(): void {
|
||||
setTimeout(() => {
|
||||
if (typeof mermaid !== 'undefined') {
|
||||
const element = document.querySelector('.mermaid');
|
||||
if (element) {
|
||||
element.innerHTML = this.mermaidDiagram;
|
||||
mermaid.run({ nodes: [element] });
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
setActiveSection(sectionId: string): void {
|
||||
this.activeSection.set(sectionId);
|
||||
if (sectionId === 'flow') {
|
||||
this.renderMermaid();
|
||||
}
|
||||
}
|
||||
|
||||
setActiveApiTab(tabId: string): void {
|
||||
this.activeApiTab.set(tabId);
|
||||
}
|
||||
|
||||
toggleStep(step: Step): void {
|
||||
step.isOpen = !step.isOpen;
|
||||
}
|
||||
|
||||
toggleSwaggerTag(tag: SwaggerTag): void {
|
||||
tag.isOpen = !tag.isOpen;
|
||||
}
|
||||
|
||||
selectSwaggerEndpoint(endpoint: SwaggerEndpoint): void {
|
||||
this.selectedSwaggerEndpoint.set(endpoint);
|
||||
}
|
||||
|
||||
closeSwaggerDetail(): void {
|
||||
this.selectedSwaggerEndpoint.set(null);
|
||||
}
|
||||
|
||||
async copyCode(code: string, codeId: string): Promise<void> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
this.copiedCode.set(codeId);
|
||||
setTimeout(() => this.copiedCode.set(null), 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err);
|
||||
}
|
||||
}
|
||||
|
||||
getMethodClass(method: string): string {
|
||||
const classes: Record<string, string> = {
|
||||
GET: 'method-get',
|
||||
POST: 'method-post',
|
||||
PUT: 'method-put',
|
||||
DELETE: 'method-delete',
|
||||
PATCH: 'method-patch',
|
||||
};
|
||||
return classes[method] || 'method-get';
|
||||
}
|
||||
|
||||
getStepColorClass(color: string): string {
|
||||
return `step-${color}`;
|
||||
}
|
||||
|
||||
getNoteClass(type: string): string {
|
||||
return `note-${type}`;
|
||||
}
|
||||
|
||||
getFilteredSwaggerTags(): SwaggerTag[] {
|
||||
const search = this.swaggerSearch().toLowerCase();
|
||||
if (!search) return this.swaggerTags;
|
||||
|
||||
return this.swaggerTags.map(tag => ({
|
||||
...tag,
|
||||
endpoints: tag.endpoints.filter(
|
||||
e => e.path.toLowerCase().includes(search) ||
|
||||
e.summary.toLowerCase().includes(search) ||
|
||||
e.method.toLowerCase().includes(search)
|
||||
)
|
||||
})).filter(tag => tag.endpoints.length > 0);
|
||||
}
|
||||
|
||||
onSwaggerSearch(event: Event): void {
|
||||
const value = (event.target as HTMLInputElement).value;
|
||||
this.swaggerSearch.set(value);
|
||||
}
|
||||
|
||||
formatJson(obj: any): string {
|
||||
return JSON.stringify(obj, null, 2);
|
||||
}
|
||||
|
||||
getParametersByLocation(params: any[], location: string): any[] {
|
||||
return params?.filter(p => p.in === location) || [];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
localServiceTestApiUrl: "http://localhost:4200/api/v1",
|
||||
iamApiUrl: "http://localhost:3000/api/v1",
|
||||
localServiceTestApiUrl: "https://backoffice.dcb.pixpay.sn/api/v1",
|
||||
iamApiUrl: "https://api-user-service.dcb.pixpay.sn/api/v1",
|
||||
configApiUrl: 'https://api-merchant-config-service.dcb.pixpay.sn/api/v1',
|
||||
apiCoreUrl: 'https://api-core-service.dcb.pixpay.sn/api/v1',
|
||||
reportingApiUrl: 'https://api-reporting-service.dcb.pixpay.sn/api/v1',
|
||||
reportingApiUrl: 'https://api-reporting-service.dcb.pixpay.sn/api/v1/',
|
||||
}
|
||||
27
src/types/mermaid.d.ts
vendored
Normal file
27
src/types/mermaid.d.ts
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
// src/types/mermaid.d.ts
|
||||
|
||||
declare module 'mermaid' {
|
||||
interface MermaidConfig {
|
||||
startOnLoad?: boolean;
|
||||
theme?: string;
|
||||
themeVariables?: Record<string, string>;
|
||||
securityLevel?: string;
|
||||
flowchart?: Record<string, any>;
|
||||
sequence?: Record<string, any>;
|
||||
}
|
||||
|
||||
interface MermaidAPI {
|
||||
initialize(config: MermaidConfig): void;
|
||||
run(config?: { nodes?: Element[] }): Promise<void>;
|
||||
render(id: string, text: string): Promise<{ svg: string }>;
|
||||
}
|
||||
|
||||
const mermaid: MermaidAPI;
|
||||
export default mermaid;
|
||||
}
|
||||
|
||||
declare var mermaid: {
|
||||
initialize(config: any): void;
|
||||
run(config?: { nodes?: Element[] }): Promise<void>;
|
||||
render(id: string, text: string): Promise<{ svg: string }>;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user