ordering-ui-react-native 0.21.71 → 0.21.72-release

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

@@ -9,7 +9,7 @@ import {
 } from '@stripe/stripe-react-native';
 import { useTheme } from 'styled-components/native';
 import { ErrorMessage } from './styles';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,7 +17,7 @@ import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm
 
 const StripeElementsFormUI = (props: any) => {
 	const {
-		publicKey,
+		publicKeyState,
 		handleSource,
 		values,
 		businessId,
@@ -33,7 +33,12 @@ const StripeElementsFormUI = (props: any) => {
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
-		cartTotal
+		cartTotal,
+		publicKeyAddCard,
+		urlscheme,
+		androidAppId,
+		businessNames,
+		setNewCardAdded
 	} = props;
 
 	const theme = useTheme();
@@ -52,6 +57,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const isToSave = methodsPay?.includes(paymethod) ? publicKeyState?.key : (publicKeyAddCard || publicKeyState?.key)
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
@@ -145,6 +151,10 @@ const StripeElementsFormUI = (props: any) => {
 						const _isNewCard = index === 0
 						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
+					setNewCardAdded?.({
+						...card,
+						id: setupIntent?.paymentMethodId
+					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
 				}
@@ -197,69 +207,79 @@ const StripeElementsFormUI = (props: any) => {
 
 	return (
 		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
-			{publicKey ? (
-				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={publicKey}
-						merchantIdentifier={merchantId}
-						urlScheme={merchantId}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								cartTotal={cartTotal}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-								setMethodPaySupported={setMethodPaySupported}
-								placeByMethodPay={placeByMethodPay}
-								methodPaySupported={methodPaySupported}
-								setPlaceByMethodPay={setPlaceByMethodPay}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={zipCodeEnabled}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-									borderWidth: 1,
-									borderRadius: 8,
-									borderColor: theme.colors.border
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
-					</StripeProvider>
-					{!!errors && (
+			{publicKeyState.loading ? (
+				<Placeholder Animation={Fade}>
+					<PlaceholderLine height={50} style={{ marginTop: 20 }} />
+				</Placeholder>
+			) : (
+				<>
+					{publicKeyState?.key ? (
+						<View style={{ flex: 1 }}>
+							<StripeProvider
+								publishableKey={isToSave}
+								merchantIdentifier={merchantId}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
+							>
+								{methodsPay?.includes(paymethod) ? (
+									<StripeMethodForm
+										handleSource={handleSource}
+										onCancel={onCancel}
+										cart={cart}
+										cartTotal={cartTotal}
+										setErrors={setErrors}
+										paymethod={paymethod}
+										devMode={publicKeyState?.key?.includes('test')}
+										setMethodPaySupported={setMethodPaySupported}
+										placeByMethodPay={placeByMethodPay}
+										methodPaySupported={methodPaySupported}
+										setPlaceByMethodPay={setPlaceByMethodPay}
+										androidAppId={androidAppId}
+										businessNames={businessNames}
+									/>
+								) : (
+									<CardField
+										postalCodeEnabled={zipCodeEnabled}
+										cardStyle={{
+											backgroundColor: '#FFFFFF',
+											textColor: '#000000',
+											borderWidth: 1,
+											borderRadius: 8,
+											borderColor: theme.colors.border
+										}}
+										style={{
+											width: '100%',
+											height: 50,
+											marginVertical: 30,
+											zIndex: 9999,
+										}}
+										onCardChange={(cardDetails: any) => setCard(cardDetails)}
+									/>
+								)}
+							</StripeProvider>
+							{!!errors && (
+								<ErrorMessage>
+									<OText
+										size={20}
+										color={theme.colors.error}
+										style={{ marginTop: 20, textAlign: 'center' }}
+									>
+										{errors}
+									</OText>
+								</ErrorMessage>
+							)}
+						</View>
+					) : (
 						<ErrorMessage>
 							<OText
 								size={20}
 								color={theme.colors.error}
-								style={{ marginTop: 20, textAlign: 'center' }}
+								style={{ marginTop: 20 }}
 							>
-								{errors}
+								{t('SOMETHING_WRONG', 'Something is wrong!')}
 							</OText>
 						</ErrorMessage>
 					)}
-				</View>
-			) : (
-				<ErrorMessage>
-					<OText
-						size={20}
-						color={theme.colors.error}
-						style={{ marginTop: 20 }}
-					>
-						{t('SOMETHING_WRONG', 'Something is wrong!')}
-					</OText>
-				</ErrorMessage>
+				</>
 			)}
 			{!methodsPay?.includes(paymethod) && (
 				<OButton
@@ -267,7 +287,6 @@ const StripeElementsFormUI = (props: any) => {
 					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
 					imgRightSrc={null}
 					onClick={() => handleSaveCard()}
 					isDisabled={!isCompleted}

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

@@ -13,6 +13,7 @@ export const StripeElementsForm = (props: any) => {
   const [ordering] = useApi();
   const [{ token }] = useSession();
   const [state, setState] = useState({ loading: false, loadingAdd: false, error: null, requirements: null });
+  const [publicKeyState, setPublicKeyState] = useState({ key: props.publicKey, loading: true, error: null })
 
   const getRequirements = async () => {
     try {
@@ -52,7 +53,7 @@ export const StripeElementsForm = (props: any) => {
       const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
         method: 'POST',
         headers: {
-          Authorization: `Bearer ${user?.session?.access_token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
@@ -85,6 +86,51 @@ export const StripeElementsForm = (props: any) => {
     }
   }
 
+  /**
+   * Method to get stripe credentials from API
+   */
+  const getCredentials = async () => {
+    try {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: true
+      })
+      const { content: { result, error } } = await ordering.setAccessToken(token).paymentCards().getCredentials()
+      if (!error) {
+        setPublicKeyState({
+          loading: false,
+          key: result.publishable,
+          error: null
+        })
+      } else {
+        setPublicKeyState({
+          ...publicKeyState,
+          loading: false,
+          error: result
+        })
+      }
+    } catch (error) {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: false,
+        error: error.message
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!token) return
+    if (props.publicKey) {
+      setPublicKeyState({
+        loading: false,
+        key: props.publicKey,
+        error: null
+      })
+    } else {
+      getCredentials()
+    }
+  }, [token, props.publicKey])
+
   useEffect(() => {
     if (!token || state.requirements) return
     toSave && getRequirements()
@@ -96,6 +142,7 @@ export const StripeElementsForm = (props: any) => {
       values={state}
       requirements={state.requirements}
       stripeTokenHandler={stripeTokenHandler}
+      publicKeyState={publicKeyState}
     />
   )
 }

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

@@ -138,9 +138,6 @@ const StripeRedirectFormUI = (props: any) => {
 			<OButton
 				// text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
 				text={t('OK', 'OK')}
-				bgColor={theme.colors.primary}
-				borderColor={theme.colors.primary}
-				textStyle={{ color: 'white' }}
 				imgRightSrc={null}
 				// isDisabled={formState.isSubmitting}
 				// onClick={() => handleSubmit(onSubmit)}

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

@@ -14,7 +14,8 @@ interface taxInformationParams {
     percentage?: number,
     id: number,
     discounts?: any,
-    rate_type?: number
+    rate_type?: number,
+    target?: string
   },
   products: Array<any>,
   type: string
@@ -34,7 +35,7 @@ export const TaxInformation = (props: taxInformationParams) => {
   const offersHideArray = ['offer_target_2', 'offer_target_3']
   const hideProductsSectionOffers = offersHideArray.includes(type)
   const dataHideArray : Array<string | number> = ['platform', 'business']
-  const hideProductsSectionData = dataHideArray.includes(data.type)
+  const hideProductsSectionData = dataHideArray.includes(data.type) || data?.target === 'delivery_fee'
 
   const getFilterValidation = (product: any) => {
     return (

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View, Vibration } from 'react-native'
 import {
     useLanguage,
     useOrder,
@@ -20,7 +20,7 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { UpsellingLayout } from './UpsellingLayout';
 
-export const UpsellingContent = (props : any) => {
+export const UpsellingContent = (props: any) => {
     const {
         onGoBack,
         handleUpsellingPage,
@@ -44,12 +44,10 @@ export const UpsellingContent = (props : any) => {
     const commentDelayTime = isChewLayout ? 500 : null
 
     const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
-    
+
     const styles = StyleSheet.create({
         closeUpsellingButton: {
             borderRadius: 7.6,
-            borderColor: theme.colors.primary,
-            backgroundColor: theme.colors.primary,
             borderWidth: 1,
             alignSelf: 'center',
             height: 44,
@@ -92,6 +90,11 @@ export const UpsellingContent = (props : any) => {
         setShowTitle(contentOffset.y > 30)
     }
 
+    const handleClickCheckout = () => {
+        Vibration.vibrate(100)
+        handleUpsellingPage(cart)
+    }
+
     return (
         <>
             <View style={styles.wrapperNavbar}>
@@ -160,9 +163,9 @@ export const UpsellingContent = (props : any) => {
                 <OButton
                     imgRightSrc=''
                     text={t('CHECKOUT', 'Checkout')}
+                    textStyle={{ fontSize: 14 }}
                     style={{ ...styles.closeUpsellingButton }}
-                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
-                    onClick={() => handleUpsellingPage(cart)}
+                    onClick={() => handleClickCheckout()}
                 />
             </View>
         </>

package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx

@@ -25,6 +25,9 @@ export const UpsellingLayout = (props : any) => {
     const [{ parsePrice }] = useUtils()
     const [, t] = useLanguage()
 
+    const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
+
+
     const styles = StyleSheet.create({
         imageStyle: {
             width: 73,
@@ -66,9 +69,11 @@ export const UpsellingLayout = (props : any) => {
                                                     <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
                                                 </AddButton>
                                             </View>
-                                            <View>
-                                                <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
-                                            </View>
+                                            {(product?.images || !hideProductDummyLogo) && (
+                                                <View>
+                                                    <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                                                </View>
+                                            )}
                                         </Item>
                                     )) : (
                                         <OText>

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

@@ -304,93 +304,97 @@ export const UserFormDetailsUI = (props: any) => {
 							{sortInputFields({
 								values: validationFields.fields?.checkout,
 							}).map(
-								(field: any) =>
-									showField &&
-									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
-										<React.Fragment key={field.id}>
-											<Controller
-												key={field.id}
-												control={control}
-												render={() => (
-													<>
-														<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-															{t(field?.code?.toUpperCase(), field?.name)}
-														</OText>
-														<OInput
-															name={field.code}
-															placeholder={t(
-																field.code.toUpperCase(),
-																field?.name,
-															)}
-															inputStyle={styles.inputStyle}
-															style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-															autoCapitalize={
-																field.code === 'email' ? 'none' : 'sentences'
-															}
-															isDisabled={false}
-															value={
-																formState?.changes[field.code] ??
-																(user && user[field.code]) ??
-																''
-															}
-															onChange={(val: any) => {
-																field.code !== 'email'
-																	? setValue(field.code, val.target.value)
-																	: setValue(
-																		field.code,
-																		val.target.value
-																			.toLowerCase()
-																			.replace(
-																				/[&,()%";:ç?<>{}\\[\]\s]/g,
-																				'',
-																			),
-																	);
-																field.code !== 'email'
-																	? handleChangeInput(val)
-																	: handleChangeInput({
-																		target: {
-																			name: 'email',
-																			value: val.target.value
+								(item: any) => {
+									const field = item?.validation_field || item
+									return (showField &&
+										showField(field.code) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+											<React.Fragment key={field.id}>
+												<Controller
+													key={field.id}
+													control={control}
+													render={() => (
+														<>
+															<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+																{t(field?.code?.toUpperCase(), field?.name)}
+															</OText>
+															<OInput
+																name={field.code}
+																placeholder={t(
+																	field.code.toUpperCase(),
+																	field?.name,
+																)}
+																inputStyle={styles.inputStyle}
+																style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+																autoCapitalize={
+																	field.code === 'email' ? 'none' : 'sentences'
+																}
+																isDisabled={false}
+																value={
+																	formState?.changes[field.code] ??
+																	(user && user[field.code]) ??
+																	''
+																}
+																onChange={(val: any) => {
+																	field.code !== 'email'
+																		? setValue(field.code, val.target.value)
+																		: setValue(
+																			field.code,
+																			val.target.value
 																				.toLowerCase()
 																				.replace(
 																					/[&,()%";:ç?<>{}\\[\]\s]/g,
 																					'',
 																				),
-																		},
-																	});
-															}}
-															autoCorrect={field.code === 'email' && false}
-															type={
-																field.code === 'email'
-																	? 'email-address'
-																	: 'default'
-															}
-															returnKeyType="done"
-															autoCompleteType={
-																field.code === 'email' ? 'email' : 'off'
-															}
-														/>
-													</>
-												)}
-												name={field.code}
-												rules={getInputRules(field)}
-												defaultValue={user && user[field.code]}
-											/>
-										</React.Fragment>
-									),
+																		);
+																	field.code !== 'email'
+																		? handleChangeInput(val)
+																		: handleChangeInput({
+																			target: {
+																				name: 'email',
+																				value: val.target.value
+																					.toLowerCase()
+																					.replace(
+																						/[&,()%";:ç?<>{}\\[\]\s]/g,
+																						'',
+																					),
+																			},
+																		});
+																}}
+																autoCorrect={field.code === 'email' && false}
+																type={
+																	field.code === 'email'
+																		? 'email-address'
+																		: 'default'
+																}
+																returnKeyType="done"
+																autoCompleteType={
+																	field.code === 'email' ? 'email' : 'off'
+																}
+															/>
+														</>
+													)}
+													name={field.code}
+													rules={getInputRules(field)}
+													defaultValue={user && user[field.code]}
+												/>
+											</React.Fragment>
+										))
+								},
 							)}
 							{showInputBirthday && (
-								<WrapperBirthdate>
-									<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={{ marginTop: 6, marginBottom: -15 }}>
-											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+								<>
+									<WrapperBirthdate>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+											{t('BIRTHDATE', 'Birthdate')}
 										</OText>
-									</TouchableOpacity>
+										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+											</OText>
+										</TouchableOpacity>
+									</WrapperBirthdate>
 									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
-								</WrapperBirthdate>
+								</>
 							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
@@ -480,9 +484,7 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white, fontSize: 14 }}
-								borderColor={theme.colors.primary}
+								textStyle={{ fontSize: 14 }}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
 								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -500,12 +502,10 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.primary}
 					textStyle={{
 						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
 						fontSize: 14
 					}}
-					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{
@@ -552,4 +552,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-

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

@@ -20,7 +20,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
-
+import { WebsocketStatus } from '../WebsocketStatus'
 import {
 	OIcon,
 	OText,
@@ -44,6 +44,7 @@ const ProfileListUI = (props: ProfileParams) => {
 		handleRemoveAccount,
 		removeAccountState,
 		handleChangePromotions,
+		appVersion
 	} = props;
 
 	const theme = useTheme();
@@ -151,7 +152,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
-		handleRemoveAccount
+		handleRemoveAccount,
 	}
 
 	useEffect(() => {
@@ -270,6 +271,14 @@ const ProfileListUI = (props: ProfileParams) => {
 					<View style={{ height: 17 }} />
 				</Actions>
 			</ListWrap>
+			<WebsocketStatus />
+			{appVersion && (
+				<View
+					style={{ alignItems: 'center' }}
+				>
+					<OText>v{appVersion}</OText>
+				</View>
+			)}
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton
@@ -304,13 +309,11 @@ const WalletsUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
                 marginBottom: 10
               }}
+              useArrow
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}
               iconProps={{