ordering-ui-external 1.6.3 → 1.6.5

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

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WrapperPassword = exports.ValidationText = exports.TogglePassword = exports.Title = exports.TermsConditionWrapper = exports.SocialButtons = exports.SkeletonWrapper = exports.SkeletonSocialWrapper = exports.SignUpContainer = exports.RedirectLink = exports.ReCaptchaWrapper = exports.PromotionsWrapper = exports.LoginDivider = exports.InputWrapper = exports.InputContainer = exports.InputBeforeIcon = exports.FormSide = exports.FormInput = exports.DividerLine = exports.CheckboxArea = exports.BussinessAndDriverSignUp = 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, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
+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;
 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 SignUpContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  min-height: ", ";\n  padding: 0 10px;\n  box-sizing: border-box;\n\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
+var SignUpContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  ", "\n  padding: 0 10px;\n  box-sizing: border-box;\n\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
   var isPopup = _ref.isPopup;
-  return isPopup ? '500px' : 'calc(100vh - 65px)';
+  return !isPopup && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: calc(100vh - 65px);\n  "])));
 });
 exports.SignUpContainer = SignUpContainer;
-var Side = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
-var FormSide = (0, _styledComponents.default)(Side)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  align-items: center;\n  margin: auto;\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px){\n    font-size: ", ";\n  }\n"])), function (_ref2) {
+var Side = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
+var FormSide = (0, _styledComponents.default)(Side)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  align-items: center;\n  margin: auto;\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px){\n    font-size: ", ";\n  }\n"])), function (_ref2) {
   var isPopup = _ref2.isPopup;
   return isPopup ? '12px' : '1em';
 }, function (_ref3) {
@@ -24,7 +24,7 @@ var FormSide = (0, _styledComponents.default)(Side)(_templateObject3 || (_templa
   return isPopup ? '0.9em' : '1em';
 });
 exports.FormSide = FormSide;
-var FormInput = _styledComponents.default.form(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  input {\n    &::placeholder, .PhoneInputInput::placeholder {\n      color: ", " !important;\n    }\n\n    &:-ms-input-placeholder, .PhoneInputInput:-ms-input-placeholder {\n      color: ", " !important;\n    }\n\n    &::-ms-input-placeholder, .PhoneInputInput::-ms-input-placeholder {\n      color: ", " !important;\n    }\n  }\n\n  div.phone_number {\n    margin: 10px 0px;\n    width: 100%;\n  }\n\n  input.form:not(:last-child) {\n    margin: 5px 0px;\n    padding: 8px 20px;\n  }\n\n  button {\n    margin-top: 10px;\n    padding: 5px;\n    width: 100%;\n  }\n"])), function (_ref4) {
+var FormInput = _styledComponents.default.form(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  input {\n    &::placeholder, .PhoneInputInput::placeholder {\n      color: ", " !important;\n    }\n\n    &:-ms-input-placeholder, .PhoneInputInput:-ms-input-placeholder {\n      color: ", " !important;\n    }\n\n    &::-ms-input-placeholder, .PhoneInputInput::-ms-input-placeholder {\n      color: ", " !important;\n    }\n  }\n\n  div.phone_number {\n    margin: 10px 0px;\n    width: 100%;\n  }\n\n  input.form:not(:last-child) {\n    margin: 5px 0px;\n    padding: 8px 20px;\n  }\n\n  button {\n    margin-top: 10px;\n    padding: 5px;\n    width: 100%;\n  }\n"])), function (_ref4) {
   var isPopup = _ref4.isPopup;
   return isPopup ? '100%' : '80%';
 }, function (props) {
@@ -38,16 +38,16 @@ var FormInput = _styledComponents.default.form(_templateObject4 || (_templateObj
   return (_props$theme$colors3 = props.theme.colors) === null || _props$theme$colors3 === void 0 ? void 0 : _props$theme$colors3.lightGray;
 });
 exports.FormInput = FormInput;
-var RedirectLink = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin: 0px;\n  font-size: 17px;\n\n  span {\n    margin-right: 5px;\n    color: black;\n\n    ", "\n  }\n\n  a {\n    color: ", " !important;\n    text-decoration: none;\n    &:link, &:visited {\n      color: ", " !important;\n    }\n    &:hover {\n      text-decoration: underline !important;\n    }\n  }\n\n  * {\n    margin: 0px;\n    padding: 0px;\n  }\n\n  ", "\n\n  @media (min-width: 425px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n    flex-direction: row;\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\n  }\n"])), function (props) {
+var RedirectLink = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin: 0px;\n  font-size: 17px;\n\n  span {\n    margin-right: 5px;\n    color: black;\n\n    ", "\n  }\n\n  a {\n    color: ", " !important;\n    text-decoration: none;\n    &:link, &:visited {\n      color: ", " !important;\n    }\n    &:hover {\n      text-decoration: underline !important;\n    }\n  }\n\n  * {\n    margin: 0px;\n    padding: 0px;\n  }\n\n  ", "\n\n  @media (min-width: 425px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n    flex-direction: row;\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\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)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   return props.theme.colors.primary;
 }, function (_ref5) {
   var register = _ref5.register;
-  return register && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: calc(95% - 20px);\n\n    @media (min-width: 481px) {\n      width: ", ";\n    }\n  "])), function (_ref6) {
+  return register && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: calc(95% - 20px);\n\n    @media (min-width: 481px) {\n      width: ", ";\n    }\n  "])), function (_ref6) {
     var isPopup = _ref6.isPopup;
     return isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)';
   });
