New feature: Added copyText function to admin order view page for copying order details

app/design/adminhtml/default/default/template/page/footer.phtml

@@ -31,4 +31,5 @@
         }
     }
     Event.observe('interface_locale', 'change', setInterfaceLanguage)
+    addCopyIcons()
 </script>

app/design/adminhtml/default/default/template/sales/order/view/info.phtml

@@ -28,7 +28,7 @@ $orderStoreDate = $this->formatDate($_order->getCreatedAtStoreDate(), 'medium',
         endif; ?>
         <div class="entry-edit-head">
         <?php if ($this->getNoUseOrderLink()): ?>
-            <h4 class="icon-head head-account"><?php echo Mage::helper('sales')->__('Order # %s', $this->escapeHtml($_order->getRealOrderId())) ?> (<?php echo $_email ?>)</h4>
+            <h4 class="icon-head head-account copy-text" data-text="<?= $_order->getRealOrderId() ?>" data-copy-icon='{"cursor":"pointer","margin":"8px 0 0 5px","height":"16px","width":"16px"}'><?php echo Mage::helper('sales')->__('Order # %s', $this->escapeHtml($_order->getRealOrderId())) ?> (<?php echo $_email ?>)</h4>
         <?php else: ?>
             <a href="<?php echo $this->getViewUrl($_order->getId()) ?>"><?php echo Mage::helper('sales')->__('Order # %s', $this->escapeHtml($_order->getRealOrderId())) ?></a>
             <strong>(<?php echo $_email ?>)</strong>
@@ -114,7 +114,7 @@ $orderStoreDate = $this->formatDate($_order->getCreatedAtStoreDate(), 'medium',
                 </tr>
                 <tr>
                     <td class="label"><label><?php echo Mage::helper('sales')->__('Email') ?></label></td>
-                    <td class="value"><a href="mailto:<?php echo $this->escapeHtml($_order->getCustomerEmail()) ?>"><strong><?php echo $this->escapeHtml($_order->getCustomerEmail()) ?></strong></a></td>
+                    <td class="value"><a href="mailto:<?php echo $this->escapeHtml($_order->getCustomerEmail()) ?>" class="copy-text" data-text="<?= $_order->getCustomerEmail()?>" data-copy-icon='{"cursor":"pointer","margin":"2px 0 0 2px","height":"10px","width":"10px"}'><strong><?php echo $this->escapeHtml($_order->getCustomerEmail()) ?></strong></a></td>
                 </tr>
                 <?php if ($_groupName = $this->getCustomerGroupName()) : ?>
                 <tr>

app/design/adminhtml/default/default/template/sales/order/view/tab/info.phtml

@@ -51,6 +51,13 @@
                 <?php  if ($_order->getTracksCollection()->count()) : ?>
                 <a href="#" id="linkId" onclick="popWin('<?php echo $this->helper('shipping')->getTrackingPopupUrlBySalesModel($_order) ?>','trackorder','width=800,height=600,resizable=yes,scrollbars=yes')" title="<?php echo $this->quoteEscape($this->__('Track Order')) ?>"><?php echo $this->__('Track Order') ?></a>
                 <br/>
+                    <?php foreach ($_order->getTracksCollection() as $_track): ?>
+                        <div>
+                            <?php $trackNumber = $_track->getNumber();?>
+                            <strong><?= $_track->getTitle() ?></strong>
+                            <span class="copy-text" data-text="<?= $trackNumber ?>" data-copy-icon='{"cursor":"pointer","height":"12px","width":"12px"}'><?= $trackNumber ?></span>
+                        </div> 
+                    <?php endforeach; ?>
                 <?php endif ?>
                 <?php if ($_order->getShippingDescription()): ?>
                     <strong><?php echo $this->escapeHtml($_order->getShippingDescription()) ?></strong>

js/varien/js.js

@@ -703,3 +703,47 @@ function buttonDisabler() {
         button.disabled = true;
     });
 }
