ordering-ui-external 14.1.8 → 14.1.9

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

@@ -4,7 +4,6 @@ import {
   PhoneAutocomplete as PhoneAutocompleteController,
   useLanguage,
   useOrder,
-  useCustomer,
   useConfig,
   useEvent
 } from 'ordering-components-external'
@@ -62,7 +61,6 @@ const PhoneAutocompleteUI = (props) => {
   const [orderState, { changeType }] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [, { deleteUserCustomer }] = useCustomer()
   const [configState] = useConfig()
   const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -78,7 +76,7 @@ const PhoneAutocompleteUI = (props) => {
     value: userCustomer.cellphone || userCustomer.phone,
     label: `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${userCustomer?.phone && !userCustomer?.cellphone ? `${userCustomer?.phone}` : ''} ${userCustomer?.cellphone ? `${userCustomer.cellphone}` : ''} - {${userCustomer.name}}`,
     flag: userCustomer?.imported_address_text && userCustomer?.addresses?.length === 0,
-    lastname: userCustomer.lastname
+    lastname: `${userCustomer.name} ${userCustomer.lastname}`
   } : null)
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
@@ -99,8 +97,7 @@ const PhoneAutocompleteUI = (props) => {
   const handleFindClick = () => {
     if (optSelected && !(userCustomer?.id && orderState?.options?.address?.address)) {
       onChange(optSelected)
-    }
-    else if (userCustomer?.id && orderState?.options?.address?.address) {
+    } else if (userCustomer?.id && orderState?.options?.address?.address) {
       onRedirectPage && onRedirectPage('search')
     } else {
       setAlertState({ open: true, content: t('SELECT_ADDRESS_CUSTOMER', 'Please select an address for the selected customer') })
@@ -142,6 +139,7 @@ const PhoneAutocompleteUI = (props) => {
       setOptSelected(null)
       setCustomersPhones({ ...customersPhones, users: [] })
       setInputValue('')
+      onChangeNumber('')
       return
     }
     let user
@@ -150,7 +148,7 @@ const PhoneAutocompleteUI = (props) => {
     }
     setOptSelected({
       ...option,
-      lastname: user?.lastname ?? user?.name
+      lastname: `${user?.name} ${user?.lastname}`
     })
     setInputValue(option ? option?.value : '')
     if (!option) {
@@ -182,7 +180,6 @@ const PhoneAutocompleteUI = (props) => {
   const handleCloseAddressList = () => {
     setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
-    deleteUserCustomer(true)
     if (isFromUrlPhone) {
       onRedirectPhoneUrlPage && onRedirectPhoneUrlPage('home')
     }
@@ -198,7 +195,7 @@ const PhoneAutocompleteUI = (props) => {
     const countryPhoneCode = user?.country_phone_code ?? user?.country_code
     const obj = {}
     obj.value = user.cellphone || user.phone
-    obj.label = `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${user?.phone && !user?.cellphone ? `${user?.phone}` : ''} ${user?.cellphone ? `${user.cellphone}` : ''} - {${user.name}}`
+    obj.label = `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${user?.phone && !user?.cellphone ? `${user?.phone}` : ''} ${user?.cellphone ? `${user.cellphone}` : ''} - {${user.name} ${user?.lastname ?? ''}}`
     obj.flag = user?.imported_address_text && user?.addresses?.length === 0
     return obj
   }) || []
@@ -329,7 +326,7 @@ const PhoneAutocompleteUI = (props) => {
                     onChange={onChange}
                     onInputChange={onInputChange}
                     isLoading={customersPhones?.loading}
-                    options={optionsToSelect}
+                    options={optionsToSelect.filter(opt => inputValue ? opt.value.toString().includes(inputValue) : opt)}
                     components={{ Option }}
                   />
                   {optSelected && (
@@ -352,7 +349,7 @@ const PhoneAutocompleteUI = (props) => {
         onClose={() => setOpenModal({ ...openModal, signup: false })}
       >
         <SignUpForm
-          externalPhoneNumber={`${localPhoneCode || countryCallingCode} ${optSelected?.value || phone}`}
+          externalPhoneNumber={`${countryCallingCode || localPhoneCode} ${optSelected?.value || phone}`}
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds

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

@@ -357,7 +357,7 @@ export const IconTypeButton = styled.div`
   align-items: center;
   width: 44px;
   height: 44px;
-  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  background: ${({ theme }) => theme?.colors?.danger100 ?? '#FEEDF0'};
   border-radius: 44px;
 `
 

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

@@ -39,7 +39,8 @@ import {
   IconContainer,
   NoValidProductMessage,
   DriverTipContainer,
-  SpinnerCart
+  SpinnerCart,
+  WarningText
 } from './styles'
 import { getCateringValues, verifyDecimals } from '../../../../../utils'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
@@ -660,6 +661,11 @@ const CartUI = (props) => {
                 />
               </div>
             )}
+            {!cart?.valid_address && cart?.status !== 2 && !isCheckout && (
+              <WarningText>
+                {t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')}
+              </WarningText>
+            )}
             {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid && (!isMultiCheckout || isStore || !cart?.business_id) && (
               <CheckoutAction>
                 <p>{cart?.total >= 1 && parsePrice(cart?.total)}</p>

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

@@ -244,3 +244,9 @@ export const SpinnerCart = styled.div`
     top: 0;
   `}
 `
+
+export const WarningText = styled.p`
+  margin: 10px auto;
+  text-align: center;
+  color: ${props => props.theme.colors.primary};
+`

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

@@ -136,7 +136,7 @@ const CheckoutUI = (props) => {
 
   const shouldActivateOrderDetailModal = ordering?.project?.includes('alsea')
   const cardsMethods = ['stripe', 'credomatic']
-  const stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+  const stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect']
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isTableNumberEnabled = configs?.table_numer_enabled?.value
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
@@ -594,24 +594,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-            <>
-              <DriverTipContainer>
-                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-                <DriverTips
-                  businessId={cart?.business_id}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? cart?.driver_tip
-                    : cart?.driver_tip_rate}
-                  cart={cart}
-                  useOrderContext
-                />
-              </DriverTipContainer>
-              <DriverTipDivider />
-            </>
+          <>
+            <DriverTipContainer>
+              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                cart={cart}
+                useOrderContext
+              />
+            </DriverTipContainer>
+            <DriverTipDivider />
+          </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>

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

@@ -95,6 +95,7 @@ export const DriverTipContainer = styled(PaymentMethodContainer)`
 
 export const CartContainer = styled(PaymentMethodContainer)`
   margin-bottom: 20px;
+  position: relative;
 `
 
 export const WalletPaymentOptionContainer = styled(PaymentMethodContainer)`
@@ -378,3 +379,10 @@ export const OrderDetailContainer = styled.div`
   flex-direction: column;
   padding: 10px 30px 20px;
 `
+
+export const SpinnerContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: -100%;
+`

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

@@ -363,18 +363,19 @@ const FavoriteListUI = (props) => {
         <FavPopupView>
           {(favProduct?.images) && (
             <Image>
-              <img src={favProduct.images} alt={`product-${i}`} width='150px' height='150px' loading='lazy' />
+             <img src={favProduct.images} alt={`product-${i}`} width='150px' height='150px' loading='lazy' />
             </Image>
-          )}
-          <h2>
-            {favProduct?.name}
-          </h2>
-          <h2>
-            {favProduct?.businesses && favProduct?.businesses?.length > 1
+            )}
+            <h2>
+             {favProduct?.name}
+            </h2>
+            <h2>
+            { favProduct?.businesses && favProduct?.businesses?.length > 1
               ? t('AVAILABLE_BUSINESSES_FOR_PRODUCT', 'Available businesses for this product')
               : favProduct?.businesses && favProduct?.businesses?.length == 1
                 ? t('AVAILABLE_BUSINESSE_FOR_PRODUCT', 'Available business for this product')
-                : t('NOT_AVAILABLE_BUSINESSE', 'Business is not available for this product')}
+                : t('NOT_AVAILABLE_BUSINESSE', 'Business is not available for this product')
+            }
           </h2>
           <div>
             {favProduct?.businesses?.map(business => {

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

@@ -168,3 +168,4 @@ export const BusinessLogo = (props) => {
     </BusinessLogoStyled>
   )
 }
+

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

@@ -100,7 +100,8 @@ const OrderDetailsUI = (props) => {
     reorderState,
     handleReorder,
     orderTypes,
-    handleRemoveCart
+    handleRemoveCart,
+    hideStaticMap
   } = props
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
@@ -183,8 +184,8 @@ const OrderDetailsUI = (props) => {
       }
       try {
         const image = new Image()
+        image.onload = resolve
         image.src = src
-        image.complete ? resolve(true) : resolve(false)
       } catch (err) {
         resolve(false)
       }
@@ -521,7 +522,7 @@ const OrderDetailsUI = (props) => {
                     </>
                   )}
                 </OrderInfo>
-                {!isGiftCardOrder && (
+                {!isGiftCardOrder && !hideStaticMap && (
                   <OrderBusiness>
                     <BusinessExternalWrapper>
                       <BusinessWrapper
@@ -640,6 +641,40 @@ const OrderDetailsUI = (props) => {
                 }
               />
             )}
+            {hideStaticMap && (
+              <OrderCustomer>
+                <WrapperDriver>
+                  {isShowBusinessLogo && order?.business?.logo && (
+                    <PhotoBlock src={order?.business?.logo} />
+                  )}
+                  <div>
+                    <p>{order?.business?.name}</p>
+                    <ActionsSection
+                      {...ActionsSectionProps}
+                      actionType='business'
+                      showPhone={!hideBusinessPhone}
+                      showMessages={!hideBusinessMessages}
+                    />
+                    {!hideBusinessEmail && (
+                      <p>{order?.business?.email}</p>
+                    )}
+                    {!hideBusinessPhone && (
+                      <p>{order?.business?.cellphone}</p>
+                    )}
+                    {!hideBusinessAddress && (
+                      <p>{order?.business?.address}</p>
+                    )}
+                    {order?.place?.name && (
+                      <PlaceSpotSection>
+                        <p>
+                          {yourSpotString}: {order?.place?.name}
+                        </p>
+                      </PlaceSpotSection>
+                    )}
+                  </div>
+                </WrapperDriver>
+              </OrderCustomer>
+            )}
             <OrderCustomer>
               <WrapperDriver>
                 {!hideCustomerPhoto && order?.customer?.photo && (

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

@@ -60,6 +60,7 @@ const ProductOptionSubOptionUI = React.memo((props) => {
         ? (balance === option?.max || state.quantity === suboption.max)
         : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 
+  const quesoYSalsa = option?.name?.toLowerCase?.() === 'queso y salsa'
   const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
@@ -187,7 +188,7 @@ const ProductOptionSubOptionUI = React.memo((props) => {
               )
             }
           </PositionControl>
-          {option?.with_half_option && state?.selected && isAlsea && (
+          {(option?.with_half_option || quesoYSalsa) && state?.selected && isAlsea && (
             <ExtraControl>
               {(state.quantity >= 2) ? (
                 <ExtraItem

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

@@ -192,7 +192,7 @@ const SingleProductCardUI = React.memo((props) => {
                         <WrapTags>
                           {product?.tags.map((tag, i) => (
                             <div key={i}>
-                              <img src={tag.image ?? ''} />
+                              <img src={tag.image ?? ''}></img>
                             </div>
                           ))}
                         </WrapTags>

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

@@ -135,15 +135,13 @@ export const UserFormDetailsUI = (props) => {
 
   const onSubmit = () => {
     const isPhoneNumberValid = userPhoneNumber && showInputPhoneNumber ? isValidPhoneNumber : true
-    const requiredPhone = (user?.guest_id && requiredFields?.includes?.('cellphone')) || (validationFields?.fields?.checkout?.cellphone?.enabled && validationFields?.fields?.checkout?.cellphone?.required)
+    const requiredPhone = (user?.guest_id && requiredFields?.includes?.('cellphone')) || (validationFields?.fields?.checkout?.cellphone?.enabled && validationFields?.fields?.checkout?.cellphone?.required && !user?.guest_id)
     const content = []
     if (requiredFields?.includes?.('birthdate') && !birthdate) {
       content.push(t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required'))
     }
     if (!userPhoneNumber &&
-      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
-        configs?.verification_phone_required?.value === '1')
+      (requiredPhone || (configs?.verification_phone_required?.value === '1'))
     ) {
       content.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.'))
       setAlertState({