ordering-ui-react-native 0.10.3 → 0.11.3

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

@@ -5,10 +5,12 @@ export const FiltersTab = styled.View`
 `;
 
 export const TabsContainer = styled.View`
-  min-width: ${({ width }: { width: number }) => `${width}px`};
-  width: auto;
+  width: ${({ width }: { width: number }) => `${width-42}px`};
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
 `;
 
 export const Tag = styled.Pressable`

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

@@ -188,32 +188,39 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       flex: 1,
       minHeight: 64,
       marginBottom: 30,
+      marginLeft: 3,
     },
     icon: {
       borderRadius: 7.6,
-      width: 70,
-      height: 70,
+      width: 75,
+      height: 75,
     },
     logo: {
-      padding: 2,
-      borderRadius: 18,
-      shadowColor: '#000',
+      width: 78,
+      height: 78,
+      borderRadius: 25,
+      shadowColor: 'rgba(0.0, 0.0, 0.0, 0.5)',
       shadowOffset: {
         width: 0,
         height: 1.5,
       },
       shadowOpacity: 0.21,
-      shadowRadius: 3,
+      shadowRadius: 5,
       elevation: 7,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
     },
     title: {
+      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
-      fontSize: 18,
+      fontSize: 16,
       color: theme.colors.textGray,
     },
     badge: {
+      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -221,6 +228,7 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       color: theme.colors.primary,
     },
     date: {
+      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -284,7 +292,6 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
                   style={styles.orderType}
                   mRight={5}
                   numberOfLines={1}
-                  size={18}
                   adjustsFontSizeToFit>
                   {getOrderStatus(order?.status)?.value}
                 </OText>

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

@@ -1,37 +1,19 @@
-// React & React Native
 import React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-
-// Ordering
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
-
-// Own
+import { OIcon, OText } from '../shared';
 import { Card, Logo, Information, MyOrderOptions } from './styles';
-import { NotFoundSource } from '../NotFoundSource';
-import { OIcon, OText, OButton } from '../shared';
-import { PreviousOrdersParams } from '../../types';
-import dayjs from 'dayjs';
 
-export const PreviousOrders = (props: PreviousOrdersParams) => {
-  const {
-    data: { orders, pagination, loading, error },
-    tab,
-    loadOrders,
-    isRefreshing,
-    tagsFilter,
-    getOrderStatus,
-    onNavigationRedirect,
-  } = props;
-
-  // Hooks
+export const PreviousOrders = (props: any) => {
+  const { orders, onNavigationRedirect, getOrderStatus } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
 
-  // Handles
   const handlePressOrder = (order: any) => {
-    onNavigationRedirect?.('OrderDetails', { order: order });
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { order: order });
   };
 
   const styles = StyleSheet.create({
@@ -39,32 +21,39 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
       flex: 1,
       minHeight: 64,
       marginBottom: 30,
+      marginLeft: 3,
     },
     icon: {
       borderRadius: 7.6,
-      width: 70,
-      height: 70,
+      width: 75,
+      height: 75,
     },
     logo: {
-      padding: 2,
-      borderRadius: 18,
-      shadowColor: '#000',
+      width: 78,
+      height: 78,
+      borderRadius: 25,
+      shadowColor: 'rgba(0.0, 0.0, 0.0, 0.5)',
       shadowOffset: {
         width: 0,
         height: 1.5,
       },
       shadowOpacity: 0.21,
-      shadowRadius: 3,
+      shadowRadius: 5,
       elevation: 7,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
     },
     title: {
+      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
-      fontSize: 18,
+      fontSize: 16,
       color: theme.colors.textGray,
     },
     date: {
+      marginBottom: 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -72,130 +61,86 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
       color: theme.colors.unselectText,
     },
     orderType: {
+      fontSize: 15,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
       color: theme.colors.orderTypeColor,
     },
-    loadButton: {
-      borderRadius: 7.6,
-      height: 44,
-      marginRight: 10,
-      marginBottom: 10,
-      marginTop: 5,
-    },
-    loadButtonText: {
-      color: theme.colors.inputTextColor,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 18,
-    },
   });
 
+  let hash: any = {};
+
   return (
     <>
-      {!loading &&
-        (!orders?.filter((order: any) => tagsFilter?.includes(order.status))
-          ?.length ||
-          error ||
-          !tagsFilter?.length) && (
-          <NotFoundSource
-            content={
-              !error
-                ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
-                : error[0]?.message ||
-                  error[0] ||
-                  t('NETWORK_ERROR', 'Network Error')
-            }
-            image={theme.images.general.notFound}
-            conditioned={false}
-          />
-        )}
-
-      {orders?.length > 0 &&
+      {orders && orders?.length > 0 &&
         orders
-          ?.filter((order: any) => tagsFilter?.includes(order.status))
-          ?.sort((a: any, b: any) => {
-            return dayjs(b.created_at).unix() - dayjs(a.created_at).unix();
-          })
-          .map((order: any) => (
-            <React.Fragment key={order.id}>
-              <TouchableOpacity
-                onPress={() => handlePressOrder(order)}
-                style={styles.cardButton}
-                activeOpacity={1}>
-                <Card key={order.id}>
-                  {!!order.business?.logo && (
-                    <Logo style={styles.logo}>
-                      <OIcon
-                        url={optimizeImage(
-                          order.business?.logo,
-                          'h_300,c_limit',
-                        )}
-                        style={styles.icon}
-                      />
-                    </Logo>
-                  )}
-
-                  <Information>
-                    <OText numberOfLines={1} style={styles.title}>
-                      {order.business?.name}
-                    </OText>
+          .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+          .map((order: any) =>
+      (
+        <React.Fragment key={order.id}>
+          <TouchableOpacity
+            onPress={() => handlePressOrder(order)}
+            style={styles.cardButton}
+            activeOpacity={1}
+          >
+            <Card key={order.id}>
+              {!!order.business?.logo && (
+                <Logo style={styles.logo}>
+                  <OIcon
+                    url={optimizeImage(
+                      order.business?.logo,
+                      'h_300,c_limit',
+                    )}
+                    style={styles.icon}
+                  />
+                </Logo>
+              )}
 
-                    <OText
-                      style={styles.date}
-                      numberOfLines={1}
-                      adjustsFontSizeToFit
-                      size={20}>
-                      {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
-                      {order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })}
-                    </OText>
+              <Information>
+                <OText numberOfLines={1} style={styles.title}>
+                  {order.business?.name}
+                </OText>
 
-                    <MyOrderOptions>
-                      <OText
-                        style={styles.orderType}
-                        mRight={5}
-                        numberOfLines={1}
-                        adjustsFontSizeToFit
-                        size={18}>
-                        {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')}
-                        {` · ${getOrderStatus?.(order.status)}`}
-                      </OText>
-                    </MyOrderOptions>
-                  </Information>
-                </Card>
-              </TouchableOpacity>
-            </React.Fragment>
-          ))}
+                <OText
+                  style={styles.date}
+                  numberOfLines={1}
+                  adjustsFontSizeToFit
+                  size={20}>
+                  {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
+                  {order?.delivery_datetime_utc
+                    ? parseDate(order?.delivery_datetime_utc)
+                    : parseDate(order?.delivery_datetime, { utc: false })}
+                </OText>
 
-      {!error &&
-        pagination?.totalPages &&
-        !loading &&
-        !isRefreshing &&
-        pagination?.currentPage < pagination?.totalPages &&
-        !!tagsFilter?.length && (
-          <OButton
-            onClick={() => loadOrders?.(tab, true)}
-            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-            imgRightSrc={null}
-            textStyle={styles.loadButtonText}
-            style={styles.loadButton}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            isDisabled={isRefreshing || loading}
-          />
-        )}
+                <MyOrderOptions>
+                  <OText
+                    style={styles.orderType}
+                    mRight={5}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                  >
+                    {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')}
+                    {` · ${getOrderStatus(order.status)}`}
+                  </OText>
+                </MyOrderOptions>
+              </Information>
+            </Card>
+          </TouchableOpacity>
+        </React.Fragment>
+      ))}
     </>
   );
 };
+
+PreviousOrders.defaultProps = {
+  orders: []
+}

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components/native';
 export const Card = styled.View`
   flex: 1;
   flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
 `;
 
 export const Logo = styled.View`
