Display tutorial only to new users

[MAILPOET-3206]

assets/js/src/form_editor/components/tutorial.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Modal from 'common/modal/modal';
 import { useSelect, useDispatch } from '@wordpress/data';
+import MailPoet from 'mailpoet';
 
 export const Tutorial = () => {
   const url = useSelect(
@@ -17,6 +18,13 @@ export const Tutorial = () => {
     return null;
   }
 
+  const installedAtDate = new Date(MailPoet.installedAt);
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+  if (installedAtDate < sevenDaysAgo) {
+    return null; // only show to new users
+  }
+
   function onClose() {
     tutorialDismissed();
   }

assets/js/src/mailpoet.js

@@ -11,6 +11,7 @@ var MailPoet = {
   isWoocommerceActive: window.mailpoet_woocommerce_active,
   premiumActive: window.mailpoet_premium_active,
   subscribersLimit: window.mailpoet_subscribers_limit,
+  installedAt: window.mailpoet_installed_at,
   subscribersLimitReached: window.mailpoet_subscribers_limit_reached,
   subscribersCountTowardsLimit: window.mailpoet_premium_subscribers_count,
   hasPremiumSupport: window.mailpoet_has_premium_support,

lib/AdminPages/Pages/FormEditor.php

@@ -78,6 +78,7 @@ use MailPoet\Models\Segment;
 use MailPoet\Router\Endpoints\FormPreview;
 use MailPoet\Router\Router;
 use MailPoet\Settings\Pages;
+use MailPoet\Settings\SettingsController;
 use MailPoet\Settings\UserFlagsController;
 use MailPoet\WP\Functions as WPFunctions;
 
@@ -112,6 +113,9 @@ class FormEditor {
   /** @var UserFlagsController */
   private $userFlags;
 
+  /** @var SettingsController */
+  private $settings;
+
   private $activeTemplates = [
     FormEntity::DISPLAY_TYPE_POPUP => [
       Template1Popup::ID,
@@ -195,6 +199,7 @@ class FormEditor {
     FormFactory $formsFactory,
     Localizer $localizer,
     UserFlagsController $userFlags,
+    SettingsController $settings,
     TemplateRepository $templateRepository
   ) {
     $this->pageRenderer = $pageRenderer;
@@ -207,6 +212,7 @@ class FormEditor {
     $this->localizer = $localizer;
     $this->templatesRepository = $templateRepository;
     $this->userFlags = $userFlags;
+    $this->settings = $settings;
   }
 
   public function render() {
@@ -251,6 +257,7 @@ class FormEditor {
       'products' => $this->getWooCommerceProducts(),
       'product_categories' => $this->getWooCommerceCategories(),
       'product_tags' => $this->getWooCommerceTags(),
+      'installed_at' => $this->settings->get('installed_at'),
     ];
     $this->wp->wpEnqueueMedia();
     $this->pageRenderer->displayPage('form/editor.html', $data);

views/form/editor.html

@@ -41,6 +41,7 @@
   var mailpoet_close_icons_url = '<%= image_url("form_close_icon") %>';
   var mailpoet_tutorial_seen = '<%= editor_tutorial_seen %>';
   var mailpoet_tutorial_url = '<%= cdn_url('form-editor/tutorial.mp4') %>';
+  var mailpoet_installed_at = '<%= installed_at %>';
   <% endautoescape %>
 </script>