ordering-ui-react-native 0.11.24 → 0.11.28

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

@@ -48,7 +48,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
       height: VISIBLE_CART_BOTTOM_SHEET_HEIGHT,
       visible: bottomSheetVisibility,
     },
-    showNotFound: false,
+    showNotFound: false
   }
 
   const goToBack = () => navigation.goBack()
@@ -72,7 +72,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingVertical: 20 }}>
+          <View style={{ paddingTop: 20 }}>
             <NavBar
               title={t('MENU', 'Menu')}
               onActionLeft={goToBack}
@@ -104,17 +104,16 @@ const BusinessMenu = (props:any): React.ReactElement => {
         </Container>
       </View>
 
-      {bottomSheetVisibility &&
-        (<View
+        <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+            display: bottomSheetVisibility ? 'flex' : 'none'
           }}
         >
           <CartContent
             {...cartProps}
           />
-        </View>)
-      }
+        </View>
     </View>
   );
 };

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

@@ -1,22 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import {
-  BusinessAndProductList,
-  useLanguage,
-  useOrder,
-  useSession,
-  useConfig,
-  useApi
-} from 'ordering-components/native'
+import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
 import Carousel from 'react-native-snap-carousel';
 import { BusinessProductsListingParams, Business, Product } from '../../types'
-import { OCard, OText } from '../shared'
+import { OCard, OText, OIcon } from '../shared'
 import GridContainer from '../../layouts/GridContainer'
 import PromoCard from '../PromoCard';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useTheme } from 'styled-components/native';
