@formixru/b2b-ui 1.0.0

package/src/components/form/index.js

@@ -0,0 +1,228 @@
+/* globals BX, SmartCaptcha, SMART_CAPTCHA_KEY */
+
+import { is } from '@advdominion/is';
+
+import { errorHandler } from '../../helpers/error-handler.js';
+import { getSmartCaptcha } from '../../helpers/get-smart-captcha.js';
+import { scrollTo } from '../../helpers/scroll-to.js';
+import { hide as hideDialog, initDialogContent, show as showDialog } from '../dialog/index.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
+
+const initFormContent = ($b) => {
+    try {
+        window.__FORMIX__FORM__INIT_CONTENT($b);
+    } catch {
+        console.warn('Функция __FORMIX__FORM__INIT_CONTENT не установлена');
+    }
+};
+
+export const send = async ($b, url, method, data) => {
+    url = new URL(url || $b.action, location.origin);
+    method = method || $b.method;
+    data = data || new FormData($b);
+    const options = {
+        method,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-Session-Id': BX.message('bitrix_sessid'),
+        },
+    };
+    if (method === 'GET') {
+        for (const [name, value] of data) {
+            url.searchParams.append(name, value);
+        }
+    } else {
+        options.body = data;
+    }
+    showLoader();
+    try {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+            throw response;
+        }
+        const data = await response.json().catch(() => {
+            console.warn('Ошибка при попытке преобразования ответа в JSON.');
+            return {};
+        });
+        if (data.success) {
+            $b.dispatchEvent(new CustomEvent('form-success', { bubbles: true }));
+        }
+        if (data.dialog) {
+            const $dialog = document.querySelector(data.dialog.id);
+            $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
+            showDialog($dialog);
+        }
+        if (data.reloadOnHideDialog) {
+            $b.closest('.dialog').addEventListener('dialog-hide', () => {
+                location.reload();
+            });
+        }
+        if (data.hideDialog) {
+            hideDialog($b.closest('.dialog'));
+        }
+        try {
+            await window.__FORMIX__FORM__INTERCEPT_DATA(data);
+        } catch {
+            console.warn('Функция __FORMIX__FORM__INTERCEPT_DATA не установлена');
+        }
+        if (data.content) {
+            hideLoader();
+            const $dialog = $b.closest('.dialog');
+            if ($dialog) {
+                $dialog.querySelector('.dialog__container').innerHTML = data.content;
+                initDialogContent($dialog);
+                setTimeout(() => {
+                    scrollToError($dialog);
+                });
+            } else {
+                const $parent = $b.parentElement;
+                $b.outerHTML = data.content;
+                const $form = $parent.querySelector('.form');
+                if ($form) {
+                    init($form);
+                    initFormContent($form);
+                    setTimeout(() => {
+                        scrollToError($form);
+                    });
+                }
+            }
+        } else if (is(data.redirect, 'String')) {
+            if (data.redirect) {
+                location.assign(data.redirect);
+                if (data.redirect.startsWith('tg:')) {
+                    hideLoader();
+                } else {
+                    clearLoaderTimeout();
+                }
+            } else {
+                location.reload();
+            }
+        } else {
+            hideLoader();
+        }
+    } catch (error) {
+        if (error.status === 401) {
+            location.reload();
+        } else {
+            hideLoader();
+            errorHandler(error);
+        }
+    }
+};
+
+const scrollToError = ($b = document.body) => {
+    const $error = [...$b.querySelectorAll('.form__input-error, .form__submit-error')].find(($el) => {
+        const rect = $el.getBoundingClientRect();
+        return rect.x && rect.y;
+    });
+    if ($error) {
+        if ($error.closest('.dialog')) {
+            $error.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        } else {
+            scrollTo($error, 50);
+        }
+    }
+};
+
+scrollToError();
+
+const initCaptcha = ($b) => {
+    if (window.smartCaptcha) {
+        $b.insertAdjacentHTML('beforeend', '<div class="form__captcha"></div>');
+
+        $b.dataset.smartCaptchaId = window.smartCaptcha.render($b.querySelector('.form__captcha'), {
+            sitekey: SMART_CAPTCHA_KEY,
+            invisible: true,
+            hideShield: true,
+            test: process.env.NODE_ENV !== 'production',
+        });
+
+        window.smartCaptcha.subscribe($b.dataset.smartCaptchaId, 'success', () => {
+            $b.requestSubmit();
+        });
+
+        window.smartCaptcha.subscribe($b.dataset.smartCaptchaId, 'challenge-hidden', () => {
+            const $submitButton = $b.querySelector('.form__submit-button[type="submit"]');
+            if ($submitButton) {
+                $submitButton.disabled = false;
+            }
+        });
+    }
+};
+
+export const init = ($b) => {
+    if ($b.classList.contains('form_captcha')) {
+        if (window.smartCaptcha) {
+            if (SmartCaptcha.state) {
+                initCaptcha($b);
+            } else {
+                SmartCaptcha.addListener(() => {
+                    initCaptcha($b);
+                });
+            }
+        } else {
+            getSmartCaptcha();
+            SmartCaptcha.addListener(() => {
+                initCaptcha($b);
+            });
+        }
+    }
+};
+
+document.body.addEventListener('submit', (event) => {
+    const { target } = event;
+    const $b = target.closest('.form');
+    if ($b) {
+        const $submitButton = $b.querySelector('.form__submit-button[type="submit"]');
+        if ($submitButton) {
+            $submitButton.disabled = true;
+        }
+        if ($b.classList.contains('form_captcha') && window.smartCaptcha) {
+            const $token = $b.querySelector('input[name="smart-token"]');
+            if ($token && $token.value) {
+                if ($b.classList.contains('form_ajax')) {
+                    event.preventDefault();
+                    send($b);
+                }
+            } else {
+                event.preventDefault();
+                window.smartCaptcha.execute($b.dataset.smartCaptchaId);
+            }
+        } else if ($b.classList.contains('form_ajax')) {
+            event.preventDefault();
+            send($b);
+        }
+    }
+});
+
+document.body.addEventListener('input', (event) => {
+    const { target } = event;
+    if (target.classList.contains('form__input')) {
+        const $error = target.closest('.form__input-wrapper').querySelector('.form__input-error');
+        if ($error) {
+            $error.textContent = '';
+        }
+    }
+});
+
+document.body.addEventListener('change', (event) => {
+    const { target } = event;
+    const $form = target.closest('.form');
+    if (target.classList.contains('form__trigger')) {
+        $form.requestSubmit();
+    } else if (target.dataset.request) {
+        const { name, value } = target.dataset.request;
+        $form.insertAdjacentHTML('afterbegin', `<input type="hidden" name="${name}" value="${value}">`);
+        $form.requestSubmit();
+    } else if (target.closest('.form__option')) {
+        const $error = target.closest('.form__option').querySelector('.form__input-error');
+        if ($error) {
+            $error.textContent = '';
+        }
+    } else if (target.closest('.select') || target.closest('.rating__input')) {
+        const $error = target.closest('.form__input-wrapper').querySelector('.form__input-error');
+        if ($error) {
+            $error.textContent = '';
+        }
+    }
+});

