ordering-ui-react-native 0.21.28 → 0.21.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.28",
+  "version": "0.21.30",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -275,12 +275,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {order?.payment_events?.length > 0 && (
-              <View>
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
                 <OText size={13}>
-                  <OText size={13} weight='bold'>
-                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
-                  </OText>
                   {order?.payment_events?.map((event: any, idx: number) => {
                     return event?.wallet_event
                       ? idx < order?.payment_events?.length - 1
@@ -291,8 +291,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
-              </View>
-            )}
+              ) : (
+                <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
+              )}
+            </OText>
           </>
         )}
       </OrderHeader>

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
+import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
@@ -48,7 +49,6 @@ import {
 	CartHeader
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-
 import { FloatingButton } from '../FloatingButton';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
@@ -162,9 +162,10 @@ const CheckoutUI = (props: any) => {
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
+	const [paymethodClicked, setPaymethodClicked] = useState<any>(null)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
 	const cardsMethods = ['credomatic']
-  	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const isGiftCardCart = !cart?.business_id
@@ -239,7 +240,7 @@ const CheckoutUI = (props: any) => {
 			token: user?.session?.access_token
 		})
 		openModal?.isGuest && handlePlaceOrderAsGuest()
-    	setOpenModal({ ...openModal, signup: false, isGuest: false })
+		setOpenModal({ ...openModal, signup: false, isGuest: false })
 	}
 
 	const handleSuccessLogin = (user: any) => {
@@ -254,7 +255,7 @@ const CheckoutUI = (props: any) => {
 
 		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
 			vibrateApp()
-			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment)
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment, NativeStripeSdk?.dismissPlatformPay)
 			return
 		}
 		if (requiredFields?.length) {
@@ -742,6 +743,10 @@ const CheckoutUI = (props: any) => {
 									setPlaceByMethodPay={setPlaceByMethodPay}
 									cardList={cardList}
 									setCardList={setCardList}
+									requiredFields={requiredFields}
+									openUserModal={setIsOpen}
+									paymethodClicked={paymethodClicked}
+									setPaymethodClicked={setPaymethodClicked}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -926,7 +931,14 @@ const CheckoutUI = (props: any) => {
 								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {
 									setIsOpen(false)
-									handlePlaceOrder(null, true)
+									if (paymethodClicked) {
+										setPaymethodClicked({
+											...paymethodClicked,
+											confirmed: true
+										})
+									} else {
+										handlePlaceOrder(null, true)
+									}
 								}}
 								setIsOpen={setIsOpen}
 							/>

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

@@ -42,7 +42,7 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
-import { verifyDecimals, getOrderStatus } from '../../utils';
+import { verifyDecimals, getOrderStatus, getOrderStatuPickUp } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
@@ -124,6 +124,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const placeSpotTypes = [3, 4, 5]
   const directionTypes = [2, 3, 4, 5]
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
+  const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
@@ -345,6 +346,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [props?.order?.error, props?.order?.loading])
 
+  const progressBarObjt = order?.delivery_type && props.order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <OrderDetailsContainer
       keyboardShouldPersistTaps="handled"
@@ -480,7 +483,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         <LinearGradient
                           start={{ x: 0.0, y: 0.0 }}
                           end={{
-                            x: getOrderStatus(order?.status)?.percentage || 0,
+                            x: progressBarObjt(order?.status)?.percentage || 0,
                             y: 0,
                           }}
                           locations={[0.9999, 0.9999]}
@@ -493,7 +496,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         lineHeight={24}
                         weight={'600'}
                         color={theme.colors.textNormal}>
-                        {getOrderStatus(order?.status)?.value}
+                        {progressBarObjt(order?.status)?.value}
                       </OText>
                     </>
                   )}
@@ -791,25 +794,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   parentStyle={{ marginTop: 29, marginEnd: 15 }}
                   onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
                 />
-                {(
-                  parseInt(order?.status) === 1 ||
-                  parseInt(order?.status) === 2 ||
-                  parseInt(order?.status) === 5 ||
-                  parseInt(order?.status) === 6 ||
-                  parseInt(order?.status) === 10 ||
-                  parseInt(order?.status) === 11 ||
-                  parseInt(order?.status) === 12
-                ) && (
-                    <OButton
-                      text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
-                      textStyle={{ fontSize: 14, color: theme.colors.primary }}
-                      imgRightSrc={null}
-                      borderColor='transparent'
-                      bgColor={theme.colors.primary + 10}
-                      style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
-                      onClick={() => handleReorder && handleReorder(order.id)}
-                    />
-                  )}
+                {(reorderStatus?.includes(parseInt(order?.status)) && order?.cart) && (
+                  <OButton
+                    text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
+                    textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                    imgRightSrc={null}
+                    borderColor='transparent'
+                    bgColor={theme.colors.primary + 10}
+                    style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
+                    onClick={() => handleReorder && handleReorder(order.id)}
+                  />
+                )}
               </OrderAction>
             </HeaderInfo>
             <OrderProducts>

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

