ordering-ui-external 1.5.4 → 1.6.0

package/src/components/CancellationComponent/styles.js

@@ -0,0 +1,162 @@
+import styled, { css } from 'styled-components'
+
+export const Hero = styled.div`
+  margin-bottom: 30px;
+  width: 100%;
+  background: black;
+  overflow: hidden;
+  position: relative;
+
+  @media (min-width: 450px) {
+    height: 370px;
+  }
+
+  @media (min-width: 821px) {
+    height: ${({ height }) => height || '450px'};
+  }
+`
+
+export const BgImg = styled.img`
+  ${({ src }) => src && css`
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    object-fit: cover;
+    position: absolute;
+  `}
+`
+
+export const HeroText = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${props => props.theme.colors.backgroundPage};
+    opacity: .9;
+    text-align: center;
+
+  .title {
+    font-size: 40px;
+    margin: 10px 0;
+  }
+
+  .sub-title {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 100;
+      margin: 0;
+      max-width: 560px;
+  }
+
+  .terms {
+      font-style: italic;
+  }
+`
+
+export const LogoImg = styled.img`
+  ${({ src }) => src && css`
+    width: 120px;
+    height: 120px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  `}
+`
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+  width: 100%;
+  height: 200px;
+  background-color: #F3F9FF;
+  text-align: center;
+
+  p {
+    font-size: x-large;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0;
+    max-width: 600px;
+  }
+
+  button {
+    margin-top: 20px;
+  }
+`
+
+export const Segment = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+  text-align: center:
+  width: 100%;
+  text-align: center;
+
+  p {
+    font-size: x-large;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0;
+    max-width: 660px;
+    margin-bottom: 30px;
+  }
+`
+
+export const InputWrapper = styled.div`
+  margin: 10px 20px 0px;
+  display: flex;
+  
+  button {
+    width: 80px;
+    margin-left: -10px;
+    border-radius: 0 7.6px 7.6px 0;
+    padding: 4px;
+    z-index: 100;
+  }
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin: 0;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    width: 100%; 
+    padding: 0 20px;
+    margin-right: 20px;
+    
+    @media(min-width: 681px){
+      width: 60%;
+      padding: 0;
+    }
+
+    @media(min-width: 1201px){
+      width: 50%;
+    }
+`
+
+export const BusinessSearch = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  input {
+    border: none;
+    border-bottom: 1px solid #E9ECEF;
+    border-radius: 0px;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: 30px 18px;
+    box-sizing: border-box;
+    padding-left: 30px;
+    padding-right: 50px;
+
+    @media (min-width: 681px) {
+      width: 100%;
+    }
+
+  }
+`

package/src/components/Header/index.js

