ordering-ui-external 14.1.49 → 14.1.52

package/src/themes/five/src/components/BusinessesListing/franchises/OloBusinessesListing/styles.js

@@ -0,0 +1,307 @@
+import styled, { css } from 'styled-components'
+import React from 'react'
+
+export const BusinessContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+`
+
+export const BusinessSearch = styled.div`
+    display: flex;
+    background-color: #f8f9fa;
+    align-items: center;
+    padding: 7px;
+    border-radius: 7px;
+    font-size: 11px;
+    svg {
+      font-size: 15px;
+    }
+`
+
+export const BusinessList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const ErrorMessage = styled.span`
+  padding: 20px;
+  width: 100%;
+  background-color: #CCCCCC;
+  margin: 0px 15px;
+  color: #D81313;
+  font-weight: bold;
+`
+
+export const PreviousOrders = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 10px 20px 0px;
+`
+
+export const HightestRatedWrapper = styled.div`
+  padding: 50px 0 30px 0;
+`
+
+export const Divider = styled.div`
+  background: rgb(230, 234, 233);
+  height: 8px;
+  width: 100%;
+`
+
+export const HeaderSearchMode = styled.div`
+  position: absolute;
+  width: 200px;
+`
+
+export const AddressFormWrapper = styled.div`
+  @media (min-width: 450px) {
+    margin-top: 20px;
+  }
+`
+
+export const IconTypeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  border-radius: 44px;
+`
+
+export const TypesContainer = styled.div`
+  display: flex;
+  margin-top: 20px;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  button {
+    padding: 4px 10px;
+    border-radius: 50px;
+    font-size: 10px;
+    line-height: 0;
+    height: 25px;
+    margin-right: 20px;
+  }
+  .activated {
+    color: ${({ theme }) => theme?.colors?.darkTextColor}
+  }
+`
+
+export const TypeButton = styled.div`
+  display: flex;
+  align-items: center;
+  width: 215px;
+  height: 75px;
+  border-radius: 7.6px;
+  padding: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  margin-right: 32px;
+  cursor: pointer;
+  box-sizing: border-box;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.primary : theme?.colors?.white};
+  p{
+    margin: 0;
+    margin-left: 33px;
+    ${({ activated, theme }) => activated && css`
+      color: ${theme?.colors?.white};
+    `}
+  }
+`
+
+export const Title = styled.h2`
+    font-size: 32px;
+    font-weight: 600;
+    margin: 0;
+    margin-bottom: 20px;
+`
+
+export const Subtitle = styled.h3`
+    font-size: 18px;
+    font-weight: 400;
+    margin: 0;
+    margin-bottom: 20px;
+`
+
+export const BusinessListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding: 40px 20px 0px 20px;
+  box-sizing: border-box;
+`
+
+export const AdditionalTypesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  padding-bottom: 0;
+`
+
+export const WrapInput = styled.div`
+  position: relative;
+  cursor: pointer;
+  background: #FFFFFF;
+  padding: 8px 16px;
+  border: 1px solid #DEE2E6;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 22px;
+  margin-top: 22px;
+  width: 100%;
+  height: 44px;
+  ${({ withIcon }) => withIcon && css`
+    box-sizing: border-box;
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: 5px;
+      top: 0;
+      bottom: 18px;
+      width: 15px;
+
+      ${props => props.theme?.rtl && css`
+        left: 5px;
+        right: initial;
+     `}
+    }
+
+    @media (min-width: 576px) {
+      padding: 10px 25px;
+      margin-bottom: 27px;
+    }
+  `}
+
+  p{
+    color: ${props => props.theme.colors.darkTextColor};
+    position: relative;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 18px;
+    @media (min-width: 576px) {
+      font-size: 1rem;
+      line-height: initial;
+    }
+  }
+
+  svg {
+    color: #B1BCCC;
+    font-size: 20px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 12px;
+    ` : css`
+      margin-right: 12px;
+    `}
+
+    @media (min-width: 576px) {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 20px;
+      ` : css`
+        margin-right: 20px;
+      `}
+    }
+  }
+`
+
+export const PaginationContainer = styled.div`
+  align-self: flex-end;
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const WrapperMap = styled.div`
+  width: 50%;
+  max-height: 2500px;
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .btn-choose-store {
+    line-height: 30px;
+    padding: 0 10px;
+    font-size: 14px;
+    cursor: pointer;
+    outline: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 80px;
+    height: 38px;
+    font-size: 14px;
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    border-color: ${props => props.theme.colors.primary};
+  }
+
+  .btn-address-map {
+    cursor: pointer;
+    &:hover{
+      text-decoration: underline;
+    }
+  }
+  .className {
+    object-fit: none;
+  }
+`
+
+export const CityContainer = styled.div`
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme?.colors?.tertiary || '#fff'};;
+  height: 70px;
+  margin: 0;
+  box-sizing: border-box;
+
+  h3{
+    font-size: 16px;
+  }
+  ${({ isSelected }) => isSelected && css`
+      
+  `}
+`
+
+export const LoadMoreButtonCityWrap = styled.div`
+  margin-top: 10px;
+  button {
+    width: 100%;
+  }
+`
+
+export const ViewLocations = styled.div`
+  p {
+    color: ${({ theme }) => theme?.colors?.primary};
+    cursor: pointer;
+  }
+`
+
+export const CitiesContainer = styled.div`
+  border-radius: 7.6px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  > div {
+    cursor: pointer;
+  }
+  margin-bottom: 20px;
+`
+
+export const Separator = styled.div`
+  height: 1px;
+  margin-left: 20px;
+  margin-right: 40px;
+  background: #E9ECEF;
+  box-sizing: border-box;
+`

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

