From 70d807220e91a35603bd87bbf132e61c50eb29fe Mon Sep 17 00:00:00 2001
From: bobbyvish <bobbyvishwakarma114@gmail.com>
Date: Fri, 23 Aug 2024 17:25:08 +0530
Subject: [PATCH 1/2] fix: age-group filter, url redirect

---
 accounts/views.py                                   | 13 ++++++++++++-
 manage_events/api/filters.py                        |  7 ++++++-
 manage_subscriptions/models.py                      |  2 +-
 manage_subscriptions/views.py                       |  4 ++--
 manage_wallets/api/views.py                         |  2 +-
 .../principal_subscription_add.html                 |  2 +-
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/accounts/views.py b/accounts/views.py
index 490ef43..24f052f 100644
--- a/accounts/views.py
+++ b/accounts/views.py
@@ -797,8 +797,18 @@ class CustomerUpdateView(LoginRequiredMixin, generic.View):
             return render(request, self.template_name, context=context)
 
 class CustomerDetailView(LoginRequiredMixin, generic.DetailView):
+    page_name = resource_action.RESOURCE_MANAGE_CUSTOMER
+    resource = resource_action.RESOURCE_MANAGE_CUSTOMER
+    action = resource_action.ACTION_READ
     template_name = 'accounts/customer/customer_detail.html'
 
+    def get_context_data(self, **kwargs):
+        context = {
+            "page_name": self.page_name,
+        }
+        context.update(kwargs)  # Include any additional context data passed to the view
+        return context
+
     def get(self, request, *args, **kwargs):
         principal_obj = IAmPrincipal.objects.get(pk=kwargs.get("pk"))
         try:
@@ -806,7 +816,8 @@ class CustomerDetailView(LoginRequiredMixin, generic.DetailView):
         except Exception as e:
             principal_preference = None
         principal_subscription = PrincipalSubscription.objects.filter(principal=principal_obj).order_by("-start_date").first()
-        return render(request, self.template_name, locals())
+        context = self.get_context_data(principal_obj=principal_obj,principal_preference=principal_preference,principal_subscription=principal_subscription)
+        return render(request, self.template_name, context=context)
 
 class CustomerListView(LoginRequiredMixin, generic.ListView):
     page_name = resource_action.RESOURCE_MANAGE_CUSTOMER
diff --git a/manage_events/api/filters.py b/manage_events/api/filters.py
index cb88f8c..e4adacb 100644
--- a/manage_events/api/filters.py
+++ b/manage_events/api/filters.py
@@ -14,7 +14,7 @@ class EventFilter(filters.FilterSet):
     # end_date = filters.DateFilter(field_name="end_date", lookup_expr="lte")
     price_from = filters.NumberFilter(field_name="entry_fee", lookup_expr="gte")
     price_to = filters.NumberFilter(field_name="entry_fee", lookup_expr="lte")
-    age_group = filters.CharFilter(field_name="age_group", lookup_expr="icontains")
+       age_group = filters.CharFilter(method="filter_age_group")
 
     class Meta:
         model = Event
@@ -32,6 +32,11 @@ class EventFilter(filters.FilterSet):
     def filter_category(self, queryset, name, value):
         category = value.split(',')
         return queryset.filter(category__title__in=category)
+    
+    def filter_age_group(self, queryset, name, value):
+        age_group = value.split(',')
+        return queryset.filter(age_group__in=age_group)
+
 
     # def filter_queryset(self, queryset):
     #     queryset = super().filter_queryset(queryset)
