ordering-ui-react-native 0.17.99-release → 0.18.0-release

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

@@ -9,7 +9,7 @@ export const NavBack = styled.TouchableOpacity`
 
 
 export const Header = styled.View`
-  padding: 10px 40px;
+  padding: 10px 20px;
   flex: 1;
 `
 
@@ -23,7 +23,7 @@ export const OrderContent = styled.View`
 export const OrderBusiness = styled.View`
   position: relative; 
   padding-vertical: 10px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   background-color: ${(props: any) => props.theme.colors.white};
   align-items: flex-start;
 `
@@ -63,7 +63,7 @@ export const SectionTitle = styled.View`
 `
 
 export const OrderCustomer = styled.View`
-  padding: 20px 40px 10px;
+  padding: 20px 20px 10px;
   background-color: ${(props: any) => props.theme.colors.white};
 `
 
@@ -85,7 +85,7 @@ export const InfoBlock = styled.View`
 export const HeaderInfo = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  padding: 20px 40px;
+  padding: 20px 20px;
 `
 
 export const OrderProducts = styled(OrderCustomer)``
@@ -99,7 +99,7 @@ export const Table = styled.View`
 `
 
 export const OrderBill = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   padding-vertical: 10px;
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -129,7 +129,7 @@ export const OrderAction = styled.View`
 `
 
 export const PlaceSpotWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const ProfessionalPhoto = styled.ImageBackground`
@@ -140,4 +140,21 @@ export const ProfessionalPhoto = styled.ImageBackground`
   width: 80px;
   resize-mode: cover;
   margin-right: 10px;
-`;
+`;
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

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

@@ -32,5 +32,5 @@ export const OrderInfoWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled, { css } from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

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

@@ -309,7 +309,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					/>
 				)
 			)}
