ordering-ui-external 1.1.6 → 1.2.0

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

@@ -86,6 +86,11 @@ export const ModalActions = styled.div`
 `
 export const ModalHeader = styled.div`
   display: flex;
+  margin-top: 30px;
+
+  @media(min-width: 450px){
+    margin-top: 0;
+  }
 
 `
 

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

@@ -128,64 +128,64 @@ const MomentControlUI = (props) => {
   const setLocalMoment = () => {
     moment.updateLocale('custom', {
       months: [
-        t('MONTH1','January'),
-        t('MONTH2','February'),
-        t('MONTH3','March'),
-        t('MONTH4','April'),
-        t('MONTH5','May'),
-        t('MONTH6','June'),
-        t('MONTH7','July'),
-        t('MONTH8','August'),
-        t('MONTH9','September'),
-        t('MONTH10','October'),
-        t('MONTH11','November'),
-        t('MONTH12','December')
+        t('MONTH1', 'January'),
+        t('MONTH2', 'February'),
+        t('MONTH3', 'March'),
+        t('MONTH4', 'April'),
+        t('MONTH5', 'May'),
+        t('MONTH6', 'June'),
+        t('MONTH7', 'July'),
+        t('MONTH8', 'August'),
+        t('MONTH9', 'September'),
+        t('MONTH10', 'October'),
+        t('MONTH11', 'November'),
+        t('MONTH12', 'December')
       ],
       monthsShort: [
-        t('MONTHSHORT1','Jan'),
-        t('MONTHSHORT2','Feb'),
-        t('MONTHSHORT3','Mar'),
-        t('MONTHSHORT4','Apr'),
-        t('MONTHSHORT5','May'),
-        t('MONTHSHORT6','Jun'),
-        t('MONTHSHORT7','Jul'),
-        t('MONTHSHORT8','Aug'),
-        t('MONTHSHORT9','Sep'),
-        t('MONTHSHORT10','Oct'),
-        t('MONTHSHORT11','Nov'),
-        t('MONTHSHORT12','Dec')
+        t('MONTHSHORT1', 'Jan'),
+        t('MONTHSHORT2', 'Feb'),
+        t('MONTHSHORT3', 'Mar'),
+        t('MONTHSHORT4', 'Apr'),
+        t('MONTHSHORT5', 'May'),
+        t('MONTHSHORT6', 'Jun'),
+        t('MONTHSHORT7', 'Jul'),
+        t('MONTHSHORT8', 'Aug'),
+        t('MONTHSHORT9', 'Sep'),
+        t('MONTHSHORT10', 'Oct'),
+        t('MONTHSHORT11', 'Nov'),
+        t('MONTHSHORT12', 'Dec')
       ],
       weekdays: [
-        t('DAY7','Sunday'),
-        t('DAY1','Monday'),
-        t('DAY2','Tuesday'),
-        t('DAY3','Wednesday'),
-        t('DAY4','Thursday'),
-        t('DAY5','Friday'),
-        t('DAY6','Saturday')
+        t('DAY7', 'Sunday'),
+        t('DAY1', 'Monday'),
+        t('DAY2', 'Tuesday'),
+        t('DAY3', 'Wednesday'),
+        t('DAY4', 'Thursday'),
+        t('DAY5', 'Friday'),
+        t('DAY6', 'Saturday')
       ],
       weekdaysShort: [
-        t('DAYSHORT7','Sun'),
-        t('DAYSHORT1','Mon'),
-        t('DAYSHORT2','Tue'),
-        t('DAYSHORT3','Wed'),
-        t('DAYSHORT4','Thu'),
-        t('DAYSHORT5','Fri'),
-        t('DAYSHORT6','Sat')
+        t('DAYSHORT7', 'Sun'),
+        t('DAYSHORT1', 'Mon'),
+        t('DAYSHORT2', 'Tue'),
+        t('DAYSHORT3', 'Wed'),
+        t('DAYSHORT4', 'Thu'),
+        t('DAYSHORT5', 'Fri'),
+        t('DAYSHORT6', 'Sat')
       ],
       weekdaysMin: [
-        t('DAYMIN7','Su'),
-        t('DAYMIN1','Mo'),
-        t('DAYMIN2','Tu'),
-        t('DAYMIN3','We'),
-        t('DAYMIN4','Th'),
-        t('DAYMIN5','Fr'),
-        t('DAYMIN6','Sa')
+        t('DAYMIN7', 'Su'),
+        t('DAYMIN1', 'Mo'),
+        t('DAYMIN2', 'Tu'),
+        t('DAYMIN3', 'We'),
+        t('DAYMIN4', 'Th'),
+        t('DAYMIN5', 'Fr'),
+        t('DAYMIN6', 'Sa')
       ],
-      meridiem : function (hours) {
-        return hours < 12 ? t('AM', 'AM') : t('PM','PM');
+      meridiem: function (hours) {
+        return hours < 12 ? t('AM', 'AM') : t('PM', 'PM')
       }
-   })
+    })
   }
 
   useEffect(() => {

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

@@ -8,7 +8,6 @@ export const Title = styled.div`
   color: ${props => props.theme.colors?.darkTextColor};
 
   @media (max-width: 450px) {
-    padding-left: 30px;
     ${props => props.theme.rtl && css`
       padding-right: 30px;
       padding-left: 0;

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 import {
   useLanguage,
   useUtils,
@@ -62,6 +63,7 @@ const MultiCheckoutUI = (props) => {
   const [customerState] = useCustomer()
   const [validationFields] = useValidationFields()
   const [{ user }] = useSession()
+  const history = useHistory()
 
   const [userErrors, setUserErrors] = useState([])
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(null)

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { SingleProductCard } from '../SingleProductCard'
+import {
+  Container,
+  ContentHeader,
+  ProductListWrapper,
+  ProductList
+} from './styles'
+import { AutoScroll } from '../AutoScroll'
+
+export const OrderItAgain = (props) => {
+  const {
+    onProductClick,
+    isGroceries,
+    productList,
+    businessId
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <Container isGroceries={isGroceries}>
+      <ContentHeader isGroceries={isGroceries}>
+        <h2>{t('ORDER_IT_AGAIN', 'Order it again')}</h2>
+        <p>{t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}</p>
+      </ContentHeader>
+      <ProductListWrapper>
+        <ProductList>
+          <AutoScroll scrollId='orderItAgain'>
+            {productList.map((product, i) => (
+              <SingleProductCard
+                key={i}
+                isSoldOut={product.inventoried && !product.quantity}
+                businessId={businessId}
+                product={product}
+                onProductClick={onProductClick}
+                isPreviously
+              />
+            ))}
+          </AutoScroll>
+        </ProductList>
+      </ProductListWrapper>
+    </Container>
+  )
+}

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

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding-top: 30px;
+  margin-right: 30px;
+  ${props => props.theme.rtl && css`
+    margin-left: 30px;
+    margin-right: 0px;
+  `}
+  ${({ isGroceries }) => isGroceries && css`
+    padding-top: 0px;
+    margin-right: 0px;
+    margin-left: 0px;
+  `}
+`
+
+export const ContentHeader = styled.div`
+  margin-bottom: 27px;
+
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0px;
+    color: ${props => props.theme.colors.darkGray};
+  }
+  ${({ isGroceries }) => isGroceries && css`
+    ${props => props.theme.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  `}
+`
+
+export const ProductListWrapper = styled.div`
+  overflow: auto hidden;
+  width: 100%;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+`
+
+export const ProductList = styled.div`
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+
+  #orderItAgain > div {
+    width: 350px;
+  }
+`

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

@@ -817,6 +817,7 @@ const ProductOptionsUI = (props) => {
 export const ProductForm = (props) => {
   const productOptionsProps = {
     ...props,
+    productCart: { quantity: props?.product?.minimum_per_order || 1 },
     UIComponent: ProductOptionsUI
   }
 

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

@@ -1,12 +1,15 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import {
   Container,
   ProfessionalItem,
   ProfessionalPhoto,
   ContentWrapper,
-  ProfessionalListing
+  ProfessionalListing,
+  InfoWrapper,
+  HeartIconWrapper
 } from './styles'
 import { Modal } from '../Modal'
 import { ProfessionalProfile } from '../ProfessionalProfile'
@@ -53,7 +56,12 @@ export const ProfessionalFilter = (props) => {
                   onClick={() => handleOpenProfile(professional)}
                 >
                   {professional?.photo ? <ProfessionalPhoto bgimage={professional?.photo} /> : <FaUserAlt />}
-                  <p className='name'>{professional?.name} {professional?.lastname}</p>
+                  <InfoWrapper>
+                    <p className='name'>{professional?.name} {professional?.lastname}</p>
+                    <HeartIconWrapper>
+                      {professional?.favorite ? <Like /> : <DisLike />}
+                    </HeartIconWrapper>
+                  </InfoWrapper>
                 </ProfessionalItem>
               ))}
             </AutoScroll>

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

@@ -32,9 +32,14 @@ export const ProfessionalItem = styled.div`
     height: 42px;
     width: 42px;
     min-width: 42px;
+    margin-right: 12px;
+    ${props => props.theme.rtl && css`
+      margin-left: 12px;
+      margin-right: 0px;
+    `}
   }
 
-  > p {
+  p {
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;
@@ -42,14 +47,6 @@ export const ProfessionalItem = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
-    &.name {
-      margin-left: 12px;
-      ${props => props.theme.rtl && css`
-        margin-right: 12px;
-        margin-left: 0px;
-      `}
-    }
   }
 
   ${({ active }) => active && css`
@@ -68,6 +65,11 @@ const ProfessionalPhotoStyled = styled.div`
   width: 42px;
   min-width: 42px;
   border-radius: 7.6px;
+  margin-right: 12px;
+  ${props => props.theme.rtl && css`
+    margin-left: 12px;
+    margin-right: 0px;
+  `}
 `
 export const ProfessionalPhoto = (props) => {
   const style = {}
@@ -89,3 +91,16 @@ export const ContentWrapper = styled.div`
 export const ProfessionalListing = styled.div`
   display: flex;
 `
+
+export const InfoWrapper = styled.div`
+  width: calc(100% - 54px);
+`
+
+export const HeartIconWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  svg {
+    color: ${props => props.theme.colors.danger500};
+      font-size: 16px;
+  }
+`

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

@@ -40,6 +40,7 @@ import { SearchProducts as SearchProductsOld } from '../../../../../components/R
 import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/components/BusinessProductsListing/SearchProducts'
 import { ProfessionalFilter } from '../ProfessionalFilter'
 import { SearchIconWrapper } from '../BusinessBasicInformation/styles'
+import { OrderItAgain } from '../OrderItAgain'
 
 const layoutOne = 'groceries'
 
@@ -111,7 +112,7 @@ export const RenderProductsLayout = (props) => {
     layoutOne: frontLayout === layoutOne && isUseParentCategory
   }
   const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
-  const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
+  const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
 
   const BusinessLayoutCategories = businessLayout.layoutOne
     ? CategoriesLayoutGroceries
@@ -125,7 +126,7 @@ export const RenderProductsLayout = (props) => {
     <>
       {!isLoading && business?.id && (
         <WrappLayout isCartOnProductsList={isCartOnProductsList}>
-          {typeof hideBusinessNearCity !== 'undefined' && !hideBusinessNearCity && !useKioskApp && (
+          {!hideBusinessNearCity && !useKioskApp && (
             <NearBusiness>
               <BusinessesListing
                 logosLayout
@@ -234,6 +235,13 @@ export const RenderProductsLayout = (props) => {
                         />
                       </ProfessionalFilterWrapper>
                     )}
+                    {!business?.loading && business?.previously_products?.length > 0 && (
+                      <OrderItAgain
+                        onProductClick={onProductClick}
+                        productList={business?.previously_products}
+                        businessId={business?.id}
+                      />
+                    )}
                     <BusinessLayoutProductsList
                       categories={[
                         { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
@@ -328,11 +336,20 @@ export const RenderProductsLayout = (props) => {
                         openCategories={openCategories}
                         business={business}
                         currentCart={currentCart}
+                        useKioskApp={useKioskApp}
                       />
                     )}
                   </BusinessCategoriesContainer>
                   <BusinessCategoryProductWrapper>
-                    <WrapContent>
+                    <WrapContent isGroceries>
+                      {!business?.loading && business?.previously_products?.length > 0 && (
+                        <OrderItAgain
+                          onProductClick={onProductClick}
+                          productList={business?.previously_products}
+                          businessId={business?.id}
+                          isGroceries
+                        />
+                      )}
                       <BusinessLayoutProductsList
                         categories={[
                           { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },

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

@@ -12,9 +12,12 @@ export const WrappLayout = styled.div``
 
 export const WrapContent = styled.div`
   padding: 5px;
-  margin-top: 70px;
   background: ${props => props.theme.colors.backgroundPage};
 
+  ${({ isGroceries }) => !isGroceries && css`
+    margin-top: 70px;
+  `}
+
   @media (min-width: 576px) {
     padding: 0px;
   }
@@ -51,7 +54,7 @@ export const BusinessCategoryProductWrapper = styled.div`
   }
 
   @media (min-width: 1000px) {
-    width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '100%'};
+    width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '85%'};
   }
 `
 
@@ -214,11 +217,15 @@ export const ProfessionalFilterWrapper = styled.div`
 export const WrapperSearchAbsolute = styled.div`
   position: absolute;
   right: 5px;
-  top: 10px;
-  height: 100%;
+  top: 0px;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
+  width: 40px;
+  height: 52px;
+  background-color: ${props => props.theme.colors.backgroundPage};
+  box-sizing: border-box;
+  padding-bottom: 5px;
 `
 
 export const NearBusiness = styled.div`

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

@@ -9,15 +9,18 @@ export const ActionBlock = styled.div`
   justify-content: space-between;
   margin-top: 30px;
   width: 100%;
+
   span {
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     user-select: none;
   }
+
   button {
     font-size: 14px;
     padding: 6px 20px;
+
     svg {
       color: white;
       font-size: 21px;
@@ -40,6 +43,7 @@ export const HandReviewWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   p {
     font-size: 15px;
     color: ${props => props.theme?.colors.headingColor};
@@ -58,16 +62,19 @@ export const HandReviewContent = styled.div`
 
 export const HandIconWrapper = styled.span`
   margin-left: 15px;
+
   ${props => props.theme?.rtl && css`
     margin-right: 15px;
     margin-left: 0;
   `}
+
   svg {
     font-size: 24px;
     color: #B1BCCC;
     cursor: pointer;
     transition: all 0.3s linear;
   }
+
   ${({ active }) => active && css`
     svg {
       color: ${props => props.theme?.colors.primary};
@@ -86,6 +93,7 @@ export const AddCommentHideShow = styled.p`
   transition: all 0.3s linear;
   color: #909BA9;
   font-size: 13px;
+
   &:hover {
     color: ${props => props.theme?.colors.primary};
   }
@@ -97,12 +105,14 @@ export const AddCommentHideShow = styled.p`
 
 export const Comments = styled.div`
   margin-top: 50px;
+
   p {
     margin-top: 0;
     margin-bottom: 8px;
     font-size: 14px;
     color: #344050;
   }
+
   textarea {
     width: 100%;
     box-sizing: border-box;
@@ -124,18 +134,22 @@ export const ButtonCustomized = styled(Button)`
   background: #E9ECEF;
   border: 1px solid #E9ECEF;
   transition: all 0.3s linear;
+
   ${props => props.theme?.rtl && css`
     margin-left: 18px;
     margin-right: 0;
   `}
+
   svg {
     vertical-align: middle;
     margin-left: 5px;
+
     ${props => props.theme?.rtl && css`
       margin-right: 5px;
       margin-left: 0;
     `}
   }
+
   ${({ active }) => active && css`
     background: ${props => props.theme?.colors.primary};
     border: 1px solid ${props => props.theme?.colors.primary};

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

@@ -33,7 +33,8 @@ import {
   NameWrapper,
   StatusInfo,
   DropDownWrapper,
-  DropDownTitle
+  DropDownTitle,
+  EmptyProfessional
 } from './styles'
 import moment from 'moment'
 SwiperCore.use([Navigation])
@@ -201,31 +202,35 @@ const ServiceFormUI = (props) => {
           </SectionHeader>
           <ProfessionalSelectWrapper ref={dropDownRef}>
             <SelectedItem onClick={() => setIsDropDown(prev => !prev)}>
-              <InfoWrapper>
-                {currentProfessional?.photo ? (
-                  <ProfessionalPhoto
-                    bgimage={currentProfessional?.photo}
-                  />
-                ) : <FaUserAlt />}
-                <NameWrapper>
-                  <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
-                  <StatusInfo available={!isBusyTime()}>
-                    {isBusyTime(currentProfessional) ? (
-                      <>
-                        <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
-                      </>
-                    ) : (
-                      <span className='status'>{t('AVAILABLE', 'Available')}</span>
-                    )}
-                  </StatusInfo>
-                </NameWrapper>
-              </InfoWrapper>
+              {currentProfessional ? (
+                <InfoWrapper>
+                  {currentProfessional?.photo ? (
+                    <ProfessionalPhoto
+                      bgimage={currentProfessional?.photo}
+                    />
+                  ) : <FaUserAlt />}
+                  <NameWrapper>
+                    <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
+                    <StatusInfo available={!isBusyTime()}>
+                      {isBusyTime(currentProfessional) ? (
+                        <>
+                          <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
+                        </>
+                      ) : (
+                        <span className='status'>{t('AVAILABLE', 'Available')}</span>
+                      )}
+                    </StatusInfo>
+                  </NameWrapper>
+                </InfoWrapper>
+              ) : (
+                <p>{t('SELECT_PROFESSIONAL', 'Select professional')}</p>
+              )}
               <ChevronDown />
             </SelectedItem>
             {isDropDown && (
               <DropDownWrapper>
                 <DropDownTitle>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</DropDownTitle>
-                {professionalList?.map((professional) => professional?.products?.includes(product?.id) && (
+                {professionalList?.map((professional) => (
                   <SelectedItem
                     key={professional?.id}
                     isDropDown
@@ -263,7 +268,7 @@ const ServiceFormUI = (props) => {
             <h2>{t('SCHEDULE', 'Schedule')}</h2>
             <span>{t('REQUIRED', 'Required')}</span>
           </SectionHeader>
-          {currentProfessional && (
+          {currentProfessional ? (
             <BusinessPreorder
               business={currentProfessional}
               isProfessional
@@ -271,6 +276,10 @@ const ServiceFormUI = (props) => {
               onChangeMoment={setDateSelected}
               useOrderContext={false}
             />
+          ) : (
+            <EmptyProfessional>
+              {t('NO_SCHEDULE', 'No schedule')}
+            </EmptyProfessional>
           )}
         </ScheduleWrapper>
         <ButtonWrapper>

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

@@ -190,6 +190,8 @@ export const DropDownWrapper = styled.div`
   width: 100%;
   z-index: 10;
   box-sizing: border-box;
+  max-height: 263px;
+  overflow: auto;
 `
 
 export const SelectedItem = styled.div`
@@ -203,6 +205,11 @@ export const SelectedItem = styled.div`
   cursor: pointer;
   transition: all 0.3s linear;
 
+  > p {
+    margin: 0px;
+    line-height: 42px;
+  }
+
   ${({ isDropDown }) => isDropDown && css`
     border: none;
     padding: 12px 0px;
@@ -295,3 +302,12 @@ export const StatusInfo = styled.div`
     }
   `}
 `
+
+export const EmptyProfessional = styled.div`
+  min-height: 100px;
+  margin-bottom: 100px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`