ordering-ui-react-native 0.16.47 → 0.16.48-release

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType, useUtils } from 'ordering-components/native'
+import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
 import LinearGradient from 'react-native-linear-gradient'
 
@@ -13,8 +12,7 @@ import {
   SkipButton,
   RatingBarContainer,
   RatingTextContainer,
-  RatingStarContainer,
-  PlacedDate
+  MultiLogosContainer
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
 import { TouchableOpacity, StyleSheet, View, I18nManager } from 'react-native';
@@ -91,11 +89,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 [enableProduct, setEnableProduct] = useState(true)
 
   const onSubmit = () => {
     if (Object.values(stars).some((value: any) => value === 0)) {
@@ -109,6 +107,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     handleReviewState && handleReviewState(order?.id)
     setIsReviewed && setIsReviewed(true)
     setAlertState({ ...alertState, success: true })
+    !enableProduct && navigation?.canGoBack() && navigation.goBack()
   }
 
   const qualificationList = [
@@ -145,7 +144,16 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     if (!order?.review) {
       onSubmit()
     } else {
-      onNavigationRedirect('ReviewProducts', { order: order })
+      skipOrderReview()
+    }
+  }
+
+  const skipOrderReview = () => {
+    if (enableProduct) onNavigationRedirect('ReviewProducts', { order: order })
+    else if (order?.driver && !order?.user_review) {
+      onNavigationRedirect('ReviewDriver', { order: order })
+    } else {
+      navigation?.canGoBack() && navigation.goBack()
     }
   }
 
@@ -191,30 +199,48 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
+  useEffect(() => {
+    setEnableProduct(!order?.products.every(product => product?.deleted))
+  }, [order])
+
   return (
     <>
       <ReviewOrderContainer>
         <NavBar
-          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
+          title={t('REVIEW_ORDER', 'Review 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', justifyContent: 'center' }}
-          titleWrapStyle={{ paddingHorizontal: 0, width: '100%', justifyContent: 'center' }}
-          titleStyle={{ textAlign: 'center', marginRight: 0, marginLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+          titleWrapStyle={{ paddingHorizontal: 0 }}
+          titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        <BusinessLogo>
-          <View style={styles.logoWrapper}>
-            <OIcon
-              url={order?.logo}
-              width={80}
-              height={80}
-            />
-          </View>
+        <BusinessLogo isMulti={order?.business?.length > 1}>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+          )}
         </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>
@@ -222,92 +248,78 @@ 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> */}
-              {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 }}
+              <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)}
                       >
-                        <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} />)
+                        <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
+                  />
                 )}
-              </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>
         )}
@@ -316,13 +328,13 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => onNavigationRedirect('ReviewProducts', { order: order })}
+            onPress={() => skipOrderReview()}
           >
             <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={t('GOTO_REVIEW', 'Go to review')}
+            text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
@@ -338,7 +350,7 @@ export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
     UIComponent: ReviewOrderUI,
-    defaultStar: 5
+    defaultStar: props?.defaultStar || 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

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

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

@@ -56,7 +56,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
       if (order?.driver && !order?.user_review) {
         onNavigationRedirect('ReviewDriver', { order: order })
       } else {
-        onNavigationRedirect('MyOrders')
+        onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
       }
     }
   }, [formState])
@@ -67,14 +67,14 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => onNavigationRedirect('MyOrders')}
+          onActionLeft={() => onNavigationRedirect('BottomTab', { screen: '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) => (
+        {order?.products?.map((product: any) => !product?.deleted && (
           <SingleProductReview
             key={product.id}
             product={product}
@@ -87,7 +87,10 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => (order?.driver && !order?.user_review) ? onNavigationRedirect('ReviewDriver', { order: order }) : onNavigationRedirect('MyOrders')}
+            onPress={() => (order?.driver && !order?.user_review) ?
+              onNavigationRedirect('ReviewDriver', { order: order }) :
+              onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
+            }
           >
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
@@ -95,7 +98,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             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}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             isDisabled={formState.loading || formState?.changes?.length === 0}
             onClick={() => handleContinueClick()}

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

@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import { useLanguage, useUtils } from 'ordering-components/native'
+
+import {
+  ReviewOrderContainer,
+  BusinessLogo,
+  FormReviews,
+  ActionContainer,
+  RatingStarContainer,
+  PlacedDate,
+  MultiLogosContainer
+} from './styles'
+import { OButton, OIcon, OText } from '../shared'
+import { StyleSheet, View, I18nManager } from 'react-native';
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+
+import { useTheme } from 'styled-components/native'
+
+export const ReviewTrigger = (props: any) => {
+  const {
+    order,
+    handleOpenOrderReview
+  } = 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.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
+    },
+  })
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const placedOnDate = parseDate(order?.delivery_datetime, { utc: true, outputFormat: 'dddd MMMM DD, YYYY' })
+  const [star, setStar] = useState(5)
+
+  return (
+    <>
+      <ReviewOrderContainer>
+        <BusinessLogo>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+
+          )}
+        </BusinessLogo>
+        {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
+        <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+          <FormReviews>
+            <RatingStarContainer>
+              {[...Array(5).keys()].map((index: number) => (<FontAwesome name={(index <= (star - 1)) ? 'star' : 'star-o'} size={28} key={`star-symbol-${index}`} onPress={() => setStar(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>
+          </FormReviews>
+        </View>
+      </ReviewOrderContainer>
+      <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            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 }}
+            onClick={() => handleOpenOrderReview(star)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+import styled from 'styled-components/native'
+
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 0 25px;
+  margin-bottom: 100px;
+`
+
+export const BusinessLogo = styled.View`
+  margin-vertical: 5px;
+  align-items: center;
+`
+
+export const FormReviews = styled.View`
+  flex: 1;
+  height: 100%;
+  margin-top: 10px;
+`
+
+export const ActionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 30px;
+`
+
+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;
+`
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 100%;
+`