ordering-ui-external 10.6.2 → 10.7.0

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

@@ -4,16 +4,14 @@ import {
   PhoneAutocomplete as PhoneAutocompleteController,
   useLanguage,
   useOrder,
-  useCustomer
+  useCustomer,
+  useConfig
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
-
-import { Modal } from '../Modal'
-import { SignUpForm } from '../SignUpForm'
-import { Button } from '../../styles/Buttons'
-import { Alert } from '../Confirm'
-import { UserDetails } from '../UserDetails'
+import { Alert } from '../../../../five/src/components/Confirm'
+import { Button, SignUpForm, Modal } from '../../../../five'
 import { AddressList } from '../AddressList'
+import { UserDetails } from '../UserDetails'
 
 import {
   PhoneContainer,
@@ -22,7 +20,14 @@ import {
   Slogan,
   UserEdit,
   WrappBtn,
-  SelectContainer
+  SelectContainer,
+  TypesContainer,
+  TypeButton,
+  IconTypeButton,
+  AdditionalTypesContainer,
+  PhoneAutocompleteContainer,
+  ImageWrapper,
+  ContinueButton
 } from './styles'
 
 import MdcCellphoneAndroid from '@meronex/icons/mdc/MdcCellphoneAndroid'
@@ -34,23 +39,31 @@ const PhoneAutocompleteUI = (props) => {
     customersPhones,
     setCustomersPhones,
     openModal,
+    limitPhoneLength,
     setOpenModal,
     onChangeNumber,
     setCustomerState,
     countryCallingCode,
-    onRedirectPage
+    onRedirectPage,
+    urlPhone,
+    orderTypes,
+    localPhoneCode
   } = props
-  const [orderState] = useOrder()
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 3, 4, 5]
+  const [orderState, { changeType }] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
   const [, { deleteUserCustomer }] = useCustomer()
+  const [configState] = useConfig()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState(urlPhone ?? '')
   const [optSelected, setOptSelected] = useState(null)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
+  const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
-
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
     ? `${userCustomer?.name} ${userCustomer?.lastname}`
     : userCustomer?.name
@@ -74,6 +87,15 @@ const PhoneAutocompleteUI = (props) => {
     }
   }
 
