ordering-ui-admin-external 1.43.0 → 1.43.2

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.removeQueryToUrl = exports.queryStringToObject = exports.orderStatus = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getOrderStatus = exports.getOrderStatuPickUp = exports.getMinutes = exports.getLocale = exports.getIconCard = exports.getHours = exports.getCurrenySymbol = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCountryPhoneCode = exports.findExitingCode = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.addQueryToUrl = exports.DriverTipsOptions = void 0;
+exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.removeQueryToUrl = exports.queryStringToObject = exports.orderStatus = exports.orderRejectCommentList = exports.optimizeImage = exports.getUniqueId = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getOrderStatus = exports.getOrderStatuPickUp = exports.getMinutes = exports.getLocale = exports.getIconCard = exports.getHours = exports.getCurrenySymbol = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.findExitingCountryPhoneCode = exports.findExitingCode = exports.fieldsToSort = exports.disableReasons = exports.convertHoursToMinutes = exports.convertHMS = exports.checkValidUrlFormat = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.addQueryToUrl = exports.DriverTipsOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FaCcMastercard = _interopRequireDefault(require("@meronex/icons/fa/FaCcMastercard"));
 var _FaCcVisa = _interopRequireDefault(require("@meronex/icons/fa/FaCcVisa"));
@@ -856,4 +856,41 @@ var removeQueryToUrl = exports.removeQueryToUrl = function removeQueryToUrl(remo
   } else {
     history.replaceState(null, '', "".concat(location.pathname));
   }
