@redneckz/wildless-cms-uni-blocks 0.14.913 → 0.14.915

package/bundle/bundle.umd.js

@@ -636,7 +636,7 @@
                                     imageAlign,
                                 }), buttons ? jsx("div", { className: "self-end", children: buttons }) : null] })] })] }));
     });
-    const renderMiddleContent = (insetTitle, children) => insetTitle || children ? (jsxs("div", { className: "grow space-y-lg w-fit", children: [insetTitle, children] })) : null;
+    const renderMiddleContent = (insetTitle, children) => insetTitle || children ? (jsxs("div", { className: "space-y-lg", children: [insetTitle, children] })) : null;
     const imageAlwaysOnRightContainerStyle = (isImage) => style(isImage ? 'row-span-2' : '@xl:row-span-2');
     const renderUnitContainer = (childrenBlocks) => childrenBlocks?.length ? (jsx("div", { className: "flex items-start justify-end", children: childrenBlocks })) : null;
 
@@ -1005,7 +1005,7 @@
     const formatPhone = (phone) => phone?.replace(/[^+\d]/g, '');
 
     const getSubmitBody = (body, isNaturalPerson, router) => {
-        const { typeForm, region, phone = '', email, birthday, desiredMeetingDate, inn, innDadata, fullRegion, addressBranch, secondaryPhone = '', bankEmpolee, applicationDate, partnerSymbolCode, companyNameByInn, partnerName, ...staticBody } = body;
+        const { typeForm, region, phone = '', email, birthday, desiredMeetingDate, inn, fullRegion, addressBranch, secondaryPhone = '', bankEmpolee, applicationDate, partnerName, ...staticBody } = body;
         return {
             typeForm,
             ...getRegion$1(region, isNaturalPerson),
@@ -1023,10 +1023,7 @@
                 }),
             ...addPageSlug(typeForm, router),
             ...formatPFForm(typeForm, {
-                innDadata,
                 fullRegion,
-                partnerSymbolCode,
-                companyNameByInn,
                 partnerName,
             }),
             ...staticBody,
@@ -1050,10 +1047,8 @@
         : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
     const formatPFForm = (typeForm, data) => typeForm === 'PF'
         ? {
-            inn: data?.innDadata,
             region: data?.fullRegion,
             partner: data?.partnerName,
-            fullName: data?.companyNameByInn,
         }
         : {};
     const addPageSlug = (typeForm, router) => typeForm === 'UNIVERSAL'
@@ -1448,17 +1443,20 @@
         return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
     };
 
-    const SelectPopup = JSX(({ popupRef, options, value, query, iconVersion, disableFilterOptions, onChange, onChangeQuery, }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query, disableFilterOptions).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
+    const SelectPopup = JSX(({ popupRef, options, value, iconVersion, onChange, renderOptions = renderDefaultOptions, 
+    // TODO: вынести в хук отвечающий за фильтрацию
+    query, onChangeQuery, disableFilterOptions, }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query, disableFilterOptions).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
                 e.stopPropagation();
                 if (onChange) {
                     onChangeQuery?.('');
                     onChange(option);
                 }
-            }, children: [option?.innDaData ? (jsxs("span", { children: [jsx(Text, { size: "text-s", children: option?.innDaData?.companyName }), jsxs("div", { className: "space-x-2", children: [jsx(Text, { size: "text-s", font: "font-light", children: formatOption(option) }), jsx(Text, { size: "text-s", font: "font-light", children: option?.innDaData?.companyAddress })] })] })) : (jsx("span", { className: "min-h-6", children: formatOption(option) })), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-2 pt-2xs', {
+            }, children: [renderOptions(option), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-2 pt-2xs', {
                         hidden: option.key !== value?.key,
                     }) })] }, option.key))) })) : null);
+    const renderDefaultOptions = (option) => (jsx("span", { className: "min-h-6", children: formatOption(option) }));
 
