ordering-ui-react-native 0.15.29 → 0.15.30

package/themes/business/src/components/OrdersListManager/styles.tsx

@@ -0,0 +1,123 @@
+import styled, { css } from 'styled-components/native';
+
+export const FiltersTab = styled.View`
+  margin-bottom: 20px;
+  min-height: 30px;
+  max-height: 35px;
+  flex: 1;
+  width: 100%;
+`
+
+export const TabsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  flex: 1;
+  width: 100%;
+  border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
+`
+
+export const Tag = styled.Pressable`
+  background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
+  justify-content: center;
+  align-items: center;
+  min-height: 34px;
+  padding: 4px 10px;
+  border-radius: 50px;
+  margin-right: 15px;
+`
+
+export const IconWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  background: #fff;
+`
+
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 24px;
+`
+
+export const FilterBtnWrapper = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+  border-radius: 7.6px;
+  margin-vertical: 5px;
+  padding: 15px 20px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`
+
+export const TabPressable = styled.Pressable`
+  align-items: center;
+  border-color: ${(props: any) => props.theme.colors.textGray};
+  border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
+  padding-horizontal: 10px;
+`
+export const OrderStatus = styled.View`
+  margin-right: 5px;
+  width: 3px;
+  height: 90%;
+  border-radius: 6px;
+
+  ${(props: any) => props.timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+
+  ${(props: any) => props.timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+
+  ${(props: any) => props.timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`
+
+export const SlaOption = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SearchModalContent = styled.View``
+
+export const SlaSettingModalContent = styled.View``
+
+export const DeliveryStatusWrapper = styled.View`
+  position: relative;
+`
+export const VerticalLine = styled.View`
+  position: absolute;
+  background: #E9ECEF;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+`
+
+export const Actions = styled.View``
+
+export const Sides = styled.View`
+  flex-direction: row;
+  height: 100%;
+`
+
+export const LeftSide = styled.View`
+  width: 30%;
+`
+
+export const RightSide = styled.View`
+  width: 70%;
+  border-width: 2px;
+  border-color: ${(props: any) => props.theme.colors.gray100};
+`

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
+import styled, { useTheme } from 'styled-components/native'
+
+import { OText, OIcon } from '../shared';
+
+export const useOrderUtils = () => {
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils()
+
+  const calculateDate = (type: any, from: any, to: any) => {
+    switch (type) {
+      case 'today':
+        const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
+        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` }
+      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` }
+      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` }
+      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 }
+    }
+  }
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
+
+  const deliveryStatus = [
+    {
+      key: t('OK', 'Ok'),
+      des: t('DELIVERY_OK_STATUS_DESC', 'Get delivery time from the businesses.'),
+      timmer: false,
+      icon: theme.images.general?.clock1,
+      backColor: '#00D27A'
+    },
+    {
+      key: t('AT_RISK', 'At risk'),
+      des: t('DELIVERY_ATRISK_STATUS_DESC', 'Is the time between delivery time of busines and the delayed time.'),
+      timmer: false,
+      icon: theme.images.general?.clockRisk,
+      backColor: '#FFC700'
+    },
+    {
+      key: t('DELAYED', 'Delayed'),
+      des: t('DELIVERY_DELAYED_STATUS_DESC', 'If this time is exceeded, the order will be delayed.'),
+      timmer: true,
+      icon: theme.images.general?.clockDelayed,
+      backColor: '#E63757'
+    }
+  ]
+
+  const defaultSearchList = {
+    id: '',
+    state: '',
+    city: '',
+    business: '',
+    delivery_type: '',
+    paymethod: '',
+    driver: '',
+    timeStatus: '',
+    date: {
+      from: '',
+      to: '',
+      type: ''
+    }
+  }
+
+  const constants = {
+    preorderTypeList,
+    defaultOrderTypes,
+    deliveryStatus,
+    defaultSearchList,
+    calculateDate
+  }
+
+  return [constants];
+}
+
+export const StatusBlock = (props: any) => {
+  const { item, last } = props
+  const [showTime, setShowTime] = useState(false)
+
+  useEffect(() => {
+    if (last) {
+      setShowTime(true)
+    }
+  }, [last])
+
+  const StatusItems = styled.View`
+    position: relative;
+    margin-bottom: 20px;
+    z-index: 2;
+  `
+  const ItemHeader = styled.View`
+    flex-direction: row;
+    margin-bottom: 5px;
+  `
+
+  const IconWrapper = styled.View`
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+  `
+
+  const ItemStatus = styled.View`
+    width: 4px;
+    height: 22px;
+    margin: 0 15px;
+    border-radius: 4px;
+    background: ${(props: any) => props.backColor};
+  `
+
+  const ItemContent = styled.View`
+    display: flex;
+    padding: 0 30px;
+  `
+
+  const OverLine = styled.View`
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 20px;
+    left: 0;
+    background-color: #fff;
+    z-index: 2;
+  `
+
+  return (
+    <StatusItems>
+      <Pressable style={{ marginBottom: 10 }}>
+        <ItemHeader>
+          <IconWrapper>
+            <OIcon
+              src={item?.icon}
+              width={16}
+              height={16}
+              color={item?.backColor}
+            />
+          </IconWrapper>
+          <ItemStatus backColor={item?.backColor} />
+          <OText>{item?.key}</OText>
+        </ItemHeader>
+      </Pressable>
+      <ItemContent>
+        <OText>{item?.des}</OText>
+      </ItemContent>
+      {showTime && ( <Timer /> )}
+      {last && ( <OverLine /> )}
+    </StatusItems>
+  )
+}
+
+export const Timer = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ configs }] = useConfig();
+
+  const styles = StyleSheet.create({
+    settingTime: {
+      fontSize: 14,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      margin: 0,
+      marginRight: 10,
+      paddingHorizontal: 10,
+      paddingTop: 5,
+      borderColor: theme.colors.disabled
+    }
+  })
+
+  const TimerInputWrapper = styled.View`
+    color: ${(props: any) => props.theme.colors.disabled};
+    margin-top: 15px;
+    margin-left: 30px;
+    margin-right: 30px;
+    flex-direction: row;
+    align-items: flex-end;
+  `
+
+  return (
+    <TimerInputWrapper>
+      <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
+      <OText>{t('MIN', 'min')}</OText>
+    </TimerInputWrapper>
+  )
+}
+

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

@@ -8,6 +8,9 @@ import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
 } from './styles';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -18,25 +21,33 @@ export const PreviousOrders = (props: any) => {
     isLogisticOrder,
     handleClickLogisticOrder,
     slaSettingTime,
-    currentTabSelected
+    currentTabSelected,
+    currentOrdenSelected
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
   const [currentTime, setCurrentTime] = useState()
+  const [orientationState] = useDeviceOrientation();
+
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
     handleClickOrder && handleClickOrder(order)
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    if (props.handleClickEvent) {
+      props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
+    } else {
+      onNavigationRedirect &&
+        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+    }
   };
 
   const styles = StyleSheet.create({
     cardButton: {
       flex: 1,
-      minHeight: isLogisticOrder ? 50 : 64,
-      marginBottom: isLogisticOrder ? 0 : 30,
+      paddingVertical: 20,
+      marginBottom: IS_PORTRAIT ? 20 : 0,
       marginLeft: 3,
     },
     icon: {
@@ -115,8 +126,9 @@ export const PreviousOrders = (props: any) => {
             return (
               <View
                 style={{
-                  backgroundColor: order?.locked && isLogisticOrder ? '#ccc' : '#fff',
-                  marginBottom: isLogisticOrder ? 10 : 0
+                  backgroundColor: currentOrdenSelected === order?.id ? theme.colors.gray100 : order?.locked && isLogisticOrder ? '#ccc' : '#fff',
+                  marginBottom: isLogisticOrder ? 10 : 0,
+                  // justifyContent: 'center'
                 }}
                 key={order.id}
               >

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

@@ -98,24 +98,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-		const cartProduct = currentCart?.products?.find((cproduct: any) => cproduct?.id === product?.id)
-		if (cartProduct) {
-			onRedirect('ProductDetails', {
-				businessId:  business.id,
-				isCartProduct: true,
-				productCart: cartProduct,
-				businessSlug: business?.slug,
-				categoryId: cartProduct?.category_id,
-				productId: cartProduct?.id,
-			})
-		} else {
-			onRedirect('ProductDetails', {
-				product: product,
-				businessSlug: business.slug,
-				businessId: business.id,
-			})
-		}
-
+		onRedirect('ProductDetails', {
+			product: product,
+			businessSlug: business.slug,
+			businessId: business.id,
+		})
 	}
 
 	const handleCancel = () => {
@@ -169,8 +156,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
-	  }, []);
-	
+	}, []);
+
 	const handleBackNavigation = () => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
@@ -251,7 +238,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              					setCategoryClicked={setCategoryClicked}
+								setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>
@@ -329,13 +316,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
-          			setOpenUpselling={setOpenUpselling}
+					setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
-          			onRedirect={onRedirect}
+					onRedirect={onRedirect}
 				/>
 			)}
 		</SafeAreaView>