ordering-ui-react-native 0.17.61 → 0.17.63

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

@@ -153,6 +153,7 @@ const CheckoutUI = (props: any) => {
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
@@ -162,7 +163,6 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
-		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -268,10 +268,6 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [errors])
 
-	// useEffect(() => {
-	//   handlePaymethodChange(null)
-	// }, [cart?.total])
-
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
 			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
@@ -282,6 +278,21 @@ const CheckoutUI = (props: any) => {
 		onFailPaypal()
 	}, [showGateway.closedByUser])
 
+	const HeaderTitle = (props: any) => {
+		const { text } = props
+		return (
+			<OText
+				size={16}
+				lineHeight={24}
+				weight={'500'}
+				mBottom={props.mb ?? 10}
+				color={theme.colors.textNormal}
+			>
+				{text}
+			</OText>
+		)
+	}
+
 	return (
 		<>
 			<Container noPadding>
@@ -299,13 +310,20 @@ const CheckoutUI = (props: any) => {
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
-							{/* <OrderTypeSelector configTypes={configTypes} /> */}
-							<CHMomentWrapper onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(options?.type || 1), 'Delivery')}</OText>
+							<CHMomentWrapper isCustomColor={isChewLayout} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode={'tail'}
+									color={theme.colors?.[isChewLayout ? 'white' : 'textSecondary']}
+								>
+									{t(getTypesText(options?.type || 1), 'Delivery')}
+								</OText>
 								<OIcon
 									src={theme.images.general.arrow_down}
 									width={10}
 									style={{ marginStart: 8 }}
+									{...(isChewLayout && { color: 'white' })}
 								/>
 							</CHMomentWrapper>
 							<CHMomentWrapper
