ordering-ui-external 1.0.0 → 1.1.1

package/src/components/BusinessBasicInformation/index.js

@@ -10,7 +10,7 @@ import { useTheme } from 'styled-components'
 import { Modal } from '../Modal'
 import { BusinessInformation } from '../BusinessInformation'
 
-import { useUtils, useOrder, useLanguage } from 'ordering-components-external'
+import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components-external'
 
 import { convertHoursToMinutes } from '../../utils'
 
@@ -38,6 +38,7 @@ export const BusinessBasicInformation = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const [orderingTheme] = useOrderingTheme()
 
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
@@ -48,6 +49,13 @@ export const BusinessBasicInformation = (props) => {
     return _types.join(', ')
   }
 
+  const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+  const showDeliveryFee = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const showTime = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const showBusinessInfo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+  const showReviews = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -59,13 +67,15 @@ export const BusinessBasicInformation = (props) => {
       <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
         {!business?.open && <h1>{t('CLOSED', 'Closed')}</h1>}
         <BusinessContent>
-          <WrapperBusinessLogo>
-            {!loading ? (
-              <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
-            ) : (
-              <Skeleton height={70} width={70} />
-            )}
-          </WrapperBusinessLogo>
+          {showLogo && (
+            <WrapperBusinessLogo>
+              {!loading ? (
+                <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+              ) : (
+                <Skeleton height={70} width={70} />
+              )}
+            </WrapperBusinessLogo>
+          )}
           <BusinessInfo className='info'>
             <BusinessInfoItem>
               <div>
@@ -74,50 +84,63 @@ export const BusinessBasicInformation = (props) => {
                 ) : (
                   <Skeleton width={100} />
                 )}
