ordering-ui-external 2.0.4 → 2.1.0

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

@@ -170,10 +170,10 @@ export const BusinessInfoContainer = styled.div`
   padding-left: 5px;
   padding-right: 5px;
   display: flex;
-  justify-content: space-between;
+  justify-content: ${props => props.isFlexEnd ? 'flex-end' : 'space-between'};
   flex-direction: column;
   box-sizing: border-box;
-  align-items: flex-end;
+  align-items: ${props => props.isFlexEnd ? 'flex-end' : 'space-between'};
 
   @media (min-width: 576px) {
     padding-top: 0px;
@@ -193,11 +193,15 @@ export const BusinessInfoContent = styled.div`
   width: 100%;
 `
 
+export const SearchWrapper = styled.div`
+  display: flex;
+`
+
 export const WrapperSearch = styled.div`
   margin: 15px 0px 0px;
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: ${props => props.isFlexEnd ? 'flex-end' : 'space-between'};
   box-sizing: border-box;
 
   .search-bar {
@@ -436,6 +440,24 @@ export const SocialList = styled.div`
   `}
 `
 
+export const CategorySelectedContainer = styled.div`
+  display: inline;
+  margin-left: 10px;
+  color: ${({ theme }) => theme?.colors?.primary};
+  padding-right: 5px;
+  cursor: pointer;
+  p{
+    margin: 0;
+  }
+  svg {
+    position: relative;
+    top: 2px;
+    margin-right: 3px;
+    width: 14px;
+    height: 14px;
+  }
+`
+
 export const IconWrapper = styled.a`
   margin: 0px 3px 10px 3px;
   border-radius: 3px;

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

