ordering-ui-react-native 0.21.48-test → 0.21.48-test-3

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -3,9 +3,10 @@ import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
-import { StyleSheet, View, Alert } from 'react-native';
+import { StyleSheet, View, Alert, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -93,7 +94,38 @@ const RedeemGiftCardUI = (props: any) => {
     <Container>
       {!redeemedGiftCard ? (
         <View>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
@@ -106,7 +138,7 @@ const RedeemGiftCardUI = (props: any) => {
                   onChange(val)
                   handleChangeCode(val)
                 }}
-                autoCapitalize='none'
+                autoCapitalize='characters'
                 autoCorrect={false}
                 blurOnSubmit={false}
                 style={style.inputStyle}
@@ -156,7 +188,38 @@ const RedeemGiftCardUI = (props: any) => {
         </View>
       ) : (
         <>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+          </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>

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

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />

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

@@ -117,7 +117,8 @@ export const LastOrders = (props: any) => {
       initialPage: 1,
       pageSize: 3,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
   return <OrderListController {...helpProps} />
 }

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

@@ -10,11 +10,11 @@ import {
   ToastType,
   MultiCheckout as MultiCheckoutController
 } from 'ordering-components/native'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
-import { OText, OIcon, OModal } from '../shared';
+import { OText, OIcon, OModal, OButton } from '../shared';
 import { getTypesText } from '../../utils';
 import { UserDetails } from '../UserDetails'
 import { AddressDetails } from '../AddressDetails'
@@ -26,6 +26,8 @@ import { DriverTips } from '../DriverTips'
 import { CouponControl } from '../CouponControl';
 import { DriverTipsContainer } from '../Cart/styles'
 import { OSTable, OSCoupon } from '../OrderSummary/styles';
+import { SignupForm } from '../SignupForm'
+import { LoginForm } from '../LoginForm'
 
 import {
   ChContainer,
@@ -74,7 +76,11 @@ const MultiCheckoutUI = (props: any) => {
       paddingLeft: 40,
       paddingRight: 40
     },
-    wrapperNavbar: { paddingHorizontal: 40 }
+    wrapperNavbar: { paddingHorizontal: 40 },
+    detailWrapper: {
+			paddingHorizontal: 40,
+			width: '100%'
+		},
   })
 
   const [, { showToast }] = useToast();
@@ -83,7 +89,7 @@ const MultiCheckoutUI = (props: any) => {
   const [{ parsePrice, parseDate }] = useUtils();
   const [{ options, carts, loading }, { confirmCart }] = useOrder();
   const [validationFields] = useValidationFields();
-  const [{ user }] = useSession()
+  const [{ user }, { login }] = useSession()
 
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
@@ -134,6 +140,11 @@ const MultiCheckoutUI = (props: any) => {
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
   const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
+	const [allowedGuest, setAllowedGuest] = useState(false)
+	const [isOpen, setIsOpen] = useState(false)
+	const [requiredFields, setRequiredFields] = useState<any>([])
+	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+	const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
   const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
   const methodsPay = ['global_google_pay', 'global_apple_pay']
   const isDisablePlaceOrderButton = cartGroup?.loading || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
@@ -151,11 +162,12 @@ const MultiCheckoutUI = (props: any) => {
     setUserErrors([])
     const errors = []
     const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const _requiredFields: any = []
 
     Object.values(validationFields?.fields?.checkout).map((field: any) => {
       if (field?.required && !notFields.includes(field.code)) {
         if (!user[field?.code]) {
-          errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+          _requiredFields.push(field?.code)
         }
       }
     })
@@ -166,8 +178,9 @@ const MultiCheckoutUI = (props: any) => {
         validationFields?.fields?.checkout?.cellphone?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
-      errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+      _requiredFields.push('cellphone')
     }
+		setRequiredFields(_requiredFields)
 
     if (phoneUpdate) {
       errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
@@ -181,10 +194,19 @@ const MultiCheckoutUI = (props: any) => {
   }
 
   const handlePlaceOrder = (confirmPayment?: any) => {
-    if (!userErrors.length) {
+    if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
+			setOpenModal({ ...openModal, signup: true, isGuest: true })
+			return
+		}
+
+    if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
       handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
       return
     }
+    if (requiredFields?.length) {
+			setIsOpen(true)
+			return
+		}
     let stringError = ''
     Object.values(userErrors).map((item: any, i: number) => {
       stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -193,6 +215,24 @@ const MultiCheckoutUI = (props: any) => {
     setIsUserDetailsEdit(true)
   }
 
+  const handlePlaceOrderAsGuest = () => {
+		setIsOpen(false)
+		handleGroupPlaceOrder && handleGroupPlaceOrder()
+	}
+
+  const handleSuccessSignup = (user: any) => {
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		openModal?.isGuest && handlePlaceOrderAsGuest()
+		setOpenModal({ ...openModal, signup: false, isGuest: false })
+	}
+
+	const handleSuccessLogin = (user: any) => {
+		if (user) setOpenModal({ ...openModal, login: false })
+	}
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -285,15 +325,45 @@ const MultiCheckoutUI = (props: any) => {
 
           <ChSection>
             <ChUserDetails>
-              <UserDetails
-                isUserDetailsEdit={isUserDetailsEdit}
-                useValidationFields
-                useDefualtSessionManager
-                useSessionUser
-                isCheckout
-                phoneUpdate={phoneUpdate}
-                togglePhoneUpdate={togglePhoneUpdate}
-              />
+              {(user?.guest_id && !allowedGuest) ? (
+                <View>
+                  <OText size={14} numberOfLines={1} ellipsizeMode='tail' color={theme.colors.textNormal}>
+                    {t('CUSTOMER_DETAILS', 'Customer details')}
+                  </OText>
+                  <OButton
+                    text={t('SIGN_UP', 'Sign up')}
+                    textStyle={{ color: theme.colors.white }}
+                    style={{ borderRadius: 7.6, marginTop: 20 }}
+                    onClick={() => setOpenModal({ ...openModal, signup: true })}
+                  />
+                  <OButton
+                    text={t('LOGIN', 'Login')}
+                    textStyle={{ color: theme.colors.primary }}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.primary}
+                    style={{ borderRadius: 7.6, marginTop: 20 }}
+                    onClick={() => setOpenModal({ ...openModal, login: true })}
+                  />
+                  <OButton
+                    text={t('CONTINUE_AS_GUEST', 'Continue as guest')}
+                    textStyle={{ color: theme.colors.black }}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.black}
+                    style={{ borderRadius: 7.6, marginTop: 20 }}
+                    onClick={() => setAllowedGuest(true)}
+                  />
+                </View>
+              ) : (
+                <UserDetails
+                  isUserDetailsEdit={isUserDetailsEdit}
+                  useValidationFields
+                  useDefualtSessionManager
+                  useSessionUser
+                  isCheckout
+                  phoneUpdate={phoneUpdate}
+                  togglePhoneUpdate={togglePhoneUpdate}
+                />
+              )}
             </ChUserDetails>
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
           </ChSection>
@@ -484,6 +554,58 @@ const MultiCheckoutUI = (props: any) => {
             </OText>
           )}
         </ChContainer>
+        <OModal
+          open={openModal.signup}
+          onClose={() => setOpenModal({ ...openModal, signup: false, isGuest: false })}
+        >
+          <ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+            <SignupForm
+              handleSuccessSignup={handleSuccessSignup}
+              isGuest
+              signupButtonText={t('SIGNUP', 'Signup')}
+              useSignupByEmail
+              useChekoutFileds
+            />
+          </ScrollView>
+        </OModal>
+        <OModal
+          open={openModal.login}
+          onClose={() => setOpenModal({ ...openModal, login: false })}
+        >
+          <ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+            <LoginForm
+              handleSuccessLogin={handleSuccessLogin}
+              isGuest
+              loginButtonText={t('LOGIN', 'Login')}
+              loginButtonBackground={theme.colors.primary}
+            />
+          </ScrollView>
+        </OModal>
+        <OModal
+						open={isOpen}
+						onClose={() => setIsOpen(false)}
+					>
+						<View style={styles.detailWrapper}>
+							<UserDetails
+								isUserDetailsEdit
+								useValidationFields
+								useDefualtSessionManager
+								useSessionUser
+								isCheckout
+								isEdit
+								phoneUpdate={phoneUpdate}
+								togglePhoneUpdate={togglePhoneUpdate}
+								requiredFields={requiredFields}
+								hideUpdateButton
+								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+								onClose={() => {
+									setIsOpen(false)
+									handlePlaceOrder()
+								}}
+								setIsOpen={setIsOpen}
+							/>
+						</View>
+					</OModal>
       </Container>
 
       <FloatingButton

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

@@ -92,7 +92,6 @@ const NavBar = (props: Props) => {
 				<TitleWrapper style={{ ...{ paddingHorizontal: props.isVertical ? 0 : 10 }, ...props.titleWrapStyle }}>
 					<OText
 						size={20}
-						lineHeight={36}
 						weight={Platform.OS === 'ios' ? '600' : 'bold'}
 						style={
 							{

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

@@ -125,6 +125,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const directionTypes = [2, 3, 4, 5]
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
   const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
+  const [isPickup, setIsPickup] = useState(order?.delivery_type === 2)
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
@@ -138,6 +139,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
   const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const progressBarObjt = isPickup ? getOrderStatuPickUp : getOrderStatus
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -346,7 +348,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [props?.order?.error, props?.order?.loading])
 
-  const progressBarObjt = order?.delivery_type && props.order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
+  useEffect(() => {
+    if (!order?.delivery_type) return
+    setIsPickup(order?.delivery_type === 2)
+  }, [order?.delivery_type])
 
   return (
     <OrderDetailsContainer
@@ -1022,9 +1028,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )} */}
                         </View>
                         <OText>
-                          {configs.currency_position?.value === 'left'
-                            ? `${configs.format_number_currency?.value} -${parseNumber(event.amount, { isTruncable: true })}`
-                            : `-${parsePrice(event.amount, { isTruncable: true })}`}
+                          -{parsePrice(event.amount, { isTruncable: true })}
                         </OText>
                       </View>
                     ))}

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

@@ -208,7 +208,8 @@ export const OrderProgress = (props: any) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
 
   return <OrderList {...orderProgressProps} />

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

@@ -11,6 +11,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+	useSession
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
@@ -78,6 +79,7 @@ const PaymentOptionsUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast();
+	const [{ user }] = useSession()
 	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
@@ -120,7 +122,7 @@ const PaymentOptionsUI = (props: any) => {
 	const paymethodsFieldRequired = ['paypal', 'apple_pay', 'global_apple_pay']
 
 	const handlePaymentMethodClick = (paymethod: any) => {
-		if (cart?.balance > 0) {
+		if (cart?.balance > 0 || !!user?.guest_id) {
 			if (paymethodsFieldRequired.includes(paymethod?.gateway) && requiredFields.length > 0) {
 				openUserModal && openUserModal(true)
 				setPaymethodClicked({
@@ -397,7 +399,7 @@ const PaymentOptionsUI = (props: any) => {
 				>
 					<StripeElementsForm
 						cart={cart}
-						paymethod={isOpenMethod?.paymethod?.gateway}
+						paymethod={isOpenMethod?.paymethod?.gateway || paymethodSelected?.gateway}
 						methodsPay={methodsPay}
 						businessId={props.businessId}
 						publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}

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

@@ -139,7 +139,6 @@ export const ProductOptionsUI = (props: any) => {
 			flex: 1,
 			alignItems: 'center',
 			width: '100%',
-			marginLeft: 32
 		},
 		mainSwiper: {
 			height: 258,
@@ -505,7 +504,7 @@ export const ProductOptionsUI = (props: any) => {
 					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
 						{actionStatus?.loading ? (
 							<Placeholder Animation={Fade}>
-								<PlaceholderLine width={60} height={20} />
+								<PlaceholderLine height={20} />
 							</Placeholder>
 						) : (
 							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>

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

@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +96,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +211,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
+											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+										</OText>
+									</TouchableOpacity>
+									{showDatePicker && (
+										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
+									)}
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>

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

@@ -141,6 +141,7 @@ const WalletsUI = (props: any) => {
               showCall={false}
               paddingTop={10}
               btnStyle={{ paddingLeft: 0 }}
+              isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
             />
             {isChewLayout && !openHistory && (

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

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 20px;
   padding-bottom: 20px;
   padding-top: ${(props: any) => props.pdng};
 `

package/themes/business/src/components/StarPrinter/SearchPrinter.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  Button,
-  FlatList,
-  PermissionsAndroid,
-  Platform
-} from 'react-native';
-
-import {
-  InterfaceType,
-  StarDeviceDiscoveryManager,
-  StarDeviceDiscoveryManagerFactory,
-  StarPrinter
-} from 'react-native-star-io10';
-import { useTheme } from 'styled-components';
-import { OIconButton } from '../shared';
-
-const SearchStarPrinter = ({ navigation }: any) => {
-  let _manager: StarDeviceDiscoveryManager;
-  const theme = useTheme();
-
-  const [state, setState] = useState({
-    bluetoothIsEnabled: true,
-    bluetoothLeIsEnabled: true,
-    printers: [],
-  })
-
-  const _onPressDiscoveryButton = async () => {
-
-    setState({
-      ...state,
-      printers: [],
-    });
-
-    try {
-      await _manager?.stopDiscovery()
-
-      const interfaceTypes: Array<InterfaceType> = []
-
-      if (state.bluetoothIsEnabled) {
-        interfaceTypes.push(InterfaceType.Bluetooth);
-      }
-      if (state.bluetoothLeIsEnabled) {
-        interfaceTypes.push(InterfaceType.BluetoothLE);
-      }
-
-      _manager = await StarDeviceDiscoveryManagerFactory.create(interfaceTypes);
-      _manager.discoveryTime = 10000;
-
-      _manager.onPrinterFound = (printer: StarPrinter) => {
-        const printers = state.printers;
-        printers.push(printer);
-        setState({
-          ...state,
-          printers: printers
-        });
-
-        console.log(`Found printer: ${printer.connectionSettings.identifier}.`);
-      };
-
-      _manager.onDiscoveryFinished = () => {
-        console.log(`Discovery finished.`);
-      };
-
-
-      await _manager.startDiscovery();
-    }
-    catch (error) {
-      console.log(`Error: ${String(error)}`);
-    }
-  }
-
-  const handleArrowBack = () => {
-    navigation?.canGoBack() && navigation.goBack();
-  };
-
-  return (
-    <View style={{ margin: 50 }}>
-      <OIconButton
-        icon={theme.images.general.arrow_left}
-        iconStyle={{ width: 20, height: 20 }}
-        borderColor={theme.colors.clear}
-        style={{ maxWidth: 40, justifyContent: 'flex-end' }}
-        onClick={() => handleArrowBack()}
-      />
-      <Text>Interface</Text>
-
-      <View
-        style={{ width: 100, marginTop: 30 }}>
-        <Button
-          title="Discovery"
-          onPress={async () => await _onPressDiscoveryButton()}
-        />
-      </View>
-      <FlatList
-        style={{ marginTop: 30 }}
-        data={state.printers}
-        renderItem={({ item }) => <Text>{item.connectionSettings.interfaceType} : {item.connectionSettings.identifier}</Text>}
-        keyExtractor={(item, index) => index.toString()} />
-    </View>
-  );
-};
-
-export default SearchStarPrinter;