Add print comments checkbox, fix mobile layout, fix Capacitor dev banner

Author: hiteshkrmsft

www/css/billing.css

@@ -203,6 +203,7 @@ select:focus, input:focus {
   margin: 12px 0;
   box-shadow: var(--shadow);
   display: flex;
+  flex-wrap: nowrap;
   justify-content: space-around;
   gap: 16px;
   border: 1px solid var(--border-color);
@@ -211,6 +212,7 @@ select:focus, input:focus {
 .summary-item {
   text-align: center;
   flex: 1;
+  white-space: nowrap;
 }
 
 .summary-item span {

www/firebaseConfig.js

@@ -26,12 +26,17 @@ const getEnvironment = () => {
   // 2. Check localStorage (persists across sessions)
   if (localStorage.getItem('appEnv')) return localStorage.getItem('appEnv');
 
-  // 3. Check if running on localhost
-  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+  // 3. Check if running on localhost in a BROWSER (not Capacitor app)
+  // Capacitor apps run from capacitor:// or file:// protocol, not http://localhost
+  const isCapacitorApp = window.location.protocol === 'capacitor:' || 
+                         window.location.protocol === 'file:' ||
+                         window.Capacitor?.isNativePlatform?.();
+  
+  if (!isCapacitorApp && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
     return 'development';
   }
 
-  // 4. Default to production
+  // 4. Default to production (including Capacitor apps)
   return 'production';
 };
 

www/js/modules/billing.js

@@ -1038,6 +1038,7 @@ const BillingManager = {
                 const saleDue = Helpers.getInputInt('saleDueAmount');
                 const saleCustomer = Helpers.getInputText('saleCustomerName');
                 const saleComments = Helpers.getInputText('saleComments');
+                const printComments = document.getElementById('salePrintComments')?.checked || false;
 
                 const updatedSale = {
                     ...bill,
@@ -1050,6 +1051,7 @@ const BillingManager = {
                     dueAmount: saleDue,
                     customerName: saleCustomer,
                     comments: saleComments,
+                    printComments: printComments,
                     payment: {
                         online: saleOnline,
                         cash: saleCash,

www/js/modules/purchase.js

@@ -476,6 +476,7 @@ const PurchaseManager = {
         const dueAmount = Helpers.getInputInt('dueAmount');
         const customerName = Helpers.getInputText('customerName');
         const comments = Helpers.getInputText('billComments');
+        const printComments = document.getElementById('billPrintComments')?.checked || false;
 
         if (onlinePayment === 0 && cashPayment === 0 && dueAmount === 0) {
             UIManager.showToast('Please enter at least one payment method (Cash, Online, or Due)');
@@ -506,6 +507,7 @@ const PurchaseManager = {
             dueAmount,
             customerName,
             comments,
+            printComments,
             type: 'purchase',
             isPurchase: true,
             date: new Date().toISOString(),

www/js/modules/retail-sale.js

@@ -453,6 +453,7 @@ const RetailSaleManager = {
         const saleDue = Helpers.getInputInt('saleDueAmount');
         const saleCustomer = Helpers.getInputText('saleCustomerName');
         const saleComments = Helpers.getInputText('saleComments');
+        const printComments = document.getElementById('salePrintComments')?.checked || false;
 
         if (saleOnline === 0 && saleCash === 0 && saleDue === 0) {
             UIManager.showToast('Please enter at least one payment method (Cash, Online, or Due)');
@@ -474,6 +475,7 @@ const RetailSaleManager = {
             dueAmount: saleDue,
             customerName: saleCustomer,
             comments: saleComments,
+            printComments: printComments,
             type: 'retail',
             isPurchase: false,
             date: new Date().toISOString(),

www/js/services/printer.js

@@ -367,6 +367,35 @@ class BluetoothPrinterManager {
             y += config.spacing.line;
         }
 
+        // Comments (टिप्पणी) - Only print if printComments flag is true and comments exist
+        if (billData.printComments && billData.comments && billData.comments.trim()) {
+            y += 8; // Gap before comments
+            ctx.font = `${config.fonts.body.size}px Arial`;
+            ctx.fillText('नोट:', config.padding.left, y);
+            y += config.spacing.line;
+            
+            // Word wrap comments to fit width
+            const maxWidth = config.width - (config.padding.left * 2) - 10;
+            const words = billData.comments.trim().split(' ');
+            let line = '';
+            
+            for (const word of words) {
+                const testLine = line + (line ? ' ' : '') + word;
+                const testWidth = ctx.measureText(testLine).width;
+                if (testWidth > maxWidth && line) {
+                    ctx.fillText(line, config.padding.left + 5, y);
+                    y += config.spacing.line - 4;
+                    line = word;
+                } else {
+                    line = testLine;
+                }
+            }
+            if (line) {
+                ctx.fillText(line, config.padding.left + 5, y);
+                y += config.spacing.line;
+            }
+        }
+        
         return y;
     }
 

www/templates/billing.html

@@ -132,7 +132,11 @@ <h3>Bill Items</h3>
 
         <div class="form-row" style="margin-top: 16px;">
             <label style="width: 100px;">Comments:</label>
-            <input type="text" id="billComments" placeholder="GPay name, payment date, notes, etc. (Optional)" />
+            <input type="text" id="billComments" placeholder="GPay name, payment date, notes, etc. (Optional)" style="flex: 1;" />
+            <label style="display: flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: var(--text-secondary); white-space: nowrap;">
+                <input type="checkbox" id="billPrintComments" style="width: 16px; height: 16px;" />
+                Print
+            </label>
         </div>
 
         <!-- Canvas Debug Preview -->
@@ -255,7 +259,11 @@ <h3>Bill Items</h3>
 
         <div class="form-row" style="margin-top: 16px;">
             <label style="width: 100px;">Comments:</label>
-            <input type="text" id="saleComments" placeholder="GPay name, payment date, notes, etc. (Optional)" />
+            <input type="text" id="saleComments" placeholder="GPay name, payment date, notes, etc. (Optional)" style="flex: 1;" />
+            <label style="display: flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: var(--text-secondary); white-space: nowrap;">
+                <input type="checkbox" id="salePrintComments" style="width: 16px; height: 16px;" />
+                Print
+            </label>
         </div>
 
         <div style="display: flex; gap: 12px; margin-top: 16px;">