ordering-ui-react-native 0.12.15 → 0.12.19

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

@@ -55,7 +55,8 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout
+    isFromCheckout,
+    isDrawer
   } = props;
 
   const theme = useTheme();
@@ -230,145 +231,146 @@ export const ProductOptionsUI = (props: any) => {
 
   return (
     <>
-      <Animated.View style={[styles.header, { height: headerHeight }]}>
-        <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-          <NavBar
-            {...navBarProps}
-            titleColor={theme.colors.white}
-            {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-            btnStyle={{
-              width: 55,
-              height: 55,
-              backgroundColor: 'black',
-              borderRadius: 100,
-              opacity: 0.8,
-              left: 20,
-            }}
-            imgLeftStyle={{ width: 27, height: 27 }}
-          />
-        </Animated.View>
-        <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-          <NavBar
-            {...navBarProps}
-            {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
-            btnStyle={{
-              width: 55,
-              height: 55,
-              backgroundColor: 'transparent',
-              borderRadius: 100,
-              left: 20,
-            }}
-            imgLeftStyle={{ width: 27, height: 27 }}
-          />
-        </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
-            }}
-          >
-            <OImage
-              source={{uri: product?.images}}
-              width={70}
-              height={70}
-              resizeMode="cover"
-              borderRadius={6}
+      <ScrollView
+        style={styles.mainContainer}
+        contentContainerStyle={styles.scrollContainer}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
+          {useNativeDriver: false})
+        }
+        scrollEventThrottle={16}
+      >
+        <Animated.View style={[styles.header, { height: headerHeight }]}>
+          {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+              <NavBar
+                {...navBarProps}
+                titleColor={theme.colors.white}
+                {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'black',
+                  borderRadius: 100,
+                  opacity: 0.8,
+                  left: 20,
+                }}
+                imgLeftStyle={{ width: 27, height: 27 }}
+              />
+            </Animated.View>
+          )}
+          <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+            <NavBar
+              {...navBarProps}
+              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
+              btnStyle={{
+                width: 55,
+                height: 55,
+                backgroundColor: 'transparent',
+                borderRadius: 100,
+                left: 20,
+              }}
+              imgLeftStyle={{ width: 27, height: 27 }}
             />
-            <OText
-              size={orientationState?.dimensions?.width * 0.025}
-              weight="bold"
-              mLeft={20}
-              numberOfLines={2}
+          </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?.name}
-            </OText>
-          </View>
-          <View
-            style={{
-              position: 'absolute',
-              bottom: -2,
-              height: 1,
-              backgroundColor: 'white',
-              width: orientationState?.dimensions?.width,
-              ...styles.shadow,
-            }}
-          />
-        </Animated.View>
+              <OImage
+                source={{uri: product?.images}}
+                width={70}
+                height={70}
+                resizeMode="cover"
+                borderRadius={6}
+              />
+              <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)',
-            }}
-          >
-            <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
+          <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)',
+              }}
+            >
+              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
 
-          </View>
+            </View>
 
-          <Animated.View
-            style={{
-              transform: [{translateY: heroTranslateY }],
-              width: orientationState?.dimensions?.width * 0.75,
-              height: HEADER_EXPANDED_HEIGHT / 2,
-              position: 'relative',
-              top: HEADER_EXPANDED_HEIGHT / 3,
-              zIndex: 100,
-              padding: 20,
-            }}
-          >
-            <OText
-              color={theme.colors.white}
-              size={orientationState?.dimensions?.width * 0.048}
-              weight="bold"
-              mBottom={10}
-              numberOfLines={2}
+            <Animated.View
+              style={{
+                transform: [{translateY: heroTranslateY }],
+                width: orientationState?.dimensions?.width * 0.75,
+                height: HEADER_EXPANDED_HEIGHT / 2,
+                position: 'relative',
+                top: HEADER_EXPANDED_HEIGHT / 3,
+                zIndex: 100,
+                padding: 20,
+              }}
             >
-              {product?.name || productCart?.name}
-            </OText>
+              <OText
+                color={theme.colors.white}
+                size={orientationState?.dimensions?.width * 0.048}
+                weight="bold"
+                mBottom={10}
+                numberOfLines={2}
+              >
+                {product?.name || productCart?.name}
+              </OText>
 
-            <OText
-              color={theme.colors.white}
-              numberOfLines={4}
-            >
-              {product?.description || productCart?.description}
-            </OText>
+              <OText
+                color={theme.colors.white}
+                numberOfLines={4}
+              >
+                {product?.description || productCart?.description}
+              </OText>
+            </Animated.View>
           </Animated.View>
         </Animated.View>
-      </Animated.View>
 
-      <ScrollView
-        style={styles.mainContainer}
-        contentContainerStyle={styles.scrollContainer}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
-          {useNativeDriver: false})
-        }
-        scrollEventThrottle={16}
-      >
         {!isFromCheckout && (
           <Spinner visible={loading} />
         )}
         {!loading && !error && product && (
-          <View style={{ paddingTop: 20, paddingBottom: 80 }}> 
-            <WrapContent>
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+            <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
@@ -500,7 +502,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : '80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}

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

@@ -27,7 +27,7 @@ export const ProductHeader = styled.ImageBackground`
 `
 
 export const WrapContent = styled.View`
-  padding: 0 20px;
+  padding: ${(props: any) => props.isDrawer ? '0 5px' : '0 20px'};
   position: relative;
   bottom: 20px;
   background-color: white;

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

@@ -106,11 +106,11 @@ const OrderProgressUI = (props: any) => {
   const convertDiffToHours = (order: any) => {
     const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
     const deliveryTime = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
-      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
+      : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
     const [hour, minute] = time.split(':')
     const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
-    const returnedDate = moment(new Date(deliveryTime)).add(result, 'minutes').format('hh:mm A')
+    const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
     return returnedDate
   }