@pisell/private-materials 3.0.214 → 3.1.2

package/lib/components/eventBooking/components/bookingDetailModal/index.js

@@ -1,272 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/eventBooking/components/bookingDetailModal/index.tsx
-var bookingDetailModal_exports = {};
-__export(bookingDetailModal_exports, {
-  default: () => bookingDetailModal_default
-});
-module.exports = __toCommonJS(bookingDetailModal_exports);
-var import_react = __toESM(require("react"));
-var import_materials = require("@pisell/materials");
-var import_eventCard = __toESM(require("../eventCard"));
-var import_Sales = require("../../../Sales");
-var import_utils = require("@pisell/utils");
-var import_Schedule = __toESM(require("./components/Schedule"));
-var import_Resource = __toESM(require("./components/Resource"));
-var import_BookingOptions = __toESM(require("./components/BookingOptions"));
-var import_OrderProductModal = __toESM(require("../Provider/OrderProductModal/index"));
-var import_index = require("./index.less");
-var BookingDetailModal = (props) => {
-  var _a;
-  const modalContentRef = (0, import_react.useRef)(null);
-  const tabsRef = (0, import_react.useRef)();
-  const { open = false } = props;
-  const { detail, onCloseEventDetail, onSelectEventDetail } = (0, import_Sales.useEventDetail)();
-  const { addToCart, checkBeforeAddToCart, checkBeforeAddToCartResquest } = (0, import_Sales.useCart)();
-  const [activeTab, setActiveTab] = (0, import_react.useState)("introduction");
-  const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
-  const [openCheckout, setOpenCheckout] = (0, import_react.useState)(false);
-  const isUserClickRef = (0, import_react.useRef)(false);
-  const scrollTimeoutRef = (0, import_react.useRef)(null);
-  const anchorOptions = (0, import_react.useMemo)(
-    () => [
-      {
-        id: "introduction",
-        name: import_utils.locales.getText("pisell2.event.introduction")
-      },
-      {
-        id: "schedule",
-        name: import_utils.locales.getText("pisell2.event.schedule")
-      },
-      {
-        id: "resource",
-        name: import_utils.locales.getText("pisell2.event.resource")
-      },
-      // {
-      //   id: 'campus',
-      //   name: locales.getText('pisell2.event.campus'),
-      // },
-      {
-        id: "booking_options",
-        name: import_utils.locales.getText("pisell2.event.booking.options")
-      }
-    ],
-    []
-  );
-  const images = (0, import_react.useMemo)(() => {
-    var _a2;
-    return ((_a2 = detail == null ? void 0 : detail.introduction) == null ? void 0 : _a2.images) || [];
-  }, [(_a = detail == null ? void 0 : detail.introduction) == null ? void 0 : _a.images]);
-  const scrollToElement = (id) => {
-    const element = document.getElementById(id);
-    if (element && modalContentRef.current) {
-      setIsScrolling(true);
-      const headerHeight = 58;
-      const elementTop = element.offsetTop;
-      modalContentRef.current.scrollTo({
-        top: elementTop - headerHeight,
-        behavior: "smooth"
-      });
-      setTimeout(() => {
-        setIsScrolling(false);
-      }, 500);
-    }
-  };
-  (0, import_react.useEffect)(() => {
-    if (!modalContentRef.current || !open)
-      return;
-    const handleScroll = () => {
-      if (isScrolling || isUserClickRef.current)
-        return;
-      const container2 = modalContentRef.current;
-      if (!container2)
-        return;
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-      scrollTimeoutRef.current = setTimeout(() => {
-        const scrollTop = container2.scrollTop;
-        const headerHeight = 58;
-        const containerHeight = container2.clientHeight;
-        const scrollHeight = container2.scrollHeight;
-        const viewportMiddle = headerHeight + (containerHeight - headerHeight) / 2;
-        const sectionPositions = anchorOptions.map((option) => {
-          const element = document.getElementById(option.id);
-          if (!element)
-            return null;
-          const rect = element.getBoundingClientRect();
-          return {
-            id: option.id,
-            top: rect.top,
-            bottom: rect.bottom,
-            height: rect.height,
-            // 添加可见度计算
-            visibleTop: Math.max(rect.top, headerHeight),
-            visibleBottom: Math.min(rect.bottom, containerHeight),
-            // 计算元素中点到视口中点的距离
-            distanceToCenter: Math.abs((rect.top + rect.bottom) / 2 - viewportMiddle)
-          };
-        }).filter((section) => section !== null);
-        const isAtBottom = Math.abs(scrollTop + containerHeight - scrollHeight) <= 2;
-        if (isAtBottom) {
-          const lastOption = anchorOptions[anchorOptions.length - 1];
-          if (activeTab !== lastOption.id) {
-            setActiveTab(lastOption.id);
-          }
-          return;
-        }
-        let bestSection = null;
-        const sectionsWithPriority = sectionPositions.map((section) => {
-          const visibleHeight = section.visibleBottom - section.visibleTop;
-          const visibilityRatio = visibleHeight / section.height;
-          const topDistance = Math.abs(section.top - headerHeight);
-          const priority = (
-            // 基础可见度权重
-            visibilityRatio * 0.6 + // 小内容区域补偿
-            (section.height < 200 ? 0.3 : 0) + // 距离权重（反比，越近权重越大）
-            0.4 * (1 - Math.min(topDistance / containerHeight, 1))
-          );
-          return {
-            ...section,
-            visibilityRatio,
-            topDistance,
-            priority
-          };
-        });
-        sectionsWithPriority.sort((a, b) => {
-          if (a.visibilityRatio > 0.1 && b.visibilityRatio > 0.1) {
-            if (Math.abs(a.topDistance - b.topDistance) < 50) {
-              return b.priority - a.priority;
-            }
-            return a.topDistance - b.topDistance;
-          }
-          return b.priority - a.priority;
-        });
-        bestSection = sectionsWithPriority[0];
-        if (bestSection && activeTab !== bestSection.id) {
-          const currentSection = sectionPositions.find((s) => s.id === activeTab);
-          if (!currentSection || bestSection.priority > (currentSection.priority || 0) + 0.2 || bestSection.visibilityRatio > 0.3 && bestSection.topDistance < currentSection.topDistance) {
-            setActiveTab(bestSection.id);
-          }
-        }
-      }, 200);
-    };
-    const container = modalContentRef.current;
-    container.addEventListener("scroll", handleScroll);
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [anchorOptions, activeTab, open, isScrolling]);
-  const handleTabChange = (key) => {
-    if (isUserClickRef.current) {
-      setActiveTab(key);
-      setIsScrolling(true);
-      setTimeout(() => {
-        setIsScrolling(false);
-        isUserClickRef.current = false;
-      }, 1200);
-    } else {
-      if (!isScrolling && !isUserClickRef.current) {
-        setActiveTab(key);
-      }
-    }
-  };
-  const content = () => {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-detail-modal-content", ref: modalContentRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "anchor-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials.PisellAnchor,
-      {
-        ref: tabsRef,
-        options: anchorOptions,
-        tab: activeTab,
-        containerRef: modalContentRef,
-        onChange: handleTabChange,
-        onTabClick: () => {
-          isUserClickRef.current = true;
-        }
-      }
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "content-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { id: "introduction", className: "content-section" }, (images == null ? void 0 : images.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(
-      import_materials.PisellImageCarousels,
-      {
-        dataSource: images,
-        width: "100%",
-        height: (0, import_utils.isMobile)() ? 300 : 400,
-        showArrows: !(0, import_utils.isMobile)(),
-        showDots: (images == null ? void 0 : images.length) > 1,
-        autoplay: (images == null ? void 0 : images.length) > 1,
-        loop: false
-      }
-    ) : null, /* @__PURE__ */ import_react.default.createElement(import_eventCard.default, { data: detail == null ? void 0 : detail.introduction })), /* @__PURE__ */ import_react.default.createElement("div", { id: "schedule", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Schedule.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { id: "resource", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_Resource.default, null)), /* @__PURE__ */ import_react.default.createElement("div", { id: "booking_options", className: "content-section" }, /* @__PURE__ */ import_react.default.createElement(import_BookingOptions.default, null))));
-  };
-  const handleOk = async () => {
-    onSelectEventDetail();
-    const checkRes = await checkBeforeAddToCart();
-    if ((checkRes == null ? void 0 : checkRes.result) === false) {
-      setOpenCheckout(true);
-      return;
-    }
-    addToCart();
-  };
-  (0, import_react.useEffect)(() => {
-    if (open) {
-      setActiveTab("introduction");
-      setIsScrolling(false);
-      isUserClickRef.current = false;
-    }
-  }, [open]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_materials.PisellModal,
-    {
-      open,
-      title: import_utils.locales.getText("pisell2.event.details"),
-      platform: (0, import_utils.isMobile)() ? "h5" : "pc",
-      bodyStyle: { padding: 0 },
-      destroyOnClose: true,
-      className: "booking-detail-modal",
-      onCancel: onCloseEventDetail,
-      okText: import_utils.locales.getText("pisell2.event.add.to.cart"),
-      cancelVisible: false,
-      onOk: handleOk,
-      width: (0, import_utils.isMobile)() ? "100%" : 600,
-      okButtonProps: {
-        loading: checkBeforeAddToCartResquest == null ? void 0 : checkBeforeAddToCartResquest.loading
-      }
-    },
-    content()
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_OrderProductModal.default,
-    {
-      open: openCheckout,
-      onCancel: () => setOpenCheckout(false)
-    }
-  ));
-};
-var bookingDetailModal_default = BookingDetailModal;

