ordering-ui-external 2.4.6 → 2.5.0

package/src/themes/five/src/components/UserFormDetails/styles.js

@@ -208,3 +208,19 @@ export const SwitchWrapper = styled.div`
   justify-content: space-between;
   width: 100%;
 `
+
+export const TextLinkWrapper = styled.span`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  span {
+    font-size: 14px;
+    text-align: center;
+    cursor: pointer;
+    color: ${props => props.theme.colors.primary};
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`

package/src/themes/five/src/components/UserPopover/index.js

@@ -16,12 +16,7 @@ import { DropDownCircleImage } from '../../../../../components/Dropdown/style'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { capitalize } from '../../../../../utils'
 import AiOutlineMenu from '@meronex/icons/ai/AiOutlineMenu'
-
-const optionsDefault = [
-  { name: 'search', pathname: '/explore', displayName: 'My home', key: 'my_home' },
-  { name: 'business_search', pathname: '/business_search', displayName: 'Browse & Search', key: 'browse_search' },
-  { name: 'orders', pathname: '/profile/orders', displayName: 'orders', key: 'orders' }
-]
+import { useTheme } from 'styled-components'
 
 export const UserPopover = (props) => {
   const {
@@ -38,7 +33,7 @@ export const UserPopover = (props) => {
   const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
   const [orderStatus] = useOrder()
-
+  const theme = useTheme()
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -48,14 +43,30 @@ export const UserPopover = (props) => {
   const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
+  const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
+  const hideOrders = theme?.bar_menu?.components?.orders?.hidden
+  const hideProfile = theme?.bar_menu?.components?.profile?.hidden
+  const hideWallet = theme?.bar_menu?.components?.wallet?.hidden
+  const hideMessages = theme?.bar_menu?.components?.messages?.hidden
+  const hideHelp = theme?.bar_menu?.components?.help?.hidden
+  const hideFavorites = theme?.bar_menu?.components?.favortes?.hidden
+  const hideSession = theme?.bar_menu?.components?.sessions?.hidden
+  const hidePromotions = theme?.bar_menu?.components?.promotions?.hidden
+
+  const optionsDefault = [
+    { name: 'search', pathname: '/explore', displayName: 'My home', key: 'my_home', isActive: true },
+    { name: 'business_search', pathname: '/business_search', displayName: 'Browse & Search', key: 'browse_search', isActive: !hideBrowse },
+    { name: 'orders', pathname: '/profile/orders', displayName: 'orders', key: 'orders', isActive: !hideOrders }
+  ]
+
   const extraOptions = [
-    { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account', isActive: true },
-    { name: 'wallets', pathname: '/wallets', displayName: 'wallets', key: 'wallets', isActive: isWalletEnabled && !isCustomerMode },
-    { name: 'promotions', pathname: '/promotions', displayName: 'promotions', key: 'promotions', isActive: isPromotionsEnabled },
-    { name: 'messages', pathname: '/messages', displayName: 'messages', key: 'messages', isActive: !isCustomerMode },
-    { name: 'help', pathname: '/help', displayName: 'help', key: 'help', isActive: true },
-    { name: 'sessions', pathname: '/sessions', displayName: 'sessions', key: 'sessions', isActive: true },
-    { name: 'favorite', pathname: '/favorite', displayName: 'favorites', key: 'favorites', isActive: true },
+    { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account', isActive: !hideProfile },
+    { name: 'wallets', pathname: '/wallets', displayName: 'wallets', key: 'wallets', isActive: !hideWallet && isWalletEnabled && !isCustomerMode },
+    { name: 'promotions', pathname: '/promotions', displayName: 'promotions', key: 'promotions', isActive: !hidePromotions && isPromotionsEnabled },
+    { name: 'messages', pathname: '/messages', displayName: 'messages', key: 'messages', isActive: !hideMessages && !isCustomerMode },
+    { name: 'help', pathname: '/help', displayName: 'help', key: 'help', isActive: !hideHelp },
+    { name: 'sessions', pathname: '/sessions', displayName: 'sessions', key: 'sessions', isActive: !hideSession },
+    { name: 'favorite', pathname: '/favorite', displayName: 'favorites', key: 'favorites', isActive: !hideFavorites },
     { name: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
   ]
 
@@ -149,7 +160,7 @@ export const UserPopover = (props) => {
       <PopoverBody ref={popperElement} style={popStyle} {...attributes.popper}>
         <PopoverList>
           {options && options.length > 0 && (
-            options.map((option, i) => (
+            options.filter(option => option.isActive).map((option, i) => (
               <PopoverListLink
                 key={i}
                 active={window.location.pathname === option.pathname}

package/src/themes/five/src/components/UserProfileForm/index.js

@@ -41,6 +41,7 @@ import {
   ListLink,
   ListItem
 } from './styles'
+import { useTheme } from 'styled-components'
 
 const LogoutActionUI = (props) => {
   const [, t] = useLanguage()
@@ -95,6 +96,7 @@ const UserProfileFormUI = (props) => {
   const [events] = useEvent()
   const [{ user }] = useSession()
   const [{ configs }] = useConfig()
+  const theme = useTheme()
   const [orderingTheme] = useOrderingTheme()
   const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
   const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
@@ -103,9 +105,9 @@ const UserProfileFormUI = (props) => {
   const inputRef = useRef(null)
   const windowSize = useWindowSize()
 
-  const showCustomerPicture = !orderingTheme?.theme?.profile?.components?.picture?.hidden
-  const showAddressList = !orderingTheme?.theme?.profile?.components?.address_list?.hidden
-  const userFormLayoutRow = orderingTheme?.theme?.profile?.components?.layout?.position === 'row'
+  const showCustomerPicture = !theme?.profile?.components?.picture?.hidden
+  const showAddressList = !theme?.profile?.components?.address_list?.hidden
+  const userFormLayoutRow = theme?.profile?.components?.layout?.position === 'row'
 
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
   const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
@@ -113,13 +115,20 @@ const UserProfileFormUI = (props) => {
     configs?.wallet_enabled?.value === '1' &&
     (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
+  const hideWallet = theme?.bar_menu?.components?.wallet?.hidden
+  const hideMessages = theme?.bar_menu?.components?.messages?.hidden
+  const hideHelp = theme?.bar_menu?.components?.help?.hidden
+  const hideFavorites = theme?.bar_menu?.components?.favortes?.hidden
+  const hideSession = theme?.bar_menu?.components?.sessions?.hidden
+  const hidePromotions = theme?.bar_menu?.components?.promotions?.hidden
+
   const profileOptions = [
-    { name: 'wallets', pathname: '/wallets', displayName: 'wallets', key: 'wallets', isActive: isWalletEnabled && !isCustomerMode },
-    { name: 'promotions', pathname: '/promotions', displayName: 'promotions', key: 'promotions', isActive: isPromotionsEnabled },
-    { name: 'messages', pathname: '/messages', displayName: 'messages', key: 'messages', isActive: !isCustomerMode },
-    { name: 'help', pathname: '/help', displayName: 'help', key: 'help', isActive: true },
-    { name: 'sessions', pathname: '/sessions', displayName: 'sessions', key: 'sessions', isActive: true },
-    { name: 'favorite', pathname: '/favorite', displayName: 'favorites', key: 'favorites', isActive: true },
+    { name: 'wallets', pathname: '/wallets', displayName: 'wallets', key: 'wallets', isActive: !hideWallet && isWalletEnabled && !isCustomerMode },
+    { name: 'promotions', pathname: '/promotions', displayName: 'promotions', key: 'promotions', isActive: !hidePromotions && isPromotionsEnabled },
+    { name: 'messages', pathname: '/messages', displayName: 'messages', key: 'messages', isActive: !hideMessages && !isCustomerMode },
+    { name: 'help', pathname: '/help', displayName: 'help', key: 'help', isActive: !hideHelp },
+    { name: 'sessions', pathname: '/sessions', displayName: 'sessions', key: 'sessions', isActive: !hideSession },
+    { name: 'favorite', pathname: '/favorite', displayName: 'favorites', key: 'favorites', isActive: !hideFavorites },
     { name: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
   ]
 

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

@@ -44,6 +44,17 @@ export const Button = styled.button`
     `}
     }
   `}
+  ${({ theme }) => theme?.general?.components?.buttons?.borderRadius && css`
+      border-radius: ${theme?.general?.components?.buttons?.borderRadius};
+  `}
+  ${({ theme }) => Object.values(theme?.general?.components?.buttons?.shadow?.components || {}).some(val => !!val) && css`
+    box-shadow: 
+      ${theme?.general?.components?.buttons?.shadow?.components?.x || '0px'}
+      ${theme?.general?.components?.buttons?.shadow?.components?.y || '0px'}
+      ${theme?.general?.components?.buttons?.shadow?.components?.blur || '0px'}
+      ${theme?.general?.components?.buttons?.shadow?.components?.spread || '0px'}
+      ${theme?.general?.components?.buttons?.shadow?.components?.color || '#000'};
+  `}
   ${({ outline }) => outline && css`
     background: #FFF;
     color: #CCC;

package/src/themes/five/src/styles/Inputs/index.js

@@ -31,6 +31,23 @@ export const Input = styled.input`
   ${({ isError }) => isError && css`
     border-color: ${props => props.theme.colors?.danger500} !important;
   `}
+
+  ${({ theme }) => theme?.general?.components?.inputs?.borderRadius && css`
+    border-radius: ${theme?.general?.components?.inputs?.borderRadius};
+  `}
+
+  ${({ theme }) => theme?.general?.components?.inputs?.color && css`
+    color: ${theme?.general?.components?.inputs?.color};
+  `}
+
+  ${({ theme }) => theme?.general?.components?.inputs?.borderColor && css`
+    border: 1px solid ${theme?.general?.components?.inputs?.borderColor};
+    &::placeholder,
+    &::-webkit-input-placeholder,
+    &:-ms-input-placeholder {
+      color: ${theme?.general?.components?.inputs?.borderColor};
+    }
+  `}
 `
 
 export const InputGroup = styled.div`
@@ -95,6 +112,23 @@ export const TextArea = styled.textarea`
   &:-ms-input-placeholder {
     color: #DBDCDB;
   }
+
+  ${({ theme }) => theme?.general?.components?.inputs?.borderRadius && css`
+    border-radius: ${theme?.general?.components?.inputs?.borderRadius};
+  `}
+
+  ${({ theme }) => theme?.general?.components?.inputs?.color && css`
+    color: ${theme?.general?.components?.inputs?.color};
+  `}
+
+  ${({ theme }) => theme?.general?.components?.inputs?.borderColor && css`
+    border: 1px solid ${theme?.general?.components?.inputs?.borderColor};
+    &::placeholder,
+    &::-webkit-input-placeholder,
+    &:-ms-input-placeholder {
+      color: ${theme?.general?.components?.inputs?.borderColor};
+    }
+  `}
 `
 
 export const InputGroupRight = styled(InputGroupLeft)`

package/src/utils/index.js

@@ -357,6 +357,11 @@ export const priceList = [
   { level: '5', content: '$$$$$' }
 ]
 
+/**
+ * List of order type
+ */
+export const orderTypeList = ['delivery', 'pickup', 'eatin', 'curbside', 'drivethru', 'seatdelivery']
+
 /**
  * function to manage review comment list
  * @param {number} param0 type of reviews to return

package/template/app.js

@@ -346,7 +346,7 @@ export const App = () => {
     const oldLink = document.getElementById('favicon')
     link.id = 'favicon'
     link.rel = 'icon'
-    link.href = themeUpdated?.general?.components?.favicon
+    link.href = themeUpdated?.general?.components?.favicon?.components?.image || themeUpdated?.general?.components?.favicon
     if (oldLink) {
       document.head.removeChild(oldLink)
     }
@@ -356,7 +356,8 @@ export const App = () => {
       const fontElement = window.document.getElementById(`${name}-font-styles`)
       if (
         (fontElement?.name !== fontFamily.name && fontFamily.name) ||
-        (fontElement?.href !== fontFamily?.href && fontFamily?.href)
+        (fontElement?.href !== fontFamily?.href && fontFamily?.href) ||
+        (JSON.stringify(fontElement?.weights) !== JSON.stringify(fontFamily?.weights) && fontFamily?.weights)
       ) {
         window.document.body.removeChild(window.document.getElementById(`${name}-font-styles`))
         const font = window.document.createElement('link')
@@ -365,7 +366,8 @@ export const App = () => {
         font.async = true
         font.defer = true
         font.name = fontFamily.name
-        font.href = fontFamily.href || `https://fonts.googleapis.com/css2?family=${fontFamily.name}:wght@${fontFamily.weights.join(';')}&display=swap`
+        const weights = typeof fontFamily?.weights === 'number' ? fontFamily?.weights : JSON.parse(fontFamily?.weights)?.join?.(';')
+        font.href = fontFamily.href || `https://fonts.googleapis.com/css2?family=${fontFamily?.name}:wght@${weights || [400]}&display=swap`
 
         window.document.body.appendChild(font)
         if (name === 'primary') {