Add SubEvent Type && Change in price calculation

apps/event/migrations/0002_subevent_type.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.3 on 2023-09-05 16:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('event', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='subevent',
+            name='type',
+            field=models.CharField(choices=[('standard', 'Standard'), ('premium', 'Premium')], default='standard', max_length=100),
+        ),
+    ]

apps/event/models.py

@@ -43,6 +43,11 @@ class SubEvent(models.Model):
     end_date = models.DateField()
     image = models.ImageField(upload_to='sub_event', blank=True)
     price = models.DecimalField(max_digits=10, decimal_places=2, default=0.00)
+    type_options = (
+        ('standard', 'Standard'),
+        ('premium', 'Premium'),
+    )
+    type = models.CharField(max_length=100, choices=type_options, default='standard')
     event = models.ForeignKey('event.Event', on_delete=models.CASCADE)
     is_active = models.BooleanField(default=True)
     created_at = models.DateTimeField(auto_now_add=True)

apps/event/serializers.py

@@ -10,7 +10,7 @@ class Meta:
 class SubEventSerializer(serializers.ModelSerializer):
     class Meta:
         model = SubEvent
-        fields = ("id", "name", "description", "start_date", "end_date", "image", "event", "price")
+        fields = ("id", "name", "description", "start_date", "end_date", "image", "event", "price", "type")
 
 class AddonSerializer(serializers.ModelSerializer):
     class Meta:

apps/transactions/utils.py

@@ -20,11 +20,16 @@ def HandlePriceCalculation(request):
     sub_event_count = 0
     sub_event_price = 0
     addon_price = 0
+    # Check for premium sub events
     for sub_event in selected_sub_events[0]:
-        if sub_event_count < total_sub_event_allowed:
+        if SubEvent.objects.get(pk=sub_event).type == 'premium':
+            sub_event_price += SubEvent.objects.get(pk=sub_event).price
+    for sub_event in selected_sub_events[0]:
+        if SubEvent.objects.get(pk=sub_event).type == 'standard' and sub_event_count < total_sub_event_allowed:
             sub_event_count += 1
         else:
-            sub_event_price += SubEvent.objects.get(pk=sub_event).price
+            if SubEvent.objects.get(pk=sub_event).type == 'standard':
+                sub_event_price += SubEvent.objects.get(pk=sub_event).price
     for addon in selected_addons:
         addon_price += Addon.objects.get(pk=addon).price
     event_price = Event.objects.get(pk=event_id).price

frontend/src/app/customer/checkout/checkout.component.html

@@ -28,6 +28,9 @@
             </div>
             <mat-list>
               <mat-card class="customer-interface-card" *ngFor="let event of SubEvents">
+                <div class="ribbon" *ngIf="event.type == 'premium'">
+                  <span>Premium</span>
+                </div>
                 <div class="row d-flex align-items-center">
                   <div class="col-1 order-1">
                     <button mat-icon-button (click)="toggleDescription(event, $event)">
@@ -86,7 +89,17 @@
                 <h4>Event</h4>
               </div>
               <div class="col-md-6">
-                <p *ngFor="let subevent of SubEventsSelected">{{ subevent.name }}{{ subevent.price  | currency : "INR"  }}</p>
+                <p *ngFor="let subevent of SubEventsSelected">
+                  <ng-container *ngIf="subevent.given">
+                    <div class="event-details">
+                      {{ subevent.name }}
+                      <span class="free-tag">Free</span>
+                    </div>
+                  </ng-container>
+                  <ng-container *ngIf="!subevent.given">
+                    {{ subevent.name }} {{ subevent.price | currency : 'INR' }}
+                  </ng-container>
+                </p>                
               </div>
             </div>
             <div class="row mb-3">

frontend/src/app/customer/checkout/checkout.component.scss

@@ -102,3 +102,38 @@ fa-icon {
   display: none;
 }
 }
+
+.ribbon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #e91e63; /* Ribbon background color */
+  color: #fff; /* Ribbon text color */
+  padding: 5px 15px;
+  font-size: 16px;
+  font-weight: bold;
+  text-transform: uppercase;
+  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
+  transform: translate(50%, -50%);
+  z-index: 1;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
+}
+
+
+.ribbon span {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.event-details {
+  display: flex; /* Display its children inline */
+  align-items: center; /* Vertically align children */
+}
+
+.free-tag {
+  margin-left: 5px; /* Add space between the main content and "Free" tag */
+  padding: 5px 10px; /* Add padding to "Free" tag for better appearance */
+  background-color: green; /* Customize the background color */
+  color: white; /* Set the text color */
+  border-radius: 5px; /* Add rounded corners */
+}

frontend/src/app/customer/checkout/checkout.component.ts

@@ -18,6 +18,7 @@ export class CheckoutComponent {
   isDiscountApplied = false;
   DiscountValue: number = 0;
   SubEventsSelected: any = [];
+  SubEventsIncluded: number = 0;
   AddonsSelected: any = [];
   TotalPrice: number = 0;
   showCouponInput: boolean = false;
@@ -80,17 +81,40 @@ export class CheckoutComponent {
 
     SelectSubEvent(event: any, subEvent: any) {
       if (event.checked) {
-        this.SubEventsSelected.push(subEvent);
-        if (this.SubEventsSelected.length > this.EventDetailsService.event[0].sub_events_included_allowed) {
+        if (this.SubEventsIncluded+1 > this.EventDetailsService.event[0].sub_events_included_allowed || subEvent.type == 'premium') {
         this.TotalPrice += parseFloat(subEvent.price);
+        subEvent.given = false;
+        this.SubEventsSelected.push(subEvent);
+        }
+        else {
+          subEvent.given = true;
+          this.SubEventsSelected.push(subEvent);
+          this.SubEventsIncluded += 1;
         }
       } else {
-        if (this.SubEventsSelected.length > this.EventDetailsService.event[0].sub_events_included_allowed) {
+        if (subEvent.given == false || this.SubEventsIncluded > this.EventDetailsService.event[0].sub_events_included_allowed) {
           this.TotalPrice -= parseFloat(subEvent.price);
+        }
+        this.SubEventsSelected.splice(this.SubEventsSelected.indexOf(subEvent), 1);
+        let executed = 0;
+        for (let i = 0; i < this.SubEventsSelected.length && executed < 3; i++) {
+          if (this.SubEventsSelected[i].type != 'premium') {
+          executed += 1;
+          if (this.SubEventsSelected[i].given == false) {
+            this.TotalPrice -= parseFloat(this.SubEventsSelected[i].price);
+            this.SubEventsSelected[i].given = true;
           }
-          this.SubEventsSelected.splice(this.SubEventsSelected.indexOf(subEvent), 1);
-      }
+        }
+        }
+        let count = 0;
+        this.SubEventsSelected.forEach((subEvent: any) => {
+          if (subEvent.given == true) {
+            count += 1;
+          }
+        });
+        this.SubEventsIncluded = count;
     }
+  }
 
     onAddonSelectionChange(addonlist: any) {
       const previouslySelectedAddons = this.AddonsSelected;