+  const handleChangeType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      if (value === 1) {
+        setIsPickupSelected(false)
+      }
+    }
+  }
+
   useEffect(() => {
     if (customersPhones?.error) {
       setAlertState({ open: true, content: [customersPhones?.error] })
@@ -81,13 +103,14 @@ const PhoneAutocompleteUI = (props) => {
   }, [customersPhones?.error])
 
   const onInputChange = (inputValue, { action }) => {
-    if (action === 'menu-close' || action === 'input-blur' || action === 'set-value') {
+    if (action === 'menu-close' || action === 'input-blur' || action === 'set-value' || inputValue.charAt(0) === '0') {
       return
     }
     if (!inputValue) {
       setInputValue(inputValue)
+      onChangeNumber(inputValue)
     }
-    if ((inputValue && inputValue.length > 10) || !(/^[0-9]+$/.test(inputValue))) {
+    if ((inputValue && inputValue.length > limitPhoneLength) || !(/^[0-9]+$/.test(inputValue))) {
       return
     }
     setInputValue(inputValue)
@@ -97,30 +120,40 @@ const PhoneAutocompleteUI = (props) => {
   const onChange = (option) => {
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
+    if (!option) { onChangeNumber(''); return }
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
     if (user) {
       setCustomerState({ ...customerState, result: user })
-      setOpenModal({ ...openModal, customer: true })
+      setOpenModal({ signup: false, customer: true })
+    } else {
+      setCustomerState({ ...customerState, result: { error: false } })
+      setOpenModal({ customer: false, signup: true })
     }
   }
 
   const createNewUser = () => {
-    if ((optSelected && optSelected?.value?.length === 10) || (!optSelected && phone.length === 10)) {
+    if ((optSelected && optSelected?.value?.length === limitPhoneLength) || (!optSelected && phone.length === limitPhoneLength)) {
       setOpenModal({ ...openModal, signup: true })
     } else {
       setAlertState({
         open: true,
-        content: t('ERROR_MIN_CHARACTERS_PHONE', 'The Phone / Mobile must be 10 characters')
+        content: t('ERROR_MIN_CHARACTERS_PHONE', 'The Phone / Mobile must be :length: characters').replace(':length:', limitPhoneLength)
       })
     }
   }
 
   const handleCloseAddressList = () => {
-    setOpenModal({ openModal, customer: false })
+    setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
     deleteUserCustomer(true)
   }
 
+  const handleChangeToPickup = () => {
+    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
+    handleChangeType(firstEnabledPickupType)
+    setIsPickupSelected(true)
+  }
+
   const optionsToSelect = customersPhones.users.map(user => {
     const obj = {}
     obj.value = user.cellphone || user.phone
@@ -128,63 +161,145 @@ const PhoneAutocompleteUI = (props) => {
     return obj
   }) || []
 
+  useEffect(() => {
+    if (!urlPhone) return
+    onInputChange(urlPhone, { action: 'url' })
+    onChange({ value: urlPhone, label: urlPhone })
+  }, [urlPhone, customersPhones?.users?.length])
+
+  useEffect(() => {
+    if (pickupTypes.includes(orderState?.options?.type)) {
+      setIsPickupSelected(true)
+    }
+  }, [orderState?.options?.type])
+
+  const OrderTypesComponent = () => {
+    return (
+      <>
+        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && type.value !== 1) : 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>
+        ))}
+      </>
+    )
+  }
+
   return (
     <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <PhoneContainer bgimage={theme.images?.general?.homeHero}>
+      <PhoneContainer>
         <ContentWrapper>
           <Title>{t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')}</Title>
-          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start First by adding the customers\' phone number')}</Slogan>
-          {!userCustomer && (
-            <SelectContainer>
-              <MdcCellphoneAndroid size={26} />
-              <Select
-                isSearchable
-                isClearable
-                className='basic-single'
-                classNamePrefix='select'
-                placeholder={t('PHONE_NUMBER', 'Phone number')}
-                value={optSelected}
-                noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
-                inputValue={!optSelected ? inputValue : ''}
-                onChange={onChange}
-                onInputChange={onInputChange}
-                isLoading={customersPhones?.loading}
-                options={optionsToSelect}
-              />
-            </SelectContainer>
+          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')}</Slogan>
+          {!(userCustomer && orderState?.options?.address?.address) && (
+            <TypesContainer>
+              {configTypes.includes(1) && (
+                <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={!isPickupSelected}>
+                  <IconTypeButton activated={!isPickupSelected}>
+                    <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={isPickupSelected}
+                  onClick={() => handleChangeToPickup()}
+                >
+                  <IconTypeButton activated={isPickupSelected}>
+                    <img
+                      src={theme?.images?.general?.pickupIco}
+                      width={22}
+                      height={22}
+                    />
+                  </IconTypeButton>
+                  <p>{t('PICKUP', 'Pickup')}</p>
+                </TypeButton>
+              )}
+            </TypesContainer>
+          )}
+          {isPickupSelected && (
+            <>
+              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
+              <AdditionalTypesContainer>
+                <OrderTypesComponent />
+              </AdditionalTypesContainer>
+            </>
+          )}
+          {configTypes.includes(orderState?.options?.type) && (
+            <>
+              {!userCustomer && (
+                <PhoneAutocompleteContainer>
+                  <h2>
+                    {t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')}
+                  </h2>
+                  <WrappBtn>
+                    <Button
+                      color={(inputValue || (userCustomer && orderState?.options?.address?.address)) ? 'primary' : 'secundary'}
+                      onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
+                      disabled={(!inputValue && !(userCustomer && orderState?.options?.address?.address))}
+                    >
+                      {
+                        !(userCustomer && orderState?.options?.address?.address)
+                          ? t('CREATE_CUSTOMER', 'Create new customer')
+                          : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
+                      }
+                    </Button>
+                  </WrappBtn>
+                  <SelectContainer>
+                    <MdcCellphoneAndroid size={18} color={theme?.colors?.primary} />
+                    <Select
+                      isSearchable
+                      isClearable
+                      className='basic-single'
+                      classNamePrefix='select'
+                      placeholder={t('PHONE_NUMBER', 'Phone number')}
+                      value={optSelected}
+                      noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
+                      inputValue={!optSelected ? inputValue : ''}
+                      onChange={onChange}
+                      onInputChange={onInputChange}
+                      isLoading={customersPhones?.loading}
+                      options={optionsToSelect}
+                    />
+                    {optSelected && (
+                      <ContinueButton>
+                        <Button onClick={() => onChange(optSelected)} color='primary'>
+                          {t('CONTINUE', 'Continue')}
+                        </Button>
+                      </ContinueButton>
+                    )}
+                  </SelectContainer>
+                </PhoneAutocompleteContainer>
+              )}
+            </>
           )}
-          <WrappBtn>
-            <Button
-              color={inputValue || (userCustomer && orderState?.options?.address?.address) ? 'primary' : 'secundary'}
-              onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
-              disabled={!inputValue && !(userCustomer && orderState?.options?.address?.address)}
-            >
-              {
-                !(userCustomer && orderState?.options?.address?.address)
-                  ? t('CREATE_CUSTOMER', 'Create new customer')
-                  : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
-              }
-            </Button>
-          </WrappBtn>
         </ContentWrapper>
+        <ImageWrapper bgimage={theme?.images?.general?.phoneHero} />
       </PhoneContainer>
       <Modal
         open={openModal.signup}
         width='80%'
-        onClose={() => setOpenModal({ openModal, signup: false })}
+        onClose={() => setOpenModal({ ...openModal, signup: false })}
       >
         <SignUpForm
-          externalPhoneNumber={`${countryCallingCode} ${optSelected?.value || phone}`}
+          externalPhoneNumber={`${localPhoneCode || countryCallingCode} ${optSelected?.value || phone}`}
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
-          isCustomerMode={props.isCustomerMode}
+          isCustomerMode
+          isPopup
         />
       </Modal>
       <Modal
@@ -212,7 +327,8 @@ const PhoneAutocompleteUI = (props) => {
                 changeOrderAddressWithDefault
                 userCustomerSetup={{
                   ...customerState?.result,
-                  phone
+                  phone,
+                  urlPhone
                 }}
                 isEnableContinueButton
                 isCustomerMode
@@ -231,21 +347,47 @@ const PhoneAutocompleteUI = (props) => {
         onClose={handleCloseAlert}
         onAccept={handleCloseAlert}
       />
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
     </>
   )
 }
 
 export const PhoneAutocomplete = (props) => {
+  const [, t] = useLanguage()
   const phoneProps = {
     UIComponent: PhoneAutocompleteUI,
-    ...props
+    ...props,
+    orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        text: t('DELIVERY', 'Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
+      },
+      {
+        value: 2,
+        text: t('PICKUP', 'Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
+      },
+      {
+        value: 3,
+        text: t('EAT_IN', 'Eat in'),
+        description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
+      },
+      {
+        value: 4,
+        text: t('CURBSIDE', 'Curbside'),
+        description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
+      },
+      {
+        value: 5,
+        text: t('DRIVE_THRU', 'Drive thru'),
+        description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
+      }
+    ]
   }
 
   return <PhoneAutocompleteController {...phoneProps} />
 }
+
+PhoneAutocompleteUI.defaultProps = {
+  limitPhoneLength: 10
+}

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

@@ -1,9 +1,10 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const PhoneContainer = styled.div`
   width: 100%;
   height: calc(100vh - 97px);
-
+  display: flex;
   ${({ bgimage }) => bgimage && css`
     background-repeat: no-repeat, repeat;
     background-size: cover;
@@ -78,11 +79,8 @@ export const ContentWrapper = styled.div`
   justify-content: center;
   height: 100%;
   padding: 0px 20px 0px;
-
-  .basic-single {
-    margin-bottom: 15px;
-  }
-
+  width: 70%;
+  position: relative;
   .select__control {
     border-radius: 30px;
   }
@@ -126,13 +124,23 @@ export const ContentWrapper = styled.div`
         padding: 0px 40px 0px;
       `}
     }
+    @media (min-width: 1400px){
+      width: 60%;
+    }
 `
 
 export const WrappBtn = styled.div`
   width: 50%;
-
+  position: relative;
   button {
+    position: absolute;
+    top: 55px;
     min-width: 130px;
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 100;
   }
 `
 
@@ -141,7 +149,6 @@ export const Title = styled.h1`
   text-align: left;
   font: normal normal normal 80px ${props => props.theme.fonts.special?.name || 'Georgia'};
   letter-spacing: 0px;
-  color: #ffffff;
   text-shadow: 0px 3px 6px #00000029;
   opacity: 1;
   font-size: 35px;
@@ -156,7 +163,6 @@ export const Slogan = styled.p`
   text-align: left;
   font-size: 18px;
   letter-spacing: 0px;
-  color: #fff;
   opacity: 1;
   margin-bottom: 15px;
 
@@ -252,7 +258,7 @@ export const SelectContainer = styled.div`
   svg{
     position: absolute;
     top: 0;
-    left: 0;
+    left: 20px;
     transform: translate(50%, 70%);
     z-index: 10;
   }
@@ -260,7 +266,8 @@ export const SelectContainer = styled.div`
     width: 100%;
     .select__placeholder, .select__single-value, input {
       margin-left: 40px;
-      z-index: 100
+      z-index: 100;
+      bottom: -10px;
     }
     .select__menu {
       position: relative;
@@ -275,6 +282,21 @@ export const SelectContainer = styled.div`
         height: 30px;
       }
     }
+    .select__control {
+      height: 45px;
+      padding-left: 10px;
+    }
+    .select__indicator {
+      bottom: 8px;
+      position: relative;
+    }
+    .select__menu{
+      top: 45px;
+    }
+    input {
+      position: relative;
+      top: -5px;
+    }
   }
 `
 
@@ -283,3 +305,97 @@ export const SearchContainer = styled.div`
   top: 0;
   width: 90%;
 `
+
+const ImageWrapperStyled = styled.div`
+  width: 30%;
+  ${({ bgimage }) => bgimage && css`
+    background-repeat: no-repeat, repeat;
+    background-size: cover;
+    object-fit: cover;
+    background-position: center;
+  `}
+  @media (min-width: 1400px){
+    width: 40%;
+  }
+`
+
+export const ImageWrapper = (props) => {
+  const style = {}
+  style.backgroundImage = `url(${props.bgimage})`
+
+  return (
+    <ImageWrapperStyled {...props} style={style}>
+      {props.children}
+    </ImageWrapperStyled>
+  )
+}
+
+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;
+  margin-bottom: 32px;
+  cursor: pointer;
+  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 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;
+`
+
+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 PhoneAutocompleteContainer = styled.div`
+  position: relative;
+  h2 {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+`
+
+export const ContinueButton = styled.span`
+  position: absolute;
+  right: 35px;
+  bottom: 5px;
+  width: 
+  button {
+    cursor: pointer;
+  }
+`

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

@@ -185,6 +185,26 @@ const BusinessProductsListingUI = (props) => {
     }
   }
 
+  const handleCustomProductBannerClick = (product) => {
+    if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
+      if (site?.product_url_template) {
+        onProductRedirect({
+          slug: business?.slug,
+          product: site.product_url_template.includes('product_slug') ? product?.slug : product.id,
+          category: site.product_url_template.includes('category_slug') ? product?.category?.slug : product.category_id
+        })
+      } else {
+        onProductRedirect({
+          slug: business?.slug,
+          product: product.id,
+          category: product.category_id
+        })
+      }
+    }
+    setCurProduct(product)
+    setModalIsOpen(true)
+  }
+
   const handlerProductAction = (product) => {
     if (Object.keys(product).length) {
       setModalIsOpen(false)
@@ -411,6 +431,7 @@ const BusinessProductsListingUI = (props) => {
           productToIdLoading={productToIdLoading}
           handleUpdateProfessionals={handleUpdateProfessionals}
           isCustomerMode={isCustomerMode}
+          handleCustomProductBannerClick={handleCustomProductBannerClick}
         />
 
         {

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

@@ -593,7 +593,7 @@ export const OriginalBusinessesListing = (props) => {
       {
         value: 1,
         text: t('DELIVERY', 'Delivery'),
-        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
       },
       {
         value: 2,

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

@@ -21,7 +21,8 @@ export const MyOrders = (props) => {
     hideOrders,
     isFromBusinessListingSearch,
     businessesSearchList,
-    onProductRedirect
+    onProductRedirect,
+    onRedirectPage
   } = props
 
   const [, t] = useLanguage()
@@ -121,6 +122,9 @@ export const MyOrders = (props) => {
                   {...props}
                   pastOrders
                   setIsEmptyPast={setIsEmptyPast}
+                  handleRedirectToCheckout={uuid => {
+                    onRedirectPage && onRedirectPage({ page: 'checkout', params: { cartUuid: uuid } })
+                  }}
                 />
                 {!isEmptyPast && <Divider />}
               </>

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

@@ -290,6 +290,7 @@ const OrderDetailsUI = (props) => {
               <ProductItemAccordion
                 key={product.id}
                 product={product}
+                showArrowIcon
               />
             ))}
           </ProfessionalBlock>
@@ -298,6 +299,7 @@ const OrderDetailsUI = (props) => {
           <ProductItemAccordion
             key={product.id}
             product={product}
+            showArrowIcon
           />
         ))}
       </>