Ticket #4705 - Intergrate Grapesjs in Email Templates.

modules/boonex/english/data/langs/system/en.xml

@@ -1120,6 +1120,7 @@
     <string name="_adm_lmi_cpt_downloaded"><![CDATA[Downloaded]]></string>
     <string name="_adm_lmi_cpt_etemplates"><![CDATA[Emails]]></string>
     <string name="_adm_lmi_cpt_etemplates_hf"><![CDATA[Email Template]]></string>
+    <string name="_adm_lmi_cpt_etemplates_creative"><![CDATA[Email Template]]></string>
     <string name="_adm_lmi_cpt_featured"><![CDATA[Featured]]></string>
     <string name="_adm_lmi_cpt_fields"><![CDATA[Fields]]></string>
     <string name="_adm_lmi_cpt_files"><![CDATA[Files]]></string>
@@ -1360,6 +1361,7 @@
 	<string name="_adm_pgt_txt_nkp_key_name"><![CDATA[Key Name]]></string>
 	<string name="_adm_pgt_txt_nkp_module"><![CDATA[Module]]></string>
 	<string name="_adm_pgt_txt_text"><![CDATA[Text]]></string>
+        <string name="_adm_pgt_txt_et_c_content"><![CDATA[Message itself will be here.]]></string>
 	<string name="_adm_pgt_txt_et_hf_inf"><![CDATA[Note, that improper use of HTML may break the email message's layout. Also make sure that {unsubscribe} marker presents in at least one of the templates (header and/or footer).]]></string>
 	<string name="_adm_pgt_btn_et_hf_submit"><![CDATA[Submit]]></string>
 	<string name="_adm_pgt_scs_et_hf_save"><![CDATA[The changes were successfully saved.]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -1103,6 +1103,7 @@
 	<string name="_adm_lmi_cpt_downloaded"><![CDATA[Скачано]]></string>
 	<string name="_adm_lmi_cpt_etemplates"><![CDATA[Email-ы]]></string>
 	<string name="_adm_lmi_cpt_etemplates_hf"><![CDATA[Email-шаблон]]></string>
+        <string name="_adm_lmi_cpt_etemplates_creative"><![CDATA[Email-шаблон]]></string>
 	<string name="_adm_lmi_cpt_featured"><![CDATA[Продвинутые]]></string>
 	<string name="_adm_lmi_cpt_fields"><![CDATA[Поля]]></string>
 	<string name="_adm_lmi_cpt_files"><![CDATA[Файлы]]></string>
@@ -1342,11 +1343,12 @@
 	<string name="_adm_pgt_txt_nkp_key_name"><![CDATA[Имя ключа]]></string>
 	<string name="_adm_pgt_txt_nkp_module"><![CDATA[Модуль]]></string>
 	<string name="_adm_pgt_txt_text"><![CDATA[Текст]]></string>
-    <string name="_adm_pgt_txt_et_hf_inf"><![CDATA[Внимание. Неправильное применение HTML может повредить дизайн email сообщения. Также убедитесь в том, что маркер {unsubscribe} присутствует хотя бы в одном из темплейтов (заголовок и/или основание).]]></string>
-    <string name="_adm_pgt_btn_et_hf_submit"><![CDATA[Выполнить]]></string>
-    <string name="_adm_pgt_scs_et_hf_save"><![CDATA[Изменения сохранены.]]></string>
-    <string name="_adm_pgt_err_et_hf_save"><![CDATA[Невозможно сохранить изменения.]]></string>
-    <string name="_adm_pgt_err_et_hf_save_unsubscribe"><![CDATA[Невозможно сохранить изменения, так как маркер {unsubscribe} был удален из темплейтов заголовка и основания одновременно.]]></string>
+        <string name="_adm_pgt_txt_et_c_content"><![CDATA[Само сообщение будет здесь.]]></string>
+        <string name="_adm_pgt_txt_et_hf_inf"><![CDATA[Внимание. Неправильное применение HTML может повредить дизайн email сообщения. Также убедитесь в том, что маркер {unsubscribe} присутствует хотя бы в одном из темплейтов (заголовок и/или основание).]]></string>
+        <string name="_adm_pgt_btn_et_hf_submit"><![CDATA[Выполнить]]></string>
+        <string name="_adm_pgt_scs_et_hf_save"><![CDATA[Изменения сохранены.]]></string>
+        <string name="_adm_pgt_err_et_hf_save"><![CDATA[Невозможно сохранить изменения.]]></string>
+        <string name="_adm_pgt_err_et_hf_save_unsubscribe"><![CDATA[Невозможно сохранить изменения, так как маркер {unsubscribe} был удален из темплейтов заголовка и основания одновременно.]]></string>
 	<string name="_adm_prm_btn_actions_cancel"><![CDATA[Отменить]]></string>
 	<string name="_adm_prm_btn_actions_options"><![CDATA[Редактировать опции]]></string>
 	<string name="_adm_prm_btn_actions_save"><![CDATA[Сохранить]]></string>

studio/classes/BxDolStudioPolyglot.php

@@ -11,6 +11,7 @@ define('BX_DOL_STUDIO_PGT_TYPE_SETTINGS', 'settings');
 define('BX_DOL_STUDIO_PGT_TYPE_KEYS', 'keys');
 define('BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES', 'etemplates');
 define('BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_HF', 'etemplates_hf');
+define('BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_CREATIVE', 'etemplates_creative');
 
 define('BX_DOL_STUDIO_PGT_TYPE_DEFAULT', BX_DOL_STUDIO_PGT_TYPE_SETTINGS);
 
@@ -18,6 +19,8 @@ class BxDolStudioPolyglot extends BxTemplStudioWidget
 {
     protected $sPage;
 
+    protected $sEtcContent;
+
     function __construct($sPage = "")
     {
         parent::__construct('polyglot');
@@ -27,6 +30,8 @@ class BxDolStudioPolyglot extends BxTemplStudioWidget
         $this->sPage = BX_DOL_STUDIO_PGT_TYPE_DEFAULT;
         if(is_string($sPage) && !empty($sPage))
             $this->sPage = $sPage;
+
+        $this->sEtcContent = '<pre id="etc_content">' . _t('_adm_pgt_txt_et_c_content') . '</pre>';
     }
 
     public function checkAction()
@@ -100,6 +105,24 @@ class BxDolStudioPolyglot extends BxTemplStudioWidget
 
         return $this->getJsResult('_adm_pgt_scs_et_hf_save', true, true, BX_DOL_URL_STUDIO . 'polyglot.php?page=' . BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_HF); 
     }
+    
+    public function submitEtemplatesCreative(&$oForm)
+    {
+        $sUnsubscribe = "{unsubscribe}";
+        $sContent = $oForm->getCleanValue('content');
+        if(strpos($sContent, $sUnsubscribe) === false)
+            return $this->getJsResult('_adm_pgt_err_et_hf_save_unsubscribe'); 
+
+        list($sHeader, $sFooter) = explode($this->sEtcContent, $sContent);
+
+        $bResult = false;
+        $bResult |= $this->oDb->setParam('site_email_html_template_header', $sHeader);
+        $bResult |= $this->oDb->setParam('site_email_html_template_footer', $sFooter);
+        if(!$bResult)
+            return $this->getJsResult('_adm_pgt_err_et_hf_save');
+
+        return $this->getJsResult('_adm_pgt_scs_et_hf_save', true, true, BX_DOL_URL_STUDIO . 'polyglot.php?page=' . BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_CREATIVE); 
+    }
 }
 
 /** @} */

studio/template/pgt_etemplates_creative_fld.html

@@ -0,0 +1,39 @@
+<div class="bx-form-input-wrapper bx-form-input-wrapper-textarea">
+    <textarea id="__html_id__-html" class="hidden" name="content">__content_html__</textarea>
+    <textarea id="__html_id__-data" class="hidden">__content_data__</textarea>
+    <div id="__html_id__" class="bx-form-input-textarea"></div>
+</div>
+<script type="text/javascript">
+    var inlineStorage = null;
+    if(inlineStorage == undefined) {
+        inlineStorage = (editor) => {
+            const oStorageData = document.getElementById('__html_id__-data');
+            const oStorageHtml = document.getElementById('__html_id__-html');
+
+            editor.Storage.add('inline', {
+                load() {
+                  return JSON.parse(oStorageData.value || '{}');
+                },
+                store(data) {
+                  const component = editor.Pages.getSelected().getMainComponent();
+
+                  oStorageData.value = JSON.stringify(data);
+                  oStorageHtml.value = `<style>${editor.getCss({ component })}</style>${editor.getHtml({ component })}`;
+                }
+            });
+        };
+    }
+
+    var oBuilder = grapesjs.init({
+        container : '#__html_id__',
+        plugins: [inlineStorage, 'grapesjs-preset-newsletter'],
+        pluginsOpts: {
+            'grapesjs-preset-newsletter': {}
+        },
+        storageManager: { 
+            type: 'inline',
+            autosave: true,
+            autoload: true
+        }
+    });
+</script>

studio/template/pgt_etemplates_creative_frm.html

@@ -0,0 +1,3 @@
+__warning__
+<iframe name="__iframe_id__" class="bx-std-hidden"></iframe>
+__form__

studio/template/scripts/BxBaseStudioPolyglot.php

@@ -13,6 +13,7 @@ class BxBaseStudioPolyglot extends BxDolStudioPolyglot
     protected $sSubpageUrl;
     protected $aMenuItems;
     protected $aGridObjects;
+    protected $aHtmlIds;
 
     public function __construct($sPage = '')
     {
@@ -29,13 +30,23 @@ class BxBaseStudioPolyglot extends BxDolStudioPolyglot
             BX_DOL_STUDIO_PGT_TYPE_SETTINGS => array('icon' => 'cogs'),
             BX_DOL_STUDIO_PGT_TYPE_KEYS => array('icon' => 'key'),
             BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES => array('icon' => 'far envelope'),
-            BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_HF => array('icon' => 'far sticky-note')
+            /*
+             * Isn't used for now.
+             * 
+            BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_HF => array('icon' => 'far sticky-note'),
+             * 
+             */
+            BX_DOL_STUDIO_PGT_TYPE_ETEMPLATES_CREATIVE => array('icon' => 'far object-group')
         );
 
         $this->aGridObjects = array(
             'keys' => 'sys_studio_lang_keys',
             'etemplates' => 'sys_studio_lang_etemplates',
         );
+
+        $this->aHtmlIds = [
+            'etc_builder_id' => 'adm-pgt-etc-builder',
+        ];
     }
 
     public function getPageJsCode($aOptions = array(), $bWrap = true)
@@ -170,6 +181,94 @@ class BxBaseStudioPolyglot extends BxDolStudioPolyglot
         ));
     }
 
