ordering-ui-external 1.0.1 → 1.1.0

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

@@ -15,6 +15,14 @@ var _orderingComponentsExternal = require("ordering-components-external");
 
 var _UserFormDetails = require("../UserFormDetails");
 
+var _UserFormDetails2 = require("../../../../../components/UserFormDetails");
+
+var _Modal = require("../Modal");
+
+var _VerifyCodeForm = require("../VerifyCodeForm");
+
+var _useCountdownTimer3 = require("../../../../../hooks/useCountdownTimer");
+
 var _AddressList = require("../AddressList");
 
 var _Confirm = require("../Confirm");
@@ -27,6 +35,8 @@ var _FiCamera = _interopRequireDefault(require("@meronex/icons/fi/FiCamera"));
 
 var _BiImage = _interopRequireDefault(require("@meronex/icons/bi/BiImage"));
 
+var _styledComponents = require("styled-components");
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,14 +45,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 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."); }
@@ -56,7 +66,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var UserProfileFormUI = function UserProfileFormUI(props) {
-  var _formState$changes2, _props$beforeElements, _props$beforeComponen, _formState$changes3, _formState$changes4, _formState$changes5, _formState$result, _formState$changes6, _formState$changes7, _props$afterComponent, _props$afterElements;
+  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _formState$changes5, _verifyPhoneState$res3, _props$beforeElements, _props$beforeComponen, _formState$changes6, _formState$changes7, _formState$changes8, _formState$result, _formState$changes9, _formState$changes10, _props$afterComponent, _props$afterElements;
 
   var userData = props.userData,
       handleButtonUpdateClick = props.handleButtonUpdateClick,
@@ -64,20 +74,34 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       formState = props.formState,
       cleanFormState = props.cleanFormState,
       toggleIsEdit = props.toggleIsEdit,
-      isHiddenAddress = props.isHiddenAddress;
+      isHiddenAddress = props.isHiddenAddress,
+      handleSendVerifyCode = props.handleSendVerifyCode,
+      verifyPhoneState = props.verifyPhoneState,
+      setFormState = props.setFormState;
 
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
+  var theme = (0, _styledComponents.useTheme)();
+
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       user = _useSession2[0].user;
 
+  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
+      _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
+      orderingTheme = _useOrderingTheme2[0];
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      edit = _useState2[0],
-      setEdit = _useState2[1];
+      willVerifyOtpState = _useState2[0],
+      setWillVerifyOtpState = _useState2[1];
+
+  var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, willVerifyOtpState),
+      _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
+      otpLeftTime = _useCountdownTimer2[0],
+      resetOtpLeftTime = _useCountdownTimer2[2];
 
   var _useState3 = (0, _react.useState)({
     open: false,
@@ -88,6 +112,9 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       setAlertState = _useState4[1];
 
   var inputRef = (0, _react.useRef)(null);
+  var showCustomerPicture = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.profile) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.picture) !== null && _orderingTheme$theme$3 !== void 0 && _orderingTheme$theme$3.hidden);
+  var showAddressList = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme2 = orderingTheme.theme) !== null && _orderingTheme$theme2 !== void 0 && (_orderingTheme$theme3 = _orderingTheme$theme2.profile) !== null && _orderingTheme$theme3 !== void 0 && (_orderingTheme$theme4 = _orderingTheme$theme3.components) !== null && _orderingTheme$theme4 !== void 0 && (_orderingTheme$theme5 = _orderingTheme$theme4.address_list) !== null && _orderingTheme$theme5 !== void 0 && _orderingTheme$theme5.hidden);
+  var userFormLayoutRow = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme6 = orderingTheme.theme) === null || _orderingTheme$theme6 === void 0 ? void 0 : (_orderingTheme$theme7 = _orderingTheme$theme6.profile) === null || _orderingTheme$theme7 === void 0 ? void 0 : (_orderingTheme$theme8 = _orderingTheme$theme7.components) === null || _orderingTheme$theme8 === void 0 ? void 0 : (_orderingTheme$theme9 = _orderingTheme$theme8.layout) === null || _orderingTheme$theme9 === void 0 ? void 0 : _orderingTheme$theme9.position) === 'row';
 
   var handleFiles = function handleFiles(files) {
     if (files.length === 1) {
@@ -116,7 +143,6 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
   };
 
   var toggleEditState = function toggleEditState(val) {
-    setEdit(val);
     toggleIsEdit();
 
     if (!val) {
@@ -137,17 +163,68 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     });
   };
 
