ordering-ui-external 2.2.1 → 2.3.0

package/src/index.js

@@ -98,6 +98,7 @@ import { SearchProducts } from './components/RenderProductsLayout/SearchProducts
 import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { useWindowSize } from './hooks/useWindowSize'
+import { useRecaptcha } from './hooks/useRecaptcha'
 import { useCountdownTimer } from './hooks/useCountdownTimer'
 import { useIntersectionObserver } from './hooks/useIntersectionObserver'
 import { useIsMounted } from './hooks/useIsMounted'
@@ -241,6 +242,7 @@ export {
   // Hooks
   useOnlineStatus,
   useWindowSize,
+  useRecaptcha,
   useCountdownTimer,
   useIntersectionObserver,
   useIsMounted,

package/src/themes/five/index.js

@@ -114,6 +114,7 @@ import { OrderPreferencesSection } from './src/components/OrderDetails/OrderPref
 import { ActionsSection } from './src/components/OrderDetails/ActionsSection'
 import { ProductShare } from './src/components/ProductShare'
 import { MultiCart } from './src/components/MultiCart'
+import { QueryLoginSpoonity } from './src/components/QueryLoginSpoonity'
 
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
@@ -239,7 +240,7 @@ export {
   ActionsSection,
   ProductShare,
   MultiCart,
-
+  QueryLoginSpoonity,
   // styles
   Button,
   Input,

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

@@ -298,9 +298,10 @@ const BusinessProductsListingUI = (props) => {
     <>
       <ProductsContainer>
         {!props.useKioskApp && (
-          // <ArrowLeft onClick={() => handleGoToBusinessList()} />
           <HeaderContent>
-            <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
+            {!location.pathname.includes('/marketplace') &&
+              <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
+            }
             {windowSize?.width < 576 && (
               <OrderContextUIWrapper>
                 <OrderContextUI isCheckOut />

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

@@ -71,7 +71,8 @@ const CartUI = (props) => {
     hideDeliveryFee,
     hideDriverTip,
     hideCouponInput,
-    businessConfigs
+    businessConfigs,
+    loyaltyRewardRate
   } = props
 
   const theme = useTheme()
@@ -128,6 +129,8 @@ const CartUI = (props) => {
     }
   }
 
+  const loyaltyRewardValue = Math.round(cart?.subtotal / loyaltyRewardRate)
+
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
     : parseDate(orderState?.option?.moment, { outputFormat: 'YYYY-MM-DD HH:mm' })
@@ -515,6 +518,12 @@ const CartUI = (props) => {
                       <td>{t('TOTAL', 'Total')}</td>
                       <td>{parsePrice(cart?.total >= 0 ? cart?.total : 0)}</td>
                     </tr>
+                    {!!loyaltyRewardValue && isFinite(loyaltyRewardValue) && (
+                      <tr>
+                        <td>&nbsp;</td>
+                        <td id='loyalty'>{t('REWARD_LOYALTY_POINT', 'Reward :amount: on loyalty points').replace(':amount:', loyaltyRewardValue)}</td>
+                      </tr>
+                    )}
                   </tbody>
                 </table>
                 {cart?.status !== 2 && !hideCartComments && (

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

@@ -50,6 +50,11 @@ export const OrderBill = styled.div`
         font-weight: bold;
         color: ${props => props.theme.colors.darkTextColor};
         font-size: 16px;
+
+        &#loyalty {
+          font-weight: normal;
+          font-size: 14px;
+        }
       }
     }
   }

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

@@ -46,7 +46,8 @@ import {
   WrapperActionsInput,
   MobileWrapperPlaceOrderButton,
   OrderContextUIWrapper,
-  HeaderContent
+  HeaderContent,
+  AuthButtonList
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -65,6 +66,8 @@ import { CartContent } from '../CartContent'
 import { Select } from '../../styles/Select'
 import { PlaceSpot } from '../PlaceSpot'
 import { OrderContextUI } from '../OrderContextUI'
+import { SignUpForm } from '../SignUpForm'
+import { LoginForm } from '../LoginForm'
 
 const mapConfigs = {
   mapZoom: 16,
@@ -81,6 +84,7 @@ const CheckoutUI = (props) => {
     placing,
     cartState,
     useKioskApp,
+    loyaltyPlansState,
     businessDetails,
     paymethodSelected,
     handlePaymethodChange,
@@ -104,7 +108,7 @@ const CheckoutUI = (props) => {
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
-  const [{ user }] = useSession()
+  const [{ user }, { login }] = useSession()
   const [{ configs }] = useConfig()
   const [customerState] = useCustomer()
   const [events] = useEvent()
@@ -120,6 +124,9 @@ const CheckoutUI = (props) => {
   const [isOpen, setIsOpen] = useState(false)
   const [requiredFields, setRequiredFields] = useState([])
   const [isSuccess, setIsSuccess] = useState(false)
+  const [openModal, setOpenModal] = useState({ login: false, signup: false })
+  const [allowedGuest, setAllowedGuest] = useState(false)
+  const [cardList, setCardList] = useState([])
 
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isTableNumberEnabled = configs?.table_numer_enabled?.value
@@ -135,6 +142,7 @@ const CheckoutUI = (props) => {
 
   const isDisablePlaceOrderButton = !cart?.valid ||
     (!paymethodSelected && cart?.balance > 0) ||
+    (paymethodSelected?.gateway === 'stripe' && cardList?.cards?.length === 0) ||
     placing ||
     errorCash ||
     loading ||
@@ -164,7 +172,7 @@ const CheckoutUI = (props) => {
   const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && validationFields?.fields?.checkout?.driver_tip?.enabled && driverTipsOptions.length > 0 && !useKioskApp
 
   const handlePlaceOrder = () => {
-    if (!userErrors.length && !requiredFields?.length) {
+    if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -183,6 +191,15 @@ const CheckoutUI = (props) => {
     setIsUserDetailsEdit(true)
   }
 
+  const handlePlaceOrderAsGuest = () => {
+    setIsOpen(false)
+    const body = {}
+    if (behalfName) {
+      body.on_behalf_of = behalfName
+    }
+    handlerClickPlaceOrder && handlerClickPlaceOrder(null, body)
+  }
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -233,6 +250,18 @@ const CheckoutUI = (props) => {
     setUserErrors(errors)
   }
 
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    setOpenModal({ ...openModal, signup: false })
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) setOpenModal({ ...openModal, login: false })
+  }
+
   const handleScrollTo = () => {
     if (!((!paymethodSelected && cart?.balance > 0) && cart?.status !== 2)) return
     const scrollElement = document.querySelector('.paymentsContainer')
@@ -299,7 +328,7 @@ const CheckoutUI = (props) => {
 
           {!useKioskApp ? (
             <>
-              {cart?.business_id && (
+              {cart?.business_id && !hideBusinessMap && (
                 <>
                   {(businessDetails?.loading || cartState.loading) ? (
                     <div style={{ width: '100%', marginBottom: '20px' }}>
@@ -319,34 +348,51 @@ const CheckoutUI = (props) => {
                   )}
                 </>
               )}
-              <UserDetailsContainer>
-                <WrapperUserDetails>
-                  {cartState.loading || (isCustomerMode && !customerState?.user?.id) ? (
-                    <div>
-                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                    </div>
-                  ) : (
-                    <UserDetails
-                      isUserDetailsEdit={isUserDetailsEdit}
-                      cartStatus={cart?.status}
-                      businessId={cart?.business_id}
-                      useValidationFields
-                      useDefualtSessionManager
-                      useSessionUser={!isCustomerMode}
-                      isCustomerMode={isCustomerMode}
-                      userData={isCustomerMode && customerState.user}
-                      userId={isCustomerMode && customerState?.user?.id}
-                      isSuccess={isSuccess}
-                      isCheckout
-                    />
-                  )}
-                </WrapperUserDetails>
-              </UserDetailsContainer>
-              {cart?.business_id && (
+              {!hideCustomerDetails && (
+                <UserDetailsContainer>
+                  <WrapperUserDetails>
+                    {cartState.loading || (isCustomerMode && !customerState?.user?.id) ? (
+                      <div>
+                        <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                        <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                        <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                        <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                        <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                      </div>
+                    ) : (
+                      (user?.guest_id && !allowedGuest) ? (
+                        <AuthButtonList>
+                          <h2>{t('CUSTOMER_DETAILS', 'Customer details')}</h2>
+                          <Button color='primary' onClick={() => setOpenModal({ ...openModal, signup: true })}>
+                            {t('SIGN_UP', 'Sign up')}
+                          </Button>
+                          <Button color='primary' outline onClick={() => setOpenModal({ ...openModal, login: true })}>
+                            {t('LOGIN', 'Login')}
+                          </Button>
+                          <Button color='black' outline onClick={() => setAllowedGuest(true)}>
+                            {t('CONTINUE_AS_GUEST', 'Continue as guest')}
+                          </Button>
+                        </AuthButtonList>
+                      ) : (
+                        <UserDetails
+                          isUserDetailsEdit={isUserDetailsEdit}
+                          cartStatus={cart?.status}
+                          businessId={cart?.business_id}
+                          useValidationFields
+                          useDefualtSessionManager
+                          useSessionUser={!isCustomerMode}
+                          isCustomerMode={isCustomerMode}
+                          userData={isCustomerMode && customerState.user}
+                          userId={isCustomerMode && customerState?.user?.id}
+                          isSuccess={isSuccess}
+                          isCheckout
+                        />
+                      )
+                    )}
+                  </WrapperUserDetails>
+                </UserDetailsContainer>
+              )}
+              {cart?.business_id && !hideBusinessDetails && (
                 <BusinessDetailsContainer>
                   {(businessDetails?.loading || cartState.loading) && !businessDetails?.error && (
                     <div>
@@ -363,7 +409,9 @@ const CheckoutUI = (props) => {
                     <div>
                       <h1>{t('BUSINESS_DETAILS', 'Business Details')}</h1>
                       <div>
-                        <p>{businessDetails?.business?.address}</p>
+                        {!hideBusinessAddress && (
+                          <p>{businessDetails?.business?.address}</p>
+                        )}
                         <p>{businessDetails?.business?.name}</p>
                         <p>{businessDetails?.business?.email}</p>
                         <p>{businessDetails?.business?.cellphone}</p>
@@ -446,6 +494,7 @@ const CheckoutUI = (props) => {
                 paySelected={paymethodSelected}
                 handlePlaceOrder={handlePlaceOrder}
                 onPlaceOrderClick={onPlaceOrderClick}
+                setCardList={setCardList}
               />
             </PaymentMethodContainer>
           )}
@@ -454,6 +503,7 @@ const CheckoutUI = (props) => {
             <WalletPaymentOptionContainer>
               <PaymentOptionWallet
                 cart={cart}
+                loyaltyPlansState={loyaltyPlansState}
                 businessConfigs={businessDetails?.business?.configs}
               />
             </WalletPaymentOptionContainer>
@@ -464,24 +514,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-          <>
-            <DriverTipContainer>
-              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-              <DriverTips
-                businessId={cart?.business_id}
-                driverTipsOptions={driverTipsOptions}
-                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                  ? cart?.driver_tip
-                  : cart?.driver_tip_rate}
-                cart={cart}
-                useOrderContext
-              />
-            </DriverTipContainer>
-            <DriverTipDivider />
-          </>
+            <>
+              <DriverTipContainer>
+                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+                <DriverTips
+                  businessId={cart?.business_id}
+                  driverTipsOptions={driverTipsOptions}
+                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                    ? cart?.driver_tip
+                    : cart?.driver_tip_rate}
+                  cart={cart}
+                  useOrderContext
+                />
+              </DriverTipContainer>
+              <DriverTipDivider />
+            </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
@@ -510,6 +560,9 @@ const CheckoutUI = (props) => {
               useKioskApp={useKioskApp}
               isCheckout
               isProducts={cart?.products?.length || 0}
+              viewString='checkout'
+              businessConfigs={businessConfigs}
+              loyaltyRewardRate={loyaltyPlansState?.result?.find(loyal => loyal.type === 'credit_point')?.accumulation_rate ?? 0}
             />
           </CartContainer>
         )}
@@ -578,9 +631,15 @@ const CheckoutUI = (props) => {
           validationFields?.fields?.checkout?.driver_tip?.enabled &&
           validationFields?.fields?.checkout?.driver_tip?.required &&
           (Number(cart?.driver_tip) <= 0) &&
-        (
+          (
+            <WarningText>
+              {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+            </WarningText>
+          )}
+
+        {!cart?.valid_preorder && (
           <WarningText>
-            {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+            {t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
           </WarningText>
         )}
       </WrapperRightContainer>
@@ -630,12 +689,39 @@ const CheckoutUI = (props) => {
           isCheckout
           isEdit
           isModal
+          handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
           onClose={() => {
             setIsOpen(false)
             handlePlaceOrder()
           }}
         />
       </Modal>
+      <Modal
+        open={openModal.signup}
+        width='760px'
+        padding='30px'
+        onClose={() => setOpenModal({ ...openModal, signup: false })}
+      >
+        <SignUpForm
+          useLoginByCellphone
+          useChekoutFileds
+          handleSuccessSignup={handleSuccessSignup}
+          isPopup
+          isGuest
+        />
+      </Modal>
+      <Modal
+        open={openModal.login}
+        width='760px'
+        padding='30px'
+        onClose={() => setOpenModal({ ...openModal, login: false })}
+      >
+        <LoginForm
+          handleSuccessLogin={handleSuccessLogin}
+          isPopup
+          isGuest
+        />
+      </Modal>
     </Container>
   )
 }
@@ -719,7 +805,8 @@ export const Checkout = (props) => {
           method: 'GET',
           headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
+            Authorization: `Bearer ${token}`,
+            'X-App-X': ordering.appId
           }
         })
         const content = await response.json()

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

@@ -334,3 +334,18 @@ export const HeaderContent = styled.div`
     cursor: pointer;
   }
 `
+
+export const AuthButtonList = styled.div`
+  display: flex;
+  flex-direction: column;
+  h2 {
+    font-weight: 600;
+    font-size: 20px;
+    margin-bottom: 3px;
+  }
+  button {
+    width: 100%;
+    height: 44px;
+    margin-top: 22px;
+  }
+`

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

@@ -224,8 +224,8 @@ export const Header = (props) => {
               onClick={() => handleGoToPage({ page: orderState?.options?.address?.location && !isCustomerMode ? 'search' : 'home' })}
               isChew={isChew}
             >
-              <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
-              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
+              <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
+              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && !props.isCustomLayout && windowSize.width >= 576 && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import parsePhoneNumber from 'libphonenumber-js'
 import PhoneInput from 'react-phone-number-input'
 import BsPhone from '@meronex/icons/bs/BsPhone'
@@ -13,13 +13,17 @@ export const InputPhoneNumber = (props) => {
     setValue,
     handleIsValid,
     disabled,
-    isError
+    isError,
+    currentCountryCode,
+    setCurrentPhoneNumber
   } = props
 
   const [, t] = useLanguage()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
 
+  const phoneRef = useRef(null)
+
   const isValidPhoneNumber = (number) => {
     if (!number) return
     if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
@@ -31,49 +35,40 @@ export const InputPhoneNumber = (props) => {
 
   useEffect(() => {
     if (value) {
+      setCurrentPhoneNumber &&
+      setCurrentPhoneNumber(
+        `+${currentCountryCode} ${phoneRef?.current?.defaultValue?.replace(/ /g, '')}`
+      )
       handleIsValid && handleIsValid(isValidPhoneNumber(value))
     }
   }, [value])
 
   return (
     <Container className='phone_number' disabled={disabled} isValid={value ? isValidPhoneNumber(value) : true} isError={isError}>
-      <>
-        {props.beforeElements?.map((BeforeElement, i) => (
-          <React.Fragment key={i}>
-            {BeforeElement}
-          </React.Fragment>))}
-        {props.beforeComponents?.map((BeforeComponent, i) => (
-          <BeforeComponent key={i} {...props} />))}
-        <InputBeforeIconWrapper>
-          <BsPhone />
-        </InputBeforeIconWrapper>
-        <PhoneInput
-          disabled={disabled}
-          placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={configs?.default_country_code?.value}
-          value={value}
-          name='telefono'
-          displayInitialValueAsLocalNumber
-          onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
-        />
-        {value && !isValidPhoneNumber(value) && !disabled && (
-          <>
-            {((auth && user?.country_phone_code) || !auth || value.includes('+')) && (
-              <ErrorMsg>{t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')}</ErrorMsg>
-            )}
+      <InputBeforeIconWrapper>
+        <BsPhone />
+      </InputBeforeIconWrapper>
+      <PhoneInput
+        ref={phoneRef}
+        disabled={disabled}
+        placeholder={t('PHONE_NUMBER', 'Phone number')}
+        defaultCountry={configs?.default_country_code?.value}
+        value={value}
+        name='telefono'
+        displayInitialValueAsLocalNumber
+        onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
+      />
+      {value && !isValidPhoneNumber(value) && !disabled && (
+        <>
+          {((auth && user?.country_phone_code) || !auth || value.includes('+')) && (
+            <ErrorMsg>{t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')}</ErrorMsg>
+          )}
 
-            {auth && !user?.country_phone_code && !value.includes('+') && (
-              <ErrorMsg>{t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid')}</ErrorMsg>
-            )}
-          </>
-        )}
-        {props.afterComponents?.map((AfterComponent, i) => (
-          <AfterComponent key={i} {...props} />))}
-        {props.afterElements?.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>))}
-      </>
+          {auth && !user?.country_phone_code && !value.includes('+') && (
+            <ErrorMsg>{t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid')}</ErrorMsg>
+          )}
+        </>
+      )}
     </Container>
   )
 }

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

@@ -86,7 +86,9 @@ const LoginFormUI = (props) => {
     otpState,
     setOtpState,
     useLoginOtpEmail,
-    useLoginOtpCellphone
+    useLoginOtpCellphone,
+    handleLoginSpoonity,
+    useLoginSpoonity
   } = props
   const numOtpInputs = loginTab === 'otp' ? 6 : 4
   const [ordering, { setOrdering }] = useApi()
@@ -120,6 +122,8 @@ const LoginFormUI = (props) => {
   const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
   const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
+  const spoonityTitle = configs?.spoonity_title?.value
+
   const hasSocialLogin = (
     (configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
     (configs?.google_login_client_id?.value && configs?.google_login_auth_domain?.value && configs?.google_login_api_key?.value && googleLoginEnabled) ||
@@ -154,6 +158,10 @@ const LoginFormUI = (props) => {
         setSubmitted(true)
         return
       }
+      if (loginTab === 'spoonity') {
+        handleLoginSpoonity()
+        return
+      }
       handleButtonLoginClick()
     }
   }
@@ -243,6 +251,12 @@ const LoginFormUI = (props) => {
     setOtpType(type)
   }
 
+  const preventWhiteSpaceOnKeyDown = (e) => {
+    if (e.key === ' ') {
+      e.preventDefault()
+    }
+  }
+
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
       if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
@@ -346,12 +360,6 @@ const LoginFormUI = (props) => {
     }
   }, [recaptchaConfig])
 
-  const preventWhiteSpaceOnKeyDown = (e) => {
-    if (e.key === " ") {
-      e.preventDefault()
-    }
-  }
-
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -375,7 +383,7 @@ const LoginFormUI = (props) => {
             <Title>{t('LOGIN', 'Login')}</Title>
           )}
 
-          {((Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && !loginWithOtpState && !willVerifyOtpState) && (
+          {((Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) + Number(useLoginSpoonity) > 1) && !loginWithOtpState && !willVerifyOtpState) && (
             <LoginWith isPopup={isPopup}>
               <Tabs variant='primary'>
                 {useLoginByEmail && (
@@ -414,6 +422,15 @@ const LoginFormUI = (props) => {
                     {t('BY_OTP_CELLPHONE', 'by Otp Cellphone')}
                   </Tab>
                 )}
+                {useLoginSpoonity && (
+                  <Tab
+                    onClick={() => handleChangeTab('spoonity')}
+                    active={loginTab === 'spoonity'}
+                    borderBottom={loginTab === 'spoonity'}
+                  >
+                    {spoonityTitle || t('BY_SPOONITY', 'by Spoonity')}
+                  </Tab>
+                )}
               </Tabs>
             </LoginWith>
           )}
@@ -455,7 +472,7 @@ const LoginFormUI = (props) => {
                 </InputBeforeIcon>
               </InputWrapper>
             )}
-            {(((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && !willVerifyOtpState) && (
+            {(((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email') || (useLoginSpoonity && loginTab === 'spoonity')) && !willVerifyOtpState) && (
               <>
                 {formMethods?.errors?.email?.type === 'required' && (
                   <ValidationText>
@@ -474,7 +491,7 @@ const LoginFormUI = (props) => {
                     aria-label='email'
                     placeholder={t('EMAIL', 'Email')}
                     ref={formMethods.register({
-                      required: loginTab === 'email'
+                      required: loginTab === 'email' || loginTab === 'spoonity'
                         ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
                         : null,
                       pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i