-                {!loading ? (
-                  <p>
-                    <FaStar className='start' />
-                    {business?.reviews?.total}
-                  </p>
-                ) : (
-                  <Skeleton width={100} />
+                {showReviews && (
+                  <>
+                    {!loading ? (
+                      <p>
+                        <FaStar className='start' />
+                        {business?.reviews?.total}
+                      </p>
+                    ) : (
+                      <Skeleton width={100} />
+                    )}
+                  </>
                 )}
               </div>
+              {showBusinessInfo && (
+                <div>
+                  {!loading ? (
+                    <p className='type'>{getBusinessType()}</p>
+                  ) : (
+                    <Skeleton width={100} />
+                  )}
+                </div>
+              )}
               <div>
-                {!loading ? (
-                  <p className='type'>{getBusinessType()}</p>
-                ) : (
-                  <Skeleton width={100} />
+                {showTime && (
+                  <>
+                    {!loading ? (
+                      <>
+                        {orderState?.options?.type === 1 ? (
+                          <h5>
+                            <FiClock />
+                            {convertHoursToMinutes(business?.delivery_time)}
+                          </h5>
+                        ) : (
+                          <h5>
+                            <FiClock />
+                            {convertHoursToMinutes(business?.pickup_time)}
+                          </h5>
+                        )}
+                      </>
+                    ) : (
+                      <Skeleton width={70} />
+                    )}
+                  </>
                 )}
-              </div>
-              <div>
-                {!loading ? (
+                {showDistance && (
                   <>
-                    {orderState?.options?.type === 1 ? (
+                    {!loading ? (
                       <h5>
-                        <FiClock />
-                        {convertHoursToMinutes(business?.delivery_time)}
+                        <GrLocation />
+                        {parseDistance(business?.distance || 0)}
                       </h5>
                     ) : (
-                      <h5>
-                        <FiClock />
-                        {convertHoursToMinutes(business?.pickup_time)}
-                      </h5>
+                      <Skeleton width={70} />
                     )}
                   </>
-                ) : (
-                  <Skeleton width={70} />
-                )}
-
-                {!loading ? (
-                  <h5>
-                    <GrLocation />
-                    {parseDistance(business?.distance || 0)}
-                  </h5>
-                ) : (
-                  <Skeleton width={70} />
                 )}
-                {orderState?.options.type === 1 && (
+                {orderState?.options.type === 1 && showDeliveryFee && (
                   <>
                     {!loading ? (
                       <h5>

package/src/components/BusinessProductsList/index.js

@@ -53,7 +53,7 @@ const BusinessProductsListUI = (props) => {
                   businessId={businessId}
                   onProductClick={onProductClick}
                   isCartOnProductsList={isCartOnProductsList}
-                  productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                   productToIdLoading={productToIdLoading}
                 />
               ))
@@ -77,7 +77,7 @@ const BusinessProductsListUI = (props) => {
                           businessId={businessId}
                           onProductClick={onProductClick}
                           isCartOnProductsList={isCartOnProductsList}
-                          productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                          productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                           productToIdLoading={productToIdLoading}
                         />
                       ))}
@@ -108,7 +108,7 @@ const BusinessProductsListUI = (props) => {
                               product={product}
                               onProductClick={onProductClick}
                               isCartOnProductsList={isCartOnProductsList}
-                              productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                              productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                               productToIdLoading={productToIdLoading}
                             />
                           ))

package/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -60,7 +60,7 @@ const BusinessProductsListUI = (props) => {
                   businessId={businessId}
                   onProductClick={onProductClick}
                   isCartOnProductsList={isCartOnProductsList}
-                  productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                 />
               ))
             }
@@ -96,7 +96,7 @@ const BusinessProductsListUI = (props) => {
                       businessId={businessId}
                       onProductClick={onProductClick}
                       isCartOnProductsList={isCartOnProductsList}
-                      productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}
                   {!categoryState?.loading && featProducts?.length && (
@@ -154,7 +154,7 @@ const BusinessProductsListUI = (props) => {
                             product={product}
                             onProductClick={onProductClick}
                             isCartOnProductsList={isCartOnProductsList}
-                            productAddedToCart={currentCart?.products?.find(Cproduct => Cproduct.id === product.id)}
+                            productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                           />
                         ))
                       }

package/src/components/Checkout/index.js

@@ -393,6 +393,7 @@ const CheckoutUI = (props) => {
                 setCardData={setCardData}
                 handlePlaceOrder={handlePlaceOrder}
                 onPlaceOrderClick={onPlaceOrderClick}
+                setCreateOrder={setCreateOrder}
               />
             </PaymentMethodContainer>
           )}

package/src/components/ForgotPasswordForm/index.js

@@ -50,7 +50,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

package/src/components/Header/index.js

@@ -336,7 +336,7 @@ export const Header = (props) => {
                 )}
               </AddressWrapper>
               {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                <MomentControl 
+                <MomentControl
                   isModalBehavior
                 />
               )}

package/src/components/LoginForm/index.js

@@ -156,7 +156,9 @@ const LoginFormUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -310,14 +312,14 @@ const LoginFormUI = (props) => {
               isPopup={isPopup}
             >
               {
-              props.beforeMidElements?.map((BeforeMidElements, i) => (
-                <React.Fragment key={i}>
-                  {BeforeMidElements}
-                </React.Fragment>))
+                props.beforeMidElements?.map((BeforeMidElements, i) => (
+                  <React.Fragment key={i}>
+                    {BeforeMidElements}
+                  </React.Fragment>))
               }
               {
-              props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                <BeforeMidComponents key={i} {...props} />))
+                props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                  <BeforeMidComponents key={i} {...props} />))
               }
               {useLoginByEmail && loginTab === 'email' && (
                 <Input
@@ -335,7 +337,7 @@ const LoginFormUI = (props) => {
                 <InputPhoneNumber
                   value={credentials?.cellphone}
                   setValue={handleChangePhoneNumber}
-                  handleIsValid={() => {}}
+                  handleIsValid={() => { }}
                 />
               )}
 
@@ -399,14 +401,14 @@ const LoginFormUI = (props) => {
                 </WrapperPassword>
               )}
               {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
+                props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))
               }
               {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
+                props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))
               }
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
@@ -458,14 +460,14 @@ const LoginFormUI = (props) => {
             Object.keys(configs).length > 0 ? (
               <SocialButtons isPopup={isPopup}>
                 {(configs?.facebook_login?.value === 'true' ||
-                configs?.facebook_login?.value === '1') &&
-                configs?.facebook_id?.value &&
-              (
-                <FacebookLoginButton
-                  appId={configs?.facebook_id?.value}
-                  handleSuccessFacebookLogin={handleSuccessFacebook}
-                />
-              )}
+                  configs?.facebook_login?.value === '1') &&
+                  configs?.facebook_id?.value &&
+                  (
+                    <FacebookLoginButton
+                      appId={configs?.facebook_id?.value}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
                 {configs?.apple_login_client_id?.value &&
                   (
                     <AppleLogin
@@ -480,12 +482,12 @@ const LoginFormUI = (props) => {
                   />
                 )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
-               configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                configs?.twilio_service_enabled?.value === '1') && (
-                  <SmsLoginButton
-                    handleSmsLogin={() => { setLoginWithOtpState(true) }}
-                  />
-                )}
+                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                    configs?.twilio_service_enabled?.value === '1') && (
+                    <SmsLoginButton
+                      handleSmsLogin={() => { setLoginWithOtpState(true) }}
+                    />
+                  )}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>

