@mindly/ui-components 7.5.1 → 8.0.0-alpha.31

package/dist/esm/lib2/features/CardModal/CardModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import classNames from 'classnames';
+import styles from './CardModal.module.css';
+import { IonModal, isPlatform } from '@ionic/react';
+import { IconButton } from '../../shared/ui/IconButton';
+import { AppHeader_v2 as AppHeader, IconClose, IconLeftArrow, Typography, TypographyVariantsEnum, useDomRef, useEvent, } from '../../shared';
+const CardModal = React.forwardRef(({ isOpen, presentingElement, onDidDismiss, children, backButton, renderHeader, canDismiss = true, isShowHandle = isPlatform('ios') && !isPlatform('desktop'), isShowCloseButton = true, mode, title, subtitle, leftContent, onDidPresent, }, ref) => {
+    const modalRef = useDomRef(ref);
+    const onClose = React.useCallback(() => {
+        var _a;
+        (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
+    }, [modalRef.current]);
+    const handleDidDismiss = useEvent(() => {
+        // TODO: Temporary solution, remove backgroundColor from body;
+        document.body.style.backgroundColor = '';
+        onDidDismiss === null || onDidDismiss === void 0 ? void 0 : onDidDismiss();
+    });
+    const handleDidWillDismiss = useEvent(() => {
+        // TODO: Temporary solution, remove backgroundColor from body;
+        document.body.style.backgroundColor = '';
+    });
+    return (_jsxs(IonModal, Object.assign({ ref: modalRef, mode: mode, isOpen: isOpen, canDismiss: canDismiss, presentingElement: presentingElement, onDidDismiss: handleDidDismiss, onWillDismiss: handleDidWillDismiss, className: classNames({ [styles.fullScreen]: !isPlatform('hybrid') }), onDidPresent: onDidPresent }, { children: [renderHeader ? (renderHeader({ backButton, onClose })) : (_jsxs(AppHeader, Object.assign({ className: classNames('relative', styles.header) }, { children: [isShowHandle && (_jsx("div", { className: 'absolute top-1 left-2/4 w-[36px] h-[5px] rounded-sm z-20 -translate-x-2/4 bg-color-background-gray-black opacity-[0.15]' })), _jsxs("div", Object.assign({ className: classNames('relative grid grid-cols-5 col-span-1', {
+                            'pt-[17.5px]': isShowHandle,
+                            'pt-[7.5px]': !isShowHandle,
+                        }) }, { children: [_jsx("div", Object.assign({ slot: "start", className: classNames({
+                                    'order-first justify-self-start flex items-center': !backButton,
+                                    'order-last justify-self-end flex items-center': backButton,
+                                }) }, { children: leftContent })), _jsxs("div", Object.assign({ className: "order-2 col-span-3 self-center flex flex-col justify-center items-center" }, { children: [title && (_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text15Semi, align: "center" }, { children: title }))), subtitle && (_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text13Regular, align: "center", opacity: 50 }, { children: subtitle })))] })), _jsx("div", Object.assign({ className: classNames('col-span-1', {
+                                    'order-first justify-self-start flex items-center': backButton,
+                                    'order-last justify-self-end flex items-center': !backButton,
+                                }) }, { children: isShowCloseButton && (_jsx(IconButton, { className: "self-center", onClick: onClose, icon: backButton ? (_jsx(IconLeftArrow, { className: "!text-typography-typography-primary" })) : (_jsx(IconClose, { className: "!text-typography-typography-primary" })) })) }))] }))] }))), children] })));
+});
+CardModal.displayName = 'CardModal';
+export default CardModal;

package/dist/esm/lib2/features/CardModal/index.js

@@ -0,0 +1 @@
+export { default as CardModal } from './CardModal';

