ordering-ui-react-native 0.12.10 → 0.12.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.10",
+  "version": "0.12.14",
   "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/components/GoogleMap/index.tsx

@@ -41,7 +41,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to'
   }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
+  let MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
     return {
       latitude: location.lat,
       longitude: location.lng
@@ -176,6 +176,17 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     return () => clearInterval(interval)
   }, [locations])
 
+  useEffect(() => {
+    if(!locations) return
+    locations[0] = {...locations[0], lat: location.lat, lng: location.lng}
+    MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
+      return {
+        latitude: location.lat,
+        longitude: location.lng
+      }
+    })
+  }, [location])
+
   return (
     <>
       <MapView

package/src/components/OrderDetails/index.tsx

@@ -208,7 +208,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList])
 
-  const locations = [
+  let locations = [
     { ...order?.driver?.location, title: t('DRIVER', 'Driver'), icon: order?.driver?.photo || 'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png' },
     { ...order?.business?.location, title: order?.business?.name, icon: order?.business?.logo || theme.images.dummies.businessLogo },
     { ...order?.customer?.location, title: t('YOUR_LOCATION', 'Your Location'), icon: order?.customer?.photo || 'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png' }
@@ -216,7 +216,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation
+      locations[0] = {...locations[0], lat: driverLocation.lat, lng: driverLocation.lng}
     }
   }, [driverLocation])
 
@@ -361,9 +361,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
                     <Map>
                       <GoogleMap
-                        location={order?.driver?.location}
+                        location={driverLocation ?? order?.driver?.location}
                         locations={locations}
-                        readOnly
                       />
                     </Map>
                   )}

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/AcceptOrRejectOrder/index.tsx

@@ -111,7 +111,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       openTimerIOnput();
     }
 
-    if (actions && action === 'reject') {
+    if (actions && (action === 'reject' || action === 'failed')) {
       openTextTareaOInput();
     }
   }, []);
@@ -178,6 +178,10 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         comment: comments,
         status: 6,
       },
+      failedByDriver: {
+        comment: comments,
+        status: 12
+      }
     };
 
     if (actions && action === 'accept') {
@@ -186,6 +190,9 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     if (actions && action === 'reject') {
       bodyToSend = orderStatus[actions.reject];
     }
+    if(actions && action === 'failed'){
+      bodyToSend = orderStatus[actions.failed]
+    }
 
     bodyToSend.id = orderId;
 
@@ -330,7 +337,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
               </Timer>
             </View>
           )}
-            
           <TimeField
             ref={timerRef}
             keyboardType="numeric"
@@ -346,11 +352,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             onEndEditing={handleFixTime}
           />
 
