ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,243 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
-import { useFocusEffect } from '@react-navigation/native'
-import { OText } from '../shared'
-import { NotFoundSource } from '../NotFoundSource'
-import { ActiveOrders } from '../ActiveOrders'
-import { PreviousOrders } from '../PreviousOrders'
-
-import { OptionTitle } from './styles'
-import { OrdersOptionParams } from '../../types'
-
-import {
-  Placeholder,
-  PlaceholderLine,
-  Fade
-} from "rn-placeholder";
-import { View } from 'react-native'
-import { useTheme } from 'styled-components/native'
-
-const OrdersOptionUI = (props: OrdersOptionParams) => {
-  const {
-    navigation,
-    activeOrders,
-    orderList,
-    pagination,
-    titleContent,
-    customArray,
-    onNavigationRedirect,
-    orderStatus,
-    loadMoreOrders,
-    loadOrders,
-    ordersLength,
-    setOrdersLength,
-		businessId,
-		preOrders
-  } = props
-
-  const theme = useTheme()
-  const [, t] = useLanguage()
-  const [, { reorder }] = useOrder()
-  const [, { showToast }] = useToast()
-  const { loading, error, orders: values } = orderList
-
-  const imageFails = activeOrders
-    ? theme.images.general.emptyActiveOrders
-    : theme.images.general.emptyPastOrders
-
-  const orders = customArray || values || []
-
-  const [reorderLoading, setReorderLoading] = useState(false)
-  const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false)
-  const [screen, setScreen] = useState({ name: '', uuid: null })
-  const handleReorder = async (orderId: number) => {
-    setReorderLoading(true)
-    try {
-      const { error, result } = await reorder(orderId)
-      if (!error) {
-        onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: result.uuid })
-        setReorderLoading(false)
-        return
-      }
-      setReorderLoading(false)
-
-    } catch (err: any) {
-      showToast(ToastType.Error, t('ERROR', err.message))
-      setReorderLoading(false)
-    }
-  }
-
-  const getOrderStatus = (s: string) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', 'Pending') },
-      { key: 1, value: t('COMPLETED', 'Completed') },
-      { key: 2, value: t('REJECTED', 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-      { key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-      { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-      { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders()
-      setIsLoadingFirstRender(false)
-      return () => {
-        setIsLoadingFirstRender(true)
-      }
-    }, [navigation])
-  )
-
-  useEffect(() => {
-    setOrdersLength && setOrdersLength({
-      ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
-    })
-  }, [orders.length])
-
-
-  return (
-    <>
-      <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <OText size={16} color={theme.colors.textPrimary} mBottom={10} style={activeOrders ? { paddingHorizontal: 0 } : {}}>
-            {titleContent || (
-							preOrders ? t('UPCOMING', 'UPCOMING') 
-							: activeOrders ? t('ACTIVE', 'Active')
-              : t('PAST', 'Past'))}
-          </OText>
-        )}
-      </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
-      )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
-      )}
-      {loading && (
-        <>
-          {activeOrders ? (
-						<>
-						{[...Array(2)].map((_, idx) => 
-							<Placeholder key={idx} Animation={Fade}>
-								<View style={{ width: '100%', flexDirection: 'row' }}>
-									<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
-									<Placeholder>
-										<PlaceholderLine width={30} style={{ marginTop: 5 }} />
-										<PlaceholderLine width={50} />
-										<PlaceholderLine width={70} />
-									</Placeholder>
-								</View>
-							</Placeholder>
-						)}
-						</>
-          ) : (
-            <View style={{ marginTop: 30 }}>
-              {[...Array(3)].map((item, i) => (
-                <Placeholder key={i} Animation={Fade}>
-                  <View style={{ width: '100%', flexDirection: 'row' }}>
-                    <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
-                    <Placeholder>
-                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                      <PlaceholderLine width={50} />
-                      <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </View>
-          )}
-        </>
-      )}
-      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
-        activeOrders ? (
-          <ActiveOrders
-            orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            reorderLoading={reorderLoading}
-            customArray={customArray}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            setScreen={setScreen}
-            screen={screen}
-          />
-					) : (
-					<>
-					{preOrders ? 
-						<ActiveOrders
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							reorderLoading={reorderLoading}
-							customArray={customArray}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							setScreen={setScreen}
-							screen={screen}
-							isPreorders
-						/>
-					: <PreviousOrders
-							reorderLoading={reorderLoading}
-							orders={orders.filter((order: any) => businessId !== null ? order?.business_id === parseInt(businessId) : true)}
-							pagination={pagination}
-							loadMoreOrders={loadMoreOrders}
-							getOrderStatus={getOrderStatus}
-							onNavigationRedirect={onNavigationRedirect}
-							handleReorder={handleReorder}
-						/>
-					}
-					</>
-        )
-      )}
-    </>
-  )
-}
-
-export const OrdersOption = (props: OrdersOptionParams) => {
-  const MyOrdersProps = {
-    ...props,
-    UIComponent: OrdersOptionUI,
-    orderStatus: props.preOrders ? [13] : props.activeOrders
-      ? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21]
-      : [1, 2, 5, 6, 10, 11, 12, 16, 17],
-    useDefualtSessionManager: true,
-    paginationSettings: {
-      initialPage: 1,
-      pageSize: 10,
-      controlType: 'infinity'
-    }
-  }
-
-  return <OrderList {...MyOrdersProps} />
-
-}