@@ -4,18 +4,33 @@ import { RedBusinessesListing } from './layouts/RedBusinessesListing'
 import { StarbucksBusinessesListing } from './layouts/StarbucksBusinessesListing'
 import { BusinessListing as AppointmentsBusinessListing } from './layouts/AppointmentsBusinessListing'
 import { useTheme } from 'styled-components'
+import { OloBusinessesListing } from './franchises/OloBusinessesListing'
 
 export const BusinessesListing = (props) => {
   const { logosLayout } = props
   const theme = useTheme()
+  const websiteTheme = theme?.my_products?.components?.website_theme?.components?.type
+
+  const franchiseLayout = theme?.my_products?.components?.website_theme?.components?.franchise_slug
+
   const layout = theme?.business_listing_view?.components?.layout?.type || 'original'
   const isStarbucksLayout = ['starbucks', 'mapview'].includes(layout)
+  const oloLayout = ['franchise_1', 'franchise_2']
   return (
     <>
-      {(layout === 'original' || logosLayout) && <OriginalBusinessesListing {...props} />}
-      {(isStarbucksLayout) && !logosLayout && <StarbucksBusinessesListing {...props} />}
-      {(layout === 'red') && !logosLayout && <RedBusinessesListing {...props} />}
-      {(layout === 'appointments') && !logosLayout && <AppointmentsBusinessListing {...props} />}
+      {websiteTheme === 'franchise' ? (
+        <>
+          {oloLayout.includes(franchiseLayout) && <OloBusinessesListing {...props} />}
+          {!franchiseLayout && <OriginalBusinessesListing {...props} />}
+        </>
+      ) : (
+        <>
+          {(layout === 'original' || logosLayout) && <OriginalBusinessesListing {...props} />}
+          {(isStarbucksLayout) && !logosLayout && <StarbucksBusinessesListing {...props} />}
+          {(layout === 'red') && !logosLayout && <RedBusinessesListing {...props} />}
+          {(layout === 'appointments') && !logosLayout && <AppointmentsBusinessListing {...props} />}
+        </>
+      )}
     </>
   )
 }

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -23,12 +23,7 @@ import {
   BusinessLogosContainer,
   BusinessBanner,
   BusinessLogosWrapper,
-  AddressFormWrapper,
-  Title,
-  TypesContainer,
-  TypeButton,
-  IconTypeButton,
-  AdditionalTypesContainer
+  AddressFormWrapper
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
@@ -55,6 +50,7 @@ import { OrdersSection } from './OrdersSection'
 import { getCateringValues } from '../../../../../../../utils'
 import { AddressList } from '../../../AddressList'
 import { AddressForm } from '../../../AddressForm'
+import { OrderTypesSquares } from '../../../OrderTypesSquares'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -78,11 +74,9 @@ const BusinessesListingUI = (props) => {
     actualSlug,
     orderTypes
   } = props
-  const allOrderTypes = [1, 2, 3, 4, 5]
-  const pickupTypes = [2, 4, 5]
-  const eatInType = 3
+
   const [, t] = useLanguage()
-  const [orderState, { changeCityFilter, changeType }] = useOrder()
+  const [orderState, { changeCityFilter }] = useOrder()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
@@ -94,7 +88,6 @@ const BusinessesListingUI = (props) => {
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
-  const [orderTypeSelected, setOrderTypeSelected] = useState(orderState?.options?.type)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
   const allCitiesDisabled = citiesState?.cities?.every(city => !city.enabled)
@@ -114,7 +107,6 @@ const BusinessesListingUI = (props) => {
     : orderState?.options?.type === 8
       ? 'catering_pickup'
       : null
-  const configTypes = configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
 
   const handleScroll = useCallback(() => {
@@ -182,19 +174,6 @@ const BusinessesListingUI = (props) => {
     changeCityFilter(cityId === orderState?.options?.city_id ? null : cityId)
   }
 
-  const handleChangeType = (value) => {
-    if (!orderState?.loading) {
-      changeType(value)
-      setOrderTypeSelected(value)
-    }
-  }
-
-  const handleChangeToPickup = () => {
-    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
-    handleChangeType(firstEnabledPickupType)
-    setOrderTypeSelected(firstEnabledPickupType)
-  }
-
   useEffect(() => {
     if (preorderBusiness) setIsPreorder(true)
   }, [preorderBusiness])
@@ -224,28 +203,6 @@ const BusinessesListingUI = (props) => {
     setHasHighRatedBusiness(true)
   }, [citiesState, orderState?.options?.city_id])
 
-  useEffect(() => {
-    setOrderTypeSelected(orderState?.options?.type)
-  }, [orderState?.options?.type])
-
-  const OrderTypesComponent = () => {
-    return (
-      <>
-        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && pickupTypes.includes(type?.value)) : orderTypes).map((item, i) => (
-          <Button
-            key={item.value}
-            onClick={() => handleChangeType(item.value)}
-            color={orderState?.options?.type === item?.value ? 'primary' : 'secondary'}
-            disabled={orderState?.loading}
-            className={orderState?.options?.type !== item?.value ? 'activated' : ''}
-          >
-            {item.text}
-          </Button>
-        ))}
-      </>
-    )
-  }
-
   if (logosLayout) {
     return (
       <BusinessLogosWrapper>
@@ -295,63 +252,9 @@ const BusinessesListingUI = (props) => {
       )}
       {(userCustomer && orderState?.options?.address?.address && isCustomerMode) && (
         <>
-          {(configTypes.includes(1) || configTypes.some(type => pickupTypes.includes(type))) && (
-            <Title>{t('DELIVERY_TYPE', 'Delivery Type')}</Title>
-          )}
-          <TypesContainer>
-            {configTypes.includes(1) && (
-              <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={orderTypeSelected === 1}>
-                <IconTypeButton activated={orderTypeSelected === 1}>
-                  <img
-                    src={theme?.images?.general?.deliveryIco}
-                    width={20}
-                    height={20}
-                  />
-                </IconTypeButton>
-                <p>{t('DELIVERY', 'Delivery')}</p>
-              </TypeButton>
-            )}
-            {configTypes.some(type => pickupTypes.includes(type)) && (
-              <TypeButton
-                disabled={orderState?.loading}
-                activated={pickupTypes.includes(orderTypeSelected)}
-                onClick={() => handleChangeToPickup()}
-              >
-                <IconTypeButton activated={pickupTypes.includes(orderTypeSelected)}>
-                  <img
-                    src={theme?.images?.general?.pickupIco}
-                    width={22}
-                    height={22}
-                  />
-                </IconTypeButton>
-                <p>{t('PICKUP', 'Pickup')}</p>
-              </TypeButton>
-            )}
-            {configTypes.some(type => eatInType === type) && (
-              <TypeButton
-                disabled={orderState?.loading}
-                activated={orderTypeSelected === 3}
-                onClick={() => handleChangeType(3)}
-              >
-                <IconTypeButton activated={orderTypeSelected === 3}>
-                  <img
-                    src={theme?.images?.general?.eatinIco}
-                    width={22}
-                    height={22}
-                  />
-                </IconTypeButton>
-                <p>{t('EAT_IN', 'Eat in')}</p>
-              </TypeButton>
-            )}
-          </TypesContainer>
-          {pickupTypes.includes(orderTypeSelected) && (
-            <>
-              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
-              <AdditionalTypesContainer>
-                <OrderTypesComponent />
-              </AdditionalTypesContainer>
-            </>
-          )}
+          <OrderTypesSquares
+            orderTypes={orderTypes}
+          />
         </>
       )}
       {!isCustomerMode && (

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/styles.js

@@ -59,7 +59,7 @@ export const WrapperSearch = styled.div`
     margin: 0;
     margin-top: 10px;
     margin-bottom: 20px;
-    width: 100%; 
+    width: 100%;
     padding: 0 20px;
     ${isCustomerMode ? css`
       margin-right: 20px;
@@ -69,7 +69,7 @@ export const WrapperSearch = styled.div`
     svg {
       align-self: auto;
     }
-    
+
     @media(min-width: 681px){
       width: 75%;
       padding: 0;

package/src/themes/five/src/components/Checkout/OrderDetail.js

@@ -9,20 +9,16 @@ export const OrderDetail = (props) => {
   const {
     item,
     placingOrder,
-    orderType,
     customerAddress,
     onClick
   } = props
 
   const [, t] = useLanguage()
-  const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
 
   return (
     <OrderDetailContainer>
+
       <h3>{customerAddress}</h3>
-      <h3>
-        {(orderTypeList[orderType - 1]) || t('DELIVERY', 'Delivery')}
-      </h3>
       <div>
         {item?.products.filter(product => !product?.calendar_event).map(product => (
           <ProductItemAccordion

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

@@ -70,6 +70,7 @@ import { SignUpForm } from '../SignUpForm'
 import { LoginForm } from '../LoginForm'
 import { OrderDetail } from './OrderDetail'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
+import { OrderTypesSquares } from '../OrderTypesSquares'
 
 const mapConfigs = {
   mapZoom: 16,
@@ -134,6 +135,7 @@ const CheckoutUI = (props) => {
   const [productLoading, setProductLoading] = useState(false)
 
   const shouldActivateOrderDetailModal = isCustomerMode
+  const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
   const cardsMethods = ['stripe', 'credomatic']
   const stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect']
   const businessConfigs = businessDetails?.business?.configs ?? []
@@ -273,6 +275,7 @@ const CheckoutUI = (props) => {
   const checkValidationFields = () => {
     setUserErrors([])
     const errors = []
+    const UKCodes = ['44']
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
     Object.values(checkoutFieldsState?.fields).map(field => {
@@ -302,7 +305,15 @@ const CheckoutUI = (props) => {
         let phone = null
         phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone.replace(`+${userSelected?.country_phone_code}`, '')}`
         const phoneNumber = parsePhoneNumber(phone)
-        if (parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10) && !phoneNumber?.isValid()) {
+        let enableIspossibly = false
+        if (UKCodes.includes(phoneNumber?.countryCallingCode)) {
+          const inputNumber = userSelected?.cellphone
+          const validationsForUK = ['01', '02', '07', '0800', '0808', '0845', '0870', '0871', '16']
+          const result = validationsForUK.some(areaCode => inputNumber?.startsWith(areaCode))
+          enableIspossibly = result
+        }
+        const validation = enableIspossibly ? phoneNumber?.isPossible?.() : phoneNumber?.isValid?.()
+        if (parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10) && !validation) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'))
         }
       } else {
@@ -592,7 +603,9 @@ const CheckoutUI = (props) => {
         </WrapperLeftContent>
       </WrapperLeftContainer>
       <WrapperRightContainer>
-
+        {isCustomerMode && (
+          <OrderTypesSquares />
+        )}
         {
           !!(!isMultiDriverTips && driverTipsField) &&
             <>
@@ -862,6 +875,11 @@ const CheckoutUI = (props) => {
         width='760px'
         padding='30px'
         onClose={() => setOpenModal({ ...openModal, orderDetail: false })}
+        title={(orderTypeList[options?.type - 1]) || t('DELIVERY', 'Delivery')}
+        titleStyle={{
+          color: theme?.colors?.primary,
+          fontSize: 30
+        }}
       >
         <OrderDetail
           item={cart}

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

@@ -86,5 +86,6 @@ export const WrapperTips = styled.div`
 
   > div {
     margin: 5px;
+    text-align: center;
   }
 `

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

@@ -54,7 +54,6 @@ import { Button } from '../../styles/Buttons'
 
 export const Header = (props) => {
   const {
-    isHome,
     location,
     isShowOrderOptions,
     isHideSignup,
@@ -114,6 +113,7 @@ export const Header = (props) => {
       ? 'catering_pickup'
       : null
 
+  const franchiseLayout = theme?.my_products?.components?.website_theme?.components?.franchise_slug
   const cateringValues = getCateringValues(cateringTypeString, pathname.includes('store') && Object?.keys(business || {})?.length > 0 ? business?.configs : configState?.configs)
 
   const handleSuccessSignup = (user) => {
@@ -299,6 +299,7 @@ export const Header = (props) => {
                   )}
                   {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
                     <MomentMenu
+                      isFranchiseSlugOne={franchiseLayout === 'franchise_1'}
                       onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
                         ? null
                         : () => openModal('moment')}
@@ -312,17 +313,21 @@ export const Header = (props) => {
                   )}
                 </>
               )}
-              {windowSize.width > 768 ? (
-                <OrderTypeSelectorHeader
-                  orderTypeList={orderTypeList}
-                  onClick={() => openModal('delivery')}
-                />
-              ) : (
-                <HeaderOption
-                  variant='delivery'
-                  onClick={(variant) => openModal(variant)}
-                  orderTypeList={orderTypeList}
-                />
+              {franchiseLayout !== 'franchise_1' && (
+                <>
+                  {windowSize.width > 768 ? (
+                    <OrderTypeSelectorHeader
+                      orderTypeList={orderTypeList}
+                      onClick={() => openModal('delivery')}
+                    />
+                  ) : (
+                    <HeaderOption
+                      variant='delivery'
+                      onClick={(variant) => openModal(variant)}
+                      orderTypeList={orderTypeList}
+                    />
+                  )}
+                </>
               )}
             </Menu>
           )}