diff --git a/manage_subscriptions/models.py b/manage_subscriptions/models.py
index b14e238..9c929fa 100644
--- a/manage_subscriptions/models.py
+++ b/manage_subscriptions/models.py
@@ -72,7 +72,7 @@ class Subscription(BaseModel):
                 # Create new product and price
                 price = StripeService.create_price(
                     product_data={
-                        "name": self.txitle,
+                        "name": self.title,
                         "description": self.short_description,
                     },
                     unit_amount=int(self.amount * 100),
diff --git a/manage_subscriptions/views.py b/manage_subscriptions/views.py
index ab5f782..5c582dc 100644
--- a/manage_subscriptions/views.py
+++ b/manage_subscriptions/views.py
@@ -178,8 +178,8 @@ class SubscriptionDeleteView(LoginRequiredMixin, generic.View):
 
 class PrincipalSubscriptionCreateOrUpdateView(LoginRequiredMixin, generic.View):
     # Set the page_name and resource
-    page_name = resource_action.RESOURCE_MANAGE_SUBSCRIPTIONS
-    resource = resource_action.RESOURCE_MANAGE_SUBSCRIPTIONS
+    page_name = resource_action.RESOURCE_PRINCIPAL_SUBSCRIPTIONS
+    resource = resource_action.RESOURCE_PRINCIPAL_SUBSCRIPTIONS
 
     # Initialize the action as ACTION_CREATE (can change based on logic)
     action = resource_action.ACTION_CREATE  # Default action
diff --git a/manage_wallets/api/views.py b/manage_wallets/api/views.py
index f477a22..931bbcb 100644
--- a/manage_wallets/api/views.py
+++ b/manage_wallets/api/views.py
@@ -146,7 +146,7 @@ class TransactionView(APIView):
                 models.TransactionStatus.SUCCESS,
                 models.TransactionStatus.FAIL,
             ],
-        )
+        ).order_by("-created_on")
         serializer = serializers.TransactionSerializer(queryset, many=True)
 
         response = {
diff --git a/templates/manage_subscriptions/principal_subscription_add.html b/templates/manage_subscriptions/principal_subscription_add.html
index 8da8df6..d524ae8 100644
--- a/templates/manage_subscriptions/principal_subscription_add.html
+++ b/templates/manage_subscriptions/principal_subscription_add.html
@@ -16,7 +16,7 @@
     <div class="col-lg-12">
         <div class="row mb-2">
             <div class="col">
-                <h3>{{operation}} {{page_name}}</h3>
+                <h3>{{operation}} Customer Subscription</h3>
             </div>
             <div class="col text-end">
                 <button class="btn btn-dark mb-2 me-4" onclick="history.back()">

From 7ba73dff3524d99d2b150adaabb5837b74d6195a Mon Sep 17 00:00:00 2001
From: bobbyvish <bobbyvishwakarma114@gmail.com>
Date: Sun, 25 Aug 2024 19:11:49 +0530
Subject: [PATCH 2/2] refator(subscription): update functionality, list view,
 subscription design

---
 manage_events/api/filters.py                  |  4 +-
 manage_subscriptions/forms.py                 | 19 +++++
 ...014_alter_subscription_long_description.py | 19 +++++
 manage_subscriptions/models.py                | 47 ++++++++++--
 manage_subscriptions/urls.py                  |  5 ++
 manage_subscriptions/views.py                 |  2 +-
 static/src/assets/css/payment/style.css       | 32 +++++++-
 .../principal_subscriptions_list.html         | 14 +---
 .../subscription_details.html                 | 28 +++----
 .../subscription_list.html                    | 28 +++++--
 templates/stripe_html/index.html              | 76 +++++++++----------
 11 files changed, 183 insertions(+), 91 deletions(-)
 create mode 100644 manage_subscriptions/migrations/0014_alter_subscription_long_description.py

diff --git a/manage_events/api/filters.py b/manage_events/api/filters.py
index e4adacb..e26a938 100644
--- a/manage_events/api/filters.py
+++ b/manage_events/api/filters.py
@@ -14,7 +14,7 @@ class EventFilter(filters.FilterSet):
     # end_date = filters.DateFilter(field_name="end_date", lookup_expr="lte")
     price_from = filters.NumberFilter(field_name="entry_fee", lookup_expr="gte")
     price_to = filters.NumberFilter(field_name="entry_fee", lookup_expr="lte")
-       age_group = filters.CharFilter(method="filter_age_group")
+    age_group = filters.CharFilter(method="filter_age_group")
 
     class Meta:
         model = Event
@@ -32,7 +32,7 @@ class EventFilter(filters.FilterSet):
     def filter_category(self, queryset, name, value):
         category = value.split(',')
         return queryset.filter(category__title__in=category)
-    
+
     def filter_age_group(self, queryset, name, value):
         age_group = value.split(',')
         return queryset.filter(age_group__in=age_group)
diff --git a/manage_subscriptions/forms.py b/manage_subscriptions/forms.py
index ececb47..d4afaee 100644
--- a/manage_subscriptions/forms.py
+++ b/manage_subscriptions/forms.py
@@ -11,6 +11,7 @@ class SubscriptionForm(forms.ModelForm):
         fields = [
             "title",
             "short_description",
+            "long_description",
             "interval",
             "interval_count",
             "high_amount",
@@ -20,6 +21,7 @@ class SubscriptionForm(forms.ModelForm):
             "active",
             "is_free",
         ]
+        exclude = []
 
     def __init__(self, *args, **kwargs):
         super(SubscriptionForm, self).__init__(*args, **kwargs)
@@ -29,6 +31,23 @@ class SubscriptionForm(forms.ModelForm):
             id__in=[event_user.id, event_manager.id]
         )
 
