ordering-ui-react-native 0.14.29 → 0.14.31-release

package/src/components/ProductForm/index.tsx

@@ -27,7 +27,7 @@ import {
   ProductComment,
   ProductActions
 } from './styles'
-import { OButton, OInput, OText } from '../shared'
+import { OButton, OIcon, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
@@ -52,13 +52,12 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productObject,
-    onClose,
     businessSlug
   } = props
 
   const theme = useTheme();
 
-  const [{ parsePrice }] = useUtils()
+  const [{ optimizeImage, parsePrice }] = useUtils()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [{ auth }] = useSession()
@@ -84,7 +83,6 @@ export const ProductOptionsUI = (props: any) => {
   }
 
   const handleRedirectLogin = (product : any) => {
-    onClose()
     navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
   }
 
@@ -110,7 +108,7 @@ export const ProductOptionsUI = (props: any) => {
                         name="x"
                         size={35}
                         style={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
-                        onPress={onClose}
+                        onPress={props.handleGoBack}
                       />
                     </View>
                   </TopHeader>
@@ -132,27 +130,32 @@ export const ProductOptionsUI = (props: any) => {
                 ) : (
                   <>
                     <View style={{ flexDirection: 'column', width: '100%' }}>
-                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
-                      {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
+                      <View style={{ flexDirection: 'row', marginTop: 15 }}>
+                        <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
+                        {!!product?.calories && (
+                          <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
+                        )}
+                      </View>
+                      <View style={{ flexDirection: 'row', marginBottom: 10 }}>
+                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                        {product?.offer_price !== null && product?.in_offer && (
+                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+                        )}
+                      </View>
+                      {(!!product?.estimated_person || (!!product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
                             ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
                             && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
                           }
-                          {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                          {!!product?.sku && product?.sku !== '-1' && product?.sku !== '1' && !!product?.estimated_person && (
                             <>&nbsp;&#183;&nbsp;</>
                           )}
-                          {product?.estimated_person
+                          {!!product?.estimated_person
                             && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
                           }
                         </OText>
                       )}
-                      <View style={{ flexDirection: 'row', marginBottom: 10}}>
-                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
-                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
-                        )}
-                      </View>
                     </View>
                   </>
                 )}
@@ -160,19 +163,44 @@ export const ProductOptionsUI = (props: any) => {
               <ProductDescription>
                 <OText>{product?.description || productCart?.description}</OText>
               </ProductDescription>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ paddingBottom: 20 }}
+              >
+                {product?.tags?.map((tag: any) => (
+                  <View
+                    key={tag.id}
+                    style={styles.productTagWrapper}
+                  >
+                    {tag?.image ? (
+                      <OIcon
+                        url={optimizeImage(tag?.image, 'h_40,c_limit')}
+                        style={styles.productTagImageStyle}
+                      />
+                    ) : (
+                      <OIcon
+                        src={theme.images?.dummies?.product}
+                        style={styles.productTagImageStyle}
+                      />
+                    )}
+                    <OText size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
+                  </View>
+                ))}
+              </ScrollView>
               {loading && !product ? (
                 <>
-                  {[...Array(2)].map((item,i) => (
-                  <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
-                    <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
-                    {[...Array(3)].map((item,i) => (
-                      <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                        <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
-                      </View>
-                    ))}
-                  </Placeholder>
+                  {[...Array(2)].map((item, i) => (
+                    <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
+                      <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
+                      {[...Array(3)].map((item, i) => (
+                        <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                          <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
+                        </View>
+                      ))}
+                    </Placeholder>
                   ))}
                 </>
               ) : (
@@ -221,7 +249,7 @@ export const ProductOptionsUI = (props: any) => {
                                           state={currentState}
                                           disabled={isSoldOut || maxProductQuantity <= 0}
                                         />
-                                      ): null
+                                      ) : null
                                     })
                                   }
                                 </WrapperSubOption>
@@ -383,6 +411,23 @@ const styles = StyleSheet.create({
     textDecorationLine: 'line-through',
     marginLeft: 7,
     marginRight: 7
+  },
+  caloriesStyle: {
+    color: '#808080'
+  },
+  productTagWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  productTagImageStyle: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    resizeMode: 'cover'
+  },
+  productTagNameStyle: {
+    paddingHorizontal: 6,
+    marginRight: 5
   }
 })
 

package/src/components/ProductForm/styles.tsx