@@ -11,11 +13,10 @@ export const Logo = styled.View`
 `;
 
 export const Information = styled.View`
-  justify-content: space-between;
-  align-items: flex-start;
+  justify-content: flex-start;
   margin-horizontal: 10px;
   flex: 1;
-  min-height: 64px;
+  max-height: 70px;
 `;
 
 export const MyOrderOptions = styled.View`

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

@@ -64,6 +64,44 @@ const ProfileUI = (props: ProfileParams) => {
     },
   });
   const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+  const [phoneToShow, setPhoneToShow] = useState('');
+
+  useEffect(() => {
+    if (phoneInputData.phone.cellphone) {
+      const codeNumberPhone = phoneInputData.phone.cellphone.slice(0, 3);
+      const numberPhone = phoneInputData.phone.cellphone.slice(
+        3,
+        phoneInputData.phone.cellphone?.length,
+      );
+      setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
+    }
+  }, [phoneInputData.phone.cellphone]);
+
+  const setUserCellPhone = (isEdit = false) => {
+    if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
+      setUserPhoneNumber(userPhoneNumber);
+      return;
+    }
+    if (user?.cellphone) {
+      let phone = null;
+      if (user?.country_phone_code) {
+        phone = `+${user?.country_phone_code} ${user?.cellphone}`;
+      } else {
+        phone = user?.cellphone;
+      }
+      setUserPhoneNumber(phone);
+      setPhoneInputData({
+        ...phoneInputData,
+        phone: {
+          country_phone_code: user?.country_phone_code || null,
+          cellphone: user?.cellphone || null,
+        },
+      });
+      return;
+    }
+    setUserPhoneNumber(user?.cellphone || '');
+  };
 
   const handleImagePicker = () => {
     launchImageLibrary(
@@ -120,6 +158,16 @@ const ProfileUI = (props: ProfileParams) => {
     }
   }, [userState?.loadingDriver]);
 
+  useEffect(() => {
+    if ((user || !isEdit) && !formState?.loading) {
+      setUserCellPhone();
+      if (!isEdit && !formState?.loading) {
+        cleanFormState && cleanFormState({ changes: {} });
+        setUserCellPhone(true);
+      }
+    }
+  }, [user, isEdit]);
+
   useEffect(() => {
     if (formState.result.result && !formState.loading) {
       if (formState.result?.error) {
@@ -295,12 +343,17 @@ const ProfileUI = (props: ProfileParams) => {
 
           {user?.level === 4 && (
             <EnabledStatusDriver>
-              <OText style={{ ...styles.label, paddingHorizontal: 0 }}>
-                {t(
-                  'AVAILABLE_TO_RECEIVE_ORDERS',
-                  'Available to receive orders',
-                )}
-              </OText>
+              <View style={{ flex: 1 }}>
+                <OText
+                  numberOfLines={2}
+                  adjustsFontSizeToFit
+                  style={{ ...styles.label, paddingHorizontal: 0 }}>
+                  {t(
+                    'AVAILABLE_TO_RECEIVE_ORDERS',
+                    'Available to receive orders',
+                  )}
+                </OText>
+              </View>
 
               {userState.loadingDriver ? (
                 <ActivityIndicator size="small" color={theme.colors.primary} />
@@ -379,6 +432,20 @@ const ProfileUI = (props: ProfileParams) => {
                       selectionColor={theme.colors.primary}
                       color={theme.colors.textGray}
                     />
+
+                    <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
+
+                    <OInput
+                      isSecured={true}
+                      placeholder={
+                        phoneToShow || `${t('NOT_PHONE', 'Not Phone')}`
+                      }
+                      placeholderTextColor={theme.colors.textGray}
+                      style={styles.inputStyle}
+                      isDisabled={true}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.textGray}
+                    />
                   </UDWrapper>
                 )}
             </UserData>

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

@@ -9,7 +9,6 @@ export const UserData = styled.View`
   align-items: center;
   flex-direction: column;
   width: 100%;