package/src/components/form/index.scss

@@ -0,0 +1,398 @@
+@use '../../variables' as *;
+
+$b: '.form';
+
+#{$b} {
+    position: relative;
+
+    & + & {
+        margin-top: 4px * 10;
+    }
+
+    .sidebar & {
+        margin: 4px * 4;
+    }
+
+    .sidebar_l &,
+    .sidebar_xl & {
+        @media (--tablet-landscape-up) {
+            margin-left: 4px * 6;
+            margin-right: 4px * 6;
+        }
+
+        &:last-child {
+            margin-bottom: 4px * 10;
+        }
+    }
+
+    &_ajax {
+    }
+
+    &_captcha {
+    }
+
+    &_vertical {
+    }
+
+    &__group {
+        display: flex;
+        flex-direction: column;
+        max-width: 4px * 96;
+        width: 100%;
+
+        @media (--tablet-landscape-up) {
+            max-width: 4px * 146;
+        }
+
+        &:not(:first-of-type) {
+            margin-top: 4px * 10;
+        }
+
+        &_fluid {
+            max-width: none;
+        }
+    }
+
+    &__group-title {
+        color: $form-group-title-color;
+
+        @include font($form-group-title-font);
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+
+        #{$b}:not(#{$b}_vertical) & {
+            @media (--tablet-landscape-up) {
+                align-items: flex-start;
+                flex-direction: row;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 6;
+        }
+
+        &_value {
+        }
+
+        &_option-list {
+        }
+
+        &_submit {
+        }
+
+        &_toggle {
+        }
+    }
+
+    &__label {
+        color: $form-label-color;
+        display: flex;
+        margin-bottom: 4px * 2;
+
+        @include font($form-label-font);
+
+        @media (--tablet-landscape-up) {
+            flex-shrink: 0;
+            margin-bottom: 0;
+            margin-right: 4px * 8;
+            position: relative;
+            top: 4px * 3;
+            width: 4px * 46;
+        }
+
+        &:empty {
+            @media (--tablet-portrait-down) {
+                display: none;
+            }
+        }
+
+        #{$b}_vertical & {
+            @media (--tablet-landscape-up) {
+                margin-bottom: 4px * 2;
+                margin-right: 0;
+                top: 0;
+                width: auto;
+            }
+        }
+
+        #{$b}__item_value & {
+            @media (--tablet-landscape-up) {
+                top: 0;
+            }
+        }
+
+        #{$b}__item_option-list & {
+            margin-bottom: 4px * 3;
+
+            @media (--tablet-landscape-up) {
+                margin-bottom: 0;
+                top: 0;
+            }
+
+            #{$b}_vertical & {
+                @media (--tablet-landscape-up) {
+                    margin-bottom: 4px * 3;
+                }
+            }
+        }
+
+        #{$b}__item_submit & {
+            @media (--tablet-portrait-down) {
+                margin-bottom: 0;
+                margin-top: 4px * 4;
+                order: 2;
+            }
+
+            #{$b}_vertical & {
+                @media (--tablet-landscape-up) {
+                    margin-bottom: 0;
+                    margin-top: 4px * 4;
+                    order: 2;
+                }
+            }
+        }
+
+        #{$b}__item_toggle & {
+            @media (--desktop-up) {
+                top: 0;
+            }
+        }
+    }
+
+    &__required {
+        color: $form-required-color;
+        left: -4px;
+        position: relative;
+        top: 0;
+
+        @include font($form-required-font);
+    }
+
+    &__help {
+        display: inline-block;
+        margin-left: 4px;
+        transform: translateY(4px);
+        transition-duration: var(--duration-micro-s);
+        transition-property: fill;
+        transition-timing-function: var(--easing-standard);
+
+        #{$b}__group-title & {
+            transform: none;
+        }
+
+        #{$b}__item_toggle & {
+            margin-left: 4px * 2;
+            transform: none;
+        }
+    }
+
+    &__help-icon {
+        display: block;
+        fill: $form-help-icon-color;
+        height: 4px * 5;
+        width: 4px * 5;
+
+        #{$b}__help:hover &,
+        #{$b}__help:focus-visible & {
+            fill: $form-help-icon-active-color;
+        }
+
+        #{$b}__item_toggle & {
+            height: 4px * 6;
+            width: 4px * 6;
+        }
+    }
+
+    &__input-wrapper {
+        @media (--tablet-landscape-up) {
+            flex-grow: 1;
+        }
+
+        #{$b}__item_submit & {
+            @media (--tablet-portrait-down) {
+                display: flex;
+                flex-direction: column;
+                margin-top: 0;
+                order: 1;
+            }
+
+            #{$b}_vertical & {
+                @media (--tablet-landscape-up) {
+                    display: flex;
+                    flex-direction: column;
+                    order: 1;
+                }
+            }
+        }
+
+        #{$b}__item_toggle & {
+            align-items: center;
+            display: flex;
+        }
+    }
+
+    &__value {
+        color: $form-value-color;
+        display: block;
+        word-break: break-word;
+
+        @include font($form-value-font);
+    }
+
+    &__input {
+        width: 100%;
+    }
+
+    &__input-error {
+        color: $form-input-error-color;
+        display: block;
+        margin-top: 4px * 2;
+
+        @include font($form-input-error-font);
+
+        &:empty {
+            display: none;
+        }
+
+        #{$b}__item_option-list & {
+            margin-top: 4px * 4;
+        }
+
+        #{$b}__option & {
+            margin-top: 4px;
+        }
+    }
+
+    &__input-descr {
+        color: $form-input-descr-color;
+        display: block;
+        margin-top: 4px * 2;
+
+        @include font($form-input-descr-font);
+
+        #{$b}__item_option-list & {
+            margin-top: 4px * 4;
+        }
+
+        #{$b}__option & {
+            margin-top: 4px;
+        }
+
+        #{$b}__input-error:not(:empty) + & {
+            display: none;
+        }
+    }
+
+    &__option {
+        align-items: baseline;
+        display: flex;
+        justify-content: space-between;
+
+        &:not(:first-child) {
+            margin-top: 4px * 4;
+        }
+
+        &_extra {
+            &:not(:first-child) {
+                margin-top: 4px * 2;
+            }
+        }
+    }
+
+    &__link {
+    }
+
+    &__submit-descr {
+        color: $form-submit-descr-color;
+        text-align: center;
+        width: 100%;
+
+        @include font($form-submit-descr-font);
+
+        @media (--tablet-landscape-up) {
+            text-align: left;
+        }
+    }
+
+    &__submit-wrapper {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+
+        @media (--tablet-portrait-down) {
+            order: 2;
+        }
+
+        @media (--tablet-landscape-up) {
+            flex-direction: row;
+        }
+
+        #{$b}_vertical & {
+            @media (--tablet-landscape-up) {
+                order: 2;
+            }
+        }
+    }
+
+    &__submit-button {
+        flex-shrink: 0;
+
+        &:not(:first-child) {
+            margin-top: 4px * 4;
+
+            @media (--tablet-landscape-up) {
+                margin-left: 4px * 6;
+                margin-top: 0;
+            }
+        }
+
+        .dialog & {
+            @media (--tablet-portrait-down) {
+                max-width: none;
+                width: 100%;
+            }
+        }
+    }
+
+    &__submit-error {
+        background-color: $form-submit-error-bg;
+        border-radius: $form-submit-error-radius;
+        box-shadow: $form-submit-error-shadow;
+        color: $form-submit-error-color;
+        margin-bottom: 4px * 4;
+        padding: $form-submit-error-padding;
+        text-align: center;
+
+        @include font($form-submit-error-mobile-font);
+        @include dark-border;
+
+        @media (--tablet-portrait-down) {
+            order: 1;
+        }
+
+        @media (--tablet-landscape-up) {
+            margin-bottom: 0;
+            margin-top: 4px * 8;
+            text-align: left;
+
+            @include font($form-submit-error-desktop-font);
+        }
+
+        #{$b}_vertical & {
+            @media (--tablet-landscape-up) {
+                margin-bottom: 4px * 8;
+                margin-top: 0;
+                order: 1;
+            }
+        }
+    }
+
+    &__trigger {
+    }
+
+    &__captcha {
+    }
+}

