Create site to regular block

app/Hooks/Sites.php

@@ -6,17 +6,68 @@
 use App\Hooks\Sites\Block;
 use App\Hooks\Sites\Post;
 use App\Hooks\Sites\Routes;
+use Roots\WPConfig\Config;
 
 class Sites
 {
+    public const LAST_UPDATE = 'Dool|Tinky|Sonya|Simple';
+    public const CREATE_SITE_PAGE_CONTENT = <<<EOF
+<!-- wp:group {"className":"wizard-form flex flex-column justify-center p-4 rounded radius-md bg-white","layout":{"type":"constrained"}} -->
+<div class="wp-block-group wizard-form flex flex-column justify-center p-4 rounded radius-md bg-white"><!-- wp:image {"width":"200px","sizeSlug":"medium","linkDestination":"none","align":"center"} -->
+<figure class="wp-block-image aligncenter size-medium is-resized"><img src="https://modycloud.test/content/uploads/2024/12/logo-mody-cloud-300x148.png" alt="" class="wp-image-51" style="width:200px"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:app/create-site-v2 -->
+<p class="wp-block-app-create-site-v2">Auth Module for Mody Cloud</p>
+<!-- /wp:app/create-site-v2 --></div>
+<!-- /wp:group -->
+EOF;
+
     public static function init(): void
     {
+        add_action('init', self::wp_init(...));
         add_action('init', Routes::permalink_structure(...));
         add_action('init', Post::register_post_type(...));
         add_action('wp_install', Routes::migrate(...));
         add_action('wp_ajax_check_setup_finished', Ajax::check_setup_finished(...));
         add_action('wp_ajax_check_space_name_exists', Ajax::check_space_name_exists(...));
         add_action('wp_ajax_create_space', Ajax::create_space(...));
         add_filter('app_before_render_block_create-site', Block::app_before_render_block(...));
+        add_filter('render_block', Block::app_render_block(...), 10, 3);
+    }
+
+    public static function wp_init(): void
+    {
+        if (Config::get('CHILD_SITE')) {
+            return;
+        }
+        $get_post_by_name = get_page_by_path('create-site');
+        $create_site_page_id_option = get_option('create_site_page_id');
+        if ($get_post_by_name?->ID && $create_site_page_id_option !== $get_post_by_name?->ID) {
+            $create_site_page_id = $get_post_by_name?->ID;
+        } else {
+            $create_site_page_id = $create_site_page_id_option;
+        }
+        $create_site_option_last_update = get_option('create_site_option_last_update');
+        if (! $create_site_page_id || $create_site_option_last_update !== self::LAST_UPDATE) {
+            if (!$create_site_page_id) {
+                $create_site_page_id = wp_insert_post([
+                    'post_type' => 'page',
+                    'post_title' => __('Create site', APP_THEME_LOCALE),
+                    'post_status' => 'publish',
+                    'post_author' => 1,
+                    'post_name' => 'create_site',
+                    'post_content' => self::CREATE_SITE_PAGE_CONTENT,
+                ]);
+            }
+
+            wp_update_post([
+                'ID' => $create_site_page_id,
+                'post_content' => self::CREATE_SITE_PAGE_CONTENT,
+            ]);
+
+            update_option('create_site_option_last_update', self::LAST_UPDATE);
+            update_option('create_site_page_id', $create_site_page_id);
+        }
     }
 }

app/Hooks/Sites/Block.php

@@ -46,4 +46,38 @@ public static function app_before_render_block(array $context): array
         }
         return $context;
     }
+
+    public static function app_render_block(string $block_content, array $block, \WP_Block $instance): string
+    {
+        if ($block['blockName'] != 'app/create-site-v2' || is_admin()) {
+            return $block_content;
+        }
+
+        if (!is_user_logged_in()) {
+            wp_redirect(wp_login_url());
+            exit;
+        }
+
+        if (current_user_can('administrator')) {
+            return $block_content;
+        }
+
+        $current_user_id = get_current_user_id();
+        $site_id = app_user_has_a_site($current_user_id);
+        $site_uri = get_field('site_uri', $site_id);
+        $site_is_active = $site_id && app_site_is_active($site_id);
+
+        if ($site_id && $site_is_active) {
+            wp_redirect($site_uri);
+            exit;
+        } elseif ($site_id && !$site_is_active) {
+            $space_install_setup = add_query_arg([
+                'key' => base64_encode(md5(rand(11111, 99999))),
+                'installing' => true,
+            ], "{$site_uri}/content/space-install-setup.php");
+            wp_redirect($space_install_setup);
+            exit;
+        }
+        return $block_content;
+    }
 }

config/webpack.config.js