-			{loading && !hideOrders && (
+			{loading && !hideOrders && !preOrders && (
 				<>
 					{!activeOrders ? (
 						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 	${(props : any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '20px'};
 	`}
 `
 

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OText } from '../shared';
+
+export const ExtraOptions = (props : any) => {
+    const {
+        options,
+        setSelectedOpt,
+        scrollViewRef,
+        optionLayout,
+        editionsLayoutY,
+        styles,
+        selOpt
+    } = props
+
+    const theme = useTheme()
+
+    return (
+        <>
+            {options.map(({ id, name, respect_to, suboptions }: any) => (
+                <React.Fragment key={`cont_key_${id}`}>
+                    {respect_to == null && suboptions?.length > 0 && (
+                        <TouchableOpacity
+                            key={`eopt_key_${id}`}
+                            onPress={() => {
+                                setSelectedOpt(id)
+                                scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+                                    y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+                                    animated: true
+                                })
+                            }}
+                            style={[
+                                styles.extraItem,
+                                {
+                                    borderBottomColor:
+                                        selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
+                                },
+                            ]}>
+                            <OText
+                                color={
+                                    selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+                                }
+                                size={12}
+                                weight={selOpt == id ? '600' : 'normal'}
+                                style={{ maxWidth: 150 }}
+                                numberOfLines={1}>
+                                {name}
+                            </OText>
+                        </TouchableOpacity>
+                    )}
+                </React.Fragment>
+            ))}
+        </>
+    )
+}

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

@@ -55,9 +55,13 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList, vibrateApp } from '../../utils';
+import { orderTypeList } from '../../utils';
+import { ActionButton } from './ActionButton'
+import { ExtraOptions } from './ExtraOptions'
 const windowWidth = Dimensions.get('window').width;
 
+
+
 export const ProductOptionsUI = (props: any) => {
 	const {
 		navigation,
@@ -79,11 +83,10 @@ export const ProductOptionsUI = (props: any) => {
 		actionStatus,
 		handleCreateGuestUser
 	} = props;
-
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
 	const [events] = useEvent()
-
+	const commentRef = useRef()
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const styles = StyleSheet.create({
@@ -138,7 +141,7 @@ export const ProductOptionsUI = (props: any) => {
 		slide1: {
 			flex: 1,
 			alignItems: 'center',
-			width: '100%',
+			width: '100%'
 		},
 		mainSwiper: {
 			height: 258,
@@ -177,7 +180,7 @@ export const ProductOptionsUI = (props: any) => {
 			marginTop: 10
 		},
 		wrapperNavbar: {
-			paddingHorizontal: 30,
+			paddingHorizontal: 20,
 			paddingTop: 0,
 		}
 	});
@@ -208,7 +211,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 	const [viewedProduct, setViewedProduct] = useState<any>(null)
 	const [showTitle, setShowTitle] = useState(false)
-
+	const productOptionsMounted = useRef(false)
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
 	const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
 
@@ -323,57 +326,15 @@ export const ProductOptionsUI = (props: any) => {
 
 	let _optionLayout: any = {}
 
-	const handleOnLayout = (event: any, optionId: any) => {
-		const _optionLayout = { ...optionLayout }
+	const handleOnLayout = (event: any, optionId: any, lastMounts: boolean) => {
+		_optionLayout = { ..._optionLayout }
 		const optionKey = 'id:' + optionId
 		_optionLayout[optionKey] = { y: event.nativeEvent.layout?.y }
-		setOptionLayout(_optionLayout)
+		if (lastMounts) {
+			setOptionLayout(_optionLayout)
+		}
 	}
 
-	const saveErrors =
-		orderState.loading ||
-		maxProductQuantity === 0 ||
-		Object.keys(errors)?.length > 0;
-
-
-	const ExtraOptions = ({ eID, options }: any) => (
-		<>
-			{options.map(({ id, name, respect_to, suboptions }: any) => (
-				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && suboptions?.length > 0 && (
-						<TouchableOpacity
-							key={`eopt_key_${id}`}
-							onPress={() => {
-								setSelectedOpt(id)
-								scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
-									y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
-									animated: true
-								})
-							}}
-							style={[
-								styles.extraItem,
-								{
-									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
-								},
-							]}>
-							<OText
-								color={
-									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-								}
-								size={12}
-								weight={selOpt == id ? '600' : 'normal'}
-								style={{ maxWidth: 150 }}
-								numberOfLines={1}>
-								{name}
-							</OText>
-						</TouchableOpacity>
-					)}
-				</React.Fragment>
-			))}
-		</>
-	);
-
 	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
 		setShowTitle(contentOffset.y > 30)
 	}
@@ -433,90 +394,6 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [product])
 
-	const ActionButton = () => {
-		return (
-			<View
-				style={{
-					width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
-				}}>
-				{((productCart &&
-					auth &&
-					orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
-						<OButton
-							onClick={() => handleSaveProduct()}
-							imgRightSrc=""
-							text={`${orderState.loading
-								? t('LOADING', 'Loading')
-								: (isSoldOut || maxProductQuantity <= 0)
-									? t('SOLD_OUT', 'Sold out')
-									: editMode
-										? t('UPDATE', 'Update')
-										: t('ADD', 'Add')
-								}`}
-							isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
-							textStyle={{
-								color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
-								fontSize: orderState.loading || editMode ? 10 : 14
-							}}
-							style={{
-								backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
-								borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
-								opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
-								borderRadius: 7.6,
-								height: 44,
-								shadowOpacity: 0,
-								borderWidth: 1,
-								marginTop: isHaveWeight ? 10 : 0
-							}}
-						/>
-					)}
-				{auth &&
-					!orderState.options?.address_id &&
-					(orderState.loading ? (
-						<OButton
-							isDisabled
-							text={t('LOADING', 'Loading')}
-							imgRightSrc=""
-							textStyle={{ fontSize: 10 }}
-						/>
-					) : (
-						<OButton onClick={navigation.navigate('AddressList')} />
-					))}
-				{!auth && (
-					<OButton
-						isDisabled={isSoldOut || maxProductQuantity <= 0}
-						onClick={() => handleRedirectLogin()}
-						text={
-							isSoldOut || maxProductQuantity <= 0
-								? t('SOLD_OUT', 'Sold out')
-								: t('LOGIN_SIGNUP', 'Login / Sign Up')
-						}
-						imgRightSrc=""
-						textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
-						style={{
-							height: 42,
-							borderColor: theme.colors.primary,
-							backgroundColor: theme.colors.white,
-							paddingLeft: 0,
-							paddingRight: 0
-						}}
-					/>
-				)}
-				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
-					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-						{actionStatus?.loading ? (
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={20} />
-							</Placeholder>
-						) : (
-							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-						)}
-					</TouchableOpacity>
-				)}
-			</View>
-		)
-	}
-
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
 			scrollViewRef.current.scrollToEnd({ animated: true })
@@ -532,6 +409,33 @@ export const ProductOptionsUI = (props: any) => {
 		events.emit('product_viewed', product)
 	}, [product?.id, viewedProduct])
 
+	const actionButtonProps = {
+		navigation,
+		isHaveWeight,
+		isSoldOut,
+		maxProductQuantity,
+		productCart,
+		handleSaveProduct,
+		editMode,
+		product,
+		errors,
+		productAddedToCartLength,
+		handleRedirectLogin,
+		guestCheckoutEnabled,
+		orderTypeEnabled,
+		handleUpdateGuest,
+		actionStatus
+	}
+
+	const extraOptionsProps = {
+		setSelectedOpt,
+		scrollViewRef,
+		optionLayout,
+		editionsLayoutY,
+		styles,
+		selOpt
+	}
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>
@@ -637,7 +541,7 @@ export const ProductOptionsUI = (props: any) => {
 								<ScrollView
 									horizontal
 									contentContainerStyle={{
-										paddingHorizontal: 30,
+										paddingHorizontal: 20,
 										paddingVertical: 15
 									}}
 								>
@@ -690,7 +594,7 @@ export const ProductOptionsUI = (props: any) => {
 						)}
 					</WrapHeader>
 					<ProductSummary
-						ph={isChewLayout ? 20 : 30}
+						ph={20}
 						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
 					>
 						<ProductTitle>
@@ -824,7 +728,7 @@ export const ProductOptionsUI = (props: any) => {
 								</TouchableOpacity>
 							)}
 							{product?.extras?.map((extra: any) =>
-								<ExtraOptions key={extra.id} options={extra.options} />
+								<ExtraOptions key={extra.id} options={extra.options} {...extraOptionsProps} />
 							)}
 						</ExtraOptionWrap>
 					)}