-    function useSelectPopup({ isOpen, options, value, query, onChange = noop, onClose = noop, iconVersion, disableFilterOptions = false, onChangeQuery = noop, }) {
+    function useSelectPopup({ isOpen, options, value, query, onChange = noop, onClose = noop, iconVersion, disableFilterOptions = false, onChangeQuery = noop, renderOptions, isSearch = false, }) {
         const popup = usePopupManager();
         const close = useCallback(() => {
             popup.close();
@@ -1467,8 +1465,11 @@
         const handleChange = useCallback((option) => {
             close();
             onChange(option);
-            onChangeQuery('');
+            onChangeQuery(isSearch && option?.text ? option.text : '');
         }, [close, onChange]);
+        useEffect(() => {
+            onChangeQuery(isSearch && value?.text ? value.text : '');
+        }, [value]);
         const inputRef = useRef(null);
         const popupRef = useOutsideClick(close);
         useEffect(() => {
@@ -1478,7 +1479,7 @@
             const inputElement = inputRef.current;
             const { top, left, width, height } = inputElement.getBoundingClientRect();
             popup.open({
-                popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, iconVersion: iconVersion, disableFilterOptions: disableFilterOptions, onChange: handleChange, onChangeQuery: onChangeQuery })),
+                popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, iconVersion: iconVersion, disableFilterOptions: disableFilterOptions, onChange: handleChange, onChangeQuery: onChangeQuery, renderOptions: renderOptions })),
                 top: top + window.scrollY + height,
                 left,
                 width,
@@ -1487,7 +1488,7 @@
         return inputRef;
     }
 
-    const Select = JSX(({ className, label, options = [], value, isSearch = false, isManualInput = false, disabled = false, iconVersion = 'black', onChange, onSearchQuery = noop, inputProps, disableFilterOptions = false, ...rest }) => {
+    const Select = JSX(({ className, label, options = [], value, isSearch = false, isManualInput = false, disabled = false, iconVersion = 'black', onChange, onSearchQuery = noop, inputProps, disableFilterOptions = false, renderOptions, ...rest }) => {
         const [isOpen, { setFalse: close, setTrue: open }] = useBool();
         const [query, setQuery] = useState('');
         const isDisabled = disabled || (!isManualInput && options.length === 0);
@@ -1496,15 +1497,15 @@
             isDisabled ? noop() : open();
         }, [isDisabled]);
         const handleClose = useCallback(() => {
-            !isManualInput && setQuery('');
+            !isSearch && setQuery('');
             close();
         }, [isManualInput]);
         const handleChangeQuery = useCallback((newQuery) => {
             setQuery(newQuery);
-            isManualInput && onChange?.({ key: newQuery, text: newQuery, innDaData: {} });
+            isManualInput && onChange?.({ key: newQuery, text: newQuery });
             debouncedOnSearchQuery?.(newQuery);
         }, [isManualInput, onChange, debouncedOnSearchQuery]);
-        const selectState = { query, value, options, isOpen, iconVersion };
+        const selectState = { query, value, options, isOpen, iconVersion, renderOptions, isSearch };
         const inputRef = useSelectPopup({
             onChange,
             onClose: handleClose,
@@ -2041,47 +2042,6 @@
 
     const CommentField = JSX(({ field, input }) => (jsx(InputControl, { className: "col-span-2", ...field(input?.name ?? ''), placeholder: "\u0412\u0430\u0448\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435", isTextarea: true })));
 
-    const CompanyNameByInnField = JSX(({ field, input }) => {
-        const fieldInn = field('innDadata');
-        useEffect(() => {
-            if (fieldInn?.value?.key !== '') {
-                const companyName = fieldInn?.value?.innDaData?.companyName;
-                companyName && field?.('companyNameByInn')?.onChange?.(companyName);
-            }
-        }, [fieldInn?.value]);
-        return (jsx(InputControl, { maxLength: 60, label: "\u041F\u043E\u043B\u043D\u043E\u0435 \u043D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435", ...field(input?.name ?? ''), ...input }));
-    });
-
-    const DesiredMeetingDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0434\u0430\u0442\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0438", ...field(input?.name ?? '') })));
-
-    const EmailField$1 = JSX(({ field, input }) => {
-        return jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field(input?.name ?? ''), ...input });
-    });
-
-    const SERVICE_TYPES = [{ key: 'ULTRASERVICE', text: 'Ультра' }];
-    const SERVICE_DIRECTIONS = [
-        { key: 'Физическое лицо' },
-        { key: 'Юридическое лицо / ИП' },
-    ];
-    const FEEDBACK_METHOD = [
-        { key: 'phone', text: 'Телефонный звонок' },
-        { key: 'email', text: 'Электронное сообщение' },
-    ];
-
-    const FeedbackMethodField = JSX(({ field, input }) => (jsx(SelectControl, { label: "\u0421\u043F\u043E\u0441\u043E\u0431 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0442\u0432\u0435\u0442\u0430", options: FEEDBACK_METHOD, ...field(input?.name ?? '') })));
-
-    const FullNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0418\u041E", ...field(input?.name ?? ''), ...input })));
-
-    const FullRegionField = JSX(({ field, input, params }) => {
-        const isPremium = params?.isPremium;
-        const branchByRegions = useBranchesByRegions(isPremium);
-        const regions = useMemo(() => branchByRegions?.map(({ region }) => ({
-            key: region,
-            text: region,
-        })), [branchByRegions]);
-        return (jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions, ...field(input?.name ?? '') }));
-    });
-
     function useAsyncEffect(effect, deps) {
         useEffect(() => {
             const free = effect();
@@ -2132,34 +2092,115 @@
     };
 
     const INN_DADATA_URL = 'suggest/party';
-    const useInn = async (searchQuery) => (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
+    const useDadataParty = async (searchQuery) => (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
         fullName: _?.value,
         address: _?.data?.address?.value,
         inn: _?.data?.inn,
     }));
 
-    const InnDadataField = JSX(({ field, input = {} }) => {
-        const [options, setOptions] = useState([]);
+    const FIELD_MAPPING = {
+        dadataPartyInnSelect: {
+            fieldValue: 'inn',
+            linkedFieldName: 'dadataPartyNameSelect',
+            linkedFieldValue: 'fullName',
+        },
+        dadataPartyNameSelect: {
+            fieldValue: 'fullName',
+            linkedFieldName: 'dadataPartyInnSelect',
+            linkedFieldValue: 'inn',
+        },
+    };
+    const FIELD_CONFIG = {
+        dadataPartyInnSelect: {
+            label: 'ИНН',
+            placeholder: 'Введите ИНН',
+            inputProps: {
+                isInteger: true,
+                maxLength: 12,
+            },
+        },
+        dadataPartyNameSelect: {
+            label: 'Полное наименование',
+            placeholder: 'Введите полное наименование',
+        },
+    };
+    const DadataPartySelectField = JSX(({ field, input = {} }) => {
+        const fieldName = input.name ?? '';
+        const linkedField = FIELD_MAPPING[fieldName].linkedFieldName;
+        const linkedFieldValue = field(linkedField).value;
+        const linkedFieldValueData = linkedFieldValue?.data;
+        useAsyncEffect(async () => {
+            if (linkedFieldValueData?.fullName &&
+                linkedFieldValueData?.fullName !== field(fieldName)?.value?.data?.fullName) {
+                const fieldValues = getFieldValues(linkedFieldValue);
+                const { fullName, address, inn } = fieldValues;
+                const optionTextValue = getLinkedFieldValue(fieldValues, linkedField);
+                const dadataFields = useDadataParty(optionTextValue);
+                setSearchQuery(optionTextValue);
+                setOptions(await dadataFields);
+                field(fieldName)?.onChange?.({
+                    key: inn,
+                    text: optionTextValue,
+                    data: {
+                        fullName,
+                        address,
+                    },
+                });
+            }
+        }, [linkedFieldValueData]);
+        const [options, setOptions] = useState([]); // InnSuggestion
         const [searchQuery, setSearchQuery] = useState('');
         useAsyncEffect(async () => {
-            const fieldInns = useInn(searchQuery);
-            setOptions(await fieldInns);
+            const dadataFields = useDadataParty(searchQuery);
+            setOptions(await dadataFields);
             return options;
         }, [searchQuery]);
-        const getOptions = useMemo(() => {
-            return (options || []).map((item) => ({
-                key: item?.inn ?? '',
-                text: item?.inn,
-                innDaData: {
-                    companyName: item?.fullName,
-                    companyAddress: item?.address,
-                },
-            }));
-        }, [options]);
-        return (jsx(SelectControl, { label: "\u0418\u041D\u041D", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0418\u041D\u041D", options: getOptions, ...field(input.name ?? ''), isSearch: true, isManualInput: true, inputProps: {
-                isInteger: true,
-                maxLength: 12,
-            }, disableFilterOptions: true, onSearchQuery: setSearchQuery }));
+        const getOptions = useMemo(() => (options || []).map((item = {}) => ({
+            key: item.inn ?? '',
+            text: item[FIELD_MAPPING[fieldName].fieldValue],
+            data: {
+                fullName: item.fullName,
+                address: item.address,
+            },
+        })), [options]);
+        return (jsx(SelectControl, { ...FIELD_CONFIG[fieldName], options: getOptions, ...field(input.name ?? ''), isSearch: true, isManualInput: true, disableFilterOptions: true, onSearchQuery: setSearchQuery, renderOptions: renderOptions }));
+    });
+    const getFieldValues = (value) => ({
+        inn: value?.key,
+        fullName: value?.data?.fullName,
+        address: value?.data?.address,
+    });
+    const renderOptions = (option) => (jsxs("span", { children: [jsx(Text, { size: "text-s", children: option?.data?.fullName }), jsxs("div", { className: "space-x-2", children: [jsx(Text, { size: "text-s", font: "font-light", children: option?.key }), jsx(Text, { size: "text-s", font: "font-light", children: option?.data?.address })] })] }));
+    const getLinkedFieldValue = (fieldValues, linkedField) => fieldValues?.[FIELD_MAPPING[linkedField].linkedFieldValue];
+
+    const DesiredMeetingDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0434\u0430\u0442\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0438", ...field(input?.name ?? '') })));
+
+    const EmailField$1 = JSX(({ field, input }) => {
+        return jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field(input?.name ?? ''), ...input });
+    });
+
+    const SERVICE_TYPES = [{ key: 'ULTRASERVICE', text: 'Ультра' }];
+    const SERVICE_DIRECTIONS = [
+        { key: 'Физическое лицо' },
+        { key: 'Юридическое лицо / ИП' },
+    ];
+    const FEEDBACK_METHOD = [
+        { key: 'phone', text: 'Телефонный звонок' },
+        { key: 'email', text: 'Электронное сообщение' },
+    ];
+
+    const FeedbackMethodField = JSX(({ field, input }) => (jsx(SelectControl, { label: "\u0421\u043F\u043E\u0441\u043E\u0431 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0442\u0432\u0435\u0442\u0430", options: FEEDBACK_METHOD, ...field(input?.name ?? '') })));
+
+    const FullNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0418\u041E", ...field(input?.name ?? ''), ...input })));
+
+    const FullRegionField = JSX(({ field, input, params }) => {
+        const isPremium = params?.isPremium;
+        const branchByRegions = useBranchesByRegions(isPremium);
+        const regions = useMemo(() => branchByRegions?.map(({ region }) => ({
+            key: region,
+            text: region,
+        })), [branchByRegions]);
+        return (jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions, ...field(input?.name ?? '') }));
     });
 
     const InnField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0418\u041D\u041D", isInteger: true, maxLength: 12, ...input, ...field(input?.name ?? '') })));
