ordering-ui-external 10.0.0 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Stores/BusinessSelectHeader/index.js

@@ -4,7 +4,7 @@ import {
   useLanguage,
   useUtils,
   DashboardBusinessList as BusinessListController
-} from 'ordering-components-external'
+} from 'ordering-components-'
 import { Button } from '../../../styles'
 import {
   PopMenuContatiner,

package/src/themes/callcenterOriginal/src/styles/Buttons/index.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import { darken } from 'polished'
 
 export const IconButton = styled.button`
   background-color: transparent;
@@ -69,24 +68,30 @@ export const Button = styled.button`
   background: #CCC;
   color: #FFF;
   border: 1px solid #CCC;
-  border-radius: 7.6px;
+  border-radius: ${({ borderRadius }) => !borderRadius ? '30px' : borderRadius};
   line-height: 30px;
   padding-left: 15px;
   padding-right: 15px;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
   outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: all .2s ease-in;
+
   &:active {
-    background: ${() => darken(0.07, '#CCC')};
+    background: '#CCC';
   }
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+  ${({ rectangle }) => rectangle && css`
+    border-radius: unset;
+  `}
+
   ${({ bgtransparent }) => bgtransparent && css`
-      background: transparent !important;
+    background: transparent !important;
   `}
   ${({ initialIcon }) => initialIcon && css`
     text-align: left;
@@ -100,20 +105,20 @@ export const Button = styled.button`
       padding-left: 15%
       ${props => props.theme?.rtl && css`
         padding-right: 15%;
-        padding-left: 0
+        padding-left: 0;
     `}
     }
   `}
   ${({ outline }) => outline && css`
-    background: #FFF;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
     &:hover {
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
       color: #FFF;
     }
   `}
@@ -129,11 +134,11 @@ export const Button = styled.button`
     border-radius: 50%;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
   `}
   ${({ circle, outline }) => circle && outline && css`
-    background: #FFF;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
     padding: 0;
@@ -144,18 +149,21 @@ export const Button = styled.button`
     border-radius: 50%;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
   `}
   ${({ color }) => color === 'primary' && css`
     background: ${props => props.theme.colors.primary};
     color: ${props => props.theme.colors.primaryContrast};
     border-color: ${props => props.theme.colors.primary};
+    &:hover {
+      background: ${props => props.theme.colors.primary};
+    }
     &:active {
-      background: ${props => darken(0.07, props.theme.colors.primary)};
+      background: ${props => props.theme.colors.primary};
     }
     ${({ outline }) => outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.primary};
       border-color: ${props => props.theme.colors.primary};
       &:active {
@@ -163,7 +171,7 @@ export const Button = styled.button`
         background: ${props => props.theme.colors.primary};
       }
       &:hover {
-        background: ${props => darken(0.07, props.theme.colors.primary)};
+        background: ${props => props.theme.colors.primary};
         color: #FFF;
       }
     `}
@@ -178,12 +186,12 @@ export const Button = styled.button`
       text-align: center;
       border-radius: 50%;
       &:active {
-        border-color: ${props => darken(0.07, props.theme.colors.primary)};
-        background: ${props => darken(0.07, props.theme.colors.primary)};
+        border-color: ${props => props.theme.colors.primary};
+        background: ${props => props.theme.colors.primary};
       }
     `}
     ${({ circle, outline }) => circle && outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.primary};
       border-color: ${props => props.theme.colors.primary};
       padding: 0;
@@ -198,44 +206,49 @@ export const Button = styled.button`
       }
     `}
   `}
