ordering-ui-react-native 0.14.79 → 0.14.80-release

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

@@ -1,27 +1,27 @@
-import styled from 'styled-components/native';
-
-export const FormSide = styled.View`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
-`;
-export const FormInput = styled.View`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 20px 0px 15px;
-`
-export const ButtonsSection = styled.View`
-  margin: 10px 0px 0px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const SocialButtons = styled.View`
-   width: 100%;
-   margin-top: 10px;
-   padding-bottom: 50px;
-`
+import styled from 'styled-components/native';
+
+export const FormSide = styled.View`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+`;
+export const FormInput = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 20px 0px 15px;
+`
+export const ButtonsSection = styled.View`
+  margin: 10px 0px 0px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const SocialButtons = styled.View`
+   width: 100%;
+   margin-top: 10px;
+   padding-bottom: 50px;
+`

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

@@ -1,162 +1,155 @@
-import React from 'react';
-import {
-	useLanguage,
-	useConfig,
-	useOrder,
-	useUtils,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
-import { StyleSheet } from 'react-native';
-import { OText, OIcon } from '../shared';
-import FastImage from 'react-native-fast-image'
-
-export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		container: {
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.border,
-			marginBottom: 28,
-		},
-		line18: {
-			lineHeight: 18,
-		},
-		line15: {
-			lineHeight: 15,
-		},
-		soldOutBackgroundStyle: {
-			backgroundColor: '#B8B8B8',
-		},
-		soldOutTextStyle: {
-			textTransform: 'uppercase',
-		},
-		productStyle: {
-			width: 75,
-			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
-		},
-		quantityContainer: {
-			position: 'absolute',
-			left: '100%',
-			bottom: '100%',
-			width: 25,
-			height: 25,
-			textAlign: 'center',
-			borderRadius: 25,
-			alignItems: 'center'
-		},
-		regularPriceStyle: {
-			fontSize: 12,
-			color: '#808080',
-			textDecorationLine: 'line-through',
-			marginLeft: 7,
-			marginRight: 7
-		}
-	});
-
-
-	const [, t] = useLanguage();
-	const [stateConfig] = useConfig();
-	const [{ parsePrice, optimizeImage }] = useUtils();
-	const [orderState] = useOrder();
-
-	const editMode = typeof product?.code !== 'undefined';
-
-	const removeToBalance = editMode ? product?.quantity : 0;
-	const cart = orderState.carts[`businessId:${businessId}`];
-	const productCart = cart?.products?.find(
-		(prod: any) => prod.id === product?.id,
-	);
-	const totalBalance = (productCart?.quantity || 0) - removeToBalance;
-
-	const maxCartProductConfig =
-		(stateConfig.configs.max_product_amount
-			? parseInt(stateConfig.configs.max_product_amount)
-			: 100) - totalBalance;
-
-	const productBalance =
-		(cart?.products?.reduce(
-			(sum: any, _product: any) =>
-				sum + (product && _product.id === product?.id ? _product.quantity : 0),
-			0,
-		) || 0) - removeToBalance;
-	let maxCartProductInventory =
-		(product?.inventoried ? product?.quantity : undefined) - productBalance;
-	maxCartProductInventory = !isNaN(maxCartProductInventory)
-		? maxCartProductInventory
-		: maxCartProductConfig;
-
-	const maxProductQuantity = Math.min(
-		maxCartProductConfig,
-		maxCartProductInventory,
-	);
-	return (
-		<CardContainer
-			style={[
-				styles.container,
-				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-			]}
-			onPress={() => onProductClick?.(product)}>
-			{productAddedToCartLength > 0 && (
-				<QuantityContainer style={[styles.quantityContainer, {
-					transform: [{ translateX: 10 }, { translateY: -10 }],
-				}]}>
-					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
-				</QuantityContainer>
-			)}
-			<CardInfo>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
-				<PricesContainer>
-					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
-					{product?.offer_price !== null && product?.in_offer && (
-						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
-					)}
-				</PricesContainer>
-				<OText
-					size={10}
-					numberOfLines={2}
-					ellipsizeMode="tail"
-					color={theme.colors.textSecondary}
-					style={styles.line15}>
-					{product?.description}
-				</OText>
-			</CardInfo>
-			{product?.images ? (
-				<FastImage
-					style={styles.productStyle}
-					source={{
-						uri: optimizeImage(product?.images, 'h_75,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-			) : (
-				<OIcon
-					src={theme?.images?.dummies?.product}
-					style={styles.productStyle}
-				/>
-			)}
-			{(isSoldOut || maxProductQuantity <= 0) && (
-				<SoldOut>
-					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
-						{t('SOLD_OUT', 'SOLD OUT')}
-					</OText>
-				</SoldOut>
-			)}
-		</CardContainer>
-	);
-};
+import React from 'react';
+import {
+	useLanguage,
+	useConfig,
+	useOrder,
+	useUtils,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { SingleProductCardParams } from '../../types';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
+import { StyleSheet } from 'react-native';
+import { OText, OIcon } from '../shared';
+import FastImage from 'react-native-fast-image'
+
+export const SingleProductCard = (props: SingleProductCardParams) => {
+	const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		container: {
+			borderWidth: 1,
+			borderRadius: 7.6,
+			borderColor: theme.colors.border,
+			marginBottom: 28,
+		},
+		line18: {
+			lineHeight: 18,
+		},
+		line15: {
+			lineHeight: 15,
+		},
+		soldOutBackgroundStyle: {
+			backgroundColor: '#B8B8B8',
+		},
+		soldOutTextStyle: {
+			textTransform: 'uppercase',
+		},
+		productStyle: {
+			width: 75,
+			height: 75,
+			borderRadius: 7.6,
+			marginStart: 12
+		},
+		quantityContainer: {
+			position: 'absolute',
+			left: '100%',
+			bottom: '100%',
+			width: 25,
+			height: 25,
+			textAlign: 'center',
+			borderRadius: 25,
+			alignItems: 'center'
+		},
+		regularPriceStyle: {
+			fontSize: 12,
+			color: '#808080',
+			textDecorationLine: 'line-through',
+			marginLeft: 7,
+			marginRight: 7
+		}
+	});
+
+
+	const [, t] = useLanguage();
+	const [stateConfig] = useConfig();
+	const [{ parsePrice, optimizeImage }] = useUtils();
+	const [orderState] = useOrder();
+
+	const editMode = typeof product?.code !== 'undefined';
+
+	const removeToBalance = editMode ? product?.quantity : 0;
+	const cartProducts: any = Object.values(orderState.carts).reduce((products: any, _cart: any) => [...products, ..._cart?.products], [])
+	const productBalance = cartProducts.reduce((sum: any, _product: any) => sum + (_product.id === product?.id ? _product.quantity : 0), 0)
+
+	const totalBalance = (productBalance || 0) - removeToBalance
+
+	const maxCartProductConfig =
+		(stateConfig.configs.max_product_amount
+			? parseInt(stateConfig.configs.max_product_amount)
+			: 100) - totalBalance;
+
+	let maxCartProductInventory =
+		(product?.inventoried ? product?.quantity : undefined) - totalBalance;
+	maxCartProductInventory = !isNaN(maxCartProductInventory)
+		? maxCartProductInventory
+		: maxCartProductConfig;
+
+	const maxProductQuantity = Math.min(
+		maxCartProductConfig,
+		maxCartProductInventory,
+	);
+	return (
+		<CardContainer
+			style={[
+				styles.container,
+				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+			]}
+			onPress={() => onProductClick?.(product)}>
+			{productAddedToCartLength > 0 && (
+				<QuantityContainer style={[styles.quantityContainer, {
+					transform: [{ translateX: 10 }, { translateY: -10 }],
+				}]}>
+					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+				</QuantityContainer>
+			)}
+			<CardInfo>
+				<OText
+					size={12}
+					weight={'500'}
+					numberOfLines={1}
+					ellipsizeMode="tail"
+					style={styles.line18}>
+					{product?.name}
+				</OText>
+				<PricesContainer>
+					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
+					{product?.offer_price !== null && product?.in_offer && (
+						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+					)}
+				</PricesContainer>
+				<OText
+					size={10}
+					numberOfLines={2}
+					ellipsizeMode="tail"
+					color={theme.colors.textSecondary}
+					style={styles.line15}>
+					{product?.description}
+				</OText>
+			</CardInfo>
+			{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}
+					style={styles.productStyle}
+				/>
+			)}
+			{(isSoldOut || maxProductQuantity <= 0) && (
+				<SoldOut>
+					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
+						{t('SOLD_OUT', 'SOLD OUT')}
+					</OText>
+				</SoldOut>
+			)}
+		</CardContainer>
+	);
+};

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

@@ -1,33 +1,33 @@
-import styled from 'styled-components/native'
-
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border-radius: 10px;
-  position: relative;
-`
-export const CardInfo = styled.View`
-  padding-start: 3px;
-  flex: 1;
-`
-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;
-`
+import styled from 'styled-components/native'
+
+export const CardContainer = styled.TouchableOpacity`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border-radius: 10px;
+  position: relative;
+`
+export const CardInfo = styled.View`
+  padding-start: 3px;
+  flex: 1;
+`
+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;
+`

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

@@ -0,0 +1,166 @@
+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 [currentValue, setCurrentValue] = 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(() => {
+    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>
+        <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;
+`