Bugfix for #3005 (#3025)

* Revert "Revert "UI groundwork: Conversions to Behaviors (#3005)" (#3024)"

This reverts commit dc0853b.

* Move ref back to LazyLoader container

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 ### Added
+- Call to action for tracking Goal Conversions and an option to hide the section from the dashboard
 - Add support for `with_imported=true` in Stats API aggregate endpoint
 - Ability to use '--' instead of '=' sign in the `tagged-events` classnames
 - 'Last updated X seconds ago' info to 'current visitors' tooltips

assets/js/dashboard/api.js

@@ -71,3 +71,11 @@ export function get(url, query={}, ...extraQuery) {
       return response.json()
     })
 }
+
+export function put(url, body) {
+  return fetch(url, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  })
+}

assets/js/dashboard/components/notice.js

@@ -0,0 +1,56 @@
+import React from "react"
+import { sectionTitles } from "../stats/behaviours"
+import * as api from '../api'
+
+export function FeatureSetupNotice({ site, feature, shortFeatureName, title, info, settingsLink, onHideAction }) {
+  const sectionTitle = sectionTitles[feature]
+
+  const requestHideSection = () => {
+    if (window.confirm(`Are you sure you want to hide ${sectionTitle}? You can make it visible again in your site settings later.`)) {
+      api.put(`/api/${encodeURIComponent(site.domain)}/disable-feature`, { feature: feature })
+        .then(response => {
+          if (response.ok) { onHideAction() }
+        })
+    }
+  }
+
+  function setupButton() {
+    return (
+      <a href={settingsLink} className="ml-2 sm:ml-4 button px-2 sm:px-4">
+        <p className="flex flex-col justify-center text-xs sm:text-sm">Set up {shortFeatureName}</p>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="ml-2 w-5 h-5">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
+        </svg>
+      </a>
+    )
+  }
+
+  function hideButton() {
+    return (
+      <button
+        onClick={requestHideSection}
+        className="inline-block px-2 sm:px-4 py-2 border border-gray-300 dark:border-gray-500 leading-5 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+        Hide this report
+      </button>
+    )
+  }
+
+  return (
+    <div className="sm:mx-32 mt-6 mb-3" >
+      <div className="py-3">
+        <div className="text-center mt-2 text-gray-800 dark:text-gray-200">
+          {title}
+        </div>
+
+        <div className="text-justify mt-4 font-small text-sm text-gray-500 dark:text-gray-200">
+          {info}
+        </div>
+
+        <div className="text-xs sm:text-sm flex my-6 justify-center">
+          {hideButton()}
+          {setupButton()}
+        </div>
+      </div>
+    </div>
+  )
+}

assets/js/dashboard/historical.js

@@ -9,25 +9,13 @@ import Sources from './stats/sources'
 import Pages from './stats/pages'
 import Locations from './stats/locations';
 import Devices from './stats/devices'