+  var handleSendOtp = function handleSendOtp() {
+    var _formState$changes, _formState$changes2;
+
+    if (willVerifyOtpState && formState !== null && formState !== void 0 && (_formState$changes = formState.changes) !== null && _formState$changes !== void 0 && _formState$changes.cellphone && formState !== null && formState !== void 0 && (_formState$changes2 = formState.changes) !== null && _formState$changes2 !== void 0 && _formState$changes2.country_phone_code) {
+      var _formState$changes3 = formState === null || formState === void 0 ? void 0 : formState.changes,
+          cellphone = _formState$changes3.cellphone,
+          countryPhoneCode = _formState$changes3.country_phone_code;
+
+      resetOtpLeftTime();
+      handleSendVerifyCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode
+      });
+    }
+  };
+
   (0, _react.useEffect)(function () {
-    var _formState$changes;
+    var _formState$changes4;
 
-    if ((_formState$changes = formState.changes) !== null && _formState$changes !== void 0 && _formState$changes.photo) {
+    if ((_formState$changes4 = formState.changes) !== null && _formState$changes4 !== void 0 && _formState$changes4.photo) {
       var isImage = true;
       handleButtonUpdateClick(null, isImage);
     }
-  }, [(_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : _formState$changes2.photo]);
+  }, [(_formState$changes5 = formState.changes) === null || _formState$changes5 === void 0 ? void 0 : _formState$changes5.photo]);
+  (0, _react.useEffect)(function () {
+    var _verifyPhoneState$res;
+
+    if (verifyPhoneState !== null && verifyPhoneState !== void 0 && (_verifyPhoneState$res = verifyPhoneState.result) !== null && _verifyPhoneState$res !== void 0 && _verifyPhoneState$res.error) {
+      var _verifyPhoneState$res2;
+
+      setAlertState({
+        open: true,
+        content: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : (_verifyPhoneState$res2 = verifyPhoneState.result) === null || _verifyPhoneState$res2 === void 0 ? void 0 : _verifyPhoneState$res2.result) || [t('ERROR', 'Error')]
+      });
+    } else {
+      resetOtpLeftTime();
+    }
+  }, [verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : (_verifyPhoneState$res3 = verifyPhoneState.result) === null || _verifyPhoneState$res3 === void 0 ? void 0 : _verifyPhoneState$res3.result]);
   (0, _react.useEffect)(function () {
     toggleIsEdit();
   }, []);
