ordering-ui-react-native 0.12.22 → 0.12.26

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

@@ -1,198 +1,198 @@
-import React, { useState } from 'react';
-import { View } from 'react-native'
-import {
-	Cart,
-	useOrder,
-	useLanguage,
-	useUtils,
-	useConfig,
-	useValidationFields,
-} from 'ordering-components/native';
-
-import {
-	OSContainer,
-	OSProductList,
-	OSBill,
-	OSTable
-} from './styles';
-
-import { ProductItemAccordion } from '../ProductItemAccordion';
-import { CouponControl } from '../CouponControl';
-import { OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
-import { verifyDecimals } from '../../utils';
-
-
-const OrderSummaryUI = (props: any) => {
-	const {
-		cart,
-		changeQuantity,
-		getProductMax,
-		offsetDisabled,
-		removeProduct,
-		isCartPending,
-		isFromCheckout
-	} = props;
-
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [orderState] = useOrder();
-	const [{ parsePrice, parseNumber }] = useUtils();
-	const [validationFields] = useValidationFields();
-	const [openProduct, setModalIsOpen] = useState(false)
-	const [curProduct, setCurProduct] = useState<any>(null)
-
-	const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-
-	const handleDeleteClick = (product: any) => {
-		removeProduct(product, cart)
-	}
-
-	const handleEditProduct = (product: any) => {
-		setCurProduct(product)
-		setModalIsOpen(true)
-	}
-
-	const handlerProductAction = (product: any) => {
-		if (Object.keys(product).length) {
-			setModalIsOpen(false)
-		}
-	}
-
-	return (
-		<OSContainer>
-			{cart?.products?.length > 0 && (
-				<>
-					<OSProductList>
-						{cart?.products.map((product: any) => (
-							<ProductItemAccordion
-								key={product.code}
-								product={product}
-								isCartPending={isCartPending}
-								isCartProduct
-								changeQuantity={changeQuantity}
-								getProductMax={getProductMax}
-								offsetDisabled={offsetDisabled}
-								onDeleteProduct={handleDeleteClick}
-								onEditProduct={handleEditProduct}
-								isFromCheckout={isFromCheckout}
-							/>
-						))}
-					</OSProductList>
-					{cart?.valid && (
-						<OSBill>
-							<OSTable>
-								<OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText size={12}>{cart.business.tax_type === 1
-									? parsePrice((cart?.subtotal + cart?.tax) || 0)
-									: parsePrice(cart?.subtotal || 0)}</OText>
-							</OSTable>
-							{cart?.discount > 0 && cart?.total >= 0 && (
-								<OSTable>
-									{cart?.discount_type === 1 ? (
-										<OText size={12}>
-											{t('DISCOUNT', 'Discount')}
-											<OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-										</OText>
-									) : (
-										<OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
-									)}
-									<OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
-								</OSTable>
-							)}
-							{cart.business.tax_type !== 1 && (
-								<OSTable>
-									<OText size={12}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.tax || 0)}</OText>
-								</OSTable>
-							)}
-							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
-								<OSTable>
-									<OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-									<OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
-								</OSTable>
-							)}
-							{cart?.driver_tip > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{t('DRIVER_TIP', 'Driver tip')}
-										{cart?.driver_tip_rate > 0 &&
-											parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-											!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-											(
-												`(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
-											)}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
-								</OSTable>
-							)}
-							{cart?.service_fee > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{t('SERVICE_FEE', 'Service Fee')}
-										{`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.service_fee)}</OText>
-								</OSTable>
-							)}
-							{isCouponEnabled && !isCartPending && (
-								<View>
-									<View style={{ paddingVertical: 5 }}>
-										<CouponControl
-											businessId={cart.business_id}
-											price={cart.total}
-										/>
-									</View>
-								</View>
-							)}
-							{cart?.total >= 1 && (
-								<View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
-									<OSTable style={{ marginTop: 15 }}>
-										<OText size={14} style={{ fontWeight: 'bold' }}>
-											{t('TOTAL', 'Total')}
-										</OText>
-										<OText size={14} style={{ fontWeight: 'bold' }} >
-											{parsePrice(cart?.total)}
-										</OText>
-									</OSTable>
-								</View>
-							)}
-						</OSBill>
-					)}
-					<OModal
-						open={openProduct}
-						entireModal
-						customClose
-						onClose={() => setModalIsOpen(false)}
-					>
-						<ProductForm
-							isCartProduct
-							productCart={curProduct}
-							businessSlug={cart?.business?.slug}
-							businessId={cart?.business_id}
-							categoryId={curProduct?.category_id}
-							productId={curProduct?.id}
-							onSave={handlerProductAction}
-							onClose={() => setModalIsOpen(false)}
-							isFromCheckout={isFromCheckout}
-						/>
-					</OModal>
-				</>
-			)}
-		</OSContainer>
-	)
-}
-
-export const OrderSummary = (props: any) => {
-	const orderSummaryProps = {
-		...props,
-		UIComponent: OrderSummaryUI
-	}
-
-	return (
-		<Cart {...orderSummaryProps} />
-	)
-}
+import React, { useState } from 'react';
+import { View } from 'react-native'
+import {
+	Cart,
+	useOrder,
+	useLanguage,
+	useUtils,
+	useConfig,
+	useValidationFields,
+} from 'ordering-components/native';
+
+import {
+	OSContainer,
+	OSProductList,
+	OSBill,
+	OSTable
+} from './styles';
+
+import { ProductItemAccordion } from '../ProductItemAccordion';
+import { CouponControl } from '../CouponControl';
+import { OModal, OText } from '../shared';
+import { ProductForm } from '../ProductForm';
+import { verifyDecimals } from '../../utils';
+
+
+const OrderSummaryUI = (props: any) => {
+	const {
+		cart,
+		changeQuantity,
+		getProductMax,
+		offsetDisabled,
+		removeProduct,
+		isCartPending,
+		isFromCheckout
+	} = props;
+
+	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
+	const [orderState] = useOrder();
+	const [{ parsePrice, parseNumber }] = useUtils();
+	const [validationFields] = useValidationFields();
+	const [openProduct, setModalIsOpen] = useState(false)
+	const [curProduct, setCurProduct] = useState<any>(null)
+
+	const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
+
+	const handleDeleteClick = (product: any) => {
+		removeProduct(product, cart)
+	}
+
+	const handleEditProduct = (product: any) => {
+		setCurProduct(product)
+		setModalIsOpen(true)
+	}
+
+	const handlerProductAction = (product: any) => {
+		if (Object.keys(product).length) {
+			setModalIsOpen(false)
+		}
+	}
+
+	return (
+		<OSContainer>
+			{cart?.products?.length > 0 && (
+				<>
+					<OSProductList>
+						{cart?.products.map((product: any) => (
+							<ProductItemAccordion
+								key={product.code}
+								product={product}
+								isCartPending={isCartPending}
+								isCartProduct
+								changeQuantity={changeQuantity}
+								getProductMax={getProductMax}
+								offsetDisabled={offsetDisabled}
+								onDeleteProduct={handleDeleteClick}
+								onEditProduct={handleEditProduct}
+								isFromCheckout={isFromCheckout}
+							/>
+						))}
+					</OSProductList>
+					{cart?.valid && (
+						<OSBill>
+							<OSTable>
+								<OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
+								<OText size={12}>{cart.business.tax_type === 1
+									? parsePrice((cart?.subtotal + cart?.tax) || 0)
+									: parsePrice(cart?.subtotal || 0)}</OText>
+							</OSTable>
+							{cart?.discount > 0 && cart?.total >= 0 && (
+								<OSTable>
+									{cart?.discount_type === 1 ? (
+										<OText size={12}>
+											{t('DISCOUNT', 'Discount')}
+											<OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+										</OText>
+									) : (
+										<OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
+									)}
+									<OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
+								</OSTable>
+							)}
+							{cart.business.tax_type !== 1 && (
+								<OSTable>
+									<OText size={12}>
+										{t('TAX', 'Tax')}
+										{`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
+									</OText>
+									<OText size={12}>{parsePrice(cart?.tax || 0)}</OText>
+								</OSTable>
+							)}
+							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+								<OSTable>
+									<OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+									<OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
+								</OSTable>
+							)}
+							{cart?.driver_tip > 0 && (
+								<OSTable>
+									<OText size={12}>
+										{t('DRIVER_TIP', 'Driver tip')}
+										{cart?.driver_tip_rate > 0 &&
+											parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+											!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+											(
+												`(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
+											)}
+									</OText>
+									<OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
+								</OSTable>
+							)}
+							{cart?.service_fee > 0 && (
+								<OSTable>
+									<OText size={12}>
+										{t('SERVICE_FEE', 'Service Fee')}
+										{`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
+									</OText>
+									<OText size={12}>{parsePrice(cart?.service_fee)}</OText>
+								</OSTable>
+							)}
+							{isCouponEnabled && !isCartPending && (
+								<View>
+									<View style={{ paddingVertical: 5 }}>
+										<CouponControl
+											businessId={cart.business_id}
+											price={cart.total}
+										/>
+									</View>
+								</View>
+							)}
+							{cart?.total >= 1 && (
+								<View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
+									<OSTable style={{ marginTop: 15 }}>
+										<OText size={14} style={{ fontWeight: 'bold' }}>
+											{t('TOTAL', 'Total')}
+										</OText>
+										<OText size={14} style={{ fontWeight: 'bold' }} >
+											{parsePrice(cart?.total)}
+										</OText>
+									</OSTable>
+								</View>
+							)}
+						</OSBill>
+					)}
+					<OModal
+						open={openProduct}
+						entireModal
+						customClose
+						onClose={() => setModalIsOpen(false)}
+					>
+						<ProductForm
+							isCartProduct
+							productCart={curProduct}
+							businessSlug={cart?.business?.slug}
+							businessId={cart?.business_id}
+							categoryId={curProduct?.category_id}
+							productId={curProduct?.id}
+							onSave={handlerProductAction}
+							onClose={() => setModalIsOpen(false)}
+							isFromCheckout={isFromCheckout}
+						/>
+					</OModal>
+				</>
+			)}
+		</OSContainer>
+	)
+}
+
+export const OrderSummary = (props: any) => {
+	const orderSummaryProps = {
+		...props,
+		UIComponent: OrderSummaryUI
+	}
+
+	return (
+		<Cart {...orderSummaryProps} />
+	)
+}

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

@@ -1,35 +1,35 @@
-import styled from 'styled-components/native';
-
-export const OSContainer = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`
-
-export const OSProductList = styled.View``
-
-export const OSBill = styled.View`
-  padding: 14px 0px 20px;
-  border-top-width: 1px;
-  border-top-color: ${(props: any) => props.theme.colors.border};
-  margin-top: 20px;
-`
-
-export const OSTable = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const OSTotal = styled.View`
-  border-top-width: 1px;
-  border-top-color: #d9d9d9;
-  margin-top: 15px;
-`
-
-export const OSCoupon = styled.View`
-  width: 100%;
-  padding: 5px 0px;
-`
+import styled from 'styled-components/native';
+
+export const OSContainer = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+
+export const OSProductList = styled.View``
+
+export const OSBill = styled.View`
+  padding: 14px 0px 20px;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.border};
+  margin-top: 20px;
+`
+
+export const OSTable = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-vertical: 5px;
+`
+
+export const OSTotal = styled.View`
+  border-top-width: 1px;
+  border-top-color: #d9d9d9;
+  margin-top: 15px;
+`
+
+export const OSCoupon = styled.View`
+  width: 100%;
+  padding: 5px 0px;
+`

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

@@ -1,92 +1,92 @@
-import React from 'react'
-import {
-	OrderTypeControl,
-	useLanguage,
-	useOrder,
-} from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { Platform, View } from 'react-native'
-import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
-import { OrderTypeSelectParams } from '../../types'
-import { OIcon, OText } from '../shared'
-import NavBar from '../NavBar';
-import { ORDER_TYPES } from '../../config/constants';
-
-const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
-	const {
-		navigation,
-		handleChangeOrderType,
-		typeSelected,
-		defaultValue,
-		configTypes,
-		orderTypes
-	} = props
-
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	
-	const items = _orderTypes.map((type) => {
-		return {
-			value: type.value,
-			label: t(type.content, type.content),
-			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
-		}
-	})
-
-	const goToBack = () => !orderState?.loading && navigation?.canGoBack() && navigation.goBack();
-
-	const handleChangeOrderTypeCallback = (orderType: number) => {
-		if (!orderState.loading) {
-			handleChangeOrderType(orderType)
-		}
-	}
-
-	return (
-		<Wrapper>
-			<NavBar
-				onActionLeft={() => goToBack()}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
-				titleAlign={'center'}
-				titleStyle={{ fontSize: 14 }}
-			/>
-			{
-			items.length > 0 && (
-				<ListWrapper>
-				{
-					items.map((item: any, idx: number) => 
-						<OrderTypeWrapper key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
-							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
-								<MaskCont>
-									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
-									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
-									<View style={{flexDirection: 'row', alignItems: 'center'}}>
-										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
-									</View>
-								</MaskCont>
-							</BgImage>
-						</OrderTypeWrapper>
-					)
-				}
-				</ListWrapper>
-				)
-			}
-		</Wrapper>
-	)
-}
-
-export const OrderTypeSelector = (props: any) => {
-
-	const orderTypeProps = {
-		...props,
-		UIComponent: OrderTypeSelectorUI,
-		orderTypes: props.orderType || ORDER_TYPES
-	}
-
-	return <OrderTypeControl {...orderTypeProps} />
-}
+import React from 'react'
+import {
+	OrderTypeControl,
+	useLanguage,
+	useOrder,
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { Platform, View } from 'react-native'
+import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
+import { OrderTypeSelectParams } from '../../types'
+import { OIcon, OText } from '../shared'
+import NavBar from '../NavBar';
+import { ORDER_TYPES } from '../../config/constants';
+
+const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
+	const {
+		navigation,
+		handleChangeOrderType,
+		typeSelected,
+		defaultValue,
+		configTypes,
+		orderTypes
+	} = props
+
+	const theme = useTheme();
+	const [orderState] = useOrder();
+	const [, t] = useLanguage();
+	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
+	
+	const items = _orderTypes.map((type) => {
+		return {
+			value: type.value,
+			label: t(type.content, type.content),
+			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+		}
+	})
+
+	const goToBack = () => !orderState?.loading && navigation?.canGoBack() && navigation.goBack();
+
+	const handleChangeOrderTypeCallback = (orderType: number) => {
+		if (!orderState.loading) {
+			handleChangeOrderType(orderType)
+		}
+	}
+
+	return (
+		<Wrapper>
+			<NavBar
+				onActionLeft={() => goToBack()}
+				btnStyle={{ paddingLeft: 0 }}
+				paddingTop={0}
+				style={{ paddingBottom: 0 }}
+				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
+				titleAlign={'center'}
+				titleStyle={{ fontSize: 14 }}
+			/>
+			{
+			items.length > 0 && (
+				<ListWrapper>
+				{
+					items.map((item: any, idx: number) => 
+						<OrderTypeWrapper key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
+							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
+								<MaskCont>
+									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
+									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
+									<View style={{flexDirection: 'row', alignItems: 'center'}}>
+										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
+										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
+									</View>
+								</MaskCont>
+							</BgImage>
+						</OrderTypeWrapper>
+					)
+				}
+				</ListWrapper>
+				)
+			}
+		</Wrapper>
+	)
+}
+
+export const OrderTypeSelector = (props: any) => {
+
+	const orderTypeProps = {
+		...props,
+		UIComponent: OrderTypeSelectorUI,
+		orderTypes: props.orderType || ORDER_TYPES
+	}
+
+	return <OrderTypeControl {...orderTypeProps} />
+}