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

package/dist/cjs/lib2/features/SlotsGrid/SlotsGrid.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const SlotsGrid_1 = __importDefault(require("./SlotsGrid"));
+const meta = {
+    title: 'V2/Features/SlotsGrid',
+    component: SlotsGrid_1.default,
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        times: ['14:00', '15:00', '16:00', '17:00'],
+        selectedKeys: new Set(['14:00']),
+    },
+};

package/dist/cjs/lib2/features/SlotsGrid/SlotsGridItem.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Typography_1 = require("../../shared/ui/Typography");
+const styles_1 = require("./styles");
+function SlotsGridItem({ isSelected, isDisabled, time, className, onSelectionChange, }) {
+    const { listItem } = (0, styles_1.slotsStyles)({ isSelected, isDisabled });
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onSelectionChange, disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: Typography_1.TypographyVariantsEnum.Text14Regular, className: listItem({ className }) }, { children: time })) })));
+}
+exports.default = React.memo(SlotsGridItem);

package/dist/cjs/lib2/features/SlotsGrid/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlotsGridItem = exports.SlotsGrid = void 0;
+var SlotsGrid_1 = require("./SlotsGrid");
+Object.defineProperty(exports, "SlotsGrid", { enumerable: true, get: function () { return __importDefault(SlotsGrid_1).default; } });
+var SlotsGridItem_1 = require("./SlotsGridItem");
+Object.defineProperty(exports, "SlotsGridItem", { enumerable: true, get: function () { return __importDefault(SlotsGridItem_1).default; } });

package/dist/cjs/lib2/features/SlotsGrid/styles.d.ts

@@ -1,59 +1 @@
-export declare const slotsStyles: import("tailwind-variants").TVReturnType<{
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}, {
-    list: string;
-    listItem: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}, {
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}>, {
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}, {
-    list: string;
-    listItem: string;
-}, import("tailwind-variants").TVReturnType<{
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}, {
-    list: string;
-    listItem: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}, {
-    isSelected: {
-        true: {};
-    };
-    isDisabled: {
-        true: {};
-    };
-}>, unknown, unknown, undefined>>;
+export declare const slotsStyles: any;

package/dist/cjs/lib2/features/SlotsGrid/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slotsStyles = void 0;
+const tailwind_variants_1 = require("tailwind-variants");
+exports.slotsStyles = (0, tailwind_variants_1.tv)({
+    slots: {
+        list: 'grid grid-cols-4 gap-x-2 gap-y-3',
+        listItem: 'border border-solid border-typography-typography-primary/10 p-2 rounded-[18px] text-center cursor-pointer',
+    },
+    variants: {
+        isSelected: {
+            true: {},
+        },
+        isDisabled: {
+            true: {},
+        },
+    },
+    compoundSlots: [
+        {
+            slots: ['list'],
+            isDisabled: true,
+            className: '',
+        },
+        {
+            slots: ['listItem'],
+            isSelected: true,
+            className: 'bg-typography-typography-primary !text-color-background-white',
+        },
+        {
+            slots: ['listItem'],
+            isDisabled: true,
+            isSelected: true,
+            className: '!opacity-30 !cursor-default',
+        },
+        {
+            slots: ['listItem'],
+            isDisabled: true,
+            isSelected: false,
+            className: '!cursor-default !text-typography-typography-primary/30 !border-typography-typography-primary/6',
+        },
+    ],
+});

