@pisell/private-materials 6.6.8 → 6.6.10

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/AddSchedules/index.js

@@ -0,0 +1,131 @@
+import customSelect_default from "../../../../../../booking/components/customSelect/index.js";
+import useEngineContext_default from "../../../../../../../hooks/useEngineContext.js";
+import useComponents_default from "../../../../../../../hooks/useComponents.js";
+import { Context } from "../../../../../model.js";
+import { getSchedules } from "../../../../serve.js";
+import React, { useContext, useRef } from "react";
+import { Button } from "antd";
+import { locales } from "@pisell/utils";
+import { useRequest } from "ahooks";
+import "./index.less";
+
+//#region src/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/AddSchedules/index.tsx
+const AddSchedules = ({ value, onChange, drawerContainer, isSelf }) => {
+	const modalRef = useRef(null);
+	const { state, dispatch } = useContext(Context);
+	const { appHelper } = useEngineContext_default();
+	const createSchedules = useRef();
+	const AllCreateScheduleRef = useRef(null);
+	const [ScheduleCreateType, AllCreateSchedule] = useComponents_default({ components: ["ScheduleCreateType", "AllCreateSchedule"] });
+	const _getScheduleList = useRequest(getSchedules, {
+		manual: true,
+		onSuccess: (res) => {}
+	});
+	const onFinish = (e) => {
+		const idMap = (isSelf ? _getScheduleList?.data : state.schedules.list)?.reduce((p, c) => {
+			return {
+				...p,
+				[c.id]: c
+			};
+		}, {}) || {};
+		onChange(e.map((item) => idMap[item.id]));
+	};
+	const handleCreateSchedule = () => {
+		createSchedules.current?.open?.({ getContainer: void 0 });
+	};
+	const handleAddSchedule = (data) => {
+		if (isSelf) _getScheduleList.mutate((oldData) => [data, ...oldData || []]);
+		else dispatch({
+			type: "setSchedules",
+			payload: {
+				...state.schedules,
+				list: [data, ...state?.schedules?.list || []]
+			}
+		});
+		modalRef.current.setValue((v) => [...v, data]);
+		setTimeout(() => {
+			document.getElementById(data.id)?.scrollIntoView?.({
+				block: "center",
+				behavior: "smooth"
+			});
+		});
+	};
+	const handleEdit = (e, id) => {
+		e.stopPropagation();
+		AllCreateScheduleRef.current?.open?.({ id });
+	};
+	const handleChangeResData = (data) => {
+		const updateOldData = (oldData) => {
+			return (oldData || []).map((item) => {
+				if (item.id === data.id) return {
+					...data,
+					name: appHelper?.utils?.translationShop(data.name) || data.name
+				};
+				return item;
+			});
+		};
+		if (isSelf) _getScheduleList.mutate(updateOldData);
+		else dispatch({
+			type: "setSchedules",
+			payload: {
+				...state.schedules,
+				list: updateOldData(state?.schedules?.list)
+			}
+		});
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+		ghost: true,
+		type: "primary",
+		className: "product-detail-card-module-add-button",
+		onClick: () => {
+			modalRef.current?.open();
+			if (isSelf) _getScheduleList.run({
+				num: 999,
+				skip: 1
+			});
+		}
+	}, locales.getText("pisell2.text.schedules.assign-schedule")), /* @__PURE__ */ React.createElement(customSelect_default, {
+		ref: modalRef,
+		rowKey: "id",
+		options: isSelf ? _getScheduleList.data || [] : state?.schedules?.list || [],
+		createItemText: locales.getText("pisell2.text.schedules.create-new-schedule"),
+		loading: _getScheduleList.loading,
+		value,
+		onValueChange: onFinish,
+		handleCreateItem: handleCreateSchedule,
+		isPreview: false,
+		drawerProps: {
+			title: locales.getText("pisell2.text.schedules.assign-schedule"),
+			destroyOnClose: true,
+			width: 480,
+			getContainer: drawerContainer || document.querySelector(".pisell-lowcode__schedules-component-products") || document.body,
+			rootStyle: { position: "absolute" },
+			contentWrapperStyle: { boxShadow: "none" },
+			titleNoWrap: true,
+			...isSelf ? { zIndex: 1e3 } : {}
+		},
+		mode: "multiple",
+		optionRender: (item) => {
+			return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__add-schedule-list-item" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__add-schedule-list-item-content" }, /* @__PURE__ */ React.createElement("div", {
+				className: "pisell-lowcode__add-schedule-list-item-color",
+				style: { backgroundColor: item.color }
+			}), item.name), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__add-schedule-list-item-action-wrap" }, /* @__PURE__ */ React.createElement("div", {
+				className: "pisell-lowcode__add-schedule-list-item-action-edit",
+				onClick: (e) => handleEdit(e, item.id)
+			}, locales.getText("pisell2.text.edit"))));
+		},
+		filterItem: (d, search) => {
+			return d.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+		}
+	}), ScheduleCreateType && /* @__PURE__ */ React.createElement(ScheduleCreateType, {
+		ref: createSchedules,
+		onChange: handleAddSchedule
+	}), AllCreateSchedule && /* @__PURE__ */ React.createElement(AllCreateSchedule, {
+		ref: AllCreateScheduleRef,
+		onChange: handleChangeResData
+	}));
+};
+var AddSchedules_default = AddSchedules;
+
+//#endregion
+export { AddSchedules_default as default };

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/AddSchedules/index.less