-import { OIcon } from '../shared';
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState} = props;
@@ -40,8 +32,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   });
 
   const _renderTitle = (title: string): React.ReactElement => (
-    <View style={{paddingHorizontal: 20, paddingVertical: 40}}>
-      <OText size={orientationState?.dimensions?.width * 0.035} weight="bold">
+    <View style={{paddingHorizontal: 20, paddingVertical: 15 }}>
+      <OText size={orientationState?.dimensions?.width * 0.022} weight="bold">
         {title}
       </OText>
     </View>
@@ -69,7 +61,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const _renderPromos = (): React.ReactElement => (
     <>
-      {_renderTitle(t('PROMOS', 'Promos'))}
+      {_renderTitle(t('FEATURED', 'Featured'))}
       <Carousel
         keyExtractor={(item: any) => item.id}
         ref={(c: any) => {

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

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, Actions, KeyboardView, OrderTypeWrapper } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -22,8 +22,8 @@ import CartItem from '../CartItem';
 import NavBar from '../NavBar';
 import { CouponControl } from '../CouponControl';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
+import { Container } from '../../../../../src/layouts/Container';
 
 const CartUI = (props: any) => {
   const {
@@ -91,16 +91,8 @@ const CartUI = (props: any) => {
   const goToBack = () => navigation.goBack();
 
   return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <SafeAreaView style={{
-        flex: 1,
-        padding: 20,
-        backgroundColor: '#fff',
-      }}>
-
+    <>
+      <Container>
         <NavBar
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
@@ -141,29 +133,50 @@ const CartUI = (props: any) => {
           />
         </OrderTypeWrapper>
 
-        <ScrollView style={{flex: 1}}>
-          {cart?.products?.length > 0 && cart?.products.map((product: any) => (
-            <CartItem
-              key={product.code}
-              isCartPending={isCartPending}
-              isCartProduct
-              product={product}
-              changeQuantity={changeQuantity}
-              getProductMax={getProductMax}
-              offsetDisabled={offsetDisabled}
-              onDeleteProduct={handleDeleteClick}
-              onEditProduct={handleEditProduct}
-            />
-          ))}
-        </ScrollView>
-
-        <Actions
+        <ScrollView
+          nestedScrollEnabled={true}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
           style={{
-            flex: 1
+            minHeight: orientationState?.dimensions?.height * 0.5,
+            maxHeight: orientationState?.dimensions?.height * 0.5,
           }}
         >
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              opacity: 1
+            }}
+          >
+            {cart?.products?.length > 0 && cart?.products.map((product: any) => (
+              <CartItem
+                isCartProduct
+                key={product.code}
+                product={product}
+                isCartPending={isCartPending}
+                changeQuantity={changeQuantity}
+                getProductMax={getProductMax}
+                offsetDisabled={offsetDisabled}
+                onDeleteProduct={handleDeleteClick}
+                onEditProduct={handleEditProduct}
+              />
+            ))}
+          </View>
+        </ScrollView>
+
+        <View style={{ marginTop: 10 }}>
           {cart?.valid_products && (
             <OSBill>
+              <OSTable>
+                <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText>
+                  {cart.business.tax_type === 1
+                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
+                    : parsePrice(cart?.subtotal || 0)}
+                </OText>
+              </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
@@ -260,19 +273,21 @@ const CartUI = (props: any) => {
                   </OSCoupon>
                 </OSTable>
               )}
-              {/*ESTE CODIGO GENERA UNA LINEA EN LA PAGINA QUE SE VE MAL, validar si es necesario este codigo*/}
-              {/*<OSTotal>*/}
-              {/*  <OSTable style={{ marginTop: 15 }}>*/}
-              {/*    <OText style={{ fontWeight: 'bold' }}>*/}
-              {/*      {t('TOTAL', 'Total')}*/}
-              {/*    </OText>*/}
-              {/*    <OText style={{ fontWeight: 'bold' }} color={theme.colors.primary}>*/}
-              {/*      {cart?.total >= 1 && parsePrice(cart?.total)}*/}
-              {/*    </OText>*/}
-              {/*  </OSTable>*/}
-              {/*</OSTotal>*/}
+              <OSTable>
+                <OText weight='bold'>
+                  {t('TOTAL', 'Total')}
+                </OText>
+                <OText weight='bold' color={theme.colors.primary}>
+                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                </OText>
+              </OSTable>
             </OSBill>
           )}
+        </View>
+      </Container>
+
+      <>
+        <FloatingLayout isIos={Platform.OS === 'ios'}>
           <CheckoutAction>
             <View style={{display: 'flex', flexDirection: 'row'}}>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == LANDSCAPE && (
@@ -337,7 +352,7 @@ const CartUI = (props: any) => {
               }}>
                 <OButton
                   text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                    `${t('CONFIRM_THIS', 'Confirm this')} ${parsePrice(cart?.total)} ${t('ORDER', 'order')}`
+                    `${t('CONFIRM_THIS_ORDER', 'Confirm this order')}`
                   ) : !cart?.valid_address ? (
                     `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
                   ) : (
@@ -354,27 +369,27 @@ const CartUI = (props: any) => {
               </View>
             </View>
           </CheckoutAction>
-        </Actions>
+        </FloatingLayout>
+      </>
 
-        <OModal
-          open={openProduct}
-          entireModal
-          customClose
+      <OModal
+        open={openProduct}
+        entireModal
+        customClose
+        onClose={() => setModalIsOpen(false)}
+      >
+        <ProductForm
+          productCart={curProduct}
+          businessSlug={cart?.business?.slug}
+          businessId={curProduct?.business_id}
+          categoryId={curProduct?.category_id}
+          productId={curProduct?.id}
+          onSave={handlerProductAction}
           onClose={() => setModalIsOpen(false)}
-        >
-          <ProductForm
-            productCart={curProduct}
-            businessSlug={cart?.business?.slug}
-            businessId={curProduct?.business_id}
-            categoryId={curProduct?.category_id}
-            productId={curProduct?.id}
-            onSave={handlerProductAction}
-            onClose={() => setModalIsOpen(false)}
-          />
+        />
 
-        </OModal>
-      </SafeAreaView>
-    </KeyboardView>
+      </OModal>
+    </>
   )
 }
 

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const CContainer = styled.View`
   padding: 0 20px;
@@ -50,3 +50,21 @@ export const OrderTypeWrapper = styled.View`
   border-bottom-width: 1px;
   margin-bottom: 30px;
 `;
+
+export const FloatingLayout = styled.View`
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFF;
+  z-index: 1000;
+
+  ${((props: any) => props.isIos && css`
+    padding-bottom: 20px;
+  `)}
+`

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

@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, { useEffect, useState} from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import {
   Cart as CartController,
@@ -45,7 +45,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-  const [, { hideCartBottomSheet }] = useCartBottomSheet();
+  const [, {hideCartBottomSheet }] = useCartBottomSheet();
 
   const selectedOrderType = orderState?.options?.type;
 
@@ -53,6 +53,9 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
+    if(cart?.products?.length === 1){
+      hideCartBottomSheet()
+    }
   }
 
   const handleEditProduct = (product: any) => {

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

@@ -1,8 +1,15 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 
-import { StyledCartItem } from './styles';
+import {
+  StyledCartItem,
+  AccordionContent,
+  ProductOptionsList,
+  ProductOption,
+  ProductSubOption,
+  ProductComment
+} from './styles';
 import { OButton, OImage, OText } from '../shared';
 import { Product } from '../../types';
 import QuantityControl from '../QuantityControl';
@@ -15,6 +22,8 @@ const CartItem = (props: CartItemProps) => {
   const [orientationState] = useDeviceOrientation();
   const [{ parsePrice }] = useUtils();
 
+  const [isActive, setActiveState] = useState(false);
+
   const {
     isCartPending,
     isCartProduct,
@@ -26,66 +35,144 @@ const CartItem = (props: CartItemProps) => {
     isFromCheckout,
   } = props
 
+  const productInfo = () => {
+    if (isCartProduct) {
+      const ingredients = JSON.parse(JSON.stringify(Object.values(product?.ingredients ?? {})))
+      let options = JSON.parse(JSON.stringify(Object.values(product?.options ?? {})))
+
+      options = options.map((option: any) => {
+        option.suboptions = Object.values(option.suboptions ?? {})
+        return option
+      })
+      return {
+        ...productInfo,
+        ingredients,
+        options
+      }
+    }
+    return product
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
+    const pos = position ? `(${position})` : ''
+    return `${quantity} x ${name} ${pos} +${price}`
+  }
+
   return (
-    <StyledCartItem>
-      <View style={{ flexDirection: 'row' }}>
-        <OImage
-          source={{ uri: product?.images || '' }}
-          height={60}
-          width={60}
-          resizeMode="cover"
-          borderRadius={6}
-        />
+    <>
+      <TouchableOpacity
+        onPress={() => (!product?.valid_menu && isCartProduct)
+          ? {}
+          : setActiveState(!isActive)}
+        activeOpacity={1}
+      >
+        <StyledCartItem>
+          <View style={{ flexDirection: 'row' }}>
+            <OImage
+              source={{ uri: product?.images || '' }}
+              height={60}
+              width={60}
+              resizeMode="cover"
+              borderRadius={6}
+            />
 
-        <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
-          <OText
-            style={{
-              maxWidth: orientationState?.orientation === LANDSCAPE
-                ? orientationState.dimensions.width * 0.2
-                : orientationState.dimensions.width * 0.5
-            }}
-            numberOfLines={2}
-            size={18}
-            weight="700"
-          >
-            {product?.name || ''}
-          </OText>
+            <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
+              <View>
+                <OText
+                  style={{
+                    maxWidth: orientationState?.orientation === LANDSCAPE
+                      ? orientationState.dimensions.width * 0.2
+                      : orientationState.dimensions.width * 0.5
+                  }}
+                  numberOfLines={2}
+                  size={18}
+                  weight="700"
+                >
+                  {product?.name || ''}
+                </OText>
+              </View>
 
-          <OButton
-            bgColor="transparent"
-            borderColor="transparent"
-            imgLeftSrc={theme.images.general.edit}
-            text={t('EDIT', 'Edit')}
-            style={{ justifyContent: 'flex-start', paddingLeft: 0 }}
-            textStyle={{
-              color: theme.colors.primary,
-              marginLeft: 6,
-            }}
-            onClick={() => { onEditProduct ? onEditProduct(product) : null }}
-          />
-        </View>
-      </View>
+              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <OButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  imgLeftSrc={theme.images.general.edit}
+                  text={t('EDIT', 'Edit')}
+                  style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
+                  textStyle={{
+                    color: theme.colors.primary,
+                    marginLeft: 6,
+                  }}
+                  onClick={() => { onEditProduct ? onEditProduct(product) : null }}
+                />
+              </View>
+            </View>
+          </View>
+
+          <View style={{ alignItems: "flex-end" }} >
+            <OText
+              size={18}
+              weight="700"
+              color={theme.colors.primary}
+            >
+              {parsePrice(product?.total || product?.price)}
+            </OText>
 
-      <View style={{ alignItems: "flex-end" }} >
-        <OText
-          size={18}
-          weight="700"
-          color={theme.colors.primary}
-        >
-          {parsePrice(product?.total || product?.price)}
-        </OText>
+            <QuantityControl
+              val={product?.quantity || 0}
+              onDecremet={(product?.quantity || 0 > 1)
+                ? (() => { changeQuantity && changeQuantity(product, (product?.quantity || 0) - 1) })
+                : undefined
+              }
+              onIncrement={changeQuantity && (() => { changeQuantity(product, (product?.quantity || 0) + 1) })}
+              onDelete={onDeleteProduct && (() => { onDeleteProduct(product) })}
+            />
+          </View>
+        </StyledCartItem>
+      </TouchableOpacity>
 
-        <QuantityControl
-          val={product?.quantity || 0}
-          onDecremet={(product?.quantity || 0 > 1)
-            ? (() => { changeQuantity && changeQuantity(product, (product?.quantity || 0) - 1) })
-            : undefined
-          }
-          onIncrement={changeQuantity && (() => { changeQuantity(product, (product?.quantity || 0) + 1) })}
-          onDelete={onDeleteProduct && (() => { onDeleteProduct(product) })}
-        />
+      <View style={{ display: isActive ? 'flex' : 'none' }}>
+        <Animated.View>
+          <AccordionContent>
+            {productInfo()?.ingredients.length > 0 && productInfo()?.ingredients.some((ingredient: any) => !ingredient.selected) && (
+              <ProductOptionsList>
+                <OText>{t('INGREDIENTS', 'Ingredients')}</OText>
+                {productInfo()?.ingredients.map((ingredient: any) => !ingredient.selected && (
+                  <OText key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
+                ))}
+              </ProductOptionsList>
+            )}
+            {productInfo()?.options.length > 0 && (
+              <ProductOptionsList>
+                {productInfo()?.options.map((option: any, i: number) => (
+                  <ProductOption key={option.id + i}>
+                    <OText>{option.name}</OText>
+                    {option.suboptions.map((suboption: any) => (
+                      <ProductSubOption key={suboption.id}>
+                        <OText>
+                          {getFormattedSubOptionName({
+                            quantity: suboption.quantity,
+                            name: suboption.name,
+                            position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+                            price: parsePrice(suboption.price)
+                          })}
+                        </OText>
+                      </ProductSubOption>
+                    ))}
+                  </ProductOption>
+                ))}
+              </ProductOptionsList>
+            )}
+            {product && product?.comment && (
+              <ProductComment>
+                <OText>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
+                <OText>{product.comment}</OText>
+              </ProductComment>
+            )}
+          </AccordionContent>
+        </Animated.View>
       </View>
-    </StyledCartItem>
+    </>
   );
 }
 

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

@@ -7,3 +7,27 @@ export const StyledCartItem = styled.View`
 	justify-content: space-between;
 	margin-bottom: 14px;
 `
+
+export const AccordionContent = styled.View`
+  overflow: hidden;
+  align-items: flex-start;
+`
+
+export const ProductOptionsList = styled.View`
+  margin-left: 20px;
+  margin-bottom: 10px;
+  align-items: flex-start;
+`
+
+export const ProductOption = styled.View`
+  align-items: flex-start;
+`
+
+export const ProductSubOption = styled.View`
+  align-items: flex-start;
+  margin-left: 10px;
+`
+
+export const ProductComment = styled.View`
+  align-items: flex-start;
+`

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -66,6 +66,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
       visible: bottomSheetVisibility,
     },
     showNotFound: false,
+    showCartBottomSheet,
   }
 
   const onToggleCart = () => {
@@ -87,7 +88,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingVertical: 20 }}>
+          <View style={{ paddingTop: 20 }}>
             <NavBar
               title={t('CATEGORY', 'Category')}
               onActionLeft={goToBack}
@@ -114,21 +115,12 @@ const CategoriesMenu = (props: any): React.ReactElement => {
               items={categories.map((category) => ({
                 text: category.name
               }))}
-              selectedIdx={curIndexCateg} 
+              selectedIdx={curIndexCateg}
               onSelectItem={onChangeTabs}
             />
           </View>
-          
-          <View style={{ paddingHorizontal: 20, paddingVertical: 8 }}>
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight="bold"
-            >
-              {categories[curIndexCateg].name}
-            </OText>
-          </View>
 
-          <GridContainer>
+          <GridContainer style={{ marginTop: 20 }}>
             {categories[curIndexCateg].products.map((product) => (
               <OCard
                 key={product.id}
@@ -137,7 +129,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 style={{
                   width: orientationState?.orientation === LANDSCAPE
                     ? orientationState?.dimensions?.width * 0.16
-                    : orientationState?.dimensions?.width * 0.21,
+                    : orientationState?.dimensions?.width * 0.21
                 }}
                 titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
                 onPress={() => {
@@ -156,17 +148,16 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         </Container>
       </View>
 
-      {bottomSheetVisibility &&  
-        (<View
+        <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+            display: bottomSheetVisibility ? 'flex' : 'none'
           }}
         >
           <CartContent
             {...cartProps}
           />
-        </View>)
-      }
+        </View>
     </View>
 	);
 };