package/dist/esm/lib2/features/ChangeLanguageModal/ChangeLanguageModal.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { IonModal } from '@ionic/react';
+import styles from './ChangeLanguageModal.module.css';
+import { ListBox, ListBoxItem, Typography, TypographyVariantsEnum, Container_v2 as Container, } from '../../shared';
+function ChangeLanguageModal(_a) {
+    var { title, onModalClose, onSelect, selected, languages } = _a, props = __rest(_a, ["title", "onModalClose", "onSelect", "selected", "languages"]);
+    const modalRef = useRef(null);
+    const [selectedValue, setSelectValue] = useState(new Set([selected]));
+    const acceptLanguageChange = (value) => {
+        setSelectValue(value);
+        onSelect([...value].toString());
+    };
+    const onDidDismiss = () => {
+        onModalClose === null || onModalClose === void 0 ? void 0 : onModalClose();
+        setSelectValue(new Set([selected]));
+    };
+    useEffect(() => {
+        var _a;
+        const calculatedHeight = `${65 * languages.length + 155}px`;
+        if (modalRef === null || modalRef === void 0 ? void 0 : modalRef.current)
+            (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--dynamic-modal-height', calculatedHeight);
+    }, [languages, modalRef === null || modalRef === void 0 ? void 0 : modalRef.current]);
+    return (_jsxs(IonModal, Object.assign({ ref: modalRef }, props, { onDidDismiss: onDidDismiss, initialBreakpoint: 1, breakpoints: [0, 1], className: styles.changeLanguageModal }, { children: [_jsx("div", Object.assign({ className: 'pt-5 pb-2 mt-7 w-full flex flex-col items-center justify-center' }, { children: _jsx(Typography, Object.assign({ align: 'center', variant: TypographyVariantsEnum.Title24Semi }, { children: title })) })), _jsx(Container, { children: _jsx("div", Object.assign({ className: 'flex flex-col flex-grow' }, { children: _jsx(ListBox, Object.assign({ "aria-label": "Change language", selectionMode: "single", selectedKeys: selectedValue, onSelectionChange: (selection) => acceptLanguageChange(selection) }, { children: languages === null || languages === void 0 ? void 0 : languages.map((lang, index, arr) => (_jsx(ListBoxItem, Object.assign({ textValue: lang.code, "aria-label": lang.code, divider: index !== arr.length - 1 }, { children: lang.name }), lang.code))) })) })) })] })));
+}
+export default ChangeLanguageModal;

package/dist/esm/lib2/features/ChangeLanguageModal/index.js

@@ -0,0 +1 @@
+export { default as ChangeLanguageModal } from './ChangeLanguageModal';

package/dist/esm/lib2/features/ChangeLanguageModal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/lib2/features/CheckBoxListFeature/CheckBoxListFeature.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { CheckBoxItem, SelectItemType } from '../../shared';
+const CheckBoxListFeature = ({ items, name, type, onChange, values = [], }) => {
+    return (_jsx("ul", { children: items.map(({ value, label, id }, index) => {
+            const currentValue = value || label;
+            return (_jsx("li", Object.assign({ className: classNames('flex p-0 cursor-pointer list-none outline-none', {
+                    'border-b border-borders-divider': index !== items.length - 1,
+                }) }, { children: _jsx(CheckBoxItem, { checked: values.includes(currentValue), type: type, name: name, value: currentValue, label: label, id: id, onChange: (checkBoxValue) => {
+                        if (type === SelectItemType.Checkbox) {
+                            const foundValue = values.find((val) => val === checkBoxValue);
+                            if (foundValue) {
+                                onChange(values.filter((val) => val !== foundValue));
+                            }
+                            else {
+                                onChange([...values, checkBoxValue]);
+                            }
+                        }
+                        else {
+                            onChange([checkBoxValue]);
+                        }
+                    } }) }), index));
+        }) }));
+};
+export default CheckBoxListFeature;

package/dist/esm/lib2/features/CheckBoxListFeature/index.js

@@ -0,0 +1 @@
+export { default as CheckBoxListFeature } from './CheckBoxListFeature';

package/dist/esm/lib2/features/CheckBoxSectionListFeature/CheckBoxSectionListFeature.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IonButtons } from '@ionic/react';
+import { IconCheckboxChecked, IconCheckboxUnchecked, SelectItemType, Typography, TypographyVariantsEnum, } from '../../shared';
+import { IconMixedButton } from '../../shared/assets/icons/IconMixedButton';
+import { CheckBoxListFeature } from '../CheckBoxListFeature';
+const CheckBoxSectionListFeature = ({ sections, name, defaultChecked = [], onChange, }) => {
+    const [values, setValues] = useState([]);
+    useEffect(() => {
+        onChange(values);
+    }, [values]);
+    useEffect(() => {
+        setValues(defaultChecked);
+    }, []);
+    return (_jsx("ul", { children: sections.map(({ name: sectionName, items }, index) => {
+            const allValues = items.map(({ value, label }) => value || label);
+            const isAllSelected = allValues.every((item) => values.includes(item));
+            const isSomeSelected = allValues.some((item) => values.includes(item)) && !isAllSelected;
+            const isNothingSelected = !isSomeSelected && !isAllSelected;
+            return (_jsxs("li", { children: [_jsxs(IonButtons, Object.assign({ onClick: () => {
+                            if (isNothingSelected) {
+                                setValues(Array.from(new Set([...values, ...allValues])));
+                            }
+                            if (isSomeSelected || isAllSelected) {
+                                const filteredItems = values.filter((val) => !allValues.includes(val));
+                                setValues(filteredItems);
+                            }
+                        }, className: "left-1/2 right-1/2 relative w-[100vw] p-4 mx-[-50vw] justify-between bg-color-background-anti-flash-light flex items-center gap-4" }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text16Semi }, { children: sectionName })), isNothingSelected && (_jsx(IconCheckboxUnchecked, { className: "w-6 h-6 rigth-24" })), isSomeSelected && (_jsx(IconMixedButton, { className: "w-6 h-6 rigth-24" })), isAllSelected && (_jsx(IconCheckboxChecked, { className: "w-6 h-6 rigth-24" }))] })), _jsx(CheckBoxListFeature, { values: values, items: items, name: name, onChange: (sectionValues) => {
+                            const preparedValues = values.filter((val) => !allValues.includes(val));
+                            setValues(Array.from(new Set([...preparedValues, ...sectionValues])));
+                        }, type: SelectItemType.Checkbox })] }, index));
+        }) }));
+};
+export default CheckBoxSectionListFeature;

