ordering-ui-react-native 0.24.16 → 0.24.18

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

@@ -1,72 +1,72 @@
-import styled, { css } from 'styled-components/native'
-
-export const CardInfo = styled.View`
-  padding-start: 3px;
-  flex: 1;
-  min-height: 85px;
-`
-export const SoldOut = styled.View`
-  position: absolute;
-  background: ${(props: any) => props.theme.colors.backgroundGray100} 0% 0% no-repeat padding-box;
-  border-radius: 23px;
-  padding: 5px 10px;
-  top: 37px;
-  end: 10px;
-`
-
-export const QuantityContainer = styled.View`
-  background: ${({ theme }: any) => theme.colors.primary};
-  align-items: center;
-  justify-content: center;
-`
-export const PricesContainer = styled.View`
-  flex-direction: row;
-  align-items: center;
-  margin-vertical: 6px;
-`
-
-export const LogoWrapper = styled.View`
-  position: relative;
-  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
-  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
-`
-export const WrapTags = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  margin-left: 10px;
-`
-export const TagsContainer = styled.View`
-    display: flex;
-    margin: auto;
-`
-
-export const RibbonBox = styled.View`
-  position: absolute;
-  z-index: 1;
-  top: -4px;
-  right: -4px;
-  background-color: ${(props: any) => props.theme.colors.primary};
-  padding: 1px 8px;
-  max-width: 60px;
-
-  ${(props: any) => props.bgColor && css`
-    background-color: ${props.bgColor};
-  `}
-
-  ${(props: any) => props.isRoundRect && css`
-    border-radius: 7.6px;
-  `}
-
-  ${(props: any) => props.isCapsule && css`
-    border-radius: 50px;
-  `}
-
-  ${(props: any) => props.colorText && css`
-    color: ${props.colorText ? 'black' : 'white'};
-  `}
-
-  ${(props: any) => props.borderRibbon && css`
-    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
-  `}
-`
+import styled, { css } from 'styled-components/native'
+
+export const CardInfo = styled.View`
+  padding-start: 3px;
+  flex: 1;
+  min-height: 85px;
+`
+export const SoldOut = styled.View`
+  position: absolute;
+  background: ${(props: any) => props.theme.colors.backgroundGray100} 0% 0% no-repeat padding-box;
+  border-radius: 23px;
+  padding: 5px 10px;
+  top: 37px;
+  end: 10px;
+`
+
+export const QuantityContainer = styled.View`
+  background: ${({ theme }: any) => theme.colors.primary};
+  align-items: center;
+  justify-content: center;
+`
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-vertical: 6px;
+`
+
+export const LogoWrapper = styled.View`
+  position: relative;
+  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
+  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
+`
+export const WrapTags = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-left: 10px;
+`
+export const TagsContainer = styled.View`
+    display: flex;
+    margin: auto;
+`
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 60px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
+`

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

