ordering-ui-react-native 0.18.2 → 0.18.3-release

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

@@ -23,7 +23,7 @@ import { useTheme } from 'styled-components/native';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
+export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermission, getPermissions, isGrantedPermissions, checkBluetoothPermission }: any) => {
   const handleArrowBack: any = () => {
     navigation?.canGoBack() && navigation.goBack();
   };
@@ -48,10 +48,10 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
   const getSuboptions = (suboptions: any) => {
     const array: any = []
     suboptions?.length > 0 &&
-    suboptions?.map((suboption: any) => {
-      const string = `&nbsp;&nbsp;&nbsp;${getFormattedSubOptionName(suboption)}<br/>`
-      array.push(string)
-    })
+      suboptions?.map((suboption: any) => {
+        const string = `&nbsp;&nbsp;&nbsp;${getFormattedSubOptionName(suboption)}<br/>`
+        array.push(string)
+      })
 
     return array.join('')
   }
@@ -60,12 +60,12 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
     const array: any = [];
 
     options?.length &&
-    options?.map((option: any) => {
-      const string =
-      `  ${option.name}<br/>${getSuboptions(option.suboptions)}`;
+      options?.map((option: any) => {
+        const string =
+          `  ${option.name}<br/>${getSuboptions(option.suboptions)}`;
 
-      array.push(string)
-    })
+        array.push(string)
+      })
 
     if (productComment) {
       array.push(`${t('COMMENT', 'Comment')}<br/>&nbsp;&nbsp;&nbsp;&nbsp;${productComment}`)
@@ -80,6 +80,9 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
     !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
     verifyDecimals(order?.summary?.driver_tip, parseNumber);
 
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
+    }`?.replace('  ', ' ')?.trim() ?? ''
+
   const orderSummary = () => {
     return `
     <div>
@@ -88,46 +91,36 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
           ${orderStatus} </br>
 
-          ${t('DELIVERY_TYPE', 'Delivery Type')}: ${
-      deliveryStatus[order?.delivery_type]
-    }
+          ${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
+      }
           </br>
-          ${t('DELIVERY_DATE', 'Delivery Date')}: ${
-      order?.delivery_datetime_utc
+          ${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
         ? parseDate(order?.delivery_datetime_utc)
         : parseDate(order?.delivery_datetime, { utc: false })
-    }
+      }
           </br>
           ${t('PAYMENT_METHOD')}: ${order?.paymethod?.name}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
-        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${
-      order?.customer?.name
-    } ${order?.customer?.middle_name} ${order?.customer?.lastname} ${
-      order?.customer?.second_lastname
-    }
+        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${customerName}
         </br>
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
         ${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}
          </br>
-         ${
-           !!order?.customer?.phone
-             ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                 order?.customer?.phone
-               } </br>`
-             : ''
-         }
+         ${!!order?.customer?.phone
+        ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
+        } </br>`
+        : ''
+      }
          ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address} 
          </br> 
-         ${
-           !!order?.customer?.internal_number
-             ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${
-                 order?.customer?.internal_number
-               } </br>`
-             : ''
-         }
+         ${!!order?.customer?.internal_number
+        ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number
+        } </br>`
+        : ''
+      }
          ${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}
          </p>  
 
@@ -139,30 +132,26 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
         </br> 
         ${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}
         </br> 
-        ${
-          !!order?.business?.phone
-            ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                order?.business?.phone
-              } </br>`
-            : ''
-        } 
+        ${!!order?.business?.phone
+        ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
+        } </br>`
+        : ''
+      } 
 
         ${t('ADDRESS', 'Address')}: ${order?.business?.address} 
         </br>
