ordering-ui-react-native 0.17.94-release → 0.17.95-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.94-release",
+  "version": "0.17.95-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -76,6 +76,7 @@
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-date-picker": "^4.2.13",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",

package/src/utils/index.tsx

@@ -47,10 +47,10 @@ export const getTraduction = (key: string, t: any) => {
  */
 export const convertHoursToMinutes = (time: any) => {
   const [, t] = useLanguage()
-  if (!time) return '0min'
+  if (!time) return `0 ${t('TIME_MIN', 'min')}`
   const [hour, minute] = time.split(':')
   const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
-  return `${result}${t('MIN', 'min')}`
+  return `${result}${t('TIME_MIN', 'min')}`
 }
 
 export const getIconCard = (brand: string, size: number) => {

package/themes/business/src/components/MessagesOption/index.tsx

@@ -12,6 +12,7 @@ import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
@@ -163,7 +164,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
       <View style={styles.header}>
         <OText style={styles.title}>{t('MESSAGES', 'Messages')}</OText>
       </View>
-
+      <WebsocketStatus />
       <FiltersTab>
         <TabsContainer width={dimensions.width - 42}>
           {tabs.map((tab: any) => (

package/themes/business/src/components/OrdersListManager/index.tsx

@@ -40,6 +40,7 @@ import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
 import { OrderDetailsBusiness } from '../OrderDetails/Business';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
@@ -314,7 +315,11 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          <View style={{ flex: 1 }}>
+            <WebsocketStatus />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 1 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -330,7 +335,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
             />
           </View>
           <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -209,7 +209,7 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

package/themes/business/src/components/OrdersOption/index.tsx

@@ -11,6 +11,7 @@ import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
@@ -402,6 +403,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
+      <WebsocketStatus />
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
           <View style={{ flex: 0.5 }}>
@@ -914,7 +916,7 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

package/themes/business/src/components/WebsocketStatus/index.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }  
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', 'Connection status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

package/themes/business/src/components/WebsocketStatus/styles.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

package/themes/original/index.tsx

@@ -99,6 +99,7 @@ import { Promotions } from './src/components/Promotions'
 import { MultiCart } from './src/components/MultiCart'
 import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+import { DatePickerUI } from './src/components/DatePicker'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
@@ -263,7 +264,7 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +341,8 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+
+	// Date Picker
+	DatePickerUI
 }

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

@@ -23,7 +23,8 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClickCheckout,
 		checkoutButtonDisabled,
 		isMultiCheckout,
-		isFromUpselling
+		isFromUpselling,
+		isGiftCart
 	} = props
 
 	const [orderState] = useOrder();
@@ -75,7 +76,7 @@ export const BusinessItemAccordion = (props: any) => {
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
 						<View style={{ flexDirection: 'row' }}>
-							{props.onNavigationRedirect && !isClosed && (
+							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
@@ -84,7 +85,9 @@ export const BusinessItemAccordion = (props: any) => {
 							)}
 							{!isCartPending && (
 								<>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									{!isGiftCart && (
+										<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									)}
 									<OAlert
 										title={t('DELETE_CART', 'Delete Cart')}
 										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
@@ -94,7 +97,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{isBusinessChangeEnabled && props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity

package/themes/original/src/components/BusinessListingSearch/MaxSectionItem/index.tsx

@@ -28,7 +28,7 @@ export const MaxSectionItem = (props: any) => {
         return filter === 'max_distance'
             ? `${option / 1000} ${t('KM', 'Km')}`
             : filter === 'max_eta'
-                ? `${option} ${t('MIN', 'min')}`
+                ? `${option} ${t('TIME_MIN', 'min')}`
                 : parsePrice(option)
     }
     return (

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

@@ -218,6 +218,7 @@ const CartUI = (props: any) => {
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
+        isGiftCart={!cart?.business_id}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
@@ -408,6 +409,7 @@ const CartUI = (props: any) => {
               cart?.status !== 2 &&
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
+              cart?.business_id &&
               (
                 <DriverTipsContainer>
                   <OText size={14} lineHeight={20} color={theme.colors.textNormal}>

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import DatePicker from 'react-native-date-picker'
+import { DateContainer } from './styles';
+
+export const DatePickerUI = (props: any) => {
+	const {
+		birthdate,
+		handleChangeDate
+	} = props;
+
+	return (
+		<DateContainer>
+			<DatePicker mode="date" date={birthdate ? new Date(birthdate) : new Date()} onDateChange={handleChangeDate} />
+		</DateContainer>
+	);
+};
+

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+
+export const DateContainer = styled.View`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+`

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

@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +96,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +211,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
+											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+										</OText>
+									</TouchableOpacity>
+									{showDatePicker && (
+										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
+									)}
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>