ordering-ui-react-native 0.15.74 → 0.15.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.74",
+  "version": "0.15.77",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/utils/index.tsx

@@ -201,7 +201,7 @@ export const transformCountryCode = (countryCode : number) => {
  */
  export const reviewCommentList = (type: string) => {
   const [, t] = useLanguage()
-
+  // TODO: improve this function
   const reviews: any = {
     order: {
       1: {
@@ -387,3 +387,70 @@ export const transformCountryCode = (countryCode : number) => {
 
   return reviews[type]
 }
+
+/**
+ * function to manage order comment list
+ * @param {string} param0 type of orders to return
+ * @returns object with orders dictionary
+ */
+export const orderCommentList = (value: string) => {
+  const [, t] = useLanguage()
+  const dictionary: any = {
+    reject: 6,
+    forcePickUp: 9,
+    pickupFailed: 10,
+    forceDelivery: 11,
+    deliveryFailed: 12,
+    notReady: 14
+  }
+
+  const status = dictionary[value]
+
+  const messages: any = {
+    6: [// on reject order
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Unavailable driver',
+      'Other'
+    ],
+    9: [// on force pickup status
+      'I forgot to complete it in the location',
+      'I didn\'t have internet connection',
+      'Other'
+    ],
+    10: [// on pickup failed by driver
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Store closed',
+      'Unavailable driver',
+      'Other'
+    ],
+    11: [// on force delivery status
+      'I forgot to complete it in the location',
+      'I didn\'t have internet connection',
+      'Other'
+    ],
+    12: [// on delivery failed by driver
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Recipient unavailable',
+      'Refused- incorrect/ missing items',
+      'Refused- damage',
+      'Other'
+    ],
+    14: [// on order not ready
+      'Store didn\'t receive the order on time',
+      'Store very busy',
+      'Other'
+    ]
+  }
+
+  if (!messages[status]) return null
+
+  const list = messages[status].map((val: any, i: number) => ({ key: i, content: t(`ORDER_STATUS_${status}_QUICK_COMMENT_${i}`, val) }))
+
+  return { list }
+}

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -9,12 +9,14 @@ import {
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage } from 'ordering-components/native';
-import { Content, Timer, TimeField, Header, Action, Comments } from './styles';
+import { Content, Timer, TimeField, Header, Action, Comments, CommentsButtonGroup } from './styles';
 import { FloatingButton } from '../FloatingButton';
 import { OText, OButton, OTextarea, OIconButton } from '../shared';
 import { AcceptOrRejectOrderParams } from '../../types';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { orderCommentList } from '../../../../../src/utils'
+
 export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const {
     customerCellphone,
@@ -39,15 +41,33 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [min, setMin] = useState('00');
   const [time, setTime] = useState('');
   const [comments, setComments] = useState('');
+  const [commentList, setCommentList] = useState<any>([]);
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const { top, bottom } = useSafeAreaInsets()
 
+  const orderCommentsList = orderCommentList(action)
+
   let codeNumberPhone, numberPhone, numberToShow;
   const phoneNumber = customerCellphone;
   const titleOrder = t(orderTitle[action]?.key, orderTitle[action]?.text)
   const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
   const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
 
+  const isSelectedComment = (commentKey: number) => {
+    const found = commentList.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComments = (commentItem: any) => {
+    const found = commentList.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = commentList.filter((comment: any) => comment?.key !== commentItem.key)
+      setCommentList(_comments)
+    } else {
+      setCommentList([...commentList, commentItem])
+    }
+  }
+
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
       scrollViewRef?.current?.scrollTo({ x: 0, y });
@@ -152,6 +172,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const handleAcceptOrReject = () => {
     handleFixTime();
 
+    let _comments = ''
+    if (commentList.length > 0) {
+      commentList.map((comment: any) => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + comments
+
     let minsToSend = min;
 
     if (min > '60') minsToSend = '59';
@@ -165,7 +191,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: comments,
+        comment: _comment,
         status: 5,
       },
       acceptByDriver: {
@@ -173,27 +199,27 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 6,
       },
       pickupFailedByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 10
       },
       deliveryFailedByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 12
       },
       orderNotReady: {
-        comment: comments,
+        comment: _comment,
         status: 14
       },
       forcePickUp: {
-        reasons: comments,
+        reasons: _comment,
         status: 9
       },
       forceDelivery: {
-        reasons: comments,
+        reasons: _comment,
         status: 11
       }
     };
@@ -387,6 +413,28 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
+        {orderCommentsList && (
+          <CommentsButtonGroup>
+            {orderCommentsList?.list?.map((comment: any) => (
+              <OButton
+                key={comment.key}
+                text={comment.content}
+                bgColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
+                borderColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
+                textStyle={{
+                  color: isSelectedComment(comment.key) ? theme.colors.white : theme.colors.darkText,
+                  fontSize: 12,
+                  paddingRight: isSelectedComment(comment.key) ? 15 : 0
+                }}
+                style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
+                imgRightSrc={isSelectedComment(comment.key) ? theme.images.general.close : null}
+                imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+                onClick={() => handleChangeComments(comment) }
+              />
+            ))}
+          </CommentsButtonGroup>
+        )}
+
         {showTextArea && (
           <Comments ref={viewRef}>
             <OTextarea

package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx

@@ -35,3 +35,8 @@ export const Comments = styled.View`
   margin-top: 20px;
   padding-bottom: 40px;
 `;
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`

package/themes/kiosk/src/components/ProductForm/index.tsx

@@ -446,7 +446,7 @@ export const ProductOptionsUI = (props: any) => {
                     </WrapperIngredients>
                   </View>
                 )}
-                {product?.extras.map((extra: any) => extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+                {product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) => extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
                   const currentState = productCart.options[`id:${option.id}`] || {}
                   return (
                     <React.Fragment key={option.id}>

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

@@ -20,7 +20,7 @@ import { NotFoundSource } from '../NotFoundSource'
 import { View, StyleSheet, ScrollView } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
-const PromotionsUI = (props : PromotionParams) => {
+const PromotionsUI = (props: PromotionParams) => {
     const {
         navigation,
         offersState,
@@ -65,20 +65,19 @@ const PromotionsUI = (props : PromotionParams) => {
 
     const [, t] = useLanguage()
     const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
-    const [events] = useEvent()
     const [openModal, setOpenModal] = useState(false)
 
-    const handleClickOffer = (offer : any) => {
+    const handleClickOffer = (offer: any) => {
         setOpenModal(true)
         setOfferSelected(offer)
     }
 
-    const handleBusinessClick = (business : any) => {
-        events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
     }
 
-    const filteredOffers = offersState?.offers?.filter((offer : any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
-
+    const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
     const targetString = offerSelected?.target === 1
         ? t('SUBTOTAL', 'Subtotal')
         : offerSelected?.target === 2
@@ -121,21 +120,23 @@ const PromotionsUI = (props : PromotionParams) => {
                 />
             )}
             <ScrollView>
-                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer : any) => (
+                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
                     <SingleOfferContainer key={offer.id}>
                         <OfferInformation>
-                            <OText style={styles.offerTitle}>{offer?.name}</OText>
+                            <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
                             {offer?.description && (
-                                <OText style={styles.offerDescription}>{offer?.description}</OText>
+                                <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
                             )}
                             <OText style={styles.offerExtraInfo}>
                                 {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
                             </OText>
                             <AvailableBusinesses>
-                                <OText style={styles.offerExtraInfo}>{t('APPLY_FOR', 'Apply for')}:</OText>
-                                {offer.businesses.map((business: any, i: number) => (
-                                    <OText style={styles.offerExtraInfo} key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</OText>
-                                ))}
+                                <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                    {t('APPLY_FOR', 'Apply for')}:
+                                    {offer.businesses.map((business: any, i: number) => (
+                                        <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                    ))}
+                                </OText>
                             </AvailableBusinesses>
                         </OfferInformation>
                         <OButton
@@ -170,7 +171,7 @@ const PromotionsUI = (props : PromotionParams) => {
                             <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
                         )}
                         {offerSelected?.minimum && (
-                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purshase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
                         )}
                         {offerSelected?.max_discount && (
                             <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
@@ -182,8 +183,8 @@ const PromotionsUI = (props : PromotionParams) => {
                     <OText style={{ marginTop: 10, marginBottom: 10 }}>
                         {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
                     </OText>
-                    <ScrollView style={{height: '75%'}}>
-                        {offerSelected?.businesses?.map((business : any) => {
+                    <ScrollView style={{ height: '75%' }}>
+                        {offerSelected?.businesses?.map((business: any) => {
                             return (
                                 <SingleBusinessOffer key={business.id}>
                                     {business?.logo ? (
@@ -202,7 +203,7 @@ const PromotionsUI = (props : PromotionParams) => {
                                         />
                                     )}
                                     <BusinessInfo>
-                                        <OText>{business.name}</OText>
+                                        <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
                                         <OButton
                                             onClick={() => handleBusinessClick(business)}
                                             text={t('GO_TO_BUSINESSS', 'Go to business')}
@@ -220,7 +221,7 @@ const PromotionsUI = (props : PromotionParams) => {
     )
 }
 
-export const Promotions = (props : PromotionParams) => {
+export const Promotions = (props: PromotionParams) => {
     const PromotionsProps = {
         ...props,
         UIComponent: PromotionsUI

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

@@ -7,7 +7,6 @@ export const PromotionsContainer = styled.View`
 export const SingleOfferContainer = styled.View`
   flex-direction: row;
   width: 100%;
-  height: 80px;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;