package/themes/franchises/src/components/OrdersOption/styles.tsx

@@ -1,5 +0,0 @@
-import styled from 'styled-components/native'
-
-export const OptionTitle = styled.View`
-	margin-top: 24px;
-`

package/themes/franchises/src/components/PaymentOptionCash/index.tsx

@@ -1,102 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet } from 'react-native';
-import { useUtils, useLanguage } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { useForm, Controller } from 'react-hook-form';
-
-import { PCContainer, PCForm, PCWrapper } from './styles';
-import { OInput, OText } from '../shared';
-
-export const PaymentOptionCash = (props: any) => {
-	const {
-		defaultValue,
-		orderTotal,
-		onChangeData,
-		setErrorCash
-	} = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputsStyle: {
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			marginTop: 10,
-			width: '100%',
-			height: 44,
-			maxHeight: 44
-		},
-		errorMsg: {
-			marginTop: 10,
-			color: theme.colors.error,
-			fontSize: 16,
-			fontWeight: 'bold',
-			textAlign: 'center'
-		}
-	});
-
-	const [, t] = useLanguage();
-	const [{ parsePrice }] = useUtils();
-	const { control } = useForm();
-
-	const [value, setvalue] = useState(defaultValue?.toString() || '');
-	let timeout: any = null;
-
-	const onChangeCash = (value: any) => {
-		clearTimeout(timeout)
-		timeout = setTimeout(() => {
-			let cash: any = parseFloat(value)
-			cash = isNaN(cash) ? '' : cash
-			setvalue(cash.toString())
-			if (cash >= orderTotal || !cash) {
-				onChangeData && onChangeData(!cash ? { cash: null } : { cash })
-			}
-		}, 750)
-	}
-
-	useEffect(() => {
-		if (value && parseFloat(value) < orderTotal) {
-			setErrorCash && setErrorCash(true)
-		} else {
-			setErrorCash && setErrorCash(false)
-		}
-	}, [value, orderTotal])
-
-	return (
-		<PCContainer>
-			<PCForm>
-				<PCWrapper>
-					<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-						{t('NOT_EXACT_CASH_AMOUNT', 'Don\'t have exact amount? Let us know with how much will you pay')}
-					</OText>
-					<Controller
-						control={control}
-						name='cash'
-						defaultValue={value}
-						render={() => (
-							<OInput
-								name='cash'
-								placeholder='0'
-								style={styles.inputsStyle}
-								value={value}
-								onChange={(val: any) => onChangeCash(val?.target.value)}
-								type='numeric'
-								returnKeyType='done'
-							/>
-						)}
-					/>
-				</PCWrapper>
-				{!!value && parseFloat(value) < orderTotal && (
-					<OText style={styles.errorMsg}>
-						{`${t('VALUE_GREATER_THAN_TOTAL', 'This value must be greater than order total')}: ${parsePrice(orderTotal)}`}
-					</OText>
-				)}
-			</PCForm>
-		</PCContainer>
-	)
-}
-
-PaymentOptionCash.defaultProps = {
-	defaultValue: ''
-}
-

