ordering-ui-external 2.6.5 → 2.6.8

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

@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import Skeleton from 'react-loading-skeleton'
-import { StarFill, Facebook, Tiktok, Pinterest, Whatsapp, Instagram, Snapchat } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 
 import { Modal } from '../Modal'
@@ -8,12 +6,9 @@ import { BusinessInformation } from '../BusinessInformation'
 import { BusinessReviews } from '../BusinessReviews'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
 
-import { useUtils, useOrder, useLanguage, useConfig } from 'ordering-components-external'
+import { useUtils, useLanguage } from 'ordering-components-external'
 
-import { convertHoursToMinutes, shape, lightenDarkenColor } from '../../../../../utils'
-import { Select } from '../../styles/Select'
 import { MomentContent } from '../MomentContent'
-import CgSearch from '@meronex/icons/cg/CgSearch'
 import { SearchProducts } from '../SearchProducts'
 import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/components/BusinessProductsListing/SearchProducts'
 import {
@@ -21,22 +16,10 @@ import {
   BusinessContent,
   WrapperBusinessLogo,
   BusinessLogo,
-  BusinessInfo,
-  BusinessInfoItem,
-  BusinessInfoContainer,
-  BusinessInfoContent,
-  WrapperSearch,
-  BusinessDetail,
   BusinessMoreDetail,
-  TitleWrapper,
-  RibbonBox,
-  SearchIconWrapper,
   SearchComponentContainer,
-  SocialList,
-  IconWrapper,
   BusinessInfoWrapper,
-  WrapperFloatingSearch,
-  SearchWrapper
+  WrapperFloatingSearch
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
 
@@ -44,6 +27,8 @@ import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import isBetween from 'dayjs/plugin/isBetween'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { BusinessInfoComponent } from './BusinessInfoComponent'
+import { SearchComponent } from './SearchComponent'
 
 dayjs.extend(timezone)
 dayjs.extend(isBetween)
@@ -63,36 +48,44 @@ export const BusinessBasicInformation = (props) => {
     handleChangeSortBy,
     categoryState,
     errorQuantityProducts,
-    isCustomerMode
+    isCustomerMode,
+    isCustomLayout
   } = props
   const { business, loading } = businessState
 
   const theme = useTheme()
-  const [orderState] = useOrder()
   const [, t] = useLanguage()
-  const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const [{ optimizeImage }] = useUtils()
   const windowSize = useWindowSize()
   const [isBusinessReviews, setIsBusinessReviews] = useState(false)
   const [isPreOrder, setIsPreOrder] = useState(false)
   const [openSearchProducts, setOpenSearchProducts] = useState(false)
-  const [{ configs }] = useConfig()
-  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 
   const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-  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 hideSort = theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
 
   const isInfoShrunken = theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
-  const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
   const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
-  const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
+
+  const businessInfoComponentProps = {
+    isChew,
+    loading,
+    business,
+    isInfoShrunken,
+    isCustomerMode,
+    setIsPreOrder,
+    setIsBusinessReviews,
+    categoryState,
+    searchValue,
+    errorQuantityProducts,
+    setOpenSearchProducts,
+    handleChangeSortBy,
+    sortByValue,
+    sortByOptions,
+    isCustomLayout
+  }
+
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -166,217 +159,6 @@ export const BusinessBasicInformation = (props) => {
     })
   }, [sortByValue])
 
