ordering-ui-external 14.1.49 → 14.1.52

package/src/themes/five/src/components/HomeHero/franchises/OloHomeHero/styles.js

@@ -0,0 +1,125 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const HeroContainerStyled = styled.div`
+  width: 100%;
+  height: fit-content;
+  position: relative;
+  ${({ mb }) => mb && css`
+    margin-bottom: ${mb};
+  `}
+  padding: 40px;
+  box-sizing: border-box;
+  @media (min-width: 375px) {
+    height: 374px;
+  }
+
+  @media (min-width: 567px) {
+    height: 660px;
+    margin-bottom: 0;
+  }
+`
+
+export const HeroContainer = (props) => {
+  return (
+    <HeroContainerStyled {...props}>
+      {props.children}
+    </HeroContainerStyled>
+  )
+}
+
+export const ContentWrapper = styled.div`
+    display: flex;
+
+    height: 100%;
+    padding: 0px 10vw 0px;
+
+    input {
+      width: 90%;
+      margin-bottom: 15px;
+    }
+
+    @media (min-width: 576px) {
+      justify-content: center;
+      padding: 0px 40px 0px;
+      input {
+        width: 97%;
+      }
+    }
+
+    @media (min-width: 768px) {
+      ${props => props.theme?.rtl && css`
+        padding: 0px 40px 0px;
+      `}
+    }
+`
+
+export const Title = styled.h1`
+  margin: 0px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 36px;
+  letter-spacing: 0px;
+  color: #000;
+  opacity: 1;
+
+  ${props => props.theme?.rtl && css`
+      text-align: right;
+  `}
+`
+
+export const Slogan = styled.p`
+  margin: 0px;
+  text-align: left;
+  font-size: 18px;
+  font-size: 400;
+  color: #000;
+  opacity: 1;
+  margin-bottom: 30px;
+
+  ${props => props.theme?.rtl && css`
+      text-align: right;
+  `}
+`
+
+export const HeroContent = styled.div`
+  width: 35%;
+  padding: 25px;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+`
+
+export const HomeImage = styled.div`
+  width: 65%;
+  height: 100%;
+  background-image: ${({ bgimage }) => `url(${bgimage})`};
+`
+
+export const OrderTypeListItemContainer = styled.div`
+  width: 100%;
+  height: 75px;
+  border-radius: 7.6px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  padding: 16px;
+  display: flex;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  cursor: pointer;
+`
+
+export const OrderTypeTitle = styled.p`
+  font-size: 16px;
+  box-sizing: border-box;
+`
+
+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;
+  margin-right: 30px;
+`

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

@@ -3,9 +3,11 @@ import { useTheme } from 'styled-components'
 import { OriginalHomeHero } from './layouts/OriginalHomeHero'
 import { RedHomeHero } from './layouts/RedHomeHero'
 import { StarbucksHomeHero } from './layouts/StarbucksHomeHero'
+import { OloHomeHero } from './franchises/OloHomeHero'
 
 export const HomeHero = (props) => {
   const theme = useTheme()
+  const websiteTheme = theme?.my_products?.components?.website_theme?.components?.type
   const HomeLayoutConfig = {
     homepage_settings: {
       layout: theme?.homepage_view?.components?.layout?.type || 'original', // 'original', 'starbucks', 'red'
@@ -15,6 +17,8 @@ export const HomeHero = (props) => {
   const layout = HomeLayoutConfig?.homepage_settings?.layout !== undefined
     ? HomeLayoutConfig?.homepage_settings?.layout : 'original'
 
+  const franchiseLayout = theme?.my_products?.components?.website_theme?.components?.franchise_slug
+
   const homeLayoutProps = {
     ...props,
     layout: layout,
@@ -24,9 +28,18 @@ export const HomeHero = (props) => {
 
   return (
     <>
-      {(layout === 'original') && <OriginalHomeHero {...homeLayoutProps} />}
-      {(layout === 'starbucks') && <StarbucksHomeHero {...homeLayoutProps} />}
-      {(layout === 'red') && <RedHomeHero {...homeLayoutProps} />}
+      {websiteTheme === 'franchise' ? (
+        <>
+          {franchiseLayout === 'franchise_1' && <OloHomeHero {...homeLayoutProps} />}
+          {!franchiseLayout && <OriginalHomeHero {...homeLayoutProps} />}
+        </>
+      ) : (
+        <>
+          {(layout === 'original') && <OriginalHomeHero {...homeLayoutProps} />}
+          {(layout === 'starbucks') && <StarbucksHomeHero {...homeLayoutProps} />}
+          {(layout === 'red') && <RedHomeHero {...homeLayoutProps} />}
+        </>
+      )}
     </>
   )
 }

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

@@ -22,7 +22,7 @@ export const InputPhoneNumber = (props) => {
   const [{ configs }] = useConfig()
 
   const phoneRef = useRef(null)
-  const codesStartsWithZero = ['44']
+  const UKCodes = ['44']
 
   const isValidPhoneNumber = (number) => {
     if (!number) return
@@ -31,9 +31,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
     }
@@ -48,13 +48,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,
@@ -92,7 +97,7 @@ export const InputPhoneNumber = (props) => {
       />
       {value && !isValidPhoneNumber(value) && !disabled && (
         <>
-          {((auth && user?.country_phone_code) || !auth || value.includes('+')) && (
+          {(((auth && user?.country_phone_code) || !auth || value.includes('+')) && phoneRef?.current?.value) && (
             <ErrorMsg>{t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')}</ErrorMsg>
           )}
 

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

@@ -53,7 +53,9 @@ const LogoutUI = (props) => {
       setLogoutState({ ...logoutState, loading: true })
       const response = await fetch(`${ordering.root}/users/check_password`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        headers: {
+          'Content-Type': 'application/json', Authorization: `Bearer ${token}`, 'X-App-X': ordering.appId
+        },
         body: JSON.stringify(body)
       })
       const { error, result } = await response.json()

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

@@ -29,7 +29,8 @@ const ModalUI = (props) => {
     onRemove,
     isSlideBar,
     slideBarPosition,
-    disableOverflowX
+    disableOverflowX,
+    titleStyle
   } = props
   const [, t] = useLanguage()
 
@@ -44,8 +45,8 @@ const ModalUI = (props) => {
       const scrollbarWidth = window.innerWidth - document.body.clientWidth
       const bodyPaddingRight = window.document.body.style.paddingRight
       document.body.style.paddingRight = props.open ? `${bodyPaddingRight + scrollbarWidth}px` : `${bodyPaddingRight}px`
+      document.body.style.overflow = props.open ? 'hidden' : 'auto'
     }
-    document.body.style.overflow = props.open ? 'hidden' : 'auto'
     if (props.open) {
       window.addEventListener('keydown', handleKeyDown)
       return () => window.removeEventListener('keydown', handleKeyDown)
@@ -79,7 +80,9 @@ const ModalUI = (props) => {
       )}
       <ModalHeader>
         {title && (
-          <ModalTitle>
+          <ModalTitle
+            style={titleStyle}
+          >
             {title}
           </ModalTitle>
         )}

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

@@ -11,14 +11,14 @@ export const Container = styled.div`
   @media (min-width: 769px) {
     width: 70%;
   }
