diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx index 9adb522bb2..063af452f9 100644 --- a/assets/js/src/form_editor/store/selectors.jsx +++ b/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 diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx index af9199ff32..399e65e8e6 100644 --- a/assets/js/src/form_editor/store/store.jsx +++ b/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 = { diff --git a/lib/AdminPages/Pages/FormEditor.php b/lib/AdminPages/Pages/FormEditor.php index 2340c88d1c..253a195d4d 100644 --- a/lib/AdminPages/Pages/FormEditor.php +++ b/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(), diff --git a/lib/Settings/UserFlagsController.php b/lib/Settings/UserFlagsController.php index a2df5ffc41..137b900803 100644 --- a/lib/Settings/UserFlagsController.php +++ b/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, ]; diff --git a/plugin_repository/assets/form-editor/tutorial.mp4 b/plugin_repository/assets/form-editor/tutorial.mp4 new file mode 100644 index 0000000000..b117faf92d Binary files /dev/null and b/plugin_repository/assets/form-editor/tutorial.mp4 differ diff --git a/views/form/editor.html b/views/form/editor.html index 8a4288d483..7880d57eb2 100644 --- a/views/form/editor.html +++ b/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 %>