+  (0, _react.useEffect)(function () {
+    handleSendOtp();
+  }, [willVerifyOtpState]);
+  (0, _react.useEffect)(function () {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        content: t('TIME_IS_UP_PLEASE_RESEND_CODE', 'Time is up. Please resend code again')
+      });
+    }
+  }, [otpLeftTime]);
+
+  var handleSendPhoneCode = function handleSendPhoneCode(values) {
+    setWillVerifyOtpState(false);
+    setFormState(_objectSpread(_objectSpread({}, formState), {}, {
+      changes: _objectSpread(_objectSpread({}, formState === null || formState === void 0 ? void 0 : formState.changes), {}, {
+        verification_code: values === null || values === void 0 ? void 0 : values.code
+      })
+    }));
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -160,13 +237,13 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     value: "account"
   }), /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.UserProfileContainer, {
     mbottom: isHiddenAddress && 25
-  }, /*#__PURE__*/_react.default.createElement(_styles.UserImage, {
+  }, showCustomerPicture && /*#__PURE__*/_react.default.createElement(_styles.UserImage, {
     className: "user-image"
   }, /*#__PURE__*/_react.default.createElement(_styles.Image, {
     onClick: function onClick() {
       return handleClickImage();
     },
-    isImage: (user === null || user === void 0 ? void 0 : user.photo) || (formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.photo) && !formState.result.error
+    isImage: (user === null || user === void 0 ? void 0 : user.photo) || (formState === null || formState === void 0 ? void 0 : (_formState$changes6 = formState.changes) === null || _formState$changes6 === void 0 ? void 0 : _formState$changes6.photo) && !formState.result.error
   }, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ExamineClick, {
     onFiles: handleFiles,
     childRef: function childRef(e) {
@@ -180,27 +257,31 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     },
     accept: "image/png, image/jpeg, image/jpg",
     disabled: formState.loading
-  }, (_formState$changes4 = formState.changes) !== null && _formState$changes4 !== void 0 && _formState$changes4.photo && formState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)) : !((_formState$changes5 = formState.changes) !== null && _formState$changes5 !== void 0 && _formState$changes5.photo) || ((_formState$result = formState.result) === null || _formState$result === void 0 ? void 0 : _formState$result.result) === 'Network Error' || formState.result.error ? user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement("img", {
+  }, (_formState$changes7 = formState.changes) !== null && _formState$changes7 !== void 0 && _formState$changes7.photo && formState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)) : !((_formState$changes8 = formState.changes) !== null && _formState$changes8 !== void 0 && _formState$changes8.photo) || ((_formState$result = formState.result) === null || _formState$result === void 0 ? void 0 : _formState$result.result) === 'Network Error' || formState.result.error ? user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement("img", {
     src: user === null || user === void 0 ? void 0 : user.photo,
     alt: "user image",
     width: "200px",
     height: "200px",
     loading: "lazy"
-  }) : /*#__PURE__*/_react.default.createElement(_styles.UploadImageIcon, null, /*#__PURE__*/_react.default.createElement(_BiImage.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('DRAG_DROP_IMAGE_HERE', 'Put your image here'))) : (formState === null || formState === void 0 ? void 0 : (_formState$changes6 = formState.changes) === null || _formState$changes6 === void 0 ? void 0 : _formState$changes6.photo) && formState.result.error && /*#__PURE__*/_react.default.createElement("img", {
-    src: formState === null || formState === void 0 ? void 0 : (_formState$changes7 = formState.changes) === null || _formState$changes7 === void 0 ? void 0 : _formState$changes7.photo,
+  }) : /*#__PURE__*/_react.default.createElement(_styles.UploadImageIcon, null, /*#__PURE__*/_react.default.createElement(_BiImage.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('DRAG_DROP_IMAGE_HERE', 'Put your image here'))) : (formState === null || formState === void 0 ? void 0 : (_formState$changes9 = formState.changes) === null || _formState$changes9 === void 0 ? void 0 : _formState$changes9.photo) && formState.result.error && /*#__PURE__*/_react.default.createElement("img", {
+    src: formState === null || formState === void 0 ? void 0 : (_formState$changes10 = formState.changes) === null || _formState$changes10 === void 0 ? void 0 : _formState$changes10.photo,
     alt: "user image",
     loading: "lazy"
   })))), /*#__PURE__*/_react.default.createElement(_styles.Camera, null, /*#__PURE__*/_react.default.createElement(_FiCamera.default, null))), /*#__PURE__*/_react.default.createElement(_styles.SideForm, {
     className: "user-form"
-  }, /*#__PURE__*/_react.default.createElement(_styles.WrapperForm, null, /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.WrapperForm, null, userFormLayoutRow ? /*#__PURE__*/_react.default.createElement(_UserFormDetails2.UserFormDetailsUI, _extends({}, props, {
     onCancel: toggleEditState,
-    onCloseProfile: function onCloseProfile() {
-      return setEdit(false);
-    },
-    isHiddenAddress: isHiddenAddress
-  }))))), ((userData === null || userData === void 0 ? void 0 : userData.addresses) || (user === null || user === void 0 ? void 0 : user.addresses)) && !isHiddenAddress && /*#__PURE__*/_react.default.createElement(_styles.SavedPlaces, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MY_ADDRESSES', 'My Saved places')), /*#__PURE__*/_react.default.createElement(_AddressList.AddressList, {
+    isOriginalLayout: true,
+    isHiddenAddress: isHiddenAddress,
+    isOldLayout: true
+  })) : /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
+    onCancel: toggleEditState,
+    isHiddenAddress: isHiddenAddress,
+    setWillVerifyOtpState: setWillVerifyOtpState
+  }))))), ((userData === null || userData === void 0 ? void 0 : userData.addresses) || (user === null || user === void 0 ? void 0 : user.addresses)) && !isHiddenAddress && showAddressList && /*#__PURE__*/_react.default.createElement(_styles.SavedPlaces, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MY_ADDRESSES', 'My Saved places')), /*#__PURE__*/_react.default.createElement(_AddressList.AddressList, {
     isModal: true,
-    addressList: user === null || user === void 0 ? void 0 : user.addresses
+    addressList: user === null || user === void 0 ? void 0 : user.addresses,
+    isProfile: true
   }))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
     title: t('PROFILE', 'Profile'),
     content: alertState.content,
