ordering-ui-external 14.1.8 → 14.1.10

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

@@ -156,6 +156,11 @@ export const TimeItem = styled.div`
   span {
     font-size: 14px;
     white-space: nowrap;
+
+    p#time {
+      margin: auto;
+      padding: 10px;
+    }
   }
   ${({ active }) => active && css`
     background: #F5F9FF;
@@ -166,7 +171,7 @@ ${({ cateringPreorder }) => cateringPreorder ? css`
     width: 100%;
     min-width: 100%;
     height: 50px;
-    
+
     span {
       font-size: 18px;
       display: flex;
@@ -199,17 +204,17 @@ ${({ cateringPreorder }) => cateringPreorder ? css`
     min-width: calc(50% - 24px);
     box-sizing: border-box;
     user-select: none;
-      
+
       @media (min-width: 400px) {
         width: calc(33.33% - 24px);
         min-width: calc(33.33% - 24px);
       }
-      
+
       @media (min-width: 576px) {
       width: calc(25% - 24px);
       min-width: calc(25% - 24px);
       }
-      
+
       @media (min-width: 769px) {
         width: calc(33.33% - 24px);
         min-width: calc(33.33% - 24px);

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/MomentControl/index.js

@@ -346,7 +346,7 @@ const MomentControlUI = (props) => {
                               {timeSelected === time.value ? <CheckedIcon ref={scheduleItemRef} cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
                             </CheckIcon>
                           )}
-                          <p>
+                          <p id='time'>
                             {time.text} {cateringPreorder && `- ${time.endText}`}
                           </p>
                         </span>

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

@@ -225,6 +225,11 @@ export const TimeItem = styled.div`
   span {
     font-size: 14px;
     white-space: nowrap;
+
+    p#time {
+      margin: auto;
+      padding: 10px;
+    }
   }
   ${({ active }) => active && css`
     background: #F5F9FF;
@@ -235,7 +240,7 @@ ${({ cateringPreorder }) => cateringPreorder ? css`
     width: 100%;
     min-width: 100%;
     height: 50px;
-    
+
     span {
       font-size: 18px;
       display: flex;
@@ -268,17 +273,17 @@ ${({ cateringPreorder }) => cateringPreorder ? css`
     min-width: calc(50% - 24px);
     box-sizing: border-box;
     user-select: none;
-      
+
       @media (min-width: 400px) {
         width: calc(33.33% - 24px);
         min-width: calc(33.33% - 24px);
       }
-      
+
       @media (min-width: 576px) {
       width: calc(25% - 24px);
       min-width: calc(25% - 24px);
       }
-      
+
       @media (min-width: 769px) {
         width: calc(33.33% - 24px);
         min-width: calc(33.33% - 24px);

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({