ordering-ui-external 1.0.1 → 1.1.2

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

@@ -3,18 +3,19 @@ import { OriginalBusinessesListing } from './layouts/OriginalBusinessesListing'
 import { RedBusinessesListing } from './layouts/RedBusinessesListing'
 import { StarbucksBusinessesListing } from './layouts/StarbucksBusinessesListing'
 import { BusinessListing as AppointmentsBusinessListing } from './layouts/AppointmentsBusinessListing'
-import { useTheme } from 'styled-components'
+import { useOrderingTheme } from 'ordering-components-external'
 
 export const BusinessesListing = (props) => {
-  const theme = useTheme()
-  const layout = theme?.layouts?.business_view?.components?.layout?.type || 'original'
+  const { logosLayout } = props
+  const [orderingTheme] = useOrderingTheme()
+  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
 
   return (
     <>
-      {(layout === 'original') && <OriginalBusinessesListing {...props} />}
-      {(layout === 'starbucks') && <StarbucksBusinessesListing {...props} />}
-      {(layout === 'red') && <RedBusinessesListing {...props} />}
-      {(layout === 'appointments') && <AppointmentsBusinessListing {...props} />}
+      {(layout === 'original' || logosLayout) && <OriginalBusinessesListing {...props} />}
+      {(layout === 'starbucks') && !logosLayout && <StarbucksBusinessesListing {...props} />}
+      {(layout === 'red') && !logosLayout && <RedBusinessesListing {...props} />}
+      {(layout === 'appointments') && !logosLayout && <AppointmentsBusinessListing {...props} />}
     </>
   )
 }

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { SearchBar } from '../../../SearchBar'
+import FiFilter from '@meronex/icons/fi/FiFilter'
 import {
   useLanguage,
   useOrder,
@@ -63,7 +64,8 @@ const BusinessListingUI = (props) => {
     handleChangeSearch,
     handleBusinessClick,
     businessTypeSelected,
-    handleUpdateBusinessList
+    handleUpdateBusinessList,
+    onRedirectPage
   } = props
 
   const [, t] = useLanguage()
@@ -137,7 +139,11 @@ const BusinessListingUI = (props) => {
             search={searchValue}
             onSearch={handleChangeSearch}
             placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+            handleCustomEnter={term => configState?.configs?.advanced_business_search_enabled?.value === '1' && onRedirectPage({ page: 'business_search' })}
           />
+          {configState?.configs?.advanced_business_search_enabled?.value === '1' && (
+            <FiFilter onClick={() => onRedirectPage({ page: 'business_search' })} />
+          )}
         </WrapperSearch>
         <FilterWrapper>
           <TypeFilterWrapper>
@@ -152,7 +158,7 @@ const BusinessListingUI = (props) => {
           <PriceFilterWrapper>
             <h3>{t('PRICE', 'Price')}</h3>
             <PriceFilterListWrapper>
-              {priceList.slice(0, 3).map((price, i) => (
+              {priceList.map((price, i) => (
                 <Button
                   key={i}
                   color={(priceLevelSelected === price?.level) ? 'primary' : 'lightGray'}
@@ -168,7 +174,7 @@ const BusinessListingUI = (props) => {
         <PreorderAndBusinessWrapper>
           <PreorderWrapper>
             <PreorderContent>
-              <h2>{t('AVAILABLE_POINTS', 'Available points')}</h2>
+              <h2>{t('AVAILABLE_APPOINTMENTS', 'Available appointments')}</h2>
               <AddressWrapper>
                 <AddressHeader>
                   <h2>{t('ADDRESS', 'Address')}</h2>

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

@@ -12,6 +12,11 @@ export const BusinessListContainer = styled.div`
 `
 
 export const WrapperSearch = styled.div`
+  display: flex;
+  align-items: center;
+  > svg {
+    margin: 0px 5px
+  }
   input {
     width: 100%;
   }
@@ -118,7 +123,8 @@ export const PreorderWrapper = styled.div`
   }
 
   @media (min-width: 800px) {
-    width: 300px;
+    width: 350px;
+    min-width: 350px;
   }
 `
 
@@ -222,7 +228,7 @@ export const BusinessList = styled.div`
 
   @media (min-width: 576px) {
     margin-left: -20px;
-    width: calc(100% + 40px);
+    width: 100%;
   }
 `
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Cart as CartController, useOrder, useLanguage, useEvent, useUtils, useValidationFields, useConfig } from 'ordering-components-external'
+import { Cart as CartController, useOrder, useLanguage, useEvent, useUtils, useValidationFields, useConfig, useOrderingTheme, useSite } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
 import { ProductItemAccordion } from '../ProductItemAccordion'
 import { BusinessItemAccordion } from '../BusinessItemAccordion'
@@ -61,8 +61,10 @@ const CartUI = (props) => {
   const [orderState] = useOrder()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
+  const [orderingTheme] = useOrderingTheme()
   const [validationFields] = useValidationFields()
   const [{ configs }] = useConfig()
+  const [{ site }] = useSite()
   const windowSize = useWindowSize()
 
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -74,12 +76,15 @@ const CartUI = (props) => {
   const [isUpselling, setIsUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
 
+  const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
+
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
   const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
   const openCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum) || null) || []
 
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
-
+  const viewString = isStore ? 'business_view' : 'header'
+  const hideCartComments = orderingTheme?.theme?.[viewString]?.components?.cart?.components?.comments?.hidden
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet')
@@ -120,7 +125,12 @@ const CartUI = (props) => {
   }
 
   const handleStoreRedirect = (slug) => {
-    events.emit('go_to_page', { page: 'business', params: { store: slug } })
+    if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+      events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+    } else {
+      events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+    }
+
     if (windowSize.width <= 768) {
       onClickCheckout && onClickCheckout()
     }
@@ -240,6 +250,7 @@ const CartUI = (props) => {
                 offsetDisabled={offsetDisabled}
                 onDeleteProduct={handleDeleteClick}
                 onEditProduct={handleEditProduct}
+                isStore={isStore}
               />
             ))}
             {!cart?.valid_products && (
@@ -407,7 +418,7 @@ const CartUI = (props) => {
                     </tr>
                   </tbody>
                 </table>
-                {cart?.status !== 2 && (
+                {cart?.status !== 2 && !hideCartComments && (
                   <table className='comments'>
                     <tbody>
                       <tr>

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

@@ -24,15 +24,18 @@ export const OrderBill = styled.div`
   table {
     width: 100%;
     font-size: 14px;
+
     td span {
       unicode-bidi: bidi-override;
     }
+
     tr td:nth-child(2) {
       text-align: right;
       ${props => props.theme?.rtl && css`
         text-align: left;
     `}
     }
+
     .icon {
       display: flex;
       align-items: center;
@@ -83,6 +86,7 @@ export const OrderBill = styled.div`
 export const CouponContainer = styled.div`
   width: 100%;
   margin: 10px;
+
   input, button {
     border-radius: 7.6px;
   }
@@ -102,6 +106,7 @@ export const CheckoutAction = styled.div`
     font-size: 18px;
     color: ${props => props.theme.colors.darkTextColor};
   }
+
   button {
     padding: 10px 30px;
     min-width: 150px;
@@ -118,6 +123,7 @@ export const Divider = styled.div`
   height: 8px;
   width: 100%;
   margin-left: 0;
+
   @media (min-width: 768px) {
     width: calc(100% + 60px);
     margin-left: -30px;

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

@@ -10,7 +10,10 @@ export const CartContent = (props) => {
     carts,
     isOrderStateCarts,
     isCartPopover,
-    isForceOpenCart
+    isForceOpenCart,
+    setPreorderBusiness,
+    isOpenCart,
+    isSlideBar
   } = props
 
   const [, t] = useLanguage()
@@ -38,18 +41,10 @@ export const CartContent = (props) => {
 
   return (
     <>
-      {
-      props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))
-      }
-      {
-      props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))
-      }
       <Container>
-        <Title>{t('YOUR_CART', 'Your cart')}</Title>
+        {!isSlideBar && (
+          <Title>{t('YOUR_CART', 'Your cart')}</Title>
+        )}
         {isOrderStateCarts && carts?.length > 0 &&
           carts.map(cart => (
             <React.Fragment key={cart.uuid}>
@@ -58,11 +53,13 @@ export const CartContent = (props) => {
                   isCartPending={cart?.status === 2}
                   cart={cart}
                   isCartPopover={isCartPopover}
-                  isCheckout={window.location.pathname === `/checkout/${cart?.uuid}`}
+                  isCheckout={window.location.pathname === `/checkout/${cart?.uuid}` && !isCartPopover}
                   isForceOpenCart={isForceOpenCart}
                   currentCartUuid={currentCartUuid}
                   isProducts={cart.products.length}
                   onClickCheckout={props.onClose}
+                  setPreorderBusiness={setPreorderBusiness}
+                  isOpenCart={isOpenCart}
                 />
               )}
             </React.Fragment>
@@ -74,16 +71,6 @@ export const CartContent = (props) => {
           </NotCarts>
         )}
       </Container>
-      {
-      props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))
-      }
-      {
-      props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))
-      }
     </>
   )
 }

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

@@ -4,19 +4,25 @@ import { usePopper } from 'react-popper'
 import {
   HeaderItem,
   PopoverBody,
-  PopoverArrow
+  PopoverArrow,
+  TitleContainer,
+  Title
 } from './styles'
 
-import { useOrder, useEvent } from 'ordering-components-external'
+import { useOrder, useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { CartContent } from '../CartContent'
+import { Modal } from '../Modal'
+import { Button } from '../../styles/Buttons'
+import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
 
 export const CartPopover = (props) => {
-  const { open, auth, location, isCustomerMode } = props
+  const { open, auth, location, isCustomerMode, setPreorderBusiness } = props
   const [orderState] = useOrder()
   const theme = useTheme()
   const [events] = useEvent()
-
+  const [, t] = useLanguage()
+  const [orderingTheme] = useOrderingTheme()
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -35,6 +41,8 @@ export const CartPopover = (props) => {
 
   const { styles, attributes, forceUpdate } = popper
 
+  const isSlideBar = orderingTheme?.theme?.header?.components?.cart?.open_strategy?.type === 'slide'
+
   useEffect(() => {
     // forceUpdate && forceUpdate()
   }, [open, orderState])
@@ -100,15 +108,45 @@ export const CartPopover = (props) => {
             {props.carts?.length > 0 && <span>{props.carts?.length}</span>}
           </span>
         </HeaderItem>
-        <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
-          <CartContent
-            isCartPopover
-            carts={props.carts}
-            isOrderStateCarts={!!orderState.carts}
+        {isSlideBar ? (
+          <Modal
+            open={open}
             onClose={props.onClose}
-          />
-          <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
-        </PopoverBody>
+            hideCloseDefault
+            isSlideBar
+            slideBarPosition={orderingTheme?.theme?.header?.components?.cart?.open_strategy?.position}
+          >
+            <TitleContainer>
+              <Title>{t('MY_CART', 'My cart')}</Title>
+              <Button outline color='primary' onClick={props.onClose}>
+                <AiOutlineClose /> {t('CLOSE', 'Close')}
+              </Button>
+            </TitleContainer>
+            <CartContent
+              isCartPopover
+              carts={props.carts}
+              isOrderStateCarts={!!orderState.carts}
+              onClose={props.onClose}
+              setPreorderBusiness={setPreorderBusiness}
+              isOpenCart={open}
+              onClick={props.onClick}
+              isSlideBar={isSlideBar}
+            />
+          </Modal>
+        ) : (
+          <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
+            <CartContent
+              isCartPopover
+              carts={props.carts}
+              isOrderStateCarts={!!orderState.carts}
+              onClose={props.onClose}
+              setPreorderBusiness={setPreorderBusiness}
+              isOpenCart={open}
+              onClick={props.onClick}
+            />
+            <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
+          </PopoverBody>
+        )}
       </div>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -43,3 +43,30 @@ export const PopoverArrow = styled.div`
   border-bottom: 8px solid #FFF;
   top: -8px;
 `
+
+export const Title = styled.h1`
+  font-weight: 600;
+  font-size: 20px;
+  color: ${props => props.theme.colors.darkTextColor};
+  margin-bottom: 8px;
+  line-height: 30px;
+  margin-top: 0;
+  text-align: center;
+
+  @media (min-width: 576px) {
+    text-align: left;
+  }
+`
+
+export const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  button {
+    display: flex;
+    align-items: center;
+    border-radius: 16px;
+    svg{
+      margin-right: 5px;
+    }
+  }
+`

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import VscWarning from '@meronex/icons/vsc/VscWarning'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
+import { Modal } from '../Modal'
 import {
   Checkout as CheckoutController,
   useOrder,
@@ -106,6 +107,9 @@ const CheckoutUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(null)
   const [behalfName, setBehalfName] = useState(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [requiredFields, setRequiredFields] = useState([])
+  const [isSuccess, setIsSuccess] = useState(false)
 
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
@@ -140,7 +144,7 @@ const CheckoutUI = (props) => {
   })
 
   const handlePlaceOrder = () => {
-    if (!userErrors.length) {
+    if (!userErrors.length && !requiredFields?.length) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -148,6 +152,10 @@ const CheckoutUI = (props) => {
       handlerClickPlaceOrder && handlerClickPlaceOrder(null, body)
       return
     }
+    if (requiredFields?.length) {
+      setIsOpen(true)
+      return
+    }
     setAlertState({
       open: true,
       content: Object.values(userErrors).map(error => error)
@@ -168,11 +176,12 @@ const CheckoutUI = (props) => {
     const errors = []
     const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
     const userSelected = isCustomerMode ? customerState.user : user
+    const _requiredFields = []
 
     Object.values(validationFields?.fields?.checkout).map(field => {
       if (field?.enabled && field?.required && !notFields.includes(field.code)) {
         if (userSelected && !userSelected[field?.code]) {
-          errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+          _requiredFields.push(field?.code)
         }
       }
     })
@@ -184,8 +193,9 @@ const CheckoutUI = (props) => {
         validationFields?.fields?.checkout?.cellphone?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
-      errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+      _requiredFields.push('cellphone')
     }
+    setRequiredFields(_requiredFields)
 
     if (userSelected && userSelected?.cellphone) {
       if (userSelected?.country_phone_code) {
@@ -289,6 +299,7 @@ const CheckoutUI = (props) => {
                       isCustomerMode={isCustomerMode}
                       userData={isCustomerMode && customerState.user}
                       userId={isCustomerMode && customerState?.user?.id}
+                      isSuccess={isSuccess}
                       isCheckout
                     />
                   )}
@@ -524,6 +535,30 @@ const CheckoutUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={isOpen}
+        width='760px'
+        padding='30px'
+        onClose={() => setIsOpen(false)}
+      >
+        <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}
+          requiredFields={requiredFields}
+          setIsSuccess={setIsSuccess}
+          isCheckout
+          isEdit
+          isModal
+          onClose={() => setIsOpen(false)}
+        />
+      </Modal>
     </Container>
   )
 }

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

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils } from 'ordering-components-external'
@@ -411,10 +412,9 @@ export const Header = (props) => {
         )}
         {modalIsOpen && (
           <Modal
-            title={(modalSelected === 'address') ? t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?') : null}
             open={modalIsOpen}
             onClose={() => setModalIsOpen(false)}
-            width='700px'
+            width={modalSelected === 'address' ? '70%' : '700px'}
           >
             {modalSelected === 'cart' && (
               <CartContent
@@ -430,7 +430,6 @@ export const Header = (props) => {
                   changeOrderAddressWithDefault
                   userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
                   onCancel={() => setModalIsOpen(false)}
-                  onAccept={() => setModalIsOpen(false)}
                   isCustomerMode={isCustomerMode}
                 />
               ) : (

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

@@ -69,7 +69,7 @@ export const KioskHomeHero = (props) => {
             <Button
               color='primary'
               name='find-business'
-              style={{ width: 'auto' }}
+              style={{ width: 'auto', padding: '5px 20px' }}
             >
               {t('TOUCH_ANYWHERE_TO_ORDER', theme?.defaultLanguages?.TOUCH_ANYWHERE_TO_ORDER || 'Touch anywhere to order')}
             </Button>

package/src/themes/five/src/components/HomeHero/layouts/KioskHomeHero/styles.js

@@ -38,6 +38,6 @@ export const HeroContent = styled.div`
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    padding-bottom: 30px;
+    padding-bottom: 60px;
   }
 `

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

@@ -43,8 +43,8 @@ export const HorizontalOrdersLayout = (props) => {
           <BeforeComponent key={i} {...props} />))}
         {orders.length > 0 && !notOrders && ordersToShow.map(order => (
           <SingleOrderCard
-            key={order.id}
             {...props}
+            key={order.id}
             order={order}
           />
         ))}
@@ -87,8 +87,8 @@ export const HorizontalOrdersLayout = (props) => {
           <AutoScroll scrollId={activeOrders ? 'activeOrders' : (pastOrders ? 'pastOrders' : 'prevOrders')}>
             {orders.length > 0 && ordersToShow.map(order => (
               <SingleOrderCard
-                key={order.id}
                 {...props}
+                key={order.id}
                 order={order}
               />
             ))}

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

@@ -27,6 +27,7 @@ export const Price = styled.div`
     flex-direction: column;
     align-items: flex-end;
   `}
+
   h2 {
     font-size: 16px;
     margin-block-end: ${({ isBusinessesPage }) => isBusinessesPage ? '0.1em' : '1em'};
@@ -42,10 +43,12 @@ export const Price = styled.div`
     text-overflow: ellipsis;
     margin-left: 5px;
   }
+
   p[name='view-cart']{
     color: ${props => props.theme.colors.primary};
     cursor: pointer;
   }
+
   @media (min-width: 480px) {
     ${({ isCustomerMode }) => !isCustomerMode && css`
       flex-direction: row;
@@ -63,6 +66,7 @@ export const Card = styled.div`
   display: inline-block;
   text-align: left;
   transition: all 0.3s ease;
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
     min-width: 300px;
     width: 300px;
@@ -73,28 +77,35 @@ export const Card = styled.div`
     height: ${({ isBusinessesPage }) => isBusinessesPage && '300px'};
     max-height: ${({ isBusinessesPage }) => isBusinessesPage ? '300px' : '220px'};
   `}
+
   &:hover {
     box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
   }
+
   button.load-orders {
     padding: 10px 30px;
   }
+
   ${props => props.theme?.rtl && css`
     text-align: right;
   `}
+
   ${props => (props.nobg || props.isBusinessesPage) && css`
     background: transparent;
   `}
+
   ${props => props.flex && css`
     display: flex;
     align-items: center;
     justify-content: center;
   `}
+
   @media (min-width: 480px) {
     min-width: 430px;
     max-height: ${({ isBusinessesPage }) => isBusinessesPage ? '300px' : '250px'};
     width: 430px;
   }
+
   @media(min-width: 993px){
     ${({ isBusinessesPage }) => isBusinessesPage && css`
       margin: 30px 20px;
@@ -119,11 +130,14 @@ const BusinessLogoWrapperStyled = styled.div`
   align-items: center;
   border-radius: 7.6px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+
   margin-left: 8px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 8px;
   `}
+
   @media (min-width: 576px) {
     width: 86px;
     min-width: 86px;
@@ -153,6 +167,7 @@ export const ButtonWrapper = styled.div`
   top: 4px;
   display: flex;
   align-items: center;
+
   button {
     border-radius: 50px;
     font-size: 10px;
@@ -160,6 +175,7 @@ export const ButtonWrapper = styled.div`
     padding: 4px 8px;
     border: 1px solid ${props => props.theme.colors.primaryContrast};
     margin: 5px;
+
     &.reorder {
       background: ${props => props.theme.colors.primaryContrast};
       &:hover {
@@ -174,11 +190,13 @@ export const Logo = styled.div`
   height: 55px;
   filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
   border-radius: 7.6px;
+
   img {
     width: 100%;
     height: 100%;
     border-radius: 7.6px;
   }
+
   @media (min-width: 480px){
     width: 86px;
     height: 86px;