package/themes/franchises/src/components/PaymentOptionCash/styles.tsx

@@ -1,18 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const PCContainer = styled.View`
-  margin: 20px 0px 0px;
-`;
-
-export const PCForm = styled.View`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
-export const PCWrapper = styled.View`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`

package/themes/franchises/src/components/PaymentOptionStripe/index.tsx

@@ -1,234 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, Dimensions, FlatList, KeyboardAvoidingView, Platform } from 'react-native';
-import {
-	PaymentOptionStripe as PaymentOptionStripeController,
-	useSession,
-	useLanguage,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { PlaceholderLine } from 'rn-placeholder';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-import { getIconCard } from '../../utils';
-import { OAlert, OButton, OModal, OText } from '../shared';
-
-import { NotFoundSource } from '../NotFoundSource';
-import { StripeElementsForm } from '../StripeElementsForm';
-
-import {
-	OSContainer,
-	OSMessage,
-	OSItem,
-	OSItemContent,
-	OSItemActions,
-	OSWrapper,
-	OSActions
-} from './styles';
-
-const PaymentOptionStripeUI = (props: any) => {
-	const {
-		onSelectCard,
-		onCancel,
-		deleteCard,
-		cardSelected,
-		cardsList,
-		handleCardClick,
-		handleNewCard
-	} = props;
-
-	const theme = useTheme();
-
-	const [{ token }] = useSession();
-	const [, t] = useLanguage();
-
-	const [addCartOpen, setAddCardOpen] = useState(false)
-
-	const _handleNewCard = (card: any) => {
-		setAddCardOpen(false);
-		handleNewCard(card);
-	}
-
-	const handleDeleteCard = (card: any) => {
-		deleteCard(card);
-	};
-
-	const renderCards = ({ item }: any) => {
-		return (
-			<OSItem key={item.id}>
-				<OSItemContent onPress={() => handleCardClick(item)}>
-					<View style={styles.viewStyle}>
-						{item.id === cardSelected?.id ? (
-							<MaterialCommunityIcons
-								name='radiobox-marked'
-								size={24}
-								color={theme.colors.primary}
-							/>
-						) : (
-							<MaterialCommunityIcons
-								name='radiobox-blank'
-								size={24}
-								color={theme.colors.primary}
-							/>
-						)}
-					</View>
-					<View style={styles.viewStyle}>
-						{getIconCard(item.brand, 26)}
-					</View>
-					<View style={styles.viewStyle}>
-						<OText size={20}>
-							XXXX-XXXX-XXXX-{item.last4}
-						</OText>
-					</View>
-				</OSItemContent>
-				<OSItemActions>
-					<OAlert
-						title={t('CARD', 'Card')}
-						message={t('QUESTION_DELETE_CARD', 'Are you sure that you want to delete the card?')}
-						onAccept={() => handleDeleteCard(item)}
-					>
-						<MaterialCommunityIcons
-							name='trash-can-outline'
-							size={28}
-							color={theme.colors.primary}
-						/>
-					</OAlert>
-				</OSItemActions>
-			</OSItem>
-		)
-	}
-
-	return (
-		<OSContainer style={styles.container}>
-			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
-				<OSItem>
-					<OText size={22}>
-						{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}
-					</OText>
-				</OSItem>
-			)}
-
-			{token && cardsList.error && cardsList.error.length > 0 && (
-				<NotFoundSource
-					content={cardsList?.error[0]?.message || cardsList?.error[0]}
-				/>
-			)}
-
-			{token && cardsList.cards && cardsList.cards.length > 0 && (
-				<FlatList
-					horizontal={false}
-					showsHorizontalScrollIndicator={false}
-					data={cardsList.cards}
-					renderItem={renderCards}
-					keyExtractor={card => card.id?.toString()}
-					style={{ height: '65%', flexGrow: 0 }}
-				/>
-			)}
-
-			{token && !cardsList.loading && (
-				<OSWrapper style={styles.bottom}>
-					<OButton
-						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
-						bgColor={theme.colors.backgroundGray}
-						borderColor={theme.colors.backgroundGray}
-						style={styles.btnAddStyle}
-						textStyle={{ color: 'white' }}
-						imgRightSrc={null}
-						onClick={() => setAddCardOpen(true)}
-					/>
-					<OSActions>
-						<View style={{ width: '48%' }}>
-							<OButton
-								text={t('CANCEL', 'Cancel')}
-								bgColor={theme.colors.backgroundGray}
-								borderColor={theme.colors.backgroundGray}
-								textStyle={{ color: 'white' }}
-								style={styles.btnAction}
-								imgRightSrc={null}
-								onClick={() => onCancel()}
-							/>
-						</View>
-						<View style={{ width: '48%' }}>
-							<OButton
-								text={t('ACCEPT', 'Accept')}
-								bgColor={theme.colors.primary}
-								borderColor={theme.colors.primary}
-								textStyle={{ color: 'white' }}
-								style={styles.btnAction}
-								imgRightSrc={null}
-								isDisabled={!cardSelected || cardsList?.cards?.length === 0}
-								onClick={() => onSelectCard(cardSelected)}
-							/>
-						</View>
-					</OSActions>
-				</OSWrapper>
-			)}
-
-			<OModal
-				isNotDecoration
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCartOpen}
-				onClose={() => setAddCardOpen(false)}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
-					enabled={Platform.OS === 'ios' ? true : false}
-				>
-					<StripeElementsForm
-						toSave
-						businessId={props.businessId}
-						publicKey={props.publicKey}
-						requirements={props.clientSecret}
-						onNewCard={_handleNewCard}
-						onCancel={() => setAddCardOpen(false)}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
-
-			{token && cardsList.loading && (
-				<>
-					{[...Array(5)].map((_, i) => (
-						<PlaceholderLine
-							key={i}
-							height={50}
-							width={90}
-							noMargin
-							style={{ marginVertical: 20 }}
-						/>
-					))}
-				</>
-			)}
-		</OSContainer>
-	)
-}
-
-const screenHeight = Dimensions.get('window').height;
-const styles = StyleSheet.create({
-	container: {
-		height: screenHeight - 90
-	},
-	bottom: {
-		position: 'absolute',
-		bottom: 0,
-		marginBottom: 20
-	},
-	viewStyle: {
-		marginRight: 10
-	},
-	btnAddStyle: {
-		marginTop: 20
-	},
-	btnAction: {
-		paddingHorizontal: 20
-	}
-})
-
-export const PaymentOptionStripe = (props: any) => {
-	const paymentOptionStripeProps = {
-		...props,
-		UIComponent: PaymentOptionStripeUI
-	}
-	return (
-		<PaymentOptionStripeController {...paymentOptionStripeProps} />
-	)
-}

package/themes/franchises/src/components/PaymentOptionStripe/styles.tsx

@@ -1,71 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const OSContainer = styled.View`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 30px;
-  width: 100%;
-  position: relative;
-`;
-
-export const OSMessage = styled.Text`
-  color: #D81212;
-  font-size: 24px;
-  padding-left: 10px;
-  font-weight: bold;
-  opacity: 0.8;
-  /* ${(props: any) => props.theme?.rtl && css`
-    padding-right: 10px;
-    padding-left: 0;
-  `} */
-`;
-
-export const OSWrapper = styled.View`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const OSCardList = styled.ScrollView`
-  flex: 1;
-`
-
-export const OSItem = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 0px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border};
-`;
-
-export const OSItemContent = styled.TouchableOpacity`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 90%;
-
-  /* > * {
-    ${(props: any) => props.theme?.rtl && css`
-      margin-left: 10px;
-      margin-right: 0;
-    `}
-  } */
-`;
-
-export const OSItemActions = styled.View`
-  max-width: 10%;
-`;
-
-export const OSActions = styled.View`
-  width: 100%;
-  display: flex;
-  padding: 30px 20px 0px;
-  flex-direction: row;
-  justify-content: space-between;
-`;