ordering-ui-admin-external 1.3.1 → 1.3.3

package/src/components/Marketing/CampaignList/styles.js

@@ -25,14 +25,6 @@ export const Container = styled.div`
       max-height: calc(100vh - 345px);
     `}
   }
-
-  ${({ isDisabledFeature }) => isDisabledFeature && css`
-    opacity: 0.5;
-    cursor: not-allowed;
-    > table {
-      pointer-events: none;
-    }
-  `}
 `
 
 export const Table = styled.table`
@@ -208,12 +200,4 @@ export const AddNewPageButton = styled.div`
   &:hover {
     color: ${props => props.theme.colors.primary};
   }
-
-  ${({ isDisabledFeature }) => isDisabledFeature && css`
-    opacity: 0.5;
-    cursor: not-allowed;
-    &:hover {
-      color: ${props => props.theme.colors.lightGray};
-    }
-  `}
 `

package/src/components/Marketing/CampaignListing/index.js

@@ -1,10 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { SideBar } from '../../Shared'
 import { CampaignDetail } from '../CampaignDetail'
 import { CampaignHeader } from '../CampaignHeader'
 import { CampaignList } from '../CampaignList'
-import { useConfig, useSession, CampaignListing as CampaignListingController } from 'ordering-components-admin-external'
-import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
+import { CampaignListing as CampaignListingController } from 'ordering-components-admin-external'
 import {
   CampaignListingContainer
 } from './styles'
