ordering-ui-react-native 0.14.23 → 0.14.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.23",
+  "version": "0.14.27",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/Checkout/index.tsx

@@ -150,10 +150,10 @@ const CheckoutUI = (props: any) => {
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
-  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map(option => {
+  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
     return {
-      value: option?.id, key: option?.id, label: option?.name
-    }
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
+		}
   })
 
   const handlePlaceOrder = () => {

package/src/components/Messages/index.tsx

@@ -45,6 +45,7 @@ const imgOptions = {
   includeBase64: true,
   selectionLimit: 0
 }
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
 
 const MessagesUI = (props: MessagesParams) => {
   const {
@@ -118,7 +119,11 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
+        filterSpecialStatus.includes(message.change.attribute) ? 
+        `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
+        `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      }`
       : message.change.new
         ?
         `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`

package/themes/instacart/src/components/BusinessProductsList/styles.tsx

@@ -15,5 +15,5 @@ export const WrapperNotFound = styled.View`
 export const ProductsWrapper = styled.View`
   flex-direction: row;
   flex-wrap: wrap;
-  align-items: flex-start;
+  margin-bottom: 20px;
 `

package/themes/instacart/src/components/SingleProductCard/index.tsx

@@ -6,7 +6,7 @@ import {
   CardInfo,
   SoldOut
 } from './styles'
-import { StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { StyleSheet, TouchableOpacity, Dimensions, View } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
 
@@ -23,11 +23,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const styles = StyleSheet.create({
     container: {
-      width: (windowWidth - 80) / 2,
-      height: (windowWidth - 80) / 2 + 40
-    },
-    textStyle: {
-      flex: 1,
+      width: (windowWidth - 80) / 2
     },
     soldOutTextStyle : {
       textTransform: 'capitalize',
@@ -35,9 +31,14 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       fontSize: 12,
       lineHeight: 18
     },
-    productStyle: {
+    imageWrapper: {
       width: (windowWidth - 160) / 2,
       height: (windowWidth - 160) / 2,
+      position: 'relative'
+    },
+    productStyle: {
+      width: '100%',
+      height: '100%',
       borderRadius: 3,
 		  marginTop: 5
     },
@@ -74,26 +75,30 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       onPress={() => onProductClick?.(product)}
 		  activeOpacity={0.8}
     >
-      <OIcon
-        url={optimizeImage(product?.images, 'h_200,c_limit')}
-        src={!product?.images && theme.images.dummies.product}
-        style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
-      />
+      <View
+        style={styles.imageWrapper}
+      >
+        <OIcon
+          url={optimizeImage(product?.images, 'h_200,c_limit')}
+          src={!product?.images && theme.images.dummies.product}
+          style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
+        />
+        {(isSoldOut || maxProductQuantity <= 0) && (
+          <SoldOut>
+            <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
+          </SoldOut>
+        )}
+      </View>
       <CardInfo>
         <OText color={theme.colors.textPrimary} style={{...theme.labels.normal, marginTop: 9}}>{parsePrice(product?.price)}</OText>
-        <OText numberOfLines={1} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.name}</OText>
-        <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.description}</OText>
+        <OText numberOfLines={1} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.name}</OText>
+        <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.description}</OText>
       </CardInfo>
 
 		<TouchableOpacity style={styles.addBtn} onPress={() => onProductClick?.(product)} activeOpacity={0.7}>
 			<OIcon src={theme.images.general.plus_circle} />
 		</TouchableOpacity>
 
-      {(isSoldOut || maxProductQuantity <= 0) && (
-        <SoldOut>
-          <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
-        </SoldOut>
-      )}
     </CardContainer>
   )
 }

package/themes/instacart/src/components/SingleProductCard/styles.tsx

@@ -1,12 +1,9 @@
 import styled from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
-  /* flex-grow: 1; */
-  align-items: flex-start;
+  flex-direction: column;
   padding: 10px;
   position: relative;
