ordering-ui-external 1.1.1 → 1.1.4

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "Ordering UI Components",
-  "main": "./src/index.js",
+  "main": "./_modules/index.js",
   "exports": {
-    ".": "./src/index.js",
-    "./theme_two": "./src/themes/two/index.js",
-    "./theme_three": "./src/themes/three/index.js",
-    "./theme_four": "./src/themes/four/index.js",
-    "./theme_five": "./src/themes/five/index.js",
-    "./theme_six": "./src/themes/six/index.js",
-    "./theme_seven": "./src/themes/seven/index.js",
-    "./theme_eight": "./src/themes/eight/index.js",
-    "./theme_wow": "./src/themes/wow/index.js",
-    "./theme_pwa": "./src/themes/pwa/index.js",
-    "./order_and_pay": "./src/themes/orderAndPay/index.js",
-    "./theme_franchise": "./src/themes/franchise/index.js",
-    "./callcenter_original": "./src/themes/callcenterOriginal/index.js"
+    ".": "./_modules/index.js",
+    "./theme_two": "./_modules/themes/two/index.js",
+    "./theme_three": "./_modules/themes/three/index.js",
+    "./theme_four": "./_modules/themes/four/index.js",
+    "./theme_five": "./_modules/themes/five/index.js",
+    "./theme_six": "./_modules/themes/six/index.js",
+    "./theme_seven": "./_modules/themes/seven/index.js",
+    "./theme_eight": "./_modules/themes/eight/index.js",
+    "./theme_wow": "./_modules/themes/wow/index.js",
+    "./theme_pwa": "./_modules/themes/pwa/index.js",
+    "./order_and_pay": "./_modules/themes/orderAndPay/index.js",
+    "./theme_franchise": "./_modules/themes/franchise/index.js",
+    "./callcenter_original": "./_modules/themes/callcenterOriginal/index.js"
   },
   "scripts": {
     "clean": "shx rm -rf _bundles _modules",

package/src/index.js

@@ -92,6 +92,7 @@ import { VerticalOrdersLayout } from './components/VerticalOrdersLayout'
 import { GoogleLoginButton } from './components/GoogleLogin'
 import { SmsLoginButton } from './components/SmsLogin'
 import { AppleLogin } from './components/AppleLogin'
+import { SearchProducts } from './components/RenderProductsLayout/SearchProducts'
 
 import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
@@ -210,6 +211,7 @@ export {
   ReviewDriver,
   RenderProductsLayout,
   SearchBar,
+  SearchProducts,
   SignUpForm,
   SingleProductCard,
   SmartAppBanner,

package/src/themes/five/index.js

@@ -54,6 +54,7 @@ import { NotNetworkConnectivity } from './src/components/NotNetworkConnectivity'
 import { Modal } from './src/components/Modal'
 import { OrderDetails } from './src/components/OrderDetails'
 import { OrderDetails as OrderDetailsKiosk } from './src/components/OrderDetails/layouts/Kiosk'
+import { OrderItAgain } from './src/components/OrderItAgain'
 import { OrdersOption } from './src/components/OrdersOption'
 import { OrderProgress } from './src/components/OrderProgress'
 import { OrderTypeSelectorContent } from './src/components/OrderTypeSelectorContent'
@@ -95,6 +96,11 @@ import { ReviewTrigger } from './src/components/ReviewTrigger'
 import { ReviewOrder } from './src/components/ReviewOrder'
 import { ReviewDriver } from './src/components/ReviewDriver'
 import { ReviewProduct } from './src/components/ReviewProduct'
+import { ServiceForm } from './src/components/ServiceForm'
+import { ProfessionalFilter } from './src/components/ProfessionalFilter'
+import { SearchProducts } from './src/components/SearchProducts'
+import { MultiCartsPaymethodsAndWallets } from './src/components/MultiCartsPaymethodsAndWallets'
+import { ProfessionalProfile } from './src/components/ProfessionalProfile'
 
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
@@ -158,6 +164,7 @@ export {
   NotFoundSource,
   NotNetworkConnectivity,
   OrderDetails,
+  OrderItAgain,
   OrderDetailsKiosk,
   OrdersOption,
   OrderTypeSelectorContent,
@@ -199,6 +206,11 @@ export {
   ReviewOrder,
   ReviewDriver,
   ReviewProduct,
+  ServiceForm,
+  ProfessionalFilter,
+  SearchProducts,
+  MultiCartsPaymethodsAndWallets,
+  ProfessionalProfile,
 
   // styles
   Button,

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};

package/src/themes/six/index.js

@@ -52,6 +52,7 @@ import { ProductIngredient } from './src/components/ProductIngredient'
 import { GoogleLoginButton } from './src/components/GoogleLogin'
 import { AppleLogin } from './src/components/AppleLogin'
 import { SmsLoginButton } from './src/components/SmsLogin'
+import { SearchProducts } from './src/components/BusinessProductsListing/SearchProducts'
 
 import { Input as Inputs } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
@@ -115,6 +116,7 @@ export {
   GoogleLoginButton,
   AppleLogin,
   SmsLoginButton,
+  SearchProducts,
   // styles
   Inputs,
   Select,