ordering-ui-external 1.4.5 → 1.5.1

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

@@ -25,10 +25,11 @@ export const SignUpApproval = (props) => {
   const contactEmail = 'support@ordering.co'
   const showDomain = false
 
-  const logoImgUrl = businessType === '2'
+  const logoImgUrl = businessType === 2
     ? approvalType === 'automatic' ? theme.images?.general?.CongratulationApproval : theme.images?.general?.CongratulationNoApproval
     : approvalType === 'automatic' ? theme.images?.general?.driverCongratulationApproval : theme.images?.general?.driverCongratulationNoApproval
-  const userType = businessType === '2' ? 'business' : 'driver'
+  const userType = businessType === 2 ? 'business' : 'driver'
+
   return (
     <Container>
       <HeaderSection>
@@ -61,22 +62,22 @@ export const SignUpApproval = (props) => {
                 <td className='bigger td-text-right'>{t('DASHBOARD_WEBPAGE', 'Dashboard webpage')}: </td>
                 <td className='td-text-left'><a className='green-text' href={dashboardLoginUrl} target='_blank' rel='noopener noreferrer'>{dashboardUrl}</a></td>
               </tr>
-            </tbody>
+            </tbody> 
           </ProjectInfoContainer>
         </BodySection>
       ) : (
         <BodySection>
-          {businessType === 'business' ? (
+          {userType === 'business' ? (
             <DescriptionContainer>
               <Description><span className='bigger'>{t('YOUR_STORE_UNDER_APPROVAL', 'Your store is under approval')}</span></Description>
               <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
-              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></Description>
             </DescriptionContainer>
           ) : (
             <DescriptionContainer>
               <Description><span className='bigger'>{t('REQUEST_TO_START_UNDER_APPROVAL', 'Your request to start as a driver is under approval.')}</span></Description>
               <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
-              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></Description>
             </DescriptionContainer>
           )}
         </BodySection>
@@ -100,7 +101,7 @@ export const SignUpApproval = (props) => {
           </Button>
         </ActionGroup>
         {(approvalType === 'automatic' && userType === 'business') && (
-          <ContactSection>{t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></ContactSection>
+          <ContactSection>{t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at ')} <a className='green-text' href={`mailto:${t('SIGNUP_DRIVER_EMAIL', contactEmail)}`}>{contactEmail}</a></ContactSection>
         )}
       </FooterSection>
     </Container>

package/src/themes/five/src/components/SignUpBusiness/layouts/NewSignUpBusiness/index.js

@@ -9,7 +9,7 @@ import { Input } from '../../../../styles/Inputs'
 import { Button } from '../../../../styles/Buttons'
 import { Checkbox } from '../../../../../../../styles/Checkbox'
 import { sortInputFields } from '../../../../../../../utils'
-
+import { useRecaptcha } from '../../../../../../../hooks/useRecaptcha'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 
@@ -62,6 +62,8 @@ const SignUpBusinessUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const emailInput = useRef(null)
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
@@ -149,6 +151,22 @@ const SignUpBusinessUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -204,6 +222,12 @@ const SignUpBusinessUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   useEffect(() => {
     handleChangeInput({
       target: {
@@ -322,7 +346,7 @@ const SignUpBusinessUI = (props) => {
           }
           {props.isRecaptchaEnable && enableReCaptcha && (
             <ReCaptchaWrapper>
-              <ReCaptcha handleReCaptcha={handleReCaptcha} />
+              <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
             </ReCaptchaWrapper>
           )}
 

package/src/themes/five/src/components/SignUpBusiness/layouts/OldSignUpBusiness/index.js

@@ -9,7 +9,7 @@ import { Input } from '../../../../styles/Inputs'
 import { Button } from '../../../../styles/Buttons'
 import { Checkbox } from '../../../../../../../styles/Checkbox'
 import { sortInputFields } from '../../../../../../../utils'
-
+import { useRecaptcha } from '../../../../../../../hooks/useRecaptcha'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 
@@ -60,6 +60,8 @@ const SignUpBusinessUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const emailInput = useRef(null)
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
@@ -147,6 +149,22 @@ const SignUpBusinessUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -202,6 +220,12 @@ const SignUpBusinessUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   useEffect(() => {
     handleChangeInput({
       target: {
@@ -319,7 +343,7 @@ const SignUpBusinessUI = (props) => {
           }
           {props.isRecaptchaEnable && enableReCaptcha && (
             <ReCaptchaWrapper>
-              <ReCaptcha handleReCaptcha={handleReCaptcha} />
+              <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
             </ReCaptchaWrapper>
           )}
 

package/src/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/index.js

@@ -9,7 +9,7 @@ import { Input } from '../../../../styles/Inputs'
 import { Button } from '../../../../styles/Buttons'
 import { Checkbox } from '../../../../../../../styles/Checkbox'
 import { sortInputFields } from '../../../../../../../utils'
-
+import { useRecaptcha } from '../../../../../../../hooks/useRecaptcha'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 
@@ -62,6 +62,8 @@ const SignUpDriverUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const emailInput = useRef(null)
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
@@ -149,6 +151,22 @@ const SignUpDriverUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -204,6 +222,12 @@ const SignUpDriverUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   useEffect(() => {
     handleChangeInput({
       target: {
@@ -322,7 +346,7 @@ const SignUpDriverUI = (props) => {
           }
           {props.isRecaptchaEnable && enableReCaptcha && (
             <ReCaptchaWrapper>
-              <ReCaptcha handleReCaptcha={handleReCaptcha} />
+              <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
             </ReCaptchaWrapper>
           )}
 

package/src/themes/five/src/components/SignUpDriver/layouts/OldSignUpDriver/index.js

@@ -9,7 +9,7 @@ import { Input } from '../../../../styles/Inputs'
 import { Button } from '../../../../styles/Buttons'
 import { Checkbox } from '../../../../../../../styles/Checkbox'
 import { sortInputFields } from '../../../../../../../utils'
-
+import { useRecaptcha } from '../../../../../../../hooks/useRecaptcha'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 
@@ -60,6 +60,8 @@ const SignUpDriverUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const emailInput = useRef(null)
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
@@ -147,6 +149,22 @@ const SignUpDriverUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -202,6 +220,12 @@ const SignUpDriverUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   useEffect(() => {
     handleChangeInput({
       target: {
@@ -319,7 +343,7 @@ const SignUpDriverUI = (props) => {
           }
           {props.isRecaptchaEnable && enableReCaptcha && (
             <ReCaptchaWrapper>
-              <ReCaptcha handleReCaptcha={handleReCaptcha} />
+              <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
             </ReCaptchaWrapper>
           )}
 

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

@@ -21,6 +21,7 @@ import {
   useEvent
 } from 'ordering-components-external'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
 
 import { Tabs, Tab } from '../../styles/Tabs'
@@ -101,6 +102,8 @@ const SignUpFormUI = (props) => {
   const formMethods = useForm()
   const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const isFacebookLogin = configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1'
   const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
@@ -246,6 +249,22 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -304,6 +323,12 @@ const SignUpFormUI = (props) => {
     }
   }, [checkPhoneCodeState])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -514,7 +539,7 @@ const SignUpFormUI = (props) => {
               }
               {props.isRecaptchaEnable && enableReCaptcha && (
                 <ReCaptchaWrapper>
-                  <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                 </ReCaptchaWrapper>
               )}
 

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

@@ -137,7 +137,7 @@ export const SocialButtons = styled.div`
 
   button {
     width: 100%;
-    padding: 5px 30px;
+    padding: 5px;
     color: #000000;
     margin-bottom: 15px;
 
@@ -319,12 +319,19 @@ export const BussinessAndDriverSignUp = styled.div`
   justify-content: space-between;
   flex-direction: column;
 
+  button:first-child {
+    margin-bottom: 10px;
+  }
+
   @media (min-width: 481px) {
     width: ${({ isPopup }) => isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)'};
   }
-  
+
   @media (min-width: 993px) {
     flex-direction: row;
+    button:first-child {
+      margin-bottom: 0px;
+    }
   }
 
   button {

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

@@ -9,6 +9,7 @@ import { Modal } from '../Modal'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
+import { Alert } from '../Confirm'
 
 import {
   CardContainer,
@@ -56,6 +57,7 @@ const SingleProductCardUI = (props) => {
 
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const editMode = typeof product?.code !== 'undefined'
   const isObservedValidation = isObserved || useKioskApp
@@ -79,6 +81,13 @@ const SingleProductCardUI = (props) => {
 
   const handleClickProduct = (e) => {
     if (favoriteRef?.current?.contains(e.target)) return
+    if (productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order) {
+      setAlertState({
+        open: true,
+        content: [t('PRODUCT_ON_MAXIMUM_ORDER', 'The product is on maximum order')]
+      })
+      return
+    }
 
     if (isFavorite) {
       onProductClick && onProductClick()
@@ -88,6 +97,13 @@ const SingleProductCardUI = (props) => {
       (useCustomFunctionality && onCustomClick && onCustomClick())
   }
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
   const handleChangeFavorite = () => {
     if (auth) {
       handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
@@ -205,7 +221,7 @@ const SingleProductCardUI = (props) => {
           </div>
         )}
         {!useCustomFunctionality && !hideAddButton && !isSkeleton && (
-          <Button outline color='primary'>
+          <Button outline color='primary' disabled={productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order}>
             {t('ADD', 'Add')}
           </Button>
         )}
@@ -271,6 +287,15 @@ const SingleProductCardUI = (props) => {
           />
         )}
       </Modal>
+      <Alert
+        title={t('PRODUCT', 'Product')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

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

@@ -20,7 +20,7 @@ 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' },
+  { name: 'orders', pathname: '/profile/orders', displayName: 'orders', key: 'orders' }
 ]
 
 export const UserPopover = (props) => {

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

@@ -2,6 +2,10 @@ import React, { useState, useEffect, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import {
   UserFormDetails as UserProfileController,
+  LogoutAction as LogoutActionController,
+  useConfig,
+  useEvent,
+  useCustomer,
   useLanguage,
   useSession,
   DragAndDrop,
@@ -14,14 +18,14 @@ import { UserFormDetailsUI as UserFormDetailsOldUI } from '../../../../../compon
 import { Modal } from '../Modal'
 import { VerifyCodeForm } from '../VerifyCodeForm'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { AddressList } from '../AddressList'
 import { Alert } from '../Confirm'
 
 import { ProfileOptions } from './ProfileOptions'
-import { bytesConverter } from '../../../../../utils'
+import { bytesConverter, capitalize } from '../../../../../utils'
 import FiCamera from '@meronex/icons/fi/FiCamera'
 import BiImage from '@meronex/icons/bi/BiImage'
-import { useTheme } from 'styled-components'
 import {
   Container,
   UserProfileContainer,
@@ -32,9 +36,46 @@ import {
   SavedPlaces,
   UploadImageIcon,
   SkeletonWrapper,
-  WrapperForm
+  WrapperForm,
+  ProfileOptionsList,
+  ListLink,
+  ListItem
 } from './styles'
 
+const LogoutActionUI = (props) => {
+  const [, t] = useLanguage()
+  const [, { deleteUserCustomer }] = useCustomer()
+
+  const handleClick = () => {
+    const GoogleAuth = window?.gapi?.auth2?.getAuthInstance()
+    if (GoogleAuth) {
+      const signedIn = GoogleAuth.isSignedIn.get()
+      if (signedIn) {
+        GoogleAuth.signOut().then(() => {
+          GoogleAuth.disconnect()
+        })
+      }
+    }
+
+    deleteUserCustomer(true)
+    props.handleLogoutClick()
+  }
+  return (
+    <ListItem onClick={handleClick}>
+      {t('LOGOUT', 'Logout')}
+    </ListItem>
+  )
+}
+
+const ListItemLogout = () => {
+  const logoutActionProps = {
+    UIComponent: LogoutActionUI
+  }
+  return (
+    <LogoutActionController {...logoutActionProps} />
+  )
+}
+
 const UserProfileFormUI = (props) => {
   const {
     userData,
@@ -43,6 +84,7 @@ const UserProfileFormUI = (props) => {
     formState,
     cleanFormState,
     toggleIsEdit,
+    isCustomerMode,
     isHiddenAddress,
     handleSendVerifyCode,
     verifyPhoneState,
@@ -50,19 +92,37 @@ const UserProfileFormUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
-  const theme = useTheme()
+  const [events] = useEvent()
   const [{ user }] = useSession()
+  const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
   const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
   const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
     600, willVerifyOtpState)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   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 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'
+  const isWalletEnabled = configs?.cash_wallet?.value &&
+    configs?.wallet_enabled?.value === '1' &&
+    (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+
+  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: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
+  ]
+
   const handleFiles = (files) => {
     if (files.length === 1) {
       const type = files[0].type.split('/')[0]
@@ -116,6 +176,10 @@ const UserProfileFormUI = (props) => {
     }
   }
 
+  const handleGoToPage = (page) => {
+    events.emit('go_to_page', { page })
+  }
+
   useEffect(() => {
     if (formState.changes?.photo) {
       const isImage = true
@@ -168,7 +232,7 @@ const UserProfileFormUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {!isHiddenAddress && (
+      {!isHiddenAddress && !props.hideOptions && (
         <ProfileOptions value='account' />
       )}
       <Container>
@@ -204,6 +268,20 @@ const UserProfileFormUI = (props) => {
               <Camera><FiCamera /></Camera>
             </UserImage>
           )}
+          {windowSize.width <= 576 && (
+            <ProfileOptionsList>
+              {profileOptions.map((option, i) => option.isActive && (
+                <ListLink
+                  key={i}
+                  active={window.location.pathname === option.pathname}
+                  onClick={() => handleGoToPage(option.name)}
+                >
+                  {t((option.key || option.name).toUpperCase(), capitalize(option.displayName || option.name))}
+                </ListLink>
+              ))}
+              <ListItemLogout />
+            </ProfileOptionsList>
+          )}
           <SideForm className='user-form'>
             <WrapperForm>
               {userFormLayoutRow ? (