ordering-ui-react-native 0.14.7 → 0.14.8

package/package.json

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

package/src/components/BusinessProductsList/index.tsx

@@ -34,7 +34,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id && (
-        categoryState.products?.map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
           <SingleProductCard
             key={product.id}
             isSoldOut={(product.inventoried && !product.quantity)}
@@ -51,7 +51,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <>
               <OText size={18} weight='bold' mBottom={10}>{t('FEATURED', 'Featured')}</OText>
               <>
-                {categoryState.products?.map((product: any) => product.featured && (
+                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => product.featured && (
                   <SingleProductCard
                     key={product.id}
                     isSoldOut={(product.inventoried && !product.quantity)}
@@ -77,7 +77,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     <OText size={18} weight='bold' mBottom={10}>{category.name}</OText>
                     <>
                       {
-                        products.map((product: any) => (
+                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
                           <SingleProductCard
                             key={product.id}
                             isSoldOut={product.inventoried && !product.quantity}

package/src/components/ProductForm/index.tsx

@@ -133,9 +133,8 @@ export const ProductOptionsUI = (props: any) => {
                   <>
                     <View style={{ flexDirection: 'column', width: '100%' }}>
                       <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
-                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
-                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
+                      {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
+                        <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
                             ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
                             && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
@@ -147,6 +146,12 @@ export const ProductOptionsUI = (props: any) => {
                             && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
                           }
                         </OText>
+                      )}
+                      <View style={{ flexDirection: 'row', marginBottom: 10}}>
+                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                        {product?.offer_price && (
+                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+                        )}
                       </View>
                     </View>
                   </>
@@ -369,6 +374,13 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
     minHeight: 200,
     zIndex: 0
+  },
+  regularPriceStyle: {
+    fontSize: 14,
+    color: '#808080',
+    textDecorationLine: 'line-through',
+    marginLeft: 7,
+    marginRight: 7
   }
 })
 

package/src/components/SingleProductCard/index.tsx

@@ -4,7 +4,8 @@ import { SingleProductCardParams } from '../../types'
 import {
   CardContainer,
   CardInfo,
-  SoldOut
+  SoldOut,
+  PricesContainer
 } from './styles'
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
@@ -40,6 +41,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       width: 75,
       height: 75,
       borderRadius: 10,
+    },
+    regularPriceStyle: {
+      fontSize: 12,
+      color: '#808080',
+      textDecorationLine: 'line-through',
+      marginLeft: 7,
+      marginRight: 7
     }
   })
 
@@ -76,7 +84,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
-        <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+        <PricesContainer>
+          <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+          {product?.offer_price && (
+            <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+          )}
+        </PricesContainer>
       </CardInfo>
 
       {(isSoldOut || maxProductQuantity <= 0) && (

package/src/components/SingleProductCard/styles.tsx

@@ -22,3 +22,7 @@ export const SoldOut = styled.View`
   bottom: 5px;
   right: 5px;
 `
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`

package/themes/uber-eats/src/components/Messages/index.tsx

@@ -90,8 +90,9 @@ const MessagesUI = (props: MessagesParams) => {
         console.log('ImagePicker Error: ', response.errorMessage);
         showToast(ToastType.Error, response.errorMessage);
       } else {
-        if (response.uri) {
-          const url = `data:${response.type};base64,${response.base64}`
+        if (response?.assets?.length > 0) {
+          const image = response?.assets[0]
+          const url = `data:${image.type};base64,${image.base64}`
           setImage && setImage(url);
         } else {
           showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
@@ -109,7 +110,7 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${message.change.attribute} ${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')} ${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 : ''}`
@@ -233,11 +234,11 @@ const MessagesUI = (props: MessagesParams) => {
     <InputToolbar
       {...props}
       containerStyle={{
-        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-        flexDirection: 'column-reverse'
+        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+        flexDirection: Platform.OS === 'ios' && isKeyboardShow ? 'column' : 'column-reverse'
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
-      renderAccessory={() => renderAccessory()}
+      renderAccessory={() => !isKeyboardShow && renderAccessory()}
     />
   )
 

package/themes/uber-eats/src/components/shared/OBottomPopup.tsx

@@ -76,18 +76,18 @@ const OBottomPopup = (props: Props) => {
       visible={open}
       onRequestClose={() => onClose()}
     >
-      <View style={styles.container}>
-        <TouchableWithoutFeedback
-          style={styles.touchableOutsideStyle}
-          onPress={() => onClose()}
-        >
-          <View style={styles.touchableOutsideStyle} />
-        </TouchableWithoutFeedback>
-        <View style={styles.bottomContainer}>
-          <KeyboardView
-            enabled
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      <KeyboardView
+        enabled
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <View style={styles.container}>
+          <TouchableWithoutFeedback
+            style={styles.touchableOutsideStyle}
+            onPress={() => onClose()}
           >
+            <View style={styles.touchableOutsideStyle} />
+          </TouchableWithoutFeedback>
+          <View style={styles.bottomContainer}>
             <ScrollView showsVerticalScrollIndicator={false} >
               {customHeaderShow ? (
                 <View style={styles.customHeaderStyle}>
@@ -108,9 +108,9 @@ const OBottomPopup = (props: Props) => {
               )}
               {children}
             </ScrollView>
-          </KeyboardView>
+          </View>
         </View>
-      </View>
+      </KeyboardView>
     </Modal>
   )
 }