ordering-ui-react-native 0.15.64 → 0.15.66-test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.64",
+  "version": "0.15.66-test",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -90,7 +90,7 @@
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
     "react-native-map-link": "^2.8.2",
-    "react-native-maps": "^0.28.0",
+    "react-native-maps": "0.31.1",
     "react-native-modal-dropdown": "^1.0.1",
     "react-native-onesignal": "^4.1.1",
     "react-native-paper": "^4.7.2",

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, enableLatestRenderer} from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -152,11 +152,26 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       animated: true,
     });
   }
+  
+  const handleEnableLatestRenderer = async () => {
+    try {
+      const result = await enableLatestRenderer()
+      if (result == 'LATEST') {
+        setMapErrors && setMapErrors('Latest')
+      }else {
+        setMapErrors && setMapErrors('Legacy')
+      }
+     
+    } catch (error: any) {
+      setMapErrors && setMapErrors(error)
+    }
+  }
 
   useEffect(() => {
+    handleEnableLatestRenderer()
     Geocoder.init(googleMapsApiKey)
   }, [])
-
+  
 
   useEffect(() => {
     if (saveLocation) {

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

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import FastImage from 'react-native-fast-image'
 import {
   WalletList,
   useLanguage,
   useUtils,
-  useConfig
+  useConfig,
+  useSession
 } from 'ordering-components/native'
 
 import {
@@ -15,7 +17,10 @@ import {
   TransactionsWrapper,
   OTabs,
   OTab,
-  SectionContent
+  SectionContent,
+  LoyaltyContent,
+  LoyaltyWrapp,
+  LoyaltyImg
 } from './styles'
 
 import NavBar from '../NavBar'
@@ -34,16 +39,32 @@ const WalletsUI = (props: any) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ user }] = useSession()
   const theme = useTheme()
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  const styles = StyleSheet.create({
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });
+
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
   const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   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 walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
@@ -106,6 +127,39 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
+            {!!loyaltyLevel && (
+              <LoyaltyContent>
+                <LoyaltyWrapp>
+                  <OText size={20}>
+                    {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                  </OText>
+                  {loyaltyLevel.image ? (
+                    <FastImage
+                      style={styles.logoStyle}
+                      source={{
+                        uri: loyaltyLevel.image,
+                        priority: FastImage.priority.high,
+                        cache:FastImage.cacheControl.web
+                      }}
+                      resizeMode={FastImage.resizeMode.contain}
+                    />
+                  ) : (
+                    <LoyaltyImg
+                      source={theme.images.dummies.loyaltyLevel}
+                      resizeMode='contain'
+                    />
+                  )}
+                  <OText
+                    size={22}
+                    weight='bold'
+                    style={{ textTransform: 'uppercase' }}
+                    color={theme.colors.primary}
+                  >
+                    {loyaltyLevel.name}
+                  </OText>
+                </LoyaltyWrapp>
+              </LoyaltyContent>
+            )}
             <BalanceElement>
               <OText size={20} style={{fontWeight: '600'}}>
                 {currentWalletSelected?.type === 'cash'

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

@@ -41,3 +41,24 @@ export const OTabs = styled.View`
 export const OTab = styled.View`
   padding-horizontal: 10px;
 `;
+
+export const LoyaltyContent = styled.View`
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const LoyaltyWrapp = styled.View`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const LoyaltyImg = styled.ImageBackground`
+  position: relative;
+  height: 150px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`