-  /* margin-end: 10px; */
-  border-radius: 3px;
 `
 export const CardInfo = styled.View`
   flex: 1;
@@ -16,6 +13,7 @@ export const SoldOut = styled.View`
   position: absolute;
   background: ${(props: any) => props.theme.colors.black} 0% 0% no-repeat padding-box;
   padding: 3px 9px;
-  top: 91px;
-  left: 10px;
+  left: 0px;
+  bottom: -5px;
+  border-radius: 3px;
 `

package/themes/original/src/components/BusinessItemAccordion/index.tsx

@@ -17,6 +17,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const {
 		cart,
 		moment,
+    singleBusiness,
 		handleClearProducts
 	} = props
 
@@ -29,7 +30,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
 
-	const [isActive, setActiveState] = useState(false)
+	const [isActive, setActiveState] = useState(!!singleBusiness)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)

package/themes/original/src/components/Cart/index.tsx

@@ -113,6 +113,15 @@ const CartUI = (props: any) => {
     }
   }
 
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
   return (
     <CContainer>
       {openUpselling && (
@@ -130,6 +139,7 @@ const CartUI = (props: any) => {
       )}
       <BusinessItemAccordion
         cart={cart}
+        singleBusiness={props.singleBusiness}
         moment={momentFormatted}
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
@@ -191,7 +201,7 @@ const CartUI = (props: any) => {
               cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
                 <OSTable key={fee?.id}>
                   <OSRow>
-                    <OText numberOfLines={1}>
+                    <OText numberOfLines={1} size={12} lineHeight={18}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
@@ -203,6 +213,15 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
+            {cart?.service_fee > 0 && !cart?.fees?.length && (
+              <OSTable>
+                <OText size={12} lineHeight={18}>
+                  {t('SERVICE_FEE', 'Service Fee')}
+                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
+                </OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
+              </OSTable>
+            )}
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -223,15 +242,14 @@ const CartUI = (props: any) => {
                 <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
               </OSTable>
             )}
-            {cart?.service_fee > 0 && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
+            {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
+              <OSTable key={event.id}>
+                <OText size={12} numberOfLines={1}>
+                  {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
                 </OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
+                <OText size={12}>-{parsePrice(event.amount)}</OText>
               </OSTable>
-            )}
+            ))}
             {isCouponEnabled && !isCartPending && (
               <OSTable>
                 <OSCoupon>
@@ -249,7 +267,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.balance ?? cart?.total)}
                 </OText>
               </OSTable>
             </OSTotal>

package/themes/original/src/components/CartContent/index.tsx

