@fonixtree/magic-design 0.1.78 → 0.1.80

package/es/composite-comp/bol/second-config-panels/WalletNuriSecondConfig/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _locale = require("../../../../locale");
+
+var _common = require("../../../../common");
+
+var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/TextConfig"));
+
+var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
+
+var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 WalletSecondConfig =
+/** @class */
+function (_super) {
+  __extends(WalletSecondConfig, _super);
+
+  function WalletSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      (0, _coreUtil.renderPreview)();
+
+      _this.setState({});
+    };
+
+    _this.getContentPanel = function () {
+      var panelProps = _this.props.panelProps;
+
+      var iconSetting = /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: ""
+      }, /*#__PURE__*/_react["default"].createElement(_common.IconPicker, {
+        onChange: function onChange(icon) {
+          panelProps.tip.url = icon;
+
+          _this.reRender();
+        },
+        value: panelProps.tip.url
+      }));
+
+      var defaultSource = [{
+        key: panelProps.logo.id,
+        name: (0, _locale.i18n)('LOGO'),
+        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+          data: panelProps.logo,
+          needHover: false
+        }),
+        metaOption: panelProps.logo
+      }, {
+        key: panelProps.title.id,
+        name: (0, _locale.i18n)('TITLE'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.title
+        }),
+        metaOption: panelProps.title
+      }, {
+        key: panelProps.amount.id,
+        name: (0, _locale.i18n)('AMOUNT'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.amount
+        }),
+        metaOption: panelProps.amount
+      }, {
+        key: panelProps.text.id,
+        name: (0, _locale.i18n)('TEXT'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.text
+        }),
+        metaOption: panelProps.text
+      }, {
+        key: panelProps.tip.id,
+        name: (0, _locale.i18n)('TIPS'),
+        value: iconSetting,
+        metaOption: panelProps.tip
+      }];
+      return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
+        divider: "dashed",
+        headerSize: "middle",
+        onRefresh: function onRefresh() {
+          return (0, _coreUtil.renderPreview)();
+        },
+        showActiveColor: true,
+        source: defaultSource,
+        type: "switch"
+      });
+    };
+
+    return _this;
+  }
+
+  WalletSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "Wallet_second_conf_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: panelProps.id || 'walletNuriContent',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: this.getContentPanel()
+      }]
+    }));
+  };
+
+  WalletSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return WalletSecondConfig;
+}(_BaseConfig["default"]);
+
+var _default = WalletSecondConfig;
+exports["default"] = _default;

package/es/composite-comp/bol/second-config-panels/WalletSecondConfig/index.js

@@ -9,16 +9,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _antd = require("antd");
 
+var _mobx = require("../../../../mobx");
+
 var _locale = require("../../../../locale");
 
 var _common = require("../../../../common");
 
-var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
-
 var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/TextConfig"));
 
+var _ButtonConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ButtonConfig"));
+
+var _constants = require("../../../../constants");
+
 var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
 
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
 var _coreUtil = require("../../../../utils/coreUtil");
 
 require("./index.less");
@@ -51,22 +57,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-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 WalletSecondConfig =
 /** @class */
 function (_super) {
@@ -81,26 +71,41 @@ function (_super) {
       var panelProps = _this.props.panelProps;
       var defaultSource = [{
         key: 'defaultSource_1',
-        name: (0, _locale.i18n)('IMAGE'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image
-        }),
-        metaOption: panelProps.image
-      }, {
-        key: 'defaultSource_2',
         name: (0, _locale.i18n)('TITLE'),
         value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
           data: panelProps.title
         }),
         metaOption: panelProps.title
       }, {
-        key: 'defaultSource_3',
+        key: 'defaultSource_2',
         name: (0, _locale.i18n)('AMOUNT'),
         value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
           data: panelProps.amount
         }),
         metaOption: panelProps.amount
       }];
+      var defaultSource2 = [{
+        key: 'defaultSource_3',
+        name: (0, _locale.i18n)('TEXT'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.text
+        }),
+        metaOption: panelProps.text
+      }, {
+        key: 'defaultSource_4',
+        name: (0, _locale.i18n)('BUTTON'),
+        value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
+          data: panelProps.button
+        }),
+        metaOption: panelProps.button
+      }, {
+        key: 'defaultSource_5',
+        name: (0, _locale.i18n)('PEEK'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.peek
+        }),
+        metaOption: panelProps.peek
+      }];
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
         divider: "dashed",
         headerSize: "middle",
