ordering-ui-react-native 0.14.41 → 0.14.42-release

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

@@ -72,12 +72,13 @@ const CustomerName = (props: Props): React.ReactElement => {
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+        textStyle={{color: theme.colors.primary, fontSize: 20}}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
         }}
         style={{
+          backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
             ? orientationState?.dimensions.width - 40
             : orientationState?.dimensions.width * 0.1,

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

@@ -8,7 +8,7 @@ import OImage from '../../components/shared/OImage';
 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 { PORTRAIT, LANDSCAPE, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 
 const Intro = (props: any): React.ReactElement => {
   const { navigation } = props;
@@ -87,7 +87,7 @@ const Intro = (props: any): React.ReactElement => {
               source={theme.images.general.homeHeroLandscape}
               width={orientationState?.dimensions?.width * 0.40}
               height={orientationState?.dimensions?.height * 1.1}
-              style={{bottom: 100, right: 100}}
+              style={{ bottom: 100, right: 100 }}
               resizeMode='cover'
             />
 
@@ -114,7 +114,7 @@ const Intro = (props: any): React.ReactElement => {
 
                 <OButton
                   style={styles.buttonLandStyle}
-                  text={t('TOUCH_TO_ORDER', 'Touch to order')}
+                  text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
                   parentStyle={{
                     alignItems: 'center',
                     width: orientationState?.dimensions?.width - _offset
@@ -138,7 +138,7 @@ const Intro = (props: any): React.ReactElement => {
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 260,
+    width: 290,
     marginBottom: 16
   }
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { ImageSourcePropType, ImageStyle, TextStyle, ViewStyle, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTheme } from 'styled-components/native';
@@ -28,11 +28,15 @@ const OptionCard = (props: Props) => {
               <ActivityIndicator size='large' color='#ffffff' />
             </ActivityIndicatorContainer>
           )}
-          <OIcon
-            src={props.icon}
-            style={{ marginBottom: 10, ...props?.iconStyle }}
-          />
-
+          {props.icon && (
+            <OIcon
+              src={props.icon}
+              style={{ marginBottom: 10, ...props?.iconStyle }}
+            />
+          )}
+          {props.VectorIcon && (
+            <props.VectorIcon />
+          )}
           <OText
             weight="700"
             color="white"
@@ -97,6 +101,7 @@ interface Props {
   callToActionTextStyle?: TextStyle;
   callToActionIcon?: ImageSourcePropType;
   callToActionIconStyle?: ImageStyle;
+  VectorIcon?: FunctionComponent;
 }
 
 export default OptionCard;

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

@@ -19,6 +19,8 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import GridContainer from '../../layouts/GridContainer';
 import { OModal, PaymentOptionStripe } from '../../../../../src';
+import AntIconDesign from 'react-native-vector-icons/AntDesign'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
@@ -41,7 +43,7 @@ const PaymentOptionsUI = (props: any) => {
   } = props;
 
   const theme = useTheme();
-  const [, {showToast}] = useToast();
+  const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -134,52 +136,52 @@ const PaymentOptionsUI = (props: any) => {
     CASH_ID:
       cashIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CASH', 'Cash'),
-            description: t(
-              'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-              'Pay with cash in the front counter',
-            ),
-            bgImage: theme.images.general.cash,
-            icon: theme.images.general.shoppingCart,
-            callToActionText: t('LETS_GO', 'LETS_GO'),
-            onClick: () =>
-              onSelectPaymethod(supportedMethods[cashIndex], false),
-            ...supportedMethods[cashIndex],
-          }
+          style: cardStyle,
+          title: t('CASH', 'Cash'),
+          description: t(
+            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+            'Pay with cash in the front counter',
+          ),
+          bgImage: theme.images.general.cash,
+          callToActionText: t('LETS_GO', 'LETS_GO'),
+          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () =>
+            onSelectPaymethod(supportedMethods[cashIndex], false),
+          ...supportedMethods[cashIndex],
+        }
         : null,
 
     CARD_ON_DELIVERY_ID:
       cardOnDeliveryIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-            description: t(
-              'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-              'We accept every debit or credit card',
-            ),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t("LETS_GO", "Let's go"),
-            onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-            ...supportedMethods[cardOnDeliveryIndex],
-          }
+          style: cardStyle,
+          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
+          description: t(
+            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+            'We accept every debit or credit card',
+          ),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t("LETS_GO", "Let's go"),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
+          ...supportedMethods[cardOnDeliveryIndex],
+        }
         : null,
     STRIPE:
       stripeIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-            description: t('STRIPE', 'Stripe'),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t('INSERT_INFO', 'Test info'),
-            onClick: () => {
-              onSelectPaymethod(supportedMethods[stripeIndex], false);
-              setIsOpenModal(true)
-            },
-            ...supportedMethods[stripeIndex],
-          }
+          style: cardStyle,
+          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
+          description: t('STRIPE', 'Stripe'),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t('INSERT_INFO', 'Test info'),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => {
+            onSelectPaymethod(supportedMethods[stripeIndex], false);
+            setIsOpenModal(true)
+          },
+          ...supportedMethods[stripeIndex],
+        }
         : null,
   };
 
@@ -193,11 +195,11 @@ const PaymentOptionsUI = (props: any) => {
         <NavBar
           title={t('PAYMENT_METHODS', 'Payment methods')}
           onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
         />
 
         <View
-          style={{marginVertical: orientationState?.dimensions?.height * 0.03}}>
+          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
           <OText size={orientationState?.dimensions?.width * 0.048}>
             {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
             <OText
@@ -209,10 +211,10 @@ const PaymentOptionsUI = (props: any) => {
         </View>
 
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{justifyContent: 'space-between'}}>
+          <GridContainer style={{ justifyContent: 'space-between' }}>
             {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
+              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
               </View>
             )}
 
@@ -249,7 +251,7 @@ const PaymentOptionsUI = (props: any) => {
             )}
           </GridContainer>
         )}
