ordering-ui-react-native 0.14.86 → 0.14.89

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

@@ -0,0 +1,116 @@
+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={() => onNavigationRedirect('MyOrders')}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+          titleWrapStyle={{ paddingHorizontal: 0 }}
+          titleStyle={{ marginRight: 0, marginLeft: 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} color={theme.colors.textNormal}>{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 }}
+			      imgRightSrc={theme.images.general.arrow_right}
+            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/themes/original/src/components/ReviewProducts/styles.tsx

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

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

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { OText, OButton, OInput } from '../shared'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import AntDesignIcons from 'react-native-vector-icons/AntDesign'
+import { useTheme } from 'styled-components/native'
+import { SingleProductReviewParams } from '../../types'
+
+import { reviewCommentList } from '../../../../../src/utils'
+
+import {
+  ProductContainer,
+  ProductHeader,
+  LikeHandsActionContainer,
+  LikeHandsButton,
+  CommentsButtonGroup,
+} from './styles'
+
+export const SingleProductReview = (props: SingleProductReviewParams) => {
+  const {
+    product,
+    formState,
+    handleChangeFormState,
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    additionalCommentButton: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginVertical: 10,
+    },
+  })
+
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+  const [isShowTextArea, setIsShowTextArea] = useState(false)
+  const [qualification, setQualification] = useState(5)
+
+  const commentsList = reviewCommentList('product')
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  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])
+    }
+  }
+
+  useEffect(() => {
+    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && qualification === 5) return
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    let found = false
+    const _changes = formState.changes.map((item: any) => {
+      if (item?.product_id === product?.product_id) {
+        found = true
+        return {
+          product_id: product?.product_id,
+          comment: _comment,
+          qualification: qualification
+        }
+      }
+      return item
+    })
+    if (!found) {
+      _changes.push({
+        product_id: product?.product_id,
+        comment: _comment,
+        qualification: qualification
+      })
+    }
+    handleChangeFormState && handleChangeFormState(_changes)
+  }, [comments, extraComment, qualification])
+
+  return (
+    <>
+      <ProductContainer>
+        <ProductHeader>
+          <OText numberOfLines={1} style={{ flex: 1 }} color={theme.colors.textNormal}>{product?.name}</OText>
+          <LikeHandsActionContainer>
+            <LikeHandsButton
+              isLike
+              onPress={() => setQualification(5)}
+            >
+              <AntDesignIcons name='like2' size={20} color={qualification === 5 ? theme.colors.primary : theme.colors.lightGray} />
+            </LikeHandsButton>
+            <LikeHandsButton onPress={() => setQualification(1)}>
+              <AntDesignIcons name='dislike2' size={20} color={qualification === 1 ? theme.colors.primary : theme.colors.lightGray} />
+            </LikeHandsButton>
+          </LikeHandsActionContainer>
+        </ProductHeader>
+        <CommentsButtonGroup>
+          {commentsList[qualification === 5 ? 'like' : 'dislike']?.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.textNormal,
+                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>
+        <TouchableOpacity
+          style={styles.additionalCommentButton}
+          onPress={() => setIsShowTextArea(!isShowTextArea)}
+        >
+          <OText
+            color={isShowTextArea ? theme.colors.primary : theme.colors.disabled}
+            style={{
+              borderBottomColor: isShowTextArea ? theme.colors.primary : theme.colors.disabled,
+              borderBottomWidth: 1
+            }}
+          >
+            {t('ADDITIONAL_COMMENTS', 'Additional comments')}
+          </OText>
+        </TouchableOpacity>
+        {isShowTextArea && (
+          <View>
+            <OText style={{ marginTop: 10 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText>
+            <OInput
+              name='comments'
+              onChange={(val: any) => {
+                setExtraComment(val.target.value)
+              }}
+              style={styles.inputTextArea}
+              multiline
+            />
+          </View>
+        )}
+      </ProductContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components/native'
+
+export const ProductContainer = styled.View`
+  margin-bottom: 15px;
+`
+
+export const ProductHeader = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`
+
+export const LikeHandsActionContainer = styled.View`
+  flex-direction: row;
+`
+
+export const LikeHandsButton = styled.TouchableOpacity`
+  ${(props: any) => props.isLike && css`
+    margin-horizontal: 15px;
+  `}
+`
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`

package/themes/original/src/layouts/FloatingBottomContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styled from 'styled-components/native'
+import { Platform, Dimensions } from 'react-native'
+const windowWidth = Dimensions.get('window').width
+
+export const Container = styled.View`
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  padding: 10px;
+  border-top-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  z-index: 1000;
+  background-color: ${(props: any) => props.bgColor ? props.bgColor : '#FFF'};
+  padding-bottom: ${Platform.OS === 'ios' ? '20px' : '10px'};
+`
+
+export const FloatingBottomContainer = (props: any) => {
+  return (
+    <Container style={{ width: windowWidth }}>
+      {props.children}
+    </Container>
+  )
+}

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

@@ -329,13 +329,40 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	order?: { orderId: number, businessId: number, logo: string },
+	order?: { id: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
 	stars?: any,
 	handleChangeInput?: any,
 	handleChangeRating?: any,
 	handleSendReview?: any,
 	formState?: any,
-	navigation?: any
+	navigation?: any,
+	setIsReviewed?: (isReviewed: boolean) => {},
+	handleReviewState?: any,
+	setStars?: any,
+	onNavigationRedirect?: any
+}
+export interface ReviewProductParams {
+	navigation?: any,
+	onNavigationRedirect?: any,
+	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	formState?: any,
+	handleChangeFormState?: any,
+	handleSendProductReview?: any
+  }
+export interface SingleProductReviewParams {
+	product: any,
+	formState?: any,
+	handleChangeFormState?: any,
+}
+export interface ReviewDriverParams {
+	navigation?: any,
+	onNavigationRedirect?: any,
+	order?: { orderId: number, businessId: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any },
+	formState?: any,
+	setIsDriverReviewed?: (isReviewed: boolean) => {},
+	dirverReviews?: any,
+	setDriverReviews?: any,
+	handleSendDriverReview?: any
 }
 export interface MessagesParams {
 	type?: string,