From 0a089db35488eadf528eec29fe02634a70c80768 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Wed, 15 Jan 2025 23:31:08 +0700
Subject: [PATCH 1/3] WIP Implement media import via URL

---
 .../src/class-jetpack-mu-wpcom.php            |  1 +
 .../wpcom-media/wpcom-media-url-import.js     |  5 ++
 .../wpcom-media/wpcom-media-url-import.php    | 59 +++++++++++++++++++
 .../jetpack-mu-wpcom/webpack.config.js        |  1 +
 4 files changed, 66 insertions(+)
 create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
 create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php

diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
index ec3435b3fbc18..4bc2a39096518 100644
--- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
+++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
@@ -152,6 +152,7 @@ public static function load_wpcom_user_features() {
 		require_once __DIR__ . '/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php';
 		require_once __DIR__ . '/features/wpcom-locale/sync-locale-from-calypso-to-atomic.php';
 		require_once __DIR__ . '/features/wpcom-media/wpcom-external-media-import.php';
+		require_once __DIR__ . '/features/wpcom-media/wpcom-media-url-import.php';
 		require_once __DIR__ . '/features/wpcom-plugins/wpcom-plugins.php';
 		require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-link-to-wpcom.php';
 		require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-notices.php';
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
new file mode 100644
index 0000000000000..e98e1d8df1d75
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
@@ -0,0 +1,5 @@
+import apiFetch from '@wordpress/api-fetch';
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	console.log( 'TESTING' );
+} );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
new file mode 100644
index 0000000000000..09eeaa5f47071
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * WordPress.com media URL import functionality.
+ *
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Connection\Manager as Jetpack_Connection;
+use Automattic\Jetpack\Connection\Client;
+
+function wpcom_media_url_import() {
+	$nonce = wp_create_nonce('import_image');
+    $ajax_url = admin_url('admin-ajax.php');
+
+    ?>
+    <div class="wrap">
+        <h1>Import Image from URL hah</h1>
+        <form id="wpcom-media-url-import" action="<?php echo esc_url($ajax_url); ?>" method="POST">
+            <input type="url" id="image_url" placeholder="Enter image URL" required />
+			<input type="hidden" name="nonce" value="<?php echo esc_attr($nonce); ?>" />
+			<input type="hidden" name="action" value="import_image" />
+            <button type="submit" class="button button-primary">Import Image</button>
+        </form>
+    </div>
+    <?php
+}
+add_action('post-plupload-upload-ui', 'wpcom_media_url_import', 20 );
+
+/**
+ * Enqueue the assets of the wpcom media URL import.
+ */
+function enqueue_wpcom_media_url_import() {
+	jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
+}
+add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );
+
+// IT WON'T WORK NOT SURE WHY!?!?!
+function wpcom_handle_media_url_import() {
+    check_ajax_referer('import_image', 'nonce');
+
+	$image_url = esc_url_raw($_POST['image_url']);
+	$blog_id = Jetpack_Options::get_option( 'id' );
+	$response = Client::wpcom_json_api_request_as_blog(
+		'/sites/' . $blog_id . '/media/new',
+		'1.1',
+		array(
+			'method' => 'POST',
+			'headers' => array(
+				'Content-Type'    => 'application/json',
+			),
+		),
+		wp_json_encode(array( 'media_urls' => [$image_url])),
+		'rest'
+	);
+
+    wp_send_json_success($response);
+}
+add_action('wp_ajax_import_image', 'wpcom_handle_media_url_import');
diff --git a/projects/packages/jetpack-mu-wpcom/webpack.config.js b/projects/packages/jetpack-mu-wpcom/webpack.config.js
index 1329b074d4b9d..b4883c2857302 100644
--- a/projects/packages/jetpack-mu-wpcom/webpack.config.js
+++ b/projects/packages/jetpack-mu-wpcom/webpack.config.js
@@ -47,6 +47,7 @@ module.exports = [
 				'./src/features/wpcom-documentation-links/wpcom-documentation-links.ts',
 			'wpcom-external-media-import-page':
 				'./src/features/wpcom-media/wpcom-external-media-import.js',
+			'wpcom-media-url-import': './src/features/wpcom-media/wpcom-media-url-import.js',
 			'wpcom-plugins-banner': './src/features/wpcom-plugins/js/banner.js',
 			'wpcom-plugins-banner-style': './src/features/wpcom-plugins/css/banner.css',
 			'wpcom-profile-settings-link-to-wpcom':

From c5cc25fe1a008f0af67051469446c2c586af18f5 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Wed, 15 Jan 2025 23:31:43 +0700
Subject: [PATCH 2/3] changelog

---
 .../jetpack-mu-wpcom/changelog/wpcom-media-url-import         | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import

diff --git a/projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import b/projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import
new file mode 100644
index 0000000000000..27db5a6914fdc
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Implement media import via URL

From 85afb8334fd0202e0c84deb2ecf193284c0c8daf Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Thu, 16 Jan 2025 12:02:19 +0700
Subject: [PATCH 3/3] WIP not working

---
 .../wpcom-media-url-import-form/index.jsx     | 56 +++++++++++++++++++
 .../wpcom-media/wpcom-media-url-import.js     | 22 +++++++-
 .../wpcom-media/wpcom-media-url-import.php    | 43 ++++----------
 3 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx
new file mode 100644
index 0000000000000..06ed72a99f2f0
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export default function WpcomMediaUrlImportForm( { siteId } ) {
+	const [ url, setUrl ] = useState( '' );
+
+	const handleUrlChange = e => {
+    setUrl( e.target.value );
+  };
+
+	const handleSubmit = async e => {
+		try {
+			new URL(url);
+		} catch (e) {
+			return false;
+		}
+		e.preventDefault();
+
+		console.log({ url, siteId } );
+
+		console.log({ wpcomRequest });
+
+		window.wpcomRequest = wpcomRequest;
+
+		// NOT WORKING!!
+
+		const response = await wpcomRequest( {
+			method: 'POST',
+			apiVersion: '1.1',
+			path: `/sites/${ siteId }/media/new?http_envelope=1`,
+			body: {
+				media_urls: [ url ],
+			}
+		});
+
+
+		console.log('FINISH');
+		console.log({ response});
+
+		return false;
+	}
+
+	return (
+		<div class="wrap">
+			<p>or import from URL YAY!</p>
+				<form onsubmit="return false;">
+					<input
+						type="url"
+						value={ url }
+        		onChange={ handleUrlChange }
+						required />
+					<button onClick={ handleSubmit } class="button button-primary">Import</button>
+				</form>
+		</div>
+	);
+}
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
index e98e1d8df1d75..af016efa56375 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
@@ -1,5 +1,21 @@
-import apiFetch from '@wordpress/api-fetch';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import WpcomMediaUrlImportForm from './wpcom-media-url-import-form';
 
-document.addEventListener( 'DOMContentLoaded', () => {
-	console.log( 'TESTING' );
+const props = typeof window === 'object' ? window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT : {};
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	const observer = new MutationObserver( mutations => {
+		mutations.forEach( mutation => {
+			if ( mutation.addedNodes.length > 0 ) {
+				const container = document.getElementById( 'wpcom-media-url-import' );
+				if ( container ) {
+					const root = ReactDOM.createRoot( container );
+					root.render( <WpcomMediaUrlImportForm { ...props } /> );
+					observer.disconnect();
+				}
+			}
+		} );
+	} );
+	observer.observe( document.body, { childList: true, subtree: true } );
 } );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
index 09eeaa5f47071..659b86ac45c37 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
@@ -10,18 +10,8 @@
 use Automattic\Jetpack\Connection\Client;
 
 function wpcom_media_url_import() {
-	$nonce = wp_create_nonce('import_image');
-    $ajax_url = admin_url('admin-ajax.php');
-
     ?>
-    <div class="wrap">
-        <h1>Import Image from URL hah</h1>
-        <form id="wpcom-media-url-import" action="<?php echo esc_url($ajax_url); ?>" method="POST">
-            <input type="url" id="image_url" placeholder="Enter image URL" required />
-			<input type="hidden" name="nonce" value="<?php echo esc_attr($nonce); ?>" />
-			<input type="hidden" name="action" value="import_image" />
-            <button type="submit" class="button button-primary">Import Image</button>
-        </form>
+    <div id="wpcom-media-url-import">
     </div>
     <?php
 }
@@ -31,29 +21,18 @@ function wpcom_media_url_import() {
  * Enqueue the assets of the wpcom media URL import.
  */
 function enqueue_wpcom_media_url_import() {
-	jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
-}
-add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );
-
-// IT WON'T WORK NOT SURE WHY!?!?!
-function wpcom_handle_media_url_import() {
-    check_ajax_referer('import_image', 'nonce');
+	$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
 
-	$image_url = esc_url_raw($_POST['image_url']);
 	$blog_id = Jetpack_Options::get_option( 'id' );
-	$response = Client::wpcom_json_api_request_as_blog(
-		'/sites/' . $blog_id . '/media/new',
-		'1.1',
+	$data = wp_json_encode(
 		array(
-			'method' => 'POST',
-			'headers' => array(
-				'Content-Type'    => 'application/json',
-			),
-		),
-		wp_json_encode(array( 'media_urls' => [$image_url])),
-		'rest'
+			'siteId' => $blog_id,
+		)
+	);
+	wp_add_inline_script(
+		$handle,
+		"window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT = $data;",
+		'before'
 	);
-
-    wp_send_json_success($response);
 }
-add_action('wp_ajax_import_image', 'wpcom_handle_media_url_import');
+add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );