ordering-ui-react-native 0.12.5 → 0.12.9

package/package.json

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

package/src/components/BusinessBasicInformation/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import IconEvilIcons from 'react-native-vector-icons/EvilIcons'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 
@@ -84,14 +84,20 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
               </Placeholder>
             ) : (
               <View style={{ maxWidth: '75%', justifyContent: 'flex-start' }}>
-                <OText
-                  size={20}
-                  weight='bold'
-                  numberOfLines={1}
-                  ellipsizeMode='tail'
+                <ScrollView
+                  showsVerticalScrollIndicator={false}
+                  showsHorizontalScrollIndicator={false}
+                  horizontal
                 >
-                  {business?.name}
-                </OText>
+                  <OText
+                    size={20}
+                    weight='bold'
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {business?.name}
+                  </OText>
+                </ScrollView>
               </View>
             )}
             {!isBusinessInfoShow && (

package/src/components/PreviousOrders/index.tsx

@@ -101,9 +101,15 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
             </Logo>
           )}
           <Information>
-            <OText size={17} numberOfLines={1}>
-              {order.business?.name}
-            </OText>
+            <ScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <OText size={17} >
+                {order.business?.name}
+              </OText>
+            </ScrollView>
             <OText size={15} color={theme.colors.textSecondary} numberOfLines={1}>
               {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
             </OText>
@@ -120,13 +126,19 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
             </MyOrderOptions>
           </Information>
           <Status>
-            <OText
-              color={theme.colors.primary}
-              size={16}
-              numberOfLines={1}
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+                horizontal
             >
-              {getOrderStatus(order.status)?.value}
-            </OText>
+              <OText
+                color={theme.colors.primary}
+                size={16}
+                numberOfLines={1}
+              >
+                {getOrderStatus(order.status)?.value}
+              </OText>
+            </ScrollView>
             <OButton
               text={t('REORDER', 'Reorder')}
               imgRightSrc={''}

package/src/components/ProductItemAccordion/index.tsx

@@ -213,7 +213,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 </OText>
               )}
             </View>
