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

package/package.json

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

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

@@ -50,6 +50,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils();
+  const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
 
   const styles = StyleSheet.create({
     icons: {
@@ -120,6 +121,15 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           ? t('CURBSIDE', 'Curbside')
           : t('DRIVER_THRU', 'Driver thru')
 
+  const handlePaymethodsListString = () => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
   return (
     <>
       {!props.isCustomView && (
@@ -283,20 +293,10 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
             <OText>
               <OText size={13} weight='bold'>
-                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+                {`${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: `}
               </OText>
               {order?.payment_events?.length > 0 ? (
-                <OText size={13}>
-                  {order?.payment_events?.map((event: any, idx: number) => {
-                    return event?.wallet_event
-                      ? idx < order?.payment_events?.length - 1
-                        ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
-                        : walletName[event?.wallet_event?.wallet?.type]?.name
-                      : idx < order?.payment_events?.length - 1
-                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
-                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
-                  })}
-                </OText>
+                <OText size={13}>{`${handlePaymethodsListString()}`}</OText>
               ) : (
                 <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
               )}

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

@@ -118,7 +118,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         : parseDate(order?.delivery_datetime, { utc: false })
       }
           </br>
-          ${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}: ${handlePaymethodsListString()}
+          ${t(paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD', paymethodsLength > 1 ? 'Payment methods' : 'Payment method')}: ${handlePaymethodsListString()}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>

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

@@ -72,7 +72,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getProductPrice = (product: any) => {
     let subOptionPrice = 0;
-    if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
+    if (product?.options?.length > 0 && product?.options[0]?.suboptions?.length > 0) {
       for (const option of product?.options) {
         for (const suboption of option?.suboptions) {
           subOptionPrice += suboption.quantity * suboption.price;
@@ -118,7 +118,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const onTextLayout = useCallback((e: any) => {
     setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
-  },[]);
+  }, []);
 
   return (
     <AccordionSection>

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

@@ -47,7 +47,8 @@ const ProfileUI = (props: ProfileParams) => {
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
     isAlsea,
-    isHideDriverStatus
+    isShowDriverStatus,
+    navigation
   } = props;
 
   const [{ user, sessionLoading }] = useSession();
@@ -361,7 +362,7 @@ const ProfileUI = (props: ProfileParams) => {
             />
           </CenterView>
 
-          {user?.level === 4 && !isHideDriverStatus && (
+          {user?.level === 4 && (
             <EnabledStatusDriver>
               <View style={{ flex: 1 }}>
                 <OText
@@ -369,29 +370,33 @@ const ProfileUI = (props: ProfileParams) => {
                   adjustsFontSizeToFit
                   style={{ ...styles.label, paddingHorizontal: 0 }}>
                   {t(
-                    'AVAILABLE_TO_RECEIVE_ORDERS',
-                    'Available to receive orders',
+                    `${!isShowDriverStatus ? 'NOT_' : ''}AVAILABLE_TO_RECEIVE_ORDERS`,
+                    `${!isShowDriverStatus ? 'You are not ' : ''}Available to receive orders`
                   )}
                 </OText>
               </View>
 
-              {userState.loadingDriver ? (
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-              ) : (
-                <ToggleSwitch
-                  isOn={userState?.result?.result?.available}
-                  onColor={theme.colors.primary}
-                  offColor={theme.colors.offColor}
-                  size="small"
-                  onToggle={() =>
-                    handleToggleAvalaibleStatusDriver &&
-                    handleToggleAvalaibleStatusDriver(
-                      !userState?.result?.result?.available,
-                    )
-                  }
-                  disabled={userState?.loading}
-                  animationSpeed={200}
-                />
+              {isShowDriverStatus && (
+                <>
+                  {userState.loadingDriver ? (
+                    <ActivityIndicator size="small" color={theme.colors.primary} />
+                  ) : (
+                    <ToggleSwitch
+                      isOn={userState?.result?.result?.available}
+                      onColor={theme.colors.primary}
+                      offColor={theme.colors.offColor}
+                      size="small"
+                      onToggle={() =>
+                        handleToggleAvalaibleStatusDriver &&
+                        handleToggleAvalaibleStatusDriver(
+                          !userState?.result?.result?.available,
+                        )
+                      }
+                      disabled={userState?.loading}
+                      animationSpeed={200}
+                    />
+                  )}
+                </>
               )}
             </EnabledStatusDriver>
           )}

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

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

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

@@ -24,7 +24,7 @@ const AddressDetailsUI = (props: any) => {
 
 	const styles = StyleSheet.create({
 		productStyle: {
-			width: width,
+			width,
 			height: 151,
 			marginVertical: 10
 		}
@@ -45,7 +45,7 @@ const AddressDetailsUI = (props: any) => {
 			</ADHeader>
 			{!!apiKey && googleMapsUrl && (
 				<ADMap
-					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
+					style={{ width, flex: 1, marginStart: -20, marginEnd: -20, }}>
 					<FastImage
 						style={styles.productStyle}
 						source={{

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

@@ -471,7 +471,7 @@ const CheckoutUI = (props: any) => {
 					</TopHeader>
 				</View>
 			</SafeAreaView>
-			<Container pt={0} forwardRef={containerRef} noPadding onScroll={handleScroll}>
+			<Container pt={0} forwardRef={containerRef} showsVerticalScrollIndicator={false} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
 						hideArrowLeft

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

@@ -110,7 +110,7 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
-  const progressBarObjt = lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
 
   return (
     <>
@@ -130,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}
@@ -209,6 +209,16 @@ export const OrderProgress = (props: any) => {
       pageSize: 10,
       controlType: 'infinity'
     },
+    propsToFetch: [
+      'id',
+      'name',
+      'business',
+      'status',
+      'delivery_type',
+      'delivery_datetime_utc',
+      'delivery_datetime',
+      'reporting_data'
+    ],
     noGiftCardOrders: true
   }