@@ -0,0 +1,26 @@
+.pisell-lowcode__add-schedule-list-item {
+  display: flex;
+  flex: 1;
+  .pisell-lowcode__add-schedule-list-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  .pisell-lowcode__add-schedule-list-item-action-wrap {
+    .pisell-lowcode__add-schedule-list-item-action-edit {
+      display: flex;
+      height: 48px;
+      padding: 0px 16px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 30px;
+      border: 1px solid var(--Gray-true-300, #D5D5D5);
+    }
+  }
+}
+.pisell-lowcode__add-schedule-list-item-color {
+  width: 12px;
+  height: 12px;
+  margin: 8px;
+  border-radius: 50%;
+}

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/index.js

@@ -0,0 +1,88 @@
+import useEngineContext_default from "../../../../../../hooks/useEngineContext.js";
+import { Context } from "../../../../model.js";
+import { request } from "../../../../utils.js";
+import { calcCalendarDataBySchedules } from "../../../../schedules/utils.js";
+import ScheduleList_default from "../../../../components/ScheduleList/index.js";
+import { getScheduleListByProductId } from "../../../serve.js";
+import AddSchedules_default from "./AddSchedules/index.js";
+import React, { useContext, useEffect, useRef } from "react";
+import { locales } from "@pisell/utils";
+import { useMemoizedFn, useRequest } from "ahooks";
+import "./index.less";
+
+//#region src/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/index.tsx
+const SchedulesModule = ({ value, onChange, drawerContainer, ruleFn = () => true, tabKey, previewItemChange, isSelf = false, isTitle = true }) => {
+	const context = useEngineContext_default();
+	if (isSelf) request.setRequest(context.appHelper.utils.request);
+	const { state, dispatch } = useContext(Context);
+	const first = useRef(true);
+	const _getScheduleList = useRequest(getScheduleListByProductId, {
+		manual: true,
+		onSuccess: (res) => {}
+	});
+	const handleDeleteSchedule = (item) => {
+		onChange?.((value || []).filter((id) => id !== item.id));
+		_getScheduleList.mutate((data) => data?.filter((d) => d.id !== item.id));
+	};
+	const _onAddChange = (arr) => {
+		onChange?.(arr.map((d) => d.id));
+		_getScheduleList.mutate(arr);
+	};
+	useEffect(() => {
+		if (value && value.length && first.current === true) {
+			_getScheduleList.run({
+				ids: value || [],
+				num: 999,
+				skip: 1
+			});
+			first.current = false;
+		}
+	}, [value]);
+	const setCalendarEditData = (editData) => {
+		dispatch?.({
+			type: "setCalendar",
+			payload: {
+				isEdit: true,
+				editData
+			}
+		});
+	};
+	useEffect(() => {
+		if (ruleFn?.()) setCalendarEditData(calcCalendarDataBySchedules(_getScheduleList.data || []));
+	}, [_getScheduleList.data, ruleFn?.()]);
+	const onClickItem = useMemoizedFn((item) => {
+		if (previewItemChange) return previewItemChange(item);
+		dispatch?.({
+			type: "setState",
+			payload: {
+				tabKey: "schedules",
+				schedulesDetail: {
+					show: true,
+					id: item.id,
+					fromTabKey: tabKey,
+					callback: (newItem) => {
+						if ("isRemove" in newItem) newItem.isRemove && handleDeleteSchedule(newItem);
+						else if (newItem) _getScheduleList.mutate((oldData) => (oldData || []).map((item$1) => item$1.id === newItem.id ? newItem : item$1));
+					}
+				}
+			}
+		});
+	});
+	return /* @__PURE__ */ React.createElement("div", { className: "product-detail-card-module" }, isTitle ? /* @__PURE__ */ React.createElement("div", { className: "product-detail-card-title" }, locales.getText("pisell2.text.schedules.schedules-title")) : null, /* @__PURE__ */ React.createElement(ScheduleList_default, {
+		className: "product-detail-card-schedule-list",
+		dataSource: _getScheduleList.data || [],
+		loading: _getScheduleList.loading,
+		showDeleteIcon: true,
+		onDelete: handleDeleteSchedule,
+		onItemClick: onClickItem
+	}), /* @__PURE__ */ React.createElement(AddSchedules_default, {
+		isSelf,
+		value: _getScheduleList.data || [],
+		onChange: _onAddChange,
+		drawerContainer
+	}));
+};
+var SchedulesModule_default = SchedulesModule;
+
+//#endregion
+export { SchedulesModule_default as default };

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/SchedulesModule/index.less

@@ -0,0 +1,3 @@
+.product-detail-card-schedule-list {
+  margin-bottom: 16px;
+}

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/index.js

@@ -0,0 +1,36 @@
+import SchedulesModule_default from "./SchedulesModule/index.js";
+import MaxParticipantsModule_default from "./MaxParticipantsModule/index.js";
+import ResourcesModule_default from "./ResourcesModule/index.js";
+import React from "react";
+import { Form } from "antd";
+import "./index.less";
+
+//#region src/components/schedules/products/ProductDetailDrawer/ProductDetail/index.tsx
+const ProductDetail = ({ form, currentProduct }) => {
+	const useSchedule = Form.useWatch("schedule", form);
+	const isAutoChange = Form.useWatch("isAutoChange", form);
+	return /* @__PURE__ */ React.createElement("div", { className: "product-detail-card" }, /* @__PURE__ */ React.createElement(Form.Item, {
+		noStyle: true,
+		name: "schedule"
+	}, /* @__PURE__ */ React.createElement(SchedulesModule_default, {
+		tabKey: "products",
+		onChange: () => {
+			form.setFieldsValue({ isAutoChange: true });
+		}
+	})), /* @__PURE__ */ React.createElement(Form.Item, {
+		noStyle: true,
+		name: "max_participants"
+	}, /* @__PURE__ */ React.createElement(MaxParticipantsModule_default, {
+		form,
+		useSchedule,
+		isAutoChange
+	})), /* @__PURE__ */ React.createElement(Form.Item, {
+		hidden: true,
+		name: "isAutoChange",
+		initialValue: false
+	}, /* @__PURE__ */ React.createElement("switch", null)), /* @__PURE__ */ React.createElement(ResourcesModule_default, { product: currentProduct }));
+};
+var ProductDetail_default = ProductDetail;
+
+//#endregion
+export { ProductDetail_default as default };

package/dist/es/components/schedules/products/ProductDetailDrawer/ProductDetail/index.less

@@ -0,0 +1,18 @@
+.product-detail-card {
+  .product-detail-card-module {
+    margin-bottom: 16px;
+
+    .product-detail-card-title {
+      color: var(--Text-Text_1, #1B1B1B);
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+
+    .product-detail-card-schedule-list {
+      margin-top: 16px;
+    }
+  }
+
+}

package/dist/es/components/schedules/products/ProductDetailDrawer/index.js

@@ -0,0 +1,161 @@
+import drawer_default from "../../../booking/components/drawer/index.js";
+import { updateProductById } from "../utils.js";
+import { Context } from "../../model.js";
+import { saveConfirm } from "../../utils.js";
+import { editProductDetail, getProductDetail } from "../serve.js";
+import ProductDetail_default from "./ProductDetail/index.js";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Button, Form, Skeleton, message } from "antd";
+import { locales } from "@pisell/utils";
+import { useRequest } from "ahooks";
+import "./index.less";
+
+//#region src/components/schedules/products/ProductDetailDrawer/index.tsx
+const ProductDetailDrawer = () => {
+	const [form] = Form.useForm();
+	const [isEdit, setIsEdit] = useState(false);
+	const { state, dispatch } = useContext(Context);
+	const { products, currentSelectDayDetail } = state;
+	const onClose = async (checkEdit = true) => {
+		if (checkEdit && isEdit) {
+			if (!await saveConfirm()) return;
+		}
+		setIsEdit(false);
+		form.setFieldsValue({ isAutoChange: false });
+		setTimeout(() => {
+			form.resetFields();
+		}, 10);
+		dispatch({
+			type: "setCalendar",
+			payload: {
+				isEdit: false,
+				editData: []
+			}
+		});
+		dispatch({
+			type: "setProducts",
+			payload: {
+				openProductDetailDrawer: false,
+				currentProduct: null
+			}
+		});
+	};
+	const updateProductList = (param) => {
+		dispatch({
+			type: "setProducts",
+			payload: { list: updateProductById({
+				products: state.products.list,
+				id: products.currentProduct.id,
+				schedule: param.schedules.schedule,
+				scheduleMap: state.schedules.scheduleMap
+			}) }
+		});
+	};
+	const drawerContent = useMemo(() => {
+		if (!products.openProductDetailDrawer || !products.currentProduct) return null;
+		return /* @__PURE__ */ React.createElement(ProductDetail_default, {
+			form,
+			currentProduct: products.currentProduct
+		});
+	}, [
+		form,
+		products.openProductDetailDrawer,
+		products.currentProduct,
+		currentSelectDayDetail
+	]);
+	const _getProductDetail = useRequest(getProductDetail, {
+		manual: true,
+		onSuccess: ({ data }) => {
+			form.setFieldsValue({
+				schedule: data?.schedule || [],
+				max_participants: data?.max_participants || [],
+				isAutoChange: false
+			});
+		}
+	});
+	const _editProductDetail = useRequest(editProductDetail, {
+		manual: true,
+		onSuccess: ({ code }, param) => {
+			updateProductList(param[0]);
+			message.success(locales.getText("pisell2.text.schedules.save-success"));
+			setIsEdit(false);
+			onClose(false);
+		}
+	});
+	const _init = async () => {
+		_getProductDetail.run({
+			item_id: products.currentProduct.id,
+			item_type: "product"
+		});
+		setIsEdit(false);
+	};
+	useEffect(() => {
+		if (products.openProductDetailDrawer) _init();
+	}, [products.openProductDetailDrawer]);
+	const checkValues = (values) => {
+		let res = {
+			success: true,
+			message: ""
+		};
+		console.log("values.max_participants", values.max_participants);
+		if (values.max_participants.length) {
+			if (values.max_participants.some((d) => {
+				if (!d.max_participants_type) return true;
+				if (d.max_participants_type === "custom-limit" && !d.max_participants_limit) return true;
+				return false;
+			})) {
+				res.success = false;
+				res.message = locales.getText("pisell2.text.products.max-participants-error");
+			}
+		}
+		return res;
+	};
+	const onFinish = (values) => {
+		let isValid = checkValues(values);
+		if (!isValid.success) return message.warning(isValid.message);
+		const { isAutoChange, ...resetValues } = values;
+		_editProductDetail.run({
+			item_id: products.currentProduct.id,
+			item_type: "product",
+			schedules: resetValues
+		});
+	};
+	return /* @__PURE__ */ React.createElement(drawer_default, {
+		titleNoWrap: true,
+		width: 480,
+		open: products.openProductDetailDrawer,
+		title: products.currentProduct?.title || "-",
+		onClose: () => {
+			onClose();
+		},
+		destroyOnClose: true,
+		getContainer: () => document.querySelector(".pisell-lowcode__schedules-component-products") || document.body,
+		rootStyle: { position: "absolute" },
+		contentWrapperStyle: { boxShadow: "none" },
+		footer: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, {
+			type: "primary",
+			style: { width: "100%" },
+			size: "large",
+			disabled: _getProductDetail.loading || !isEdit,
+			loading: _editProductDetail.loading,
+			onClick: () => {
+				form.submit();
+			}
+		}, locales.getText("pisell2.text.schedules.save")))
+	}, /* @__PURE__ */ React.createElement("div", { className: "product-detail-drawer-body" }, /* @__PURE__ */ React.createElement(Skeleton, {
+		round: true,
+		active: true,
+		loading: _getProductDetail.loading
+	}, /* @__PURE__ */ React.createElement(Form, {
+		form,
+		onFinish,
+		onValuesChange: (a, b) => {
+			console.log("wzw", a, b);
+			setIsEdit(true);
+		}
+	}, drawerContent))));
+};
+var ProductDetailDrawer_default = ProductDetailDrawer;
+
+//#endregion
+export { ProductDetailDrawer_default as default };

