ordering-ui-react-native 0.14.70 → 0.14.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.70",
+  "version": "0.14.73",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/ProductForm/index.tsx

@@ -335,7 +335,7 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton
-                  onClick={navigation.navigate('AddressList')}
+                  onClick={() => navigation.navigate('AddressList')}
                 />
               )
             )}

package/themes/kiosk/index.tsx

@@ -30,6 +30,9 @@ import { ProductOptionSubOption } from './src/components/ProductOptionSubOption'
 import PromoCard from './src/components/PromoCard'
 import QuantityControl from './src/components/QuantityControl'
 import { UpsellingProducts } from './src/components/UpsellingProducts'
+import { BusinessController } from './src/components/BusinessController'
+import { BusinessesListing } from './src/components/BusinessesListing'
+import { LogoutButton } from './src/components/LogoutButton'
 
 import {
   OAlert,
@@ -95,6 +98,9 @@ export {
   PromoCard,
   QuantityControl,
   UpsellingProducts,
+  BusinessController,
+  BusinessesListing,
+  LogoutButton,
   OAlert,
   OBottomPopup,
   OButton,

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import {
+  BusinessController as BusinessSingleCard,
+  useUtils,
+} from 'ordering-components/native';
+
+import { Card, BusinessLogo } from './styles';
+
+import { OText } from '../shared';
+
+export const BusinessControllerUI = (props: any) => {
+  const { business, handleClick, isLoading } = props;
+  const [{ optimizeImage }] = useUtils();
+  const theme = useTheme()
+
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  const styles = StyleSheet.create({
+    businessName: {
+      width: '100%',
+      alignItems: 'center',
+      textAlign: 'center',
+      marginTop: 10
+    }
+  });
+
+  const handleBusinessClick = (selectedBusiness: any) => {
+    if (isLoading) return
+    handleClick && handleClick(selectedBusiness)
+  }
+
+  return (
+    <Card
+      activeOpacity={1}
+      onPress={() => handleBusinessClick(business)}
+    >
+      <BusinessLogo
+        source={business?.logo ? {
+          uri: optimizeImage(business?.logo, 'h_120,c_limit'),
+        } : theme.images.dummies.businessLogo}
+        resizeMode='contain'
+      />
+      <OText
+        size={WIDTH_SCREEN * 0.012}
+        numberOfLines={2}
+        ellipsizeMode='tail'
+        style={styles.businessName}
+      >
+        {business?.name}
+      </OText>
+    </Card>
+  );
+};
+
+export const BusinessController = (props: any) => {
+  const BusinessControllerProps = {
+    ...props,
+    UIComponent: BusinessControllerUI,
+  };
+
+  return <BusinessSingleCard {...BusinessControllerProps} />;
+};

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

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components/native';
+
+export const Card = styled.TouchableOpacity`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 15px 20px;
+  width: 120px;
+`
+
+export const BusinessLogo = styled.ImageBackground`
+  position: relative;
+  height: 120px;
+  width: 120px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+`

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

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { View, ScrollView, Platform } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import {
+  BusinessList as BusinessesListingController,
+  useLanguage,
+  useOrder,
+} from 'ordering-components/native';
+
+import { ListWrapper, CardsContainer, WrapperList } from './styles';
+
+import { NotFoundSource } from '../NotFoundSource';
+import { BusinessController } from '../BusinessController';
+import { OText } from '../shared';
+import { LogoutButton } from '../LogoutButton';
+
+const BusinessesListingUI = (props: any) => {
+  const {
+    navigation,
+    businessesList,
+    handleBusinessClick,
+    paginationProps,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  return (
+    <ScrollView showsVerticalScrollIndicator={false}>
+      <ListWrapper>
+        {!businessesList.loading ? (
+          <>
+            <OText
+              size={WIDTH_SCREEN * 0.02}
+              weight='bold'
+              style={{ paddingHorizontal: 15 }}
+            >
+              {t('STORES', 'Stores')}
+            </OText>
+            <OText
+              size={WIDTH_SCREEN * 0.014}
+              color={theme.colors.paleGray}
+              style={{
+                paddingHorizontal: 15,
+                paddingBottom: 40
+              }}
+            >
+              {t('SELECT_STORE_MESSAGE', 'Please select the store that do you need')}
+            </OText>
+            <View style={{ position: 'absolute', top: 25, right: 20 }}>
+              <LogoutButton />
+            </View>
+          </>
+        ) : (
+          <View style={{ paddingHorizontal: 20 }}>
+            <PlaceholderLine width={80} height={50} style={{ marginBottom: 10 }} />
+            <PlaceholderLine height={50} style={{ marginBottom: 40 }} />
+          </View>
+        )}
+        <CardsContainer>
+          {!businessesList.loading && businessesList.businesses?.map(
+            (business: any) => (
+              <BusinessController
+                key={business.id}
+                business={business}
+                isBusinessOpen={business.open}
+                handleCustomClick={handleBusinessClick}
+                orderType={orderState?.options?.type}
+                navigation={navigation}
+              />
+            )
+          )}
+        </CardsContainer>
+
+
+        {!businessesList.loading && businessesList.businesses.length === 0 && (
+          <NotFoundSource
+            content={t(
+              'NOT_FOUND_BUSINESSES',
+              'No businesses to delivery / pick up at this address, please change filters or change address.',
+            )}
+          />
+        )}
+
+        {businessesList.loading && (
+          <WrapperList>
+            {[...Array(24).keys()].map(i => (
+              <PlaceholderLine
+                key={i}
+                width={15}
+                height={120}
+                style={{
+                  marginBottom: 20,
+                  borderRadius: 8
+                }}
+              />
+            ))}
+          </WrapperList>
+        )}
+      </ListWrapper>
+    </ScrollView>
+  );
+};
+
+export const BusinessesListing = (props: any) => {
+  const BusinessesListingProps = {
+    ...props,
+    isForceSearch: Platform.OS === 'ios',
+    UIComponent: BusinessesListingUI,
+  };
+
+  return <BusinessesListingController {...BusinessesListingProps} />;
+};

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components/native'
+
+export const ListWrapper = styled.View`
+	background-color: ${(props: any) => props.theme.colors.backgroundLight};
+	padding: 20px 5px 0;
+`;
+
+export const CardsContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+export const WrapperList = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 20px;
+`

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
@@ -7,7 +7,8 @@ import {
   LoginForm as LoginFormController,
   useLanguage,
   ToastType,
-  useToast
+  useToast,
+  useApi
 } from 'ordering-components/native';
 
 import {
@@ -18,21 +19,40 @@ import {
 import { OText, OButton, OInput, OIcon } from '../shared';
 import { LoginParams } from '../../types';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { _setStoreData } from '../../../../../src/providers/StoreUtil'
 
 const LoginFormUI = (props: LoginParams) => {
   const {
     loginButtonText,
     formState,
     handleButtonLoginClick,
+    useRootPoint
   } = props;
 
   const theme = useTheme()
+  const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const {control, handleSubmit, formState: {errors}} = useForm();
   const [orientationState] = useDeviceOrientation();
 
+  const [formsStateValues, setFormsStateValues] = useState<any>({ isSubmitted: false })
+
   const onSubmit = (values: any) => {
+    if (values?.project_name) {
+      setOrdering({
+        ...ordering,
+        project: values?.project_name
+      })
+      _setStoreData('project_name', values?.project_name)
+      setFormsStateValues({
+        ...formsStateValues,
+        isSubmitted: true,
+        values
+      })
+      return
+    }
+
     handleButtonLoginClick(values);
   };
 
@@ -73,9 +93,22 @@ const LoginFormUI = (props: LoginParams) => {
           ? formState.result?.result
           : formState.result?.result[0]
       )
+      setFormsStateValues({
+        ...formsStateValues,
+        isSubmitted: false,
+      })
     }
   }, [formState]);
 
+  useEffect(() => {
+    if (ordering.project === null || !formsStateValues.isSubmitted || !useRootPoint) return
+    const values: any = formsStateValues.values
+    if (values?.project_name) {
+      delete values.project_name
+    }
+    handleButtonLoginClick({ ...values })
+  }, [ordering, formsStateValues.isSubmitted])
+
 
   useEffect(() => {
     if (Object.keys(errors)?.length > 0) {
@@ -97,6 +130,33 @@ const LoginFormUI = (props: LoginParams) => {
 
   const InputControllers = (
     <>
+      {useRootPoint && (
+        <Controller
+          control={control}
+          name='project_name'
+          rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+          defaultValue=""
+          render={({ onChange, value }: any) => (
+            <OInput
+              name='project_name'
+              placeholder={t('PROJECT_NAME', 'Project Name')}
+              style={styles.inputStyle}
+              value={value}
+              autoCapitalize='none'
+              autoCorrect={false}
+              inputStyle={{textAlign: 'center'}}
+              onChange={(e: any) => {
+                onChange(e?.target?.value);
+                setFormsStateValues({
+                  ...formsStateValues,
+                  isSubmitted: false,
+                })
+              }}
+            />
+          )}
+        />
+      )}
+
       <Controller
         control={control}
         render={({ onChange, value }: any) => (

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

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { LogoutAction, ToastType, useToast, useLanguage, useCustomer, useBusiness, useOrder } from 'ordering-components/native';
+
+import { OIcon } from '../shared';
+import { useTheme } from 'styled-components/native';
+import { _clearStoreData, _retrieveStoreData } from '../../../../../src/providers/StoreUtil'
+
+const LogoutButtonUI = (props: any) => {
+  const { handleLogoutClick, formState, ButtonUI } = props
+
+  const [theme] = useTheme();
+  const [, { setStateValues }] = useOrder();
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const [, { deleteUserCustomer }] = useCustomer();
+  const [, { setBusiness }] = useBusiness();
+
+  const handleClick = async () => {
+    const data = await _retrieveStoreData('notification_state');
+    const res = await handleLogoutClick(data);
+    if (res) {
+      _clearStoreData({ excludedKeys: ['isTutorial'] })
+      deleteUserCustomer(true)
+      setBusiness({})
+      setStateValues({
+        options: {
+          moment: null
+        },
+        carts: {},
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
+    }
+  }, [formState])
+
+  return (
+    ButtonUI ? (
+      <ButtonUI onPress={() => handleClick()} />
+    ) : (
+      <TouchableOpacity
+        onPress={() => handleClick()}
+        style={{ flexDirection: 'row', alignItems: 'center' }}
+      >
+        <OIcon
+          src={theme.images.general.menulogout}
+          width={24}
+          height={24}
+          color={theme.colors.disabledContrast}
+        />
+      </TouchableOpacity>
+    )
+  )
+}
+
+export const LogoutButton = (props: any) => {
+  const logoutProps = {
+    ...props,
+    isNative: true,
+    UIComponent: LogoutButtonUI
+  }
+  return (
+    <LogoutAction {...logoutProps} />
+  )
+}

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

@@ -80,6 +80,7 @@ export interface LoginParams {
   handleButtonLoginClick?: any;
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
+  useRootPoint?: any;
 }
 
 export interface ProductItemAccordionParams {

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -7,6 +7,12 @@ import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes } from '../../utils';
 import { BusinessInformation } from '../BusinessInformation';
 import { BusinessReviews } from '../BusinessReviews';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import isBetween from 'dayjs/plugin/isBetween';
+
+dayjs.extend(timezone);
+dayjs.extend(isBetween);
 
 import {
 	BusinessContainer,
@@ -45,6 +51,31 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	
+	useEffect(() => {
+		if (businessState?.loading) return
+		let timeout: any = null
+		const currentDate = dayjs().tz(businessState?.business?.timezone)
+		let lapse = null
+		if (businessState?.business?.today?.enabled) {
+			lapse = businessState?.business?.today?.lapses?.find((lapse: any) => {
+				const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
+				const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+				return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
+			})
+		}
+		if (lapse) {
+		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
+		  timeout = setTimeout(() => {
+			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+		  }, timeToClose)
+		}
+		return () => {
+		  timeout && clearTimeout(timeout)
+		}
+	  }, [businessState?.business])
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader

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

@@ -20,7 +20,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
-
+import { formatUrlVideo } from '../../utils'
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
@@ -152,7 +152,12 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 											style={{ width: 210, height: 127, borderRadius: 7.6 }}
 											javaScriptEnabled={true}
 											domStorageEnabled={true}
-											source={{ uri: v.video }}
+											source={{ 
+												html: `
+													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+												`, 
+											}}
+											mediaPlaybackRequiresUserAction={true}
 										/>
 									))}
 								</MediaWrapper>

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

@@ -300,15 +300,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			{
-				isFocused && (
-					<OrderProgressWrapper>
-						<OrderProgress
-							{...props}
-						/>
-					</OrderProgressWrapper>
-				)
-			}
+
+			<OrderProgressWrapper>
+				<OrderProgress
+					{...props}
+					isFocused={isFocused}
+				/>
+			</OrderProgressWrapper>
+
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>

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

@@ -207,10 +207,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -239,7 +239,7 @@ const CartUI = (props: any) => {
                       {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
@@ -255,7 +255,7 @@ const CartUI = (props: any) => {
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
@@ -271,10 +271,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -298,10 +298,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>