ordering-ui-external 10.9.6 → 10.10.0

package/_modules/themes/wow/src/components/OrdersOption/index.js

@@ -32,7 +32,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var OrdersOptionUI = function OrdersOptionUI(props) {
-  var _theme$images, _theme$images2, _theme$images3, _ref, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _theme$images, _theme$images2, _theme$images3, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
   var isProfile = props.isProfile,
     activeOrders = props.activeOrders,
     previousOrders = props.previousOrders,
@@ -119,8 +119,8 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
     });
     return objectStatus && objectStatus;
   };
-  var handleReorder = function handleReorder(_x) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(orderId) {
+  var handleReorder = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(orderId) {
       var _yield$reorder, error, result;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -152,8 +152,11 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
             return _context.stop();
         }
       }, _callee, null, [[1, 10]]);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function handleReorder(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   (0, _react.useEffect)(function () {
     var ordersSorted = orders.sort(function (a, b) {
       if (activeOrders) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "10.9.6",
+  "version": "10.10.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "9.9.4",
+    "ordering-components-external": "9.10.0",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/index.js

@@ -130,7 +130,8 @@ import {
   getTraduction,
   priceList,
   reviewCommentList,
-  shape
+  shape,
+  orderTypeList
 } from './utils'
 
 export {
@@ -280,5 +281,6 @@ export {
   getTraduction,
   priceList,
   reviewCommentList,
-  shape
+  shape,
+  orderTypeList
 }

package/src/themes/callcenterOriginal/src/components/AddressList/styles.js

@@ -101,7 +101,7 @@ export const AddressItemActions = styled.div`
     cursor: pointer;
     margin: 0px 5px;
     font-size: 20px;
-
+    
     svg {
       color: #B1BCCC;
     }
@@ -171,7 +171,7 @@ export const ContinueButton = styled.div`
   width: 100%;
   position: sticky;
   bottom: 1px;
-
+  
   button {
     width: 100%;
     white-space: nowrap;
@@ -200,7 +200,7 @@ export const List = styled.div`
     margin-top: 0px;
   ` : css`
     margin-top: 222px;
-  `}
+  `} 
   button {
     width: 100%;
   }
@@ -228,7 +228,7 @@ export const CloseIcon = styled.div`
 `
 
 export const TitleFormContainer = styled.div`
-  display: flex;
+  display: flex; 
   align-items: center;
   margin-top: 7px;
   h1 {

package/src/themes/callcenterOriginal/src/components/Header/styles.js

@@ -123,7 +123,7 @@ export const Menu = styled.div`
       margin-left: 35px;
       margin-right: 10px;
     }
-
+    
     @media (min-width: 1200px) {
       padding: 0 30px;
       margin-left: 50px;
@@ -157,7 +157,7 @@ export const Menu = styled.div`
     @media (min-width: 1175px) {
       width: 250px;
     }
-
+    
     @media (min-width: 1400px) {
       width: 400px;
     }
@@ -262,8 +262,8 @@ export const CustomerInfo = styled.div`
         color: #909BA9;
         margin: 0;
       }
-      svg {
-        color: #748194;
+      svg {       
+        color: #748194; 
         margin: 0;
         font-size: 20px;
       }
@@ -326,7 +326,7 @@ export const MomentMenu = styled.div`
   justify-content: center;
   width: 200px;
   display: none;
-
+  
   @media (min-width: 821px) {
     display: flex;
   }

package/src/themes/callcenterOriginal/src/components/PhoneAutocomplete/styles.js

@@ -201,7 +201,7 @@ export const WrapInput = styled.div`
       width: calc(50% - 20px);
     }
   `}
-
+  
   div{
     color: #FFF;
     position: relative;
@@ -234,7 +234,7 @@ export const WrapInput = styled.div`
 `
 
 export const AutoComplete = styled.div`
-  width: 45%;
+  width: 45%; 
   button {
     position: absolute;
     left: 100%;
@@ -244,7 +244,7 @@ export const AutoComplete = styled.div`
 
 export const UserEdit = styled.div`
   > :first-child{
-     margin-bottom: 20px;
+     margin-bottom: 20px;  
   }
 `
 
@@ -394,7 +394,7 @@ export const ContinueButton = styled.span`
   position: absolute;
   right: 35px;
   bottom: 5px;
-  width:
+  width: 
   button {
     cursor: pointer;
   }

package/src/themes/five/src/components/BusinessProductsCategories/layouts/groceries/styles.js

@@ -6,10 +6,10 @@ export const CategoriesWrap = styled.div`
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 7.6px;
-  @media (min-width: 993){
-    width: calc(100% - 40px);
-    border: 0;
-    padding: 0;
+
+  @media (min-width: 993px) {
+    overflow: auto;
+    max-height: calc(90vh - 10px);
   }
 `
 
@@ -30,7 +30,7 @@ export const CategoriesContainer = styled.div`
     overflow: hidden;
   }
 
-  div.special{
+  div.special {
     ${props => !props.featured && css`
       display: none;
     `}

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

@@ -138,6 +138,7 @@ const ProductOptionsUI = (props) => {
   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 hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 
   const closeModal = () => {
     setModalIsOpen(false)
@@ -409,32 +410,34 @@ const ProductOptionsUI = (props) => {
       {product && (
         <WrapperImage>
           <SwiperWrapper isSoldOut={isSoldOut}>
-            <Swiper
-              spaceBetween={10}
-              navigation
-              watchOverflow
-              observer
-              observeParents
-              parallax
-              slidesPerView={1}
-              thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
-              onSlideChange={() => handleSlideChange()}
-            >
-              {gallery?.map((img, i) => (
-                <SwiperSlide key={i}>
-                  <img src={img} alt='' className='active-img' />
-                </SwiperSlide>
-              ))}
-              {videoGallery && videoGallery?.length > 0 && (
-                <>
-                  {videoGallery?.map((video, j) => (
-                    <SwiperSlide key={j}>
-                      <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={video} />
-                    </SwiperSlide>
-                  ))}
-                </>
-              )}
-            </Swiper>
+            {(product?.images || !hideProductDummyLogo) && (
+              <Swiper
+                spaceBetween={10}
+                navigation
+                watchOverflow
+                observer
+                observeParents
+                parallax
+                slidesPerView={1}
+                thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
+                onSlideChange={() => handleSlideChange()}
+              >
+                {gallery?.map((img, i) => (
+                  <SwiperSlide key={i}>
+                    <img src={img} alt='' className='active-img' />
+                  </SwiperSlide>
+                ))}
+                {videoGallery && videoGallery?.length > 0 && (
+                  <>
+                    {videoGallery?.map((video, j) => (
+                      <SwiperSlide key={j}>
+                        <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={video} />
+                      </SwiperSlide>
+                    ))}
+                  </>
+                )}
+              </Swiper>
+            )}
             {galleryLength > 2 && (
               <Swiper
                 onSwiper={setThumbsSwiper}

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

@@ -63,6 +63,7 @@ export const ProductItemAccordion = (props) => {
 
   const viewString = isConfirmationPage ? 'confirmation' : isStore ? 'business_view' : 'header'
   const showProductImage = !theme?.[viewString]?.components?.cart?.components?.products?.components?.image?.hidden
+  const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -131,7 +132,7 @@ export const ProductItemAccordion = (props) => {
           onClick={(e) => toggleAccordion(e)}
         >
           <ProductInfo className='info' isValid={product?.valid ?? true}>
-            {(product?.images || theme?.images?.dummies?.product) && showProductImage && (
+            {(product?.images || (!hideProductDummyLogo && theme?.images?.dummies?.product)) && showProductImage && (
               <WrapperProductImage>
                 <ProductImage bgimage={product?.images || theme?.images?.dummies?.product} />
               </WrapperProductImage>

package/src/themes/five/src/components/SingleProductCard/layouts/original/index.js

@@ -75,6 +75,7 @@ const SingleProductCardUI = (props) => {
 
   const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
   const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+  const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
   const hideProductLogo = viewString
     ? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
     : theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
@@ -216,7 +217,7 @@ const SingleProductCardUI = (props) => {
                     <CardLogo
                       className='image'
                       soldOut={isSoldOut || maxProductQuantity <= 0}
-                      bgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+                      bgimage={optimizeImage(product?.images || !hideProductDummyLogo && theme?.images?.dummies?.product, 'h_86,c_limit')}
                     />
                   </WrapLogo>
                 ) : (

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { UpsellingPage as UpsellingPageController, useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
 import {
   Container,
   UpsellingContainer,
@@ -33,12 +34,17 @@ const UpsellingPageUI = (props) => {
     business,
     isCustomMode
   } = props
+
   const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
+  const theme = useTheme()
+
   const [actualProduct, setActualProduct] = useState(null)
   const [modalIsOpen, setModalIsOpen] = useState(false)
-  const [{ parsePrice }] = useUtils()
   const [showUpselling, setShowUpSelling] = useState(true)
 
+  const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
+
   useEffect(() => {
     if (!isCustomMode) {
       if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
@@ -144,9 +150,11 @@ const UpsellingPageUI = (props) => {
                               </div>
                               <Button color='primary' onClick={() => handleFormProduct(product)}>{t('ADD', 'Add')}</Button>
                             </HorizontalDetails>
-                            <HorizontalImage>
-                              <img src={product.images} alt={`product-${i}`} loading='lazy' />
-                            </HorizontalImage>
+                            {(product?.images || (!hideProductDummyLogo && theme?.images?.dummies?.product)) && (
+                              <HorizontalImage>
+                                <img src={product.images} alt={`product-${i}`} loading='lazy' />
+                              </HorizontalImage>
+                            )}
                           </HorizontalItem>
                         )) : (
                           <div>

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

@@ -294,7 +294,7 @@ export const UserFormDetailsUI = (props) => {
   }, [isValidPhoneNumber, userPhoneNumber, configs?.verification_phone_required?.value, isChanged])
 
   useEffect(() => {
-    if (requiredFields && !requiredFields.includes('cellphone')) setIsValidPhoneNumber(true)
+    if (requiredFields && !requiredFields?.includes?.('cellphone')) setIsValidPhoneNumber(true)
   }, [requiredFields])
 
   const handleEditNotifications = (key, value) => {
@@ -333,7 +333,7 @@ export const UserFormDetailsUI = (props) => {
               ((showField && showField(field.code) && showFieldWithTheme(field.code)) || user?.guest_id) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
-                    ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
+                    ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
                       <InputGroup>
                         <p>{t(field.code.toUpperCase(), field?.name)}</p>
                         <Input
@@ -354,7 +354,7 @@ export const UserFormDetailsUI = (props) => {
                       </InputGroup>
                     )
                   ) : (
-                    ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
+                    ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
                       <InputGroup>
                         <p>{t(field.code.toUpperCase(), field?.name)}</p>
                         <Input
@@ -380,7 +380,7 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
-            {((!user?.guest_id && showInputBirthday) || (user?.guest_id && requiredFields.includes('birthdate'))) && (
+            {((!user?.guest_id && showInputBirthday) || (user?.guest_id && requiredFields?.includes?.('birthdate'))) && (
               <InputPhoneNumberWrapper>
                 <p>{t('BIRTHDATE', 'Birthdate')}</p>
                 <Input
@@ -391,11 +391,11 @@ export const UserFormDetailsUI = (props) => {
                   onFocus={() => setOpenCalendar(true)}
                 />
                 {openCalendar && (
-                  <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'}/>
+                  <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'} />
                 )}
               </InputPhoneNumberWrapper>
             )}
-            {((!user?.guest_id && !!showInputPhoneNumber) || (user?.guest_id && requiredFields.includes('cellphone'))) && showCustomerCellphone && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
+            {((!user?.guest_id && !!showInputPhoneNumber) || (user?.guest_id && requiredFields?.includes?.('cellphone'))) && showCustomerCellphone && ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields) && (
               <InputPhoneNumberWrapper>
                 <p>{t('PHONE', 'Phone')}</p>
                 <InputPhoneNumber

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

@@ -36,7 +36,6 @@ import { LoginForm } from '../../../../../themes/five/src/components/LoginForm'
 import { SignUpForm } from '../../../../../themes/five/src/components/SignUpForm'
 import { ForgotPasswordForm } from '../../../../../themes/five/src/components/ForgotPasswordForm'
 
-
 export const Header = (props) => {
   const {
     isHome,
@@ -259,6 +258,7 @@ export const Header = (props) => {
                 <LanguageSelector />
               </Menu>
               <SidebarMenu
+                notificationState={notificationState}
                 auth={auth}
                 isHideSignup={isHideSignup}
                 userCustomer={userCustomer}

package/src/themes/six/src/components/SidebarMenu/index.js

@@ -6,8 +6,9 @@ import FaRegAddressCard from '@meronex/icons/fa/FaRegAddressCard'
 import FaRegListAlt from '@meronex/icons/fa/FaRegListAlt'
 import AiOutlineHome from '@meronex/icons/ai/AiOutlineHome'
 import BiStore from '@meronex/icons/bi/BiStore'
+import BiHelpCircle from '@meronex/icons/bi/BiHelpCircle'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
-import { useEvent, useLanguage, useOrder, useConfig } from 'ordering-components-external'
+import { useEvent, useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { capitalize } from '../../../../../utils'
 import { MomentContent } from '../../../../../components/MomentContent'
@@ -19,6 +20,9 @@ import { HeaderOption } from '../HeaderOption'
 import { Modal } from '../Modal'
 import { AddressForm } from '../AddressForm'
 import { AddressList } from '../AddressList'
+import { LoginForm } from '../../../../../themes/five/src/components/LoginForm'
+import { SignUpForm } from '../../../../../themes/five/src/components/SignUpForm'
+import { ForgotPasswordForm } from '../../../../../themes/five/src/components/ForgotPasswordForm'
 
 import {
   Container,
@@ -30,12 +34,14 @@ import {
   MenuLinkText,
   TextInfo,
   Hr,
-  SideBarOver
+  SideBarOver,
+  MenuLinkSeparator
 } from './styles'
 export const SidebarMenu = (props) => {
-  const { auth, isHideSignup, userCustomer, isCustomerMode } = props
+  const { auth, isHideSignup, userCustomer, isCustomerMode, notificationState } = props
   const [events] = useEvent()
   const [, t] = useLanguage()
+  const [, { login }] = useSession()
   const [{ options }] = useOrder()
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -44,6 +50,7 @@ export const SidebarMenu = (props) => {
   const [sideBackOver, setSideBackOver] = useState(false)
   const [modalSelected, setModalSelected] = useState(null)
   const theme = useTheme()
+  const hideHelp = theme?.bar_menu?.components?.help?.hidden
 
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const handleGoToPage = (data) => {
@@ -70,6 +77,31 @@ export const SidebarMenu = (props) => {
     setModalIsOpen(true)
   }
 
+  const closeModal = () => {
+    setModalIsOpen(false)
+    setModalSelected(null)
+    actionSidebar(false)
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+    closeModal()
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalSelected(page)
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeModal()
+    }
+  }
+
   useEffect(() => {
     if (isMenuOpen) {
       if (width <= 489) {
@@ -175,6 +207,35 @@ export const SidebarMenu = (props) => {
                   </MenuLinkText>
                 </WrappContent>
               </MenuLink>
+              {!hideHelp && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'help' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
+                      active={
+                        window.location.pathname === '/help'
+                      }
+                    >
+                      <BiHelpCircle />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/help'
+                        }
+                      >
+                        {t('HELP', 'help')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
               {
                 !isCustomerMode && (
                   <MenuLink
@@ -239,9 +300,9 @@ export const SidebarMenu = (props) => {
 
           {!auth && (
             <MenuLink style={{ marginTop: '25px' }}>
-              <Button outline color='secundary' onClick={() => handleGoToPage({ page: 'signin' })} name='signin'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</Button>
+              <Button outline color='secundary' onClick={() => openModal('login')} name='login'>{t(theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</Button>
               {!isHideSignup && (
-                <Button color='secundary' onClick={() => handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</Button>
+                <Button color='secundary' onClick={() => openModal('signup')} highlight={1} name='signup'>{t(theme?.defaultLanguages?.SIGN_UP || 'Join now')}</Button>
               )}
             </MenuLink>
           )}
@@ -276,6 +337,60 @@ export const SidebarMenu = (props) => {
             {modalSelected === 'moment' && (
               <MomentContent />
             )}
+            {modalSelected === 'login' && (
+              <LoginForm
+                handleSuccessLogin={handleSuccessLogin}
+                elementLinkToSignup={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'signup' })
+                    } href='#'
+                  >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
+                  </a>
+                }
+                elementLinkToForgotPassword={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
+                    } href='#'
+                  >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
+                  </a>
+                }
+                useLoginByCellphone
+                isPopup
+              />
+            )}
+            {modalSelected === 'signup' && (
+              <SignUpForm
+                notificationState={notificationState}
+                elementLinkToLogin={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'login' })
+                    } href='#'
+                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                  </a>
+                }
+                useLoginByCellphone
+                useChekoutFileds
+                handleSuccessSignup={handleSuccessSignup}
+                isPopup
+                closeModal={() => closeModal()}
+              />
+            )}
+            {modalSelected === 'forgotpassword' && (
+              <ForgotPasswordForm
+                elementLinkToLogin={
+                  <a
+                    onClick={
+                      (e) => handleCustomModalClick(e, { page: 'login' })
+                    } href='#'
+                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                  </a>
+                }
+                isPopup
+              />
+            )}
           </Modal>
         )}
       </Container>