ordering-ui-react-native 0.16.37 → 0.16.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.37",
+  "version": "0.16.40",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/OrderDetails/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager, AppState } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -109,7 +109,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-  const appState = useRef(AppState.currentState)
 
   const { order, loading, businessData, error } = props.order
 
@@ -259,23 +258,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     })
   }, [])
 
-  useEffect(() => {
-    const onFocusApp = (nextAppState: any) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        getOrder && getOrder()
-      }
-      appState.current = nextAppState;
-    }
-
-    AppState.addEventListener("change", onFocusApp);
-    return () => {
-      AppState.removeEventListener('change', onFocusApp);
-    };
-  }, [])
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (

package/src/components/PaymentOptions/index.tsx

@@ -89,6 +89,8 @@ const PaymentOptionsUI = (props: any) => {
         return theme.images.general.stripes
       case 'stripe_redirect':
         return theme.images.general.stripesb
+      case 'apple_pay':
+        return theme.images.general.applePayMark
       default:
         return theme.images.general.creditCard
     }
@@ -97,7 +99,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+    if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)
@@ -130,29 +132,44 @@ const PaymentOptionsUI = (props: any) => {
 
   const renderPaymethods = ({ item }: any) => {
     return (
-      <TouchableOpacity
-        onPress={() => handlePaymentMethodClick(item)}
-      >
-        <PMItem
-          key={item.id}
-          isDisabled={isDisabled}
-          isActive={paymethodSelected?.id === item.id}
-        >
-          <OIcon
-            src={getPayIcon(item.gateway)}
-            width={40}
-            height={40}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-          />
-          <OText
-            size={12}
-            style={{ margin: 0 }}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+      <>
+        {item?.gateway === 'apple_pay' ? (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
           >
-            {t(item.gateway.toUpperCase(), item.name)}
-          </OText>
-        </PMItem>
-      </TouchableOpacity>
+            <OIcon
+              src={getPayIcon(item.gateway)}
+              width={120}
+              height={100}
+              style={{ marginRight: 10 }}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
+          >
+            <PMItem
+              key={item.id}
+              isDisabled={isDisabled}
+              isActive={paymethodSelected?.id === item.id}
+            >
+              <OIcon
+                src={getPayIcon(item.gateway)}
+                width={40}
+                height={40}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+              />
+              <OText
+                size={12}
+                style={{ margin: 0 }}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+              >
+                {t(item.gateway.toUpperCase(), item.name)}
+              </OText>
+            </PMItem>
+          </TouchableOpacity>
+        )}
+      </>
     )
   }
 
@@ -213,31 +230,31 @@ const PaymentOptionsUI = (props: any) => {
       {stripeOptions.includes(paymethodSelected?.gateway) &&
         (paymethodData?.brand || paymethodData?.card?.brand) &&
         (paymethodData?.last4 || paymethodData?.card?.last4) &&
-      (
-        <PMCardSelected>
-          <PMCardItemContent>
-            <View style={styles.viewStyle}>
-              <MaterialCommunityIcons
-                name='radiobox-marked'
-                size={24}
-                color={theme.colors.primary}
-              />
-            </View>
-            <View style={styles.viewStyle}>
-              <OText>
-                {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
-              </OText>
-            </View>
-            <View style={styles.viewStyle}>
-              <OText
-                size={20}
-              >
-                XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
-              </OText>
-            </View>
-          </PMCardItemContent>
-        </PMCardSelected>
-      )}
+        (
+          <PMCardSelected>
+            <PMCardItemContent>
+              <View style={styles.viewStyle}>
+                <MaterialCommunityIcons
+                  name='radiobox-marked'
+                  size={24}
+                  color={theme.colors.primary}
+                />
+              </View>
+              <View style={styles.viewStyle}>
+                <OText>
+                  {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
+                </OText>
+              </View>
+              <View style={styles.viewStyle}>
+                <OText
+                  size={20}
+                >
+                  XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
+                </OText>
+              </View>
+            </PMCardItemContent>
+          </PMCardSelected>
+        )}
 
       {/* Stripe */}
       {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
@@ -317,7 +334,7 @@ const PaymentOptionsUI = (props: any) => {
             bgColor={theme.colors.primary}
             borderColor={theme.colors.primary}
             style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
+            textStyle={{ color: 'white' }}
             imgRightSrc={null}
             onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
           />

package/src/components/ReviewOrder/index.tsx

@@ -332,6 +332,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
+    defaultStar: 0,
     UIComponent: ReviewOrderUI
   }
   return <ReviewOrderController {...reviewOrderProps} />

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -21,7 +22,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -44,6 +46,64 @@ export const BusinessBasicInformation = (
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 
+	const styles = StyleSheet.create({
+		businesInfoheaderStyle: {
+			height: 150,
+		},
+		headerStyle: {
+			height: 260,
+		},
+		businessLogo: {
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start',
+		},
+		businessInfo: {
+			paddingHorizontal: 40,
+			paddingTop: 56,
+		},
+		bullet: {
+			flexDirection: 'row',
+			alignItems: 'center',
+		},
+		metadata: {
+			marginRight: 2,
+		},
+		starIcon: {
+			marginHorizontal: 5,
+		},
+		reviewStyle: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		modalTitleSectionStyle: {
+			position: 'absolute',
+			width: '100%',
+			top: 0,
+			zIndex: 100,
+			left: 40
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginLeft: 5
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0
+		}
+	});
+
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
 			BusinessInformation = require('../BusinessInformation').BusinessInformation
@@ -73,6 +133,19 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	const SocialNetWork = (props: any) => {
+		const { socialLink, iconTitle} = props
+
+		return (
+			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
+				<MaterialComIcon
+					name={iconTitle}
+					color={theme.colors.textNormal}
+					size={14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -165,6 +238,53 @@ export const BusinessBasicInformation = (
 									</OText>
 								</RibbonBox>
 							)}
+							<SocialListWrapper
+								showsVerticalScrollIndicator={false}
+								showsHorizontalScrollIndicator={false}
+								horizontal
+								contentContainerStyle={{ flex: 1, justifyContent: 'flex-end'}}
+							>
+								{!!business?.facebook_profile && (
+									<SocialNetWork
+										socialLink={business?.facebook_profile}
+										iconTitle='facebook'
+									/>
+								)}
+								{!!business?.instagram_profile && (
+									<SocialNetWork
+										socialLink={business?.instagram_profile}
+										iconTitle='instagram'
+									/>
+								)}
+								{!!business?.tiktok_profile && (
+									<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+										<View style={styles.tiktokIcon}>
+											<OIcon
+												src={theme.images.general.tiktok}
+												style={{ width: '100%', height: '100%'}}
+											/>
+										</View>
+									</TouchableOpacity>
+								)}
+								{!!business?.pinterest_profile && (
+									<SocialNetWork
+										socialLink={business?.pinterest_profile}
+										iconTitle='pinterest'
+									/>
+								)}
+								{!!business?.whatsapp_number && (
+									<SocialNetWork
+										socialLink={business?.whatsapp_number}
+										iconTitle='whatsapp'
+									/>
+								)}
+								{!!business?.snapchat_profile && (
+									<SocialNetWork
+										socialLink={business?.snapchat_profile}
+										iconTitle='snapchat'
+									/>
+								)}
+							</SocialListWrapper>
 						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
@@ -276,45 +396,3 @@ export const BusinessBasicInformation = (
 		</BusinessContainer>
 	);
 };
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});

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

@@ -68,3 +68,7 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const SocialListWrapper = styled.ScrollView`
+  flex-direction: row;
+`

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

@@ -361,7 +361,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
+                  {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>
             </OSTotal>

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

@@ -75,6 +75,7 @@ export const Favorite = (props: any) => {
         <FavoriteList
           favoriteURL='favorite_products'
           originalURL='products'
+          onNavigationRedirect={onRedirect}
           isProduct
         />
       )}

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

@@ -73,6 +73,17 @@ const FavoriteListUI = (props: FavoriteParams) => {
     return objectStatus && objectStatus
   }
 
+  const onProductClick = (product: any) => {
+    const categoryId = product?.category?.id
+    const businessId = product?.category?.business?.id
+    if (!categoryId || !businessId) return
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			productId: product?.id,
+			categoryId: categoryId,
+			businessId: businessId
+		})
+  }
+
   useEffect(() => {
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
@@ -248,9 +259,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
               <SingleProductCard
                 key={`${product?.id}_${i}`}
-                isSoldOut={product.inventoried && !product.quantity}
+                isSoldOut={product?.inventoried && !product?.quantity}
                 product={product}
-                onProductClick={() => {}}
+                onProductClick={onProductClick}
                 handleUpdateProducts={handleUpdateFavoriteList}
               />
             ))

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

@@ -299,7 +299,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
+                      {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>
                 </View>

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

@@ -82,6 +82,8 @@ const PaymentOptionsUI = (props: any) => {
 				return theme.images.general.stripes
 			case 'stripe_redirect':
 				return theme.images.general.stripesb
+			case 'apple_pay':
+				return theme.images.general.applePayMark
 			default:
 				return theme.images.general.creditCard
 		}
@@ -142,29 +144,46 @@ const PaymentOptionsUI = (props: any) => {
 
 	const renderPaymethods = ({ item }: any) => {
 		return (
-			<TouchableOpacity
-				onPress={() => handlePaymentMethodClick(item)}
-			>
-				<PMItem
-					key={item.id}
-					isDisabled={isDisabled}
-					isActive={paymethodSelected?.id === item.id}
-				>
-					<OIcon
-						src={getPayIcon(item.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+			<>
+				{item?.gateway === 'apple_pay' ? (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{t(item.gateway.toUpperCase(), item.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
+						<OIcon
+							src={getPayIcon(item.gateway)}
+							width={70}
+							height={70}
+							style={{ marginRight: 10 }}
+						/>
+					</TouchableOpacity>
+				) : (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
+					>
+						{console.log(item?.gateway)}
+						<PMItem
+							key={item.id}
+							isDisabled={isDisabled}
+							isActive={paymethodSelected?.id === item.id}
+						>
+							<OIcon
+								src={getPayIcon(item.gateway)}
+								width={20}
+								height={20}
+								color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+							/>
+							<OText
+								size={10}
+								style={{ margin: 0, marginTop: 4 }}
+								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+							>
+								{t(item.gateway.toUpperCase(), item.name)}
+							</OText>
+						</PMItem>
+					</TouchableOpacity>
+				)}
+			</>
+
 		)
 	}
 

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

@@ -61,13 +61,13 @@ const StripeElementsFormUI = (props: any) => {
 	}
 
 	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
+		billingDetails.address.line1 = user?.address
 	}
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			setCreatePmLoading(true)
@@ -94,16 +94,16 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-
+	
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);