ordering-ui-react-native 0.15.62 → 0.15.64-release

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
+import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
 import {
   Checkout as CheckoutController,
   useOrder,
@@ -35,28 +35,46 @@ const CheckoutUI = (props: any) => {
   } = props
 
   const [errorCash, setErrorCash] = useState(false);
+  const [customerName, setCustomerName] = useState(null);
+
+  const getCustomerName = async () => {
+    const data = await _retrieveStoreData('customer_name');
+    setCustomerName(data?.customerName)
+  }
+
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    } else {
+      getCustomerName()
+    }
+  }, [cart])
+
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
 
   return (
     <>
-      {!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
-        <PaymentOptions
-          navigation={navigation}
-          cart={cart}
-          errors={errors}
-          onPaymentChange={handlePaymethodChange}
-          onNavigationRedirect={onNavigationRedirect}
-          paySelected={paymethodSelected}
-          handlerClickPlaceOrder={handlerClickPlaceOrder}
-          placing={placing}
-
-          errorCash={errorCash}
-          isDisabled={cart?.status === 2}
-          businessId={businessDetails?.business?.id}
-          isLoading={businessDetails.loading}
-          paymethods={businessDetails?.business?.paymethods}
-          setErrorCash={setErrorCash}
-        />
-      )}
+      <PaymentOptions
+        navigation={navigation}
+        cart={cart}
+        errors={errors}
+        customerName={customerName}
+        onPaymentChange={handlePaymethodChange}
+        onNavigationRedirect={onNavigationRedirect}
+        paySelected={paymethodSelected}
+        handlerClickPlaceOrder={handlerClickPlaceOrder}
+        placing={placing}
+        errorCash={errorCash}
+        isDisabled={cart?.status === 2}
+        businessId={businessDetails?.business?.id}
+        isLoading={cartState.loading || businessDetails.loading}
+        paymethods={businessDetails?.business?.paymethods}
+        setErrorCash={setErrorCash}
+      />
     </>
   )
 }
@@ -107,7 +125,7 @@ export const Checkout = (props: any) => {
             loading: false,
             cart: result
           })
-        } catch (error) {
+        } catch (error: any) {
           showToast(ToastType.Error, error?.toString() || error.message)
         }
       } else {
@@ -119,7 +137,7 @@ export const Checkout = (props: any) => {
           error: cart ? null : result
         })
       }
