ordering-ui-react-native 0.12.57 → 0.12.61

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

@@ -1,189 +0,0 @@
-import React from 'react';
-import {
-	BusinessController as BusinessSingleCard,
-	useUtils,
-	useOrder,
-	useLanguage,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
-import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
-import {
-	Card,
-	BusinessHero,
-	BusinessContent,
-	BusinessCategory,
-	BusinessInfo,
-	Metadata,
-	BusinessState,
-	BusinessLogo,
-	Reviews,
-} from './styles';
-
-export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
-	const { business, handleClick } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-
-	const theme = useTheme();
-
-
-	const styles = StyleSheet.create({
-		headerStyle: {
-			borderTopLeftRadius: 25,
-			borderTopRightRadius: 25,
-		},
-		businessLogo: {
-			alignSelf: 'center',
-		},
-		businessStateView: {
-			backgroundColor: '#6C6C6C',
-			borderRadius: 10,
-		},
-		businessStateText: {
-			color: theme.colors.white,
-			textAlign: 'center',
-			padding: 8,
-		},
-		metadata: {
-			marginRight: 20,
-			marginLeft: 5,
-		},
-		metaField: {
-			paddingEnd: 3,
-			marginEnd: 2,
-		},
-		starIcon: {
-			marginTop: 1.5,
-			marginHorizontal: 5,
-		},
-		featured: {
-			position: 'absolute',
-			padding: 8,
-			backgroundColor: theme.colors.backgroundDark,
-			opacity: 0.8,
-			borderRadius: 10,
-			left: 20,
-			top: 10,
-		},
-		closed: {
-
-		},
-		bullet: {
-			flexDirection: 'row',
-			justifyContent: 'flex-start',
-			width: '100%',
-		},
-	});
-
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
-	const { width } = useWindowDimensions();
-
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach((type) => {
-			if (business[type]) {
-				_types.push(t(type.toUpperCase(), type));
-			}
-		});
-		return _types.join(', ');
-	};
-
-	return (
-		<Card activeOpacity={1} onPress={() => handleClick(business)}>
-			<BusinessHero>
-				<BusinessLogo>
-					<OIcon
-						url={optimizeImage(business?.logo, 'h_100,c_limit')}
-						width={40}
-						height={40}
-					/>
-				</BusinessLogo>
-				<BusinessContent style={{ width: width * 0.6 }}>
-					<BusinessInfo>
-						<OText size={12} ellipsizeMode={'tail'} numberOfLines={2}>
-							{business?.name}
-						</OText>
-						{/* {business?.reviews?.total > 0 && (
-              <Reviews>
-                <IconAntDesign
-                  name="star"
-                  color={theme.colors.primary}
-                  size={16}
-                  style={styles.starIcon}
-                />
-                <OText>
-                  {parseNumber(business?.reviews?.total, { separator: '.' })}
-                </OText>
-              </Reviews>
-            )} */}
-					</BusinessInfo>
-					{/* <BusinessCategory>
-            <OText>{getBusinessType()}</OText>
-          </BusinessCategory> */}
-					<Metadata>
-						{!business?.open ? (
-							<View style={styles.closed}>
-								<OText size={10} color={theme.colors.red}>
-									{t('CLOSED', 'Closed')}
-								</OText>
-							</View>
-						) : (
-							<View style={styles.bullet}>
-								{/* <MaterialComIcon name="alarm" size={16} /> */}
-								<OText size={10} color={theme.colors.textSecondary}>
-									{t('DELIVERY_FEE', 'Delivery Fee')}
-								</OText>
-								<OText
-									size={10}
-									color={theme.colors.textSecondary}
-									style={styles.metaField}>
-									{parsePrice(business?.delivery_price) + '  \u2022'}
-								</OText>
-
-								<OText
-									size={10}
-									color={theme.colors.textSecondary}
-									style={styles.metaField}>
-									{convertHoursToMinutes(
-										orderState?.options?.type === 1
-											? business?.delivery_time
-											: business?.pickup_time,
-									) + '  \u2022'}
-								</OText>
-
-								<OText size={10} color={theme.colors.textSecondary}>
-									{parseDistance(business?.distance)}
-								</OText>
-							</View>
-						)}
-					</Metadata>
-				</BusinessContent>
-				{/* <BusinessState>
-          {!business?.open && (
-            <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
-            </View>
-          )}
-        </BusinessState> */}
-			</BusinessHero>
-		</Card>
-	);
-};
-
-export const BusinessFeaturedController = (props: BusinessControllerParams) => {
-	const BusinessControllerProps = {
-		...props,
-		UIComponent: BusinessFeaturedCtrlUI,
-	};
-
-	return <BusinessSingleCard {...BusinessControllerProps} />;
-};

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

@@ -1,50 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 4px;
-  height: 60px;
-  overflow: hidden;
-`;
-
-export const BusinessHero = styled.View`
-  height: 68px;
-  flex-direction: row;
-  position: relative;
-  align-items: center;
-`;
-
-export const BusinessContent = styled.View`
-    padding-horizontal: 10px;
-    padding-vertical: 8px;
-`;
-
-export const BusinessInfo = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const BusinessCategory = styled.View`
-`;
-
-export const Metadata = styled.View`
-  flex-direction: row;
-`;
-
-export const BusinessState = styled.View`
-    margin-right: 20px;
-    margin-top: 20px;
-`
-
-export const BusinessLogo = styled.View`
-    width: 48px;
-    height: 48px;
-	 border-radius: 7.6px;
-	 border: 1px solid ${(props: any) => props.theme.colors.border};
-	 align-items: center;
-	 justify-content: center;
-`
-
-export const Reviews = styled.View`
-  flex-direction: row;
-`

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

@@ -1,202 +0,0 @@
-import React from 'react';
-import {
-	BusinessInformation as BusinessInformationController,
-	useLanguage, useUtils
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import {
-	BusinessInformationContainer,
-	WrapMainContent,
-	GrayBackground,
-	WrapScheduleBlock,
-	ScheduleBlock,
-	WrapBusinessMap,
-	InnerContent,
-	DivideView,
-	MediaWrapper,
-} from './styles';
-import { StyleSheet, View } from 'react-native';
-import { BusinessInformationParams } from '../../types';
-import { GoogleMap } from '../GoogleMap';
-import { WebView } from 'react-native-webview';
-
-const BusinessInformationUI = (props: BusinessInformationParams) => {
-	const { businessState, businessSchedule, businessLocation } = props;
-
-	const theme = useTheme();
-	const [, t] = useLanguage();
-	const [{ optimizeImage }] = useUtils();
-	const daysOfWeek = [
-		t('SUNDAY_ABBREVIATION', 'Sun'),
-		t('MONDAY_ABBREVIATION', 'Mon'),
-		t('TUESDAY_ABBREVIATION', 'Tues'),
-		t('WEDNESDAY_ABBREVIATION', 'Wed'),
-		t('THURSDAY_ABBREVIATION', 'Thur'),
-		t('FRIDAY_ABBREVIATION', 'Fri'),
-		t('SATURDAY_ABBREVIATION', 'Sat'),
-	];
-	const scheduleFormatted = ({
-		hour,
-		minute,
-	}: {
-		hour: number | string;
-		minute: number | string;
-	}) => {
-		const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
-		const zz = hour > 12 ? 'PM' : 'AM';
-		const h = parseInt(`${hour}`);
-		return `${h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}`;
-	};
-	const businessCoordinate = {
-		lat: businessState?.business?.location?.lat,
-		lng: businessState?.business?.location?.lng,
-	};
-	const businessImage = {
-		uri: businessState?.business?.logo,
-	};
-	const businessMarker = {
-		latlng: businessCoordinate,
-		image: businessImage,
-	};
-
-	const bVideos = () => {
-		const len = businessState?.business?.gallery?.length | 0;
-		if (len == 0) return [];
-		const vAry = businessState?.business?.gallery.filter(
-			({ type, file }: any) => type == 2 && file == null,
-		);
-		return vAry;
-	};
-	//{uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1'}
-	const bImages: any = () => {
-		const len = businessState?.business?.gallery?.length | 0;
-		if (len == 0) return [];
-		const iAry = businessState?.business?.gallery.filter(
-			({ type, video }: any) => type == 1 && video == null,
-		);
-		return iAry;
-	};
-
-	return (
-		<BusinessInformationContainer>
-			<WrapMainContent contentContainerStyle={{}}>
-				<InnerContent>
-					<OText size={24} weight={'600'}>
-						{businessState?.business?.name}
-					</OText>
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('BUSINESS_LOCATION', 'Business Location')}
-						</OText>
-					</GrayBackground>
-					{businessLocation.location && (
-						<WrapBusinessMap style={styles.wrapMapStyle}>
-							<GoogleMap
-								readOnly
-								location={businessLocation.location}
-								markerTitle={businessState?.business?.name}
-							/>
-						</WrapBusinessMap>
-					)}
-					<OText size={12} mBottom={20}>
-						{businessState?.business?.address}
-					</OText>
-					<DivideView />
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('OPENING_TIME', 'Opening Time')}
-						</OText>
-					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
-						<WrapScheduleBlock>
-							{businessSchedule.map((schedule: any, i: number) => (
-								<ScheduleBlock key={i}>
-									<OText
-										lineHeight={21}
-										mBottom={16}
-										size={14}
-										weight={'600'}
-										style={{ flexBasis: '20%' }}>
-										{daysOfWeek[i].toUpperCase()}
-									</OText>
-									{schedule.enabled ? (
-										<OText mBottom={16}>
-											{scheduleFormatted(schedule.lapses[0].open) +
-												' - ' +
-												scheduleFormatted(schedule.lapses[0].close)}
-										</OText>
-									) : (
-										<OText color={theme.colors.red} mBottom={16}>
-											{t('CLOSED', 'Closed')}
-										</OText>
-									)}
-								</ScheduleBlock>
-							))}
-						</WrapScheduleBlock>
-					)}
-					{/* {businessState?.business?.gallery?.length > 0 && ( */}
-					<>
-						{bVideos().length > 0 && (
-							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('VIDEOS', 'Videos')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bVideos().map((v: any) => (
-										<WebView
-											key={`vid_id_${v.id}`}
-											style={{ width: 210, height: 127, borderRadius: 7.6 }}
-											javaScriptEnabled={true}
-											domStorageEnabled={true}
-											source={{ uri: v.video }}
-										/>
-									))}
-								</MediaWrapper>
-							</>
-						)}
-						{bImages().length > 0 && (
-							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('IMAGES', 'Images')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-											{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
-										</View>
-									))}
-								</MediaWrapper>
-							</>
-						)}
-					</>
-					{/* )} */}
-				</InnerContent>
-			</WrapMainContent>
-		</BusinessInformationContainer>
-	);
-};
-
-const styles = StyleSheet.create({
-	wrapMapStyle: {
-		overflow: 'hidden',
-		marginTop: 15,
-		marginBottom: 10,
-	},
-});
-
-export const BusinessInformation = (props: BusinessInformationParams) => {
-	const BusinessInformationProps = {
-		...props,
-		UIComponent: BusinessInformationUI,
-	};
-	return <BusinessInformationController {...BusinessInformationProps} />;
-};

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

@@ -1,39 +0,0 @@
-import styled from 'styled-components/native'
-
-export const BusinessInformationContainer = styled.View`
-  width: 100%;
-  height: 100%;
-`
-export const GrayBackground = styled.View`
-  margin-top: 27px;
-`
-export const WrapMainContent = styled.ScrollView`
-  margin-top: 40px;
-`
-export const MediaWrapper = styled.ScrollView`
-  margin-top: 16px;
-  margin-bottom: 30px;
-  min-height: 127px;
-  height: 127px;
-`
-export const InnerContent = styled.View`
-  padding: 20px 40px;
-`
-export const WrapScheduleBlock = styled.View`
-  margin: 20px 0;
-`
-export const ScheduleBlock = styled.View`
-	flex-direction: row;
-	align-items: center;
-`
-export const WrapBusinessMap = styled.View`
-  max-height: 200px;
-  height: 200px;
-  flex: 1;
-  margin-horizontal: -40px;
-`
-export const DivideView = styled.View`
-	height: 8px;
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-	margin-horizontal: -40px;
-`;

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

@@ -1,125 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-	BIContainer,
-	BIHeader,
-	BIContent,
-	BIInfo,
-	BIContentInfo,
-	BITotal,
-	BIActions
-} from './styles';
-import { OAlert, OIcon, OText } from '../shared';
-
-export const BusinessItemAccordion = (props: any) => {
-	const {
-		cart,
-		moment,
-		handleClearProducts
-	} = props
-
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const [{ parsePrice }] = useUtils();
-	const theme = useTheme();
-
-	const isCartPending = cart?.status === 2
-	const isClosed = !cart?.valid_schedule
-	const isProducts = cart?.products?.length
-
-	const [isActive, setActiveState] = useState(false)
-
-	useEffect(() => {
-		const cartsArray = Object.values(orderState?.carts)
-		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
-		if ((cartsLength === 1) && !isClosed) {
-			setActiveState(true)
-		}
-	}, [orderState?.carts])
-
-	return (
-		<BIContainer isClosed={isClosed}>
-			<BIHeader
-				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
-				activeOpacity={1}
-			>
-				<BIInfo>
-					<BIContentInfo>
-						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
-						{/* {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )} */}
-						<View style={{ flexDirection: 'row' }}>
-							{props.onNavigationRedirect && !isClosed && (
-								<>
-									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
-										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
-									</TouchableOpacity>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-								</>
-							)}
-							{!isCartPending && !isClosed && (
-								<OAlert
-									title={t('DELETE_CART', 'Delete Cart')}
-									message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
-									onAccept={() => handleClearProducts()}
-								>
-									<OText size={12} lineHeight={18} color={theme.colors.red} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
-								</OAlert>
-							)}
-						</View>
-					</BIContentInfo>
-				</BIInfo>
-
-				{/* {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
-          <BITotal>
-            <OText color='#000'>{parsePrice(cart?.total)}</OText>
-            <OText>{t('CART_TOTAL', 'Total')}</OText>
-          </BITotal>
-        )} */}
-
-				{isClosed && (
-					<BITotal>
-						<OText color={theme.colors.red} size={12}>{t('CLOSED', 'Closed')} {moment}</OText>
-					</BITotal>
-				)}
-
-				{!isClosed && !isProducts && (
-					<BITotal>
-						<OText>{t('NO_PRODUCTS', 'No products')}</OText>
-					</BITotal>
-				)}
-
-				<BIActions>
-
-					{!isClosed && !!isProducts && (
-						<>
-							<OIcon src={!isActive ? theme.images.general.drop_down : theme.images.general.drop_up} width={12} />
-						</>
-					)}
-				</BIActions>
-			</BIHeader>
-
-			<BIContent style={{ display: isActive ? 'flex' : 'none' }}>
-				{props.children}
-			</BIContent>
-		</BIContainer>
-	)
-}

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

@@ -1,54 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const BIContainer = styled.View`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  opacity: 1;
-  border-radius: 7.6px;
-  overflow: hidden;
-
-  ${(props: any) => props.isClosed && css`
-	 opacity: 0.5;
-  `}
-`
-
-export const BIHeader = styled.TouchableOpacity`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  padding: 10px 0;
-  background-color: ${(props: any) => props.theme.colors.white};
-`
-
-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`
-  justify-content: center;
-  text-transform: capitalize;
-`
-
-export const BITotal = styled.View`
-  width: 25%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
-export const BIActions = styled.View`
-  max-width: 30%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-`