@@ -56,74 +56,74 @@ var RedirectLink = _styledComponents.default.div(_templateObject5 || (_templateO
   return isPopup ? '13px' : '18px';
 }, function (_ref8) {
   var isPopup = _ref8.isPopup;
-  return isPopup && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "])));
+  return isPopup && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "])));
 });
 exports.RedirectLink = RedirectLink;
-var SocialButtons = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: ", ";\n\n  button {\n    width: 100%;\n    padding: 5px;\n    color: #000000;\n    margin-bottom: 15px;\n\n    img {\n      width: 30px;\n    }\n\n    div {\n      font-size: 16px;\n    }\n  }\n"])), function (_ref9) {
+var SocialButtons = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: ", ";\n\n  button {\n    width: 100%;\n    padding: 5px;\n    color: #000000;\n    margin-bottom: 15px;\n\n    img {\n      width: 30px;\n    }\n\n    div {\n      font-size: 16px;\n    }\n  }\n"])), function (_ref9) {
   var isPopup = _ref9.isPopup;
   return isPopup ? '100%' : '80%';
 });
 exports.SocialButtons = SocialButtons;
-var Title = _styledComponents.default.h1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  margin-top: 0;\n  margin-bottom: 30px;\n  color: ", ";\n"])), function (props) {
+var Title = _styledComponents.default.h1(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  margin-top: 0;\n  margin-bottom: 30px;\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 });
 exports.Title = Title;
-var SkeletonWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  span{\n    margin: 10px 0;\n    border-radius: 30px;\n  }\n"])));
+var SkeletonWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  span{\n    margin: 10px 0;\n    border-radius: 30px;\n  }\n"])));
 exports.SkeletonWrapper = SkeletonWrapper;
-var SkeletonSocialWrapper = (0, _styledComponents.default)(SkeletonWrapper)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: ", ";\n  span{\n    margin-top: 0;\n  }\n"])), function (_ref10) {
+var SkeletonSocialWrapper = (0, _styledComponents.default)(SkeletonWrapper)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: ", ";\n  span{\n    margin-top: 0;\n  }\n"])), function (_ref10) {
   var isPopup = _ref10.isPopup;
   return isPopup ? '100%' : '80%';
 });
 exports.SkeletonSocialWrapper = SkeletonSocialWrapper;