-        ${
-          !!order?.business?.address_notes
-            ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${
-                order?.business?.address_notes
-              } `
-            : ''
-        }
+        ${!!order?.business?.address_notes
+        ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
+        } `
+        : ''
+      }
         </p>
         <h1> ${t('ORDER_DETAILS', 'Order Details')}</h1>
 
         ${order?.products.length &&
-          order?.products.map(
-            (product: any, i: number) =>
-              `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
+      order?.products.map(
+        (product: any, i: number) =>
+          `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
                 <div style="display:flex;width:100%">
                   <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
                   ${product?.quantity}  ${product?.name}
@@ -179,8 +168,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                   </div>
                 </div>
               </div>`
-          )
-        }
+      )
+      }
         <div style="display: flex;">
 
             <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
@@ -189,62 +178,58 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
             <div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">
               ${parsePrice(
-                order.tax_type === 1
-                  ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                  : order?.summary?.subtotal ?? 0,
-              )}
+        order.tax_type === 1
+          ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+          : order?.summary?.subtotal ?? 0,
+      )}
             </div>
 
         </div>
 
         <div style="display: flex">
-        ${
-          order?.summary?.discount > 0
-            ? order?.offer_type === 1
-              ? `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
+        ${order?.summary?.discount > 0
+        ? order?.offer_type === 1
+          ? `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
                   ${t('DISCOUNT', 'Discount')} (${verifyDecimals(
-                  order?.offer_rate,
-                  parsePrice,
-                )}%)
+            order?.offer_rate,
+            parsePrice,
+          )}%)
                 </div>`
-              : `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%"> ${t(
-                  'DISCOUNT',
-                  'Discount',
-                )}
+          : `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%"> ${t(
+            'DISCOUNT',
+            'Discount',
+          )}
                  </div>`
-            : ''
-        }
-        ${
-          order?.summary?.discount > 0
-            ? `<div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">- ${parsePrice(
-                order?.summary?.discount,
-              )}
+        : ''
+      }
+        ${order?.summary?.discount > 0
+        ? `<div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">- ${parsePrice(
+          order?.summary?.discount,
+        )}
               </div>`
-            : ''
-        }
+        : ''
+      }
         </div>
 
-        ${
-          order?.tax_type !== 1
-            ? `<div style="font-size: 25px">
+        ${order?.tax_type !== 1
+        ? `<div style="font-size: 25px">
                 ${t('TAX', 'Tax')}
                 ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
                 ${parsePrice(order?.summary?.tax ?? 0)}
                 ${t('TAX', 'Tax')}
                 ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
               </div>`
-            : ''
-        }
-
-        ${
-          order?.summary?.delivery_price > 0
-            ? `<div style="font-size: 25px;"> ${t(
-                'DELIVERY_FEE',
-                'Delivery Fee',
-              )}
+        : ''
+      }
+
+        ${order?.summary?.delivery_price > 0
+        ? `<div style="font-size: 25px;"> ${t(
+          'DELIVERY_FEE',
+          'Delivery Fee',
+        )}
               </div>`
-            : ''
-        }
+        : ''
+      }
 
         <div style="display: flex">
 
@@ -336,6 +321,25 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
     },
   });
 
+  const handlePrint = async () => {
+    if (Platform.OS === 'ios') {
+      silentPrint()
+      return
+    }
+    const _permissions = await getPermissions()
+
+    if (!isGrantedPermissions) {
+      checkBluetoothPermission()
+    }
+    if (isGrantedPermissions) {
+      const response = await askBluetoothPermission();
+      const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.[_permission] === 'granted', true)
+      if (isGranted) {
+        printPDF()
+      }
+    }
+  };
+
   return (
     <>
       <Content>
@@ -364,17 +368,15 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${
-                deliveryStatus[order?.delivery_type]
-              }`}
+              {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
+                }`}
             </OText>
 
             <OText style={{ marginBottom: 5 }}>
-              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${
-                order?.delivery_datetime_utc
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })
-              }`}
+              {`${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })
+                }`}
             </OText>
 
             <OText style={{ marginBottom: 5 }}>{`${t('PAYMENT_METHOD')}: ${t(
@@ -399,11 +401,7 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
               adjustsFontSizeToFit
               ellipsizeMode="tail"
               color={theme.colors.textGray}>
-              {`${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name} ${
-                order?.customer?.middle_name
-              } ${order?.customer?.lastname} ${
-                order?.customer?.second_lastname
-              }`}
+              {`${t('FULL_NAME', 'Full Name')}: ${customerName}`}
             </OText>
 
             <OText
@@ -423,9 +421,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
               adjustsFontSizeToFit
               ellipsizeMode="tail"
               color={theme.colors.textGray}>
-              {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                order?.customer?.cellphone
-              }`}
+              {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
+                }`}
             </OText>
 
             {!!order?.customer?.phone && (
@@ -436,9 +433,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 adjustsFontSizeToFit
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${
-                  order?.customer?.phone
-                }`}
+                {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
+                  }`}
               </OText>
             )}
 
@@ -508,9 +504,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 numberOfLines={2}
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                  order?.business?.cellphone
-                }`}
+                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
+                  }`}
               </OText>
             )}
 
@@ -521,9 +516,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 numberOfLines={2}
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${
-                  order?.business?.phone
-                }`}
+                {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
+                  }`}
               </OText>
             )}
 
@@ -545,9 +539,8 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
                 adjustsFontSizeToFit
                 ellipsizeMode="tail"
                 color={theme.colors.textGray}>
