Merge branch 'update-angular-for-18'

lperezp · Jul 9, 2024 · 7181768 · 7181768
2 parents 58ae3bb + 00d4472
commit 7181768
Show file tree

Hide file tree

Showing 31 changed files with 11,168 additions and 13,171 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,46 +1,42 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,3 +1,3 @@
-# Contributing to ng-culqi
+# Contributing to ngx-culqi
 
-We would love for you to contribute to ng-culqi and help make it even better than it is today!
+I would love for you to help ngx-culqi and make it even better than it is today!
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Luis Eduardo
+Copyright (c) 2021 ngx-culqi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,100 +1,129 @@
-# ng-culqi
+<p align="center">
+    <img width="230" src="https://i.ibb.co/3B95v9S/icon-ngx-culqi.png">
+</p>
+
+<h1 align="center">
+ngx-culqi
+</h1>
+
+<div align="center">
 
 [Culqi](https://culqi.com/) payment gateway library made to use with Angular.
 
-### Installation
+[![Github branch](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg)
+[![CodeFactor](https://www.codefactor.io/repository/github/lperezp/ngx-culqi/badge?style=flat-square)](https://www.codefactor.io/repository/github/ng-zorro/ng-zorro-antd)
+[![Codecov](https://img.shields.io/codecov/c/github/lperezp/ngx-culqi.svg?style=flat-square)](https://codecov.io/gh/lperezp/ngx-culqi)
+[![GitHub Release Date](https://img.shields.io/github/release-date/lperezp/ngx-culqi.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/releases)
+[![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi)
+[![NPM downloads](http://img.shields.io/npm/dm/ng-culqi.svg?style=flat-square)](https://npmjs.org/package/ngx-culqi)
+[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Twitter](https://img.shields.io/badge/Twitter-lperezp_pe-blue.svg?style=flat-square&logo=twitter)](https://twitter.com/lperezp_pe)
 
-Adding Scully to your project is as simple as running one command:
+</div>
 
-```
-npm i ng-culqi
-```
 
-### Usage
+## ☀️ License
 
-After installation add this code below the ``app-root`` tag in the ``index.html``.
+[MIT](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE)
 
-```
-  <app-root></app-root>
-  <script src="https://checkout.culqi.com/js/v3"></script>
-  <script>
-    function culqi() {
-      if (Culqi.token) {
-        var token = Culqi.token.id;
-        var payment_event = new CustomEvent("payment_event", {
-          detail: token,
-        });
-        document.dispatchEvent(payment_event);
-      }
-    }
-  </script>
-```
+## 🖥 Environment Support
 
-Inside the class, add the __@HostListener__ decorator to catch the event from the _culqi.js_:
+* Angular `^18.0.0` [![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi)
 
-```
- @HostListener('document:payment_event', ['$event'])
-  onPaymentEventCustom($event: CustomEvent) {
-    this.TOKEN_CULQI = $event.detail;
-  }
+## 📦 Installation
 
+Adding ngx-culqi to your project is as simple as running one command:
+
+```
+npm i ngx-culqi
 ```
 
-Inside ``ngOnInit`` add the following script:
+## 🔨 Usage
+
 
 ```
-  ngOnInit() {
-    this.ngCulqiService.initCulqi('ENTER_PUBLIC_KEY');
+import { ICulqiOptions, IOrderCulqiResponse, NgxCulqiService } from 'ngx-culqi';
+
+@Component({...})
+export class YourComponent {
+  constructor(private ngxCulqiService: NgxCulqiService) {}
+
+  paymentCulqi(): void {
+    const order = {
+      "amount": 1000,
+      "currency_code": "",
+      "description": "",
+      "order_number": 00001,
+      "client_details": {
+        "first_name": "",
+        "last_name": "",
+        "email": "",
+        "phone_number": ""
+      },
+      "expiration_date": (Math.floor(Date.now() / 1000) + 86400),
+      "confirm": false
+    };
+
+    this.ngxCulqiService.generateOrder(order).subscribe((response: Partial<IOrderCulqiResponse>) => {
+      const culqiSettings = {
+        title: order.description,
+        currency: 'PEN',
+        amount: order.amount,
+        order: response.id,
+        xculqirsaid: environment.xculqirsaid,
+        rsapublickey: environment.rsapublickey
+      };
+
+      const culqiOptions: ICulqiOptions = { style: this.styleCulqi };
+      this.ngxCulqiService.generateToken(culqiSettings, culqiOptions);
+    });
   }
+}
 ```
 
-***Replace with the PUBLIC KEY granted by Culqi.***
 
-Create the function to run the gateway. Within the function you have to configure your payment gateway with the data of the online store.
-You can also configure the button within the Culqi modal.
 
-***[Check Culqi documentation for more information](https://docs.culqi.com/#/pagos/inicio)***
+Inside ``ngOnInit`` add the following script:
 
 ```
-  handleButtonPayment() {
-    const culqiSettings = {
-      title: 'My Angular Store',
-      currency: '',
-      description: 'item #01',
-      amount: 100.00,
-    };
-    const culqiOptions = {
-      lang: 'auto',
-      modal: true,
-      installments: false,
-      customButton: '',
-      style: {
-        logo: '',
-        maincolor: '',
-        buttontext: '',
-        maintext: '',
-        desctext: '',
-      },
-    };
-    this.ngCulqiService.generateToken(culqiSettings, culqiOptions);
+    ngOnInit(): void {
+    this.ngxCulqiService.loadScriptCulqi(environment.tokenCulqi, environment.apiKeyCulqi);
+    this.ngxCulqiService.tokenCreated$.subscribe(value => {
+      if (value) {
+        this.showToken(value);
+        this.ngxCulqiService.closeCulqi();
+      }
+    });
+
+    this.ngxCulqiService.orderCreated$.subscribe(value => {
+      if (value) {
+        this.showOrder(value);
+      }
+    });
   }
 ```
 
-### Demo
+***[Check Culqi documentation for more information](https://docs.culqi.com/#/pagos/inicio)***
+
+
+## Demo
+
+ [Ver Demo](https://lperezp.github.io/culqi-angular/)
 
- [Ver Demo](https://github.com/lperezp/culqi-angular)
-
+## 🔗 Links
 
-### Author
+* [Culqi](https://culqi.com/)
+* [Culqi Docs](https://docs.culqi.com/es/documentacion/)
 
-[lperezp](https://twitter.com/lperezp_pe)
+## 🤝 Contributing
 
-### Licence
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/pulls)
 
-Licence MIT
+I welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/lperezp/ngx-culqi/blob/master/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/lperezp/ngx-culqi/pulls) or as [GitHub issues](https://github.com/lperezp/ngx-culqi/issues).
 
-### Contributing
+## 🎉 Author
 
-We welcome all contributions. You can submit any ideas as pull requests or as GitHub issues.
+- [Luis Eduardo]( https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=github-ngx-culqi&utm_campaign=ngx-culqi&utm_id=github)
 
-***Love ng-culqi? Give our repo a star.***
+**Love ngx-culqi? Give our repo a star :star: :arrow_up:.**