ordering-ui-react-native 0.21.63 → 0.21.65

package/package.json

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

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -53,6 +54,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
+  const [showCustomFields, setShowCustomFields] = useState<boolean>(false);
 
   const [isReadMore, setIsReadMore] = useState({
     customerAddress: false,
@@ -134,27 +136,36 @@ export const OrderContentComponent = (props: OrderContent) => {
 
       {order?.metafields?.length > 0 && (
         <OrderBusiness>
-          <OText style={{ marginBottom: 5 }} size={16} weight="600">
-            {t('CUSTOM_FIELDS', 'Custom fields')}
-          </OText>
-
-          {order.metafields.map((field: any) => (
-            <View
-              key={field.id}
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                marginBottom: 5
-              }}
-            >
-              <OText style={{ width: '50%' }}>
-                {field.key}
-              </OText>
-              <OText style={{ width: '45%', textAlign: 'right' }}>
-                {field.value}
-              </OText>
-            </View>
-          ))}
+          <TouchableOpacity onPress={() => setShowCustomFields((prev: boolean) => !prev)} style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <OText style={{ marginBottom: 5 }} size={16} weight="600">
+              {t('CUSTOM_FIELDS', 'Custom fields')}
+            </OText>
+            <AntDesignIcon
+              name={showCustomFields ? 'up' : 'down'}
+              size={14}
+            />
+          </TouchableOpacity>
+          {showCustomFields && (
+            <>
+              {order.metafields.map((field: any) => (
+                <View
+                  key={field.id}
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 5
+                  }}
+                >
+                  <OText style={{ width: '50%' }}>
+                    {field.key}
+                  </OText>
+                  <OText style={{ width: '45%', textAlign: 'right' }}>
+                    {field.value}
+                  </OText>
+                </View>
+              ))}
+            </>
+          )}
         </OrderBusiness>
       )}
 

package/themes/business/src/components/UserProfileForm/index.tsx

@@ -39,7 +39,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
-    navigation,
     formState,
     isEdit,
     validationFields,
@@ -48,9 +47,7 @@ const ProfileUI = (props: ProfileParams) => {
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
     userState,
-    isAvailableLoading,
-    isAlsea,
-    isHideDriverStatus
+    isAlsea
   } = props;
 
   const [{ user }] = useSession();
@@ -60,6 +57,8 @@ const ProfileUI = (props: ProfileParams) => {
   const { errors } = useForm();
   const theme = useTheme();
 
+  const isShowDriverStatus = user?.level === 4 && (props.isShowDriverStatus || (!props.isShowDriverStatus && !userState?.result?.result?.available))
+
   const [phoneInputData, setPhoneInputData] = useState({
     error: '',
     phone: {
@@ -116,7 +115,8 @@ const ProfileUI = (props: ProfileParams) => {
         maxWidth: 200,
         includeBase64: true,
       },
-      (response: any) => {
+      (image: any) => {
+        const response = image?.assets[0];
         if (response.didCancel) {
           console.log('User cancelled image picker');
         } else if (response.errorMessage) {
@@ -346,7 +346,7 @@ const ProfileUI = (props: ProfileParams) => {
             />
           </CenterView>
 
-          {user?.level === 4 && !isHideDriverStatus && (
+          {isShowDriverStatus && (
             <EnabledStatusDriver>
               <View style={{ flex: 1 }}>
                 <OText
@@ -374,7 +374,7 @@ const ProfileUI = (props: ProfileParams) => {
                       !userState?.result?.result?.available,
                     )
                   }
-                  disabled={userState?.loading}
+                  disabled={userState?.loading || userState?.result?.result?.available}
                   animationSpeed={200}
                 />
               )}

package/themes/business/src/types/index.tsx

@@ -57,7 +57,7 @@ export interface ProfileParams {
   showField?: any;
   isRequiredField?: any;
   isAlsea?: boolean;
-  isHideDriverStatus?: boolean;
+  isShowDriverStatus?: boolean;
 }
 
 export interface AddressListParams {

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

@@ -76,7 +76,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
 
 	const textSize = 12
-	const cardHeight = windowHeight * 0.3
+	const cardHeight = windowHeight * 0.34
 
 	const styles = StyleSheet.create({
 		container: {
@@ -256,7 +256,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
+						<BusinessInfo style={{ position: 'absolute', top: -26, left: 15 }}>
 							{!hideBusinessLogo && (
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage

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

@@ -8,13 +8,14 @@ export const BusinessHero = styled.View`
 `
 
 export const BusinessContent = styled.View`
-    padding-horizontal: 18px;
-    padding-bottom: 10px;
-    border-bottom-left-radius: 7.6px;
-    border-bottom-right-radius: 7.6px;
-    border-width: 1px;
-    border-color: ${(props: any) => props.theme.colors.border};
-	 overflow: visible;
+  position: relative;
+  padding-horizontal: 18px;
+  padding-bottom: 10px;
+  border-bottom-left-radius: 7.6px;
+  border-bottom-right-radius: 7.6px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+	overflow: visible;
 `;
 
 export const BusinessInfo = styled.View`

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

@@ -196,6 +196,14 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
+  const handleClickCheckout = () => {
+    if (cart?.business_id) {
+      setOpenUpselling(true)
+    } else {
+      handleUpsellingPage(cart)
+    }
+  }
+
   useEffect(() => {
     const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
     const currentDate = new Date()
@@ -232,7 +240,7 @@ const CartUI = (props: any) => {
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={() => setOpenChangeStore(true)}
-        handleClickCheckout={() => setOpenUpselling(true)}
+        handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
         isFromUpselling={isFromUpselling}
@@ -549,7 +557,7 @@ const CartUI = (props: any) => {
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
                   textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
-                  onClick={() => setOpenUpselling(true)}
+                  onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />
               </CheckoutAction>

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

@@ -56,7 +56,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
             showsHorizontalScrollIndicator={false}
             nestedScrollEnabled
             horizontal
-            style={{ height: 300, paddingHorizontal: 20 }}
+            style={{ height: 325, paddingHorizontal: 20 }}
           >
             {[
               ...Array(10).keys()

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -40,19 +40,19 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
-  const handleChangeCode = (code : string) => {
+  const handleChangeCode = (code: string) => {
     if (code?.length === pinCount) {
-      setCheckingCode(true)
+      setCheckingCode && setCheckingCode(true)
       handleLoginOtp(code)
       inputRef.current?.reset && inputRef.current.reset()
       setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
     }
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   const handleCloseOtp = () => {
     setWillVerifyOtpState(false)
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   useEffect(() => {
@@ -108,18 +108,6 @@ export const Otp = (props: otpParams) => {
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.backgroundPage }}>
       <OTPContainer>
-        <View
-          style={loginStyle.closeContainer}>
-          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
-            <OIcon
-              src={theme.images.general.close}
-              width={22}
-            />
-          </TouchableOpacity>
-          <OText size={22}>
-            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-          </OText>
-        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>