ordering-ui-react-native 0.9.2 → 0.9.6

package/src/components/ReviewOrder/index.tsx

@@ -1,18 +1,22 @@
 import React, { useState, useEffect } from 'react'
 import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { useForm, Controller } from 'react-hook-form'
+import LinearGradient from 'react-native-linear-gradient'
 
 import {
   ReviewOrderContainer,
   BusinessLogo,
   FormReviews,
-  Category,
-  Stars
+  CommentsButtonGroup,
+  ActionContainer,
+  SkipButton,
+  RatingBarContainer,
+  RatingTextContainer
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
-import { TouchableOpacity, StyleSheet,View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
 import NavBar from '../NavBar'
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
 import Spinner from 'react-native-loading-spinner-overlay'
 
 import { ReviewOrderParams } from '../../types'
@@ -22,23 +26,58 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const {
     order,
     stars,
-    handleChangeInput,
-    handleChangeRating,
     handleSendReview,
     formState,
     navigation,
-    setIsReviewed
+    setStars,
+    onNavigationRedirect
   } = props
 
   const theme = useTheme()
 
   const styles = StyleSheet.create({
+    logoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: {width: 1, height: 4},
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
     inputTextArea: {
-      borderColor: theme.colors.secundaryContrast,
-      borderRadius: 10,
-      marginVertical: 20,
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
       height: 100,
       alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    },
+    reviewedStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 20
     }
   })
 
@@ -46,20 +85,16 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   const [, { showToast }] = useToast()
   const { handleSubmit, control, errors } = useForm()
 
+  const [isReviewed, setIsReviewed] = useState(false)
   const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
-
-  const categories = {
-    quality: { name: 'quality', show: t('QUALITY', 'Quality of Product') },
-    punctuality: { name: 'punctiality', show: t('PUNCTUALITY', 'Punctuality') },
-    service: { name: 'service', show: t('SERVICE', 'Service') },
-    packaging: { name: 'packaging', show: t('PRODUCT_PACKAGING', 'Product Packaging') }
-  }
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
       setAlertState({
         open: true,
-        content: Object.values(categories).map((category: any, i: any) => stars[category.name] === 0 ? `- ${t('CATEGORY_ATLEAST_ONE', `${category.show} must be at least one point`).replace('CATEGORY', category.name.toUpperCase())} ${i !== 3 && '\n'}` : ' ')
+        content: stars.quality === 0 ? [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`] : []
       })
       return
     }
@@ -68,22 +103,63 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     setAlertState({ ...alertState, success: true })
   }
 
-  const getStarArr = (rating: number) => {
-    switch (rating) {
-      case 0:
-        return [0, 0, 0, 0, 0];
+  const qualificationList = [
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
+    { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
+    { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+  ]
+
+  const commentsList = [
+    { key: 0, content: t('IT_WASNT_TASTY', "It wasn't tasty") },
+    { key: 1, content: t('IT_DOESNT_PACK_WELL', "It doesn't pack well") },
+    { key: 2, content: t('IT_ISNT_WORTH_WHAT_IT_COSTS', "It isn't worth what it costs") },
+    { key: 3, content: t('TOO_SLOW', 'Too slow') },
+    { key: 4, content: t('SUSTAINABLE_PACKAGING_WASNT_USED', "Sustainable packaging wasn't used") },
+    { key: 5, content: t('THEY_DID_NOT_FOLLOW_THE_ORDER_NOTES', 'They did not follow the order notes') }
+  ]
+
+  const handleChangeStars = (index: number) => {
+    switch (index) {
       case 1:
-        return [1, 0, 0, 0, 0];
+        setStars({ ...stars, quality: 1, punctiality: 1, service: 1, packaging: 1 })
+        break
       case 2:
-        return [1, 1, 0, 0, 0];
+        setStars({ ...stars, quality: 2, punctiality: 2, service: 2, packaging: 2 })
+        break
       case 3:
-        return [1, 1, 1, 0, 0];
+        setStars({ ...stars, quality: 3, punctiality: 3, service: 3, packaging: 3 })
+        break
       case 4:
-        return [1, 1, 1, 1, 0];
+        setStars({ ...stars, quality: 4, punctiality: 4, service: 4, packaging: 4 })
+        break
       case 5:
-        return [1, 1, 1, 1, 1];
-      default:
-        return [0, 0, 0, 0, 0];
+        setStars({ ...stars, quality: 5, punctiality: 5, service: 5, packaging: 5 })
+        break
+    }
+  }
+
+  const handleChangeComment = (commentItem: any) => {
+    const found = comments.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment: any) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleContinueClick  = () => {
+    if (!order?.review && !isReviewed) {
+      onSubmit()
+    } else {
+      onNavigationRedirect('ReviewProducts', { order: order })
     }
   }
 
@@ -92,8 +168,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       showToast(ToastType.Error, formState.result)
     }
     if (!formState.loading && !formState.error && alertState.success) {
-      showToast(ToastType.Success, t('REVIEW_SUCCESS_CONTENT', 'Thank you, Review successfully submitted!'))
-      navigation?.canGoBack() && navigation.goBack()
+      showToast(ToastType.Success, t('ORDER_REVIEW_SUCCESS_CONTENT', 'Thank you, Order review successfully submitted!'))
+      onNavigationRedirect && onNavigationRedirect('ReviewProducts', { order: order })
     }
   }, [formState.result])
 
@@ -108,7 +184,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       });
       showToast(ToastType.Error, stringError);
     }
-  }, [errors]);
+  }, [errors])
 
   useEffect(() => {
     if (alertState.open) {
@@ -119,83 +195,135 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     }
   }, [alertState.content])
 
-
-  const getStar = (star: number, index: number, category: string) => {
-    switch (star) {
-      case 0:
-        return (
-          <TouchableOpacity key={index} onPress={() => handleChangeRating({ target: { name: category, value: index + 1 } })}>
-            <MaterialCommunityIcon name='star-outline' size={24} color={theme.colors.backgroundDark} />
-          </TouchableOpacity>
-        )
-      case 1:
-        return (
-          <TouchableOpacity key={index} onPress={() => handleChangeRating({ target: { name: category, value: index + 1 } })}>
-            <MaterialCommunityIcon name='star' size={24} color={theme.colors.primary} />
-          </TouchableOpacity>
-        )
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => _comments += comment.content + '. ')
     }
-  }
+    let _comment
+    _comment = _comments  + extraComment
+    setStars({ ...stars, comments: _comment })
+  }, [comments, extraComment])
 
   return (
-    <ReviewOrderContainer>
-      <NavBar
-        title={t('REVIEW_ORDER', 'Review your Order')}
-        titleAlign={'center'}
-        onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-        showCall={false}
-        btnStyle={{ paddingLeft: 0 }}
-        paddingTop={0}
-      />
-      <BusinessLogo>
-        <OIcon
-          url={order?.logo}
-          width={100}
-          height={100}
+    <>
+      <ReviewOrderContainer>
+        <NavBar
+          title={t('REVIEW_ORDER', 'Review your Order')}
+          titleAlign={'center'}
+          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          paddingTop={0}
         />
-      </BusinessLogo>
-      <View style={{flex: 1, justifyContent: 'flex-end'}}>
+        <BusinessLogo>
+          <View style={styles.logoWrapper}>
+            <OIcon
+              url={order?.logo}
+              width={80}
+              height={80}
+            />
+          </View>
+        </BusinessLogo>
+        {order?.review ? (
+          <View style={styles.reviewedStyle}>
+            <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
+          </View>
+        ) : (
+          <View style={{flex: 1, justifyContent: 'flex-end'}}>
+            <FormReviews>
+              <OText mBottom={13}>{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.lightGray]}
+                  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.lightGray}>{qualification.text}</OText>
+                      </TouchableOpacity>
+                    </View>
+                  ))}
+                </RatingTextContainer>
+              </RatingBarContainer>
+
+              <OText style={{ marginTop: 30 }}>{t('COMMENTS', 'Comments')}</OText>
+              <CommentsButtonGroup>
+                {commentsList.map(commentItem => (
+                  <OButton
+                    key={commentItem.key}
+                    text={commentItem.content}
+                    bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.lightGray}
+                    borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.lightGray}
+                    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>
 
-      <FormReviews>
-        {Object.values(categories).map((category: any) => (
-          <Category
-            key={category.name}
+              <OText style={{ marginTop: 30 }}>{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
+                  />
+                )}
+              />
+            </FormReviews>
+          </View>
+        )}
+        <Spinner visible={formState.loading} />
+      </ReviewOrderContainer>
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <SkipButton
+            onPress={() => onNavigationRedirect('ReviewProducts', { order: order })}
           >
-            <OText>{category.show}</OText>
-            <Stars>
-              {getStarArr(stars[category?.name]).map((star, index) => getStar(star, index, category.name))}
-            </Stars>
-          </Category>
-        ))}
-        <Controller
-          control={control}
-          defaultValue=''
-          name='comments'
-          render={({ onChange }: any) => (
-            <OInput
-              name='comments'
-              placeholder={t('COMMENTS', 'Comments')}
-              onChange={(val: string) => {
-                onChange(val)
-                handleChangeInput(val)
-              }}
-              style={styles.inputTextArea}
-              multiline
-              bgColor={theme.colors.inputDisabled}
-            />
-          )}
-        />
-      </FormReviews>
-      <OButton
-        textStyle={{ color: theme.colors.white }}
-        style={{ marginTop: 20 }}
-        text={t('SAVE', 'Save')}
-        imgRightSrc=''
-        onClick={handleSubmit(onSubmit)}
-        />
-        </View>
-      <Spinner visible={formState.loading} />
-    </ReviewOrderContainer>
+            <OText weight={700} size={18}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
+          </SkipButton>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('CONTINUE', 'Continue')}
+            style={{ borderRadius: 8 }}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={handleSubmit(handleContinueClick)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
   )
 }
 

package/src/components/ReviewOrder/styles.tsx

@@ -1,10 +1,9 @@
 import styled from 'styled-components/native'
 
-export const ReviewOrderContainer = styled.View`
-  width: 100%;
-  flex: 1;
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 20px;
+  margin-bottom: 100px;
 `
-export const ReviewOrderTitle = styled.View``
 
 export const BusinessLogo = styled.View`
   margin-vertical: 5px;
@@ -14,18 +13,32 @@ export const BusinessLogo = styled.View`
 export const FormReviews = styled.View`
   flex: 1;
   height: 100%;
+  margin-top: 30px;
+`
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
 `
 
-export const Category = styled.View`
-  padding: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
+export const ActionContainer = styled.View`
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
-  margin-vertical: 5px;
-  border-radius: 10px;
+  padding: 3px 10px;
 `
 
-export const Stars = styled.View`
+export const SkipButton = styled.TouchableOpacity`
+`
+
+export const RatingBarContainer = styled.View`
+  margin-top: 10px;
+  margin-bottom: 25px;
+`
+
+export const RatingTextContainer = styled.View`
   flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
 `

package/src/components/ReviewProducts/index.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useToast, ToastType, ReviewProduct as ReviewProductController } from 'ordering-components/native'
+import { OText, OButton } from '../shared'
+import NavBar from '../NavBar'
+import { ReviewProductParams } from '../../types'
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+import { useTheme } from 'styled-components/native'
+import { SingleProductReview } from '../SingleProductReview'
+
+import {
+  ReviewProductsContainer,
+  ActionContainer,
+  SkipButton
+} from './styles'
+
+const ReviewProductsUI = (props: ReviewProductParams) => {
+  const {
+    navigation,
+    order,
+    onNavigationRedirect,
+    formState,
+    handleChangeFormState,
+    handleSendProductReview
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [, { showToast }] = useToast()
+
+  const [isProductReviewed, setIsProductReviewed] = useState(false)
+  const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
+
+  const handleContinueClick = () => {
+    setAlertState({ ...alertState, success: true })
+    handleSendProductReview()
+  }
+  useEffect(() => {
+    if (alertState.open) {
+      alertState.content && showToast(
+        ToastType.Error,
+        alertState.content
+      )
+    }
+  }, [alertState.content])
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setIsProductReviewed && setIsProductReviewed(true)
+      if (order?.driver && !order?.user_review) {
+        onNavigationRedirect('ReviewDriver', { order: order })
+      } else {
+        onNavigationRedirect('MyOrders')
+      }
+    }
+  }, [formState])
+
+  return (
+    <>
+      <ReviewProductsContainer>
+        <NavBar
+          title={t('REVIEW_PRODUCT', 'Review product')}
+          titleAlign={'center'}
+          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          paddingTop={0}
+        />
+        {order?.products.map((product: any) => (
+          <SingleProductReview
+            key={product.id}
+            product={product}
+            formState={formState}
+            handleChangeFormState={handleChangeFormState}
+          />
+        ))}
+      </ReviewProductsContainer>
+
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <SkipButton
+            onPress={() => (order?.driver && !order?.user_review) ? onNavigationRedirect('ReviewDriver', { order: order }) : onNavigationRedirect('MyOrders')}
+          >
+            <OText weight={700} size={18}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
+          </SkipButton>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
+            style={{ borderRadius: 8 }}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            isDisabled={formState.loading || formState?.changes?.length === 0}
+            onClick={() => handleContinueClick()}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}
+
+export const ReviewProducts = (props: any) => {
+  const reviewProductProps = {
+    ...props,
+    UIComponent: ReviewProductsUI,
+    isToast: true
+  }
+  return <ReviewProductController {...reviewProductProps} />
+}

package/src/components/ReviewProducts/styles.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components/native'
+
+export const ReviewProductsContainer = styled.ScrollView`
+  padding: 20px;
+  margin-bottom: 100px;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 10px;
+`
+
+export const SkipButton = styled.TouchableOpacity`
+`