PES-2565: Wizard (#734)

config/config.neon

@@ -136,3 +136,4 @@ services:
 	- Packetery\Module\Views\AssetManager
 	- Packetery\Module\Shipping\ShippingProvider
 	- Packetery\Module\Shipping\ShippingMethodGenerator
+	- Packetery\Module\Views\WizardAssetManager

public/js/tours/admin-wizard-example.js

@@ -0,0 +1,27 @@
+const driver = window.driver.js.driver;
+
+const driverObj = driver(
+	{
+		showProgress: true,
+		progressText: '{{current}} ' + adminWizardTourSettings.translations.of + ' {{total}}',
+		showButtons: [
+			'next',
+			'previous',
+			'close'
+		],
+		nextBtnText: adminWizardTourSettings.translations.next,
+		prevBtnText: adminWizardTourSettings.translations.previous,
+		doneBtnText: adminWizardTourSettings.translations.close,
+		steps: [
+			{ element: '#frm-packetery-api_password', popover: { title: adminWizardTourSettings.translations.apiPassword.title, description: adminWizardTourSettings.translations.apiPassword.description } },
+			{ element: '#frm-packetery-sender', popover: { title: adminWizardTourSettings.translations.apiSender.title, description: adminWizardTourSettings.translations.apiSender.description } },
+			{ element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
+			{ element: '.footer', popover: { title: 'Title', description: 'Description' } },
+		],
+		onDestroyStarted: function () {
+			if (!driverObj.hasNextStep() || window.confirm("Are you sure?")) {
+				driverObj.destroy();
+			}
+		}
+	});
+driverObj.drive();

src/Packetery/Module/Hooks/HookRegistrar.php

@@ -39,6 +39,7 @@
 use Packetery\Module\Views\ViewAdmin;
 use Packetery\Module\Views\ViewFrontend;
 use Packetery\Module\Views\ViewMail;
+use Packetery\Module\Views\WizardAssetManager;
 
 class HookRegistrar {
 
@@ -239,6 +240,11 @@ class HookRegistrar {
 	 */
 	private $shippingProvider;
 
+	/**
+	 * @var WizardAssetManager
+	 */
+	private $wizardAssetManager;
+
 	public function __construct(
 		PluginHooks $pluginHooks,
 		MessageManager $messageManager,
@@ -278,7 +284,8 @@ public function __construct(
 		PacketSynchronizer $packetSynchronizer,
 		CheckoutSettings $checkoutSettings,
 		ModuleHelper $moduleHelper,
-		ShippingProvider $shippingProvider
+		ShippingProvider $shippingProvider,
+		WizardAssetManager $wizardAssetManager
 	) {
 		$this->messageManager            = $messageManager;
 		$this->checkout                  = $checkout;
@@ -319,6 +326,7 @@ public function __construct(
 		$this->checkoutSettings          = $checkoutSettings;
 		$this->moduleHelper              = $moduleHelper;
 		$this->shippingProvider          = $shippingProvider;
+		$this->wizardAssetManager        = $wizardAssetManager;
 	}
 
 	public function register(): void {
@@ -366,6 +374,7 @@ private function registerBackEnd(): void {
 		if ( $this->wpAdapter->doingAjax() === false ) {
 			$this->wpAdapter->addAction( 'init', [ $this->messageManager, 'init' ] );
 			$this->wpAdapter->addAction( 'admin_enqueue_scripts', [ $this->assetManager, 'enqueueAdminAssets' ] );
+			$this->wpAdapter->addAction( 'admin_enqueue_scripts', [ $this->wizardAssetManager, 'enqueueWizardAssets' ] );
 			$this->wpAdapter->addAction(
 				'admin_notices',
 				function () {

src/Packetery/Module/Views/AssetManager.php

@@ -99,7 +99,7 @@ public function __construct(
 	 * @param bool   $inFooter Tells where to include script.
 	 * @param array  $deps Script dependencies.
 	 */
-	private function enqueueScript( string $name, string $file, bool $inFooter, array $deps = [] ): void {
+	public function enqueueScript( string $name, string $file, bool $inFooter, array $deps = [] ): void {
 		$this->wpAdapter->enqueueScript(
 			$name,
 			$this->wpAdapter->pluginDirUrl( ModuleHelper::getPluginMainFilePath() ) . $file,
@@ -115,7 +115,7 @@ private function enqueueScript( string $name, string $file, bool $inFooter, arra
 	 * @param string $name Name of script.
 	 * @param string $file Relative file path.
 	 */
-	private function enqueueStyle( string $name, string $file ): void {
+	public function enqueueStyle( string $name, string $file ): void {
 		$this->wpAdapter->enqueueStyle(
 			$name,
 			$this->wpAdapter->pluginDirUrl( ModuleHelper::getPluginMainFilePath() ) . $file,

src/Packetery/Module/Views/WizardAssetManager.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace Packetery\Module\Views;
+
+use Packetery\Module\Framework\WpAdapter;
+use Packetery\Module\Options\Page;
+use Packetery\Nette\Http\Request;
+
+class WizardAssetManager {
+	/**
+	 * @var WpAdapter
+	 */
+	private $wpAdapter;
+
+	/**
+	 * @var AssetManager
+	 */
+	private $assetManager;
+
+	/**
+	 * @var Request
+	 */
+	private $request;
+
+	public function __construct(
+		AssetManager $assetManager,
+		Request $request,
+		WpAdapter $wpAdapter
+	) {
+		$this->assetManager = $assetManager;
+		$this->request      = $request;
+		$this->wpAdapter    = $wpAdapter;
+	}
+
+	public function enqueueWizardAssets(): void {
+		$page                       = $this->request->getQuery( 'page' );
+		$isWizardEnabled            = $this->request->getQuery( 'wizard-enabled' ) === 'true';
+		$isWizardExampleTourEnabled = $this->request->getQuery( 'wizard-example-tour-enabled' ) === 'true';
+
+		if ( $page === Page::SLUG && $isWizardEnabled ) {
+			$this->assetManager->enqueueStyle( 'packetery-driverjs-css', 'public/libs/driverjs-1.3.4/driver.css' );
+			$this->assetManager->enqueueScript( 'packetery-driverjs', 'public/libs/driverjs-1.3.4/driver.js.iife.js', true );
+
+			$adminWizardTourSettings = [
+				'translations' => [
+					'next'        => $this->wpAdapter->__( 'Next', 'packeta' ),
+					'previous'    => $this->wpAdapter->__( 'Previous', 'packeta' ),
+					'close'       => $this->wpAdapter->__( 'Close', 'packeta' ),
+					'of'          => $this->wpAdapter->__( 'of', 'packeta' ),
+					'apiPassword' => [
+						'title'       => $this->wpAdapter->__( 'API password', 'packeta' ),
+						'description' => sprintf(
+							$this->wpAdapter->__( 'API password can be found at %s', 'packeta' ),
+							'<a href="https://client.packeta.com/support" target="_blank">https://client.packeta.com/support<a/>'
+						),
+					],
+					'apiSender'   => [
+						'title'       => $this->wpAdapter->__( 'Sender', 'packeta' ),
+						'description' => sprintf(
+						/* translators: 1: emphasis start 2: emphasis end 3: client section link start 4: client section link end */
+							esc_html__( 'Fill here %1$ssender label%2$s - you will find it in %3$sclient section%4$s - user information - field \'Indication\'.', 'packeta' ),
+							'<strong>',
+							'</strong>',
+							'<a href="https://client.packeta.com/senders" target="_blank">',
+							'</a>'
+						),
+					],
+				],
+			];
+
+			if ( $isWizardExampleTourEnabled ) {
+				$this->assetManager->enqueueScript(
+					'packetery-admin-wizard-tour',
+					'public/js/tours/admin-wizard-example.js',
+					true,
+					[
+						'packetery-driverjs',
+					]
+				);
+
+				$this->wpAdapter->localizeScript( 'packetery-admin-wizard-tour', 'adminWizardTourSettings', $adminWizardTourSettings );
+			}
+		}
+	}
+}