package/dist/cjs/lib2/features/SlotsGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/lib2/features/SpecialistAreaListFeature/SpecialistAreaListFeature.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("../../index");
+const classnames_1 = __importDefault(require("classnames"));
+const SpecialistAreaList = ({ list, title, limit, className, classNameTitle, fillTextWithMatch, t, presentingElement, }) => {
+    const modalRef = (0, react_1.useRef)(null);
+    const titleContent = (variant) => title && ((0, jsx_runtime_1.jsx)(index_1.Typography, Object.assign({ variant: variant || index_1.TypographyVariantsEnum.Title18Semi, className: (0, classnames_1.default)('mt-6 mb-2', classNameTitle) }, { children: title })));
+    const listLength = (0, react_1.useMemo)(() => list.length, [list.length]);
+    const renderList = (limitItems = limit) => {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('flex flex-col', className) }, { children: list.slice(0, limitItems).map(({ text, hasMatch }, index) => (
+            // this array is not mutable so we can use index as key
+            (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex items-center mt-2 first:mt-0" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('min-w-4 mr-2', {
+                            'text-color-info-green': hasMatch,
+                            'text-color-black': !hasMatch,
+                        }) }, { children: hasMatch ? (0, jsx_runtime_1.jsx)(index_1.IconCheckboxChecked, { size: 16 }) : (0, jsx_runtime_1.jsx)(index_1.IconDot, {}) })), (0, jsx_runtime_1.jsx)(index_1.Typography, Object.assign({ variant: index_1.TypographyVariantsEnum.Text14Regular, className: (0, classnames_1.default)({
+                            '!text-color-info-green': hasMatch && fillTextWithMatch,
+                        }) }, { children: text }))] }), index))) })));
+    };
+    const handleOpenModal = () => {
+        var _a;
+        (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.present();
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleContent(), renderList(), limit && listLength > limit && ((0, jsx_runtime_1.jsx)(index_1.ShowMore, Object.assign({ className: "mt-3", onClick: handleOpenModal }, { children: t === null || t === void 0 ? void 0 : t('therapist_details.show_more') }))), (0, jsx_runtime_1.jsx)(index_1.ModalSheet, Object.assign({ ref: modalRef, withCloseButton: true, presentingElement: presentingElement }, { children: (0, jsx_runtime_1.jsxs)(index_1.Container_v2, { children: [titleContent(index_1.TypographyVariantsEnum.Title28Semi), renderList(listLength)] }) }))] }));
+};
+exports.default = SpecialistAreaList;

package/dist/cjs/lib2/features/SpecialistAreaListFeature/SpecialistAreaListFeature.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLimit = exports.WithoutMatch = exports.Default = void 0;
+const SpecialistAreaListFeature_1 = __importDefault(require("./SpecialistAreaListFeature"));
+const mock_1 = require("../../shared/utils/mock");
+const meta = {
+    title: 'v2/Features/SpecialistAreaListFeature',
+    component: SpecialistAreaListFeature_1.default,
+};
+exports.default = meta;
+const t = (0, mock_1.mockT)();
+exports.Default = {
+    args: {
+        t,
+        list: [
+            { text: 'Психотерапевт, психолог, + ще 3', hasMatch: true },
+            {
+                text: 'Працює в методиці Когнітивно-поведінкова терапія (КПТ), Психоаналіз, Позитивна психологія та інші',
+                hasMatch: true,
+            },
+        ],
+    },
+};
+exports.WithoutMatch = {
+    args: {
+        t,
+        list: [
+            { text: 'Психотерапевт, психолог, + ще 3', hasMatch: false },
+            {
+                text: 'Працює в методиці Когнітивно-поведінкова терапія (КПТ), Психоаналіз, Позитивна психологія та інші',
+                hasMatch: false,
+            },
+        ],
+    },
+};
+exports.WithLimit = {
+    args: {
+        t,
+        limit: 3,
+        list: [
+            { text: 'Когнітивно-поведінкова терапія', hasMatch: true },
+            { text: 'Тілесна терапія', hasMatch: false },
+            { text: 'Гештальт-підхід', hasMatch: false },
+            { text: 'Дитячо-батьківські відносини', hasMatch: false },
+            { text: 'Танцювально-рухова терапія', hasMatch: false },
+        ],
+    },
+};

package/dist/cjs/lib2/features/SpecialistAreaListFeature/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialistAreaListFeature = void 0;
+var SpecialistAreaListFeature_1 = require("./SpecialistAreaListFeature");
+Object.defineProperty(exports, "SpecialistAreaListFeature", { enumerable: true, get: function () { return __importDefault(SpecialistAreaListFeature_1).default; } });