package/dist/es/components/schedules/products/ProductDetailDrawer/index.less

@@ -0,0 +1,3 @@
+.product-detail-drawer-body {
+  padding: 20px 32px;
+}

package/dist/es/components/schedules/products/index.js

@@ -0,0 +1,64 @@
+import { formatProductSchedules } from "./utils.js";
+import { Context } from "../model.js";
+import CurrentDay_default from "../components/CurrentDay/index.js";
+import list_default from "./list/index.js";
+import { getProductList } from "./serve.js";
+import ProductDetailDrawer_default from "./ProductDetailDrawer/index.js";
+import React, { useContext, useEffect } from "react";
+import { useRequest } from "ahooks";
+import "./index.less";
+
+//#region src/components/schedules/products/index.tsx
+const Products = () => {
+	const { state, dispatch } = useContext(Context);
+	const { products, currentSelectDayDetail } = state;
+	const _getProducts = useRequest(getProductList, { manual: true });
+	useEffect(() => {
+		dispatch({
+			type: "setProducts",
+			payload: { list: formatProductSchedules(_getProducts.data || [], state.schedules.scheduleMap) }
+		});
+	}, [_getProducts.data, state.schedules.scheduleMap]);
+	const _init = () => {
+		dispatch({
+			type: "setProducts",
+			payload: {
+				search: "",
+				currentProduct: null,
+				openProductDetailDrawer: false,
+				openAddSchedulesDrawer: false
+			}
+		});
+		if (currentSelectDayDetail && (!currentSelectDayDetail.scheduleIds || !currentSelectDayDetail.scheduleIds.length)) _getProducts.mutate([]);
+		else _getProducts.run({
+			skip: 1,
+			num: 500,
+			with: ["category"],
+			status: "published",
+			open_quotation: 1,
+			with_schedule: true,
+			schedule: 1,
+			schedule_ids: currentSelectDayDetail ? currentSelectDayDetail.scheduleIds || [] : void 0
+		});
+	};
+	useEffect(() => {
+		_init();
+	}, [currentSelectDayDetail]);
+	const handleClose = () => {
+		dispatch({
+			type: "setState",
+			payload: { currentSelectDayDetail: null }
+		});
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__schedules-component-products" }, /* @__PURE__ */ React.createElement(CurrentDay_default, {
+		onClose: handleClose,
+		currentDay: currentSelectDayDetail?.date
+	}), /* @__PURE__ */ React.createElement(list_default, {
+		loading: _getProducts.loading,
+		list: products.list
+	}), /* @__PURE__ */ React.createElement(ProductDetailDrawer_default, null));
+};
+var products_default = Products;
+
+//#endregion
+export { products_default as default };