-    } catch (e) {
+    } catch (e: any) {
       setCartState({
         ...cartState,
         loading: false,

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

@@ -113,12 +113,6 @@ const CustomerName = (props: Props): React.ReactElement => {
             style={{ bottom: 20 }}
           >
             {t('WHATS_YOUR_NAME', "What's your name?")}
-            {/* <OText
-                  size={orientationState?.dimensions?.width * 0.05}
-                  weight={'700'}
-                >
-                  {`${t('ORDER_BE_FOR', 'order be for?')}`}
-                </OText> */}
           </OText>
           <Controller
             control={control}

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

@@ -53,5 +53,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.21,
     shadowRadius: 5,
+    elevation: 16
   }
 })

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

@@ -19,12 +19,12 @@ export const WrapperFloatBtn = styled.View`
   top: 10%;
   right: ${(props: any) => props.outside ? 11 : 58}%;
   z-index: 20002;
-  elevation: 11;
+  elevation: 17;
 `;
 
 export const IconControl = styled.TouchableOpacity`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px;
   border-radius: 8px;
-  elevation: 11;
+  elevation: 17;
 `;

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

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
-import { ImageStyle, TextStyle, View, Platform } from 'react-native'
-import { OrderTypeSelector } from '../OrderTypeSelector'
-import { useConfig, useLanguage } from 'ordering-components/native'
+import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
+import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -54,38 +54,39 @@ interface Props {
   paddingTop?: number,
   includeOrderTypeSelector?: boolean,
   imgLeftStyle?: ImageStyle
+  onClickTypes?: any
 }
 
 const NavBar = (props: Props) => {
   const theme = useTheme();
-  const [{ configs }] = useConfig();
+  const [orderState] = useOrder()
   const [, t] = useLanguage();
-  const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
+
+  const selectedOrderType = orderState?.options?.type;
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -121,11 +122,19 @@ const NavBar = (props: Props) => {
           }}
         >
           <OText style={{ paddingRight: 5 }}>{t('THIS_ORDER_IS_TO', 'This order is to')}</OText>
-          <OrderTypeSelector configTypes={configTypes} />
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={props.onClickTypes}
+          >
+            <OText color={theme.colors.primary}>
+              {selectedOrderType === 2 && t('TAKE_OUT', 'Take out')}
+              {selectedOrderType === 3 && t('EAT_IN', 'Eat in')}
+            </OText>
+          </TouchableOpacity>
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

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

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

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

@@ -395,9 +395,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         </View>
       </OSTable>
 
-      {order?.products?.length && (
-        <OSTable>
-          <View>
+      {order?.products?.length > 0 && (
+        <>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between'
+            }}
+          >
             <OText
               weight="bold"
               mBottom={15}
@@ -405,29 +410,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               {`${order?.products?.length} ${t('ITEMS', 'items')}`}
             </OText>
 
-            <GridContainer style={{ maxWidth: orientationState?.dimensions?.width * 0.6 }}>
-              {order?.products.map((product: Product, i: number) => (
-                <OImage
-                  key={product?.id || i}
-                  source={{ uri: product?.images || '' }}
-                  resizeMode="cover"
-                  height={80}
-                  width={80}
-                  borderRadius={8}
-                  style={{ marginEnd: 10, marginBottom: 10 }}
-                />
-              ))}
-            </GridContainer>
+            <OText
+              color={theme.colors.primary}
+              weight="bold"
+            >
+              {parsePrice((order?.summary?.total || order?.total) - (order?.summary?.discount || order?.discount))}
+            </OText>
           </View>
-
-          <OText
-            color={theme.colors.primary}
-            weight="bold"
-            mRight={30}
-          >
-            {parsePrice((order?.summary?.total || order?.total) - (order?.summary?.discount || order?.discount))}
-          </OText>
-        </OSTable>
+          <OSTable>
+          <GridContainer style={{ maxWidth: orientationState?.dimensions?.width * 0.6 }}>
+            {order?.products.map((product: Product, i: number) => (
+              <OImage
+                key={product?.id || i}
+                source={{ uri: product?.images || '' }}
+                resizeMode="cover"
+                height={80}
+                width={80}
+                borderRadius={8}
+                style={{ marginEnd: 10, marginBottom: 10 }}
+              />
+            ))}
+          </GridContainer>
+          </OSTable>
+        </>
       )}
 
       <OrderBill>
@@ -520,7 +525,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <OSRow>
                 <OText>
                   {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                 </OText>
               </OSRow>
               <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
@@ -593,7 +598,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     <>
       <Spinner visible={!order || Object.keys(order).length === 0} />
 
-      {order && Object.keys(order).length > 0 && (
+      {!!order && Object.keys(order).length > 0 && (
         <>
           <Container>
             <NavBar

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -59,7 +57,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack })}
+          onActionLeft={goBack}
           btnStyle={{ paddingLeft: 0 }}
         />
 
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -107,7 +107,7 @@ const PaymentOptionsUI = (props: any) => {
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
-      handlerClickPlaceOrder && handlerClickPlaceOrder();
+      handlerClickPlaceOrder && handlerClickPlaceOrder(null, { on_behalf_of: props.customerName });
       return;
     }
     let stringError = '';
@@ -189,67 +189,69 @@ const PaymentOptionsUI = (props: any) => {
 
   return (
     <>
-      <Spinner visible={isLoading || placing} />
+      <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-
-        <View
-          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{ justifyContent: 'space-between' }}>
-            {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
-              </View>
-            )}
+          <>
+            <NavBar
+              title={t('PAYMENT_METHODS', 'Payment methods')}
+              onActionLeft={goToBack}
+              btnStyle={{ paddingLeft: 0 }}
+            />
 
             <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+              <OText size={orientationState?.dimensions?.width * 0.048}>
+                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.048}
+                  weight={'700'}>
+                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+                </OText>
+              </OText>
+            </View>
 
-            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+            <GridContainer style={{ justifyContent: 'space-between' }}>
+              {propsOfItems.CARD_ON_DELIVERY_ID && (
+                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
+                </View>
+              )}
 
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
+
+              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
 
-            {propsOfItems.STRIPE && (
-              <OptionCard {...propsOfItems?.STRIPE} />
-            )}
-          </GridContainer>
+              {propsOfItems.STRIPE && (
+                <OptionCard {...propsOfItems?.STRIPE} />
+              )}
+            </GridContainer>
+          </>
         )}
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal

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

