ordering-ui-external 1.0.0 → 1.1.1

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

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 export const LayoutContainer = styled.div`
   display: flex;
   flex-direction: column;
+
   @media (min-width: 768px) {
     flex-direction: row;
     justify-content: space-between;
@@ -20,6 +21,7 @@ export const CalendarWrapper = styled.div`
   border: 1px solid #E9ECEF;
   box-sizing: border-box;
   border-radius: 7.6px;
+
   input {
     padding: 10px;
     border: 1px solid #DEE2E6;
@@ -27,28 +29,35 @@ export const CalendarWrapper = styled.div`
     border-radius: 7.6px;
     outline: none;
   }
+
   .react-calendar {
     border: none;
     width: 100%;
+
     .react-calendar__tile--active,
     .react-calendar__tile:enabled:focus {
       /* background: ${props => props.theme?.colors.primaryContrast}; */
       background: transparent;
+
       abbr {
         background: #E9F2FE;
         color: #344050;
       }
     }
+
     .react-calendar__tile:enabled:hover {
       background: transparent;
+
       abbr {
         background: #EFEFEF;
         color: #344050;
       }
     }
+
     .react-calendar__tile--now {
       background: transparent;
     }
+
     .react-calendar__month-view__weekdays {
       font-size: 12px;
       color: #909BA9;
@@ -58,6 +67,7 @@ export const CalendarWrapper = styled.div`
         text-decoration: none;
       }
     }
