ordering-ui-react-native 0.15.62 → 0.15.63-release

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

@@ -12,11 +12,9 @@ export const FormSide = styled.View`
   margin: auto;
 `;
 
-export const OTabs = styled.View`
+export const OTabs = styled.ScrollView`
   flex-direction: row;
   width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: -1px;
 `;
 

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

@@ -36,7 +36,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadOrders,
 		setSelectedOrderId,
 		setOrderList,
-		setOpenMessges
+		setOpenMessges,
+		setRefreshOrders,
+		refreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -99,6 +101,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		setOrderList(orderList)
 	}, [orderList, loading])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
 			{!loading && orders.length === 0 && (

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

@@ -39,7 +39,7 @@ const ORDER_STATUS: any = {
   	23: 'ORDER_DRIVER_ON_WAY'
 }
 
-const filterSpecialStatus = ['prepared_in', 'delivered_in']
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
 
 const MessagesUI = (props: MessagesParams) => {

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

@@ -4,6 +4,7 @@ import CalendarStrip from 'react-native-calendar-strip'
 import {
 	useLanguage,
 	useConfig,
+	useUtils,
 	useOrder,
 	MomentOption as MomentOptionController,
 } from 'ordering-components/native';
@@ -132,6 +133,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
 	const [orderState] = useOrder();
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
@@ -143,6 +145,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	});
 	const { bottom } = useSafeAreaInsets();
 
+	const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(null)
@@ -338,7 +342,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{time.startTime}</OText>
+												>{is12hours ? ( 
+													time.startTime.includes('12') 
+														? `${time.startTime}PM`
+														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+													) : time.startTime
+												}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}

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

@@ -18,7 +18,7 @@ export const OrderTimeWrapper = styled.View`
 
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
-  max-height: 160px;
+  max-height: 210px;
 `
 
 export const TimeContentWrapper = styled.View`

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

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import SelectDropdown from 'react-native-select-dropdown'
+import { useTheme } from 'styled-components/native'
+import {
+  MomentOption as MomentOptionController,
+  useConfig,
+  useUtils
+} from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { Container } from './styles'
+import moment from 'moment'
+
+const MomentSelectorUI = (props: any) => {
+  const {
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		handleChangeDate,
+		handleChangeTime,
+  } = props
+
+  const theme = useTheme()
+  const { top } = useSafeAreaInsets()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+
+  const [customizedDateList, setCustomizedDateList] = useState([])
+  const [customizedTimeList, setCustomizedTimeList] = useState([])
+
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 30
+    },
+    selectWrapper: {
+      flex: 1
+    }
+  })
+
+  useEffect(() => {
+    const updatedDatesList = datesList?.map((date: any) => {
+      return { value: moment(date).format('MMM DD, YYYY'), key: date }
+    })
+    setCustomizedDateList(updatedDatesList)
+  }, [datesList])
+
+  useEffect(() => {
+    if (hoursList?.length > 0) {
+      
+      const updatedHoursList = hoursList?.map((hour: any) => {
+        const timeValue = is12hours ? (
+          hour?.startTime?.includes('12')
+            ? `${hour.startTime}PM`
+            : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+        ) : (
+          parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+          )
+          return { value: timeValue, key: hour.startTime }
+        })
+      setCustomizedTimeList(updatedHoursList)
+    }
+  }, [hoursList])
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  return (
+    <Container>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedDateList?.find((item: any) => item.key === dateSelected)}
+          data={customizedDateList}
+          onSelect={(selectedItem, index) => {
+            handleChangeDate(selectedItem?.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem?.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopLeftRadius: 7.6, borderBottomLeftRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 12
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          data={customizedTimeList}
+          onSelect={(selectedItem, index) => {
+            handleChangeTime(selectedItem.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopRightRadius: 7.6, borderBottomRightRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 14
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+    </Container>
+  )
+}
+
+export const MomentSelector = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: MomentSelectorUI,
+    maxDate: currentDate
+  }
+  return <MomentOptionController {...businessPreorderProps} />
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,243 @@
+import React, { useState } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  MultiCartsPaymethodsAndWallets as MultiCartsPaymethodsAndWalletsController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
+import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { getIconCard, flatArray } from '../../utils'
+import { StripeElementsForm } from '../StripeElementsForm'
+import { StripeCardsList } from '../StripeCardsList'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+  PMContainer,
+  PMItem,
+  WalletItem
+} from './styles'
+
+const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
+  const {
+    businessIds,
+    paymethodsAndWallets,
+    walletsState,
+    businessPaymethods,
+    paymethodSelected,
+    handleSelectPaymethod,
+    handleSelectWallet,
+    handlePaymethodDataChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+
+	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled
+    }
+  }
+
+  const getPayIcon = (method: string) => {
+		switch (method) {
+			case 'cash':
+				return theme.images.general.cash
+			case 'card_delivery':
+				return theme.images.general.carddelivery
+			case 'paypal':
+				return theme.images.general.paypal
+			case 'stripe':
+				return theme.images.general.stripe
+			case 'stripe_direct':
+				return theme.images.general.stripecc
+			case 'stripe_connect':
+				return theme.images.general.stripes
+			case 'stripe_redirect':
+				return theme.images.general.stripesb
+			default:
+				return theme.images.general.creditCard
+		}
+	}
+
+  const renderPaymethods = ({ item }: any) => {
+		return (
+			<TouchableOpacity
+				onPress={() => handleSelectPaymethod(item)}
+			>
+				<PMItem
+					key={item.id}
+					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+				>
+					<OIcon
+						src={getPayIcon(item.paymethod?.gateway)}
+						width={20}
+						height={20}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+					/>
+					<OText
+						size={10}
+						style={{ margin: 0, marginTop: 4 }}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+					>
+						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+					</OText>
+				</PMItem>
+			</TouchableOpacity>
+		)
+	}
+
+  return (
+    <PMContainer>
+      <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+        {t('PAYMENT_METHODS', 'Payment Methods')}
+      </OText>
+      {paymethodsAndWallets.loading ? (
+        <Placeholder style={{ marginTop: 10, marginBottom: 10 }} Animation={Fade}>
+          <View style={{ display: 'flex', flexDirection: 'row' }}>
+            {[...Array(3)].map((_, i) => (
+              <PlaceholderLine
+                key={i}
+                width={37}
+                height={80}
+                noMargin
+                style={{ borderRadius: 10, marginRight: 10, }}
+              />
+            ))}
+          </View>
+        </Placeholder>
+      ) : (
+        <FlatList
+          horizontal
+					showsHorizontalScrollIndicator={false}
+          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+					renderItem={renderPaymethods}
+					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+        />
+      )}
+      {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
+        <OText size={12} style={{ margin: 0 }}>
+          {t('NO_PAYMENT_METHODS', 'No payment methods!')}
+        </OText>
+      )}
+
+      {paymethodSelected?.paymethod?.gateway === 'stripe' && (
+        <View>
+          <OButton
+						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+						bgColor={theme.colors.white}
+						borderColor={theme.colors.primary}
+						style={styles.btnAddStyle}
+						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+						imgRightSrc={null}
+						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+					/>
+          <StripeCardsList
+						paymethod={paymethodSelected?.paymethod}
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+						publicKey={paymethodSelected?.data?.publishable}
+						payType={paymethodSelected?.paymethod?.name}
+						onSelectCard={handlePaymethodDataChange}
+					/>
+        </View>
+      )}
+
+      {(paymethodsAndWallets.loading || walletsState.loading) ? (
+        <>
+          {[...Array(2).keys()].map(i => (
+            <PlaceholderLine
+              key={i}
+              height={40}
+              noMargin
+              style={{ marginBottom: 10 }}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+            <WalletItem
+              key={wallet.type}
+              isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+              onPress={() => handleSelectWallet(paymethodSelected.wallet_id === wallet.id ? false : true, wallet)}
+            >
+              {paymethodSelected.wallet_id === wallet.id ? (
+                <MaterialCommunityIcons
+                  name="checkbox-marked"
+                  size={25}
+                  color={theme.colors.primary}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="checkbox-blank-outline"
+                  size={25}
+                  color={theme.colors.disabled}
+                />
+              )}
+              <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
+              <OText size={12}>{parsePrice(wallet.balance)}</OText>
+            </WalletItem>
+          ))}
+        </>
+      )}
+
+      <OModal
+				entireModal
+				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+				open={addCardOpen.stripe}
+				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+				style={{ backgroundColor: 'red' }}
+			>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+					enabled={Platform.OS === 'ios' ? true : false}
+				>
+					<StripeElementsForm
+						toSave
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+            publicKey={paymethodSelected?.data?.publishable}
+						requirements={props.clientSecret}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+    </PMContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+	btnAddStyle: {
+		marginVertical: 20,
+		borderRadius: 7.6,
+		shadowOpacity: 0,
+		height: 44,
+		borderWidth: 1
+	},
+})
+
+
+export const MultiCartsPaymethodsAndWallets = (props: any) => {
+  const multiCartsPaymethodsAndWalletsProps = {
+    ...props,
+    UIComponent: MultiCartsPaymethodsAndWalletsUI
+  }
+  return <MultiCartsPaymethodsAndWalletsController {...multiCartsPaymethodsAndWalletsProps} />
+}

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

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components/native'
+
+export const PMContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+export const PMItem = styled.View`
+  width: 120px;
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  margin-right: 10px;
+  margin-top: 10px;
+  text-align: center;
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+
+  ${(props: any) => props.theme?.rtl && css`
+    margin-left: 10px;
+    margin-right: 0;
+  `}
+
+  ${(props: any) => props.isActive ? css`
+    background-color: ${(props: any) => props.theme.colors.primary};
+  ` : css`
+    border: 1px solid #EAEAEA;
+  `}
+`
+export const WalletItem = styled.TouchableOpacity`
+  width: 100%;
+  display: flex;
+  padding: 20px 0;
+  margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  ${(props: any) => props.isBottomBorder && css`
+    border-bottom-width: 1px;
+    border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  `}
+`