| Server IP : 37.220.80.31 / Your IP : 3.146.176.172 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/landing/ui/panel/formsettingspanel/src/ |
Upload File : |
import {BasePresetPanel, Preset, ContentWrapper, PresetCategory} from 'landing.ui.panel.basepresetpanel';
import {PageObject} from 'landing.pageobject';
import {Loc} from 'landing.loc';
import {Dom, Reflection, Runtime, Tag, Text, Type, Uri, Cache, Event} from 'main.core';
import type {BaseEvent} from 'main.core.events';
import {Backend} from 'landing.backend';
import {Loader} from 'main.loader';
import {FormClient} from 'crm.form.client';
import {Button} from 'ui.buttons';
import {Env} from 'landing.env';
import {StylePanel} from 'landing.ui.panel.stylepanel';
import {MessageBox, MessageBoxButtons} from 'ui.dialogs.messagebox';
import type {FormDictionary, FormOptions} from 'crm.form.type';
import {Alert, AlertColor} from 'ui.alerts';
import {SidebarButton} from 'landing.ui.button.sidebarbutton';
import {Guide} from 'ui.tour';
import {FieldsPanel} from 'landing.ui.panel.fieldspanel';
import 'ui.switcher';
import './css/style.css';
type CrmField = {
type: 'list' | 'string' | 'checkbox' | 'date' | 'text' | 'typed_string' | 'file',
entity_field_name: string,
entity_name: string,
name: string,
caption: string,
multiple: boolean,
required: boolean,
hidden: boolean,
items: Array<{ID: any, VALUE: any}>,
};
type CrmFieldsList = {
[categoryId: string]: {
CAPTION: string,
FIELDS: Array<CrmField>
},
};
type CrmCompany = {
ID: string,
TITLE: string,
};
type CrmCategory = {
};
/**
* @memberOf BX.Landing.UI.Panel
*/
export class FormSettingsPanel extends BasePresetPanel
{
static getInstance(): FormSettingsPanel
{
const rootWindow = PageObject.getRootWindow();
const rootWindowPanel = rootWindow.BX.Landing.UI.Panel.FormSettingsPanel;
if (!rootWindowPanel.instance && !FormSettingsPanel.instance)
{
rootWindowPanel.instance = new FormSettingsPanel();
}
return (rootWindowPanel.instance || FormSettingsPanel.instance);
}
constructor()
{
super();
this.setEventNamespace('BX.Landing.UI.Panel.FormSettingsPanel');
this.setTitle(Loc.getMessage('LANDING_FORM_SETTINGS_PANEL_TITLE'));
this.lsCache = new Cache.LocalStorageCache();
this.disableOverlay();
if (this.isCrmFormPage())
{
const {dictionary} = Env.getInstance().getOptions().formEditorData;
const preparedSidebarButtons = dictionary.sidebarButtons.map((buttonOptions) => {
return new SidebarButton({...buttonOptions, child: true});
});
this.setSidebarButtons(preparedSidebarButtons);
const preparedPresets = dictionary.scenarios.map((presetOptions) => {
return new Preset(presetOptions);
});
this.setPresets(preparedPresets);
const preparedPresetCategories = dictionary.scenarioCategories.map((categoryOptions) => {
return new PresetCategory(categoryOptions);
});
this.setCategories(preparedPresetCategories);
}
else
{
Dom.append(this.getBlockSettingsButton().render(), this.getRightHeaderControls());
}
this.subscribe('onCancel', this.onCancelClick.bind(this));
Dom.append(this.getExpertSwitcherLayout(), this.layout);
}
getExpertSwitcherLayout(): HTMLDivElement
{
return this.cache.remember('switcherLayout', () => {
const onClick = () => {
this.getExpertModeSwitcher().node.click();
};
return Tag.render`
<div class="landing-ui-expert-switcher">
${this.getExpertModeSwitcher().node}
<span onclick="${onClick}" class="landing-ui-expert-switcher-label">
${Loc.getMessage('LANDING_FORM_EXPERT_MODE_SWITCHER_LABEL')}
</span>
</div>
`;
});
}
getExpertModeSwitcher(): Switcher
{
return this.cache.remember('expertModeSwitcher', () => {
const rootWindow = PageObject.getRootWindow();
const switcher = new rootWindow.BX.UI.Switcher({
checked: this.isExpertModeEnabled(),
});
Dom.addClass(switcher.node, 'ui-switcher-size-sm ui-switcher-color-green');
Event.bind(switcher.node, 'click', this.onExpertSwitcherClick.bind(this));
return switcher;
});
}
onExpertSwitcherClick()
{
this.lsCache.set('formEditorExpertMode', this.getExpertModeSwitcher().isChecked());
this.onExpertModeChange();
}
getCurrentPreset(): ?Preset
{
const {templateId} = this.getFormOptions();
const preset = this.getPresets().find((currentPreset) => {
return currentPreset.options.id === templateId;
});
if (preset)
{
return preset;
}
return this.getPresets().find((currentPreset) => {
return currentPreset.options.id === 'expert';
});
}
onExpertModeChange()
{
const currentPreset = this.getCurrentPreset();
if (
this.getExpertModeSwitcher().isChecked()
&& Type.isArrayFilled(currentPreset.options.expertModeItems)
)
{
this.clearSidebar();
this.getSidebarButtons()
.filter((button) => {
return currentPreset.options.expertModeItems.includes(button.id);
})
.forEach((button) => {
if (!currentPreset.options.items.includes(button.id))
{
button.deactivate();
}
this.appendSidebarButton(button);
});
}
else
{
const currentSidebarButton = this.getSidebarButtons().find((button) => {
return button.isActive();
});
const buttons = this.getSidebarButtons().filter((button) => {
return currentPreset.options.items.includes(button.id);
});
this.clearSidebar();
buttons.forEach((button) => {
this.appendSidebarButton(button);
});
if (
currentSidebarButton
&& !currentPreset.options.items.includes(currentSidebarButton.id)
)
{
const defaultSection = (() => {
if (Type.isStringFilled(currentPreset.options.defaultSection))
{
return currentPreset.options.defaultSection;
}
return 'fields';
})();
const defaultSectionButton = this.getSidebarButtons().find((button) => {
return button.id === defaultSection;
});
if (defaultSectionButton)
{
defaultSectionButton.getLayout().click();
}
}
}
}
isExpertModeEnabled(): boolean
{
return this.lsCache.get('formEditorExpertMode', false);
}
// eslint-disable-next-line class-methods-use-this
isCrmFormPage(): boolean
{
return Env.getInstance().getOptions().specialType === 'crm_forms';
}
getFormDesignButton()
{
return this.cache.remember('formDesignButton', () => {
return new Button({
text: Loc.getMessage('LANDING_FORM_DESIGN_BUTTON'),
color: Button.Color.LIGHT_BORDER,
round: true,
className: 'landing-ui-panel-top-button',
onclick: this.onFormDesignButtonClick.bind(this),
});
});
}
getBlockSettingsButton()
{
return this.cache.remember('blockSettingsButton', () => {
return new Button({
text: Loc.getMessage('LANDING_FORM_SETTINGS_BLOCK_SETTINGS_BUTTON_TEXT'),
color: Button.Color.LIGHT_BORDER,
round: true,
className: 'landing-ui-panel-top-button',
onclick: this.onBlockSettingsButtonClick.bind(this),
});
});
}
onBlockSettingsButtonClick()
{
if (this.getCurrentBlock())
{
this.hide()
.then(() => {
this.getCurrentBlock().showContentPanel();
});
}
}
onFormDesignButtonClick()
{
if (this.getCurrentBlock())
{
this.getCurrentBlock().onFormDesignClick();
}
}
getLoader(): Loader
{
return this.cache.remember('loader', () => {
return new Loader({
target: this.body,
});
});
}
showLoader()
{
Dom.addClass(this.layout, 'landing-ui-panel-state-content-load');
void this.getLoader().show();
Dom.hide(this.sidebar);
Dom.hide(this.content);
Dom.hide(this.getExpertSwitcherLayout());
}
hideLoader()
{
Dom.removeClass(this.layout, 'landing-ui-panel-state-content-load');
this.getLoader().hide();
Dom.show(this.sidebar);
Dom.show(this.content);
if (Type.isArrayFilled(this.getCurrentPreset().options.expertModeItems))
{
Dom.show(this.getExpertSwitcherLayout());
}
}
showContentLoader()
{
Dom.addClass(this.layout, 'landing-ui-panel-state-body-load');
super.showContentLoader();
}
hideContentLoader()
{
Dom.removeClass(this.layout, 'landing-ui-panel-state-body-load');
super.hideContentLoader();
}
load(options = {}): Promise<any>
{
if (options.showWithOptions)
{
const editorData = Env.getInstance().getOptions().formEditorData;
const {dictionary} = editorData;
const preparedSidebarButtons = dictionary.sidebarButtons.map((buttonOptions) => {
return new SidebarButton({...buttonOptions, child: true});
});
this.setSidebarButtons(preparedSidebarButtons);
const preparedPresets = dictionary.scenarios.map((presetOptions) => {
return new Preset(presetOptions);
});
this.setPresets(preparedPresets);
const preparedPresetCategories = dictionary.scenarioCategories.map((categoryOptions) => {
return new PresetCategory(categoryOptions);
});
this.setCategories(preparedPresetCategories);
this.setCrmFields(editorData.crmFields);
this.setCrmCompanies(editorData.crmCompanies);
this.setCrmCategories(editorData.crmCategories);
this.setAgreements(editorData.agreements);
const currentOptions = Runtime.clone(editorData.formOptions);
if (currentOptions.agreements.use !== true)
{
currentOptions.agreements.use = true;
currentOptions.data.agreements = [];
}
this.setFormOptions(currentOptions);
this.setFormDictionary(editorData.dictionary);
return Promise.resolve();
}
const crmData = Backend.getInstance()
.batch('Form::getCrmFields', {
crmFields: {
action: 'Form::getCrmFields',
data: null,
},
crmCompanies: {
action: 'Form::getCrmCompanies',
data: null,
},
crmCategories: {
action: 'Form::getCrmCategories',
data: null,
},
agreements: {
action: 'Form::getAgreements',
data: null,
},
})
.then((result) => {
this.setCrmFields(result.crmFields.result);
this.setCrmCompanies(result.crmCompanies.result);
this.setCrmCategories(result.crmCategories.result);
this.setAgreements(result.agreements.result);
});
const formOptions = FormClient.getInstance()
.getOptions(this.getCurrentFormId())
.then((options) => {
const currentOptions = Runtime.clone(options);
if (currentOptions.agreements.use !== true)
{
currentOptions.agreements.use = true;
currentOptions.data.agreements = [];
}
this.setFormOptions(currentOptions);
});
const formDictionary = FormClient.getInstance()
.getDictionary()
.then((dictionary) => {
this.setFormDictionary(dictionary);
const preparedSidebarButtons = dictionary.sidebarButtons.map((buttonOptions) => {
return new SidebarButton({...buttonOptions, child: true});
});
this.setSidebarButtons(preparedSidebarButtons);
const preparedPresets = dictionary.scenarios.map((presetOptions) => {
return new Preset(presetOptions);
});
this.setPresets(preparedPresets);
const preparedPresetCategories = dictionary.scenarioCategories.map((categoryOptions) => {
return new PresetCategory(categoryOptions);
});
this.setCategories(preparedPresetCategories);
});
return Promise.all([
crmData,
formOptions,
formDictionary,
]);
}
setAgreements(agreements)
{
this.cache.set('agreements', Runtime.orderBy(agreements, ['id'], ['asc']));
}
getAgreements(): Array<{[key: string]: any}>
{
return this.cache.get('agreements');
}
isLeadEnabled(): boolean
{
return this.getFormDictionary().document.lead.enabled;
}
setCurrentBlock(block: BX.Landing.Block)
{
this.cache.set('currentBlock', block);
}
getCurrentBlock(): ?BX.Landing.Block
{
return this.cache.get('currentBlock');
}
getSaveOriginalFileNameAlert(): HTMLElement
{
return this.cache.remember('saveOriginalFileNameAlert', () => {
const alert = new Alert({
text: Loc.getMessage('LANDING_CRM_FORM_MAIN_OPTION_WARNING'),
color: AlertColor.WARNING,
});
return alert.render();
});
}
show(
options: {
formId: number,
instanceId: number,
state?: 'presets',
formOptions?: ?{[key: string]: any},
showWithOptions: true,
} = {
formOptions: {},
},
): Promise<any>
{
if (!this.layout.parentNode)
{
this.enableToggleMode();
}
if (!this.isFormCreated())
{
this.disableTransparentMode();
}
const {mainOptions} = Env.getInstance().getOptions();
if (mainOptions.saveOriginalFileName === false)
{
this.prependContent(
this.getSaveOriginalFileNameAlert(),
);
const closeButtonTop = Text.toNumber(Dom.style(this.closeButton.getLayout(), 'top'));
const alertHeight = this.getSaveOriginalFileNameAlert().getBoundingClientRect().height;
Dom.style(this.closeButton.getLayout(), 'top', `${closeButtonTop + alertHeight}px`);
}
this.setCurrentBlock(options.block);
this.setCurrentFormId(options.formId);
this.setCurrentFormInstanceId(options.instanceId);
this.showLoader();
this.load(options)
.then(() => {
this.hideLoader();
const formOptions = this.getFormOptions();
if (Type.isPlainObject(options.formOptions))
{
const formOptions = Runtime.merge(
this.getFormOptions(),
options.formOptions,
);
this.setFormOptions(formOptions);
}
if (options.state === 'presets')
{
const presetFromRequest = this.getPresetIdFromRequest();
let preset = false;
if (presetFromRequest)
{
preset = this.getPresets().find((item) => {
return item.options.id === presetFromRequest;
});
}
if (preset)
{
this.applyPreset(preset);
}
else
{
this.onPresetFieldClick();
this.activatePreset(formOptions.templateId);
}
}
else
{
let preset = this.getPresets().find((item) => {
return item.options.id === formOptions.templateId;
});
if (!preset)
{
preset = this.getPresets().find((item) => {
return item.options.id === 'expert';
});
}
if (this.isFormCreated())
{
this.applyPreset(preset);
this.onPresetFieldClick();
}
else
{
this.applyPreset(preset, true);
}
}
this.setInitialFormOptions(
Runtime.clone(this.getFormOptions()),
);
if (!this.isFormCreated())
{
this.onExpertModeChange();
}
})
.catch((error) => {
if (Type.isArrayFilled(error))
{
const accessDeniedCode = 510;
const isAccessDenied = error.some((errorItem) => {
return String(errorItem.code) === String(accessDeniedCode);
});
if (isAccessDenied)
{
this.getLoader().hide();
Dom.show(this.sidebar);
Dom.show(this.content);
Dom.hide(this.footer);
Dom.append(this.getAccessError(), this.content);
}
}
console.error(error);
});
const editorWindow = PageObject.getEditorWindow();
Dom.addClass(editorWindow.document.body, 'landing-ui-hide-action-panels-form');
void StylePanel.getInstance().hide();
return super.show(options).then(() => {
setTimeout(() => {
this.getCurrentBlock().node.scrollIntoView({behavior: 'smooth'});
}, 300);
return Promise.resolve(true);
});
}
getAccessError(): HTMLDivElement
{
return this.cache.remember('accessErrorMessage', () => {
return Tag.render`
<div class="landing-ui-access-error-message">
<div class="landing-ui-access-error-message-text">
${Loc.getMessage('LANDING_CRM_ACCESS_ERROR_MESSAGE')}
</div>
</div>
`;
});
}
// eslint-disable-next-line class-methods-use-this
getPresetIdFromRequest(): ?string
{
const uri = new Uri(window.top.location.href);
return uri.getQueryParam('preset');
}
// eslint-disable-next-line class-methods-use-this
isFormCreated(): boolean
{
const rootWindow = PageObject.getRootWindow();
const uri = new Uri(rootWindow.location.href);
return Text.toBoolean(uri.getQueryParam('formCreated'));
}
setCurrentFormId(formId: number)
{
this.cache.set('currentFormId', Text.toNumber(formId));
}
getCurrentFormId(): number
{
return this.cache.get('currentFormId');
}
setCurrentFormInstanceId(formId: number)
{
this.cache.set('currentFormInstanceId', formId);
}
getCurrentFormInstanceId(): number
{
return this.cache.get('currentFormInstanceId');
}
setCrmFields(fields)
{
this.cache.set('fields', fields);
}
getCrmFields(): CrmFieldsList
{
return this.cache.get('fields') || {};
}
setCrmCompanies(companies: Array<CrmCompany>)
{
this.cache.set('companies', companies);
}
getCrmCompanies(): Array<CrmCompany>
{
return this.cache.get('companies') || [];
}
setCrmCategories(categories: Array<CrmCategory>)
{
this.cache.set('crmCategories', categories);
}
getCrmCategories(): Array<CrmCategory>
{
return this.cache.get('crmCategories') || [];
}
setFormOptions(options: FormOptions)
{
this.cache.set('formOptions', options);
}
getFormOptions(): FormOptions
{
return Runtime.clone(this.cache.get('formOptions') || {});
}
setFormDictionary(dictionary: FormDictionary)
{
this.cache.set('formDictionary', dictionary);
}
getFormDictionary(): FormDictionary
{
return this.cache.get('formDictionary') || {};
}
setInitialFormOptions(options: FormOptions)
{
this.cache.set('initialFormOptions', Runtime.clone(options));
}
getInitialFormOptions(): FormOptions
{
return this.cache.get('initialFormOptions');
}
// eslint-disable-next-line
getCrmForm()
{
const formApp = Reflection.getClass('b24form.App');
if (formApp)
{
if (this.getCurrentFormInstanceId())
{
return formApp.get(this.getCurrentFormInstanceId());
}
let tmpIndex = -1;
const currentFormIndex = [
...this.getCurrentBlock().node.parentElement.childNodes,
].reduce((acc, item) => {
if (Dom.attr(item, 'data-subtype') === 'form')
{
tmpIndex += 1;
if (item === this.getCurrentBlock().node)
{
return tmpIndex;
}
}
return acc;
}, 0);
return formApp.list()[currentFormIndex];
}
return null;
}
onChange(event: BaseEvent)
{
const eventData = event.getData();
const eventTargetValue = event.getTarget().getValue();
Promise
.resolve(eventTargetValue)
.then((value) => {
if (eventData.skipPrepare)
{
const formOptions = this.getFormOptions();
if (
Reflect.has(value, 'presetFields')
|| Reflect.has(value, 'document')
|| Reflect.has(value, 'result')
)
{
const additionalValue = {};
if (Reflect.has(value, 'document'))
{
additionalValue.payment = value.document.payment;
delete value.document.payment;
}
return {
...formOptions,
...value,
...additionalValue,
};
}
if (
Reflect.has(value, 'embedding')
|| Reflect.has(value, 'callback')
|| Reflect.has(value, 'whatsapp')
|| (
Reflect.has(value, 'name')
&& Reflect.has(value, 'data')
&& Reflect.has(value.data, 'useSign')
)
)
{
const mergedOptions = Runtime.merge(
formOptions,
value,
);
if (Reflect.has(value, 'responsible'))
{
mergedOptions.responsible.users = value.responsible.users;
}
return mergedOptions;
}
if (Reflect.has(value, 'recaptcha'))
{
const {key, secret} = value.recaptcha;
delete value.recaptcha.key;
delete value.recaptcha.secret;
const captcha = {};
if (!Type.isNil(key))
{
captcha.key = key;
}
if (!Type.isNil(secret))
{
captcha.secret = secret;
}
return {
...formOptions,
captcha: {
...formOptions.captcha,
...captcha,
},
data: {
...formOptions.data,
...value,
},
};
}
return {
...formOptions,
data: {
...formOptions.data,
...value,
},
};
}
return FormClient.getInstance()
.prepareOptions(this.getFormOptions(), value)
.then(result => {
if (value.agreements)
{
result.data = Runtime.merge(result.data, value);
}
if (value.integration)
{
result.integration = value.integration;
}
if (value.fields)
{
result.data.fields = result.data.fields.map((field, index) => {
return Runtime.merge(field, value.fields[index]);
});
}
return result;
});
})
.then((result) => {
BX.Landing.UI.Panel.Top
.getInstance()
.setFormName(result.name);
this.setFormOptions(result);
this.getCrmForm().adjust(Runtime.clone(result.data));
});
}
static sanitize(value: any): any
{
if (Type.isStringFilled(value))
{
return Text.decode(value)
.replace(/<style[^>]*>.*<\/style>/gm, '')
.replace(/<script[^>]*>.*<\/script>/gm, '')
.replace(/<[^>]+>/gm, '');
}
return value;
}
getPersonalizationVariables(): Array<{name: string, value: string}>
{
return this.cache.remember('personalizationVariables', () => {
return this.getFormDictionary().personalization.list.map((item) => {
return {name: item.name, value: item.id};
});
});
}
getDefaultValuesVariables(): Array<{name: string, value: string}>
{
return this.cache.remember('personalizationVariables', () => {
const {properties} = this.getFormDictionary();
if (Type.isPlainObject(properties) && Type.isArrayFilled(properties.list))
{
return properties.list.map((item) => {
return {name: item.name, value: item.id};
});
}
return [];
});
}
getContent(id: string): Promise<ContentWrapper>
{
const currentButton = this.getSidebarButtons().find((button) => {
return id === button.options.id;
});
const {extension} = currentButton.options.data;
const contentExtension = this.cache.remember(extension, () => {
const rootWindow = PageObject.getRootWindow();
return rootWindow.BX.Runtime
.loadExtension(extension)
.then((exports) => {
return exports.default;
});
});
return contentExtension.then((ContentWrapperClass) => {
if (Type.isFunction(ContentWrapperClass))
{
return new ContentWrapperClass({
formOptions: this.getFormOptions(),
dictionary: this.getFormDictionary(),
crmFields: this.getCrmFields(),
companies: this.getCrmCompanies(),
categories: this.getCrmCategories(),
agreements: this.getAgreements(),
isLeadEnabled: this.isLeadEnabled(),
form: this.getCrmForm(),
});
}
return null;
});
}
onPresetClick(event: BaseEvent)
{
if (event.getTarget().options.openable)
{
this.disableTransparentMode();
}
const uri = new Uri(window.top.location.toString());
uri.removeQueryParam('formCreated');
uri.removeQueryParam('preset');
window.top.history.replaceState(null, document.title, uri.toString());
this.applyPreset(event.getTarget());
}
getCheckActionConfirm(): MessageBox
{
return this.cache.remember('checkActionConfirm', () => {
const rootWindow = PageObject.getRootWindow();
return new rootWindow.BX.UI.Dialogs.MessageBox({
buttons: MessageBoxButtons.OK_CANCEL,
});
});
}
applyPreset(preset: Preset, skipOptions = false)
{
const lastPreset = this.getPresets().find((currentPreset: Preset) => {
return Dom.hasClass(currentPreset.getLayout(), 'landing-ui-panel-preset-active');
});
this.getPresets().forEach((currentPreset) => {
currentPreset.deactivate();
});
if (!skipOptions)
{
const runAction = (() => {
if (Type.isArrayFilled(preset.options.actions))
{
return Promise.all(
preset.options.actions.map((action) => {
if (action.id === 'showTour')
{
const rootWindow = PageObject.getRootWindow();
const guide = new rootWindow.BX.UI.Tour.Guide({
onEvents: false,
steps: action.data.steps,
});
guide.start();
}
if (action.id === 'showHelp')
{
if (window.top.BX.Helper)
{
window.top.BX.Helper.show(action.data.href);
}
}
if (action.id === 'check')
{
return FormClient
.getInstance()
.check({
templateId: preset.options.id,
})
.then((result) => {
if (result.success === false)
{
const checkActionConfirm = this.getCheckActionConfirm();
checkActionConfirm.setTitle(result.message.title);
checkActionConfirm.setMessage(result.message.description);
checkActionConfirm.setOkCaption(result.message.confirmButton);
checkActionConfirm.setCancelCaption(result.message.cancelButton);
return new Promise((resolve) => {
checkActionConfirm.setOkCallback(() => {
checkActionConfirm.getOkButton().setDisabled(false);
checkActionConfirm.getCancelButton().setDisabled(false);
checkActionConfirm.close();
resolve(true);
});
checkActionConfirm.setCancelCallback(() => {
checkActionConfirm.getOkButton().setDisabled(false);
checkActionConfirm.getCancelButton().setDisabled(false);
checkActionConfirm.close();
resolve(false);
});
checkActionConfirm.show();
});
}
return Promise.resolve(true);
});
}
return Promise.resolve();
}),
);
}
return Promise.resolve();
})();
if (preset.options.openable)
{
this.showLoader();
void runAction
.then((actions) => {
const actionsResult = (() => {
if (Type.isArrayFilled(preset.options.actions))
{
return preset.options.actions.reduce((acc, item, index) => {
return {...acc, [item.id]: actions[index]};
}, {});
}
return {};
})();
if (
(
Reflect.has(actionsResult, 'check')
&& actionsResult.check === true
)
|| (
!Reflect.has(actionsResult, 'check')
)
)
{
this.getPresets().forEach((currentPreset) => {
currentPreset.deactivate();
});
preset.activate();
FormClient.getInstance()
.prepareOptions(this.getFormOptions(), {templateId: preset.options.id})
.then((result) => {
return Backend.getInstance()
.action('Form::getCrmFields')
.then((crmFields) => {
this.setCrmFields(crmFields);
FieldsPanel.getInstance().setCrmFields(crmFields);
return result;
});
})
.then((result) => {
BX.Landing.UI.Panel.Top
.getInstance()
.setFormName(result.name);
this.setFormOptions({
...result,
templateId: preset.options.id,
});
this.getCrmForm().adjust(Runtime.clone(result.data));
if (this.isFormCreated())
{
this.onPresetFieldClick();
this.activatePreset(preset.options.id);
}
else
{
super.applyPreset(preset);
if (Type.isArrayFilled(preset.options.expertModeItems))
{
Dom.show(this.getExpertSwitcherLayout());
this.onExpertModeChange();
}
else
{
Dom.hide(this.getExpertSwitcherLayout());
}
}
this.hideLoader();
});
}
else
{
this.hideLoader();
this.enableTransparentMode();
if (lastPreset)
{
lastPreset.activate();
preset.deactivate();
}
}
});
}
}
else
{
if (preset.options.openable)
{
super.applyPreset(preset);
if (Type.isArrayFilled(preset.options.expertModeItems))
{
Dom.show(this.getExpertSwitcherLayout());
this.onExpertModeChange();
}
else
{
Dom.hide(this.getExpertSwitcherLayout());
}
this.hideLoader();
}
preset.activate();
}
}
getFormNode(): HTMLDivElement
{
return this.cache.remember('formNode', () => {
return this.getCurrentBlock().node.querySelector('[data-b24form-use-style]');
});
}
useBlockDesign(): boolean
{
return this.cache.remember('useBlockDesign', () => {
return Text.toBoolean(Dom.attr(this.getFormNode(), 'data-b24form-use-style'));
});
}
getCurrentCrmEntityName(): string
{
const {scheme} = this.getFormOptions().document;
const schemeItem = this.getFormDictionary().document.schemes.find((item) => {
return String(scheme) === String(item.id);
});
return schemeItem.name;
}
getNotSynchronizedFields(): Promise<any>
{
return FormClient
.getInstance()
.checkFields(this.getFormOptions())
.then((result) => {
return result;
});
}
showSynchronizationPopup(notSynchronizedFields: Array<string>): Promise<boolean>
{
return new Promise((resolve) => {
const onOk = (messageBox: MessageBox) => {
messageBox.close();
resolve(true);
};
const onCancel = (messageBox: MessageBox) => {
messageBox.close();
resolve(false);
};
const messageDescription = (() => {
const entityName = Loc.getMessage('LANDING_SYNCHRONIZATION_POPUP_ENTITY_TEMPLATE')
.replace('{entityName}', Text.encode(this.getCurrentCrmEntityName()));
return Loc.getMessage('LANDING_SYNCHRONIZATION_POPUP_DESCRIPTION')
.replace('{entityName}', Text.encode(entityName));
})();
const messageText = (() => {
const fields = [...notSynchronizedFields].map((field) => {
return Loc.getMessage('LANDING_SYNCHRONIZATION_POPUP_FIELD_TEMPLATE')
.replace('{fieldName}', Text.encode(field));
});
if (notSynchronizedFields.length > 1)
{
const lastField = fields.pop();
return Loc
.getMessage('LANDING_SYNCHRONIZATION_POPUP_TEXT')
.replace('{fieldsList}', fields.join(', '))
.replace('{lastField}', lastField);
}
return Loc
.getMessage('LANDING_SYNCHRONIZATION_POPUP_TEXT_1')
.replace('{field}', fields.join(', '));
})();
window.top.BX.UI.Dialogs.MessageBox.confirm(
`${messageDescription}<br><br>${messageText}`,
Loc.getMessage('LANDING_SYNCHRONIZATION_POPUP_TITLE'),
onOk,
Loc.getMessage('LANDING_SYNCHRONIZATION_POPUP_OK_BUTTON_LABEL'),
onCancel,
);
});
}
showSynchronizationErrorPopup(errors: Array<string>)
{
const message = errors.reduce((acc, item) => {
return `${acc}\n\n${item}`;
}, '');
window.top.BX.UI.Dialogs.MessageBox.alert(message);
}
getErrorAlert(): MessageBox
{
return this.cache.remember('errorAlert', () => {
const rootWindow = PageObject.getRootWindow();
return new rootWindow.BX.UI.Dialogs.MessageBox({
title: Loc.getMessage('LANDING_FORM_SAVE_ERROR_ALERT_TITLE'),
buttons: MessageBoxButtons.OK,
popupOptions: {
maxHeight: 310,
},
});
});
}
onSaveClick()
{
const dictionary = this.getFormDictionary();
if (
Type.isPlainObject(dictionary.permissions)
&& Type.isPlainObject(dictionary.permissions.form)
&& dictionary.permissions.form.edit === false
)
{
const rootWindow = PageObject.getRootWindow();
rootWindow.BX.UI.Dialogs.MessageBox.alert(Loc.getMessage('LANDING_FORM_SAVE_PERMISSION_DENIED'));
return;
}
Dom.addClass(this.getSaveButton().layout, 'ui-btn-wait');
this.getNotSynchronizedFields()
.then((result) => {
if (Type.isPlainObject(result.sync))
{
if (Type.isArrayFilled(result.sync.errors))
{
this.showSynchronizationErrorPopup(result.sync.errors);
return false;
}
if (Type.isArrayFilled(result.sync.fields))
{
const fieldLabels = result.sync.fields.map((field) => {
return field.label;
});
return this.showSynchronizationPopup(fieldLabels);
}
}
return true;
})
.then((isConfirmed) => {
if (isConfirmed)
{
const uri = new Uri(window.top.location.toString());
uri.removeQueryParam('formCreated');
window.top.history.replaceState(null, document.title, uri.toString());
const initialOptions = this.getInitialFormOptions();
const currentOptions = this.getFormOptions();
const options = (() => {
if (!this.isCrmFormPage())
{
const clonedOptions = Runtime.clone(currentOptions);
clonedOptions.data.design = Runtime.clone(initialOptions.data.design);
return clonedOptions;
}
return currentOptions;
})();
if (
options.data.recaptcha.use
&& (
!this.getFormDictionary().captcha.hasKeys
&& !options.captcha.hasDefaults
)
)
{
options.data.recaptcha.use = false;
const rootWindow = PageObject.getRootWindow();
const alert: MessageBox = new rootWindow.BX.UI.Dialogs.MessageBox({
title: Loc.getMessage('LANDING_FORM_SAVE_CAPTCHA_ALERT_TITLE'),
message: Loc.getMessage('LANDING_FORM_SAVE_CAPTCHA_ALERT_TEXT_2'),
buttons: MessageBoxButtons.OK,
onOk: () => {
alert.close();
Dom.removeClass(this.getSaveButton().layout, 'ui-btn-wait');
},
});
alert.show();
}
void FormClient.getInstance()
.saveOptions(options)
.then((result) => {
this.setFormOptions(result);
this.setInitialFormOptions(result);
FormClient.getInstance().resetCache(result.id);
Dom.removeClass(this.getSaveButton().layout, 'ui-btn-wait');
const activeButton = this.getSidebarButtons().find((button) => {
return button.isActive();
});
if (
activeButton
&& !Dom.hasClass(this.layout, 'landing-ui-panel-mode-transparent')
)
{
activeButton.getLayout().click();
}
if (this.isCrmFormPage())
{
Dom.addClass(this.getSaveButton().layout, 'ui-btn-icon-done');
const currentButtonText = this.getSaveButton().layout.innerText;
this.getSaveButton().setText(Loc.getMessage('LANDING_FORM_EDITOR_SAVE_BUTTON_STATE_SAVED'));
setTimeout(() => {
Dom.removeClass(this.getSaveButton().layout, 'ui-btn-icon-done');
this.getSaveButton().setText(currentButtonText);
}, 1500);
}
else
{
void this.hide();
}
})
.catch((errors) => {
if (Type.isArrayFilled(errors))
{
const errorMessage = errors
.map((item) => {
return Text.encode(item.message);
})
.join('<br><br>');
const errorAlert = this.getErrorAlert();
errorAlert.setMessage(errorMessage);
errorAlert.show();
}
else
{
const rootWindow = PageObject.getRootWindow();
rootWindow.BX.UI.Dialogs.MessageBox.alert(
Loc.getMessage('LANDING_FORM_SAVE_UNKNOWN_ERROR_ALERT_TEXT'),
Loc.getMessage('LANDING_FORM_SAVE_ERROR_ALERT_TITLE'),
);
}
Dom.removeClass(this.getSaveButton().layout, 'ui-btn-wait');
});
if (this.useBlockDesign() && this.isCrmFormPage())
{
this.disableUseBlockDesign();
}
}
else
{
Dom.removeClass(this.getSaveButton().layout, 'ui-btn-wait');
}
});
}
isChanged(): boolean
{
return JSON.stringify(this.getFormOptions()) !== JSON.stringify(this.getInitialFormOptions());
}
disableUseBlockDesign()
{
Dom.attr(this.getFormNode(), 'data-b24form-use-style', 'N');
this.cache.set('useBlockDesign', false);
Backend
.getInstance()
.action(
'Landing\\Block::updateNodes',
{
block: this.getCurrentBlock().id,
data: {
'.bitrix24forms': {
attrs: {
'data-b24form-use-style': 'N',
},
},
},
lid: this.getCurrentBlock().lid,
siteId: this.getCurrentBlock().siteId,
},
{code: this.getCurrentBlock().manifest.code},
);
}
onCancelClick()
{
const initialFormOptions = this.getInitialFormOptions();
this.getCrmForm().adjust(initialFormOptions.data);
BX.Landing.UI.Panel.Top
.getInstance()
.setFormName(initialFormOptions.name);
void this.hide();
}
hide(): Promise<*>
{
const editorWindow = PageObject.getEditorWindow();
Dom.removeClass(editorWindow.document.body, 'landing-ui-hide-action-panels-form');
return super.hide();
}
}