-  const SearchComponent = () => {
-    return (
-      <WrapperSearch id='search-component'>
-        <SearchWrapper>
-          <SearchIconWrapper
-            onClick={() => setOpenSearchProducts(true)}
-          >
-            <CgSearch />
-          </SearchIconWrapper>
-          {!hideSort && (
-            <Select
-              notAsync
-              notReload
-              options={sortByOptions}
-              defaultValue={sortByValue}
-              onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
-            />
-          )}
-        </SearchWrapper>
-      </WrapperSearch>
-    )
-  }
-
-  const SocialNetWork = ({ url, icon }) => {
-    return (
-      <IconWrapper href={url} target='_blank' rel='noopener noreferrer'>
-        {icon}
-      </IconWrapper>
-    )
-  }
-
-  const BusinessInfoComponent = () => {
-    return (
-      <BusinessInfoContainer isChew={isChew} isFlexEnd={windowSize.width >= 768}>
-        <BusinessInfoContent>
-          <BusinessInfo className='info'>
-            <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
-              {!loading ? (
-                <TitleWrapper>
-                  <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 />
-          )}
-      </BusinessInfoContainer>
-    )
-  }
-
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -401,7 +183,10 @@ export const BusinessBasicInformation = (props) => {
       )}
       <BusinessInfoWrapper>
         {(!isInfoShrunken && !isChew) && (
-          <BusinessInfoComponent />
+          <BusinessInfoComponent
+            {...businessInfoComponentProps}
+
+          />
         )}
         {(business?.header || business?.logo || loading || isInfoShrunken) && (
           <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open} isChew={isChew}>
@@ -416,13 +201,20 @@ export const BusinessBasicInformation = (props) => {
               </BusinessContent>
             )}
             {(isInfoShrunken || isChew) && (
-              <BusinessInfoComponent />
+              <BusinessInfoComponent
+                {...businessInfoComponentProps}
+              />
             )}
             {!loading && (
               <>
                 {isInfoShrunken && (
                   <SearchComponentContainer>
-                    <SearchComponent />
+                    <SearchComponent
+                      setOpenSearchProducts={setOpenSearchProducts}
+                      handleChangeSortBy={handleChangeSortBy}
+                      sortByValue={sortByValue}
+                      sortByOptions={sortByOptions}
+                    />
                   </SearchComponentContainer>
                 )}
                 {searchLayout === 'floating' && (

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

@@ -249,7 +249,7 @@ export const WrapperSearch = styled.div`
     position: fixed;
     top: 0;
     right: 0;
-    z-index: 1002;
+    z-index: 10001;
     width: fit-content;
     margin-top: 0px;
     background-color: ${props => props.theme.colors.backgroundPage};
@@ -260,6 +260,7 @@ export const WrapperSearch = styled.div`
     &.fixed-search {
       left: 0;
       width: 100vw;
+      z-index: 1002;
     }
   }
 `
@@ -370,17 +371,26 @@ export const TitleWrapper = styled.div`
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    background: ${({ theme }) => theme?.colors?.white};
     &.fixed-name {
       z-index: 1002;
       position: fixed;
       top: 0;
-      width: calc(100vw - 190px);
       padding: 10px 0;
       font-size: 18px;
-      ${props => props.theme?.rtl ? css`
+      ${({ isCustomLayout }) => !isCustomLayout ? css`
+        width: calc(100vw - 190px);
+        ${props => props.theme?.rtl ? css`
         right: 50px;
-      ` : css`
+        ` : css`
         left: 50px;
+        `}
+      ` : css`
+      ${props => props.theme?.rtl ? css`
+          right: 10px;
+          ` : css`
+          left: 10px;
+        `}
       `}
     }
     @media (min-width: 768px) {

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

@@ -94,7 +94,7 @@ const BusinessProductsCategoriesUI = (props) => {
           categoryListsElement.scrollTo({
             top: 0,
             left: moveAmount,
-            behavior: 'smooth'
+            behavior: 'auto'
           })
         }
         setSelectedCateogry(category)

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { CardCvcElement, CardElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js'
-import { CardForm as CardFormController, useLanguage } from 'ordering-components-external'
-
+import { CardForm as CardFormController, useLanguage, useValidationFields } from 'ordering-components-external'
 import {
   FormStripe,
   FormRow,
@@ -10,7 +9,9 @@ import {
   CardNumberField,
   CardExpiryCvcField,
   CardExpiryField,
-  CardCvcField
+  CardCvcField,
+  CardZipcodeField,
+  ZipcodeField
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -43,10 +44,14 @@ const CardFormUI = (props) => {
     handleChange,
     isSplitForm,
     handleChangeExpiry,
-    handleChangeCvc
+    handleChangeCvc,
+    errorZipcode
   } = props
 
   const [, t] = useLanguage()
+  const [validationFields] = useValidationFields()
+  const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
+  const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
 
   return (
     <>
@@ -93,6 +98,22 @@ const CardFormUI = (props) => {
                   <ErrorMessage>{errorCvc}</ErrorMessage>
                 </CardCvcField>
               </CardExpiryCvcField>
+              {zipCodeEnabled && (
+                <CardZipcodeField>
+                  <label>{t('ZIPCODE', 'Zipcode')}</label>
+                  <ZipcodeField
+                    name='zipcode'
+                    placeholder={`${t('ZIPCODE', 'Zipcode')}${zipCodeRequired ? '*' : ''}`}
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChange}
+                    pattern='[0-9]'
+                    type='number'
+                  />
+                  {errorZipcode && (
+                    <ErrorMessage>{t('ZIPCODE_IS_INCOMPLETED', 'The zipcode is incompleted.')}</ErrorMessage>
+                  )}
+                </CardZipcodeField>
+              )}
             </>
           }
         </FormRow>

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

@@ -40,6 +40,10 @@ export const CardCvcField = styled.div`
   color: #ADB2B9;
 `
 
+export const CardZipcodeField = styled.div`
+  color: #ADB2B9;
+`
+
 export const CardNumberField = styled.div`
   width: 100%;
   color: #ADB2B9;
@@ -98,3 +102,34 @@ export const FormActions = styled.div`
     }
   }
 `
+
+export const ZipcodeField = styled.input`
+  font-weight: 500;
+  font-size: 16px;
+  box-sizing: border-box;
+  width: 100% !important;
+  &:-webkit-autofill {
+    color: '#fce883'
+  }
+  &::placeholder {
+    font-weight: 500
+  }
+  &:focus(){
+    box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+      rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
+    -webkit-transition: all 150ms ease;
+    transition: all 150ms ease;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+  
+`

package/src/themes/five/src/components/CardFormCustom/cardUtils.js

@@ -0,0 +1,111 @@
+import Payment from 'payment'
+
+const clearNumber = (value = '') => {
+  return value.replace(/\D+/g, '')
+}
+
+export const formatCreditCardNumber = (value) => {
+  if (!value) {
+    return value
+  }
+
+  const issuer = Payment.fns.cardType(value)
+  const clearValue = clearNumber(value)
+  let nextValue
+
+  switch (issuer) {
+    case 'amex':
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
+        4,
+        10
+      )} ${clearValue.slice(10, 15)}`
+      break
+    case 'dinersclub':
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
+        4,
+        10
+      )} ${clearValue.slice(10, 14)}`
+      break
+    default:
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
+        4,
+        8
+      )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`
+      break
+  }
+
+  return nextValue.trim()
+}
+
+export const formatCVC = (value, prevValue, allValues = {}) => {
+  const clearValue = clearNumber(value)
+  let maxLength = 4
+
+  if (allValues.number) {
+    const issuer = Payment.fns.cardType(allValues.number)
+    maxLength = issuer === 'amex' ? 4 : 3
+  }
+
+  return clearValue.slice(0, maxLength)
+}
+
+export const formatExpirationDate = (value) => {
+  const clearValue = clearNumber(value)
+
+  if (clearValue.length >= 3) {
+    return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`
+  }
+
+  return clearValue
+}
+
+export const getCardType = (number) => {
+  // visa
+  var re = new RegExp('^4')
+  if (number.match(re) != null) {
+    return 'Visa'
+  }
+
+  // Mastercard
+  // Updated for Mastercard 2017 BINs expansion
+  if (/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/.test(number)) {
+    return 'Mastercard'
+  }
+  // AMEX
+  re = new RegExp('^3[47]')
+  if (number.match(re) != null) {
+    return 'AMEX'
+  }
+
+  // Discover
+  re = new RegExp('^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)')
+  if (number.match(re) != null) {
+    return 'Discover'
+  }
+
+  // Diners
+  re = new RegExp('^36')
+  if (number.match(re) != null) {
+    return 'Diners'
+  }
+
+  // Diners - Carte Blanche
+  re = new RegExp('^30[0-5]')
+  if (number.match(re) != null) {
+    return 'Diners - Carte Blanche'
+  }
+
+  // JCB
+  re = new RegExp('^35(2[89]|[3-8][0-9])')
+  if (number.match(re) != null) {
+    return 'JCB'
+  }
+
+  // Visa Electron
+  re = new RegExp('^(4026|417500|4508|4844|491(3|7))')
+  if (number.match(re) != null) {
+    return 'Visa Electron'
+  }
+
+  return ''
+}