Skip to content
Snippets Groups Projects
Commit 7fbbb762 authored by Grzegorz Rola's avatar Grzegorz Rola
Browse files

feature(popup): popup

parent c2bfc818
Branches
Tags
3 merge requests!6Feature/no dev,!5Feature/no dev,!3feature(popup): popup
Pipeline #11023 passed
This commit is part of merge request !3. Comments created here will be created in the context of that merge request.
import React from "react";
import {Button, Modal} from "react-bootstrap";
import {Button, Container, Modal} from "react-bootstrap";
import Cookies from 'js-cookie';
/**
......@@ -13,10 +13,13 @@ export default class ActivationReminder extends React.Component {
constructor( props ) {
super( props );
let cookie_name = props.cookie || 'wpdesk-licence';
let cookie_name = props.cookie_name;
this.state = {
show: this.shouldShow( cookie_name ),
logo_url: props.logo_url,
plugin_dir: props.plugin_dir,
plugin_title: props.plugin_title,
cookie_name: cookie_name,
};
......@@ -57,18 +60,26 @@ export default class ActivationReminder extends React.Component {
size="lg"
show={state.show}
onHide={this.handleClose}
className={"wpdesk-activation-reminder-popup"}
centered
>
<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.Header closeButton></Modal.Header>
<Modal.Body>
<Container>
<img className={"logo"} src={this.state.logo_url} />
</Container>
<Container>
<h1>Plugin activation reminder!</h1>
<h2>Plugin title: {this.props.plugin_title}</h2>
<a target="_top" href={this.props.subscriptions_url}>Click here to go to activation.</a><br/>
<a target="_blank" href={this.props.buy_plugin_url}>Click here to buy subscription.</a><br/>
<a target="_blank" href={this.props.read_more_url}>Click here to read more.</a><br/>
</Container>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Button variant="primary" onClick={this.handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
);
......
......@@ -9,8 +9,15 @@ 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 );
render( <ActivationReminder
logo_url={element.getAttribute( 'data-logo_url' )}
plugin_dir={element.getAttribute( 'data-plugin_dir' )}
plugin_title={element.getAttribute( 'data-plugin_title' )}
cookie_name={element.getAttribute( 'data-cookie_name' )}
subscriptions_url={element.getAttribute( 'data-subscriptions_url' )}
buy_plugin_url={element.getAttribute( 'data-buy_plugin_url' )}
read_more_url={element.getAttribute( 'data-read_more_url' )}
/>, element );
}
}, false );
......@@ -10,3 +10,211 @@
span.wpdesk-activation-reminder {
display: none;
}
.wpdesk-activation-reminder-popup {
@media (min-width: 576px) {
.modal-dialog {
max-width: none;
width: 50%;
min-width: 500px;
}
.modal-dialog.menu {
max-width: 576px;
}
}
.modal-header {
text-align: center;
}
img.logo {
width: 200px;
}
div.action button {
width: 200px;
height: 250px;
margin-top: 30px;
}
img.action {
width: 60px;
}
div.heading-description {
font-size: initial;
font-weight: normal;
}
h1.title {
color: #be272c;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
.h1 {
@include font-size($h1-font-size);
}
.h2 {
@include font-size($h2-font-size);
}
.h3 {
@include font-size($h3-font-size);
}
.h4 {
@include font-size($h4-font-size);
}
.h5 {
@include font-size($h5-font-size);
}
.h6 {
@include font-size($h6-font-size);
}
div.col {
text-align: center;
}
.container {
padding-left: 0;
padding-right: 0;
}
.container .row div.section-image {
vertical-align: top;
min-height: 100px;
}
@media (min-width: 992px) {
.modal-lg {
max-width: 570px;
}
}
div.modal-header {
border-bottom: 0px;
.close {
cursor: pointer;
}
}
.modal-body {
text-align: center;
padding-top: 0px;
margin-top: -20px;
}
div.title {
margin: 0 0 25px;
font-size: 14px;
font-weight: bold;
line-height: 1.14;
letter-spacing: normal;
text-align: center;
color: #005889;
padding-top: 0px;
}
div.logo {
margin-bottom: 30px;
img {
max-width: 190px;
width: 100%;
}
}
div.image {
margin-bottom: 20px;
img {
max-width: 350px;
width: 100%;
}
}
div.text {
padding: 0 80px;
p {
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.41;
letter-spacing: normal;
text-align: center;
color: #333333;
strong {
font-weight: 600;
&.highlight {
color: #be272c;
background: none;
}
}
}
}
div.heading {
h1 {
margin: 0 17.5px 9px;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
color: #be272c;
}
}
div.modal-footer {
text-align: center;
justify-content: center;
border-top: 0px;
padding-bottom: 40px;
button {
&.btn-link {
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: center;
color: #666666;
}
&.btn-success {
padding: 8px 27px;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(72, 182, 72, 0.25);
background-color: #48b648;
font-size: 14px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.71;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
}
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -17,6 +17,7 @@
"react-cookie": "^4.1.0",
"react-dom": "^16.0.0",
"react-dropzone": "^7.0.1",
"react-scripts": "^4.0.3",
"react-select": "^3.2.0",
"react-sortable-hoc": "^1.11.0",
"uuid": "^8.3.2"
......
......@@ -98,7 +98,10 @@ class PrepareActivationReminderCommand extends BaseCommand
$package = $composer->getPackage();
$extra = $package->getExtra();
$plugin_title = $extra['activation-reminder']['plugin-title'];
$plugin_dir = $extra['activation-reminder']['plugin-dir'];
$logo_url = $extra['activation-reminder']['logo-url'];
$buy_plugin_url = $extra['activation-reminder']['buy-plugin-url'];
$namespace = $this->prepare_namespace_from_class_name( $class_name );
$short_classname = $this->prepare_short_class_name_from_class_name( $class_name );
......@@ -107,9 +110,12 @@ class PrepareActivationReminderCommand extends BaseCommand
$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( 'plugin-dir', $plugin_dir, $file_contents );
$file_contents = str_replace( 'plugin-title', $plugin_title, $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( 'logo-url', $logo_url, $file_contents );
$file_contents = str_replace( 'buy-plugin-url', $buy_plugin_url, $file_contents );
$file_contents = str_replace( 'new Reminder();', 'new ' . $short_classname . '();', $file_contents );
file_put_contents( $class_file, $file_contents );
}
......
......@@ -4,6 +4,8 @@ namespace ReminderNamespace;
class Reminder {
private $logo_url = 'logo-url';
public function __construct() {
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_reminder_script' ) );
add_action( 'admin_footer', array( $this, 'display_html_element' ) );
......@@ -22,14 +24,20 @@ class Reminder {
wp_register_style(
'wpdesk-activation-reminder',
plugins_url( 'popup-css-file' )
plugins_url( 'popup-css-file' ),
array(),
'script-version'
);
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>";
$logo_url = plugins_url( 'plugin-dir' . '/' . $this->logo_url );
$cookie_name = md5( site_url() );
$subscriptions_url = admin_url( 'admin.php?page=wpdesk-licenses' );
$read_more_url = 'https://flexibleshipping.com';
echo "<span class=\"wpdesk-activation-reminder\" data-plugin_title=\"plugin-title\" data-plugin_dir=\"plugin-dir\" data-logo_url=\"$logo_url\" data-cookie_name=\"$cookie_name\" data-subscriptions_url=\"$subscriptions_url\" data-buy_plugin_url=\"buy-plugin-url\" data-read_more_url=\"$read_more_url\"></span>";
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment