ordering-ui-react-native 0.12.88 → 0.12.90

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { View, StyleSheet, Platform, I18nManager, ScrollView } from 'react-native';
+import { View, StyleSheet, Platform, I18nManager, ScrollView, TouchableOpacity } 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,
@@ -40,7 +42,9 @@ import {
   ChErrors,
   ChBusinessDetails,
   ChUserDetails,
-  TextDetails
+  TextDetails,
+  DeliveryOptionsContainer,
+  DeliveryOptionItem
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -51,6 +55,7 @@ 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,
@@ -84,7 +89,11 @@ const CheckoutUI = (props: any) => {
     businessLogo,
     businessName,
     cartTotal,
-    currency
+    currency,
+    deliveryOptionSelected,
+    instructionsOptions,
+    handleChangeDeliveryOption,
+
   } = props
 
   const theme = useTheme();
@@ -104,6 +113,12 @@ const CheckoutUI = (props: any) => {
     },
     paddSectionH: {
       paddingHorizontal: 20
+    },
+    icon: {
+      top: 15,
+      right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
+      position: 'absolute',
+      fontSize: 20
     }
   })
 
@@ -127,7 +142,7 @@ const CheckoutUI = (props: any) => {
   const [prog, setProg] = useState(true);
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [cardData, setCardData] = useState(null)
-
+  const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -136,6 +151,12 @@ const CheckoutUI = (props: any) => {
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   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 => {
+    return {
+      value: option?.id, key: option?.id, label: option?.name
+    }
+  })
+
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
       setOpenOrderCreating(true)
@@ -221,6 +242,11 @@ const CheckoutUI = (props: any) => {
     setShowGateway({ open: false, closedByUser: true })
   }
 
+  const changeDeliveryOption = (option : any) => {
+    handleChangeDeliveryOption(option)
+    setIsDeliveryOptionModalVisible(false)
+  }
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -428,6 +454,56 @@ const CheckoutUI = (props: any) => {
             </ChBusinessDetails>
           </ChSection>
 
+          {!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+            <DeliveryOptionsContainer style={style.paddSection}>
+              <OText size={20}>{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={16}
+                        >
+                          {deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+                        </OText>
+                        <MaterialIcons name='keyboard-arrow-down' style={style.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>
+            </DeliveryOptionsContainer>
+          )}
+
           {!cartState.loading &&
             cart &&
             cart?.valid &&

package/src/components/Checkout/styles.tsx

@@ -97,3 +97,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/src/components/OrderDetails/index.tsx

@@ -376,6 +376,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={{ textAlign: 'left' }}>{order?.customer?.address}</OText>
                 </InfoBlock>
               </Customer>
+                {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+                  <View>
+                    <OText size={18} style={{ textAlign: 'left' }}>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</OText>
+                    <OText style={{ textAlign: 'left' }}>{order?.delivery_option?.name}</OText>
+                  </View>
+                )}
+                {order?.comment && (
+                  <View>
+                    <OText size={18} style={{ textAlign: 'left' }} >{t('COMMENT', 'Comment')}</OText>
+                    <OText style={{ textAlign: 'left' }}>{order?.comment}</OText>
+                  </View>
+                )}
               {order?.driver && (
                 <>
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
@@ -490,19 +502,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 ))
               }
               {
-                order?.fees?.length > 0 && order?.fees?.filter((fee : any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
-                    <Table key={fee.id}>
-                      <OSRow>
-                        <OText numberOfLines={1}>
-                          {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                          ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
-                        </OText>
-                        <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
-                          <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
-                        </TouchableOpacity>
-                      </OSRow>
-                      <OText>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
-                    </Table>
+                order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
+                  <Table key={fee.id}>
+                    <OSRow>
+                      <OText numberOfLines={1}>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                        ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
+                      </OText>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </Table>
                 ))
               }
               {order?.summary?.delivery_price > 0 && (
@@ -533,14 +545,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>
-              )}
               {
                 (
                   parseInt(order?.status) === 1 ||

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

@@ -271,6 +271,20 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
+        {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
+          <View style={{marginTop: 10}}>
+            {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+              <OText>
+                {order?.delivery_option?.name}
+              </OText>
+            )}
+            {!!order?.comment && (
+              <OText style={{fontStyle: 'italic', opacity: 0.6, marginBottom: 5}}>
+                {order?.comment}
+              </OText>
+            )}
+          </View>
+        )}
         {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
           <OButton
             style={styles.btnReview}
@@ -440,14 +454,6 @@ export const OrderContentComponent = (props: OrderContent) => {
               {parsePrice(order?.summary?.total ?? 0)}
             </OText>
           </Table>
-          {!!order?.comment && (
-            <Table>
-              <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
-              <OText style={{ maxWidth: '70%' }}>
-                {order?.comment}
-              </OText>
-            </Table>
-          )}
         </Total>
       </OrderBill >
       <OModal

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

@@ -95,6 +95,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
   const [openModalForDriver, setOpenModalForDriver] = useState(false);
+  const [isReviewed, setIsReviewed] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({
     business: false,
     driver: false,
@@ -339,6 +340,24 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  const handleClickOrderReview = (order: any) => {
+    navigation.navigate(
+      'ReviewOrder',
+      {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        },
+        setIsReviewed
+      }
+    )
+  }
+
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
     return () => {
@@ -382,6 +401,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    console.log('order: ', order)
+  }, [order]);
+
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps="handled">
       <Spinner visible={!order || Object.keys(order).length === 0} />
@@ -409,19 +432,28 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     ? parseDate(order?.delivery_datetime_utc)
                     : parseDate(order?.delivery_datetime, { utc: false })}
                 </OText>
-                <TouchableOpacity
-                  activeOpacity={0.7}
-                  style={{ marginTop: 6 }}
-                  onPress={() => { }}>
-                  <OText
-                    size={10}
-                    lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ textDecorationLine: 'underline' }}>
-                    {t('REVIEW_ORDER', 'Review order')}
-                  </OText>
-                </TouchableOpacity>
+                {
+                  (
+                    parseInt(order?.status) === 1 ||
+                    parseInt(order?.status) === 11 ||
+                    parseInt(order?.status) === 15
+                  ) && !order.review && !isReviewed && (
+                    <TouchableOpacity
+                      activeOpacity={0.7}
+                      style={{ marginTop: 6 }}
+                      onPress={() => handleClickOrderReview(order)}
 
+                    >
+                      <OText
+                        size={10}
+                        lineHeight={15}
+                        color={theme.colors.textSecondary}
+                        style={{ textDecorationLine: 'underline' }}
+                      >
+                        {t('REVIEW_YOUR_ORDER', 'Review your order')}
+                      </OText>
+                    </TouchableOpacity>
+                  )}
                 <StaturBar>
                   <LinearGradient
                     start={{ x: 0.0, y: 0.0 }}