-  ${({ color }) => color === 'primaryContrast' && css`
-    background: ${props => props.theme.colors.primaryContrast};
+
+  ${({ color }) => color === 'lightPrimary' && css`
+    background: ${props => props.theme.colors.lightPrimary};
     color: ${props => props.theme.colors.primary};
-    border-color: ${props => props.theme.colors.primaryContrast};
+    border-color: ${props => props.theme.colors.lightPrimary};
     &:hover {
-      background: ${props => darken(0.04, props.theme.colors.primaryContrast)};
+      background: ${props => props.theme.colors.lightPrimary};
     }
     &:active {
-      background: ${props => darken(0.1, props.theme.colors.primaryContrast)};
+      background: ${props => props.theme.colors.lightPrimary};
+    }
+  `}
+  ${({ color }) => color === 'secundaryDark' && css`
+    background: ${props => props.theme.colors.secundaryDarkContrast};
+    color: ${props => props.theme.colors.secundaryDark};
+    border-color: ${props => props.theme.colors.secundaryDarkContrast};
+    &:hover {
+      background: ${props => props.theme.colors.secundaryDarkContrast};
+    }
+    &:active {
+      background: ${props => props.theme.colors.secundaryDarkContrast};
     }
-    ${({ naked }) => naked && css`
-      background: transparent;
-      border-color: transparent;
-      &:active {
-        background: transparent;
-      }
-      &:hover {
-        background: transparent;
-      }
-    `}
   `}
   ${({ color }) => color === 'secundary' && css`
     background: ${props => props.theme.colors.secundary};
     color: ${props => props.theme.colors.secundaryContrast};
     border-color: ${props => props.theme.colors.secundary};
+    &:hover {
+      background: ${props => props.theme.colors.secundary};
+    }
     &:active {
-      background: ${props => darken(0.07, props.theme.colors.secundary)};
+      background: ${props => props.theme.colors.secundary};
     }
     ${({ outline }) => outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.secundary};
       border-color: ${props => props.theme.colors.secundary};
       &:active {
         color: ${props => props.theme.colors.secundaryContrast};
-        background: ${props => darken(0.05, props.theme.colors.secundary)};
+        background: ${props => props.theme.colors.secundary};
       }
       &:hover {
-        background: ${props => darken(0.07, props.theme.colors.secundary)};
+        background: ${props => props.theme.colors.secundary};
         color: #FFF;
       }
     `}
@@ -251,12 +264,12 @@ export const Button = styled.button`
       border-radius: 50%;
       &:active {
         color: ${props => props.theme.colors.secundaryContrast};
-        border-color: ${props => darken(0.07, props.theme.colors.secundary)};
-        background: ${props => darken(0.07, props.theme.colors.secundary)};
+        border-color: ${props => props.theme.colors.secundary};
+        background: ${props => props.theme.colors.secundary};
       }
     `}
     ${({ circle, outline }) => circle && outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.secundary};
       border-color: ${props => props.theme.colors.secundary};
       padding: 0;
@@ -272,15 +285,29 @@ export const Button = styled.button`
       }
     `}
   `}
-  ${({ color }) => color === 'gray' && css`
-    background: ${props => props.theme.colors.grayDividerColor};
-    color: ${props => props.theme.colors.darkGray};
-    border-color: ${props => props.theme.colors.grayDividerColor};
-    &:active {
-      background: ${props => darken(0.05, props.theme.colors.grayDividerColor)};
-    }
+  ${({ color }) => color === 'black' && css`
+    background: ${props => props.theme.colors.black};
+    color: ${props => props.theme.colors.white};
+    border-color: ${props => props.theme.colors.black};
     &:hover {
-      background: ${props => darken(0.07, props.theme.colors.grayDividerColor)};
+      background: ${props => props.theme.colors.black};
     }
+    &:active {
+      background: ${props => props.theme.colors.black};
+    }
+  `}
+`
+
+export const LinkButton = styled.a`
+  font-size: 14px;
+  cursor: pointer;
+  color: ${props => props.theme.colors.primary};
+  &:hover {
+    text-decoration: underline;
+  }
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    opacity: 0.5;
   `}
 `

package/src/themes/callcenterOriginal/src/styles/index.js

@@ -1,4 +1,4 @@
-import { Button, IconButton } from './Buttons'
+import { Button, IconButton, LinkButton } from './Buttons'
 import { Checkbox } from './Checkbox'
 import { Input, TextArea } from './Inputs'
 import { MultiSelect } from './MultiSelect'
@@ -10,6 +10,7 @@ import { Tabs, Tab } from './Tabs'
 export {
   Button,
   IconButton,
+  LinkButton,
   Checkbox,
   Input,
   MultiSelect,

package/src/utils/index.js

@@ -1,5 +1,6 @@
-import { useLanguage } from 'ordering-components-external'
+import { CODES, useLanguage } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
+import { CURRENCY } from '../config/currency.js'
 
 export const getIconCard = (brand = '') => {
   const value = brand.toLowerCase()
@@ -724,3 +725,37 @@ export const getCateringValues = (cateringTypeString, configs) => {
     preorderMinimumDays
   }
 }
+
+export const getCurrenySymbol = (code) => {
+  return CURRENCY?.[code]?.symbol ?? code
+}
+
+/**
+ * Function to get unique id
+ */
+export const getUniqueId = () => {
+  const dateString = Date.now().toString(36)
+  const randomness = Math.random().toString(36).substr(2)
+  return dateString + randomness
+}
+
+/**
+ * Function to get language settins by language code
+ * @param {string} code // language code
+ * @param {any} locales // language settings
+ */
+export const getLocale = (code, locales) => {
+  let locale = locales?.[code]
+  if (code === 'es-419-1' || code === 'es-419-2') locale = locales?.es
+  if (code === 'zh-CN') locale = locales?.zhCN
+  if (code === 'ar') locale = locales?.arSA
+  if (code === 'kn') locale = locales?.ta
+  if (code === 'km') locale = locales?.th
+  if (!locale) return locales?.enUS
+  return locale
+}
+
+export const findExitingCode = (countryCode) => {
+  const code = CODES.find(code => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}