+
+/**
+ * Adds copy icons to elements with the class 'copy-text'.
+ */
+function addCopyIcons() {
+    const copyTexts = document.querySelectorAll('.copy-text');
+    copyTexts.forEach(copyText => {
+        const iconStyle = JSON.parse(copyText.getAttribute('data-copy-icon'));
+        const svg = createSVGElement(iconStyle);
+        copyText.parentNode.appendChild(svg);
+    });
+}
+
+/**
+ * Creates an SVG element with the specified iconStyle.
+ *
+ * @param {Object} iconStyles - An object containing the style properties for the SVG icon.
+ * @param {string} [iconStyles.cursor='pointer'] - The cursor style for the SVG element.
+ * @param {string} iconStyles.height - The height of the SVG element.
+ * @param {string} iconStyles.width - The width of the SVG element.
+ * @param {string} [iconStyles.margin='0'] - The margin of the SVG element.
+ * @return {HTMLElement} The created SVG element.
+ */
+function createSVGElement(iconStyles) {
+    const copyIcon = document.createElement('span');
+    copyIcon.classList.add('icon-copy');
+    copyIcon.setAttribute('onclick', 'copyText(event)');
+    copyIcon.style.cursor = iconStyles.cursor || 'pointer';
+    copyIcon.style.height = iconStyles.height;
+    copyIcon.style.width = iconStyles.width;
+        copyIcon.style.margin = iconStyles.margin || '0';
+
+    return copyIcon;
+}
+/**
+ * Copies the text from the data-text attribute of the clicked element to the clipboard.
+ *
+ * @param {Event} event - The event object triggered by the click event.
+ * @return {Promise<void>} A promise that resolves when the text is successfully copied to the clipboard.
+ */
+function copyText(event) {
+    let copyText = event.currentTarget.previousElementSibling.getAttribute('data-text');
+    navigator.clipboard.writeText(copyText);
+}

skin/adminhtml/default/openmage/scss/override.scss

@@ -1160,3 +1160,10 @@ img[src$='grid-cal.gif'] {
 .emph, .accent {
   color: $color_action !important;
 }
+
+.icon-copy {
+  display: inline-block;
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20111.07%20122.88%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text/css%22%3E%3C%21%5BCDATA%5B%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%20%5D%5D%3E%3C/style%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M97.67%2C20.81L97.67%2C20.81l0.01%2C0.02c3.7%2C0.01%2C7.04%2C1.51%2C9.46%2C3.93c2.4%2C2.41%2C3.9%2C5.74%2C3.9%2C9.42h0.02v0.02v75.28%20v0.01h-0.02c-0.01%2C3.68-1.51%2C7.03-3.93%2C9.46c-2.41%2C2.4-5.74%2C3.9-9.42%2C3.9v0.02h-0.02H38.48h-0.01v-0.02%20c-3.69-0.01-7.04-1.5-9.46-3.93c-2.4-2.41-3.9-5.74-3.91-9.42H25.1c0-25.96%2C0-49.34%2C0-75.3v-0.01h0.02%20c0.01-3.69%2C1.52-7.04%2C3.94-9.46c2.41-2.4%2C5.73-3.9%2C9.42-3.91v-0.02h0.02C58.22%2C20.81%2C77.95%2C20.81%2C97.67%2C20.81L97.67%2C20.81z%20M0.02%2C75.38L0%2C13.39v-0.01h0.02c0.01-3.69%2C1.52-7.04%2C3.93-9.46c2.41-2.4%2C5.74-3.9%2C9.42-3.91V0h0.02h59.19%20c7.69%2C0%2C8.9%2C9.96%2C0.01%2C10.16H13.4h-0.02v-0.02c-0.88%2C0-1.68%2C0.37-2.27%2C0.97c-0.59%2C0.58-0.96%2C1.4-0.96%2C2.27h0.02v0.01v3.17%20c0%2C19.61%2C0%2C39.21%2C0%2C58.81C10.17%2C83.63%2C0.02%2C84.09%2C0.02%2C75.38L0.02%2C75.38z%20M100.91%2C109.49V34.2v-0.02h0.02%20c0-0.87-0.37-1.68-0.97-2.27c-0.59-0.58-1.4-0.96-2.28-0.96v0.02h-0.01H38.48h-0.02v-0.02c-0.88%2C0-1.68%2C0.38-2.27%2C0.97%20c-0.59%2C0.58-0.96%2C1.4-0.96%2C2.27h0.02v0.01v75.28v0.02h-0.02c0%2C0.88%2C0.38%2C1.68%2C0.97%2C2.27c0.59%2C0.59%2C1.4%2C0.96%2C2.27%2C0.96v-0.02h0.01%20h59.19h0.02v0.02c0.87%2C0%2C1.68-0.38%2C2.27-0.97c0.59-0.58%2C0.96-1.4%2C0.96-2.27L100.91%2C109.49L100.91%2C109.49L100.91%2C109.49%20L100.91%2C109.49z%22/%3E%3C/g%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-size: contain;
+}