ordering-ui-external 10.3.4 → 10.4.0

package/_modules/themes/five/index.js

@@ -777,6 +777,12 @@ Object.defineProperty(exports, "Wallets", {
     return _Wallets.Wallets;
   }
 });
+Object.defineProperty(exports, "WebsocketStatus", {
+  enumerable: true,
+  get: function get() {
+    return _WebsocketStatus.WebsocketStatus;
+  }
+});
 var _AccordionDropdown = require("./src/components/AccordionDropdown");
 var _AddressDetails = require("./src/components/AddressDetails");
 var _AddressForm = require("./src/components/AddressForm");
@@ -899,6 +905,7 @@ var _Confirm = require("./src/components/Confirm");
 var _TaxInformation = require("./src/components/TaxInformation");
 var _SendGiftCard = require("./src/components/GiftCard/SendGiftCard");
 var _DatePicker = require("./src/components/DatePicker");
+var _WebsocketStatus = require("./src/components/WebsocketStatus");
 var _Buttons = require("./src/styles/Buttons");
 var _Inputs = require("./src/styles/Inputs");
 var _Select = require("./src/styles/Select");

package/_modules/themes/five/src/components/BusinessPreorder/styles.js

@@ -59,7 +59,7 @@ var TimeItem = _styledComponents.default.div(_templateObject12 || (_templateObje
   });
 }, function (_ref2) {
   var cateringPreorder = _ref2.cateringPreorder;
-  return cateringPreorder ? (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    background: ", ";\n    width: 100%;\n    min-width: 100%;\n    height: 50px;\n\n    span {\n      font-size: 18px;\n      display: flex;\n      align-items: center;\n      margin: 10px 0;\n      margin-left: 15px;\n      p{\n        position: relative;\n        bottom: 2px;\n      }\n    }\n    ", "\n  "])), function (props) {
+  return cateringPreorder ? (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    background: ", ";\n    width: 100%;\n    min-width: 100%;\n    height: 50px;\n    \n    span {\n      font-size: 18px;\n      display: flex;\n      align-items: center;\n      margin: 10px 0;\n      margin-left: 15px;\n      p{\n        position: relative;\n        bottom: 2px;\n      }\n    }\n    ", "\n  "])), function (props) {
     var _props$theme;
     return (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.colors) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundPage;
   }, function (_ref3) {
@@ -67,7 +67,7 @@ var TimeItem = _styledComponents.default.div(_templateObject12 || (_templateObje
     return active && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      background: #F5F9FF;\n      color: ", ";\n      span {\n        p{\n          bottom: 0;\n          margin-left: 2px;\n        }\n      }\n    "])), function (props) {
       return props.theme.colors.primary;
     });
-  }) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    justify-content: center;\n    align-items: center;\n    background: #E9ECEF;\n    border-radius: 7.6px;\n    padding: 5px 15px;\n    margin: 12px;\n    width: calc(50% - 24px);\n    min-width: calc(50% - 24px);\n    box-sizing: border-box;\n    user-select: none;\n\n      @media (min-width: 400px) {\n        width: calc(33.33% - 24px);\n        min-width: calc(33.33% - 24px);\n      }\n\n      @media (min-width: 576px) {\n      width: calc(25% - 24px);\n      min-width: calc(25% - 24px);\n      }\n\n      @media (min-width: 769px) {\n        width: calc(33.33% - 24px);\n        min-width: calc(33.33% - 24px);\n        ", "\n      }\n    "])), function (_ref4) {
+  }) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    justify-content: center;\n    align-items: center;\n    background: #E9ECEF;\n    border-radius: 7.6px;\n    padding: 5px 15px;\n    margin: 12px;\n    width: calc(50% - 24px);\n    min-width: calc(50% - 24px);\n    box-sizing: border-box;\n    user-select: none;\n      \n      @media (min-width: 400px) {\n        width: calc(33.33% - 24px);\n        min-width: calc(33.33% - 24px);\n      }\n      \n      @media (min-width: 576px) {\n      width: calc(25% - 24px);\n      min-width: calc(25% - 24px);\n      }\n      \n      @media (min-width: 769px) {\n        width: calc(33.33% - 24px);\n        min-width: calc(33.33% - 24px);\n        ", "\n      }\n    "])), function (_ref4) {
     var isAppoint = _ref4.isAppoint;
     return isAppoint && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          width: calc(33.33% - 24px);\n          min-width: calc(33.33% - 24px);\n          span {\n            font-size: 12px;\n          }\n        "])));
   });