-                {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${
-                  order?.business?.address_notes
-                }`}
+                {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
+                  }`}
               </OText>
             )}
           </OrderBusiness>
@@ -686,9 +679,7 @@ export const OrderSummary = ({ order, navigation, orderStatus }: any) => {
 
       <View style={{ marginBottom: 0 }}>
         <FloatingButton
-          firstButtonClick={() =>
-            Platform.OS === 'ios' ? silentPrint() : printPDF()
-          }
+          firstButtonClick={() => handlePrint()}
           btnText={t('PRINT', 'Print')}
           color={theme.colors.green}
           widthButton={'100%'}

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

@@ -40,6 +40,7 @@ import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
 import { OrderDetailsBusiness } from '../OrderDetails/Business';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
@@ -314,7 +315,11 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          <View style={{ flex: 1 }}>
+            <WebsocketStatus />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 1 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -330,7 +335,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
             />
           </View>
           <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -209,7 +209,7 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }

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

@@ -6,12 +6,14 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
+import { WebsocketStatus } from '../WebsocketStatus'
 
-import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
+import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import {
   FiltersTab,
@@ -73,6 +75,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const defaultSearchList = {
     id: '',
+    external_id: '',
     state: '',
     city: '',
     business: '',
@@ -92,35 +95,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [{ parseDate }] = useUtils()
   const [configState] = useConfig()
   const [orientationState] = useDeviceOrientation();
-  const [, { showToast }] = useToast();
   const [openSearchModal, setOpenSearchModal] = useState(false)
   const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
-  const [selectedTabStatus, setSelectedTabStatus] = useState<any>([])
-  const [hour, setHour] = useState(0)
-  const [minute, setMinute] = useState(0)
-  const [openedSelect, setOpenedSelect] = useState('')
-  const WIDTH_SCREEN = orientationState?.dimensions?.width
-  const HEIGHT_SCREEN = orientationState?.dimensions?.height
-  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
-
-  const preorderTypeList = [
-    { key: null, name: t('SLA', 'SLA\'s') },
-    { key: 'in_time', name: t('OK', 'Ok') },
-    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
-    { key: 'delayed', name: t('DELAYED', 'Delayed') }
-  ]
-
-  const defaultOrderTypes = [
-    { key: 1, name: t('DELIVERY', 'Delivery') },
-    { key: 2, name: t('PICKUP', 'Pickup') },
-    { key: 3, name: t('EAT_IN', 'Eat in') },
-    { key: 4, name: t('CURBSIDE', 'Curbside') },
-    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
-  ]
-
   const deliveryStatus = [
     {
       key: t('OK', 'Ok'),
@@ -144,6 +123,26 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       backColor: '#E63757'
     }
   ]
+  const [selectedTabStatus, setSelectedTabStatus] = useState<any>(deliveryStatus)
+  const [openedSelect, setOpenedSelect] = useState('')
+
+  const HEIGHT_SCREEN = orientationState?.dimensions?.height
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
 
   const styles = StyleSheet.create({
     header: {
@@ -385,10 +384,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setTags({ values: [] })
   }, [currentTabSelected])
 
-  useEffect(() => {
-    setSelectedTabStatus(deliveryStatus)
-  }, [])
-
   return (
     <>
       <View style={styles.header}>
@@ -409,6 +404,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
+      <WebsocketStatus />
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
           <View style={{ flex: 0.5 }}>
@@ -610,6 +606,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 orderTitle={props.orderDetailsProps?.orderTitle}
                 handleChangeOrderStatus={handleChangeOrderStatus}
                 handleSendCustomerReview={handleSendCustomerReview}
+                isBusinessApp={isBusinessApp}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -620,6 +617,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
+                isBusinessApp={isBusinessApp}
                 isLogisticOrder
               />
             )
@@ -730,6 +728,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                     onPress={() => setSearch({ ...search, id: '' })}
                   />
                 </InputContainer>
+                <InputContainer>
+                  <OInput
+                    value={search.external_id}
+                    onChange={(value: any) => setSearch({ ...search, external_id: value })}
+                    style={styles.inputStyle}
+                    placeholder={t('EXTERNAL_ID', 'External id')}
+                    autoCorrect={false}
+                  />
+                  <AntDesignIcon
+                    name='close'
+                    size={20}
+                    style={{ position: 'absolute', right: 12, top: 13 }}
+                    onPress={() => setSearch({ ...search, external_id: '' })}
+                  />
+                </InputContainer>
                 <OrdersOptionDate
                   {...props}
                   search={search}
@@ -919,15 +932,13 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
-  const [configState] = useConfig()
-  const theme = useTheme()
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,