FIX Ticket#831737 unable to add free product to cart from details

Author: laraminones

src/app/pages/product-details/product-details.component.html

@@ -140,7 +140,7 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
             </ul>
             @if(check_logged){
                 @if (!isCustom()) {
-                    <button type="button" (click)="openDrawer()" [disabled]="!PURCHASE_ENABLED" [ngClass]="!PURCHASE_ENABLED ? 'opacity-50' : 'hover:bg-primary-50'" class="hidden md:flex w-fit m-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                    <button type="button" (click)="openDrawer()" [disabled]="!PURCHASE_ENABLED || productAlreadyInCart" [ngClass]="!PURCHASE_ENABLED || productAlreadyInCart ? 'opacity-50' : 'hover:bg-primary-50'" class="hidden md:flex w-fit m-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                         <svg class="w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 21">
                             <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"/>
                         </svg>
@@ -158,7 +158,7 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
         </div>
         @if(check_logged) {
             @if (!isCustom()) {
-                <button type="button" (click)="openDrawer()" [disabled]="!PURCHASE_ENABLED" [ngClass]="!PURCHASE_ENABLED ? 'opacity-50' : 'hover:bg-primary-50'" class="flex md:hidden justify-end w-fit m-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <button type="button" (click)="openDrawer()" [disabled]="!PURCHASE_ENABLED || productAlreadyInCart" [ngClass]="!PURCHASE_ENABLED || productAlreadyInCart ? 'opacity-50' : 'hover:bg-primary-50'" class="flex md:hidden justify-end w-fit m-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                     <svg class="w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 21">
                         <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z"/>
                         </svg>

src/app/pages/product-details/product-details.component.ts

@@ -83,6 +83,7 @@ export class ProductDetailsComponent implements OnInit {
 
   orgInfo:any=undefined;
   showQuoteModal:boolean = false;
+  productAlreadyInCart:boolean=false;
 
   protected readonly faScaleBalanced = faScaleBalanced;
   protected readonly faArrowProgress = faArrowProgress;
@@ -140,7 +141,25 @@ export class ProductDetailsComponent implements OnInit {
       } else if(ev.type === 'CloseQuoteRequest'){
           this.showQuoteModal=false;
           this.cdr.detectChanges();
-        }
+      } else if (ev.type == 'RemovedCartItem'){
+        this.cartService.getShoppingCart().then(data => {
+          const exists = data.some((item: any) => item.id === this.productOff?.id);
+          if (exists) {
+            this.productAlreadyInCart=true;
+          } else {
+            this.productAlreadyInCart=false;
+          }
+        })
+      } else if (ev.type == 'AddedCartItem'){
+        this.cartService.getShoppingCart().then(data => {
+          const exists = data.some((item: any) => item.id === this.productOff?.id);
+          if (exists) {
+            this.productAlreadyInCart=true;
+          } else {
+            this.productAlreadyInCart=false;
+          }
+        })
+      }
     })
   }
 
@@ -182,7 +201,7 @@ export class ProductDetailsComponent implements OnInit {
     }
   }
 