package/dist/cjs/lib2/features/SpecialistAreaListFeature/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/lib2/features/SpecialistEducationsFeature/SpecialistEducationsFeature.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("../../index");
+const classnames_1 = __importDefault(require("classnames"));
+const EducationCard_v2_1 = require("../../shared/ui/EducationCard_v2");
+const SpecialistEducationsFeature = ({ list, limit, className, classNameTitle, presentingElement, t, }) => {
+    const modalRef = (0, react_1.useRef)(null);
+    const titleContent = (variant) => ((0, jsx_runtime_1.jsx)(index_1.Typography, Object.assign({ variant: variant || index_1.TypographyVariantsEnum.Title18Semi, className: (0, classnames_1.default)('mt-6', classNameTitle) }, { children: t === null || t === void 0 ? void 0 : t('therapist_details.education.title') })));
+    const listLength = (0, react_1.useMemo)(() => list.length, [list.length]);
+    const renderList = (limitItems = limit) => {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('flex flex-col', className) }, { children: list.slice(0, limitItems).map((it, index) => (
+            // this array is not mutable so we can use index as key
+            (0, jsx_runtime_1.jsx)(EducationCard_v2_1.EducationCard_v2, { education: it, t: t }, index))) })));
+    };
+    const handleOpenModal = () => {
+        var _a;
+        (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.present();
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleContent(), renderList(), limit && listLength > limit && ((0, jsx_runtime_1.jsx)(index_1.ShowMore, Object.assign({ onClick: handleOpenModal }, { children: t === null || t === void 0 ? void 0 : t('therapist_details.show_more') }))), (0, jsx_runtime_1.jsx)(index_1.ModalSheet, Object.assign({ ref: modalRef, presentingElement: presentingElement, withCloseButton: true }, { children: (0, jsx_runtime_1.jsxs)(index_1.Container_v2, { children: [titleContent(index_1.TypographyVariantsEnum.Title28Semi), renderList(listLength)] }) }))] }));
+};
+exports.default = SpecialistEducationsFeature;

package/dist/cjs/lib2/features/SpecialistEducationsFeature/SpecialistEducationsFeature.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const SpecialistEducationsFeature_1 = __importDefault(require("./SpecialistEducationsFeature"));
+const mock_1 = require("../../shared/utils/mock");
+const meta = {
+    title: 'v2/Features/SpecialistEducationsFeature',
+    component: SpecialistEducationsFeature_1.default,
+};
+exports.default = meta;
+const t = (0, mock_1.mockT)();
+exports.Default = {
+    args: {
+        limit: 2,
+        t,
+        list: [
+            {
+                faculty: 'Діти і Війна. Техніки зцілення',
+                institution_name: 'Український інститут когнітивно-поведінкової терапії',
+                year_start: 2022,
+            },
+            {
+                institution_name: 'Програма захисту дітей «Save the Children»',
+                faculty: 'Перша психологічна допомога дітям в надзвичайних ситуаціях',
+                year_start: 2015,
+                year_end: 2022,
+            },
+            {
+                faculty: 'Психологія',
+                institution_name: 'Київський національний економічний університет ім. Вадима Гетьмана',
+                year_start: 2017,
+                year_end: 2020,
+            },
+            {
+                institution_name: 'Український інститут когнітивно-поведінкової терапії',
+                faculty: 'Діти і Війна. Техніки зцілення',
+                year_start: 2022,
+            },
+        ],
+    },
+};

package/dist/cjs/lib2/features/SpecialistEducationsFeature/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialistEducationsFeature = void 0;
+var SpecialistEducationsFeature_1 = require("./SpecialistEducationsFeature");
+Object.defineProperty(exports, "SpecialistEducationsFeature", { enumerable: true, get: function () { return __importDefault(SpecialistEducationsFeature_1).default; } });

