ordering-ui-react-native 0.14.0 → 0.14.4

package/package.json

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

package/src/components/AppleLogin/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import { useConfig, useApi, useLanguage } from 'ordering-components/native'
@@ -22,7 +22,7 @@ export const AppleLogin = (props: AppleLoginParams) => {
   const [ordering] = useApi()
   const [, t] = useLanguage()
   const theme = useTheme()
-
+  const [errors, setError] = useState<any>({type: '', message: ''})
   const buttonText = t('LOGIN_WITH_APPLE', 'Login with Apple');
 
   const onAppleButtonPress = async () => {
@@ -45,16 +45,16 @@ export const AppleLogin = (props: AppleLoginParams) => {
           identityToken,
           authorizationCode,
         } = appleAuthRequestResponse
-
-        if (identityToken && authorizationCode) {
+        if (identityToken) {
           console.log('auth code: ', authorizationCode)
-          handleLoginApple(authorizationCode)
+          handleLoginApple(identityToken)
           console.warn(`Apple Authentication Completed, ${user}, ${email}`);
         } else {
           handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
         }
 
       } catch (error: any) {
+        setError({ type: 'FROM_APPLE', message: error?.message })
         handleErrors && handleErrors(error.message)
       }
     } else {
@@ -106,6 +106,7 @@ export const AppleLogin = (props: AppleLoginParams) => {
         handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
       }
     } catch (error: any) {
+      setError({ type: 'FROM_API', message: error?.message })
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(error?.message)
     }
@@ -120,6 +121,11 @@ export const AppleLogin = (props: AppleLoginParams) => {
 
   return (
     <Container>
+      {!!errors?.message && !!errors?.type && (
+        <OText>
+          {errors?.type} {errors?.message}
+        </OText>
+      )}
       <AppleButton
         onPress={onAppleButtonPress}
       >

package/src/components/Checkout/index.tsx

@@ -55,7 +55,6 @@ import { ActivityIndicator } from 'react-native-paper';
 import WebView from 'react-native-webview';
 import Icon from 'react-native-vector-icons/Feather';
 import { OrderCreating } from '../OrderCreating';
-import { Item } from '../../../themes/uber-eats/src/components/UpsellingProducts/styles';
 
 const mapConfigs = {
   mapZoom: 16,

package/src/components/VerifyPhone/index.tsx

@@ -196,7 +196,7 @@ export const VerifyPhone = (props: any) => {
       <WrappCountdown>
         <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
           <OText
-            size={30}
+            size={28}
             color={timer === '00:00' ? theme.colors.error: theme.colors.success}
           >
             {timer}

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, KeyboardAvoidingView } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
-
+import Picker from 'react-native-country-picker-modal';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -22,7 +23,6 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
-import { OrderTypeSelector } from '../OrderTypeSelector'
 
 import {
 	ChContainer,
@@ -35,7 +35,9 @@ import {
 	ChErrors,
 	ChBusinessDetails,
 	ChUserDetails,
-	ChCart
+	ChCart,
+	DeliveryOptionsContainer,
+	DeliveryOptionItem
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -74,9 +76,9 @@ const CheckoutUI = (props: any) => {
 		handlePaymethodChange,
 		handlerClickPlaceOrder,
 		onNavigationRedirect,
-		businessLogo,
-		businessName,
-		cartTotal
+		deliveryOptionSelected,
+		instructionsOptions,
+		handleChangeDeliveryOption,
 	} = props
 
 	const theme = useTheme();
@@ -91,9 +93,18 @@ const CheckoutUI = (props: any) => {
 			justifyContent: 'flex-start',
 			paddingLeft: 0,
 		},
+		paddSection: {
+			padding: 20
+		},
 		pagePadding: {
 			paddingLeft: 40,
 			paddingRight: 40
+		},
+		icon: {
+			top: 15,
+			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
+			position: 'absolute',
+			fontSize: 20
 		}
 	})
 
@@ -109,6 +120,7 @@ const CheckoutUI = (props: any) => {
 	const [userErrors, setUserErrors] = useState<any>([]);
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
+	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -118,6 +130,12 @@ const CheckoutUI = (props: any) => {
 
 	const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
+	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
+		return {
+			value: option?.id, key: option?.id, label: option?.name
+		}
+	})
+
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -131,6 +149,11 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const changeDeliveryOption = (option: any) => {
+		handleChangeDeliveryOption(option)
+		setIsDeliveryOptionModalVisible(false)
+	}
+
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
@@ -307,7 +330,56 @@ const CheckoutUI = (props: any) => {
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
 					</ChSection>
 
-
+					{!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+						<DeliveryOptionsContainer>
+							<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+							<View
+								style={{
+									backgroundColor: theme.colors.inputDisabled,
+									borderRadius: 7.5,
+									marginBottom: 20,
+									flex: 1
+								}}>
+								<Picker
+									countryCode={undefined}
+									visible={isDeliveryOptionModalVisible}
+									onClose={() => setIsDeliveryOptionModalVisible(false)}
+									withCountryNameButton
+									renderFlagButton={() => (
+										<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
+											<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
+												<OText
+													size={14}
+												>
+													{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+												</OText>
+												<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
+											</DeliveryOptionItem>
+										</TouchableOpacity>
+									)}
+									flatListProps={{
+										keyExtractor: (item: any) => item.value,
+										data: deliveryOptions || [],
+										renderItem: ({ item }: any) => (
+											<TouchableOpacity
+												onPress={() => changeDeliveryOption(item.value)}
+												disabled={
+													deliveryOptionSelected === item.value
+												}
+											>
+												<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
+													<OText>
+														{item.label}
+													</OText>
+												</DeliveryOptionItem>
+											</TouchableOpacity>
+										)
+									}}
+								/>
+							</View>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</DeliveryOptionsContainer>
+					)}
 
 					{!cartState.loading && (cart?.status === 2 || cart?.status === 4) && (
 						<ChSection style={{ paddingBottom: 20 }}>
@@ -429,27 +501,27 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-        <ChSection>
-          <ChCart>
-            {cartsWithProducts && cart?.products?.length === 0 ? (
-              <NotFoundSource
-                content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
-                btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
-              />
-            ) : (
-              <>
-                <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-                  {t('ORDER_SUMMARY', 'Order Summary')}
-                </OText>
-                <OrderSummary
-                  cart={cart}
-                  isCartPending={cart?.status === 2}
-                />
-              </>
-            )}
-          </ChCart>
-        </ChSection>
-      )}
+						<ChSection>
+							<ChCart>
+								{cartsWithProducts && cart?.products?.length === 0 ? (
+									<NotFoundSource
+										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
+										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+									/>
+								) : (
+									<>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
+											{t('ORDER_SUMMARY', 'Order Summary')}
+										</OText>
+										<OrderSummary
+											cart={cart}
+											isCartPending={cart?.status === 2}
+										/>
+									</>
+								)}
+							</ChCart>
+						</ChSection>
+					)}
 
 					{!cartState.loading && cart && (
 						<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>

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

@@ -87,3 +87,16 @@ export const ChErrors = styled.View`
   align-items: center;
   margin-bottom: 20px;
 `
+
+export const DeliveryOptionsContainer = styled.View`
+  flex: 1;
+  margin-top: 10px;
+`
+
+export const DeliveryOptionItem = styled.View`
+  padding: 15px;
+  justify-content: ${(props : any) => props.center ? 'center' : 'space-between'};
+  align-items: center;
+  flex-direction: row;
+  background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
+`; 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { AccessToken, LoginManager } from 'react-native-fbsdk';
+import { AccessToken, LoginManager } from 'react-native-fbsdk-next';
 import { useLanguage, useSession, useApi } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Icon from 'react-native-vector-icons/FontAwesome5';

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

@@ -597,6 +597,22 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </InfoBlock>
               </Customer>
+              {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+                <View style={{ marginTop: 15 }}>
+                  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
+                  </OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
+                </View>
+              )}
+              {order?.comment && (
+                <View style={{ marginTop: 15 }}>
+                  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {t('COMMENT', 'Comment')}
+                  </OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.comment}</OText>
+                </View>
+              )}
               {order?.driver && (
                 <>
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
@@ -810,14 +826,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
-              {order?.comment && (
-                <Table>
-                  <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
-                  <OText style={{ maxWidth: '70%' }}>
-                    {order?.comment}
-                  </OText>
-                </Table>
-              )}
             </OrderBill>
           </OrderContent>
         </>

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

@@ -109,7 +109,7 @@ export const OrderBill = styled.View`
 export const Total = styled.View`
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.border};
-  padding-vertical: 10px
+  padding-vertical: 10px;
 `
 
 export const Map = styled.View`

package/themes/uber-eats/src/components/ProductForm/index.tsx

@@ -85,7 +85,7 @@ export const ProductOptionsUI = (props: any) => {
     comment: {
       borderBottomWidth: 1,
       borderRadius: 0,
-      borderBottomColor: '#DBDCDB',
+      borderColor: theme.colors.lightGray,
       height: 100,
       alignItems: 'flex-start',
       marginHorizontal: 20