+    protected function getEtemplatesCreative()
+    {
+        $oTemplate = BxDolStudioTemplate::getInstance();
+
+        $sFormId = 'adm-dsg-et-creative-form';
+        $sIFrameId = 'adm-dsg-et-creative-iframe';
+
+        $sContent = '';
+        $sContent .= getParam('site_email_html_template_header');
+        $sContent .= $this->sEtcContent;
+        $sContent .= getParam('site_email_html_template_footer');
+
+        $aForm = [
+            'form_attrs' => [
+                'id' => $sFormId,
+                'name' => $sFormId,
+                'action' => BX_DOL_URL_STUDIO . 'polyglot.php',
+                'method' => 'post',
+                'enctype' => 'multipart/form-data',
+                'target' => $sIFrameId
+            ],
+            'params' => [
+                'db' => [
+                    'table' => '',
+                    'key' => '',
+                    'uri' => '',
+                    'uri_title' => '',
+                    'submit_name' => 'save'
+                ],
+            ],
+            'inputs' => [
+                'page' => [
+                    'type' => 'hidden',
+                    'name' => 'page',
+                    'value' => $this->sPage
+                ],
+                'content' => [
+                    'type' => 'custom',
+                    'name' => 'content',
+                    'caption' => '',
+                    'content' => $oTemplate->parseHtmlByName('pgt_etemplates_creative_fld.html', [
+                        'html_id' => $this->aHtmlIds['etc_builder_id'],
+                        'content_html' => $sContent,
+                        'content_data' => json_encode([
+                            'pages' => [
+                                ['component' => $sContent]
+                            ]
+                        ])
+                    ]),
+                    'required' => '0',
+                    'db' => [
+                        'pass' => 'XssHtml',
+                    ],
+                ],
+                'save' => [
+                    'type' => 'submit',
+                    'name' => 'save',
+                    'value' => _t('_adm_pgt_btn_et_hf_submit'),
+                ]
+            ]
+        ];
+
+        $oForm = new BxTemplStudioFormView($aForm, $oTemplate);
+        $oForm->initChecker();
+
+        if($oForm->isSubmittedAndValid()) {
+            echo $this->submitEtemplatesCreative($oForm);
+            exit;
+        }
+
+        $oTemplate->addJs([
+            'grapesjs/grapes.min.js',
+            'grapesjs/grapesjs-preset-newsletter.min.js'
+        ]);
+        $oTemplate->addCss([
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'grapesjs/|grapes.min.css'
+        ]);
+
+        return $oTemplate->parseHtmlByName('polyglot.html', [
+            'content' => $oTemplate->parseHtmlByName('pgt_etemplates_creative_frm.html', [
+                'warning' => '',
+                'iframe_id' => $sIFrameId, 
+                'form' => $oForm->getCode()
+            ]),
+            'js_content' => $this->getPageJsCode()
+        ]);
+    }
+
     protected function getGrid($sObjectName)
     {
         $oGrid = BxDolGrid::getObjectInstance($sObjectName);