ordering-ui-react-native 0.24.17 → 0.24.18

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

@@ -1,588 +1,588 @@
-import React, { useState } from 'react'
-import FastImage from 'react-native-fast-image'
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Animated,
-  ScrollView,
-  ImageBackground,
-} from 'react-native'
-import {
-  ProductForm as ProductOptions,
-  useSession,
-  useLanguage,
-  useOrder,
-  useUtils
-} from 'ordering-components/native'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { useTheme } from 'styled-components/native'
-
-import { ProductIngredient } from '../ProductIngredient'
-import { ProductOption } from '../ProductOption'
-import {
-  WrapContent,
-  ProductDescription,
-  ProductEditions,
-  SectionTitle,
-  WrapperIngredients,
-  WrapperSubOption,
-  ProductComment,
-  ProductActions
-} from './styles'
-import { OButton, OInput, OText } from '../shared'
-import { ProductOptionSubOption } from '../ProductOptionSubOption'
-import { NotFoundSource } from '../NotFoundSource'
-import NavBar from '../NavBar'
-import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
-
-export const ProductOptionsUI = (props: any) => {
-  const {
-    navigation,
-    editMode,
-    isSoldOut,
-    productCart,
-    increment,
-    decrement,
-    showOption,
-    maxProductQuantity,
-    errors,
-    handleSave,
-    handleChangeIngredientState,
-    handleChangeSuboptionState,
-    handleChangeCommentState,
-    productObject,
-    onClose,
-    isDrawer
-  } = props;
-
-  const theme = useTheme();
-  const [{ parsePrice }] = useUtils();
-  const [, t] = useLanguage();
-  const [orderState] = useOrder();
-  const [{ auth }] = useSession();
-  const [orientationState] = useDeviceOrientation();
-
-  const { product, loading, error } = productObject;
-
-  const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
-  const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
-
-  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) {
-      props.onProductStateChange &&
-      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
-      handleSave && handleSave()
-      return
-    }
-  }
-
-  const handleRedirectLogin = () => {
-    onClose && onClose()
-    navigation?.navigate('Login')
-  }
-
-  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors)?.length > 0
-
-  const [scrollY] = useState(new Animated.Value(0));
-
-  const headerHeight = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
-    extrapolate: 'clamp'
-  });
-  const heroContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [1, 0],
-    extrapolate: 'clamp'
-  });
-  const heroTranslateY = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, -(HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT)],
-    extrapolate: 'clamp'
-  });
-  const navBar1ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [1, 0],
-    extrapolate: 'clamp'
-  });
-  const navBar2ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  });
-
-  const collapsedBarContainerOpacity = scrollY.interpolate({
-    inputRange: [HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  });
-
-  const goToBack = () => navigation?.goBack();
-
-  const navBarProps = {
-    style: { backgroundColor: 'transparent', width: orientationState?.dimensions?.width, borderBottomWidth: 0 },
-    paddingTop: 20,
-    onActionLeft: onClose ? onClose : navigation ? goToBack : undefined,
-  };
-
-  const styles = StyleSheet.create({
-    mainContainer: {
-      flex: 1,
-      height: orientationState?.dimensions?.height,
-      backgroundColor: theme.colors.white,
-    },
-    headerItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginVertical: 15,
-      marginHorizontal: 20,
-      zIndex: 1
-    },
-    optionContainer: {
-      marginBottom: 20
-    },
-    comment: {
-      borderWidth: 1,
-      borderRadius: 0,
-      borderBottomLeftRadius: 10,
-      borderBottomRightRadius: 10,
-      borderColor: '#DBDCDB',
-      height: 100,
-      alignItems: 'flex-start',
-    },
-    quantityControl: {
-      flexDirection: 'row',
-      width: '30%',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      flex: 1,
-      marginRight: 10,
-      backgroundColor: theme.colors.paleGray,
-      paddingHorizontal: 4,
-      borderColor: theme.colors.mediumGray,
-      borderWidth: 1,
-      borderRadius: 6,
-    },
-    quantityControlButton: {
-      color: theme.colors.primary,
-    },
-    quantityControlButtonBorder: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: theme.colors.primary,
-      marginHorizontal: 10
-    },
-    quantityControlButtonDisabled: {
-      opacity: 0.5,
-    },
-    btnBackArrow: {
-      borderWidth: 0,
-      color: '#FFF',
-      backgroundColor: 'rgba(0,0,0,0.3)',
-      borderRadius: 24,
-      marginRight: 15,
-    },
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-    },
-    scrollContainer: {
-      padding: 16,
-    },
-    header: {
-      backgroundColor: '#fff',
-      position: 'absolute',
-      width: orientationState?.dimensions?.width,
-      top: 0,
-      left: 0,
-      zIndex: 9999,
-    },
-    title: {
-      marginVertical: 16,
-      color: "black",
-      fontWeight: "bold",
-      fontSize: 24
-    },
-    shadow: {
-      shadowColor: '#000',
-      shadowOffset: { width: 1, height: 1 },
-      shadowOpacity: 0.4,
-      shadowRadius: 3,
-      elevation: 5,
-    },
-    imageStyle: {
-      width: '100%',
-      height: HEADER_EXPANDED_HEIGHT,
-    }
-  });
-
-  return (
-    <>
-      <ScrollView
-        style={styles.mainContainer}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
-          { useNativeDriver: false })
-        }
-        scrollEventThrottle={16}
-      >
-        {!isDrawer ? (
-          <Animated.View style={[styles.header, { height: headerHeight }]}>
-            {!isDrawer && (
-              <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-                <NavBar
-                  {...navBarProps}
-                  titleColor={theme.colors.white}
-                  btnStyle={{
-                    width: 55,
-                    height: 55,
-                    overflow: 'scroll',
-                    backgroundColor: 'black',
-                    borderRadius: 100,
-                    color: 'white',
-                    opacity: 0.8,
-                    left: 20,
-                  }}
-                />
-              </Animated.View>
-            )}
-            <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-              <NavBar
-                {...navBarProps}
-                btnStyle={{
-                  width: 55,
-                  height: 55,
-                  backgroundColor: 'transparent',
-                  borderRadius: 100,
-                  left: 20,
-                }}
-              />
-            </Animated.View>
-
-            <Animated.View style={{
-              backgroundColor: 'white',
-              width: orientationState?.dimensions?.width,
-              opacity: collapsedBarContainerOpacity,
-            }}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  padding: 20,
-                  paddingTop: 0,
-                  paddingBottom: 10
-                }}
-              >
-                {product?.images ? (
-                  <FastImage
-                    style={{ height: 70, width: 70, borderRadius: 6 }}
-                    source={{
-                      uri: product?.images,
-                      priority: FastImage.priority.normal,
-                      // cache:FastImage.cacheControl.web
-                    }}
-                    resizeMode={FastImage.resizeMode.cover}
-                  />
-                ) : (
-                  <ImageBackground
-                    style={{ height: 70, width: 70, borderRadius: 6 }}
-                    source={theme.images.dummies.product}
-                    imageStyle={{ borderRadius: 6 }}
-                    resizeMode='cover'
-                  />
-                )}
-                <OText
-                  size={orientationState?.dimensions?.width * 0.025}
-                  weight="bold"
-                  mLeft={20}
-                  numberOfLines={2}
-                >
-                  {product?.name}
-                </OText>
-              </View>
-              <View
-                style={{
-                  position: 'absolute',
-                  bottom: -2,
-                  height: 1,
-                  backgroundColor: 'white',
-                  width: orientationState?.dimensions?.width,
-                  ...styles.shadow,
-                }}
-              />
-            </Animated.View>
-
-            <Animated.View style={{
-              opacity: heroContainerOpacity,
-              position: 'absolute',
-              zIndex: -100,
-              transform: [{ translateY: heroTranslateY }],
-            }}>
-              <View
-                style={{
-                  width: orientationState?.dimensions?.width,
-                  height: HEADER_EXPANDED_HEIGHT,
-                  position: 'absolute',
-                  zIndex: 1,
-                  backgroundColor: 'rgba(24, 28, 50, 0.4)',
-                }}
-              >
-                {product?.images ? (
-                  <FastImage
-                    style={{ flex: 1, justifyContent: 'center' }}
-                    source={{
-                      uri: product?.images,
-                      priority: FastImage.priority.normal,
-                      // cache:FastImage.cacheControl.web
-                    }}
-                    resizeMode={FastImage.resizeMode.cover}
-                  />
-                ) : (
-                  <ImageBackground
-                    style={{ flex: 1, justifyContent: 'center' }}
-                    source={theme.images.dummies.product}
-                    resizeMode='cover'
-                  />
-                )}
-              </View>
-            </Animated.View>
-          </Animated.View>
-        ) : (
-          <View style={{...styles.imageStyle}}>
-            <Animated.View
-              style={{
-                ...styles.imageStyle,
-                opacity: heroContainerOpacity,
-                position: 'absolute',
-                zIndex: -100,
-                transform: [{ translateY: heroTranslateY }],
-              }}
-            >
-              <View style={styles.imageStyle}>
-                {product?.images ? (
-                  <FastImage
-                    style={{ flex: 1 }}
-                    source={{
-                      uri: product?.images,
-                      priority: FastImage.priority.normal,
-                      // cache:FastImage.cacheControl.web
-                    }}
-                    resizeMode={FastImage.resizeMode.cover}
-                  />
-                ) : (
-                  <ImageBackground
-                    style={{ flex: 1, justifyContent: 'center' }}
-                    source={theme.images.dummies.product}
-                    resizeMode='cover'
-                  />
-                )}
-              </View>
-            </Animated.View>
-          </View>
-        )}
-
-
-        {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
-            <WrapContent isDrawer={isDrawer}>
-              <OText
-                style={{ marginTop: 20 }}
-                size={orientationState?.dimensions?.width * 0.038}
-                weight="bold"
-                mBottom={10}
-                numberOfLines={2}
-              >
-                {product?.name || productCart?.name}
-              </OText>
-
-              {(product?.description || productCart?.description) && (
-                <OText
-                  numberOfLines={4}
-                >
-                  {product?.description || productCart?.description}
-                </OText>
-              )}
-
-              {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-              ) && (
-                <ProductDescription>
-                  <OText size={20}>{t('SKU', 'Sku')}</OText>
-                  <OText>{product?.sku || productCart?.sku}</OText>
-                </ProductDescription>
-              )}
-
-              <ProductEditions>
-                {product?.ingredients.length > 0 && (
-                  <View style={styles.optionContainer}>
-                    <SectionTitle>
-                      <OText size={28} weight="bold">{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.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) => {
-                  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.sort((a: any, b: any) => a.rank - b.rank).map((suboption: any) => {
-                                    const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
-                                    const balance = productCart.options[`id:${option.id}`]?.balance || 0
-                                    return (
-                                      <ProductOptionSubOption
-                                        key={suboption.id}
-                                        onChange={handleChangeSuboptionState}
-                                        balance={balance}
-                                        option={option}
-                                        suboption={suboption}
-                                        state={currentState}
-                                        disabled={isSoldOut || maxProductQuantity <= 0}
-                                      />
-                                    )
-                                  })
-                                }
-                              </WrapperSubOption>
-                            </ProductOption>
-                          </View>
-                        )
-                      }
-                    </React.Fragment>
-                  )
-                }))}
-                {!product?.hide_special_instructions && (
-                  <ProductComment>
-                    <SectionTitle>
-                      <OText size={28} weight="bold">{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}
-                style={[
-                  styles.quantityControlButtonBorder,
-                  (productCart.quantity === 1 || isSoldOut) && styles.quantityControlButtonDisabled,
-                ]}
-              >
-                <MaterialCommunityIcon
-                  name='minus'
-                  size={32}
-                  style={[
-                    styles.quantityControlButton,
-                    (productCart.quantity === 1 || isSoldOut) && styles.quantityControlButtonDisabled,
-                  ]}
-                />
-              </TouchableOpacity>
-              <OText size={20}>{productCart.quantity}</OText>
-              <TouchableOpacity
-                onPress={increment}
-                disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut}
-                style={[
-                  styles.quantityControlButtonBorder,
-                  (maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut) && styles.quantityControlButtonDisabled,
-                ]}
-              >
-                <MaterialCommunityIcon
-                  name='plus'
-                  size={32}
-                  style={[
-                    styles.quantityControlButton,
-                    (maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut) && styles.quantityControlButtonDisabled,
-                  ]}
-                />
-              </TouchableOpacity>
-            </View>
-          )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
-              <OButton
-                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,
-                  height: 60
-                }}
-              />
-            )}
-            {(!auth || isSoldOut || maxProductQuantity <= 0) && (
-              <OButton
-                isDisabled={isSoldOut || maxProductQuantity <= 0}
-                onClick={() => handleRedirectLogin()}
-                text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
-                imgRightSrc=''
-              />
-            )}
-          </View>
-        </ProductActions>
-      )}
-    </>
-  );
-}
-
-export const ProductForm = (props: any) => {
-  const productOptionsProps = {
-    ...props,
-    UIComponent: ProductOptionsUI
-  }
-
-  return <ProductOptions {...productOptionsProps} />
-}
+import React, { useState } from 'react'
+import FastImage from 'react-native-fast-image'
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  ScrollView,
+  ImageBackground,
+} from 'react-native'
+import {
+  ProductForm as ProductOptions,
+  useSession,
+  useLanguage,
+  useOrder,
+  useUtils
+} from 'ordering-components/native'
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { useTheme } from 'styled-components/native'
+
+import { ProductIngredient } from '../ProductIngredient'
+import { ProductOption } from '../ProductOption'
+import {
+  WrapContent,
+  ProductDescription,
+  ProductEditions,
+  SectionTitle,
+  WrapperIngredients,
+  WrapperSubOption,
+  ProductComment,
+  ProductActions
+} from './styles'
+import { OButton, OInput, OText } from '../shared'
+import { ProductOptionSubOption } from '../ProductOptionSubOption'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
+
+export const ProductOptionsUI = (props: any) => {
+  const {
+    navigation,
+    editMode,
+    isSoldOut,
+    productCart,
+    increment,
+    decrement,
+    showOption,
+    maxProductQuantity,
+    errors,
+    handleSave,
+    handleChangeIngredientState,
+    handleChangeSuboptionState,
+    handleChangeCommentState,
+    productObject,
+    onClose,
+    isDrawer
+  } = props;
+
+  const theme = useTheme();
+  const [{ parsePrice }] = useUtils();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const [{ auth }] = useSession();
+  const [orientationState] = useDeviceOrientation();
+
+  const { product, loading, error } = productObject;
+
+  const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
+  const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
+
+  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) {
+      props.onProductStateChange &&
+      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
+      handleSave && handleSave()
+      return
+    }
+  }
+
+  const handleRedirectLogin = () => {
+    onClose && onClose()
+    navigation?.navigate('Login')
+  }
+
+  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors)?.length > 0
+
+  const [scrollY] = useState(new Animated.Value(0));
+
+  const headerHeight = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
+    extrapolate: 'clamp'
+  });
+  const heroContainerOpacity = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [1, 0],
+    extrapolate: 'clamp'
+  });
+  const heroTranslateY = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, -(HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT)],
+    extrapolate: 'clamp'
+  });
+  const navBar1ContainerOpacity = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [1, 0],
+    extrapolate: 'clamp'
+  });
+  const navBar2ContainerOpacity = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, 1],
+    extrapolate: 'clamp'
+  });
+
+  const collapsedBarContainerOpacity = scrollY.interpolate({
+    inputRange: [HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, 1],
+    extrapolate: 'clamp'
+  });
+
+  const goToBack = () => navigation?.goBack();
+
+  const navBarProps = {
+    style: { backgroundColor: 'transparent', width: orientationState?.dimensions?.width, borderBottomWidth: 0 },
+    paddingTop: 20,
+    onActionLeft: onClose ? onClose : navigation ? goToBack : undefined,
+  };
+
+  const styles = StyleSheet.create({
+    mainContainer: {
+      flex: 1,
+      height: orientationState?.dimensions?.height,
+      backgroundColor: theme.colors.white,
+    },
+    headerItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginVertical: 15,
+      marginHorizontal: 20,
+      zIndex: 1
+    },
+    optionContainer: {
+      marginBottom: 20
+    },
+    comment: {
+      borderWidth: 1,
+      borderRadius: 0,
+      borderBottomLeftRadius: 10,
+      borderBottomRightRadius: 10,
+      borderColor: '#DBDCDB',
+      height: 100,
+      alignItems: 'flex-start',
+    },
+    quantityControl: {
+      flexDirection: 'row',
+      width: '30%',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flex: 1,
+      marginRight: 10,
+      backgroundColor: theme.colors.paleGray,
+      paddingHorizontal: 4,
+      borderColor: theme.colors.mediumGray,
+      borderWidth: 1,
+      borderRadius: 6,
+    },
+    quantityControlButton: {
+      color: theme.colors.primary,
+    },
+    quantityControlButtonBorder: {
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: theme.colors.primary,
+      marginHorizontal: 10
+    },
+    quantityControlButtonDisabled: {
+      opacity: 0.5,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      color: '#FFF',
+      backgroundColor: 'rgba(0,0,0,0.3)',
+      borderRadius: 24,
+      marginRight: 15,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+    },
+    scrollContainer: {
+      padding: 16,
+    },
+    header: {
+      backgroundColor: '#fff',
+      position: 'absolute',
+      width: orientationState?.dimensions?.width,
+      top: 0,
+      left: 0,
+      zIndex: 9999,
+    },
+    title: {
+      marginVertical: 16,
+      color: "black",
+      fontWeight: "bold",
+      fontSize: 24
+    },
+    shadow: {
+      shadowColor: '#000',
+      shadowOffset: { width: 1, height: 1 },
+      shadowOpacity: 0.4,
+      shadowRadius: 3,
+      elevation: 5,
+    },
+    imageStyle: {
+      width: '100%',
+      height: HEADER_EXPANDED_HEIGHT,
+    }
+  });
+
+  return (
+    <>
+      <ScrollView
+        style={styles.mainContainer}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: false })
+        }
+        scrollEventThrottle={16}
+      >
+        {!isDrawer ? (
+          <Animated.View style={[styles.header, { height: headerHeight }]}>
+            {!isDrawer && (
+              <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+                <NavBar
+                  {...navBarProps}
+                  titleColor={theme.colors.white}
+                  btnStyle={{
+                    width: 55,
+                    height: 55,
+                    overflow: 'scroll',
+                    backgroundColor: 'black',
+                    borderRadius: 100,
+                    color: 'white',
+                    opacity: 0.8,
+                    left: 20,
+                  }}
+                />
+              </Animated.View>
+            )}
+            <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+              <NavBar
+                {...navBarProps}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'transparent',
+                  borderRadius: 100,
+                  left: 20,
+                }}
+              />
+            </Animated.View>
+
+            <Animated.View style={{
+              backgroundColor: 'white',
+              width: orientationState?.dimensions?.width,
+              opacity: collapsedBarContainerOpacity,
+            }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: 20,
+                  paddingTop: 0,
+                  paddingBottom: 10
+                }}
+              >
+                {product?.images ? (
+                  <FastImage
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={theme.images.dummies.product}
+                    imageStyle={{ borderRadius: 6 }}
+                    resizeMode='cover'
+                  />
+                )}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.025}
+                  weight="bold"
+                  mLeft={20}
+                  numberOfLines={2}
+                >
+                  {product?.name}
+                </OText>
+              </View>
+              <View
+                style={{
+                  position: 'absolute',
+                  bottom: -2,
+                  height: 1,
+                  backgroundColor: 'white',
+                  width: orientationState?.dimensions?.width,
+                  ...styles.shadow,
+                }}
+              />
+            </Animated.View>
+
+            <Animated.View style={{
+              opacity: heroContainerOpacity,
+              position: 'absolute',
+              zIndex: -100,
+              transform: [{ translateY: heroTranslateY }],
+            }}>
+              <View
+                style={{
+                  width: orientationState?.dimensions?.width,
+                  height: HEADER_EXPANDED_HEIGHT,
+                  position: 'absolute',
+                  zIndex: 1,
+                  backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                }}
+              >
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
+          </Animated.View>
+        ) : (
+          <View style={{...styles.imageStyle}}>
+            <Animated.View
+              style={{
+                ...styles.imageStyle,
+                opacity: heroContainerOpacity,
+                position: 'absolute',
+                zIndex: -100,
+                transform: [{ translateY: heroTranslateY }],
+              }}
+            >
+              <View style={styles.imageStyle}>
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
+          </View>
+        )}
+
+
+        {!loading && !error && product && (
+          <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
+            <WrapContent isDrawer={isDrawer}>
+              <OText
+                style={{ marginTop: 20 }}
+                size={orientationState?.dimensions?.width * 0.038}
+                weight="bold"
+                mBottom={10}
+                numberOfLines={2}
+              >
+                {product?.name || productCart?.name}
+              </OText>
+
+              {(product?.description || productCart?.description) && (
+                <OText
+                  numberOfLines={4}
+                >
+                  {product?.description || productCart?.description}
+                </OText>
+              )}
+
+              {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
+                (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
+              ) && (
+                <ProductDescription>
+                  <OText size={20}>{t('SKU', 'Sku')}</OText>
+                  <OText>{product?.sku || productCart?.sku}</OText>
+                </ProductDescription>
+              )}
+
+              <ProductEditions>
+                {product?.ingredients.length > 0 && (
+                  <View style={styles.optionContainer}>
+                    <SectionTitle>
+                      <OText size={28} weight="bold">{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.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) => {
+                  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.sort((a: any, b: any) => a.rank - b.rank).map((suboption: any) => {
+                                    const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {}
+                                    const balance = productCart.options[`id:${option.id}`]?.balance || 0
+                                    return (
+                                      <ProductOptionSubOption
+                                        key={suboption.id}
+                                        onChange={handleChangeSuboptionState}
+                                        balance={balance}
+                                        option={option}
+                                        suboption={suboption}
+                                        state={currentState}
+                                        disabled={isSoldOut || maxProductQuantity <= 0}
+                                      />
+                                    )
+                                  })
+                                }
+                              </WrapperSubOption>
+                            </ProductOption>
+                          </View>
+                        )
+                      }
+                    </React.Fragment>
+                  )
+                }))}
+                {!product?.hide_special_instructions && (
+                  <ProductComment>
+                    <SectionTitle>
+                      <OText size={28} weight="bold">{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}
+                style={[
+                  styles.quantityControlButtonBorder,
+                  (productCart.quantity === 1 || isSoldOut) && styles.quantityControlButtonDisabled,
+                ]}
+              >
+                <MaterialCommunityIcon
+                  name='minus'
+                  size={32}
+                  style={[
+                    styles.quantityControlButton,
+                    (productCart.quantity === 1 || isSoldOut) && styles.quantityControlButtonDisabled,
+                  ]}
+                />
+              </TouchableOpacity>
+              <OText size={20}>{productCart.quantity}</OText>
+              <TouchableOpacity
+                onPress={increment}
+                disabled={maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut}
+                style={[
+                  styles.quantityControlButtonBorder,
+                  (maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut) && styles.quantityControlButtonDisabled,
+                ]}
+              >
+                <MaterialCommunityIcon
+                  name='plus'
+                  size={32}
+                  style={[
+                    styles.quantityControlButton,
+                    (maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || isSoldOut) && styles.quantityControlButtonDisabled,
+                  ]}
+                />
+              </TouchableOpacity>
+            </View>
+          )}
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
+              <OButton
+                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,
+                  height: 60
+                }}
+              />
+            )}
+            {(!auth || isSoldOut || maxProductQuantity <= 0) && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
+                imgRightSrc=''
+              />
+            )}
+          </View>
+        </ProductActions>
+      )}
+    </>
+  );
+}
+
+export const ProductForm = (props: any) => {
+  const productOptionsProps = {
+    ...props,
+    UIComponent: ProductOptionsUI
+  }
+
+  return <ProductOptions {...productOptionsProps} />
+}