| Current Path : /var/www/homesaver/www/bitrix/js/catalog/config/settings/src/sections/ |
| Current File : /var/www/homesaver/www/bitrix/js/catalog/config/settings/src/sections/mode.js |
import { Event, Loc, Runtime, Tag } from 'main.core';
import { Button, ButtonColor } from 'ui.buttons';
import { SettingsSection } from 'ui.form-elements.field';
import { UI } from 'ui.notification';
import { Section, Row } from 'ui.section';
import { EnableWizardOpener, ModeList, Disabler, AnalyticsContextList } from 'catalog.store-enable-wizard';
import CatalogPage from '../catalog-page';
import ModeStatus from './components/mode-status';
export default class Mode
{
#parentPage: CatalogPage;
#inventoryManagementParams: Object;
#configCatalogSource: ?string = null;
#inventoryManagementDisabler: Disabler = null;
constructor(params: Object)
{
this.#parentPage = params.parentPage;
this.#inventoryManagementParams = params.inventoryManagementParams;
this.#configCatalogSource = params.configCatalogSource;
this.#inventoryManagementDisabler = new Disabler({
hasConductedDocumentsOrQuantities: this.#inventoryManagementParams.hasConductedDocumentsOrQuantities,
events: {
onDisabled: () => {
this.#parentPage.onInventoryManagementModeChanged({
isEnabled: false,
mode: ModeList.MODE_B24,
});
},
},
});
}
buildSection(): SettingsSection
{
const section = new Section({
title: Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_SECTION_TITLE'),
titleIconClasses: 'ui-icon-set --settings',
isOpen: true,
});
const modeSection = new SettingsSection({
parent: this.#parentPage,
section,
});
section.append(
(new Row({
content: this.#getCurrentModeBlock(),
})).render(),
);
return modeSection;
}
openInventoryManagementSlider(): void
{
let sliderUrl = '/bitrix/components/bitrix/catalog.store.enablewizard/slider.php';
if (this.#configCatalogSource)
{
sliderUrl += `?inventoryManagementSource=${this.#configCatalogSource}`;
}
new EnableWizardOpener().open(
sliderUrl,
{
urlParams: {
analyticsContextSection: AnalyticsContextList.SETTINGS,
},
},
)
.then((slider) => {
if (!slider)
{
return;
}
const isEnabled = slider.getData().get('isInventoryManagementEnabled');
const mode = slider.getData().get('inventoryManagementMode');
if (
(isEnabled !== undefined && isEnabled !== this.#inventoryManagementParams.isEnabled)
|| (mode !== undefined && mode !== this.#inventoryManagementParams.currentMode)
)
{
this.#parentPage.onInventoryManagementModeChanged({
isEnabled,
mode,
});
document.querySelector('.catalog-settings-inventory-management-mode-wrapper')?.scrollIntoView();
if (
this.#inventoryManagementParams.isEnabled
&& isEnabled
&& mode !== this.#inventoryManagementParams.currentMode
)
{
UI.Notification.Center.notify({
content: Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_CHANGED'),
});
this.#parentPage.updateDataAfterSave();
}
}
});
}
#getCurrentModeBlock(): HTMLElement
{
const isInventoryManagementEnabled = this.#inventoryManagementParams.isEnabled;
const currentMode = this.#inventoryManagementParams.currentMode;
const is1cRestricted = this.#inventoryManagementParams.is1cRestricted;
let modeLogo = '';
if (currentMode === ModeList.MODE_1C)
{
modeLogo = Tag.render`
<div class="catalog-settings-inventory-management-mode-external-logo"></div>
`;
}
else
{
modeLogo = Loc.getMessage('CAT_CONFIG_SETTINGS_B24_LOGO')
.replace('[color]', '<span class="catalog-settings-inventory-management-mode-b24-numbers">')
.replace('[/color]', '</span>')
;
modeLogo = Tag.render`
<span class="catalog-settings-inventory-management-mode-b24-name">${modeLogo}</span>
`;
}
const changeModeButton = new Button({
text: Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_CHANGE'),
color: ButtonColor.LIGHT,
onclick: (button, event) => {
this.#sendEvent('disable_clicked');
this.openInventoryManagementSlider();
},
});
const toggleButton = new Button({
text: isInventoryManagementEnabled
? Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_DISABLE')
: Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_ENABLE'),
color: isInventoryManagementEnabled ? ButtonColor.LIGHT : ButtonColor.PRIMARY,
onclick: (button, event) => {
if (isInventoryManagementEnabled)
{
this.#sendEvent('change_mode_clicked');
this.#inventoryManagementDisabler.open();
}
else
{
this.openInventoryManagementSlider();
}
},
round: !isInventoryManagementEnabled,
});
const showChangeModeButton = (
this.#inventoryManagementParams.availableModes.includes(ModeList.MODE_1C)
&& isInventoryManagementEnabled
);
let descriptionContent = Loc.getMessage('CAT_CONFIG_SETTINGS_B24_MODE_DESCRIPTION');
let descriptionClass = 'catalog-settings-inventory-management-mode-description';
if (currentMode === ModeList.MODE_1C)
{
const onecStatusUrl = this.#inventoryManagementParams.onecStatusUrl;
descriptionContent = (new ModeStatus({
currentMode,
isInventoryManagementEnabled,
onecStatusUrl,
is1cRestricted,
})).initialize();
descriptionClass = 'catalog-settings-inventory-management-mode-status';
}
return Tag.render`
<div>
<div class="catalog-settings-inventory-management-mode-wrapper">
<div class="catalog-settings-inventory-management-mode-inner">
<div class="catalog-settings-inventory-management-mode-selected ${isInventoryManagementEnabled ? '' : '--disabled'}">
<div class="catalog-settings-inventory-management-mode-name">${modeLogo}</div>
<div class="${descriptionClass}">
${descriptionContent}
</div>
</div>
<div class="catalog-settings-inventory-management-mode-buttons">
${showChangeModeButton ? changeModeButton.render() : ''}
${toggleButton.render()}
</div>
</div>
</div>
<div>
<p class="catalog-settings-inventory-management-mode-warning">
${Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_CHANGE_WARNING').replace('[break]', '<br/>')}
</p>
${this.#getHelpLink()}
</div>
</div>
`;
}
#sendEvent(event: string): void
{
Runtime.loadExtension('ui.analytics')
.then((exports) => {
const { sendData } = exports;
sendData({
tool: 'inventory',
category: 'settings',
c_section: 'settings',
p1: `mode_${this.#inventoryManagementParams.currentMode}`,
event,
});
});
}
#getHelpLink(): HTMLElement
{
const result = Tag.render`
<a class="catalog-settings-inventory-management-mode-help ui-section__link">
${Loc.getMessage('CAT_CONFIG_SETTINGS_MODE_HELP')}
</a>
`;
Event.bind(result, 'click', () => {
if (top.BX && top.BX.Helper)
{
const helpCode = this.#inventoryManagementParams.availableModes.length > 1
? '20233748'
: '15992592';
top.BX.Helper.show(`redirect=detail&code=${helpCode}`);
}
});
return result;
}
}