-          {action === 'reject' && (
+          {(action === 'reject' || action === 'failed') && (
             <Comments ref={viewRef}>
               <OTextarea
                 textTareaRef={textTareaRef}
-                autoFocus={actions && action === 'reject'}
+                autoFocus={actions && (action === 'reject' || action === 'failed')}
                 onFocus={handleFocus}
                 placeholder={t(
                   'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',

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

@@ -42,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
   } = useLocation();
 
   const location = { lat: userLocation.latitude, lng: userLocation.longitude }
-
+  const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -222,8 +222,8 @@ const MapViewComponent = (props: MapViewParams) => {
               initialRegion={{
                 latitude: initialPosition.latitude,
                 longitude: initialPosition.longitude,
-                latitudeDelta: 0.001,
-                longitudeDelta: 0.001 * ASPECT_RATIO,
+                latitudeDelta: haveOrders ? 0.01 : 0.1,
+                longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
               style={{ flex: 1 }}
               zoomTapEnabled
@@ -241,7 +241,7 @@ const MapViewComponent = (props: MapViewParams) => {
                     orderIds={marker.map((order: any) => order.id).join(', ')}
                   />
                 ))}
-                {Object.values(customerMarkerGroups).map((marker: any) => (
+                {Object.values(customerMarkerGroups).map((marker: any) =>  (
                   <RenderMarker
                     key={marker[0]?.customer_id}
                     marker={marker[0]}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession } from 'ordering-components/native'
+import { useEvent, useLanguage, useUtils, useSession, useApi } from 'ordering-components/native'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
@@ -7,7 +7,7 @@ import Icon from 'react-native-vector-icons/Feather'
 import { NotificationContainer } from './styles'
 import Sound from 'react-native-sound'
 import moment from 'moment'
-
+import { useLocation } from '../../hooks/useLocation'
 Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
@@ -16,9 +16,10 @@ export const NewOrderNotification = (props: any) => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ user }] = useSession()
+  const [{ user, token }] = useSession()
+  const [ordering] = useApi()
   const [{ getTimeAgo }] = useUtils()
-
+  const { getCurrentLocation } = useLocation();
   const [modalOpen, setModalOpen] = useState(false)
   const [newOrderId, setNewOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
@@ -33,15 +34,21 @@ export const NewOrderNotification = (props: any) => {
 
 
   const handlePlayNotificationSound = () => {
+    let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
         if (success) {
           console.log('successfully finished playing');
+          times = times + 1
         } else {
           console.log('playback failed due to audio decoding errors');
         }
       })
       setSoundTimeout(_timeout)
+      if (times === 3) {
+        clearInterval(_timeout)
+        clearInterval(soundTimeout)
+      }
     }, 2500)
   }
 
@@ -64,9 +71,16 @@ export const NewOrderNotification = (props: any) => {
     }
   }, [handleNotification])
 
-  
-  const handleUpdateOrder = useCallback((order: any) => {
+  const handleUpdateOrder = useCallback(async (order: any) => {
     if (order?.driver) {
+      const location = await getCurrentLocation()
+      await fetch(`${ordering.root}/users/${user.id}/locations`, {
+        method: 'POST',
+        body: JSON.stringify({
+          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+        }),
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+      })
       const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
       if (assignedTimeDiff === 'a few seconds ago') {
         clearInterval(soundTimeout)

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

@@ -75,13 +75,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const showFloatButtonsPickUp: any = {
     8: true,
     3: true,
-    4: true,
-    18: true
+    18: true,
   };
 
   const showFloatButtonsAcceptOrReject: any = {
     0: true,
+    4: true,
     7: true,
+    14: true
   };
 
   const marginContainer: any = {
@@ -295,7 +296,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Pickup>
               )}
               {(order?.status === 3) && order?.delivery_type === 1 && (
-                <View style={{paddingVertical: 20, marginBottom: 20}}>
+                <View style={{ paddingVertical: 20, marginBottom: 20 }}>
                   <OButton
                     style={styles.btnPickUp}
                     textStyle={{ color: theme.colors.white }}
@@ -382,13 +383,13 @@ 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)
               }
               firstButtonClick={() =>
-                handleChangeOrderStatus && handleChangeOrderStatus(12)
+                handleViewActionOrder && handleViewActionOrder('failed')
               }
               secondBtnText={t('PICKUP_COMPLETE', 'Pickup complete')}
               secondButton={true}
@@ -401,13 +402,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <FloatingButton
                 disabled={loading}
-                btnText={t('FAILED', 'Failed')}
+                btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                 isSecondaryBtn={false}
                 secondButtonClick={() =>
                   handleChangeOrderStatus && handleChangeOrderStatus(11)
                 }
                 firstButtonClick={() =>
-                  handleChangeOrderStatus && handleChangeOrderStatus(12)
+                  handleViewActionOrder && handleViewActionOrder('failed')
                 }
                 secondBtnText={t('DELIVERY_COMPLETE', 'Delivery complete')}
                 secondButton={true}

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

@@ -49,6 +49,9 @@ export const OrderContentComponent = (props: OrderContent) => {
         textBold: {
             fontWeight: '600',
         },
+        textLink: {
+          color: '#365CC7'
+        }
     })
     return (
         <OrderContent>
@@ -67,6 +70,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`mailto:${order?.business?.email}`}
                 shorcut={order?.business?.email}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -77,6 +81,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.business?.cellphone}`}
                 shorcut={`${order?.business?.cellphone}`}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -87,6 +92,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.business?.phone}`}
                 shorcut={order?.business?.phone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -100,6 +106,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.business?.address}`,
                 })}
                 shorcut={order?.business?.address}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -113,6 +120,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.business?.address_notes}`,
                 })}
                 shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -165,6 +173,8 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`mailto:${order?.customer?.email}`}
                 shorcut={order?.customer?.email}
+                TextStyle={styles.textLink}
+
               />
             </View>
           )}
@@ -175,6 +185,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.customer?.cellphone}`}
                 shorcut={order?.customer?.cellphone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -185,6 +196,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 PressStyle={styles.linkWithIcons}
                 url={`tel:${order?.customer?.phone}`}
                 shorcut={order?.customer?.phone}
+                TextStyle={styles.textLink}
               />
             </View>
           )}
@@ -198,6 +210,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
                 shorcut={order?.customer?.address}
+                TextStyle={styles.textLink}
               />
             </View>
           )}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform } from 'react-native';
 import { useLanguage, useUtils, OrderListGroups } from 'ordering-components/native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -167,7 +167,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) => {
@@ -191,7 +191,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       }
     })
     const dateRange = calculateDate(search.date.type, search.date.from, search.date.to)
-    onFiltered && onFiltered({...search, date: {...dateRange}})
+    onFiltered && onFiltered({ ...search, date: { ...dateRange } })
     setOpenModal(false)
   }
 
@@ -248,29 +248,29 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     switch (type) {
       case 'today':
         const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${date} 00:00:00`, to: `${date} 23:59:59`}
