ordering-ui-react-native 0.16.43 → 0.16.46

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType, useUtils } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
 import LinearGradient from 'react-native-linear-gradient'
 
@@ -11,7 +12,9 @@ import {
   ActionContainer,
   SkipButton,
   RatingBarContainer,
-  RatingTextContainer
+  RatingTextContainer,
+  RatingStarContainer,
+  PlacedDate
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
 import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
@@ -88,10 +91,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const [, t] = useLanguage()
   const [, { showToast }] = useToast()
   const { handleSubmit, control, errors } = useForm()
-
+  const [{ parseDate }] = useUtils()
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
+  const placedOnDate = parseDate(order?.delivery_datetime, { outputFormat: 'dddd MMMM DD, YYYY' })
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -191,14 +195,15 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     <>
       <ReviewOrderContainer>
         <NavBar
-          title={t('REVIEW_ORDER', 'Review your Order')}
+          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
           titleAlign={'center'}
+          leftImg={theme.images.general.close}
           onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
-          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-          titleWrapStyle={{ paddingHorizontal: 0 }}
-          titleStyle={{ marginRight: 0, marginLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}
+          titleWrapStyle={{ paddingHorizontal: 0, width: '100%', justifyContent: 'center' }}
+          titleStyle={{ textAlign: 'center', marginRight: 0, marginLeft: 0 }}
         />
         <BusinessLogo>
           <View style={styles.logoWrapper}>
@@ -209,6 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             />
           </View>
         </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
         {order?.review ? (
           <View style={styles.reviewedStyle}>
             <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
@@ -216,78 +222,92 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
         ) : (
           <View style={{ flex: 1, justifyContent: 'flex-end' }}>
             <FormReviews>
-              <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
-              <RatingBarContainer>
-                <LinearGradient
-                  start={{ x: 0.0, y: 0.0 }}
-                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0, y: 0 }}
-                  locations={[.9999, .9999]}
-                  colors={[theme.colors.primary, theme.colors.backgroundGray200]}
-                  style={styles.statusBar}
-                />
-                <RatingTextContainer>
-                  {qualificationList.map((qualification: any) => (
-                    <View
-                      key={qualification.key}
-                      style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
-                    >
-                      <TouchableOpacity
-                        style={qualification.isInnerStyle && styles.ratingItem}
-                        onPress={() => handleChangeStars(qualification.key)}
-                      >
-                        <View
-                          style={{
-                            ...styles.ratingLineStyle,
-                            backgroundColor: (qualification.pointerColor && !(stars.quality >= qualification.key)) ? theme.colors.dusk : 'transparent'
-                          }}
-                        />
-                        <OText size={12} color={stars.quality === qualification.key ? theme.colors.black : theme.colors.backgroundGray200}>{qualification.text}</OText>
-                      </TouchableOpacity>
-                    </View>
-                  ))}
-                </RatingTextContainer>
-              </RatingBarContainer>
-
-              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
-                {commentsList[stars?.quality || 1]?.title}
-              </OText>
-              <CommentsButtonGroup>
-                {commentsList[stars?.quality || 1]?.list?.map(commentItem => (
-                  <OButton
-                    key={commentItem.key}
-                    text={commentItem.content}
-                    bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
-                    borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
-                    textStyle={{
-                      color: isSelectedComment(commentItem.key) ? theme.colors.white : theme.colors.black,
-                      fontSize: 13,
-                      paddingRight: isSelectedComment(commentItem.key) ? 15 : 0
-                    }}
-                    style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
-                    imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
-                    imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                    onClick={() => handleChangeComment(commentItem)}
-                  />
-                ))}
-              </CommentsButtonGroup>
-
-              <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText>
-              <Controller
-                control={control}
-                defaultValue=''
-                name='comments'
-                render={({ onChange }: any) => (
-                  <OInput
-                    name='comments'
-                    onChange={(val: any) => {
-                      onChange(val)
-                      setExtraComment(val.target.value)
-                    }}
-                    style={styles.inputTextArea}
-                    multiline
+              {/* <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText> */}
+              {false && (
+                <RatingBarContainer>
+                  <LinearGradient
+                    start={{ x: 0.0, y: 0.0 }}
+                    end={{ x: qualificationList[stars.quality - 1]?.percent || 0, y: 0 }}
+                    locations={[.9999, .9999]}
+                    colors={[theme.colors.primary, theme.colors.backgroundGray200]}
+                    style={styles.statusBar}
                   />
+                  <RatingTextContainer>
+                    {qualificationList.map((qualification: any) => (
+                      <View
+                        key={qualification.key}
+                        style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
+                      >
+                        <TouchableOpacity
+                          style={qualification.isInnerStyle && styles.ratingItem}
+                          onPress={() => handleChangeStars(qualification.key)}
+                        >
+                          <View
+                            style={{
+                              ...styles.ratingLineStyle,
+                              backgroundColor: (qualification.pointerColor && !(stars.quality >= qualification.key)) ? theme.colors.dusk : 'transparent'
+                            }}
+                          />
+                          <OText size={12} color={stars.quality === qualification.key ? theme.colors.black : theme.colors.backgroundGray200}>{qualification.text}</OText>
+                        </TouchableOpacity>
+                      </View>
+                    ))}
+                  </RatingTextContainer>
+                </RatingBarContainer>
+              )}
+              <RatingStarContainer>
+                {[...Array(5).keys()].map((index) => (<FontAwesome name={(index <= (stars?.quality - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => handleChangeStars(index + 1)} color={theme?.colors?.primary} />)
                 )}
-              />
+              </RatingStarContainer>
+              <PlacedDate>
+                <OText color={theme.colors.textNormal}>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')}</OText>
+                <OText color={theme.colors.textNormal} style={{ fontWeight: "bold" }}>{placedOnDate}</OText>
+              </PlacedDate>
+              {false && (
+                <>
+                  <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+                    {commentsList[stars?.quality || 1]?.title}
+                  </OText>
+                  <CommentsButtonGroup>
+                    {commentsList[stars?.quality || 1]?.list?.map((commentItem: any) => (
+                      <OButton
+                        key={commentItem.key}
+                        text={commentItem.content}
+                        bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                        borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                        textStyle={{
+                          color: isSelectedComment(commentItem.key) ? theme.colors.white : theme.colors.black,
+                          fontSize: 13,
+                          paddingRight: isSelectedComment(commentItem.key) ? 15 : 0
+                        }}
+                        style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
+                        imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
+                        imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+                        onClick={() => handleChangeComment(commentItem)}
+                      />
+                    ))}
+                  </CommentsButtonGroup>
+                </>
+              )}
+              {/* <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText> */}
+              {false && (
+                <Controller
+                  control={control}
+                  defaultValue=''
+                  name='comments'
+                  render={({ onChange }: any) => (
+                    <OInput
+                      name='comments'
+                      onChange={(val: any) => {
+                        onChange(val)
+                        setExtraComment(val.target.value)
+                      }}
+                      style={styles.inputTextArea}
+                      multiline
+                    />
+                  )}
+                />
+              )}
             </FormReviews>
           </View>
         )}
@@ -302,7 +322,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
           </SkipButton>
           <OButton
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
-            text={t('CONTINUE', 'Continue')}
+            text={t('GOTO_REVIEW', 'Go to review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}

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

@@ -42,3 +42,12 @@ export const RatingTextContainer = styled.View`
   justify-content: space-between;
   margin-top: 10px;
 `
+export const RatingStarContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`
+export const PlacedDate = styled.View`
+  margin-top: 30px;
+`

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

@@ -25,7 +25,8 @@ export const SearchBar = (props: any) => {
 		blurOnSubmit,
 		inputContainerStyles,
 		containerStyles,
-		hideIcon
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -82,15 +83,16 @@ export const SearchBar = (props: any) => {
 	return (
 		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={{...styles.inputStyle, ...inputContainerStyles}}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
 				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
-				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
+				inputStyle={{ padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle }}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
 				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}