package/lib/components/eventBooking/components/bookingDetailModal/index.less

@@ -1,83 +0,0 @@
-.booking-detail-modal {
-  .booking-detail-modal-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scroll-behavior: smooth;
-
-    .anchor-wrapper {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      background: #fff;
-      padding: 0 16px !important;
-      // padding: 16px;
-    }
-
-    .content-wrapper {
-      flex: 1;
-      padding: 20px 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-
-      .pisell-image-carousel {
-        margin-bottom: 16px;
-      }
-
-      .content-section {
-        scroll-margin-top: 74px;
-      }
-    }
-  }
-
-  .detail-resource-wrap {
-    display: flex;
-    padding: 16px;
-    flex-direction: column;
-    align-items: flex-start;
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      width: 100%;
-    }
-    .item {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      .title {
-        color: #000;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 20px;
-      }
-    }
-  }
-
-  .detail-option-wrap {
-    .content {
-      padding: 0 16px 16px;
-      .option-item {
-        padding: 16px;
-        .item {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          color: var(--Text-Text_1, #1b1b1b);
-          font-size: 14px;
-          font-weight: 600;
-          line-height: 20px;
-          .price {
-            color: var(--Text-Text_2, #777);
-            font-size: 12px;
-            font-weight: 400;
-            line-height: 18px;
-          }
-        }
-      }
-    }
-  }
-}

package/lib/components/eventBooking/components/bookingServiceList/index.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import './index.less';
-export interface BookingServiceListProps {
-    dataSource?: any[];
-    onClick?: (item: any) => void;
-    showSearch?: boolean;
-    showCategory?: boolean;
-    showImage?: boolean;
-    showPrice?: boolean;
-    showTitle?: boolean;
-    placeholder?: string;
-    onSearch?: (value: string) => void;
-    isShowEmpty?: boolean;
-    description?: string;
-}
-declare const BookingServiceList: React.FC<BookingServiceListProps>;
-export default BookingServiceList;

package/lib/components/eventBooking/components/bookingServiceList/index.js

@@ -1,79 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/eventBooking/components/bookingServiceList/index.tsx
-var bookingServiceList_exports = {};
-__export(bookingServiceList_exports, {
-  default: () => bookingServiceList_default
-});
-module.exports = __toCommonJS(bookingServiceList_exports);
-var import_react = __toESM(require("react"));
-var import_materials = require("@pisell/materials");
-var import_productCard = __toESM(require("../productCard"));
-var import_index = require("./index.less");
-var BookingServiceList = ({
-  dataSource,
-  onClick,
-  showSearch = false,
-  showCategory = true,
-  showImage,
-  showPrice,
-  showTitle,
-  placeholder,
-  onSearch,
-  isShowEmpty,
-  description
-}) => {
-  const renderServiceItem = (item) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_productCard.default,
-      {
-        item,
-        key: item.id,
-        showImage: (item == null ? void 0 : item.image) && showImage,
-        showPrice,
-        showName: showTitle,
-        onClick: () => onClick && onClick(item)
-      }
-    );
-  };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "event-booking-service-list" }, /* @__PURE__ */ import_react.default.createElement(
-    import_materials.PisellList01,
-    {
-      showSearch,
-      showCategory,
-      dataSource,
-      placeholder,
-      renderItem: renderServiceItem,
-      onSearch,
-      isShowEmpty,
-      description
-    }
-  ));
-};
-var bookingServiceList_default = BookingServiceList;