-        <View style={{height: orientationState?.dimensions?.height * 0.05}} />
+        <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}
           onClose={() => setIsOpenModal(false)}

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

@@ -25,7 +25,7 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { business, handleClick, navigation } = props;
+	const { business, handleClick, navigation, isBusinessOpen } = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
@@ -122,7 +122,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				)}
 				<BusinessState>
-					{!business?.open && (
+					{!isBusinessOpen && (
 						<View style={styles.businessStateView}>
 							<OText
 								color={theme.colors.textThird}
@@ -168,7 +168,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
 				<Metadata>
-					{!business?.open ? (
+					{!isBusinessOpen ? (
 						<View style={styles.closed}>
 							<OText size={10} color={theme.colors.red}>
 								{t('CLOSED', 'Closed')}

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

@@ -23,7 +23,7 @@ import {
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
-	const { business, handleClick } = props;
+	const { business, handleClick, isBusinessOpen } = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
@@ -128,7 +128,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
             <OText>{getBusinessType()}</OText>
           </BusinessCategory> */}
 					<Metadata>
-						{!business?.open ? (
+						{!isBusinessOpen ? (
 							<View style={styles.closed}>
 								<OText size={10} color={theme.colors.red}>
 									{t('CLOSED', 'Closed')}

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

@@ -139,17 +139,20 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
+			{!isActive && !isClosed && !!isProducts && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
-					<OButton
-						onClick={handleClickCheckout}
-						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-						text={t('CHECKOUT', 'Checkout')}
-						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-						borderColor={theme.colors.primary}
-					/>
+					{cart?.valid_products && (
+						<OButton
+							onClick={handleClickCheckout}
+							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							text={t('CHECKOUT', 'Checkout')}
+							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							borderColor={theme.colors.primary}
+							isDisabled={checkoutButtonDisabled}
+						/>
+					)}
 				</PriceContainer>
 			)}
 

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

@@ -7,9 +7,10 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-
+  min-height: 120px;
   ${(props: any) => props.isClosed && css`
-	 opacity: 0.5;
+	  opacity: 0.5;
+    min-height: 60px;
   `}
 `
 

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

@@ -155,6 +155,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
 	  }, []);
+	
+	const handleBackNavigation = () => {
+		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+	}
 
 	return (
 		<SafeAreaView
@@ -169,7 +173,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									imgLeftSrc={theme.images.general.arrow_left}
 									imgRightSrc={null}
 									style={styles.btnBackArrow}
-									onClick={() => navigation?.canGoBack() && navigation.goBack()}
+									onClick={() => handleBackNavigation()}
 									imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
 								/>
 							</View>
@@ -231,7 +235,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              	setCategoryClicked={setCategoryClicked}
+              					setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>
@@ -309,13 +313,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
-          setOpenUpselling={setOpenUpselling}
+          			setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
-          onRedirect={onRedirect}
+          			onRedirect={onRedirect}
 				/>
 			)}
 		</SafeAreaView>