-var WrapperPassword = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  input{\n    box-sizing: border-box;\n    width: 100%;\n    padding-right: 40px !important;\n    padding-left: 40px !important;\n  }\n"])));
+var WrapperPassword = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  input{\n    box-sizing: border-box;\n    width: 100%;\n    padding-right: 40px !important;\n    padding-left: 40px !important;\n  }\n"])));
 exports.WrapperPassword = WrapperPassword;
-var TogglePassword = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  color: #333;\n  font-size: 24px;\n  transform: translate(-150%, 24%);\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n  svg {\n    font-size: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var TogglePassword = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  color: #333;\n  font-size: 24px;\n  transform: translate(-150%, 24%);\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n  svg {\n    font-size: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   var _props$theme2;
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    transform: translate(150%, 24%);\n  "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    transform: translate(150%, 24%);\n  "])));
 }, function (props) {
   return props.theme.colors.lightGray;
 });
 exports.TogglePassword = TogglePassword;
-var ReCaptchaWrapper = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
+var ReCaptchaWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
 exports.ReCaptchaWrapper = ReCaptchaWrapper;
-var LoginDivider = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 80%;\n  margin: 30px 0;\n\n  p {\n    margin: 0;\n    width: 70px;\n    font-size: 14px;\n    color: #748194;\n    text-align: center;\n  }\n"])));
+var LoginDivider = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 80%;\n  margin: 30px 0;\n\n  p {\n    margin: 0;\n    width: 70px;\n    font-size: 14px;\n    color: #748194;\n    text-align: center;\n  }\n"])));
 exports.LoginDivider = LoginDivider;
-var DividerLine = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  height: 1px;\n  background: #E9ECEF;\n  flex-grow: 1;\n"])));
+var DividerLine = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  height: 1px;\n  background: #E9ECEF;\n  flex-grow: 1;\n"])));
 exports.DividerLine = DividerLine;
-var InputContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin: 5px 0px;\n\n  \n  @media (min-width: 800px) {\n    ", "\n  }\n"])), function (_ref11) {
+var InputContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin: 5px 0px;\n\n  \n  @media (min-width: 800px) {\n    ", "\n  }\n"])), function (_ref11) {
   var isHalf = _ref11.isHalf;
-  return isHalf && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      width: 48%;\n    "])));
+  return isHalf && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      width: 48%;\n    "])));
 });
 exports.InputContainer = InputContainer;
-var InputWrapper = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  \n  input{\n    box-sizing: border-box;\n    width: 100%;\n\n    ", "\n    margin: 10px 0;\n  }\n"])), function (props) {
-  return props.theme.rtl ? (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      padding-right: 40px !important;\n    "]))) : (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      padding-left: 40px !important;\n    "])));
+var InputWrapper = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  \n  input{\n    box-sizing: border-box;\n    width: 100%;\n\n    ", "\n    margin: 10px 0;\n  }\n"])), function (props) {
+  return props.theme.rtl ? (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      padding-right: 40px !important;\n    "]))) : (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      padding-left: 40px !important;\n    "])));
 });
 exports.InputWrapper = InputWrapper;
-var InputBeforeIcon = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  left: 15px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  ", "\n\n  svg {\n    font-size: 16px;\n    color: #B1BCCC;\n  }\n"])), function (props) {
+var InputBeforeIcon = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  left: 15px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  ", "\n\n  svg {\n    font-size: 16px;\n    color: #B1BCCC;\n  }\n"])), function (props) {
   var _props$theme3;
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    right: 15px;\n    left: initial;\n  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    right: 15px;\n    left: initial;\n  "])));
 });
 exports.InputBeforeIcon = InputBeforeIcon;
-var TermsConditionWrapper = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 10px 0;\n\n  > label {\n    font-size: 14px;\n    ", "\n\n    > span:first-child {\n      font-weight: 500;\n      ", "\n    }\n\n    > a {\n      color: ", " !important;\n    }\n  }\n\n  @media (min-width: 768px) {\n    > label {\n      font-size: 16px;\n    }\n  }\n"])), function (props) {
+var TermsConditionWrapper = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 10px 0;\n\n  > label {\n    font-size: 14px;\n    ", "\n\n    > span:first-child {\n      font-weight: 500;\n      ", "\n    }\n\n    > a {\n      color: ", " !important;\n    }\n  }\n\n  @media (min-width: 768px) {\n    > label {\n      font-size: 16px;\n    }\n  }\n"])), function (props) {
   var _props$theme4;