package/lib/components/eventBooking/components/bookingServiceList/index.less

@@ -1,6 +0,0 @@
-.event-booking-service-list {
-  width: 100%;
-
-  .pisell-list-01 {
-  }
-}

package/lib/components/eventBooking/components/eventCard/index.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import './index.less';
-export interface EventCardProps {
-    data: any;
-    showTitle?: boolean;
-    showSubtitle?: boolean;
-    showDescription?: boolean;
-    showPrice?: boolean;
-    showOriginalPrice?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const EventCard: React.FC<EventCardProps>;
-export default EventCard;

package/lib/components/eventBooking/components/eventCard/index.js

@@ -1,124 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/eventBooking/components/eventCard/index.tsx
-var eventCard_exports = {};
-__export(eventCard_exports, {
-  default: () => eventCard_default
-});
-module.exports = __toCommonJS(eventCard_exports);
-var import_react = __toESM(require("react"));
-var import_materials = require("@pisell/materials");
-var import_materials2 = require("@pisell/materials");
-var import_utils = require("@pisell/utils");
-var import_classnames = __toESM(require("classnames"));
-var import_mock = require("../../mock");
-var import_index = require("./index.less");
-var EventCard = ({
-  data,
-  showTitle = true,
-  showSubtitle = true,
-  showDescription = true,
-  showPrice = true,
-  showOriginalPrice = true,
-  className,
-  style
-}) => {
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const [showToggle, setShowToggle] = (0, import_react.useState)(false);
-  const descriptionRef = (0, import_react.useRef)(null);
-  const { event_card } = import_mock.mock;
-  const { title, subtitle, description, price, origin_price } = data || event_card;
-  (0, import_react.useEffect)(() => {
-    const element = descriptionRef.current;
-    const checkLineCount = () => {
-      var _a;
-      if (element) {
-        const lineHeight = parseInt(
-          (_a = window.getComputedStyle(element)) == null ? void 0 : _a.lineHeight
-        );
-        const height = element == null ? void 0 : element.scrollHeight;
-        const lines = Math.floor(height / lineHeight);
-        setShowToggle(lines > 2);
-      }
-    };
-    checkLineCount();
-    window.addEventListener("resize", checkLineCount);
-    return () => window.removeEventListener("resize", checkLineCount);
-  }, [description]);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_materials.PisellCard,
-    {
-      className: (0, import_classnames.default)("pisell-event-card", className),
-      style,
-      borderRadius: 10,
-      isClickable: false
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-event-card-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-event-card-title-wrapper" }, showTitle && /* @__PURE__ */ import_react.default.createElement(import_materials2.PisellText, { className: "pisell-event-card-title" }, title), showSubtitle && /* @__PURE__ */ import_react.default.createElement(import_materials2.PisellText, { className: "pisell-event-card-subtitle" }, subtitle)), showPrice && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-event-card-price-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials2.PisellText.Amount,
-      {
-        className: "pisell-event-card-price",
-        value: price,
-        precision: 2,
-        showCurrencySymbol: true
-      }
-    ), showOriginalPrice && origin_price && price !== origin_price && /* @__PURE__ */ import_react.default.createElement(
-      import_materials2.PisellText.Amount,
-      {
-        className: "pisell-event-card-original-price",
-        value: origin_price,
-        precision: 2,
-        showCurrencySymbol: true
-      }
-    )), showDescription && description && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-event-card-line" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-event-card-description" }, /* @__PURE__ */ import_react.default.createElement(import_materials2.PisellText, { className: "pisell-event-card-description-title" }, import_utils.locales.getText("pisell2.event.description")), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        ref: descriptionRef,
-        className: (0, import_classnames.default)("pisell-event-card-description-content", {
-          "pisell-event-card-description-collapsed": !expanded && showToggle
-        })
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          dangerouslySetInnerHTML: {
-            __html: description
-          }
-        }
-      )
-    ), showToggle && /* @__PURE__ */ import_react.default.createElement(
-      import_materials2.PisellText,
-      {
-        className: "pisell-event-card-description-toggle",
-        onClick: () => setExpanded(!expanded)
-      },
-      expanded ? import_utils.locales.getText("pisell2.event.view.less") : import_utils.locales.getText("pisell2.event.view.more")
-    ))))
-  );
-};
-var eventCard_default = EventCard;

package/lib/components/eventBooking/components/eventCard/index.less

@@ -1,81 +0,0 @@
-.pisell-event-card {
-  &-content {
-    display: flex;
-    flex-direction: column;
-    color: var(--Gray-900, #101828);
-  }
-
-  &-title-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &-title {
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 36px;
-  }
-
-  &-subtitle {
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-  }
-
-  &-price-wrapper {
-    margin-top: 14px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-price {
-    font-size: 28px;
-    font-weight: 400;
-    line-height: 36px;
-  }
-
-  &-original-price {
-    color: var(--Gray-500, #667085);
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 24px;
-    text-decoration-line: line-through;
-  }
-
-  &-line {
-    margin: 14px 0;
-    height: 1px;
-    background: #f2f2f2;
-  }
-
-  &-description-title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 22px;
-  }
-
-  &-description {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    &-collapsed {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
-    }
-
-    &-toggle {
-      color: var(--Blue-600, #1570ef);
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-      cursor: pointer;
-    }
-  }
-}