Feature/intercom

assets/js/modules/adminDashboard.js

@@ -1,13 +1,42 @@
+const copy = require('clipboard-copy');
+const swal = require('sweetalert2');
+
 export function shifter_dashboard_widget() {
   jQuery(document).ready(
     function($) {
-      $("#shifter-support-diag-styled").show();
-      $("#shifter-support-diag-text-target").hide();
 
-      $("#shifter-support-diag-change-view").on("click", function(e) {
+      $("#shifter-support-diag-copy").on("click", function(e) {
+
         e.preventDefault();
-        $("#shifter-support-diag-styled-target").toggle();
-        $("#shifter-support-diag-text-target").toggle();
+
+        function CreateIntercomReport() {
+          Intercom('showNewMessage', $('#shifter-debug-meta').html());
+        }
+
+        let system_report = $('#shifter-debug-meta').text();
+
+        swal({
+          title: 'Shifter System Report',
+          text: 'Send report to Shifter or copy to your clipboard',
+          type: 'info',
+          showCancelButton: true,
+          confirmButtonColor: '#bc4e9c',
+          cancelButtonColor: '#333',
+          confirmButtonText: 'Send to Shifter',
+          cancelButtonText: 'Copy to Clipboard',
+        }).then((result) => {
+          if (result.value) {
+            CreateIntercomReport();
+          } else if (result.dismiss === swal.DismissReason.cancel) {
+            copy($('#shifter-debug-meta').text());
+            swal(
+              'Copied to Clipboard!',
+              "Share this report in the <a href='https://support.getshifte.io'>support chat</a> or by email at <a href='mailto:support@getshifter.io'>support@getshifter.io</a>",
+              'success'
+            )
+          }
+        })
+
       });
     }
   );

assets/js/modules/commonScripts.js

@@ -9,12 +9,12 @@
  * `finalize()` function of `common` in app.js.
  *
  */
-const shifter_dashboard_widget = require('./adminDashboard');
+const { shifter_dashboard_widget } = require('./adminDashboard');
 const { terminate_app, generate_artifact } = require('./shifterControllers');
 
 // This function will fire on init() in app.js
 export function commonInit() {
-  shifter_dashboard_widget;
+  shifter_dashboard_widget();
   terminate_app();
   generate_artifact();
 }

assets/sass/main/main.scss

@@ -29,6 +29,7 @@ th.shifter-diag, td.shifter-diag {
 tr.shifter-diag {
   background-color: $purple;
   color: white;
+  padding: 4px;
 }
 
 td.shifter-support-version {
@@ -46,3 +47,25 @@ td.shifter-support-version {
 .disable_shifter_operation {
   color: lightgray;
 }
+
+.system-report-nav {
+  margin-bottom: 10px;
+}
+
+.shifter-debug-meta {
+  display: none;
+  overflow: hidden;
+  height: 0;
+}
+
+.shifter-support-diag {
+  table {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  pre {
+    overflow: scroll;
+    padding: 8px;
+  }
+}

diag/diag.php

@@ -6,13 +6,28 @@ function link_to($url) {
 }
 ?>
 
-<nav>
-  <a href="#shifter-support-diag" id="shifter-support-diag-change-view">Change View</a>
+<div class="shifter-diag-wrap">
+
+<nav class="system-report-nav">
+  <a href="#" id="shifter-support-diag-copy" class="button">Create System Report</a>
 </nav>
 
+<div aria-hidden="true" id="shifter-debug-meta" class="shifter-debug-meta">
+  <?php // System Report Vars
+  $theme_data = (array) wp_get_theme();
+  $theme = wp_get_theme();
+  $plugins = (array) get_option("active_plugins");
+  $system_report = array_merge($theme_data, $plugins);
+  $system_report = json_encode($system_report);
+  echo $system_report; ?>
+</div>
+
 <div id="shifter-support-diag" class="shifter-support-diag">
   <div id="shifter-support-diag-styled-target">
-    <h2>Project ID: <?php echo $site_id ?></h2>
+    <?php if ($site_id) { ?>
+      <h2>Project ID</h2>
+      <pre><code><?php echo $site_id ?></code></pre>
+    <?php } ?>
     <h2>Theme</h2>
     <table>
       <thead>
@@ -23,8 +38,7 @@ function link_to($url) {
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <?php $theme = wp_get_theme() ?>
+        <tr class="shifter-diag__row">
           <td class="shifter-support-name"><?php echo $theme->get("Name"); ?></td>
           <td class="shifter-support-url"><?php echo link_to($theme->get("ThemeURI")); ?></td>
           <td class="shifter-support-version"><?php echo $theme->get("Version"); ?></td>
@@ -42,9 +56,8 @@ function link_to($url) {
         </tr>
       </thead>
       <tbody>
-        <?php $plugins = get_option("active_plugins"); ?>
         <?php foreach($plugins as $plugin) { ?>
-          <tr>
+          <tr class="shifter-diag__row">
             <?php $plugin_meta = get_plugin_data(WP_PLUGIN_DIR . "/" . $plugin); ?>
             <td class="shifter-support-name"><?php echo $plugin_meta['Name']; ?></td>
             <td class="shifter-support-url"><?php echo link_to($plugin_meta['PluginURI']); ?></td>
@@ -54,24 +67,6 @@ function link_to($url) {
       </tbody>
     </table>
   </div>
-  <div id="shifter-support-diag-text-target">
-    <p>Project ID: <?php echo $site_id ?></p>
-    <p>Theme</p>
-    <p>
-      name: <?php echo $theme->get("Name"); ?>,
-      URI: <?php echo link_to($theme->get("ThemeURI")); ?>,
-      Version: <?php echo $theme->get("Version"); ?><br />
-    </p>
-    <br />
-    <p>Activated Plugins</p>
-      <?php $plugins = get_option("active_plugins"); ?>
-      <?php foreach($plugins as $plugin) { ?>
-        <?php $plugin_meta = get_plugin_data(WP_PLUGIN_DIR . "/" . $plugin); ?>
-        name: <?php echo $plugin_meta['Name']; ?>,
-        URI: <?php echo link_to($plugin_meta['PluginURI']); ?>,
-        Version: <?php echo $plugin_meta['Version']; ?><br />
-      <?php } ?>
-      <br />
-      <br />
-  </div>
+</div>
+
 </div>

gulpfile.js

@@ -384,7 +384,7 @@ gulp.task('serve', ['build_css', 'watch_bundles'], function(){
   browsersync(opts);
 
   // Watch tasks
-  gulp.watch([assetPath.sass.enter + '/**/*.scss'], ['build_css']);
+  gulp.watch([assetPath.sass.enter], ['build_css']);
   gulp.watch([assetPath.fonts.enter], ['copy_fonts']);
   gulp.watch([assetPath.img.enter], ['build_images']);
   gulp.watch('**/*.php', ['watch_reload']);

package.json

@@ -59,6 +59,7 @@
     "yargs": "11.0.0"
   },
   "dependencies": {
+    "clipboard-copy": "^1.4.2",
     "jquery": "^3.1.1",
     "sweetalert2": "^7.11.0"
   },

shifter-support-plugin.php

@@ -19,47 +19,38 @@
 require("api/shifter_api.php");
 
 
-
 /*
- * Env + Asset Paths
- * If ./src path does not exist
- * build path ./dist will be used
+ * Check Env
+ * If ./src exists run as development
  */
 
-$asset_dir = '/src/';
-$shifter_js = 'js/app.js';
-$shifter_css = 'css/main.css';
-$asset_src_path = dirname(__FILE__) . $asset_dir;
-$plugin_dir = content_url('/mu-plugins/');
-$shifter_asset_path = $plugin_dir . basename(__DIR__) . $asset_dir;
-
-// Production Assets
-if (!realpath($asset_src_path)) {
-  $asset_dir = '/dist/';
+function shifter_support_env() {
+  $asset_dir = '/src/';
   $asset_src_path = dirname(__FILE__) . $asset_dir;
-  $shifter_asset_path = $plugin_dir . basename(__DIR__) . $asset_dir;
-  $shifter_js = 'js/app.min.js';
-
-  // Asset Manifest
-  $json = file_get_contents( $asset_src_path . '_rev-manifest.json' );
-  $manifest = json_decode( $json, true );
 
-  // CSS Rev Filename
-  $shifter_css = $manifest['css/main.min.css'];
+  if (realpath($asset_src_path)) {
+    return 'development';
+  } else {
+    return 'production';
+  }
 }
 
-define('SHIFTER_JS', $shifter_asset_path . $shifter_js);
-define('SHIFTER_CSS', $shifter_asset_path . $shifter_css);
-
-
-
 /*
  * CSS Styles
  * Admin and Front-End
  */
 
 function add_shifter_support_css() {
-  wp_register_style("shifter-support", SHIFTER_CSS);
+
+  if (shifter_support_env() === 'development') {
+    $shifter_css = plugins_url( 'src/css/main.css', __FILE__ );
+  } else {
+    $json = file_get_contents( 'dist/_rev-manifest.json', __FILE__ );
+    $manifest = json_decode( $json, true );
+    $shifter_css = plugins_url('dist/' . $manifest['css/main.min.css'], __FILE__);
+  }
+
+  wp_register_style("shifter-support", $shifter_css);
   wp_enqueue_style("shifter-support");
 }
 
@@ -74,7 +65,13 @@ function add_shifter_support_css() {
  */
 
 function add_shifter_support_js() {
-  wp_register_script("shifter-js", SHIFTER_JS, array( 'jquery' ));
+  if (shifter_support_env() === 'development') {
+    $shifter_js = plugins_url( 'src/js/app.js', __FILE__ );
+  } else {
+    $shifter_js = plugins_url( 'dist/js/app.min.js', __FILE__ );
+  }
+
+  wp_register_script("shifter-js", $shifter_js, array( 'jquery' ));
   wp_localize_script( 'shifter-js', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
   wp_enqueue_script("shifter-js");
 }
@@ -135,15 +132,6 @@ function add_shifter_diag_contents() {
 }
 
 
-// add_action("admin_footer", "add_generator_call");
-// function add_generator_call() {
-//   $is_local = getenv("SHIFTER_LOCAL");
-//   if(!$is_local) {
-//     include ("generator/trigger.js.php");
-//   }
-// }
-
-
 add_action("wp_ajax_shifter_app_terminate", "shifter_app_terminate");
 function shifter_app_terminate() {
   $api = new Shifter;
@@ -156,3 +144,23 @@ function shifter_app_generate() {
   $api = new Shifter;
   return $api->generate_wp_app();
 }
+
+/*
+ * Add Intercom Support Widget
+ *
+ */
+
+add_action('admin_footer', 'intercom_support_widget', 999);
+
+function intercom_support_widget() {
+  $current_user = wp_get_current_user();
+
+  ?>
+  <script>
+    window.intercomSettings = {
+      app_id: 'w5yiaz2d',
+      email: '<?= $current_user->user_email ?>' // Email address
+    };
+    </script>
+  <script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/w5yiaz2d';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>
+<?php }