package/dist/cjs/lib2/features/SpecialistInfoColumnFeature/SpecialistInfoColumnFeature.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../shared");
+const IconHeart_1 = require("../../shared/assets/icons/IconHeart");
+const format_1 = require("../../shared/utils/format");
+const SpecialistInfoColumnFeature = ({ t, rating = 0, reviews = 0, yearsOfExperience, hoursOfPractice, sessionPrice, currentPriceType, isFavourite, onToggleFavourite, sessionDurationMinutes, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col w-1/2" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text18Semi }, { children: (0, shared_1.priceNormalize)({
+                                    price: sessionPrice,
+                                    currency: currentPriceType,
+                                    roundingTo: currentPriceType === shared_1.SupportedCurrency.UAH ? 0 : 2,
+                                }) })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text13Regular }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.session_duration', {
+                                    value: sessionDurationMinutes,
+                                }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col w-1/2" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text18Semi }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex items-center" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.IconStarFilled, { className: "w-5 h-5" }), " ", (0, format_1.roundToPrecision)(rating)] })) })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text13Regular }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.number_of_reviews', { count: reviews }) }))] })), (0, jsx_runtime_1.jsx)(shared_1.IconButton, { onClick: onToggleFavourite, icon: (0, jsx_runtime_1.jsx)(IconHeart_1.IconHeart, { filled: isFavourite }), className: "flex-shrink-0" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col w-1/2" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text18Semi }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.years_of_experience', {
+                                    count: yearsOfExperience,
+                                }) })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text13Regular }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.years_of_experience_label') }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-col w-1/2" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text18Semi }, { children: hoursOfPractice &&
+                                    (t === null || t === void 0 ? void 0 : t('therapist_list_item.hours_of_practice', {
+                                        value: (0, format_1.formatByDigits)(hoursOfPractice),
+                                        count: hoursOfPractice,
+                                    })) })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text13Regular }, { children: t === null || t === void 0 ? void 0 : t('therapist_list_item.hours_of_practice_label') }))] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 w-4" })] }))] })));
+};
+exports.default = SpecialistInfoColumnFeature;

package/dist/cjs/lib2/features/SpecialistInfoColumnFeature/SpecialistInfoColumnFeature.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const SpecialistInfoColumnFeature_1 = __importDefault(require("./SpecialistInfoColumnFeature"));
+const mock_1 = require("../../shared/utils/mock");
+const shared_1 = require("../../shared");
+const meta = {
+    title: 'V2/Features/SpecialistInfoColumnFeature',
+    component: SpecialistInfoColumnFeature_1.default,
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        t: (0, mock_1.mockT)(),
+        rating: 4.99,
+        reviews: 514,
+        sessionPrice: 2200,
+        currentPriceType: shared_1.SupportedCurrency.UAH,
+        sessionDurationMinutes: 90,
+        yearsOfExperience: 5.5,
+        hoursOfPractice: 3234,
+    },
+};