-            <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end' }}>
+            <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', marginLeft: 10}}>
               {!isProductUnavailable && (
                 <View style={{ flexDirection: 'row' }}>
                   <OText size={18}>{parsePrice(product.total || product.price)}</OText>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { ProductsList, useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { NotFoundSource } from '../NotFoundSource'
@@ -34,49 +34,57 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [allProducts, setAllProducts] = useState([])
+
+  useEffect(() => {
+    if (category?.id) return
+    if (Array.isArray(categoryState?.products)) {
+      if (categoryState?.products.length > allProducts.length) {
+        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
+      }
+    }
+  }, [category, categoryState])
 
   return (
     <ProductsContainer>
-      {category.id && (
-        categoryState.products?.map((product: any) => (
+      {/* {category.id && (
+        categoryState.products?.map((product: any, index: number) => (
           <SingleProductCard
-            key={product.id}
+            key={index}
             isSoldOut={(product.inventoried && !product.quantity)}
             product={product}
             businessId={businessId}
             onProductClick={() => onProductClick(product)}
           />
         ))
-      )}
+      )} */}
 
       {
-        !category.id && (
-          featured && categoryState?.products?.find((product: any) => product.featured) && (
-            <>
-              <TouchableOpacity
-                onPress={() => handlerClickCategory({ id: 'featured', name: 'Featured' })}
-              >
-                <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
-              </TouchableOpacity>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                {categoryState.products?.map((product: any) => product.featured && (
-                  <SingleProductCard
-                    key={product.id}
-                    isSoldOut={(product.inventoried && !product.quantity)}
-                    product={product}
-                    businessId={businessId}
-                    onProductClick={onProductClick}
-                  />
-                ))}
-              </ScrollView>
-            </>
-          )
+        featured && allProducts?.find((product: any) => product.featured) && (
+          <>
+            <TouchableOpacity
+              onPress={() => handlerClickCategory({ id: 'featured', name: 'Featured' })}
+            >
+              <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
+            </TouchableOpacity>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              {allProducts?.map((product: any, index: number) => product.featured && (
+                <SingleProductCard
+                  key={index}
+                  isSoldOut={(product.inventoried && !product.quantity)}
+                  product={product}
+                  businessId={businessId}
+                  onProductClick={onProductClick}
+                />
+              ))}
+            </ScrollView>
+          </>
         )
       }
 
       {
-        !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
-          const products = categoryState.products?.filter((product: any) => product.category_id === category.id) || []
+        categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
+          const products = allProducts?.filter((product: any) => product.category_id === category.id) || []
           return (
             <View key={category.id} style={{alignItems: 'flex-start'}}>
               {
@@ -89,9 +97,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </TouchableOpacity>
                     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                       {
-                        products.map((product: any) => (
+                        products.map((product: any, index: number) => (
                           <SingleProductCard
-                            key={product.id}
+                            key={index}
                             isSoldOut={product.inventoried && !product.quantity}
                             businessId={businessId}
                             product={product}

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

@@ -6,7 +6,9 @@ import {
 	useLanguage,
 	useOrder,
 	useSession,
-	useUtils
+	useUtils,
+	useToast,
+	ToastType
 } from 'ordering-components/native'
 import { OButton, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -31,6 +33,9 @@ import { OrderSummary } from '../OrderSummary'
 import { Cart } from '../Cart'
 import { SingleProductCard } from '../../../../../src/components/SingleProductCard'
 import NavBar from '../NavBar'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -47,6 +52,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		header,
 		logo,
 		productModal,
+		getNextProducts,
 		handleChangeCategory,
 		setProductLogin,
 		updateProductModal
@@ -57,6 +63,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ auth }] = useSession()
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
+	const [ ,{ showToast }] = useToast()
 	const { business, loading, error } = businessState
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
 	const [curProduct, setCurProduct] = useState(null)
@@ -100,6 +107,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		setOpenUpselling(false)
 	}
 
+	const handleScroll = ({ nativeEvent }: any) => {
+		const y = nativeEvent.contentOffset.y
+		const height = nativeEvent.contentSize.height
+		const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
+		if (y + PIXELS_TO_SCROLL > height && !loading && hasMore && getNextProducts) {
+		  getNextProducts()
+		  showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+		}
+	}
+
 	return (
 		<>
 			<BusinessProductsListingContainer
@@ -107,6 +124,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
 				contentContainerStyle={{ paddingBottom: 40 }}
 				showsVerticalScrollIndicator={false}
+				onScroll={(e: any) => handleScroll(e)}
 			>
 				<WrapHeader>
 					{!loading && business?.id && (
@@ -223,6 +241,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						paddingHorizontal: 40,
 						paddingVertical: 20
 					}}
+					onScroll={(e: any) => handleScroll(e)}
 				>
 					<NavBar
 						title={categorySelected?.name}
@@ -232,9 +251,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					/>
 					<View>
 						{categorySelected.id && (
-							categoryState.products?.map((product: any) => (
+							categoryState.products?.map((product: any, index: number) => (
 								<SingleProductCard
-									key={product.id}
+									key={index}
 									isSoldOut={(product.inventoried && !product.quantity)}
 									product={product}
 									businessId={business.id}
@@ -243,6 +262,28 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							))
 						)}
 					</View>
+
+					{
+						categoryState.loading && (
+						<>
+							{[...Array(10).keys()].map((item, i) => (
+							<Placeholder key={i} style={{ marginBottom: 10 }} Animation={Fade}>
+								<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+									<View
+										style={{ width: 80, height: 80 }}
+									>
+										<PlaceholderLine width={80} height={70} />
+									</View>
+									<Placeholder>
+										<PlaceholderLine width={60} style={{marginBottom: 30}}/>
+										<PlaceholderLine width={20} />
+									</Placeholder>
+								</View>
+							</Placeholder>
+							))}
+						</>
+						)
+					}
 				</ScrollView>
 			</OModal>
 

package/themes/instacart/src/components/BusinessProductsListing/styles.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 export const WrapHeader = styled.View`
   position: relative;
   border-bottom-width: 16px;
-  border-bottom-color: ${(props: any) => props.theme.colors.secundary}
+  border-bottom-color: ${(props: any) => props.theme.colors.secundary};
 `
 export const TopHeader = styled.View`
   position: absolute;

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

@@ -160,6 +160,7 @@ export interface BusinessProductsListingParams {
 	header?: any;
 	logo?: any;
 	productModal?: any;
+	getNextProducts?: () => {};
 	handleChangeCategory: (value: any) => {};
 	setProductLogin?: () => {};
 	updateProductModal?: (value: any) => {},

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

@@ -100,8 +100,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             style={{
               width:
                 orientationState?.orientation === LANDSCAPE
-                  ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.15 :orientationState?.dimensions?.width * 0.16
-                  : orientationState?.dimensions?.width * 0.21,
+                  ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
+                  : orientationState?.dimensions?.width * 0.20,
             }}
             onPress={() => {
               resetInactivityTimeout()

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

@@ -135,8 +135,8 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 image={{ uri: product?.images }}
                 style={{
                   width: orientationState?.orientation === LANDSCAPE
-                    ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.15 :orientationState?.dimensions?.width * 0.16
-                    : orientationState?.dimensions?.width * 0.21
+                    ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
+                    : orientationState?.dimensions?.width * 0.20
                 }}
                 titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
                 onPress={() => {

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
-import { ImageStyle, TextStyle, View } from 'react-native'
+import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
@@ -15,6 +15,7 @@ const Wrapper = styled.View`
   position: relative;
   border-bottom-color: #E1E8ED;
   border-bottom-width: 1px;
+  margin-top: ${Platform.OS === 'ios' ? '10px' : '0px'};
 `
 const TitleWrapper = styled.View`
   flex-direction: column;
@@ -124,7 +125,7 @@ const NavBar = (props: Props) => {
 
 NavBar.defaultProps = {
   title: '',
-  textAlign: 'center'
+  textAlign: 'center',
 };
 
 export default NavBar;

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

@@ -207,8 +207,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     const getCustomerName = async () => {
-      const { customerName: name } = await _retrieveStoreData('customer_name')
-      setCustomerName(name)
+      try {
+        const { customerName: name } = await _retrieveStoreData('customer_name')
+          setCustomerName(name)
+      } catch (e) {
+        if (e) {
+          setCustomerName('')
+        }
+      }
     }
     getCustomerName()
     const redirectHome = setTimeout(() =>{

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

@@ -43,7 +43,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     imageStyle: {
       width: '100%',
       height: Platform.OS === 'ios' ? 250 : 180,
-      resizeMode: 'cover',
+      resizeMode: Platform.OS === 'ios' ? 'contain' : 'cover',
       borderRadius: 10,
     },
     closeUpsellingButton: {

package/themes/single-business/index.tsx

@@ -55,6 +55,8 @@ import { ProductIngredient } from './src/components/ProductIngredient';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
 import { ProductOption } from './src/components/ProductOption';
 import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
+import { PromotionCard } from './src/components/PromotionCard';
+import { Promotions } from './src/components/Promotions';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { SearchBar } from './src/components/SearchBar';
 import { SignupForm } from './src/components/SignupForm';
@@ -159,6 +161,8 @@ export {
   ProductItemAccordion,
   ProductOption,
   ProductOptionSubOption,
+  PromotionCard,
+  Promotions,
   SearchBar,
   SingleProductCard,
   StripeCardForm,

package/themes/single-business/src/components/AddressForm/index.tsx

@@ -4,7 +4,7 @@ import {
 	View,
 	TouchableOpacity,
 	Keyboard,
-	TouchableWithoutFeedback,
+  ScrollView,
 } from 'react-native';
 import {
 	AddressForm as AddressFormController,
@@ -510,8 +510,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 				titleStyle={{ fontSize: 14 }}
 				titleWrapStyle={{ flexBasis: '75%' }}
 			/>
-			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+
+      <ScrollView
+        horizontal={false}
+        keyboardShouldPersistTaps='handled'
+        style={{ paddingBottom: 60 }}
+      >
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -593,13 +598,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 										/>
 									)}
 								/>
-								{hasEditing ? (
+								{(hasEditing && !formState?.changes?.address) ? (
 									<View style={styles.pinIcon}>
-										<GPSButton 
+										<GPSButton
 											apiKey={googleMapsApiKey}
 											handleGPS={(data: any, detail: any) => {
 												handleChangeAddress(data, detail);
-												setValue(data.address);
+												setValue('address', data.address);
 												if (googleInput?.current) {
 													googleInput?.current?.setAddressText( data.address );
 												}
@@ -610,17 +615,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 								) : null}
 							</AutocompleteInput>
 
-							{/* {!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
-                <TouchableOpacity onPress={handleToggleMap} style={{ marginBottom: 10 }}>
-                  <OText
-                    color={theme.colors.primary}
-                    style={{ textAlign: 'center' }}
-                  >
-                    {t('VIEW_MAP', 'View map to modify the exact location')}
-                  </OText>
-                </TouchableOpacity>
-              )} */}
-
 							{(locationChange || formState.changes?.location) && (
 								<View
 									style={{
@@ -820,34 +814,35 @@ const AddressFormUI = (props: AddressFormParams) => {
 							/>
 						)}
 					</View>
-					<OModal
-						open={toggleMap}
-						onClose={() => handleToggleMap()}
-						entireModal
-						customClose>
-						{(locationChange || formState.changes?.location) && (
-							<GoogleMapContainer>
-								<GoogleMap
-									location={locationChange || formState.changes?.location}
-									handleChangeAddressMap={handleChangeAddress}
-									maxLimitLocation={maxLimitLocation}
-									saveLocation={saveMapLocation}
-									setSaveLocation={setSaveMapLocation}
-									handleToggleMap={handleToggleMap}
-								/>
-							</GoogleMapContainer>
-						)}
-						<OButton
-							text={t('SAVE', 'Save')}
-							textStyle={{ color: theme.colors.white }}
-							imgRightSrc={null}
-							style={{ marginHorizontal: 30, marginBottom: 10 }}
-							onClick={() => setSaveMapLocation(true)}
-						/>
-					</OModal>
-					<Spinner visible={saveMapLocation} />
 				</AddressFormContainer>
-			</TouchableWithoutFeedback>
+			</ScrollView>
+
+      <OModal
+        open={toggleMap}
+        onClose={() => handleToggleMap()}
+        entireModal
+        customClose>
+        {(locationChange || formState.changes?.location) && (
+          <GoogleMapContainer>
+            <GoogleMap
+              location={locationChange || formState.changes?.location}
+              handleChangeAddressMap={handleChangeAddress}
+              maxLimitLocation={maxLimitLocation}
+              saveLocation={saveMapLocation}
+              setSaveLocation={setSaveMapLocation}
+              handleToggleMap={handleToggleMap}
+            />
+          </GoogleMapContainer>
+        )}
+        <OButton
+          text={t('SAVE', 'Save')}
+          textStyle={{ color: theme.colors.white }}
+          imgRightSrc={null}
+          style={{ marginHorizontal: 30, marginBottom: 10 }}
+          onClick={() => setSaveMapLocation(true)}
+        />
+      </OModal>
+      <Spinner visible={saveMapLocation} />
 		</>
 	);
 };

package/themes/single-business/src/components/BusinessInformation/styles.tsx

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;