-  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n      margin-right: 7px;\n    "]))) : (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      margin-left: 7px;\n    "])));
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      margin-right: 7px;\n    "]))) : (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n      margin-left: 7px;\n    "])));
 }, function (props) {
   var _props$theme5;
-  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n        margin-left: 7px;\n      "]))) : (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        margin-right: 7px;\n      "])));
+  return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.rtl ? (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        margin-left: 7px;\n      "]))) : (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n        margin-right: 7px;\n      "])));
 }, function (props) {
   return props.theme.colors.primary;
 });
 exports.TermsConditionWrapper = TermsConditionWrapper;
-var PromotionsWrapper = (0, _styledComponents.default)(TermsConditionWrapper)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral([""])));
+var PromotionsWrapper = (0, _styledComponents.default)(TermsConditionWrapper)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral([""])));
 exports.PromotionsWrapper = PromotionsWrapper;
-var BussinessAndDriverSignUp = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-direction: column;\n\n  button:first-child {\n    margin-bottom: 10px;\n  }\n\n  @media (min-width: 481px) {\n    width: ", ";\n  }\n\n  @media (min-width: 993px) {\n    flex-direction: row;\n    button:first-child {\n      margin-bottom: 0px;\n    }\n  }\n\n  button {\n    width: 100%;\n    margin-top: 15px;\n    padding: 5px;\n    margin: 0 10px;\n  }\n"])), function (_ref12) {
+var BussinessAndDriverSignUp = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-direction: column;\n\n  button:first-child {\n    margin-bottom: 10px;\n  }\n\n  @media (min-width: 481px) {\n    width: ", ";\n  }\n\n  @media (min-width: 993px) {\n    flex-direction: row;\n    button:first-child {\n      margin-bottom: 0px;\n    }\n  }\n\n  button {\n    width: 100%;\n    margin-top: 15px;\n    padding: 5px;\n    margin: 0 10px;\n  }\n"])), function (_ref12) {
   var isPopup = _ref12.isPopup;
   return isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)';
 });
 exports.BussinessAndDriverSignUp = BussinessAndDriverSignUp;
-var CheckboxArea = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral([""])));
+var CheckboxArea = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral([""])));
 exports.CheckboxArea = CheckboxArea;
-var ValidationText = _styledComponents.default.span(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 18px;\n  color: ", ";\n"])), function (props) {
+var ValidationText = _styledComponents.default.span(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 18px;\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.danger500;
 });
 exports.ValidationText = ValidationText;

package/_modules/themes/five/src/styles/Buttons/index.js

