ordering-ui-react-native 0.15.73 → 0.15.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.73",
+  "version": "0.15.76",
   "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/Wallets/index.tsx

@@ -7,8 +7,7 @@ import {
   WalletList,
   useLanguage,
   useUtils,
-  useConfig,
-  useSession
+  useConfig
 } from 'ordering-components/native'
 
 import {
@@ -32,6 +31,7 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
@@ -42,7 +42,6 @@ const WalletsUI = (props: any) => {
   } = props
 
   const [, t] = useLanguage()
-  const [{ user }] = useSession()
   const theme = useTheme()
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
@@ -66,7 +65,7 @@ const WalletsUI = (props: any) => {
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
-  const loyaltyLevel = Object.keys(user?.loyalty_level ?? {}).length > 0 && user?.loyalty_level
+  const loyaltyLevel = Object.keys(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
 
   const walletName: any = {
     cash: {
@@ -117,6 +116,7 @@ const WalletsUI = (props: any) => {
       />
 
       {!walletList.loading &&
+        !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
       (
@@ -239,7 +239,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -263,7 +263,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
         <NotFoundSource
           content={walletList?.error
             ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')