@@ -213,7 +294,22 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       return closeAlert();
     },
     closeOnBackdrop: false
-  }), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
+  }), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    title: t('ENTER_VERIFICATION_CODE', 'Enter verification code'),
+    open: willVerifyOtpState,
+    width: "700px",
+    height: "420px",
+    onClose: function onClose() {
+      return setWillVerifyOtpState(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeForm.VerifyCodeForm, {
+    otpLeftTime: otpLeftTime,
+    credentials: formState === null || formState === void 0 ? void 0 : formState.changes,
+    handleSendOtp: handleSendOtp,
+    handleCheckPhoneCode: handleSendPhoneCode,
+    email: (userData === null || userData === void 0 ? void 0 : userData.email) || (user === null || user === void 0 ? void 0 : user.email),
+    isPhone: true
+  })), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
     return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
       key: i
     }, props));

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

@@ -0,0 +1,86 @@
+"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.VerifyCodeForm = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _orderingComponentsExternal = require("ordering-components-external");
+
+var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
+
+var _Buttons = require("../../styles/Buttons");
+
+var _utils = require("../../../../../utils");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var VerifyCodeForm = function VerifyCodeForm(props) {
+  var otpLeftTime = props.otpLeftTime,
+      handleSendOtp = props.handleSendOtp,
+      handleCheckPhoneCode = props.handleCheckPhoneCode,
+      credentials = props.credentials,
+      email = props.email,
+      isPhone = props.isPhone;
+
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+      _useLanguage2 = _slicedToArray(_useLanguage, 2),
+      t = _useLanguage2[1];
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      otpState = _useState2[0],
+      setOtpState = _useState2[1];
+
+  var numOtpInputs = 4;
+  (0, _react.useEffect)(function () {
+    if ((otpState === null || otpState === void 0 ? void 0 : otpState.length) === numOtpInputs) {
+      var cellphone = credentials.cellphone,
+          countryPhoneCode = credentials.country_phone_code;
+      handleCheckPhoneCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode,
+        code: otpState
+      });
+    }
+  }, [otpState]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("p", null, t('SENT_VERIFY_CODE_ON_EMAIL', 'We sent you a verication code on _email_').replace('_email_', isPhone ? credentials === null || credentials === void 0 ? void 0 : credentials.cellphone : email)), /*#__PURE__*/_react.default.createElement(_styles.DownTimer, null, (0, _utils.formatSeconds)(otpLeftTime)), /*#__PURE__*/_react.default.createElement(_styles.OtpWrapper, null, /*#__PURE__*/_react.default.createElement(_reactOtpInput.default, {
+    value: otpState,
+    onChange: function onChange(otp) {
+      return setOtpState(otp);
+    },
+    numInputs: numOtpInputs,
+    containerStyle: "otp-container",
+    inputStyle: "otp-input",
+    isInputNum: true,
+    shouldAutoFocus: true
+  })), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primaryContrast",
+    naked: true,
+    onClick: handleSendOtp
+  }, t('RESEND_CODE', 'Resend code')));
+};
+
+exports.VerifyCodeForm = VerifyCodeForm;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OtpWrapper = exports.DownTimer = exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _polished = require("polished");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0px auto;\n  max-width: 350px;\n\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 18px;\n  }\n\n  > button {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    padding: 0px;\n    transition: all 0.3s linear;\n\n    &:hover {\n      background-color: ", ";\n    }\n  }\n\n  @media (min-width: 576px) {\n    max-width: 500px;\n  }\n"])), function (props) {
+  return props.theme.colors.primaryContrast;
+});
+
+exports.Container = Container;
+
+var DownTimer = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 0px;\n  font-weight: 400;\n  font-size: 24px;\n  line-height: 36px;\n"])));
+
+exports.DownTimer = DownTimer;
+
+var OtpWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: 18px;\n\n  .otp-container {\n    display: flex;\n    justify-content: space-between;\n    margin: 20px 0px;\n    \n    .otp-input {\n      width: 50px !important;\n      height: 55px;\n      border: 1px solid #DEE2E6;\n      border-radius: 7.6px;\n      background-color: #FFF;\n      outline: none;\n      font-size: 20px;\n      font-weight: bold; \n\n      &:focus{\n        border-color: ", " !important;\n      }\n\n      &::placeholder,\n      &::-webkit-input-placeholder {\n        color: #B1BCCC;\n      }\n      &:-ms-input-placeholder {\n        color: #B1BCCC;\n      }\n    }\n  }\n\n  @media (min-width: 576px) {\n    .otp-container {\n      .otp-input {\n        width: 100px !important;\n        height: 105px;\n        font-size: 36px;\n      }\n    }\n  }\n"])), function () {
+  return (0, _polished.darken)(0.07, '#DEE2E6');
+});
+
+exports.OtpWrapper = OtpWrapper;