-import Conversions from './stats/conversions'
+import Behaviours from './stats/behaviours'
 import ComparisonInput from './comparison-input'
 import { withPinnedHeader } from './pinned-header-hoc';
 
 function Historical(props) {
   const tooltipBoundary = React.useRef(null)
 
-  function renderConversions() {
-    if (props.site.hasGoals) {
-      return (
-        <div className="items-start justify-between block w-full mt-6 md:flex">
-          <Conversions site={props.site} query={props.query} />
-        </div>
-      )
-    }
-
-    return null
-  }
-
   return (
     <div className="mb-12">
       <div id="stats-container-top"></div>
@@ -51,7 +39,7 @@ function Historical(props) {
         <Locations site={props.site} query={props.query} />
         <Devices site={props.site} query={props.query} />
       </div>
-      { renderConversions() }
+      <Behaviours site={props.site} query={props.query} currentUserRole={props.currentUserRole} />
     </div>
   )
 }

assets/js/dashboard/mount.js

@@ -16,6 +16,10 @@ if (container) {
     domain: container.dataset.domain,
     offset: container.dataset.offset,
     hasGoals: container.dataset.hasGoals === 'true',
+    conversionsEnabled: container.dataset.conversionsEnabled === 'true',
+    funnelsEnabled: container.dataset.funnelsEnabled === 'true',
+    propsEnabled: container.dataset.propsEnabled === 'true',
+    funnels: JSON.parse(container.dataset.funnels),
     statsBegin: container.dataset.statsBegin,
     nativeStatsBegin: container.dataset.nativeStatsBegin,
     embedded: container.dataset.embedded,

assets/js/dashboard/realtime.js

@@ -8,22 +8,10 @@ import Sources from './stats/sources'
 import Pages from './stats/pages'
 import Locations from './stats/locations'
 import Devices from './stats/devices'
-import Conversions from './stats/conversions'
+import Behaviours from './stats/behaviours'
 import { withPinnedHeader } from './pinned-header-hoc';
 
 class Realtime extends React.Component {
-  renderConversions() {
-    if (this.props.site.hasGoals) {
-      return (
-        <div className="items-start justify-between block w-full mt-6 md:flex">
-          <Conversions site={this.props.site} query={this.props.query} title="Goal Conversions (last 30 min)" />
-        </div>
-      )
-    }
-
-    return null
-  }
-
   render() {
     const navClass = this.props.site.embedded ? 'relative' : 'sticky'
 
@@ -48,8 +36,7 @@ class Realtime extends React.Component {
           <Locations site={this.props.site} query={this.props.query} />
           <Devices site={this.props.site} query={this.props.query} />
         </div>
-
-        { this.renderConversions() }
+        <Behaviours site={this.props.site} query={this.props.query} currentUserRole={this.props.currentUserRole} />
       </div>
     )
   }

assets/js/dashboard/stats/conversions/index.js → assets/js/dashboard/stats/behaviours/conversions.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom'
 import FlipMove from 'react-flip-move'
 
-
 import Bar from '../bar'
 import PropBreakdown from './prop-breakdown'
 import numberFormatter from '../../util/number-formatter'
@@ -51,7 +50,7 @@ export default class Conversions extends React.Component {
   componentDidUpdate(prevProps) {
     if (this.props.query !== prevProps.query) {
       const height = this.htmlNode.current.element.offsetHeight
-      this.setState({loading: true, goals: null, prevHeight: height})
+      this.setState({ loading: true, goals: null, prevHeight: height })
       this.fetchConversions()
     }
   }
@@ -63,7 +62,7 @@ export default class Conversions extends React.Component {
 
   fetchConversions() {
     api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/conversions`, this.props.query)
-      .then((res) => this.setState({loading: false, goals: res, prevHeight: null}))
+      .then((res) => this.setState({ loading: false, goals: res, prevHeight: null }))
   }
 
   renderGoal(goal) {
@@ -88,7 +87,7 @@ export default class Conversions extends React.Component {
             <span className="inline-block w-20 font-medium text-right">{goal.conversion_rate}%</span>
           </div>
         </div>
-        { renderProps && <PropBreakdown site={this.props.site} query={this.props.query} goal={goal} /> }
+        {renderProps && <PropBreakdown site={this.props.site} query={this.props.query} goal={goal} />}
       </div>
     )
   }
@@ -100,7 +99,6 @@ export default class Conversions extends React.Component {
     } else if (this.state.goals) {
       return (
         <React.Fragment>
-          <h3 className="font-bold dark:text-gray-100">{this.props.title || "Goal Conversions"}</h3>
           <div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
             <span>Goal</span>
             <div className="text-right">
@@ -110,18 +108,26 @@ export default class Conversions extends React.Component {
             </div>
           </div>
           <FlipMove>
-            { this.state.goals.map(this.renderGoal.bind(this)) }
+            {this.state.goals.map(this.renderGoal.bind(this))}
           </FlipMove>
         </React.Fragment>
       )
     }
   }
 
-  render() {
+  renderConversions() {
     return (
-      <LazyLoader className="w-full p-4 bg-white rounded shadow-xl dark:bg-gray-825" style={{minHeight: '132px', height: this.state.prevHeight ?? 'auto'}} onVisible={this.onVisible} ref={this.htmlNode}>
-        { this.renderInner() }
+      <LazyLoader ref={this.htmlNode} style={{ minHeight: '132px', height: this.state.prevHeight ?? 'auto' }} onVisible={this.onVisible}>
+        {this.renderInner()}
       </LazyLoader>
     )
   }
+
+  render() {
+    return (
+      <div>
+        {this.renderConversions()}
+      </div>
+    )
+  }
 }

assets/js/dashboard/stats/behaviours/funnel.js

@@ -0,0 +1,4 @@
+export default function Funnel(_props) {
+	// TODO	
+	return null
+}