[ENHANCEMENT] Add Copy to clipboard suport to discount codes, order ids, payment ids and more.

classes/class-pmpro-discount-code-list-table.php

@@ -369,6 +369,10 @@ public function column_discount_code( $item ) {
 
 		?>
 		<strong><a title="<?php echo esc_attr( sprintf( __( 'Edit Code: %s', 'paid-memberships-pro' ), $item->id ) ); ?>" href="<?php echo esc_url( add_query_arg( array( 'page' => 'pmpro-discountcodes', 'edit' => $item->id ), admin_url('admin.php' ) ) ); ?>"><?php echo esc_html( $item->code ); ?></a></strong>
+		<button title="<?php echo esc_attr__('Copy code to the clipboard', 'paid-memberships-pro' ) ?>" type="button" 
+			class="pmpro_copy_discount_code pmpro_copy_to_clipboard button-link edit-filters" style="display:none">
+			<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
+		</button>
 		<div class="row-actions">
 		<?php
 			$delete_text = esc_html(
@@ -422,7 +426,7 @@ public function column_discount_code( $item ) {
 							admin_url( 'admin.php' )
 						)
 					),
-					esc_html__( 'Copy', 'paid-memberships-pro' )
+					esc_html__( 'Duplicate', 'paid-memberships-pro' )
 				),
 				'delete' => sprintf(
 					'<a title="%1$s" href="%2$s">%3$s</a>',

classes/class-pmpro-orders-list-table.php

@@ -891,6 +891,10 @@ public function column_order_id( $item ) {
 	public function column_order_code( $item ) {
 		?>
 		<strong><a href="admin.php?page=pmpro-orders&order=<?php echo esc_attr( $item->id ); ?>"><?php echo esc_html( $item->code ); ?></a></strong>
+		<button title="<?php echo esc_attr__('Copy code to the clipboard', 'paid-memberships-pro' ) ?>" type="button"
+			class="pmpro_copy_order_id pmpro_copy_to_clipboard button-link edit-filters" style="display:block">
+			<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
+		</button>
 		<div class="row-actions">
 			<?php
 			$delete_text = esc_html(
@@ -1239,7 +1243,18 @@ public function column_transaction_ids( $item ) {
 
 		// Echo the data for this column.
 		foreach( $column_value as $key => $value ) {
-			echo '<p>' . wp_kses_post( $value ) . '</p>';
+			echo '<p>' .
+				wp_kses_post( $value );
+				//we don't want to show the copy button for the empty  column
+				if( $key !== 'none') {
+				?>
+			<button title="<?php echo esc_attr( sprintf( __( 'Copy the %s to the clipboard', 'paid-memberships-pro' ), $key ) ) ?>" type="button"
+				class="pmpro_copy_<? echo esc_attr( $key ) ?> pmpro_copy_to_clipboard button-link edit-filters" style="display:none">
+				<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
+			</button>
+			<?php
+				}
+			echo '</p>';
 		}
 	}
 

classes/class-pmpro-subscriptions-list-table.php

@@ -449,6 +449,10 @@ public function column_default( $item, $column_name ) {
 	public function column_id( $item ) {
 		?>
 		<strong><a href="admin.php?page=pmpro-subscriptions&id=<?php echo esc_attr( $item->get_id() ); ?>"><?php echo esc_html( $item->get_subscription_transaction_id() ); ?></a></strong>
+		<button title="<?php echo esc_attr__('Copy subscription ID to the clipboard', 'paid-memberships-pro' ) ?>" type="button"
+			class="pmpro_copy_subscription_id pmpro_copy_to_clipboard button-link edit-filters" style="display:none">
+			<span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
+		</button>
 		<div class="row-actions">
 			<?php
 			$actions = [

css/admin.css

@@ -1647,6 +1647,17 @@ table.pmprommpu_levels tr.remove_level td {background: #F2DEDE; }
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.pmpro_admin tr td button.pmpro_copy_to_clipboard .dashicons:not(.button .dashicons) {
+	padding-top: unset;
+	font-size: 14px;
+	line-height: 1.4;
+}
+
+.pmpro_admin tr td button.pmpro_copy_to_clipboard:hover {
+	color: #043959;
+}
+
+
 /**
  * Payment Settings
  */

js/pmpro-admin.js

@@ -1005,3 +1005,89 @@ function pmpro_changeTabs( e, inputChanged ) {
 jQuery(document).ready(function () {
 	jQuery('.pmpro_admin-pmpro-orders select#membership_id').select2();
 });
+
+/**
+ * Copy to the clipboard for discount codes, order ids, payment ids, etc.
+ */
+jQuery(document).ready(function ($) {
+
+	//get all the buttons
+	const $allButtons = $( '.pmpro_copy_to_clipboard' );
+
+	//get all table rows
+	const $allTableRows = $( 'table.discountcodes tr, table.subscriptions tr, table.orders tr' );
+
+	//get all anchors in the same table cell
+	const $allAnchors = $( 'td.column-discount_code a, td.column-subscription_id a, td.column-order_id a' );
+
+	// Bail if Clipboard API isn't supported
+	if ( ! navigator.clipboard ) {
+		//hide all buttons. Iterate over the jquery elements array and hide them all.
+		$allButtons.each( function () {
+			$( this ).remove();
+		});
+	}
+
+	/**
+	 * If it's mouseenter show the clipboard icon hider otherwise
+	 *
+	 * @param {Event} evt The event object
+	 * @returns {void}
+	 * @since TBD
+	 */
+	$( $allTableRows ).on( "mouseenter mouseleave focus", function ( evt ) {
+		const button = $( this ).find( '.pmpro_copy_to_clipboard' );
+		button.hide();
+
+		if ( evt.type === 'mouseenter' || evt.type === 'focus' ) {
+			button.show();
+		}
+	});
+
+	/**
+	 * If focus on the code show the clipboard icon for accessibility sake
+	 *
+	 * @param {Event} evt The event object
+	 * @returns {void}
+	 * @since TBD
+	 */
+	$( $allAnchors ).on( "focus", function ( evt ) {
+		$(this).closest('td').find('.pmpro_copy_to_clipboard').show();
+	});
+
+	/**
+	 * Copy  to Clipboard different codes across the site. Check the class pmpro_copy_to_clipboard to find where it's used.
+	 *
+	 * @param {Event} evt The click event
+	 * @returns {void}
+	 * @since TBD
+	 */
+	$('.pmpro_copy_to_clipboard').on('click', function ( evt ) {
+        // Find first link text
+        let code = $(this).closest('td').find('a').first().text();
+		//if it's a payment transaction id, we need to get the text from the first anchor
+		if( $(this).hasClass('pmpro_copy_payment_transaction_id') ) {
+			code = $(this).closest('td').find('p').first().text().split(":")[1].trim();
+		}
+
+        // Create a new Blob object with the discount code
+        const blob = new Blob([code], { type: 'text/plain' });
+
+        // Create a ClipboardItem object and write the Blob to the clipboard
+        navigator.clipboard.write([new ClipboardItem({ 'text/plain': blob })])
+            .then(() => {
+                // Hide copy button and show success message
+                $(this).hide();
+                $(this).after('<span class="success-message">Copied!</span>');
+
+                // Remove success message and show copy button after a delay
+                setTimeout(() => {
+                    $('.success-message').remove();
+                    $('.pmpro_copy_to_clipboard').show();
+                }, 3000);
+            })
+            .catch(err => {
+                console.error('Failed to copy code:', err);
+            });
+    });
+});