ordering-ui-react-native 0.24.18 → 0.25.1

package/src/components/ProductForm/index.tsx

@@ -1,442 +1,442 @@
-import React from 'react'
-import {
-  ProductForm as ProductOptions,
-  useSession,
-  useLanguage,
-  useOrder,
-  useUtils
-} from 'ordering-components/native'
-import { ProductIngredient } from '../ProductIngredient'
-import { ProductOption } from '../ProductOption'
-
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager } from 'react-native'
-import Icon from 'react-native-vector-icons/Feather';
-
-import {
-  ProductHeader,
-  WrapHeader,
-  TopHeader,
-  WrapContent,
-  ProductTitle,
-  ProductDescription,
-  ProductEditions,
-  SectionTitle,
-  WrapperIngredients,
-  WrapperSubOption,
-  ProductComment,
-  ProductActions
-} from './styles'
-import { OButton, OIcon, OInput, OText } from '../shared'
-import { ProductOptionSubOption } from '../ProductOptionSubOption'
-import { NotFoundSource } from '../NotFoundSource'
-import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
-import { useTheme } from 'styled-components/native'
-
-const windowHeight = Dimensions.get('window').height;
-const windowWidth = Dimensions.get('window').width
-
-export const ProductOptionsUI = (props: any) => {
-  const {
-    navigation,
-    editMode,
-    isSoldOut,
-    productCart,
-    increment,
-    decrement,
-    showOption,
-    maxProductQuantity,
-    errors,
-    handleSave,
-    handleChangeIngredientState,
-    handleChangeSuboptionState,
-    handleChangeCommentState,
-    productObject,
-    businessSlug
-  } = props
-
-  const theme = useTheme();
-
-  const [{ optimizeImage, parsePrice }] = useUtils()
-  const [, t] = useLanguage()
-  const [orderState] = useOrder()
-  const [{ auth }] = useSession()
-  const { product, loading, error } = productObject
-
-  const isError = (id: number) => {
-    let bgColor = theme.colors.white
-    if (errors[`id:${id}`]) {
-      bgColor = 'rgba(255, 0, 0, 0.05)'
-    }
-    if (isSoldOut || maxProductQuantity <= 0) {
-      bgColor = 'hsl(0, 0%, 72%)'
-    }
-    return bgColor
-  }
-
-  const handleSaveProduct = () => {
-    const isErrors = Object.values(errors).length > 0
-    if (!isErrors) {
-      handleSave && handleSave()
-      return
-    }
-  }
-
-  const handleRedirectLogin = (product : any) => {
-    navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
-  }
-
-  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
-
-  return (
-    <>
-      <ScrollView style={styles.mainContainer}>
-        {!error && (
-          <View style={{ paddingBottom: 80 }}>
-            <WrapHeader>
-              {loading && !product ? (
-                <View style={styles.productHeaderSkeleton}>
-                  <Placeholder Animation={Fade} >
-                    <PlaceholderLine height={260} style={{ borderRadius: 0 }} width={windowWidth} />
-                  </Placeholder>
-                </View>
-              ) : (
-                <>
-                  <TopHeader>
-                    <View style={styles.headerItem}>
-                      <Icon
-                        name="x"
-                        size={35}
-                        style={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
-                        onPress={props.handleGoBack}
-                      />
-                    </View>
-                  </TopHeader>
-                  <ProductHeader
-                    source={{ uri: product?.images || productCart?.images }}
-                  />
-                </>
-              )}
-            </WrapHeader>
-            <WrapContent>
-              <ProductTitle>
-                {loading && !product ? (
-                  <Placeholder Animation={Fade}>
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <PlaceholderLine width={40} height={20} />
-                      <PlaceholderLine width={30} height={20} />
-                    </View>
-                  </Placeholder>
-                ) : (
-                  <>
-                    <View style={{ flexDirection: 'column', width: '100%' }}>
-                      <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 && (
-                            <>&nbsp;&#183;&nbsp;</>
-                          )}
-                          {!!product?.estimated_person
-                            && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
-                          }
-                        </OText>
-                      )}
-                    </View>
-                  </>
-                )}
-              </ProductTitle>
-              <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>
-                  ))}
-                </>
-              ) : (
-                <ProductEditions>
-                  {product?.ingredients?.length > 0 && (
-                    <View style={styles.optionContainer}>
-                      <SectionTitle>
-                        <OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
-                      </SectionTitle>
-                      <WrapperIngredients style={{ backgroundColor: isSoldOut || maxProductQuantity <= 0 ? 'hsl(0, 0%, 72%)' : theme.colors.white }}>
-                        {product?.ingredients.map((ingredient: any) => (
-                          <ProductIngredient
-                            key={ingredient.id}
-                            ingredient={ingredient}
-                            state={productCart.ingredients[`id:${ingredient.id}`]}
-                            onChange={handleChangeIngredientState}
-                          />
-                        ))}
-                      </WrapperIngredients>
-                    </View>
-                  )}
-                  {product?.extras?.map((extra: any) => extra.options.map((option: any) => {
-                    const currentState = productCart.options[`id:${option.id}`] || {}
-                    return (
-                      <React.Fragment key={option.id}>
-                        {
-                          showOption(option) && (
-                            <View style={styles.optionContainer}>
-                              <ProductOption
-                                option={option}
-                                currentState={currentState}
-                                error={errors[`id:${option.id}`]}
-                              >
-                                <WrapperSubOption style={{ backgroundColor: isError(option.id) }}>
-                                  {
-                                    option.suboptions.map((suboption: any) => {
-                                      const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
-                                      const balance = productCart.options[`id:${option.id}`]?.balance || 0
-                                      return suboption?.enabled ? (
-                                        <ProductOptionSubOption
-                                          key={suboption.id}
-                                          onChange={handleChangeSuboptionState}
-                                          balance={balance}
-                                          option={option}
-                                          suboption={suboption}
-                                          state={currentState}
-                                          disabled={isSoldOut || maxProductQuantity <= 0}
-                                        />
-                                      ) : null
-                                    })
-                                  }
-                                </WrapperSubOption>
-                              </ProductOption>
-                            </View>
-                          )
-                        }
-                      </React.Fragment>
-                    )
-                  }))}
-                  {!product?.hide_special_instructions && (  
-                    <ProductComment>
-                      <SectionTitle>
-                        <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                      </SectionTitle>
-                      <OInput
-                        multiline
-                        placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                        value={productCart.comment}
-                        onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                        isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                        style={styles.comment}
-                      />
-                    </ProductComment>
-                  )}
-                </ProductEditions>
-              )}
-            </WrapContent>
-          </View>
-        )}
-        {error && error.length > 0 && (
-          <NotFoundSource
-            content={error[0]?.message || error[0]}
-          />
-        )}
-      </ScrollView>
-      {!loading && !error && product && (
-        <ProductActions>
-          {productCart && !isSoldOut && maxProductQuantity > 0 && (
-            <View style={styles.quantityControl}>
-              <TouchableOpacity
-                onPress={decrement}
-                disabled={productCart.quantity === 1 || isSoldOut}
-              >
-                <MaterialCommunityIcon
-                  name='minus-circle-outline'
-                  size={32}
-                  color={productCart.quantity === 1 || isSoldOut ? theme.colors.backgroundGray : theme.colors.backgroundDark}
-                />
-              </TouchableOpacity>
-              <OText size={20}>{productCart.quantity}</OText>
-              <TouchableOpacity
-                onPress={increment}
-                disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut}
-              >
-                <MaterialCommunityIcon
-                  name='plus-circle-outline'
-                  size={32}
-                  color={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut ? theme.colors.backgroundGray : theme.colors.backgroundDark}
-                />
-              </TouchableOpacity>
-            </View>
-          )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '70%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
-              <OButton
-                isDisabled={orderState.loading}
-                onClick={() => handleSaveProduct()}
-                imgRightSrc=''
-                text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')} ${productCart.total ? parsePrice(productCart?.total) : ''}`}
-                textStyle={{ color: saveErrors ? theme.colors.primary : theme.colors.white }}
-                style={{
-                  backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
-                  opacity: saveErrors ? 0.3 : 1
-                }}
-              />
-            )}
-            {auth && !orderState.options?.address_id && (
-              orderState.loading ? (
-                <OButton
-                  isDisabled
-                  text={t('LOADING', 'Loading')}
-                  imgRightSrc=''
-                />
-              ) : (
-                <OButton
-                  onClick={() => navigation.navigate('AddressList')}
-                />
-              )
-            )}
-            {(!auth || isSoldOut || maxProductQuantity <= 0) && (
-              <OButton
-                isDisabled={isSoldOut || maxProductQuantity <= 0}
-                onClick={() => handleRedirectLogin(productCart)}
-                text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
-                imgRightSrc=''
-                textStyle={{ color: theme.colors.primary }}
-                style={{ borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
-              />
-            )}
-          </View>
-        </ProductActions>
-      )}
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    height: windowHeight
-  },
-  headerItem: {
-    overflow: 'hidden',
-    borderRadius: 50,
-    backgroundColor: '#CCCCCC80',
-    width: 35,
-    margin: 15
-  },
-  optionContainer: {
-    marginBottom: 20
-  },
-  comment: {
-    borderWidth: 1,
-    borderRadius: 0,
-    borderBottomLeftRadius: 10,
-    borderBottomRightRadius: 10,
-    borderColor: '#DBDCDB',
-    height: 160,
-    alignItems: 'flex-start',
-  },
-  quantityControl: {
-    flexDirection: 'row',
-    width: '30%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flex: 1,
-    marginRight: 10
-  },
-  btnBackArrow: {
-    borderWidth: 0,
-    color: '#FFF',
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    borderRadius: 24,
-    marginRight: 15,
-  },
-  productHeaderSkeleton: {
-    flexDirection: 'row',
-    width: '100%',
-    position: 'relative',
-    maxHeight: 260,
-    height: 260,
-    resizeMode: 'cover',
-    minHeight: 200,
-    zIndex: 0
-  },
-  regularPriceStyle: {
-    fontSize: 14,
-    color: '#808080',
-    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
-  }
-})
-
-export const ProductForm = (props: any) => {
-  const productOptionsProps = {
-    ...props,
-    UIComponent: ProductOptionsUI
-  }
-
-  return <ProductOptions {...productOptionsProps} />
-}
+import React from 'react'
+import {
+  ProductForm as ProductOptions,
+  useSession,
+  useLanguage,
+  useOrder,
+  useUtils
+} from 'ordering-components/native'
+import { ProductIngredient } from '../ProductIngredient'
+import { ProductOption } from '../ProductOption'
+
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager } from 'react-native'
+import Icon from 'react-native-vector-icons/Feather';
+
+import {
+  ProductHeader,
+  WrapHeader,
+  TopHeader,
+  WrapContent,
+  ProductTitle,
+  ProductDescription,
+  ProductEditions,
+  SectionTitle,
+  WrapperIngredients,
+  WrapperSubOption,
+  ProductComment,
+  ProductActions
+} from './styles'
+import { OButton, OIcon, OInput, OText } from '../shared'
+import { ProductOptionSubOption } from '../ProductOptionSubOption'
+import { NotFoundSource } from '../NotFoundSource'
+import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
+
+const windowHeight = Dimensions.get('window').height;
+const windowWidth = Dimensions.get('window').width
+
+export const ProductOptionsUI = (props: any) => {
+  const {
+    navigation,
+    editMode,
+    isSoldOut,
+    productCart,
+    increment,
+    decrement,
+    showOption,
+    maxProductQuantity,
+    errors,
+    handleSave,
+    handleChangeIngredientState,
+    handleChangeSuboptionState,
+    handleChangeCommentState,
+    productObject,
+    businessSlug
+  } = props
+
+  const theme = useTheme();
+
+  const [{ optimizeImage, parsePrice }] = useUtils()
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const { product, loading, error } = productObject
+
+  const isError = (id: number) => {
+    let bgColor = theme.colors.white
+    if (errors[`id:${id}`]) {
+      bgColor = 'rgba(255, 0, 0, 0.05)'
+    }
+    if (isSoldOut || maxProductQuantity <= 0) {
+      bgColor = 'hsl(0, 0%, 72%)'
+    }
+    return bgColor
+  }
+
+  const handleSaveProduct = () => {
+    const isErrors = Object.values(errors).length > 0
+    if (!isErrors) {
+      handleSave && handleSave()
+      return
+    }
+  }
+
+  const handleRedirectLogin = (product : any) => {
+    navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
+  }
+
+  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
+
+  return (
+    <>
+      <ScrollView style={styles.mainContainer}>
+        {!error && (
+          <View style={{ paddingBottom: 80 }}>
+            <WrapHeader>
+              {loading && !product ? (
+                <View style={styles.productHeaderSkeleton}>
+                  <Placeholder Animation={Fade} >
+                    <PlaceholderLine height={260} style={{ borderRadius: 0 }} width={windowWidth} />
+                  </Placeholder>
+                </View>
+              ) : (
+                <>
+                  <TopHeader>
+                    <View style={styles.headerItem}>
+                      <Icon
+                        name="x"
+                        size={35}
+                        style={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
+                        onPress={props.handleGoBack}
+                      />
+                    </View>
+                  </TopHeader>
+                  <ProductHeader
+                    source={{ uri: product?.images || productCart?.images }}
+                  />
+                </>
+              )}
+            </WrapHeader>
+            <WrapContent>
+              <ProductTitle>
+                {loading && !product ? (
+                  <Placeholder Animation={Fade}>
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <PlaceholderLine width={40} height={20} />
+                      <PlaceholderLine width={30} height={20} />
+                    </View>
+                  </Placeholder>
+                ) : (
+                  <>
+                    <View style={{ flexDirection: 'column', width: '100%' }}>
+                      <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 && (
+                            <>&nbsp;&#183;&nbsp;</>
+                          )}
+                          {!!product?.estimated_person
+                            && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+                          }
+                        </OText>
+                      )}
+                    </View>
+                  </>
+                )}
+              </ProductTitle>
+              <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>
+                  ))}
+                </>
+              ) : (
+                <ProductEditions>
+                  {product?.ingredients?.length > 0 && (
+                    <View style={styles.optionContainer}>
+                      <SectionTitle>
+                        <OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
+                      </SectionTitle>
+                      <WrapperIngredients style={{ backgroundColor: isSoldOut || maxProductQuantity <= 0 ? 'hsl(0, 0%, 72%)' : theme.colors.white }}>
+                        {product?.ingredients.map((ingredient: any) => (
+                          <ProductIngredient
+                            key={ingredient.id}
+                            ingredient={ingredient}
+                            state={productCart.ingredients[`id:${ingredient.id}`]}
+                            onChange={handleChangeIngredientState}
+                          />
+                        ))}
+                      </WrapperIngredients>
+                    </View>
+                  )}
+                  {product?.extras?.map((extra: any) => extra.options.map((option: any) => {
+                    const currentState = productCart.options[`id:${option.id}`] || {}
+                    return (
+                      <React.Fragment key={option.id}>
+                        {
+                          showOption(option) && (
+                            <View style={styles.optionContainer}>
+                              <ProductOption
+                                option={option}
+                                currentState={currentState}
+                                error={errors[`id:${option.id}`]}
+                              >
+                                <WrapperSubOption style={{ backgroundColor: isError(option.id) }}>
+                                  {
+                                    option.suboptions.map((suboption: any) => {
+                                      const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
+                                      const balance = productCart.options[`id:${option.id}`]?.balance || 0
+                                      return suboption?.enabled ? (
+                                        <ProductOptionSubOption
+                                          key={suboption.id}
+                                          onChange={handleChangeSuboptionState}
+                                          balance={balance}
+                                          option={option}
+                                          suboption={suboption}
+                                          state={currentState}
+                                          disabled={isSoldOut || maxProductQuantity <= 0}
+                                        />
+                                      ) : null
+                                    })
+                                  }
+                                </WrapperSubOption>
+                              </ProductOption>
+                            </View>
+                          )
+                        }
+                      </React.Fragment>
+                    )
+                  }))}
+                  {!product?.hide_special_instructions && (  
+                    <ProductComment>
+                      <SectionTitle>
+                        <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                      </SectionTitle>
+                      <OInput
+                        multiline
+                        placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                        value={productCart.comment}
+                        onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                        isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                        style={styles.comment}
+                      />
+                    </ProductComment>
+                  )}
+                </ProductEditions>
+              )}
+            </WrapContent>
+          </View>
+        )}
+        {error && error.length > 0 && (
+          <NotFoundSource
+            content={error[0]?.message || error[0]}
+          />
+        )}
+      </ScrollView>
+      {!loading && !error && product && (
+        <ProductActions>
+          {productCart && !isSoldOut && maxProductQuantity > 0 && (
+            <View style={styles.quantityControl}>
+              <TouchableOpacity
+                onPress={decrement}
+                disabled={productCart.quantity === 1 || isSoldOut}
+              >
+                <MaterialCommunityIcon
+                  name='minus-circle-outline'
+                  size={32}
+                  color={productCart.quantity === 1 || isSoldOut ? theme.colors.backgroundGray : theme.colors.backgroundDark}
+                />
+              </TouchableOpacity>
+              <OText size={20}>{productCart.quantity}</OText>
+              <TouchableOpacity
+                onPress={increment}
+                disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut}
+              >
+                <MaterialCommunityIcon
+                  name='plus-circle-outline'
+                  size={32}
+                  color={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut ? theme.colors.backgroundGray : theme.colors.backgroundDark}
+                />
+              </TouchableOpacity>
+            </View>
+          )}
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '70%' }}>
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+              <OButton
+                isDisabled={orderState.loading}
+                onClick={() => handleSaveProduct()}
+                imgRightSrc=''
+                text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')} ${productCart.total ? parsePrice(productCart?.total) : ''}`}
+                textStyle={{ color: saveErrors ? theme.colors.primary : theme.colors.white }}
+                style={{
+                  backgroundColor: saveErrors ? theme.colors.white : theme.colors.primary,
+                  opacity: saveErrors ? 0.3 : 1
+                }}
+              />
+            )}
+            {auth && !orderState.options?.address_id && (
+              orderState.loading ? (
+                <OButton
+                  isDisabled
+                  text={t('LOADING', 'Loading')}
+                  imgRightSrc=''
+                />
+              ) : (
+                <OButton
+                  onClick={() => navigation.navigate('AddressList')}
+                />
+              )
+            )}
+            {(!auth || isSoldOut || maxProductQuantity <= 0) && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin(productCart)}
+                text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
+                imgRightSrc=''
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
+              />
+            )}
+          </View>
+        </ProductActions>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    height: windowHeight
+  },
+  headerItem: {
+    overflow: 'hidden',
+    borderRadius: 50,
+    backgroundColor: '#CCCCCC80',
+    width: 35,
+    margin: 15
+  },
+  optionContainer: {
+    marginBottom: 20
+  },
+  comment: {
+    borderWidth: 1,
+    borderRadius: 0,
+    borderBottomLeftRadius: 10,
+    borderBottomRightRadius: 10,
+    borderColor: '#DBDCDB',
+    height: 160,
+    alignItems: 'flex-start',
+  },
+  quantityControl: {
+    flexDirection: 'row',
+    width: '30%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: 1,
+    marginRight: 10
+  },
+  btnBackArrow: {
+    borderWidth: 0,
+    color: '#FFF',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    borderRadius: 24,
+    marginRight: 15,
+  },
+  productHeaderSkeleton: {
+    flexDirection: 'row',
+    width: '100%',
+    position: 'relative',
+    maxHeight: 260,
+    height: 260,
+    resizeMode: 'cover',
+    minHeight: 200,
+    zIndex: 0
+  },
+  regularPriceStyle: {
+    fontSize: 14,
+    color: '#808080',
+    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
+  }
+})
+
+export const ProductForm = (props: any) => {
+  const productOptionsProps = {
+    ...props,
+    UIComponent: ProductOptionsUI
+  }
+
+  return <ProductOptions {...productOptionsProps} />
+}