pricing
This commit is contained in:
@@ -5,6 +5,72 @@
|
||||
<h2 class="display-5 fw-bold mb-3">Simple, Transparent Pricing</h2>
|
||||
<p class="lead text-muted">Choose the plan that fits your organization's needs</p>
|
||||
</div>
|
||||
|
||||
{% set pricing_plans = PricingPlan.get_active_plans() %}
|
||||
{% if pricing_plans %}
|
||||
<div class="row g-4 justify-content-center">
|
||||
{% for plan in pricing_plans %}
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 d-flex flex-column {% if plan.is_popular %}border-primary position-relative{% endif %}"
|
||||
{% if plan.is_popular %}style="border: 3px solid var(--primary-color) !important;"{% endif %}>
|
||||
|
||||
{% if plan.is_popular %}
|
||||
<div class="position-absolute top-0 start-0" style="z-index: 10;">
|
||||
<span class="badge px-3 py-2" style="background: var(--primary-color); color: white; font-size: 0.8rem; font-weight: 600; border-radius: 0 0 15px 0; margin-top: 0; border-top-left-radius: 10px;">
|
||||
Most Popular
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-body text-center p-5 d-flex flex-column">
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="card-title">{{ plan.name }}</h3>
|
||||
|
||||
{% if plan.is_custom %}
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">Custom</div>
|
||||
{% else %}
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€{{ "%.0f"|format(plan.monthly_price) }}</span>
|
||||
<span class="annual-price" style="display: none;">€{{ "%.0f"|format(plan.annual_price) }}</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if plan.description %}
|
||||
<p class="text-muted mb-3">{{ plan.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<ul class="list-unstyled mb-4">
|
||||
{% for feature in plan.features %}
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>{{ feature }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="{{ plan.button_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
|
||||
{{ plan.button_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Billing Toggle - Only show if there are non-custom plans -->
|
||||
{% set has_non_custom_plans = pricing_plans | selectattr('is_custom', 'equalto', false) | list | length > 0 %}
|
||||
{% if has_non_custom_plans %}
|
||||
<div class="d-flex justify-content-center align-items-center mt-4 mb-3">
|
||||
<span class="me-3">Monthly</span>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="annualBilling" style="width: 3rem; height: 1.5rem; background-color: var(--border-color); border-color: var(--border-color);">
|
||||
<label class="form-check-label" for="annualBilling"></label>
|
||||
</div>
|
||||
<span class="ms-3">Annual <span class="badge text-white px-2 py-1 ms-1" style="background: var(--primary-color); font-size: 0.75rem;">Save 20%</span></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<!-- Fallback to default pricing if no plans are configured -->
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-md-3">
|
||||
<div class="card pricing-card h-100 d-flex flex-column">
|
||||
@@ -107,12 +173,15 @@
|
||||
</div>
|
||||
<span class="ms-3">Annual <span class="badge text-white px-2 py-1 ms-1" style="background: var(--primary-color); font-size: 0.75rem;">Save 20%</span></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const billingToggle = document.getElementById('annualBilling');
|
||||
if (!billingToggle) return;
|
||||
|
||||
const monthlyPrices = document.querySelectorAll('.monthly-price');
|
||||
const annualPrices = document.querySelectorAll('.annual-price');
|
||||
|
||||
@@ -185,4 +254,5 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
@@ -9,6 +9,7 @@
|
||||
{% from "settings/tabs/mails.html" import mails_tab %}
|
||||
{% from "settings/tabs/smtp_settings.html" import smtp_settings_tab %}
|
||||
{% from "settings/tabs/connections.html" import connections_tab %}
|
||||
{% from "settings/tabs/pricing.html" import pricing_tab %}
|
||||
{% from "settings/components/reset_colors_modal.html" import reset_colors_modal %}
|
||||
|
||||
{% block title %}Settings - DocuPulse{% endblock %}
|
||||
@@ -82,6 +83,11 @@
|
||||
<i class="fas fa-plug me-2"></i>Connections
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link {% if active_tab == 'pricing' %}active{% endif %}" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab" aria-controls="pricing" aria-selected="{{ 'true' if active_tab == 'pricing' else 'false' }}">
|
||||
<i class="fas fa-tags me-2"></i>Pricing
|
||||
</button>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -136,6 +142,11 @@
|
||||
<div class="tab-pane fade {% if active_tab == 'connections' %}show active{% endif %}" id="connections" role="tabpanel" aria-labelledby="connections-tab">
|
||||
{{ connections_tab(portainer_settings, nginx_settings, site_settings, git_settings, cloudflare_settings) }}
|
||||
</div>
|
||||
|
||||
<!-- Pricing Tab -->
|
||||
<div class="tab-pane fade {% if active_tab == 'pricing' %}show active{% endif %}" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
|
||||
{{ pricing_tab(pricing_plans, csrf_token) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,4 +161,7 @@
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', filename='js/settings.js') }}?v={{ 'js/settings.js'|asset_version }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/events.js') }}?v={{ 'js/events.js'|asset_version }}"></script>
|
||||
{% if is_master and active_tab == 'pricing' %}
|
||||
<script src="{{ url_for('static', filename='js/settings/pricing.js') }}?v={{ 'js/settings/pricing.js'|asset_version }}"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
427
templates/settings/tabs/pricing.html
Normal file
427
templates/settings/tabs/pricing.html
Normal file
@@ -0,0 +1,427 @@
|
||||
{% macro pricing_tab(pricing_plans, csrf_token) %}
|
||||
<div class="pricing-configuration">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4 class="mb-0">Pricing Plans Configuration</h4>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPricingPlanModal">
|
||||
<i class="fas fa-plus me-2"></i>Add New Plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Plans List -->
|
||||
<div class="row" id="pricingPlansContainer">
|
||||
{% for plan in pricing_plans %}
|
||||
<div class="col-md-6 col-lg-4 mb-4" data-plan-id="{{ plan.id }}">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">{{ plan.name }}</h5>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input plan-status-toggle" type="checkbox"
|
||||
data-plan-id="{{ plan.id }}"
|
||||
{% if plan.is_active %}checked{% endif %}>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<strong>Monthly Price:</strong> €{{ "%.2f"|format(plan.monthly_price) }}<br>
|
||||
<strong>Annual Price:</strong> €{{ "%.2f"|format(plan.annual_price) }}
|
||||
</div>
|
||||
|
||||
{% if plan.description %}
|
||||
<div class="mb-3">
|
||||
<strong>Description:</strong><br>
|
||||
<small class="text-muted">{{ plan.description }}</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Quotas Section -->
|
||||
<div class="mb-3">
|
||||
<strong>Quotas:</strong>
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-door-open me-1"></i>Rooms: {{ plan.format_quota_display('room_quota') }}<br>
|
||||
<i class="fas fa-comments me-1"></i>Conversations: {{ plan.format_quota_display('conversation_quota') }}<br>
|
||||
<i class="fas fa-hdd me-1"></i>Storage: {{ plan.format_quota_display('storage_quota_gb') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-user-tie me-1"></i>Managers: {{ plan.format_quota_display('manager_quota') }}<br>
|
||||
<i class="fas fa-user-shield me-1"></i>Admins: {{ plan.format_quota_display('admin_quota') }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<strong>Features:</strong>
|
||||
<ul class="list-unstyled mt-2">
|
||||
{% for feature in plan.features %}
|
||||
<li><i class="fas fa-check text-success me-2"></i>{{ feature }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<strong>Button:</strong> {{ plan.button_text }} → {{ plan.button_url }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input plan-popular-toggle" type="checkbox"
|
||||
data-plan-id="{{ plan.id }}"
|
||||
{% if plan.is_popular %}checked{% endif %}>
|
||||
<label class="form-check-label">Most Popular</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input plan-custom-toggle" type="checkbox"
|
||||
data-plan-id="{{ plan.id }}"
|
||||
{% if plan.is_custom %}checked{% endif %}>
|
||||
<label class="form-check-label">Custom Plan</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary edit-plan-btn"
|
||||
data-plan-id="{{ plan.id }}"
|
||||
data-bs-toggle="modal" data-bs-target="#editPricingPlanModal">
|
||||
<i class="fas fa-edit me-1"></i>Edit
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger delete-plan-btn"
|
||||
data-plan-id="{{ plan.id }}">
|
||||
<i class="fas fa-trash me-1"></i>Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="fas fa-tags fa-3x text-muted mb-3"></i>
|
||||
<h5 class="text-muted">No pricing plans configured</h5>
|
||||
<p class="text-muted">Click "Add New Plan" to create your first pricing plan.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Pricing Plan Modal -->
|
||||
<div class="modal fade" id="addPricingPlanModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add New Pricing Plan</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form id="addPricingPlanForm">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="planName" class="form-label">Plan Name *</label>
|
||||
<input type="text" class="form-control" id="planName" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="planDescription" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="planDescription" name="description" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="monthlyPrice" class="form-label">Monthly Price (€) *</label>
|
||||
<input type="number" class="form-control" id="monthlyPrice" name="monthly_price"
|
||||
step="0.01" min="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="annualPrice" class="form-label">Annual Price (€) *</label>
|
||||
<input type="number" class="form-control" id="annualPrice" name="annual_price"
|
||||
step="0.01" min="0" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quotas Section -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Resource Quotas</h6>
|
||||
<small class="text-muted">Set to 0 for unlimited</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="roomQuota" class="form-label">Room Quota</label>
|
||||
<input type="number" class="form-control" id="roomQuota" name="room_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of rooms allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="conversationQuota" class="form-label">Conversation Quota</label>
|
||||
<input type="number" class="form-control" id="conversationQuota" name="conversation_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of conversations allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="storageQuota" class="form-label">Storage Quota (GB)</label>
|
||||
<input type="number" class="form-control" id="storageQuota" name="storage_quota_gb"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Storage limit in gigabytes</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="managerQuota" class="form-label">Manager Quota</label>
|
||||
<input type="number" class="form-control" id="managerQuota" name="manager_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of manager users allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="adminQuota" class="form-label">Admin Quota</label>
|
||||
<input type="number" class="form-control" id="adminQuota" name="admin_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of admin users allowed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="planFeatures" class="form-label">Features *</label>
|
||||
<div id="featuresContainer">
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control feature-input" name="features[]" required>
|
||||
<button type="button" class="btn btn-outline-danger remove-feature-btn">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="addFeatureBtn">
|
||||
<i class="fas fa-plus me-1"></i>Add Feature
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="buttonText" class="form-label">Button Text</label>
|
||||
<input type="text" class="form-control" id="buttonText" name="button_text"
|
||||
value="Get Started">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="buttonUrl" class="form-label">Button URL</label>
|
||||
<input type="text" class="form-control" id="buttonUrl" name="button_url"
|
||||
value="#">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="isPopular" name="is_popular">
|
||||
<label class="form-check-label" for="isPopular">Most Popular</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="isCustom" name="is_custom">
|
||||
<label class="form-check-label" for="isCustom">Custom Plan</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="isActive" name="is_active" checked>
|
||||
<label class="form-check-label" for="isActive">Active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create Plan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pricing Plan Modal -->
|
||||
<div class="modal fade" id="editPricingPlanModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Edit Pricing Plan</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form id="editPricingPlanForm">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<input type="hidden" id="editPlanId" name="plan_id">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editPlanName" class="form-label">Plan Name *</label>
|
||||
<input type="text" class="form-control" id="editPlanName" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editPlanDescription" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="editPlanDescription" name="description" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editMonthlyPrice" class="form-label">Monthly Price (€) *</label>
|
||||
<input type="number" class="form-control" id="editMonthlyPrice" name="monthly_price"
|
||||
step="0.01" min="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editAnnualPrice" class="form-label">Annual Price (€) *</label>
|
||||
<input type="number" class="form-control" id="editAnnualPrice" name="annual_price"
|
||||
step="0.01" min="0" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quotas Section -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Resource Quotas</h6>
|
||||
<small class="text-muted">Set to 0 for unlimited</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editRoomQuota" class="form-label">Room Quota</label>
|
||||
<input type="number" class="form-control" id="editRoomQuota" name="room_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of rooms allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editConversationQuota" class="form-label">Conversation Quota</label>
|
||||
<input type="number" class="form-control" id="editConversationQuota" name="conversation_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of conversations allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editStorageQuota" class="form-label">Storage Quota (GB)</label>
|
||||
<input type="number" class="form-control" id="editStorageQuota" name="storage_quota_gb"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Storage limit in gigabytes</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editManagerQuota" class="form-label">Manager Quota</label>
|
||||
<input type="number" class="form-control" id="editManagerQuota" name="manager_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of manager users allowed</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editAdminQuota" class="form-label">Admin Quota</label>
|
||||
<input type="number" class="form-control" id="editAdminQuota" name="admin_quota"
|
||||
min="0" value="0">
|
||||
<small class="text-muted">Number of admin users allowed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editPlanFeatures" class="form-label">Features *</label>
|
||||
<div id="editFeaturesContainer">
|
||||
<!-- Features will be populated dynamically -->
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="editAddFeatureBtn">
|
||||
<i class="fas fa-plus me-1"></i>Add Feature
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editButtonText" class="form-label">Button Text</label>
|
||||
<input type="text" class="form-control" id="editButtonText" name="button_text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editButtonUrl" class="form-label">Button URL</label>
|
||||
<input type="text" class="form-control" id="editButtonUrl" name="button_url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="editIsPopular" name="is_popular">
|
||||
<label class="form-check-label" for="editIsPopular">Most Popular</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="editIsCustom" name="is_custom">
|
||||
<label class="form-check-label" for="editIsCustom">Custom Plan</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="editIsActive" name="is_active">
|
||||
<label class="form-check-label" for="editIsActive">Active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update Plan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deletePricingPlanModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete Pricing Plan</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this pricing plan? This action cannot be undone.</p>
|
||||
<p class="text-danger"><strong>Plan: <span id="deletePlanName"></span></strong></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeletePlan">Delete Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user