ordering-ui-admin-external 1.12.5 → 1.13.1

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

@@ -11,8 +11,7 @@ import {
   ApiKeysListContainer,
   Header,
   ApiKeysListTable,
-  DropdownButtonWrapper,
-  AddNewButton
+  DropdownButtonWrapper
 } from './styles'
 
 const ApiKeysListUI = (props) => {
@@ -106,11 +105,13 @@ const ApiKeysListUI = (props) => {
             ))
           )}
         </ApiKeysListTable>
-        <AddNewButton
+        <Button
+          color='primary'
+          borderRadius='8px'
           onClick={() => handleAddApiKey()}
         >
           {t('ADD_API_KEY', 'Add API Key')}
-        </AddNewButton>
+        </Button>
       </ApiKeysListContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -4,6 +4,11 @@ export const ApiKeysListContainer = styled.div`
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
+
+  > button {
+    height: 44px;
+    margin: 20px 0;
+  }
 `
 
 export const Header = styled.div`
@@ -126,14 +131,3 @@ export const DropdownButtonWrapper = styled.div`
     }
   }
 `
-export const AddNewButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
-  margin: 20px 0;
-  width: fit-content;
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
-`

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

@@ -8,7 +8,6 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   Header,
-  AllSetting,
   Description,
   CategoryExtraContent,
   Container,
