ordering-ui-react-native 0.21.31-test → 0.21.32

package/package.json

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

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

@@ -386,21 +386,30 @@ const ChatUI = (props: MessagesParams) => {
           style={{ ...styles.firstMessageText, textAlign: 'center' }}
         >
           {
-            message.change?.attribute !== 'driver_id'
-            ?
-            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
-              ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
-              : `${message.change?.attribute !== 'logistic_status'
-                ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
-                : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
-                  ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
-                  : getLogisticTag(message.change.new)}`
-            }`
-            : message.change.new
+            message.change?.attribute === 'driver_group_id'
+            ? message.change.old
+              ? t('ORDER_ATTRIBUTE_CHANGED_FROM_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_from_', message.change.old)
+                  .replace('_to_', message.change.new)
+              : t('ORDER_ATTRIBUTE_CHANGED_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_to_', message.change.new)
+            : message.change?.attribute !== 'driver_id'
               ?
-              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-              :
-              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+              `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+                ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+                : `${message.change?.attribute !== 'logistic_status'
+                  ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+                  : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+                    ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                    : getLogisticTag(message.change.new)}`
+              }`
+              : message.change.new
+                ?
+                `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+                :
+                `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
           }
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>

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

@@ -1,33 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Modal,
-  View,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity
-} from 'react-native';
-import { useTheme } from 'styled-components/native'
 import moment from 'moment'
+import { NewOrderNotification as NewOrderNotificationController, useApi, useEvent, useLanguage, useSession } from 'ordering-components/native'
+import React, { useEffect, useState } from 'react'
+import { Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native'
 
-import {
-  NewOrderNotification as NewOrderNotificationController,
-  useApi,
-  useEvent,
-  useLanguage,
-  useSession
-} from 'ordering-components/native'
-
-import TrackPlayer from 'react-native-track-player';
-
+import { useLocation } from '../../hooks/useLocation'
 import { OIcon, OText } from '../shared'
 import { NotificationContainer } from './styles'
-import { useLocation } from '../../hooks/useLocation'
 
-const SOUND_LOOP_AMOUNT = 3
-const DURATION_BETWEEN_LOOP = 2000 // ms
+Sound.setCategory('Playback', true)
+Sound.setMode('Default')
+
 const windowWidth = Dimensions.get('screen').width
 
+const SOUND_LOOP = 3
+
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -35,7 +24,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const { getCurrentLocation } = useLocation()
+  const { getCurrentLocation } = useLocation();
   const [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
@@ -56,28 +45,37 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
+  const soundSrc = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
+
+  const notificationSound = new Sound(soundSrc, '', () => { });
+
+  let _timeout: any = null
+  let times = 0
+
   const handleCloseEvents = () => {
+    notificationSound.stop()
     setCurrentEvent(null)
-  }
-
-  const playSoundNotification = () => {
-    let count = 0;
-    const intervalId = setInterval(() => {
-      TrackPlayer.seekTo(0)
-      TrackPlayer.play()
-      setTimeout(() => {
-        TrackPlayer.pause()
-        count++
-        if (count === SOUND_LOOP_AMOUNT) {
-          clearInterval(intervalId);
-        }
-      }, 500) // sound duration divide by 2
-    }, DURATION_BETWEEN_LOOP) // notification duration
+    clearInterval(_timeout)
   }
 
   const handlePlayNotificationSound = (eventObj: any = null) => {
     setCurrentEvent(eventObj)
-    playSoundNotification()
+    if (times > 0) {
+      if (times === 3) {
+        times = 0
+        return
+      }
+      return
+    }
+    _timeout = setInterval(() => {
+      if (times < SOUND_LOOP) {
+        notificationSound.play()
+        times++
+      } else {
+        clearInterval(_timeout)
+        return
+      }
+    }, 2500)
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -98,15 +96,11 @@ const NewOrderNotificationUI = (props: any) => {
         handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
-    if (evtType === 3 || value?.author_id === user.id) return
-    handlePlayNotificationSound({
+    if (evtType === 3 || value.author_id === user.id) return
+    setTimeout(() => handlePlayNotificationSound({
       evt: evtType,
-      orderId: value?.driver
-        ? value?.order_id
-        : evtList[evtType].event === 'messages'
-          ? value?.order?.id
-          : value?.order_id ?? value?.id
-    })
+      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
+    }), 1000)
   }
 
   useEffect(() => {

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

@@ -106,6 +106,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
 										businessZones={businessState?.business?.zones}
+										delta={30}
 									/>
 								</WrapBusinessMap>
 							)}

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

@@ -192,6 +192,7 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 
 	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && !paymethodSelected?.data?.card?.zipcode
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
@@ -200,7 +201,8 @@ const CheckoutUI = (props: any) => {
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
-		(validateCommentsCartField)
+		(validateCommentsCartField) ||
+		(validateZipcodeCard)
 		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -896,6 +898,15 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
 									</OText>
 								)}
+
+								{validateZipcodeCard && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}

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

@@ -20,7 +20,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     handleToggleMap,
     locations,
     isIntGeoCoder,
-    businessZones
+    businessZones,
+    delta
   } = props
 
   const [, t] = useLanguage()
@@ -31,8 +32,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
+    latitudeDelta: delta ?? 0.0010,
+    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -265,7 +266,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng}}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}

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

@@ -152,6 +152,7 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 		const newMessage: any = [];
 		messages.messages.map((message: any) => {
+			if (message.change?.attribute === 'driver_group_id') return
 			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
 				newMessage.push({
 					_id: message?.id,

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

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -4,6 +4,7 @@ import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -40,10 +41,13 @@ export const StripeCardsListUI = (props: any) => {
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
-
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
 	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		handleCardClick(card);
 		onSelectCard(card);
 	}
@@ -92,7 +96,8 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
+							{console.log(card?.zipcode && validateZipcodeCard)}
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
 									{card.id === cardSelected?.id ? (
@@ -117,6 +122,13 @@ export const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert

package/themes/original/src/types/index.tsx

@@ -636,6 +636,7 @@ export interface GoogleMapsParams {
 	handleToggleMap?: () => void,
 	isIntGeoCoder: boolean,
 	businessZones?: any
+	delta?: number
 }
 
 export interface HelpParams {