ordering-ui-external 14.1.7 → 14.1.9

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>
@@ -692,7 +692,7 @@ const CheckoutUI = (props) => {
                 `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
               ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
                 `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-              ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
+              ) : placing ? t('PLACING_ORDER', 'Placing order') : t('PLACE_ORDER', 'Place Order')}
             </Button>
           </WrapperPlaceOrderButton>
         )}

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/OrdersOption/styles.js

@@ -7,7 +7,7 @@ export const OptionTitle = styled.div`
   h1{
     text-transform: capitalize;
     font-size: 18px;
-    margin: 18px 0;
+    margin: 0;
   }
 
   @media (min-width: 768px){

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/SingleOrderCard/styles.js

@@ -68,7 +68,7 @@ export const Container = styled.div`
 
   @media(min-width: 993px){
     ${({ isBusinessesPage }) => isBusinessesPage && css`
-      margin: 30px 20px;
+      margin: 20px;
       width: calc(33% - 40px);
     `}
   }

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

@@ -12,7 +12,8 @@ import {
   TitleContainer,
   CountryFlag,
   PhoneContainer,
-  SkeletonsContainer
+  SkeletonsContainer,
+  ChangeCustomerText
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
 import PhoneInput from 'react-phone-number-input'
@@ -177,13 +178,7 @@ const UserDetailsUI = (props) => {
               {!isModal && (
                 <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
               )}
-              {cartStatus !== 2 && (
-                !isEdit ? (
-                  <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
-                ) : (
-                  <FcCancel className='cancel' onClick={() => toggleEditState()} />
-                )
-              )}
+              {cartStatus !== 2 && isEdit && <FcCancel className='cancel' onClick={() => toggleEditState()} />}
             </Header>
           )}
 
@@ -211,6 +206,11 @@ const UserDetailsUI = (props) => {
                   </p>
                 </PhoneContainer>
               )}
+              <ChangeCustomerText>
+                {cartStatus !== 2 && (
+                  <span onClick={() => toggleIsEdit()}>{t('CHANGE_USER_DETAILS', 'Change customer details')}</span>
+                )}
+              </ChangeCustomerText>
             </UserData>
           ) : (
             <SideForm>

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

@@ -27,15 +27,6 @@ export const Header = styled.div`
     cursor: pointer;
   }
 
-  span {
-    font-size: 13px;
-    color: ${props => props.theme.colors.primary};
-    cursor: pointer;
-    user-select: none;
-    &:hover {
-        text-decoration: underline;
-      }
-  }
 `
 
 export const SideForm = styled.div`
@@ -114,8 +105,24 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  p {
+    margin: 1rem 0;
+  }
 `
 
 export const SkeletonsContainer = styled.div`
   margin-top: 25px;
 `
+
+export const ChangeCustomerText = styled.div`
+
+  span {
+    font-size: 13px;
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+        text-decoration: underline;
+      }
+  }
+`

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