+        if self.instance:
+            # If there is an instance (i.e. we're editing an existing subscription)
+
+            # Use a dictionary comprehension to create a new dictionary of fields
+            # that excludes the readonly fields
+            self.fields = {
+                field_name: field
+                for field_name, field in self.fields.items()
+                if field_name not in [
+                    "interval",
+                    "interval_count",
+                    "amount",
+                    "high_amount",
+                    "principal_types",
+                ]
+            }
+
 
 class PrincipalSubscriptionForm(forms.ModelForm):
     class Meta:
diff --git a/manage_subscriptions/migrations/0014_alter_subscription_long_description.py b/manage_subscriptions/migrations/0014_alter_subscription_long_description.py
new file mode 100644
index 0000000..51a85f9
--- /dev/null
+++ b/manage_subscriptions/migrations/0014_alter_subscription_long_description.py
@@ -0,0 +1,19 @@
+# Generated by Django 5.0.2 on 2024-08-25 10:39
+
+import django_quill.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('manage_subscriptions', '0013_remove_subscription_plan_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='subscription',
+            name='long_description',
+            field=django_quill.fields.QuillField(),
+        ),
+    ]
diff --git a/manage_subscriptions/models.py b/manage_subscriptions/models.py
index 9c929fa..70bba3b 100644
--- a/manage_subscriptions/models.py
+++ b/manage_subscriptions/models.py
@@ -4,6 +4,7 @@ from django.db import models
 from django.core.exceptions import ValidationError
 from accounts.models import BaseModel, IAmPrincipal, IAmPrincipalType
 from django.utils.translation import gettext_lazy as _
+from django_quill.fields import QuillField
 
 
 class Subscription(BaseModel):
@@ -22,7 +23,7 @@ class Subscription(BaseModel):
     price_id = models.CharField(max_length=255, blank=True, null=True)
     product_id = models.CharField(max_length=255, blank=True, null=True)
     short_description = models.CharField(max_length=255, null=True, blank=True)
-    long_description = models.TextField(null=True, blank=True)
+    long_description = QuillField()
     image = models.ImageField(upload_to="subscription_img", null=True, blank=True)
     interval = models.CharField(max_length=10, choices=INTERVAL_TYPES)
     interval_count = models.IntegerField(default=1)
@@ -56,19 +57,40 @@ class Subscription(BaseModel):
 
     def save(self, *args, **kwargs):
         from goodtimes.services import StripeService
+
         if not self.delete:
             self.clean()
 
-        if not self.is_free:
-            if self.price_id:
-                # Stipe dont provide to update the price record except active and deactive
+        if self.is_free:
+            # If is_free is True, set amounts to 0 and remove Stripe price and product IDs
+            self.high_amount = 0.00
+            self.amount = 0.00
+            self.price_id = None
+            self.product_id = None
+        else:
+            if self.id and self.price_id:  # Update existing subscription
+                # Retrieve existing price and product from Stripe
                 price = StripeService.retrieve_price(self.price_id)
                 if not price["success"]:
                     raise Exception(price['message'])
 
+                # Update price active status if it differs from local active status
                 if self.active != price["data"].active:
                     StripeService.update_price(price_id=self.price_id, active=self.active)
