@fonixtree/magic-design 2.0.32 → 2.0.35

package/lib/common/AffiliateProductModal/index.less

@@ -0,0 +1,146 @@
+.modalCot {
+  width: 1200px;
+  right: unset !important;
+  left: unset !important;
+
+  .proModalWrap {
+    thead .cylon-checkbox {
+      visibility: hidden;
+    }
+
+    .content {
+      display: flex;
+      margin-bottom: 8px;
+
+      .rightCot {
+        width: calc(100% - 260px);
+        margin-left: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .prodImg {
+          display: inline-block;
+          width: 36px;
+          height: 36px;
+          background-size: cover;
+          background-position: 50% 50%;
+          background-repeat: no-repeat;
+        }
+
+        .selectedCot {
+          padding-right: 18px;
+          margin-left: 4px;
+          height: 78px;
+          background: #f8f8f8;
+          border: 1px solid #e0e0e0;
+          border-radius: 2px;
+          display: flex;
+          flex-direction: row;
+          // flex-wrap: wrap;
+          overflow-x: auto;
+
+          .selectedItem {
+            box-sizing: border-box;
+            margin-top: 12px;
+            margin-left: 18px;
+            height: 52px;
+            position: relative;
+
+            &:hover {
+              .selectedItemImg {
+                width: 52px;
+                height: 52px;
+                border: 1px solid #4477ee !important;
+                box-shadow: 0 0 0 2px rgba(68, 119, 238, 0.15);
+                border-radius: 2px;
+              }
+
+              .selectedItemClose {
+                display: flex;
+              }
+            }
+
+            .selectedItemClose {
+              display: none;
+              border: 1px solid #000;
+              width: 16px;
+              height: 16px;
+              border-radius: 50%;
+              padding: 2px;
+              position: absolute;
+              top: -9px;
+              right: -8px;
+              z-index: 400;
+              cursor: pointer;
+            }
+
+            // &:nth-child(n + 11) {
+            //   margin-top: 5px !important;
+            // }
+
+            .selectedItemImg {
+              height: 52px;
+              width: 52px;
+              border: 1px solid #e0e0e0;
+              border-radius: 2px;
+
+              &.invalid {
+                border: 1px solid red;
+              }
+            }
+          }
+        }
+      }
+
+      .leftCot {
+        width: 260px;
+        padding-right: 14px;
+        box-sizing: border-box;
+        border-right: 1px solid #e0e0e0;
+
+        .divider {
+          width: 10%;
+          display: inline-block;
+          text-align: center;
+          height: 32px;
+          line-height: 32px;
+        }
+
+        .buttonStyle {
+          margin-top: 10px;
+          display: flex;
+          flex-direction: row-reverse;
+          align-items: center;
+        }
+      }
+    }
+
+    .footer {
+      padding-top: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-top: 1px solid #e0e0e0;
+    }
+
+    .total {
+      font-size: 16px;
+      color: #2d3040;
+      letter-spacing: 0;
+
+      .totalNum {
+        color: #4477ee;
+      }
+    }
+  }
+}
+
+.cylon-modal-root {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+}

package/lib/common/ProductModal/index.js

@@ -216,8 +216,7 @@ var promType = {
   FLASH_SALE: '2',
   GROUP_BUY: '4'
 };
