@fonixtree/magic-design 2.0.191 → 2.0.192

package/es/common/SelectStoreModal/index.less

@@ -0,0 +1,152 @@
+.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: flex-start;
+
+
+        .btn-select-type {
+          text-align: right;
+          margin-bottom: 15px;
+        }
+
+        .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/es/composite-comp/public/components/Stores/mobile/StoreItem/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _defaultImg = _interopRequireDefault(require("./img/defaultImg.png"));
+
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
 var _currencyUtil = require("../../../../../../utils/currencyUtil");
@@ -121,19 +123,23 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_common.NewImg, {
       className: "product-img",
       lazy: true,
-      src: data.storePosterUrl || data.storeLogoUrl
+      src: data.storePosterUrl || _defaultImg["default"]
     }), freeDeliveryLabel.open && data.freeShipping === 'Y' && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "flag",
       data: freeDeliveryLabel
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "content-wrap"
-    }, storeName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }, storeName.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "name-row"
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "name",
       data: __assign(__assign({}, storeName), {
         text: data.storeName
       }),
       readonly: true
-    }), minOrder.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }), data.newFlag === 'Y' && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "new"
+    }, "New")), minOrder.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "minOrder no-reversed",
       data: __assign(__assign({}, minOrder), {
         text: (0, _commonUtil.reverseStrArr)([(0, _locale.i18n)('MIN_ORDER'), ':', (data.minOrderAmount || 0) + " IQD"])
@@ -177,19 +183,23 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_common.NewImg, {
       className: "product-img",
       lazy: true,
-      src: data.storePosterUrl || data.storeLogoUrl
+      src: data.storeLogoUrl || _defaultImg["default"]
     }), freeDeliveryLabel.open && data.freeShipping === 'Y' && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "flag",
       data: freeDeliveryLabel
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "content-wrap"
-    }, storeName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }, storeName.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "name-row"
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "name",
       data: __assign(__assign({}, storeName), {
         text: data.storeName
       }),
       readonly: true