package/dist/esm/lib2/features/CheckBoxSectionListFeature/index.js

@@ -0,0 +1 @@
+export { default as CheckBoxSectionListFeature } from './CheckBoxSectionListFeature';

package/dist/esm/lib2/features/ConsultationPricingFeature/ConsultationPricingFeature.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ItemCard, Typography, TypographyVariantsEnum } from '../../shared';
+import { priceNormalize } from '../../shared';
+import ConsultationUser from './ConsultationUser';
+import ConsultationPricingFeatureSkeleton from './ConsultationPricingFeatureSkeleton';
+import ConsultationUserSkeleton from './ConsultationUserSkeleton';
+import { SupportedCurrency } from '../../shared/types';
+const ConsultationPricingFeature = ({ t, consultation, isLoading, locale, timezone, onUserClick }) => {
+    const roundPercents = (value) => Math.round(value * 100) / 100;
+    const paymentData = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const convert = (value) => (value !== null && value !== void 0 ? value : 0) * 0.01;
+        const { payment } = consultation;
+        return {
+            localCurrency: ((_a = payment === null || payment === void 0 ? void 0 : payment.currency_local) !== null && _a !== void 0 ? _a : SupportedCurrency.UAH),
+            mainCurrency: ((_b = payment === null || payment === void 0 ? void 0 : payment.currency_default) !== null && _b !== void 0 ? _b : SupportedCurrency.EUR),
+            exchangeRate: (_c = payment === null || payment === void 0 ? void 0 : payment.exchange_rate) !== null && _c !== void 0 ? _c : 0,
+            discount: (_d = ((payment === null || payment === void 0 ? void 0 : payment.promocode_discount) || (payment === null || payment === void 0 ? void 0 : payment.subscription_discount))) !== null && _d !== void 0 ? _d : 0,
+            sessionsCount: (_e = payment === null || payment === void 0 ? void 0 : payment.subscription_sessions_count) !== null && _e !== void 0 ? _e : 0,
+            interval: (_f = payment === null || payment === void 0 ? void 0 : payment.subscription_interval_in_month) !== null && _f !== void 0 ? _f : 0,
+            sessionMainPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_original_in_cents),
+            sessionLocalPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_original_by_exchange_rate_in_cents),
+            discountMainPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_discount_in_cents),
+            discountLocalPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_discount_by_exchange_rate_in_cents),
+            promocodeMainPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_promocode_in_cents),
+            promocodeLocalPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_promocode_by_exchange_rate_in_cents),
+            sessionMainPriceAfterDiscount: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_in_cents),
+            sessionLocalPriceAfterDiscount: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_by_exchange_rate_in_cents),
+            commissionMainPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_commission_in_cents),
+            commissionLocalPrice: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_commission_by_exchange_rate_in_cents),
+            mainSpecialistRevenue: convert(payment === null || payment === void 0 ? void 0 : payment.price_default_after_commission_in_cents),
+            localSpecialistRevenue: convert(payment === null || payment === void 0 ? void 0 : payment.price_local_after_commission_by_exchange_rate_in_cents),
+            commission: (_g = payment === null || payment === void 0 ? void 0 : payment.commission) !== null && _g !== void 0 ? _g : 0,
+        };
+    }, [consultation]);
+    const items = [
+        {
+            text: t === null || t === void 0 ? void 0 : t('payments.session_details.price.title'),
+            mainPrice: priceNormalize({
+                price: paymentData.sessionMainPrice,
+                currency: paymentData.mainCurrency,
+            }),
+            localPrice: priceNormalize({
+                price: paymentData.sessionLocalPrice,
+                currency: paymentData.localCurrency,
+            }),
+            isBold: false,
+        },
+    ];
+    if (paymentData.interval || paymentData.promocodeMainPrice) {
+        items.push({
+            text: `${t === null || t === void 0 ? void 0 : t(paymentData.promocodeMainPrice
+                ? 'payments.session_details.promocode.title'
+                : 'payments.session_details.discount.title', {
+                discount: roundPercents(paymentData.discount * 100),
+            })}%`,
+            mainPrice: `-${priceNormalize({
+                price: paymentData.promocodeMainPrice || paymentData.discountMainPrice,
+                currency: paymentData.mainCurrency,
+            })}`,
+            localPrice: `-${priceNormalize({
+                price: paymentData.promocodeLocalPrice || paymentData.discountLocalPrice,
+                currency: paymentData.localCurrency,
+            })}`,
+            isBold: false,
+        }, {
+            text: t === null || t === void 0 ? void 0 : t('payments.session_details.session_amount.title'),
+            mainPrice: priceNormalize({
+                price: paymentData.sessionMainPriceAfterDiscount,
+                currency: paymentData.mainCurrency,
+            }),
+            localPrice: priceNormalize({
+                price: paymentData.sessionLocalPriceAfterDiscount,
+                currency: paymentData.localCurrency,
+            }),
+            isBold: true,
+        });
+    }
+    items.push({
+        text: `${t === null || t === void 0 ? void 0 : t('payments.session_details.fee.title', {
+            fee: paymentData.commission * 100,
+        })}%`,
+        mainPrice: `-${priceNormalize({
+            price: paymentData.commissionMainPrice,
+            currency: paymentData.mainCurrency,
+        })}`,
+        localPrice: `-${priceNormalize({
+            price: paymentData.commissionLocalPrice,
+            currency: paymentData.localCurrency,
+        })}`,
+        isBold: false,
+    }, {
+        text: t === null || t === void 0 ? void 0 : t('payments.session_details.total.title'),
+        mainPrice: priceNormalize({
+            price: paymentData.mainSpecialistRevenue,
+            currency: paymentData.mainCurrency,
+        }),
+        localPrice: priceNormalize({
+            price: paymentData.localSpecialistRevenue,
+            currency: paymentData.localCurrency,
+        }),
+        isBold: true,
+    });
+    if (isLoading) {
+        return (_jsxs(_Fragment, { children: [_jsx(ConsultationUserSkeleton, { className: "mb-14" }), _jsx(ConsultationPricingFeatureSkeleton, {})] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "mb-8" }, { children: _jsx(ConsultationUser, { t: t, name: consultation.name, date: consultation.date, avatar: consultation.avatar, locale: locale, timezone: timezone, onUserClick: onUserClick }) })), _jsxs("div", Object.assign({ className: "mb-8" }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Title48Semi, className: "mb-2 text-center" }, { children: priceNormalize({
+                            price: paymentData.mainSpecialistRevenue,
+                            currency: paymentData.mainCurrency,
+                        }) })), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-center" }, { children: priceNormalize({
+                            price: paymentData.localSpecialistRevenue,
+                            currency: paymentData.localCurrency,
+                        }) })), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-center" }, { children: t === null || t === void 0 ? void 0 : t('payments.session_details.exchange_rate.subtitle', {
+                            rate: paymentData.exchangeRate,
+                        }) }))] })), _jsxs(ItemCard, Object.assign({ className: "mb-5 !border-opacity-35 flex justify-between", variant: 'neutral', size: 'M' }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text16Regular, opacity: 50, className: "text-typography-typography-secondary flex items-center" }, { children: t === null || t === void 0 ? void 0 : t('payments.session_details.type.title') })), _jsxs("div", { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text16Regular, opacity: 100, className: "text-typography-typography-secondary text-right" }, { children: paymentData.interval
+                                    ? t === null || t === void 0 ? void 0 : t('payments.session_details.type.subscription')
+                                    : t === null || t === void 0 ? void 0 : t('payments.session_details.type.trial') })), !!paymentData.interval && (_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary text-right" }, { children: t === null || t === void 0 ? void 0 : t('payments.session_details.type.subscription_item', {
+                                    count: paymentData.sessionsCount,
+                                    period: paymentData.interval,
+                                }) })))] })] })), _jsx(ItemCard, Object.assign({ className: "mb-5 !border-opacity-35", variant: 'neutral', size: 'M' }, { children: items.map((item, index) => (_jsxs("div", Object.assign({ className: `flex justify-between border-color-black border-opacity-10 ${index < items.length - 1 ? 'pb-5' : ''}` }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text16Regular, opacity: 50, className: "text-typography-typography-secondary flex items-center w-2/3" }, { children: item.text })), _jsxs("div", Object.assign({ className: "flex flex-col items-end w-1/3" }, { children: [_jsx(Typography, Object.assign({ variant: TypographyVariantsEnum[item.isBold ? 'Text16Semi' : 'Text16Regular'], opacity: 100, className: "text-typography-typography-primary" }, { children: item.mainPrice })), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary" }, { children: item.localPrice }))] }))] }), `item-${index}`))) }))] }));
+};
+export default memo(ConsultationPricingFeature);

package/dist/esm/lib2/features/ConsultationPricingFeature/ConsultationPricingFeatureSkeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton_v2, ItemCard } from '../../shared';
+const ConsultationPricingFeatureSkeleton = (props) => {
+    const { className } = props;
+    return (_jsxs("div", Object.assign({ className: className }, { children: [_jsx("div", Object.assign({ className: 'flex justify-center mb-14' }, { children: _jsx(Skeleton_v2, { className: 'rounded-[28px] w-[142px] h-[30px]' }) })), _jsxs(ItemCard, Object.assign({ variant: 'neutral' }, { children: [_jsxs("div", Object.assign({ className: 'flex justify-between my-1 pb-4 border-b border-color-black border-opacity-10' }, { children: [_jsx(Skeleton_v2, { className: 'rounded-[12px] w-[102px] h-[14px]' }), _jsx(Skeleton_v2, { className: 'rounded-[12px] w-[74px] h-[14px]' })] })), _jsxs("div", Object.assign({ className: 'flex justify-between my-1 py-4 border-b border-color-black border-opacity-10' }, { children: [_jsx(Skeleton_v2, { className: 'rounded-[12px] w-[142px] h-[14px]' }), _jsx(Skeleton_v2, { className: 'rounded-[12px] w-[50px] h-[14px]' })] })), _jsxs("div", Object.assign({ className: 'flex justify-between my-1 pt-4' }, { children: [_jsx(Skeleton_v2, { className: 'rounded-[12px] w-[62px] h-[14px]' }), _jsx(Skeleton_v2, { className: 'rounded-[12px] w-[97px] h-[14px]' })] }))] }))] })));
+};
+export default ConsultationPricingFeatureSkeleton;

package/dist/esm/lib2/features/ConsultationPricingFeature/ConsultationUser.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { DateTime } from 'luxon';
+import { Typography, TypographyVariantsEnum, Badge, Avatar_v2, } from '../../shared';
+const ConsultationUser = ({ t, name, date, avatar, locale, timezone, onUserClick, }) => {
+    return (_jsxs("div", Object.assign({ className: "flex flex-col justify-center items-center" }, { children: [_jsxs("div", Object.assign({ onClick: onUserClick !== null && onUserClick !== void 0 ? onUserClick : undefined, className: "cursor-pointer flex flex-col justify-center items-center" }, { children: [_jsx(Avatar_v2, { src: avatar, alt: name, variant: 'medium' }), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Title20Semi, className: "mt-3 mb-1" }, { children: name }))] })), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50 }, { children: DateTime.fromJSDate(date)
+                    .setZone(timezone)
+                    .setLocale(locale)
+                    .toFormat('dd MMMM yyyy HH:mm') })), _jsxs(Typography, Object.assign({ variant: TypographyVariantsEnum.Text14Regular, opacity: 50, className: "mb-4" }, { children: [timezone, " (", DateTime.local().setLocale(locale).setZone(timezone).toFormat('ZZZZ'), ")"] })), DateTime.now() < DateTime.fromJSDate(date) && (_jsx(Badge, Object.assign({ variant: 'success', type: 'accent', className: "!bg-color-info-mint" }, { children: t === null || t === void 0 ? void 0 : t('payments.session_details.future_session.badge') })))] })));
+};
+export default memo(ConsultationUser);