@@ -6,8 +6,7 @@ import {
   StyleSheet,
   Animated,
   ScrollView,
-  Platform,
-  ImageBackground
+  ImageBackground,
 } from 'react-native'
 import {
   ProductForm as ProductOptions,
@@ -17,7 +16,6 @@ import {
   useUtils
 } from 'ordering-components/native'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import Spinner from 'react-native-loading-spinner-overlay'
 import { useTheme } from 'styled-components/native'
 
 import { ProductIngredient } from '../ProductIngredient'
@@ -32,12 +30,11 @@ import {
   ProductComment,
   ProductActions
 } from './styles'
-import { OButton, OImage, OInput, OText } from '../shared'
+import { OButton, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
-import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 
 export const ProductOptionsUI = (props: any) => {
   const {
@@ -56,7 +53,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout,
     isDrawer
   } = props;
 
@@ -66,7 +62,6 @@ export const ProductOptionsUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ auth }] = useSession();
   const [orientationState] = useDeviceOrientation();
-  const [, { showCartBottomSheet }] = useCartBottomSheet();
 
   const { product, loading, error } = productObject;
 
@@ -87,6 +82,8 @@ export const ProductOptionsUI = (props: any) => {
   const handleSaveProduct = () => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
+      props.onProductStateChange &&
+      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
       handleSave && handleSave()
       return
     }
@@ -446,7 +443,7 @@ export const ProductOptionsUI = (props: any) => {
                     </WrapperIngredients>
                   </View>
                 )}
-                {product?.extras.map((extra: any) => extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+                {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}>
@@ -503,12 +500,14 @@ export const ProductOptionsUI = (props: any) => {
             </WrapContent>
           </View>
         )}
+
         {error && error.length > 0 && (
           <NotFoundSource
             content={error[0]?.message || error[0]}
           />
         )}
       </ScrollView>
+
       {!loading && !error && product && (
         <ProductActions>
           {productCart && !isSoldOut && maxProductQuantity > 0 && (

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

@@ -103,7 +103,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   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 `${quantity} x ${name} ${pos} ${price}`
   }
 
   /*useEffect(() => {
@@ -210,7 +210,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 ? `+${parsePrice(suboption.price)}` : parsePrice(suboption.price)
                           })}
                         </OText>
                       </ProductSubOption>

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

@@ -32,7 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
-          style={{ width: '80%' }}
+          style={{ maxWidth: '80%' }}
         >
           {option.name}
         </OText>

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

@@ -144,13 +144,15 @@ export const ProductOptionSubOptionUI = (props: any) => {
             </PositionControl>
           )
         }
+        {price > 0 && (
           <OText
             color="#909BA9"
             size={16}
             weight="bold"
           >
-            + {parsePrice(price)}
+          + {parsePrice(price)}
           </OText>
+        )}
       </RightSide>
     </Container>
   )