package/dist/es/components/schedules/products/index.less

@@ -0,0 +1,21 @@
+.pisell-lowcode__schedules-component-products {
+  padding: 0 32px 16px;
+  height: 100%;
+  overflow-y: auto;
+}
+.pisell-lowcode__schedules-by-day-title {
+  padding: 8px 32px 24px;
+  color: var(--Gray-true-600, #525252);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px; /* 155.556% */
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--Gray-true-200, #E5E5E5);
+  .pisell-lowcode__schedules-by-day-go-back {
+    font-size: 24px;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+}

package/dist/es/components/schedules/products/list/ProductItem/index.js

@@ -0,0 +1,24 @@
+import { getScheduleColors, getUsableSchedules } from "../../utils.js";
+import React from "react";
+import { Popover } from "antd";
+import { locales } from "@pisell/utils";
+import AlertCircle from "@pisell/icon/es/AlertCircle";
+import "./index.less";
+
+//#region src/components/schedules/products/list/ProductItem/index.tsx
+const ProductItem = ({ item, onClickItem, layout = "all" }) => {
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-lowcode__schedules-component-products-item",
+		key: item.id,
+		onClick: () => {
+			onClickItem(item);
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__schedules-component-products-item-left" }, layout === "day" ? /* @__PURE__ */ React.createElement("div", {
+		className: "tag",
+		style: { background: getScheduleColors(item["schedules"]) }
+	}) : null, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__schedules-component-products-item-title" }, item.title)), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__schedules-component-products-item-right" }, layout === "day" ? /* @__PURE__ */ React.createElement("div", { className: "hours" }, item._schedules.str) : null, layout === "day" || getUsableSchedules(item._schedules) ? null : /* @__PURE__ */ React.createElement(Popover, { content: locales.getText("pisell2.text.products.no-current-schedule") }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "pisell-lowcode__schedules-component-products-item-icon" }))));
+};
+var ProductItem_default = ProductItem;
+
+//#endregion
+export { ProductItem_default as default };

package/dist/es/components/schedules/products/list/ProductItem/index.less

@@ -0,0 +1,59 @@
+.pisell-lowcode__schedules-component-products-item {
+  border-radius: 8px;
+  border: 1px solid var(--Gray-true-100, #F5F5F5);
+  cursor: pointer;
+  display: flex;
+  padding: 10px 16px;
+  margin-bottom: 16px;
+  align-items: center;
+
+  .pisell-lowcode__schedules-component-products-item-left {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .tag {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      // background-color: #dd2590;
+      margin-right: 8px;
+    }
+
+    .pisell-lowcode__schedules-component-products-item-title {
+      flex: 1;
+      color: var(--Gray-true-900, #141414);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+
+      padding-right: 16px;
+    }
+  }
+
+  .pisell-lowcode__schedules-component-products-item-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .hours {
+      color: var(--Gray-true-600, #525252);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .pisell-lowcode__schedules-component-products-item-icon {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #D92D20;
+      font-size: 16px;
+    }
+  }
+
+}