package/dist/esm/lib2/features/ConsultationPricingFeature/ConsultationUserSkeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton_v2 } from '../../shared';
+const ConsultationUserSkeleton = (props) => {
+    const { className } = props;
+    return (_jsxs("div", Object.assign({ className: `${className} flex flex-col justify-center items-center` }, { children: [_jsx(Skeleton_v2, { className: 'rounded-full w-[72px] h-[72px] !mb-4' }), _jsxs("div", Object.assign({ className: 'my-1 flex flex-col items-center' }, { children: [_jsx(Skeleton_v2, { className: 'rounded-[12px] w-[142px] h-[14px] !mb-2' }), _jsx(Skeleton_v2, { className: 'rounded-[12px] w-[94px] h-[10px]' })] }))] })));
+};
+export default ConsultationUserSkeleton;

package/dist/esm/lib2/features/ConsultationPricingFeature/index.js

@@ -0,0 +1 @@
+export { default as ConsultationPricingFeature } from './ConsultationPricingFeature';

package/dist/esm/lib2/features/ContractDataFeature/styles.d.ts

@@ -1,160 +1 @@
-export declare const contractDataFeatureStyle: import("tailwind-variants").TVReturnType<{
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}, {
-    root: string;
-    subtitle: string;
-    icon: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}, {
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}>, {
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}, {
-    root: string;
-    subtitle: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnType<{
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}, {
-    root: string;
-    subtitle: string;
-    icon: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}, {
-    status: {
-        pending: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        not_signed: {
-            root: string;
-            subtitle: string;
-            icon: string;
-        };
-        expired: {};
-        none: {
-            root: string;
-        };
-        expired_none: {
-            root: string;
-        };
-        active: {};
-    };
-}>, unknown, unknown, undefined>>;
+export declare const contractDataFeatureStyle: any;

package/dist/esm/lib2/features/ContractTreeFeature/ContractTreeFeature.d.ts

@@ -5,5 +5,5 @@ interface ContentTreeProps {
     data: TreeNode[];
     className?: string;
 }
-declare const ContentTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<ContentTreeProps & React.RefAttributes<HTMLDivElement>>>;
+declare const ContentTree: React.NamedExoticComponent<ContentTreeProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentTree;

package/dist/esm/lib2/features/ContractTreeFeature/ContractTreeFeature.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, memo } from 'react';
+import classNames from 'clsx';
+import './ContractTreeFeature.css';
+import { replaceMarkdownWithReactElements } from '../../shared';
+const ContentRenderer = ({ node, level }) => {
+    const Tag = (() => {
+        switch (node.type) {
+            case '<h1>':
+                return 'h1';
+            case '<p>':
+                return 'p';
+            case '<li>':
+                return 'li';
+            case '<ol>':
+                return 'ol';
+            case '<ul>':
+                return 'ul';
+            default:
+                return Fragment;
+        }
+    })();
+    const tags = ['<h1>', '<p>'];
+    return (_jsxs(Tag, Object.assign({ className: classNames({
+            'nested-list': node.type === '<ol>',
+            'pl-7': node.type === '<ol>' && level === 2,
+            'pl-11': node.type === '<ol>' && level === 3,
+            'pl-5': node.type === '<ol>' && level === 4,
+            'pl-3': node.type === '<li>' && level === 1,
+            'my-2': node.type === '<li>',
+            'mt-5 font-inter-tight text-[20px] font-semibold leading-[140%]': node.type === '<h1>',
+            'my-5 font-inter text-[14px] leading-[140%]': node.type === '<p>',
+        }) }, { children: [node.title && !tags.includes(node.type) && (_jsx("span", Object.assign({ className: "my-5 font-inter text-[14px] leading-[140%]" }, { children: replaceMarkdownWithReactElements(node.title) }))), node.type === '<h1>' ? replaceMarkdownWithReactElements(node.title) : null, node.type === '<p>' ? replaceMarkdownWithReactElements(node.title) : null, node.children && node.children.length > 0 && (_jsx(_Fragment, { children: node.children.map((child, index) => (_jsx(ContentRenderer, { node: child, level: node.type === '<ol>' ? level + 1 : level }, index))) }))] })));
+};
+// ForwardRefExoticComponent for forwarding refs
+const ContentTree = memo(forwardRef(({ data, className }, ref) => (_jsx("div", Object.assign({ ref: ref, className: classNames(className, 'first-paragraph') }, { children: data.map((node, index) => (_jsx(ContentRenderer, { node: node, level: 1 }, index))) })))));
+// Fix the type of ContentTree
+ContentTree.displayName = 'ContentTree';
+export default ContentTree;