@@ -119,10 +118,10 @@ export const Deliverect = (props) => {
           <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
         </Header>
         <Description dangerouslySetInnerHTML={{ __html: t('SYNC_DEC_SECOND', 'Deliverect integrates all your <span>online orders</span> to your <span>existing POS</span> or our <span>Delivery Manger app.</span> Restaurants large and small rely on Deliverect to reduce failures and order mistakes while speeding up order preparation.') }} />
-        <AllSetting onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
-        </AllSetting>
+        </Button>
       </DeliverectContainer>
       {settingsOpen && (
         <>

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

@@ -7,6 +7,29 @@ export const DeliverectContainer = styled.div`
   overflow-x: hidden;
   position: relative;
 
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
   @media (min-width: 768px) {
     padding: 26px 40px;
   }

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

@@ -7,7 +7,6 @@ import { XLg } from 'react-bootstrap-icons'
 
 import {
   Header,
-  AllSetting,
   Description,
   CategoryExtraContent,
   Container,
@@ -164,10 +163,10 @@ const DoordashConnectUI = (props) => {
         <Description>
           {t('CONNECT_WITH_DOORDASH_DESCRIPTION', 'If you have already worked with Doordash or are running your business with Doordash and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <AllSetting onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
-        </AllSetting>
+        </Button>
       </DoordashConnectContainer>
       {settingsOpen && (
         <>

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

@@ -7,6 +7,29 @@ export const DoordashConnectContainer = styled.div`
   overflow-x: hidden;
   position: relative;
 
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
   @media (min-width: 768px) {
     padding: 26px 40px;
   }

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

@@ -8,7 +8,6 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   Header,
-  AllSetting,
   Description,
   CategoryExtraContent,
   Container,
@@ -140,10 +139,10 @@ export const ItsaCheckmate = (props) => {
             <p>{t('ITSACHECKMATE_MENU_4', 'Add, edit, or delete items ')}</p>
           </div>
         </Description>
-        <AllSetting onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
-        </AllSetting>
+        </Button>
       </ItsaCheckmateContainer>
       {settingsOpen && (
         <>

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

@@ -7,6 +7,29 @@ export const ItsaCheckmateContainer = styled.div`
   overflow-x: hidden;
   position: relative;
 
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
   @media (min-width: 768px) {
     padding: 26px 40px;
   }
@@ -153,32 +176,6 @@ export const AddNewButton = styled.div`
   }
 `
 
-export const AllSetting = styled.div`
-  user-select: none;
-  cursor: pointer;
-  margin-top: 36px;
-  cursor: pointer;
-  span {
-    font-weight: 600;
-    font-size: 14px;
-    color: ${props => props.theme.colors.primary};
-  }
-  svg {
-    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 Description = styled.p`
   margin-top: 40px;
   font-size: 14px;

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

@@ -8,7 +8,6 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   Header,
-  AllSetting,
   Description,
   CategoryExtraContent,
   Container,
@@ -164,10 +163,10 @@ const LalaMoveConnectUI = (props) => {
         <Description>
           {t('CONNECT_WITH_LALAMOVE_DESCRIPTION', 'If you have already worked with LalaMove or are running your business with LalaMove and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <AllSetting onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
-        </AllSetting>
+        </Button>
       </LalaMoveConnectContainer>
       {settingsOpen && (
         <>

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

@@ -7,6 +7,29 @@ export const LalaMoveConnectContainer = styled.div`
   overflow-x: hidden;
   position: relative;
 
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
   @media (min-width: 768px) {
     padding: 26px 40px;
   }

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

@@ -37,6 +37,8 @@ const LanguageTransTableUI = (props) => {
   const [currentPages, setCurrentPages] = useState([])
   const [totalPages, setTotalPages] = useState(null)
 
+  let timeout = null
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -44,6 +46,14 @@ const LanguageTransTableUI = (props) => {
     })
   }
 
+  const handleChangeValue = (id, key, value) => {
+    clearTimeout(timeout)
+
+    timeout = setTimeout(function () {
+      handleChangeText(id, key, value)
+    }, 750)
+  }
+
   const handleChangePage = (translation) => {
     setCurrentPage(translation)
   }
@@ -132,13 +142,13 @@ const LanguageTransTableUI = (props) => {
                     <td>
                       <input
                         type='text'
-                        value={
+                        defaultValue={
                           textEditState?.id === translation.id
                             ? textEditState?.text
                             : translation.text
                         }
                         placeholder={t('WRITE_A_TEXT', 'Write a text')}
-                        onChange={(e) => handleChangeText(translation.id, translation.key, e.target.value)}
+                        onChange={(e) => handleChangeValue(translation.id, translation.key, e.target.value)}
                       />
                     </td>
                   </tr>

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

@@ -8,7 +8,6 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   Header,
-  AllSetting,
   Description,
   CategoryExtraContent,
   Container,
@@ -164,10 +163,10 @@ const PickerExpressUI = (props) => {
         <Description>
           {t('CONNECT_WITH_PICKER_EXPRESS_DESCRIPTION', 'If you have already worked with Pickerexpress or are running your business with Pickerexpress and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <AllSetting onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
-        </AllSetting>
+        </Button>
       </PickerExpressContainer>
       {settingsOpen && (
         <>

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

@@ -7,6 +7,29 @@ export const PickerExpressContainer = styled.div`
   overflow-x: hidden;
   position: relative;
 
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
   @media (min-width: 768px) {
     padding: 26px 40px;
   }

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

@@ -17,7 +17,6 @@ import {
   PluginsTable,
   PluginTbody,
   PagesBottomContainer,
-  AddNewPageButton,
   ActionsContainer,
   EnableWrapper,
   ActionSelectorWrapper,
@@ -216,11 +215,13 @@ const PluginListUI = (props) => {
           </PluginsTable>
           {!pluginListState.loading && (
             <PagesBottomContainer>
-              <AddNewPageButton
+              <Button
+                color='primary'
+                borderRadius='8px'
                 onClick={() => setIsAddMode(true)}
               >
                 {t('ADD_NEW_PLUGIN ', 'Add new plugin')}
-              </AddNewPageButton>
+              </Button>
               {currentPlugins.plugins?.length > 0 && (
                 <Pagination
                   currentPage={currentPage.plugins}

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

@@ -183,10 +183,7 @@ export const PagesBottomContainer = styled.div`
   flex-wrap: wrap;
   row-gap: 10px;
   margin: 15px 0;
-`
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  > button {
+    height: 44px;
+  }
 `

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

@@ -3,7 +3,7 @@ import { XLg, LifePreserver } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useLanguage } from 'ordering-components-admin-external'
-import { IconButton } from '../../../styles'
+import { IconButton, Button } from '../../../styles'
 import { Modal, NotFoundSource } from '../../Shared'
 import MdcPlayCircle from '@meronex/icons/mdc/MdcPlayCircle'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
@@ -19,7 +19,6 @@ import {
   CategoryName,
   Description,
   VideoContainer,
-  AllSetting,
   MoreInfo,
   CategoryExtraContent,
   IframeWrapper,
@@ -177,10 +176,10 @@ export const SettingsDetail = (props) => {
                 </video>
               </VideoContainer>
             )}
-            <AllSetting onClick={() => handleExtraOpen(false)}>
+            <Button className='all-setting' color='primary' borderRadius='8px' onClick={() => handleExtraOpen(false)}>
               <span>{t('SETTINGS', 'All settings')}</span>
               <BsArrowRight />
-            </AllSetting>
+            </Button>
           </Content>
         )}
       </DescriptionContent>

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

@@ -66,7 +66,30 @@ export const HeaderIcons = styled.div`
   }
 `
 
-export const Content = styled.div``
+export const Content = styled.div`
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      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 CategoryName = styled.div`
   p {
@@ -137,32 +160,6 @@ export const VideoContainer = styled.div`
   }
 `
 
-export const AllSetting = styled.div`
-  user-select: none;
-  cursor: pointer;
-  margin-top: 36px;
-  cursor: pointer;
-  span {
-    font-weight: 600;
-    font-size: 14px;
-    color: ${props => props.theme.colors.primary};
-  }
-  svg {
-    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`
   cursor: pointer;
   user-select: none;

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

@@ -42,6 +42,11 @@ export const SettingsListUI = (props) => {
     })
   }
 
+  const valuesTypeSix = [
+    'catering_delivery',
+    'catering_pickup'
+  ]
+
   const formatArray = (values) => {
     values = values.replace('[', '')
     values = values.replace(']', '')
@@ -78,6 +83,21 @@ export const SettingsListUI = (props) => {
     handleClickUpdate && handleClickUpdate()
   }
 
+  let timeout = null
+  let previousSearch = null
+
+  const handleChangeTypeSix = (catering, config) => {
+    if (previousSearch !== catering.value) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        const cateringString = config?.value
+        const stringParam = cateringString.split('|').map(string => string.includes(catering.type) ? `${catering.type},${catering.value}` : string).join('|')
+        handleInputChange(stringParam, config.id)
+      }, 1500)
+    }
+    previousSearch = catering.value
+  }
+
   const handleKeyPress = (e, key) => {
     switch (key) {
       case 'platform_fee_fixed':
@@ -243,6 +263,29 @@ export const SettingsListUI = (props) => {
                           />
                         )
                       }
+                      {/* {config.type === 6 && (
+                        <>
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            {config?.description && <Description>{config?.description}</Description>}
+                            {config?.value?.split('|')?.filter(value => valuesTypeSix.includes(value?.split(',')[0]))?.map((value, i, hash) => (
+                              <React.Fragment key={`${config?.id} ${value}`}>
+                                <Description typeSix>{t(value?.split(',')[0], value?.split(',')[0].replace('_', ' '))}</Description>
+                                <input
+                                  type='text'
+                                  defaultValue={value?.split(',')[1]}
+                                  onChange={(e) => handleChangeTypeSix({
+                                    value: e.target.value,
+                                    type: value?.split(',')[0]
+                                  }, config)}
+                                  className='form-control'
+                                  placeholder={0}
+                                />
+                              </React.Fragment>
+                            ))}
+                          </FormGroupText>
+                        </>
+                      )} */}
                     </div>
                   ))
                 }

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

@@ -114,6 +114,6 @@ export const SubmitBtnWrapper = styled.div`
 
 export const Description = styled.p`
   font-size: 14px;
-  margin-top: 0px;
+  margin-top: ${({ typeSix }) => typeSix ? '20px' : '0px'};
   margin-bottom: 5px;
 `

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

@@ -16,8 +16,7 @@ import {
   WebhookListTable,
   DropdownButtonWrapper,
   SelectorWrapper,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 const WebhookListUI = (props) => {
@@ -217,11 +216,13 @@ const WebhookListUI = (props) => {
         </WebhookListTable>
         {!webhookListState.loading && (
           <PagesBottomContainer>
-            <AddNewPageButton
+            <Button
               onClick={() => setIsAddMode(true)}
+              color='primary'
+              borderRadius='8px'
             >
               {t('ADD_NEW_WEBHOOK ', 'Add new webhook')}
-            </AddNewPageButton>
+            </Button>
             {currentWebhooks?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

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

@@ -187,10 +187,8 @@ export const PagesBottomContainer = styled.div`
   flex-wrap: wrap;
   row-gap: 10px;
   margin: 15px 0;
-`
 
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  > button {
+    height: 44px;
+  }
 `

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

@@ -55,13 +55,15 @@ export const ImageCrop = (props) => {
         aspectRatio: aspectRatio,
         dragMode: 'move',
         zoomable: false,
-        toggleDragModeOnDblclick: false
+        toggleDragModeOnDblclick: false,
+        autoCropArea: 1
       })
     } else {
       _cropper = new Cropper(cropperRef.current, {
         dragMode: 'move',
         zoomable: false,
-        toggleDragModeOnDblclick: false
+        toggleDragModeOnDblclick: false,
+        autoCropArea: 1
       })
     }
     setCropper(_cropper)