ordering-ui-react-native 0.12.0 → 0.12.1

package/package.json

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

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

@@ -55,6 +55,11 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+  const onNavigationRedirect = (page: string, params: any) => {
+    if (!page) return
+    navigation.navigate(page, params);
+  }
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader
@@ -150,7 +155,12 @@ export const BusinessBasicInformation = (
 								{business?.name}
 							</OText>
 							{!isBusinessInfoShow && (
-								<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+								<WrapBusinessInfo
+                  onPress={() => onNavigationRedirect(
+                    'BusinessInformation',
+                    { businessState, business }
+                  )}
+                >
 									<OIcon src={theme.images.general.info} width={16} color={theme.colors.textSecondary} />
 								</WrapBusinessInfo>
 							)}
@@ -227,7 +237,7 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
+			{/* <OModal
 				titleSectionStyle={styles.modalTitleSectionStyle}
 				open={openBusinessInformation}
 				onClose={() => setOpenBusinessInformation(false)}
@@ -236,7 +246,7 @@ export const BusinessBasicInformation = (
 					businessState={businessState}
 					business={business}
 				/>
-			</OModal>
+			</OModal> */}
 			<OModal
 				entireModal
 				titleSectionStyle={styles.modalTitleSectionStyle}

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

@@ -62,4 +62,4 @@ export const DropOptionButton = styled.TouchableOpacity`
   padding-horizontal: 8px;
   flex-direction: row;
   margin-end: 12px;
-`
+`

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
 	useLanguage, useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
+import { SliderBox } from 'react-native-image-slider-box';
+import { OIcon, OText, OModal } from '../shared';
 import {
 	BusinessInformationContainer,
 	WrapMainContent,
@@ -16,17 +17,21 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
+import NavBar from '../../../../../src/components/NavBar'
 
 const BusinessInformationUI = (props: BusinessInformationParams) => {
-	const { businessState, businessSchedule, businessLocation } = props;
+	const { businessState, business, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
+
+  const [openImages, setOpenImages] = useState(false)
+
 	const daysOfWeek = [
 		t('SUNDAY_ABBREVIATION', 'Sun'),
 		t('MONDAY_ABBREVIATION', 'Mon'),
@@ -69,7 +74,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return vAry;
 	};
 	const bImages: any = () => {
-		const len = businessState?.business?.gallery?.length | 0;
+		const len = businessState?.business?.gallery?.length ?? 0;
 		if (len == 0) return [];
 		const iAry = businessState?.business?.gallery.filter(
 			({ type, video }: any) => type == 1 && video == null,
@@ -79,6 +84,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 
 	return (
 		<BusinessInformationContainer>
+      <NavBar
+        style={{ paddingBottom: 0 }}
+        onActionLeft={() => props.navigation?.canGoBack() && props.navigation.goBack()}
+      />
 			<WrapMainContent contentContainerStyle={{}}>
 				<InnerContent>
 					<OText size={24} weight={Platform.OS === 'ios' ? '600' : 'bold'}>
@@ -89,7 +98,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('BUSINESS_LOCATION', 'Business Location')}
 						</OText>
 					</GrayBackground>
-					{businessLocation.location && (
+					{!!businessLocation.location && (
 						<WrapBusinessMap style={styles.wrapMapStyle}>
 							<GoogleMap
 								readOnly
@@ -107,7 +116,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 							{t('OPENING_TIME', 'Opening Time')}
 						</OText>
 					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
+					{!!businessSchedule && businessSchedule?.length > 0 && (
 						<WrapScheduleBlock>
 							{businessSchedule.map((schedule: any, i: number) => (
 								<ScheduleBlock key={i}>
@@ -164,19 +173,41 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										{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} />
-										</View>
-									))}
+									{bImages().map((i: any) => ( i.file != null && (
+                    <View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+                      <TouchableOpacity  onPress={() => setOpenImages(true)}>
+                        <OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+                      </TouchableOpacity>
+                    </View>
+                  )))}
 								</MediaWrapper>
 							</>
 						)}
 					</>
 				</InnerContent>
 			</WrapMainContent>
+      <OModal
+				titleSectionStyle={styles.modalTitleSectionStyle}
+				open={openImages}
+				onClose={() => setOpenImages(false)}
+				isNotDecoration
+      >
+        <View style={{ height: '100%', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
+          <View style={{ marginTop: 20, height: 200}}>
+            <SliderBox
+              // circleLoop
+              sliderBoxHeight={200}
+              images={bImages().map((image: any) => optimizeImage(image?.file, 'h_300,c_limit'))}
+              dotColor={theme.colors.primary}
+              inactiveDotColor={theme.colors.backgroundGray}
+              dotStyle={styles.dotStyle}
+              activeOpacity={1}
+            />
+          </View>
+        </View>
+			</OModal>
 		</BusinessInformationContainer>
 	);
 };
@@ -187,6 +218,21 @@ const styles = StyleSheet.create({
 		marginTop: 15,
 		marginBottom: 10,
 	},
+  dotStyle: {
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    padding: 0,
+    margin: 0
+  },
+  modalTitleSectionStyle: {
+		position: 'absolute',
+		width: '100%',
+		top: 0,
+		zIndex: 100,
+		left: 40
+	},
 });
 
 export const BusinessInformation = (props: BusinessInformationParams) => {

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

@@ -8,7 +8,7 @@ export const GrayBackground = styled.View`
   margin-top: 27px;
 `
 export const WrapMainContent = styled.ScrollView`
-  margin-top: 40px;
+  /* margin-top: 40px; */
 `
 export const MediaWrapper = styled.ScrollView`
   margin-top: 16px;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -22,6 +22,10 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
+import { FloatingButton } from '../FloatingButton';
+import { Container } from '../../layouts/Container';
+import NavBar from '../NavBar';
+import { OrderSummary } from '../OrderSummary';
 
 import {
 	ChContainer,
@@ -36,12 +40,7 @@ import {
 	ChUserDetails,
 	ChCart
 } from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
-import { FloatingButton } from '../FloatingButton';
-import { Container } from '../../layouts/Container';
-import NavBar from '../NavBar';
-import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
 
 const mapConfigs = {

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

@@ -84,6 +84,7 @@ const DriverTipsUI = (props: any) => {
 							<TouchableOpacity
 								key={i}
 								onPress={() => handleChangeOpt(option)}
+                disabled={loading}
 							>
 								<DTCard
 									style={style.circle}

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

@@ -13,21 +13,22 @@ export const DTWrapperTips = styled.View`
   display: flex;
   flex-direction: row;
   width: 100%;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
 `
 
 export const DTCard = styled.View`
+  display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
+  padding: 15px;
+  border: 1px solid ${(props: any) => props.theme.colors.whiteGray};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
+  min-height: 60px;
+  min-width: 60px;
+  margin-right: 10px;
+  margin-top: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};
@@ -45,11 +46,11 @@ export const DTForm = styled.View`
 export const DTLabel = styled.Text`
   font-size: 10px;
   align-self: flex-start;
-  color: ${(props: any) => props.theme.colors.textSecondary}
+  color: ${(props: any) => props.theme.colors.textSecondary};
   ${(props: any) => props.theme?.rtl && css`
     margin-left: 20px;
     margin-right: 0;
-  `}
+  `};
   margin-top: 5px;
   margin-bottom: 17px;
 `

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

@@ -134,7 +134,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 					<OText
 						size={10}
-						style={{ marginStart: 12 }}
+						style={{ marginLeft: 12 }}
 						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 					>
 						{t(item.gateway.toUpperCase(), item.name)}
@@ -151,19 +151,21 @@ const PaymentOptionsUI = (props: any) => {
 	return (
 		<PMContainer>
 			{paymethodsList.paymethods.length > 0 && (
-				<PMDropDownWrapper onPress={() => setShowMethods(true)}>
-					<OText color={theme.colors.textSecondary} style={{marginStart: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
-					<OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
-					{isShowMethods && <PMDropDownCont>
-						{
-							pmData.map((item: any, idx: number) => 
-							<React.Fragment key={idx}>
-								{renderPaymethods({item})}
-							</React.Fragment>	
-							)
-						}
-					</PMDropDownCont>}
-				</PMDropDownWrapper>
+        <View style={{ flexDirection: 'column' }}>
+          <PMDropDownWrapper onPress={() => setShowMethods(!isShowMethods)}>
+            <OText color={theme.colors.textSecondary} style={{marginLeft: 14}}>{paymethodSelected?.paymethod?.name || t('SELECT_PAYMENT_METHOD', 'Select Paymethod')}</OText>
+            <OIcon color={theme.colors.textSecondary} width={16} src={theme.images.general.chevron_right} style={{transform: [{rotate: '90deg'}], marginEnd: 14}} />
+          </PMDropDownWrapper>
+          {isShowMethods && (
+            <PMDropDownCont>
+              {pmData.map((item: any, idx: number) =>
+                <TouchableOpacity key={idx} onPress={() => console.log('asdasdasda')}>
+                  {renderPaymethods({item})}
+                </TouchableOpacity>
+              )}
+            </PMDropDownCont>
+          )}
+        </View>
 			)}
 
 			{(paymethodsList.loading || isLoading) && (

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

@@ -66,11 +66,9 @@ export const PMDropDownWrapper = styled.TouchableOpacity`
 `;
 
 export const PMDropDownCont = styled.View`
-  background-color: white;
-  border-radius: 7.6px;
-  position: absolute;
-  top: 44px;
+  border-radius: 8px;
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px 0 0;
   box-shadow: 0 2px 3px #0000004D;
-`;
+  z-index: 99999;
+`;