-    }), storeDesc.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }), data.newFlag === 'Y' && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "new"
+    }, "New")), storeDesc.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "desc",
       data: __assign(__assign({}, storeDesc), {
         text: data.comments

package/es/composite-comp/public/components/Stores/mobile/StoreItem/index.less

@@ -24,10 +24,24 @@
   padding: 0.12rem 0.2rem;
   width: 4.4rem;
 }
-.m-store-item-wrap .content-wrap .name {
+.m-store-item-wrap .content-wrap .name-row {
+  display: flex;
+  align-items: center;
+}
+.m-store-item-wrap .content-wrap .name-row .name {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  width: fit-content !important;
+}
+.m-store-item-wrap .content-wrap .name-row .new {
+  background: rgba(110, 157, 40, 0.25);
+  color: #395212;
+  font-size: 0.24rem;
+  border-radius: 0.08rem;
+  padding: 0.1rem 0.12rem;
+  margin-left: 0.16rem;
+  line-height: 1;
 }
 .m-store-item-wrap .content-wrap .desc {
   overflow: hidden;

package/es/composite-comp/public/components/Stores/mobile/index.js

@@ -19,6 +19,8 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _storeUtil = require("../../../../../utils/storeUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -210,8 +212,6 @@ var defaultData = [{
   storeId: 1,
   storeName: '落落彩虹的大超市',
   comments: '没有比我面积更大、性价比更高的商品了。',
-  storeLogoUrl: '/get/resource/store6/conf/20240905/picture/3331831612826257207296_600.jpg',
-  storePosterUrl: '/get/resource/store6/conf/20240905/picture/11111831612121177927680_600.png',
   freeShipping: null,
   distance: '0',
   deliveryTime: null,
@@ -222,8 +222,6 @@ var defaultData = [{
   storeId: 2,
   storeName: '落落彩虹的大超市',
   comments: '没有比我面积更大、性价比更高的商品了。',
-  storeLogoUrl: '/get/resource/store6/conf/20240905/picture/3331831612826257207296_600.jpg',
-  storePosterUrl: '/get/resource/store6/conf/20240905/picture/11111831612121177927680_600.png',
   freeShipping: 'Y',
   distance: '18',
   deliveryTime: null,
@@ -271,7 +269,7 @@ function (_super) {
               }
 
               if ((0, _commonUtil.isLogin)()) {
-                info = getStore('USER_ADDRESS_INFO') || {};
+                info = (0, _storeUtil.getStore)('USER_ADDRESS_INFO') || {};
 
                 if (info.longitude && info.latitude) {
                   params.longitude = info.longitude;

package/es/composite-comp/public/config-panels/StoresConfig/ConfigContent/index.js

@@ -127,7 +127,7 @@ function (_super) {
       }, {
         key: '8',
         name: (0, _locale.i18n)('DISTANCE'),
-        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+        value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
           data: panelProps.distance
         }),
         metaOption: panelProps.distance

package/es/locale/ar/ar.json

@@ -1,4 +1,7 @@
 {
+  "STORE_STATE": "Store State",
+  "BUSINESS_TYPE": "Business Type",
+  "STORE_SELECT": "Store Select",
   "SELECT_STORES": "Select stores",
   "HIGH_SALES_STORES": "High sales stores",
   "NEW_STORES": "New stores",

package/es/locale/en/en.json

@@ -1,4 +1,7 @@
 {
+  "STORE_STATE": "Store State",
+  "BUSINESS_TYPE": "Business Type",
+  "STORE_SELECT": "Store Select",
   "SELECT_STORES": "Select stores",
   "HIGH_SALES_STORES": "High sales stores",
   "NEW_STORES": "New stores",

package/es/locale/es/es.json

@@ -1,4 +1,7 @@
 {
+  "STORE_STATE": "Store State",
+  "BUSINESS_TYPE": "Business Type",
+  "STORE_SELECT": "Store Select",
   "SELECT_STORES": "Select stores",
   "HIGH_SALES_STORES": "High sales stores",
   "NEW_STORES": "New stores",

package/es/locale/mn/mn.json

@@ -1,4 +1,7 @@
 {
+  "STORE_STATE": "Store State",
+  "BUSINESS_TYPE": "Business Type",
+  "STORE_SELECT": "Store Select",
   "SELECT_STORES": "Select stores",
   "HIGH_SALES_STORES": "High sales stores",
   "NEW_STORES": "New stores",

package/lib/common/SelectStoreModal/SortableImageList/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SortableImageList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+
+var _Iconfont = _interopRequireDefault(require("../../Iconfont"));
+
+require("./index.less");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SortableImageList(_a) {
+  var selectedList = _a.selectedList,
+      setSelectedList = _a.setSelectedList;
+
+  var _b = (0, _react.useState)(''),
+      dragId = _b[0],
+      setDragId = _b[1];
+
+  var _c = (0, _react.useState)(selectedList || []),
+      list = _c[0],
+      setList = _c[1];
+
+  var ref = (0, _react.useRef)();
+
+  var onDragEnd = function onDragEnd() {
+    console.log('onDragEnd');
+    setDragId('');
+
+    if (ref.current) {
+      setSelectedList(ref.current);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    setList(selectedList || []);
+  }, [selectedList]);
+
+  var delSelectedItem = function delSelectedItem(index) {
+    var rows = JSON.parse(JSON.stringify(selectedList));
+    rows.splice(index, 1);
+    setSelectedList(rows);
+  };
+
+  var moveCard = (0, _react.useCallback)(function (dragNodeId, hoverNodeId) {
+    var dragIndex = list.findIndex(function (comp) {
+      return comp.productId === Number(dragNodeId);
+    });
+    var hoverIndex = list.findIndex(function (comp) {
+      return comp.productId === Number(hoverNodeId);
+    });
+    setList(function (prevCards) {
+      var newList = (0, _immutabilityHelper["default"])(prevCards, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, prevCards[dragIndex]]]
+      });
+      ref.current = newList;
+      return newList;
+    });
+  }, [list]);
+
+  var onDragEnter = function onDragEnter(e) {
+    console.log('onDragEnter');
+    var hoverNodeId = e.currentTarget.dataset.nodeid;
+
+    if (dragId === hoverNodeId) {
+      return;
+    }
+
+    moveCard(dragId, hoverNodeId);
+  };
+
+  var onDragStart = function onDragStart(e) {
+    setDragId(e.currentTarget.dataset.nodeid);
+    console.log('onDragStart');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "imgListWrap"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "selectedItem"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "selectedItemImg " + (item.state !== 'A' ? 'invalid' : ''),
+      "data-nodeid": item.productId,
+      draggable: "true",
+      onDragEnd: onDragEnd,
+      onDragEnter: onDragEnter,
+      onDragOver: function onDragOver(e) {
+        e.preventDefault();
+      },
+      onDragStart: onDragStart,
+      src: item.productImageUrl,
+      title: item.productName
+    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "selectedItemClose",
+      color: "#000",
+      onClick: function onClick() {
+        return delSelectedItem(index);
+      },
+      size: 12,
+      type: "icon-close"
+    }));
+  }));
+}

package/lib/common/SelectStoreModal/SortableImageList/index.less

@@ -0,0 +1,3 @@
+.imgListWrap {
+  display: flex;
+}