Add data about form editor tutorial into store

[MAILPOET-3206]

assets/js/src/form_editor/store/selectors.jsx

@@ -174,6 +174,12 @@ export default {
   getAllWooCommerceTags(state) {
     return state.allWooCommerceTags;
   },
+  getTutorialSeen(state) {
+    return state.tutorialSeen;
+  },
+  getTutorialUrl(state) {
+    return state.tutorialUrl;
+  },
   /**
    * Goes thru all parents of the block and return
    * the attribute value from the closest parent which has the attribute defined

assets/js/src/form_editor/store/store.jsx

@@ -84,6 +84,8 @@ export default () => {
     allWooCommerceProducts: window.mailpoet_woocommerce_products,
     allWooCommerceCategories: window.mailpoet_woocommerce_categories,
     allWooCommerceTags: window.mailpoet_woocommerce_tags,
+    tutorialSeen: window.mailpoet_tutorial_seen,
+    tutorialUrl: window.mailpoet_tutorial_url,
   };
 
   const config = {

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\UserFlagsController;
 use MailPoet\WP\Functions as WPFunctions;
 
 class FormEditor {
@@ -108,6 +109,9 @@ class FormEditor {
   /** @var TemplateRepository */
   private $templatesRepository;
 
+  /** @var UserFlagsController */
+  private $userFlags;
+
   private $activeTemplates = [
     FormEntity::DISPLAY_TYPE_POPUP => [
       Template1Popup::ID,
@@ -190,6 +194,7 @@ class FormEditor {
     WPFunctions $wp,
     FormFactory $formsFactory,
     Localizer $localizer,
+    UserFlagsController $userFlags,
     TemplateRepository $templateRepository
   ) {
     $this->pageRenderer = $pageRenderer;
@@ -201,6 +206,7 @@ class FormEditor {
     $this->formsFactory = $formsFactory;
     $this->localizer = $localizer;
     $this->templatesRepository = $templateRepository;
+    $this->userFlags = $userFlags;
   }
 
   public function render() {
@@ -234,6 +240,7 @@ class FormEditor {
       'month_names' => $this->dateBlock->getMonthNames(),
       'sub_menu' => 'mailpoet-forms',
       'custom_fields' => $this->customFieldsResponseBuilder->buildBatch($customFields),
+      'editor_tutorial_seen' => $this->userFlags->get('form_editor_tutorial_seen'),
       'preview_page_url' => $this->getPreviewPageUrl(),
       'custom_fonts' => CustomFonts::FONTS,
       'translations' => $this->getGutenbergScriptsTranslations(),

lib/Settings/UserFlagsController.php

@@ -20,6 +20,7 @@ class UserFlagsController {
     $this->defaults = [
       'last_announcement_seen' => false,
       'editor_tutorial_seen' => false,
+      'form_editor_tutorial_seen' => false,
       'display_new_form_editor_nps_survey' => false,
       'transactional_emails_opt_in_notice_dismissed' => false,
     ];

views/form/editor.html

@@ -39,6 +39,8 @@
   var mailpoet_woocommerce_categories = <%= json_encode(product_categories) %>;
   var mailpoet_woocommerce_tags = <%= json_encode(product_tags) %>;
   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') %>';
   <% endautoescape %>
 </script>