+
     .react-calendar__month-view__days__day {
       font-size: 12px;
       color: #344050;
@@ -68,42 +78,51 @@ export const CalendarWrapper = styled.div`
         justify-content: center;
         align-items: center;
         border-radius: 50%;
+
         @media (min-width: 350px) {
           width: 34px;
           height: 32px;
         }
       }
     }
+
     .react-calendar__tile:disabled {
       background-color: transparent;
       color: ${props => props.theme?.colors.disabled};
       cursor: not-allowed;
     }
+
     .react-calendar__navigation {
       button {
         background: transparent!important;
         color: #748194;
+
         svg {
           font-size: 24px;
+
           ${props => props.theme.rtl && css`
             transform: rotateZ(180deg);
           `}
         }
+
         &:disabled {
           cursor: not-allowed;
         }
+
         span {
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
           width: 100%;
           display: inline-block;
+
           @media (min-width: 768px) {
             width: auto;
             display: initial;
           }
         }
       }
+
       .react-calendar__navigation__prev2-button,
       .react-calendar__navigation__next2-button {
         display: none;
@@ -121,6 +140,7 @@ export const TimeListWrapper = styled.div`
   box-sizing: border-box;
   border-radius: 7.6px;
   margin-top: 20px;
+
   @media (min-width: 768px) {
     margin-top: 0;
   }
@@ -139,10 +159,12 @@ export const TimeItem = styled.div`
   min-width: calc(50% - 24px);
   box-sizing: border-box;
   user-select: none;
+
   ${({ active }) => active && css`
     background: #F5F9FF;
     color: ${props => props.theme.colors.primary};
   `}
+
   span {
     font-size: 14px;
     white-space: nowrap;

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -15,13 +15,39 @@ export const NotNetworkConnectivity = (props) => {
   const onlineStatus = useOnlineStatus()
   const theme = useTheme()
 
+  const errorImage = props.image || theme.images?.general?.notNetwork
+  const [base64ImageString, setBase64ImageString] = useState(null)
+
+  const getBase64ImageFromUrl = async (imageUrl) => {
+    const response = await fetch(imageUrl)
+    const blob = await response.blob()
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.addEventListener('load', function () {
+        resolve(reader.result)
+      }, false)
+      reader.onerror = (error) => {
+        return reject(error)
+      }
+      reader.readAsDataURL(blob)
+    })
+  }
+
+  useEffect(() => {
+    getBase64ImageFromUrl(errorImage).then(base64 => {
+      setBase64ImageString(base64)
+    })
+  }, [])
+
   return (
     <>
       <Container id='container' isOnline={props.isOnline ?? onlineStatus}>
         <h1>{t('MOBILE_NO_INTERNET', 'No internet connection')}</h1>
         <p>{t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}</p>
         <Image>
-          <img id='not-network' src={props.image || theme.images?.general?.notNetwork} alt='Not network' width='640' height='320' loading='lazy' />
+          {base64ImageString && (
+            <img id='not-network' src={base64ImageString} alt='Not network' width='640' height='320' loading='lazy' />
+          )}
         </Image>
         <ButtonWrapper>
           <Button

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

@@ -20,7 +20,9 @@ export const ActionsSection = (props) => {
     unreadAlert,
     setOpenMessages,
     readMessages,
-    setUnreadAlert
+    setUnreadAlert,
+    showPhone,
+    showMessages
   } = props
 
   const handleOpenMessages = (data) => {
@@ -35,7 +37,7 @@ export const ActionsSection = (props) => {
 
   return (
     <ActionsBlock>
-      {order?.[actionType] && order?.[actionType]?.phone &&
+      {order?.[actionType] && order?.[actionType]?.phone && showPhone &&
         <span onClick={() => window.open(`tel:${order?.[actionType]?.phone}`)}>
           <BsPhone />
         </span>}
@@ -44,14 +46,16 @@ export const ActionsSection = (props) => {
           <BiStoreAlt onClick={() => handleBusinessRedirect(businessData?.slug)} />
         </span>
       )}
-      <MessagesIcon onClick={() => handleOpenMessages({ driver: actionType === 'driver', business: actionType === 'business' })}>
-        {order?.unread_count > 0 && unreadAlert?.[actionType] && (
-          <ExclamationWrapper>
-            <AiFillExclamationCircle />
-          </ExclamationWrapper>
-        )}
-        <BiMessageRounded />
-      </MessagesIcon>
+      {showMessages && (
+        <MessagesIcon onClick={() => handleOpenMessages({ driver: actionType === 'driver', business: actionType === 'business' })}>
+          {order?.unread_count > 0 && unreadAlert?.[actionType] && (
+            <ExclamationWrapper>
+              <AiFillExclamationCircle />
+            </ExclamationWrapper>
+          )}
+          <BiMessageRounded />
+        </MessagesIcon>
+      )}
     </ActionsBlock>
   )
 }

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

@@ -263,7 +263,7 @@ export const OrderBillSection = (props) => {
                   )}
                 </div>
                 <span>
-                  -{parsePrice(event.amount)}
+                  -{parsePrice(event.amount, { isTruncable: true })}
                 </span>
               </div>
             ))}

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

@@ -8,7 +8,8 @@ import {
   useConfig,
   useOrder,
   useCustomer,
-  GoogleMapsMap
+  GoogleMapsMap,
+  useOrderingTheme
 } from 'ordering-components-external'
 import RiUser2Fill from '@meronex/icons/ri/RiUser2Fill'
 
@@ -18,12 +19,15 @@ import { NotFoundSource } from '../NotFoundSource'
 import { ProductItemAccordion } from '../ProductItemAccordion'
 import { Modal } from '../Modal'
 import { Messages } from '../Messages'
-import { ReviewOrder } from '../../../../../components/ReviewOrder'
+import { ReviewOrder } from '../ReviewOrder'
+import { ReviewProduct } from '../ReviewProduct'
+import { ReviewDriver } from '../ReviewDriver'
 import { ProductShare } from '../../../../../components/ProductShare'
 import { OrderBillSection } from './OrderBillSection'
 import { ActionsSection } from './ActionsSection'
 import { OrderPreferencesSection } from './OrderPreferencesSections'
 import { PlaceSpot } from '../PlaceSpot'
+import { Confirm } from '../Confirm'
 
 import {
   Container,
@@ -57,11 +61,11 @@ import {
   HeaderTitle,
   PlaceSpotSection,
   BtsOrderStatus,
-  LinkWrapper
+  LinkWrapper,
+  MapWrapper,
+  BusinessExternalWrapper
 } from './styles'
 import { useTheme } from 'styled-components'
-import { ReviewProduct } from '../../../../../components/ReviewProduct'
-import { ReviewDriver } from '../../../../../components/ReviewDriver'
 import { TaxInformation } from '../TaxInformation'
 
 import { getGoogleMapImage } from '../../../../../utils'
@@ -82,7 +86,8 @@ const OrderDetailsUI = (props) => {
     messagesReadList,
     reorderState,
     handleReorder,
-    orderTypes
+    orderTypes,
+    handleRemoveCart
   } = props
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
@@ -91,7 +96,7 @@ const OrderDetailsUI = (props) => {
   const [{ parsePrice, parseDate }] = useUtils()
   const [, { deleteUserCustomer }] = useCustomer()
   const [{ carts }, { refreshOrderOptions }] = useOrder()
-
+  const [orderingTheme] = useOrderingTheme()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
   const [isProductReviewed, setIsProductReviewed] = useState(false)
@@ -102,32 +107,34 @@ const OrderDetailsUI = (props) => {
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isService, setIsService] = useState(false)
   const [isOrderHistory, setIsOrderHistory] = useState(false)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
   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]
+  const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
 
   const showOrderActions = order?.delivery_type !== 1
 
-  const isOriginalLayout = theme?.layouts?.confirmation?.components?.layout?.type === 'original'
-  const showDeliveryType = !theme?.layouts?.confirmation?.components?.delivery_type?.hidden
-  const showDeliveryDate = !theme?.layouts?.confirmation?.components?.delivery_date?.hidden
-  const showDeliveryProgress = !theme?.layouts?.confirmation?.components?.delivery_progress?.hidden
-  const showBusinessPhone = !theme?.layouts?.confirmation?.components?.business_information?.components?.phone?.hidden
-  const showBusinessMessages = !theme?.layouts?.confirmation?.components?.business_information?.components?.messages?.hidden
-  const showBusinessEmail = !theme?.layouts?.confirmation?.components?.business_information?.components?.email?.hidden
-  const showBusinessAddress = !theme?.layouts?.confirmation?.components?.business_information?.components?.address?.hidden
-  const showBusinessMap = !theme?.layouts?.confirmation?.components?.business_information?.components?.map?.hidden
-  const showDriverName = !theme?.layouts?.confirmation?.components?.driver_information?.components?.name?.hidden
-  const showDriverPhone = !theme?.layouts?.confirmation?.components?.driver_information?.components?.phone?.hidden
-  const showDriverMessages = !theme?.layouts?.confirmation?.components?.driver_information?.components?.messages?.hidden
-  const showDriverEmail = !theme?.layouts?.confirmation?.components?.driver_information?.components?.email?.hidden
-  const showDriverPhoto = !theme?.layouts?.confirmation?.components?.driver_information?.components?.photo?.hidden
-  const showCustomerPhone = !theme?.layouts?.confirmation?.components?.customer_information?.components?.phone?.hidden
-  const showCustomerAddress = !theme?.layouts?.confirmation?.components?.customer_information?.components?.address?.hidden
-  const showCustomerEmail = !theme?.layouts?.confirmation?.components?.customer_information?.components?.email?.hidden
+  const isOriginalLayout = orderingTheme?.theme?.confirmation?.components?.layout?.type === 'original'
+  const showDeliveryType = !orderingTheme?.theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
+  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const showBusinessPhone = !orderingTheme?.theme?.confirmation?.components?.business?.components?.phone?.hidden
+  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const showBusinessEmail = !orderingTheme?.theme?.confirmation?.components?.business?.components?.email?.hidden
+  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
+  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.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 showCustomerPhone = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.phone?.hidden
+  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const showCustomerEmail = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.email?.hidden
 
   const getOrderStatus = (s) => {
     const status = parseInt(s)
@@ -232,6 +239,26 @@ const OrderDetailsUI = (props) => {
     handleGoToPage({ page: 'home' })
   }
 
+  const handleClickReorder = (order) => {
+    if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
+      setConfirm({
+        open: true,
+        content: t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?'),
+        handleOnAccept: async () => {
+          handleRemoveCart()
+          setConfirm({ ...confirm, open: false })
+        }
+      })
+    } else {
+      handleReorder(order.id)
+    }
+  }
+
+  const handleOriginalReorder = () => {
+    setConfirm({ ...confirm, open: false })
+    handleReorder(order.id)
+  }
+
   const ActionsSectionProps = {
     order,
     handleBusinessRedirect,
@@ -392,19 +419,29 @@ const OrderDetailsUI = (props) => {
                   acceptedStatus.includes(parseInt(order?.status, 10)) ||
                   !isOriginalLayout
                 ) && (
-                  <ReOrder>
-                    <Button
-                      color='primary'
-                      outline
-                      onClick={() => handleStartNewOrder(order.id)}
-                      disabled={reorderState?.loading}
-                    >
-                      {reorderState?.loading
-                        ? t('LOADING', 'Loading...')
-                        : t('ORDER_AGAIN', 'Order Again')}
-                    </Button>
-                  </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={() => handleClickReorder(order)}
+                          disabled={reorderState?.loading}
+                        >
+                          {reorderState?.loading
+                            ? t('LOADING', 'Loading...')
+                            : t('REORDER', 'Reorder')}
+                        </Button>
+                      )}
+                    </ReOrder>
+                  )}
               </TitleContainer>
               {showDeliveryProgress && (
                 <>
@@ -435,22 +472,15 @@ const OrderDetailsUI = (props) => {
                         <span onClick={handleOpenReview}>{t('REVIEW_ORDER', theme?.defaultLanguages?.REVIEW_ORDER || 'Review your Order')}</span>
                       </ReviewOrderLink>
                     </LinkWrapper>
-
                   </div>
                 </>
               )}
             </OrderInfo>
             <OrderBusiness>
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  width: '50%'
-                }}
-              >
+              <BusinessExternalWrapper>
                 <BusinessWrapper
                   w='calc(100% - 20px)'
-                  // borderBottom={showOrderActions}
+                // borderBottom={showOrderActions}
                 >
                   <img src={order?.business?.logo} />
                   <BusinessInfo>
@@ -480,7 +510,7 @@ const OrderDetailsUI = (props) => {
                   </BusinessInfo>
                 </BusinessWrapper>
 
-                {placeSpotTypes.includes(order?.delivery_type) && (
+                {showDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
                   <BusinessWrapper
                     w='calc(100% - 20px)'
                     borderTop
@@ -504,7 +534,7 @@ const OrderDetailsUI = (props) => {
                       <div>
                         <Button
                           style={{ fontSize: 14 }}
-                          color='primary'
+                          color={order?.status === 20 ? 'secundary' : 'primary'}
                           onClick={() => handleChangeOrderStatus(20)}
                           disabled={order?.status === 20}
                         >
@@ -514,7 +544,7 @@ const OrderDetailsUI = (props) => {
                       <div>
                         <Button
                           style={{ fontSize: 14 }}
-                          color='secundary'
+                          color={order?.status === 20 ? 'primary' : 'secundary'}
                           disabled={order?.status === 21}
                           onClick={() => handleChangeOrderStatus(21)}
                         >
@@ -524,15 +554,16 @@ const OrderDetailsUI = (props) => {
                     </BtsOrderStatus>
                   </BusinessWrapper>
                 )}
-
-              </div>
+              </BusinessExternalWrapper>
               {googleMapsApiKey && (
-                <OrderMapSection
-                  isMapImg
-                  validStatuses={[order?.status]}
-                  location={order?.business?.location}
-                  mapStyle={{ width: '50%' }}
-                />
+                <MapWrapper>
+                  <OrderMapSection
+                    isMapImg
+                    validStatuses={[order?.status]}
+                    location={order?.business?.location}
+                    mapStyle={{ width: '100%' }}
+                  />
+                </MapWrapper>
               )}
             </OrderBusiness>
             <OrderCustomer>
@@ -710,10 +741,10 @@ const OrderDetailsUI = (props) => {
         padding='20px'
         closeOnBackdrop
         title={`${openTaxModal.data?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2
-            ? `(${typeof openTaxModal.data?.rate === 'number'
-              ? `${openTaxModal.data?.rate}%`
-              : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})`
-            : ''}
+          ? `(${typeof openTaxModal.data?.rate === 'number'
+            ? `${openTaxModal.data?.rate}%`
+            : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})`
+          : ''}
           `}
         onClose={() => setOpenTaxModal({ open: false, tax: null, type: '' })}
         modalTitleStyle={{ display: 'flex', justifyContent: 'center' }}
@@ -742,6 +773,16 @@ const OrderDetailsUI = (props) => {
           }
         />
       </Modal>
+      <Confirm
+        title={t('ORDER', 'Order')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => handleOriginalReorder()}
+        onCancel={() => handleOriginalReorder()}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
     </Container>
   )
 }

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

@@ -9,7 +9,8 @@ import {
   useUtils,
   useEvent,
   useToast, ToastType,
-  useApi
+  useApi,
+  useOrderingTheme
 } from 'ordering-components-external'
 import AiFillCheckCircle from '@meronex/icons/ai/AiFillCheckCircle'
 
@@ -58,7 +59,7 @@ const OrderDetailsUI = (props) => {
   const [events] = useEvent()
   const [{ parseDate }] = useUtils()
   const [, { showToast }] = useToast()
-
+  const [orderingTheme] = useOrderingTheme()
   const optToSendReceipt = [
     {
       key: _EMAIL,
@@ -80,9 +81,9 @@ const OrderDetailsUI = (props) => {
 
   const { order, loading, error } = props.order
 
-  const showDeliveryType = !theme?.layouts?.confirmation?.components?.delivery_type?.hidden
-  const showDeliveryDate = !theme?.layouts?.confirmation?.components?.delivery_date?.hidden
-  const showDeliveryProgress = !theme?.layouts?.confirmation?.components?.delivery_progress?.hidden
+  const showDeliveryType = !orderingTheme?.theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
+  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
 
   const locations = [
     { ...order?.driver?.location, icon: order?.driver?.photo || theme.images?.dummies?.driverPhoto },