ordering-ui-admin-external 1.5.0 → 1.6.0

package/src/components/MyProducts/StoreApp/index.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { Button, IconButton } from '../../../styles'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { BoxLayout } from '../BoxLayout'
+import {
+  Container,
+  HeaderTitleContainer,
+  ContentWrapper,
+  FreeBtnWrapper,
+  BrandedBtnWrapper
+} from './styles'
+
+export const StoreApp = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const handleOpenURL = (url) => {
+    window.open(url, '_blank')
+  }
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
+      </HeaderTitleContainer>
+      <ContentWrapper>
+        <h1>{t('STORE_APP', 'Store app')}</h1>
+        <p>{t('STORE_APP_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')}</p>
+        <BoxLayout
+          title={t('FREE_TO_USE', 'Free to use')}
+          description={t('FREE_TO_USE_DESC', 'This app can be used by your fleet with the ordering.co logo.')}
+          photo={theme.images.myProducts.storeApp}
+        >
+          <FreeBtnWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://apps.apple.com/us/app/store-app-2-0/id1608192050')}
+            >
+              {t('DOWNLOAD_APPLE', 'Download apple')}
+            </Button>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              outline
+              onClick={() => handleOpenURL('https://play.google.com/store/apps/details?id=com.ordering.storeappv5&pli=1')}
+            >
+              {t('DOWNLOAD_GOOGLE', 'Download google')}
+            </Button>
+          </FreeBtnWrapper>
+        </BoxLayout>
+        <BoxLayout
+          title={t('BRANDED_BY_YOU', 'Branded by you')}
+          description={t('BRANDED_BY_YOU_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id mi quam aenean in faucibus ac integer libero. Eu egestas sit imperdiet at sit adipiscing ullamcorper sed sit.')}
+          photo={theme.images.myProducts.storeApp}
+        >
+          <BrandedBtnWrapper>
+            <Button
+              color='primary'
+              borderRadius='8px'
+              onClick={() => handleOpenURL('https://www.ordering.co/ordering-sales')}
+            >
+              {t('REQUEST_APP_NOW', 'Request app now')}
+            </Button>
+          </BrandedBtnWrapper>
+        </BoxLayout>
+      </ContentWrapper>
+    </Container>
+  )
+}

package/src/components/MyProducts/StoreApp/styles.js

@@ -0,0 +1,104 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+  min-height: 100vh;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const ContentWrapper = styled.div`
+    margin-top: 27px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 48px;
+    margin-top: 0px;
+    margin-bottom: 7px;
+  }
+
+  > p {
+    margin: 0px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  }
+`
+
+export const FreeBtnWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  button {
+    width: 100%;
+    height: 44px;
+    text-transform: capitalize;
+    &:first-child {
+      margin-bottom: 15px;
+    }
+  }
+
+  @media (min-width: 769px) {
+    flex-direction: row;
+    button {
+      width: 180px;
+      &:first-child {
+        margin-right: 15px;
+        margin-bottom: 0px;
+        ${props => props.theme.rtl && css`
+          margin-right: 0px;
+          margin-left: 15px;
+        `}
+      }
+    }
+  }
+
+  @media (min-width: 1320px) {
+    button {
+      width: 260px;
+    }
+  }
+`
+
+export const BrandedBtnWrapper = styled.div`
+  button {
+    width: 100%;
+    height: 44px;
+    text-transform: capitalize;
+  }
+
+  @media (min-width: 576px) {
+    width: 260px;
+  }
+`

package/src/components/MyProducts/index.js

@@ -0,0 +1,11 @@
+import { OrderingWebsite } from './OrderingWebsite'
+import { CustomerApp } from './CustomerApp'
+import { StoreApp } from './StoreApp'
+import { DriverApp } from './DriverApp'
+
+export {
+  OrderingWebsite,
+  CustomerApp,
+  StoreApp,
+  DriverApp
+}

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/OrdersTable/index.js

@@ -11,7 +11,6 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { ChevronRight } from 'react-bootstrap-icons'
 
 import {
   OrdersContainer,
@@ -314,17 +313,14 @@ export const OrdersTable = (props) => {
                   .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
                   .map((column, i) => {
                     if (column === 'slaBar') {
-                      return (
-                        <th key={`noDragTh-${i}`}>
-                          <Timestatus />
-                        </th>
-                      )
+                      return
                     }
                     if (column === 'orderNumber') {
                       return (
                         <th
                           className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
                           key={`noDragTh-${i}`}
+                          colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
                         >
                           <CheckBox
                             isChecked={!orderList.loading && isAllChecked}
@@ -348,6 +344,7 @@ export const OrdersTable = (props) => {
                             allowColumns={allowColumns}
                             optionsDefault={optionsDefault}
                             handleChangeAllowColumns={handleChangeAllowColumns}
+                            isOrder
                           />
                         </th>
                       )

package/src/components/Profile/ProfilePage/index.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import {
+  UserDetails as UserDetailsController,
+  useLanguage,
+  useSession
+} from 'ordering-components-admin-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { IconButton, Button } from '../../../styles'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+
+import {
+  Container,
+  HeaderContainer,
+  UserInfoContainer,
+  UserImage,
+  UserInfoWrapper,
+  ButtonsGroup
+} from './styles'
+
+const ProfilePageUI = (props) => {
+  const {
+    handleGoogleAccountLink
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [{ user }] = useSession()
+
+  return (
+    <Container>
+      <HeaderContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('PROFILE', '')}</h1>
+      </HeaderContainer>
+      <UserInfoContainer>
+        <UserImage>
+          {user?.photo ? (
+            <img src={user?.photo} loading='lazy' alt='' />
+          ) : (
+            <FaUserAlt />
+          )}
+        </UserImage>
+        <UserInfoWrapper>
+          <p className='name'>{user?.name} {user?.lastname}</p>
+          <p className='email'>{user?.email}</p>
+          {user?.cellphone && <p className='phone'>{user?.cellphone}</p>}
+          <ButtonsGroup>
+            {user?.level === 8 && (
+              <Button
+                color='primary'
+                borderRadius='8px'
+                outline
+                onClick={() => handleGoogleAccountLink()}
+              >
+                {t('GOOGLE_ACCOUNT', 'Google account')}
+              </Button>
+            )}
+          </ButtonsGroup>
+        </UserInfoWrapper>
+      </UserInfoContainer>
+    </Container>
+  )
+}
+
+export const ProfilePage = (props) => {
+  const [{ user }] = useSession()
+  const profileProps = {
+    ...props,
+    userId: user?.id,
+    UIComponent: ProfilePageUI
+  }
+  return <UserDetailsController {...profileProps} />
+}

package/src/components/Profile/ProfilePage/styles.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const UserInfoContainer = styled.div`
+  padding-top: 30px;
+  display: flex;
+`
+export const UserImage = styled.div`
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  width: 216px;
+  height: 216px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+  }
+`
+export const UserInfoWrapper = styled.div`
+  margin: 0 26px;
+  p {
+    &.name {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+    }
+    &.email {
+      font-size: 14px;
+      line-height: 24px;
+      margin: 12px 0;
+    }
+    &.phone {
+      font-size: 14px;
+      line-height: 24px;
+      margin: 0;
+    }
+  }
+`
+export const ButtonsGroup = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 26px;
+
+  button {
+    height: 44px;
+  }
+`

