FIX QA tickets (#136)

* FIX ticket #831964 now unable to purchase if not billing address and checks if the billing address is valid

* FIX Ticket#831455 categories’ filter in Services remains active in the background

* FIX ticket #831764 order not does not visualize after checkout

Author: laraminones

src/app/pages/checkout/checkout.component.html

@@ -82,7 +82,7 @@ <h1 class="mb-4 pb-2 mt-4 text-4xl font-extrabold leading-none tracking-tight te
         </div>
         <div class="block">
           <div>
-            <textarea id="large-input" name="orderNote"
+            <textarea id="large-input" name="orderNote" [(ngModel)]="orderNote"
               class="flex w-full min-h-fit dark:text-white dark:bg-secondary-300 dark:border-secondary-200 dark:focus:border-primary-100 items-center rounded px-4 py-3 text-sm text-heading transition duration-300 ease-in-out focus:outline-0 focus:ring-0 border border-border-base focus:border-accent"
               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
               rows="4">
@@ -185,7 +185,17 @@ <h1 class="mb-4 pb-2 mt-4 text-4xl font-extrabold leading-none tracking-tight te
             class="text-sm text-body dark:text-gray-200">{{ 'SHOPPING_CART._calculated' | translate }}</span></div>
         </div>
         -->
-
+        @if(!validBillAddr){
+          <div class="flex items-center p-4 text-sm text-primary-50" role="alert">
+            <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+            </svg>
+            <span class="sr-only">Info</span>
+            <p class="text-center">
+              You need to create at least one valid billing address.
+            </p>
+          </div>
+        }
         <button data-cy="checkout" class="inline-flex items-center justify-center shrink-0 font-semibold leading-none rounded outline-none transition duration-300 ease-in-out focus:outline-0 focus:shadow focus:ring-1 focus:ring-accent-700 bg-primary-50 dark:bg-primary-100 text-white border border-transparent hover:bg-secondary-100 dark:hover:bg-primary-50 px-5 py-0 h-12 mt-5 w-full"
                 (click)="orderProduct()" [disabled]="items.length==0 || !this.validBillAddr" [ngClass]="(items.length==0 || !this.validBillAddr)? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'">
           {{ 'SHOPPING_CART._checkout' | translate }}

src/app/pages/checkout/checkout.component.ts

@@ -51,6 +51,7 @@ export class CheckoutComponent implements OnInit {
   showError: boolean = false;
   providerId:any = null;
   loadingItems:boolean=false;
+  orderNote: string = '';
 
   constructor(
     private localStorage: LocalStorageService,
@@ -66,15 +67,16 @@ export class CheckoutComponent implements OnInit {
     private route: ActivatedRoute) {
     // Bind the method to preserve context
     this.orderProduct = this.orderProduct.bind(this);
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$.subscribe(async ev => {
       if (ev.type === 'BillAccChanged') {
         this.getBilling();
       }
       if (ev.value == true) {
         this.addBill = false;
       }
       if (ev.type === 'ChangedSession') {
-        this.initCheckoutData();
+        console.log('changing session...')
+        await this.initCheckoutData();
       }
       if(ev.type === 'AddedCartItem') {
         this.loadingItems=true;
@@ -198,11 +200,11 @@ export class CheckoutComponent implements OnInit {
 
     console.log('Productos creados:', products);
 
-    const productOrder = this.createProductOrder(products);
-    console.log('--- order ---');
-    console.log(productOrder);
-
     try {
+      const productOrder = this.createProductOrder(products);
+      console.log('--- order ---');
+      console.log(productOrder);
+
       const response = await firstValueFrom(this.orderService.postProductOrder(productOrder));
       const redirectUrl = response.headers.get('X-Redirect-URL');
 
@@ -254,22 +256,35 @@ export class CheckoutComponent implements OnInit {
   }
 
   private createProductOrder(products: any[]) {
-    return {
-      productOrderItem: products,
-      relatedParty: [
-        {
-          id: this.relatedParty,
-          href: this.relatedParty,
-          role: 'Customer'
-        }
-      ],
-      priority: '4',
-      billingAccount: {
-        id: this.selectedBillingAddress.id,
-        href: this.selectedBillingAddress.id
-      },
-      notificationContact: this.selectedBillingAddress.email
-    };
+
+      let po:any = {
+        productOrderItem: products,
+        relatedParty: [
+          {
+            id: this.relatedParty,
+            href: this.relatedParty,
+            role: 'Customer'
+          }
+        ],
+        priority: '4',
+        billingAccount: {
+          id: this.selectedBillingAddress.id,
+          href: this.selectedBillingAddress.id
+        },
+        notificationContact: this.selectedBillingAddress.email
+      };
+
+      if(this.orderNote!=''){
+        const newNote = {
+          text: this.orderNote,
+          id: `urn:ngsi-ld:note:${uuidv4()}`,
+          author: this.relatedParty,
+          date: new Date().toISOString()
+        };
+        po['note']=[newNote]
+      }
+
+    return po
   }
 
   private async emptyShoppingCart() {
@@ -348,7 +363,7 @@ export class CheckoutComponent implements OnInit {
     }
   }
 
-  initCheckoutData() {
+  async initCheckoutData() {
     this.providerId = this.route.snapshot.paramMap.get('id');
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
     if (aux) {
@@ -365,7 +380,8 @@ export class CheckoutComponent implements OnInit {
     console.log('--- Login Info ---')
     console.log(aux)
 
-    this.cartService.getShoppingCart().then(async data => {
+    let data = await this.cartService.getShoppingCart();
+    //this.cartService.getShoppingCart().then(async data => {
       console.log('---CARRITO API---')
       console.log(data)
       this.items = data;
@@ -377,12 +393,12 @@ export class CheckoutComponent implements OnInit {
       this.cdr.detectChanges();
       this.getTotalPrice();
       console.log('------------------')
-    })
+    //})
     console.log('--- ITEMS ---')
     console.log(this.items)
 
     this.loading_baddrs = true;
-    this.getBilling();
+    await this.getBilling();
   }
 
   async getProviderInfo(){
@@ -405,10 +421,12 @@ export class CheckoutComponent implements OnInit {
   }
 
 
-  getBilling() {
+  async getBilling() {
+    this.selectedBillingAddress=null;
     let isBillSelected = false;
     this.billingAddresses = [];
-    this.account.getBillingAccount().then(data => {
+    let data = await this.account.getBillingAccount();
+    //this.account.getBillingAccount().then(data => {
       for (let i = 0; i < data.length; i++) {
         isBillSelected = false;
         let email = ''
@@ -455,17 +473,21 @@ export class CheckoutComponent implements OnInit {
         this.billingAddresses.push(baddr)
         if (isBillSelected) {
           this.selectedBillingAddress = baddr
+          this.cdr.detectChanges();
         }
       }
       console.log('billing account...')
       console.log(this.billingAddresses)
+      
       this.loading_baddrs = false;
       if (this.billingAddresses.length > 0) {
         this.preferred = false;
       } else {
         this.preferred = true;
       }
-    })
+    //})
+    this.validBillAddr = !!this.selectedBillingAddress?.id;
+    this.cdr.detectChanges();
   }
 
   async onSelected(baddr: billingAccountCart) {

src/app/pages/search-catalog/search-catalog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef, HostListener } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, HostListener, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import { PriceServiceService } from 'src/app/services/price-service.service';
@@ -19,7 +19,7 @@ import * as moment from 'moment';
   templateUrl: './search-catalog.component.html',
   styleUrl: './search-catalog.component.css'
 })
-export class SearchCatalogComponent implements OnInit{
+export class SearchCatalogComponent implements OnInit, OnDestroy{
   constructor(
     private route: ActivatedRoute,
     private api: ApiServiceService,
@@ -136,6 +136,13 @@ export class SearchCatalogComponent implements OnInit{
     this.router.navigate([path]);
   }
 
+  ngOnDestroy(){
+    let storedFilters = this.localStorage.getObject('selected_categories') as Category[] || [];
+    for(let i=0;i<storedFilters.length;i++){
+      this.localStorage.removeCategoryFilter(storedFilters[i]);
+      this.eventMessage.emitRemovedFilter(storedFilters[i]);
+    }
+  }
 
   async getProducts(next:boolean){
     let filters = this.localStorage.getObject('selected_categories') as Category[] || [];

src/app/pages/search/search.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef, SimpleChanges, OnChanges, HostListener, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, SimpleChanges, OnChanges, HostListener, AfterViewInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {CategoriesFilterComponent} from "../../shared/categories-filter/categories-filter.component";
 import {components} from "../../models/product-catalog";
@@ -21,7 +21,7 @@ import * as moment from 'moment';
   templateUrl: './search.component.html',
   styleUrl: './search.component.css'
 })
-export class SearchComponent implements OnInit {
+export class SearchComponent implements OnInit, OnDestroy {
 
   products: ProductOffering[]=[];
   nextProducts: ProductOffering[]=[];
@@ -159,6 +159,14 @@ export class SearchComponent implements OnInit {
     }
   }
 
+  ngOnDestroy(){
+    let storedFilters = this.localStorage.getObject('selected_categories') as Category[] || [];
+    for(let i=0;i<storedFilters.length;i++){
+      this.localStorage.removeCategoryFilter(storedFilters[i]);
+      this.eventMessage.emitRemovedFilter(storedFilters[i]);
+    }
+  }
+
   async getProducts(next:boolean){
     let filters = this.localStorage.getObject('selected_categories') as Category[] || [];
     if(next==false){