ordering-ui-react-native 0.18.0 → 0.18.1-release

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

@@ -16,6 +16,7 @@ export const SearchBar = (props: any) => {
     isCancelXButtonShow,
     noBorderShow,
     borderStyle,
+    containerStyle
   } = props;
 
   const [, t] = useLanguage();
@@ -67,7 +68,7 @@ export const SearchBar = (props: any) => {
   });
 
   return (
-    <View style={[styles.container]}>
+    <View style={{ ...styles.container, ...containerStyle}}>
       <OInput
         forwardRef={inputRef}
         value={searchValue}

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Dimensions, Linking } from 'react-native';
-import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import { View, StyleSheet, Dimensions, Linking, ScrollView, TouchableOpacity } from 'react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NetInfo from '@react-native-community/netinfo';
 import { useTheme } from 'styled-components/native';
@@ -134,7 +133,8 @@ const StoresListUI = (props: BusinessesListingParams) => {
               lazyLoad
               isCancelXButtonShow={!!searchValue}
               onCancel={() => handleChangeSearch('')}
-              placeholder={t('FIND_BUSINESS', 'Find a business')}
+              placeholder={t('SEARCH', 'Search')}
+              containerStyle={{ width: 210 }}
             />
           </View>
         )}
@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>
@@ -181,6 +181,7 @@ const StoresListUI = (props: BusinessesListingParams) => {
               isBusinessOpen={business?.open}
               setIsUpdateStore={setIsUpdateStore}
               isUpdateStore={isUpdateStore}
+              navigation={navigation}
             />
           ))}
 

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

@@ -49,7 +49,8 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
-    isAlsea
+    isAlsea,
+    isHideDriverStatus
   } = props;
 
   const [{ user }] = useSession();