package/dist/cjs/lib2/features/SpecialistInfoColumnFeature/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialistInfoColumnFeature = void 0;
+var SpecialistInfoColumnFeature_1 = require("./SpecialistInfoColumnFeature");
+Object.defineProperty(exports, "SpecialistInfoColumnFeature", { enumerable: true, get: function () { return __importDefault(SpecialistInfoColumnFeature_1).default; } });

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/PaymentBadge.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const luxon_1 = require("luxon");
+const shared_1 = require("../../shared");
+const useSpecialistPayments_1 = require("../../shared/hooks/useSpecialistPayments");
+const PaymentBadge = ({ t, date, locale, className, }) => {
+    const jsDate = new Date(date);
+    const { isOldMonth, isPreviousMonth } = (0, useSpecialistPayments_1.getDatePosition)(jsDate);
+    const dateForOldOrCurrentMonth = (0, useSpecialistPayments_1.useFormattedDate)({
+        date: luxon_1.DateTime.fromObject({
+            year: luxon_1.DateTime.fromJSDate(jsDate).year,
+            month: luxon_1.DateTime.fromJSDate(jsDate).month,
+        }).toJSDate(),
+        locale,
+    });
+    const dateForPreviousMonth = (0, useSpecialistPayments_1.useFormattedDate)({
+        date: jsDate,
+        locale,
+    });
+    if (isOldMonth) {
+        return ((0, jsx_runtime_1.jsx)(shared_1.Badge, Object.assign({ className: className, variant: "success" }, { children: t === null || t === void 0 ? void 0 : t('payments.payout_paid.badge', {
+                date: dateForOldOrCurrentMonth,
+            }) })));
+    }
+    if (isPreviousMonth) {
+        return ((0, jsx_runtime_1.jsx)(shared_1.Badge, Object.assign({ className: className, variant: "attention" }, { children: t === null || t === void 0 ? void 0 : t('payments.payout_in_progress.badge', {
+                date: dateForPreviousMonth,
+            }) })));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+};
+exports.default = (0, react_1.memo)(PaymentBadge);

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/SpecialistPaymentCommonCardFeature.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const priceNormalizer_1 = require("../../shared/utils/priceNormalizer");
+const shared_1 = require("../../shared");
+const useSpecialistPayments_1 = require("../../shared/hooks/useSpecialistPayments");
+const PaymentBadge_1 = __importDefault(require("./PaymentBadge"));
+const SpecialistPaymentCommonCardSkeleton_1 = __importDefault(require("./SpecialistPaymentCommonCardSkeleton"));
+const SpecialistPaymentCommonCardFeature = ({ t, revenue, currency, showRevenue, currencyProps, commissionRates, commissionValue, showCommission, calendarDate, totalSessionsCount, futureSessionsCount, isLoading, hideProgressBar, locale, }) => {
+    var _a;
+    const ranges = Object.keys(commissionRates).map((key, index, list) => {
+        return {
+            start: index - 1 >= 0 ? parseInt(list[index - 1], 10) + 1 : 1,
+            end: parseInt(key, 10),
+            value: Number(commissionRates[Number(key)]),
+        };
+    });
+    let sessionsInFuture = futureSessionsCount;
+    if (sessionsInFuture > totalSessionsCount) {
+        sessionsInFuture = totalSessionsCount;
+    }
+    const progress = totalSessionsCount - sessionsInFuture;
+    const { isPreviousMonth, isOldMonth, isCurrentMonth, isFutureMonth } = (0, useSpecialistPayments_1.getDatePosition)(calendarDate);
+    const displayedCommission = commissionValue || ((_a = ranges[0]) === null || _a === void 0 ? void 0 : _a.value) || 0;
+    return ((0, jsx_runtime_1.jsxs)(shared_1.ItemCard, Object.assign({ variant: 'neutral' }, { children: [showRevenue && currency && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary" }, { children: t === null || t === void 0 ? void 0 : t(isFutureMonth || isCurrentMonth
+                            ? 'payments.planned_income.title'
+                            : 'payments.income.title') })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-between items-center" }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Title48Semi, className: "text-typography-typography-secondary" }, { children: (0, priceNormalizer_1.priceNormalize)(Object.assign({ price: Number((revenue !== null && revenue !== void 0 ? revenue : 0) * 0.01), currency }, (currencyProps || {}))) })), isOldMonth && (0, jsx_runtime_1.jsx)(shared_1.IconPaper, { className: "cursor-pointer" })] }))] })), isLoading && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-5" }, { children: (0, jsx_runtime_1.jsx)(SpecialistPaymentCommonCardSkeleton_1.default, {}) }))), !isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showRevenue && calendarDate && ((0, jsx_runtime_1.jsx)(PaymentBadge_1.default, { t: t, className: "mt-5 !block !w-fit", date: calendarDate, locale: locale })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCommission && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `inline-block w-1/2 ${showRevenue ? 'mt-5' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary" }, { children: t === null || t === void 0 ? void 0 : t('payments.commission_rate.title') })), (0, jsx_runtime_1.jsxs)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Title20Semi, className: "text-typography-typography-secondary" }, { children: [displayedCommission * 100, "%"] }))] }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `
+              ${isCurrentMonth ? 'w-full' : ''} 
+              ${(showCommission && isCurrentMonth) || showRevenue ? 'mt-5' : ''} 
+              inline-block
+            ` }, { children: [!isFutureMonth && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${isCurrentMonth ? 'w-1/2' : ''} inline-block` }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary" }, { children: t === null || t === void 0 ? void 0 : t('payments.sessions_held.title') })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Title20Semi, className: "text-typography-typography-secondary" }, { children: progress }))] }))), !isOldMonth && !isPreviousMonth && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${!isFutureMonth ? 'w-1/2' : ''} inline-block` }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Text14Regular, opacity: 50, className: "text-typography-typography-secondary" }, { children: t === null || t === void 0 ? void 0 : t('payments.future_sessions.title') })), (0, jsx_runtime_1.jsx)(shared_1.Typography, Object.assign({ variant: shared_1.TypographyVariantsEnum.Title20Semi, className: "text-typography-typography-secondary" }, { children: sessionsInFuture }))] })))] }))] }), !hideProgressBar && ((0, jsx_runtime_1.jsx)(shared_1.ProgressBarDashed, { t: t, ranges: ranges, progress: progress, maxValue: totalSessionsCount, className: "mt-5" }))] }))] })));
+};
+exports.default = (0, react_1.memo)(SpecialistPaymentCommonCardFeature);

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/SpecialistPaymentCommonCardSkeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../shared");
+const styles_1 = require("./styles");
+const SpecialistPaymentCommonCardSkeleton = (props) => {
+    const { className } = props;
+    const styles = (0, styles_1.specialistPaymentFeatureStyles)();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${styles.skeletonWrapper()} ${className}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex justify-start mb-9' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col w-1/2' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonTLWTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonTSWTile() })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col w-1/2' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonTLWTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonTSWTile() })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex justify-between' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBLNTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBSWTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBMWTile() })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBLNTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBSWTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBMWTile() })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex flex-col' }, { children: [(0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBLNTile2() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBSWTile() }), (0, jsx_runtime_1.jsx)(shared_1.Skeleton_v2, { className: styles.skeletonBMWTile2() })] }))] }))] })));
+};
+exports.default = SpecialistPaymentCommonCardSkeleton;

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialistPaymentCommonCardSkeleton = exports.SpecialistPaymentCommonCardFeature = void 0;
+var SpecialistPaymentCommonCardFeature_1 = require("./SpecialistPaymentCommonCardFeature");
+Object.defineProperty(exports, "SpecialistPaymentCommonCardFeature", { enumerable: true, get: function () { return __importDefault(SpecialistPaymentCommonCardFeature_1).default; } });
+var SpecialistPaymentCommonCardSkeleton_1 = require("./SpecialistPaymentCommonCardSkeleton");
+Object.defineProperty(exports, "SpecialistPaymentCommonCardSkeleton", { enumerable: true, get: function () { return __importDefault(SpecialistPaymentCommonCardSkeleton_1).default; } });

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/styles.d.ts

