ordering-ui-external 10.0.0 → 10.1.0

package/_modules/themes/callcenterOriginal/src/components/Orders/Messages/styles.js

@@ -4,10 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperSendMessageButton = exports.WrapperSendInput = exports.WrapperLogistics = exports.WrapperLogisticInformation = exports.WrapperHitoryHeader = exports.WrapperHeader = exports.WrapperDeleteImage = exports.WrapperContainer = exports.TimeofSent = exports.TabItem = exports.Status = exports.SkeletonHitory = exports.SkeletonBubbleCustomer = exports.SkeletonBubbleBusiness = exports.SendToContainer = exports.SendImage = exports.SendForm = exports.Send = exports.SearchAndDetailControlContainer = exports.QuickMessageWrapper = exports.PartnerName = exports.OrderNumber = exports.OrderDetailIconButton = exports.MyName = exports.MessagesSearch = exports.MessagesContainer = exports.MessageSender = exports.MessageCustomer = exports.MessageConsole = exports.MessageBusiness = exports.InfoBlock = exports.ImageContainer = exports.HeaderProfile = exports.HeaderName = exports.HeaderInfo = exports.ChatImage = exports.ChatHeader = exports.ChatContactInfoContainer = exports.Chat = exports.BubbleCustomer = exports.BubbleConsole = exports.BubbleBusines = void 0;
+exports.WrapperSendMessageButton = exports.WrapperSendInput = exports.WrapperLogistics = exports.WrapperLogisticInformation = exports.WrapperHitoryHeader = exports.WrapperHeader = exports.WrapperDeleteImage = exports.WrapperContainer = exports.TimeofSent = exports.TabItem = exports.Status = exports.SkeletonHitory = exports.SkeletonBubbleCustomer = exports.SkeletonBubbleBusiness = exports.SendToContainer = exports.SendImage = exports.SendForm = exports.Send = exports.SearchAndDetailControlContainer = exports.QuickMessageWrapper = exports.PartnerName = exports.OrderNumber = exports.OrderDetailIconButton = exports.NotSendMessage = exports.MyName = exports.MessagesSearch = exports.MessagesContainer = exports.MessageSender = exports.MessageCustomer = exports.MessageConsole = exports.MessageBusiness = exports.InfoBlock = exports.ImageContainer = exports.HeaderProfile = exports.HeaderName = exports.HeaderInfo = exports.ChatImage = exports.ChatHeader = exports.ChatContactInfoContainer = exports.Chat = exports.BubbleCustomer = exports.BubbleConsole = exports.BubbleBusines = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _polished = require("polished");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -15,120 +14,122 @@ var MessagesContainer = _styledComponents.default.div(_templateObject || (_templ
 exports.MessagesContainer = MessagesContainer;
 var WrapperContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  box-sizing: border-box;\n"])));
 exports.WrapperContainer = WrapperContainer;
-var HeaderProfile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 20px 0px;\n\n  div {\n     p {\n       margin-left: 10px;\n       ", "\n      }\n     strong {\n      p{\n        margin-block-end: 0.1em;\n      }\n    }\n    p {\n      margin-block-start: 0.1em;\n      font-size: 0.7em\n    }\n  }\n\n  @media (max-width: 576px) {\n    padding: 10px 0;\n  }\n"])), function (props) {
+var NotSendMessage = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 100%;\n  color: #909BA9;\n  background: #F8F9FA;\n\n  svg {\n    font-size: 20px;\n  }\n\n  p {\n    font-size: 14px;\n    color: #909BA9;\n    margin: 6px 0;\n  }\n"])));
+exports.NotSendMessage = NotSendMessage;
+var HeaderProfile = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 20px 0px;\n\n  div {\n     p {\n       margin-left: 10px;\n       ", "\n      }\n     strong {\n      p{\n        margin-block-end: 0.1em;\n      }\n    }\n    p {\n      margin-block-start: 0.1em;\n      font-size: 0.7em\n    }\n  }\n\n  @media (max-width: 576px) {\n    padding: 10px 0;\n  }\n"])), function (props) {
   var _props$theme;
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n         margin-right: 10px;\n         margin-left: 0px;\n      "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n         margin-right: 10px;\n         margin-left: 0px;\n      "])));
 });
 exports.HeaderProfile = HeaderProfile;
-var WrapperHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 91%;\n  max-width: 1200px;\n  margin: auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media (max-width: 576px) {\n    justify-content: center;\n    width: 90%;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var WrapperHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 91%;\n  max-width: 1200px;\n  margin: auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media (max-width: 576px) {\n    justify-content: center;\n    width: 90%;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var messageDashboardView = _ref.messageDashboardView;
-  return messageDashboardView && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 92%;\n    border-bottom: 1px solid #D8D8D8;\n    padding-bottom: 5px;\n    flex-wrap: wrap;\n    row-gap: 10px;\n  "])));
+  return messageDashboardView && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 92%;\n    border-bottom: 1px solid #D8D8D8;\n    padding-bottom: 5px;\n    flex-wrap: wrap;\n    row-gap: 10px;\n  "])));
 }, function (_ref2) {
   var historyView = _ref2.historyView;
-  return historyView && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 92%;\n  "])));
+  return historyView && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 92%;\n  "])));
 });
 exports.WrapperHeader = WrapperHeader;