@@ -241,7 +241,7 @@ export const Header = (props) => {
             <RightHeader>
               <Menu>
                 {
-                  !auth && windowSize.width > 870 && (
+                  !auth && windowSize.width > 870 && !isCustomerMode && (
                     <>
                       <MenuLink onClick={() => handleGoToPage({ page: 'signin' })} name='signin'>{t('SIGN_IN', theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
                       {!isHideSignup && (

package/src/index.js

@@ -100,6 +100,7 @@ import { useWindowSize } from './hooks/useWindowSize'
 import { useCountdownTimer } from './hooks/useCountdownTimer'
 import { useIntersectionObserver } from './hooks/useIntersectionObserver'
 import { useIsMounted } from './hooks/useIsMounted'
+import { CancellationComponent } from './components/CancellationComponent'
 
 import { Button } from './styles/Buttons'
 import { Input, InputGroup, InputPrimary, InputGroupLeft, InputGroupPrimary, InputGroupRight, InputSecundary, TextArea } from './styles/Inputs'
@@ -150,6 +151,7 @@ export {
   BusinessesMap,
   BusinessReviews,
   BusinessTypeFilter,
+  CancellationComponent,
   CardForm,
   Cart,
   CartContent,

package/src/themes/callcenterOriginal/src/components/Header/styles.js

@@ -306,6 +306,7 @@ export const FarAwayMessage = styled.div`
   border-radius: 7.6px;
   padding: 6px 15px;
   box-sizing: border-box;
+  z-index: 2000;
   margin: 10px 0px 0px 0px !important;
 
   left: 5px;

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

@@ -77,8 +77,8 @@ const AddressFormUI = (props) => {
       : formState.changes?.location ?? null
   )
 
-  const isHideMap = orderingTheme?.theme?.header?.components?.address_form?.components?.map?.hidden
-  const isHideIcons = orderingTheme?.theme?.header?.components?.address_form?.components?.icons?.hidden
+  const isHideMap = orderingTheme?.theme?.address?.components?.map?.hidden
+  const isHideIcons = orderingTheme?.theme?.address?.components?.icons?.hidden
 
   const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value

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

@@ -91,7 +91,7 @@ const AddressListUI = (props) => {
   const showIcons = !orderingTheme?.theme?.profile?.components?.address_list?.components?.icons?.hidden
   const showZipcode = !orderingTheme?.theme?.profile?.components?.address_list?.components?.zipcode?.hidden
   const showInternalNumber = !orderingTheme?.theme?.profile?.components?.address_list?.components?.internal_number?.hidden
-
+  const notFoundImage = orderingTheme?.theme?.profile?.components?.address_list?.components?.image
   const openAddress = (address) => {
     setCurAddress(address)
     setAddressOpen(true)
@@ -326,6 +326,7 @@ const AddressListUI = (props) => {
         {!(addressList.loading || actionStatus.loading || orderState.loading) && addressList.error && (
           addressList.error.length > 0 && (
             <NotFoundSource
+              image={notFoundImage}
               content={addressList.error[0]?.message || addressList.error[0]}
             />
           )

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

@@ -4,7 +4,10 @@ import { darken } from 'polished'
 export const AddressListContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0px 10px;
+  padding: 0;
+  @media (min-width: 768px) {
+        padding: 0px 10px;
+      }
   ${({ isProfile }) => !isProfile && css`
     width: 100%;
   `}

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

@@ -84,7 +84,8 @@ export const BusinessBasicInformation = (props) => {
   const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const isInfoShrunken = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
-
+  const layoutsWithOldSearch = ['starbucks', 'old']
+  const hideSearch = layoutsWithOldSearch.includes(orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type)
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -349,7 +350,7 @@ export const BusinessBasicInformation = (props) => {
             </BusinessInfoItem>
           </BusinessInfo>
         </BusinessInfoContent>
-        {(categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
+        {!hideSearch && (categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
           <SearchComponent />
         )}
       </BusinessInfoContainer>

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

@@ -62,7 +62,8 @@ const BusinessControllerUI = (props) => {
     businessDeliveryTime,
     businessPickupTime,
     businessDistance,
-    handleFavoriteBusiness
+    handleFavoriteBusiness,
+    businessState
   } = props
   const [configState] = useConfig()
   const theme = useTheme()
@@ -78,6 +79,13 @@ const BusinessControllerUI = (props) => {
   const favoriteRef = useRef(null)
 
   const businessRows = orderingTheme?.theme?.business_listing_view?.components?.layout?.rows
+  const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
+  const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
+  const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
+  const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
+  const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
+  const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+  const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
 
   // const handleShowAlert = () => {
   //   setAlertState({ open: true, content: [t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The Business is closed at the moment')] })
@@ -92,7 +100,7 @@ const BusinessControllerUI = (props) => {
 
   const handleChangeFavorite = () => {
     if (auth) {
-      handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+      handleFavoriteBusiness && handleFavoriteBusiness(!businessState?.business?.favorite)
     } else {
       setModalPageToShow('login')
       setIsModalOpen(true)
@@ -157,13 +165,13 @@ const BusinessControllerUI = (props) => {
             {isSkeleton ? (
               <Skeleton height={isCustomerMode ? 100 : 140} />
             ) : (
-              <BusinessHeader bgimage={optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessLogo), 'h_400,c_limit')} isClosed={!isBusinessOpen}>
+              <BusinessHeader bgimage={optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessHeader), 'h_400,c_limit')} isClosed={!isBusinessOpen}>
                 <BusinessTags>
                   {(businessFeatured ?? business?.featured) &&
                     <span className='crown'>
                       <FaCrown />
                     </span>}
-                  {!isCustomLayout && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+                  {!hideBusinessOffer && !isCustomLayout && (configState?.configs?.preorder_status_enabled?.value === '1') && (
                     <div>
                       {getBusinessOffer((businessOffers ?? business?.offers)) && <span>{getBusinessOffer((businessOffers ?? business?.offers)) || parsePrice(0)}</span>}
                       {!isBusinessOpen && <span>{t('PREORDER', 'PreOrder')}</span>}
@@ -179,33 +187,41 @@ const BusinessControllerUI = (props) => {
           </BusinessHero>
           <BusinessContent>
             <BusinessLogoWrapper>
-              <WrapperBusinessLogo isSkeleton={isSkeleton} isCustomerMode={isCustomerMode}>
-                {!isSkeleton && (businessLogo || business?.logo || theme.images?.dummies?.businessLogo) ? (
-                  <BusinessLogo bgimage={optimizeImage((businessLogo || business?.logo || theme.images?.dummies?.businessLogo), 'h_200,c_limit')} />
-                ) : (
-                  <Skeleton height={70} width={70} />
-                )}
-              </WrapperBusinessLogo>
-              <BusinessStarInfo>
-                {!isSkeleton ? (
-                  (businessReviews ?? business?.reviews?.total) > 0 && (
-                    <div className='reviews'>
-                      <BisStar />
-                      <span>{(businessReviews ?? business?.reviews?.total)}</span>
-                    </div>
-                  )
-                ) : (
-                  <Skeleton width={50} />
-                )}
-                <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
-                  {!isSkeleton ? (
-                    <>
-                      {(business?.favorite) ? <Like /> : <DisLike />}
-                    </>
+              {!hideBusinessLogo && (
+                <WrapperBusinessLogo isSkeleton={isSkeleton} isCustomerMode={isCustomerMode}>
+                  {!isSkeleton && (businessLogo || business?.logo || theme.images?.dummies?.businessLogo) ? (
+                    <BusinessLogo bgimage={optimizeImage((businessLogo || business?.logo || theme.images?.dummies?.businessLogo), 'h_200,c_limit')} />
                   ) : (
-                    <Skeleton width={16} height={16} />
+                    <Skeleton height={70} width={70} />
                   )}
-                </FavoriteWrapper>
+                </WrapperBusinessLogo>
+              )}
+              <BusinessStarInfo>
+                {!hideBusinessReviews && (
+                  <>
+                    {!isSkeleton ? (
+                      (businessReviews ?? business?.reviews?.total) > 0 && (
+                        <div className='reviews'>
+                          <BisStar />
+                          <span>{(businessReviews ?? business?.reviews?.total)}</span>
+                        </div>
+                      )
+                    ) : (
+                      <Skeleton width={50} />
+                    )}
+                  </>
+                )}
+                {!hideBusinessFavorite && (
+                  <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
+                    {!isSkeleton ? (
+                      <>
+                        {(businessState?.business?.favorite) ? <Like /> : <DisLike />}
+                      </>
+                    ) : (
+                      <Skeleton width={16} height={16} />
+                    )}
+                  </FavoriteWrapper>
+                )}
               </BusinessStarInfo>
             </BusinessLogoWrapper>
             <BusinessInfo className='info'>
@@ -218,7 +234,7 @@ const BusinessControllerUI = (props) => {
                   )}
                 </div>
                 <Medadata isCustomerMode={isCustomerMode} isSkeleton={isSkeleton}>
-                  {orderType === 1 && (
+                  {!hideBusinessFee && orderType === 1 && (
                     <>
                       {(businessDeliveryPrice ?? business?.delivery_price) >= 0 ? (
                         <p>
@@ -230,21 +246,29 @@ const BusinessControllerUI = (props) => {
                       )}
                     </>
                   )}
-                  {Object.keys(business).length > 0 ? (
-                    <p className='bullet'>
-                      <GoPrimitiveDot />
-                      {convertHoursToMinutes(orderState?.options?.type === 1 ? (businessDeliveryTime ?? business?.delivery_time) : (businessPickupTime ?? business?.pickup_time)) || <Skeleton width={100} />}
-                    </p>
-                  ) : (
-                    <Skeleton width={65} />
+                  {!hideBusinessTime && (
+                    <>
+                      {Object.keys(business).length > 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {convertHoursToMinutes(orderState?.options?.type === 1 ? (businessDeliveryTime ?? business?.delivery_time) : (businessPickupTime ?? business?.pickup_time)) || <Skeleton width={100} />}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
                   )}
-                  {(businessDistance ?? business?.distance) >= 0 ? (
-                    <p className='bullet'>
-                      <GoPrimitiveDot />
-                      {parseDistance((businessDistance ?? business?.distance))}
-                    </p>
-                  ) : (
-                    <Skeleton width={65} />
+                  {!hideBusinessDistance && (
+                    <>
+                      {(businessDistance ?? business?.distance) >= 0 ? (
+                        <p className='bullet'>
+                          <GoPrimitiveDot />
+                          {parseDistance((businessDistance ?? business?.distance))}
+                        </p>
+                      ) : (
+                        <Skeleton width={65} />
+                      )}
+                    </>
                   )}
                   {isCustomerMode && hasInformationLength && (
                     <CallCenterInformation>

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

@@ -39,10 +39,10 @@ export const BusinessReviewsUI = (props) => {
     if (raiting) handleClickOption(raiting)
   }
 
-  const showRanking = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.ranking?.hidden
-  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.review_date?.hidden
-  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.customer_comments?.hidden
-  const showSearch = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.search?.hidden
+  const showRanking = !orderingTheme?.theme?.business_view?.components?.review?.components?.ranking?.hidden
+  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.review?.components?.review_date?.hidden
+  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.review?.components?.customer_comments?.hidden
+  const showSearch = !orderingTheme?.theme?.business_view?.components?.review?.components?.search?.hidden
   const hideElement = !(!showReviewDate && !showCustomerComments)
 
   const reviewPoints = [1, 2, 3, 4, 5]

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

@@ -96,7 +96,9 @@ const BusinessesListingUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
   const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
-
+  const hideSearch = theme?.business_listing_view?.components?.search?.hidden
+  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
+  const hideSearchSection = hideCities && hideSearch && hideFilter
   const businessesIds = isCustomLayout &&
     businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
@@ -314,23 +316,25 @@ const BusinessesListingUI = (props) => {
         {isCustomerMode && (
           <OrdersSection titleContent={t('PREVIOUS_ORDERS', 'Previous orders')} />
         )}
-        {!isCustomerMode && (
+        {!isCustomerMode && !hideSearchSection && (
           <>
             <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>
-              <SearchBar
-                lazyLoad
-                search={searchValue}
-                isCustomLayout={isCustomLayout}
-                placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
-                onSearch={handleChangeSearch}
-                handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
-              />
+              {!hideSearch && (
+                <SearchBar
+                  lazyLoad
+                  search={searchValue}
+                  isCustomLayout={isCustomLayout}
+                  placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+                  onSearch={handleChangeSearch}
+                  handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
+                />
+              )}
               {!hideCities && citiesState?.cities?.length > 0 && (
                 <Button color='primary' onClick={handleOpenCities}>
                   {citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)?.name || t('SELECT_A_CITY', 'Select a city')}
                 </Button>
               )}
-              {configs?.advanced_business_search_enabled?.value === '1' && (
+              {!hideFilter && configs?.advanced_business_search_enabled?.value === '1' && (
                 <FiFilter onClick={() => onRedirectPage({ page: 'business_search' })} />
               )}
               {isCustomLayout && (

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

@@ -15,6 +15,7 @@ import { TextArea } from '../../styles/Inputs'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
 import { CartStoresListing } from '../../../../franchise/src/components/CartStoresListing'
 import { DriverTips } from '../DriverTips'
+import { ServiceForm } from '../ServiceForm'
 import {
   CartContainer,
   OrderBill,
@@ -565,15 +566,29 @@ const CartUI = (props) => {
             onClose={() => setModalIsOpen(false)}
             disableOverflowX
           >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-            />
+            {!curProduct?.calendar_event ? (
+              <ProductForm
+                isCartProduct
+                productCart={curProduct}
+                businessSlug={cart?.business?.slug}
+                businessId={cart?.business_id}
+                categoryId={curProduct?.category_id}
+                productId={curProduct?.id}
+                onSave={handlerProductAction}
+              />
+            ) : (
+              <ServiceForm
+                isCartProduct
+                isService
+                productCart={curProduct}
+                businessSlug={cart?.business?.slug}
+                businessId={cart?.business_id}
+                categoryId={curProduct?.category_id}
+                productId={curProduct?.id}
+                onSave={handlerProductAction}
+                professionalSelected={curProduct?.calendar_event?.professional}
+              />
+            )}
           </Modal>
           <Modal
             width='70%'

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

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTheme } from 'styled-components'
 import { OriginalHomeHero } from './layouts/OriginalHomeHero'
 import { RedHomeHero } from './layouts/RedHomeHero'
 import { StarbucksHomeHero } from './layouts/StarbucksHomeHero'
 
 export const HomeHero = (props) => {
+  const theme = useTheme()
   const HomeLayoutConfig = {
     homepage_settings: {
-      layout: 'original', // 'original', 'starbucks', 'red'
-      contentPosition: 'left' // 'left', 'right', top, 'bottom', 'center'
+      layout: theme?.homepage_view?.components?.layout?.type || 'original', // 'original', 'starbucks', 'red'
+      contentPosition: theme?.homepage_view?.components?.layout?.position || 'left' // 'left', 'right', top, 'bottom', 'center'
     }
   }
   const layout = HomeLayoutConfig?.homepage_settings?.layout !== undefined

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

@@ -178,7 +178,11 @@ export const SingleOrderHeader = styled.div`
   > div {
     > div {
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: center; 
+      @media (min-width: 769px) {
+        flex-direction: row;
+      }
       p {
         line-height: 24px;
         font-size: 14px;

package/src/themes/five/src/components/OrderDetails/OrderActionsSection.js

@@ -0,0 +1,33 @@
+import { useLanguage } from 'ordering-components-external'
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+import { MyOrderActions } from './styles'
+
+export const OrderActionsSection = (props) => {
+  const {
+    userCustomerId,
+    isService,
+    handleGoToPage
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <>
+      {!userCustomerId && (
+        <MyOrderActions>
+          <Button
+            color='primary'
+            outline
+            onClick={() => handleGoToPage({ page: 'orders' })}
+          >
+            {isService
+              ? t('YOUR_APPOINTMENTS', 'Your appointments')
+              : t('YOUR_ORDERS', theme?.defaultLanguages?.YOUR_ORDERS || 'Your Orders')}
+          </Button>
+        </MyOrderActions>
+      )}
+    </>
+  )
+}

package/src/themes/five/src/components/OrderDetails/OrderHeaderInfoSection.js

@@ -0,0 +1,20 @@
+import { useLanguage } from 'ordering-components-external'
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { HeaderInfo } from './styles'
+
+export const OrderHeaderInfoSection = (props) => {
+  const {
+    isService
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <HeaderInfo>
+      <h1>{isService ? t('SERVICES', 'Services') : t('ORDER_MESSAGE_RECEIVED', theme?.defaultLanguages?.ORDER_MESSAGE_RECEIVED || 'Your order has been received')}</h1>
+      <p>{!isService && t('ORDER_MESSAGE_HEADER_TEXT', theme?.defaultLanguages?.ORDER_MESSAGE_HEADER_TEXT || 'Once business accepts your order, we will send you an email, thank you!')}</p>
+    </HeaderInfo>
+  )
+}