@@ -246,7 +246,7 @@ export const BusinessItemAccordion = (props) => {
         {!setActive && !isClosed && !!isProducts && !checkoutButtonDisabled && !isMultiCheckout && !checkoutMultiBusinessEnabled && (
           <PriceContainer>
             <h4>{parsePrice(total)}</h4>
-            <Button onClick={handleClickCheckout} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>
+            <Button onClick={() => handleClickCheckout(uuid)} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>
           </PriceContainer>
         )}
       </AccordionSection>

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

@@ -6,6 +6,7 @@ import { useTheme } from 'styled-components'
 
 import { CategoriesContainer } from './styles'
 import { Tabs, Tab } from '../../styles/Tabs'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 const BusinessProductsCategoriesUI = (props) => {
   const {
@@ -21,6 +22,7 @@ const BusinessProductsCategoriesUI = (props) => {
   } = props
 
   const theme = useTheme()
+  const windowSize = useWindowSize()
   const [orderingTheme] = useOrderingTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
   const scrollTopSpan = 60
@@ -121,6 +123,9 @@ const BusinessProductsCategoriesUI = (props) => {
     if (typeof useKioskApp === 'undefined') return
     const styleSheet = document.getElementById('styles').sheet
 
+    if (Object.values(styleSheet.cssRules)?.length) {
+      styleSheet?.deleteRule(0)
+    }
     const disabledCustomWidth = isChew || !useKioskApp
 
     let style0 = '.sticky-prod-cat {'
@@ -128,6 +133,7 @@ const BusinessProductsCategoriesUI = (props) => {
     style0 += 'top: 0px !important;'
     style0 += 'left: 0px !important;'
     style0 += 'padding: 5px 5px 0px 5px !important;'
+    style0 += `width: calc(100% - ${useKioskApp ? '50px' : windowSize.width >= 993 ? '155px' : '0px'})!important;`
     !disabledCustomWidth && (style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`)
     style0 += '}'
 
@@ -145,7 +151,7 @@ const BusinessProductsCategoriesUI = (props) => {
 
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
-  }, [useKioskApp, isChew])
+  }, [useKioskApp, isChew, windowSize.width])
 
   useEffect(() => {
     if (business?.professionals?.length > 0 && !useKioskApp) {

package/src/themes/five/src/components/BusinessProductsCategories/layouts/groceries/styles.js

@@ -16,7 +16,7 @@ export const CategoriesWrap = styled.div`
 export const CategoriesContainer = styled.div`
   display: flex;
   overflow-x: auto;
-  padding: 5px;
+  padding: 15px 0 0 0;
   padding-bottom: 0;
   background: ${props => props.theme.colors.backgroundPage};
   z-index: 1000;
@@ -37,7 +37,7 @@ export const CategoriesContainer = styled.div`
   }
 
   @media (min-width: 381px) {
-    padding: 15px 15px 0 0;
+    padding: 5px;
   }
 `
 

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

@@ -338,6 +338,7 @@ const BusinessProductsListingUI = (props) => {
           priceFilterValues={priceFilterValues}
           handleChangePriceFilterValues={handleChangePriceFilterValues}
           productToIdLoading={productToIdLoading}
+          handleUpdateProfessionals={handleUpdateProfessionals}
         />
 
         {

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

@@ -141,7 +141,7 @@ export const HightestRatedWrapper = styled.div`
 `
 
 export const Divider = styled.div`
-  background: #F8F9FA;
+  background: rgb(230, 234, 233);
   height: 8px;
   width: 100%;
 `

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

@@ -19,6 +19,7 @@ import { Modal } from '../Modal'
 import { CouponControl } from '../../../../../components/CouponControl'
 import { ProductForm } from '../ProductForm'
 import { UpsellingPage } from '../UpsellingPage'
+import { CartStoresListing } from '../../../../franchise/src/components/CartStoresListing'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { TaxInformation } from '../TaxInformation'
 import { TextArea } from '../../styles/Inputs'
@@ -41,6 +42,7 @@ import {
 import { verifyDecimals } from '../../../../../utils'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
 import MdCloseCircle from '@meronex/icons/ios/MdCloseCircle'
+import { MomentContent } from '../MomentContent'
 
 const CartUI = (props) => {
   const {
@@ -67,7 +69,8 @@ const CartUI = (props) => {
     setPreorderBusiness,
     cart: cartMulticart,
     hideDeliveryFee,
-    hideDriverTip
+    hideDriverTip,
+    businessConfigs
   } = props
 
   const theme = useTheme()
@@ -92,16 +95,29 @@ const CartUI = (props) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isUpselling, setIsUpselling] = useState(false)
-  // const [openChangeStore, setOpenChangeStore] = useState(false)
+  const [openChangeStore, setOpenChangeStore] = useState(false)
 
   const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+  const cateringTypes = [7, 8]
   const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
   const cart = cartMulticart || orderState?.carts?.[`businessId:${props.cart?.business_id}`]
   const viewString = isStore ? 'business_view' : 'header'
   const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden
   const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount?.hidden
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+  const splitCateringValue = (configName) => businessConfigs.find(config => config.key === configName)?.value?.split('|')?.find(val => val.includes(cateringTypeString))?.split(',')[1]
+  const preorderSlotInterval = businessConfigs && cateringTypeString && parseInt(splitCateringValue('preorder_slot_interval'))
+  const preorderLeadTime = businessConfigs && cateringTypeString && parseInt(splitCateringValue('preorder_lead_time'))
+  const preorderTimeRange = businessConfigs && cateringTypeString && parseInt(splitCateringValue('preorder_time_range'))
+  const preorderMaximumDays = businessConfigs && cateringTypeString && parseInt(splitCateringValue('preorder_maximum_days'))
+  const preorderMinimumDays = businessConfigs && cateringTypeString && parseInt(splitCateringValue('preorder_minimum_days'))
+
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet')
@@ -131,10 +147,10 @@ const CartUI = (props) => {
     setModalIsOpen(true)
   }
 
-  const handleClickCheckout = () => {
+  const handleClickCheckout = (uuid) => {
     const cartsAvailable = Object.values(orderState?.carts)?.filter(cart => cart?.valid && cart?.status !== 2)
-    if (cartsAvailable.length === 1) {
-      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cartsAvailable[0]?.uuid } })
+    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: uuid } })
     } else {
       const groupKeys = {}
       cartsAvailable.forEach(_cart => {
@@ -203,8 +219,8 @@ const CartUI = (props) => {
     handleClickCheckout()
   }
 
-  const checkOutBtnClick = () => {
-    handleClickCheckout()
+  const checkOutBtnClick = (uuid) => {
+    handleClickCheckout(uuid)
   }
 
   const getIncludedTaxes = () => {
@@ -233,9 +249,9 @@ const CartUI = (props) => {
     })
   }
 
-  // const handleChangeStore = () => {
-  //   setOpenChangeStore(true)
-  // }
+  const handleChangeStore = () => {
+    setOpenChangeStore(true)
+  }
 
   useEffect(() => {
     if (isCustomMode) setIsUpselling(true)
@@ -272,7 +288,7 @@ const CartUI = (props) => {
             handleClickCheckout={handleClickCheckout}
             checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || !cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address}
             setPreorderBusiness={setPreorderBusiness}
-            // handleChangeStore={!useKioskApp && handleChangeStore}
+            handleChangeStore={!useKioskApp && handleChangeStore}
             isMultiCheckout={isMultiCheckout}
           >
             {cart?.products?.length > 0 && cart?.products.map(product => (
@@ -571,12 +587,26 @@ const CartUI = (props) => {
                 )}
               </OrderBill>
             )}
+            {cateringTypes.includes(orderState?.options?.type) && (
+              <div>
+                <MomentContent
+                  cateringPreorder
+                  isCart
+                  preorderSlotInterval={preorderSlotInterval}
+                  preorderLeadTime={preorderLeadTime}
+                  preorderTimeRange={preorderTimeRange}
+                  preorderMaximumDays={preorderMaximumDays}
+                  business={cart?.business}
+                  preorderMinimumDays={preorderMinimumDays}
+                />
+              </div>
+            )}
             {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid_products && (!isMultiCheckout || isStore) && (
               <CheckoutAction>
                 <p>{cart?.total >= 1 && parsePrice(cart?.total)}</p>
                 <Button
                   color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address) ? 'secundary' : 'primary'}
-                  onClick={checkOutBtnClick}
+                  onClick={() => checkOutBtnClick(cart?.uuid)}
                   disabled={(openUpselling && !canOpenUpselling) || !cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address}
                 >
                   {!cart?.valid_address ? (
@@ -665,7 +695,7 @@ const CartUI = (props) => {
           )}
         </CartSticky>
 
-        {/* <Modal
+        <Modal
           width='70%'
           title={t('CHANGE_STORE', 'Change store')}
           open={openChangeStore}
@@ -681,7 +711,7 @@ const CartUI = (props) => {
             onClose={() => setOpenChangeStore(false)}
             handleCustomStoreRedirect={handleStoreRedirect}
           />
-        </Modal> */}
+        </Modal>
 
       </CartContainer>
       {props.afterComponents?.map((AfterComponent, i) => (

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

@@ -100,6 +100,7 @@ export const CartContent = (props) => {
                   onClickCheckout={props.onClose}
                   setPreorderBusiness={setPreorderBusiness}
                   isOpenCart={isOpenCart}
+                  businessConfigs={cart?.business?.configs}
                 />
               )}
             </React.Fragment>

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

@@ -13,7 +13,8 @@ import {
   useValidationFields,
   useConfig,
   useCustomer,
-  useOrderingTheme
+  useOrderingTheme,
+  useEvent
 } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { UpsellingPage } from '../UpsellingPage'
@@ -106,6 +107,8 @@ const CheckoutUI = (props) => {
   const [{ user }] = useSession()
   const [{ configs }] = useConfig()
   const [customerState] = useCustomer()
+  const [events] = useEvent()
+
   const history = useHistory()
   const windowSize = useWindowSize()
 
@@ -127,6 +130,7 @@ const CheckoutUI = (props) => {
 
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
+  const isGiftCardCart = !cart?.business_id
   // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
 
   const isDisablePlaceOrderButton = !cart?.valid ||
@@ -254,7 +258,11 @@ const CheckoutUI = (props) => {
 
   useEffect(() => {
     if (cart?.products?.length) return
-    handleStoreRedirect(cart?.business?.slug)
+    if (cart?.business?.slug) {
+      handleStoreRedirect(cart?.business?.slug)
+    } else {
+      events.emit('go_to_page', { page: 'wallets' })
+    }
   }, [cart?.products])
 
   useEffect(() => {
@@ -285,21 +293,25 @@ const CheckoutUI = (props) => {
 
           {!useKioskApp ? (
             <>
-              {(businessDetails?.loading || cartState.loading) ? (
-                <div style={{ width: '100%', marginBottom: '20px' }}>
-                  <Skeleton height={35} style={{ marginBottom: '10px' }} />
-                  <Skeleton height={150} />
-                </div>
-              ) : (
-                <AddressDetails
-                  location={businessDetails?.business?.location}
-                  businessLogo={businessDetails?.business?.logo || theme.images?.dummies?.businessLogo}
-                  isCartPending={cart?.status === 2}
-                  businessId={cart?.business_id}
-                  apiKey={configs?.google_maps_api_key?.value}
-                  mapConfigs={mapConfigs}
-                  isCustomerMode={isCustomerMode}
-                />
+              {cart?.business_id && (
+                <>
+                  {(businessDetails?.loading || cartState.loading) ? (
+                    <div style={{ width: '100%', marginBottom: '20px' }}>
+                      <Skeleton height={35} style={{ marginBottom: '10px' }} />
+                      <Skeleton height={150} />
+                    </div>
+                  ) : (
+                    <AddressDetails
+                      location={businessDetails?.business?.location}
+                      businessLogo={businessDetails?.business?.logo || theme.images?.dummies?.businessLogo}
+                      isCartPending={cart?.status === 2}
+                      businessId={cart?.business_id}
+                      apiKey={configs?.google_maps_api_key?.value}
+                      mapConfigs={mapConfigs}
+                      isCustomerMode={isCustomerMode}
+                    />
+                  )}
+                </>
               )}
               <UserDetailsContainer>
                 <WrapperUserDetails>
@@ -328,38 +340,40 @@ const CheckoutUI = (props) => {
                   )}
                 </WrapperUserDetails>
               </UserDetailsContainer>
-              <BusinessDetailsContainer>
-                {(businessDetails?.loading || cartState.loading) && !businessDetails?.error && (
-                  <div>
+              {cart?.business_id && (
+                <BusinessDetailsContainer>
+                  {(businessDetails?.loading || cartState.loading) && !businessDetails?.error && (
                     <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>
+                        <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>
                     </div>
-                  </div>
-                )}
-                {!cartState.loading && businessDetails?.business && Object.values(businessDetails?.business)?.length > 0 && (
-                  <div>
-                    <h1>{t('BUSINESS_DETAILS', 'Business Details')}</h1>
+                  )}
+                  {!cartState.loading && businessDetails?.business && Object.values(businessDetails?.business)?.length > 0 && (
                     <div>
-                      <p>{businessDetails?.business?.address}</p>
-                      <p>{businessDetails?.business?.name}</p>
-                      <p>{businessDetails?.business?.email}</p>
-                      <p>{businessDetails?.business?.cellphone}</p>
+                      <h1>{t('BUSINESS_DETAILS', 'Business Details')}</h1>
+                      <div>
+                        <p>{businessDetails?.business?.address}</p>
+                        <p>{businessDetails?.business?.name}</p>
+                        <p>{businessDetails?.business?.email}</p>
+                        <p>{businessDetails?.business?.cellphone}</p>
+                      </div>
                     </div>
-                  </div>
-                )}
-                {businessDetails?.error && businessDetails?.error?.length > 0 && (
-                  <div>
-                    <h1>{t('BUSINESS_DETAILS', 'Business Details')}</h1>
-                    <NotFoundSource
-                      content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
-                    />
-                  </div>
-                )}
-              </BusinessDetailsContainer>
+                  )}
+                  {businessDetails?.error && businessDetails?.error?.length > 0 && (
+                    <div>
+                      <h1>{t('BUSINESS_DETAILS', 'Business Details')}</h1>
+                      <NotFoundSource
+                        content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
+                      />
+                    </div>
+                  )}
+                </BusinessDetailsContainer>
+              )}
               <CheckOutDivider />
             </>
           ) : (
@@ -384,7 +398,7 @@ const CheckoutUI = (props) => {
             </div>
           )}
 
-          {!useKioskApp && (
+          {!useKioskApp && cart?.business_id && (
             <>
               {!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
                 <DeliveryOptionsContainer>
@@ -415,8 +429,8 @@ const CheckoutUI = (props) => {
                 cart={cart}
                 useKioskApp={useKioskApp}
                 isDisabled={cart?.status === 2}
-                businessId={businessDetails?.business?.id}
-                isLoading={businessDetails.loading}
+                businessId={!isGiftCardCart ? businessDetails?.business?.id : -1}
+                isLoading={!isGiftCardCart ? businessDetails.loading : false}
                 paymethods={businessDetails?.business?.paymethods}
                 onPaymentChange={handlePaymethodChange}
                 errorCash={errorCash}
@@ -470,7 +484,7 @@ const CheckoutUI = (props) => {
         </WrapperLeftContent>
       </WrapperLeftContainer>
       <WrapperRightContainer>
-        {!cartState.loading && placeSpotsEnabled && (
+        {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
             <PlaceSpot
               isCheckout
@@ -519,7 +533,9 @@ const CheckoutUI = (props) => {
           <CartContainer>
             <CartHeader>
               <h1>{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}</h1>
-              <span onClick={() => cart?.business?.slug && handleStoreRedirect && handleStoreRedirect(cart?.business?.slug)}>{t('ADD_PRODUCTS', 'Add products')}</span>
+              {cart?.business?.slug && (
+                <span onClick={() => cart?.business?.slug && handleStoreRedirect && handleStoreRedirect(cart?.business?.slug)}>{t('ADD_PRODUCTS', 'Add products')}</span>
+              )}
             </CartHeader>
             <Cart
               isCartPending={cart?.status === 2}
@@ -586,7 +602,7 @@ const CheckoutUI = (props) => {
           <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}
+            disabled={isDisablePlaceOrderButton}
             onClick={() => isDisablePlaceOrderButton ? handleScrollTo('.paymentsContainer') : handlePlaceOrder()}
           >
             {!cart?.valid_maximum ? (

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

@@ -25,8 +25,10 @@ const DriverTipsUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
 
+  const [customTip, setCustomTip] = useState((isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
   const [value, setvalue] = useState('')
   const isFixedPriceType = parseInt(configs?.driver_tip_type?.value, 10) === 1
+  const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
 
   const handleChangeDriverTip = (e) => {
     const tip = Number(e?.target?.value)
@@ -34,54 +36,64 @@ const DriverTipsUI = (props) => {
     setvalue(e?.target?.value)
   }
 
-  const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
+  const placeholderCurrency = !isFixedPriceType ? `0%` : (configs?.currency_position?.value || 'left') === 'left'
     ? `${configs?.format_number_currency?.value}0`
     : `0${configs?.format_number_currency?.value}`
 
   return (
     <DriverTipContainer id='driver-tip-container'>
       <>
-        {isDriverTipUseCustom && !isMulti ? (
+        <WrapperTips>
+          {driverTipsOptions.map((option, i) => (
+            <TipCard
+              key={i}
+              className={`${(option === driverTip && !customTip) ? 'active' : ''}`}
+              onClick={() => {
+                handlerChangeOption(option)
+                setCustomTip(false)
+              }}
+            >
+              {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
+            </TipCard>
+          ))}
+          {(isDriverTipUseCustom && !isMulti) && (
+            <TipCard
+              className={`${customTip ? 'active' : ''}`}
+              onClick={() => setCustomTip(true)}
+            >
+              {t('CUSTOM_TIP', 'Custom')}
+            </TipCard>
+          )}
           <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>
-            )}
+            {customTip &&
+              <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>
+            }
           </FormDriverTip>
-        ) : (
-          <WrapperTips>
-            {driverTipsOptions.map((option, i) => (
-              <TipCard
-                key={i}
-                className={`${option === driverTip ? 'active' : ''}`}
-                onClick={() => handlerChangeOption(option)}
-              >
-                {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
-              </TipCard>
-            ))}
-          </WrapperTips>
-        )}
+          {currentTip && (
+            <DriverTipMessage>
+              {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
+                ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+            </DriverTipMessage>
+          )}
+        </WrapperTips>
       </>
     </DriverTipContainer>
   )