@@ -41,7 +41,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 `
 
 export const ProductEditions = styled.View`

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {product?.offer_price && (
+          {product?.offer_price !== null && product?.in_offer && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

package/src/components/TaxInformation/index.tsx

@@ -1,51 +1,83 @@
 import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import { useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
 
 interface taxInformationParams {
-  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
-  products: Array<any>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  },
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = props
 
   const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
 
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code))
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }

package/src/components/UpsellingProducts/index.tsx

@@ -16,7 +16,6 @@ import {
   AddButton,
   CloseUpselling
 } from './styles'
-import { ProductForm } from '../ProductForm';
 import { useTheme } from 'styled-components/native'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
@@ -27,7 +26,9 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     handleUpsellingPage,
     openUpselling,
     canOpenUpselling,
-    setCanOpenUpselling
+    setCanOpenUpselling,
+    onRedirect,
+    setOpenUpselling
   } = props
 
   const theme = useTheme();
@@ -53,8 +54,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     }
   })
 
-  const [actualProduct, setActualProduct] = useState<any>(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
   const [{ parsePrice }] = useUtils()
   const [, t] = useLanguage()
 
@@ -71,13 +70,15 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
   const handleFormProduct = (product: any) => {
-    setActualProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handleSaveProduct = () => {
-    setActualProduct(null)
-    setModalIsOpen(false)
+    setOpenUpselling && setOpenUpselling(false)
+    onRedirect && onRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+      onAction: () => {
+        setOpenUpselling && setOpenUpselling(true)
+      }
+		})
   }
 
   const UpsellingLayout = () => {
@@ -132,13 +133,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         <>
           {!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
             <>
-            {!modalIsOpen && (
               <OBottomPopup
                 title={t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
                 open={openUpselling}
                 onClose={() => handleUpsellingPage()}
               >
-               <UpsellingLayout />
+                <UpsellingLayout />
                 <CloseUpselling>
                   <OButton
                     imgRightSrc=''
@@ -148,28 +148,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                   />
                 </CloseUpselling>
               </OBottomPopup>
-            )}
             </>
           )}
         </>
       )}
-      <OModal
-        open={modalIsOpen}
-        onClose={() => setModalIsOpen(false)}
-        entireModal
-        customClose
-        isAvoidKeyBoardView
-      >
-        {actualProduct && (
-         <ProductForm
-          product={actualProduct}
-          businessId={actualProduct?.api?.businessId}
-          businessSlug={business.slug}
-          onSave={() => handleSaveProduct()}
-          onClose={() => setModalIsOpen(false)}
-        />
-        )}
-      </OModal>
     </>
   )
 }

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/navigators/HomeNavigator.tsx

@@ -21,6 +21,7 @@ import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Splash from '../pages/Splash';
+import ProductDetails from '../pages/ProductDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -101,6 +102,11 @@ const HomeNavigator = (e : any) => {
                     component={BusinessProductsList}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="ProductDetails"
+                    component={ProductDetails}
+                    options={{ headerShown: false }}
+                  />
                   <Stack.Screen
                     name="ReviewOrder"
                     component={ReviewOrder}

package/src/pages/ProductDetails.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components/native';
+import { Platform } from 'react-native';
+import { ProductForm as ProductFormController } from '../components/ProductForm';
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const ProductDetails = (props: Props) => {
+  const theme = useTheme()
+
+  const productProps = {
+    ...props,
+    isCartProduct: props.route.params?.isCartProduct,
+    isFromCheckout: props.route.params?.isFromCheckout,
+    productCart: props.route.params?.productCart,
+    product: props.route.params?.product,
+    businessSlug: props.route.params?.businessSlug,
+    businessId: props.route.params?.businessId,
+    categoryId: props.route.params?.categoryId,
+    productId: props.route.params?.productId,
+    onSave: props?.navigation?.canGoBack()
+      ? () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.goBack(); }
+      : () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.navigate('BottomTab') }
+    ,
+    handleGoBack: props?.navigation?.canGoBack()
+      ? () => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        props?.navigation?.goBack();
+      }
+      : (businessSlug: any) => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        businessSlug
+          ? props?.navigation.navigate('Business', { store: businessSlug })
+          : props?.navigation.navigate('BottomTab')
+      }
+  };
+
+  const BusinessProductsListView = styled.SafeAreaView`
+    flex: 1;
+    background-color: ${theme.colors.backgroundPage};
+    padding-top: ${Platform.OS === 'ios' ? '0px' : '20px'};
+  `;
+
+  return (
+    <BusinessProductsListView>
+      <ProductFormController {...productProps} />
+    </BusinessProductsListView>
+  );
+};
+
+export default ProductDetails;