package/_modules/themes/four/src/components/AccordionDropdown/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionDropdown = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BiCaretUp = _interopRequireDefault(require("@meronex/icons/bi/BiCaretUp"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AccordionDropdown = function AccordionDropdown(props) {
+  var item = props.item,
+      spaceTab = props.spaceTab,
+      isOpen = props.isOpen,
+      isSelected = props.isSelected,
+      handleClickItem = props.handleClickItem,
+      IterateCategories = props.IterateCategories;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "accordion-item"
+  }, /*#__PURE__*/_react.default.createElement(_styles.CategoryTab, {
+    active: isSelected,
+    className: 'accordion-title',
+    categorySpace: spaceTab,
+    onClick: function onClick() {
+      return handleClickItem();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, item.name), /*#__PURE__*/_react.default.createElement(_BiCaretUp.default, {
+    className: "rotate",
+    style: {
+      transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)'
+    }
+  })), isOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: "accordion-content"
+  }, /*#__PURE__*/_react.default.createElement(IterateCategories, {
+    list: item.subcategories,
+    isSub: true,
+    currentCat: item
+  })));
+};
+
+exports.AccordionDropdown = AccordionDropdown;

package/_modules/themes/four/src/components/AccordionDropdown/styles.js

@@ -0,0 +1,31 @@
+"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.CategoryTab = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+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 CategoryTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 10px 15px;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: ", "px;\n  border-radius: 8px;\n  text-align: left;\n\n  span {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 80%;\n  }\n\n\n  ", "\n"])), function (props) {
+  var _props$categorySpace;
+
+  return (_props$categorySpace = props.categorySpace) !== null && _props$categorySpace !== void 0 ? _props$categorySpace : 0;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    font-weight: bold;\n  "])), function (props) {
+    return props.theme.colors.primaryContrast;
+  });
+});
+
+exports.CategoryTab = CategoryTab;

package/_modules/themes/four/src/components/BusinessBasicInformation/index.js

@@ -153,7 +153,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     onClick: function onClick() {
       return setOpenBusinessInformation(true);
     }
-  })))))), !isSkeleton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (categoryState.products.length !== 0 || searchValue) && !errorQuantityProducts && /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+  })))))), !errorQuantityProducts && /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
     onSearch: handleChangeSearch,
     search: searchValue,
     placeholder: t('SEARCH_PRODUCTS', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.SEARCH_PRODUCTS) || 'Search Products'),
@@ -166,10 +166,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     onChange: function onChange(val) {
       return handleChangeSortBy && handleChangeSortBy(val);
     }
-  }))) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 300,
-    height: 40
-  })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+  }))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     width: "70%",
     open: openBusinessInformation,
     onClose: setOpenBusinessInformation,

package/_modules/themes/four/src/components/BusinessProductsCategories/index.js

@@ -77,7 +77,8 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
     return /*#__PURE__*/_react.default.createElement(_styles.Tab, {
       key: i
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: 100
+      width: 150,
+      height: 25
     }));
   })))));
 };