-var Option = _antd.Select.Option,
-    OptGroup = _antd.Select.OptGroup;
+var Option = _antd.Select.Option;
 var InputGroup = _antd.Input.Group;
 
 var ProductModal = function ProductModal(props) {

package/lib/common/ProductSource/index.js

@@ -19,6 +19,8 @@ var _ProductModal = _interopRequireDefault(require("../ProductModal"));
 
 require("./index.less");
 
+var _AffiliateProductModal = _interopRequireDefault(require("../AffiliateProductModal"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -172,7 +174,8 @@ function ProductSource(_a) {
   var _this = this;
 
   var value = _a.value,
-      onChange = _a.onChange;
+      onChange = _a.onChange,
+      isAffiliate = _a.isAffiliate;
 
   var _b = (0, _react.useState)([]),
       selectedProds = _b[0],
@@ -184,18 +187,30 @@ function ProductSource(_a) {
 
   var onSelectProduct = function onSelectProduct() {
     return __awaiter(_this, void 0, void 0, function () {
-      var list;
+      var url, param, list;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             if (!(value && value.length > 0)) return [3
             /*break*/
             , 2];
+            url = "/designer/v1/" + window.magicDesign.MBaseUrl + "/products";
+            param = {
+              products: value
+            };
+
+            if (isAffiliate) {
+              url = "/designer/v1/" + window.magicDesign.MBaseUrl + "/distributor/product/list";
+              param = {
+                affiliateProductIds: value,
+                pageSize: value.length,
+                pageIndex: 1
+              };
+            }
+
             return [4
             /*yield*/
-            , (0, _commonUtil.commonFetch)("/designer/v1/" + window.magicDesign.MBaseUrl + "/products", {
-              products: value
-            }, 'GET')];
+            , (0, _commonUtil.commonFetch)(url, param, 'GET')];
 
           case 1:
             list = _a.sent().list;
@@ -219,9 +234,18 @@ function ProductSource(_a) {
   };
 
   var handleModalSave = function handleModalSave(list) {
-    var ids = list.map(function (prod) {
-      return prod.productId;
-    }).join(',');
+    var ids = '';
+
+    if (isAffiliate) {
+      ids = list.map(function (prod) {
+        return prod.affiliateProductId;
+      }).join(',');
+    } else {
+      ids = list.map(function (prod) {
+        return prod.productId;
+      }).join(',');
+    }
+
     onChange(ids);
   };
 
@@ -242,7 +266,15 @@ function ProductSource(_a) {
     className: "total"
   }, (0, _locale.i18n)('TOTAL_PRODUCTS', {
     count: getLength()
-  })), visible && /*#__PURE__*/_react["default"].createElement(_ProductModal["default"], {
+  })), visible && (isAffiliate ? /*#__PURE__*/_react["default"].createElement(_AffiliateProductModal["default"], {
+    closeModal: function closeModal() {
+      return setVisbile(false);
+    },
+    defaultList: selectedProds,
+    handleModalSave: handleModalSave,
+    maxSelect: 100,
+    visible: visible
+  }) : /*#__PURE__*/_react["default"].createElement(_ProductModal["default"], {
     closeModal: function closeModal() {
       return setVisbile(false);
     },
@@ -250,5 +282,5 @@ function ProductSource(_a) {
     handleModalSave: handleModalSave,
     maxSelect: 100,
     visible: visible
-  }));
+  })));
 }

package/lib/composite-comp/common/components/AffiliateProductItem/imgs/icon-Balance2.svg

@@ -0,0 +1,9 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="balance-02 4">
+<path id="Vector" d="M6.29612 7.51894C6.27534 6.80062 6.53358 6.10217 7.01665 5.57014C7.52439 5.03348 8.24492 4.74601 9.10172 4.73948L11.2932 4.72454C11.1735 4.42166 10.9655 4.16179 10.6962 3.97869C10.4269 3.7956 10.1087 3.69775 9.78305 3.69788H2.54225C2.32566 3.69788 2.11794 3.78392 1.96478 3.93707C1.81163 4.09023 1.72559 4.29795 1.72559 4.51454V10.6195C1.72559 10.8361 1.81163 11.0438 1.96478 11.1969C2.11794 11.3501 2.32566 11.4361 2.54225 11.4361H9.78399C10.1171 11.4359 10.4421 11.3333 10.7149 11.1421C10.9877 10.951 11.1951 10.6805 11.3091 10.3675L9.04292 10.3833C7.68585 10.3815 6.31012 9.49574 6.29612 7.51894Z" fill="#269E2C"/>
+<path id="Vector_2" d="M8.25924 6.86653C8.06604 7.03733 7.97364 7.28653 7.97924 7.62907C7.97924 8.1956 8.41604 8.5344 9.13844 8.5344L11.412 8.51853V6.56973L9.25138 6.58467C8.79964 6.5884 8.46644 6.68267 8.25924 6.86653Z" fill="#269E2C"/>
+<path id="Vector_3" d="M11.5072 4.90092L9.10292 4.91865C7.40052 4.93079 6.46345 6.10585 6.47372 7.51892C6.48678 9.38559 7.79438 10.2135 9.06278 10.2041L11.509 10.1873H11.524C11.722 10.1873 11.9119 10.1087 12.052 9.96863C12.192 9.8286 12.2706 9.63868 12.2706 9.44065C12.2706 9.24262 12.192 9.05271 12.052 8.91268C11.9119 8.77265 11.722 8.69399 11.524 8.69399H11.4736L9.15238 8.71079C8.29558 8.71639 7.80278 8.27492 7.79812 7.62999C7.79252 6.86185 8.23492 6.41665 9.24758 6.40639L11.4876 6.39052H11.5286C11.7267 6.39052 11.9166 6.31185 12.0566 6.17183C12.1966 6.0318 12.2753 5.84188 12.2753 5.64385C12.2753 5.44582 12.1966 5.25591 12.0566 5.11588C11.9166 4.97585 11.7267 4.89719 11.5286 4.89719L11.5072 4.90092Z" fill="#FF5B00"/>
+<path id="Vector_4" d="M6.44623 7.98895C6.73941 7.8857 6.89338 7.56434 6.79014 7.27116C6.68689 6.97798 6.36553 6.82401 6.07235 6.92726C5.77917 7.0305 5.6252 7.35187 5.72844 7.64504C5.83169 7.93822 6.15305 8.09219 6.44623 7.98895Z" fill="white"/>
+<path id="Vector_5" d="M2.61328 3.472H9.54048C9.33328 3.26667 9.11675 2.93907 8.86662 2.56573C6.47448 2.86813 5.00355 3.17333 2.61328 3.472Z" fill="#269E2C"/>
+</g>
+</svg>

package/lib/composite-comp/common/components/AffiliateProductItem/imgs/icon-Koin.svg

@@ -0,0 +1,40 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Koin">
+<g id="Group">
+<g id="rank icon">
+<path id="Vector" d="M7 12.25C9.8995 12.25 12.25 9.89946 12.25 6.99997C12.25 4.10047 9.8995 1.74997 7 1.74997C4.10051 1.74997 1.75 4.10047 1.75 6.99997C1.75 9.89946 4.10051 12.25 7 12.25Z" fill="url(#paint0_linear_4487_10245)"/>
+<g id="Group_2" opacity="0.9">
+<path id="Vector_2" d="M7.00512 11.7405C9.62051 11.7405 11.7407 9.62027 11.7407 7.00487C11.7407 4.38948 9.62051 2.26929 7.00512 2.26929C4.38973 2.26929 2.26953 4.38948 2.26953 7.00487C2.26953 9.62027 4.38973 11.7405 7.00512 11.7405Z" fill="url(#paint1_radial_4487_10245)"/>
+<g id="Group_3">
+<g id="Group_4" style="mix-blend-mode:screen">
+<path id="Vector_3" d="M7.00512 11.7405C9.62051 11.7405 11.7407 9.62027 11.7407 7.00487C11.7407 4.38948 9.62051 2.26929 7.00512 2.26929C4.38973 2.26929 2.26953 4.38948 2.26953 7.00487C2.26953 9.62027 4.38973 11.7405 7.00512 11.7405Z" fill="#020202"/>
+</g>
+</g>
+</g>
+<path id="Vector_4" d="M5.93809 4.50593V7.45313C6.41413 6.83039 6.88088 6.19898 7.44791 5.65794C7.74133 5.3831 8.03413 5.33729 8.42783 5.33729H9.13229V5.3831C8.7844 5.67652 7.64043 6.97586 7.12787 7.62584C7.52157 8.11054 7.90599 8.61629 8.34488 9.06261C8.79368 9.51141 8.99487 9.60241 9.29695 9.70331C9.16881 10.097 8.96763 10.3075 8.46436 10.3075C8.16317 10.2994 7.87598 10.1786 7.65962 9.96888C7.02759 9.31889 6.47851 8.58658 5.93871 7.86417V10.2716L5.54501 10.2809C4.97797 10.2895 4.70312 9.98745 4.70312 9.41422V3.69128H5.09683C5.6911 3.69128 5.93809 4.02866 5.93809 4.50593Z" fill="#F95812"/>
+<g id="Clip path group">
+<mask id="mask0_4487_10245" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="2" width="10" height="10">
+<g id="clip-path">
+<path id="Vector_5" d="M7.00512 11.7405C9.62051 11.7405 11.7407 9.62027 11.7407 7.00487C11.7407 4.38948 9.62051 2.26929 7.00512 2.26929C4.38973 2.26929 2.26953 4.38948 2.26953 7.00487C2.26953 9.62027 4.38973 11.7405 7.00512 11.7405Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_4487_10245)">
+<g id="Group_5">
+<path id="Vector_6" opacity="0.2" d="M0.0784104 1.79022C0.508637 3.06976 1.12333 3.96673 1.67675 4.58577C4.34168 7.55711 9.29764 8.23805 14.3898 6.67747L12.4993 10.7055C11.3659 11.6642 10.009 12.3215 8.55418 12.6165C6.17463 13.0931 4.2383 12.4425 3.31408 12.0426C2.48149 11.6799 0.199121 10.6931 -0.905849 8.23309C-1.7044 6.45338 -2.00463 3.64298 -0.556096 2.2483C-0.366832 2.06696 -0.153288 1.91279 0.0784104 1.79022Z" fill="#FDECD7"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4487_10245" x1="2.4526" y1="9.62528" x2="11.5474" y2="4.37466" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F78B54"/>
+<stop offset="1" stop-color="#F8BC7F"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4487_10245" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.00512 7.00487) scale(4.73559)">
+<stop stop-color="#FDECD7"/>
+<stop offset="1" stop-color="#F8C486"/>
+</radialGradient>
+</defs>
+</svg>

package/lib/composite-comp/common/components/AffiliateProductItem/index.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _iconBalance = _interopRequireDefault(require("./imgs/icon-Balance2.svg"));
+
+var _iconKoin = _interopRequireDefault(require("./imgs/icon-Koin.svg"));
+
+var _currencyUtil = require("../../../../utils/currencyUtil");
+
+var _components = require("../../../../meta-comp/components");
+
+var _NewImg = _interopRequireDefault(require("../../../../common/NewImg"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var AffiliateProductItem =
+/** @class */
+function (_super) {
+  __extends(AffiliateProductItem, _super);
+
+  function AffiliateProductItem() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  AffiliateProductItem.prototype.render = function () {
+    var _a;
+
+    var _b = this.props,
+        data = _b.data,
+        panelProps = _b.panelProps,
+        onItemClick = _b.onItemClick,
+        fixHeight = _b.fixHeight,
+        layout = _b.layout,
+        imgHeight = _b.imgHeight,
+        imgWidth = _b.imgWidth,
+        rest = __rest(_b, ["data", "panelProps", "onItemClick", "fixHeight", "layout", "imgHeight", "imgWidth"]);
+
+    var imgStyle = {};
+    if (imgWidth) imgStyle.width = imgWidth;
+    if (imgHeight) imgStyle.height = imgHeight;
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      className: (0, _classnames["default"])('m-product-item-wrap', {
+        fixHeight: fixHeight,
+        horizontal: layout === 'horizontal'
+      }),
+      onClick: function onClick() {
+        return onItemClick();
+      },
+      style: {
+        width: imgWidth + 2
+      }
+    }, rest), /*#__PURE__*/_react["default"].createElement(_NewImg["default"], {
+      className: "product-img",
+      lazy: true,
+      src: (data === null || data === void 0 ? void 0 : data.imgUrls) && ((_a = data === null || data === void 0 ? void 0 : data.imgUrls) === null || _a === void 0 ? void 0 : _a.length) > 0 && data.imgUrls[0],
+      style: imgStyle
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "contentWrap"
+    }, panelProps.productName.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "productItemContent"
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "producItemName",
+      data: __assign(__assign({}, panelProps.productName), {
+        text: data.productName
+      }),
+      readonly: true
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cashBackBox"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cashBackBox_cashBack"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _iconBalance["default"]
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cashBackBox_text"
+    }, "Cashback Saldo", /*#__PURE__*/_react["default"].createElement("span", null, (0, _currencyUtil.formatCurrencyWithSymbol)(data.buyCommission || 0)))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cashBackBox_koin"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _iconKoin["default"]
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cashBackBox_text"
+    }, "Cashback", /*#__PURE__*/_react["default"].createElement("span", null, (0, _currencyUtil.formatCurrency)(data.giftCommission || 0)), "Koin"))), panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "producItemPrice",
+      data: __assign(__assign({}, panelProps.salesPrice), {
+        text: (0, _currencyUtil.formatCurrencyWithSymbol)(data.productPrice || 0)
+      }),
+      readonly: true,
+      style: {
+        color: panelProps.salesPrice.content.color
+      }
+    })));
+  };
+
+  AffiliateProductItem.defaultProps = {
+    data: {},
+    panelProps: {},
+    fixHeight: false,
+    layout: 'vertical'
+  };
+  return AffiliateProductItem;
+}(_react["default"].Component);
+
+var _default = AffiliateProductItem;
+exports["default"] = _default;

