ordering-ui-react-native 0.17.47 → 0.17.48-release

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

@@ -1,5 +1,18 @@
 import styled from 'styled-components/native';
 
+export const LoginWith = styled.View`
+  display: flex;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+
+export const TabsContainer = styled.View`
+  min-width: ${({ width }: { width: number }) => `${width}px`};
+  width: auto;
+  display: flex;
+  flex-direction: row;
+`;
+
 export const LogoWrapper = styled.View`
   align-items: center;
 `;
@@ -11,4 +24,4 @@ export const RecaptchaButton = styled.View`
   flex-direction: row;
   align-items: center;
   margin-bottom: 10px;
-`
+`

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;

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../../../../src/types';
 import { OText } from '../shared';
-import {transformCountryCode} from '../../../../../src/utils'
+import { transformCountryCode, verifyCountryCode } from '../../../../../src/utils'
 import {I18nManager} from 'react-native'
 import { useTheme } from 'styled-components/native';
 
@@ -86,9 +86,10 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
   return (
     <Wrapper>
       <PhoneInput
+        containerStyle={{ width: '100%' }}
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        defaultCode={defaultCode ? transformCountryCode(defaultCode) : verifyCountryCode(configs?.default_country_code?.value)}
         onChangeFormattedText={(text : string) => handleChangeNumber(text)}
         withDarkTheme
         textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}

package/themes/kiosk/src/components/PhoneInputNumber/styles.tsx

@@ -1,5 +1,3 @@
 import styled from 'styled-components/native';
 
-export const Wrapper = styled.View`
-    flex: 1
-`
+export const Wrapper = styled.View``;

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

@@ -550,7 +550,7 @@ export const ProductOptionsUI = (props: any) => {
             </View>
           )}
           <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
               <OButton
                 onClick={() => handleSaveProduct()}
                 imgRightSrc=''
@@ -563,19 +563,6 @@ export const ProductOptionsUI = (props: any) => {
                 }}
               />
             )}
-            {auth && !orderState.options?.address_id && (
-              orderState.loading ? (
-                <OButton
-                  isDisabled
-                  text={t('LOADING', 'Loading')}
-                  imgRightSrc=''
-                />
-              ) : (
-                <OButton
-                  onClick={navigation?.navigate('AddressList')}
-                />
-              )
-            )}
             {(!auth || isSoldOut || maxProductQuantity <= 0) && (
               <OButton
                 isDisabled={isSoldOut || maxProductQuantity <= 0}

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

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

@@ -95,14 +95,14 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%',
   },
-  titleSection: {
-    width: '100%',
-    height: 30,
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 20,
-  },
+	titleSection: {
+		width: '100%',
+		justifyContent: 'space-between',
+		alignItems: 'flex-start',
+		paddingLeft: 40,
+		paddingRight: 40,
+		marginBottom: 40,
+	},
   cancelBtn: {
     position: 'absolute',
     left: 0,
@@ -111,9 +111,12 @@ const styles = StyleSheet.create({
   },
   modalText: {
     marginTop: 15,
-    fontSize: 25,
-    textAlign: "center",
-    zIndex: 10
+		fontSize: 20,
+		lineHeight: 30,
+		fontWeight: '600',
+		textAlign: "center",
+		zIndex: 10,
+    width: '100%'
   },
   wrapperIcon: {
     overflow: 'hidden',

package/themes/kiosk/src/layouts/Container.tsx

@@ -22,7 +22,13 @@ export const Container = (props: Props) => {
     <SafeAreStyled
       nestedScrollEnabled={props.nestedScrollEnabled}
     >
-      <ContainerStyled {...props} ref={props?.forwardRef}>{props.children}</ContainerStyled>
+      <ContainerStyled
+        {...props}
+        keyboardShouldPersistTaps="handled"
+        ref={props?.forwardRef}
+      >
+        {props.children}
+      </ContainerStyled>
     </SafeAreStyled>
   );
 };

package/themes/kiosk/src/types/index.d.ts

@@ -84,6 +84,12 @@ export interface LoginParams {
   useRootPoint?: any;
   enableReCaptcha?: boolean;
   handleReCaptcha?: (vlaue: any) => void;
+  useLoginOtp?: any;
+  otpType?: any;
+  setOtpType?: any;
+  generateOtpCode?: any;
+  useLoginOtpEmail?: any;
+  useLoginOtpCellphone?: any;
 }
 
 export interface ProductItemAccordionParams {
@@ -482,3 +488,10 @@ export interface Cart {
 export interface NoNetworkParams {
   image?: any;
 }
+export interface otpParams {
+	willVerifyOtpState: boolean,
+	setWillVerifyOtpState: (val : boolean) => void,
+	onSubmit: any,
+	handleLoginOtp: (code : string) => void,
+	setAlertState: any
+}

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

@@ -0,0 +1,15 @@
+export const formatSeconds = (seconds : number) => {
+  // Hours, minutes and seconds
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  let ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}

package/themes/original/index.tsx

@@ -68,6 +68,7 @@ import { SingleProductCard } from './src/components/SingleProductCard';
 import { SingleOrderCard } from './src/components/SingleOrderCard';
 import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ScheduleAccordion } from './src/components/ScheduleAccordion';
 import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
 import { CouponControl } from './src/components/CouponControl';
 import { TaxInformation } from './src/components/TaxInformation';
@@ -95,6 +96,8 @@ 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 { MultiCart } from './src/components/MultiCart'
+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';
@@ -230,6 +233,7 @@ export {
 	SingleOrderCard,
 	UpsellingRedirect,
 	ProductItemAccordion,
+	ScheduleAccordion,
 	BusinessItemAccordion,
 	CouponControl,
 	TaxInformation,
@@ -257,7 +261,9 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	PageBanner,
 	MyOrders,
+  MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
@@ -21,21 +22,38 @@ const AddressDetailsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const styles = StyleSheet.create({
+		productStyle: {
+			width: width,
+			height: 151,
+			marginVertical: 10
+		}
+	})
+
 	return (
 		<ADContainer>
 			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-				>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
+				{props.HeaderTitle ?? (
+					<OText
+						size={16}
+						lineHeight={24}
+						color={theme.colors.textNormal}
+					>
+						{t('DELIVERY_ADDRESS', 'Delivery address')}
+					</OText>
+				)}
 			</ADHeader>
-			{!!apiKey && (
+			{!!apiKey && googleMapsUrl && (
 				<ADMap
 					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
-					<OIcon url={googleMapsUrl} height={151} width={width} />
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: googleMapsUrl,
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
 				</ADMap>
 			)}
 			<ADAddress>
@@ -57,7 +75,7 @@ const AddressDetailsUI = (props: any) => {
 						}>
 						<OText
 							size={12}
-							color={theme.colors.textSecondary}
+							color={theme.colors.primary}
 							style={{ textDecorationLine: 'underline' }}>
 							{t('CHANGE', 'Change')}
 						</OText>