-var HeaderName = _styledComponents.default.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: 1.1em;\n  margin-block-end: 0.1em;\n  margin-block-start: 0.1em;\n\n"])));
+var HeaderName = _styledComponents.default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 1.1em;\n  margin-block-end: 0.1em;\n  margin-block-start: 0.1em;\n\n"])));
 exports.HeaderName = HeaderName;
-var Status = _styledComponents.default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-block-start: 0.1em;\n  margin-block-end: 0.1em;\n  font-size: 0.7em;\n"])));
+var Status = _styledComponents.default.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-block-start: 0.1em;\n  margin-block-end: 0.1em;\n  font-size: 0.7em;\n"])));
 exports.Status = Status;
-var ImageContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: auto;\n  display: flex;\n  align-items: center;\n  padding-bottom: 20px;\n  flex-wrap: wrap;\n\n  > * {\n    ", "\n\n    &:last-child {\n      ", "\n    }\n  }\n\n  img {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    object-fit: cover;\n    box-shadow: 0px 1px 4px rgb(0 0 0 / 10%);\n  }\n\n  svg {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    padding: 6px;\n    box-shadow: 0px 1px 4px rgb(0 0 0 / 10%);\n  }\n  ", "\n\n"])), function (props) {
+var ImageContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  overflow: auto;\n  display: flex;\n  align-items: center;\n  padding-bottom: 20px;\n  flex-wrap: wrap;\n\n  > * {\n    ", "\n\n    &:last-child {\n      ", "\n    }\n  }\n\n  img {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    object-fit: cover;\n    box-shadow: 0px 1px 4px rgb(0 0 0 / 10%);\n  }\n\n  svg {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    padding: 6px;\n    box-shadow: 0px 1px 4px rgb(0 0 0 / 10%);\n  }\n  ", "\n\n"])), function (props) {
   var _props$theme2;
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "])));
 }, function (props) {
   var _props$theme3;
-  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        margin-left: 0px;\n      "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        margin-right: 0px;\n      "])));
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        margin-left: 0px;\n      "]))) : (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        margin-right: 0px;\n      "])));
 }, function (_ref3) {
   var isCircle = _ref3.isCircle;
-  return isCircle && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    img, svg {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n    }\n    svg {\n      padding: 3px;\n    }\n\n    ", "\n  "])), function (_ref4) {
+  return isCircle && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    img, svg {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n    }\n    svg {\n      padding: 3px;\n    }\n\n    ", "\n  "])), function (_ref4) {
     var isReceived = _ref4.isReceived;
-    return !isReceived && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      justify-content: flex-end;\n    "])));
+    return !isReceived && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      justify-content: flex-end;\n    "])));
   });
 });
 exports.ImageContainer = ImageContainer;
-var OrderNumber = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 600;\n"])), function (props) {
+var OrderNumber = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 600;\n"])), function (props) {
   return props.theme.colors.headingColor;
 });
 exports.OrderNumber = OrderNumber;
-var Chat = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-direction: column;\n  > :first-child{\n    margin-top: 10px;\n  }\n  @media (min-width: 768px){\n  }\n"])));
+var Chat = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-direction: column;\n  > :first-child{\n    margin-top: 10px;\n  }\n  @media (min-width: 768px){\n  }\n"])));
 exports.Chat = Chat;
-var MessageConsole = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  font-size: 0.8em;\n  margin-bottom: 20px;\n"])));
+var MessageConsole = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  font-size: 0.8em;\n  margin-bottom: 20px;\n"])));
 exports.MessageConsole = MessageConsole;
-var MessageBusiness = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  font-size: 0.8em;\n  width: 91%;\n  margin: 0 auto;\n  margin-bottom: 20px;\n"])));
+var MessageBusiness = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  font-size: 0.8em;\n  width: 91%;\n  margin: 0 auto;\n  margin-bottom: 20px;\n"])));
 exports.MessageBusiness = MessageBusiness;
-var MessageCustomer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  font-size: 0.8em;\n  width: 91%;\n  margin: 0 auto;\n  margin-bottom: 20px;\n"])));
+var MessageCustomer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  font-size: 0.8em;\n  width: 91%;\n  margin: 0 auto;\n  margin-bottom: 20px;\n"])));
 exports.MessageCustomer = MessageCustomer;
-var BubbleConsole = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  border-radius: 5px;\n  padding: 10px 25px 10px 25px;\n  margin-bottom: 8px;\n  background: ", ";\n  text-align: center;\n  height: auto;\n  overflow: hidden;\n  overflow-wrap: break-word;\n  max-width: 80%;\n\n  @media (min-width: 1024px){\n    max-width: 80%;\n  }\n"])), function (props) {
+var BubbleConsole = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-radius: 5px;\n  padding: 10px 25px 10px 25px;\n  margin-bottom: 8px;\n  background: ", ";\n  text-align: center;\n  height: auto;\n  overflow: hidden;\n  overflow-wrap: break-word;\n  max-width: 80%;\n\n  @media (min-width: 1024px){\n    max-width: 80%;\n  }\n"])), function (props) {
   return props.theme.colors.secundary;
 });
 exports.BubbleConsole = BubbleConsole;
