ordering-ui-external 14.1.49 → 14.1.52

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

@@ -0,0 +1,275 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const FormActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  button {
+    height: 44px;
+    width: 100%;
+    text-transform: lowercase;
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+`
+
+export const FormControl = styled.form`
+  padding: 0px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  input {
+    box-sizing: border-box;
+    margin: 10px 0px;
+    height: 50px;
+    width: 100%;
+    &.internal_number,
+    &.zipcode {
+      flex: auto;
+    }
+    &::placeholder{
+      color: #CBCBCB
+    }
+  }
+
+  textarea {
+    width: 100%;
+    margin: 10px 0;
+    border-radius: 7.6px;
+  }
+
+  .input-autocomplete {
+    width: 100%;
+    background: #FFF;
+    border: 1px solid #BBB;
+    border-radius: 30px;
+    font-size: 16px;
+    padding: 7px 15px !important;
+    height: 50px;
+    outline: none;
+    ::placeholder {
+      color: #DBDCDB;
+    }
+
+    &:-ms-input-placeholder {
+      color: #DBDCDB;
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: #DBDCDB;
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+
+  .google-control {
+    .gps-button {
+      border-radius: 7.6px;
+      width: auto;
+      min-width: 30px;
+    }
+
+    input {
+      border-radius: 7.6px;
+      border: 1px solid ${props => props.theme.colors.primary};
+
+      &:focus {
+        border: 1px solid ${props => props.theme.colors.primary};
+      }
+    }
+  }
+
+  .internal_number {
+    width: 45%;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 15px;
+    ` : css`
+      margin-right: 15px;
+    `}
+  }
+
+  .zipcode {
+    width: 45%;
+  }
+
+  @media (min-width: 481px) {
+    padding: 10px;
+  }
+`
+
+export const AddressWrap = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-top: -11px;
+
+  button {
+    height: 41px;
+    right: 1px;
+    border: none;
+
+    ${props => props.theme?.rtl && css`
+      left: 1px;
+      right: initial;
+    `}
+
+    svg {
+      font-size: 18px;
+    }
+  }
+`
+
+export const WrapAddressInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  i {
+    padding: 0px 10px;
+  }
+
+  svg {
+    position: absolute;
+    color: ${props => props.theme.colors.primary};
+    top: 21px;
+    left: 10px;
+    font-size: 20px;
+    ${props => props.theme?.rtl && css`
+      right: 10px;
+      left: initial;
+    `}
+  }
+
+  input {
+    background-position: left 10px center !important;
+    background-repeat: no-repeat !important;
+    background-size: 13px !important;
+    padding: 7px 30px 7px 15px !important;
+    ${props => props.theme?.rtl && css`
+      padding: 7px 15px 7px 30px !important;
+    `}
+  }
+`
+
+export const AddressTagSection = styled.div`
+  width: 100%;
+  margin: 10px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 46px;
+    height: 46px;
+    border: none;
+    color: #B1BCCC;
+
+    img {
+      width: 25px;
+      height: 25px;
+    }
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        font-size: 30px;
+      }
+    }
+  }
+
+  button.active {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: ${({ height }) => `${height}px` || '170px'};
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 15px;
+  }
+  span {
+    border-radius: 15px;
+  }
+`
+
+export const WrapperSkeleton = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 9px 10px;
+
+  span {
+    width: 100%;
+  }
+`
+
+export const AddressFormContainer = styled.div`
+  text-align: center;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  h1{
+    font-size: 24px;
+    text-align: center;
+    padding-bottom: 15px;
+  }
+
+  > div{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  button{
+    width: 100%;
+    align-self: center;
+  }
+
+  @media (min-width: 768px){
+    ul{
+      width: 100%;
+    }
+
+  }
+`
+
+export const AddressMarkContainer = styled.div`
+  background: #FFE69C;
+  border: 1px solid #FFF3CD;
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  position: absolute;
+  top: 50px;
+  width: 75%;
+  p {
+    margin: 0;
+    color: #664D03;
+    font-size: 12px;
+  }
+
+  ${({ error }) => error && css`
+      background-color: #F8D7DA;
+      border: 1px solid #F1AEB5;
+      p {
+        color: #842029;
+      }
+  `}
+`

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

@@ -71,6 +71,8 @@ export const Header = (props) => {
   const [isOpenUserData, setIsOpenUserData] = useState(false)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
+  const [userConfirmPhone, setUserConfirmPhone] = useState({ open: false, result: null })
+  const [disabledSms, setDisableSms] = useState(false)
 
   const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
 
@@ -148,6 +150,19 @@ export const Header = (props) => {
     }
   }, [JSON.stringify(orderState?.options?.address?.address)])
 
+  useEffect(() => {
+    let timeout = null
+    if (userConfirmPhone?.result) {
+      setDisableSms(true)
+      timeout = setTimeout(() => {
+        setDisableSms(false)
+      }, 30000)
+    }
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [userConfirmPhone?.result])
+
   return (
     <HeaderContainer>
       <InnerHeader>
@@ -408,6 +423,8 @@ export const Header = (props) => {
                 setIsOpenUserData={setIsOpenUserData}
                 onClose={() => setCustomerModalOpen(false)}
                 franchiseId={franchiseId}
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
               />
               <AddressList
                 isModal
@@ -420,6 +437,9 @@ export const Header = (props) => {
                 setIsAddressFormOpen={setIsAddressFormOpen}
                 franchiseId={franchiseId}
                 isHeader
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
+                disabledSms={disabledSms}
               />
             </>
           </UserEdit>
@@ -453,3 +473,5 @@ export const Header = (props) => {
 Header.defaultProps = {
   isShowOrderOptions: true
 }
+
+export default Header

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

@@ -21,7 +21,7 @@ export const InputPhoneNumber = (props) => {
   const [{ configs }] = useConfig()
 
   const phoneRef = useRef(null)
-  const codesStartsWithZero = ['44']
+  const UKCodes = ['44']
 
   const isValidPhoneNumber = (number) => {
     if (!number) return
@@ -30,9 +30,9 @@ export const InputPhoneNumber = (props) => {
     }
     const numberParser = parsePhoneNumber(number)
     let enableIspossibly = false
-    if (codesStartsWithZero.includes(numberParser?.countryCallingCode)) {
+    if (UKCodes.includes(numberParser?.countryCallingCode)) {
       const inputNumber = returnRawNumber(number)
-      const validationsForUK = ['01', '02', '07', '0800', '0808', '0845', '0870', '0871']
+      const validationsForUK = ['01', '02', '07', '0800', '0808', '0845', '0870', '0871', '16']
       const result = validationsForUK.some(areaCode => inputNumber?.number?.startsWith(areaCode))
       enableIspossibly = result
     }
@@ -47,13 +47,18 @@ export const InputPhoneNumber = (props) => {
     }
     const numberParser = parsePhoneNumber(number)
     const validations = ['0', '+']
-    if (validations.includes(phoneRef?.current?.value[0]) && codesStartsWithZero.includes(numberParser?.countryCallingCode)) {
+    const startsWithValidations = ['16']
+    const hasStartValidation = startsWithValidations.some(validation => phoneRef?.current?.value?.startsWith?.(validation))
+    if ((hasStartValidation || validations.includes(phoneRef?.current?.value[0])) && UKCodes.includes(numberParser?.countryCallingCode)) {
       const numberInput = phoneRef?.current?.value.replace('-', '')
       let numberRaw = ''
-      numberInput?.split(' ')?.filter((_splited, i) => i > 0 || (i === 0 && _splited[0] === '0'))?.map(splited => {
-        numberRaw = `${numberRaw}${splited}`
-        return numberRaw
-      })
+      numberInput && numberInput.split(' ')
+        .filter((_splited, i) => i > 0 || (i === 0 && (
+          _splited[0] === '0' || startsWithValidations.some(validation => _splited.startsWith(validation))
+        ))).map(splited => {
+          numberRaw = `${numberRaw}${splited}`
+          return numberRaw
+        })
 
       return {
         number: numberRaw,

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

@@ -24,10 +24,6 @@ import {
   UserEdit,
   WrappBtn,
   SelectContainer,
-  TypesContainer,
-  TypeButton,
-  IconTypeButton,
-  AdditionalTypesContainer,
   PhoneAutocompleteContainer,
   ImageWrapper,
   NotFoundUser,
@@ -35,6 +31,9 @@ import {
 } from './styles'
 
 import MdcCellphoneAndroid from '@meronex/icons/mdc/MdcCellphoneAndroid'
+import { OrderTypesSquares } from '../../../../five/src/components/OrderTypesSquares'
+
+const countriesElevenPhoneLength = ['GB']
 
 const PhoneAutocompleteUI = (props) => {
   const {
@@ -57,10 +56,8 @@ const PhoneAutocompleteUI = (props) => {
     franchiseId,
     getUsers
   } = props
-  const allOrderTypes = [1, 2, 3, 4, 5]
-  const pickupTypes = [2, 4, 5]
-  const eatInType = 3
-  const [orderState, { changeType }] = useOrder()
+
+  const [orderState] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
   const [configState] = useConfig()
@@ -68,11 +65,14 @@ const PhoneAutocompleteUI = (props) => {
   const [, { deleteUserCustomer }] = useCustomer()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isOpenUserData, setIsOpenUserData] = useState(false)
+  const [userConfirmPhone, setUserConfirmPhone] = useState({ open: false, result: null })
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
-  const [orderTypeSelected, setOrderTypeSelected] = useState(orderState?.options?.type)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [inputValue, setInputValue] = useState(urlPhone ?? userCustomer?.cellphone ?? '')
   const [isSavedAddress, setIsSavedAddress] = useState(false)
+  const [disabledSms, setDisableSms] = useState(false)
+  const allOrderTypes = [1, 2, 3, 4, 5]
+
   const countryPhoneCode = userCustomer?.country_phone_code ?? userCustomer?.country_code
 
   const [optSelected, setOptSelected] = useState(userCustomer ? {
@@ -105,13 +105,6 @@ const PhoneAutocompleteUI = (props) => {
     }
   }
 
-  const handleChangeType = (value) => {
-    if (!orderState?.loading) {
-      changeType(value)
-      setOrderTypeSelected(value)
-    }
-  }
-
   useEffect(() => {
     if (customersPhones?.error) {
       setAlertState({ open: true, content: [customersPhones?.error] })
@@ -170,7 +163,9 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const createNewUser = () => {
-    if ((optSelected && optSelected?.value?.length === limitPhoneLength) || (!optSelected && phone.length === limitPhoneLength)) {
+    const lengthIntervals = countriesElevenPhoneLength.includes(configState?.configs?.default_country_code?.value) ? [10, limitPhoneLength] : [limitPhoneLength]
+    if ((optSelected && lengthIntervals.includes(optSelected?.value?.length)) ||
+      (!optSelected && lengthIntervals.includes(phone.length))) {
       setOpenModal({ ...openModal, signup: true })
     } else {
       setAlertState({
@@ -188,12 +183,6 @@ const PhoneAutocompleteUI = (props) => {
     }
   }
 
-  const handleChangeToPickup = () => {
-    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
-    handleChangeType(firstEnabledPickupType)
-    setOrderTypeSelected(firstEnabledPickupType)
-  }
-
   const handleDeleteUser = () => {
     deleteUserCustomer(true)
   }
@@ -270,10 +259,6 @@ const PhoneAutocompleteUI = (props) => {
     onChange({ value: urlPhone, label: urlPhone })
   }, [urlPhone, customersPhones?.loading])
 
-  useEffect(() => {
-    setOrderTypeSelected(orderState?.options?.type)
-  }, [orderState?.options?.type])
-
   useEffect(() => {
     if (isSavedAddress &&
       userCustomer?.id === orderState?.options?.user_id &&
@@ -289,23 +274,18 @@ const PhoneAutocompleteUI = (props) => {
     }
   }, [userCustomer?.id, orderState?.loading])
 
-  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>
-        ))}
-      </>
-    )
-  }
+  useEffect(() => {
+    let timeout = null
+    if (userConfirmPhone?.result) {
+      setDisableSms(true)
+      timeout = setTimeout(() => {
+        setDisableSms(false)
+      }, 30000)
+    }
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [userConfirmPhone?.result])
 
   return (
     <>
@@ -313,60 +293,10 @@ const PhoneAutocompleteUI = (props) => {
         <ContentWrapper>
           <Title>{t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')}</Title>
           <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')}</Slogan>
-          <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
+            hideTitle
+            orderTypes={orderTypes}
+          />
           {configTypes.includes(orderState?.options?.type) && (
             <>
               <PhoneAutocompleteContainer>
@@ -444,6 +374,8 @@ const PhoneAutocompleteUI = (props) => {
                 setIsOpenUserData={setIsOpenUserData}
                 onClose={() => handleCloseAddressList()}
                 franchiseId={franchiseId}
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
               />
               <AddressList
                 isModal
@@ -459,7 +391,10 @@ const PhoneAutocompleteUI = (props) => {
                 setIsOpenUserData={setIsOpenUserData}
                 setIsSavedAddress={setIsSavedAddress}
                 setIsAddressFormOpen={setIsAddressFormOpen}
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
                 franchiseId={franchiseId}
+                disabledSms={disabledSms}
                 isHeader
               />
             </>
@@ -490,11 +425,10 @@ const PhoneAutocompleteUI = (props) => {
 export const PhoneAutocomplete = (props) => {
   const [, t] = useLanguage()
   const [configState] = useConfig()
-  const countriesElevenPhoneLength = ['GB']
   const phoneProps = {
     UIComponent: PhoneAutocompleteUI,
     ...props,
-    limitPhoneLength: countriesElevenPhoneLength.includes(configState?.configs?.default_country_code?.value) ? 11 : props.limitPhoneLength,
+    limitPhoneLength: countriesElevenPhoneLength.includes(configState?.configs?.default_country_code?.value) ? 11 : props.limitPhoneLength || 10,
     orderTypes: props.orderTypes || [
       {
         value: 1,

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

@@ -336,58 +336,6 @@ export const ImageWrapper = (props) => {
   )
 }
 
-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 {

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

@@ -27,11 +27,11 @@ export const SearchBar = (props) => {
 
     if (previousSearch !== e.target.value) {
       if (!lazyLoad) {
-        onSearch(e.target.value)
+        onSearch && onSearch(e.target.value)
       } else {
         clearTimeout(timeout)
         timeout = setTimeout(function () {
-          onSearch(e.target.value)
+          onSearch && onSearch(e.target.value)
         }, 750)
       }
     }

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

@@ -220,10 +220,28 @@ const SignUpFormUI = (props) => {
     })
   }, [signupData])
 
+  const returnRawNumber = (number) => {
+    const numberParser = parsePhoneNumber(externalPhoneNumber)
+    const validations = ['0', '+']
+    if (validations.includes(externalPhoneNumber[0]) && externalPhoneNumber.includes(numberParser?.countryCallingCode)) {
+      const numberInput = externalPhoneNumber.replace('-', '')
+      let numberRaw = ''
+      numberInput?.split(' ')?.filter((_splited, i) => i > 0 || (i === 0 && _splited[0] === '0'))?.map(splited => {
+        numberRaw = `${numberRaw}${splited}`
+        return numberRaw
+      })
+
+      return {
+        number: numberRaw,
+        countryCallingCode: numberParser?.countryCallingCode ? `+${numberParser?.countryCallingCode}` : null
+      }
+    }
+    return number
+  }
   useEffect(() => {
     if (externalPhoneNumber) {
       setUserPhoneNumber(externalPhoneNumber)
-      handleChangePhoneNumber(externalPhoneNumber, true)
+      handleChangePhoneNumber(externalPhoneNumber, true, returnRawNumber(externalPhoneNumber))
     }
   }, [externalPhoneNumber])