@subiz/widget-v4 4.0.58 → 4.0.63

package/compiled_src/order/order.js

@@ -0,0 +1,1220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _index = _interopRequireDefault(require("../util/index.js"));
+
+var _time = _interopRequireDefault(require("../chatbox/time.js"));
+
+var common = _interopRequireWildcard(require("../common.js"));
+
+var _DropdownSelect = _interopRequireDefault(require("../chatbox/DropdownSelect.js"));
+
+var _address_picker = _interopRequireDefault(require("./address_picker.js"));
+
+var _preact = require("preact");
+
+var _icon = _interopRequireDefault(require("./icon.js"));
+
+var _spinner = _interopRequireDefault(require("../chatbox/spinner.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var checkedimg = require('../../assets/img/done_green.svg');
+
+var ximg = require('../../assets/img/x.svg');
+
+class Order extends common.Com {
+  state = {
+    loadProvince: true,
+    g_err: '',
+    fullname: '',
+    email: '',
+    phone: '',
+    loading: true,
+    order: {},
+    err: {},
+    selectedProvince: null,
+    selectedDistrict: null,
+    selectedWard: null,
+    street: '',
+    address: '',
+    sending: false,
+    step: ''
+  };
+
+  constructor(props) {
+    super(props);
+    this.load();
+  }
+
+  async load() {
+    if (!this.props.order_id) return;
+    let orderout = await this.props.store.fetchOrder(this.props.order_id);
+    this.setState({
+      loading: false
+    });
+
+    if (!orderout.error) {
+      this.setState({
+        order: orderout.body
+      });
+    } else {
+      this.setState({
+        error: orderout.error
+      });
+    }
+
+    let user = this.props.store.matchUser();
+
+    let attributes = _index.default.get(this.props.store.matchUser(), 'attributes', []);
+
+    let fullname = _index.default.get(_index.default.find(attributes, att => att.key === 'fullname'), 'text');
+
+    let email = _index.default.get(_index.default.find(attributes, att => att.key === 'emails'), 'text');
+
+    let phone = _index.default.get(_index.default.find(attributes, att => att.key === 'phones'), 'text');
+
+    this.setState({
+      fullname,
+      email,
+      phone
+    });
+    await this.props.store.fetchShippingAddresses();
+    let out = await this.props.store.list_provinces();
+    this.setState({
+      loadProvince: false
+    });
+    if (!out.error) this.setState({
+      provinces: _index.default.get(out, 'body.addresses')
+    });
+  }
+
+  isMobile() {
+    if (this.props.cid) return true;
+    if (this.props.isMobile) return true;
+    return this.props.store.isMobile();
+  }
+
+  onChangeShippingAddress(id) {
+    this.setState({
+      shipping_address: id,
+      err: {},
+      g_err: ''
+    });
+  }
+
+  renderMobileSuccess = order => {
+    return (0, _preact.h)("div", {
+      class: "order",
+      style: "height: 100% !important"
+    }, (0, _preact.h)("div", {
+      style: "display: flex !important; align-items: center !important; padding-top: 40px !important; padding-bottom: 20px !important; flex-direction: column !important; height: 100% !important"
+    }, (0, _preact.h)("img", {
+      style: "width: 60px !important; height: 60px !important;",
+      width: "60",
+      height: "60",
+      src: checkedimg
+    }), (0, _preact.h)("div", {
+      style: "margin-top: 20px !important; margin-bottom: 10px !important"
+    }, (0, _preact.h)("b", {
+      style: "font-size: 18px !important;"
+    }, "\u0110\u01A1n h\xE0ng c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c ghi nh\u1EADn")), (0, _preact.h)("div", {
+      class: "muted"
+    }, "T\xF4i s\u1EBD li\xEAn h\u1EC7 l\u1EA1i v\u1EDBi b\u1EA1n khi \u0111\u01A1n h\xE0ng \u0111\u01B0\u1EE3c x\u1EED l\xFD"), (0, _preact.h)("div", {
+      style: "flex:1 !important"
+    }), (0, _preact.h)("div", {
+      style: "margin-top: 20px !important; padding: 0px 20px 0 20px !important; width: 100% !important"
+    }, (0, _preact.h)("div", {
+      class: "order_btn order__btn__light",
+      onClick: this.close
+    }, this.props.t('close')))));
+  };
+
+  onChangeShipping(id) {
+    this.setState({
+      shipping: id,
+      err: {},
+      g_err: ''
+    });
+  }
+
+  onSelectProvince = async item => {
+    this.setState({
+      selectedProvince: item,
+      err: {},
+      g_err: ''
+    });
+    this.setState({
+      loadDistrict: true
+    });
+    let out = await this.props.store.list_districts({
+      id: item.id
+    });
+    this.setState({
+      loadDistrict: false
+    });
+    if (!out.error) this.setState({
+      districts: _index.default.get(out, 'body.addresses')
+    });
+  };
+  onSelectDistrict = async item => {
+    this.setState({
+      selectedDistrict: item,
+      err: {},
+      g_err: ''
+    });
+    this.setState({
+      loadWard: true
+    });
+    let out = await this.props.store.list_wards({
+      id: item.id
+    });
+    this.setState({
+      loadWard: false
+    });
+    if (!out.error) this.setState({
+      wards: _index.default.get(out, 'body.addresses')
+    });
+  };
+  onSelectWard = item => this.setState({
+    selectedWard: item,
+    err: {},
+    g_err: ''
+  });
+  onChangeFullname = e => this.setState({
+    fullname: e.target.value,
+    err: {},
+    g_err: ''
+  });
+  onChangeAddress = e => this.setState({
+    address: e,
+    err: {},
+    g_err: ''
+  });
+  onSelectAddress = addr => {
+    if (!addr) return;
+    this.setState({
+      address: [_index.default.trim(addr.address), _index.default.trim(addr.street)].join(' ').trim(),
+      street: addr.street,
+      err: {},
+      g_err: ''
+    });
+    this.onSelectWard({
+      id: addr.ward_id,
+      name: addr.ward
+    });
+    this.onSelectDistrict({
+      id: addr.district_id,
+      name: addr.district
+    });
+    this.onSelectProvince({
+      id: addr.province_id,
+      name: addr.province
+    });
+  };
+  onChangeEmail = e => this.setState({
+    email: e.target.value,
+    err: {},
+    g_err: ''
+  });
+  onChangePhone = e => this.setState({
+    phone: e.target.value,
+    err: {},
+    g_err: ''
+  });
+  onChangePaymentMethod = id => this.setState({
+    pm: id
+  });
+
+  renderDesktopPaymentMethod(order) {
+    return null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (editmode) {
+      let pms = this.props.store.matchPaymentMethods();
+
+      let $pms = _index.default.map(pms, pm => {
+        let $name = pm.description;
+
+        if (pm.method == 'bank_transfer') {
+          $name = pm.description + ' ' + pm.bank_name + ' ' + pm.bank_branch;
+        }
+
+        let cls = 'order__card';
+        let $desc = null;
+
+        if (this.state.pm === pm.id) {
+          cls += ' order__card__active';
+          $desc = (0, _preact.h)("div", {
+            class: "muted mt-1",
+            style: "margin-left: 26px !important;"
+          }, "Tr\u1EA3 ti\u1EC1n m\u1EB7t khi b\u1EA1n nh\u1EADn h\xE0ng");
+
+          if (pm.method == 'bank_transfer') {
+            $desc = (0, _preact.h)("div", {
+              class: "muted mt-1",
+              style: "margin-left: 26px !important;"
+            }, (0, _preact.h)("div", null, "STK: ", pm.bank_number), (0, _preact.h)("div", null, "Ch\u1EE7 t\xE0i kho\u1EA3n: ", pm.bank_owner));
+          }
+        }
+
+        return (0, _preact.h)("div", {
+          style: "width: 100% !important; margin-top: 10px !important;"
+        }, (0, _preact.h)("div", {
+          class: "radio"
+        }, (0, _preact.h)("input", {
+          type: "radio",
+          id: 'pm.' + pm.id,
+          onInput: e => this.onChangePaymentMethod(pm.id),
+          name: "pm",
+          checked: this.state.pm === pm.id
+        }), (0, _preact.h)("label", {
+          class: "radio--label",
+          style: `margin-left: 4px !important; font-weight: ${this.state.pm === pm.id ? 500 : 400} !important;`,
+          for: 'pm.' + pm.id
+        }, $name), (0, _preact.h)("div", {
+          class: "radio--check"
+        }, (0, _preact.h)("div", {
+          class: "inside"
+        })), $desc));
+      });
+
+      let seccls = 'card_section';
+      if (this.isMobile()) seccls = 'order_section';
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+        class: "order_section__line"
+      }), (0, _preact.h)("div", {
+        class: seccls
+      }, (0, _preact.h)("div", {
+        class: "order_label"
+      }, this.props.t('payment')), (0, _preact.h)("div", {
+        class: "form",
+        style: "justify-content: space-between !important;"
+      }, $pms)));
+    }
+
+    let pm = order.payment_method || {
+      method: 'cod'
+    };
+    let $body = null;
+    if (pm.method === 'cash') $body = (0, _preact.h)("div", null, this.props.t('pm_cash'));
+    if (pm.method === 'cod') $body = (0, _preact.h)("div", null, this.props.t('pm_cod'));
+
+    if (pm.method === 'bank_transfer') {
+      let name = pm.bank_name;
+      if (pm.bank_branch) name += ' - ' + pm.bank_branch;
+      $body = (0, _preact.h)("div", null, (0, _preact.h)("div", null, "Ng\xE2n h\xE0ng: ", name), (0, _preact.h)("div", {
+        class: "mt-1"
+      }, "Ch\u1EE7 t\xE0i kho\u1EA3n: ", pm.bank_owner), (0, _preact.h)("div", {
+        class: "mt-1"
+      }, "S\u1ED1 t\xE0i kho\u1EA3n: ", pm.bank_number));
+    }
+
+    if (!$body) return null;
+    return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+      class: "order_label"
+    }, this.props.t('payment')), $body);
+  }
+
+  renderDesktopShipping(order) {
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    let user = this.props.store.matchUser();
+
+    if (editmode) {
+      let addresses = this.props.store.matchShippingAddresses();
+
+      let provinces = _index.default.map(this.state.provinces, province => ({
+        id: province.id,
+        name: province.province
+      }));
+
+      let districts = _index.default.map(this.state.districts, district => ({
+        id: district.id,
+        name: district.district
+      }));
+
+      let wards = _index.default.map(this.state.wards, ward => ({
+        id: ward.id,
+        name: ward.ward
+      }));
+
+      let cls = 'ship_card';
+      let $body = null;
+      let ship_icon_active = false;
+
+      if (this.state.shipping === 'ship') {
+        ship_icon_active = true;
+
+        let $preaddrs = _index.default.map(addresses, addr => {
+          let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
+          let $phone = null;
+
+          if (addr.phone) {
+            $phone = (0, _preact.h)(_preact.Fragment, null, "\xA0\xB7\xA0", this.props.t('phn'), " ", addr.phone);
+          }
+
+          return (0, _preact.h)("div", {
+            style: "margin-bottom: 15px !important"
+          }, (0, _preact.h)("div", {
+            class: "radio d-flex "
+          }, (0, _preact.h)("input", {
+            type: "radio",
+            id: 'shipping_addr.' + addr.id,
+            onInput: e => this.onChangeShippingAddress(addr.id),
+            name: "shipping_address",
+            checked: this.state.shipping_address === addr.id
+          }), (0, _preact.h)("label", {
+            class: "radio--label",
+            for: 'shipping_addr.' + addr.id,
+            style: `font-weight: ${this.state.shipping_address === addr.id ? 500 : 400} !important`
+          }, addr.fullname, $phone, (0, _preact.h)("div", {
+            class: "mt-1 muted"
+          }, "DC ", fulladdr)), (0, _preact.h)("div", {
+            class: "radio--check"
+          }, (0, _preact.h)("div", {
+            class: "inside"
+          }))));
+        });
+
+        $preaddrs.push((0, _preact.h)("div", {
+          style: ""
+        }, (0, _preact.h)("div", {
+          class: "radio d-flex "
+        }, (0, _preact.h)("input", {
+          type: "radio",
+          id: 'shipping_addr.new',
+          onInput: e => this.onChangeShippingAddress('new'),
+          name: "shipping_address",
+          checked: this.state.shipping_address === 'new'
+        }), (0, _preact.h)("label", {
+          class: "radio--label",
+          for: 'shipping_addr.new'
+        }, this.state.shipping_address === 'new' ? (0, _preact.h)("b", null, "T\u1EDBi \u0111\u1ECBa ch\u1EC9 kh\xE1c") : 'Tới địa chỉ khác'), (0, _preact.h)("div", {
+          class: "radio--check"
+        }, (0, _preact.h)("div", {
+          class: "inside"
+        })))));
+        let $new = (0, _preact.h)("div", {
+          style: "padding-left: 22px !important;"
+        }, (0, _preact.h)("div", {
+          class: "d-flex"
+        }, (0, _preact.h)("div", {
+          class: "mr-2",
+          style: "flex: 1 !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('fullname')), (0, _preact.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.name && 'err'),
+          onInput: this.onChangeFullname,
+          value: this.state.fullname
+        })), (0, _preact.h)("div", {
+          class: "ml-2",
+          style: "flex: 1 !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('phones')), (0, _preact.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.phone && 'err'),
+          onInput: this.onChangePhone,
+          value: this.state.phone
+        }))), (0, _preact.h)("div", {
+          class: "",
+          style: "width: 100% !important"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('address')), (0, _preact.h)(_address_picker.default, {
+          initAddress: this.state.address,
+          store: this.props.store,
+          width: "100%",
+          onChangeAddress: this.onChangeAddress,
+          full: this.isMobile(),
+          onSelect: this.onSelectAddress,
+          extra_cls: this.state.err.address && 'err'
+        })), (0, _preact.h)("div", {
+          class: "d-flex",
+          style: "justify-content: space-between !important;"
+        }, (0, _preact.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('province')), (0, _preact.h)(_DropdownSelect.default, {
+          width: "194",
+          full: this.isMobile(),
+          has_search: true,
+          loading: this.state.loadProvince,
+          items: provinces,
+          selected: this.state.selectedProvince,
+          onSelect: this.onSelectProvince,
+          extra_cls: this.state.err.province && 'err'
+        })), (0, _preact.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-left: 7px !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('district')), (0, _preact.h)(_DropdownSelect.default, {
+          width: "194",
+          full: this.isMobile(),
+          selected: this.state.selectedDistrict,
+          has_search: true,
+          onSelect: this.onSelectDistrict,
+          loading: this.state.loadDistrict,
+          extra_cls: this.state.err.district && 'err',
+          items: districts
+        }))), (0, _preact.h)("div", {
+          class: "d-flex",
+          style: "justify-content: space-between !important;"
+        }, (0, _preact.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('ward')), (0, _preact.h)(_DropdownSelect.default, {
+          width: "194",
+          selected: this.state.selectedWard,
+          full: this.isMobile(),
+          has_search: true,
+          onSelect: this.onSelectWard,
+          extra_cls: this.state.err.ward && 'err',
+          loading: this.state.loadWard,
+          items: wards
+        })), (0, _preact.h)("div", {
+          style: "flex: 1 !important; margin-left: 7px !important;"
+        })));
+        cls += ' ship_card__active';
+
+        if (_index.default.size(addresses) == 0) {
+          $body = (0, _preact.h)("div", null, (0, _preact.h)("div", {
+            class: 'mt-3 mb-2 '
+          }, this.props.t('input_shipping_info')), $new);
+        } else {
+          if (this.state.shipping_address !== 'new') $new = null;
+          $body = (0, _preact.h)("div", null, (0, _preact.h)("div", {
+            class: "mt-3 mb-2",
+            style: "margin-bottom: 10px !important;"
+          }, "Vui l\xF2ng ch\u1ECDn \u0111\u1ECBa ch\u1EC9 giao h\xE0ng"), (0, _preact.h)("div", {
+            class: "form"
+          }, $preaddrs), $new);
+        }
+      }
+
+      let shopcls = 'ship_card';
+      let shop_icon_active = false;
+
+      if (this.state.shipping === 'shop') {
+        shop_icon_active = true;
+        shopcls += ' ship_card__active';
+        $body = (0, _preact.h)("div", null, (0, _preact.h)("div", {
+          class: "d-flex"
+        }, (0, _preact.h)("div", {
+          class: "mr-2",
+          style: "flex: 3 !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('fullname')), (0, _preact.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.name && 'err'),
+          onInput: this.onChangeFullname,
+          value: this.state.fullname
+        })), (0, _preact.h)("div", {
+          class: "ml-2",
+          style: "flex: 2 !important;"
+        }, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('phones')), (0, _preact.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.phone && 'err'),
+          onInput: this.onChangePhone,
+          value: this.state.phone
+        }))), (0, _preact.h)("div", null, (0, _preact.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('email')), (0, _preact.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.email && 'err'),
+          onInput: this.onChangeEmail,
+          value: this.state.email
+        })));
+      }
+
+      let seccls = 'card_section';
+      if (this.isMobile()) seccls = 'order_section';
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+        class: "order_section__line"
+      }), (0, _preact.h)("div", {
+        class: seccls
+      }, (0, _preact.h)("div", {
+        class: "order_label"
+      }, this.props.t('ship_to')), (0, _preact.h)("div", {
+        class: "d-flex"
+      }, (0, _preact.h)("div", {
+        class: shopcls + ' mr-3',
+        onClick: e => this.onChangeShipping('shop')
+      }, (0, _preact.h)(_icon.default, {
+        name: "shop",
+        active: shop_icon_active
+      }), " ", (0, _preact.h)("b", {
+        class: "ml-2"
+      }, "Nh\u1EADn h\xE0ng t\u1EA1i shop")), (0, _preact.h)("div", {
+        class: cls,
+        onClick: e => this.onChangeShipping('ship')
+      }, (0, _preact.h)(_icon.default, {
+        name: "package",
+        active: ship_icon_active
+      }), " ", (0, _preact.h)("b", {
+        class: "ml-2"
+      }, "Giao h\xE0ng cho t\xF4i"))), $body));
+    }
+
+    let addr = _index.default.get(order, 'shipping.address') || {};
+    let fulladdr = [addr.address, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
+    let $phone = null;
+    if (addr.phone) $phone = (0, _preact.h)("div", {
+      class: "mt-1 muted"
+    }, this.props.t('phn'), ":\xA0", addr.phone);
+
+    if (_index.default.get(order, 'shipping.pickup_at_shop')) {
+      fulladdr = 'Nhận hàng tại cửa hàng';
+    }
+
+    let $addr = fulladdr ? (0, _preact.h)("div", null, fulladdr) : (0, _preact.h)("i", {
+      class: "i muted"
+    }, "Ch\u01B0a c\xF3 \u0111\u1ECBa ch\u1EC9 giao h\xE0ng");
+    let seccls = 'card_section';
+    if (this.isMobile()) seccls = 'order_section';
+    return (0, _preact.h)("div", {
+      class: seccls
+    }, (0, _preact.h)("div", {
+      class: "order_label "
+    }, this.props.t('ship_to')), $addr, $phone);
+  }
+
+  renderDesktopSummary(order) {
+    let $deposit = null;
+
+    if (order.deposit > 0) {
+      $deposit = (0, _preact.h)("span", {
+        class: "muted"
+      }, "(c\u1ECDc ", _index.default.formatCurrency(order.deposit), ")");
+    }
+
+    let $discount = null;
+
+    if (order.total_discount > 0) {
+      $discount = (0, _preact.h)("div", {
+        class: "order_summary_line"
+      }, (0, _preact.h)("div", null, "Gi\u1EA3m gi\xE1"), (0, _preact.h)("div", null, _index.default.formatCurrency(order.total_discount)));
+    }
+
+    let $pay = null;
+
+    if ($deposit || order.payment_made) {
+      $pay = (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+        class: "order_summary_line"
+      }, (0, _preact.h)("div", null, "B\u1EA1n \u0111\xE3 tr\u1EA3"), (0, _preact.h)("div", null, $deposit, " ", _index.default.formatCurrency(order.payment_made))), (0, _preact.h)("div", {
+        class: "order_summary_line"
+      }, (0, _preact.h)("div", null, "B\u1EA1n ch\u01B0a tr\u1EA3"), (0, _preact.h)("div", null, _index.default.formatCurrency((order.total || 0) - (order.payment_made || 0)))));
+    }
+
+    let $tax = (0, _preact.h)("div", {
+      class: "order_summary_line"
+    }, (0, _preact.h)("div", null, "Ti\u1EC1n thu\u1EBF"), (0, _preact.h)("div", null, _index.default.formatCurrency(order.total_tax)));
+    let $ship = (0, _preact.h)("div", {
+      class: "order_summary_line"
+    }, (0, _preact.h)("div", null, "Ph\xED v\u1EADn chuy\u1EC3n"), (0, _preact.h)("div", null, _index.default.get(order, 'shipping.fee', 0), " d"));
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    let $note = null;
+
+    if (editmode) {
+      $ship = null;
+      $tax = null;
+      $note = (0, _preact.h)("div", {
+        class: "muted"
+      }, (0, _preact.h)("img", {
+        class: "order_ship_icon",
+        src: require('../../assets/img/info.svg')
+      }), "\xA0 Ch\u01B0a bao g\u1ED3m thu\u1EBF v\xE0 ph\xED v\u1EADn chuy\u1EC3n");
+    }
+
+    let seccls = '';
+    if (this.isMobile()) seccls = 'order_section';
+    return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+      class: "order_section__line"
+    }), (0, _preact.h)("div", {
+      class: seccls
+    }, (0, _preact.h)("div", {
+      class: "order_label"
+    }, "T\xF3m t\u1EAFt"), (0, _preact.h)("div", {
+      class: "order_summary_line"
+    }, (0, _preact.h)("div", null, "T\u1ED5ng ti\u1EC1n h\xE0ng"), (0, _preact.h)("div", null, _index.default.formatCurrency(order.subtotal))), $tax, $discount, $ship, $note, (0, _preact.h)("div", {
+      class: "order_summary_line",
+      style: "margin-top: 10px !important; padding-top: 15px !important; border-top: 1px solid #eee !important"
+    }, (0, _preact.h)("div", null, "B\u1EA1n ph\u1EA3i tr\u1EA3"), (0, _preact.h)("div", {
+      class: "order__total"
+    }, _index.default.formatCurrency(order.total))), $pay));
+  }
+
+  renderStatusBadge(order) {
+    let status = order.status || 'new';
+    return (0, _preact.h)("div", {
+      style: "float: right !important;",
+      class: 'order_status order_status__' + status
+    }, status);
+  }
+
+  renderShippingInfo(order) {
+    if (order.status != 'new' || order.user_confirmation) {}
+
+    let shipping_provider = _index.default.get(order, 'shipping.shipping_provider');
+
+    if (!shipping_provider) return null;
+
+    let shipping_code = _index.default.get(order, 'shipping.shipping_code');
+
+    let $tracking_code = null;
+    if (shipping_code) $tracking_code = (0, _preact.h)("div", {
+      class: "muted",
+      style: "margin-top: 3px !important"
+    }, "V\u1EADn \u0111\u01A1n\xA0", (0, _preact.h)("a", {
+      class: "order_tracking_link",
+      target: "_blank",
+      href: 'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code
+    }, shipping_code, "\xA0", (0, _preact.h)("img", {
+      class: "order_tracking_link_icon",
+      src: require('../../assets/img/external-link.svg')
+    })));
+
+    if (shipping_provider == 'ghtk') {
+      return (0, _preact.h)("div", {
+        class: "order_section"
+      }, (0, _preact.h)("div", {
+        class: "order_section_label"
+      }, "\u0110\u01A1n v\u1ECB v\u1EADn chuy\u1EC3n"), (0, _preact.h)("div", {
+        class: "d-flex align-items-center"
+      }, (0, _preact.h)("img", {
+        class: "order_shipping_provider_logo",
+        src: ShippingProvider.ghtk.logo
+      }), (0, _preact.h)("div", null, ShippingProvider.ghtk.name, $tracking_code)));
+    }
+
+    return null;
+  }
+
+  renderDesktopShippingInfo(order) {
+    let shipping_provider = _index.default.get(order, 'shipping.shipping_provider');
+
+    if (!shipping_provider) return null;
+
+    let shipping_code = _index.default.get(order, 'shipping.shipping_code');
+
+    let $tracking_code = null;
+    if (shipping_code) $tracking_code = (0, _preact.h)("div", {
+      class: "muted",
+      style: "margin-top: 3px !important"
+    }, "V\u1EADn \u0111\u01A1n\xA0", (0, _preact.h)("a", {
+      class: "order_tracking_link",
+      target: "_blank",
+      href: 'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code
+    }, shipping_code, "\xA0", (0, _preact.h)("img", {
+      class: "order_tracking_link_icon",
+      src: require('../../assets/img/external-link.svg')
+    })));
+
+    if (shipping_provider == 'ghtk') {
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+        class: "order_label"
+      }, "\u0110\u01A1n v\u1ECB v\u1EADn chuy\u1EC3n"), (0, _preact.h)("div", {
+        class: "d-flex align-items-center"
+      }, (0, _preact.h)("img", {
+        class: "order_shipping_provider_logo",
+        src: ShippingProvider.ghtk.logo
+      }), (0, _preact.h)("div", null, ShippingProvider.ghtk.name, $tracking_code)));
+    }
+
+    return null;
+  }
+
+  renderProducts(order) {
+    let $products = null;
+    $products = _index.default.map(order.items, item => {
+      if (!item || !item.product) return null;
+      let product = item.product;
+      return (0, _preact.h)("div", {
+        class: "order_attachment__product"
+      }, (0, _preact.h)("img", {
+        class: "order_attachment__product_img",
+        alt: '' + product.id,
+        src: _index.default.get(product, 'images.0') || require('../../assets/img/default.jpg')
+      }), (0, _preact.h)("div", {
+        style: "overflow: hidden !important;"
+      }, (0, _preact.h)("div", {
+        class: "order_attachment__product_name"
+      }, product.name), (0, _preact.h)("div", {
+        class: "order_attachment__product_desc"
+      }, product.description || product.long_description), (0, _preact.h)("div", {
+        class: "order_attachment__product_desc"
+      }, this.props.t('qty'), " ", item.quantity, "\xA0\xB7\xA0", _index.default.formatCurrency(product.price))));
+    });
+    if (!this.isMobile()) return (0, _preact.h)("div", null, (0, _preact.h)("div", {
+      class: "order_label"
+    }, this.props.t('product')), $products);
+    return (0, _preact.h)("div", {
+      class: "order_section"
+    }, (0, _preact.h)("div", {
+      class: "order_section_label"
+    }, this.props.t('product')), $products);
+  }
+
+  onChangeQuantity = (item, text) => {
+    let qty = parseInt(text) || 1;
+    item.quantity = qty;
+    this.forceUpdate();
+  };
+
+  renderDesktopProducts(order) {
+    let $products = null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (editmode) {
+      $products = _index.default.map(order.items, item => {
+        if (!item || !item.product) return null;
+        let product = item.product;
+        return (0, _preact.h)("div", {
+          class: "order_attachment__product"
+        }, (0, _preact.h)("img", {
+          class: "order_attachment__product_img",
+          alt: '' + product.id,
+          src: _index.default.get(product, 'images.0') || require('../../assets/img/default.jpg')
+        }), (0, _preact.h)("div", {
+          style: "overflow: hidden !important; flex: 1 !important"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__product_name"
+        }, product.name), (0, _preact.h)("div", {
+          class: "order_attachment__product_desc"
+        }, product.description || product.long_description), (0, _preact.h)("div", {
+          class: "order_attachment__product_desc"
+        }, _index.default.formatCurrency(product.price))), (0, _preact.h)("input", {
+          class: "form-control",
+          style: "text-align: center !important; font-weight: 400 !important; width: 50px !important",
+          value: item.quantity,
+          onInput: e => this.onChangeQuantity(item, e.target.value),
+          type: "text"
+        }), (0, _preact.h)("div", {
+          style: "width: 80px !important; text-align: right !important; "
+        }, (0, _preact.h)("b", null, _index.default.formatCurrency(item.quantity * product.price))));
+      });
+    } else {
+      $products = _index.default.map(order.items, item => {
+        if (!item || !item.product) return null;
+        let product = item.product;
+        return (0, _preact.h)("div", {
+          class: "order_attachment__product"
+        }, (0, _preact.h)("img", {
+          class: "order_attachment__product_img",
+          alt: '' + product.id,
+          src: _index.default.get(product, 'images.0') || require('../../assets/img/default.jpg')
+        }), (0, _preact.h)("div", {
+          style: "overflow: hidden !important; flex: 1 !important"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__product_name"
+        }, product.name), (0, _preact.h)("div", {
+          class: "order_attachment__product_desc"
+        }, product.description || product.long_description), (0, _preact.h)("div", {
+          class: "order_attachment__product_desc"
+        }, _index.default.formatCurrency(product.price))), (0, _preact.h)("div", {
+          style: "text-align: center !important; font-weight: 400 !important; width: 50px !important"
+        }, item.quantity), (0, _preact.h)("div", {
+          style: "width: 80px !important; text-align: right !important; "
+        }, (0, _preact.h)("b", null, _index.default.formatCurrency(item.total))));
+      });
+    }
+
+    return (0, _preact.h)("div", {
+      class: "card_section"
+    }, (0, _preact.h)("div", {
+      class: "desktop_order__heading"
+    }, this.renderStatusBadge(order), (0, _preact.h)("b", {
+      style: "font-size: 18px !important;"
+    }, this.props.t('order'), " #", order.order_number || order.id), (0, _preact.h)("div", {
+      class: "muted"
+    }, (0, _preact.h)(_time.default, {
+      style: "font-size: 13px !important;",
+      time: order.issue_date || order.created
+    }))), (0, _preact.h)("div", {
+      class: "order_label d-flex",
+      style: "margin-top: 20px !important;justify-content: space-between !important; align-items: flex-end !important;"
+    }, (0, _preact.h)("div", {
+      style: "flex: 1 !important;"
+    }, this.props.t('product')), (0, _preact.h)("div", {
+      style: "font-weight: 400 !important; text-align:center !important; width: 50px !important"
+    }, this.props.t('qty')), (0, _preact.h)("div", {
+      style: "font-weight: 400 !important; text-align: right !important; width: 80px !important;"
+    }, this.props.t('total'))), $products);
+  }
+
+  renderMobile(order) {
+    if (this.state.step === 'success') return this.renderMobileSuccess(order);
+    let $error = null;
+
+    if (this.state.g_err) {
+      $error = (0, _preact.h)("div", {
+        class: "mb-2 text__danger"
+      }, (0, _preact.h)("img", {
+        style: "margin-top: -4px !important; height: 15px !important;",
+        src: ximg
+      }), "\xA0", (0, _preact.h)("b", null, this.state.g_err));
+    }
+
+    let $status = (0, _preact.h)("div", null, $error, (0, _preact.h)("div", {
+      class: "btn-confirm-order",
+      style: "margin-top: 0 !important;",
+      onClick: this.confirm
+    }, this.props.t('confirm_order')));
+    let $close = (0, _preact.h)("div", {
+      class: "order_btn order__btn__light mt-3",
+      onClick: this.onCancel
+    }, this.props.t('cancel_order'));
+
+    if (order.user_confirmation || order.status != 'new') {
+      $status = null;
+      if (this.props.cid) $close = (0, _preact.h)("div", {
+        class: "order_btn order__btn__light mt-3",
+        onClick: this.close
+      }, this.props.t('close'));
+    }
+
+    return (0, _preact.h)("div", {
+      class: "order",
+      style: "height: 100% !important"
+    }, (0, _preact.h)("div", {
+      class: "order--content"
+    }, (0, _preact.h)("div", {
+      class: "order--heading"
+    }, this.renderStatusBadge(order), (0, _preact.h)("b", {
+      style: "font-size: 16px !important;"
+    }, this.props.t('order'), " #", order.order_number || order.id), (0, _preact.h)("div", {
+      class: "muted"
+    }, (0, _preact.h)(_time.default, {
+      style: "font-size: 13px !important;",
+      time: order.issue_date || order.created
+    }))), this.renderProducts(order), this.renderDesktopShipping(order), this.renderShippingInfo(order), this.renderDesktopPaymentMethod(order), this.renderDesktopSummary(order), (0, _preact.h)("div", {
+      class: "order_section pb-3",
+      style: "padding-top: 0 !important;"
+    }, $status, $close)));
+  }
+
+  renderActions(order) {
+    let $actions = null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (this.state.step === 'success') return (0, _preact.h)("div", {
+      class: "d-flex",
+      style: "align-items: center !important; justify-content: flex-end !important"
+    }, (0, _preact.h)("div", null, "Ghi nh\u1EADn th\xE0nh c\xF4ng"), "\xA0", (0, _preact.h)("img", {
+      style: "width: 16px !important; height: 16px !important;",
+      width: "16",
+      height: "16",
+      src: checkedimg
+    }));
+
+    if (editmode) {
+      let $error = null;
+
+      if (this.state.g_err) {
+        $error = (0, _preact.h)("div", {
+          class: "mb-2 text__danger"
+        }, (0, _preact.h)("img", {
+          style: "margin-top: -4px !important; height: 15px !important;",
+          src: ximg
+        }), "\xA0", (0, _preact.h)("b", null, this.state.g_err));
+      }
+
+      $actions = (0, _preact.h)("div", null, $error, (0, _preact.h)("div", {
+        class: "btn-confirm-order",
+        onClick: this.confirm
+      }, this.props.t('confirm_order')), (0, _preact.h)("div", {
+        class: "btn-cancel-order",
+        onClick: this.onCancel
+      }, this.props.t('cancel_order')));
+    }
+
+    return $actions;
+  }
+
+  renderDesktop(order) {
+    let acc = this.props.store.matchAccount();
+
+    var uri = acc.logo_url || require('../../assets/img/image_default.png');
+
+    return (0, _preact.h)("div", {
+      class: "desktop order"
+    }, (0, _preact.h)("div", {
+      class: "order_acc_header"
+    }, (0, _preact.h)("img", {
+      class: "order_acc_logo",
+      src: uri
+    }), (0, _preact.h)("div", {
+      class: "order_acc_name"
+    }, acc.name)), (0, _preact.h)("div", {
+      class: "desktop_order__content"
+    }, (0, _preact.h)("div", {
+      style: "flex: 1 !important; padding-right: 20px !important;"
+    }, this.renderDesktopProducts(order), this.renderDesktopShipping(order), this.renderDesktopShippingInfo(order), this.renderDesktopPaymentMethod(order), (0, _preact.h)("div", {
+      class: "order__footer"
+    }, (0, _preact.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn",
+      class: "order__footer_link"
+    }, "Cung c\u1EA5p b\u1EDFi ", (0, _preact.h)("b", null, "Subiz")), (0, _preact.h)("div", {
+      class: "order__footer_delimiter"
+    }), (0, _preact.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn/vi/terms-of-service.html",
+      class: "order__footer_link"
+    }, "\u0110i\u1EC1u kho\u1EA3n"), (0, _preact.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn/vi/privacy-policy.html",
+      class: "order__footer_link"
+    }, "Quy\u1EC1n ri\xEAng t\u01B0"))), (0, _preact.h)("div", null, (0, _preact.h)("div", {
+      class: "order_recap"
+    }, this.renderDesktopSummary(order), this.renderActions(order)))));
+  }
+
+  render() {
+    if (this.state.loading) return (0, _preact.h)("div", {
+      class: "order_error"
+    }, (0, _preact.h)(_spinner.default, {
+      class: "mt-4",
+      size: "60",
+      static: true
+    }));
+    if (this.state.error) return (0, _preact.h)("div", {
+      class: "order_error"
+    }, (0, _preact.h)("img", {
+      class: "mt-3",
+      src: require('../../assets/img/empty_1.svg')
+    }), (0, _preact.h)("div", {
+      class: "mt-3"
+    }, this.props.t('order_load_error')));
+    let order = this.state.order;
+    if (this.isMobile()) return this.renderMobile(order);
+    return this.renderDesktop(order);
+  }
+
+  confirm = async () => {
+    this.setState({
+      g_err: ''
+    });
+    let err = {};
+
+    if (!this.state.shipping) {
+      this.setState({
+        g_err: 'Mời bạn chọn địa chỉ giao hàng trước khi xác nhận'
+      });
+    }
+
+    if (this.state.shipping === 'shop') {
+      if (!_index.default.isPhone(this.state.phone)) {
+        err.phone = true;
+      }
+
+      if (!_index.default.trim(this.state.fullname)) {
+        err.name = true;
+      }
+
+      if (!_index.default.trim(this.state.email)) {
+        err.email = true;
+      }
+    } else if (this.state.shipping_address == 'new') {
+      if (!_index.default.isPhone(this.state.phone)) {
+        err.phone = true;
+      }
+
+      if (!_index.default.trim(this.state.fullname)) {
+        err.name = true;
+      }
+
+      if (!_index.default.trim(this.state.address)) {
+        err.address = true;
+      }
+
+      if (_index.default.size(this.state.selectedWard) == 0) {
+        err.ward = true;
+      }
+
+      if (_index.default.size(this.state.selectedDistrict) == 0) {
+        err.district = true;
+      }
+
+      if (_index.default.size(this.state.selectedProvince) == 0) {
+        err.province = true;
+      }
+    }
+
+    if (_index.default.size(err) > 0) {
+      this.setState({
+        err,
+        g_err: this.props.t('input_shipping_info_err')
+      });
+      return;
+    }
+
+    let user = this.props.store.matchUser();
+
+    let ufullname = _index.default.getUserAttr(user, 'fullname', 'text');
+
+    let uemail = _index.default.getUserAttr(user, 'emails', 'text');
+
+    let uphone = _index.default.getUserAttr(user, 'phones', 'text');
+
+    let order = _index.default.cloneDeep(this.state.order);
+
+    if (this.state.shipping === 'shop') {
+      _index.default.set(order, 'shipping.pickup_at_shop', true);
+
+      _index.default.set(order, 'shipping.address.phone', this.state.phone);
+
+      _index.default.set(order, 'shipping.address.fullname', this.state.fullname);
+
+      _index.default.set(order, 'shipping.address.email', this.state.email);
+    } else {
+      if (this.state.shipping_address == 'new') {
+        let out = await this.props.store.createShippingAddress({
+          address: this.state.address,
+          country: 'Việt Nam',
+          fullname: this.state.fullname,
+          email: this.state.email,
+          phone: this.state.phone,
+          district: this.state.selectedDistrict.name,
+          district_id: this.state.selectedDistrict.id,
+          province: this.state.selectedProvince.name,
+          province_id: this.state.selectedProvince.id,
+          ward: this.state.selectedWard.name,
+          street: this.state.street,
+          ward_id: this.state.selectedWard.id
+        });
+        if (out.error) return this.setState({
+          g_err: this.props.t('update_failed')
+        });
+
+        _index.default.set(order, 'shipping.address', out.body);
+      } else {
+        let addresses = this.props.store.matchShippingAddresses();
+
+        let sa = _index.default.find(addresses, addr => addr.id === this.state.shipping_address);
+
+        if (!sa) {
+          return this.setState({
+            err,
+            g_err: this.props.t('input_shipping_info_err')
+          });
+        }
+
+        _index.default.set(order, 'shipping.address', sa);
+      }
+    }
+
+    let changeduser = false;
+
+    if (!ufullname && this.state.fullname) {
+      changeduser = true;
+
+      _index.default.setUserAttr(user, {
+        key: 'fullname',
+        text: this.state.fullname
+      });
+    }
+
+    if (!uemail && this.state.email) {
+      changeduser = true;
+
+      _index.default.setUserAttr(user, {
+        key: 'emails',
+        text: this.state.email
+      });
+    }
+
+    if (!uphone && this.state.phone) {
+      changeduser = true;
+
+      _index.default.setUserAttr(user, {
+        key: 'phones',
+        text: this.state.phone
+      });
+    }
+
+    if (changeduser) this.props.store.setUser(user);
+    this.setState({
+      sending: true
+    });
+    order.user_confirmation = 'confirmed';
+    let out = await this.props.store.updateOrder(order);
+    this.setState({
+      sending: false
+    });
+
+    if (out.error) {
+      return this.setState({
+        g_err: this.props.t('update_failed')
+      });
+    }
+
+    this.setState({
+      step: 'success'
+    });
+    if (this.props.onResponse) this.props.onResponse('confirmed');
+  };
+  onCancel = () => {
+    if (this.props.onResponse) this.props.onResponse('rejected');
+    this.close();
+  };
+  close = () => {
+    if (this.props.cid && !this.state.order.user_confirmation) {
+      let order = _index.default.cloneDeep(this.state.order);
+
+      order.user_confirmation = 'rejected';
+      this.props.store.updateOrder(order);
+    }
+
+    if (this.props.onClose) this.props.onClose();
+  };
+}
+
+exports.default = Order;
+let ShippingProvider = {
+  ghtk: {
+    name: 'Giao hàng tiết kiệm',
+    logo: require('../../assets/img/ghtk.svg')
+  },
+  ghn: {
+    name: 'Giao hàng nhanh',
+    logo: require('../../assets/img/ghn.svg')
+  }
+};