package/_modules/themes/five/src/components/Cart/index.js

@@ -207,7 +207,7 @@ var CartUI = function CartUI(props) {
     var cartsAvailable = (_Object$values = Object.values(orderState === null || orderState === void 0 ? void 0 : orderState.carts)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (cart) {
       return (cart === null || cart === void 0 ? void 0 : cart.valid) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2;
     });
-    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+    if (cartsAvailable.length === 1 || !isMultiCheckout || !(cart !== null && cart !== void 0 && cart.business_id)) {
       events.emit('go_to_page', {
         page: 'checkout',
         params: {
@@ -564,7 +564,7 @@ var CartUI = function CartUI(props) {
     cateringPreorder: true,
     isCart: true,
     business: cart === null || cart === void 0 ? void 0 : cart.business
-  }, cateringValues))), (onClickCheckout || isForceOpenCart) && !isCheckout && (cart === null || cart === void 0 ? void 0 : cart.valid) && (!isMultiCheckout || isStore) && /*#__PURE__*/_react.default.createElement(_styles.CheckoutAction, null, /*#__PURE__*/_react.default.createElement("p", null, (cart === null || cart === void 0 ? void 0 : cart.total) >= 1 && parsePrice(cart === null || cart === void 0 ? void 0 : cart.total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, cateringValues))), (onClickCheckout || isForceOpenCart) && !isCheckout && (cart === null || cart === void 0 ? void 0 : cart.valid) && (!isMultiCheckout || isStore || !(cart !== null && cart !== void 0 && cart.business_id)) && /*#__PURE__*/_react.default.createElement(_styles.CheckoutAction, null, /*#__PURE__*/_react.default.createElement("p", null, (cart === null || cart === void 0 ? void 0 : cart.total) >= 1 && parsePrice(cart === null || cart === void 0 ? void 0 : cart.total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: !(cart !== null && cart !== void 0 && cart.valid_maximum) || subtotalWithTaxes < (cart === null || cart === void 0 ? void 0 : cart.minimum) || !(cart !== null && cart !== void 0 && cart.valid_address) ? 'secundary' : 'primary',
     onClick: function onClick() {
       return checkOutBtnClick(cart === null || cart === void 0 ? void 0 : cart.uuid);

package/_modules/themes/five/src/components/GiftCard/SendGiftCard/index.js

@@ -64,10 +64,10 @@ var SendGiftCardUI = function SendGiftCardUI(props) {
       required: t('VALIDATION_ERROR_REQUIRED', 'To email is required').replace('_attribute_', t('EMAIL', 'EMail'))
     }),
     autoComplete: "off"
-  })), /*#__PURE__*/_react.default.createElement(_styles.FormController, null, /*#__PURE__*/_react.default.createElement("label", null, t('FROM', 'From')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+  })), /*#__PURE__*/_react.default.createElement(_styles.FormController, null, /*#__PURE__*/_react.default.createElement("label", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
     name: "user_name",
     ref: register(),
-    placeholder: t('WRITE_YOUR_NAME', 'Write your name'),
+    placeholder: t('WRITE_A_NAME', 'Write a name'),
     autoComplete: "off"
   })), /*#__PURE__*/_react.default.createElement(_styles.FormController, null, /*#__PURE__*/_react.default.createElement("label", null, t('TITLE', 'Title')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
     name: "title",

package/_modules/themes/five/src/components/WebsocketStatus/index.js

@@ -0,0 +1,123 @@
+"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.WebsocketStatus = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _Confirm = require("../../../src/components/Confirm");
+var _Modal = require("../Modal");
+var _Buttons = require("../../styles/Buttons");
+var _styles = require("./styles");
+var _useWindowSize = require("../../../../../hooks/useWindowSize");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 SocketStatusUI = function SocketStatusUI(props) {
+  var socketStatus = props.socketStatus,
+    reconnectAttemptCount = props.reconnectAttemptCount,
+    connectedDate = props.connectedDate;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+    _useUtils2 = _slicedToArray(_useUtils, 1),
+    parseDate = _useUtils2[0].parseDate;
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openModal = _useState4[0],
+    setOpenModal = _useState4[1];
+  var windowSize = (0, _useWindowSize.useWindowSize)();
+  var closeAlert = function closeAlert() {
+    setAlertState({
+      open: false,
+      content: []
+    });
+    window.location.reload();
+  };
+  (0, _react.useEffect)(function () {
+    if (reconnectAttemptCount > 3) {
+      setAlertState({
+        open: true,
+        content: t('WEBSOCKET_CONNECT_ERROR', 'There appears to be an error in establishing the WebSocket connection. Please try reloading the page to resolve the issue.')
+      });
+    }
+  }, [reconnectAttemptCount]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Contatiner, null, /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.IconButton, {
+    color: "primary"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), /*#__PURE__*/_react.default.createElement(_styles.InfoContent, null, t('WEBSOCKET_STATUS_APP_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh your app and update the status as well. Need help? Contact our Customer support team here:'), /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://www.ordering.co/contact-ordering",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, t('CUSTOMER_SUPPORT', 'Customer support')))), /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    borderRadius: "8px",
+    color: "secundary",
+    onClick: function onClick() {
+      return setOpenModal(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.StatusContainer, null, /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTION_STATUS', 'Connection status')), /*#__PURE__*/_react.default.createElement(_styles.WebsocketStatusDot, {
+    status: socketStatus
+  })))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    open: openModal,
+    onClose: function onClose() {
+      return setOpenModal(false);
+    },
+    width: "500px",
+    title: t('CONNECTION_STATUS', 'Connection status')
+  }, /*#__PURE__*/_react.default.createElement(_styles.DetailContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('LAST_UPDATE', 'Last update'), ": ", parseDate(connectedDate)), /*#__PURE__*/_react.default.createElement(_styles.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.WebsocketStatusDot, {
+    status: 1
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('OK', 'Ok'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_OK', 'The websocket works normally.'))), /*#__PURE__*/_react.default.createElement(_styles.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.WebsocketStatusDot, {
+    status: 0
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTING', 'Connecting'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_CONNECTING', 'The websocket is connecting.'))), /*#__PURE__*/_react.default.createElement(_styles.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.WebsocketStatusDot, {
+    status: 2
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('DISCONNECTED', 'Disconnected'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.'))), /*#__PURE__*/_react.default.createElement(_styles.ButtonsContainer, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "secundary",
+    onClick: function onClick() {
+      return setOpenModal(false);
+    }
+  }, t('CLOSE', 'Close')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    onClick: function onClick() {
+      return window.location.reload();
+    }
+  }, t('UPDATE', 'Update'))))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
+    title: t('ERROR', 'Error'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return closeAlert();
+    },
+    onAccept: function onAccept() {
+      return closeAlert();
+    },
+    closeOnBackdrop: false
+  }));
+};
+var WebsocketStatus = function WebsocketStatus(props) {
+  var socketProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: SocketStatusUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.WebsocketStatus, socketProps);
+};
+exports.WebsocketStatus = WebsocketStatus;

