ordering-ui-external 2.6.7 → 2.6.8

package/_modules/themes/pwa/src/components/MomentPopover/styles.js

@@ -17,7 +17,7 @@ var HeaderItem = _styledComponents.default.div(_templateObject || (_templateObje
   return isBanner && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background: #F8F9FA;\n    border-radius: 7.6px;\n    padding: 4px 8px;\n  "])));
 });
 exports.HeaderItem = HeaderItem;
-var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 15px;\n  padding-top: 30px;\n  border-radius: 10px;\n  max-width: 500px;\n  z-index: 1001;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  #moment_control h1{\n    margin-bottom: 30px;\n  }\n"])));
+var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 15px;\n  padding-top: 30px;\n  border-radius: 10px;\n  max-width: 500px;\n  z-index: 10002;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  #moment_control h1{\n    margin-bottom: 30px;\n  }\n  @media (min-width: 576px) {\n    z-index: 1001;\n  }\n"])));
 exports.PopoverBody = PopoverBody;
 var PopoverArrow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 0; \n  height: 0; \n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 8px solid #FFF;\n  top: -8px;\n"])));
 exports.PopoverArrow = PopoverArrow;

package/index.html

@@ -13,7 +13,7 @@
   <style type="text/css" id="styles"></style>
   <style>
     .pac-container {
-      z-index: 10000 !important;
+      z-index: 100000 !important;
     }
     .smartbanner-show.smartbanner-margin-top{margin-top:80px}.smartbanner-show.smartbanner-margin-bottom{margin-bottom:80px}.smartbanner-show .smartbanner{display:block}.smartbanner{left:0;display:none;width:100%;height:80px;line-height:80px;font-family:Helvetica Neue,sans-serif;background:#f4f4f4;z-index:9998;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-text-size-adjust:none}.smartbanner-top{position:absolute;top:0}.smartbanner-bottom{position:fixed;bottom:0}.smartbanner-container{margin:0 auto;padding:0 5px}.smartbanner-close{display:inline-block;vertical-align:middle;margin:0 5px 0 0;font-family:ArialRoundedMTBold,Arial;font-size:20px;text-align:center;color:#888;text-decoration:none;border:0;border-radius:14px;padding:0 0 1px;background-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.smartbanner-close:active,.smartbanner-close:hover{color:#aaa}.smartbanner-icon{width:57px;height:57px;margin-right:12px;background-size:cover;border-radius:10px}.smartbanner-icon,.smartbanner-info{display:inline-block;vertical-align:middle}.smartbanner-info{white-space:normal;width:calc(99% - 201px);font-size:11px;line-height:1.2em;font-weight:700}.smartbanner-wrapper{max-width:110px;display:inline-block;text-align:right;width:100%}.smartbanner-title{font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-description{max-height:40px;overflow:hidden}.smartbanner-author{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-author:empty+.smartbanner-description{max-height:50px}.smartbanner-button{margin:auto 0;height:24px;font-size:14px;line-height:24px;text-align:center;font-weight:700;color:#6a6a6a;text-transform:uppercase;text-decoration:none;display:inline-block;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-button:active,.smartbanner-button:hover{color:#aaa}.smartbanner-ios{background:#f2f2f2;box-shadow:0 1px 1px rgba(0,0,0,.2);line-height:80px}.smartbanner-ios .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;font-family:Arial;color:#888;text-shadow:0 1px 0 #fff;-webkit-font-smoothing:none}.smartbanner-ios .smartbanner-close:active,.smartbanner-ios .smartbanner-close:hover{color:#888}.smartbanner-ios .smartbanner-icon{background-size:cover}.smartbanner-ios .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8);font-weight:300}.smartbanner-ios .smartbanner-title{color:#4d4d4d;font-weight:500}.smartbanner-ios .smartbanner-button{padding:0 10px;font-size:15px;min-width:10%;font-weight:400;color:#0c71fd}.smartbanner-ios .smartbanner-button:active,.smartbanner-ios .smartbanner-button:hover{background:#f2f2f2}.smartbanner-android{background:#3d3d3d url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7");box-shadow:inset 0 4px 0 #88b131;line-height:82px}.smartbanner-android .smartbanner-close{border:0;max-width:17px;width:100%;height:17px;line-height:17px;margin-right:7px;color:#b1b1b3;background:#1c1e21;text-shadow:0 1px 1px #000;text-decoration:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 1px hsla(0,0%,100%,.3);cursor:pointer}.smartbanner-android .smartbanner-close:active,.smartbanner-android .smartbanner-close:hover{color:#eee}.smartbanner-android .smartbanner-icon{background-color:transparent;box-shadow:none}.smartbanner-android .smartbanner-info{color:#ccc;text-shadow:0 1px 2px #000}.smartbanner-android .smartbanner-title{color:#fff;font-weight:700}.smartbanner-android .smartbanner-button{min-width:12%;color:#d1d1d1;font-weight:700;padding:0;background:none;border-radius:0;box-shadow:0 0 0 1px #333,0 0 0 2px #dddcdc}.smartbanner-android .smartbanner-button:active,.smartbanner-android .smartbanner-button:hover{background:none}.smartbanner-android .smartbanner-button-text{text-align:center;display:block;padding:0 10px;background:#42b6c9;background:linear-gradient(180deg,#42b6c9,#39a9bb);text-transform:none;text-shadow:none;box-shadow:none}.smartbanner-android .smartbanner-button-text:active,.smartbanner-android .smartbanner-button-text:hover{background:#2ac7e1}.smartbanner-kindle,.smartbanner-windows{background:#f4f4f4;background:linear-gradient(180deg,#f4f4f4,#cdcdcd);box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:80px}.smartbanner-kindle .smartbanner-close,.smartbanner-windows .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;color:#888;text-shadow:0 1px 0 #fff}.smartbanner-kindle .smartbanner-close:active,.smartbanner-kindle .smartbanner-close:hover,.smartbanner-windows .smartbanner-close:active,.smartbanner-windows .smartbanner-close:hover{color:#aaa}.smartbanner-kindle .smartbanner-icon,.smartbanner-windows .smartbanner-icon{background:rgba(0,0,0,.6);background-size:cover;box-shadow:0 1px 3px rgba(0,0,0,.3)}.smartbanner-kindle .smartbanner-info,.smartbanner-windows .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-kindle .smartbanner-title,.smartbanner-windows .smartbanner-title{color:#4d4d4d;font-weight:700}.smartbanner-kindle .smartbanner-button,.smartbanner-windows .smartbanner-button{padding:0 10px;min-width:10%;color:#6a6a6a;background:#efefef;background:linear-gradient(180deg,#efefef,#dcdcdc);border-radius:3px;box-shadow:inset 0 0 0 1px #bfbfbf,0 1px 0 hsla(0,0%,100%,.6),inset 0 2px 0 hsla(0,0%,100%,.7)}.smartbanner-kindle .smartbanner-button:active,.smartbanner-kindle .smartbanner-button:hover,.smartbanner-windows .smartbanner-button:active,.smartbanner-windows .smartbanner-button:hover{background:#dcdcdc;background:linear-gradient(180deg,#dcdcdc,#efefef)}
   </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -87,10 +87,12 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "2.7.4",
+    "ordering-components-external": "2.7.5",
+    "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",
+    "react-credit-cards-2": "^0.10.0",
     "react-datepicker": "^4.1.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^6.8.1",

package/src/components/LanguageSelector/index.js

@@ -22,6 +22,7 @@ const LanguageSelectorUI = (props) => {
   return (
     _languages && _languages.length > 1 ? (
       <Select
+        zIndex={10002}
         options={languagesState?.loading ? defaultLanguages : _languages}
         defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}
         onChange={(languageId) => handleChangeLanguage(languageId)}

package/src/components/OrderTypeSelectorHeader/index.js

@@ -14,7 +14,8 @@ const OrderTypeSelectorHeaderUI = (props) => {
     typeSelected,
     defaultValue,
     configTypes,
-    orderTypes
+    orderTypes,
+    autoCloseWhenScroll
   } = props
 
   const defaultType = configTypes?.includes(typeSelected) ? null : configTypes?.[0]
@@ -22,6 +23,7 @@ const OrderTypeSelectorHeaderUI = (props) => {
   return (
     <OrderTypeWrapper>
         <Select
+          autoCloseWhenScroll={autoCloseWhenScroll}
           options={configTypes
             ? orderTypes.filter(type => configTypes?.includes(type.value))
             : orderTypes

package/src/components/SmartAppBanner/index.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import { useLanguage, SmartAppBanner as SmartAppBannerController } from 'ordering-components-external'
 import SmartBanner from 'react-smartbanner'
+import { useTheme } from 'styled-components'
 
 const SmartAppBanneUI = (props) => {
   const [, t] = useLanguage()
+  const theme = useTheme()
 
   return (
     <>
       <SmartBanner
-        title={t('MOBILE_APPNAME', 'Ordering app')}
-        author={t('MOBILE_APPNAME_AUTHOR', 'Ordering, Inc.')}
+        title={t('MOBILE_APPNAME', theme?.defaultLanguages?.MOBILE_APPNAME || 'Ordering app')}
+        author={t('MOBILE_APPNAME_AUTHOR', theme?.defaultLanguages?.MOBILE_APPNAME_AUTHOR || 'Ordering, Inc.')}
         daysHidden={7}
         daysReminder={15}
         button={t('VIEW', 'View')}

package/src/contexts/ThemeContext/index.js

@@ -82,7 +82,7 @@ export const ThemeProvider = ({ children, ...props }) => {
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 2000;
+      z-index: 20002;
     }
     .popup-component {
       background-color: rgba(0, 0, 0, 0.3);

package/src/styles/Select/index.js

@@ -18,7 +18,9 @@ export const Select = (props) => {
     defaultValue,
     onChange,
     notAsync,
-    notReload
+    notReload,
+    autoCloseWhenScroll,
+    zIndex
   } = props
 
   const isHome = window.location.pathname === '/' || window.location.pathname === '/home'
@@ -49,9 +51,16 @@ export const Select = (props) => {
   }
 
   useEffect(() => {
+    const handleCloseSelect = () => setOpen(false)
     document.addEventListener('mouseup', closeSelect)
     document.addEventListener('keydown', handleKeyDown)
+    if (autoCloseWhenScroll) {
+      window.addEventListener('scroll', handleCloseSelect)
+    }
     return () => {
+      if (autoCloseWhenScroll) {
+        window.removeEventListener('scroll', handleCloseSelect)
+      }
       document.removeEventListener('mouseup', closeSelect)
       document.removeEventListener('keydown', handleKeyDown)
     }
@@ -100,7 +109,7 @@ export const Select = (props) => {
           </Selected>
         )}
         {open && options && (
-          <Options id='list' position='right' ref={dropdownReference}>
+          <Options id='list' position='right' ref={dropdownReference} zIndex={zIndex}>
             {
               options.map(option => (
                 <Option

package/src/styles/Selects/index.js

@@ -37,7 +37,7 @@ export const Options = styled.div`
   position: absolute;
   background-color: #CCC;
   margin-top: 7px;
-  z-index: 10000;
+  z-index: ${({ zIndex }) => zIndex || 10000};
   border-width: 1px;
   border-style: solid;
   border-color: #CCC;

package/src/themes/five/src/components/BusinessBasicInformation/BusinessInfoComponent.js

@@ -0,0 +1,230 @@
+import React from 'react'
+import { BusinessDetail, BusinessInfo, BusinessInfoContainer, BusinessInfoContent, BusinessInfoItem, IconWrapper, RibbonBox, SocialList, TitleWrapper } from './styles'
+import Skeleton from 'react-loading-skeleton'
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../../../../utils'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { SocialNetWork } from './SocialNetWork'
+import { StarFill, Facebook, Tiktok, Pinterest, Whatsapp, Instagram, Snapchat } from 'react-bootstrap-icons'
+import { useConfig, useLanguage, useOrder, useUtils } from 'ordering-components-external'
+import { SearchComponent } from './SearchComponent'
+
+export const BusinessInfoComponent = (props) => {
+  const {
+    isChew,
+    loading,
+    business,
+    isInfoShrunken,
+    isCustomerMode,
+    setIsPreOrder,
+    setIsBusinessReviews,
+    categoryState,
+    searchValue,
+    errorQuantityProducts,
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isCustomLayout
+  } = props
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const [{ parsePrice, parseDistance }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
+  const windowSize = useWindowSize()
+  const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+  const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+  const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+  const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
+  const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
+  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
+
+  const searchComponentProps = {
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions
+  }
+
+  return (
+    <BusinessInfoContainer isChew={isChew} isFlexEnd={windowSize.width >= 768}>
+      <BusinessInfoContent>
+        <BusinessInfo className='info'>
+          <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
+            {!loading ? (
+              <TitleWrapper isCustomLayout={isCustomLayout}>
+                <h2 className='bold' id='business_name'>{business?.name}</h2>
+                {business?.ribbon?.enabled && (
+                  <RibbonBox
+                    bgColor={business?.ribbon?.color}
+                    colorText={lightenDarkenColor(business?.ribbon?.color)}
+                    borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
+                    isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+                    isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+                  >
+                    {business?.ribbon?.text}
+                  </RibbonBox>
+                )}
+              </TitleWrapper>
+            ) : (
+              <Skeleton width={isCustomerMode ? 100 : 150} height={isCustomerMode ? 35 : 'auto'} />
+            )}
+            {typeof hideCity !== 'undefined' && !hideCity && business?.city?.name && (
+              <>
+                {!loading ? (
+                  <p className='type'>{business?.city?.name}</p>
+                ) : (
+                  <Skeleton width={isCustomerMode ? 100 : 150} />
+                )}
+              </>
+            )}
+            {!loading ? (
+              <SocialList>
+                {business?.facebook_profile && (
+                  <SocialNetWork
+                    url={business?.facebook_profile}
+                    icon={<Facebook />}
+                  />
+                )}
+                {business?.instagram_profile && (
+                  <SocialNetWork
+                    url={business?.instagram_profile}
+                    icon={<Instagram />}
+                  />
+                )}
+                {business?.tiktok_profile && (
+                  <SocialNetWork
+                    url={business?.tiktok_profile}
+                    icon={<Tiktok />}
+                  />
+                )}
+                {business?.pinterest_profile && (
+                  <SocialNetWork
+                    url={business?.pinterest_profile}
+                    icon={<Pinterest />}
+                  />
+                )}
+                {business?.whatsapp_number && (
+                  <SocialNetWork
+                    url={business?.whatsapp_number}
+                    icon={<Whatsapp />}
+                  />
+                )}
+                {business?.snapchat_profile && (
+                  <SocialNetWork
+                    url={business?.snapchat_profile}
+                    icon={<Snapchat />}
+                  />
+                )}
+              </SocialList>
+            ) : (
+              <SocialList>
+                {[...Array(5).keys()].map(i => (
+                  <IconWrapper isSkeleton key={i}>
+                    <Skeleton width={27} height={27} />
+                  </IconWrapper>
+                ))}
+              </SocialList>
+            )}
+            <BusinessDetail isSkeleton={loading}>
+              {orderState?.options.type === 1 && !hideDeliveryFee && (
+                <>
+                  {!loading ? (
+                    <>
+                      <h5>
+                        <span>{t('DELIVERY_FEE', 'Delivery fee')}</span>
+                        {business && parsePrice(business?.delivery_price || 0)}
+                      </h5>
+                      <span className='dot'>•</span>
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideTime && (
+                <>
+                  {!loading ? (
+                    <>
+                      {orderState?.options?.type === 1 ? (
+                        <>
+                          <h5>
+                            {convertHoursToMinutes(business?.delivery_time)}
+                          </h5>
+                          <span className='dot'>•</span>
+                        </>
+                      ) : (
+                        <>
+                          <h5>
+                            {convertHoursToMinutes(business?.pickup_time)}
+                          </h5>
+                          <span className='dot'>•</span>
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideDistance && (
+                <>
+                  {!loading ? (
+                    <>
+                      <h5>
+                        {parseDistance(business?.distance || 0)}
+                      </h5>
+                      <span className='dot'>•</span>
+                    </>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 70 : 50} />
+                  )}
+                </>
+              )}
+              {!hideReviews && (
+                <>
+                  {!loading ? (
+                    <div className='review'>
+                      <StarFill className='start' />
+                      <p>{business?.reviews?.total}</p>
+                    </div>
+                  ) : (
+                    <Skeleton width={isCustomerMode ? 100 : 50} />
+                  )}
+                </>
+              )}
+            </BusinessDetail>
+            {
+              !loading ? (
+                <div className='preorder-Reviews'>
+                  {isPreOrderSetting && (
+                    <>
+                      <span onClick={() => setIsPreOrder(true)}>{t('PREORDER', 'Preorder')}</span>
+                      <span className='dot'>•</span>
+                    </>
+                  )}
+                  {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
+                </div>
+              ) : (
+                <Skeleton width={isCustomerMode ? 100 : 150} />
+              )
+            }
+          </BusinessInfoItem>
+        </BusinessInfo>
+      </BusinessInfoContent>
+      {!hideSearch &&
+        (categoryState?.products?.length !== 0 || searchValue) &&
+        !errorQuantityProducts &&
+        !isInfoShrunken &&
+        !business?.professionals?.length &&
+        // (categoryClicked || windowSize.width >= 993) &&
+        (
+          <SearchComponent {...searchComponentProps} />
+        )}
+    </BusinessInfoContainer>
+  )
+}

package/src/themes/five/src/components/BusinessBasicInformation/SearchComponent.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { SearchIconWrapper, SearchWrapper, WrapperSearch } from './styles'
+import { Select } from '../../styles/Select'
+import { useTheme } from 'styled-components'
+import CgSearch from '@meronex/icons/cg/CgSearch'
+
+export const SearchComponent = (props) => {
+  const {
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isResponsive
+  } = props
+
+  const theme = useTheme()
+
+  const hideSort = theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+
+  return (
+    <WrapperSearch id='search-component' isResponsive={isResponsive}>
+      <SearchWrapper>
+        <SearchIconWrapper
+          onClick={() => setOpenSearchProducts(true)}
+        >
+          <CgSearch />
+        </SearchIconWrapper>
+        {!hideSort && (
+          <Select
+            notAsync
+            notReload
+            options={sortByOptions}
+            defaultValue={sortByValue}
+            onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+          />
+        )}
+      </SearchWrapper>
+    </WrapperSearch>
+  )
+}

package/src/themes/five/src/components/BusinessBasicInformation/SocialNetWork.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { IconWrapper } from './styles'
+
+export const SocialNetWork = ({ url, icon }) => {
+  return (
+    <IconWrapper href={url} target='_blank' rel='noopener noreferrer'>
+      {icon}
+    </IconWrapper>
+  )
+}