-  
+
   h2 {
     margin: 0;
     font-weight: 600;
     font-size: 20px;
     line-height: 30px;
   }
-  
+
   h3 {
     margin: 0;
     font-weight: 600;
@@ -179,7 +179,7 @@ export const SingleOrderHeader = styled.div`
     > div {
       display: flex;
       flex-direction: column;
-      align-items: center; 
+      align-items: center;
       @media (min-width: 769px) {
         flex-direction: row;
       }

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

@@ -157,7 +157,9 @@ const OrderDetailsUI = (props) => {
     try {
       const response = await fetch(`${ordering.root}/orders/${order.id}/receipt`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        headers: {
+          'Content-Type': 'application/json', Authorization: `Bearer ${token}`, 'X-App-X': ordering.appId
+        },
         body: JSON.stringify(body)
       })
       const { error, result } = await response.json()

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

@@ -55,9 +55,11 @@ export const ProductList = styled.div`
   flex-direction: row;
   box-sizing: border-box;
   align-items: center;
+
   button {
     padding: 0px;
   }
+
   #orderItAgain > div {
     width: 350px;
     ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`

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

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react'
+import { AdditionalTypesContainer, IconTypeButton, Title, TypeButton, TypesContainer } from './styles'
+import { useTheme } from 'styled-components'
+import { useConfig, useLanguage, useOrder } from 'ordering-components-external'
+import Button from '../../styles/Buttons'
+
+export const OrderTypesSquaresController = (props) => {
+  const {
+    orderTypes,
+    hideTitle
+  } = props
+
+  const theme = useTheme()
+  const [orderState, { changeType }] = useOrder()
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
+
+  const [orderTypeSelected, setOrderTypeSelected] = useState(orderState?.options?.type)
+
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 4, 5]
+  const eatInType = 3
+  const configTypes = configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
+
+  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(() => {
+    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>
+        ))}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {!hideTitle && (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>
+        </>
+      )}
+    </>
+  )
+}
+
+export const OrderTypesSquares = (props) => {
+  const [, t] = useLanguage()
+
+  const OrderTypesSquaresProps = {
+    ...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 <OrderTypesSquaresController {...OrderTypesSquaresProps} />
+}

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

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components'
+
+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: 42px 20px 0px 20px;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  margin-left: 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;
+  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 Title = styled.h2`
+  font-weight: 600;
+  font-size: 24px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin: 20px 20px 5px 20px;
+`

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

@@ -300,11 +300,11 @@ const ProductItemAccordionUI = (props) => {
           )}
           {productInfo.options.length > 0 && (
             <ProductOptionsList>
-              {productInfo.options.sort((a, b) => a.rank - b.rank).map(option => (
+              {productInfo.options.map(option => (
                 <li key={option.id}>
                   <p>{option.name}</p>
                   <ProductOptionsList className='suboption'>
-                    {option.suboptions.map(suboption => (
+                    {option.suboptions.sort((a, b) => a.rank - b.rank).map(suboption => (
                       <li key={suboption.id}>
                         <span>
                           {getFormattedSubOptionName({

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

@@ -13,9 +13,11 @@ export const WrappLayout = styled.div``
 export const WrapContent = styled.div`
   padding: 5px;
   background: ${props => props.theme.colors.backgroundPage};
+
   ${({ isGroceries }) => !isGroceries && css`
     margin-top: 70px;
   `}
+
   @media (min-width: 576px) {
     padding: 0px;
   }

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

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

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

@@ -300,9 +300,11 @@ const SignUpFormUI = (props) => {
   useEffect(() => {
     if (useChekoutFileds && validationFields?.loading) return
     let fieldnum = 0
-    sortInputFields({ values: validationFields?.fields?.checkout }).forEach(field => {
-      if (showField && showField(field.code) && field.code !== 'email') fieldnum += 1
-    })
+    if (validationFields?.fields?.checkout) {
+      sortInputFields({ values: validationFields?.fields?.checkout }).forEach(field => {
+        if (showField && showField(field.code) && field.code !== 'email') fieldnum += 1
+      })
+    }
     setFieldNumber(fieldnum)
   }, [validationFields])
 

package/src/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -65,7 +65,7 @@ export const CardContainer = styled.div`
       `}
     }
   `}
-  
+
   `}
 `
 

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

@@ -21,6 +21,7 @@ import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
 import { parsePhoneNumber } from 'libphonenumber-js'
 import {
   UserFormDetails as UserFormController,
+  useConfig,
   useLanguage,
   useSession
 } from 'ordering-components-external'
@@ -53,6 +54,7 @@ const UserDetailsUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ user, loading }] = useSession()
+  const [{ configs }] = useConfig()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [skeletonsLength] = useState(requiredFields)
   const userData = userState.result?.result || props.userData || formState.result?.result || user
@@ -197,7 +199,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (userData?.cellphone ?? userData?.guest_cellphone) && (
-                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.[userData?.guest_id ? 'guest_cellphone' : 'cellphone']?.replace(`+${userData?.country_phone_code}`, '')}`)?.country} />
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.[userData?.guest_id ? 'guest_cellphone' : 'cellphone']?.replace(`+${userData?.country_phone_code}`, '')}`)?.country || configs?.default_country_code?.value} />
                       )
                     }
                   </CountryFlag>

package/src/themes/five/src/styles/Buttons/index.js

@@ -66,9 +66,9 @@ export const IconButton = styled.button`
 `
 
 export const Button = styled.button`
-  background: #CCC;
+  background: #E9ECEF;
   color: #FFF;
-  border: 1px solid #CCC;
+  border: 1px solid #E9ECEF;
   border-radius: 7.6px;
   line-height: 30px;
   padding-left: 15px;