@@ -116,88 +121,59 @@ function (_super) {
         title: (0, _locale.i18n)('SOURCE_OF_AMOUNT')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
+          _mobx.frameStore.textModalState.close();
+
           panelProps.sourceType = v;
           panelProps.title.text = v;
+          panelProps.title.html = '';
 
           _this.selfRender();
         },
         value: panelProps.sourceType
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "Cashback"
-      }, (0, _locale.i18n)('Cashback')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "Credit"
+        value: _constants.walletType.BALANCE
+      }, (0, _locale.i18n)('Balance')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: _constants.walletType.B2B
+      }, (0, _locale.i18n)('B2B PayLater')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: _constants.walletType.CENDUIT
+      }, (0, _locale.i18n)('CenDuit')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: _constants.walletType.BNPL
+      }, (0, _locale.i18n)('BNPL')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: _constants.walletType.CREDIT
       }, (0, _locale.i18n)('Credit')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "BNPL"
-      }, (0, _locale.i18n)('BNPL'))))));
-    };
-
-    _this.resetHover = function () {
-      var panelProps = _this.props.panelProps;
-
-      if (panelProps.hover.open) {
-        panelProps.hover.image = __assign(__assign({}, panelProps.hover.image), JSON.parse(JSON.stringify(panelProps.image)));
-        panelProps.hover.title = __assign(__assign({}, panelProps.hover.title), JSON.parse(JSON.stringify(panelProps.title)));
-        panelProps.hover.amount = __assign(__assign({}, panelProps.hover.amount), JSON.parse(JSON.stringify(panelProps.amount)));
-      }
+        value: _constants.walletType.CASHBACK
+      }, (0, _locale.i18n)('Cashback'))))), /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
+        divider: "dashed",
+        headerSize: "middle",
+        onRefresh: function onRefresh() {
+          return (0, _coreUtil.renderPreview)();
+        },
+        showActiveColor: true,
+        source: defaultSource2,
+        type: "switch"
+      }));
     };
 
     return _this;
   }
 
   WalletSecondConfig.prototype.render = function () {
-    var _this = this;
-
     var panelProps = this.props.panelProps;
-
-    var hoverPanel = /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
-      divider: "dashed",
-      noChange: true,
-      onRefresh: function onRefresh() {
-        return (0, _coreUtil.renderPreview)();
-      },
-      source: [{
-        key: 'hoverSetting_1',
-        name: (0, _locale.i18n)('IMAGE'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.hover.image
-        }),
-        metaOption: panelProps.hover.image
-      }, {
-        key: 'hoverSetting_2',
-        name: (0, _locale.i18n)('TITLE'),
-        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
-          data: panelProps.hover.title
-        }),
-        metaOption: panelProps.hover.title
-      }, {
-        key: 'hoverSetting_3',
-        name: (0, _locale.i18n)('AMOUNT'),
-        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
-          data: panelProps.hover.amount
-        }),
-        metaOption: panelProps.hover.amount
-      }],
-      type: "switch"
-    });
-
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "Wallet_second_conf_wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
       divider: "bold",
       headerSize: "large",
-      onRefresh: function onRefresh() {
-        return _this.resetHover();
-      },
       source: [{
         key: '1',
         name: (0, _locale.i18n)('CONTENT'),
         value: this.getContentPanel()
       }, {
         key: '2',
-        name: (0, _locale.i18n)('HOVER'),
-        value: hoverPanel,
-        metaOption: panelProps.hover,
-        toggleType: 'switch'
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: panelProps.background
+        })
       }]
     }));
   };

package/es/composite-comp/bol/second-config-panels/WalletSecondConfig/index.less

@@ -2,6 +2,8 @@
 
   .sourceOfAmount {
     border-top: 1px dashed #D2D9E5;
+    border-bottom: 1px dashed #D2D9E5;
     padding-top: 20px;
+    padding-bottom: 10px;
   }
 }

package/es/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/es/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/es/composite-comp/common/components/AffiliateProductItem/index.js

@@ -0,0 +1,177 @@
+"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,
+        customFont = _b.customFont,
+        rest = __rest(_b, ["data", "panelProps", "onItemClick", "fixHeight", "layout", "imgHeight", "imgWidth", "customFont"]);
+
+    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 " + (customFont ? 'custom_font' : '')
+    }, "Cashback Saldo", /*#__PURE__*/_react["default"].createElement("span", null, (0, _currencyUtil.formatCurrencyWithSymbolNotSpace)(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 " + (customFont ? 'custom_font' : '')
+    }, "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.formatCurrencyWithSymbolNotSpace)(data.productPrice || 0)
+      }),
+      readonly: true,
+      style: {
+        color: panelProps.salesPrice.content.color
+      }
+    })));
+  };
+
+  AffiliateProductItem.defaultProps = {
+    data: {},
+    panelProps: {},
+    fixHeight: false,
+    layout: 'vertical',
+    customFont: false
+  };
+  return AffiliateProductItem;
+}(_react["default"].Component);
+
+var _default = AffiliateProductItem;
+exports["default"] = _default;