ordering-ui-external 2.4.5 → 2.5.0

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;
+  `}
+`