@@ -1,199 +1,199 @@
-import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
-import { OText, OButton, OInput, OIcon } 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,
-  LogoWrapper,
-} from './styles'
-import FastImage from 'react-native-fast-image'
-
-export const SingleProductReview = (props: SingleProductReviewParams) => {
-  const {
-    product,
-    formState,
-    handleChangeFormState,
-  } = props
-
-  const [, t] = useLanguage()
-  const theme = useTheme()
-  const [{ optimizeImage }] = useUtils()
-
-  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,
-    },
-    productStyle: {
-      width: 80,
-      height: 80,
-      marginLeft: 'auto',
-      marginRight: 'auto'
-    }
-  })
-
-  const [comments, setComments] = useState<Array<any>>([])
-  const [extraComment, setExtraComment] = useState('')
-  const [isShowTextArea, setIsShowTextArea] = useState(false)
-  const [qualification, setQualification] = useState(5)
-  const [currentValue, setCurrentValue] = useState(5)
-
-  const commentsList = reviewCommentList('product')
-
-  const isSelectedComment = (commentKey: number) => {
-    const found = comments.find((comment: any) => comment?.key === commentKey)
-    return found
-  }
-
-  const handleChangeQualification = (index: number) => {
-    if (qualification === index) return
-    setQualification(index)
-    setComments([])
-  }
-
-  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(() => {
-    const value = qualification ? 5 : 1
-    setCurrentValue(value)
-    if (value !== currentValue) setComments([])
-    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>
-        <LogoWrapper>
-          {product?.images ? (
-            <FastImage
-              style={styles.productStyle}
-              source={{
-                uri: optimizeImage(product?.images, 'h_250,c_limit'),
-                priority: FastImage.priority.normal,
-              }}
-              resizeMode={FastImage.resizeMode.cover}
-            />
-          ) : (
-            <OIcon
-              src={theme?.images?.dummies?.product}
-              width={80}
-              height={80}
-            />
-          )}
-        </LogoWrapper>
-        <ProductHeader>
-          <OText numberOfLines={1} style={{ flex: 1 }} color={theme.colors.textNormal}>{product?.name}</OText>
-          <LikeHandsActionContainer>
-            <LikeHandsButton
-              isLike
-              onPress={() => handleChangeQualification(5)}
-            >
-              <AntDesignIcons name='like2' size={20} color={qualification === 5 ? theme.colors.primary : theme.colors.lightGray} />
-            </LikeHandsButton>
-            <LikeHandsButton onPress={() => handleChangeQualification(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>
-    </>
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useUtils } from 'ordering-components/native'
+import { OText, OButton, OInput, OIcon } 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,
+  LogoWrapper,
+} from './styles'
+import FastImage from 'react-native-fast-image'
+
+export const SingleProductReview = (props: SingleProductReviewParams) => {
+  const {
+    product,
+    formState,
+    handleChangeFormState,
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
+
+  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,
+    },
+    productStyle: {
+      width: 80,
+      height: 80,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  })
+
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+  const [isShowTextArea, setIsShowTextArea] = useState(false)
+  const [qualification, setQualification] = useState(5)
+  const [currentValue, setCurrentValue] = useState(5)
+
+  const commentsList = reviewCommentList('product')
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeQualification = (index: number) => {
+    if (qualification === index) return
+    setQualification(index)
+    setComments([])
+  }
+
+  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(() => {
+    const value = qualification ? 5 : 1
+    setCurrentValue(value)
+    if (value !== currentValue) setComments([])
+    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>
+        <LogoWrapper>
+          {product?.images ? (
+            <FastImage
+              style={styles.productStyle}
+              source={{
+                uri: optimizeImage(product?.images, 'h_250,c_limit'),
+                priority: FastImage.priority.normal,
+              }}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          ) : (
+            <OIcon
+              src={theme?.images?.dummies?.product}
+              width={80}
+              height={80}
+            />
+          )}
+        </LogoWrapper>
+        <ProductHeader>
+          <OText numberOfLines={1} style={{ flex: 1 }} color={theme.colors.textNormal}>{product?.name}</OText>
+          <LikeHandsActionContainer>
+            <LikeHandsButton
+              isLike
+              onPress={() => handleChangeQualification(5)}
+            >
+              <AntDesignIcons name='like2' size={20} color={qualification === 5 ? theme.colors.primary : theme.colors.lightGray} />
+            </LikeHandsButton>
+            <LikeHandsButton onPress={() => handleChangeQualification(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

@@ -1,39 +1,39 @@
-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 LogoWrapper = styled.View`
-  shadowRadius: 3;
-  shadowOffset: { width: 1, height: 4 };
-  elevation: 3;
-  border-radius: 8;
-  shadowOpacity: 0.1;
-  overflow: hidden;
-  width: 80;
-  marginLeft: auto;
-  marginRight: auto;
-`
-
-export const LikeHandsButton = styled.TouchableOpacity`
-  ${(props: any) => props.isLike && css`
-    margin-horizontal: 15px;
-  `}
-`
-
-export const CommentsButtonGroup = styled.View`
-  flex-direction: row;
-  flex-wrap: wrap;
-`
+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 LogoWrapper = styled.View`
+  shadowRadius: 3;
+  shadowOffset: { width: 1, height: 4 };
+  elevation: 3;
+  border-radius: 8;
+  shadowOpacity: 0.1;
+  overflow: hidden;
+  width: 80;
+  marginLeft: auto;
+  marginRight: auto;
+`
+
+export const LikeHandsButton = styled.TouchableOpacity`
+  ${(props: any) => props.isLike && css`
+    margin-horizontal: 15px;
+  `}
+`
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`