fix: replace all native confirm() dialogs with styled modal macros

Migrated ~68 native browser confirm() calls across 74 files to use the
project's confirm_modal/confirm_modal_dynamic Jinja2 macros, providing
consistent styled confirmation dialogs instead of plain browser popups.

Modules updated: core, tenancy, cms, marketplace, messaging, billing,
customers, orders, cart. Uses danger/warning/info variants and
double-confirm pattern for destructive delete operations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/modules/cms/static/admin/js/content-pages.js

@@ -21,6 +21,12 @@ function contentPagesManager() {
         loading: false,
         error: null,
 
+        // Modal state
+        showCreateHomepageConfirm: false,
+        pendingHomepagePlatform: null,
+        showDeletePageConfirm: false,
+        pageToDelete: null,
+
         // Tabs and filters
         activeTab: 'all',  // all, platform_marketing, store_defaults, store_overrides
         searchQuery: '',
@@ -188,13 +194,19 @@ function contentPagesManager() {
                 // Show a toast and offer to create
                 if (slug === 'home') {
                     // Offer to create homepage
-                    if (confirm(`No homepage found for ${platformCode}. Would you like to create one?`)) {
-                        window.location.href = `/admin/content-pages/create?platform_code=${platformCode}&slug=home&is_platform_page=true`;
-                    }
+                    this.pendingHomepagePlatform = platformCode;
+                    this.showCreateHomepageConfirm = true;
                 }
             }
         },
 
