ordering-ui-react-native 0.20.0 → 0.20.2-release

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

@@ -5,12 +5,11 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
 export const Header = styled.View`
-  padding: 10px 40px;
+  padding: 10px 20px;
   flex: 1;
 `
 
@@ -24,7 +23,7 @@ export const OrderContent = styled.View`
 export const OrderBusiness = styled.View`
   position: relative; 
   padding-vertical: 10px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   background-color: ${(props: any) => props.theme.colors.white};
   align-items: flex-start;
 `
@@ -64,7 +63,7 @@ export const SectionTitle = styled.View`
 `
 
 export const OrderCustomer = styled.View`
-  padding: 20px 40px 10px;
+  padding: 20px 20px 10px;
   background-color: ${(props: any) => props.theme.colors.white};
 `
 
@@ -86,7 +85,7 @@ export const InfoBlock = styled.View`
 export const HeaderInfo = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  padding: 20px 40px;
+  padding: 20px 20px;
 `
 
 export const OrderProducts = styled(OrderCustomer)``
@@ -100,7 +99,7 @@ export const Table = styled.View`
 `
 
 export const OrderBill = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   padding-vertical: 10px;
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -130,7 +129,7 @@ export const OrderAction = styled.View`
 `
 
 export const PlaceSpotWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const ProfessionalPhoto = styled.ImageBackground`
@@ -141,4 +140,21 @@ export const ProfessionalPhoto = styled.ImageBackground`
   width: 80px;
   resize-mode: cover;
   margin-right: 10px;
-`;
+`;
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

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

@@ -22,7 +22,7 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -110,6 +110,8 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
+
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
@@ -128,7 +130,7 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={orderList?.orders.length === 1 ? {
+                  source={orderList?.orders.length === 1 && lastOrder?.business?.logo.includes('http') ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
                   } : theme.images.logos.logotype}
@@ -147,9 +149,6 @@ const OrderProgressUI = (props: any) => {
                     marginBottom: 3
                   }}
                 >{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', 'Order')}</OText>
-                {statusToShow.includes(lastOrder?.status) && (
-                  <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
-                )}
                 <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
                   <View style={styles.navigationButton}>
                     <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
@@ -165,10 +164,10 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
+                <ProgressBar style={{ width: progressBarObjt(lastOrder.status)?.percentage ? `${(progressBarObjt(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
               </ProgressContentWrapper>
               <ProgressTextWrapper>
-                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
                   <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>
@@ -209,7 +208,18 @@ export const OrderProgress = (props: any) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'infinity'
-    }
+    },
+    propsToFetch: [
+      'id',
+      'name',
+      'business',
+      'status',
+      'delivery_type',
+      'delivery_datetime_utc',
+      'delivery_datetime',
+      'reporting_data'
+    ],
+    noGiftCardOrders: true
   }
 
   return <OrderList {...orderProgressProps} />

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

@@ -32,5 +32,5 @@ export const OrderInfoWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { ActivityIndicator, View } from 'react-native'
 import {
   Cart,
@@ -56,6 +56,7 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
+  const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
   const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
@@ -209,8 +210,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -341,6 +342,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10,
                           borderRadius: 8
                         }}
+                        forwardRef={commentRef}
                         multiline
                       />
                       {commentState?.loading && (

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

@@ -31,14 +31,12 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
-	const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
-	const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: orderTypeTitle(type.value) || t(type.content, type.content),
-			description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: t(type.content, type.content),
+			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
 		}
 	})
 
@@ -102,6 +100,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
 						noMargin
 					/>
 					{
@@ -115,7 +114,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
 													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
 													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-														<OText size={10} lineHeight={15} color={theme.colors.white}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
 														<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
 													</View>
 												</MaskCont>

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled, { css } from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/styles.tsx

@@ -2,5 +2,5 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

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

@@ -51,7 +51,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businesses,
 		businessPaginationProps,
 		handleUpdateProducts,
-		handleUpdateBusinesses
+		handleUpdateBusinesses,
+		businessId
 	} = props
 
 	const theme = useTheme();
