ordering-ui-react-native 0.12.14 → 0.12.18

package/themes/business/src/components 2/Chat/styles.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components/native';
+
+export const Wrapper = styled.View`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.white};
+`;
+
+export const Header = styled.ScrollView``;
+
+export const TitleHeader = styled.View`
+  margin-left: 11px;
+`;

package/themes/business/src/components 2/Contacts/index.tsx

@@ -0,0 +1,299 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  View,
+  Dimensions,
+} from 'react-native';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import {
+  Contacts as ContactsController,
+  useLanguage,
+  useUtils,
+} from 'ordering-components/native';
+import { Card, Logo, Information, Header, Badge, Stars } from './styles';
+import { NotFoundSource } from '../NotFoundSource';
+import { OIcon, OText, OButton } from '../shared';
+import { ContactParams } from '../../types';
+
+const ContactsUI = (props: ContactParams) => {
+  const {
+    contacts: { data, loading, error },
+    activeTag,
+    pagination,
+    getBusinesses,
+    getCustomers,
+    getDrivers,
+    loadMore,
+    onNavigationRedirect,
+  } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const [{ parseDate, optimizeImage }] = useUtils();
+
+  const [orientation, setOrientation] = useState(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+
+  const handlePressOrder = (order: any) => {
+    const uuid = order?.id;
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderMessage', { orderId: uuid });
+  };
+
+  useEffect(() => {
+    if (!loading) {
+      switch (activeTag) {
+        case 2:
+          getBusinesses && getBusinesses();
+          break;
+        case 3:
+          getCustomers && getCustomers();
+          break;
+        case 4:
+          getDrivers && getDrivers();
+          break;
+      }
+    }
+  }, [activeTag]);
+
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
+  const styles = StyleSheet.create({
+    btnCard: {
+      flex: 1,
+      minHeight: 64,
+      marginBottom: 30,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 73,
+      height: 73,
+    },
+    name: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 18,
+      color: theme.colors.textGray,
+    },
+    badge: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 14,
+      color: theme.colors.primary,
+    },
+    star: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 15,
+      color: theme.colors.unselectText,
+    },
+    order: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      color: theme.colors.orderTypeColor,
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+      marginBottom: 40,
+      marginTop: 5,
+    },
+    btnText: {
+      color: theme.colors.white,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+  });
+
+  return (
+    <>
+      <ScrollView style={{ height: '80%' }}>
+        {data?.length > 0 &&
+          data?.map((contact: any) => (
+            <TouchableOpacity
+              key={contact?.id}
+              // onPress={() => handlePressOrder(contact)}
+              onPress={() => {}}
+              style={styles.btnCard}
+              activeOpacity={1}>
+              <Card key={contact?.id}>
+                <Logo>
+                  <OIcon
+                    url={optimizeImage(
+                      contact?.logo || contact?.photo,
+                      'h_300,c_limit',
+                    )}
+                    style={styles.icon}
+                  />
+                </Logo>
+
+                <Information>
+                  <Header>
+                    <OText numberOfLines={1} style={styles.name}>
+                      {contact?.name + ' ' + (contact?.lastname ?? '')}
+                    </OText>
+
+                    {contact?.unread_count > 0 && (
+                      <Badge>
+                        <OText size={14} style={styles.badge}>
+                          {contact?.unread_count}
+                        </OText>
+                      </Badge>
+                    )}
+                  </Header>
+
+                  <Stars>
+                    {[
+                      ...Array(
+                        Number.isInteger(contact?.qualification)
+                          ? contact?.qualification ?? 3
+                          : Math.floor(contact?.qualification) || 3,
+                      ),
+                    ].map((item, index) => (
+                      <MaterialIcon
+                        key={index}
+                        name="star"
+                        size={20}
+                        color={theme.colors.arrowColor}
+                      />
+                    ))}
+
+                    {[
+                      ...Array(
+                        (Number.isInteger(contact?.qualification)
+                          ? contact?.qualification ?? 3
+                          : Math.ceil(contact?.qualification) || 3) -
+                          (Number.isInteger(contact?.qualification)
+                            ? contact?.qualification ?? 3
+                            : Math.floor(contact?.qualification) || 3),
+                      ),
+                    ].map((item, index) => (
+                      <MaterialIcon
+                        key={index}
+                        name="star-half"
+                        size={20}
+                        color={theme.colors.arrowColor}
+                      />
+                    ))}
+
+                    {[
+                      ...Array(
+                        5 -
+                          (Number.isInteger(contact?.qualification)
+                            ? contact?.qualification ?? 3
+                            : Math.ceil(contact?.qualification) || 3),
+                      ),
+                    ].map((item, index) => (
+                      <MaterialIcon
+                        key={index}
+                        name="star-border"
+                        size={20}
+                        color={theme.colors.arrowColor}
+                      />
+                    ))}
+                  </Stars>
+
+                  <OText style={styles.order} numberOfLines={1} size={16}>
+                    {contact?.level === 4
+                      ? contact?.assigned_orders_count
+                      : contact?.level === 3
+                      ? contact?.assigned_orders_count || ''
+                      : ''}{' '}
+                    {t('ORDERS', 'Orders')}
+                  </OText>
+                </Information>
+              </Card>
+            </TouchableOpacity>
+          ))}
+      </ScrollView>
+
+      {!loading && data?.length === 0 && (
+        <NotFoundSource
+          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+          image={theme.images.general.notFound}
+          conditioned={false}
+        />
+      )}
+
+      {loading && (
+        <>
+          <View>
+            {[...Array(5)].map((item, i) => (
+              <Placeholder key={i} Animation={Fade}>
+                <View
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 10,
+                  }}>
+                  <PlaceholderLine
+                    width={orientation === 'Portrait' ? 22 : 11}
+                    height={74}
+                    style={{
+                      marginRight: 20,
+                      marginBottom: 20,
+                      borderRadius: 7.6,
+                    }}
+                  />
+                  <Placeholder>
+                    <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                    <PlaceholderLine width={50} />
+                    <PlaceholderLine width={20} />
+                  </Placeholder>
+                </View>
+              </Placeholder>
+            ))}
+          </View>
+        </>
+      )}
+
+      {!loading && pagination?.currentPage < pagination?.totalPages && (
+        <OButton
+          onClick={() => loadMore && loadMore(activeTag)}
+          text={t('LOAD_MORE', 'Load more')}
+          imgRightSrc={null}
+          textStyle={styles.btnText}
+          style={styles.btn}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+        />
+      )}
+    </>
+  );
+};
+
+export const Contacts = (props: ContactParams) => {
+  const contactProps = {
+    ...props,
+    firstFetch: 'businesses',
+    paginationSettings: {
+      page: 1,
+      pageSize: 6,
+      controlType: 'infinity',
+    },
+    orderBy: 'name',
+    orderDirection: 'asc',
+    UIComponent: ContactsUI,
+  };
+
+  return <ContactsController {...contactProps} />;
+};

package/themes/business/src/components 2/Contacts/styles.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components/native';
+
+export const Card = styled.View`
+  flex: 1;
+  flex-direction: row;
+`;
+
+export const Logo = styled.View`
+  align-items: center;
+  justify-content: center;
+  shadow-color: ${(props: any) => props.theme.colors.shadow};
+  elevation: 1;
+  width: 75px;
+  height: 75px;
+  border-radius: 7.6px;
+`;
+
+export const Information = styled.View`
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-horizontal: 10px;
+  flex: 1;
+  min-height: 64px;
+`;
+
+export const Header = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+export const Badge = styled.View`
+  background-color: #e9f2fe;
+  border-radius: 4px;
+  padding: 1px 4px;
+`;
+
+export const Stars = styled.View`
+  display: flex;
+  flex-direction: row;
+`;