@@ -37,7 +37,7 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
   return circle && outline && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background: #FFF;\n    color: #CCC;\n    border-color: #CCC;\n    padding: 0;\n    width: 34px;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 50%;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'));
 }, function (_ref6) {
   var color = _ref6.color;
-  return color === 'primary' && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+  return color === 'primary' && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: #FFF;\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.primaryContrast;
@@ -45,6 +45,8 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return props.theme.colors.primary;
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.primary);
+  }, function (props) {
+    return (0, _polished.darken)(0.07, props.theme.colors.primary);
   }, function (_ref7) {
     var outline = _ref7.outline;
     return outline && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.getTraduction = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = exports.LightenDarkenColor = void 0;
+exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = void 0;
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styledComponents = require("styled-components");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -168,29 +168,40 @@ var bytesConverter = function bytesConverter(bytes) {
 };
 
 /**
- * Function to get colors darker/lighten.
+ * Function to get brightness of color.
  */
 exports.bytesConverter = bytesConverter;
-var LightenDarkenColor = function LightenDarkenColor(col, amt) {
-  var usePound = false;
-  if (col[0] == "#") {
-    col = col.slice(1);
-    usePound = true;
+var lightenDarkenColor = function lightenDarkenColor(color) {
+  var r, g, b, hsp;
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true; //is light color
+  } else {
+    return false;
   }
-  var num = parseInt(col, 16);
-  var r = (num >> 16) + amt;
-  if (r > 255) r = 255;else if (r < 0) r = 0;
-  var b = (num >> 8 & 0x00FF) + amt;
-  if (b > 255) b = 255;else if (b < 0) b = 0;
-  var g = (num & 0x0000FF) + amt;
-  if (g > 255) g = 255;else if (g < 0) g = 0;
-  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
 };
 
 /**
  * Function to get time in 12 hours format.
  */
-exports.LightenDarkenColor = LightenDarkenColor;
+exports.lightenDarkenColor = lightenDarkenColor;
 var getHourMin = function getHourMin(hour, min) {
   var _hour;
   if (hour < 12) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -85,7 +85,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.5.2",
+    "ordering-components-external": "1.5.3",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/themes/five/src/components/BusinessBasicInformation/index.js

@@ -10,12 +10,12 @@ import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
 
 import { useUtils, useOrder, useLanguage, useConfig, useOrderingTheme } from 'ordering-components-external'
 
-import { convertHoursToMinutes, shape } from '../../../../../utils'
+import { convertHoursToMinutes, shape, lightenDarkenColor } from '../../../../../utils'
 import { Select } from '../../styles/Select'
 import { MomentContent } from '../MomentContent'
 import CgSearch from '@meronex/icons/cg/CgSearch'
 import { SearchProducts } from '../SearchProducts'
-
+import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/components/BusinessProductsListing/SearchProducts'
 import {
   BusinessContainer,
   BusinessContent,
@@ -34,7 +34,8 @@ import {
   SearchComponentContainer,
   SocialList,
   IconWrapper,
-  BusinessInfoWrapper
+  BusinessInfoWrapper,
+  WrapperFloatingSearch
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
 
@@ -83,6 +84,7 @@ export const BusinessBasicInformation = (props) => {
   const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
   const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const isInfoShrunken = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
+  const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
   const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
   const layoutsWithOldSearch = ['starbucks', 'old']
   const hideSearch = layoutsWithOldSearch.includes(orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type)
@@ -188,6 +190,8 @@ export const BusinessBasicInformation = (props) => {
                   {business?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={business?.ribbon?.color}
+                      colorText={lightenDarkenColor(business?.ribbon?.color)}
+                      borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
                       isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
                       isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
                     >
@@ -383,79 +387,97 @@ export const BusinessBasicInformation = (props) => {
         {!isInfoShrunken && (
           <BusinessInfoComponent />
         )}
-        <BusinessContainer bgimage={business?.header || theme?.images?.dummies?.businessHeader} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
-          {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
-          {showLogo && (
-            <BusinessContent>
-              <WrapperBusinessLogo>
-                {!loading ? (
-                  <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
-                ) : (
-                  <Skeleton height={70} width={70} />
+        {(business?.header || business?.logo || loading || isInfoShrunken) && (
+          <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
+            {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
+            {showLogo && business?.logo && (
+              <BusinessContent>
+                <WrapperBusinessLogo>
+                  {!loading && (
+                    <BusinessLogo bgimage={optimizeImage(business?.logo, 'h_200,c_limit')} />
+                  )}
+                </WrapperBusinessLogo>
+              </BusinessContent>
+            )}
+            {isInfoShrunken && (
+              <BusinessInfoComponent />
+            )}
+            {!loading && (
+              <>
+                {isInfoShrunken && (
+                  <SearchComponentContainer>
+                    <SearchComponent />
+                  </SearchComponentContainer>
                 )}
-              </WrapperBusinessLogo>
-            </BusinessContent>
-          )}
-          {isInfoShrunken && (
-            <BusinessInfoComponent />
-          )}
-          {!loading && (
-            <>
-              {isInfoShrunken && (
-                <SearchComponentContainer>
-                  <SearchComponent />
-                </SearchComponentContainer>
-              )}
-              <BusinessMoreDetail>
-                <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
-              </BusinessMoreDetail>
-            </>
-          )}
-          <Modal
-            width='70%'
-            open={openBusinessInformation}
-            onClose={setOpenBusinessInformation}
-            padding='0'
-            hideCloseDefault
-            isTransparent
-          >
-            <BusinessInformation
-              business={business}
-              getBusinessType={getBusinessType}
-              optimizeImage={optimizeImage}
-              onClose={setOpenBusinessInformation}
-            />
-          </Modal>
-          <Modal
-            width='70%'
-            open={isBusinessReviews}
-            onClose={() => setIsBusinessReviews(false)}
-            padding='20px'
-          >
-            <BusinessReviews
-              businessId={business.id}
-              reviews={business.reviews?.reviews}
-              businessName={business.name}
-              stars={business.reviews?.total}
-            />
-          </Modal>
-          <Modal
-            open={isPreOrder}
-            width={isCustomerMode ? '700px' : '760px'}
-            onClose={() => setIsPreOrder(false)}
-            padding={isCustomerMode && '20px'}
-          >
-            {isCustomerMode ? (
-              <MomentContent onClose={() => setIsPreOrder(false)} />
-            ) : (
-              <BusinessPreorder
-                business={business}
-                handleClick={() => setIsPreOrder(false)}
-              />
+                {searchLayout === 'floating' && (
+                  <WrapperFloatingSearch>
+                    <SearchProductsStarbucks
+                      handleChangeSearch={handleChangeSearch}
+                      searchValue={searchValue}
+                      sortByOptions={sortByOptions}
+                      sortByValue={sortByValue}
+                      onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+                      businessState={businessState}
+                      disablePadding
+                    />
+                  </WrapperFloatingSearch>
+                )}
+                <BusinessMoreDetail>
+                  <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
+                </BusinessMoreDetail>
+              </>
             )}
-          </Modal>
-        </BusinessContainer>
+          </BusinessContainer>
+        )}
+        {!business?.header && !business?.logo && !loading && !isInfoShrunken && (
+          <BusinessMoreDetail position='relative'>
+            <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
+          </BusinessMoreDetail>
+        )}
       </BusinessInfoWrapper>
+      <Modal
+        width='70%'
+        open={openBusinessInformation}
+        onClose={setOpenBusinessInformation}
+        padding='0'
+        hideCloseDefault
+        isTransparent
+      >
+        <BusinessInformation
+          business={business}
+          getBusinessType={getBusinessType}
+          optimizeImage={optimizeImage}
+          onClose={setOpenBusinessInformation}
+        />
+      </Modal>
+      <Modal
+        width='70%'
+        open={isBusinessReviews}
+        onClose={() => setIsBusinessReviews(false)}
+        padding='20px'
+      >
+        <BusinessReviews
+          businessId={business.id}
+          reviews={business.reviews?.reviews}
+          businessName={business.name}
+          stars={business.reviews?.total}
+        />
+      </Modal>
+      <Modal
+        open={isPreOrder}
+        width={isCustomerMode ? '700px' : '760px'}
+        onClose={() => setIsPreOrder(false)}
+        padding={isCustomerMode && '20px'}
+      >
+        {isCustomerMode ? (
+          <MomentContent onClose={() => setIsPreOrder(false)} />
+        ) : (
+          <BusinessPreorder
+            business={business}
+            handleClick={() => setIsPreOrder(false)}
+          />
+        )}
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

package/src/themes/five/src/components/BusinessBasicInformation/styles.js

@@ -306,9 +306,16 @@ export const BusinessDetail = styled.div`
 `
 
 export const BusinessMoreDetail = styled.div`
-  top: 30px;
-  right: 30px;
-  position: absolute;
+  ${({ position }) => position ? css`
+    width: 100% !important;
+    justify-content: flex-end !important;
+    top: 0px;
+    right: 0px;
+  ` : css`
+    top: 30px;
+    right: 30px;
+  `}
+  position: ${props => props.position ?? 'absolute'};
   min-width: 24px;
   width: 24px;
   height: 24px;
@@ -319,7 +326,7 @@ export const BusinessMoreDetail = styled.div`
 
   svg {
     font-size: 24px;
-    color: white;
+    color: ${props => props.position ? 'black' : 'white'};
   }
 `
 
@@ -376,6 +383,14 @@ export const RibbonBox = styled.div`
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${({ colorText }) => colorText && css`
+    color: ${colorText ? 'black' : 'white'};
+  `}
+
+  ${({ borderRibbon }) => borderRibbon && css`
+    border: 1px solid ${borderRibbon ? 'black' : 'white'};
+  `}
 `
 export const SearchIconWrapper = styled.div`
   cursor: pointer;
@@ -453,3 +468,29 @@ export const BusinessInfoWrapper = styled.div`
     flex-direction: column;
   }
 `
+
+export const WrapperFloatingSearch = styled.div`
+  position: absolute;
+  color: ${({ theme }) => theme.colors.white};
+  display: flex;
+  background: rgba(0,0,0,0.2);
+  top: 80px;
+  right: 10px;
+  width: 80%;
+  border-bottom: 1px solid #FFFFFF;
+  #select-input {
+    color: #FFFFFF !important;
+    background: transparent;
+  }
+  svg, span {
+    color: #FFFFFF !important;
+  }
+  @media (min-width: 681px){
+    top: 23px;
+    right: 60px;
+    width: 300px;
+    input {
+      width: 80%;
+    }
+  }
+`

package/src/themes/five/src/components/BusinessController/index.js

@@ -8,7 +8,7 @@ import { Modal } from '../Modal'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
-import { convertHoursToMinutes, LightenDarkenColor, shape } from '../../../../../utils'
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../../../../utils'
 
 import {
   ContainerCard,
@@ -153,8 +153,8 @@ const BusinessControllerUI = (props) => {
           {business?.ribbon?.enabled && (
             <RibbonBox
               bgColor={business?.ribbon?.color}
-              colorText={LightenDarkenColor(business?.ribbon?.color, -200)}
-              borderRibbon={LightenDarkenColor(business?.ribbon?.color, -200)}
+              colorText={lightenDarkenColor(business?.ribbon?.color, -200)}
+              borderRibbon={lightenDarkenColor(business?.ribbon?.color, -200)}
               isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
               isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
             >

package/src/themes/five/src/components/BusinessController/styles.js

@@ -451,11 +451,11 @@ export const RibbonBox = styled.div`
   `}
 
   ${({ colorText }) => colorText && css`
-    color: ${colorText};
+    color: ${colorText ? 'black' : 'white'};
   `}
 
   ${({ borderRibbon }) => borderRibbon && css`
-    border: 1px solid ${borderRibbon};
+    border: 1px solid ${borderRibbon ? 'black' : 'white'};
   `}
 `
 

package/src/themes/five/src/components/Checkout/index.js

@@ -553,7 +553,10 @@ const CheckoutUI = (props) => {
           isCheckout
           isEdit
           isModal
-          onClose={() => setIsOpen(false)}
+          onClose={() => {
+            setIsOpen(false)
+            handlePlaceOrder()
+          }}
         />
       </Modal>
     </Container>

package/src/themes/five/src/components/Header/index.js

@@ -242,7 +242,7 @@ export const Header = (props) => {
                     onClick={(e) => handleClickUserCustomer(e)}
                   >
                     <GeoAlt />
-                    <span>{orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}</span>
+                    <span>{orderState.options?.address?.address || t('LANG_WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}</span>
                   </AddressMenu>
                   <Divider />
                 </>
@@ -512,7 +512,7 @@ export const Header = (props) => {
             onClose={() => closeAuthModal()}
             width='50%'
             authModal
-            closeOnBackdrop={false}
+            closeOnBackdrop
           >
             {modalPageToShow === 'login' && (
               <LoginForm