ordering-ui-react-native 0.11.54 → 0.11.58

package/package.json

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

package/src/components/OrderCreating/index.tsx

@@ -67,13 +67,17 @@ export const OrderCreating = (props: any) => {
     let hour = 0
     let min = 0
     if (orderState?.options?.type === 1 && cart) {
-      hour = (cart?.business?.delivery_time).split(':')[0]
-      min = (cart?.business?.delivery_time).split(':')[1]
+      if (cart?.business?.delivery_time) {
+        hour = (cart?.business?.delivery_time).split(':')[0]
+        min = (cart?.business?.delivery_time).split(':')[1]
+      }
     }
 
     if (orderState?.options?.type === 2 && cart) {
-      hour = (cart?.business?.pickup_time).split(':')[0]
-      min = (cart?.business?.pickup_time).split(':')[1]
+      if (cart?.business?.pickup_time) {
+        hour = (cart?.business?.pickup_time).split(':')[0]
+        min = (cart?.business?.pickup_time).split(':')[1]
+      }
     }
     return getHourMin(hour, min)
   }

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "luisv4",
+  "project": "reactdemo",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/themes/instacart/index.tsx

@@ -35,6 +35,8 @@ import {
 	OText,
 	OToast
 } from './src/components/shared';
+import { ReviewProduct } from './src/components/ReviewProduct';
+import { ReviewDriver } from './src/components/ReviewDriver';
 
 export {
 	Home as HomePage,
@@ -59,6 +61,8 @@ export {
 	OrdersOption,
 	UserProfileForm,
 	ReviewOrder,
+	ReviewProduct,
+	ReviewDriver,
 
 	// OComponents
 	OAlert,

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

@@ -46,6 +46,7 @@ export const BusinessItemAccordion = (props: any) => {
     <BIContainer isClosed={isClosed}>
       <BIHeader
         isClosed={isClosed}
+        isExpanded={isActive}
         onPress={() => isExpanded ? {} : !isClosed ? setActiveState(!isActive) : isClosed}
         activeOpacity={1}
       >
@@ -53,80 +54,54 @@ export const BusinessItemAccordion = (props: any) => {
           {cart?.business?.logo && (
             <OIcon
               url={cart?.business?.logo}
-              width={70}
-              height={70}
-              style={{ borderRadius: 16 }}
+              width={42}
+              height={42}
+              style={{ borderRadius: 22, borderColor: '#E9ECEF', borderWidth: 1 }}
             />
           )}
           <BIContentInfo>
-            <OText>{cart?.business?.name}</OText>
-            {orderState?.options?.type === 1 ? (
+            <OText style={{marginBottom: 2}}>{cart?.business?.name}</OText>
+            {/* {orderState?.options?.type === 1 ? (
               <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                 <MaterialCommunityIcon
                   name='clock-outline'
-                  size={24}
+                  size={14}
+                  color={'gray'}
+                  style={{marginEnd: 4}}
                 />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
               </View>
             ) : (
               <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                 <MaterialCommunityIcon
                   name='clock-outline'
-                  size={24}
+                  size={14}
                 />
                 <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
               </View>
-            )}
+            )} */}
           </BIContentInfo>
         </BIInfo>
 
         {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
           <BITotal>
-            <OText color='#000'>{parsePrice(cart?.total)}</OText>
-            <OText>{t('CART_TOTAL', 'Total')}</OText>
+            <OText weight={'bold'} color='#000'>{parsePrice(cart?.total)}</OText>
+            {/* {!isActive && <MaterialCommunityIcon name='chevron-down' size={20} />} */}
           </BITotal>
         )}
 
         {isClosed && (
           <BITotal>
-            <OText>{t('CLOSED', 'Closed')} {moment}</OText>
+            <OText size={12}>{t('CLOSED', 'Closed')} {moment}</OText>
           </BITotal>
         )}
 
         {!isClosed && !isProducts && (
           <BITotal>
-            <OText>{t('NO_PRODUCTS', 'No products')}</OText>
+            <OText size={12}>{t('NO_PRODUCTS', 'No products')}</OText>
           </BITotal>
         )}
 
-        <BIActions>
-          {props.onNavigationRedirect && !isClosed && (
-            <MaterialCommunityIcon
-              name='store'
-              size={26}
-              color='#CCC'
-              onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}
-            />
-          )}
-          {!isClosed && !!isProducts && (
-            <>
-              {!isCartPending && (
-                <OAlert
-                  title={t('DELETE_CART', 'Delete Cart')}
-                  message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
-                  onAccept={() => handleClearProducts()}
-                >
-                  <MaterialCommunityIcon
-                    name='trash-can-outline'
-                    size={26}
-                    color='#D81212'
-                  />
-                </OAlert>
-              )}
-				  {!isExpanded && <MaterialCommunityIcon name='chevron-down' size={20} />}
-            </>
-          )}
-        </BIActions>
       </BIHeader>
 
       <BIContent style={{ display: isActive ? 'flex' : 'none' }}>

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

@@ -18,11 +18,10 @@ export const BIHeader = styled.TouchableOpacity`
   align-items: center;
   justify-content: space-between;
   position: relative;
-  padding: 10px;
-  background-color: #F8F8F8;
-
-  ${(props: any) => props.isClosed && css`
-    background-color: rgba(0, 0, 0, 0.1);
+  padding: 10px 0;
+  ${(props: any) => props.isExpanded && `
+    border-bottom-width: 1px;
+    border-bottom-color: #EFEFEF;
   `}
 `
 
@@ -46,7 +45,6 @@ export const BIContentInfo = styled.View`
 `
 
 export const BITotal = styled.View`
-  width: 25%;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -141,12 +141,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</View>
 
 			</OrderControlContainer>
-			{/* <BusinessTypeFilter
+			<BusinessTypeFilter
 				images={props.images}
 				businessTypes={props.businessTypes}
 				defaultBusinessType={props.defaultBusinessType}
 				handleChangeBusinessType={handleChangeBusinessType}
-			/> */}
+			/>
 
 			{
 				!businessesList.loading && businessesList.businesses.length === 0 && (

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CContainer, CheckoutAction } from './styles';
+import { CContainer, CheckoutAction, TotalCont } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal } from '../OrderSummary/styles';
 
@@ -32,7 +32,7 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
-	 isExpanded
+	  isExpanded
   } = props
 
   const theme = useTheme()
@@ -99,7 +99,7 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-		  isExpanded
+		    isExpanded={isExpanded}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
           <ProductItemAccordion
@@ -217,7 +217,7 @@ const CartUI = (props: any) => {
           <CheckoutAction>
             <OButton
               text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
+                !openUpselling !== canOpenUpselling ? t('GO_TO_CHECKOUT', 'Go to checkout') : t('LOADING', 'Loading')
               ) : !cart?.valid_address ? (
                 `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
               ) : (
@@ -229,8 +229,11 @@ const CartUI = (props: any) => {
               imgRightSrc={null}
               textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
               onClick={() => setOpenUpselling(true)}
-              style={{ width: '100%', flexDirection: 'row', justifyContent: 'center' }}
+              style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 3 }}
             />
+            <TotalCont>
+              <OText color={'white'}>{cart?.total >= 1 && parsePrice(cart?.total)}</OText>
+            </TotalCont>
           </CheckoutAction>
         )}
       </BusinessItemAccordion>

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

@@ -26,3 +26,14 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const TotalCont = styled.View`
+  position: absolute;
+  end: 10px;
+  top: 10px;
+  background-color: rgba(0,0,0, 0.16);
+  align-items: center;
+  justify-content: center;
+  padding: 6px 7px;
+  border-radius: 4px;
+`

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

@@ -21,7 +21,7 @@ export const CartContent = (props: any) => {
       {isOrderStateCarts && carts?.length > 0 && (
         <>
           <OText style={{ fontSize: 28 }}>
-            {carts.length > 1 ? t('CARTS', 'Carts') : t('CART', 'Cart')}
+            {carts.length > 1 ? t('MY_CARTS', 'My carts') : t('CART', 'Cart')}
           </OText>
           {carts.map((cart: any) => (
             <CCList key={cart.uuid}>
@@ -31,6 +31,7 @@ export const CartContent = (props: any) => {
                   onNavigationRedirect={props.onNavigationRedirect}
                   isCartsLoading={isCartsLoading}
                   setIsCartsLoading={setIsCartsLoading}
+                  isExpanded={false}
                 />
               )}
             </CCList>

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
-import { TextStyle } from 'react-native'
+import { ImageStyle, TextStyle } from 'react-native'
 
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
@@ -50,6 +50,8 @@ interface Props {
   btnStyle?: TextStyle,
   style?: TextStyle,
   paddingTop?: number,
+  isVertical?: boolean;
+  leftImageStyle?: ImageStyle;
 }
 
 const NavBar = (props: Props) => {
@@ -63,7 +65,7 @@ const NavBar = (props: Props) => {
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
       <OButton
         imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
-		    imgLeftStyle={{tintColor: theme.colors.primary}}
+		    imgLeftStyle={{tintColor: theme.colors.primary, ...props.leftImageStyle}}
         imgRightSrc={null}
         style={{ ...btnBackArrow, ...props.btnStyle }}
         onClick={props.onActionLeft}

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

@@ -56,7 +56,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
   }
 
   const handleClickOrderReview = (order: any) => {
-    onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+    onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo, products: order?.products } })
   }
 
   const handleReorderClick = (id: number) => {

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

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { ReviewDriver as ReviewDriverController, useLanguage, ToastType, useToast } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { useForm, Controller } from 'react-hook-form'
+
+import {
+	ReviewOrderContainer,
+	BusinessLogo,
+	FormReviews,
+	Category,
+	Stars,
+	BlockWrap,
+	CommentItem
+} from './styles'
+import { OButton, OIcon, OInput, OText } from '../shared'
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import NavBar from '../NavBar'
+import Spinner from 'react-native-loading-spinner-overlay'
+
+import { ReviewDriverParams } from '../../types'
+import { REVIEW_DRIVER_COMMENTS } from '../../config/constants';
+import TagSelector from '../TagSelector';
+import OBottomStickBar from '../shared/OBottomStickBar';
+import { Container } from '../../..';
+
+export const ReviewDriverUI = (props: ReviewDriverParams) => {
+	const {
+		dirverReviews,
+    order,
+    formState,
+    setDriverReviews,
+    closeReviewDriver,
+    setIsDriverReviewed,
+    handleSendDriverReview,
+		navigation
+	} = props
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		inputTextArea: {
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+			marginVertical: 10,
+			height: 100,
+			alignItems: 'flex-start',
+			paddingVertical: 12,
+			fontSize: 10,
+			marginBottom: 30
+		},
+		progress: {
+			borderRadius: 5,
+			height: 4,
+			backgroundColor: theme.colors.backgroundGray200,
+			marginVertical: 9,
+		},
+		progressLabel: {
+			flexDirection: 'row',
+			justifyContent: 'space-between',
+		},
+	})
+
+	const [, t] = useLanguage()
+	const [, { showToast }] = useToast()
+	const { handleSubmit, control, errors } = useForm()
+	
+	const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
+
+	const [curVal, setReviewVal] = useState(-1);
+	const [curSuggest] = useState(REVIEW_DRIVER_COMMENTS.map(({key, value}) => t(key, value)));
+	const [selectedSuggest, setSelectedSuggest] = useState([]);
+	const [comment, setComment] = useState('');
+
+
+	// const handleChangeReviews = (index) => {
+  //   if (index) setDriverReviews({ ...dirverReviews, qualification: index })
+  // }
+
+  const onSubmit = () => {
+    if (dirverReviews?.qualification === 0) {
+      setAlertState({
+        open: true,
+        content: [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`]
+      })
+      return
+    }
+    setAlertState({ ...alertState, success: true })
+    handleSendDriverReview()
+  }
+
+	const onSuggestUpdate = useCallback((items) => {
+		if (items.length > 0) {
+			let selected: Array<never> = [];
+			items.map(({label, checked}: never) => {
+				if (checked === true) {
+					selected.push(label);
+				}
+			});
+			setSelectedSuggest(selected);
+		}
+	}, []);
+
+	const handleNext = (type: number) => {
+		if (type == 1) handleSubmit(onSubmit)
+		navigation?.navigate('BottomTab', { screen: 'MyOrders' });
+	}
+
+	useEffect(() => {
+		if (formState.error && !formState?.loading) {
+			showToast(ToastType.Error, formState.result)
+		}
+		if (!formState.loading && !formState.error && alertState.success) {
+			showToast(ToastType.Success, t('REVIEW_SUCCESS_CONTENT', 'Thank you, Review successfully submitted!'))
+			setIsDriverReviewed && setIsDriverReviewed(true)
+			handleNext(0);
+		}
+	}, [formState.result])
+
+	useEffect(() => {
+		if (Object.keys(errors).length > 0) {
+			// Convert all errors in one string to show in toast provider
+			const list = Object.values(errors);
+			let stringError = '';
+			list.map((item: any, i: number) => {
+				stringError +=
+					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+			});
+			showToast(ToastType.Error, stringError);
+		}
+	}, [errors]);
+
+	useEffect(() => {
+		if (alertState.open) {
+			alertState.content && showToast(
+				ToastType.Error,
+				alertState.content
+			)
+		}
+	}, [alertState.content])
+
+  useEffect(() => {
+    let _comments = comment || '';
+    if (selectedSuggest.length > 0) {
+      _comments = _comments + ', ' + selectedSuggest.join(', ');
+    }
+    setDriverReviews({ ...dirverReviews, comment: _comments, qualification: 5 })
+  }, [comment, selectedSuggest])
+
+	return (
+		<>
+		<Container>
+			<ReviewOrderContainer>
+				<NavBar
+					title={t('REVIEW_ORDER', 'Review Order')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					paddingTop={0}
+					isVertical
+					leftImg={theme.images.general.close}
+					leftImageStyle={{width: 16}}
+				/>
+				<BusinessLogo>
+					<OIcon 
+						url={order?.driver?.photo || theme.images.dummies.driverPhoto} 
+						width={72} height={72} 
+						style={{borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled}} 
+					/>
+					<OText size={14} lineHeight={21}>{order?.driver?.name}</OText>
+				</BusinessLogo>
+				<View style={{ paddingBottom: 0 }}>
+					<BlockWrap>
+						<OText mBottom={16}>{t('COMMENTS', 'Comments')}</OText>
+						<View style={{flexShrink: 1}}>
+							<TagSelector items={curSuggest} activeColor={theme.colors.primary} normalColor={'#E9ECEF'} onUpdated={onSuggestUpdate} />
+						</View>
+					</BlockWrap>
+					<FormReviews>
+						<OText mBottom={10}>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</OText>
+						<Controller
+							control={control}
+							defaultValue=''
+							name='comments'
+							render={({ onChange }: any) => (
+								<OInput
+									name='comments'
+									placeholder={t('COMMENTS', 'Comments')}
+									onChange={(val: string) => {
+										onChange(val)
+										setComment(val)
+									}}
+									style={styles.inputTextArea}
+									multiline
+									inputStyle={{fontSize: 12}}
+								/>
+							)}
+						/>
+					</FormReviews>
+				</View>
+				<Spinner visible={formState.loading} />
+			</ReviewOrderContainer>
+		</Container>
+		<OBottomStickBar 
+			rightBtnStyle={{borderRadius: 7.6, height: 44}} 
+			rightAction={() => handleNext(1)}
+			leftAction={() => handleNext(0)}
+		/>
+		</>
+	)
+}
+
+
+export const ReviewDriver = (props: ReviewDriverParams) => {
+	const reviewDriverProps = {
+		...props,
+		UIComponent: ReviewDriverUI
+	}
+	return <ReviewDriverController {...reviewDriverProps} />
+}

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components/native'
+
+export const ReviewOrderContainer = styled.View`
+  width: 100%;
+  flex: 1;
+`
+export const ReviewOrderTitle = styled.View`
+
+`
+
+export const BusinessLogo = styled.View`
+  margin-vertical: 5px;
+  align-items: center;
+  box-shadow: 0 1px 2px #ddd;
+  border-radius: 7.6px;
+  margin-bottom: 20px;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+`
+
+export const Category = styled.View`
+  padding: 10px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
+  flex-direction: row;
+  justify-content: space-between;
+  margin-vertical: 5px;
+  border-radius: 10px;
+`
+
+export const Stars = styled.View`
+  flex-direction: row;
+`
+
+export const BlockWrap = styled.View`
+  margin-vertical: 16px;
+  padding-bottom: 20px;
+`;
+
+export const CommentItem = styled.TouchableOpacity`
+  padding: 3px 10px;
+  border-radius: 20px;
+  min-height: 24px;
+`;