package/src/types/index.tsx

@@ -408,6 +408,8 @@ export interface UpsellingProductsParams {
   isCustomMode?: boolean;
   upsellingProducts?: any;
   business?: any;
+  setOpenUpselling?: any;
+  onRedirect?: any;
   businessId?: number;
   cartProducts?: Array<any>; 
   handleUpsellingPage: () => void;

package/src/types/react-native-color-matrix-image-filters/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-color-matrix-image-filters'

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

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

@@ -100,9 +100,23 @@ export const ProductOptionsUI = (props: any) => {
 			zIndex: 0
 		},
 		closeButton: { width: 11, height: 32, backgroundColor: theme.colors.white, alignItems: 'center', justifyContent: 'center' },
-		quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled }
+		quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled },
+		productTagWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center'
+		  },
+		productTagImageStyle: {
+			width: 32,
+			height: 32,
+			borderRadius: 8,
+			resizeMode: 'cover'
+		},
+		productTagNameStyle: {
+			paddingHorizontal: 6,
+			marginRight: 5
+		}
 	})
-	const [{ parsePrice }] = useUtils()
+	const [{ optimizeImage, parsePrice }] = useUtils()
 	const [, t] = useLanguage()
 	const [orderState] = useOrder()
 	const [{ auth }] = useSession()
@@ -215,6 +229,31 @@ export const ProductOptionsUI = (props: any) => {
 									<OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
 								</ProductDescription>
 							)}
+							<ScrollView
+								horizontal
+								showsHorizontalScrollIndicator={false}
+								contentContainerStyle={{ paddingBottom: 20 }}
+							>
+								{product?.tags?.map((tag: any) => (
+									<View
+										key={tag.id}
+										style={styles.productTagWrapper}
+									>
+										{tag?.image ? (
+											<OIcon
+												url={optimizeImage(tag?.image, 'h_40,c_limit')}
+												style={styles.productTagImageStyle}
+											/>
+										) : (
+											<OIcon
+												src={theme.images?.dummies?.product}
+												style={styles.productTagImageStyle}
+											/>
+										)}
+										<OText color={theme.colors.textSecondary} style={styles.productTagNameStyle}>{tag.name}</OText>
+									</View>
+								))}
+							</ScrollView>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (

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

@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
 
 export const ProductDescription = styled.View`
   margin-top: 10px;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 `
 
 export const ProductEditions = styled.View`

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

@@ -59,7 +59,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const theme = useTheme();
 
-	const [{ parsePrice }] = useUtils()
+	const [{ optimizeImage, parsePrice }] = useUtils()
 	const [, t] = useLanguage()
 	const [orderState] = useOrder()
 	const [{ auth }] = useSession()
@@ -162,6 +162,31 @@ export const ProductOptionsUI = (props: any) => {
 									<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
 								</ProductDescription>
 							)}
+							<ScrollView
+								horizontal
+								showsHorizontalScrollIndicator={false}
+								contentContainerStyle={{ paddingBottom: 20 }}
+							>
+								{product?.tags?.map((tag: any) => (
+									<View
+										key={tag.id}
+										style={styles.productTagWrapper}
+									>
+										{tag?.image ? (
+											<OIcon
+												url={optimizeImage(tag?.image, 'h_40,c_limit')}
+												style={styles.productTagImageStyle}
+											/>
+										) : (
+											<OIcon
+												src={theme.images?.dummies?.product}
+												style={styles.productTagImageStyle}
+											/>
+										)}
+										<OText color={theme.colors.textSecondary} style={{ ...styles.productTagNameStyle, ...theme.labels.small}}>{tag.name}</OText>
+									</View>
+								))}
+							</ScrollView>
 							<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
 							{loading && !product ? (
 								<>
@@ -392,6 +417,20 @@ const styles = StyleSheet.create({
 		paddingStart: 4,
 		paddingEnd: 4,
 		borderWidth: 1
+	},
+	productTagWrapper: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	  },
+	productTagImageStyle: {
+		width: 32,
+		height: 32,
+		borderRadius: 8,
+		resizeMode: 'cover'
+	},
+	productTagNameStyle: {
+		paddingHorizontal: 6,
+		marginRight: 5
 	}
 })
 

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

@@ -38,7 +38,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 `
 
 export const ProductEditions = styled.View`