-var BubbleBusines = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-radius: 8px;\n  ", "\n  padding: 10px 25px 10px 25px;\n  max-width: 80%;\n  min-width: 80px;\n  margin-bottom: 8px;\n  background: ", ";\n  overflow: hidden;\n  overflow-wrap: break-word;\n  &[name=image]{\n    width: 100%;\n  }\n"])), function (props) {
+var BubbleBusines = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  border-radius: 8px;\n  ", "\n  padding: 10px 25px 10px 25px;\n  max-width: 80%;\n  min-width: 80px;\n  margin-bottom: 8px;\n  background: ", ";\n  overflow: hidden;\n  overflow-wrap: break-word;\n  &[name=image]{\n    width: 100%;\n  }\n"])), function (props) {
   var _props$theme4;
-  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    border-bottom-right-radius: 0;\n  "]))) : (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    border-bottom-left-radius: 0;\n  "])));
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    border-bottom-right-radius: 0;\n  "]))) : (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    border-bottom-left-radius: 0;\n  "])));
 }, function (props) {
   return props.theme.colors.secundary;
 });
 exports.BubbleBusines = BubbleBusines;
-var BubbleCustomer = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  border-radius: 8px;\n  ", "\n  padding: 10px 25px 10px 25px;\n  max-width: 80%;\n  min-width: 80px;\n  height: auto;\n  margin-bottom: 10px;\n  background: ", ";\n  color: white;\n  overflow-wrap: break-word;\n  overflow: hidden;\n\n  p:last-child {\n    left: 10px;\n  }\n\n  &[name=image]{\n    width: 100%;\n  }\n\n  ", "\n"])), function (props) {
+var BubbleCustomer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  border-radius: 8px;\n  ", "\n  padding: 10px 25px 10px 25px;\n  max-width: 80%;\n  min-width: 80px;\n  height: auto;\n  margin-bottom: 10px;\n  background: ", ";\n  color: white;\n  overflow-wrap: break-word;\n  overflow: hidden;\n\n  p:last-child {\n    left: 10px;\n  }\n\n  &[name=image]{\n    width: 100%;\n  }\n\n  ", "\n"])), function (props) {
   var _props$theme5;
-  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    border-bottom-left-radius: 0;\n  "]))) : (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    border-bottom-right-radius: 0;\n  "])));
+  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    border-bottom-left-radius: 0;\n  "]))) : (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    border-bottom-right-radius: 0;\n  "])));
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme6;
-  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    border-radius: 40px 40px 40px 0px;\n\n    p:last-child {\n      left: initial;\n      right: 10px;\n    }\n  "])));
+  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n    border-radius: 40px 40px 40px 0px;\n\n    p:last-child {\n      left: initial;\n      right: 10px;\n    }\n  "])));
 });
 exports.BubbleCustomer = BubbleCustomer;
-var SkeletonBubbleCustomer = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  span{\n    border-radius: 5px;\n  }\n"])));
+var SkeletonBubbleCustomer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  span{\n    border-radius: 5px;\n  }\n"])));
 exports.SkeletonBubbleCustomer = SkeletonBubbleCustomer;
-var SkeletonBubbleBusiness = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  span{\n    border-radius: 5px;\n  }\n"])));
+var SkeletonBubbleBusiness = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  span{\n    border-radius: 5px;\n  }\n"])));
 exports.SkeletonBubbleBusiness = SkeletonBubbleBusiness;
-var ChatImage = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  img{\n    width: 100%;\n    height: auto;\n    vertical-align: middle;\n    object-fit: contain;\n  }\n"])));
+var ChatImage = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  img{\n    width: 100%;\n    height: auto;\n    vertical-align: middle;\n    object-fit: contain;\n  }\n"])));
 exports.ChatImage = ChatImage;
-var PartnerName = _styledComponents.default.p(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  margin-block-start: 0;\n  margin-block-end: 0.6em;\n  font-size: 1.1em;\n"])));
+var PartnerName = _styledComponents.default.p(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  margin-block-start: 0;\n  margin-block-end: 0.6em;\n  font-size: 1.1em;\n"])));
 exports.PartnerName = PartnerName;
-var MyName = _styledComponents.default.p(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    margin-block-start: 0;\n    margin-block-end: 0.6em;\n    font-size: 1.1em;\n    text-align: right;\n\n    ", "\n"])), function (props) {
+var MyName = _styledComponents.default.p(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    margin-block-start: 0;\n    margin-block-end: 0.6em;\n    font-size: 1.1em;\n    text-align: right;\n\n    ", "\n"])), function (props) {
   var _props$theme7;
-  return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n      text-align: left;\n  "])));
+  return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n      text-align: left;\n  "])));
 });
 exports.MyName = MyName;
-var TimeofSent = _styledComponents.default.p(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  position: relative;\n  font-size: 0.8em;\n  margin-block-start: 0.2em;\n  margin-block-end: initial;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n\n  ", "\n"])), function (props) {
+var TimeofSent = _styledComponents.default.p(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  position: relative;\n  font-size: 0.8em;\n  margin-block-start: 0.2em;\n  margin-block-end: initial;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n\n  ", "\n"])), function (props) {
   var _props$theme8;
-  return (_props$theme8 = props.theme) !== null && _props$theme8 !== void 0 && _props$theme8.rtl ? (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    margin-right: auto;\n  "]))) : (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    margin-left: auto;\n  "])));
+  return (_props$theme8 = props.theme) !== null && _props$theme8 !== void 0 && _props$theme8.rtl ? (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    margin-right: auto;\n  "]))) : (0, _styledComponents.css)(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    margin-left: auto;\n  "])));
 });
 exports.TimeofSent = TimeofSent;
