ordering-ui-external 2.4.6 → 2.5.1

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

@@ -12,7 +12,7 @@ export const OrderEta = (props) => {
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
 
   const getEstimatedDeliveryTime = () => {
-    let _estimatedTime
+    let _estimatedTime = null
     let totalEta = 0
     const _delivery = order?.delivery_datetime_utc
       ? order?.delivery_datetime_utc
@@ -38,9 +38,12 @@ export const OrderEta = (props) => {
       }
       _estimatedTime = moment.utc(_delivery).add(totalEta, 'minutes')
     } else {
-      _estimatedTime = moment.utc(_delivery).add(order?.eta_time, 'minutes')
+      const _etaTime = order?.delivered_in
+        ? order?.delivered_in + order?.eta_time
+        : order?.eta_time
+      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
     }
-    _estimatedTime = outputFormat ? moment(_estimatedTime).format(outputFormat) : parseDate(_estimatedTime, { utc: false })
+    _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }
 

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { useLanguage, useUtils } from 'ordering-components-external'
 import { ArrowRight, CheckCircleFill } from 'react-bootstrap-icons'
 import { Button } from '../../styles/Buttons'
-import { getTraduction } from '../../../../../utils'
+import { formatSeconds, getTraduction } from '../../../../../utils'
 import {
   OrderHistoryContainer,
   HistoryItemWrapper,
@@ -127,7 +127,13 @@ export const OrderHistory = (props) => {
               <h3>
                 {message.change?.attribute === 'logistic_status'
                   ? getLogisticTagStatus(parseInt(message.change.new, 10))
-                  : t(getStatus(parseInt(message.change.new, 10)))
+                  : message.change?.attribute === 'delivered_in' ? (
+                    <h3>
+                        <strong>{t('TIME_ADDED_BY_DRIVER', 'Time added by driver')}</strong><br />
+                        {formatSeconds(parseInt(message.change.new, 10))}
+                    </h3>
+                  )
+                    :t(getStatus(parseInt(message.change.new, 10)))
                 }
               </h3>
             ) : (

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

@@ -127,7 +127,7 @@ const OrderDetailsUI = (props) => {
   const acceptedStatus = [1, 2, 5, 6, 10, 11, 12]
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
-  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
@@ -515,7 +515,7 @@ const OrderDetailsUI = (props) => {
                           </p>
                         </PlaceSpotSection>
                       )}
-                      {hideOrderActions && (
+                      {!hideOrderActions && (
                         <DirectionButtonWrapper>
                           <Button
                             color='primary'

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  padding-top: 5px;
+  padding-top: 25px;
   margin: 0px;
   ${props => props.theme.rtl && css`
     margin-left: 30px;

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

@@ -35,6 +35,7 @@ const OrderProgressUI = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
+  const statusToShow = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21]
 
   const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
@@ -45,7 +46,15 @@ const OrderProgressUI = (props) => {
   useEffect(() => {
     if (orderList?.orders.length > 0) {
       const sortedOrders = orderList.orders.sort((a, b) => a.id > b.id ? -1 : 1)
-      setLastOrder(sortedOrders[0])
+      const orderInProgress = sortedOrders.find(({ status }) => (statusToShow.includes(status)))
+
+      let _lastOrder = null
+      if (orderInProgress) {
+        _lastOrder = orderInProgress
+      } else {
+        _lastOrder = sortedOrders[0]
+      }
+      setLastOrder(_lastOrder)
     }
   }, [orderList?.orders])
 
@@ -66,8 +75,10 @@ const OrderProgressUI = (props) => {
                   : isChew ? theme.images.logos.chewLogoReverse : theme.images.logos.logotype}
               />
               <ProgressDescriptionWrapper>
-                <h2>{t('ORDER_IN_PROGRESS', 'Order in progress')}</h2>
-                <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
+                <h2>{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', 'Order')}</h2>
+                {statusToShow.includes(lastOrder?.status) && (
+                  <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
+                )}
                 <Button
                   color='primaryContrast'
                   naked
@@ -93,7 +104,7 @@ const OrderProgressUI = (props) => {
               <ProgressTextWrapper>
                 <StatusWrapper>{getOrderStatus(lastOrder?.status)?.value}</StatusWrapper>
                 <TimeWrapper>
-                  <span>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}:&nbsp;</span>
+                  <span>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}:&nbsp;</span>
                   <span>
                     {lastOrder?.delivery_datetime_utc
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A', utc: false })
@@ -116,7 +127,7 @@ export const OrderProgress = (props) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -28,7 +28,10 @@ export const OrderTypeSelectorContentUI = (props) => {
     handleChangeOrderType && handleChangeOrderType(orderType)
   }
 
-  const orderTypeImage = (type) => theme?.header?.components?.order_types?.components?.[type]?.components?.image
+  const orderTypeImage = (type) => theme?.order_types?.components?.[type]?.components?.image
+  const orderTypeTitle = (type) => theme?.order_types?.components?.[type]?.components?.title
+  const orderTypeDescription = (type) => theme?.order_types?.components?.[type]?.components?.description
+  const orderTypeCallAction = (type) => theme?.order_types?.components?.[type]?.components?.call_to_action
 
   return (
     <div className='order-type' style={{ overflow: 'hidden' }}>
@@ -48,10 +51,10 @@ export const OrderTypeSelectorContentUI = (props) => {
               onClick={() => handleClickOrderType(item.value)}
               active={orderStatus?.options?.type === item?.value}
             >
-              <OrderTypeTitle>{item.text}</OrderTypeTitle>
-              <OrderTypeDescription>{item.description}</OrderTypeDescription>
+              <OrderTypeTitle>{orderTypeTitle(item?.text?.replace(' ', '_')?.toLowerCase()) || item.text}</OrderTypeTitle>
+              <OrderTypeDescription>{orderTypeDescription(item?.text?.replace(' ', '_')?.toLowerCase()) || item.description}</OrderTypeDescription>
               <OrderStartWrapper>
-                <span>{t('START_MY_ORDER', 'start my order')}</span>
+                <span>{orderTypeCallAction(item?.text?.replace(' ', '_')?.toLowerCase()) || t('START_MY_ORDER', 'start my order')}</span>
                 <BsArrowRight />
               </OrderStartWrapper>
               <OrderTypeOverlay />

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

@@ -43,7 +43,7 @@ export const BannerContainer = styled.div`
 export const ImageWrapper = styled.div`
   cursor: pointer;
   width: 100%;
-  padding-top: 260px;
+  padding-top: 18%;
   position: relative;
   .banner-img {
     position: absolute;
@@ -53,7 +53,4 @@ export const ImageWrapper = styled.div`
     height: 100%;
     object-fit: cover;
   }
-  @media (min-width: 768px) {
-    padding-top: 18%;
-  }
 `

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

@@ -112,10 +112,13 @@ const PaymentOptionsUI = (props) => {
 
   const includeKioskPaymethods = ['cash', 'card_delivery']
 
+  const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
+
   const list = paymethodsList ? paymethodsList?.paymethods : paymethods?.map(pay => pay.paymethod)
 
   const popupMethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square', 'google_pay', 'apple_pay']
-  const supportedMethods = list?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
+
+  const supportedMethods = list?.filter(p => !multiCheckoutMethods.includes(p.gateway))?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
 
   const handlePaymentMethodClick = (paymethod) => {
     if (paymethod?.gateway === 'paypal' &&
@@ -176,7 +179,7 @@ const PaymentOptionsUI = (props) => {
     if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
       handlePlaceOrder()
     }
-  }, [paymethodData, paymethodSelected])
+  }, [JSON.stringify(paymethodData), paymethodSelected])
 
   return (
     <>
@@ -193,10 +196,10 @@ const PaymentOptionsUI = (props) => {
             supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
               <React.Fragment key={paymethod.id}>
                 {
-                  (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
+                  ((!isCustomerMode && paymethod.gateway) || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
                     <PayCard
                       isDisabled={isDisabled}
-                      className={`card ${(paymethodSelected?.id || isOpenMethod?.paymethod?.id) === paymethod.id ? 'active' : ''}`}
+                      className={`${(paymethodSelected?.id || isOpenMethod?.paymethod?.id) === paymethod.id ? 'active' : ''}`}
                       onClick={() => handlePaymentMethodClick(paymethod)}
                     >
                       <div>

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
+import { nanoid } from 'nanoid'
 import FiMinusCircle from '@meronex/icons/fi/FiMinusCircle'
 import FiPlusCircle from '@meronex/icons/fi/FiPlusCircle'
 import MdcPlayCircleOutline from '@meronex/icons/mdc/MdcPlayCircleOutline'
@@ -17,7 +18,7 @@ import {
   useConfig
 } from 'ordering-components-external'
 
-import { scrollTo } from '../../../../../utils'
+import { scrollTo, orderTypeList } from '../../../../../utils'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 import { ProductIngredient } from '../ProductIngredient'
@@ -62,7 +63,8 @@ import {
   ProductTagsListContainer,
   ProductTagWrapper,
   VideoGalleryWrapper,
-  TitleWrapper
+  TitleWrapper,
+  GuestUserLink
 } from './styles'
 import { useTheme } from 'styled-components'
 import { Input, TextArea } from '../../styles/Inputs'
@@ -95,7 +97,9 @@ const ProductOptionsUI = (props) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productAddedToCartLength,
-    handleFavoriteProduct
+    handleFavoriteProduct,
+    handleCreateGuestUser,
+    actionStatus
   } = props
 
   const { product, loading, error } = productObject
@@ -129,6 +133,9 @@ const ProductOptionsUI = (props) => {
 
   const [{ configs }] = useConfig()
   const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map(value => Number(value)) || []
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+  const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
 
   const closeModal = () => {
     setModalIsOpen(false)
@@ -246,6 +253,11 @@ const ProductOptionsUI = (props) => {
     }
   }
 
+  const handleUpdateGuest = () => {
+    const guestToken = nanoid()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
+
   const handleSlideChange = () => {
     var videos = document.querySelectorAll('iframe, video')
     Array.prototype.forEach.call(videos, function (video) {
@@ -526,7 +538,7 @@ const ProductOptionsUI = (props) => {
                   )}
                 </ProductMeta>
               </Properties>
-              {product?.description && (
+              {product?.description && !hideProductDescription && (
                 <ProductDescription>
                   <LinkableText
                     text={product?.description}
@@ -662,7 +674,7 @@ const ProductOptionsUI = (props) => {
                   <MidComponent key={i} {...props} />))
               }
             </ProductEdition>
-            <ProductActions>
+            <ProductActions isColumn={(auth && !(orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)))}>
               <div className='price-amount-block'>
                 <div className='price'>
                   <h4>{productCart.total && parsePrice(productCart.total)}</h4>
@@ -737,6 +749,7 @@ const ProductOptionsUI = (props) => {
                 ) : (
                   <AddressList
                     isModal
+                    isProfile
                     userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
                     addressList={isNaN(userCustomer?.id) ? user.addresses : null}
                     isProductForm
@@ -755,6 +768,11 @@ const ProductOptionsUI = (props) => {
                   {isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', theme?.defaultLanguages?.SOLD_OUT || 'Sold out') : t('LOGIN_SIGNUP', theme?.defaultLanguages?.LOGIN_SIGNUP || 'Login / Sign Up')}
                 </Button>
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                <GuestUserLink onClick={handleUpdateGuest}>
+                  {actionStatus?.loading ? <Skeleton height={25} width={70} /> : t('WITH_GUEST_USER', 'With Guest user')}
+                </GuestUserLink>
+              )}
             </ProductActions>
           </ProductInfo>
         </>

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

@@ -314,7 +314,7 @@ export const ProductActions = styled.div`
   div.price-amount-block {
     display: flex;
     justify-content: space-between;
-    width: 80%
+    width: 70%
   }
 
   svg {
@@ -356,6 +356,17 @@ export const ProductActions = styled.div`
     margin: 0 10px;
   }
 
+  #address_control {
+    button.add {
+      width: calc(100% - 20px) !important;
+      margin: 10px 10px 0 10px;
+    }
+  }
+  
+  div#address_list {
+    padding: 0;
+  }
+
   @media (min-width: 577px) {
     position: sticky;
   }
@@ -370,6 +381,13 @@ export const ProductActions = styled.div`
     padding: 10px 20px;
     box-sizing: border-box;
 
+    ${({ isColumn }) => isColumn && css`
+      flex-direction: column;
+      div.price-amount-block {
+        margin-bottom: 15px;
+      }
+    `}
+
     div.price {
       width: 25%;
     }
@@ -602,3 +620,20 @@ export const VideoGalleryWrapper = styled.div`
     font-size: 28px;
   }
 `
+
+export const GuestUserLink = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.primary};
+  text-align: center;
+  cursor: pointer;
+  margin: 15px 0;
+  white-space: nowrap;
+  &:hover {
+    text-decoration: underline;
+  }
+  margin-left: 10px;
+  ${props => props.theme.rtl && css`
+    margin-left: 0;
+    margin-right: 10px;
+  `}
+`

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

@@ -63,7 +63,7 @@ export const ProductItemAccordion = (props) => {
   const productActionsDelete = useRef(null)
 
   const viewString = isConfirmationPage ? 'confirmation' : isStore ? 'business_view' : 'header'
-  const showProductImage = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.products?.components?.image?.hidden
+  const showProductImage = !theme?.[viewString]?.components?.cart?.components?.products?.components?.image?.hidden
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -224,13 +224,15 @@ export const ProductItemAccordion = (props) => {
                           <Pencil color='#B1BCCC' />
                         </ProductActionsEdit>
                       )}
-                      <ProductActionsDelete
-                        ref={productActionsDelete}
-                        onClick={() => onDeleteProduct(product)}
-                        disabled={orderState.loading}
-                      >
-                        <Trash color='#B1BCCC' />
-                      </ProductActionsDelete>
+                      {onDeleteProduct && (
+                        <ProductActionsDelete
+                          ref={productActionsDelete}
+                          onClick={() => onDeleteProduct(product)}
+                          disabled={orderState.loading}
+                        >
+                          <Trash color='#B1BCCC' />
+                        </ProductActionsDelete>
+                      )}
                     </ProductActions>
                   )}
                 </ProductPriceSection>
@@ -238,13 +240,15 @@ export const ProductItemAccordion = (props) => {
             </>
           ) : (
             <ProductActions>
-              <ProductActionsDelete
-                ref={productActionsDelete}
-                onClick={() => onDeleteProduct(product)}
-                disabled={orderState.loading}
-              >
-                <Trash color='#B1BCCC' />
-              </ProductActionsDelete>
+              {onDeleteProduct && (
+                <ProductActionsDelete
+                  ref={productActionsDelete}
+                  onClick={() => onDeleteProduct(product)}
+                  disabled={orderState.loading}
+                >
+                  <Trash color='#B1BCCC' />
+                </ProductActionsDelete>
+              )}
             </ProductActions>
           )}
 
@@ -260,13 +264,15 @@ export const ProductItemAccordion = (props) => {
                     <Pencil color='#B1BCCC' />
                   </ProductActionsEdit>
                 )}
-                <ProductActionsDelete
-                  ref={productActionsDelete}
-                  onClick={() => onDeleteProduct(product)}
-                  disabled={orderState.loading}
-                >
-                  <Trash color='#B1BCCC' />
-                </ProductActionsDelete>
+                {onDeleteProduct && (
+                  <ProductActionsDelete
+                    ref={productActionsDelete}
+                    onClick={() => onDeleteProduct(product)}
+                    disabled={orderState.loading}
+                  >
+                    <Trash color='#B1BCCC' />
+                  </ProductActionsDelete>
+                )}
               </ProductActions>
               <ProductNotAvailable>
                 {t('NOT_AVAILABLE', 'Not available')}
@@ -277,13 +283,15 @@ export const ProductItemAccordion = (props) => {
           {!product?.valid_menu && isCartProduct && !isCartPending && (
             <ProductError>
               <ProductActions>
-                <ProductActionsDelete
-                  ref={productActionsDelete}
-                  onClick={() => onDeleteProduct(product)}
-                  disabled={orderState.loading}
-                >
-                  <Trash color='#D81212' />
-                </ProductActionsDelete>
+                {onDeleteProduct && (
+                  <ProductActionsDelete
+                    ref={productActionsDelete}
+                    onClick={() => onDeleteProduct(product)}
+                    disabled={orderState.loading}
+                  >
+                    <Trash color='#D81212' />
+                  </ProductActionsDelete>
+                )}
               </ProductActions>
               <ProductNotAvailable>
                 {t('NOT_AVAILABLE', 'Not available')}

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

@@ -209,7 +209,7 @@ export const RenderProductsLayout = (props) => {
                 </WrapperSearch>
               </>
             )}
-            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && windowSize.width < 993 && !categoryClicked && (
+            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && !categoryClicked && (
               <OrderItAgain
                 onProductClick={onProductClick}
                 productList={business?.previously_products}
@@ -321,7 +321,7 @@ export const RenderProductsLayout = (props) => {
                     />
                   </WrapContent>
                 </BusinessCategoryProductWrapper>
-                {showCartOnProductList && (
+                {(windowSize.width >= 1000 && windowSize.height >= 600) && showCartOnProductList && (
                   <BusinessCartContainer isProfessional={business?.professionals?.length > 0 && !useKioskApp}>
                     <BusinessCartContent maxHeight={window.innerHeight - 100}>
                       {currentCart?.products?.length > 0 ? (
@@ -399,7 +399,7 @@ export const RenderProductsLayout = (props) => {
                   {(categoryClicked || windowSize.width >= 993) && (
                     <BusinessCategoryProductWrapper>
                       <WrapContent isGroceries id='groceries'>
-                        {!business?.loading && business?.previously_products?.length > 0 && windowSize.width >= 993 && (
+                        {!business?.loading && !hidePreviousOrdered && business?.previously_products?.length > 0 && windowSize.width >= 993 && (
                           <OrderItAgain
                             onProductClick={onProductClick}
                             productList={business?.previously_products}

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

@@ -209,12 +209,20 @@ const ReviewProductUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <ReviewProductContainer onSubmit={handleSubmit(onSubmit)}>
-        {order?.products && order.products.length > 0 && order.products.map((product, i) => !product?.deleted && (
-          <SingleProductReview
-            {...props}
-            key={i}
-            product={product}
-          />
+        {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
+          productsOrder?.length ?  productsOrder?.map((product, i) => !product?.deleted && (
+             <SingleProductReview
+              {...props}
+              key={i}
+              product={product}
+            />
+          )) : !productsOrder?.deleted && (
+            <SingleProductReview
+              {...props}
+              key={i}
+              product={productsOrder}
+            />
+          )
         ))}
         <ActionBlock>
           <span onClick={closeReviewProduct}>{t('SKIP', 'Skip')}</span>

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
-import { useUtils, useLanguage, useSession, useConfig, ProductForm as ProductFormController } from 'ordering-components-external'
+import { nanoid } from 'nanoid'
+import { useUtils, useLanguage, useSession, useConfig, ProductForm as ProductFormController, useOrder } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert } from '../Confirm'
 import { Modal } from '../Modal'
@@ -13,7 +14,7 @@ import { ChevronLeft, ChevronRight, ChevronDown } from 'react-bootstrap-icons'
 import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 import { Button } from '../../styles/Buttons'
 import moment from 'moment'
-import { getTimes } from '../../../../../utils'
+import { getTimes, orderTypeList } from '../../../../../utils'
 import SwiperCore, { Navigation } from 'swiper'
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
@@ -47,7 +48,8 @@ import {
   DayNumber,
   TimeListWrapper,
   TimeItem,
-  ClosedBusinessMsg
+  ClosedBusinessMsg,
+  GuestUserLink
 } from './styles'
 SwiperCore.use([Navigation])
 
@@ -62,13 +64,16 @@ const ServiceFormUI = (props) => {
     maxProductQuantity,
     productCart,
     isCartProduct,
-    professionalListState
+    professionalListState,
+    handleCreateGuestUser,
+    actionStatus
   } = props
 
   const { product, loading, error } = productObject
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
+  const [orderState] = useOrder()
   const [{ parsePrice, parseDate }] = useUtils()
   const [{ auth }, { login }] = useSession()
   const [modalPageToShow, setModalPageToShow] = useState('login')
@@ -81,6 +86,9 @@ const ServiceFormUI = (props) => {
   const [isEnabled, setIsEnabled] = useState(false)
   const [datesList, setDatesList] = useState([])
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropDownRef = useRef()
   const is12Hours = configs?.format_time?.value === '12'
 
@@ -89,6 +97,11 @@ const ServiceFormUI = (props) => {
     setModalPageToShow('login')
   }
 
+  const handleUpdateGuest = () => {
+    const guestToken = nanoid()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
+
   const handleSuccessLogin = (user) => {
     if (user) {
       closeModal()
@@ -485,6 +498,11 @@ const ServiceFormUI = (props) => {
                   {isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', theme?.defaultLanguages?.SOLD_OUT || 'Sold out') : t('LOGIN_SIGNUP', theme?.defaultLanguages?.LOGIN_SIGNUP || 'Login / Sign Up')}
                 </Button>
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                <GuestUserLink onClick={handleUpdateGuest}>
+                  {actionStatus?.loading ? <Skeleton height={25} width={70} /> : t('WITH_GUEST_USER', 'With Guest user')}
+                </GuestUserLink>
+              )}
             </ButtonWrapper>
           </>
         )}

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

@@ -469,3 +469,19 @@ export const ClosedBusinessMsg = styled.div`
   font-size: 16px;
   width: 100%;
 `
+
+export const GuestUserLink = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.primary};
+  cursor: pointer;
+  margin: 15px 0;
+  white-space: nowrap;
+  &:hover {
+    text-decoration: underline;
+  }
+  margin-left: 10px;
+  ${props => props.theme.rtl && css`
+    margin-left: 0;
+    margin-right: 10px;
+  `}
+`