ordering-ui-react-native 0.15.41 → 0.15.43-release

package/src/components/SignupForm/index.tsx

@@ -115,6 +115,8 @@ const SignupFormUI = (props: SignupParams) => {
   const phoneRef = useRef<any>(null)
   const passwordRef = useRef<any>(null)
 
+  const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+
   const anySocialButtonActivated = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
     (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) ||
     (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
@@ -543,7 +545,7 @@ const SignupFormUI = (props: SignupParams) => {
                       handleSuccessFacebookLogin={handleSuccessFacebook}
                     />
                   )}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
                   <GoogleLogin
                     notificationState={notificationState}
                     webClientId={configs?.google_login_client_id?.value}

package/src/components/SingleProductCard/index.tsx

@@ -10,6 +10,7 @@ import {
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
   const {
@@ -77,10 +78,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       activeOpacity={1}
       onPress={() => onProductClick?.(product)}
     >
-      <OIcon
-        url={optimizeImage(product?.images, 'h_200,c_limit')}
-        style={styles.productStyle}
-      />
+      {product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>

package/src/components/StripeMethodForm/index.tsx

@@ -102,7 +102,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       shippingMethods: [
         {
           amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'DPS',
+          identifier: 'standard',
           label: 'Courier',
           detail: 'Delivery',
           type: 'final',
@@ -125,7 +125,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           last4: paymentMethod.Card.last4
         }
       })
-      onCancel()
     }
   }
 

package/src/components/UpsellingProducts/index.tsx

@@ -37,7 +37,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     imageStyle: {
       width: 120,
       height: 90,
-      resizeMode: 'cover',
+      resizeMode: 'contain',
       borderRadius: 10
     },
     closeUpsellingButton: {

package/src/components/UserProfileForm/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
+  UserFormDetails as UserProfileController,
   useSession,
   useLanguage,
 } from 'ordering-components/native';
@@ -13,6 +14,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
+  OAlert,
   OIcon,
   OText
 } from '../shared';
@@ -20,18 +22,24 @@ import {
   Container,
   Names,
   UserInfoContainer,
-  LanguageContainer
+  LanguageContainer,
+  RemoveAccountContainer
 } from './styles';
 
-export const UserProfileForm = (props: ProfileParams) => {
+export const UserProfileFormUI = (props: ProfileParams) => {
   const {
-    navigation
+    navigation,
+    handleRemoveAccount,
+    removeAccountState
   } = props;
 
   const theme = useTheme();
-  const [{ user }] = useSession();
+  const [{ user }, { logout }] = useSession();
   const [, t] = useLanguage();
 
+  const isAdmin = user?.level === 0
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+
   const styles = StyleSheet.create({
     linkStyle: {
       color: theme.colors.primary,
@@ -44,6 +52,9 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     iconStyle: {
       fontSize: 24
+    },
+    removeAccount: {
+      flexDirection: 'row'
     }
   });
 
@@ -78,13 +89,31 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     chevronUp: {
       display: 'none'
-    }
+    },
   })
 
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
 
+  const onRemoveAccount = () => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+      title: t('ACCOUNT_ALERT', 'Account alert'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveAccount && handleRemoveAccount(user?.id)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (removeAccountState?.result === 'OK') {
+      logout()
+    }
+  }, [removeAccountState])
+
   return (
     <Container>
       <View>
@@ -134,7 +163,35 @@ export const UserProfileForm = (props: ProfileParams) => {
           <LanguageSelector pickerStyle={_pickerStyle} />
         </LanguageContainer>
         <LogoutButton />
+        <RemoveAccountContainer>
+          <TouchableOpacity
+            disabled={isAdmin}
+            style={styles.removeAccount}
+            onPress={() => onRemoveAccount()}
+            activeOpacity={0.7}
+          >
+            <OIcon src={theme.images.general.user} width={20} color={theme.colors.black} style={{ marginEnd: 14 }} />
+            <OText size={14} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1, top: 1 }} color={theme.colors.red}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+          </TouchableOpacity>
+        </RemoveAccountContainer>
       </View>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
     </Container>
   );
 };
+
+export const UserProfileForm = (props: any) => {
+  const profileProps = {
+    ...props,
+    UIComponent: UserProfileFormUI,
+    useSessionUser: true
+  };
+  return <UserProfileController {...profileProps} />;
+};

package/src/components/UserProfileForm/styles.tsx

@@ -35,3 +35,11 @@ export const LanguageContainer = styled.View`
   align-items: center;
   margin-bottom: 10px;
 `
+
+export const RemoveAccountContainer = styled.View`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 15px;
+`

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/components/shared/OModal.tsx

@@ -78,7 +78,7 @@ const OModal = (props: Props): React.ReactElement => {
       animationType="slide"
       transparent={isTransparent}
       visible={open}
-      onRequestClose={() => { onClose() }}
+      onRequestClose={() => {  onClose && onClose() }}
       style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
     >
      {isAvoidKeyBoardView ? (

package/src/hooks/useCountdownTimer.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+export function useCountdownTimer (initialCount : number, start : boolean) {
+  const [count, setCount] = useState(initialCount)
+
+  useEffect(() => {
+    if (start) {
+      const secondsLeft = setInterval(() => {
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
+    }
+  }, [start])
+
+  return [
+    count,
+    setCount,
+    /** reset */
+    () => { setCount(initialCount) }
+  ]
+}

package/src/navigators/CheckoutNavigator.tsx

@@ -6,6 +6,7 @@ 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();
 
@@ -53,6 +54,11 @@ const CheckoutNavigator = (props: any) => {
         component={AddressForm}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="MultiCheckout"
+        children={() => <MultiCheckout {...checkoutProps} />}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }

package/src/navigators/HomeNavigator.tsx

@@ -20,8 +20,10 @@ import Help from '../pages/Help'
 import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
+import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
+import MultiOrdersDetails from '../pages/MultiOrdersDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -164,6 +166,16 @@ const HomeNavigator = (e : any) => {
                     component={HelpAccountAndPayment}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="Sessions"
+                    component={Sessions}
+                    options={{ headerShown: false }}
+                  />
+                  <Stack.Screen
+                    name="MultiOrdersDetails"
+                    component={MultiOrdersDetails}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/BusinessProductsList.tsx

@@ -31,6 +31,7 @@ const BusinessProductsList = (props: any) => {
       'open',
       'about',
       'description',
+      'ribbon',
       'address',
       'location',
       'schedule',

package/src/pages/BusinessesListing.tsx

@@ -21,7 +21,7 @@ const BusinessesListing = (props: any) => {
     ...props,
     isSearchByName: true,
     isSearchByDescription: true,
-    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
+    propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
     onBusinessClick: (business: any) => {
       props.navigation.navigate('Business', { store: store || business.slug, header: business.header, logo: business.logo })
     }

package/src/pages/MultiCheckout.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Platform, KeyboardAvoidingView, StyleSheet } from 'react-native'
+import { MultiCheckout as MultiCheckoutController } from '../../themes/original/src/components/MultiCheckout'
+
+const MultiCheckout = (props: any) => {
+  const multiCheckoutProps = {
+    ...props,
+    onPlaceOrderClick: (orderUuids: any) => {
+      props.navigation.navigate('MultiOrdersDetails', { orderUuids: orderUuids, isFromMultiCheckout: true })
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <MultiCheckoutController {...multiCheckoutProps} />
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingBottom: 70,
+  },
+});
+
+export default MultiCheckout

package/src/pages/MultiOrdersDetails.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../themes/original/src/components/MultiOrdersDetails'
+import styled from 'styled-components/native';
+
+const SafeAreaContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+  padding-top: ${Platform.OS === 'ios' ? '0px' : '24px'};
+`;
+
+const MultiOrdersDetails = ({ navigation, route }: any) => {
+  const multiOrdersDetailsProps = {
+    navigation,
+    orderUuids: route.params?.orderUuids || [],
+    isFromMultiCheckout: route.params?.isFromMultiCheckout,
+    onRedirectPage: () => navigation.navigate('BusinessList')
+  }
+
+  return (
+    <SafeAreaContainer>
+      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
+    </SafeAreaContainer>
+  )
+}
+
+export default MultiOrdersDetails

package/src/pages/Sessions.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Container } from '../../themes/original/src/layouts/Container'
+import { Sessions as SessionsController } from '../../themes/original/src/components/Sessions'
+
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const Sessions = (props: Props) => {
+  const sessionsProps = {
+    ...props
+  }
+
+  return (
+    <Container>
+      <SessionsController {...sessionsProps} />
+    </Container>
+  )
+}
+
+export default Sessions

package/src/theme.json

@@ -19,7 +19,6 @@
     "backgroundPage": "#FFFFFF",
     "colorPage": "#333",
     "red": "#D83520",
-    "skyBlue": "#1977F2",
     "white": "#fff",
     "whiteGray": "#f7f6f3",
     "dusk": "rgb(65,77,107)",

package/src/types/index.tsx

@@ -31,6 +31,8 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  handleRemoveAccount?: any,
+  removeAccountState?: any
 }
 
 export interface AddressListParams {
@@ -143,8 +145,9 @@ export interface BusinessControllerParams {
   orderType?: any;
   handleClick?: any;
   isBusinessOpen?: boolean;
-  businessWillCloseSoonMinutes?: number
-  isBusinessClose?: number
+  businessWillCloseSoonMinutes?: number;
+  isBusinessClose?: number;
+  getBusinessOffer: any;
 }
 export interface BusinessProductsListingParams {
   navigation?: any;

package/src/utils/index.tsx

@@ -200,7 +200,7 @@ export const transformCountryCode = (countryCode : number) => {
  */
  export const reviewCommentList = (type: string) => {
   const [, t] = useLanguage()
-
+  // TODO: improve this function
   const reviews: any = {
     order: {
       1: {
@@ -386,3 +386,70 @@ export const transformCountryCode = (countryCode : number) => {
 
   return reviews[type]
 }
+
+/**
+ * function to manage order comment list
+ * @param {string} param0 type of orders to return
+ * @returns object with orders dictionary
+ */
+export const orderCommentList = (value: string) => {
+  const [, t] = useLanguage()
+  const dictionary: any = {
+    reject: 6,
+    forcePickUp: 9,
+    pickupFailed: 10,
+    forceDelivery: 11,
+    deliveryFailed: 12,
+    notReady: 14
+  }
+
+  const status = dictionary[value]
+
+  const messages: any = {
+    6: [// on reject order
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'unavailable_driver',
+      'other'
+    ],
+    9: [// on force pickup status
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
+    ],
+    10: [// on pickup failed by driver
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'store_closed',
+      'unavailable_driver',
+      'other'
+    ],
+    11: [// on force delivery status
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
+    ],
+    12: [// on delivery failed by driver
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'recipient_unavailable',
+      'incorrect_missing_items',
+      'refused_damage',
+      'other'
+    ],
+    14: [// on order not ready
+      'store_recieve_order_late',
+      'store_busy',
+      'other'
+    ]
+  }
+
+  if (!messages[status]) return null
+
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replace(/_/g, ' ')) }))
+
+  return { list }
+}