ordering-ui-external 2.4.6 → 2.5.1

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

@@ -4,6 +4,7 @@ import { useSession, useLanguage, useCustomer, useConfig, useOrderingTheme } fro
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useTheme } from 'styled-components'
+import { SignUpForm } from '../SignUpForm'
 
 import {
   FormInput,
@@ -14,7 +15,8 @@ import {
   InputPhoneNumberWrapper,
   LanguageSelectorWrapper,
   SwitchWrapper,
-  NotificationsGroupSwitchWrapper
+  NotificationsGroupSwitchWrapper,
+  TextLinkWrapper
 } from './styles'
 
 import { Switch } from '../../../../../styles/Switch'
@@ -26,6 +28,7 @@ import { LanguageSelector } from '../../../../../components/LanguageSelector'
 import { Alert } from '../Confirm'
 import { sortInputFields } from '../../../../../utils'
 import { Checkbox } from '../../../../../styles/Checkbox'
+import Modal from '../Modal'
 
 export const UserFormDetailsUI = (props) => {
   const {
@@ -46,24 +49,26 @@ export const UserFormDetailsUI = (props) => {
     handleChangePromotions,
     isOldLayout,
     requiredFields,
-    handleChangeNotifications
+    handleChangeNotifications,
+    handlePlaceOrderAsGuest
   } = props
 
   const formMethods = useForm()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [{ user: userSession }] = useSession()
+  const [{ user: userSession }, { login }] = useSession()
   const [orderingTheme] = useOrderingTheme()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
   const [isChanged, setIsChanged] = useState(false)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
   const emailInput = useRef(null)
-  
+
   const user = userData || userSession
-  
+
   const [notificationList, setNotificationList] = useState({
     email: formState?.result?.result
       ? !!formState?.result?.result?.settings?.email?.newsletter
@@ -75,12 +80,12 @@ export const UserFormDetailsUI = (props) => {
       ? !!formState?.result?.result?.settings?.notification?.newsletter
       : !!(formState?.changes?.settings?.notification?.newsletter ?? (user && user?.settings?.notification?.newsletter))
   })
-  
-  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
-  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
-  const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
-  const showLangauges = !orderingTheme?.theme?.profile?.components?.languages?.hidden
-  const showNotifications = !orderingTheme?.theme?.profile?.components?.notification_settings?.hidden
+
+  const showCustomerCellphone = !theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !theme?.profile?.components?.password?.hidden
+  const showCustomerPromotions = !theme?.profile?.components?.promotions?.hidden
+  const showLangauges = !theme?.profile?.components?.languages?.hidden
+  const showNotifications = !theme?.profile?.components?.notification_settings?.hidden
 
   const closeAlert = () => {
     setAlertState({
@@ -90,6 +95,14 @@ export const UserFormDetailsUI = (props) => {
     cleanFormState && cleanFormState({ result: { error: false } })
   }
 
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+  }
+
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
 
   const setUserCellPhone = (isEdit = false) => {
@@ -275,9 +288,9 @@ export const UserFormDetailsUI = (props) => {
     })
   }
 
-  useEffect(()=> {
+  useEffect(() => {
     isEdit && handleChangeNotifications(notificationList)
-  },[notificationList])
+  }, [notificationList])
 
   return (
     <>
@@ -453,7 +466,7 @@ export const UserFormDetailsUI = (props) => {
                   {formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
                 </Button>
               )}
-              {requiredFields && (
+              {requiredFields && !userSession?.guest_id && (
                 <Button
                   id='form-btn'
                   color='primary'
@@ -464,6 +477,24 @@ export const UserFormDetailsUI = (props) => {
                 </Button>
               )}
             </ActionsForm>
+            {requiredFields && isCheckout && userSession?.guest_id && (
+              <>
+                <Button
+                  id='form-btn'
+                  color='primary'
+                  type='button'
+                  onClick={() => setModalIsOpen(true)}
+                  disabled={formState.loading}
+                >
+                  {formState.loading ? t('UPDATING', 'Updating...') : t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')}
+                </Button>
+                <TextLinkWrapper>
+                  <span onClick={() => handlePlaceOrderAsGuest()}>
+                    {t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}
+                  </span>
+                </TextLinkWrapper>
+              </>
+            )}
           </>
         ) : (
           <SkeletonForm>
@@ -482,6 +513,19 @@ export const UserFormDetailsUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        width='760px'
+      >
+        <SignUpForm
+          useLoginByCellphone
+          useChekoutFileds
+          handleSuccessSignup={handleSuccessSignup}
+          isPopup
+          isGuest
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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') {