Add success page styles

omnisend · Jan 23, 2024 · b962b60 · b962b60
1 parent a205189
commit b962b60
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 6 deletions.
diff --git a/omnisend/module/assets/img/omnisend-logo.svg b/omnisend/module/assets/img/omnisend-logo.svg
diff --git a/omnisend/module/class-omnisend-core-connection.php b/omnisend/module/class-omnisend-core-connection.php
@@ -16,6 +16,8 @@ public static function display() {
 			check_admin_referer( 'connect' );
 			$api_key  = sanitize_text_field( wp_unslash( $_POST['api_key'] ) );
 			$brand_id = self::get_brand_id( $api_key );
+
+
 			if ( $brand_id ) {
 				// Set credentials so snippet can be added for snippet verification.
 				Omnisend_Core_Options::set_api_key( $api_key );
@@ -34,7 +36,7 @@ public static function display() {
 		}
 
 		if ( $connected ) {
-			echo 'You are connected to Omnisend!';
+			require_once 'view/connection-success.php';
 			return;
 		}
 

diff --git a/omnisend/module/styles/styles.css b/omnisend/module/styles/styles.css
@@ -116,6 +116,7 @@
   display: flex;
 }
 
+
 .omnisend-row-input-button {
   box-sizing: border-box;
   display: flex;
@@ -158,6 +159,36 @@
   width: fit-content;
 }
 
+.omnisend-link-button {
+  background: none;
+  font: inherit;
+  align-items: center;
+  border-radius: 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-wrap: nowrap;
+  font-family: Roboto;
+  font-size: 14px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: 400;
+  gap: 8px;
+  height: 40px;
+  justify-content: center;
+  letter-spacing: normal;
+  line-height: 24px;
+  outline: none;
+  padding: 8px 16px;
+  position: relative;
+  text-decoration: none;
+  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+  white-space: nowrap;
+  border: 1px solid #35938f;
+  color: #35938f;
+  width: fit-content;
+}
+
 .omnisend-step-number {
   align-items: center;
   background: #35938f;
@@ -222,7 +253,7 @@
   padding: 0;
 }
 
-.omnisend-form-submit-button {
+.omnisend-form-button-primary{
   background: none;
   font: inherit;
   align-items: center;
@@ -274,7 +305,7 @@
   vertical-align: middle;
 }
 
-.omnisend-connect-form {
+.omnisend-connect {
   margin-top: 70px;
   margin-left: 70px;
   margin-right: 70px;

diff --git a/omnisend/module/view/connection-form.html b/omnisend/module/view/connection-form.html
@@ -1,5 +1,6 @@
-<div class="omnisend-connect-form">
+<div class="omnisend-connect">
   <form method="post">
+    <?php wp_nonce_field('connect'); ?>
     <div class="omnisend-spacing-mb-8">
       <div class="omnisend-icon-wrapper">
         <svg
@@ -136,14 +137,15 @@ <h3 class="omnisend-h3">Steps to connect to Omnisend:</h3>
               </div>
               <div class="omnisend-form-field-button">
                 <button
+                  type="submit"
                   value="Connect to Omnisend"
-                  class="omnisend-form-submit-button"
+                  class="omnisend-form-button-primary"
                 >
                   Connect Omnisend
                 </button>
               </div>
             </div>
-          </div>
+          </div>`
         </div>
       </div>
     </div>

diff --git a/omnisend/module/view/connection-success.php b/omnisend/module/view/connection-success.php
@@ -0,0 +1,16 @@
+<div class="omnisend-connect">
+    <div class="omnisend-logo">
+        <img src="<?php echo plugins_url('omnisend/module/assets/img/omnisend-logo.svg'); ?>" border="0" />
+    </div>
+    <div class="omnisend-spacing-mv-8 ">
+        <h2 class="omnisend-h2">You are connected to Omnisend!</h2>
+    </div>
+    <p class="omnisend-paragraph-14">
+        Head to Omnisend to continue with collecting subscribers through forms, segmenting and targeting your customers and designing email campaigns.
+    </p>
+    <div class="omnisend-spacing-mt-4">
+        <a class="omnisend-link-button omnisend-form-button-primary" target="_blank" href="https://app.omnisend.com/">
+            Go to Omnisend
+        </a>
+    </div>
+</div>