+        return { from: `${date} 00:00:00`, to: `${date} 23:59:59` }
       case 'yesterday':
         const yesterday = new Date()
         yesterday.setDate(yesterday.getDate() - 1)
         const start1 = parseDate(yesterday, { outputFormat: 'MM/DD/YYYY' })
         const end1 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start1} 00:00:00`, to: `${end1} 23:59:59`}
+        return { from: `${start1} 00:00:00`, to: `${end1} 23:59:59` }
       case 'last_7days':
         const last_7days = new Date()
         last_7days.setDate(last_7days.getDate() - 6)
         const start7 = parseDate(last_7days, { outputFormat: 'MM/DD/YYYY' })
         const end7 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start7} 00:00:00`, to: `${end7} 23:59:59`}
+        return { from: `${start7} 00:00:00`, to: `${end7} 23:59:59` }
       case 'last_30days':
         const last_30days = new Date()
         last_30days.setDate(last_30days.getDate() - 29)
         const start30 = parseDate(last_30days, { outputFormat: 'MM/DD/YYYY' })
         const end30 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start30} 00:00:00`, to: `${end30} 23:59:59`}
+        return { from: `${start30} 00:00:00`, to: `${end30} 23:59:59` }
       default:
         const start = from ? `${parseDate(from, { outputFormat: 'MM/DD/YYYY' })} 00:00:00` : ''
         const end = to ? `${parseDate(to, { outputFormat: 'MM/DD/YYYY' })} 23:59:59` : ''
-        return {from: start, to: end}
+        return { from: start, to: end }
     }
   }
 
@@ -310,22 +310,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </IconWrapper>
       </View>
       {isBusinessApp && (
-        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight:40}}>
-            <OIcon
-              src={theme.images.general.information}
-              width={12}
-              height={12}
-              color={theme.colors.skyBlue}
-              style={{marginRight: 5}}
-            />
-            <OText size={12}>
-              {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
+          <OIcon
+            src={theme.images.general.information}
+            width={12}
+            height={12}
+            color={theme.colors.skyBlue}
+            style={{ marginRight: 5 }}
+          />
+          <OText size={12}>
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+          </OText>
+          <TouchableOpacity onPress={() => { Linking.openURL('https://new-admin.tryordering.com/') }}>
+            <OText size={12} color={theme.colors.skyBlue}>
+              {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
             </OText>
-            <TouchableOpacity onPress={() => {Linking.openURL('https://new-admin.tryordering.com/')}}>
-                <OText size={12} color={theme.colors.skyBlue}>
-                  {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
-                </OText>
-            </TouchableOpacity>
+          </TouchableOpacity>
         </View>
       )}
       <FiltersTab>
@@ -405,7 +405,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
                 isSelected={
                   currentOrdersGroup.currentFilter.includes(key) &&
-                  !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                    !isEqual(currentOrdersGroup.currentFilter, tagsList)
                     ? theme.colors.primary
                     : theme.colors.tabBar
                 }>
@@ -413,7 +413,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                   style={styles.tag}
                   color={
                     currentOrdersGroup.currentFilter.includes(key) &&
-                    !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                      !isEqual(currentOrdersGroup.currentFilter, tagsList)
                       ? theme.colors.white
                       : theme.colors.black
                   }>
@@ -443,86 +443,86 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         >
           {!currentOrdersGroup.error?.length &&
             currentOrdersGroup.orders?.length > 0 &&
-          (
-            <PreviousOrders
-              orders={currentOrdersGroup.orders}
-              onNavigationRedirect={onNavigationRedirect}
-              getOrderStatus={getOrderStatus}
-              handleClickOrder={handleClickOrder}
-            />
-          )}
-
-          {(currentOrdersGroup.loading ||
-            currentOrdersGroup.pagination.total === null) &&
-          (
-            <>
-              <View>
-                {[...Array(5)].map((_, i) => (
-                  <Placeholder key={i} Animation={Fade}>
-                    <View
-                      style={{
-                        width: '100%',
-                        flexDirection: 'row',
-                        marginBottom: 10,
-                      }}>
-                      <PlaceholderLine
-                        width={IS_PORTRAIT ? 22 : 11}
-                        height={74}
+            (
+              <PreviousOrders
+                orders={currentOrdersGroup.orders}
+                onNavigationRedirect={onNavigationRedirect}
+                getOrderStatus={getOrderStatus}
+                handleClickOrder={handleClickOrder}
+              />
+            )}
+
+          {(currentOrdersGroup?.loading ||
+            currentOrdersGroup?.pagination?.total === null) &&
+            (
+              <>
+                <View>
+                  {[...Array(5)].map((_, i) => (
+                    <Placeholder key={i} Animation={Fade}>
+                      <View
                         style={{
-                          marginRight: 20,
-                          marginBottom: 20,
-                          borderRadius: 7.6,
-                        }}
-                      />
-                      <Placeholder>
-                        <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                        <PlaceholderLine width={50} />
-                        <PlaceholderLine width={20} />
-                      </Placeholder>
-                    </View>
-                  </Placeholder>
-                ))}
-              </View>
-            </>
-          )}
-
-          {!currentOrdersGroup.error?.length &&
-            !currentOrdersGroup.loading &&
-            currentOrdersGroup.pagination.totalPages &&
-            currentOrdersGroup.pagination.currentPage < currentOrdersGroup.pagination.totalPages &&
-            currentOrdersGroup.orders.length > 0 &&
-          (
-            <OButton
-              onClick={handleLoadMore}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
-
-          {!currentOrdersGroup.loading &&
-            (currentOrdersGroup.error?.length ||
-            currentOrdersGroup.orders?.length === 0) &&
-          (
-            <NotFoundSource
-              content={
-                !currentOrdersGroup.error?.length
-                  ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
-                  : currentOrdersGroup?.error[0]?.message ||
+                          width: '100%',
+                          flexDirection: 'row',
+                          marginBottom: 10,
+                        }}>
+                        <PlaceholderLine
+                          width={IS_PORTRAIT ? 22 : 11}
+                          height={74}
+                          style={{
+                            marginRight: 20,
+                            marginBottom: 20,
+                            borderRadius: 7.6,
+                          }}
+                        />
+                        <Placeholder>
+                          <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                          <PlaceholderLine width={50} />
+                          <PlaceholderLine width={20} />
+                        </Placeholder>
+                      </View>
+                    </Placeholder>
+                  ))}
+                </View>
+              </>
+            )}
+
+          {!currentOrdersGroup?.error?.length &&
+            !currentOrdersGroup?.loading &&
+            currentOrdersGroup?.pagination?.totalPages &&
+            currentOrdersGroup?.pagination?.currentPage < currentOrdersGroup?.pagination?.totalPages &&
+            currentOrdersGroup?.orders?.length > 0 &&
+            (
+              <OButton
+                onClick={handleLoadMore}
+                text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                imgRightSrc={null}
+                textStyle={styles.loadButtonText}
+                style={styles.loadButton}
+                bgColor={theme.colors.primary}
+                borderColor={theme.colors.primary}
+              />
+            )}
+
+          {!currentOrdersGroup?.loading &&
+            (currentOrdersGroup?.error?.length ||
+              currentOrdersGroup?.orders?.length === 0) &&
+            (
+              <NotFoundSource
+                content={
+                  !currentOrdersGroup?.error?.length
+                    ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
+                    : currentOrdersGroup?.error[0]?.message ||
                     currentOrdersGroup?.error[0] ||
                     t('NETWORK_ERROR', 'Network Error')
-              }
-              image={theme.images.general.notFound}
-              conditioned={false}
-            />
-          )}
+                }
+                image={theme.images.general.notFound}
+                conditioned={false}
+              />
+            )}
         </ScrollView>
       </View>
-    {/* </GestureRecognizer> */}
-    
+      {/* </GestureRecognizer> */}
+
       <NewOrderNotification />
       <OModal open={openModal} entireModal customClose>
         <ModalContainer
@@ -545,7 +545,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
           <OInput
             value={search.id}
-            onChange={(value: any) => setSearch({...search, id: value})}
+            onChange={(value: any) => setSearch({ ...search, id: value })}
             style={styles.inputStyle}
             placeholder={t('ORDER_NUMBER', 'Order number')}
             autoCorrect={false}
@@ -611,6 +611,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     UIComponent: OrdersOptionUI,
     useDefualtSessionManager: true,
     asDashboard: true,
+    isIos: Platform.OS === 'ios',
     orderStatus: [
       { key: 0, text: t('PENDING', 'Pending') },
       { key: 1, text: t('COMPLETED', 'Completed') },
@@ -687,7 +688,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
       {
         key: 0,
         text: t('PENDING', 'Pending'),
-        tags: props?.orderGroupStatusCustom?.inProgress ?? [0, 13],
+        tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
         title: 'pending'
       },
       {

package/themes/business/src/types/index.tsx

@@ -519,6 +519,7 @@ export interface TagsParams {
 interface actions {
   accept: string;
   reject: string;
+  failed: string;
 }
 
 interface textTranslate {

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;
+`

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