@@ -348,9 +366,7 @@ const CheckoutUI = (props: any) => {
 								Object.values(businessDetails?.business).length > 0 &&
 								(
 									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10} color={theme.colors.textNormal}>
-											{t('BUSINESS_DETAILS', 'Business Details')}
-										</OText>
+										<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 										<View>
 											<OText size={12} lineHeight={18} weight={'400'}>
 												{businessDetails?.business?.name}
@@ -369,9 +385,7 @@ const CheckoutUI = (props: any) => {
 								)}
 							{businessDetails?.error && businessDetails?.error?.length > 0 && (
 								<View>
-									<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
-										{t('BUSINESS_DETAILS', 'Business Details')}
-									</OText>
+									<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
 									<NotFoundSource
 										content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
 									/>
@@ -393,6 +407,7 @@ const CheckoutUI = (props: any) => {
 							) : (
 								<UserDetails
 									isUserDetailsEdit={isUserDetailsEdit}
+									HeaderTitle={<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer Details')} mb={0} />}
 									cartStatus={cart?.status}
 									businessId={cart?.business_id}
 									useValidationFields
@@ -417,8 +432,8 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								</View>
 							) : (
-								<>
-									<OText size={16} color={theme.colors.textNormal} mBottom={10}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+								<ChSection>
+									<HeaderTitle text={t('DELIVERY_OPTIONS', 'Delivery options')} />
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -464,7 +479,7 @@ const CheckoutUI = (props: any) => {
 										/>
 									</View>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
-								</>
+								</ChSection>
 							)}
 
 						</DeliveryOptionsContainer>
@@ -486,29 +501,6 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{/* <ChSection>
-        <ChTotal>
-          {
-            (
-              <>
-                <OIcon
-                  url={businessLogo || businessDetails?.business?.logo}
-                  width={80}
-                  height={80}
-                  borderRadius={80}
-                />
-                <View style={{ marginLeft: 10, width: '85%' }}>
-                  <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
-                    {businessName || businessDetails?.business?.name}
-                  </OText>
-                  <OText size={22}>
-                    {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                  </OText>
-                </View>
-              </>
-            )}
-        </ChTotal>
-      </ChSection> */}
 					<ChSection>
 						<ChAddress>
 							{(businessDetails?.loading || cartState.loading) ? (
@@ -525,6 +517,7 @@ const CheckoutUI = (props: any) => {
 									uuid={cartUuid}
 									apiKey={configs?.google_maps_api_key?.value}
 									mapConfigs={mapConfigs}
+									HeaderTitle={<HeaderTitle text={t('DELIVERY_ADDRESS', 'Delivery address')} mb={0} />}
 								/>
 							)}
 						</ChAddress>
@@ -541,9 +534,7 @@ const CheckoutUI = (props: any) => {
 						(
 							<ChSection>
 								<ChDriverTips>
-									<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
+									<HeaderTitle text={t('DRIVER_TIPS', 'Driver Tips')} mb={0} />
 									<DriverTips
 										uuid={cartUuid}
 										businessId={cart?.business_id}
@@ -562,9 +553,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
 						<ChSection>
 							<ChPaymethods>
-								<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-									{t('PAYMENT_METHOD', 'Payment Method')}
-								</OText>
+								<HeaderTitle text={t('PAYMENT_METHOD', 'Payment Method')} mb={0} />
 								{!cartState.loading && cart?.status === 4 && (
 									<OText
 										style={{ textAlign: 'center', marginTop: 20 }}
@@ -630,13 +619,7 @@ const CheckoutUI = (props: any) => {
 								) : (
 									<>
 										<CartHeader>
-											<OText
-												size={16}
-												lineHeight={24}
-												color={theme.colors.textNormal}
-											>
-												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
-											</OText>
+											<HeaderTitle text={t('MOBILE_FRONT_YOUR_ORDER', 'Your order')} mb={0} />
 											<TouchableOpacity
 												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
 											>

package/themes/original/src/components/Checkout/styles.tsx

@@ -6,7 +6,7 @@ export const ChContainer = styled.View`
 `
 
 export const ChSection = styled.View`
-	padding-top: 30px;
+	padding-top: 20px;
 `
 
 export const ChHeader = styled.View`
@@ -40,7 +40,9 @@ export const ChMoment = styled(ChAddress)`
 `
 
 export const CHMomentWrapper = styled.TouchableOpacity`
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+	background-color: ${(props: any) => props.isCustomColor
+    ? props.theme.colors.primary
+    : props.theme.colors.backgroundGray100};
 	border-radius: 7.6px;
 	font-size: 12px;
 	max-width: 240px;

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

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, useWindowDimensions, Keyboard, View } from 'react-native';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OIcon, OText } from '../shared';
+
+import { CityElement, Container } from './styles'
+
+export const CitiesControl = (props: any) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const { height } = useWindowDimensions();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setIsKeyboardShow(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setIsKeyboardShow(false)
+    );
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
+      <View>
+        {cities?.map((city: any) => (
+          <CityElement
+            key={city?.id}
+            activeOpacity={1}
+            disabled={orderState?.loading}
+            onPress={() => setCityState(city?.id === cityState ? null : city?.id)}
+          >
+            <OIcon
+              src={cityState === city?.id
+                ? theme.images.general.option_checked
+                : theme.images.general.option_normal}
+              width={16}
+              style={{ marginEnd: 24 }}
+            />
+            <OText color={theme.colors.black}>
+              {city?.name}
+            </OText>
+          </CityElement>
+        ))}
+      </View>
+      <OButton
+        text={t('CONTINUE', 'Continue')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        style={styles.btnStyle}
+        textStyle={{ color: 'white' }}
+        onClick={() => handleClick()}
+      />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    marginTop: 20,
+    borderRadius: 8,
+    shadowOpacity: 0,
+    height: 44
+  },
+})

package/themes/original/src/components/CitiesControl/styles.tsx

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding: 0 40px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+
+  ${(props: any) => props.height && css`
+    height: ${props.height}px;
+  `}
+`
+
+export const CityElement = styled.TouchableOpacity`
+  padding: 10px;
+  flex-direction: row;
+`

package/themes/original/src/components/GPSButton/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
 export const GpsButtonStyle = styled.TouchableOpacity`
-  width: 30px;
-	height: 30px;
-`
+  width: 16px;
+	height: 16px;
+`

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

@@ -67,51 +67,51 @@ export const MyOrders = (props: any) => {
   });
 
   return (
-    <Container noPadding refreshControl={
-      <RefreshControl
-        refreshing={refreshing}
-        onRefresh={() => handleOnRefresh()}
-      />
-    }>
+    <Container
+      pt={0}
+      noPadding
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
+    >
       {(isChewLayout || showNavbar) && (
         <View style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingHorizontal: 40,
-          marginTop: Platform.OS === 'android' ? 50 : 30,
+          ...{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 40,
+            marginTop: Platform.OS === 'android' ? 50 : 30,
+          },
+          ...props.titleStyle
         }}>
-          <OButton
-            imgLeftStyle={{ width: 18 }}
-            imgRightSrc={null}
-            style={{
-              borderWidth: 0,
-              width: 26,
-              height: 26,
-              backgroundColor: '#FFF',
-              borderColor: '#FFF',
-              shadowColor: '#FFF',
-              paddingLeft: 0,
-              paddingRight: 0
-            }}
-            onClick={goToBack}
-            icon={AntDesignIcon}
-            iconProps={{
-              name: 'arrowleft',
-              size: 26
-            }}
-          />
-          <OText
-            size={24}
-            style={{
-              textTransform: 'capitalize',
-              marginLeft: 20,
-              top: 2
-            }}
-          >
-            {t('MY_ORDERS', 'My Orders')}
-          </OText>
+          {!props.hideBackBtn && (
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0
+              }}
+              onClick={goToBack}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26
+              }}
+            />
+          )}
+          <HeaderTitle ph={0} text={t('MY_ORDERS', 'My Orders')} />
         </View>
       )}
       {!hideOrders && !isChewLayout && !showNavbar && (

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

@@ -358,7 +358,10 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
-		product?.images?.length > 0 ? imageList.push(product.images) : imageList.push(theme?.images?.dummies?.product)
+		imageList.push(product?.images?.length > 0
+			? product.images
+			: theme?.images?.dummies?.product)
+
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
 				if (img?.file) {
@@ -537,7 +540,7 @@ export const ProductOptionsUI = (props: any) => {
 											style={styles.slide1}
 											key={i}
 										>
-											{String(img).includes('image') || typeof img === 'number' ? (
+											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
 													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
 													source={typeof img !== 'number' ? {
@@ -548,7 +551,8 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													<YoutubePlayer
-														height={300}
+														height={'100%'}
+														width={'100%'}
 														play={playing}
 														videoId={img}
 														onChangeState={onStateChange}
@@ -579,7 +583,7 @@ export const ProductOptionsUI = (props: any) => {
 													opacity: index === thumbsSwiper ? 1 : 0.8
 												}}
 											>
-												{String(img).includes('image') ? (
+												{String(img).includes('http') ? (
 													<OIcon
 														url={img}
 														style={{
@@ -594,7 +598,7 @@ export const ProductOptionsUI = (props: any) => {
 													/>
 												) : (
 													<OIcon
-														url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+														url={'https://img.youtube.com/vi/' + img + '/0.jpg'}
 														style={{
 															borderColor: theme.colors.lightGray,
 															borderRadius: 8,

package/themes/original/src/components/ProductForm/styles.tsx

@@ -44,9 +44,7 @@ export const ProductTitle = styled.View`
   padding-bottom: 7px;
 `
 
-export const ProductDescription = styled.View`
-  margin-bottom: 20px;
-`
+export const ProductDescription = styled.View``
 
 export const ProductEditions = styled.View`
   padding: 0 40px;
@@ -96,7 +94,7 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
-  padding: 26px 40px;
+  padding: 26px 40px 0;
   position: relative;
   background-color: white;
   z-index: 100;

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

@@ -236,12 +236,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										<MaterialCommunityIcon name='chevron-down' size={18} />
 									)}
 								</View>
-								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
+								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
 									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
-											<OIcon
-												src={theme.images.general.pencil}
-												width={20}
+										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
+											<MaterialCommunityIcon
+												name='pencil-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</TouchableOpacity>
@@ -252,9 +252,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
 											onAccept={() => onDeleteProduct(product)}
 										>
-											<OIcon
-												src={theme.images.general.trash}
-												width={20}
+											<MaterialCommunityIcon
+												name='trash-can-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</OAlert>

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

@@ -6,6 +6,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Container,
@@ -33,13 +34,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-	
+
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const iconsSize = isChewLayout ? 20 : 16
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -87,9 +91,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					{option?.allow_suboption_quantity && state?.selected && (
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<OIcon
-									src={theme.images.general.minus}
-									width={16}
+								<IconAntDesign
+									name='minuscircleo'
+									size={iconsSize}
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -97,9 +101,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<OIcon
-									src={theme.images.general.plus}
-									width={16}
+								<IconAntDesign
+									name='pluscircleo'
+									size={iconsSize}
 									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -140,7 +144,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					</OText>
 				)}
 			</Container>
-			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
+			{showMessage && (
+				<OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>
+					{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}
+				</OText>
+			)}
 		</View>
 	)
 }

package/themes/original/src/components/ProductOptionSubOption/styles.tsx

@@ -21,7 +21,6 @@ export const QuantityControl = styled.View`
   margin-horizontal: 5px;
   flex: 1;
   width: 60px;
-
 `
 
 export const PositionControl = styled.View`