@@ -345,7 +346,7 @@ const ProfileUI = (props: ProfileParams) => {
             />
           </CenterView>
 
-          {user?.level === 4 && (
+          {user?.level === 4 && !isHideDriverStatus && (
             <EnabledStatusDriver>
               <View style={{ flex: 1 }}>
                 <OText
@@ -478,19 +479,17 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-          {!!user?.schedule && (
-            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
-                <AntDesignIcon size={18} name='right' />
-              </View>
-              <View style={{
-                borderBottomColor: theme.colors.tabBar,
-                borderBottomWidth: 1,
-                marginTop: 10
-              }} />
-            </Pressable>
-          )}
+          <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+              <AntDesignIcon size={18} name='right' />
+            </View>
+            <View style={{
+              borderBottomColor: theme.colors.tabBar,
+              borderBottomWidth: 1,
+              marginTop: 10
+            }} />
+          </Pressable>
           <Actions>
             <LanguageSelector />
 

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

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }  
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', 'Connection status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

package/themes/business/src/components/WebsocketStatus/styles.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

package/themes/business/src/components/shared/OModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, StyleSheet, SafeAreaView, View } from 'react-native';
+import { Modal, StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import OIcon from './OIcon';
 import OText from './OText';
@@ -158,6 +158,18 @@ const OModal = (props: Props): React.ReactElement => {
       fontWeight: '600',
       textAlign: 'center',
     },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
   });
 
   return (
@@ -205,14 +217,9 @@ const OModal = (props: Props): React.ReactElement => {
             {!customClose && (
               <View style={styles.titleSection}>
                 <View style={styles.titleGroups}>
-                  <OIconButton
-                    icon={theme.images.general.arrow_left}
-                    iconStyle={{ width: 20, height: 20 }}
-                    borderColor={theme.colors.clear}
-                    style={styleCloseButton || styles.cancelBtn}
-                    onClick={onClose}
-                  />
-
+                  <TouchableOpacity onPress={() => onClose()} style={styles.btnBackArrow}>
+                    <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+                  </TouchableOpacity>
                   <OText
                     size={16}
                     style={styles.modalText}

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

@@ -25,18 +25,18 @@ export interface LoginParams {
   enableReCaptcha?: any;
 
   otpType?: string,
-	setOtpType: (type : string) => void,
-	generateOtpCode: (values ?: any) => void,
-	useLoginOtpEmail?: boolean,
-	useLoginOtpCellphone?: boolean,
-	useLoginOtp?: boolean
+  setOtpType: (type: string) => void,
+  generateOtpCode: (values?: any) => void,
+  useLoginOtpEmail?: boolean,
+  useLoginOtpCellphone?: boolean,
+  useLoginOtp?: boolean
 }
 export interface otpParams {
-	willVerifyOtpState: boolean,
-	setWillVerifyOtpState: (val : boolean) => void,
-	onSubmit: () => void,
-	handleLoginOtp: (code : string) => void,
-	setAlertState: any,
+  willVerifyOtpState: boolean,
+  setWillVerifyOtpState: (val: boolean) => void,
+  onSubmit: () => void,
+  handleLoginOtp: (code: string) => void,
+  setAlertState: any,
   formState?: any
 }
 export interface ProfileParams {
@@ -57,6 +57,7 @@ export interface ProfileParams {
   showField?: any;
   isRequiredField?: any;
   isAlsea?: boolean;
+  isHideDriverStatus?: boolean;
 }
 
 export interface AddressListParams {
@@ -172,6 +173,7 @@ export interface BusinessControllerParams {
   isBusinessOpen?: boolean;
   businessWillCloseSoonMinutes?: number;
   updateBusiness?: (id: any, value: any) => {};
+  navigation?: any;
 }
 export interface BusinessProductsListingParams {
   navigation?: any;
@@ -365,6 +367,12 @@ export interface PreviousMessagesParams {
   loadMessages?: (id: any) => {};
   handleReorder?: (order: any) => {};
   onNavigationRedirect?: (route: string, params?: any) => {};
+  getOrders?: any;
+  loading?: boolean;
+  reload?: boolean;
+  tabs?: any;
+  loadMore: any
+  error?: boolean
 }
 export interface OrderDetailsParams {
   handleUpdateLocationDriver?: () => {};
@@ -612,3 +620,10 @@ export interface ReviewCustomerParams {
 export interface NoNetworkParams {
   image?: any;
 }
+
+export interface OrderDetailsLogisticParams {
+  navigation: any,
+  handleClickLogisticOrder: any,
+  orderAssingId: number,
+  order: any
+}

package/themes/business/src/utils/index.tsx

@@ -346,7 +346,7 @@ export const getOrderStatus = (s: string, t: any) => {
   return objectStatus && objectStatus;
 };
 
-export const transformDistance = (value : number, distanceUnit?: string) => {
+export const transformDistance = (value: number, distanceUnit?: string) => {
   return distanceUnit === 'mi'
     ? (value / 1.609).toFixed(2)
     : distanceUnit === 'ft'
@@ -354,7 +354,7 @@ export const transformDistance = (value : number, distanceUnit?: string) => {
       : (value).toFixed(2)
 }
 
-export const formatSeconds = (seconds : number) => {
+export const formatSeconds = (seconds: number) => {
   // Hours, minutes and seconds
   const hrs = Math.floor(seconds / 3600)
   const mins = Math.floor((seconds % 3600) / 60)
@@ -369,3 +369,30 @@ export const formatSeconds = (seconds : number) => {
   ret += '' + secs
   return ret
 }
+
+export const calculateDistance = (
+  pointA: { lat: number; lng: number },
+  pointB: { latitude: number; longitude: number },
+) => {
+  const lat1 = pointA.lat;
+  const lon1 = pointA.lng;
+
+  const lat2 = pointB?.latitude;
+  const lon2 = pointB?.longitude;
+
+  const R = 6371e3;
+  const φ1 = lat1 * (Math.PI / 180);
+  const φ2 = lat2 * (Math.PI / 180);
+  const Δφ = (lat2 - lat1) * (Math.PI / 180);
+  const Δλ = (lon2 - lon1) * (Math.PI / 180);
+
+  const a =
+    Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+    Math.cos(φ1) * Math.cos(φ2) * (Math.sin(Δλ / 2) * Math.sin(Δλ / 2));
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  const distance = R * c;
+  const distanceInKm = distance / 1000;
+  return distanceInKm;
+};

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions

package/themes/kiosk/src/components/Intro/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, View, RefreshControl, ScrollView, Pressable } from 'react-native';
+import { StyleSheet, View, Pressable, TouchableOpacity } from 'react-native';
 import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 
@@ -9,6 +9,7 @@ import OButton from '../../components/shared/OButton';
 import { LanguageSelector } from '../../components/LanguageSelector';
 import { LogoutPopup } from '../../components/LogoutPopup';
 import { PORTRAIT, LANDSCAPE, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
+import { OIcon } from '../../components/shared';
 
 const Intro = (props: any): React.ReactElement => {
   const { navigation } = props;
@@ -41,6 +42,19 @@ const Intro = (props: any): React.ReactElement => {
     //     />
     //   }
     // >
+    <>
+      <View style={{ position: 'absolute', top: 25, right: 20, zIndex: 1000 }}>
+        <TouchableOpacity
+          onPress={() => setShowLogoutPopup(true)}
+        >
+          <OIcon
+            src={theme.images.general.menulogout}
+            width={24}
+            height={24}
+            color={theme.colors.disabledContrast}
+          />
+        </TouchableOpacity>
+      </View>
       <Pressable onPress={goBusiness}>
         <View style={{ height: orientationState?.dimensions?.height }}>
           {orientationState.orientation === PORTRAIT ? (
@@ -134,6 +148,7 @@ const Intro = (props: any): React.ReactElement => {
           />
         </View>
       </Pressable>
+    </>
     // </ScrollView>
   );
 };

package/themes/kiosk/src/components/LoginForm/index.tsx

@@ -380,12 +380,14 @@ const LoginFormUI = (props: LoginParams) => {
   );
 
   const note = (
-    <OText size={24} mBottom={18}>
-      {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
-      <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
-        {t('SUPPORT_DEPARTMENT', 'support department')}
+    useRootPoint && (
+      <OText size={24} mBottom={18}>
+        {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
+        <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
+          {t('SUPPORT_DEPARTMENT', 'support department')}
+        </OText>
       </OText>
-    </OText>
+    )
   )
 
   return (

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;