package/dist/esm/lib2/features/ContractTreeFeature/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export { default as ContractTreeFeature } from './ContractTreeFeature';

package/dist/esm/lib2/features/ContractTreeFeature/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/lib2/features/CountdownTimerFeature/CountdownTimerFeature.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ProgressBar_v2, Typography, TypographyVariantsEnum, } from '../../shared';
+const CountdownTimerFeature = ({ minutes, seconds, onCompleted, t, }) => {
+    const initialTimeInSeconds = minutes * 60 + seconds;
+    const initialTimeInMilliSeconds = initialTimeInSeconds * 1000;
+    const [remainingTime, setRemainingTime] = useState(initialTimeInSeconds);
+    const [remainingTimeInMilli, setRemainingTimeInMilli] = useState(initialTimeInMilliSeconds);
+    useEffect(() => {
+        const progressBarTimer = setInterval(() => {
+            setRemainingTimeInMilli((prevTime) => {
+                if (prevTime <= 0) {
+                    clearInterval(progressBarTimer);
+                    return 0;
+                }
+                else {
+                    return prevTime - 100;
+                }
+            });
+        }, 100);
+        return () => clearInterval(progressBarTimer);
+    }, [minutes, seconds]);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setRemainingTime((prevTime) => {
+                if (prevTime <= 0) {
+                    clearInterval(timer);
+                    onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
+                    return 0;
+                }
+                else {
+                    return prevTime - 1;
+                }
+            });
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [minutes, seconds, onCompleted]);
+    const minutesLeft = Math.floor(remainingTime / 60);
+    const secondsLeft = remainingTime % 60;
+    return (_jsxs("div", Object.assign({ className: 'flex flex-col gap-5 items-center' }, { children: [_jsx(ProgressBar_v2, { progress: remainingTimeInMilli / initialTimeInMilliSeconds, reversed: true, variant: 'success' }), _jsx(Typography, Object.assign({ variant: TypographyVariantsEnum.Text16Regular }, { children: t === null || t === void 0 ? void 0 : t('timer.time_left_hint', {
+                    minutes: minutesLeft,
+                    seconds: secondsLeft,
+                }) }))] })));
+};
+export default CountdownTimerFeature;

package/dist/esm/lib2/features/CountdownTimerFeature/CountdownTimerFeature.stories.js

@@ -0,0 +1,31 @@
+import CountdownTimerFeature from './CountdownTimerFeature';
+const meta = {
+    title: 'V2/Features/CountdownTimerFeature',
+    component: CountdownTimerFeature,
+    argTypes: {
+        onCompleted: {
+            action: 'onCompleted',
+        },
+    },
+};
+export default meta;
+const translate = {
+    'timer.time_left_hint': 'Залишилось {{minutes}} хв {{seconds}} сек',
+};
+const keys = ['{{minutes}}', '{{seconds}}'];
+export const Default = {
+    args: {
+        t: (key, values) => {
+            let translation = translate[key] || key;
+            keys.forEach((placeholder) => {
+                const value = values[placeholder.slice(2, -2).trim()];
+                if (value !== undefined) {
+                    translation = translation.replace(new RegExp(placeholder, 'g'), String(value));
+                }
+            });
+            return translation;
+        },
+        minutes: 1,
+        seconds: 59,
+    },
+};

package/dist/esm/lib2/features/CountdownTimerFeature/index.js

@@ -0,0 +1 @@
+export { default as CountdownTimerFeature } from './CountdownTimerFeature';