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

package/package.json

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

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

@@ -386,30 +386,21 @@ const ChatUI = (props: MessagesParams) => {
           style={{ ...styles.firstMessageText, textAlign: 'center' }}
         >
           {
-            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.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
               ?
-              `${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')}`
+              `${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,82 +1,102 @@
+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 SoundPlayer from 'react-native-sound-player'
+
+import {
+  NewOrderNotification as NewOrderNotificationController,
+  useApi,
+  useEvent,
+  useLanguage,
+  useSession
+} from 'ordering-components/native'
 
-import { useLocation } from '../../hooks/useLocation'
 import { OIcon, OText } from '../shared'
 import { NotificationContainer } from './styles'
+import { useLocation } from '../../hooks/useLocation'
 
-Sound.setCategory('Playback', true)
-Sound.setMode('Default')
-
+const DELAY_SOUND = 2500 // 2 sec
 const windowWidth = Dimensions.get('screen').width
 
-const SOUND_LOOP = 3
+const SoundPlayerComponent = (props: any) => {
+  const { evtList, currentEvent, handleCloseEvents } = props
 
-const NewOrderNotificationUI = (props: any) => {
-  const { isBusinessApp } = props
-  const [events] = useEvent()
   const theme = useTheme()
-  const [, t] = useLanguage()
-  const [{ user, token }] = useSession()
-  const [ordering] = useApi()
-  const { getCurrentLocation } = useLocation();
-  const [currentEvent, setCurrentEvent] = useState<any>(null)
-
-  const evtList: any = {
-    1: {
-      event: 'messages',
-      message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
-      message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
-    },
-    2: {
-      event: 'order_added',
-      message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
-      message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
-    },
-    3: {
-      event: 'order_updated',
-      message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
-      message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
-    },
-  }
+  const [count, setCount] = useState(0);
 
-  const soundSrc = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
+  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
 
-  const notificationSound = new Sound(soundSrc, '', () => { });
+  useEffect(() => {
+    const id = setInterval(() => setCount(count + 1), 2500)
 
-  let _timeout: any = null
-  let times = 0
+    const playSound = async () => {
+      SoundPlayer.playUrl(URL_SOUND)
+      await new Promise(resolve => setTimeout(resolve, DELAY_SOUND))
+      SoundPlayer.stop()
+    }
 
-  const handleCloseEvents = () => {
-    notificationSound.stop()
-    setCurrentEvent(null)
-    clearInterval(_timeout)
-  }
+    playSound()
 
-  const handlePlayNotificationSound = (eventObj: any = null) => {
-    setCurrentEvent(eventObj)
-    if (times > 0) {
-      if (times === 3) {
-        times = 0
-        return
-      }
-      return
+    return () => {
+      SoundPlayer.stop()
+      clearInterval(id);
     }
-    _timeout = setInterval(() => {
-      if (times < SOUND_LOOP) {
-        notificationSound.play()
-        times++
-      } else {
-        clearInterval(_timeout)
-        return
-      }
-    }, 2500)
-  }
+  }, [count])
+
+  return (
+    <Modal
+      animationType='slide'
+      transparent={true}
+      visible={!!currentEvent?.orderId}
+    >
+      <NotificationContainer>
+        <View style={styles.modalView}>
+          <TouchableOpacity
+            style={styles.wrapperIcon}
+            onPress={() => handleCloseEvents()}
+          >
+            <Icon name="x" size={30} />
+          </TouchableOpacity>
+          <OText
+            size={18}
+            color={theme.colors.textGray}
+            weight={600}
+          >
+            {evtList(currentEvent)[currentEvent?.evt]?.message}
+          </OText>
+          <OIcon
+            src={theme.images.general.newOrder}
+            width={250}
+            height={200}
+          />
+          <OText
+            color={theme.colors.textGray}
+            mBottom={15}
+          >
+            {evtList(currentEvent)[currentEvent?.evt]?.message2}
+          </OText>
+        </View>
+      </NotificationContainer>
+    </Modal>
+  )
+}
+
+const NewOrderNotificationUI = (props: any) => {
+  const { isBusinessApp, evtList } = props
+
+  const [events] = useEvent()
+  const [{ user, token }] = useSession()
+  const [ordering] = useApi()
+  const { getCurrentLocation } = useLocation()
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const handleEventNotification = async (evtType: number, value: any) => {
     if (value?.driver) {
@@ -93,14 +113,18 @@ const NewOrderNotificationUI = (props: any) => {
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
-        handlePlayNotificationSound({ evt: 2, orderId: value?.id })
+        setCurrentEvent({ evt: 2, orderId: value?.id })
       }
     }
-    if (evtType === 3 || value.author_id === user.id) return
-    setTimeout(() => handlePlayNotificationSound({
+    if (evtType === 3 || value?.author_id === user.id) return
+    setCurrentEvent({
       evt: evtType,
-      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
-    }), 1000)
+      orderId: value?.driver
+        ? value?.order_id
+        : evtList(currentEvent)[evtType].event === 'messages'
+          ? value?.order?.id
+          : value?.order_id ?? value?.id
+    })
   }
 
   useEffect(() => {
@@ -120,48 +144,21 @@ const NewOrderNotificationUI = (props: any) => {
   }, [])
 
   useEffect(() => {
-    return () => handleCloseEvents()
+    return () => setCurrentEvent(null)
   }, [])
 
   return (
     <>
-      <Modal
-        animationType='slide'
-        transparent={true}
-        visible={!!currentEvent?.orderId}
-      >
-        <NotificationContainer>
-          <View style={styles.modalView}>
-            <TouchableOpacity
-              style={styles.wrapperIcon}
-              onPress={() => handleCloseEvents()}
-            >
-              <Icon name="x" size={30} />
-            </TouchableOpacity>
-            <OText
-              size={18}
-              color={theme.colors.textGray}
-              weight={600}
-            >
-              {evtList[currentEvent?.evt]?.message}
-            </OText>
-            <OIcon
-              src={theme.images.general.newOrder}
-              width={250}
-              height={200}
-            />
-            <OText
-              color={theme.colors.textGray}
-              mBottom={15}
-            >
-              {evtList[currentEvent?.evt]?.message2}
-            </OText>
-          </View>
-        </NotificationContainer>
-      </Modal>
+      {!!currentEvent ? (
+        <SoundPlayerComponent
+          evtList={evtList}
+          currentEvent={currentEvent}
+          handleCloseEvents={() => setCurrentEvent(null)}
+        />
+      ) : null}
     </>
   )
-}
+};
 
 const styles = StyleSheet.create({
   modalView: {
@@ -181,9 +178,28 @@ const styles = StyleSheet.create({
 })
 
 export const NewOrderNotification = (props: any) => {
+  const [, t] = useLanguage()
+
   const newOrderNotificationProps = {
     ...props,
-    UIComponent: NewOrderNotificationUI
+    UIComponent: NewOrderNotificationUI,
+    evtList: (currentEvent: any) => ({
+      1: {
+        event: 'messages',
+        message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
+        message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
+      },
+      2: {
+        event: 'order_added',
+        message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
+        message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
+      },
+      3: {
+        event: 'order_updated',
+        message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
+        message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
+      },
+    })
   };
 
   return <NewOrderNotificationController {...newOrderNotificationProps} />;

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

@@ -6,11 +6,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import TrackPlayer, {
-  RepeatMode,
-  Capability,
-  AppKilledPlaybackBehavior
-} from 'react-native-track-player';
 
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
@@ -112,79 +107,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
 
-  const URL_SOUND = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
-
-  const setupPlayer = async (options: any) => {
-    const setup = async () => {
-      try {
-        await TrackPlayer.setupPlayer(options);
-      } catch (error) {
-        return (error as Error & { code?: string }).code;
-      }
-    }
-    while ((await setup()) === 'android_cannot_setup_player_in_background') {
-      await new Promise<void>((resolve) => setTimeout(resolve, 1));
-    }
-  };
-
-  const SetupService = async () => {
-    await setupPlayer({ autoHandleInterruptions: true });
-    await TrackPlayer.updateOptions({
-      android: {
-        appKilledPlaybackBehavior:
-          AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
-      },
-      capabilities: [
-        Capability.Play,
-        Capability.Pause,
-        Capability.SkipToNext,
-        Capability.SkipToPrevious,
-        Capability.SeekTo,
-      ],
-      compactCapabilities: [
-        Capability.Play,
-        Capability.Pause,
-        Capability.SkipToNext,
-      ],
-      progressUpdateEventInterval: 2,
-    });
-    await TrackPlayer.setRepeatMode(RepeatMode.Track);
-  };
-
-  const QueueInitialTracksService = async () => {
-    await TrackPlayer.add([
-      {
-        id: 'notification',
-        url: URL_SOUND,
-        title: 'notification'
-      },
-    ]);
-  }
-
-  function useSetupPlayer() {
-    const [playerReady, setPlayerReady] = useState<boolean>(false)
-
-    useEffect(() => {
-      let unmounted = false;
-      (async () => {
-        await SetupService()
-        if (unmounted) return
-        setPlayerReady(true)
-        const queue = await TrackPlayer.getQueue()
-        if (unmounted) return
-        if (queue.length <= 0) {
-          await QueueInitialTracksService()
-        }
-      })();
-      return () => {
-        unmounted = true;
-      };
-    }, []);
-    return playerReady;
-  }
-
-  const isPlayerReady = useSetupPlayer()
-
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
     { key: 'in_time', name: t('OK', 'Ok') },
@@ -780,10 +702,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
 
       {isBusinessApp && (
-        <NewOrderNotification
-          isBusinessApp={isBusinessApp}
-          isPlayerReady={isPlayerReady}
-        />
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
       )}
 
       {(openSearchModal || openSLASettingModal) && (

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

@@ -106,7 +106,6 @@ 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,7 +192,6 @@ 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 ||
@@ -201,8 +200,7 @@ const CheckoutUI = (props: any) => {
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
-		(validateCommentsCartField) ||
-		(validateZipcodeCard)
+		(validateCommentsCartField)
 		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -898,15 +896,6 @@ 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,8 +20,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     handleToggleMap,
     locations,
     isIntGeoCoder,
-    businessZones,
-    delta
+    businessZones
   } = props
 
   const [, t] = useLanguage()
@@ -32,8 +31,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: delta ?? 0.0010,
-    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
+    latitudeDelta: 0.0010,
+    longitudeDelta: 0.0010 * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -266,7 +265,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: center.lat, longitude: center.lng}}
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.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,7 +152,6 @@ 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,9 +40,6 @@ 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,7 +4,6 @@ import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
-	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -41,13 +40,10 @@ 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);
 	}
@@ -96,8 +92,7 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
-							{console.log(card?.zipcode && validateZipcodeCard)}
+						<OSItem key={card.id} isUnique={cardsList.cards.length}>
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
 									{card.id === cardSelected?.id ? (
@@ -122,13 +117,6 @@ 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,7 +636,6 @@ export interface GoogleMapsParams {
 	handleToggleMap?: () => void,
 	isIntGeoCoder: boolean,
 	businessZones?: any
-	delta?: number
 }
 
 export interface HelpParams {