@@ -207,7 +208,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						btnStyle={{ borderRadius: 8 }}
 						content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
 						btnTitle={t('ORDER_NOW', 'Order now')}
-						onClickButton={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
+						onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
 					/>
 				</NoOrdersWrapper>
 			)}
@@ -308,7 +309,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					/>
 				)
 			)}
-			{loading && !hideOrders && (
+			{loading && !hideOrders && !preOrders && (
 				<>
 					{!activeOrders ? (
 						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 	${(props : any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '20px'};
 	`}
 `
 

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

@@ -77,6 +77,7 @@ const PageBannerUI = (props: any) => {
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
@@ -128,6 +129,7 @@ const PageBannerUI = (props: any) => {
               {pageBannerState.banner?.items.length > 1 && (
                 <>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { left: 25 }]}
                     onPress={() => carouselRef.current.snapToPrev()}
                   >
@@ -138,6 +140,7 @@ const PageBannerUI = (props: any) => {
                     />
                   </TouchableOpacity>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { right: 25 }]}
                     onPress={() => carouselRef.current.snapToNext()}
                   >

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

@@ -26,7 +26,7 @@ const PaymentOptionCardUI = (props: any) => {
     const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string> }>({ open: false, content: [] })
     const [newCard, setNewCard] = useState<any>(null)
 
-    const onChangeCardForm = (values : any) => {
+    const onChangeCardForm = (values: any) => {
         if (values?.valid) {
             const expiry = values?.values?.expiry?.split('/')
             const expiryMonth = expiry[0]
@@ -107,6 +107,8 @@ const PaymentOptionCardUI = (props: any) => {
                     cardsList={cardsList}
                     noShowErrors
                     gateway={gateway}
+                    onOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+                    onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
                 />
             </>
             <Modal
@@ -169,7 +171,7 @@ const PaymentOptionCardUI = (props: any) => {
     )
 }
 
-export const PaymentOptionCard = (props : any) => {
+export const PaymentOptionCard = (props: any) => {
     const paymentOptions = {
         ...props,
         UIComponent: PaymentOptionCardUI

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

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-        (
-          <>
-            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-              <Container
-                key={wallet.id}
-                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-                onPress={() => handleOnChange(idx, wallet)}
-                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-              >
-                <SectionLeft>
-                  {checkedState[idx] ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={25}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={25}
-                      color={theme.colors.disabled}
-                    />
-                  )}
-                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                    <View>
-                      <OText
-                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
-                          color: theme.colors.disabled
-                        } : {}}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </OText>
-                    </View>
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+            >
+              <SectionLeft>
+                {checkedState[idx] ? (
+                  <MaterialCommunityIcons
+                    name="checkbox-marked"
+                    size={25}
+                    color={theme.colors.primary}
+                  />
+                ) : (
+                  <MaterialCommunityIcons
+                    name="checkbox-blank-outline"
+                    size={25}
+                    color={theme.colors.disabled}
+                  />
+                )}
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
                   </View>
-                </SectionLeft>
-
-                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
-                  {wallet.type === 'cash' && (
-                    <OText>
-                      {parsePrice(wallet?.balance, { isTruncable: true })}
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
                     </OText>
-                  )}
-                  {wallet.type === 'credit_point' && (
                     <OText>
-                      <OText color={theme.colors.primary} weight='bold'>
-                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                      </OText>
-                      <OText>
-                        {wallet?.balance > 0
-                          ? creditBalance(wallet)
-                          : null}
-                      </OText>
+                      {wallet?.balance > 0
+                        ? creditBalance(wallet)
+                        : null}
                     </OText>
-                  )}
-                </View>
-              </Container>
-            ))}
-          </>
-        )}
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
 
       {walletsState?.loading && (
         <View>