chore: Remove unused files and update dependencies

Author: lperezp

angular.json

@@ -55,13 +55,7 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.development.ts"
-                }
-              ]
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -111,4 +105,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

src/app/components/cart/cart.component.html

@@ -1,3 +1,10 @@
+<div class="cardSettings">
+    <p>Configure API KEY</p>
+    <input class="input" type="text" [(ngModel)]="tokenCulqi" placeholder="tokenCulqi" aria-label="tokenCulqi" />
+    <input class="input" type="text" [(ngModel)]="apiKeyCulqi" placeholder="apiKeyCulqi" aria-label="apiKeyCulqi" />
+    <input class="input" type="text" [(ngModel)]="xculqirsaid" placeholder="xculqirsaid" aria-label="xculqirsaid" />
+    <input class="input" type="text" [(ngModel)]="rsapublickey" placeholder="rsapublickey" aria-label="rsapublickey" />
+</div>
 <div class="cart">
     <h2 class="title">Shopping Cart</h2>
     <div class="card">

src/app/components/cart/cart.component.scss

@@ -1,34 +1,51 @@
-.cart {
-    display: block;
-    border: 1px solid #bdbdbd;
-    border-radius: 4px;
-    padding: 20px;
-    margin-bottom: 20px;
+  .cardSettings {
+      margin: 20px 0;
+      background-color: #f7f5f5;
+      border-radius: 12px;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
 
-    .title {
-        margin: 0 0 20px 0;
-    }
+      .input {
+          border: 1px solid #e6e3e3;
+          margin: 4px 0;
+          padding: 4px 8px;
+          border-radius: 4px;
+          outline: none;
+      }
+  }
 
-    .card {
-        .list {
-            &Item {
-                display: flex;
-                justify-content: space-between;
+  .cart {
+      display: block;
+      border: 1px solid #bdbdbd;
+      border-radius: 4px;
+      padding: 20px;
+      margin-bottom: 20px;
 
-                p {
-                    margin: 0 0 12px 0;
-                }
-            }
-        }
+      .title {
+          margin: 0 0 20px 0;
+      }
 
-        .btn {
-            margin-top: 20px;
-            background-color: #5C44E4;
-            padding: 8px 20px;
-            border-radius: 4px;
-            color: white;
-            border: none;
-        }
-    }
+      .card {
+          .list {
+              &Item {
+                  display: flex;
+                  justify-content: space-between;
 
-}
+                  p {
+                      margin: 0 0 12px 0;
+                  }
+              }
+          }
+
+          .btn {
+              margin-top: 20px;
+              background-color: #5C44E4;
+              padding: 8px 20px;
+              border-radius: 4px;
+              color: white;
+              border: none;
+          }
+      }
+
+  }

src/app/components/cart/cart.component.ts

@@ -1,12 +1,12 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { ICulqiOptions, IOrderCulqiResponse, NgxCulqiService } from 'ngx-culqi';
-import { environment } from '../../../environments/environment';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-cart',
   standalone: true,
-  imports: [CurrencyPipe],
+  imports: [CurrencyPipe, FormsModule],
   templateUrl: './cart.component.html',
   styleUrl: './cart.component.scss'
 })
@@ -23,6 +23,11 @@ export class CartComponent {
   ];
   amountTotal = 400;
 
+  tokenCulqi: string = '';
+  apiKeyCulqi: string = '';
+  xculqirsaid: string = '';
+  rsapublickey: string = ``;
+
   styleCulqi = {
     logo: 'https://developers.google.com/static/homepage-assets/images/angular_gradient.png',
     bannerColor: '#5C44E4',
@@ -38,7 +43,6 @@ export class CartComponent {
   constructor(private ngxCulqiService: NgxCulqiService) { }
 
   ngOnInit(): void {
-    this.ngxCulqiService.loadScriptCulqi(environment.tokenCulqi, environment.apiKeyCulqi);
     this.ngxCulqiService.tokenCreated$.subscribe(value => {
       if (value) {
         this.showToken(value);
@@ -54,6 +58,8 @@ export class CartComponent {
   }
 
   paymentCulqi(): void {
+    // This function must be called from ngOnInit. Just for this example, it is inside the payment with a setTimeOut to be set from the form.
+    this.ngxCulqiService.loadScriptCulqi(this.tokenCulqi, this.apiKeyCulqi);
     const order = {
       "amount": this.amountTotal * 100,
       "currency_code": "PEN",
@@ -68,19 +74,21 @@ export class CartComponent {
       "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
-      };
+    setTimeout(() => {
+      this.ngxCulqiService.generateOrder(order).subscribe((response: Partial<IOrderCulqiResponse>) => {
+        const culqiSettings = {
+          title: order.description,
+          currency: 'PEN',
+          amount: order.amount,
+          order: response.id,
+          xculqirsaid: this.xculqirsaid,
+          rsapublickey: this.rsapublickey
+        };
 
-      const culqiOptions: ICulqiOptions = { style: this.styleCulqi };
-      this.ngxCulqiService.generateToken(culqiSettings, culqiOptions);
-    });
+        const culqiOptions: ICulqiOptions = { style: this.styleCulqi };
+        this.ngxCulqiService.generateToken(culqiSettings, culqiOptions);
+      });
+    }, 3000);
   }
 
   showToken(token: string): void {