feature(popup): popup

assets-src/popup/js/components/activation-reminder.jsx

+import React from "react";
+import {Button, Modal} from "react-bootstrap";
+import Cookies from 'js-cookie';
+
+/**
+ * ActivationReminder REACT class.
+ */
+export default class ActivationReminder extends React.Component {
+
+    /**
+     * @param {Object} props
+     */
+    constructor( props ) {
+        super( props );
+
+        let cookie_name = props.cookie || 'wpdesk-licence';
+
+        this.state = {
+            show: this.shouldShow( cookie_name ),
+            cookie_name: cookie_name,
+        };
+
+        this.handleClose = this.handleClose.bind(this);
+    };
+
+    /**
+     *
+     */
+    handleClose() {
+        this.setState( { show: false } );
+    }
+
+    /**
+     * @param {String} cookie_name
+     * @return {boolean}
+     */
+    shouldShow( cookie_name ) {
+        let timestamp = Math.round(new Date() / 1000);
+        let cookie = Cookies.get( cookie_name );
+        if ( cookie === undefined ) {
+            Cookies.set( cookie_name, timestamp + 60 * 60 * 24 * 14, { expires: 730 } );
+        } else if ( cookie < timestamp ) {
+            Cookies.set( cookie_name, timestamp + 60 * 60 * 24 * 14, { expires: 730 } );
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        let state = this.state;
+        return (
+            <Modal
+                size="lg"
+                show={state.show}
+                onHide={this.handleClose}
+            >
+                <Modal.Header closeButton>
+                    <Modal.Title>Modal heading</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={this.handleClose}>
+                        Close
+                    </Button>
+                    <Button variant="primary" onClick={this.handleClose}>
+                        Save Changes
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+
+
+}
\ No newline at end of file

assets-src/popup/js/index.jsx

+import React from 'react';
+import ActivationReminder from "./components/activation-reminder";
+import {render} from "react-dom";
+
+window.console.log(1);
+
+document.addEventListener( 'DOMContentLoaded', function () {
+window.console.log(2);
+    let elements = document.getElementsByClassName( 'wpdesk-activation-reminder' );
+    for ( let i = 0; i < elements.length; i ++ ) {
+        let element = elements[i];
+window.console.log(element);
+        render( <ActivationReminder/>, element );
+
+    }
+}, false );

assets-src/popup/scss/style.scss

+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/mixins';
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/buttons';
+@import '../../../node_modules/bootstrap/scss/modal';
+@import '../../../node_modules/bootstrap/scss/close';
+@import '../../../node_modules/bootstrap/scss/utilities';
+@import '../../../node_modules/bootstrap/scss/grid';
+
+span.wpdesk-activation-reminder {
+  display: none;
+}
\ No newline at end of file

composer.json

@@ -13,7 +13,8 @@
   ],
   "require": {
     "php": ">=7.0",
-    "composer-plugin-api": "^1|^2"
+    "composer-plugin-api": "^1|^2",
+    "pmaslak/php-obfuscator": "^1.1"
   },
   "require-dev": {
     "composer/composer": "^1|^2",

package.json

+{
+  "name": "wp-wpdesk-activation-reminder",
+  "version": "1.0.0",
+  "description": "WP Desk Activation Reminder",
+  "main": "webpack.mix.js",
+  "author": "grola@wpdesk.net",
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@wordpress/i18n": "^3.18.0",
+    "bootstrap": "^4.6.0",
+    "html-react-parser": "^0.14.3",
+    "js-cookie": "^3.0.0",
+    "react": "^16.14.0",
+    "react-bootstrap": "^1.4.3",
+    "react-cookie": "^4.1.0",
+    "react-dom": "^16.0.0",
+    "react-dropzone": "^7.0.1",
+    "react-select": "^3.2.0",
+    "react-sortable-hoc": "^1.11.0",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^1.0.1",
+    "mati-mix": "^2.0.1",
+    "sass": "^1.32.12",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^0.23.1"
+  },
+  "scripts": {
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "npm run development",
+    "watch": "npm run development -- --watch",
+    "prod": "npm run production"
+  },
+  "optionalDependencies": {
+    "fsevents": "^2.3.2"
+  }
+}

src/ActivationReminder/Composer/PrepareActivationReminderCommand.php

@@ -45,6 +45,8 @@ class PrepareActivationReminderCommand extends BaseCommand
 	    $target_file = str_replace( '.php', $random_letter . '.php', $target_file );
 	    $target_file = str_replace( getcwd() . '/vendor/composer/../../', '', $target_file );
 
+	    $target_dir = dirname( $target_file );
+
 	    $output->writeln("Target file name: $target_file");
 
 		$this->clear_vendor_prefixed();
@@ -55,7 +57,13 @@ class PrepareActivationReminderCommand extends BaseCommand
 
 	    $this->regenerate_autoload( $target_file );
 
-	    $this->prepare_class( $random_class . $random_letter, $target_file );
+	    $popup_javascript_file = $target_dir . '/popup.js';
+	    $popup_css_file = $target_dir . '/popup.css';
+
+	    copy( 'vendor/wpdesk/wp-wpdesk-activation-reminder/assets/js/popup.js', $popup_javascript_file );
+	    copy( 'vendor/wpdesk/wp-wpdesk-activation-reminder/assets/css/popup.css', $popup_css_file );
+
+	    $this->prepare_class( $random_class . $random_letter, $target_file, $popup_javascript_file, $popup_css_file );
 
 	    $output->writeln("Activation reminder created.");
     }
@@ -82,14 +90,26 @@ class PrepareActivationReminderCommand extends BaseCommand
 	/**
 	 * @param string $class_name
 	 * @param string $class_file
+	 * @param string $popup_javascript_file
+	 * @param string $popup_css_file
 	 */
-    private function prepare_class( $class_name, $class_file ) {
-    	$namespace = $this->prepare_namespace_from_class_name( $class_name );
+    private function prepare_class( $class_name, $class_file, $popup_javascript_file, $popup_css_file ) {
+	    $composer = $this->getComposer();
+	    $package = $composer->getPackage();
+	    $extra = $package->getExtra();
+
+	    $plugin_dir = $extra['activation-reminder']['plugin-dir'];
+
+	    $namespace = $this->prepare_namespace_from_class_name( $class_name );
     	$short_classname = $this->prepare_short_class_name_from_class_name( $class_name );
 
     	$file_contents = file_get_contents( $class_file );
     	$file_contents = str_replace( 'namespace ReminderNamespace;', 'namespace ' . $namespace . ';', $file_contents );
-	    $file_contents = str_replace( 'class Reminder', 'class ' . $short_classname, $file_contents );
+    	$file_contents = str_replace( 'class Reminder', 'class ' . $short_classname, $file_contents );
+	    $file_contents = str_replace( 'plugin-dir', $plugin_dir, $file_contents );
+	    $file_contents = str_replace( 'popup-javascript-file', $plugin_dir . '/' . $popup_javascript_file, $file_contents );
+	    $file_contents = str_replace( 'popup-css-file', $plugin_dir . '/' . $popup_css_file, $file_contents );
+	    $file_contents = str_replace( 'script-version', rand(1, 1000), $file_contents );
 	    $file_contents = str_replace( 'new Reminder();', 'new ' . $short_classname . '();', $file_contents );
     	file_put_contents( $class_file, $file_contents );
     }

src/Reminder.php

@@ -5,11 +5,31 @@ namespace ReminderNamespace;
 class Reminder {
 
 	public function __construct() {
-		add_action( 'admin_footer', array( $this, 'admin_footer' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_reminder_script' ) );
+		add_action( 'admin_footer', array( $this, 'display_html_element' ) );
 	}
 
-	public function admin_footer() {
-		echo "<!-- footer reminder -->\n";
+	public function enqueue_reminder_script() {
+		if ( get_option( 'api_plugin-dir_activated', '' ) !== 'Activated' ) {
+			wp_register_script(
+				'wpdesk-activation-reminder',
+				plugins_url( 'popup-javascript-file' ),
+				array(),
+				'script-version',
+				true
+			);
+			wp_enqueue_script( 'wpdesk-activation-reminder' );
+
+			wp_register_style(
+				'wpdesk-activation-reminder',
+				plugins_url( 'popup-css-file' )
+			);
+			wp_enqueue_style( 'wpdesk-activation-reminder' );
+		}
+	}
+
+	public function display_html_element() {
+		echo "<span class=\"wpdesk-activation-reminder\" data-plugin_title=\"plugin-title\" data-plugin_dir=\"plugin-dir\"></span>";
 	}
 
 }

webpack.mix.js

+/* ---
+  Docs: https://www.npmjs.com/package/mati-mix/
+--- */
+const mix = require('mati-mix');
+
+// Activation Reminder Popup
+mix.js( [ 'assets-src/popup/js/index.jsx' ], 'assets/js/popup.js' );
+mix.sass( 'assets-src/popup/scss/style.scss', 'assets/css/popup.css' );
+
+mix.mix.babelConfig({
+	"presets": [
+		"@babel/preset-env",
+		"@babel/preset-react"
+	],
+});