ordering-ui-react-native 0.17.48 → 0.17.50

package/package.json

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

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

@@ -14,6 +14,8 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
+const SOUND_LOOP = 3
+
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -22,8 +24,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
-  const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  let [currentEvent, setCurrentEvent] = useState<any>(null)
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -43,29 +44,27 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
+  const notificationSound = new Sound(theme.sounds.notification);
 
-  const handlePlayNotificationSound = () => {
-    if (currentEvent) return
-    let times = 0
-    const _timeout = setInterval(function () {
-      notificationSound.play(success => {
-        if (success) {
-          times = times + 1
-        }
-      })
-      setSoundTimeout(_timeout)
-      if (times === 3) {
-        clearInterval(_timeout)
-        clearInterval(soundTimeout)
-      }
-    }, 2500)
+  let _timeout: any = null
+
+  const handleCloseEvents = () => {
+    notificationSound.stop()
+    setCurrentEvent(null)
+    clearInterval(_timeout)
   }
 
-  const handleCloseModal = () => {
-    clearInterval(soundTimeout)
-    currentEvent = null
-    setCurrentEvent({ evt: null })
+  const handlePlayNotificationSound = (eventObj: any = null) => {
+    setCurrentEvent(eventObj)
+    let times = 1
+    if (times < SOUND_LOOP) {
+      _timeout = setInterval(() => {
+        notificationSound.setVolume(1).play(success => success && (times = times + 1))
+        if (times === SOUND_LOOP) {
+          clearInterval(_timeout)
+        }
+      }, 2500)
+    }
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -79,26 +78,15 @@ const NewOrderNotificationUI = (props: any) => {
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch (error) {
-          console.log(error)
-      }
+      } catch {}
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
       if (assignedSecondsDiff < 5 && !isBusinessApp) {
-        handlePlayNotificationSound()
-        clearInterval(soundTimeout)
-        currentEvent = { evt: 2, orderId: value?.id }
-        setCurrentEvent({ evt: 2, orderId: value?.id })
+        handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     if (evtType === 3 || value.author_id === user.id) return
-    handlePlayNotificationSound()
-    clearInterval(soundTimeout)
-    currentEvent = {
-      evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
-    }
-    setCurrentEvent({
+    handlePlayNotificationSound({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
     })
@@ -116,10 +104,7 @@ const NewOrderNotificationUI = (props: any) => {
   }, [])
 
   useEffect(() => {
-    notificationSound.setVolume(1);
-    return () => {
-      notificationSound.release();
-    }
+    return () => handleCloseEvents()
   }, [])
 
   return (
@@ -133,7 +118,7 @@ const NewOrderNotificationUI = (props: any) => {
           <View style={styles.modalView}>
             <TouchableOpacity
               style={styles.wrapperIcon}
-              onPress={() => handleCloseModal()}
+              onPress={() => handleCloseEvents()}
             >
               <Icon name="x" size={30} />
             </TouchableOpacity>

package/themes/original/index.tsx

@@ -95,6 +95,7 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
+import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
@@ -257,6 +258,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	PageBanner,
 	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,

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

@@ -42,6 +42,7 @@ import Animated from 'react-native-reanimated'
 import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
+import { PageBanner } from '../PageBanner'
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -403,6 +404,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							/>
 						</ProfessionalFilterWrapper>
 					)}
+					<PageBanner position='app_business_page' />
 					<View
 						style={{
 							height: 8,

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -55,6 +55,7 @@ import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { PageBanner } from '../../../PageBanner'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -549,6 +550,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)
 			}
+
+			<PageBanner position='app_business_listing' />
+
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
 				{!businessId && (

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

@@ -1134,8 +1134,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               )}
               <Total>
                 <Table>
-                  <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
-                  <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>
+                  <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
+                  <OText size={14} style={{ fontWeight: 'bold' }} color={theme.colors.textNormal}>
                     {parsePrice(order?.summary?.total ?? order?.total)}
                   </OText>
                 </Table>

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

@@ -0,0 +1,104 @@
+import React from 'react'
+import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
+
+import { View, StyleSheet } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Swiper from 'react-native-swiper'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useTheme } from 'styled-components/native';
+import { PageBannerWrapper } from './styles'
+
+const PageBannerUI = (props: any) => {
+  const {
+    pageBannerState
+  } = props
+
+	const theme = useTheme();
+	const [{ optimizeImage }] = useUtils();
+
+  const styles = StyleSheet.create({
+    mainSwiper: {
+			height: 300,
+		},
+    swiperButton: {
+			marginHorizontal: 25,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(208,208,208,0.5)'
+		},
+    sliderWrapper: {
+      width: '100%',
+      height: 300
+    }
+  })
+
+  return (
+    <>
+      {pageBannerState.loading ? (
+        <PageBannerWrapper>
+          <Placeholder
+            Animation={Fade}
+          >
+            <PlaceholderLine
+							height={300}
+							style={{ marginBottom: 20, borderRadius: 8 }}
+						/>
+          </Placeholder>
+        </PageBannerWrapper>
+      ) : (
+        <>
+          {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
+            <PageBannerWrapper>
+              <Swiper
+                loop={false}
+                showsButtons={true}
+                style={styles.mainSwiper}
+                showsPagination={false}
+                prevButton={
+                  <View style={styles.swiperButton}>
+                    <IconAntDesign
+                      name="caretleft"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </View>
+                }
+                nextButton={
+                  <View style={styles.swiperButton}>
+                    <IconAntDesign
+                      name="caretright"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </View>
+                }
+              >
+                {pageBannerState.banner?.items.map((img, i) => (
+                  <View key={i} style={styles.sliderWrapper}>
+                    <FastImage
+                      style={{ height: '100%', width: '100%' }}
+                      resizeMode='cover'
+                      source={{ uri: optimizeImage(img.url, 'h_300,c_limit') }}
+                    />
+                  </View>
+                ))}
+              </Swiper>
+            </PageBannerWrapper>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const PageBanner = (props: any) => {
+  const pageBannerProps = {
+    ...props,
+    UIComponent: PageBannerUI
+  }
+  return <PageBannerController {...pageBannerProps} />
+}

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native'
+
+export const PageBannerWrapper = styled.View`
+  margin-horizontal: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-vertical: 30px;
+`