-  ngOnInit() {
+  async ngOnInit() {
     initFlowbite();
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
     if(JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix())-4) > 0)) {
@@ -201,124 +220,122 @@ export class ProductDetailsComponent implements OnInit {
       this.cdr.detectChanges();
     }
     window.scrollTo(0, 0);
+    let cart = await this.cartService.getShoppingCart();
+    const exists = cart.some((item: any) => item.id === this.productOff?.id);
+    if (exists) {
+      this.productAlreadyInCart=true;
+    } else {
+      this.productAlreadyInCart=false;
+    }
     this.id = this.route.snapshot.paramMap.get('id');
     console.log('--- Details ID:')
     console.log(this.id)
-    this.api.getProductById(this.id).then(prod => {
-      console.log('prod')
-      console.log(prod)
-      this.api.getProductSpecification(prod.productSpecification.id).then(spec => {
-        this.prodSpec=spec;
-        this.getOwner();
-        let attachment = spec.attachment
-        console.log(spec.attachment)
-        let prodPrices: any[] | undefined= prod.productOfferingPrice;
-        let prices: any[]=[];
-        if(prodPrices!== undefined){
-          for(let j=0; j < prodPrices.length; j++){
-            this.api.getProductPrice(prodPrices[j].id).then(price => {
-              prices.push(price);
-              console.log(price)
-              if(price.priceType == 'custom'){
-                this.checkCustom = true;
-              }
-            })
+    let prod = await this.api.getProductById(this.id);
+    let spec = await this.api.getProductSpecification(prod.productSpecification.id);
+    this.prodSpec=spec;
+    this.getOwner();
+    let prodPrices: any[] | undefined= prod.productOfferingPrice;
+    let prices: any[]=[];
+    if(prodPrices!== undefined){
+      for(let j=0; j < prodPrices.length; j++){
+        this.api.getProductPrice(prodPrices[j].id).then(price => {
+          prices.push(price);
+          console.log(price)
+          if(price.priceType == 'custom'){
+            this.checkCustom = true;
           }
-        }
-
-        if(this.prodSpec.productSpecCharacteristic != undefined) {
-          // Avoid displaying the compliance credential
-          this.prodChars = this.prodSpec.productSpecCharacteristic.filter((char: any) => {
-            return char.name != 'Compliance:VC' && char.name != 'Compliance:SelfAtt'
-          })
+        })
+      }
+    }
 
-          console.log('-- prod spec')
-          console.log(this.prodSpec.productSpecCharacteristic)
-
-          for(let i=0; i<certifications.length; i++){
-            //Now we only show the certifications that are attached when creating/updating the product
-            let compProf = this.prodSpec.productSpecCharacteristic.find((p => {
-              return p.name === certifications[i].name
-            }));
-            if(compProf){
-              let cert:any = certifications[i]
-              cert.href = compProf.productSpecCharacteristicValue?.at(0)?.value
-              this.complianceProf.push(certifications[i])
-            }
-            //Deleting certifications out of characteristics' array
-            const index = this.prodChars.findIndex(item => item.name === certifications[i].name);
-            if(index!==-1){
-              this.prodChars.splice(index, 1);
-            }
-          }
-        }
-        if(this.prodSpec.serviceSpecification != undefined){
-          for(let j=0; j < this.prodSpec.serviceSpecification.length; j++){
-            this.api.getServiceSpec(this.prodSpec.serviceSpecification[j].id).then(serv => {
-              this.serviceSpecs.push(serv);
-            })
-          }
-        }
-        if(this.prodSpec.resourceSpecification != undefined){
-          for(let j=0; j < this.prodSpec.resourceSpecification.length; j++){
-            this.api.getResourceSpec(this.prodSpec.resourceSpecification[j].id).then(res => {
-              this.resourceSpecs.push(res);
-            })
-          }
-        }
+    if(this.prodSpec.productSpecCharacteristic != undefined) {
+      // Avoid displaying the compliance credential
+      this.prodChars = this.prodSpec.productSpecCharacteristic.filter((char: any) => {
+        return char.name != 'Compliance:VC' && char.name != 'Compliance:SelfAtt'
+      })
 
-        console.log('serv specs')
-        console.log(this.serviceSpecs)
-        this.productOff={
-          id: prod.id,
-          name: prod.name,
-          category: prod.category,
-          description: prod.description,
-          lastUpdate: prod.lastUpdate,
-          attachment: attachment,
-          productOfferingPrice: prices,
-          productSpecification: prod.productSpecification,
-          productOfferingTerm: prod.productOfferingTerm,
-          serviceLevelAgreement: prod.serviceLevelAgreement,
-          version: prod.version
+      for(let i=0; i<certifications.length; i++){
+        //Now we only show the certifications that are attached when creating/updating the product
+        let compProf = this.prodSpec.productSpecCharacteristic.find((p => {
+          return p.name === certifications[i].name
+        }));
+        if(compProf){
+          let cert:any = certifications[i]
+          cert.href = compProf.productSpecCharacteristicValue?.at(0)?.value
+          this.complianceProf.push(certifications[i])
         }
-        this.category = this.productOff?.category?.at(0)?.name ?? 'none';
-        this.categories = this.productOff?.category;
-        this.price = this.productOff?.productOfferingPrice?.at(0)?.price?.value + ' ' + this.productOff?.productOfferingPrice?.at(0)?.price?.unit ?? 'n/a';
-
-        let profile = this.productOff?.attachment?.filter(item => item.name === 'Profile Picture') ?? [];
-        console.log('profile...')
-        console.log(profile)
-        if(profile.length==0){
-          this.images = this.productOff?.attachment?.filter(item => item.attachmentType === 'Picture') ?? [];
-          this.attatchments = this.productOff?.attachment?.filter(item => item.attachmentType != 'Picture') ?? [];
-        } else {
-          this.images = profile;
-          this.attatchments = this.productOff?.attachment?.filter(item => item.name != 'Profile Picture') ?? [];
+        //Deleting certifications out of characteristics' array
+        const index = this.prodChars.findIndex(item => item.name === certifications[i].name);
+        if(index!==-1){
+          this.prodChars.splice(index, 1);
         }
+      }
+    }
+    if(this.prodSpec.serviceSpecification != undefined){
+      for(let j=0; j < this.prodSpec.serviceSpecification.length; j++){
+        this.api.getServiceSpec(this.prodSpec.serviceSpecification[j].id).then(serv => {
+          this.serviceSpecs.push(serv);
+        })
+      }
+    }
+    if(this.prodSpec.resourceSpecification != undefined){
+      for(let j=0; j < this.prodSpec.resourceSpecification.length; j++){
+        this.api.getResourceSpec(this.prodSpec.resourceSpecification[j].id).then(res => {
+          this.resourceSpecs.push(res);
+        })
+      }
+    }
 
-        this.licenseTerm = this.productOff?.productOfferingTerm?.find(
-          element => element.name === 'License'
-        );
+    this.productOff={
+      id: prod.id,
+      name: prod.name,
+      category: prod.category,
+      description: prod.description,
+      lastUpdate: prod.lastUpdate,
+      attachment: spec.attachment,
+      productOfferingPrice: prices,
+      productSpecification: prod.productSpecification,
+      productOfferingTerm: prod.productOfferingTerm,
+      serviceLevelAgreement: prod.serviceLevelAgreement,
+      version: prod.version
+    }
+    console.log('-------- producto')
+    console.log(this.productOff)
+    this.cdr.detectChanges();
+    this.category = this.productOff?.category?.at(0)?.name ?? 'none';
+    this.categories = this.productOff?.category;
+    this.price = this.productOff?.productOfferingPrice?.at(0)?.price?.value + ' ' + this.productOff?.productOfferingPrice?.at(0)?.price?.unit ?? 'n/a';
+
+    let profile = this.productOff?.attachment?.filter(item => item.name === 'Profile Picture') ?? [];
+    console.log('profile...')
+    console.log(profile)
+    if(profile.length==0){
+      this.images = this.productOff?.attachment?.filter(item => item.attachmentType === 'Picture') ?? [];
+      this.attatchments = this.productOff?.attachment?.filter(item => item.attachmentType != 'Picture') ?? [];
+    } else {
+      this.images = profile;
+      this.attatchments = this.productOff?.attachment?.filter(item => item.name != 'Profile Picture') ?? [];
+    }
 
-        if(this.prodSpec.productSpecCharacteristic != undefined) {
+    this.licenseTerm = this.productOff?.productOfferingTerm?.find(
+      element => element.name === 'License'
+    );
 
-          // Find if there is a self attestement
-          let selfAttObj = this.prodSpec.productSpecCharacteristic.find((p => {
-            return p.name === `Compliance:SelfAtt`
-          }));
+    if(this.prodSpec.productSpecCharacteristic != undefined) {
 
-          if(selfAttObj){
-            this.selfAtt = selfAttObj.productSpecCharacteristicValue?.at(0)?.value
-          }
-        }
+      // Find if there is a self attestement
+      let selfAttObj = this.prodSpec.productSpecCharacteristic.find((p => {
+        return p.name === `Compliance:SelfAtt`
+      }));
 
-        //Hardcoding compliance lever for the moment
-        this.complianceLevel = this.api.getComplianceLevel(this.prodSpec);
-        this.complianceDescription = this.getComplianceDescription();
-      })
-    })
+      if(selfAttObj){
+        this.selfAtt = selfAttObj.productSpecCharacteristicValue?.at(0)?.value
+      }
+    }
 
+    //Hardcoding compliance lever for the moment
+    this.complianceLevel = this.api.getComplianceLevel(this.prodSpec);
+    this.complianceDescription = this.getComplianceDescription();
   }
 
   toggleQuoteModal(){

src/app/shared/price-plan-drawer/price-plan-drawer.component.ts

@@ -94,6 +94,8 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
     document.addEventListener('keydown', this.handleEscape.bind(this));
     // Configurar los términos y condiciones
     this.tsAndCs = { description: '' };
+    console.log('---- producto')
+    console.log(this.productOff)
 
     this.productOff?.productOfferingTerm?.forEach((term) => {
       console.log(term.name)
@@ -158,6 +160,25 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
       }
       console.log(this.tsAndCs)
     }
+    if (changes['productOff'] && changes['productOff'].currentValue) {
+      console.log('Changes...')
+      console.log(this.productOff)
+  
+      this.isFree = this.productOff?.productOfferingPrice?.length === 0;
+  
+      if (this.isFree) {
+        this.form.get('selectedPricePlan')?.setValue({});
+        this.characteristics = this.prodSpec.productSpecCharacteristic || [];
+        this.filterCharacteristics();
+      }
+
+      let profile = this.productOff?.attachment?.filter(item => item.name === 'Profile Picture') ?? [];
+      if(profile.length==0){
+        this.images = this.productOff?.attachment?.filter(item => item.attachmentType === 'Picture') ?? [];
+      } else {
+        this.images = profile;
+      }
+    }
   }
 
   ngOnDestroy(): void {