@@ -1,16 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
 	useLanguage,
 	useOrder,
-	useUtils,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
+import Swiper from 'react-native-swiper'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry } from 'react-native';
 
 import {
 	ProductHeader,
@@ -25,7 +28,7 @@ import {
 	WrapperSubOption,
 	ProductComment,
 	ProductActions,
-	ExtraOptionWrap,
+	ExtraOptionWrap
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -110,13 +113,30 @@ export const ProductOptionsUI = (props: any) => {
 			borderBottomColor: theme.colors.border,
 			justifyContent: 'center',
 		},
+		slide1: {
+			flex: 1,
+		},
+		mainSwiper : {
+			height: 258,
+		},
+		swiperButton: {
+			marginHorizontal: 30,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(255,255,255,0.3)'
+		}
 	});
 
-	const [{ parsePrice }] = useUtils();
+	const [{ parsePrice, optimizeImage }] = useUtils();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
 	const { product, loading, error } = productObject;
+	const [gallery, setGallery] = useState([])
+	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 
 	const { top, bottom } = useSafeAreaInsets();
 	const { height } = useWindowDimensions();
@@ -154,63 +174,76 @@ export const ProductOptionsUI = (props: any) => {
 		return sel[0]?.id !== undefined;
 	};
 
+	const handleChangeMainIndex = (index: number) => {
+		setThumbsSwiper(index)
+	}
+
 	const handleRedirectLogin = () => {
 		onClose();
 		navigation.navigate('Login');
 	};
 
