ordering-ui-external 1.8.3 → 1.8.4

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -2,8 +2,6 @@ import React, { useEffect, useState, useCallback } from 'react'
 import { useTheme } from 'styled-components'
 import FiMap from '@meronex/icons/fi/FiMap'
 import FiFilter from '@meronex/icons/fi/FiFilter'
-import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
-import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
 import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 import {
   useOrder,
@@ -17,16 +15,12 @@ import {
 import {
   BusinessContainer,
   BusinessList,
-  // ErrorMessage,
   WrapperSearch,
   BusinessesTitle,
   BusinessHeroImg,
   HightestRatedWrapper,
   Divider,
-  OrderProgressWrapper,
   SearchContainer,
-  BusinessCityList,
-  CityItem,
   BusinessLogo,
   BusinessLogosContainer,
   BusinessBanner,
@@ -34,8 +28,7 @@ import {
   AddressMenu,
   FeatureItems,
   ItemInline,
-  BusinessLogosWrapper,
-  ButtonWrapper
+  BusinessLogosWrapper
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
@@ -60,8 +53,8 @@ import { PageBanner } from '../../../PageBanner'
 import Skeleton from 'react-loading-skeleton'
 import { MomentPopover } from '../../../../../../pwa/src/components/MomentPopover'
 import { OrderTypeSelectorHeader } from '../../../../../../../components/OrderTypeSelectorHeader'
-import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import { AutoScroll } from '../../../AutoScroll'
+import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -91,20 +84,19 @@ const BusinessesListingUI = (props) => {
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
-  const [{ theme: orderingTheme }] = useOrderingTheme()
+  const [orderingTheme] = useOrderingTheme()
   const theme = useTheme()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [activeMap, setActiveMap] = useState(false)
   const [openPopover, setOpenPopover] = useState({})
   const [mapErrors, setMapErrors] = useState('')
-  const [actualCity, setActualCity] = useState(orderState?.options?.city_id)
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
-  const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
+  const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2) ?? true
   const hideSearch = theme?.business_listing_view?.components?.search?.hidden
   const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
   const hideSearchSection = hideCities && hideSearch && hideFilter
@@ -113,7 +105,7 @@ const BusinessesListingUI = (props) => {
     businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -265,10 +257,11 @@ const BusinessesListingUI = (props) => {
             ) : (
               <>
                 {businessesList.businesses
-                  ?.filter(business => business?.slug !== actualSlug && business?.open)
+                  ?.filter(business => business?.open)
                   ?.map(business => (
                     <BusinessLogo
                       key={business?.id}
+                      isActive={actualSlug === business?.slug}
                       bgimage={business?.logo || theme.images?.dummies?.businessLogo}
                       onClick={() => onBusinessClick(business)}
                     />
@@ -290,46 +283,47 @@ const BusinessesListingUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <BusinessContainer>
-        <BusinessBanner>
-          {windowSize.width < 576 && (
-            <BusinessFeatures>
-              <AddressMenu
-                onClick={() => handleClickAddress()}
-              >
-                <FaMapMarkerAlt />
-                <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
-              </AddressMenu>
-              <FeatureItems>
-                <ItemInline>
-                  <OrderTypeSelectorHeader configTypes={configTypes} />
-                </ItemInline>
-                <ItemInline>
-                  <MomentPopover
-                    open={openPopover.moment}
-                    onClick={() => handleTogglePopover('moment')}
-                    onClose={() => handleClosePopover('moment')}
-                    isBanner
-                  />
-                </ItemInline>
-              </FeatureItems>
-            </BusinessFeatures>
-          )}
-          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && (
-            <BusinessHeroImg
-              bgimage={theme.images?.general?.businessHero}
-              height={theme?.business_listing_view?.components?.business_hero?.style?.height}
-            />
-          )}
-        </BusinessBanner>
+        {(windowSize.width < 576 || (configs?.business_listing_hide_image?.value !== '1' && !isChew)) && (
+          <BusinessBanner>
+            {windowSize.width < 576 && (
+              <BusinessFeatures>
+                <AddressMenu
+                  onClick={() => handleClickAddress()}
+                >
+                  <FaMapMarkerAlt />
+                  <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
+                </AddressMenu>
+                <FeatureItems>
+                  <ItemInline>
+                    <OrderTypeSelectorHeader configTypes={configTypes} />
+                  </ItemInline>
+                  <ItemInline>
+                    <MomentPopover
+                      open={openPopover.moment}
+                      onClick={() => handleTogglePopover('moment')}
+                      onClose={() => handleClosePopover('moment')}
+                      isBanner
+                    />
+                  </ItemInline>
+                </FeatureItems>
+              </BusinessFeatures>
+            )}
+            {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && (
+              <BusinessHeroImg
+                bgimage={theme.images?.general?.businessHero}
+                height={theme?.business_listing_view?.components?.business_hero?.style?.height}
+              />
+            )}
+          </BusinessBanner>
+        )}
         {!!Object.values(orderState?.carts)?.length && (
-          <OrderProgressWrapper isChew={isChew}>
-            <OrderProgress
-              franchiseId={props.franchiseId}
-              userCustomerId={userCustomer?.id}
-              asDashboard={isCustomerMode}
-              isCustomerMode={isCustomerMode}
-            />
-          </OrderProgressWrapper>
+          <OrderProgress
+            isChew={isChew}
+            franchiseId={props.franchiseId}
+            userCustomerId={userCustomer?.id}
+            asDashboard={isCustomerMode}
+            isCustomerMode={isCustomerMode}
+          />
         )}
         {(configs?.business_listing_hide_image?.value !== '1' && isChew) && (
           <BusinessHeroImg
@@ -434,7 +428,7 @@ const BusinessesListingUI = (props) => {
           <OrdersSection />
         )}
         <>
-          {!isCustomLayout && isCustomerMode && businessesList?.businesses?.length > 0 && (
+          {((!isCustomLayout && isCustomerMode && businessesList?.businesses?.length > 0) || isChew) && (
             <BusinessesTitle>
               {t('BUSINESSES', 'Businesses')}
             </BusinessesTitle>
@@ -544,30 +538,11 @@ const BusinessesListingUI = (props) => {
           width='70%'
           onClose={() => setModals({ ...modals, citiesOpen: false })}
         >
-          <BusinessCityList>
-            {
-              orderState?.loading ? (
-                <Skeleton height={40} count={3} style={{ marginBottom: '10px' }} />
-              ) : (
-                <>
-                  {citiesState?.cities?.map(city => (
-                    <CityItem key={city?.id} onClick={() => setActualCity(city?.id)}>
-                      <span className='radio'>
-                        {city?.id === actualCity ? <RiRadioButtonFill className='city-checked' /> : <IosRadioButtonOff />}
-                      </span>
-                      {city?.name}
-                    </CityItem>
-                  ))}
-                  <ButtonWrapper>
-                    <Button color='primary' disabled={actualCity === null} onClick={() => handleChangeCity(actualCity)}>
-                      {t('CONTINUE', 'Continue')}
-                    </Button>
-                    <BsArrowRight />
-                  </ButtonWrapper>
-                </>
-              )
-            }
-          </BusinessCityList>
+          <CitiesControl
+            cities={citiesState?.cities}
+            handleChangeCity={handleChangeCity}
+            onClose={() => setModals({ ...modals, citiesOpen: false })}
+          />
         </Modal>
 
         <Alert

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/styles.js

@@ -221,54 +221,12 @@ export const Divider = styled.div`
   width: 100%;
 `
 
-export const OrderProgressWrapper = styled.div`
-  padding: ${props => props.isChew ? '110px 20px 45px' : '45px 20px'};
-  margin: 0px;
-  @media (min-width: 768px) {
-      margin: 0 35px;
-      padding: 45px 20px;
-    }
-`
-
 export const SearchContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `
 
-export const BusinessCityList = styled.div`
-
-`
-
-export const ButtonWrapper = styled.div`
-  position: relative;
-  svg {
-    position: absolute;
-    right: 10px;
-    top: 8px;
-    font-size: 25px;
-    color: #ffffff;
-  }
-  button {
-    width: 100%;
-    padding: 5px;
-  }
-`
-
-export const CityItem = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 15px 0px;
-  cursor: pointer;
-  span {
-    margin-right: 15px;
-  }
-  .city-checked{
-    color: ${props => props.theme.colors.primary};
-  }
-`
-
 export const BusinessLogosWrapper = styled.div`
   overflow: scroll hidden;
   width: 100%;
@@ -276,18 +234,21 @@ export const BusinessLogosWrapper = styled.div`
 
 
 const BusinessLogoStyled = styled.div`
-min-width: 100px;
-min-height: 100px;
-height: 100px;
-width: 100px;
-box-sizing: border-box;
-background-repeat: no-repeat, repeat;
-background-size: cover;
-object-fit: cover;
-background-position: center;
-border-radius: 7.6px;
-margin-right: 15px;
-cursor: pointer;
+  min-width: 100px;
+  min-height: 100px;
+  height: 100px;
+  width: 100px;
+  box-sizing: border-box;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 7.6px;
+  margin-right: 15px;
+  cursor: pointer;
+  ${props => props.isActive && css`
+    border: 2px solid ${props => props.theme.colors.primary};
+  `};
 `
 
 export const BusinessLogo = (props) => {

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

@@ -26,7 +26,7 @@ export const CartPopover = (props) => {
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const popper = usePopper(referenceElement.current, popperElement.current, {
     placement: theme?.rtl ? 'bottom' : 'bottom-end',
     modifiers: [
@@ -40,7 +40,7 @@ export const CartPopover = (props) => {
     ]
   })
 
-  const { styles, attributes, forceUpdate } = popper
+  const { styles, attributes } = popper
 
   const isSlideBar = orderingTheme?.theme?.header?.components?.cart?.open_strategy?.type === 'slide'
 

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

@@ -13,7 +13,7 @@ import {
   useValidationFields,
   useConfig,
   useCustomer,
-  useEvent
+  useOrderingTheme
 } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { UpsellingPage } from '../UpsellingPage'
@@ -94,14 +94,13 @@ const CheckoutUI = (props) => {
 
   const theme = useTheme()
   const [validationFields] = useValidationFields()
-  // const [{ options, loading }, { changePaymethod }] = useOrder()
+  const [orderingTheme] = useOrderingTheme()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
   const [{ user }] = useSession()
   const [{ configs }] = useConfig()
   const [customerState] = useCustomer()
-  const [events] = useEvent()
   const history = useHistory()
   const windowSize = useWindowSize()
 
@@ -118,6 +117,7 @@ const CheckoutUI = (props) => {
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
   const isWalletCreditPointsEnabled = businessConfigs.find(config => config.key === 'wallet_credit_point_enabled')?.value === '1'
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp
+  const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
@@ -220,7 +220,7 @@ const CheckoutUI = (props) => {
   const handleScrollTo = () => {
     if (!((!paymethodSelected && cart?.balance > 0) && cart?.status !== 2)) return
     const scrollElement = document.querySelector('.paymentsContainer')
-    window.scrollTo(0, scrollElement.offsetTop - 20);
+    window.scrollTo(0, scrollElement.offsetTop - 20)
   }
 
   useEffect(() => {
@@ -421,6 +421,35 @@ const CheckoutUI = (props) => {
               />
             </WalletPaymentOptionContainer>
           )}
+
+          {
+            isMultiDriverTips &&
+            !cartState.loading &&
+            cart &&
+            cart?.business_id &&
+            options.type === 1 &&
+            cart?.status !== 2 &&
+            validationFields?.fields?.checkout?.driver_tip?.enabled &&
+            driverTipsOptions.length > 0 &&
+            !useKioskApp &&
+            (
+              <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>
+            )
+          }
         </WrapperLeftContent>
       </WrapperLeftContainer>
       <WrapperRightContainer>
@@ -437,6 +466,7 @@ const CheckoutUI = (props) => {
           </SelectSpotContainer>
         )}
         {
+          !isMultiDriverTips &&
           !cartState.loading &&
           cart &&
           cart?.business_id &&
@@ -524,9 +554,10 @@ const CheckoutUI = (props) => {
         )}
 
         {options.type === 1 &&
-        validationFields?.fields?.checkout?.driver_tip?.enabled &&
-        validationFields?.fields?.checkout?.driver_tip?.required &&
-        (Number(cart?.driver_tip) <= 0) && (
+          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>
@@ -536,17 +567,17 @@ const CheckoutUI = (props) => {
         <MobileWrapperPlaceOrderButton>
           <span>{parsePrice(cart?.total)}</span>
           <Button
-              color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100))) ? 'secundary' : 'primary'}
-              // disabled={isDisablePlaceOrderButton}
-              onClick={() => isDisablePlaceOrderButton ? handleScrollTo('.paymentsContainer') : handlePlaceOrder()}
-            >
-              {!cart?.valid_maximum ? (
+            color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100))) ? 'secundary' : 'primary'}
+            // disabled={isDisablePlaceOrderButton}
+            onClick={() => isDisablePlaceOrderButton ? handleScrollTo('.paymentsContainer') : handlePlaceOrder()}
+          >
+            {!cart?.valid_maximum ? (
                 `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
-              ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
+            ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
                 `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-              ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
-            </Button>
-          </MobileWrapperPlaceOrderButton>
+            ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
+          </Button>
+        </MobileWrapperPlaceOrderButton>
       )}
       <Alert
         title={t('CUSTOMER_DETAILS', 'Customer Details')}

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, useOrder } from 'ordering-components-external'
+import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
+import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+
+import { ButtonWrapper, CityItem, Container } from './styles'
+import { Button } from '../../styles/Buttons'
+
+export const CitiesControl = (props) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  return (
+    <Container>
+      {
+        orderState?.loading ? (
+          <Skeleton height={40} count={3} style={{ marginBottom: '10px' }} />
+        ) : (
+          <>
+            {cities?.map(city => (
+              <CityItem key={city?.id} onClick={() => setCityState(city?.id === cityState ? null : city?.id)}>
+                <span className='radio'>
+                  {city?.id === cityState
+                    ? <RiRadioButtonFill className='city-checked' />
+                    : <IosRadioButtonOff />}
+                </span>
+                {city?.name}
+              </CityItem>
+            ))}
+            <ButtonWrapper>
+              <Button color='primary' onClick={() => handleClick()}>
+                {t('CONTINUE', 'Continue')}
+              </Button>
+              <BsArrowRight />
+            </ButtonWrapper>
+          </>
+        )
+      }
+    </Container>
+  )
+}

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

@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+export const Container = styled.div``
+
+export const CityItem = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0px;
+  cursor: pointer;
+  span {
+    margin-right: 15px;
+  }
+  .city-checked{
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  position: relative;
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 8px;
+    font-size: 25px;
+    color: #ffffff;
+  }
+  button {
+    width: 100%;
+    padding: 5px;
+  }
+`

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

@@ -14,6 +14,7 @@ import { Button } from '../../styles/Buttons'
 
 const DriverTipsUI = (props) => {
   const {
+    isMulti,
     driverTip,
     driverTipsOptions,
     cart,
@@ -38,69 +39,51 @@ const DriverTipsUI = (props) => {
     : `0${configs?.format_number_currency?.value}`
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <DriverTipContainer id='driver-tip-container'>
-        <>
-          {isDriverTipUseCustom ? (
-            <FormDriverTip>
-              <WrapperInput>
-                <Input
-                  name='drivertip'
-                  type='text'
-                  value={value}
-                  placeholder={placeholderCurrency}
-                  onChange={handleChangeDriverTip}
-                />
-                <Button
-                  color='primary'
-                  disabled={parseFloat(value || 0) < 0 || parseFloat(value || 0) === driverTip || value === ''}
-                  onClick={() => {
-                    handlerChangeOption(value)
-                    setvalue('')
-                  }}
-                >
-                  {t('APPLY_TIP', 'Apply Tip')}
-                </Button>
-              </WrapperInput>
-              {parseFloat(driverTip || 0) > 0 && (
-                <DriverTipMessage>
-                  {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType && ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
-                </DriverTipMessage>
-              )}
-            </FormDriverTip>
-          ) : (
-            <WrapperTips>
-              {driverTipsOptions.map((option, i) => (
-                <TipCard
-                  key={i}
-                  className={`${option === driverTip ? 'active' : ''}`}
-                  onClick={() => handlerChangeOption(option)}
-                >
-                  {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
-                </TipCard>
-              ))}
-            </WrapperTips>
-          )}
-        </>
-        {/* {isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0 && (
-          <DriverTipMessage>
-            {t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-          </DriverTipMessage>
-        )} */}
-      </DriverTipContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
+    <DriverTipContainer id='driver-tip-container'>
+      <>
+        {isDriverTipUseCustom && !isMulti ? (
+          <FormDriverTip>
+            <WrapperInput>
+              <Input
+                name='drivertip'
+                type='text'
+                value={value}
+                placeholder={placeholderCurrency}
+                onChange={handleChangeDriverTip}
+              />
+              <Button
+                color='primary'
+                disabled={parseFloat(value || 0) < 0 || parseFloat(value || 0) === driverTip || value === ''}
+                onClick={() => {
+                  handlerChangeOption(value)
+                  setvalue('')
+                }}
+              >
+                {t('APPLY_TIP', 'Apply Tip')}
+              </Button>
+            </WrapperInput>
+            {parseFloat(driverTip || 0) > 0 && (
+              <DriverTipMessage>
+                {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
+                  ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+              </DriverTipMessage>
+            )}
+          </FormDriverTip>
+        ) : (
+          <WrapperTips>
+            {driverTipsOptions.map((option, i) => (
+              <TipCard
+                key={i}
+                className={`${option === driverTip ? 'active' : ''}`}
+                onClick={() => handlerChangeOption(option)}
+              >
+                {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
+              </TipCard>
+            ))}
+          </WrapperTips>
+        )}
+      </>
+    </DriverTipContainer>
   )
 }