Initial commit

.babelrc

@@ -0,0 +1,21 @@
+{
+	"presets": [
+		[ "env", {
+			"modules": false,
+			"targets": {
+				"browsers": [
+					"last 2 Chrome versions",
+					"last 2 Firefox versions",
+					"last 2 Safari versions",
+					"last 2 iOS versions",
+					"last 1 Android version",
+					"last 1 ChromeAndroid version",
+					"ie 11"
+				]
+			}
+		} ]
+	],
+	"plugins": [
+		[ "transform-react-jsx", {} ]
+	]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1 @@
+# newsletter-signup-form-for-sharpspring

dist/index.css

@@ -0,0 +1,113 @@
+#relative-newsletter-signup {
+	position: fixed;
+	background: rgba(255, 255, 255, 0.68);
+	display: none;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right:0;
+	text-align:center;
+	z-index:2001;
+}
+
+.relative-newsletter-modal {
+	display:flex;
+	max-width:750px;
+	border-radius: 10px 0 0 10px;
+    box-shadow: 4px 9px 20px -4px rgba(0,0,0,0.3);
+	overflow: hidden;
+
+}
+
+.relative-newsletter-modal__section {
+	background: #ffffff;
+	position: relative;
+	display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.relative-newsletter-modal__section:first-of-type {
+	width: 40%;
+}
+
+.relative-newsletter-modal__section:last-of-type {
+	width: 60%;
+	padding: 0px 40px;
+	padding-bottom: 20px;
+}
+
+.relative-newsletter-modal__form,
+.relative-newsletter-modal__label {
+	display:flex;
+	flex-direction: column;
+}
+
+.relative-newsletter-modal__input,
+.relative-newsletter-modal__btn {
+	padding: 10px;
+}
+
+.relative-newsletter-modal__btn,
+.relative-newsletter-modal__btn--close:hover {
+	background: #263994;
+	color: #ffffff;
+}
+
+.relative-newsletter-modal__btn:hover,
+.relative-newsletter-modal__btn--close,
+.relative-newsletter-modal__label-text,
+.relative-newsletter-modal__heading.h3,
+h3.relative-newsletter-modal__heading {
+	background: #ffffff;
+	color: #263994;
+}
+
+.relative-newsletter-modal__btn {
+	border: 1px solid #263994;
+	text-transform: uppercase;
+	letter-spacing: 0.1rem;
+	cursor: pointer;
+
+	transition: 0.5s all ease-in-out;
+}
+
+.relative-newsletter-modal__btn--close {
+	position: absolute;
+	top:0;
+    right: 0;
+    padding: 5px;
+    margin: 10px;
+    width: 30px;
+    height: 30px;
+	line-height: 20px;
+}
+
+.relative-newsletter__copy h2 {
+	margin-top: 1.5rem !important;
+}
+
+.relative-newsletter-modal__label-text {
+	font-weight: 900;
+	font-size: 1.2rem;
+	text-align: left;
+}
+
+@media screen and (max-width: 750px) {
+	.relative-newsletter-modal {
+		margin:10px;
+	}
+
+	.relative-newsletter-modal__section:first-of-type {
+		display: none;
+	}
+
+	.relative-newsletter-modal__section:last-of-type {
+		width: 100%;
+		min-height: 500px;
+		padding-top: 10px;
+		padding-bottom: 10px; 
+	}
+}

inc/class-options-page.php

@@ -0,0 +1,168 @@
+<?php
+/**
+ * Class OptionsPage
+ *
+ * Creates an options page that allows the user to enter their sharpsprings secret and other info
+ */
+
+namespace RelativeMarketing\Newsletter;
+
+class Options_Page {
+	/**
+	 * Static property to hold our singleton instance
+	 *
+	 * @var bool
+	 */
+	static protected $instance = false;
+
+	/**
+	 * constructor.
+	 */
+	private function __construct() {
+		$this->start();
+	}
+
+	protected function start() {
+		add_action( 'admin_menu', [ $this, 'add_admin_menu_item' ] );
+		add_action( 'admin_init', [ $this, 'display_theme_panel_fields' ] );
+	}
+
+	/**
+	 * Adds a sub menu page 
+	 */
+	public function add_admin_menu_item() {
+		add_submenu_page( 'options-general.php', 'Relative newsletter', 'Relative newsletter', 'manage_options', 'relative-newsletter', [ $this, 'option_page_callback' ] );
+	}
+
+	/**
+	 * The main option page content
+	 */
+	public function option_page_callback() {
+		if ( ! current_user_can( 'manage_options' ) ) {
+			wp_die( __( 'You do not have sufficient permissions to access this page' ) );
+		}
+		?>
+		<div class="wrap">
+			<form action='options.php' method='post'>
+				<?php
+				settings_fields( 'section' );
+				?>
+				<h1>Relative Newsletter</h1>
+				<p>Please add the relevant information for the newsletter popup</p>
+				<?php
+				do_settings_sections( 'relative-newsletter-options' );
+				submit_button();
+				?>
+			</form>
+		</div>
+		<?php
+	}
+
+	/**
+	 * The field that accepts the GTM ID
+	 */
+	public function display_theme_panel_fields() {
+		add_settings_section( 'section', 'Newsletter settings', null, 'relative-newsletter-options' );
+
+		$fields = [
+			['key' => 'ss_api_key', 'heading' => 'Your sharpspring api key', 'callback' => 'display_api_input'],
+			['key' => 'ss_secret_key', 'heading' => 'Your sharpspring secret key', 'callback' => 'display_secret_input'],
+			['key' => 'ss_campaign_id', 'heading' => 'Your sharpspring campaign id', 'callback' => 'display_campaign_id_input'],
+			['key' => 'relative_newsletter_heading', 'heading' => 'Newsletter Heading' , 'callback' => 'display_heading_input'],
+			['key' => 'relative_newsletter_paragraph', 'heading' => 'Newsletter paragraph' , 'callback' => 'display_paragraph_input'],
+			['key' => 'relative_newsletter_error_heading', 'heading' => 'Error Heading' , 'callback' => 'display_error_heading_input'],
+			['key' => 'relative_newsletter_error_message', 'heading' => 'Error message' , 'callback' => 'display_error_message_input'],
+			['key' => 'relative_newsletter_success_heading', 'heading' => 'Success Heading' , 'callback' => 'display_success_heading_input'],
+			['key' => 'relative_newsletter_success_message', 'heading' => 'Success message' , 'callback' => 'display_success_message_input'],
+			['key' => 'relative_newsletter_img_x1', 'heading' => 'Image @1x resolution' , 'callback' => 'display_img_1x_input'],
+			['key' => 'relative_newsletter_img_x2', 'heading' => 'Image @2x resolution' , 'callback' => 'display_img_2x_input'],
+			['key' => 'relative_newsletter_img_x3', 'heading' => 'Image @3x resolution' , 'callback' => 'display_img_3x_input'],
+			['key' => 'relative_newsletter_img_alt', 'heading' => 'Image alt' , 'callback' => 'display_img_alt_input'],
+			['key' => 'relative_newsletter_popup_delay', 'heading' => 'Popup Delay' , 'callback' => 'display_popup_delay_input'],
+
+		];
+
+		foreach ($fields as $field) {
+			add_settings_field( $field['key'], $field['heading'], [ $this, $field['callback'] ], 'relative-newsletter-options', 'section' );
+			register_setting( 'section', $field['key'] );
+		}
+
+	}
+
+	public function add_input( $option ) {
+		echo sprintf( '<input name="%s" id="%1$s" value="%2$s" />', $option, sanitize_text_field( get_option( $option ) ) );
+	}
+
+	public function display_campaign_id_input() {
+		$this->add_input( 'ss_campaign_id' );
+	}
+
+	public function display_popup_delay_input() {
+		$this->add_input( 'relative_newsletter_popup_delay' );
+	}
+
+	public function display_img_alt_input() {
+		$this->add_input( 'relative_newsletter_img_alt' );
+	}
+
+	public function display_img_1x_input() {
+		$this->add_input( 'relative_newsletter_img_x1' );
+	}
+	public function display_img_2x_input() {
+		$this->add_input( 'relative_newsletter_img_x2' );
+	}
+	public function display_img_3x_input() {
+		$this->add_input( 'relative_newsletter_img_x3' );
+	}
+
+	public function display_success_message_input() {
+		$this->add_input( 'relative_newsletter_success_message' );
+	}
+
+	public function display_success_heading_input() {
+		$this->add_input( 'relative_newsletter_success_heading' );
+	}
+
+	public function display_error_message_input() {
+		$this->add_input( 'relative_newsletter_error_message' );
+	}
+
+	public function display_error_heading_input() {
+		$this->add_input( 'relative_newsletter_error_heading' );
+	}
+
+	public function display_paragraph_input() {
+		$this->add_input( 'relative_newsletter_paragraph' );
+	}
+
+	public function display_heading_input() {
+		$this->add_input( 'relative_newsletter_heading' );
+	}
+
+	/**
+	 * The form input for the secret key
+	 */
+	public function display_secret_input() {
+		$this->add_input( 'ss_secret_key' );
+	}
+
+	/**
+	 * The form input
+	 */
+	public function display_api_input() {
+		$this->add_input( 'ss_api_key' );
+	}
+
+	/**
+	 * If an instance exists , this returns it. If not it creates one and then returns it.
+	 *
+	 * @return Options_Page
+	 */
+
+	public static function get_instance() {
+		if ( ! self::$instance ) {
+			self::$instance = new self();
+		}
+		return self::$instance;
+	}
+}