+	useEffect(() => {
+		const productImgList: any = []
+		product?.images && productImgList.push(product.images)
+		for (const img of product?.gallery) {
+			productImgList.push(img.file)
+		}
+		setGallery(productImgList)
+	}, [product])
+
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
 	const ExtraOptions = ({ eID, options }: any) => (
-			<>
-				{product?.ingredients.length > 0 && (
-					<TouchableOpacity
-						key={`eopt_all_00`}
-						onPress={() => setSelectedOpt(-1)}
-						style={[
-							styles.extraItem,
-							{
-								borderBottomColor:
-									selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-							},
-						]}>
-						<OText
-							color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-							size={selOpt == -1 ? 14 : 12}
-							weight={selOpt == -1 ? '600' : 'normal'}>
-							{t('INGREDIENTS', 'Ingredients')}
-						</OText>
-					</TouchableOpacity>
-				)}
-				{options.map(({ id, name, respect_to }: any) => (
-					<React.Fragment key={`cont_key_${id}`}>
-						{respect_to == null && (
-							<TouchableOpacity
-								key={`eopt_key_${id}`}
-								onPress={() => setSelectedOpt(id)}
-								style={[
-									styles.extraItem,
-									{
-										borderBottomColor:
-											selOpt == id ? theme.colors.textNormal : theme.colors.border,
-									},
-								]}>
-								<OText
-									color={
-										selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-									}
-									size={selOpt == id ? 14 : 12}
-									weight={selOpt == id ? '600' : 'normal'}>
-									{name}
-								</OText>
-							</TouchableOpacity>
-						)}
-					</React.Fragment>
-				))}
-			</>
+		<>
+			{product?.ingredients.length > 0 && (
+				<TouchableOpacity
+					key={`eopt_all_00`}
+					onPress={() => setSelectedOpt(-1)}
+					style={[
+						styles.extraItem,
+						{
+							borderBottomColor:
+								selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+						},
+					]}>
+					<OText
+						color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+						size={selOpt == -1 ? 14 : 12}
+						weight={selOpt == -1 ? '600' : 'normal'}>
+						{t('INGREDIENTS', 'Ingredients')}
+					</OText>
+				</TouchableOpacity>
+			)}
+			{options.map(({ id, name, respect_to }: any) => (
+				<React.Fragment key={`cont_key_${id}`}>
+					{respect_to == null && (
+						<TouchableOpacity
+							key={`eopt_key_${id}`}
+							onPress={() => setSelectedOpt(id)}
+							style={[
+								styles.extraItem,
+								{
+									borderBottomColor:
+										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+								},
+							]}>
+							<OText
+								color={
+									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+								}
+								size={selOpt == id ? 14 : 12}
+								weight={selOpt == id ? '600' : 'normal'}>
+								{name}
+							</OText>
+						</TouchableOpacity>
+					)}
+				</React.Fragment>
+			))}
+		</>
 	);
 
 	return (
@@ -238,11 +271,81 @@ export const ProductOptionsUI = (props: any) => {
 								</View>
 							) : (
 								<>
-									<ProductHeader
-										source={{ uri: product?.images || productCart?.images }}
-										style={{height: windowWidth}}
-										resizeMode={'contain'}
-									/>
+									<Swiper
+										loop={false}
+										showsButtons={true}
+										style={styles.mainSwiper}
+										// index={thumbsSwiper}
+										onIndexChanged={(index) => handleChangeMainIndex(index)}
+										prevButton={
+											<View style={styles.swiperButton}>
+												<IconAntDesign
+													name="caretleft"
+													color={theme.colors.white}
+													size={13}
+													// style={styles.starIcon}
+												/>
+											</View>
+										}
+										nextButton={
+											<View style={styles.swiperButton}>
+												<IconAntDesign
+													name="caretright"
+													color={theme.colors.white}
+													size={13}
+													// style={styles.starIcon}
+												/>
+											</View>
+										}
+									>
+										{gallery.length > 0 && gallery.map((img, i) => (
+											<View
+												style={styles.slide1}
+												key={i}
+											>
+												<FastImage
+													style={{ height: '100%' }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
+											</View>
+										))}
+									</Swiper>
+									<ScrollView
+										horizontal
+										contentContainerStyle={{
+											paddingHorizontal: 30,
+											paddingVertical: 15
+										}}
+									>
+										{gallery.length > 0 && gallery.map((img, index) => (
+											<View
+												key={index}
+												style={{
+													height: 56,
+													borderRadius: 8,
+													margin: 8,
+													opacity: index === thumbsSwiper ? 1 : 0.8
+												}}
+											>
+												<OIcon
+													url={img}
+													style={{
+														borderColor: theme.colors.lightGray,
+														borderRadius: 8,
+														minHeight: '100%'
+													}}
+													width={56}
+													height={56}
+													cover
+												/>
+												{/* {thumbsSwiper === 2 && <OText color='red'>{index.toString()}</OText>}
+												{thumbsSwiper === 3 && <OText color='red'>{index.toString()}</OText>} */}
+											</View>
+										))}
+									</ScrollView>
 								</>
 							)}
 						</WrapHeader>

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

@@ -77,4 +77,4 @@ export const ProductActions = styled.View`
 `
 export const ExtraOptionWrap = styled.ScrollView`
 	margin-horizontal: -40px;
-`;
+`;