@@ -12,10 +11,6 @@ import {
 export const CampaignListingUI = (props) => {
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedCampaign, setSelectedCampaign] = useState(null)
-  const [{ configs }] = useConfig()
-  const [{ user }] = useSession()
-  const featureName = 'Marketing_dashboard'
-  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
 
   const handleOpenDetail = (action) => {
     setSelectedCampaign(action)
@@ -27,30 +22,19 @@ export const CampaignListingUI = (props) => {
     setSelectedCampaign(null)
   }
 
-  useEffect(() => {
-    if (configs && Object.keys(configs).length > 0 && user) {
-      if (!Object.keys(configs).includes(featureName) && user?.level === 0) {
-        setIsDisabledFeature(false)
-      }
-    }
-  }, [configs])
-
   return (
     <>
       <CampaignListingContainer>
         <CampaignHeader
           {...props}
           handleOpenDetail={handleOpenDetail}
-          isDisabledFeature={isDisabledFeature}
         />
         <CampaignList
           {...props}
           handleOpenDetail={handleOpenDetail}
           selectedCampaign={selectedCampaign}
-          isDisabledFeature={isDisabledFeature}
         />
       </CampaignListingContainer>
-      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {isOpenDetail && (
         <SideBar
           sidebarId='campaignDetail'

package/src/components/OrderingProducts/OrderingProductDetails/index.js

@@ -27,7 +27,7 @@ const OrderingProductDetailsUI = (props) => {
 
   const tabs = [
     { key: 'general', content: t('GENERAL', 'General') },
-    // { key: 'theme', content: t('THEME', 'Theme') }
+    { key: 'theme', content: t('THEME', 'Theme') }
   ]
 
   const moreOptions = [

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

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, CountryList as CountryListControler } from 'ordering-components-admin-external'
+import { useLanguage } from 'ordering-components-admin-external'
 import { MultiSelect } from '../../../styles/MultiSelect'
-import { PlaceholderTitle, Option, SkeletonWrapper } from './styles'
-import Skeleton from 'react-loading-skeleton'
+import { PlaceholderTitle, Option } from './styles'
+import { currencyList } from '../../../config/constants'
 
-const CurrencyFilterUI = (props) => {
+export const CurrencyFilter = (props) => {
   const {
-    countriesState,
     filterValues,
     handleChangeCurrency
   } = props
@@ -23,46 +22,28 @@ const CurrencyFilterUI = (props) => {
 
   useEffect(() => {
     const _countryList = []
-    if (!countriesState.loading) {
-      const _groupsOption = countriesState.countries.map((country) => {
-        return {
-          value: country.code,
-          content: (
-            <Option>{country.code}</Option>
-          )
-        }
-      })
-
-      for (const option of _groupsOption) {
-        _countryList.push(option)
+    const _groupsOption = currencyList.map((country) => {
+      return {
+        value: country.value,
+        content: (
+          <Option>{country.text}</Option>
+        )
       }
+    })
+
+    for (const option of _groupsOption) {
+      _countryList.push(option)
     }
     setCountryTypes(_countryList)
-  }, [countriesState])
+  }, [currencyList])
 
   return (
-    <>
-      {!countriesState.loading ? (
-        <MultiSelect
-          placeholder={placeholder}
-          defaultValue={filterValues.currency}
-          options={countryTypes}
-          onChange={(code) => handleChangeCurrency(code)}
-          optionInnerMaxHeight='200px'
-        />
-      ) : (
-        <SkeletonWrapper>
-          <Skeleton style={{ height: '57px' }} />
-        </SkeletonWrapper>
-      )}
-    </>
+    <MultiSelect
+      placeholder={placeholder}
+      defaultValue={filterValues.currency}
+      options={countryTypes}
+      onChange={(code) => handleChangeCurrency(code)}
+      optionInnerMaxHeight='200px'
+    />
   )
 }
-
-export const CurrencyFilter = (props) => {
-  const countryFilterProps = {
-    ...props,
-    UIComponent: CurrencyFilterUI
-  }
-  return <CountryListControler {...countryFilterProps} />
-}

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

@@ -86,7 +86,7 @@ export const OrderBill = (props) => {
           <tr>
             <td>{t('SUBTOTAL', 'Subtotal')}</td>
             <td>
-              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
+              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
             </td>
           </tr>
           {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -99,7 +99,7 @@ export const OrderBill = (props) => {
               ) : (
                 <td>{t('DISCOUNT', 'Discount')}</td>
               )}
-              <td>- {parsePrice(order?.summary?.discount ?? order?.discount)}</td>
+              <td>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</td>
             </tr>
           )}
           {
@@ -112,7 +112,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount)}
+                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
                 </td>
               </tr>
             ))
@@ -121,9 +121,9 @@ export const OrderBill = (props) => {
             <tr>
               <td>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</td>
               {order?.tax_type === 1 ? (
-                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</td>
+                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</td>
               ) : (
-                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</td>
+                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</td>
               )}
             </tr>
           )}
@@ -134,7 +134,7 @@ export const OrderBill = (props) => {
                   {t('TAX', 'Tax')}
                   <span>{`(${verifyDecimals(order?.tax, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.tax ?? 0)}</td>
+                <td>{parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}</td>
               </tr>
             )
           }
@@ -145,7 +145,7 @@ export const OrderBill = (props) => {
                   {t('SERVICE_FEE', 'Service fee')}
                   <span>{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.service_fee ?? 0)}</td>
+                <td>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</td>
               </tr>
             )
           }
@@ -156,7 +156,7 @@ export const OrderBill = (props) => {
                   {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</td>
+                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</td>
               </tr>
             ))
           }
@@ -167,7 +167,7 @@ export const OrderBill = (props) => {
                   {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                 </td>
-                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</td>
+                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</td>
               </tr>
             ))
           }
@@ -181,7 +181,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount)}
+                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
                 </td>
               </tr>
             ))
@@ -189,7 +189,7 @@ export const OrderBill = (props) => {
           {order?.summary?.delivery_price > 0 && (
             <tr>
               <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
-              <td>{parsePrice(order?.summary?.delivery_price)}</td>
+              <td>{parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}</td>
             </tr>
           )}
           {
@@ -202,7 +202,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount)}
+                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
                 </td>
               </tr>
             ))
@@ -218,7 +218,7 @@ export const OrderBill = (props) => {
                     <span>{`(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}</span>
                   )}
               </td>
-              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</td>
+              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</td>
             </tr>
           )}
         </tbody>
@@ -227,7 +227,7 @@ export const OrderBill = (props) => {
         <tbody>
           <tr>
             <td>{t('TOTAL', 'Total')}</td>
-            <td>{parsePrice(order?.summary?.total || order?.total, { currencyPosition: 'left' })}</td>
+            <td>{parsePrice(order?.summary?.total || order?.total, { currencyPosition: 'left', currency: order?.currency })}</td>
           </tr>
         </tbody>
       </table>
@@ -246,7 +246,7 @@ export const OrderBill = (props) => {
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
                     : event?.paymethod?.name}
                 </td>
-                <td>-{parsePrice(event?.amount)}</td>
+                <td>-{parsePrice(event?.amount, { currency: order?.currency })}</td>
               </tr>
             ))}
           </tbody>

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

@@ -388,6 +388,7 @@ const OrderDetailsUI = (props) => {
                 <ProductItemAccordion
                   key={product.id}
                   product={product}
+                  currency={order?.currency}
                 />
               ))}
             </OrderProducts>

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