@@ -6,7 +6,6 @@ module.exports = () => ( {
 	entry: {
 		app: path.resolve( process.cwd(), 'resources/scripts', 'app.js' ),
 		editor: path.resolve( process.cwd(), 'resources/scripts', 'editor.js' ),
-		site: path.resolve( process.cwd(), 'resources/scripts', 'site.js' ),
 	},
 	output: {
 		filename: '[name].js',

resources/blocks/create-site-v2/block.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "app/create-site-v2",
+  "version": "0.1.0",
+  "title": "Create site V2",
+  "category": "utilities",
+  "description": "Create site module.",
+  "example": {},
+  "supports": {
+    "html": false
+  },
+  "textdomain": "app",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "viewScript": "file:./view.js",
+  "render": "file:./render.php"
+}

resources/blocks/create-site-v2/edit.js

@@ -0,0 +1,10 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import './editor.scss';
+export default function Edit() {
+	return (
+		<p { ...useBlockProps() }>
+			{ __( 'Auth Module for Mody Cloud', 'app' ) }
+		</p>
+	);
+}

resources/blocks/create-site-v2/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-auth {
+	background-color: var(--color-white);
+}

resources/blocks/create-site-v2/index.js

@@ -0,0 +1,21 @@
+import { registerBlockType } from '@wordpress/blocks';
+import './style.scss';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	icon: (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			height="20px"
+			viewBox="0 -960 960 960"
+			width="20px"
+			fill="#666666"
+		>
+			<path d="M744-202v-86h-48v106l79 79 34-34-65-65ZM481-792 245-657l235 135 235-135-234-135ZM144-320v-320q0-19.77 9.45-35.94Q162.9-692.12 180-702l262.62-152.27Q452-859 460.82-862q8.82-3 19.04-3 10.21 0 19.5 3 9.28 3 17.64 8l263 152q17.1 9.88 26.55 26.06Q816-659.77 816-640v184h-72v-135L479-439 216-591v270l240 139v83L180-258q-17-9-26.5-25.45T144-320ZM719.77 0Q640 0 584-56.23q-56-56.22-56-136Q528-272 584.23-328q56.22-56 136-56Q800-384 856-327.77q56 56.22 56 136Q912-112 855.77-56q-56.22 56-136 56ZM480-487Z" />
+		</svg>
+	),
+	edit: Edit,
+	save,
+} );

resources/blocks/create-site-v2/render.php

@@ -0,0 +1 @@
+<div id="app-create-site-container" class='app-create-site-container'></div>

resources/blocks/create-site-v2/save.js

@@ -0,0 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
+export default function save() {
+	return <p { ...useBlockProps.save() }>{ 'Auth Module for Mody Cloud' }</p>;
+}

resources/scripts/site/components/CreateSiteForm.jsx → resources/blocks/create-site-v2/src/components/CreateSiteForm.jsx

@@ -1,7 +1,8 @@
+// eslint-disable-next-line import/no-unresolved
 import { useState } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { toast } from 'react-toastify';
-import toKebabCase from '@modycloud/tools/kebabcase';
+import toKebabCase from '../../../../scripts/tools/kebabcase';
 
 const CreateSiteForm = () => {
 	const [ companyName, setCompanyName ] = useState( '' );
@@ -10,7 +11,6 @@ const CreateSiteForm = () => {
 	const [ loadingMessage, setLoadingMessage ] = useState(
 		'We are creating your space, please wait...'
 	);
-	const [ counter, setCounter ] = useState( 0 );
 
 	const maskSpaceNameInput = ( event ) => {
 		setSpaceName( toKebabCase( event.target.value ).substring( 0, 24 ) );
@@ -32,10 +32,10 @@ const CreateSiteForm = () => {
 		__( "Oh! You're still here? Man what am I doing…", 'app' ),
 	];
 
-	const checkInstallFinished = async ( queue_ui ) => {
+	const checkInstallFinished = async ( queueUi ) => {
 		const data = new URLSearchParams( {
 			action: 'check_setup_finished',
-			queue_id: queue_ui,
+			queue_id: queueUi,
 		} );
 
 		try {
@@ -82,18 +82,13 @@ const CreateSiteForm = () => {
 			toast.error( __( 'Error creating site.' ), {
 				autoClose: 3000,
 			} );
-			console.error(
-				sprintf(
-					__( 'Error creating site. Code: %s', 'app' ),
-					response.statusText
-				)
-			);
 			setIsCreating( false );
 		}
 
 		const {
 			success,
-			data: { initial_page, message, queue_id },
+			// eslint-disable-next-line camelcase
+			data: { message, queue_id },
 		} = await response.json();
 
 		if ( success ) {
@@ -117,6 +112,7 @@ const CreateSiteForm = () => {
 					isLoading: true,
 				} );
 				const {
+					// eslint-disable-next-line camelcase
 					data: { done, initial_page },
 				} = await checkInstallFinished( queue_id );
 
@@ -130,6 +126,7 @@ const CreateSiteForm = () => {
 						isLoading: false,
 					} );
 					setTimeout( () => {
+						// eslint-disable-next-line camelcase
 						location.href = initial_page;
 					}, 3000 );
 				}
@@ -158,6 +155,7 @@ const CreateSiteForm = () => {
 					) }
 					<span className="text-danger">*</span>
 				</label>
+				{ /* eslint-disable jsx-a11y/tabindex-no-positive */ }
 				<input
 					type="text"
 					tabIndex="1"

resources/blocks/create-site-v2/style.scss

@@ -0,0 +1,3 @@
+body {
+	color: var(--color-text);
+}

resources/scripts/site.js → resources/blocks/create-site-v2/view.js

@@ -3,8 +3,8 @@ import React from 'react';
 import domReady from '@wordpress/dom-ready';
 import { createRoot } from '@wordpress/element';
 import { ToastContainer } from 'react-toastify';
-import CreateSiteIntro from './site/components/CreateSiteIntro';
-import CreateSiteForm from './site/components/CreateSiteForm';
+import CreateSiteIntro from './src/components/CreateSiteIntro';
+import CreateSiteForm from './src/components/CreateSiteForm';
 
 const AccountContainer = () => {
 	return (