ordering-ui-external 1.1.0 → 1.1.3

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

@@ -38,6 +38,7 @@ import {
   BusinessWrapper,
   BusinessInfo,
   OrderInfo,
+  OrderIdSec,
   StatusBar,
   OrderCustomer,
   PhotoBlock,
@@ -61,6 +62,7 @@ import {
   HeaderTitle,
   PlaceSpotSection,
   BtsOrderStatus,
+  OrderStatusAndLinkContainer,
   LinkWrapper,
   MapWrapper,
   BusinessExternalWrapper
@@ -108,7 +110,7 @@ const OrderDetailsUI = (props) => {
   const [isService, setIsService] = useState(false)
   const [isOrderHistory, setIsOrderHistory] = useState(false)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
-
+  const [isShowBusinessLogo, setIsShowBusinessLogo] = useState(true)
   const { order, loading, businessData, error } = props.order
   const yourSpotString = order?.delivery_type === 3 ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')
   const acceptedStatus = [1, 2, 5, 6, 10, 11, 12]
@@ -183,6 +185,26 @@ const OrderDetailsUI = (props) => {
     setUnreadAlert({ business, driver })
   }
 
+  const validateImage = (src) => {
+    return new Promise((resolve, reject) => {
+      if (!src || typeof src !== 'string') {
+        resolve(false)
+      }
+      try {
+        const image = new Image()
+        image.src = src
+        image.complete ? resolve(true) : resolve(false)
+      } catch (err) {
+        resolve(false)
+      }
+    })
+  }
+
+  const businessLogoUrlValidation = async () => {
+    const isValidImage = await validateImage(order?.business?.logo)
+    setIsShowBusinessLogo(isValidImage)
+  }
+
   const locations = [
     { ...order?.driver?.location, icon: order?.driver?.photo || theme.images?.dummies?.driverPhoto },
     { ...order?.business?.location, icon: order?.business?.logo || theme.images?.dummies?.businessLogo },
@@ -311,6 +333,7 @@ const OrderDetailsUI = (props) => {
     if (!order) return
     const _isService = order.products.some(product => product.type === 'service')
     setIsService(_isService)
+    businessLogoUrlValidation()
   }, [order])
 
   const OrderMapSection = (props) => {
@@ -384,7 +407,7 @@ const OrderDetailsUI = (props) => {
           <WrapperLeftContainer>
             <OrderInfo>
               <TitleContainer>
-                <h1>{isService ? t('APPOINTMENT', 'Appointment') : t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</h1>
+                <OrderIdSec>{isService ? t('APPOINTMENT', 'Appointment') : t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OrderIdSec>
                 {parseInt(configs?.guest_uuid_access?.value, 10) && order?.hash_key && (
                   <Content className='order-content'>
                     <ShareOrder>
@@ -419,40 +442,34 @@ const OrderDetailsUI = (props) => {
                   acceptedStatus.includes(parseInt(order?.status, 10)) ||
                   !isOriginalLayout
                 ) && (
-                    <ReOrder>
+                  <ReOrder>
+                    <Button
+                      color='primary'
+                      outline
+                      onClick={() => handleStartNewOrder(order.id)}
+                      disabled={reorderState?.loading}
+                    >
+                      {t('START_NEW_ORDER', 'Start new order')}
+                    </Button>
+                    {completedStatus.includes(parseInt(order?.status, 10)) && (
                       <Button
                         color='primary'
                         outline
-                        onClick={() => handleStartNewOrder(order.id)}
+                        onClick={() => handleClickReorder(order)}
                         disabled={reorderState?.loading}
                       >
-                        {t('START_NEW_ORDER', 'Start new order')}
+                        {reorderState?.loading
+                          ? t('LOADING', 'Loading...')
+                          : t('REORDER', 'Reorder')}
                       </Button>
-                      {completedStatus.includes(parseInt(order?.status, 10)) && (
-                        <Button
-                          color='primary'
-                          outline
-                          onClick={() => handleClickReorder(order)}
-                          disabled={reorderState?.loading}
-                        >
-                          {reorderState?.loading
-                            ? t('LOADING', 'Loading...')
-                            : t('REORDER', 'Reorder')}
-                        </Button>
-                      )}
-                    </ReOrder>
-                  )}
+                    )}
+                  </ReOrder>
+                )}
               </TitleContainer>
               {showDeliveryProgress && (
                 <>
                   <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      justifyContent: 'space-between'
-                    }}
-                  >
+                  <OrderStatusAndLinkContainer>
                     <p className='order-status'>{getOrderStatus(order?.status)?.value}</p>
                     <LinkWrapper>
                       <ReviewOrderLink
@@ -472,7 +489,7 @@ const OrderDetailsUI = (props) => {
                         <span onClick={handleOpenReview}>{t('REVIEW_ORDER', theme?.defaultLanguages?.REVIEW_ORDER || 'Review your Order')}</span>
                       </ReviewOrderLink>
                     </LinkWrapper>
-                  </div>
+                  </OrderStatusAndLinkContainer>
                 </>
               )}
             </OrderInfo>
@@ -482,7 +499,7 @@ const OrderDetailsUI = (props) => {
                   w='calc(100% - 20px)'
                 // borderBottom={showOrderActions}
                 >
-                  <img src={order?.business?.logo} />
+                  {isShowBusinessLogo && <img src={order?.business?.logo} />}
                   <BusinessInfo>
                     <h2>{order?.business?.name}</h2>
                     <ActionsSection

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { useLanguage, useUtils, OrderReview as ReviewOrderController } from 'ordering-components-external'
+import { useLanguage, useUtils, OrderReview as ReviewOrderController } from 'ordering-components'
 import MdClose from '@meronex/icons/md/MdClose'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import {

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, ReviewProduct as ReviewProductController } from 'ordering-components-external'
+import { useLanguage, ReviewProduct as ReviewProductController } from 'ordering-components'
 import { useForm } from 'react-hook-form'
 
 import {

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

@@ -9,18 +9,15 @@ export const ActionBlock = styled.div`
   justify-content: space-between;
   margin-top: 30px;
   width: 100%;
-
   span {
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     user-select: none;
   }
-
   button {
     font-size: 14px;
     padding: 6px 20px;
-
     svg {
       color: white;
       font-size: 21px;
@@ -43,7 +40,6 @@ export const HandReviewWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-
   p {
     font-size: 15px;
     color: ${props => props.theme?.colors.headingColor};
@@ -62,19 +58,16 @@ export const HandReviewContent = styled.div`
 
 export const HandIconWrapper = styled.span`
   margin-left: 15px;
-
   ${props => props.theme?.rtl && css`
     margin-right: 15px;
     margin-left: 0;
   `}
-
   svg {
     font-size: 24px;
     color: #B1BCCC;
     cursor: pointer;
     transition: all 0.3s linear;
   }
-
   ${({ active }) => active && css`
     svg {
       color: ${props => props.theme?.colors.primary};
@@ -93,7 +86,6 @@ export const AddCommentHideShow = styled.p`
   transition: all 0.3s linear;
   color: #909BA9;
   font-size: 13px;
-
   &:hover {
     color: ${props => props.theme?.colors.primary};
   }
@@ -105,14 +97,12 @@ export const AddCommentHideShow = styled.p`
 
 export const Comments = styled.div`
   margin-top: 50px;
-
   p {
     margin-top: 0;
     margin-bottom: 8px;
     font-size: 14px;
     color: #344050;
   }
-
   textarea {
     width: 100%;
     box-sizing: border-box;
@@ -134,22 +124,18 @@ export const ButtonCustomized = styled(Button)`
   background: #E9ECEF;
   border: 1px solid #E9ECEF;
   transition: all 0.3s linear;
-
   ${props => props.theme?.rtl && css`
     margin-left: 18px;
     margin-right: 0;
   `}
-
   svg {
     vertical-align: middle;
     margin-left: 5px;
-
     ${props => props.theme?.rtl && css`
       margin-right: 5px;
       margin-left: 0;
     `}
   }
-
   ${({ active }) => active && css`
     background: ${props => props.theme?.colors.primary};
     border: 1px solid ${props => props.theme?.colors.primary};