ordering-ui-react-native 0.17.67 → 0.17.68-release

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

@@ -33,8 +33,7 @@ export const NotificationIcon = styled.View`
 export const AcceptOrRejectOrder = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  flex: 1;
-  margin: 10px;
+  margin: ${(props: any) => props.m ?? 10}px;
 `
 export const Timestatus = styled.View`
   position: relative;;
@@ -42,4 +41,33 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
-`
+`
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+  padding-vertical: 10px;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  paddingVertical: 0;
+  marginLeft: 3px;
+`
+
+export const ContentInfo = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+`
+
+export const AccordionContent = styled.View`
+  overflow: hidden;
+`
+
+export const ProductOptionsList = styled.View`
+  margin-top: 20px;
+  margin-left: 20px;
+`

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

@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { View, Animated } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,8 +38,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [lengthMore, setLengthMore] = useState(false);
 
   const productInfo = () => {
     if (isCartProduct) {
@@ -108,6 +116,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
     }
   }, []);
 
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <AccordionSection>
       <Accordion
@@ -288,9 +300,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                   color={theme.colors.unselectText}>
                   {t('COMMENT', 'Comment')}
                 </OText>
-                <OText size={12} mLeft={10} color={theme.colors.unselectText}>
+                <OText
+                  size={12}
+                  style={{ width: '100%', paddingLeft: 10 }}
+                  color={theme.colors.unselectText}
+                  onTextLayout={onTextLayout}
+                  numberOfLines={isReadMore ? 15 : 2}
+                  ellipsizeMode="tail"
+                >
                   {product.comment}
                 </OText>
+                {lengthMore && (
+                  <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)} style={{ marginLeft: 10 }}>
+                    <OText size={10} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+                  </TouchableOpacity>
+                )}
               </ProductComment>
             )}
           </AccordionContent>

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
@@ -39,7 +41,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     reviewState,
     setReviewState,
     actionState,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    handleCustomCustomerReview
   } = props
 
   const theme = useTheme()
@@ -85,6 +88,18 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       marginBottom: 10,
       backgroundColor: theme.colors.lightGray
     },
+    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: 20
+    },
     inputTextArea: {
       borderColor: theme.colors.lightGray,
       borderRadius: 8,
@@ -146,13 +161,22 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   useEffect(() => {
     if (scrollref?.current) {
       Keyboard.addListener('keyboardDidShow', () => {
-        scrollref.current.scrollToEnd()
+        scrollref?.current?.scrollToEnd && scrollref.current.scrollToEnd()
       })
     }
   }, [scrollref?.current])
 
   const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
 
+  const handleReviewClick = () => {
+    handleCustomCustomerReview
+      ? handleCustomCustomerReview({
+        qualification: reviewState?.qualification,
+        comment: reviewState?.comment
+      })
+      : handleSendCustomerReview()
+  }
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -167,18 +191,9 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       }}
     >
       <View>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 16 }}
-          style={{
-            maxWidth: 40,
-            height: 20,
-            justifyContent: 'flex-end',
-            marginBottom: 20,
-          }}
-          onClick={() => closeModal()}
-        />
+        <TouchableOpacity onPress={() => closeModal()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
         <OText
           size={20}
           weight="600"
@@ -303,7 +318,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
       <ActionButtonWrapper>
         <FloatingButton
-          firstButtonClick={() => handleSendCustomerReview()}
+          firstButtonClick={() => handleReviewClick()}
           btnText={actionState.loading ? t('LOADING', 'Loading') : t('SEND_REVIEW', 'Send Review')}
           color={theme.colors.primary}
           widthButton={'100%'}

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';
@@ -149,10 +148,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}>

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

@@ -478,19 +478,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/shared/OLink.tsx

@@ -12,10 +12,12 @@ interface Props {
   TextStyle?: TextStyle;
   type?: string;
   hasButton?: boolean;
+  numberOfLines?: number;
+  onTextLayout?: (e : any) => void;
 }
 
 const OLink = (props: Props): React.ReactElement => {
-  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton } = props;
+  const { url, shorcut, color, PressStyle, TextStyle, type, hasButton, numberOfLines, onTextLayout } = props;
   const [, t] = useLanguage();
 
   const handleAlert = () =>
@@ -29,8 +31,19 @@ const OLink = (props: Props): React.ReactElement => {
       ],
     );
 
+  const handleInvalidNumberAlert = () =>
+    Alert.alert(
+      t('ERROR_OPENING_THE_LINK', 'Error opening the link'),
+      t('INVALID_NUMBER', 'Invalid number'),
+      [
+        {
+          text: t('OK', 'Ok'),
+        },
+      ],
+    );
+
   const handleOpenUrl = async (breakFunction = false) => {
-    if(breakFunction) {
+    if (breakFunction) {
       return
     }
     if (!url) {
@@ -40,8 +53,9 @@ const OLink = (props: Props): React.ReactElement => {
 
     try {
       const supported = await Linking.canOpenURL(url);
-
-      if (supported) {
+      if (url && url?.includes('tel:')) {
+        url?.includes('invalid') ? handleInvalidNumberAlert() : await Linking.openURL(url)
+      } else if (supported) {
         await Linking.openURL(url);
       } else {
         handleAlert();
@@ -57,20 +71,26 @@ const OLink = (props: Props): React.ReactElement => {
         <OButton
           onClick={() => handleOpenUrl()}
           text={shorcut} imgRightSrc=''
-          textStyle={{color: 'white'}}
-          style={{width: '100%', alignSelf: 'center', borderRadius: 10}}
+          textStyle={{ color: 'white' }}
+          style={{ width: '100%', alignSelf: 'center', borderRadius: 10 }}
         />
       ) : (
-      <OText
-        style={TextStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        color={color}>
-        {shorcut}
-      </OText>
+        <OText
+          style={TextStyle}
+          numberOfLines={numberOfLines ?? 1}
+          ellipsizeMode="tail"
+          color={color}
+          onTextLayout={onTextLayout}
+        >
+          {shorcut}
+        </OText>
       )}
     </Pressable>
   );
 };
 
+OLink.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
 export default OLink;

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/components/shared/OText.tsx

@@ -40,16 +40,22 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
-  textDecorationLine?: string
+  textDecorationLine?: string;
+  lineHeight?: number;
+  onTextLayout?: (e : any) => void;
 }
 
 const OText = (props: Props): React.ReactElement => {
   return (
-    <SText {...props} style={props.style}>
+    <SText {...props} style={[props.style, { lineHeight: props.lineHeight }]} onTextLayout={props.onTextLayout}>
       {props.children}
       {props.space && ' '}
     </SText>
   );
 };
 
+OText.defaultProps = {
+  onTextLayout: (e: any) => {}
+};
+
 export default OText;

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

@@ -25,18 +25,19 @@ 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 {
   navigation?: any;
@@ -311,6 +312,10 @@ export interface OrdersOptionParams {
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
   checkNotification?: boolean;
+  ordersFormatted?: any;
+  handleChangeOrderStatus?: () => void;
+  handleSendCustomerReview?: () => void;
+  orderDetailsProps?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -569,14 +574,17 @@ export interface AcceptOrRejectOrderParams {
   loading?: boolean;
   action: string;
   orderId?: number;
-  handleUpdateOrder?: (status: number, isAccept: any) => {};
+  handleUpdateOrder?: (p1: any, p2: any) => {};
   notShowCustomerPhone?: boolean | undefined;
-  actions?: actions;
+  actions?: any;
   titleAccept?: textTranslate;
   titleReject?: textTranslate;
   titleNotReady?: textTranslate;
   appTitle?: textTranslate;
   orderTitle?: any
+  isPage?: boolean
+  navigation?: any
+  route?: any
 }
 
 export interface MapViewParams {
@@ -598,8 +606,16 @@ export interface ReviewCustomerParams {
   actionState?: any,
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
+  handleCustomCustomerReview?: any,
 }
 
 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

@@ -116,10 +116,6 @@ const LoginFormUI = (props: LoginParams) => {
     }
 
     if (values?.project_name) {
-      setOrdering({
-        ...ordering,
-        project: values?.project_name
-      })
       _setStoreData('project_name', values?.project_name)
       setFormsStateValues({
         ...formsStateValues,
@@ -384,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 (