@@ -1,85 +1 @@
-export declare const specialistPaymentFeatureStyles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<{
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined> | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<{
-            sessionsLabel: string;
-            skeletonWrapper: string;
-            skeletonTLWTile: string;
-            skeletonTSWTile: string;
-            skeletonBLNTile: string;
-            skeletonBLNTile2: string;
-            skeletonBSWTile: string;
-            skeletonBMWTile: string;
-            skeletonBMWTile2: string;
-        }, undefined>;
-    } | undefined;
-} | {}, {
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<{
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined> | {}>, import("tailwind-variants").TVVariantsDefault<{
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined> | {}, {
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<{
-    sessionsLabel: string;
-    skeletonWrapper: string;
-    skeletonTLWTile: string;
-    skeletonTSWTile: string;
-    skeletonBLNTile: string;
-    skeletonBLNTile2: string;
-    skeletonBSWTile: string;
-    skeletonBMWTile: string;
-    skeletonBMWTile2: string;
-}, undefined> | {}>, unknown, unknown, undefined>>;
+export declare const specialistPaymentFeatureStyles: any;

package/dist/cjs/lib2/features/SpecialistPaymentCommonCardFeature/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specialistPaymentFeatureStyles = void 0;
+const tailwind_variants_1 = require("tailwind-variants");
+exports.specialistPaymentFeatureStyles = (0, tailwind_variants_1.tv)({
+    slots: {
+        sessionsLabel: 'text-color-text-primary font-bold text-[16px]',
+        skeletonWrapper: 'bg-color-background-anti-flash-light rounded-[30px]',
+        skeletonTLWTile: 'rounded-[12px] w-[118px] h-[12px] !mb-2',
+        skeletonTSWTile: 'rounded-[12px] w-[62px] h-[18px]',
+        skeletonBLNTile: 'rounded-[20px] w-[104px] h-[8px] !mb-2',
+        skeletonBLNTile2: 'rounded-[20px] w-[83px] h-[8px] !mb-2',
+        skeletonBSWTile: 'rounded-[12px] w-[38px] h-[12px] !mb-3',
+        skeletonBMWTile: 'rounded-[12px] w-[70px] h-[10px]',
+        skeletonBMWTile2: 'rounded-[12px] w-[62px] h-[10px]',
+    },
+});