package/_modules/themes/five/src/components/WebsocketStatus/styles.js

@@ -0,0 +1,69 @@
+"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.WebsocketStatusDot = exports.StatusItemWrapper = exports.StatusContainer = exports.InfoWrapper = exports.InfoContent = exports.DetailContainer = exports.DateWrapper = exports.Contatiner = exports.ButtonsContainer = exports.ButtonWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+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) } })); }
+var Contatiner = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  > button {\n    height: 41px;\n  }\n  justify-content: flex-end;\n  margin-right: 10px;\n  margin-bottom: 10px;\n"])));
+exports.Contatiner = Contatiner;
+var StatusContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  > span:first-child {\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-left: 6px;\n    "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin-right: 6px;\n    "])));
+});
+exports.StatusContainer = StatusContainer;
+var WebsocketStatusDot = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref) {
+  var status = _ref.status;
+  return status === 0 && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background-color: #FF9922;\n  "])));
+}, function (_ref2) {
+  var status = _ref2.status;
+  return status === 1 && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: #00D27A;\n  "])));
+}, function (_ref3) {
+  var status = _ref3.status;
+  return status === 2 && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background-color: #E63757;\n  "])));
+});
+exports.WebsocketStatusDot = WebsocketStatusDot;
+var DateWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  text-align: center;\n"])));
+exports.DateWrapper = DateWrapper;
+var InfoWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n\n  > button {\n    height: 25px;\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &:hover > div {\n    visibility: visible;\n    opacity: 1;\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: 4px;\n  "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-right: 4px;\n  "])));
+});
+exports.InfoWrapper = InfoWrapper;
+var InfoContent = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 100%;\n  z-index: 999;\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n  border-radius: 7.6px;\n  padding: 8px 12px;\n  font-size: 12px;\n  line-height: 18px;\n  min-width: 150px;\n  transition: all 0.3s linear;\n  visibility: hidden;\n  opacity: 0;\n  /* display: none; */\n  color: ", ";\n  left: -100px;\n    ", "\n\n  a {\n    color: ", ";\n    transition: all 0.3s linear;\n    cursor: pointer;\n    margin-left: 5px;\n    ", "\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  @media (min-width: 576px) {\n    min-width: 350px;\n    padding: 12px 15px;\n    left: -200px;\n    ", "\n  }\n\n  @media (min-width: 993px) {\n    min-width: 535px;\n    left: -330px;\n    ", "\n  }\n\n"])), function (props) {
+  return props.theme.colors.backgroundInfo;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) === null || _props$theme3 === void 0 || (_props$theme3 = _props$theme3.colors) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.darkTextColor;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      right: -100px;\n      left: initial;\n    "])));
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      margin-left: 0px;\n      margin-right: 5px;\n    "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      right: -200px;\n      left: initial;\n    "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      right: -330px;\n      left: initial;\n    "])));
+});
+exports.InfoContent = InfoContent;
+var DetailContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  h2 {\n    font-weight: 700;\n    font-size: 20px;\n    line-height: 30px;\n  }\n\n  > p {\n    font-size: 14px;\n  }\n"])));
+exports.DetailContainer = DetailContainer;
+var StatusItemWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  > div {\n    display: flex;\n    align-items: center;\n\n    > span:first-child {\n      margin: 0 16px;\n    }\n  }\n  p {\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n\n    ", "\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  var _props$theme4;
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin-right: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      margin-left: 40px;\n    "])));
+});
+exports.StatusItemWrapper = StatusItemWrapper;
+var ButtonsContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 40px;\n\n  > button {\n    border-radius: 8px;\n    height: 40px;\n    &:last-child {\n      margin: 0 10px;\n    }\n  }\n"])));
+exports.ButtonsContainer = ButtonsContainer;
+var ButtonWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  button{\n    height: 41px;\n      width: 175px;\n      width: 175px;\n    width: 175px;\n  }\n\n"])));
+exports.ButtonWrapper = ButtonWrapper;