-            else:
+
+                # Retrieve existing product from Stripe
+                product = StripeService.retrive_product(self.product_id)
+                if not product["success"]:
+                    raise Exception(product['message'])
+
+                # Update product data if it has changed
+                if product["data"].name != self.title or product["data"].description != self.short_description:
+                    StripeService.update_product(
+                        product_id=self.product_id,
+                        name=self.title,
+                        description=self.short_description
+                    )
+            else:  # Create new subscription
                 # Create new product and price
                 price = StripeService.create_price(
                     product_data={
@@ -89,7 +111,7 @@ class Subscription(BaseModel):
                 if not price["success"]:
                     raise Exception(price['message'])
                 
-                # add the id in record
+                # Add the IDs to the record
                 self.price_id = price["data"].id
                 self.product_id = price["data"].product
 
@@ -105,8 +127,6 @@ class Subscription(BaseModel):
         return count[self.interval] * self.interval_count
 
 
-
-
 class SubscriptionStatus(models.TextChoices):
     ACTIVE = "active", _("Active")
     EXPIRED = "expired", _("Expired")
@@ -146,6 +166,17 @@ class PrincipalSubscription(BaseModel):
 
     def __str__(self):
         return f"{self.subscription} - {self.principal.first_name}"
+    
+    def save(self, *args, **kwargs):
+        # If the subscription status is expired or inactive, set the active flag to False
+        if self.status in [SubscriptionStatus.EXPIRED, SubscriptionStatus.INACTIVE]:
+            self.active = False
+        
+        # If the active flag is False, set the status to inactive
+        if not self.active:
+            self.status = SubscriptionStatus.INACTIVE
+        super.save(*args, **kwargs)
+
 
     def generate_order_id(email):
         return f"order_{str(timezone.localtime().timestamp())}{str(email)}"
diff --git a/manage_subscriptions/urls.py b/manage_subscriptions/urls.py
index 6e69838..21c0d15 100644
--- a/manage_subscriptions/urls.py
+++ b/manage_subscriptions/urls.py
@@ -12,6 +12,11 @@ urlpatterns = [
         views.SubscriptionCreateOrUpdateView.as_view(),
         name="subscription_add",
     ),
+    path(
+        "subscription/edit/<int:pk>/",
+        views.SubscriptionCreateOrUpdateView.as_view(),
+        name="subscription_edit",
+    ),
     path("subscription/<int:pk>/", views.SubscriptionDetailView.as_view(), name="subscription_detail"),
     path(
         "subscription/delete/<int:pk>",
diff --git a/manage_subscriptions/views.py b/manage_subscriptions/views.py
index 5c582dc..1c5e00b 100644
--- a/manage_subscriptions/views.py
+++ b/manage_subscriptions/views.py
@@ -126,7 +126,7 @@ class SubscriptionView(LoginRequiredMixin, generic.ListView):
         queryset = (
             super()
             .get_queryset()
-            .filter(deleted=False, active=True)
+            .filter(deleted=False)
             .prefetch_related("principal_types")
         )
         return queryset.order_by("-created_on")
diff --git a/static/src/assets/css/payment/style.css b/static/src/assets/css/payment/style.css
index b58d7c4..5fb6746 100644
--- a/static/src/assets/css/payment/style.css
+++ b/static/src/assets/css/payment/style.css
@@ -331,6 +331,7 @@ header nav ul li a:hover:after {
     font-weight: 600;
     padding: 10px 40px;
     border-radius: 5px;
+    width: 100%;
 }
 
 
@@ -601,8 +602,6 @@ div#accordionExample {
 
 .gold-text {
     color: rgb(209 170 88);
-    margin: 0;
-    padding: 12px;
 }
 
 .bg_color {
@@ -618,9 +617,35 @@ div#accordionExample {
     padding: 35px;
     border-radius: 6px;
     background-color: #00000080;
-    text-align: center;
+    text-align: start;
+    margin-bottom: 15px;
 }
 
+/* New css */
+.feat-card .para {
+    font-size: 18px;
+  }
+  .currency{
+    font-size: 36px;
+    color: #fff;
+    margin-right:5px
+  }
+  .interval{
+    font-size: 14px;
+    color: gray;
+  }
+
+  .actual-price { 
+    text-decoration: line-through; 
+    color: #ccc; 
+}
+  .offer-price { 
+    font-size: 36px;
+    /* font-weight: bold;  */
+    color: #fff; 
+} 
+
+
 /* mediascreen */
 @media (max-width: 1199px) {
     .big-heading br {
@@ -829,6 +854,7 @@ div#accordionExample {
 .common-btn {
   /* remove default button margins */
   margin: 0;
+  width: 100%;
 }
 .feat-card input.form-control.coupon-code-input {
     border-radius: 5px;
diff --git a/templates/manage_subscriptions/principal_subscriptions_list.html b/templates/manage_subscriptions/principal_subscriptions_list.html
index 7bbc327..2bbae88 100644
--- a/templates/manage_subscriptions/principal_subscriptions_list.html
+++ b/templates/manage_subscriptions/principal_subscriptions_list.html
@@ -60,18 +60,15 @@
                                                         <th class="dt-no-sorting sorting" tabindex="8"
                                                             aria-controls="style-3"
                                                             style="width: 100.625px;">End</th>
-                                                        <th class="checkbox-column sorting_asc" tabindex="0"
-                                                            aria-controls="style-3" aria-sort="ascending"
-                                                            style="width: 69.2656px;"> Is Subscription </th>
                                                         <th class="dt-no-sorting sorting" tabindex="8"
                                                             aria-controls="style-3"
                                                             style="width: 100.625px;">Grace</th>
                                                         <th class="dt-no-sorting sorting" tabindex="8"
                                                             aria-controls="style-3"
                                                             style="width: 100.625px;">Created At</th>
-                                                        <th class="dt-no-sorting sorting" tabindex="8"
+                                                        {% comment %} <th class="dt-no-sorting sorting" tabindex="8"
                                                             aria-controls="style-3"
-                                                            style="width: 100.625px;">Active</th>
+                                                            style="width: 100.625px;">Active</th> {% endcomment %}
                                                         <th class="dt-no-sorting sorting" tabindex="8"
                                                             aria-controls="style-3"
                                                             style="width: 100.625px;">Action</th>
@@ -88,14 +85,11 @@
                                                         <td>{{data_obj.stripe_subscription_id}}</td>
                                                         <td>{{data_obj.start_date}}</td>
                                                         <td>{{data_obj.end_date}}</td>
-                                                        <td class="text-center">
-                                                            <span class="shadow-none badge {% if data_obj.is_stripe_subscription %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.is_stripe_subscription}}</span>
-                                                        </td>
                                                         <td>{{data_obj.grace_period_end_date}}</td>
                                                         <td>{{data_obj.created_on}}</td>
-                                                        <td class="text-center">
+                                                        {% comment %} <td class="text-center">
                                                             <span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
-                                                        </td>
+                                                        </td> {% endcomment %}
                                                         <td class="text-center">
                                                             <ul class="table-controls">
                                                                 <li><a href="{% url 'manage_subscriptions:principal_subscription_edit' data_obj.id %}" class="bs-tooltip"
diff --git a/templates/manage_subscriptions/subscription_details.html b/templates/manage_subscriptions/subscription_details.html
index 0e69252..e1e6ebe 100644
--- a/templates/manage_subscriptions/subscription_details.html
+++ b/templates/manage_subscriptions/subscription_details.html
@@ -23,9 +23,14 @@
                     <h5 class="card-title"><i class="bi bi-currency-dollar"></i> Plan & Pricing</h5>
                 </div>
                 <div class="card-body">
-                    <p><strong>Plan:</strong> {{ subscription.plan.title }}</p>
-                    <p><strong>Price ID:</strong> {{ subscription.price_id|default:"Not a Stripe Subscription" }}</p>
-                    <p><strong>Stripe Product:</strong> {{ subscription.stripe_product|default:"None" }}</p>
+                    <p><strong>Customer type :</strong>
+                        {% for principal_type in subscription.principal_types.all %}
+                            {{ principal_type.name }}
+                        {% endfor %}
+                    </p>
+                    <p><strong>Plan:</strong> {{subscription.interval_count}} {{ subscription.interval }}</p>
+                    <p><strong>Stripe Price ID:</strong> {{ subscription.price_id|default:"Not a Stripe Subscription" }}</p>
+                    <p><strong>Stripe Product ID:</strong> {{ subscription.product_id|default:"None" }}</p>
                     <p><strong>Amount:</strong> ${{ subscription.amount }}</p>
                     <p><strong>High Amount:</strong> ${{ subscription.high_amount }}</p>
                     <p><strong>Referral Percentage:</strong> {{ subscription.referral_percentage }}%</p>
@@ -49,26 +54,11 @@
                 <div class="card-body">
                     <p><strong>Short Description:</strong> {{ subscription.short_description|default:"Not Provided" }}</p>
                     <p><strong>Long Description:</strong></p>
-                    <p>{{ subscription.long_description|default:"Not Provided" }}</p>
+                    <p>{{ subscription.long_description.html|default:"Not Provided"|safe }}</p>
                 </div>
             </div>
         </div>
 
-        <!-- Principal Types -->
-        <div class="col-md-12 mb-4">
-            <div class="card shadow-sm">
-                <div class="card-header text-white">
-                    <h5 class="card-title"><i class="bi bi-people"></i> Principal Types</h5>
-                </div>
-                <div class="card-body">
-                    <ul class="list-group">
-                        {% for principal_type in subscription.principal_types.all %}
-                            <li class="list-group-item">{{ principal_type.name }}</li>
-                        {% endfor %}
-                    </ul>
-                </div>
-            </div>
-        </div>
 
     </div>
 </div>
diff --git a/templates/manage_subscriptions/subscription_list.html b/templates/manage_subscriptions/subscription_list.html
index ee40a60..c2a59d7 100644
--- a/templates/manage_subscriptions/subscription_list.html
+++ b/templates/manage_subscriptions/subscription_list.html
@@ -84,6 +84,26 @@
                                                         </td>
                                                         <td class="text-center">
                                                             <ul class="table-controls">
+                                                                <li><a href="{% url 'manage_subscriptions:subscription_edit' data_obj.id %}" class="bs-tooltip"
+                                                                    data-bs-toggle="tooltip" data-bs-placement="top" title=""
+                                                                    data-original-title="Edit" data-bs-original-title="Edit"
+                                                                    aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
+                                                                        width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                                                        stroke="currentColor" stroke-width="2"
+                                                                        stroke-linecap="round" stroke-linejoin="round"
+                                                                        class="feather feather-edit-2 p-1 br-8 mb-1">
+                                                                        <path
+                                                                            d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
+                                                                        </path>
+                                                                    </svg></a>
+                                                                </li>
+                                                                <li>
+                                                                    <a href="{% url 'manage_subscriptions:subscription_detail' data_obj.id %}">
+                                                                        <span class="material-symbols-outlined">
+                                                                            visibility
+                                                                            </span>
+                                                                    </a>
+                                                                </li>
                                                                 <li><a href="{% url 'manage_subscriptions:subscription_delete' data_obj.id %}" class="bs-tooltip"
                                                                         data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                                         data-original-title="Edit" data-bs-original-title="Delete"
@@ -99,13 +119,7 @@
                                                                     </svg>
                                                                     </a>
                                                                 </li>
-                                                                <li>
-                                                                    <a href="{% url 'manage_subscriptions:subscription_detail' data_obj.id %}">
-                                                                        <span class="material-symbols-outlined">
-                                                                            visibility
-                                                                            </span>
-                                                                    </a>
-                                                                </li>
+                                                                
                                                             </ul>
                                                         </td>
                                                     </tr>
diff --git a/templates/stripe_html/index.html b/templates/stripe_html/index.html
index 61bc410..0adc577 100644
--- a/templates/stripe_html/index.html
+++ b/templates/stripe_html/index.html
@@ -98,49 +98,45 @@
                 {% for subscription in subscriptions %}
                 <div class="col-md-4">
                     <div class="feat-card">
-                        <div class="card text-center mb-2">
-                            <!-- Dark card with gold border -->
-                            <h5 class="gold-text bg_color">{{ subscription.title }}
-                            </h5>
-                            {% if subscription.image %}
-                            <img src="{{ subscription.image.url }}" alt="{{ subscription.title }}" class="card-img-top">
-                            {% endif %}
-                        </div>
-                        <div class="card-body"> <!-- Golden text for the body -->
-                            {% if subscription.short_description %}
-                            <p class="gold-text">{{ subscription.short_description }}</p>
-                            {% endif %}
-                            {% if subscription.long_description %}
-                            <p class="gold-text">{{ subscription.long_description|truncatewords:20 }}</p>
-                            {% endif %}
-                            <h5 class="card-title gold-text">Subscription Amount</h5>
-                            {% if subscription.high_amount and subscription.high_amount > subscription.amount %}
-                            <p class="gold-text"><s>£ {{ subscription.high_amount }}</s> £ {{ subscription.amount }}
+                        <h4 style="color:#fff">{{subscription.title}}</h4>
+                        {% if subscription.high_amount and subscription.high_amount > subscription.amount %}
+                            <p> 
+                                <span class="actual-price">£{{subscription.high_amount}}</span> 
+                                <span class="offer-price">£{{subscription.amount}}</span>
+                                {% if subscription.interval_count == 1 %}
+                                <span class="interval">/ {{ subscription.interval| capfirst }}</span>
+                                {% else %}
+                                <span class="interval">/ {{ subscription.interval_count }} {{ subscription.interval | capfirst }}s</span>
+                                {% endif %}
                             </p>
-                            {% else %}
-                            <p class="gold-text">£ {{ subscription.amount }}</p>
-                            {% endif %}
-                            <p class="gold-text">Subscription Cycle: {{subscription.interval_count}} {{ subscription.interval | capfirst }}</p>
-
-                        </div>
-                        <div class="Adventure-btn text-center">
-                            {% comment %} <input type="text" name="coupon_code_{{subscription.id}}" placeholder="Enter Coupon Code" class="form-control" size="20"> {% endcomment %}
-                            <!-- Checkbox to select recurring or one-time payment -->
-                            <div class="form-check" style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
-                                <input class="form-check-input recurring-checkbox" type="checkbox" id="recurringCheck_{{subscription.id}}" style="margin-right: -4px; margin-top: -5px;">
-                                <label class="form-check-label gold-text" for="recurringCheck_{{subscription.id}}" style="margin: 0;">
-                                    Do you want to keep it auto-renew(recurring)
-                                </label>
-                            </div>                            
-                            <!-- Add a data attribute to store subscription ID -->
-                            <button class="common-btn subscribe-btn" data-subscription-id="{{ subscription.id }}">Join now</button>
-                            <!-- Error message container -->
-                            <div class="alert alert-danger coupon-error-message mt-2" style="display: none;"></div>
-                        </div>
+                        {% else %}
+                            <p>
+                                <span class="currency">£{{subscription.amount}}</span>
+                                {% if interval_count == 1 %}
+                                <span class="interval">/ {{ subscription.interval }}</span>
+                                {% else %}
+                                <span class="interval">/ {{ subscription.interval_count }} {{ subscription.interval | capfirst }}s</span>
+                                {% endif %}
+                            </p>
+                        {% endif %}
+                        {% if subscription.short_description %}
+                            <p class="gold-text">{{ subscription.short_description }}</p>
+                        {% endif %}
+                        {% if subscription.long_description %}
+                            <p class="gold-text">{{ subscription.long_description.html|safe }}</p>
+                        {% endif %}
+                        <div class="form-check pb-2">
+                            <input class="form-check-input recurring-checkbox" type="checkbox" id="recurringCheck_{{subscription.id}}">
+                            <label class="form-check-label" for="recurringCheck_{{subscription.id}}" style="color:#fff">
+                                Do you want auto-renewal?
+                            </label>
+                          </div>
+                        <button class="common-btn subscribe-btn" data-subscription-id="{{ subscription.id }}">Join</button>
+                        
                     </div>
                 </div>
                 {% endfor %}
-
+                <div class="alert alert-danger coupon-error-message mt-2" style="display: none;"></div>
             </div>
         </div>
     </section>
@@ -551,8 +547,6 @@
                     return result.json();
                 })
                 .then((data) => {
-                    console.log("data: ", data);
-                    console.log("data.sessionId: ", data.sessionId);
                     // Redirects to Stripe Checkout
                     return stripe.redirectToCheckout({
                         sessionId: data.sessionId