ordering-ui-external 1.0.1 → 1.1.0

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

@@ -4,6 +4,7 @@ import FiMinusCircle from '@meronex/icons/fi/FiMinusCircle'
 import FiPlusCircle from '@meronex/icons/fi/FiPlusCircle'
 import MdcPlayCircleOutline from '@meronex/icons/mdc/MdcPlayCircleOutline'
 import { LinkableText } from '../LinkableText'
+import { AutoScroll } from '../AutoScroll'
 
 import {
   ProductForm as ProductOptions,
@@ -11,7 +12,8 @@ import {
   useLanguage,
   useOrder,
   useUtils,
-  useSite
+  useSite,
+  useConfig
 } from 'ordering-components-external'
 
 import { scrollTo } from '../../../../../utils'
@@ -121,6 +123,9 @@ const ProductOptionsUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const galleryLength = gallery?.length + videoGallery?.length
 
+  const [{ configs }] = useConfig()
+  const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
   const closeModal = () => {
     setModalIsOpen(false)
     setModalPageToShow('login')
@@ -176,7 +181,16 @@ const ProductOptionsUI = (props) => {
   }
 
   const handleChangeTabValue = (value) => {
-    setTabValue(value)
+    if (document.getElementById(`${value}`)) {
+      const extraHeight = 55
+      const top = document.getElementById(`${value}`).offsetTop - extraHeight
+      const scrollElement = document.querySelector('.popup-dialog')
+
+      scrollElement.scrollTo({
+        top: top,
+        behavior: 'smooth'
+      })
+    }
   }
 
   const handleSwitchQtyUnit = (val) => {
@@ -202,16 +216,20 @@ const ProductOptionsUI = (props) => {
   }
 
   const scrollDown = () => {
+    const adjustHeight = windowSize?.width > 768 ? 50 : 55
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
       return
     }
     const productContainer = document.getElementsByClassName('popup-dialog')[0]
-    const unselectedFirstSubOption = document.getElementsByClassName('error')?.[0]
+    const unselectedFirstSubOption = document.getElementsByClassName('error')?.[0]?.parentNode
 
     if (unselectedFirstSubOption) {
-      productContainer.scrollTop -= 90
-      unselectedFirstSubOption.scrollIntoView({ behavior: 'smooth' })
+      const top = unselectedFirstSubOption.offsetTop
+      productContainer.scrollTo({
+        top: top - adjustHeight,
+        behavior: 'smooth'
+      })
     }
   }
 
@@ -235,19 +253,44 @@ const ProductOptionsUI = (props) => {
   }, [errors])
 
   useEffect(() => {
-    if (document.getElementById(`${tabValue}`)) {
-      const extraHeight = windowSize.width < 769 ? 100 : 42
-      const top = (tabValue === 'all') ? 0 : document.getElementById(`${tabValue}`).offsetTop - extraHeight
-      let scrollElement = document.querySelector('.popup-dialog')
-      if (windowSize.width >= 1200) {
-        scrollElement = productContainerRef.current
+    const scrollElement = document.querySelector('.popup-dialog')
+    const handleScroll = () => {
+      const extraHeight = 60
+      if (product?.ingredients.length > 0 || product?.extras.length > 0) {
+        const menuList = []
+        if (product?.ingredients?.length > 0) menuList.push('ingredients')
+        product?.extras?.length > 0 && product.extras.sort((a, b) => a.rank - b.rank).forEach(extra => {
+          extra.options?.length > 0 && extra.options.sort((a, b) => a.rank - b.rank).forEach(option => {
+            showOption(option) && menuList.push(`id_${option?.id}`)
+          })
+        })
+        menuList.forEach(menu => {
+          const elementTop = scrollElement.scrollTop
+          const topPos = document.getElementById(menu).offsetTop
+          if (Math.abs(elementTop - topPos) < extraHeight) {
+            setTabValue(menu)
+            const elementLeft = document.getElementById(`menu_${menu}`).offsetLeft
+            const scrollLeft = document.getElementById('all').scrollLeft
+            if (elementLeft < scrollLeft) {
+              document.getElementById('all').scrollTo({
+                left: elementLeft,
+                behavior: 'smooth'
+              })
+            }
+            if (elementLeft < scrollLeft + scrollElement.clientWidth) {
+              document.getElementById('all').scrollTo({
+                left: elementLeft - scrollElement.clientWidth / 2,
+                behavior: 'smooth'
+              })
+            }
+          }
+        })
       }
-      scrollElement.scrollTo({
-        top: top,
-        behavior: 'smooth'
-      })
     }
-  }, [tabValue])
+    scrollElement && scrollElement.addEventListener('scroll', handleScroll)
+
+    return () => scrollElement && scrollElement.removeEventListener('scroll', handleScroll)
+  }, [showOption])
 
   useEffect(() => {
     const imageList = []
@@ -347,6 +390,9 @@ const ProductOptionsUI = (props) => {
                 spaceBetween={10}
                 navigation
                 watchOverflow
+                observer
+                observeParents
+                parallax
                 thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
                 onSlideChange={() => handleSlideChange()}
               >
@@ -396,6 +442,9 @@ const ProductOptionsUI = (props) => {
                   watchSlidesProgress
                   className='product-thumb'
                   watchOverflow
+                  observer
+                  observeParents
+                  parallax
                 >
                   {gallery.map((img, i) => (
                     <SwiperSlide key={i}>
@@ -472,96 +521,94 @@ const ProductOptionsUI = (props) => {
               {
                 (product?.ingredients.length > 0 || product?.extras.length > 0) && (
                   <ProductTabContainer id='all'>
-                    <Tabs variant='primary'>
-                      <Tab
-                        key='all'
-                        active={tabValue === 'all'}
-                        onClick={() => handleChangeTabValue('all')}
-                        borderBottom
-                      >
-                        {t('ALL', 'All')}
-                      </Tab>
-                      {
-                        product?.ingredients.length > 0 && (
-                          <Tab
-                            key='ingredients'
-                            active={tabValue === 'ingredients'}
-                            onClick={() => handleChangeTabValue('ingredients')}
-                            borderBottom
-                          >
-                            {t('INGREDIENTS', 'ingredients')}
-                          </Tab>
-                        )
-                      }
-                      {
-                        product?.extras.length > 0 && (
-                          <Tab
-                            key='extra'
-                            active={tabValue === 'extra'}
-                            onClick={() => handleChangeTabValue('extra')}
-                            borderBottom
-                          >
-                            {t('EXTRA', 'Extra')}
-                          </Tab>
-                        )
-                      }
+                    <Tabs>
+                      <AutoScroll scrollId='optionList'>
+                        {
+                          product?.ingredients.length > 0 && (
+                            <Tab
+                              key='ingredients'
+                              id='menu_ingredients'
+                              active={tabValue === 'ingredients'}
+                              onClick={() => handleChangeTabValue('ingredients')}
+                              borderBottom
+                            >
+                              {t('INGREDIENTS', 'ingredients')}
+                            </Tab>
+                          )
+                        }
+                        {
+                          product?.extras.sort((a, b) => a.rank - b.rank).map(extra => extra.options.sort((a, b) => a.rank - b.rank).map(option => {
+                            return (
+                              showOption(option) && (
+                                <Tab
+                                  key={option?.id}
+                                  id={`menu_id_${option?.id}`}
+                                  active={tabValue === `id_${option?.id}`}
+                                  onClick={() => handleChangeTabValue(`id_${option?.id}`)}
+                                  borderBottom
+                                >
+                                  {option?.name}
+                                </Tab>
+                              )
+                            )
+                          }))
+                        }
+                      </AutoScroll>
                     </Tabs>
                   </ProductTabContainer>
                 )
               }
-
-              <div id='ingredients'>
-                {product?.ingredients.length > 0 && (<SectionTitle>{t('INGREDIENTS', theme?.defaultLanguages?.INGREDIENTS || 'Ingredients')}</SectionTitle>)}
-                <WrapperIngredients isProductSoldout={isSoldOut || maxProductQuantity <= 0}>
-                  {product?.ingredients.map(ingredient => (
-                    <ProductIngredient
-                      key={ingredient?.id}
-                      ingredient={ingredient}
-                      state={productCart.ingredients[`id:${ingredient?.id}`]}
-                      onChange={handleChangeIngredientState}
-                      isSoldOut={isSoldOut}
-                    />
-                  ))}
-                </WrapperIngredients>
-              </div>
-              <div id='extra'>
+              {product?.ingredients.length > 0 && (
+                <div id='ingredients'>
+                  {product?.ingredients.length > 0 && (<SectionTitle>{t('INGREDIENTS', theme?.defaultLanguages?.INGREDIENTS || 'Ingredients')}</SectionTitle>)}
+                  <WrapperIngredients isProductSoldout={isSoldOut || maxProductQuantity <= 0}>
+                    {product?.ingredients.map(ingredient => (
+                      <ProductIngredient
+                        key={ingredient?.id}
+                        ingredient={ingredient}
+                        state={productCart.ingredients[`id:${ingredient?.id}`]}
+                        onChange={handleChangeIngredientState}
+                        isSoldOut={isSoldOut}
+                      />
+                    ))}
+                  </WrapperIngredients>
+                </div>
+              )}
+              <div>
                 {
                   product?.extras.sort((a, b) => a.rank - b.rank).map(extra => extra.options.sort((a, b) => a.rank - b.rank).map(option => {
                     const currentState = productCart.options[`id:${option?.id}`] || {}
                     return (
-                      <div key={option?.id}>
-                        {
-                          showOption(option) && (
-                            <ProductOption
-                              option={option}
-                              currentState={currentState}
-                              error={errors[`id:${option?.id}`]}
-                            >
-                              <WrapperSubOption className={isError(option?.id)}>
-                                {
-                                  option.suboptions.filter(suboptions => suboptions.enabled).sort((a, b) => a.rank - b.rank).map(suboption => {
-                                    const currentState = productCart.options[`id:${option?.id}`]?.suboptions[`id:${suboption?.id}`] || {}
-                                    const balance = productCart.options[`id:${option?.id}`]?.balance || 0
-                                    return (
-                                      <ProductOptionSubOption
-                                        key={suboption?.id}
-                                        onChange={handleChangeSuboptionState}
-                                        balance={balance}
-                                        option={option}
-                                        suboption={suboption}
-                                        state={currentState}
-                                        isSoldOut={isSoldOut}
-                                        scrollDown={scrollDown}
-                                        setIsScrollAvailable={setIsScrollAvailable}
-                                      />
-                                    )
-                                  })
-                                }
-                              </WrapperSubOption>
-                            </ProductOption>
-                          )
-                        }
-                      </div>
+                      <React.Fragment key={option?.id}>
+                        {showOption(option) && (
+                          <ProductOption
+                            option={option}
+                            currentState={currentState}
+                            error={errors[`id:${option?.id}`]}
+                          >
+                            <WrapperSubOption className={isError(option?.id)}>
+                              {
+                                option.suboptions.filter(suboptions => suboptions.enabled).sort((a, b) => a.rank - b.rank).map(suboption => {
+                                  const currentState = productCart.options[`id:${option?.id}`]?.suboptions[`id:${suboption?.id}`] || {}
+                                  const balance = productCart.options[`id:${option?.id}`]?.balance || 0
+                                  return (
+                                    <ProductOptionSubOption
+                                      key={suboption?.id}
+                                      onChange={handleChangeSuboptionState}
+                                      balance={balance}
+                                      option={option}
+                                      suboption={suboption}
+                                      state={currentState}
+                                      isSoldOut={isSoldOut}
+                                      scrollDown={scrollDown}
+                                      setIsScrollAvailable={setIsScrollAvailable}
+                                    />
+                                  )
+                                })
+                              }
+                            </WrapperSubOption>
+                          </ProductOption>)}
+                      </React.Fragment>
                     )
                   }))
                 }
@@ -635,7 +682,7 @@ const ProductOptionsUI = (props) => {
                 }
               </div>
 
-              {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+              {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
                 <Button
                   className={`add ${(maxProductQuantity === 0 || Object.keys(errors).length > 0) ? 'disabled' : ''}`}
                   color='primary'
@@ -652,7 +699,7 @@ const ProductOptionsUI = (props) => {
                 </Button>
               )}
 
-              {auth && !orderState.options?.address_id && (
+              {auth && !(orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
                 orderState.loading ? (
                   <Button
                     className='add'

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

@@ -4,12 +4,15 @@ export const ProductContainer = styled.div`
   max-height: 100vh;
   position: relative;
   padding: 50px 20px 20px;
+
   @media (min-width: 768px) {
     height: 100%;
   }
+
   @media (min-width: 769px) {
     padding: 20px;
   }
+
   @media (min-width: 1200px) {
     flex-wrap: nowrap;
     ${props => !props.useKioskApp && css`
@@ -29,6 +32,7 @@ export const WrapperImage = styled.div`
 export const SwiperWrapper = styled.div`
   position: relative;
   width: 100%;
+
   img{
     ${props => props.isSoldOut && css`
         filter: grayscale(1);
@@ -37,30 +41,37 @@ export const SwiperWrapper = styled.div`
   .mySwiper2 {
     height: 250px;
     width: 100%;
+
     .swiper-slide-active {
       border-radius: 0px;
       img {
         border-radius: 0px;
       }
     }
+
     @media (min-width: 576px) {
       height: 320px;
     }
   }
+
+
   .swiper {
     width: 100%;
     height: 500px;
     margin-left: auto;
     margin-right: auto;
   }
+
   .swiper-slide {
     background-size: cover;
     background-position: center;
   }
+
   .product-thumb {
     box-sizing: border-box;
     padding: 30px 0px;
     margin: 0px 20px;
+
     .swiper-slide {
       display: flex;
       opacity: 0.8;
@@ -68,21 +79,25 @@ export const SwiperWrapper = styled.div`
       height: auto;
       cursor: pointer;
       overflow: hidden;
+
       img {
         border-radius: 7.6px;
         max-height: 70px;
       }
     }
+
     .swiper-slide-thumb-active {
       opacity: 1;
     }
   }
+
   .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
+
   .swiper-button-next {
     background-image: url(${props => props.theme.images.general.rightArrow});
     background-color: #d1d0d04d;
@@ -93,10 +108,12 @@ export const SwiperWrapper = styled.div`
     box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;
     border-radius: 50%;
     transition: all 0.2s ease;
+
     &:hover {
       transform: scale(1.05);
     }
   }
+
   .swiper-button-prev {
     background-image: url(${props => props.theme.images.general.leftArrow});
     background-color: #d1d0d04d;
@@ -107,10 +124,12 @@ export const SwiperWrapper = styled.div`
     border-radius: 50%;
     box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;
     transition: all 0.2s ease;
+
     &:hover {
       transform: scale(1.05);
     }
   }
+
   .swiper-button-next::after, .swiper-button-prev::after {
     display: none;
   }
@@ -126,6 +145,7 @@ export const ProductInfo = styled.div`
 
 export const ProductFormTitle = styled.div`
   overflow-wrap: break-word;
+
   .price-discount {
     text-decoration: line-through;
   }
@@ -133,6 +153,7 @@ export const ProductFormTitle = styled.div`
 
 export const ProductEdition = styled.div`
   margin-top: 20px;
+  margin-bottom: 20px;
 `
 
 export const SectionTitle = styled.h3`
@@ -150,16 +171,20 @@ export const ProductComment = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 130px;
+
   textarea {
     margin-top: 8px;
   }
+
   p {
     font-weight: 300;
     margin-bottom: 5px;
   }
+
   @media (min-width: 577px) {
     margin-bottom: 62px;
   }
+
   @media (min-width: 769px) {
     margin-bottom: 0px;
     padding-bottom: 10px;
@@ -172,12 +197,14 @@ export const ProductActions = styled.div`
   align-items: center;
   padding: 10px 0px;
   width: 100%;
-  z-index: 999;
+  z-index: 9999997;
+
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   background-color: #FFF;
+
   div.price {
     padding-top: 10px;
     color: ${props => props.theme?.colors.darkTextColor};
@@ -193,41 +220,49 @@ export const ProductActions = styled.div`
       line-height: 15px;
     }
   }
+
   div.incdec-control {
     width: 135px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
+
     svg {
       width: 25px;
       height: 25px;
       cursor: pointer;
     }
   }
+
   div.price-amount-block {
     display: flex;
     justify-content: space-between;
     width: 80%
   }
+
   svg {
     color: ${props => props.theme.colors.primary};
   }
+
   svg.disabled {
     pointer-events: none;
     color: #CED4DA;
   }
+
   button:disabled,
   button.disabled {
     background: #E9ECEF;
     border: 1px solid #E9ECEF;
     color: #B1BCCC;
   }
+
   button.add {
     width: 90%;
     padding: 5px 10px;
     margin-top: 10px;
     position: relative;
+
     &.soldout {
       width: 100%;
       pointer-events: none;
@@ -244,9 +279,11 @@ export const ProductActions = styled.div`
     padding: 0;
     margin: 0 10px;
   }
+
   @media (min-width: 577px) {
     position: sticky;
   }
+
   @media (min-width: 1200px) {
     bottom: 0px;
     flex-direction: row;
@@ -256,13 +293,16 @@ export const ProductActions = styled.div`
     transform: translateX(-20px);
     padding: 10px 20px;
     box-sizing: border-box;
+
     div.price {
       width: 25%;
     }
+
     button.add {
       width: 35%;
       margin-top: 0;
     }
+
     div.incdec-control {
       padding-right: 18%;
       &.show-weight-unit{
@@ -275,6 +315,7 @@ export const SkeletonBlock = styled.div`
   width: ${({ width }) => width && `${width}%`};
   border-radius: 16px;
   margin: auto;
+
   span {
     margin-bottom: 10px;
   }
@@ -282,6 +323,7 @@ export const SkeletonBlock = styled.div`
 
 export const WrapperSubOption = styled.div`
   border-radius: 10px;
+
   &.soldout {
     pointer-events: none;
     background-color: hsl(0, 0%, 72%);
@@ -305,17 +347,25 @@ export const ProductTabContainer = styled.div`
   position: sticky;
   top: 0px;
   background: white;
-  z-index: 900;
-  > div {
-    div {
-      padding: 9px 15px;
-      &:first-child {
-        padding-left: 0px;
-        ${props => props.theme?.rtl && css`
-          padding-right: 0px;
-          padding-left: 15px;
-        `}
-      }
+  z-index: 9999996;
+  overflow: scroll hidden;
+  width: 100%;
+  ::-webkit-scrollbar {
+    height: 0px;
+  }
+
+  #optionList {
+    > div {
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 10px 0px;
+      margin-right: 25px;
+      ${props => props.theme.rtl && css`
+        margin-right: 0px;
+        margin-left: 25px;
+      `}
     }
   }
 `
@@ -336,11 +386,13 @@ export const ProductShareWrapper = styled.div`
     padding-left: 20px;
     padding-right: 0;
   `}
+
   > div {
     > svg {
       margin: 0px !important;
     }
   }
+
   @media (max-width: 768px) {
     > div {
       right: 16px;
@@ -348,6 +400,7 @@ export const ProductShareWrapper = styled.div`
       left: auto;
     }
   }
+
 `
 export const ProductName = styled.h1`
   font-size: 20px;
@@ -411,12 +464,14 @@ export const ProductTagWrapper = styled.div`
   display: flex;
   align-items: center;
   margin: 5px 0;
+
   img {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   }
+
   span {
     font-size: 14px;
     ${props => props.theme?.rtl ? css`
@@ -457,6 +512,7 @@ export const VideoGalleryWrapper = styled.div`
   justify-content: center;
   align-items: center;
   position: relative;
+
   svg {
     position: absolute;
     fill: #fff;