@@ -30,6 +30,7 @@ export const CartContent = (props: any) => {
 							{cart.products.length > 0 && (
 								<>
 									<Cart
+                    singleBusiness={props.singleBusiness}
                     isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
                     cartuuid={cart.uuid}

package/themes/original/src/components/Checkout/index.tsx

@@ -137,7 +137,7 @@ const CheckoutUI = (props: any) => {
 
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
-			value: option?.id, key: option?.id, label: option?.name
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
 		}
 	})
 

package/themes/original/src/components/Messages/index.tsx

@@ -12,6 +12,34 @@ import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+const ORDER_STATUS: any = {
+	0: 'ORDER_STATUS_PENDING',
+	1: 'ORDERS_COMPLETED',
+	2: 'ORDER_REJECTED',
+	3: 'ORDER_STATUS_IN_BUSINESS',
+	4: 'ORDER_READY',
+	5: 'ORDER_REJECTED_RESTAURANT',
+	6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+	7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+	8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+	9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+	10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+	11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+	12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+	13: 'PREORDER',
+	14: 'ORDER_NOT_READY',
+	15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+	16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+	17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+	18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
+
+
 const MessagesUI = (props: MessagesParams) => {
 	const {
 		type,
@@ -94,58 +122,6 @@ const MessagesUI = (props: MessagesParams) => {
 		});
 	};
 
-	const getStatus = (status: number) => {
-
-		switch (status) {
-			case 0:
-				return 'ORDER_STATUS_PENDING'
-			case 1:
-				return 'ORDERS_COMPLETED'
-			case 2:
-				return 'ORDER_REJECTED'
-			case 3:
-				return 'ORDER_STATUS_IN_BUSINESS'
-			case 4:
-				return 'ORDER_READY'
-			case 5:
-				return 'ORDER_REJECTED_RESTAURANT'
-			case 6:
-				return 'ORDER_STATUS_CANCELLEDBYDRIVER'
-			case 7:
-				return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT'
-			case 8:
-				return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER'
-			case 9:
-				return 'ORDER_PICKUP_COMPLETED_BY_DRIVER'
-			case 10:
-				return 'ORDER_PICKUP_FAILED_BY_DRIVER'
-			case 11:
-				return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER'
-			case 12:
-				return 'ORDER_DELIVERY_FAILED_BY_DRIVER'
-			case 13:
-				return 'PREORDER'
-			case 14:
-				return 'ORDER_NOT_READY'
-			case 15:
-				return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER'
-			case 16:
-				return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER'
-			case 17:
-				return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER'
-			case 18:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS'
-			case 19:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER'
-			case 20:
-				return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
-			case 21:
-				return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
-			default:
-				return status
-		}
-	}
-
 	const onSubmit = (values: any) => {
 		handleSend && handleSend()
 		setImage && setImage(null)
@@ -154,14 +130,18 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
+		  ?
+		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
+			filterSpecialStatus.includes(message.change.attribute) ? 
+			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
+			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+		  }`
+		  : message.change.new
 			?
-			`${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(getStatus(parseInt(message.change.old, 10)))} ${t('TO', 'to')} ${t(getStatus(parseInt(message.change.new, 10)))}`
-			: message.change.new
-				?
-				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-				:
-				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	}
+			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+			:
+			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	  }
 
 	useEffect(() => {
 		let newMessages: Array<any> = []

package/themes/original/src/components/OrderDetails/index.tsx

@@ -894,6 +894,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           orderId={order?.id}
           messages={messages}
           order={order}
+          business={openModalForBusiness}
+          driver={openModalForDriver}
           setMessages={setMessages}
           onClose={handleCloseModal}
         />

package/themes/original/src/components/OrderSummary/index.tsx

@@ -177,6 +177,14 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
+              {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
+                <OSTable key={event.id}>
+                  <OText size={12} numberOfLines={1}>
+                    {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
+                  </OText>
+                  <OText size={12}>-{parsePrice(event.amount)}</OText>
+                </OSTable>
+              ))}
               {isCouponEnabled && !isCartPending && (
                 <View>
                   <View style={{ paddingVertical: 5 }}>
@@ -194,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.total)}
+                      {parsePrice(cart?.balance ?? cart?.total)}
                     </OText>
                   </OSTable>
                 </View>
@@ -232,52 +240,6 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </OSTable>
               )}
-              {cart?.payment_events?.length > 0 && (
-                <View
-                  style={{
-                    width: '100%',
-                    marginTop: 20
-                  }}
-                >
-                  {cart?.payment_events?.map((event: any) => (
-                    <View
-                      key={event.id}
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        marginBottom: 10
-                      }}
-                    >
-                      <OText>
-                        {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
-                      </OText>
-                      <OText>
-                        -{parsePrice(event.amount)}
-                      </OText>
-                    </View>
-                  ))}
-                    <View
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      justifyContent: 'space-between',
-                      marginBottom: 10
-                    }}
-                  >
-                    <OText
-                      weight={'bold'}
-                    >
-                      {t('TOTAL_TO_PAY', 'Total to pay')}
-                    </OText>
-                    <OText
-                      weight={'bold'}
-                    >
-                      {parsePrice(cart?.balance)}
-                    </OText>
-                  </View>
-                </View>
-              )}
             </OSBill>
           )}
           <OModal