ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,304 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+import { Card, Logo, Information, Header, Badge } from './styles';
+import { OIcon, OText } from '../shared';
+import { PreviousMessagesParams } from '../../types';
+
+export const PreviousMessages = (props: PreviousMessagesParams) => {
+  const { orders, onNavigationRedirect, setOrders } = props;
+
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const [{ parseDate, optimizeImage }] = useUtils();
+
+  const handlePressOrder = (order: any) => {
+    const uuid = order?.id;
+
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderMessage', { orderId: uuid, setOrders });
+  };
+
+  const getOrderStatus = (s: string) => {
+    const status = parseInt(s);
+    const orderStatus = [
+      {
+        key: 0,
+        value: t('PENDING', 'Pending'),
+        slug: 'PENDING',
+        percentage: 0.25,
+      },
+      {
+        key: 1,
+        value: t('COMPLETED', 'Completed'),
+        slug: 'COMPLETED',
+        percentage: 1,
+      },
+      {
+        key: 2,
+        value: t('REJECTED', 'Rejected'),
+        slug: 'REJECTED',
+        percentage: 0,
+      },
+      {
+        key: 3,
+        value: t('DRIVER_IN_BUSINESS', 'Driver in business'),
+        slug: 'DRIVER_IN_BUSINESS',
+        percentage: 0.6,
+      },
+      {
+        key: 4,
+        value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+        slug: 'PREPARATION_COMPLETED',
+        percentage: 0.7,
+      },
+      {
+        key: 5,
+        value: t('REJECTED', 'Rejected'),
+        slug: 'REJECTED_BY_BUSINESS',
+        percentage: 0,
+      },
+      {
+        key: 6,
+        value: t('REJECTED_BY_DRIVER', 'Rejected by Driver'),
+        slug: 'REJECTED_BY_DRIVER',
+        percentage: 0,
+      },
+      {
+        key: 7,
+        value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+        slug: 'ACCEPTED_BY_BUSINESS',
+        percentage: 0.35,
+      },
+      {
+        key: 8,
+        value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
+        slug: 'ACCEPTED_BY_DRIVER',
+        percentage: 0.45,
+      },
+      {
+        key: 9,
+        value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
+        slug: 'PICK_UP_COMPLETED_BY_DRIVER',
+        percentage: 0.8,
+      },
+      {
+        key: 10,
+        value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver'),
+        slug: 'PICK_UP_FAILED_BY_DRIVER',
+        percentage: 0,
+      },
+      {
+        key: 11,
+        value: t(
+          'DELIVERY_COMPLETED_BY_DRIVER',
+          'Delivery completed by driver',
+        ),
+        slug: 'DELIVERY_COMPLETED_BY_DRIVER',
+        percentage: 1,
+      },
+      {
+        key: 12,
+        value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver'),
+        slug: 'DELIVERY_FAILED_BY_DRIVER',
+        percentage: 0,
+      },
+      {
+        key: 13,
+        value: t('PREORDER', 'PreOrder'),
+        slug: 'PREORDER',
+        percentage: 0,
+      },
+      {
+        key: 14,
+        value: t('ORDER_NOT_READY', 'Order not ready'),
+        slug: 'ORDER_NOT_READY',
+        percentage: 0,
+      },
+      {
+        key: 15,
+        value: t(
+          'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+          'Order picked up completed by customer',
+        ),
+        slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+        percentage: 100,
+      },
+      {
+        key: 16,
+        value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+        slug: 'CANCELLED_BY_CUSTOMER',
+        percentage: 0,
+      },
+      {
+        key: 17,
+        value: t(
+          'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+          'Order not picked up by customer',
+        ),
+        slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+        percentage: 0,
+      },
+      {
+        key: 18,
+        value: t(
+          'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
+          'Driver almost arrived to business',
+        ),
+        slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
+        percentage: 0.15,
+      },
+      {
+        key: 19,
+        value: t(
+          'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
+          'Driver almost arrived to customer',
+        ),
+        slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
+        percentage: 0.9,
+      },
+      {
+        key: 20,
+        value: t(
+          'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+          'Customer almost arrived to business',
+        ),
+        slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+        percentage: 90,
+      },
+      {
+        key: 21,
+        value: t(
+          'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+          'Customer arrived to business',
+        ),
+        slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+        percentage: 95,
+      },
+    ];
+
+    const objectStatus = orderStatus.find(o => o.key === status);
+
+    return objectStatus && objectStatus;
+  };
+
+  const styles = StyleSheet.create({
+    cardButton: {
+      flex: 1,
+      minHeight: 64,
+      marginBottom: 30,
+      marginLeft: 3,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 75,
+      height: 75,
+    },
+    logo: {
+      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: 5,
+      elevation: 7,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
+    },
+    title: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 16,
+      color: theme.colors.textGray,
+    },
+    badge: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 14,
+      color: theme.colors.primary,
+    },
+    date: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 15,
+      color: theme.colors.unselectText,
+    },
+    orderType: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      color: theme.colors.orderTypeColor,
+    },
+  });
+
+  return (
+    <>
+      {orders?.length > 0 &&
+        orders?.map((order: any) => (
+          <TouchableOpacity
+            key={order?.id}
+            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>
+                <Header>
+                  <OText numberOfLines={1} style={styles.title}>
+                    {order?.business?.name}
+                  </OText>
+
+                  {order?.unread_count > 0 && (
+                    <Badge>
+                      <OText size={14} style={styles.badge}>
+                        {order?.unread_count}
+                      </OText>
+                    </Badge>
+                  )}
+                </Header>
+
+                <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>
+
+                <OText
+                  style={styles.orderType}
+                  mRight={5}
+                  numberOfLines={1}
+                  adjustsFontSizeToFit>
+                  {getOrderStatus(order?.status)?.value}
+                </OText>
+              </Information>
+            </Card>
+          </TouchableOpacity>
+        ))}
+    </>
+  );
+};

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

