ordering-ui-react-native 0.12.8 → 0.12.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.8",
+  "version": "0.12.12",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -100,6 +100,7 @@
     "react-native-snap-carousel": "^3.9.1",
     "react-native-sound": "^0.11.1",
     "react-native-swipe-gestures": "^1.0.5",
+    "react-native-swiper": "^1.6.0",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",

package/src/components/Account/index.tsx

@@ -73,8 +73,8 @@ const AccountUI = (props: AccountParams) => {
         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) {
+          const url = `data:${response.assets[0].type};base64,${response.assets[0].base64}`
           handleButtonUpdateClick(null, true, url);
         } else {
           showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));

package/src/config.json

@@ -2,9 +2,9 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "reactdemo",
+  "project": "jorgev4",
   "api": {
-    "url": "https://apiv4.ordering.co",
+    "url": "https://apiv4-staging.ordering.co",
     "language": "en",
     "version": "v400"
   },

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -75,12 +75,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const showFloatButtonsPickUp: any = {
     8: true,
     3: true,
-    4: true,
     18: true
   };
 
   const showFloatButtonsAcceptOrReject: any = {
     0: true,
+    4: true,
     7: true,
   };
 
@@ -382,7 +382,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           {showFloatButtonsPickUp[order?.status] && (
             <FloatingButton
               disabled={loading}
-              btnText={t('FAILED', 'Failed')}
+              btnText={t('PICKUP_FAILED', 'Pickup failed')}
               isSecondaryBtn={false}
               secondButtonClick={() =>
                 handleChangeOrderStatus && handleChangeOrderStatus(9)
@@ -401,7 +401,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <FloatingButton
                 disabled={loading}
-                btnText={t('FAILED', 'Failed')}
+                btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                 isSecondaryBtn={false}
                 secondButtonClick={() =>
                   handleChangeOrderStatus && handleChangeOrderStatus(11)

package/themes/business/src/components/OrdersOption/index.tsx

@@ -41,10 +41,11 @@ const tabsList: any = {
 };
 
 const tabsListText: any = {
-  1: 'pending',
-  2: 'inProgress',
-  3: 'completed',
-  4: 'cancelled'
+  1: 'logistic_pending',
+  2: 'pending',
+  3: 'inProgress',
+  4: 'completed',
+  5: 'cancelled'
 };
 
 const swipeConfig = {
@@ -86,7 +87,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       type: ''
     }
   }
-
+  console.log('ORDERS', ordersGroup)
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
@@ -167,7 +168,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const [tagsState, setTags] = useState<any>({ values: [] })
 
-  const tagsList = ordersGroup[currentTabSelected].defaultFilter ?? []
+  const tagsList = ordersGroup[currentTabSelected]?.defaultFilter ?? []
   const currentOrdersGroup = ordersGroup[currentTabSelected]
 
   const isEqual = (array1: any, array2: any) => {
@@ -441,8 +442,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             />
           }
         >
-          {!currentOrdersGroup.error?.length &&
-            currentOrdersGroup.orders?.length > 0 &&
+          {!currentOrdersGroup?.error?.length &&
+            currentOrdersGroup?.orders?.length > 0 &&
           (
             <PreviousOrders
               orders={currentOrdersGroup.orders}
@@ -452,8 +453,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             />
           )}
 
-          {(currentOrdersGroup.loading ||
-            currentOrdersGroup.pagination.total === null) &&
+          {(currentOrdersGroup?.loading ||
+            currentOrdersGroup?.pagination?.total === null) &&
           (
             <>
               <View>
@@ -486,11 +487,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             </>
           )}
 
-          {!currentOrdersGroup.error?.length &&
-            !currentOrdersGroup.loading &&
-            currentOrdersGroup.pagination.totalPages &&
-            currentOrdersGroup.pagination.currentPage < currentOrdersGroup.pagination.totalPages &&
-            currentOrdersGroup.orders.length > 0 &&
+          {!currentOrdersGroup?.error?.length &&
+            !currentOrdersGroup?.loading &&
+            currentOrdersGroup?.pagination?.totalPages &&
+            currentOrdersGroup?.pagination?.currentPage < currentOrdersGroup?.pagination?.totalPages &&
+            currentOrdersGroup?.orders?.length > 0 &&
           (
             <OButton
               onClick={handleLoadMore}
@@ -503,13 +504,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             />
           )}
 
-          {!currentOrdersGroup.loading &&
-            (currentOrdersGroup.error?.length ||
-            currentOrdersGroup.orders?.length === 0) &&
+          {!currentOrdersGroup?.loading &&
+            (currentOrdersGroup?.error?.length ||
+            currentOrdersGroup?.orders?.length === 0) &&
           (
             <NotFoundSource
               content={
-                !currentOrdersGroup.error?.length
+                !currentOrdersGroup?.error?.length
                   ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
                   : currentOrdersGroup?.error[0]?.message ||
                     currentOrdersGroup?.error[0] ||
@@ -686,24 +687,30 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     tabs: [
       {
         key: 0,
+        text: t('Logistics', 'Logistics'),
+        tags: [0],
+        title: 'Logistics'
+      },
+      {
+        key: 1,
         text: t('PENDING', 'Pending'),
-        tags: props?.orderGroupStatusCustom?.inProgress ?? [0, 13],
+        tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
         title: 'pending'
       },
       {
-        key: 1,
+        key: 2,
         text: t('IN_PROGRESS', 'In Progress'),
         tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21],
         title: 'inProgress',
       },
       {
-        key: 2,
+        key: 3,
         text: t('COMPLETED', 'Completed'),
         tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
         title: 'completed',
       },
       {
-        key: 3,
+        key: 4,
         text: t('CANCELLED', 'Cancelled'),
         tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
         title: 'cancelled',

package/themes/original/index.tsx

@@ -14,6 +14,7 @@ import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderDetails } from './src/components/OrderDetails';
+import { OrderProgress } from './src/components/OrderProgress';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { UserProfile } from './src/components/UserProfile';
@@ -67,6 +68,7 @@ export {
 	MomentOption,
 	OrdersOption,
 	OrderDetails,
+	OrderProgress,
 	UserProfileForm,
 	ReviewOrder,
 	UserProfile,

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

@@ -25,6 +25,7 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
+	OrderProgressWrapper
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
@@ -38,6 +39,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
 import { getTypesText } from '../../utils';
+import { OrderProgress } from '../OrderProgress';
 
 const PIXELS_TO_SCROLL = 1000;
 
@@ -224,6 +226,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
+			<OrderProgressWrapper>
+				<OrderProgress
+					{...props}
+				/>
+			</OrderProgressWrapper>
 			{featuredBusiness && featuredBusiness.length > 0 && (
 				<FeaturedWrapper>
 					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>

package/themes/original/src/components/BusinessesListing/styles.tsx

@@ -67,4 +67,9 @@ export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
 	height: 220px;
 	paddingVertical: 30px;
-`;
+`;
+
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+	padding-horizontal: 40px;
+`

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

@@ -0,0 +1,208 @@
+import React from 'react'
+import {
+  OrderList,
+  useLanguage,
+  useUtils
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import moment from 'moment';
+import { OText } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { View, StyleSheet, TouchableOpacity } from 'react-native'
+import { Placeholder, Fade } from "rn-placeholder";
+import FastImage from 'react-native-fast-image'
+import {
+  ProgressContentWrapper,
+  ProgressBar,
+  TimeWrapper,
+  ProgressTextWrapper,
+  OrderInfoWrapper
+} from './styles'
+
+const OrderProgressUI = (props: any) => {
+	const {
+		orderList,
+    navigation
+	} = props
+
+	const theme = useTheme();
+
+	const [, t] = useLanguage()
+	const { loading, error, orders: values } = orderList
+  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const imageFails = theme.images.general.emptyActiveOrders
+
+  const styles = StyleSheet.create({
+    main: {
+      flexDirection: 'column',
+      backgroundColor: '#FFFFFF',
+      flex: 1,
+      padding: 15,
+      borderRadius: 8,
+      shadowOffset: {
+        width: 1,
+        height: 1
+      },
+      shadowColor: '#000',
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 2
+    },
+    logoWrapper: {
+      overflow: 'hidden',
+      backgroundColor: 'white',
+      borderRadius: 8,
+			shadowColor: '#000000',
+			shadowOffset: { width: 1, height: 1 },
+			shadowOpacity: 0.1,
+			shadowRadius: 1,
+			elevation: 3
+    },
+    logo: {
+      width: 50,
+      height: 50,
+      borderRadius: 8,
+      resizeMode: 'stretch',
+    },
+    navigationButton: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+	});
+
+	const getOrderStatus = (s: any) => {
+		const status = parseInt(s)
+    const orderStatus = [
+      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending'), slug: 'PENDING', percentage: 25 },
+      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed'), slug: 'COMPLETED', percentage: 100 },
+      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected'), slug: 'REJECTED', percentage: 0 },
+      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business'), slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
+      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed'), slug: 'PREPARATION_COMPLETED', percentage: 70 },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business'), slug: 'REJECTED_BY_BUSINESS', percentage: 0 },
+      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver'), slug: 'REJECTED_BY_DRIVER', percentage: 0 },
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business'), slug: 'ACCEPTED_BY_BUSINESS', percentage: 35 },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver'), slug: 'ACCEPTED_BY_DRIVER', percentage: 45 },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver'), slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 80 },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver'), slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver'), slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver'), slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
+      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder'), slug: 'PREORDER', percentage: 0 },
+      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready'), slug: 'ORDER_NOT_READY', percentage: 65 },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer'), slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
+      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer'), slug: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER', percentage: 0 },
+      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer'), slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER', percentage: 0 },
+      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', percentage: 55 },
+      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', percentage: 90 },
+      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 }
+    ]
+
+		const objectStatus = orderStatus.find((o) => o.key === status)
+
+		return objectStatus && objectStatus
+	}
+
+  const convertDiffToHours = (time: any, order: any) => {
+    const deliveryTime = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
+    const [hour, minute] = time.split(':')
+    const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
+    const returnedDate = moment(new Date(deliveryTime)).add(result, 'minutes').format('hh:mm A')
+    return returnedDate
+  }
+
+  const handleGoToOrder = (index: string) => {
+    navigation && navigation.navigate(index)
+  }
+
+	return (
+		<>
+      {orderList?.loading && <Placeholder height={150} Animation={Fade} />}
+      {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order: any) => (
+        <View style={styles.main} key={order.id}>
+          <OrderInfoWrapper style={{ flex: 1 }}>
+            <View style={styles.logoWrapper}>
+              <FastImage
+                style={{ width: 50, height: 50 }}
+                source={{
+                    uri: optimizeImage(order?.business?.logo, 'h_50,c_limit'),
+                    priority: FastImage.priority.normal,
+                }}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            </View>
+            <View style={{
+              paddingHorizontal: 10,
+              flex: 1
+              }}
+            >
+              <OText
+                size={13}
+                style={{
+                  fontWeight: 'bold',
+                  marginBottom: 3
+                }}
+              >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
+              <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+              <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
+                <View style={styles.navigationButton}>
+                  <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
+                  <IconAntDesign
+                    name='arrowright'
+                    color={theme.colors.primary}
+                    size={13}
+                    style={{ marginHorizontal: 5 }}
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </OrderInfoWrapper>
+          <View style={{ flex: 1 }}>
+            <ProgressContentWrapper>
+              <ProgressBar style={{ width: getOrderStatus(order.status)?.percentage ? `${getOrderStatus(order.status)?.percentage}%` : '0%' }} />
+            </ProgressContentWrapper>
+            <ProgressTextWrapper>
+              <OText size={12}>{getOrderStatus(order.status)?.value}</OText>
+              <TimeWrapper>
+                <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                <OText size={11}>
+                  {order?.delivery_datetime_utc
+                    ? parseTime(order?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                    : parseTime(order?.delivery_datetime, { utc: false })}
+                    &nbsp;-&nbsp;
+                  {convertDiffToHours(order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time, order)}
+                </OText>
+              </TimeWrapper>
+            </ProgressTextWrapper>
+          </View>
+        </View>
+      ))}
+      {!orderList?.loading && orderList?.orders?.length === 0 && (
+        <NotFoundSource
+          image={imageFails}
+          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+          conditioned
+        />
+      )}
+		</>
+	)
+}
+
+export const OrderProgress = (props: any) => {
+  const orderProgressProps = {
+    ...props,
+    UIComponent: OrderProgressUI,
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21],
+    useDefualtSessionManager: true,
+    paginationSettings: {
+      initialPage: 1,
+      pageSize: 1,
+      controlType: 'infinity'
+    }
+  }
+
+	return <OrderList {...orderProgressProps} />
+
+}

package/themes/original/src/components/OrderProgress/styles.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components/native'
+
+export const ProgressContentWrapper = styled.View`
+  height: 12px;
+  background: #F8F9FA;
+  flex: 1;
+`
+
+export const ProgressBar = styled.View`
+  height: 12px;
+  background: ${(props: any) => props.theme.colors.primary};
+`
+
+export const TimeWrapper = styled.View`
+  flex-direction: column;
+`
+
+export const ProgressTextWrapper = styled.View`
+  margin-top: 7px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const OrderInfoWrapper = styled.View`
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 15px;
+`