# Modern MessageBox - Quick Reference Card

## 🎯 Quick Start (30 seconds)

### 1. Add to Page Header
```html
<link rel="stylesheet" href="../css/modern-messagebox.css">
```

### 2. Add to Page Footer
```html
<script src="../js/modern-messagebox.js"></script>
```

### 3. Use in Your Code
```javascript
// Make function async
async function myFunction() {
    await MsgBox.alert('Hello World!');
}
```

---

## 📚 Common Usage Patterns

### ✅ Success Message
```javascript
await MsgBox.success('Item saved successfully!');
```

### ❌ Error Message
```javascript
await MsgBox.error('Failed to save item!');
```

### ⚠️ Warning Message
```javascript
await MsgBox.warning('Please check your input!');
```

### ℹ️ Info Message
```javascript
await MsgBox.alert('Your session expires in 10 minutes.', 'info');
```

### ❓ Confirmation
```javascript
if (await MsgBox.confirm('Delete this item?')) {
    // User clicked Yes
    deleteItem();
}
```

### 🗑️ Delete Confirmation (Red)
```javascript
if (await MsgBox.confirmDelete()) {
    // User confirmed deletion
    deleteRecord();
}
```

### ⌨️ Get User Input
```javascript
const quantity = await MsgBox.prompt('Enter quantity:', '1');
if (quantity !== null) {
    // User entered something
    addToCart(quantity);
}
```

---

## 🎨 All Message Types

| Type | Usage | Color |
|------|-------|-------|
| `success` | `MsgBox.success('message')` | Green |
| `error` | `MsgBox.error('message')` | Red |
| `warning` | `MsgBox.warning('message')` | Pink |
| `info` | `MsgBox.alert('message', 'info')` | Blue |
| `confirm` | `MsgBox.confirm('question?')` | Purple |

---

## 🔧 Custom Confirm Options

```javascript
await MsgBox.confirm('Save changes?', {
    confirmText: 'Save',      // Button text
    cancelText: 'Discard',    // Button text
    type: 'warning',          // Message type
    dangerMode: false         // true = red confirm button
});
```

---

## ⌨️ Keyboard Shortcuts

| Key | Action |
|-----|--------|
| **Enter** | Confirms/submits |
| **Escape** | Cancels and closes |
| **Tab** | Navigate between buttons |

---

## 🔄 Migration from Old Code

### Replace alert()
```javascript
// OLD
alert('Message');

// NEW
await MsgBox.alert('Message', 'info');
```

### Replace confirm()
```javascript
// OLD
if (confirm('Question?')) {
    // code
}

// NEW
if (await MsgBox.confirm('Question?')) {
    // code
}
```

### Replace prompt()
```javascript
// OLD
const value = prompt('Enter value:', 'default');

// NEW
const value = await MsgBox.prompt('Enter value:', 'default');
```

---

## ⚠️ Important Notes

1. **Always use `await`** before MsgBox calls
2. **Add `async`** to function definition
3. **Load CSS & JS** files in correct order
4. **Font Awesome** required for icons

---

## ✨ Real-World Examples

### Add to Cart with Quantity
```javascript
async function addToCart() {
    const qty = await MsgBox.prompt('Enter quantity:', '1');
    if (qty && qty > 0) {
        // Add to cart
        await MsgBox.success('Added to cart!');
    }
}
```

### Delete with Confirmation
```javascript
async function deleteItem(id) {
    if (await MsgBox.confirmDelete('Delete this item?')) {
        // Delete from database
        await MsgBox.success('Item deleted!');
    }
}
```

### Validation Error
```javascript
async function saveItem() {
    if (!itemName) {
        await MsgBox.error('Please enter item name!');
        return;
    }
    // Save item
    await MsgBox.success('Item saved!');
}
```

### Clear Cart Warning
```javascript
async function clearCart() {
    if (await MsgBox.confirm('Clear entire cart?', {
        type: 'warning',
        confirmText: 'Yes, Clear',
        cancelText: 'No, Keep'
    })) {
        // Clear cart
        cart = [];
        await MsgBox.success('Cart cleared!');
    }
}
```

---

## 📱 Works on All Devices

✅ Desktop browsers (Chrome, Firefox, Safari, Edge)
✅ Mobile browsers (iOS Safari, Chrome Mobile)
✅ Tablets
✅ Touch and keyboard input

---

## 🆘 Troubleshooting

| Problem | Solution |
|---------|----------|
| MsgBox not defined | Load `modern-messagebox.js` |
| No styling | Load `modern-messagebox.css` |
| No icons | Load Font Awesome CSS |
| Buttons don't work | Add `async` to function |
| Store name wrong | Check `get-store-info.php` API |

---

## 📖 Full Documentation

- **Complete Guide:** `MODERN_MESSAGEBOX_GUIDE.md`
- **Implementation:** `IMPLEMENTATION_GUIDE.md`
- **Test Page:** `test-messagebox.php`

---

## 💡 Pro Tips

1. **Pre-load for speed:**
   ```javascript
   $(document).ready(function() {
       MsgBox.preload();
   });
   ```

2. **Multi-line messages:**
   ```javascript
   await MsgBox.success('Line 1\nLine 2\nLine 3');
   ```

3. **Emoji support:**
   ```javascript
   await MsgBox.success('✓ Saved successfully! 🎉');
   ```

4. **Custom messages:**
   ```javascript
   await MsgBox.alert('Total: ₹' + total, 'success');
   ```

---

**Version:** 1.0  
**Last Updated:** November 6, 2025  
**Compatibility:** All modern browsers