-  margin-top: 20px;
 `;
 
 export const EditButton = styled.View`
@@ -23,7 +22,6 @@ export const EnabledStatusDriver = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
 `;
 
 export const Actions = styled.View`

package/themes/business/src/components/shared/OModal.tsx

@@ -68,14 +68,16 @@ const OModal = (props: Props): React.ReactElement => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 20,
-      height: 45,
+      paddingHorizontal: 30,
+      paddingTop: 30,
+      paddingBottom: 25,
       borderBottomWidth: 2,
       borderBottomColor: '#e6e6e6',
     },
     titleGroups: {
       alignItems: 'center',
       flexDirection: 'row',
+      minHeight: 33,
     },
     titleIcons: {
       height: 33,
@@ -87,7 +89,7 @@ const OModal = (props: Props): React.ReactElement => {
       height: 34,
       width: 34,
       alignItems: 'center',
-      justifyContent: 'center',
+      justifyContent: 'flex-start',
       marginLeft: 15,
       backgroundColor: theme.colors.clear,
       paddingHorizontal: 3,
@@ -104,16 +106,16 @@ const OModal = (props: Props): React.ReactElement => {
     cancelBtn: {
       marginRight: 5,
       zIndex: 10000,
-      height: 30,
-      width: 20,
+      maxWidth: 40,
+      height: 25,
       justifyContent: 'flex-end',
+      alignItems: 'flex-start',
     },
     modalText: {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
       color: theme.colors.textGray,
-      textAlign: 'center',
       zIndex: 10,
     },
     wrapperIcon: {
@@ -203,7 +205,7 @@ const OModal = (props: Props): React.ReactElement => {
                 <View style={styles.titleGroups}>
                   <OIconButton
                     icon={theme.images.general.arrow_left}
-                    iconStyle={{ width: 23, height: 23 }}
+                    iconStyle={{ width: 20, height: 20 }}
                     borderColor={theme.colors.clear}
                     style={styleCloseButton || styles.cancelBtn}
                     onClick={onClose}

package/themes/business/src/components/shared/OTextarea.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components/native';
 import { useTheme } from 'styled-components/native';
 
 const Wrapper = styled.View`
-  padding: 10px;
   border-radius: 10px;
   border: 1px solid ${(props: any) => props.theme.colors.lightGray};
 `;
@@ -18,6 +17,7 @@ interface Props {
   onChange?: any;
   onFocus?: any;
   textTareaRef?: any;
+  autoFocus?: boolean;
 }
 
 const OTextarea = (props: Props) => {
@@ -34,6 +34,7 @@ const OTextarea = (props: Props) => {
         numberOfLines={props.lines}
         underlineColorAndroid={'transparent'}
         value={props.value}
+        autoFocus={props.autoFocus}
         multiline={true}
         selectionColor={theme.colors.primary}
         color={theme.colors.textGray}

package/themes/business/src/layouts/SafeAreaContainer.tsx

@@ -33,8 +33,8 @@ export const SafeAreaContainerLayout = (props: any) => {
       <SafeAreaContainer>
         <View
           style={{
-            paddingHorizontal: 20,
-            paddingTop: 20,
+            paddingHorizontal: 30,
+            paddingTop: 30,
             paddingBottom: 0,
             flex: 1,
           }}>

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

@@ -252,19 +252,28 @@ export interface MessagesOptionParams {
   setSortBy?: any;
 }
 export interface OrdersOptionParams {
-  pending?: any;
-  inProgress?: any;
-  completed?: any;
-  cancelled?: any;
-  activeStatus?: number[];
-  setActiveStatus?: (state: number[]) => void;
-  loadOrders?: (
-    tab: string,
-    isNextPage?: boolean,
-    isRefresh?: boolean,
-    activeStatus?: number[] | undefined,
-  ) => void;
-  onNavigationRedirect?: (route: string, params?: any) => void;
+  orderList?: any;
+  activeOrders?: boolean;
+  pagination?: any;
+  setRememberOrderStatus?: any;
+  rememberOrderStatus?: any;
+  titleContent?: string;
+  customArray?: Array<any>;
+  loadMoreOrders?: () => {};
+  loadOrders?: ({}: any) => {};
+  messages?: any;
+  setMessages?: () => {};
+  loadMessages?: () => {};
+  navigation?: any;
+  setUpdateOtherStatus?: any;
+  onNavigationRedirect?: any;
+  orderStatus?: any;
+  tabs?: any;
+  currentTabSelected?: any;
+  setCurrentTabSelected?: any;
+  ordersGroup?: any;
+  setOrdersGroup?: any;
+  setCurrentFilters?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -412,6 +421,8 @@ export interface FloatingButtonParams {
   btnRightValue?: string;
   btnText: string;
   secondBtnText?: string;
+  isPadding?: boolean;
+  widthButton?: number | string;
   firstButtonClick?: any;
   secondButtonClick?: any;
   color?: string;