@@ -0,0 +1,32 @@
+import styled from 'styled-components/native';
+
+export const Card = styled.View`
+  flex: 1;
+  flex-direction: row;
+`;
+
+export const Logo = styled.View`
+  width: 75px;
+  height: 75px;
+`;
+
+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;
+`;

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+import { OButton, OIcon, OText } from '../shared';
+import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+
+export const PreviousOrders = (props: any) => {
+  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder, isLogisticOrder } = props;
+  const [, t] = useLanguage();
+  const [{ parseDate, optimizeImage }] = useUtils();
+  const theme = useTheme();
+
+  const handlePressOrder = (order: any) => {
+    handleClickOrder && handleClickOrder(order)
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { order: order });
+  };
+
+  const styles = StyleSheet.create({
+    cardButton: {
+      flex: 1,
+      minHeight: 64,
+      marginBottom: isLogisticOrder ? 0 : 30,
+      marginLeft: 3,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 75,
+      height: 75,
+    },
+    logo: {
+      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: 5,
+      elevation: 7,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 3,
+    },
+    title: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 16,
+      color: theme.colors.textGray,
+    },
+    date: {
+      marginBottom: 6,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 15,
+      color: theme.colors.unselectText,
+    },
+    orderType: {
+      fontSize: 15,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      color: theme.colors.orderTypeColor,
+    },
+  });
+
+  let hash: any = {};
+
+  return (
+    <>
+      {orders && orders?.length > 0 &&
+        orders
+          .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>
+                  )}
+                  <Information>
+                    <OText numberOfLines={1} style={styles.title}>
+                      {order.business?.name}
+                    </OText>
+                    {order?.showNotification && (
+                      <NotificationIcon>
+                        <EntypoIcon
+                          name="dot-single"
+                          size={32}
+                          color={theme.colors.primary}
+                        />
+                      </NotificationIcon>
+                    )}
+                    <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>
+                    {!isLogisticOrder && (
+                      <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>
+              {isLogisticOrder && (
+                <AcceptOrRejectOrder>
+                  <OButton
+                    text={t('REJECT', 'Reject')}
+                    onClick={() => console.log('reject')}
+                    bgColor={theme.colors.danger}
+                    borderColor={theme.colors.danger}
+                    imgRightSrc={null}
+                    style={{ borderRadius: 7 }}
+                    parentStyle={{width: '45%'}}
+                    textStyle={{ color: theme.colors.dangerText }}
+                  />
+                  <OButton
+                    text={t('ACCEPT', 'Accept')}
+                    onClick={() => console.log('Accept')}
+                    bgColor={theme.colors.successOrder}
+                    borderColor={theme.colors.successOrder}
+                    imgRightSrc={null}
+                    style={{ borderRadius: 7 }}
+                    parentStyle={{width: '45%'}}
+                    textStyle={{ color: theme.colors.successText }}
+                  />
+                </AcceptOrRejectOrder>
+              )}
+            </React.Fragment>
+          ))}
+    </>
+  );
+};
+
+PreviousOrders.defaultProps = {
+  orders: []
+}

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

@@ -0,0 +1,38 @@
+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`
+  height: 75px;
+  width: 75px;
+`;
+
+export const Information = styled.View`
+  position: relative;
+  justify-content: flex-start;
+  margin-horizontal: 10px;
+  flex: 1;
+  max-height: 70px;
+`;
+
+export const MyOrderOptions = styled.View`
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const NotificationIcon = styled.View`
+  position: absolute;
+  left: 90%;
+`
+
+export const AcceptOrRejectOrder = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+  margin-bottom: 30px;
+`