ordering-ui-react-native 0.18.58 → 0.18.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.58",
+  "version": "0.18.60",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -49,6 +49,8 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
+    "@segment/analytics-react-native": "2.1.11",
+    "@segment/sovran-react-native": "0.2.6",
     "@sentry/react-native": "^2.6.0",
     "@stripe/stripe-react-native": "^0.2.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
@@ -81,6 +83,7 @@
     "react-native-fbsdk-next": "^7.0.1",
     "react-native-geocoding": "^0.5.0",
     "react-native-gesture-handler": "^1.8.0",
+    "react-native-get-random-values": "1.8.0",
     "react-native-gifted-chat": "^0.16.3",
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",

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

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 //OrderingComponent
 import {
@@ -12,6 +13,7 @@ import {
   useToast,
   useSession,
   ToastType,
+  useUtils
 } from 'ordering-components/native';
 
 //Components
@@ -26,7 +28,7 @@ import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
 import { NotFoundSource } from '../NotFoundSource';
-import { getOrderStatus } from '../../utils';
+import { verifyDecimals, getProductPrice, getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
 //Styles
@@ -56,6 +58,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     isGrantedPermissions,
   } = props;
   const [, { showToast }] = useToast();
+  const [{ parsePrice, parseNumber }] = useUtils();
   const { order } = props.order
   const theme = useTheme();
   const [, t] = useLanguage();
@@ -134,6 +137,163 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   };
 
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
+    if (name !== 'No') {
+      const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
+      return pos
+        ? `${quantity} x ${name} ${pos} +${parsePrice(price)}\n`
+        : `${quantity} x ${name} +${parsePrice(price)}\n`;
+    } else {
+      return 'No\n';
+    }
+  };
+
+  const handleCopyClipboard = () => {
+    const businessName = !!order?.business?.name
+      ? `${order?.business?.name} \n`
+      : '';
+
+    const businessEmail = !!order?.business?.email
+      ? `${order?.business?.email} \n`
+      : '';
+
+    const businessCellphone = !!order?.business?.cellphone
+      ? `${order?.business?.cellphone} \n`
+      : '';
+
+    const businessPhone = !!order?.business?.phone
+      ? `${order?.business?.phone} \n`
+      : '';
+
+    const businessAddress = !!order?.business?.address
+      ? `${order?.business?.address} \n`
+      : '';
+
+    const businessSpecialAddress = !!order?.business?.address_notes
+      ? `${order?.business?.address_notes} \n \n`
+      : '';
+
+    const customerName = !!order?.customer?.name
+      ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${order?.customer?.lastname || ''
+      } ${order?.customer?.second_lastname || ''} \n`
+      : '';
+
+    const customerEmail = !!order?.customer.email
+      ? `${order?.customer.email} \n`
+      : '';
+
+    const customerCellPhone = !!order?.customer?.cellphone
+      ? `${order?.customer?.cellphone} \n`
+      : '';
+
+    const customerPhone = !!order?.customer?.phone
+      ? `${order?.customer?.phone} \n`
+      : '';
+
+    const customerAddress = !!order?.customer?.address
+      ? `${order?.customer?.address} \n`
+      : '';
+
+    const customerSpecialAddress = !!order?.customer?.address_notes
+      ? `${order?.customer?.address_notes} \n`
+      : '';
+
+    const payment = order?.paymethod?.name
+      ? `${order?.paymethod?.name} - ${order.delivery_type === 1
+        ? t('DELIVERY', 'Delivery')
+        : order.delivery_type === 2
+          ? t('PICKUP', 'Pickup')
+          : order.delivery_type === 3
+            ? t('EAT_IN', 'Eat in')
+            : order.delivery_type === 4
+              ? t('CURBSIDE', 'Curbside')
+              : t('DRIVER_THRU', 'Driver thru')
+      }\n`
+      : '';
+
+    const getSuboptions = (suboptions: any) => {
+      const array: any = []
+      suboptions?.length > 0 &&
+        suboptions?.map((suboption: any) => {
+          const string = `${getFormattedSubOptionName(suboption)}`
+          array.push(string)
+        })
+
+      return array.join('')
+    }
+
+    const getOptions = (options: any, productComment: string = '') => {
+      const array: any = [];
+
+      options?.length &&
+        options?.map((option: any) => {
+          const string =
+            `  ${option.name}\n    ${getSuboptions(option.suboptions)}`;
+
+          array.push(string)
+        })
+
+      if (productComment) {
+        array.push(`  ${t('COMMENT', 'Comment')}\n    ${productComment}\n`)
+      }
+
+      return array.join('')
+    }
+
+    const productsInArray =
+      order?.products.length &&
+      order?.products.map((product: any, i: number) => {
+        const string =
+          `${product?.quantity} X ${product?.name} ${parsePrice(product.total ?? getProductPrice(product))}\n${getOptions(product.options, product.comment)}`;
+
+        return i === 0 ? ` ${string}` : string
+      });
+
+    const productsInString = productsInArray.join(' ');
+    const orderDetails = `${t(
+      'ORDER_DETAILS',
+      'Order Details',
+    )}:\n${productsInString}\n`;
+
+    const subtotal = `${t('SUBTOTAL', 'Subtotal')}: ${parsePrice(
+      order?.subtotal,
+    )}\n`;
+
+    const drivertip = `${t('DRIVER_TIP', 'Driver tip')} ${parsePrice(
+      order?.summary?.driver_tip || order?.totalDriverTip,
+    )}\n`;
+
+    const deliveryFee = `${t('DELIVERY_FEE', 'Delivery fee')} ${verifyDecimals(
+      order?.service_fee,
+      parseNumber,
+    )}% ${parsePrice(order?.summary?.service_fee || order?.serviceFee || 0)}\n`;
+
+    const total = `${t('TOTAL', 'Total')} ${parsePrice(
+      order?.summary?.total || order?.total,
+    )}\n`;
+
+    const orderStatus = `${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
+      'IS',
+      'is',
+    )} ${getOrderStatus(order?.status, t)?.value}\n`;
+
+    Clipboard.setString(
+      `${orderStatus} ${payment} ${t(
+        'BUSINESS_DETAILS',
+        'Business Details',
+      )}\n ${businessName} ${businessEmail} ${businessCellphone} ${businessPhone} ${businessAddress} ${businessSpecialAddress}${t(
+        'CUSTOMER_DETAILS',
+        'Customer Details',
+      )}\n ${customerName} ${customerEmail} ${customerCellPhone} ${customerPhone} ${customerAddress} ${customerSpecialAddress}\n${orderDetails} ${subtotal} ${drivertip} ${deliveryFee} ${total}`,
+    );
+
+    showToast(
+      ToastType.Info,
+      t('COPY_TO_CLIPBOARD', 'Copy to clipboard.'),
+      1000,
+    );
+  };
+
   const handleViewActionOrder = (action: string) => {
     if (!isGrantedPermissions) {
       navigation.navigate('RequestPermissions')
@@ -362,6 +522,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               order={order}
               handleOpenMapView={handleOpenMapView}
               handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
+              handleCopyClipboard={handleCopyClipboard}
               getOrderStatus={getOrderStatus}
               handleArrowBack={handleArrowBack}
               logisticOrderStatus={logisticOrderStatus}

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

@@ -140,14 +140,16 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         style={styles.icons}
                       />
                     </TouchableOpacity>
-                    <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
-                      <SimpleLineIcons
-                        name='printer'
-                        color={theme.colors.textGray}
-                        size={20}
-                        style={styles.icons}
-                      />
-                    </TouchableOpacity>
+                    {!!handleViewSummaryOrder && (
+                      <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                        <SimpleLineIcons
+                          name='printer'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
+                    )}
                   </>
                 )}
               <OIconButton
@@ -205,14 +207,16 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                           style={styles.icons}
                         />
                       </TouchableOpacity>
-                      <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
-                        <SimpleLineIcons
-                          name='printer'
-                          color={theme.colors.textGray}
-                          size={20}
-                          style={styles.icons}
-                        />
-                      </TouchableOpacity>
+                      {!!handleViewSummaryOrder && (
+                        <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                          <SimpleLineIcons
+                            name='printer'
+                            color={theme.colors.textGray}
+                            size={20}
+                            style={styles.icons}
+                          />
+                        </TouchableOpacity>
+                      )}
                     </>
                   )}
                 <OIconButton

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

@@ -159,7 +159,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   useEffect(() => {
     if (scrollref?.current) {
       Keyboard.addListener('keyboardDidShow', () => {
-        scrollref.current.scrollToEnd()
+        scrollref?.current && scrollref.current.scrollToEnd()
       })
     }
   }, [scrollref?.current])

package/themes/original/index.tsx

@@ -1,6 +1,6 @@
 import { AddressForm } from './src/components/AddressForm';
 import { AddressDetails } from './src/components/AddressDetails';
-// import { AnalyticsSegment } from './src/components/AnalyticsSegment';
+import { AnalyticsSegment } from './src/components/AnalyticsSegment';
 import { Home } from './src/components/Home';
 import { LoginForm } from './src/components/LoginForm';
 import { SignupForm } from './src/components/SignupForm';
@@ -167,7 +167,7 @@ import {
 export {
 	AddressForm,
 	AddressDetails,
-	// AnalyticsSegment,
+	AnalyticsSegment,
 	Home as HomeView,
 	SignupForm,
 	LoginForm,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   createClient,
-  // AnalyticsProvider
+  AnalyticsProvider
 } from '@segment/analytics-react-native';
 import { useEvent, useConfig, useLanguage } from 'ordering-components/native';
 
@@ -302,9 +302,9 @@ export const AnalyticsSegment = (props: any) => {
 
   return (
     <>
-      {/* <AnalyticsProvider client={segmentClient}>
+      <AnalyticsProvider client={segmentClient}>
         {children}
-      </AnalyticsProvider> */}
+      </AnalyticsProvider>
     </>
   )
 }

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

@@ -345,7 +345,7 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    {!offer?.type && !!offer?.id && (
+                    {!!offer?.id && (
                       <OfferAlert offerId={offer?.id} />
                     )}
                   </OSRow>

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

@@ -23,6 +23,7 @@ const DriverTipsUI = (props: any) => {
 		driverTip,
 		driverTipsOptions,
 		isMulti,
+		isLoading,
 		cart,
 		carts,
 		isDriverTipUseCustom,
@@ -79,8 +80,10 @@ const DriverTipsUI = (props: any) => {
 					<TouchableOpacity
 						key={i}
 						onPress={() => {
-							handlerChangeOption(option)
-							setCustomTip(false)
+							if (!isLoading) {
+								handlerChangeOption(option)
+								setCustomTip(false)
+							}
 						}}
 					>
 						<DTCard
@@ -95,7 +98,7 @@ const DriverTipsUI = (props: any) => {
 				))}
 				{isDriverTipUseCustom && (
 					<TouchableOpacity
-						onPress={() => setCustomTip(true)}
+						onPress={() => { !isLoading && setCustomTip(true) }}
 					>
 						<DTCard
 							style={style.semicircle}

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

@@ -256,10 +256,18 @@ const LoginFormUI = (props: LoginParams) => {
 		setOtpType(type)
 	}
 
-	const handleLoginOtp = (code: string) => {
+	const handleLoginOtp = async (code: string) => {
 		if (!code) return
-		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
+		const logged = await handleButtonLoginClick({ code })
+		if (logged){
+			setWillVerifyOtpState(false)
+		} else {
+			setAlertState({
+				open: true,
+				title: '',
+				content: t('OTP_CODE_INCORRECT', 'Otp code incorrect')
+			})
+		}
 	}
 
 	const closeAlert = () => {

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

@@ -90,6 +90,15 @@ const MultiCheckoutUI = (props: any) => {
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
 
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -316,6 +325,7 @@ const MultiCheckoutUI = (props: any) => {
                   </OText>
                   <DriverTips
                     isMulti
+                    isLoading={loading}
                     carts={openCarts}
                     businessIds={openCarts.map((cart: any) => cart.business_id)}
                     driverTipsOptions={driverTipsOptions}
@@ -413,6 +423,16 @@ const MultiCheckoutUI = (props: any) => {
                         </OText>
                       </View>
                     )}
+                  {!cartGroup?.loading && cartGroup?.result?.payment_events?.length > 0 && cartGroup?.result?.payment_events?.map((event: any) => (
+                    <View key={event.id} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {walletName[cartGroup?.result?.wallets?.find((wallet: any) => wallet.wallet_id === event.wallet_id)?.type]?.name}
+                      </OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        -{parsePrice(event.amount, { isTruncable: true })}
+                      </OText>
+                    </View>
+                  ))}
                   <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                     <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
                       {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}