@@ -58,7 +58,7 @@ export const OrdersTable = (props) => {
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [{ parseDate, optimizeImage, getTimeAgo }] = useUtils()
+  const [{ parseDate, optimizeImage, getTimeAgo, parsePrice }] = useUtils()
   const [isAllChecked, setIsAllChecked] = useState(false)
   const [, setCurrentTime] = useState()
   const [dragOverd, setDragOverd] = useState('')
@@ -667,7 +667,7 @@ export const OrdersTable = (props) => {
                           <td className='orderPrice' key={`total${i}-${index}`}>
                             <div className='info'>
                               {allowColumns?.total?.visable && (
-                                <p className='bold'>{order?.summary?.total} {order?.currency}</p>
+                                <p className='bold'>{parsePrice(order?.summary?.total, { currency: order?.currency })}</p>
                               )}
                               {!(order?.status === 1 || order?.status === 11 || order?.status === 2 || order?.status === 5 || order?.status === 6 || order?.status === 10 || order.status === 12) && (
                                 <p>

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

@@ -34,7 +34,8 @@ export const ProductItemAccordion = (props) => {
     getProductMax,
     offsetDisabled,
     onDeleteProduct,
-    onEditProduct
+    onEditProduct,
+    currency
   } = props
   const [, t] = useLanguage()
   const [orderState] = useOrder()
@@ -151,7 +152,7 @@ export const ProductItemAccordion = (props) => {
             <h3>{product.name}</h3>
             {windowSize.width <= 410 && (
               <span>
-                <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left' })}</p>
+                <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}</p>
                 {isCartProduct && (
                   <div>
                     {onEditProduct && (
@@ -175,7 +176,7 @@ export const ProductItemAccordion = (props) => {
           <ProductPriceSection>
             <ProductPrice>
               <span>
-                {parsePrice(getProductPrice(product), { currencyPosition: 'left' })}
+                {parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}
               </span>
               {(productInfo().ingredients?.length > 0 || productInfo().options?.length > 0 || product.comment) && (
                 <p>

package/src/components/Settings/PluginList/index.js

@@ -234,7 +234,7 @@ const PluginListUI = (props) => {
           )}
         </PLuginsSeparator>
 
-        {/* {!pluginListState.loading && pluginListState.sysPlugins?.length > 0 && (
+        {!pluginListState.loading && pluginListState.sysPlugins?.length > 0 && (
           <PLuginsSeparator h='50%'>
             <Header mb={0}>
               <h1 style={{ marginTop: 20 }}>{t('SYSTEM_PLUGINS', 'System Plugins')}</h1>
@@ -282,7 +282,7 @@ const PluginListUI = (props) => {
               )}
             </PagesBottomContainer>
           </PLuginsSeparator>
-        )} */}
+        )}
       </PluginListContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

package/src/components/Settings/SettingsDetail/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { XLg, LifePreserver } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { useLanguage, useConfig, useSession } from 'ordering-components-admin-external'
+import { useLanguage } from 'ordering-components-admin-external'
 import { IconButton } from '../../../styles'
 import { Modal, NotFoundSource } from '../../Shared'
 import MdcPlayCircle from '@meronex/icons/mdc/MdcPlayCircle'
@@ -10,7 +10,6 @@ import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import { EmailSetting } from '../EmailSetting'
 import { NotificationSetting } from '../NotificationSetting'
 import { SettingsList } from '../SettingsList'
-import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 import {
   Container,
   DescriptionContent,
@@ -43,9 +42,6 @@ export const SettingsDetail = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraInfoOpen, setExtraInfoOpen] = useState(false)
   const [extraSubCatOpen, setExtraSubCatOpen] = useState(false)
-  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
-  const [{ configs }] = useConfig()
-  const [{ user }] = useSession()
   const actionSidebar = (value) => {
     setIsMenuOpen(value)
 
@@ -132,22 +128,6 @@ export const SettingsDetail = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
-  useEffect(() => {
-    if (configs && Object.keys(configs).length > 0 && user && category) {
-      const featureList = { wallet: 'cash_wallet' }
-
-      if (Object.keys(featureList).every(feature => feature !== category?.key)) {
-        setIsDisabledFeature(false)
-        return
-      }
-      if (!Object.keys(configs).includes(featureList[category?.key]) && user?.level === 0) {
-        setIsDisabledFeature(true)
-        return
-      }
-      setIsDisabledFeature(false)
-    }
-  }, [configs, category])
-
   return (
     <Container
       id='catDescription'
@@ -197,14 +177,13 @@ export const SettingsDetail = (props) => {
                 </video>
               </VideoContainer>
             )}
-            <AllSetting onClick={() => !isDisabledFeature && handleExtraOpen(false)} isDisabledFeature={isDisabledFeature}>
+            <AllSetting onClick={() => handleExtraOpen(false)}>
               <span>{t('SETTINGS', 'All settings')}</span>
               <BsArrowRight />
             </AllSetting>
           </Content>
         )}
       </DescriptionContent>
-      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {extraInfoOpen && category.support_url && (
         <>
           {width >= 1000 ? (

package/src/components/Settings/SettingsDetail/styles.js

@@ -141,21 +141,26 @@ export const AllSetting = styled.div`
   user-select: none;
   cursor: pointer;
   margin-top: 36px;
-  ${({ isDisabledFeature }) => css`
-    cursor: ${props => isDisabledFeature ? 'not-allowed' : 'pointer'};
-  `}
+  cursor: pointer;
   span {
     font-weight: 600;
     font-size: 14px;
-    ${({ isDisabledFeature }) => css`
-      color: ${props => isDisabledFeature ? props.theme.colors?.disabled : '#03459E'};
-    `}
+    color: ${props => props.theme.colors.primary};
   }
   svg {
-    ${({ isDisabledFeature }) => css`
-      color: ${props => isDisabledFeature ? props.theme.colors?.disabled : '#03459E'};
+    color: ${props => props.theme.colors.primary};
+    margin-left: 5px;
+    transition: 0.2s linear;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
     `}
   }
+  &:hover {
+    svg {
+      transform: translateX(3px);
+    }
+  }
 `
 
 export const MoreInfo = styled.span`

package/src/components/Settings/SettingsList/index.js

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useConfig, useSession, SettingsList as SettingsListController } from 'ordering-components-admin-external'
+import { useLanguage, SettingsList as SettingsListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, NotFoundSource } from '../../Shared'
 import { Button } from '../../../styles'
 import { SettingsSelectUI } from '../SettingsSelectUI'
 import { SettingsCountryFilter } from '../SettingsCountryFilter'
 import { SettingsImage } from '../SettingsImage'
-import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 import {
   SettingsListContainer,
   GeneralContainer,
@@ -26,7 +25,6 @@ export const SettingsListUI = (props) => {
   const {
     settingsState,
     configs,
-    category,
     formState,
     onCloseSettingsList,
     handleCheckBoxChange,
@@ -36,11 +34,7 @@ export const SettingsListUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
-  const [configState] = useConfig()
-  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [{ user }] = useSession()
-  const featureName = 'advanced_logistics'
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -103,21 +97,6 @@ export const SettingsListUI = (props) => {
     }
   }, [settingsState?.result])
 
-  useEffect(() => {
-    if (category?.key === 'autoassign' && !configState?.loading &&
-      Object.keys(configState?.configs).length > 0 && !formState?.loading &&
-      formState?.finalResult.length > 0 && user) {
-      const autoassignType = formState?.changes?.find(change => change?.key === 'autoassign_type')?.value ||
-        formState?.finalResult?.find(re => re?.key === 'autoassign_type')?.value
-      if (!Object.keys(configState?.configs).includes(featureName) &&
-        user?.level === 0 && autoassignType === 'enterprise') {
-        setIsDisabledFeature(true)
-        return
-      }
-      setIsDisabledFeature(false)
-    }
-  }, [configState, formState])
-
   return (
     <>
       <SettingsListContainer>
@@ -280,14 +259,12 @@ export const SettingsListUI = (props) => {
           )
         }
       </SettingsListContainer>
-      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {
         settingsState?.changes?.length > 0 && (
           <SubmitBtnWrapper>
             <Button
               color='primary'
               onClick={handleSubmit}
-              disabled={isDisabledFeature}
             >
               {t('SAVE', 'Save')}
             </Button>

package/src/components/SidebarMenu/index.js

@@ -64,12 +64,12 @@ export const SidebarMenu = (props) => {
       id: 3,
       title: t('DRIVERS_DASHBOARD', 'Drivers Dashboard'),
       pageName: 'drivers'
+    },
+    {
+      id: 4,
+      title: t('APPOINTMENTS', 'Appointments'),
+      pageName: 'appointments'
     }
-    // {
-    //   id: 4,
-    //   title: t('APPOINTMENTS', 'Appointments'),
-    //   pageName: 'appointments'
-    // }
   ]
 
   const loyaltySubMenus = [
@@ -141,13 +141,13 @@ export const SidebarMenu = (props) => {
       title: t('MANAGERS', 'Managers'),
       pageName: 'managers',
       url: '/users/managers'
+    },
+    {
+      id: 3,
+      title: t('PROFESSIONALS', 'Professionals'),
+      pageName: 'professionals',
+      url: '/users/professionals'
     }
-    // {
-    //   id: 3,
-    //   title: t('PROFESSIONALS', 'Professionals'),
-    //   pageName: 'professionals',
-    //   url: '/users/professionals'
-    // }
   ]
 
   const settingsSubMenus = [
@@ -272,13 +272,13 @@ export const SidebarMenu = (props) => {
       title: t('PROMOTIONS_ENTERPRISE', 'Promotions enterprise'),
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
+    },
+    {
+      id: 2,
+      title: t('CAMPAIGN', 'Campaign'),
+      pageName: 'campaign',
+      url: '/marketing/campaign'
     }
-    // {
-    //   id: 2,
-    //   title: t('CAMPAIGN', 'Campaign'),
-    //   pageName: 'campaign',
-    //   url: '/marketing/campaign'
-    // }
   ]
 
   const downloadsSubMenus = [