package/src/components/Profile/index.js

@@ -0,0 +1,5 @@
+import { ProfilePage } from './ProfilePage'
+
+export {
+  ProfilePage
+}

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

@@ -12,7 +12,8 @@ export const InsertLink = (props) => {
   const {
     editorContext,
     onClose,
-    handleRestoreEditor
+    handleRestoreEditor,
+    isLinkButton
   } = props
   const [, t] = useLanguage()
   const [changesState, setChangesState] = useState({})
@@ -27,12 +28,15 @@ export const InsertLink = (props) => {
   const handleInsertClick = () => {
     handleRestoreEditor()
     editorContext.invoke('editor.createLink', {
-      text: changesState?.text || '',
+      text: isLinkButton
+        ? `<button style='font-size: 9px;color: white;padding: 6px 11px; cursor: pointer; border-radius: 4px; background: #2C7BE5; border: none;'>${changesState?.text || 'button'}</button>`
+        : (changesState?.text || ''),
       url: changesState?.url || '',
       isNewWindow: changesState?.isNewWindow ?? true
     })
     onClose()
   }
+
   return (
     <InsertLinkContainer>
       <h1>{t('INSERT_LINK', 'Insert link')}</h1>

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/SettingsSelectUI/index.js

@@ -32,7 +32,7 @@ export const SettingsSelectUI = (props) => {
       setOptions(selectTypes)
     } else {
       const selectedTypes = config?.options?.map(item => {
-        return { value: item.value, content: <Option>{t(item.text.toUpperCase(), "Last order assigned")}</Option> }
+        return { value: item.value, content: <Option>{t(item.text.toUpperCase())}</Option> }
       })
       if (config.customizable) {
         selectedTypes.push({

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

@@ -18,7 +18,8 @@ export const ColumnAllowSettingPopover = (props) => {
     optionsDefault,
     allowColumns,
     handleChangeAllowColumns,
-    title
+    title,
+    isOrder
   } = props
 
   const [open, setOpen] = useState(false)
@@ -92,14 +93,17 @@ export const ColumnAllowSettingPopover = (props) => {
           {optionsDefault.map(option => (
             <AllowItem
               key={option.value}
-              isChecked={allowColumns?.[option.value]?.visable}
+              isChecked={isOrder ? allowColumns?.[option.value]?.visable : allowColumns[option.value]}
               onClick={() => handleChangeAllowColumns(option.value)}
             >
-              {allowColumns?.[option.value]?.visable ? (
-                <RiCheckboxFill />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+              {(isOrder
+                ? allowColumns?.[option.value]?.visable
+                : allowColumns[option.value])
+                ? (
+                  <RiCheckboxFill />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
               <span>
                 {option.content}
               </span>