🧾 ItcPaymentTest

ItcPaymentTest est une librairie Angular créée pour intégrer un système de paiement en ligne via SATIM (Algérie). Elle fournit des composants prêts à l’emploi, une interface utilisateur moderne, une gestion de sécurité et un système de notification intégré.

📦 Installation

Installez la librairie via NPM ou Yarn :

npm install itc-payment-test
# ou
yarn add itc-payment-test

⚙️ Configuration obligatoire après installation

1. ➕ Ajouter les styles de @ngneat/hot-toast

Dans le fichier angular.json du projet hôte :

"styles": [
  "node_modules/@ngneat/hot-toast/src/styles/styles.css",
  "src/styles.scss"
]

🎯 Cela permet d'afficher les notifications toast.

2. ➕ Ajouter provideHttpClient() dans main.ts

Dans un projet Angular standalone (v16+) :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

3. 🎨 Ajouter les styles Tailwind générés

La lib utilise Tailwind CSS compilé dans tailwind.bundle.css. Pour que les styles soient actifs dans le projet consommateur :

👉 Ajoutez ce chemin dans angular.json du projet hôte :

"styles": [
  "node_modules/itc-payment-test/src/lib/styles/tailwind.bundle.css",
  ...
]

4. 🖼️ Intégrer les images (CIB, etc.)

Pour que les images de la lib soient disponibles, ajoutez ceci dans le angular.json :

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/itc-payment-test/src/lib/assets",
    "output": "assets/"
  }
]

Ensuite, dans le code HTML, utilisez les images comme ceci :

<img src="assets/images/carte_CIB.jpg" alt="CIB" />

🔌 Intégration dans votre projet

Avec NgModule classique :

import { PaymentModule } from 'itc-payment-test';

@NgModule({
  imports: [PaymentModule]
})
export class AppModule {}

Avec standalone components :

import { PaymentModule } from 'itc-payment-test';

@Component({
  standalone: true,
  imports: [PaymentModule],
  ...
})
export class AppComponent {}

📋 Fonctionnalités incluses

• 💳 Paiement CIB / Edahabia via SATIM
• 🔐 Sécurité avec normes SSL
• 🔔 Notifications avec @ngneat/hot-toast
• 🎨 Interface moderne (TailwindCSS intégré)
• 🧩 Utilisable dans tout projet Angular
• 👥 Support multi-tenant

🛠️ Build de la librairie

ng build itc-payment-test

Le build est généré dans : dist/itc-payment-test/

🧪 Générer les styles Tailwind optimisés (purge)

Pour générer un fichier tailwind.bundle.css optimisé :

npx tailwindcss -i ./projects/itc-payment-test/src/lib/styles/tailwind.input.css -o ./projects/itc-payment-test/src/lib/styles/tailwind.bundle.css --minify --content "./projects/itc-payment-test/**/*.{html,ts}"

⚠️ À exécuter avant le build de la lib.

🚀 Publication sur NPM

cd dist/itc-payment-test
npm publish --access public

🧪 Tests unitaires

ng test itc-payment-test

📚 Liens utiles

• Angular CLI
• Tailwind CSS
• @ngneat/hot-toast
• SATIM Algérie

🏢 À propos

Librairie développée par ITCOMP, société de solutions informatiques basée en Algérie 🇩🇿
📧 Contact : [email protected]