package/src/components/OrderDetails/index.js

@@ -5,7 +5,8 @@ import {
   useEvent,
   useUtils,
   useConfig,
-  GoogleMapsMap
+  GoogleMapsMap,
+  useOrderingTheme
 } from 'ordering-components-external'
 import FiPhone from '@meronex/icons/fi/FiPhone'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
@@ -89,7 +90,7 @@ const OrderDetailsUI = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
-
+  const [orderingTheme] = useOrderingTheme()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
@@ -105,6 +106,20 @@ const OrderDetailsUI = (props) => {
 
   const isFromCheckPage = JSON.parse(window.localStorage.getItem('business-address'))
 
+  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
+  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.hidden
+  const showBusinessLogo = !orderingTheme?.theme?.confirmation?.components?.business?.components?.logo?.hidden
+  const showDriverName = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const showDriverPhone = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const showDriverMessages = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const showDriverEmail = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.email?.hidden
+  const showDriverPhoto = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.photo?.hidden
+  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
+
   const getOrderStatus = (s) => {
     const status = parseInt(s)
     const orderStatus = [
@@ -274,32 +289,42 @@ const OrderDetailsUI = (props) => {
               </Header>
               <OrderBusiness>
                 <BusinessWrapper>
-                  <LogoWrapper>
-                    <BusinessLogo bgimage={order?.business?.logo || theme.images?.dummies?.businessLogo} />
-                  </LogoWrapper>
+                  {showBusinessLogo && (
+                    <LogoWrapper>
+                      <BusinessLogo bgimage={order?.business?.logo || theme.images?.dummies?.businessLogo} />
+                    </LogoWrapper>
+                  )}
                   <BusinessInfo>
                     <h1>{order?.business?.name}</h1>
-                    <p>{order?.business?.address}</p>
-                    <p>{order?.business?.cellphone}</p>
-                    <p>{order?.business?.email}</p>
+                    {showBusinessAddress && (
+                      <p>{order?.business?.address}</p>
+                    )}
+                    {showDriverPhone && (
+                      <p>{order?.business?.cellphone}</p>
+                    )}
+                    {showDriverEmail && (
+                      <p>{order?.business?.email}</p>
+                    )}
                   </BusinessInfo>
                 </BusinessWrapper>
                 <ActionsBlock>
-                  {order?.driver && order?.driver.phone &&
+                  {order?.driver && order?.driver.phone && showDriverPhone &&
                     <span onClick={() => window.open(`tel:${order?.driver.phone}`)}>
                       <FiPhone />
                     </span>}
                   <span>
                     <BiStoreAlt onClick={() => handleBusinessRedirect(businessData?.slug)} />
                   </span>
-                  <MessagesIcon onClick={() => handleOpenMessages({ driver: false, business: true })}>
-                    {order?.unread_count > 0 && unreadAlert.business && (
-                      <ExclamationWrapper>
-                        <AiFillExclamationCircle />
-                      </ExclamationWrapper>
-                    )}
-                    <HiOutlineChat />
-                  </MessagesIcon>
+                  {showBusinessMessages && (
+                    <MessagesIcon onClick={() => handleOpenMessages({ driver: false, business: true })}>
+                      {order?.unread_count > 0 && unreadAlert.business && (
+                        <ExclamationWrapper>
+                          <AiFillExclamationCircle />
+                        </ExclamationWrapper>
+                      )}
+                      <HiOutlineChat />
+                    </MessagesIcon>
+                  )}
                 </ActionsBlock>
               </OrderBusiness>
 
@@ -309,38 +334,50 @@ const OrderDetailsUI = (props) => {
                   {order?.status !== 0 && order?.integration_id && (
                     <h1>{t('TICKET', 'Ticket')}: {order?.integration_id}</h1>
                   )}
-                  <p>{t('DATE_TIME_FOR_ORDER', theme?.defaultLanguages?.DATE_TIME_FOR_ORDER || 'Date and time for your order')}</p>
-                  <p className='date'>
-                    {
-                      order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })
-                    }
-                  </p>
-                  <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+                  {showDeliveryDate && (
+                    <>
+                      <p>{t('DATE_TIME_FOR_ORDER', theme?.defaultLanguages?.DATE_TIME_FOR_ORDER || 'Date and time for your order')}</p>
+                      <p className='date'>
+                        {
+                          order?.delivery_datetime_utc
+                            ? parseDate(order?.delivery_datetime_utc)
+                            : parseDate(order?.delivery_datetime, { utc: false })
+                        }
+                      </p>
+                    </>
+                  )}
+                  {showDeliveryProgress && (
+                    <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+                  )}
                 </OrderData>
-                <OrderStatus>
-                  <span>{getOrderStatus(order?.status)?.value}</span>
-                  <StatusImage>
-                    <img src={getImage(order?.status || 0)} alt='status' width='70px' height='70px' loading='lazy' />
-                  </StatusImage>
-                </OrderStatus>
+                {showDeliveryProgress && (
+                  <OrderStatus>
+                    <span>{getOrderStatus(order?.status)?.value}</span>
+                    <StatusImage>
+                      <img src={getImage(order?.status || 0)} alt='status' width='70px' height='70px' loading='lazy' />
+                    </StatusImage>
+                  </OrderStatus>
+                )}
               </OrderInfo>
 
               <SectionTitle>
                 {t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
               </SectionTitle>
               <OrderCustomer>
-                <div className='photo'>
-                  {order?.customer?.photo ? (
-                    <PhotoBlock src={order?.customer?.photo} width='80' height='80' />
-                  ) : (
-                    <FaUserCircle />
-                  )}
-                </div>
+                {showCustomerPhoto && (
+                  <div className='photo'>
+                    {order?.customer?.photo ? (
+                      <PhotoBlock src={order?.customer?.photo} width='80' height='80' />
+                    ) : (
+                      <FaUserCircle />
+                    )}
+                  </div>
+                )}
                 <InfoBlock>
                   <h1>{order?.customer?.name} {order?.customer?.lastname}</h1>
-                  <span>{order?.customer?.address}</span>
+                  {showCustomerAddress && (
+                    <span>{order?.customer?.address}</span>
+                  )}
                 </InfoBlock>
               </OrderCustomer>
               {order?.delivery_type === 1 && (
@@ -374,7 +411,7 @@ const OrderDetailsUI = (props) => {
 
               {order?.driver && (
                 <>
-                  {order?.driver?.location && parseInt(order?.status) === 9 && (
+                  {showBusinessMap && order?.driver?.location && parseInt(order?.status) === 9 && (
                     <Map>
                       <GoogleMapsMap
                         apiKey={configs?.google_maps_api_key?.value}
@@ -390,31 +427,37 @@ const OrderDetailsUI = (props) => {
                     </SectionTitle>
                     <OrderDriver>
                       <WrapperDriver>
-                        <div className='photo'>
-                          {order?.driver?.photo ? (
-                            <PhotoBlock src={order?.driver?.photo} width='70' height='70' />
-                          ) : (
-                            <RiUser2Fill />
-                          )}
-                        </div>
+                        {showDriverPhoto && (
+                          <div className='photo'>
+                            {order?.driver?.photo ? (
+                              <PhotoBlock src={order?.driver?.photo} width='70' height='70' />
+                            ) : (
+                              <RiUser2Fill />
+                            )}
+                          </div>
+                        )}
                         <InfoBlock>
-                          <h1>{order?.driver?.name} {order?.driver?.lastname}</h1>
+                          {showDriverName && (
+                            <h1>{order?.driver?.name} {order?.driver?.lastname}</h1>
+                          )}
                           <span>{t('DRIVER', theme?.defaultLanguages?.DRIVER || 'Driver')}</span>
                         </InfoBlock>
                       </WrapperDriver>
                       <ActionsBlock>
-                        {order.driver && order.driver?.phone &&
+                        {showDriverPhone && order.driver && order.driver?.phone &&
                           <span onClick={() => window.open(`tel:${order.driver.phone}`)}>
                             <FiPhone />
                           </span>}
-                        <MessagesIcon onClick={() => handleOpenMessages({ driver: true, business: false })}>
-                          {order?.unread_count > 0 && unreadAlert?.driver && (
-                            <ExclamationWrapper>
-                              <AiFillExclamationCircle />
-                            </ExclamationWrapper>
-                          )}
-                          <HiOutlineChat />
-                        </MessagesIcon>
+                        {showDriverMessages && (
+                          <MessagesIcon onClick={() => handleOpenMessages({ driver: true, business: false })}>
+                            {order?.unread_count > 0 && unreadAlert?.driver && (
+                              <ExclamationWrapper>
+                                <AiFillExclamationCircle />
+                              </ExclamationWrapper>
+                            )}
+                            <HiOutlineChat />
+                          </MessagesIcon>
+                        )}
                       </ActionsBlock>
                     </OrderDriver>
                   </>

package/src/components/PaymentOptionSquare/index.js

@@ -61,16 +61,14 @@ const PaymentOptionSquareUI = (props) => {
               </div>
             ))
           )}
-          <Container>
+          <Container isLoading={isLoadingMethod || isLoadingPlace}>
             {methodSelected === 'card_payments' && (
               <>
                 <div id='card-container' />
-                {!isLoadingMethod && !isLoadingPlace && (
-                  <Button color='primary' id='card-button' type='button'>{t('ACCEPT', 'Accept')}</Button>
-                )}
+                <Button color='primary' id='card-button' type='button'>{t('ACCEPT', 'Accept')}</Button>
               </>
             )}
-            {methodSelected === 'ach_bank_transfer' && !isLoadingMethod && !isLoadingPlace && (
+            {methodSelected === 'ach_bank_transfer' && (
               <Button color='primary' id='ach-button' type='button'>{t('PAY_WITH_BANK_ACCOUNT', 'Pay with Bank Account')}</Button>
             )}
             {/* {methodSelected === 'digital_wallets' && (
@@ -94,9 +92,7 @@ const PaymentOptionSquareUI = (props) => {
             {methodSelected === 'gift_cards' && (
               <form>
                 <div id='gift-card-container' />
-                {!isLoadingPlace && (
-                  <button id='gift-card-button' type='button'>{t('PAY_WITH_GIFT_CARD', 'Pay with Gift Card')}</button>
-                )}
+                <button id='gift-card-button' type='button'>{t('PAY_WITH_GIFT_CARD', 'Pay with Gift Card')}</button>
               </form>
             )}
             {isLoadingPlace && (

package/src/components/PaymentOptionSquare/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   width: 100%;
@@ -6,6 +6,9 @@ export const Container = styled.div`
   button{
     width: 100%;
     height: 40px
+    ${({ isLoading }) => isLoading && css`
+      pointer-events: none;
+    `}
   }
 `
 export const Spinner = styled.div`