ordering-ui-external 1.9.1 → 1.9.3

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

@@ -134,22 +134,19 @@ const BusinessProductsListUI = (props) => {
               )}
             </HeaderWrapper>
             <ProductsListing>
-              {
-                productsCategorySelected
-                  ?.filter(product => product?.category_id === category?.id)
-                  ?.map((product, i) => (
-                    <SingleProductCard
-                      key={i}
-                      isSoldOut={(product.inventoried && !product.quantity)}
-                      product={product}
-                      useKioskApp={useKioskApp}
-                      businessId={businessId}
-                      onProductClick={onProductClick}
-                      isCartOnProductsList={isCartOnProductsList}
-                      handleUpdateProducts={handleUpdateProducts}
-                      productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                    />
-                  ))
+              {productsCategorySelected.map((product, i) => (
+                <SingleProductCard
+                  key={i}
+                  isSoldOut={(product.inventoried && !product.quantity)}
+                  product={product}
+                  useKioskApp={useKioskApp}
+                  businessId={businessId}
+                  onProductClick={onProductClick}
+                  isCartOnProductsList={isCartOnProductsList}
+                  handleUpdateProducts={handleUpdateProducts}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                />
+              ))
               }
             </ProductsListing>
             {isSearchMode && category?.subcategories?.length > 0 && category?.subcategories?.filter(subcategory => productsCategorySelected?.some(product => product?.category_id === subcategory?.id))?.map(subcategory => (
@@ -196,6 +193,19 @@ const BusinessProductsListUI = (props) => {
                           productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
+                      {!categoryState?.loading && categoryState?.products?.length > 9 && (
+                        <SingleProductCard
+                          useCustomFunctionality
+                          onCustomClick={() => onClickCategory(category)}
+                          isCartOnProductsList={isCartOnProductsList}
+                          handleUpdateProducts={handleUpdateProducts}
+                          customText={t('MORE', 'More')}
+                          customStyle={{
+                            display: 'flex',
+                            justifyContent: 'center'
+                          }}
+                        />
+                      )}
                     </ProductsListing>
                   </WrapAllCategories>
                 )
@@ -256,7 +266,7 @@ const BusinessProductsListUI = (props) => {
                       <ProductsListing isSubcategorySearch={isSubcategorySearch}>
                         {isSearchMode && category?.subcategories?.length > 0 ? (
                           <>
-                            {products?.filter(product => product?.category_id === category?.id)?.map((product, i) => (
+                            {products?.filter((product, i) => i < 9 && product?.category_id === category?.id)?.map((product, i) => (
                               <SingleProductCard
                                 key={i}
                                 isSoldOut={product.inventoried && !product.quantity}
@@ -269,11 +279,24 @@ const BusinessProductsListUI = (props) => {
                                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                               />
                             ))}
+                            {!categoryState?.loading && products?.length > 9 && (
+                              <SingleProductCard
+                                useCustomFunctionality
+                                onCustomClick={() => onClickCategory(category)}
+                                isCartOnProductsList={isCartOnProductsList}
+                                handleUpdateProducts={handleUpdateProducts}
+                                customText={t('MORE', 'More')}
+                                customStyle={{
+                                  display: 'flex',
+                                  justifyContent: 'center'
+                                }}
+                              />
+                            )}
                           </>
                         ) : (
                           <>
                             {
-                              products.map((product, i) => (
+                              products.filter((_, i) => i < 9).map((product, i) => (
                                 <SingleProductCard
                                   key={i}
                                   isSoldOut={product.inventoried && !product.quantity}
@@ -287,6 +310,19 @@ const BusinessProductsListUI = (props) => {
                                 />
                               ))
                             }
+                            {!categoryState?.loading && products?.length > 9 && (
+                              <SingleProductCard
+                                useCustomFunctionality
+                                onCustomClick={() => onClickCategory(category)}
+                                isCartOnProductsList={isCartOnProductsList}
+                                handleUpdateProducts={handleUpdateProducts}
+                                customText={t('MORE', 'More')}
+                                customStyle={{
+                                  display: 'flex',
+                                  justifyContent: 'center'
+                                }}
+                              />
+                            )}
                           </>
                         )}
                         {

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

@@ -26,7 +26,9 @@ import {
   BusinessCartContent,
   EmptyCart,
   EmptyBtnWrapper,
-  Title
+  Title,
+  HeaderContent,
+  OrderContextUIWrapper
 } from './styles'
 
 import { NotFoundSource } from '../NotFoundSource'
@@ -42,6 +44,8 @@ import { Alert } from '../../../../../components/Confirm'
 import { FloatingButton } from '../../../../../components/FloatingButton'
 import { UpsellingPage } from '../../../../../components/UpsellingPage'
 import { ServiceForm } from '../ServiceForm'
+import { OrderContextUI } from '../OrderContextUI'
+
 const PIXELS_TO_SCROLL = 300
 
 const BusinessProductsListingUI = (props) => {
@@ -284,7 +288,15 @@ const BusinessProductsListingUI = (props) => {
     <>
       <ProductsContainer>
         {!props.useKioskApp && (
-          <ArrowLeft onClick={() => handleGoToBusinessList()} />
+          // <ArrowLeft onClick={() => handleGoToBusinessList()} />
+          <HeaderContent>
+            <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
+            {windowSize?.width < 576 && (
+              <OrderContextUIWrapper>
+                <OrderContextUI isCheckOut />
+              </OrderContextUIWrapper>
+            )}
+          </HeaderContent>
         )}
         <RenderProductsLayout
           errors={errors}

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

@@ -3,12 +3,6 @@ import styled, { css } from 'styled-components'
 export const ProductsContainer = styled.div`
   width: 95%;
   margin: 20px auto 0px;
-  > svg {
-    color: ${props => props.theme.colors.headingColor};
-    font-size: 24px;
-    cursor: pointer;
-    margin-bottom: 5px;
-  }
 `
 
 export const ProductLoading = styled.div`
@@ -135,3 +129,21 @@ export const EmptyBtnWrapper = styled.div`
     padding-right: 25px;
   }
 `
+
+export const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .back-arrow {
+    font-size: 24px;
+    cursor: pointer;
+  }
+`
+export const OrderContextUIWrapper = styled.div`
+  flex: 1;
+  width: 100%;
+  ${props => props.theme.rtl && css`
+    margin-left: 0px;
+    margin-right: 15px;
+  `}
+`

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

@@ -2,7 +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 FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 import {
   useOrder,
   useSession,
@@ -24,10 +23,6 @@ import {
   BusinessLogo,
   BusinessLogosContainer,
   BusinessBanner,
-  BusinessFeatures,
-  AddressMenu,
-  FeatureItems,
-  ItemInline,
   BusinessLogosWrapper
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
@@ -36,8 +31,6 @@ import { NotFoundSource } from '../../../NotFoundSource'
 
 import { Modal } from '../../../Modal'
 import { Alert } from '../../../Confirm'
-import { AddressForm } from '../../../AddressForm'
-import { AddressList } from '../../../AddressList'
 import { SearchBar } from '../../../SearchBar'
 
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter'
@@ -51,10 +44,9 @@ import { OrderProgress } from '../../../OrderProgress'
 import { PageBanner } from '../../../PageBanner'
 
 import Skeleton from 'react-loading-skeleton'
-import { MomentPopover } from '../../../../../../pwa/src/components/MomentPopover'
-import { OrderTypeSelectorHeader } from '../../../../../../../components/OrderTypeSelectorHeader'
 import { AutoScroll } from '../../../AutoScroll'
 import { CitiesControl } from '../../../CitiesControl'
+import { OrderContextUI } from '../../../OrderContextUI'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -80,7 +72,6 @@ const BusinessesListingUI = (props) => {
 
   const [, t] = useLanguage()
   const [orderState, { changeCityFilter }] = useOrder()
-  const [configState] = useConfig()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
@@ -89,7 +80,6 @@ const BusinessesListingUI = (props) => {
   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 [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
@@ -104,7 +94,6 @@ const BusinessesListingUI = (props) => {
   const businessesIds = isCustomLayout &&
     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?.toLowerCase() === 'chew'
 
   const handleScroll = useCallback(() => {
@@ -128,28 +117,6 @@ const BusinessesListingUI = (props) => {
     }
   }
 
-  const handleTogglePopover = (type) => {
-    setOpenPopover({
-      ...openPopover,
-      [type]: !openPopover[type]
-    })
-  }
-
-  const handleClosePopover = (type) => {
-    setOpenPopover({
-      ...openPopover,
-      [type]: false
-    })
-  }
-
-  const handleFindBusinesses = () => {
-    if (!orderState?.options?.address?.location) {
-      setAlertState({ open: true, content: [t('SELECT_AN_ADDRESS_TO_SEARCH', 'Select or add an address to search')] })
-      return
-    }
-    setModals({ listOpen: false, formOpen: false })
-  }
-
   const toggleMap = () => {
     setActiveMap(!activeMap)
   }
@@ -286,27 +253,7 @@ const BusinessesListingUI = (props) => {
         {(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>
+              <OrderContextUI isBusinessList />
             )}
             {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && (
               <BusinessHeroImg
@@ -502,36 +449,6 @@ const BusinessesListingUI = (props) => {
             showButton
           />
         </Modal>
-
-        <Modal
-          title={t('ADDRESS_FORM', 'Address Form')}
-          open={modals.formOpen}
-          onClose={() => setModals({ ...modals, formOpen: false })}
-        >
-          <AddressForm
-            useValidationFileds
-            address={orderState?.options?.address || {}}
-            onClose={() => setModals({ ...modals, formOpen: false })}
-            onCancel={() => setModals({ ...modals, formOpen: false })}
-            onSaveAddress={() => setModals({ ...modals, formOpen: false })}
-          />
-        </Modal>
-
-        <Modal
-          title={t('ADDRESSES', 'Address List')}
-          open={modals.listOpen}
-          width='70%'
-          onClose={() => setModals({ ...modals, listOpen: false })}
-        >
-          <AddressList
-            isModal
-            changeOrderAddressWithDefault
-            userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
-            onCancel={() => setModals({ ...modals, listOpen: false })}
-            onAccept={() => handleFindBusinesses()}
-            isCustomerMode={isCustomerMode}
-          />
-        </Modal>
         <Modal
           title={t('SELECT_A_STORE', 'Select a store')}
           open={modals.citiesOpen}

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

@@ -13,86 +13,11 @@ export const BusinessBanner = styled.div`
   align-items: center;
   margin-bottom: 30px;
   position: relative;
-  @media (max-width: 481px) {
+  @media (max-width: 576px) {
     margin-bottom: 0px;
   }
 `
 
-export const BusinessFeatures = styled.div`
-  position: absolute;
-  top: 10%;
-  width: 100%;
-  padding: 0 15px;
-  box-sizing: border-box;
-`
-
-export const AddressMenu = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  color: #344050;
-  font-weight: 600;
-  border-radius: 50px;
-  padding: 13px 19px;
-  margin-bottom: 10px;
-  span {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  svg {
-    margin-right: 5px;
-    color: #B1BCCC;
-    ${props => props.theme?.rtl && css`
-      margin-left: 5px;
-      margin-right: 0;
-    `}
-  }
-`
-
-export const FeatureItems = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-`
-
-export const ItemInline = styled.div`
-  > span #select-input {
-    background-color: #F8F9FA !important;
-    border: none;
-    border-radius: 7.6px;
-    svg {
-      font-size: 14px;
-    }
-    #list {
-      background-color: #fff;
-      border: none;
-      border-radius: 7.6px;
-      left: 0px;
-      right: initial;
-      ${props => props.theme.rtl && css`
-        left: initial;
-        right: 0px;
-      `}
-    }
-    > div:first-child {
-      font-size: 11px;
-    }
-  }
-  .moment-popover {
-    > div:first-child {
-      font-size: 11px;
-      padding: 4px 7px;
-      svg {
-        font-size: 14px;
-      }
-    }
-  }
-`
-
 export const BusinessSearch = styled.div`
     display: flex;
     background-color: #f8f9fa;
@@ -196,7 +121,7 @@ export const BusinessHeroImgStyled = styled.div`
     height: 370px;
   }
   @media (min-width: 821px) {
-    height: ${({ height }) => height || '650px'};
+    height: ${({ height, theme }) => theme?.business_listing_view?.components?.business_hero?.components?.styles?.height || height || '650px'};
   }
 `
 

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

@@ -67,7 +67,10 @@ const CartUI = (props) => {
     handleChangeComment,
     commentState,
     handleRemoveOfferClick,
-    setPreorderBusiness
+    setPreorderBusiness,
+    cart: cartMulticart,
+    hideDeliveryFee,
+    hideDriverTip
   } = props
 
   const theme = useTheme()
@@ -407,7 +410,7 @@ const CartUI = (props) => {
                         </tr>
                       ))
                     }
-                    {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+                    {orderState?.options?.type === 1 && cart?.delivery_price > 0 && !hideDeliveryFee && (
                       <tr>
                         <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
                         <td>{parsePrice(cart?.delivery_price)}</td>
@@ -432,7 +435,7 @@ const CartUI = (props) => {
                         </tr>
                       ))
                     }
-                    {cart?.driver_tip > 0 && (
+                    {cart?.driver_tip > 0 && !hideDriverTip && (
                       <tr>
                         <td>
                           {t('DRIVER_TIP', 'Driver tip')}{' '}

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import { useTheme } from 'styled-components'
-import { useLanguage, useEvent } from 'ordering-components-external'
-import { Container, NotCarts, Title } from './styles'
+import { useLanguage, useEvent, useConfig, useOrder } from 'ordering-components-external'
+import { Container, NotCarts, Title, WrapperContainer } from './styles'
 
 import { Cart } from '../Cart'
+import { Button } from '../../styles/Buttons'
 
 export const CartContent = (props) => {
   const {
@@ -19,8 +20,21 @@ export const CartContent = (props) => {
   const [, t] = useLanguage()
   const theme = useTheme()
   const [events] = useEvent()
+  const [orderState] = useOrder()
+  const [{ configs }] = useConfig()
 
   const [currentCartUuid, setCurrentCartUuid] = useState(null)
+  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 &&
+    !cart?.wallets
+  ) || null) || []
 
   const handleAddProduct = (product, cart) => {
     setCurrentCartUuid(cart?.uuid)
@@ -28,6 +42,45 @@ export const CartContent = (props) => {
 
   const handleSetCurrentCartUuid = () => {
     setCurrentCartUuid(null)
+    props.onClose && props.onClose()
+  }
+
+  const handleClickCheckout = () => {
+    const cart = carts.find(cart => cart?.group?.uuid)
+    const cartSelectedHasGroup = cart?.group?.uuid
+    const cartFilterValidation = cart => cart?.valid && cart?.status !== 2
+    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter(_cart => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
+    if (cartsGroupLength > 1 && checkoutMultiBusinessEnabled) {
+      events.emit('go_to_page', { page: 'multi_checkout', params: { cartUuid: cart?.group?.uuid } })
+      events.emit('cart_popover_closed')
+      return
+    }
+    const cartGroupsCount = {}
+    // eslint-disable-next-line no-unused-expressions
+    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach(_cart => {
+      if (cartGroupsCount[_cart?.group?.uuid]) {
+        cartGroupsCount[_cart?.group?.uuid] += 1
+      } else {
+        cartGroupsCount[_cart?.group?.uuid] = 1
+      }
+    })
+    let groupForTheCart
+    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
+    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
+    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
+    if (indexes?.length > 1) {
+      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+    } else {
+      groupForTheCart = indexes[0]
+    }
+
+    if (checkoutMultiBusinessEnabled && openCarts?.length > 1 && groupForTheCart) {
+      events.emit('go_to_page', { page: 'multi_cart', params: { cartUuid: cart?.uuid, cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart } })
+    } else {
+      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cart?.uuid } })
+    }
+    events.emit('cart_popover_closed')
+    props.onClose && props.onClose()
   }
 
   useEffect(() => {
@@ -43,7 +96,12 @@ export const CartContent = (props) => {
     <>
       <Container>
         {!isSlideBar && (
-          <Title>{t('YOUR_CART', 'Your cart')}</Title>
+          <WrapperContainer>
+            <Title>{t('YOUR_CART', 'Your cart')}</Title>
+            {checkoutMultiBusinessEnabled && (
+              <Button onClick={handleClickCheckout} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>
+            )}
+          </WrapperContainer>
         )}
         {isOrderStateCarts && carts?.length > 0 &&
           carts.map(cart => (

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

@@ -13,6 +13,12 @@ export const Container = styled.div`
   }
 `
 
+export const WrapperContainer = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`
+
 export const NotCarts = styled.div`
   height: 300px;
   display: flex;

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

@@ -43,7 +43,9 @@ import {
   CartHeader,
   SelectSpotContainer,
   WrapperActionsInput,
-  MobileWrapperPlaceOrderButton
+  MobileWrapperPlaceOrderButton,
+  OrderContextUIWrapper,
+  HeaderContent
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -61,6 +63,7 @@ import { Alert } from '../Confirm'
 import { CartContent } from '../CartContent'
 import { Select } from '../../styles/Select'
 import { PlaceSpot } from '../PlaceSpot'
+import { OrderContextUI } from '../OrderContextUI'
 
 const mapConfigs = {
   mapZoom: 16,
@@ -254,11 +257,22 @@ const CheckoutUI = (props) => {
     handleStoreRedirect(cart?.business?.slug)
   }, [cart?.products])
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
   return (
     <Container>
       <WrapperLeftContainer>
         <WrapperLeftContent>
-          <ArrowLeft className='back-arrow' onClick={() => history.goBack()} />
+          <HeaderContent>
+            <ArrowLeft className='back-arrow' onClick={() => history.goBack()} />
+            {windowSize?.width < 576 && (
+              <OrderContextUIWrapper>
+                <OrderContextUI isCheckOut />
+              </OrderContextUIWrapper>
+            )}
+          </HeaderContent>
           {!cartState.loading && cart?.status === 2 && (
             <WarningMessage>
               <VscWarning />

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

@@ -184,12 +184,6 @@ export const WrapperLeftContent = styled.div`
     font-size: 32px;
     color: ${props => props.theme?.colors.darkTextColor};
   }
-
-  .back-arrow {
-    font-size: 24px;
-    cursor: pointer;
-    margin-bottom: 5px;
-  }
 `
 export const CheckOutDivider = styled.div`
   height: 8px;
@@ -319,3 +313,22 @@ export const MobileWrapperPlaceOrderButton = styled.div`
     border-radius: 7.6px;
   }
 `
+
+export const OrderContextUIWrapper = styled.div`
+  flex: 1;
+  margin-left: 15px;
+  ${props => props.theme.rtl && css`
+    margin-left: 0px;
+    margin-right: 15px;
+  `}
+`
+
+export const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .back-arrow {
+    font-size: 24px;
+    cursor: pointer;
+  }
+`