package/_modules/themes/four/src/components/BusinessProductsCategories/layouts/groceries/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BusinessProductsCategories = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+
+var _orderingComponentsExternal = require("ordering-components-external");
+
+var _AccordionDropdown = require("../../../AccordionDropdown");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+var SPACE_CONTANT = 25;
+var categorySpace = {
+  1: 1,
+  2: 2 * SPACE_CONTANT,
+  3: 3 * SPACE_CONTANT,
+  4: 4 * SPACE_CONTANT,
+  5: 5 * SPACE_CONTANT
+};
+
+var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props) {
+  var isSkeleton = props.isSkeleton,
+      categories = props.categories,
+      handlerClickCategory = props.handlerClickCategory,
+      categorySelected = props.categorySelected,
+      featured = props.featured,
+      openCategories = props.openCategories;
+
+  var IterateCategories = function IterateCategories(_ref) {
+    var _category$level4, _category;
+
+    var list = _ref.list,
+        isSub = _ref.isSub,
+        currentCat = _ref.currentCat;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (list === null || list === void 0 ? void 0 : list.length) && (list === null || list === void 0 ? void 0 : list.map(function (category) {
+      var _category$id, _category$subcategori, _category$subcategori2, _category$level, _category$subcategori3, _category$level2, _category$level3;
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: (_category$id = category === null || category === void 0 ? void 0 : category.id) !== null && _category$id !== void 0 ? _category$id : category === null || category === void 0 ? void 0 : category.name
+      }, (category === null || category === void 0 ? void 0 : (_category$subcategori = category.subcategories) === null || _category$subcategori === void 0 ? void 0 : _category$subcategori.length) > 0 || isSub ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (category === null || category === void 0 ? void 0 : (_category$subcategori2 = category.subcategories) === null || _category$subcategori2 === void 0 ? void 0 : _category$subcategori2.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "accordion"
+      }, /*#__PURE__*/_react.default.createElement(_AccordionDropdown.AccordionDropdown, {
+        item: category,
+        isSelected: (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.id) === category.id,
+        isOpen: openCategories === null || openCategories === void 0 ? void 0 : openCategories.includes(category.id),
+        spaceTab: categorySpace[(_category$level = category === null || category === void 0 ? void 0 : category.level) !== null && _category$level !== void 0 ? _category$level : 1],
+        handleClickItem: function handleClickItem() {
+          return handlerClickCategory(category);
+        },
+        IterateCategories: IterateCategories
+      }))), isSub && !(category !== null && category !== void 0 && (_category$subcategori3 = category.subcategories) !== null && _category$subcategori3 !== void 0 && _category$subcategori3.length) && /*#__PURE__*/_react.default.createElement(_styles.CategoryTab, {
+        active: (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.id) === category.id,
+        className: "".concat(category.id === 'featured' ? 'special' : ''),
+        categorySpace: categorySpace[(_category$level2 = category === null || category === void 0 ? void 0 : category.level) !== null && _category$level2 !== void 0 ? _category$level2 : 1],
+        onClick: function onClick() {
+          return handlerClickCategory(category);
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", null, category.name))) : /*#__PURE__*/_react.default.createElement(_styles.CategoryTab, {
+        active: (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.id) === category.id,
+        className: "".concat(category.id === 'featured' ? 'special' : ''),
+        categorySpace: categorySpace[(_category$level3 = category === null || category === void 0 ? void 0 : category.level) !== null && _category$level3 !== void 0 ? _category$level3 : 1],
+        onClick: function onClick() {
+          return handlerClickCategory(category);
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", null, category.name)));
+    })), list && (list === null || list === void 0 ? void 0 : list.length) === 0 && isSub && /*#__PURE__*/_react.default.createElement(_styles.CategoryTab, {
+      active: (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.id) === category.id,
+      className: "".concat(category.id === 'featured' ? 'special' : ''),
+      categorySpace: categorySpace[(_category$level4 = (_category = category) === null || _category === void 0 ? void 0 : _category.level) !== null && _category$level4 !== void 0 ? _category$level4 : 1],
+      onClick: function onClick() {
+        return handlerClickCategory(category);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, currentCat.name)));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_styles.CategoriesContainer, {
+    className: "category-lists",
+    featured: featured
+  }, !isSkeleton ? /*#__PURE__*/_react.default.createElement(_styles.CategoriesWrap, {
+    variant: "primary"
+  }, (categories === null || categories === void 0 ? void 0 : categories.length) && /*#__PURE__*/_react.default.createElement(IterateCategories, {
+    list: categories
+  })) : /*#__PURE__*/_react.default.createElement(_styles.CategoriesWrap, {
+    variant: "primary"
+  }, _toConsumableArray(Array(4).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 100
+    }));
+  })));
+};
+
+var BusinessProductsCategories = function BusinessProductsCategories(props) {
+  var businessProductsCategoriesProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: BusinessProductsCategoriesUI
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessProductsCategories, businessProductsCategoriesProps);
+};
+
+exports.BusinessProductsCategories = BusinessProductsCategories;