package/src/components/header-announcement/index.scss

@@ -0,0 +1,48 @@
+@use '../../variables' as *;
+
+$b: '.header-announcement';
+
+#{$b} {
+    align-items: center;
+    background-color: $header-announcement-bg;
+    color: $header-announcement-color;
+    display: flex;
+    justify-content: center;
+    min-height: 4px * 9;
+    padding-bottom: 4px * 2;
+    padding-left: 4px * 4;
+    padding-right: 4px * 4;
+    padding-top: calc(4px * 2 + env(safe-area-inset-top));
+    position: fixed;
+    text-align: center;
+    text-decoration: none;
+    top: 0;
+    width: 100%;
+    z-index: 105;
+
+    @include font($header-announcement-font);
+
+    @media (--tablet-landscape-up) {
+        position: sticky;
+    }
+
+    &_secondary {
+        background-color: $header-announcement-secondary-bg;
+        color: $header-announcement-secondary-color;
+    }
+
+    &_error {
+        background-color: $header-announcement-error-bg;
+        color: $header-announcement-error-color;
+    }
+
+    &_warning {
+        background-color: $header-announcement-warning-bg;
+        color: $header-announcement-warning-color;
+    }
+
+    &_success {
+        background-color: $header-announcement-success-bg;
+        color: $header-announcement-success-color;
+    }
+}