-var SendForm = _styledComponents.default.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n  padding: 13px;\n"])), function (props) {
+var SendForm = _styledComponents.default.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n  padding: 13px;\n"])), function (props) {
   return props.theme.colors.borderColor;
 });
 exports.SendForm = SendForm;
-var Send = _styledComponents.default.form(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  margin-top: 8px;\n  height: auto;\n  max-width: 1200px;\n  justify-content: space-between;\n  width: 100%;\n  input {\n    padding-top: 10px;\n    padding-bottom: 10px;\n    width: 100%;\n    flex: 1;\n  }\n"])));
+var Send = _styledComponents.default.form(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  margin-top: 8px;\n  height: auto;\n  max-width: 1200px;\n  justify-content: space-between;\n  width: 100%;\n  input {\n    padding-top: 10px;\n    padding-bottom: 10px;\n    width: 100%;\n    flex: 1;\n  }\n"])));
 exports.Send = Send;
-var WrapperSendInput = _styledComponents.default.div(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n  flex: 1;\n  position: relative;\n  box-sizing: border-box;\n  ", "\n\n  > input {\n    border: 1px solid ", ";\n    padding-right: 45px;\n    -webkit-appearance: none;\n    ", "\n  }\n"])), function (props) {
+var WrapperSendInput = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n  flex: 1;\n  position: relative;\n  box-sizing: border-box;\n  ", "\n\n  > input {\n    border: 1px solid ", ";\n    padding-right: 45px;\n    -webkit-appearance: none;\n    ", "\n  }\n"])), function (props) {
   var _props$theme9;
-  return (_props$theme9 = props.theme) !== null && _props$theme9 !== void 0 && _props$theme9.rtl ? (0, _styledComponents.css)(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "])));
+  return (_props$theme9 = props.theme) !== null && _props$theme9 !== void 0 && _props$theme9.rtl ? (0, _styledComponents.css)(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "])));
 }, function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n      padding-left: 45px;\n      padding-right: 15px;\n    "])));
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n      padding-left: 45px;\n      padding-right: 15px;\n    "])));
 });
 exports.WrapperSendInput = WrapperSendInput;
-var SendImage = _styledComponents.default.label(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  width: 25px;\n  height: 25px;\n  \n  position: absolute;\n  top: 10px;\n  right: 10px;\n\n  input {\n    display: none;\n  }\n\n  svg {\n    color: #B1BCCC;\n    font-size: 20px;\n    cursor: pointer;\n  }\n"])));
+var SendImage = _styledComponents.default.label(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n  width: 25px;\n  height: 25px;\n  \n  position: absolute;\n  top: 10px;\n  right: 10px;\n\n  input {\n    display: none;\n  }\n\n  svg {\n    color: #B1BCCC;\n    font-size: 20px;\n    cursor: pointer;\n  }\n"])));
 exports.SendImage = SendImage;
-var WrapperDeleteImage = _styledComponents.default.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 5px;\n  right: 10px;\n\n  img {\n    width: 30px;\n    height: 30px;\n    &:disabled {\n    cursor: not-allowed;\n    }\n    border-radius: 8px;\n  }\n\n  svg {\n    color: black;\n  }\n\n  button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    background: ", ";\n    width: 20px;\n    height: 20px;\n    transform: translate(100%, -50%);\n  }\n"])), function (props) {
+var WrapperDeleteImage = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 5px;\n  right: 10px;\n\n  img {\n    width: 30px;\n    height: 30px;\n    &:disabled {\n    cursor: not-allowed;\n    }\n    border-radius: 8px;\n  }\n\n  svg {\n    color: black;\n  }\n\n  button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    background: ", ";\n    width: 20px;\n    height: 20px;\n    transform: translate(100%, -50%);\n  }\n"])), function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 });
 exports.WrapperDeleteImage = WrapperDeleteImage;
-var WrapperSendMessageButton = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  width: fit-content;\n\n  button {\n    height: 43px;\n    svg {\n       width: 1.5em;\n       height: 1.5em; \n       vertical-align: middle;\n       color: white;\n       ", "\n    }\n\n    span {\n      display: none;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  @media (min-width: 480px) {\n    button {\n      svg {\n        margin-right: 10px;\n      }\n      span {\n        display: inline;\n      }\n    }\n  }\n"])), function (props) {
+var WrapperSendMessageButton = _styledComponents.default.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  width: 80px;\n\n  button {\n    height: 43px;\n    width: 100%;\n    svg {\n       width: 1.5em;\n       height: 1.5em; \n       vertical-align: middle;\n       color: white;\n       ", "\n    }\n\n    span {\n      display: none;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  @media (min-width: 480px) {\n    width: fit-content;\n    button {\n      svg {\n        margin-right: 10px;\n      }\n      span {\n        display: inline;\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme10;
-  return ((_props$theme10 = props.theme) === null || _props$theme10 === void 0 ? void 0 : _props$theme10.rtl) && (0, _styledComponents.css)(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n        margin-left: 10px;\n        margin-right: 0px;\n        transform: rotate(270deg);\n      "])));
+  return ((_props$theme10 = props.theme) === null || _props$theme10 === void 0 ? void 0 : _props$theme10.rtl) && (0, _styledComponents.css)(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n        margin-left: 10px;\n        margin-right: 0px;\n        transform: rotate(270deg);\n      "])));
 });
 exports.WrapperSendMessageButton = WrapperSendMessageButton;
-var WrapperHitoryHeader = _styledComponents.default.div(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n"])));
+var WrapperHitoryHeader = _styledComponents.default.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n"])));
 exports.WrapperHitoryHeader = WrapperHitoryHeader;
-var TabItem = _styledComponents.default.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  padding: 5px 10px;\n  cursor: pointer;\n  text-align: center;\n  color: #909BA9;\n  \n  ", "\n\n  @media (max-width: 576px) {\n    padding: 5px 10px;\n    font-size: 14px;\n  }\n"])), function (_ref5) {
+var TabItem = _styledComponents.default.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  padding: 5px 10px;\n  cursor: pointer;\n  text-align: center;\n  color: #909BA9;\n  \n  ", "\n\n  @media (max-width: 576px) {\n    padding: 5px 10px;\n    font-size: 14px;\n  }\n"])), function (_ref5) {
   var active = _ref5.active;
-  return active && (0, _styledComponents.css)(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    font-weight: 600;\n  "])), function (props) {
+  return active && (0, _styledComponents.css)(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    font-weight: 600;\n  "])), function (props) {
     var _props$theme$colors2;
     return (_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.headingColor;
   }, function (props) {
@@ -137,50 +138,48 @@ var TabItem = _styledComponents.default.div(_templateObject50 || (_templateObjec
   });
 });
 exports.TabItem = TabItem;
-var SkeletonHitory = _styledComponents.default.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  column-gap: 20px;\n\n  @media (max-width: 576px) {\n    span {\n      width: 250px !important;\n    }\n  }\n"])));
+var SkeletonHitory = _styledComponents.default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  column-gap: 20px;\n\n  @media (max-width: 576px) {\n    span {\n      width: 250px !important;\n    }\n  }\n"])));
 exports.SkeletonHitory = SkeletonHitory;
-var WrapperLogistics = _styledComponents.default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral([""])));
+var WrapperLogistics = _styledComponents.default.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral([""])));
 exports.WrapperLogistics = WrapperLogistics;
-var WrapperLogisticInformation = _styledComponents.default.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral([""])));
+var WrapperLogisticInformation = _styledComponents.default.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral([""])));
 exports.WrapperLogisticInformation = WrapperLogisticInformation;
-var HeaderInfo = _styledComponents.default.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+var HeaderInfo = _styledComponents.default.div(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n"])), function (props) {
   return props.theme.colors.borderColor;
 });
 exports.HeaderInfo = HeaderInfo;
-var ChatHeader = _styledComponents.default.div(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 15px;\n"])));
+var ChatHeader = _styledComponents.default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 15px;\n"])));
 exports.ChatHeader = ChatHeader;
-var SearchAndDetailControlContainer = _styledComponents.default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 10px;\n  align-items: center;\n"])));
+var SearchAndDetailControlContainer = _styledComponents.default.div(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 10px;\n  align-items: center;\n"])));
 exports.SearchAndDetailControlContainer = SearchAndDetailControlContainer;
-var MessagesSearch = _styledComponents.default.div(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  position: relative;\n\n  img {\n    position: absolute;\n    top: 13px;\n    left: 14px;\n  }\n\n  input {\n    width: 200px;\n    border: 1px solid #1C202E;\n    border-radius: 22px;\n    outline: none;\n    padding: 8px;\n    padding-left: 40px;\n    font-size: 15px;\n    background: transparent;\n\n    &::placeholder {\n      color: #182964;\n    }\n  }\n"])));
+var MessagesSearch = _styledComponents.default.div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  position: relative;\n\n  img {\n    position: absolute;\n    top: 13px;\n    left: 14px;\n  }\n\n  input {\n    width: 200px;\n    border: 1px solid #1C202E;\n    border-radius: 22px;\n    outline: none;\n    padding: 8px;\n    padding-left: 40px;\n    font-size: 15px;\n    background: transparent;\n\n    &::placeholder {\n      color: #182964;\n    }\n  }\n"])));
 exports.MessagesSearch = MessagesSearch;
-var OrderDetailIconButton = _styledComponents.default.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  background: #b9bcc7;\n  &:active {\n    background: ", ";\n  }\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n\n  svg {\n    font-size: 30px;\n  }\n"])), function () {
-  return (0, _polished.darken)(0.07, '#b9bcc7');
-});
+var OrderDetailIconButton = _styledComponents.default.button(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  background: #b9bcc7;\n  &:active {\n    background: '#b9bcc7';\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n\n  svg {\n    font-size: 30px;\n  }\n"])));
 exports.OrderDetailIconButton = OrderDetailIconButton;
-var ChatContactInfoContainer = _styledComponents.default.div(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-bottom: 10px;\n\n  ", "\n"])), function (_ref6) {
+var ChatContactInfoContainer = _styledComponents.default.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-bottom: 10px;\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n    opacity: 0.2;\n  "])));
+  return disabled && (0, _styledComponents.css)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n    opacity: 0.2;\n  "])));
 });
 exports.ChatContactInfoContainer = ChatContactInfoContainer;
-var InfoBlock = _styledComponents.default.div(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  ", "\n  > p {\n    margin: 0px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 190px;\n\n    &:first-child {\n      color: ", ";\n      font-size: 14px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n    &:last-child {\n      color: ", ";\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
+var InfoBlock = _styledComponents.default.div(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  ", "\n  > p {\n    margin: 0px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 190px;\n\n    &:first-child {\n      color: ", ";\n      font-size: 14px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n    &:last-child {\n      color: ", ";\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
   var _props$theme11;
-  return (_props$theme11 = props.theme) !== null && _props$theme11 !== void 0 && _props$theme11.rtl ? (0, _styledComponents.css)(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
+  return (_props$theme11 = props.theme) !== null && _props$theme11 !== void 0 && _props$theme11.rtl ? (0, _styledComponents.css)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n  "]))) : (0, _styledComponents.css)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n    margin-left: 10px;\n  "])));
 }, function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.lightGray;
 });
 exports.InfoBlock = InfoBlock;
-var SendToContainer = _styledComponents.default.div(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  p {\n    color: ", ";\n    margin-bottom: 2px;\n    text-align: end;\n    font-size: 12px;\n  }\n\n  ", "\n"])), function (props) {
+var SendToContainer = _styledComponents.default.div(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  p {\n    color: ", ";\n    margin-bottom: 2px;\n    text-align: end;\n    font-size: 12px;\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.secundaryContrast;
 }, function (_ref7) {
   var isReceived = _ref7.isReceived;
-  return isReceived && (0, _styledComponents.css)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n    text-align: initial;\n  "])));
+  return isReceived && (0, _styledComponents.css)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n    text-align: initial;\n  "])));
 });
 exports.SendToContainer = SendToContainer;
-var MessageSender = _styledComponents.default.p(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  margin-bottom: 5px;\n  text-align: center;\n"])));
+var MessageSender = _styledComponents.default.p(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  margin-bottom: 5px;\n  text-align: center;\n"])));
 exports.MessageSender = MessageSender;
-var QuickMessageWrapper = _styledComponents.default.div(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  button {\n    margin-bottom: 6px;\n    margin-right: 12px;\n    line-height: 22px;\n    font-size: 12px;\n    padding: 0 10px;\n\n    ", "\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n      margin-right: 0px;\n      margin-left: 12px;\n    "])));
+var QuickMessageWrapper = _styledComponents.default.div(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  button {\n    margin-bottom: 6px;\n    margin-right: 12px;\n    line-height: 22px;\n    font-size: 12px;\n    padding: 0 10px;\n\n    ", "\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n      margin-right: 0px;\n      margin-left: 12px;\n    "])));
 });
 exports.QuickMessageWrapper = QuickMessageWrapper;

package/_modules/themes/callcenterOriginal/src/components/Orders/OrderBill/RefundToWallet.js

@@ -0,0 +1,238 @@
+"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.RefundToWallet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _reactHookForm = require("react-hook-form");
+var _styles = require("../../../styles");
+var _Shared = require("../../Shared");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _FirstSelect = require("../../../styles/Select/FirstSelect");
+var _styles2 = require("./styles");
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var RefundToWallet = function RefundToWallet(props) {
+  var _configs$refund_cash_, _configs$refund_credi, _configs$refund_strip, _configs$refund_other;
+  var order = props.order,
+    actionStatus = props.actionStatus,
+    handleOrderRefund = props.handleOrderRefund;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var isAllowCashWalletRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_cash_ = configs.refund_cash_wallet_allow_when_order_cancelled) === null || _configs$refund_cash_ === void 0 ? void 0 : _configs$refund_cash_.value) === '1';
+  var isAllowCreditPointRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_credi = configs.refund_credit_point_allow_when_order_cancelled) === null || _configs$refund_credi === void 0 ? void 0 : _configs$refund_credi.value) === '1';
+  var isAllowStripeRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_strip = configs.refund_stripe_allow_when_order_cancelled) === null || _configs$refund_strip === void 0 ? void 0 : _configs$refund_strip.value) === '1';
+  var isAllowOtherRefund = (configs === null || configs === void 0 ? void 0 : (_configs$refund_other = configs.refund_other_allow_when_order_cancelled) === null || _configs$refund_other === void 0 ? void 0 : _configs$refund_other.value) === '1';
+  var _useForm = (0, _reactHookForm.useForm)(),
+    handleSubmit = _useForm.handleSubmit,
+    register = _useForm.register,
+    errors = _useForm.errors;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openModal = _useState2[0],
+    setOpenModal = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    alertState = _useState4[0],
+    setAlertState = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isRefundAll = _useState6[0],
+    setIsRefundAll = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    refundDisabled = _useState8[0],
+    setRefundDisabled = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    refundAllDisabled = _useState10[0],
+    setRefundAllDisabled = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedRefundOption = _useState12[0],
+    setSelectedRefundOption = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    refundOptions = _useState14[0],
+    setRefundOptions = _useState14[1];
+  var onSubmit = function onSubmit(formData) {
+    var _order$summary;
+    if (!selectedRefundOption) {
+      setAlertState({
+        open: true,
+        content: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('TYPE', 'Type'))
+      });
+      return;
+    }
+    var data = {};
+    if (selectedRefundOption !== 'cash_wallet') {
+      data.order_payment_event_id = selectedRefundOption;
+    }
+    if (formData.description) data.description = formData.description;
+    data.amount = isRefundAll ? (order === null || order === void 0 ? void 0 : (_order$summary = order.summary) === null || _order$summary === void 0 ? void 0 : _order$summary.total) || (order === null || order === void 0 ? void 0 : order.total) : formData.amount;
+    data.transfer_to = selectedRefundOption !== 'cash_wallet' ? 'source' : 'cash_wallet';
+    handleOrderRefund(data);
+  };
+  (0, _react.useEffect)(function () {
+    var _Object$keys;
+    if ((Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(errors)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0) {
+      var _Object$values;
+      setAlertState({
+        open: true,
+        content: Object === null || Object === void 0 ? void 0 : (_Object$values = Object.values(errors)) === null || _Object$values === void 0 ? void 0 : _Object$values.map(function (error) {
+          return error === null || error === void 0 ? void 0 : error.message;
+        })
+      });
+    }
+  }, [errors]);
+  (0, _react.useEffect)(function () {
+    var _order$payment_events, _order$summary2, _order$payment_events2;
+    setSelectedRefundOption(null);
+    setRefundDisabled(false);
+    setRefundAllDisabled(false);
+    setIsRefundAll(true);
+    if (!(order !== null && order !== void 0 && order.payment_events)) return;
+    var totalRefundAmount = (order === null || order === void 0 ? void 0 : (_order$payment_events = order.payment_events) === null || _order$payment_events === void 0 ? void 0 : _order$payment_events.filter(function (item) {
+      return item.event === 'refund';
+    }).reduce(function (total, event) {
+      return total + ((event === null || event === void 0 ? void 0 : event.amount) || 0);
+    }, 0)) || 0;
+    if (totalRefundAmount === ((order === null || order === void 0 ? void 0 : (_order$summary2 = order.summary) === null || _order$summary2 === void 0 ? void 0 : _order$summary2.total) || (order === null || order === void 0 ? void 0 : order.total))) {
+      setRefundDisabled(true);
+    }
+    if (totalRefundAmount) {
+      setRefundAllDisabled(true);
+      setIsRefundAll(false);
+    }
+    var _refundOptions = [];
+    var paymentEvents = (order === null || order === void 0 ? void 0 : (_order$payment_events2 = order.payment_events) === null || _order$payment_events2 === void 0 ? void 0 : _order$payment_events2.filter(function (item) {
+      return item.event === 'payment';
+    })) || [];
+    paymentEvents.forEach(function (event) {
+      var _event$wallet_event, _event$wallet_event$w, _event$wallet_event2, _event$wallet_event2$, _event$paymethod, _event$data;
+      if ((event === null || event === void 0 ? void 0 : (_event$wallet_event = event.wallet_event) === null || _event$wallet_event === void 0 ? void 0 : (_event$wallet_event$w = _event$wallet_event.wallet) === null || _event$wallet_event$w === void 0 ? void 0 : _event$wallet_event$w.type) === 'cash') {
+        if (isAllowCashWalletRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('CASH_WALLET', 'Cash Wallet'))
+          });
+        }
+      } else if ((event === null || event === void 0 ? void 0 : (_event$wallet_event2 = event.wallet_event) === null || _event$wallet_event2 === void 0 ? void 0 : (_event$wallet_event2$ = _event$wallet_event2.wallet) === null || _event$wallet_event2$ === void 0 ? void 0 : _event$wallet_event2$.type) === 'credit_point') {
+        if (isAllowCreditPointRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('POINTS_WALLET', 'Points Wallet'))
+          });
+        }
+      } else if ((event === null || event === void 0 ? void 0 : (_event$paymethod = event.paymethod) === null || _event$paymethod === void 0 ? void 0 : _event$paymethod.gateway) === 'stripe' || (event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.gateway) === 'stripe') {
+        if (isAllowStripeRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('STRIPE', 'Stripe'))
+          });
+        }
+      } else {
+        if (isAllowOtherRefund) {
+          var _event$paymethod2, _event$paymethod2$gat, _event$paymethod3, _event$data2, _event$data2$gateway, _event$data3, _event$data3$gateway;
+          _refundOptions.push({
+            value: event.id,
+            content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, event !== null && event !== void 0 && event.paymethod ? t(event === null || event === void 0 ? void 0 : (_event$paymethod2 = event.paymethod) === null || _event$paymethod2 === void 0 ? void 0 : (_event$paymethod2$gat = _event$paymethod2.gateway) === null || _event$paymethod2$gat === void 0 ? void 0 : _event$paymethod2$gat.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$paymethod3 = event.paymethod) === null || _event$paymethod3 === void 0 ? void 0 : _event$paymethod3.name) : t(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : (_event$data2$gateway = _event$data2.gateway) === null || _event$data2$gateway === void 0 ? void 0 : _event$data2$gateway.toUpperCase(), event === null || event === void 0 ? void 0 : (_event$data3 = event.data) === null || _event$data3 === void 0 ? void 0 : (_event$data3$gateway = _event$data3.gateway) === null || _event$data3$gateway === void 0 ? void 0 : _event$data3$gateway.replaceAll('_', ' ')))
+          });
+        }
+      }
+    });
+    setRefundOptions(_refundOptions);
+  }, [JSON.stringify(order === null || order === void 0 ? void 0 : order.payment_events)], order === null || order === void 0 ? void 0 : order.id);
+  (0, _react.useEffect)(function () {
+    if (!(actionStatus !== null && actionStatus !== void 0 && actionStatus.loading)) {
+      setOpenModal(false);
+    }
+  }, [actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.loading]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (isAllowCashWalletRefund || isAllowCreditPointRefund || isAllowStripeRefund || isAllowOtherRefund) && /*#__PURE__*/_react.default.createElement(_styles2.RefundWalletButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "primary",
+    borderRadius: "8px",
+    disabled: (actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.loading) || refundDisabled,
+    onClick: function onClick() {
+      return setOpenModal(true);
+    }
+  }, t('REFUND_TO_WALLET', 'Refund to Wallet'))), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    width: "700px",
+    open: openModal,
+    onClose: function onClose() {
+      return setOpenModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles2.RefundContainer, {
+    onSubmit: handleSubmit(onSubmit),
+    autoComplete: "off"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, t('REFUND_TO_WALLET', 'Refund to Wallet')), refundOptions.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.SelectWrapper, null, /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_TYPES', 'Refund types')), /*#__PURE__*/_react.default.createElement(_FirstSelect.Select, {
+    defaultValue: selectedRefundOption,
+    options: refundOptions,
+    placeholder: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('SELECT_TYPE', 'Select type')),
+    onChange: function onChange(val) {
+      return setSelectedRefundOption(val);
+    }
+  })), /*#__PURE__*/_react.default.createElement("p", null, t('QUESTION_REFUND_AMOUNT', 'How do you want to refund?')), /*#__PURE__*/_react.default.createElement(_styles2.RadioItemContainer, {
+    active: isRefundAll,
+    disabled: refundAllDisabled,
+    onClick: function onClick() {
+      return setIsRefundAll(true);
+    }
+  }, isRefundAll ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.RecordCircleFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Circle, null), /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_ALL', 'Refund all'))), /*#__PURE__*/_react.default.createElement(_styles2.RadioItemContainer, {
+    active: !isRefundAll,
+    onClick: function onClick() {
+      return setIsRefundAll(false);
+    }
+  }, !isRefundAll ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.RecordCircleFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Circle, null), /*#__PURE__*/_react.default.createElement("span", null, t('REFUND_ONLY_AN_AMOUNT', 'Refund only an amount'))), !isRefundAll && /*#__PURE__*/_react.default.createElement(_styles2.RefundAmountWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+    name: "amount",
+    onKeyPress: function onKeyPress(e) {
+      if (!/^[0-9.]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    },
+    ref: register({
+      required: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('AMOUNT', 'Amount'))
+    })
+  })), /*#__PURE__*/_react.default.createElement(_styles2.RefundReasonContainer, null, /*#__PURE__*/_react.default.createElement("label", null, t('COMMENTS', 'Comments')), /*#__PURE__*/_react.default.createElement(_styles.TextArea, {
+    rows: 3,
+    name: "description"
+  })), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    type: "submit",
+    color: "primary",
+    borderRadius: "8px"
+  }, t('REFUND', 'Refund'))) : /*#__PURE__*/_react.default.createElement(_styles2.ErrorText, null, t('REFUND_NOT_ALLOWED', 'The refund is not allowed.')))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: alertState === null || alertState === void 0 ? void 0 : alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState === null || alertState === void 0 ? void 0 : alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
+  }));
+};
+exports.RefundToWallet = RefundToWallet;