+};
+var disableReasons = exports.disableReasons = function disableReasons() {
+  var _useLanguage3 = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage4 = _slicedToArray(_useLanguage3, 2),
+    t = _useLanguage4[1];
+  var disableReasonDictionary = {
+    SALE_DIVIATION: t('SALE_DIVIATION', 'Sale Diviation'),
+    MOTORCYCLE_FAILURE: t('MOTORCYCLE_FAILURE', 'Motorcycle failure'),
+    NO_DRIVERS: t('NO_DRIVERS', 'No drivers'),
+    OVEN_FAILURE: t('OVEN_FAILURE', 'Oven failure'),
+    EXCESS_ORDERS: t('EXCESS_ORDERS', 'Excess orders'),
+    NO_ELECTRIC_POWER: t('NO_ELECTRIC_POWER', 'No electric power'),
+    NO_GAS: t('NO_GAS', 'No gas'),
+    CONECTION_FAILURE: t('CONECTION_FAILURE', 'Conection failure'),
+    NO_WATER: t('NO_WATER', 'No water'),
+    SYSTEM_FAILURE: t('SYSTEM_FAILURE', 'System failure'),
+    STREETS_CLOSED: t('STREETS_CLOSED', 'Streets closed'),
+    NO_SERVICE: t('NO_SERVICE', 'No service'),
+    UNSAFETY: t('UNSAFETY', 'Unsafety'),
+    MAINTENANCE_IN_STORE: t('MAINTENANCE_IN_STORE', 'Maintenance in store'),
+    RAINING: t('RAINING', 'Raining'),
+    STORE_EVENT: t('STORE_EVENT', 'Store event'),
+    PROBLEM_WITH_POWER: t('PROBLEM_WITH_POWER', 'Problem with power'),
+    DRIVER_ACCIDENT: t('DRIVER_ACCIDENT', 'Driver accident'),
+    MAINTENANCE_SYSTEM_IN_STORE: t('MAINTENANCE_SYSTEM_IN_STORE', 'Maintenance system in store'),
+    PROBLEM_WITH_GAS: t('PROBLEM_WITH_GAS', 'Problem with gas'),
+    ROLLER_FAILURE: t('ROLLER_FAILURE', 'Roller failure'),
+    WEATHER: t('WEATHER', 'Weather'),
+    GAS_LEAK: t('GAS_LEAK', 'Gas leak'),
+    MANIFESTATION: t('MANIFESTATION', 'Manifestation'),
+    LACK_OF_STAFF: t('LACK_OF_STAFF', 'Lack of Staff'),
+    MIXER_FAILURE: t('MIXER_FAILURE', 'Mixer failure'),
+    AUTOMATICS: t('AUTOMATICS', 'Automatics'),
+    PRODUCT_SHORTAGE: t('PRODUCT_SHORTAGE', 'Product shortage'),
+    TERMINAL_FAILURES: t('TERMINAL_FAILURES', 'Terminal failures')
+  };
+  return disableReasonDictionary;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.0",
+  "version": "1.43.2",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.43.0",
+    "ordering-components-admin-external": "1.43.1",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Delivery/DriversGroupGeneralForm/index.js

@@ -139,8 +139,8 @@ export const DriversGroupGeneralForm = (props) => {
               >
                 <Checkbox
                   value={driverManager?.id}
-                  checked={selectedDriverManager.includes(driverManager.id)}
-                  onChange={e => handleSelectDriverManager(driverManager.id, e.target.checked)}
+                  checked={selectedDriverManager?.includes(driverManager?.id)}
+                  onChange={e => handleSelectDriverManager(driverManager?.id, e.target.checked)}
                 />
                 <WrapperImage>
                   {driverManager?.photo ? (

package/src/components/Orders/AllInOne/index.js

@@ -221,6 +221,7 @@ const OrdersManagerUI = (props) => {
           <TopContent>
             <DriversContainer>
               <DriversManager
+                filterValues={filterValues}
                 setMapsData={setMapsData}
                 handleUpdateAssignedOrders={handleUpdateAssignedOrders}
                 disableSocketRoomDriver

package/src/components/Orders/Messages/index.js

@@ -104,7 +104,6 @@ export const MessagesUI = (props) => {
   const chatDisabled = previousStatus.includes(order?.status)
   const [{ configs }] = useConfig()
   const showExternalId = configs?.change_order_id?.value === '1'
-  const hideLogBookMessages = configs?.order_logbook_enabled?.value === '0'
 
   const adminMessageList = [
     { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
@@ -472,7 +471,7 @@ export const MessagesUI = (props) => {
                   <React.Fragment key={message.id}>
                     {history && tabActive === 'order_history' && (
                       <>
-                        {message.type === 0 && !hideLogBookMessages && (
+                        {message.type === 0 && (
                           <MessageConsole key={message.id}>
                             <BubbleConsole>
                               <p
@@ -492,7 +491,7 @@ export const MessagesUI = (props) => {
                             </BubbleConsole>
                           </MessageConsole>
                         )}
-                        {message.type === 1 && !hideLogBookMessages && (
+                        {message.type === 1 && (
                           <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
                             {getHistoryComment(message) && (
                               <BubbleConsole>
@@ -515,7 +514,7 @@ export const MessagesUI = (props) => {
                     )}
                     {isChat && (
                       <>
-                        {message.type === 0 && !hideLogBookMessages && (
+                        {message.type === 0 && (
                           <MessageConsole key={message.id}>
                             <BubbleConsole>
                               <p>
@@ -534,7 +533,7 @@ export const MessagesUI = (props) => {
                             </BubbleConsole>
                           </MessageConsole>
                         )}
-                        {message.type === 1 && !hideLogBookMessages && (
+                        {message.type === 1 && (
                           <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
                             {getHistoryComment(message) && (
                               <BubbleConsole>

package/src/components/Orders/OrdersFilterGroup/index.js

@@ -64,7 +64,8 @@ const OrdersFilterGroupUI = (props) => {
     handleDeleteMetafield,
     handleChangeExternalId,
     handleChangeChildFilterValue,
-    handleChangeGroupUnassigned
+    handleChangeGroupUnassigned,
+    handleFilterValues
   } = props
 
   const [, t] = useLanguage()
@@ -73,7 +74,8 @@ const OrdersFilterGroupUI = (props) => {
   const [filterApplied, setFilterApplied] = useState(false)
   const metafieldRef = useRef()
   const [{ configs }] = useConfig()
-  const configFilter = configs?.filter_order_options?.value.split('|').map(value =>(value)) || []
+  const [_filterValues] = useFilterValues()
+  const configFilter = configs?.filter_order_options?.value.split('|').map(value => (value)) || []
 
   const logisticStatusList = [
     { value: 0, content: <Option>{t('PENDING', 'Pending')}<LogisticStatusDot status={0} /></Option> },
@@ -90,6 +92,7 @@ const OrdersFilterGroupUI = (props) => {
 
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
+    handleFilterValues(filterValues)
     setFilterModalOpen(false)
   }
 
@@ -132,10 +135,10 @@ const OrdersFilterGroupUI = (props) => {
 
   useEffect(() => {
     let _filterApplied = false
-    if (Object.keys(filterValues).length === 0) {
+    if (Object.keys(_filterValues).length === 0) {
       _filterApplied = false
     } else {
-      Object.values(filterValues).forEach(value => {
+      Object.values(_filterValues).forEach(value => {
         if (Array.isArray(value)) {
           if (value.length > 0) _filterApplied = true
         } else {
@@ -144,7 +147,7 @@ const OrdersFilterGroupUI = (props) => {
       })
     }
     setFilterApplied(_filterApplied)
-  }, [filterValues])
+  }, [_filterValues])
 
   return (
     <>
@@ -397,13 +400,19 @@ const OrdersFilterGroupUI = (props) => {
 
 export const OrdersFilterGroup = (props) => {
   const [filterValues, { handleFilterValues }] = useFilterValues()
+  const [savedFilterValues, setSavedFilterValues] = useState(filterValues)
+
+  useEffect(() => {
+    setSavedFilterValues(filterValues)
+  }, [filterValues])
 
   const FilterControlProps = {
     ...props,
     UIComponent: OrdersFilterGroupUI,
     driverGroupList: props.driverGroupList,
-    filterValues: filterValues,
-    setFilterValues: handleFilterValues
+    filterValues: savedFilterValues,
+    setFilterValues: setSavedFilterValues,
+    handleFilterValues: handleFilterValues
   }
   return (
     <>

package/src/components/Orders/OrdersHeaderFilterGroup/index.js

@@ -7,6 +7,7 @@ import {
   WrapperRow
 } from './styles'
 import { useFilterValues } from '../../../contexts/FilterValuesContext'
+import { SearchBar } from '../../Shared'
 
 const OrdersHeaderFilterGroupUI = (props) => {
   const {
@@ -48,12 +49,15 @@ const OrdersHeaderFilterGroupUI = (props) => {
     <>
       <WrapperRow>
         {!loading && configFilter.includes('external_id') && (
-          <Input
-            type='text'
+          <SearchBar
             placeholder={dictionary?.EXTERNAL_ID ?? 'External Id'}
-            autoComplete='off'
-            value={filterValues?.externalId || ''}
             onChange={handleChangeExternalId}
+            search={filterValues?.externalId || ''}
+            isCustomLayout
+            hideSearchIcon
+            lazyLoad
+            CustomInput={Input}
+            onSearch={(value) => handleChangeExternalId({ target: { value } })}
           />
         )}
         {!loading && configFilter.includes('driver') && (

package/src/components/Orders/OrdersHeaderFilterGroup/styles.js

@@ -32,10 +32,9 @@ export const WrapperRow = styled.div`
     z-index: 100;
   }
 
-  > input {
+  input {
     width: 100%;
     height: 47px;
-    margin-bottom: 20px;
     padding: 10px 25px;
     box-sizing: border-box;
     &::-webkit-outer-spin-button,

package/src/components/Shared/SearchBar/index.js

@@ -10,7 +10,9 @@ export const SearchBar = (props) => {
     search,
     placeholder,
     lazyLoad,
-    customClass
+    customClass,
+    hideSearchIcon,
+    CustomInput
   } = props
 
   let timeout = null
@@ -52,12 +54,23 @@ export const SearchBar = (props) => {
     }
   }, [search])
 
+  const inputProps = {
+    type: 'text',
+    ref: el,
+    name: 'search',
+    placeholder: placeholder,
+    autoComplete: 'off'
+  }
   return (
-    <SearchContainer className={customClass || ''}>
-      <input type='text' ref={el} name='search' placeholder={placeholder} autoComplete='off' />
+    <SearchContainer className={customClass || ''} isCustomInput={!!CustomInput}>
+      {CustomInput ? (
+        <CustomInput {...inputProps} />
+      ) : (
+        <input {...inputProps} />
+      )}
       {el.current?.value
         ? <XCircle className='close' onClick={handleClear} />
-        : <Search />}
+        : !hideSearchIcon && <Search />}
     </SearchContainer>
   )
 }

package/src/components/Shared/SearchBar/styles.js

@@ -6,23 +6,25 @@ export const SearchContainer = styled.div`
   align-items: center;
 
   > input {
-    width: 100%;
-    border: 1px solid ${props => props.theme.colors.borderColor} !important;
-    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-    outline: none;
-    padding: 10px 15px;
-    border-radius: 8px;
-    ${props => props.theme?.rtl ? css`
-      padding-left: 40px;
-    ` : css`
-      padding-right: 40px;
-    `}
-    font-size: 14px;
-    color: ${props => props.theme.colors.headingColor};
+    ${({ isCustomInput }) => !isCustomInput && css`
+      width: 100%;
+      border: 1px solid ${props => props.theme.colors.borderColor} !important;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+      outline: none;
+      padding: 10px 15px;
+      border-radius: 8px;
+      ${props => props.theme?.rtl ? css`
+        padding-left: 40px;
+      ` : css`
+        padding-right: 40px;
+      `}
+      font-size: 14px;
+      color: ${props => props.theme.colors.headingColor};
 
-    &::placeholder {
-      color: #909BA9;
-    }
+      &::placeholder {
+        color: #909BA9;
+      }
+    `}
   }
 
   svg {

package/src/components/Stores/BusinessInformation/index.js

@@ -3,9 +3,9 @@ import { useForm } from 'react-hook-form'
 import { useLanguage, DragAndDrop, ExamineClick, BusinessFormDetails as BusinessFormDetailsController, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, Modal, ImageCrop, ColorPicker } from '../../Shared'
-import { bytesConverter, shape, ribbonValues } from '../../../utils'
+import { bytesConverter, shape, ribbonValues, disableReasons } from '../../../utils'
 import BiImage from '@meronex/icons/bi/BiImage'
-import { Button, Input, Switch } from '../../../styles'
+import { Button, Input, Switch, SecondSelect } from '../../../styles'
 import { RecordCircleFill, Circle, Facebook, Instagram, Tiktok, Pinterest, Whatsapp, Snapchat } from 'react-bootstrap-icons'
 
 import {
@@ -31,7 +31,8 @@ import {
   SocialWrapper,
   SocialItemWrapper,
   SocialItemHeader,
-  SocialItemContent
+  SocialItemContent,
+  Option
 } from './styles'
 
 const BusinessInformationUI = (props) => {
@@ -42,7 +43,8 @@ const BusinessInformationUI = (props) => {
     handleChangeInput,
     handleButtonUpdateClick,
     handleChangeSwtich,
-    handleChangeRibbon
+    handleChangeRibbon,
+    handleChangeSelectedOption
   } = props
 
   const formMethods = useForm()
@@ -53,6 +55,7 @@ const BusinessInformationUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
   const priceSymbol = configs?.format_number_currency?.value?.trim()
+  const disableReasonDictionary = disableReasons()
 
   const priceList = [
     { key: '1', value: `${priceSymbol}` },
@@ -62,6 +65,156 @@ const BusinessInformationUI = (props) => {
     { key: '5', value: `${Array(5).fill(priceSymbol).join('')}` }
   ]
 
+  const reasonOptionList = [
+    {
+      value: 'default',
+      content: <Option padding='0px'><span>{t('SELECT_OPTION', 'Select option')}</span></Option>,
+      color: 'primary',
+      disabled: true,
+      showDisable: true
+    },
+    {
+      value: disableReasonDictionary.SALE_DIVIATION,
+      content: <Option padding='0px'><span>{disableReasonDictionary.SALE_DIVIATION}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.MOTORCYCLE_FAILURE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.MOTORCYCLE_FAILURE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.NO_DRIVERS,
+      content: <Option padding='0px'><span>{disableReasonDictionary.NO_DRIVERS}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.EXCESS_ORDERS,
+      content: <Option padding='0px'><span>{disableReasonDictionary.EXCESS_ORDERS}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.NO_ELECTRIC_POWER,
+      content: <Option padding='0px'><span>{disableReasonDictionary.NO_ELECTRIC_POWER}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.NO_GAS,
+      content: <Option padding='0px'><span>{disableReasonDictionary.NO_GAS}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.CONECTION_FAILURE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.CONECTION_FAILURE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.NO_WATER,
+      content: <Option padding='0px'><span>{disableReasonDictionary.NO_WATER}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.SYSTEM_FAILURE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.SYSTEM_FAILURE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.STREETS_CLOSED,
+      content: <Option padding='0px'><span>{disableReasonDictionary.STREETS_CLOSED}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.NO_SERVICE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.NO_SERVICE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.UNSAFETY,
+      content: <Option padding='0px'><span>{disableReasonDictionary.UNSAFETY}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.MAINTENANCE_IN_STORE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.MAINTENANCE_IN_STORE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.RAINING,
+      content: <Option padding='0px'><span>{disableReasonDictionary.RAINING}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.STORE_EVENT,
+      content: <Option padding='0px'><span>{disableReasonDictionary.STORE_EVENT}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.PROBLEM_WITH_POWER,
+      content: <Option padding='0px'><span>{disableReasonDictionary.PROBLEM_WITH_POWER}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.DRIVER_ACCIDENT,
+      content: <Option padding='0px'><span>{disableReasonDictionary.DRIVER_ACCIDENT}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.MAINTENANCE_SYSTEM_IN_STORE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.MAINTENANCE_SYSTEM_IN_STORE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.PROBLEM_WITH_GAS,
+      content: <Option padding='0px'><span>{disableReasonDictionary.PROBLEM_WITH_GAS}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.ROLLER_FAILURE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.ROLLER_FAILURE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.WEATHER,
+      content: <Option padding='0px'><span>{disableReasonDictionary.WEATHER}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.GAS_LEAK,
+      content: <Option padding='0px'><span>{disableReasonDictionary.GAS_LEAK}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.MANIFESTATION,
+      content: <Option padding='0px'><span>{disableReasonDictionary.MANIFESTATION}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.LACK_OF_STAFF,
+      content: <Option padding='0px'><span>{disableReasonDictionary.LACK_OF_STAFF}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.MIXER_FAILURE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.MIXER_FAILURE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.AUTOMATICS,
+      content: <Option padding='0px'><span>{disableReasonDictionary.AUTOMATICS}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.PRODUCT_SHORTAGE,
+      content: <Option padding='0px'><span>{disableReasonDictionary.PRODUCT_SHORTAGE}</span></Option>,
+      color: 'primary'
+    },
+    {
+      value: disableReasonDictionary.TERMINAL_FAILURES,
+      content: <Option padding='0px'><span>{disableReasonDictionary.TERMINAL_FAILURES}</span></Option>,
+      color: 'primary'
+    }
+  ]
+
   const socialOriginalURL = {
     facebook: 'https://www.facebook.com/',
     instagram: 'https://www.instagram.com/',
@@ -192,7 +345,7 @@ const BusinessInformationUI = (props) => {
                   ? businessState?.business?.header &&
                   (<img src={businessState?.business?.header} alt='header image' loading='lazy' />)
                   : formState?.changes?.header &&
-                  <img src={formState?.changes?.header} alt='header image' loading='lazy' />
+                    <img src={formState?.changes?.header} alt='header image' loading='lazy' />
                 )}
               <UploadImageIconContainer>
                 <UploadImageIcon>
@@ -224,7 +377,7 @@ const BusinessInformationUI = (props) => {
                   ? businessState?.business?.logo &&
                   (<img src={businessState?.business?.logo} alt='logo image' loading='lazy' />)
                   : formState?.changes?.logo &&
-                  <img src={formState?.changes?.logo} alt='logo image' loading='lazy' />
+                    <img src={formState?.changes?.logo} alt='logo image' loading='lazy' />
                 )}
               <UploadImageIconContainer small>
                 <UploadImageIcon small>
@@ -373,14 +526,25 @@ const BusinessInformationUI = (props) => {
         }
         {(businessState?.business?.enabled === false) && (
           <InputWrapper>
-            <label>{t('DISABLED_REASON', 'Disabled reason')} <span>({t('MAX_60_CHAR', 'Max 60 Characters')})</span></label>
-            <Input
+            <label>{t('DISABLED_REASON', 'Disabled reason')}</label>
+            {/* <span>({t('MAX_60_CHAR', 'Max 60 Characters')})</span> */}
+            {/* <Input
               name='disabled_reason'
               defaultValue={formState?.changes?.disabled_reason ?? businessState?.business?.disabled_reason}
               onChange={handleChangeInput}
               disabled={formState.loading}
               autoComplete='off'
               maxLength={60}
+            /> */}
+            <SecondSelect
+              defaultValue={formState?.changes?.disabled_reason ?? businessState?.business?.disabled_reason ?? 'default'}
+              options={reasonOptionList}
+              optionInnerMaxHeight='200px'
+              onChange={(value) => handleChangeSelectedOption('disabled_reason', value)}
+              // isShowSearchBar
+              // searchBarPlaceholder={t('SEARCH', 'Search')}
+              // searchValue={searchValue}
+              // handleChangeSearch={handleSearch}
             />
           </InputWrapper>
         )}

package/src/components/Stores/BusinessInformation/styles.js

@@ -369,3 +369,45 @@ export const SocialItemContent = styled.div`
     border-radius: 8px;
   }
 `
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: ${({ padding }) => padding || '5px 10px'};
+  white-space: nowrap;
+  ${({ isPhoneView }) => isPhoneView && css`
+    width: 100%;
+  `}
+  ${({ isRemove }) => isRemove && css`
+    color: ${props => props.theme.colors.danger};
+    padding: 3px 10px;
+    font-size: 14px;
+  `}
+
+  img {
+    width: 45px;
+    border-radius: 8px;
+  }
+
+  ${({ small }) => small && css`
+    padding: ${({ padding }) => padding || '5px 0px'};
+    img {
+      width: 25px;
+    }
+  `}
+
+  span {
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 350px;
+  }
+
+  @media (max-width: 576px) {
+    padding: ${({ padding }) => padding || '5px 0px'};
+    span {
+      max-width: 280px;
+    }
+  }
+`

package/src/utils/index.js

@@ -586,3 +586,39 @@ export const removeQueryToUrl = (removeKeys) => {
     history.replaceState(null, '', `${location.pathname}`)
   }
 }
+
+export const disableReasons = () => {
+  const [, t] = useLanguage()
+  const disableReasonDictionary = {
+    SALE_DIVIATION: t('SALE_DIVIATION', 'Sale Diviation'),
+    MOTORCYCLE_FAILURE: t('MOTORCYCLE_FAILURE', 'Motorcycle failure'),
+    NO_DRIVERS: t('NO_DRIVERS', 'No drivers'),
+    OVEN_FAILURE: t('OVEN_FAILURE', 'Oven failure'),
+    EXCESS_ORDERS: t('EXCESS_ORDERS', 'Excess orders'),
+    NO_ELECTRIC_POWER: t('NO_ELECTRIC_POWER', 'No electric power'),
+    NO_GAS: t('NO_GAS', 'No gas'),
+    CONECTION_FAILURE: t('CONECTION_FAILURE', 'Conection failure'),
+    NO_WATER: t('NO_WATER', 'No water'),
+    SYSTEM_FAILURE: t('SYSTEM_FAILURE', 'System failure'),
+    STREETS_CLOSED: t('STREETS_CLOSED', 'Streets closed'),
+    NO_SERVICE: t('NO_SERVICE', 'No service'),
+    UNSAFETY: t('UNSAFETY', 'Unsafety'),
+    MAINTENANCE_IN_STORE: t('MAINTENANCE_IN_STORE', 'Maintenance in store'),
+    RAINING: t('RAINING', 'Raining'),
+    STORE_EVENT: t('STORE_EVENT', 'Store event'),
+    PROBLEM_WITH_POWER: t('PROBLEM_WITH_POWER', 'Problem with power'),
+    DRIVER_ACCIDENT: t('DRIVER_ACCIDENT', 'Driver accident'),
+    MAINTENANCE_SYSTEM_IN_STORE: t('MAINTENANCE_SYSTEM_IN_STORE', 'Maintenance system in store'),
+    PROBLEM_WITH_GAS: t('PROBLEM_WITH_GAS', 'Problem with gas'),
+    ROLLER_FAILURE: t('ROLLER_FAILURE', 'Roller failure'),
+    WEATHER: t('WEATHER', 'Weather'),
+    GAS_LEAK: t('GAS_LEAK', 'Gas leak'),
+    MANIFESTATION: t('MANIFESTATION', 'Manifestation'),
+    LACK_OF_STAFF: t('LACK_OF_STAFF', 'Lack of Staff'),
+    MIXER_FAILURE: t('MIXER_FAILURE', 'Mixer failure'),
+    AUTOMATICS: t('AUTOMATICS', 'Automatics'),
+    PRODUCT_SHORTAGE: t('PRODUCT_SHORTAGE', 'Product shortage'),
+    TERMINAL_FAILURES: t('TERMINAL_FAILURES', 'Terminal failures')
+  }
+  return disableReasonDictionary
+}