ordering-ui-react-native 0.12.57 → 0.12.58

package/package.json

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

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

@@ -16,26 +16,32 @@ import {
   OSCoupon,
   OSTotal,
   Title,
-  LineDivider
+  LineDivider,
+  BIHeader,
+  BIInfo,
+  BIContentInfo,
+  BITotal
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
-import { verifyDecimals } from '../../utils';
+import { convertHoursToMinutes, verifyDecimals } from '../../utils';
 import { Container } from '../../layouts/Container';
 import { NotFoundSource } from '../NotFoundSource'
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 const CartUI = (props: any) => {
   const {
     cart,
     clearCart,
+    isCartList,
     changeQuantity,
     getProductMax,
     offsetDisabled,
@@ -62,6 +68,8 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+  const isClosed = !cart?.valid_schedule
+  const isProducts = cart?.products?.length
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -110,22 +118,91 @@ const CartUI = (props: any) => {
     }
   }
 
+  const CartHeader = () => {
+    return (
+      <BIHeader isClosed={isClosed}>
+        <BIInfo>
+          {cart?.business?.logo && (
+            <View
+              style={{
+                height: 72,
+                width: 72,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: 8
+              }}
+            >
+              <OIcon
+                url={cart?.business?.logo}
+                width={70}
+                height={70}
+                style={{ borderRadius: 16 }}
+              />
+            </View>
+          )}
+          <BIContentInfo>
+            <OText>{cart?.business?.name}</OText>
+            {orderState?.options?.type === 1 ? (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
+              </View>
+            ) : (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
+              </View>
+            )}
+          </BIContentInfo>
+        </BIInfo>
+
+        {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
+          <BITotal>
+            <OText size={12}>{t('CART_TOTAL', 'Total')}</OText>
+            <OText size={12} color='#000'>{parsePrice(cart?.total)}</OText>
+          </BITotal>
+        )}
+
+        {isClosed && (
+          <BITotal>
+            <OText>{t('CLOSED', 'Closed')}</OText>
+          </BITotal>
+        )}
+
+        {!isClosed && !isProducts && (
+          <BITotal>
+            <OText>{t('NO_PRODUCTS', 'No products')}</OText>
+          </BITotal>
+        )}
+      </BIHeader>
+    )
+  }
+
   return (
     cart?.products?.length > 0 ? (
       <ScrollView
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
-        style={{ height, backgroundColor: theme.colors.backgroundPage }}
+        style={{ height: isCartList ? 'auto' : height, backgroundColor: theme.colors.backgroundPage }}
       >
-        <Container>
-          <Title>
-            <OText
-              size={20}
-              weight='bold'
-            >
-              {t('YOUR_CART', 'Your cart')}
-            </OText>
-          </Title>
+        <Container noPadding={isCartList}>
+          {!isCartList ? (
+            <Title>
+              <OText
+                size={20}
+              >
+                {t('YOUR_CART', 'Your cart')}
+              </OText>
+            </Title>
+          ) : (
+            <CartHeader />
+          )}
 
           {cart?.products?.length > 0 && (
             <View>
@@ -247,7 +324,7 @@ const CartUI = (props: any) => {
           <>
             <LineDivider />
 
-            <Container>
+            <Container noPadding={isCartList}>
               <View style={{ padding: 0, }}>
                 <ScrollView
                   showsVerticalScrollIndicator={false}
@@ -323,7 +400,6 @@ const CartUI = (props: any) => {
         <Title>
           <OText
             size={20}
-            weight='bold'
           >
             {t('YOUR_CART', 'Your cart')}
           </OText>

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

@@ -61,3 +61,42 @@ export const OSCoupon = styled.View`
   width: 100%;
   padding: 5px 0px;
 `
+
+export const BIHeader = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  padding-bottom: 10px;
+
+  ${(props: any) => props.isClosed && css`
+    background-color: rgba(0, 0, 0, 0.1);
+  `}
+`
+
+export const BIInfo = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 55%;
+`
+
+export const BIContent = styled.View`
+`
+
+export const BIContentInfo = styled.View`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-transform: capitalize;
+  margin-left: 10px;
+  max-width: 65%;
+`
+
+export const BITotal = styled.View`
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`

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

@@ -1,60 +1,64 @@
-import React, { useEffect, useState } from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useState } from 'react';
+import { useWindowDimensions, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList } from './styles';
+import { useLanguage } from 'ordering-components/native';
+import Spinner from 'react-native-loading-spinner-overlay';
 
+import { Title } from './styles';
 import { Cart } from '../Cart';
-import { OIcon, OText } from '../shared';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { View } from 'react-native';
+import { NotFoundSource } from '../NotFoundSource';
+import { OText } from '../shared';
 
 export const CartContent = (props: any) => {
-	const {
-		carts,
-		isOrderStateCarts
-	} = props
+  const { carts } = props
 
-	const theme = useTheme();
-	const [, t] = useLanguage()
-	const [isCartsLoading, setIsCartsLoading] = useState(false)
+  const { height } = useWindowDimensions()
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [isCartsLoading, setIsCartsLoading] = useState(false)
 
-	return (
-		<CCContainer>
-			{isOrderStateCarts && carts?.length > 0 && (
-				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
-						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
-					{carts.map((cart: any) => (
-						<CCList key={cart.uuid} style={{ overflow: 'visible' }}>
-							{cart.products.length > 0 && (
-								<>
-									<Cart
-										cart={cart}
-										onNavigationRedirect={props.onNavigationRedirect}
-										isCartsLoading={isCartsLoading}
-										setIsCartsLoading={setIsCartsLoading}
-									/>
-									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
-								</>
-							)}
-						</CCList>
-					))}
-				</>
-			)}
-			{(!carts || carts?.length === 0) && (
-				<CCNotCarts>
-					{/* <OIcon
-            url={props.icon}
-            width={200}
-            height={122}
-          /> */}
-					<OText size={24} style={{ textAlign: 'center' }}>
-						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-					</OText>
-				</CCNotCarts>
-			)}
-			<Spinner visible={isCartsLoading} />
-		</CCContainer>
-	)
+  return (
+    carts?.length > 0 ? (
+      <>
+        <Title>
+          <OText size={20} style={{ marginTop: 20 }}>
+            {carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
+          </OText>
+        </Title>
+        {carts.map((cart: any, i: number) => (
+          <View key={cart.uuid} style={{ overflow: 'visible' }}>
+            {cart.products.length > 0 && (
+              <>
+                <Cart
+                  cart={cart}
+                  isCartList
+                  onNavigationRedirect={props.onNavigationRedirect}
+                  isCartsLoading={isCartsLoading}
+                  setIsCartsLoading={setIsCartsLoading}
+                />
+                {!(i === (carts.length - 1)) && (
+                  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 20 }} />
+                )}
+              </>
+            )}
+          </View>
+        ))}
+        <Spinner visible={isCartsLoading} />
+      </>
+    ) : (
+      <>
+        <Title>
+          <OText size={20}>
+            {t('MY_CARTS', 'My Carts')}
+          </OText>
+        </Title>
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_CARTS_FOUND', 'Sorry, no carts found')}
+            image={theme.images.general.notFound}
+          />
+        </View>
+      </>
+    )
+  )
 }

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

@@ -1,19 +1,5 @@
 import styled from 'styled-components/native';
 
-export const CCContainer = styled.View`
-  padding: 20px 40px;
-`
-
-export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
-`
-
-export const CCList = styled.ScrollView`
-  padding: 10px 0px;
+export const Title = styled.View`
+  margin: 20px 0;
 `

package/themes/franchises/index.tsx

@@ -1,111 +0,0 @@
-import { AddressForm } from './src/components/AddressForm';
-import { AddressDetails } from './src/components/AddressDetails';
-import { Home } from './src/components/Home';
-import { LoginForm } from './src/components/LoginForm';
-import { SignupForm } from './src/components/SignupForm';
-import { ActiveOrders } from './src/components/ActiveOrders';
-import { AddressList } from './src/components/AddressList';
-import { AppleLogin } from './src/components/AppleLogin';
-import { BusinessesListing } from './src/components/BusinessesListing';
-import { BusinessProductsListing } from './src/components/BusinessProductsListing';
-import { CartContent } from './src/components/CartContent';
-import { Checkout } from './src/components/Checkout';
-import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
-import { MomentOption } from './src/components/MomentOption';
-import { OrdersOption } from './src/components/OrdersOption';
-import { OrderDetails } from './src/components/OrderDetails';
-import { UserProfileForm } from './src/components/UserProfileForm';
-import { ReviewOrder } from './src/components/ReviewOrder';
-import { UserProfile } from './src/components/UserProfile';
-import { NotFoundSource } from './src/components/NotFoundSource';
-import { Help } from './src/components/Help';
-import { HelpOrder } from './src/components/HelpOrder';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import Notifications from './src/components/Notifications';
-import { ReviewProduct } from './src/components/ReviewProduct';
-import { ReviewDriver } from './src/components/ReviewDriver';
-
-import { Toast } from './src/components/shared/OToast';
-import {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-} from './src/components/shared';
-
-import { Container } from './src/layouts/Container';
-import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
-import {
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-} from './src/providers/StoreUtil';
-
-export {
-	AddressForm,
-	AddressDetails,
-	Home as HomeView,
-	SignupForm,
-	LoginForm,
-	ActiveOrders,
-	AddressList,
-	AppleLogin,
-	BusinessesListing,
-	BusinessProductsListing,
-	CartContent,
-	Checkout,
-	ForgotPasswordForm,
-	MomentOption,
-	OrdersOption,
-	OrderDetails,
-	UserProfileForm,
-	ReviewOrder,
-	UserProfile,
-	NotFoundSource,
-	Help,
-	HelpGuide,
-	HelpOrder,
-	HelpAccountAndPayment,
-	OrderTypeSelector,
-	Notifications,
-	ReviewProduct,
-	ReviewDriver,
-
-	// OComponents
-	Toast,
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-
-	// layout
-	Container,
-	SafeAreaContainer,
-
-	// utils
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-}

package/themes/franchises/src/components/ActiveOrders/index.tsx

@@ -1,134 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OIcon, OIconButton, OText } from '../shared';
-import {
-	ActiveOrdersContainer,
-	Card,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-} from './styles';
-import { View, StyleSheet } from 'react-native';
-
-import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
-import { useTheme } from 'styled-components/native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-
-export const ActiveOrders = (props: ActiveOrdersParams) => {
-	const {
-		onNavigationRedirect,
-		orders,
-		pagination,
-		loadMoreOrders,
-		getOrderStatus,
-		isPreorders
-	} = props;
-
-	const theme = useTheme();
-	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
-
-	const handleClickCard = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleLike = () => {
-
-	}
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				<Information>
-					{/* {!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)} */}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{`${t('ORDER_NO', 'Order No')}.${order.id}`}
-							</OText>
-							<OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
-								{order?.delivery_datetime_utc
-									? formatDate(order?.delivery_datetime_utc)
-									: formatDate(order?.delivery_datetime, { utc: false })}
-							</OText>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						<Price>
-							<OText size={12} lineHeight={18}>
-								{parsePrice(order?.summary?.total || order?.total)}
-							</OText>
-							{!isPreorders &&
-								<TouchableOpacity onPress={handleLike}>
-									<OIcon src={theme.images.general.heart} color={theme.colors.red} width={16} />
-								</TouchableOpacity>
-							}
-						</Price>
-					</OrderInformation>
-				</Information>
-			</Card>
-		</React.Fragment>
-	);
-
-	return (
-		<>
-			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
-				{orders.length > 0 &&
-					orders.map((order: any, index: any) => (
-						<Order key={order?.id || order?.uuid} order={order} index={index} />
-					))}
-			</ActiveOrdersContainer>
-			<View
-				style={{
-					height: 8,
-					backgroundColor: theme.colors.backgroundGray100,
-					marginHorizontal: -40,
-				}}
-			/>
-		</>
-	);
-};
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-});

package/themes/franchises/src/components/ActiveOrders/styles.tsx

@@ -1,44 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ActiveOrdersContainer = styled.View`
-  margin-bottom: 20px;
-`
-
-export const Card = styled.TouchableOpacity`
-  flex: 1;
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 22px
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  align-items: center;
-  padding-vertical: 5px;
-  margin-bottom: 12px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: flex-start;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`