+        // Create homepage for a platform (called from confirm modal)
+        createHomepage() {
+            if (this.pendingHomepagePlatform) {
+                window.location.href = `/admin/content-pages/create?platform_code=${this.pendingHomepagePlatform}&slug=home&is_platform_page=true`;
+            }
+        },
+
         // Get page tier label (three-tier system)
         getPageTierLabel(page) {
             if (page.store_id) {
@@ -220,12 +232,14 @@ function contentPagesManager() {
             }
         },
 
+        // Prompt delete page confirmation
+        promptDeletePage(page) {
+            this.pageToDelete = page;
+            this.showDeletePageConfirm = true;
+        },
+
         // Delete a page
         async deletePage(page) {
-            if (!confirm(`Are you sure you want to delete "${page.title}"?`)) {
-                return;
-            }
-
             try {
                 contentPagesLog.info(`Deleting page: ${page.id}`);
 

app/modules/cms/static/store/js/content-page-edit.js

@@ -40,6 +40,9 @@ function storeContentPageEditor(pageId) {
         loadingDefault: false,
         defaultContent: null,
 
+        // Delete confirmation modal state
+        showDeletePageConfirm: false,
+
         // Initialize
         async init() {
             // Prevent multiple initializations
@@ -211,14 +214,6 @@ function storeContentPageEditor(pageId) {
 
         // Delete page (revert to default for overrides)
         async deletePage() {
-            const message = this.isOverride
-                ? 'Are you sure you want to revert to the platform default? Your customizations will be lost.'
-                : 'Are you sure you want to delete this page? This cannot be undone.';
-
-            if (!confirm(message)) {
-                return;
-            }
-
             try {
                 contentPageEditLog.info('Deleting page:', this.pageId);
 

app/modules/cms/static/store/js/content-pages.js

@@ -20,6 +20,10 @@ function storeContentPagesManager() {
         activeTab: 'platform',
         searchQuery: '',
 
+        // Modal state
+        showDeletePageConfirm: false,
+        pageToDelete: null,
+
         // Data
         platformPages: [],  // Platform default pages
         customPages: [],    // Store's own pages (overrides + custom)
@@ -152,16 +156,14 @@ function storeContentPagesManager() {
             }
         },
 
+        // Prompt delete page confirmation
+        promptDeletePage(page) {
+            this.pageToDelete = page;
+            this.showDeletePageConfirm = true;
+        },
+
         // Delete a page
         async deletePage(page) {
-            const message = page.is_store_override
-                ? `Are you sure you want to delete your override for "${page.title}"? The platform default will be shown instead.`
-                : `Are you sure you want to delete "${page.title}"? This cannot be undone.`;
-
-            if (!confirm(message)) {
-                return;
-            }
-
             try {
                 contentPagesLog.info('Deleting page:', page.id);
 

app/modules/cms/static/store/js/media.js

@@ -105,6 +105,7 @@ function storeMedia() {
         // Modal states
         showUploadModal: false,
         showDetailModal: false,
+        showDeleteMediaConfirm: false,
         selectedMedia: null,
         editingMedia: {
             filename: '',
@@ -253,10 +254,6 @@ function storeMedia() {
         async deleteMedia() {
             if (!this.selectedMedia) return;
 
-            if (!confirm(I18n.t('cms.confirmations.delete_file'))) {
-                return;
-            }
-
             this.saving = true;
 
             try {

app/modules/cms/templates/cms/admin/content-pages.html

@@ -3,6 +3,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
 
 {% block title %}Content Pages{% endblock %}
 
@@ -142,7 +143,7 @@
                                     <span x-html="$icon('edit', 'w-5 h-5')"></span>
                                 </a>
                                 <button
-                                    @click="deletePage(page)"
+                                    @click="promptDeletePage(page)"
                                     class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                     title="Delete"
                                 >
@@ -175,6 +176,28 @@
         Create First Page
     </a>
 </div>
+
+{{ confirm_modal_dynamic(
+    'createHomepageModal',
+    'Create Homepage',
+    "'No homepage found for ' + (pendingHomepagePlatform || '') + '. Would you like to create one?'",
+    'createHomepage()',
+    'showCreateHomepageConfirm',
+    'Create',
+    'Cancel',
+    'info'
+) }}
+
+{{ confirm_modal_dynamic(
+    'deletePageModal',
+    'Delete Page',
+    "'Are you sure you want to delete \"' + (pageToDelete?.title || '') + '\"?'",
+    'deletePage(pageToDelete)',
+    'showDeletePageConfirm',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}
 
 {% block extra_scripts %}

app/modules/cms/templates/cms/store/content-page-edit.html

@@ -3,7 +3,7 @@
 {% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
 {% from 'shared/macros/headers.html' import back_button %}
 {% from 'shared/macros/inputs.html' import number_stepper %}
-{% from 'shared/macros/modals.html' import modal %}
+{% from 'shared/macros/modals.html' import modal, confirm_modal_dynamic %}
 
 {% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
 
@@ -61,7 +61,7 @@
                 View Default
             </button>
             <button
-                @click="deletePage()"
+                @click="showDeletePageConfirm = true"
                 class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-red-700 bg-white dark:bg-red-900/50 dark:text-red-300 border border-red-300 dark:border-red-700 rounded-lg hover:bg-red-50 dark:hover:bg-red-900 transition-colors"
             >
                 <span x-html="$icon('arrow-uturn-left', 'w-4 h-4 mr-1')"></span>
@@ -319,6 +319,17 @@
         </div>
     </form>
 </div>
+
+{{ confirm_modal_dynamic(
+    'deletePageModal',
+    'Delete Page',
+    "isOverride ? 'Are you sure you want to revert to the platform default? Your customizations will be lost.' : 'Are you sure you want to delete this page? This cannot be undone.'",
+    'deletePage()',
+    'showDeletePageConfirm',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}
 
 {% block extra_scripts %}

app/modules/cms/templates/cms/store/content-pages.html

@@ -3,6 +3,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
 
 {% block title %}Content Pages{% endblock %}
 
@@ -286,7 +287,7 @@
                                         <span x-html="$icon('eye', 'w-5 h-5')"></span>
                                     </a>
                                     <button
-                                        @click="deletePage(page)"
+                                        @click="promptDeletePage(page)"
                                         class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                         title="Delete"
                                     >
@@ -320,6 +321,17 @@
         </a>
     </div>
 </div>
+
+{{ confirm_modal_dynamic(
+    'deletePageModal',
+    'Delete Page',
+    "pageToDelete?.is_store_override ? 'Are you sure you want to delete your override for \"' + (pageToDelete?.title || '') + '\"? The platform default will be shown instead.' : 'Are you sure you want to delete \"' + (pageToDelete?.title || '') + '\"? This cannot be undone.'",
+    'deletePage(pageToDelete)',
+    'showDeletePageConfirm',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}
 
 {% block extra_scripts %}

app/modules/cms/templates/cms/store/media.html

@@ -3,7 +3,7 @@
 {% from 'shared/macros/pagination.html' import pagination %}
 {% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
-{% from 'shared/macros/modals.html' import modal_simple %}
+{% from 'shared/macros/modals.html' import modal_simple, confirm_modal %}
 
 {% block title %}Media Library{% endblock %}
 
@@ -412,7 +412,7 @@
         <!-- Modal Footer -->
         <div class="flex justify-between px-6 py-4 border-t dark:border-gray-700">
             <button
-                @click="deleteMedia()"
+                @click="showDeleteMediaConfirm = true"
                 class="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
                 :disabled="saving"
             >
@@ -438,6 +438,17 @@
         </div>
     </div>
 </div>
+
+{{ confirm_modal(
+    'deleteMediaModal',
+    'Delete File',
+    'Are you sure you want to delete this file? This action cannot be undone.',
+    'deleteMedia()',
+    'showDeleteMediaConfirm',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}
 
 {% block extra_scripts %}