TIER PRICING

src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts

@@ -1134,6 +1134,17 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
       this.numberValue='';
     }else if(this.rangeCharSelected){
       console.log('range')
+      // Validate that fromValue < toValue
+      const fromVal = Number(this.fromValue);
+      const toVal = Number(this.toValue);
+      if (fromVal >= toVal) {
+        console.log('range validation error: valueFrom >= valueTo')
+        this.errorMessage = 'Invalid range: "From" value must be less than "To" value';
+        this.showError = true;
+        setTimeout(() => {this.showError = false}, 3000);
+        return;
+      }
+
       if(this.creatingChars.length==0){
         this.creatingChars.push({
           isDefault:true,
@@ -1147,22 +1158,10 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
           valueFrom:this.fromValue as any,
           valueTo:this.toValue as any,
           unitOfMeasure:this.rangeUnit})
-      } 
-    } else {
-      console.log('boolean')
-      if(this.creatingChars.length==0){
-        this.creatingChars.push({
-          isDefault:true,
-          value:this.booleanValue as any
-        })
-      } else{
-        this.creatingChars.push({
-          isDefault:false,
-          value:this.booleanValue as any
-        })
       }
+    } else {
+      console.log('nothing')
     }
-    this.booleanValue=false;
   }
 
   removeCharValue(char:any,idx:any){
@@ -1183,6 +1182,17 @@ export class CreateProductSpecComponent implements OnInit, OnDestroy {
 
   saveChar(){
     if(this.charsForm.value.name!=null){
+
+      // In showFinish() only takes the first ocurrence in name for sending to proxy
+      // I validate the duplication here to prevent confusion in client when suddenly a characteristic with the same name dissapeared 
+      if (this.prodChars.find((char)=> char.name === this.charsForm.value.name)){
+        console.log('name duplicated error')
+        this.errorMessage = 'Cannot save duplicated name in characteristics';
+        this.showError = true;
+        setTimeout(() => {this.showError = false}, 3000);
+        return
+      }
+
       // Create the main characteristic
       this.prodChars.push({
         id: 'urn:ngsi-ld:characteristic:'+uuidv4(),

src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts

@@ -1342,6 +1342,17 @@ export class UpdateProductSpecComponent implements OnInit, OnDestroy {
       this.numberValue='';
     }else if(this.rangeCharSelected){
       console.log('range')
+      // Validate that fromValue < toValue
+      const fromVal = Number(this.fromValue);
+      const toVal = Number(this.toValue);
+      if (fromVal >= toVal) {
+        console.log('range validation error: valueFrom >= valueTo')
+        this.errorMessage = 'Invalid range: "From" value must be less than "To" value';
+        this.showError = true;
+        setTimeout(() => {this.showError = false}, 3000);
+        return;
+      }
+
       if(this.creatingChars.length==0){
         this.creatingChars.push({
           isDefault:true,

src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.html

@@ -106,7 +106,7 @@ <h2 class="text-xl font-semibold text-gray-700 dark:text-white">
         </div>
       </div>
       <div class="flex flex-row">
-        <select id="type" (change)="changePriceComponentChar($event)"
+        <select data-cy="selectPriceSpecChar" id="type" (change)="changePriceComponentChar($event)"
           class="mb-2 mr-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-gray-100 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
             @if(!selectedCharacteristic){
               <option value="">Select a characteristic</option>
@@ -121,20 +121,48 @@ <h2 class="text-xl font-semibold text-gray-700 dark:text-white">
                 }
               }
             }
-          </select>
-          @if(showValueSelect){
-              <select id="type" (change)="changePriceComponentCharValue($event)"
-              class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-gray-100 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> 
-                  @for(val of selectedCharacteristic.productSpecCharacteristicValue; track val){
-                      @if(hasKey(val, 'unitOfMeasure')){
-                          <option value="{{val.value}}">{{val.value}} ({{val.unitOfMeasure}})</option>
-                      } @else {
-                          <option value="{{val.value}}">{{val.value}}</option>
-                      }
-                  }
-              </select>
-          }
+        </select>
+        @if(showValueSelect){
+            <select id="type" (change)="changePriceComponentCharValue($event)"
+            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-gray-100 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                @for(val of selectedCharacteristic.productSpecCharacteristicValue; track val){
+                    @if(hasKey(val, 'unitOfMeasure')){
+                        <option value="{{val.value}}">{{val.value}} ({{val.unitOfMeasure}})</option>
+                    } @else {
+                        <option value="{{val.value}}">{{val.value}}</option>
+                    }
+                }
+            </select>
+        }
       </div>
+
+      @if(selectedCharacteristic && selectedCharacteristic.productSpecCharacteristicValue?.[0] &&
+          hasKey(selectedCharacteristic.productSpecCharacteristicValue[0], 'valueFrom') &&
+          hasKey(selectedCharacteristic.productSpecCharacteristicValue[0], 'valueTo')){
+        <div class="bg-blue-50 dark:bg-gray-900 p-3 rounded border border-blue-200 dark:border-blue-800 mb-4">
+          <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Selected Range: [{{ selectedCharacteristic.productSpecCharacteristicValue[0].valueFrom }},{{ selectedCharacteristic.productSpecCharacteristicValue[0].valueTo }}]. 
+            Not modifiable, in case you want Tiering range prices go to price plan modal and click on Tier Pricing button
+          </label>
+          <div class="relative w-full h-12 bg-gray-200 dark:bg-gray-700 rounded px-4">
+            <div class="absolute top-1/2 left-4 right-4 h-2 bg-blue-500 dark:bg-blue-400 rounded transform -translate-y-1/2"></div>
+
+            <div class="absolute top-1/2 left-4 transform -translate-y-1/2 -translate-x-1/2">
+              <div class="w-3 h-3 bg-blue-600 dark:bg-blue-500 rounded-full border-2 border-white"></div>
+              <span class="absolute top-5 left-1/2 transform -translate-x-1/2 text-xs font-semibold text-blue-700 dark:text-blue-300 whitespace-nowrap">
+                {{ selectedCharacteristic.productSpecCharacteristicValue[0].valueFrom }}
+              </span>
+            </div>
+
+            <div class="absolute top-1/2 right-4 transform -translate-y-1/2 translate-x-1/2">
+              <div class="w-3 h-3 bg-blue-600 dark:bg-blue-500 rounded-full border-2 border-white"></div>
+              <span class="absolute top-5 left-1/2 transform -translate-x-1/2 text-xs font-semibold text-blue-700 dark:text-blue-300 whitespace-nowrap">
+                {{ selectedCharacteristic.productSpecCharacteristicValue[0].valueTo }}
+              </span>
+            </div>
+          </div>
+        </div>
+      }
       }
 
       <!-- Tipo de Precio -->

src/app/shared/forms/offer/price-plans/price-component-drawer/price-component-drawer.component.ts

@@ -179,7 +179,7 @@ export class PriceComponentDrawerComponent implements OnInit {
     }
 
     this.priceComponentForm.patchValue({
-      selectedCharacteristic: this.mapChars(this.selectedCharacteristicVal)
+      selectedCharacteristic: [this.mapChars(this.selectedCharacteristicVal)]
     });
   }
 
@@ -191,12 +191,19 @@ export class PriceComponentDrawerComponent implements OnInit {
       description: this.selectedCharacteristic.description || '',
     }
 
-    // Add the productSpecCharacteristicValue only if needed
-    // Range chars not include a value
+    // Add the productSpecCharacteristicValue
     if (this.showValueSelect) {
+      // For non-range characteristics (with specific values)
       char.productSpecCharacteristicValue = [this.selectedCharacteristic.productSpecCharacteristicValue.find((opt: any) => {
         return String(opt.value) === String(charValue);
       })];
+    } else if (this.selectedCharacteristic.productSpecCharacteristicValue?.[0]) {
+      // For range characteristics, include the full range
+      char.productSpecCharacteristicValue = [{
+        valueFrom: this.selectedCharacteristic.productSpecCharacteristicValue[0].valueFrom,
+        valueTo: this.selectedCharacteristic.productSpecCharacteristicValue[0].valueTo,
+        isDefault: true
+      }];
     }
 
     return char
@@ -205,7 +212,7 @@ export class PriceComponentDrawerComponent implements OnInit {
   changePriceComponentCharValue(event: any){
     this.selectedCharacteristicVal = event.target.value;
     this.priceComponentForm.patchValue({
-      selectedCharacteristic: this.mapChars(event.target.value)
+      selectedCharacteristic: [this.mapChars(event.target.value)]
     });
   }
 

src/app/shared/forms/offer/price-plans/price-plan-drawer/price-plan-drawer.component.html

@@ -3,7 +3,7 @@
      [ngClass]="{'opacity-100': isOpen, 'opacity-0 pointer-events-none': !isOpen}">
 
   <!-- Overlay when child drawer is open - covers entire viewport and dims parent -->
-  <div *ngIf="showPriceComponentDrawer"
+  <div *ngIf="showPriceComponentDrawer || showTierPricingDrawer"
        class="fixed inset-0 bg-black bg-opacity-30 pointer-events-none z-[51]"></div>
 
   <!-- Drawer Content -->
@@ -200,9 +200,9 @@ <h3 class="font-bold text-lg dark:text-white">
                                           (delete)="deletePriceComponent($event)">
               </app-price-components-table>
 
-              <div class="px-4">
+              <div class="px-4 flex flex-wrap gap-2">
                 <button data-cy="newPriceComponent" type="button" (click)="openPriceComponentDrawer()"
-                        class="mt-2 px-4 py-2 bg-blue-500 text-white rounded flex items-center">
+                        class="mt-2 px-4 py-2 bg-blue-500 text-white rounded flex items-center hover:bg-blue-600">
                   <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                     <path fill="currentColor"
                           d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24
@@ -211,11 +211,34 @@ <h3 class="font-bold text-lg dark:text-white">
                   </svg>
                   {{ 'FORMS.PRICE_PLANS._add_price_component' | translate }}
                 </button>
+
+                <button
+                  data-cy="newTierPricing"
+                  type="button"
+                  (click)="openTierPricingDrawer()"
+                  [disabled]="!hasRangeCharacteristics()"
+                  [ngClass]="hasRangeCharacteristics() ? 'bg-green-500 hover:bg-green-600 cursor-pointer' : 'bg-gray-400 cursor-not-allowed opacity-50'"
+                  class="mt-2 px-4 py-2 text-white rounded flex items-center"
+                  [title]="!hasRangeCharacteristics() ? 'No range characteristics available in product specification' : 'Create tier pricing based on range characteristics'"
+                >
+                  <svg class="min-w-4 w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <path fill="currentColor"
+                          d="M448 160l-128 0 0-32 128 0 0 32zM48 64C21.5 64 0 85.5 0 112l0 64c0 26.5 21.5 48 48 48l416 0c26.5 0 48-21.5 48-48l0-64c0-26.5-21.5-48-48-48L48 64zM448 352l-256 0 0-32 256 0 0 32zM48 256c-26.5 0-48 21.5-48 48l0 64c0 26.5 21.5 48 48 48l416 0c26.5 0 48-21.5 48-48l0-64c0-26.5-21.5-48-48-48L48 256z"/>
+                  </svg>
+                  {{ 'FORMS.PRICE_PLANS._add_tier_pricing' | translate }}
+                </button>
               </div>
             </div>
           </div>
         }
 
+        <!-- Range Validation Error Message -->
+        @if(rangeValidationError) {
+          <div class="mb-4 p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-red-900 dark:text-red-200" role="alert">
+            <span class="font-medium">{{ rangeValidationError }}</span>
+          </div>
+        }
+
         <!-- Action Buttons -->
         <div class="flex justify-end space-x-3">
           <button data-cy="cancelPricePlan" type="button" (click)="closeDrawer()" class="px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded">
@@ -252,4 +275,11 @@ <h3 class="font-bold text-lg dark:text-white">
                                 (close)="closePriceComponentDrawer($event)">
     </app-price-component-drawer>
 
+    <!-- Drawer para crear Tier Pricing -->
+    <app-tier-pricing-drawer *ngIf="showTierPricingDrawer"
+                             [prodChars]="prodSpec?.productSpecCharacteristic"
+                             (saveTierPricing)="closeTierPricingDrawer($event)"
+                             (close)="closeTierPricingDrawer(null)">
+    </app-tier-pricing-drawer>
+
 </div>