package/lib/composite-comp/common/components/AffiliateProductItem/index.less

@@ -0,0 +1,107 @@
+.m-product-item-wrap {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border: 1px solid #D2D9E5;
+  width: 142px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 4px;
+
+  .productItemImg {
+    height: 167px;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+  }
+  .productItemContent {
+    padding: 4px 4px 0;
+    .producItemName {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+  }
+  .cashBackBox {
+    width: 100%;
+    background: #F9F9F9;
+    padding: 4px;
+    .cashBackBox_cashBack {
+      display: flex;
+      align-items: center;
+      img {
+        width: 14px;
+        height: 14px;
+      }
+      .cashBackBox_text {
+        display: flex;
+        align-items: center;
+        padding-left: 4px;
+        color: #279e2c;
+        font-family: Trueno;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 12px;
+        span {
+          padding-left: 2px;
+        }
+      }
+    }
+    .cashBackBox_koin {
+      display: flex;
+      align-items: center;
+      img {
+        width: 14px;
+        height: 14px;
+      }
+      .cashBackBox_text {
+        color: #fa7539;
+        font-family: Trueno;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 12px;
+        display: flex;
+        align-items: center;
+        padding-left: 4px;
+        span {
+          padding: 0 2px;
+        }
+      }
+    }
+  }
+  .producItemPrice {
+    padding: 4px;
+  }
+
+  &.fixHeight {
+    .promotions-wrap {
+      height: 30px;
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    .product-name-wrap {
+      height: 38px;
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+
+    .product-img {
+      width: 100px;
+      height: 100%;
+      min-height: 100px;
+    }
+
+    .content-wrap {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+}

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -202,11 +202,13 @@ function (_super) {
         text: _price
       }),
       readonly: true
-    }), oldPrice && panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }), panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "price-sold-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "old-price-wrap"
     }, !!discount && /*#__PURE__*/_react["default"].createElement("span", {
       className: "discount"
-    }, "-", discount, "%"), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }, "-", discount, "%"), oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "old-price",
       data: __assign(__assign({}, panelProps.salesPrice), {
         text: oldPrice
@@ -215,7 +217,9 @@ function (_super) {
       style: {
         color: panelProps.salesPrice.content.color
       }
-    })), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
+    })), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sold-count"
+    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")), showProgress && panelProps.salesProgressVisible.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "progress-wrap"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "text"
@@ -226,9 +230,7 @@ function (_super) {
       style: {
         width: salePercent + "%"
       }
-    }))), !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "sold-count"
-    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")));
+    })))));
   };
 
   ProductItem.defaultProps = {