@@ -868,14 +772,14 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
-							style={{ paddingHorizontal: isChewLayout ? 20 : 30 }}
+							style={{ paddingHorizontal: 20 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}
 						>
 							<>
 								{product?.ingredients?.length > 0 && (
-									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
+									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0, true)}>
 										<SectionTitle>
 											<OText size={16}>
 												{t('INGREDIENTS', 'Ingredients')}
@@ -897,13 +801,13 @@ export const ProductOptionsUI = (props: any) => {
 									</View>
 								)}
 								{product?.extras?.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
-									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any, i: number) => {
 										const currentState =
 											productCart.options[`id:${option.id}`] || {};
 										return (
 											<React.Fragment key={`popt_${option.id}`}>
 												{showOption(option) && (
-													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id, extra.options?.length <= i + 2)}>
 														<ProductOption
 															option={option}
 															currentState={currentState}
@@ -969,6 +873,7 @@ export const ProductOptionsUI = (props: any) => {
 											!(productCart && !isSoldOut && maxProductQuantity)
 										}
 										style={styles.comment}
+										forwardRef={commentRef}
 									/>
 								</ProductComment>
 							)}
@@ -1088,9 +993,9 @@ export const ProductOptionsUI = (props: any) => {
 								)}
 							</>
 						)}
-						{!isHaveWeight && <ActionButton />}
+						{!isHaveWeight && <ActionButton {...actionButtonProps} />}
 					</View>
-					{isHaveWeight && <ActionButton />}
+					{isHaveWeight && <ActionButton {...actionButtonProps} />}
 				</ProductActions>
 			)}
 		</SafeAreaView>

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

@@ -215,6 +215,11 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
+												touchableWrapperProps={{
+													style: {
+														width: 40,
+													}
+												}}
 												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
 												disabled={orderState.loading}
 											/>

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

@@ -82,7 +82,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container onPress={!(option?.with_half_option || option?.allow_suboption_quantity) ? () => handleSuboptionClick() : null}>
+			<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (

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

@@ -12,7 +12,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 
 export const InfoWrapper = styled.View`
   margin-vertical: 30px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const Divider = styled.View`
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ScheduleWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -43,4 +43,4 @@ export const CalendarWrapper = styled.View`
   border-color: ${(props: any) => props.theme.colors.backgroundGray200};
   border-radius: 7.6px;
   padding: 15px;
-`
+`

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

@@ -19,7 +19,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -98,8 +98,6 @@ const PromotionsUI = (props: PromotionParams) => {
 
   return (
     <Container
-      noPadding
-      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -112,7 +110,9 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: 0, marginLeft: 20 }}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
+        btnStyle={{ paddingLeft: 0 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -2,8 +2,6 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
-  padding-left: 40px;
-	padding-right: 40px;
 `
 
 export const WrapperSingleOffer = styled.View`

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewDriverContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewOrderContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewProductsContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -116,7 +116,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       marginHorizontal: 0
     },
     professionalList: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 20,
       paddingVertical: 30,
     }
   })

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

@@ -11,7 +11,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 `;
 
 export const InfoWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-vertical: 30px;
 `
 
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ProfessionalWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -41,10 +41,10 @@ export const ButtonWrapper = styled.View`
   align-items: center;
   flex-direction: row;
   padding-vertical: 13px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
   margin-bottom: 40px;
   width: 100%;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
-`
+`

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

@@ -55,7 +55,7 @@ const StripeElementsFormUI = (props: any) => {
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			justifyContent: 'space-between',
 			paddingBottom: 12
 		},