feature(popup): texts

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

 import React from "react";
-import {Button, Container, Modal} from "react-bootstrap";
+import {Button, Col, Container, Modal, Row} from "react-bootstrap";
 import Cookies from 'js-cookie';
 
 /**
@@ -24,6 +24,7 @@ export default class ActivationReminder extends React.Component {
         };
 
         this.handleClose = this.handleClose.bind(this);
+        this.handleGetLicence = this.handleGetLicence.bind(this);
     };
 
     /**
@@ -50,6 +51,13 @@ export default class ActivationReminder extends React.Component {
         return false;
     }
 
+    /**
+     *
+     */
+    handleGetLicence() {
+        window.open( this.props.buy_plugin_url );
+    }
+
     /**
      * @returns {JSX.Element}
      */
@@ -69,18 +77,39 @@ export default class ActivationReminder extends React.Component {
                         <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/>
+                        <Row className={"header"}>
+                            <Col>
+                                <h1>Activate {this.props.plugin_title} License</h1>
+                                <h2>We've noticed that you haven't activated the license for the {this.props.plugin_title} plugin.</h2>
+                            </Col>
+                        </Row>
+                        <Row className={"benefits"}>
+                            <Col>
+                                <strong>With a valid license you get:</strong>
+                                <ul>
+                                    <li>premium support</li>
+                                    <li>new features</li>
+                                    <li>safety updates</li>
+                                    <li>plugin from a safe source, with verified code and without any malware</li>
+                                </ul>
+                                In addition you'll support WordPress and WooCommerce community.<br/>
+                                <a target="_blank" href="https://wpde.sk/fs-license">Learn more about benefits of having an active license key →</a>
+                            </Col>
+                        </Row>
+                        <Row className={"get-licence"}>
+                            <Col>
+                                <Button variant="primary" onClick={this.handleGetLicence}>
+                                    Get your licence!
+                                </Button>
+                            </Col>
+                        </Row>
+                        <Row className={"activation"}>
+                            <Col>
+                                Already have a license key? <a target="_top" href={this.props.subscriptions_url}>Activate it!</a>
+                            </Col>
+                        </Row>
                     </Container>
                 </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>
-                        Close
-                    </Button>
-                </Modal.Footer>
             </Modal>
         );
     }

assets-src/popup/scss/style.scss

@@ -96,6 +96,10 @@ span.wpdesk-activation-reminder {
     min-height: 100px;
   }
 
+  .container .row {
+    margin-top: 20px;
+  }
+
   @media (min-width: 992px) {
     .modal-lg {
       max-width: 570px;