@@ -2375,9 +2416,9 @@
         typeForm: defaultValidator(),
         consentToReceiveMaterials: agreementValidator,
         consentDataProcessing: agreementValidator,
-        partnerSymbolCode: defaultValidator(),
-        innDadata: innDadataValidator('Укажите ИНН'),
-        companyNameByInn: defaultValidator(),
+        partnerSymbolCode: defaultValidator('Укажите идентификатор партнёра'),
+        dadataPartyInnSelect: innDadataValidator('Укажите ИНН'),
+        dadataPartyNameSelect: defaultValidator('Укажите наименование организации'),
     };
     const getFormValidator = (fieldDefs, externalValidatorObj = {}) => {
         const requiredFields = fieldDefs.filter((_) => Boolean(_?.required && _?.name));
@@ -2524,9 +2565,9 @@
         comment: CommentField,
         fullRegion: FullRegionField,
         partnerSymbolCode: (props) => (jsx(PartnerSymbolCodeField, { ...props, source: AGENTS_REF })),
-        innDadata: InnDadataField,
-        companyNameByInn: CompanyNameByInnField,
         partnerName: (props) => jsx(PartnerNameField, { ...props, source: AGENTS_REF }),
+        dadataPartyNameSelect: DadataPartySelectField,
+        dadataPartyInnSelect: DadataPartySelectField,
     };
     const getField = (field, params, externalInputs = {}) => (input, i) => {
         const fieldsRegister = {
@@ -2598,7 +2639,7 @@
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
     const getFormatData = (data) => {
-        const { acquiringType, onlineCheckout, posTerminal, amount, term, annualRevenue, serviceType, vedTypes, region, inn, sufferedFrom, situationDescription, applierType, isPremium, ...usedData } = data;
+        const { acquiringType, onlineCheckout, posTerminal, amount, term, annualRevenue, serviceType, vedTypes, region, inn, sufferedFrom, situationDescription, applierType, isPremium, dadataPartyNameSelect, partnerSymbolCode, dadataPartyInnSelect, ...usedData } = data;
         const partnerComments = acquiringType || annualRevenue ? getPartnerComments(data) : null;
         const formatData = {
             ...usedData,
@@ -2609,6 +2650,10 @@
             ...(serviceType ? { typeForm: serviceType } : {}),
             ...getIncidentComment(sufferedFrom?.text, situationDescription),
             ...getIsClient(applierType),
+            ...getDadataValues([
+                [dadataPartyInnSelect, 'inn'],
+                [dadataPartyNameSelect, 'fullName'],
+            ]),
         };
         return Object.fromEntries(Object.entries(formatData)?.map(([k, v]) => [k, v?.key || v]));
     };
@@ -2622,6 +2667,12 @@
             vedTypes: Object.fromEntries(VED_TYPES.map(({ id }) => [id, id === vedTypes])),
         }
         : {};
+    const getDadataValues = (fields) => fields.reduce((acc, [field, name]) => {
+        if (field?.text && name) {
+            acc[name] = field.text;
+        }
+        return acc;
+    }, {});
 
     const initialFormState$1 = {
         typeForm: '',
@@ -12053,7 +12104,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.912";
+    const packageVersion = "0.14.914";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;