feat: added media selector for QR code

Author: jpneey

assets/admin.css

@@ -0,0 +1,16 @@
+.jp-gcash-upload-fields button {
+    width: 100px;
+}
+
+#prev_url_gcash_jp {
+    display: block;
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.jp-gcash-upload-fields img {
+    width: 100px;
+    height: auto;
+    max-width: none;
+    max-height: none;
+}

assets/admin.js

@@ -0,0 +1,55 @@
+jQuery(function($) {
+
+    // Initialize variables
+    var custom_uploader;
+    var input = '#woocommerce_jp_gcash_manual_gcash_qr';
+    var buttonText = 'Select QR';
+
+    // Ensure the input element exists before continuing
+    if ($(input).length) {
+        
+        var selected = $(input).val();
+        
+        $(input).wrap('<div class="jp-gcash-upload-fields">');
+        $("<span id='prev_url_gcash_jp'></span>").insertBefore(input);
+        
+        if (selected) {
+            buttonText = "Update QR";
+            $('#prev_url_gcash_jp').html('Loading preview..')
+            wp.media.attachment(selected).fetch().then(function (data) {
+                $('#prev_url_gcash_jp').html('<img src="' + wp.media.attachment(selected).get('url') + '" />');
+            });
+        }
+
+        $("<button type='button' class='button media-button select-mode-toggle-button' id='woocommerce_jp_gcash_manual_gcash_qr_select'>" + buttonText + "</button>")
+            .insertBefore(input);
+    }
+
+    // Event listener for the select button
+    $('body').on('click', '#woocommerce_jp_gcash_manual_gcash_qr_select', function(e) {
+        e.preventDefault();
+
+        // Open the media uploader or create it if it doesn't exist
+        if (custom_uploader) {
+            custom_uploader.open();
+            return;
+        }
+
+        custom_uploader = wp.media.frames.file_frame = wp.media({
+            title: 'Choose Image',
+            button: { text: 'Choose Image' },
+            multiple: false // Assuming only one image can be selected
+        });
+
+        // Handle the selection of an image
+        custom_uploader.on('select', function() {
+            var attachment = custom_uploader.state().get('selection').first().toJSON();
+            $(input).val(attachment.id).trigger('change');
+            $('#woocommerce_jp_gcash_manual_gcash_qr_preview').hide();
+            $('#prev_url_gcash_jp').html('<img src="' + attachment.url + '" />');
+        });
+
+        custom_uploader.open();
+    });
+
+});

assets/admin.min.css

@@ -71,9 +71,9 @@ public function init_form_fields() {
                     'desc_tip'    => false,
                 ),
                 'gcash_qr' => array(
-                    'title'       => __( 'Gcash QR code image link', 'gcash-payment-gateway-for-woocommerce' ),
-                    'type'        => 'url',
-                    'description' => __( 'Link to your Gcash QR Code image. <a href="https://help.gcash.com/hc/en-us/articles/15725514628121-Generate-your-Digital-QR-via-GCashPro-Portal" target="_blank">How to get my QR code</a>.', 'gcash-payment-gateway-for-woocommerce' ),
+                    'title'       => __( 'Gcash QR code image', 'gcash-payment-gateway-for-woocommerce' ),
+                    'type'        => 'hidden',
+                    'description' => __( 'Upload your Gcash QR Code image. <a href="https://help.gcash.com/hc/en-us/articles/15725514628121-Generate-your-Digital-QR-via-GCashPro-Portal" target="_blank">How to get my QR code</a>.', 'gcash-payment-gateway-for-woocommerce' ),
                     'default'     => '',
                     'required'    => true
                 ),
@@ -115,6 +115,6 @@ public function process_payment( $order_id ) {
                 'redirect' => $this->get_return_url( $order ),
             );
         }
-    
+
     }
 }, 11 );

assets/admin.min.js

@@ -46,7 +46,9 @@ public function ref_field( $description, $payment_id )
         <p class="jp-manual-gcash-checkout-instruction"><?php echo wp_kses_post( $ins ) ?></p>
         <?php if ( $qr ) { ?>
         <div class="jp-manual-gcash-qr-wrapper">
-            <img src="<?php echo esc_url( $qr ) ?>" alt="merchant gcash qr code" class="jp-manual-gcash-qr" />
+            <?php
+                echo wp_get_attachment_image( $qr, 'full' );
+            ?>
         </div>
         <?php
             } else if ( current_user_can( 'administrator' ) ) {
@@ -95,7 +97,7 @@ public function inline_styles( $description, $payment_id )
             .payment_box.payment_method_jp_gcash_manual {
                 padding: 18px !important;
             }
-            .jp-manual-gcash-qr {
+            .jp-manual-gcash-qr-wrapper img {
                 float: none !important;
                 width: 100% !important;
                 padding: 18px !important;

includes/payment.php

@@ -0,0 +1,34 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class JP_Manual_Gcash_Upload {
+
+    public function __construct()
+    {
+        add_action( 'admin_enqueue_scripts', [ $this, 'inline_scripts' ], 11 );
+    }
+
+    public function inline_scripts()
+    {
+        $screen = get_current_screen();
+
+        $section = sanitize_text_field( wp_unslash( $_REQUEST['section'] ?? null ));
+
+        if ( $screen->id === 'woocommerce_page_wc-settings' && $section === 'jp_gcash_manual' ) {
+            wp_enqueue_media();
+            wp_enqueue_style( 'gcash_payment_gateway_for_woocommerce_css', JP_MANUAL_GCASH_URL . 'assets/admin.min.css', [], JP_MANUAL_GCASH_VER );
+            wp_enqueue_script( 'gcash_payment_gateway_for_woocommerce_js', JP_MANUAL_GCASH_URL . 'assets/admin.min.js', [ 'jquery' ], JP_MANUAL_GCASH_VER, true );
+            wp_localize_script( 'gcash_payment_gateway_for_woocommerce_js', 'gcash_payment_gateway_for_woocommerce_js',
+                array( 
+                    'post_url'   => admin_url( 'post.php' ),
+                )
+            );
+        }
+    }
+
+}
+
+new JP_Manual_Gcash_Upload();

includes/reference.php

@@ -14,9 +14,10 @@
  */
 
 define( 'JP_MANUAL_GCASH_VER', '1.0' );
-
 define( 'JP_MANUAL_GCASH_DIR', plugin_dir_path(__FILE__) );
+define( 'JP_MANUAL_GCASH_URL', plugin_dir_url(__FILE__) );
 
 include plugin_dir_path(__FILE__) . '/includes/payment.php';
 include plugin_dir_path(__FILE__) . '/includes/order-status.php';
-include plugin_dir_path(__FILE__) . '/includes/reference.php';
+include plugin_dir_path(__FILE__) . '/includes/reference.php';
+include plugin_dir_path(__FILE__) . '/includes/upload.php';