@@ -22,7 +22,7 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -110,6 +110,8 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
+  const progressBarObjt = lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
@@ -162,10 +164,10 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
+                <ProgressBar style={{ width: progressBarObjt(lastOrder.status)?.percentage ? `${(progressBarObjt(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
               </ProgressContentWrapper>
               <ProgressTextWrapper>
-                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
                   <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>

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

@@ -69,7 +69,11 @@ const PaymentOptionsUI = (props: any) => {
 		methodPaySupported,
 		setPlaceByMethodPay,
 		setCardList,
-		onPaymentChange
+		onPaymentChange,
+		requiredFields,
+		openUserModal,
+		paymethodClicked,
+		setPaymethodClicked
 	} = props
 
 	const theme = useTheme();
@@ -115,6 +119,14 @@ const PaymentOptionsUI = (props: any) => {
 
 	const handlePaymentMethodClick = (paymethod: any) => {
 		if (cart?.balance > 0) {
+			if (paymethod?.gateway === 'paypal' && requiredFields.length > 0) {
+				openUserModal && openUserModal(true)
+				setPaymethodClicked({
+					confirmed: false,
+					paymethod
+				})
+				return
+			}
 			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
 			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
 				handlePaymentMethodClickCustom(paymethod)
@@ -159,7 +171,14 @@ const PaymentOptionsUI = (props: any) => {
 			handlePlaceOrder(confirmApplePayPayment)
 		}
 	}, [paymethodData, paymethodSelected])
-	
+
+	useEffect(() => {
+		if (paymethodClicked?.confirmed) {
+			handlePaymentMethodClickCustom(paymethodClicked?.paymethod)
+		}
+	}, [paymethodClicked?.confirmed])
+
+
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<>

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

@@ -929,7 +929,7 @@ export const ProductOptionsUI = (props: any) => {
 																				balance={balance}
 																				option={option}
 																				suboption={suboption}
-																				image={option.image}
+																				image={suboption.image}
 																				state={currentState}
 																				disabled={
 																					isSoldOut ||

package/themes/original/src/utils/index.tsx

@@ -575,6 +575,119 @@ export const getOrderStatus = (s: string) => {
   return objectStatus && objectStatus;
 }
 
+export const getOrderStatuPickUp = (s: any) => {
+  const status = parseInt(s);
+  const orderStatus = [
+    {
+      key: 0,
+      value: t('PENDING', 'Pending'),
+      slug: 'PENDING',
+      percentage: 0.1,
+      image: theme.images.order.status0,
+    },
+    {
+      key: 1,
+      value: t('COMPLETED', 'Completed'),
+      slug: 'COMPLETED',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 2,
+      value: t('REJECTED', 'Rejected'),
+      slug: 'REJECTED',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 4,
+      value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+      slug: 'PREPARATION_COMPLETED',
+      percentage: 0.5,
+      image: theme.images.order.status4,
+    },
+    {
+      key: 5,
+      value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
+      slug: 'REJECTED_BY_BUSINESS',
+      percentage: 0,
+      image: theme.images.order.status5,
+    },
+    {
+      key: 7,
+      value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+      slug: 'ACCEPTED_BY_BUSINESS',
+      percentage: 0.3,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 13,
+      value: t('PREORDER', 'PreOrder'),
+      slug: 'PREORDER',
+      percentage: 0,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 14,
+      value: t('ORDER_NOT_READY', 'Order not ready'),
+      slug: 'ORDER_NOT_READY',
+      percentage: 0.3,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 15,
+      value: t(
+        'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+        'Order picked up completed by customer',
+      ),
+      slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 16,
+      value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+      slug: 'CANCELLED_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 17,
+      value: t(
+        'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+        'Order not picked up by customer',
+      ),
+      slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 20,
+      value: t(
+        'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+        'Customer almost arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+      percentage: 0.7,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 21,
+      value: t(
+        'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+        'Customer arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+      percentage: 0.9,
+      image: theme.images.order.status7,
+    }
+  ];
+
+  const objectStatus = orderStatus.find((o) => o.key === status);
+
+  return objectStatus && objectStatus;
+}
+
 /**
  * Function to get brightness of color.
  */

package/src/navigators/BottomNavigator.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-import { View, Platform, PlatformIOSStatic } from 'react-native'
-import { useOrder } from 'ordering-components/native'
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import styled from 'styled-components/native'
-
-import { OText } from '../components/shared'
-import BusinessList from '../pages/BusinessesListing'
-import MyOrders from '../pages/MyOrders'
-import CartList from '../pages/CartList'
-import Profile from '../pages/Profile'
-import { useTheme } from 'styled-components/native'
-
-const CartsLenght = styled.View`
-  width: 25px;
-  height: 25px;
-  background-color: ${(props: any) => props.theme.colors.primary};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  right: 0;
-`
-
-const Tab = createMaterialBottomTabNavigator();
-
-const BottomNavigator = () => {
-  const theme = useTheme()
-  const [{ carts }] = useOrder()
-  const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || []
-  const isIos = Platform.OS === 'ios'
-  const platformIOS = Platform as PlatformIOSStatic
-  const androidStyles = isIos
-    ? platformIOS.isPad
-      ? { paddingBottom: 30 }
-      : {}
-    : {height: 40, position: 'relative', bottom: 15}
-  return (
-    <Tab.Navigator
-      initialRouteName="BusinessList"
-      activeColor={theme.colors.primary}
-      barStyle={{ backgroundColor: theme.colors.white, ...androidStyles }}
-      labeled={false}
-      inactiveColor={theme.colors.disabled}
-    >
-      <Tab.Screen
-        name="BusinessList"
-        component={BusinessList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialCommunityIcon name='home' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="MyOrders"
-        component={MyOrders}
-        options={
-          {
-            tabBarIcon:
-              ({ color }: any) => (
-                <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0 }}>
-                  <MaterialIcon name='format-list-bulleted' size={46} color={color} />
-                </View>
-              ),
-          }}
-      />
-      <Tab.Screen
-        name="Cart"
-        component={CartList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{
-                  width: 50,
-                  height: 50,
-                  justifyContent: !isIos ? 'flex-start' : 'space-evenly',
-                  position: 'relative',
-                  bottom: !isIos ? 10 : 0
-                }}
-              >
-                <MaterialIcon name='shopping-basket' size={46} color={color} />
-                {cartsList.length > 0 && (
-                  <CartsLenght style={{ borderRadius: 100 / 2 }}>
-                    <OText
-                      color={theme.colors.white}
-                    >
-                      {cartsList.length}
-                    </OText>
-                  </CartsLenght>
-                )}
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="Profile"
-        component={Profile}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialIcon name='person' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
-
-export default BottomNavigator

package/src/navigators/CheckoutNavigator.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { createStackNavigator } from "@react-navigation/stack";
-
-import AddressList from '../pages/AddressList'
-import AddressForm from '../pages/AddressForm'
-import CartList from '../pages/CartList'
-import CheckoutPage from '../pages/Checkout';
-import BusinessProductsList from '../pages/BusinessProductsList';
-import MultiCheckout from '../pages/MultiCheckout';
-
-const Stack = createStackNavigator();
-
-const CheckoutNavigator = (props: any) => {
-  const {
-    navigation,
-    route
-  } = props;
-
-  const cartUuid = route?.params?.cartUuid
-
-  const checkoutProps = {
-    navigation,
-    route,
-    cartUuid: route?.params?.cartUuid
-  }
-
-  return (
-    <Stack.Navigator>
-      {!cartUuid && (
-        <Stack.Screen
-          name="Cart"
-          component={CartList}
-          options={{ headerShown: false }}
-        />
-      )}
-      <Stack.Screen
-        name="CheckoutPage"
-        children={() => <CheckoutPage {...checkoutProps} />}
-        options={{ headerShown: false }}
-        />
-      <Stack.Screen
-        name="Business"
-        component={BusinessProductsList}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="AddressList"
-        component={AddressList}
-        options={{ headerShown: false }}
-        initialParams={{isFromCheckout: true}}
-      />
-      <Stack.Screen
-        name="AddressForm"
-        component={AddressForm}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="MultiCheckout"
-        children={() => <MultiCheckout {...checkoutProps} />}
-        options={{ headerShown: false }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-export default CheckoutNavigator;