ordering-ui-react-native 0.22.75 → 0.22.76-release

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
 import {
-	OrderTypeControl,
-	useLanguage,
-	useOrder,
+  OrderTypeControl,
+  useLanguage,
+  useOrder,
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native'
@@ -14,132 +14,132 @@ import { ORDER_TYPES } from '../../config/constants';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
-	const {
-		navigation,
-		handleChangeOrderType,
-		handleChangeType,
-		typeSelected,
-		defaultValue,
-		configTypes,
-		orderTypes,
-		setOrderTypeValue,
-		isChewLayout,
-		chewOrderTypes
-	} = props
+  const {
+    navigation,
+    handleChangeOrderType,
+    handleChangeType,
+    typeSelected,
+    defaultValue,
+    configTypes,
+    orderTypes,
+    setOrderTypeValue,
+    isChewLayout,
+    chewOrderTypes
+  } = props
 
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
-	const items = _orderTypes.map((type) => {
-		return {
-			value: type.value,
-			label: orderTypeTitle(type.value) || t(type.content, type.content),
-			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
-		}
-	})
+  const theme = useTheme();
+  const [orderState] = useOrder();
+  const [, t] = useLanguage();
+  const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
+  const orderTypeTitle = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
+  const orderTypeDescription = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
+  const orderTypeCallAction = (type: string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+  const items = _orderTypes.map((type) => {
+    return {
+      value: type.value,
+      label: orderTypeTitle(type.value) || t(type.content, type.content),
+      description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+    }
+  })
 
-	const goToBack = () => !orderState?.loading && navigation?.canGoBack() && navigation.goBack();
+  const goToBack = () => !orderState?.loading && navigation?.canGoBack() && navigation.goBack();
 
-	const handleChangeOrderTypeCallback = (orderType: number) => {
-		if (!orderState.loading) {
-			setOrderTypeValue && setOrderTypeValue(orderType)
-			handleChangeOrderType(orderType)
-			if (!isChewLayout) {
-				goToBack();
-			}
-		}
-	}
+  const handleChangeOrderTypeCallback = (orderType: number) => {
+    if (!orderState.loading) {
+      setOrderTypeValue && setOrderTypeValue(orderType)
+      handleChangeOrderType(orderType)
+      if (!isChewLayout) {
+        goToBack();
+      }
+    }
+  }
 
-	useEffect(() => {
-		handleChangeType && handleChangeType(typeSelected)
-	}, [typeSelected])
+  useEffect(() => {
+    handleChangeType && handleChangeType(typeSelected)
+  }, [typeSelected])
 
-	return (
-		<Wrapper>
-			{isChewLayout ? (
-				<View>
-					<OTabs
-						horizontal
-						showsHorizontalScrollIndicator={false}
-					>
-						{chewOrderTypes?.map((type: any) => (
-							<TabBtn
-								key={type.value}
-								onPress={() => handleChangeOrderTypeCallback(type.value)}
-							>
-								<OTab
-									style={{
-										borderBottomColor:
-											type.value === typeSelected
-												? theme.colors.textNormal
-												: theme.colors.border,
-									}}>
-									<OText
-										size={14}
-										color={
-											type.value === typeSelected
-												? theme.colors.textNormal
-												: theme.colors.disabled
-										}
-										weight={type.value === typeSelected ? 'bold' : 'normal'}>
-										{type.name}
-									</OText>
-								</OTab>
-							</TabBtn>
-						))}
-					</OTabs>
-				</View>
-			) : (
-				<>
-					<NavBar
-						onActionLeft={() => goToBack()}
-						btnStyle={{ paddingLeft: 0, width: 50 }}
-						paddingTop={Platform.OS === 'ios' ? 10 : 0}
-						style={{ paddingBottom: 0 }}
-						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
-						titleAlign={'center'}
-						noMargin
-					/>
-					{
-						items.length > 0 && (
-							<ListWrapper>
-								{
-									items && items.map((item: any, idx: number) =>
-										<OrderTypeWrapper activeOpacity={0.8} 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}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
-														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
-													</View>
-												</MaskCont>
-											</BgImage>
-										</OrderTypeWrapper>
-									)
-								}
-							</ListWrapper>
-						)
-					}
-				</>
-			)}
+  return (
+    <Wrapper>
+      {isChewLayout ? (
+        <View>
+          <OTabs
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
+            {chewOrderTypes?.map((type: any) => (
+              <TabBtn
+                key={type.value}
+                onPress={() => handleChangeOrderTypeCallback(type.value)}
+              >
+                <OTab
+                  style={{
+                    borderBottomColor:
+                      type.value === typeSelected
+                        ? theme.colors.textNormal
+                        : theme.colors.border,
+                  }}>
+                  <OText
+                    size={14}
+                    color={
+                      type.value === typeSelected
+                        ? theme.colors.textNormal
+                        : theme.colors.disabled
+                    }
+                    weight={type.value === typeSelected ? 'bold' : 'normal'}>
+                    {type.name}
+                  </OText>
+                </OTab>
+              </TabBtn>
+            ))}
+          </OTabs>
+        </View>
+      ) : (
+        <>
+          <NavBar
+            onActionLeft={() => goToBack()}
+            btnStyle={{ paddingLeft: 0, width: 50 }}
+            paddingTop={Platform.OS === 'ios' ? 10 : 0}
+            style={{ paddingBottom: 0 }}
+            title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
+            titleAlign={'center'}
+            noMargin
+          />
+          {
+            items.length > 0 && (
+              <ListWrapper>
+                {
+                  items && items.map((item: any, idx: number) =>
+                    <OrderTypeWrapper activeOpacity={0.8} 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}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
+                            <AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+                          </View>
+                        </MaskCont>
+                      </BgImage>
+                    </OrderTypeWrapper>
+                  )
+                }
+              </ListWrapper>
+            )
+          }
+        </>
+      )}
 
-		</Wrapper>
-	)
+    </Wrapper>
+  )
 }
 
 export const OrderTypeSelector = (props: any) => {
 
-	const orderTypeProps = {
-		...props,
-		UIComponent: OrderTypeSelectorUI,
-		orderTypes: props.orderTypes || ORDER_TYPES
-	}
+  const orderTypeProps = {
+    ...props,
+    UIComponent: OrderTypeSelectorUI,
+    orderTypes: props.orderTypes || ORDER_TYPES
+  }
 
-	return <OrderTypeControl {...orderTypeProps} />
+  return <OrderTypeControl {...orderTypeProps} />
 }