ordering-ui-react-native 0.10.3 → 0.11.3

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

@@ -0,0 +1,378 @@
+import React from 'react'
+
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { OText, OLink } from '../shared'
+import {
+    OrderContent,
+    OrderBusiness,
+    OrderCustomer,
+    OrderProducts,
+    Table,
+    OrderBill,
+    Total,
+} from './styles';
+
+import { ProductItemAccordion } from '../ProductItemAccordion';
+
+import { verifyDecimals } from '../../utils';
+
+import {
+    useLanguage,
+    useUtils,
+    useConfig,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+
+interface OrderContent {
+    order: any
+}
+
+export const OrderContentComponent = (props: OrderContent) => {
+    const [, t] = useLanguage();
+    const theme = useTheme()
+
+    const { order } = props;
+
+    const [{ parsePrice, parseNumber }] = useUtils();
+    const [{ configs }] = useConfig();
+
+    const styles = StyleSheet.create({
+        linkWithIcons: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 5,
+            flex: 1,
+        },
+        textBold: {
+            fontWeight: '600',
+        },
+    })
+    return (
+        <OrderContent>
+        <OrderBusiness>
+          <OText style={{ marginBottom: 5 }} size={16} weight="600">
+            {t('BUSINESS_DETAILS', 'Business details')}
+          </OText>
+
+          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+            {order?.business?.name}
+          </OText>
+
+          {!!order?.business?.email && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`mailto:${order?.business?.email}`}
+                shorcut={order?.business?.email}
+              />
+            </View>
+          )}
+
+          {!!order?.business?.cellphone && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`tel:${order?.business?.cellphone}`}
+                shorcut={`${order?.business?.cellphone}`}
+              />
+            </View>
+          )}
+
+          {!!order?.business?.phone && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`tel:${order?.business?.phone}`}
+                shorcut={order?.business?.phone}
+              />
+            </View>
+          )}
+
+          {!!order?.business?.address && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address}`,
+                  android: `geo:0,0?q=${order?.business?.address}`,
+                })}
+                shorcut={order?.business?.address}
+              />
+            </View>
+          )}
+
+          {!!order?.business?.address_notes && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+              />
+            </View>
+          )}
+        </OrderBusiness>
+
+        <OrderCustomer>
+          <OText style={{ marginBottom: 5 }} size={16} weight="600">
+            {t('CUSTOMER_DETAILS', 'Customer details')}
+          </OText>
+
+          <View style={{ flexDirection: 'row' }}>
+            <OText numberOfLines={2} mBottom={4}>
+              <OText
+                numberOfLines={1}
+                mBottom={4}
+                ellipsizeMode="tail"
+                space>
+                {order?.customer?.name}
+              </OText>
+
+              <OText
+                numberOfLines={1}
+                mBottom={4}
+                ellipsizeMode="tail"
+                space>
+                {order?.customer?.middle_name}
+              </OText>
+
+              <OText
+                numberOfLines={1}
+                mBottom={4}
+                ellipsizeMode="tail"
+                space>
+                {order?.customer?.lastname}
+              </OText>
+
+              <OText
+                numberOfLines={1}
+                mBottom={4}
+                ellipsizeMode="tail"
+                space>
+                {order?.customer?.second_lastname}
+              </OText>
+            </OText>
+          </View>
+
+          {!!order?.customer?.email && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`mailto:${order?.customer?.email}`}
+                shorcut={order?.customer?.email}
+              />
+            </View>
+          )}
+
+          {!!order?.customer?.cellphone && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`tel:${order?.customer?.cellphone}`}
+                shorcut={order?.customer?.cellphone}
+              />
+            </View>
+          )}
+
+          {!!order?.customer?.phone && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={`tel:${order?.customer?.phone}`}
+                shorcut={order?.customer?.phone}
+              />
+            </View>
+          )}
+
+          {!!order?.customer?.address && (
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.customer?.address}`,
+                  android: `geo:0,0?q=${order?.customer?.address}`,
+                })}
+                shorcut={order?.customer?.address}
+              />
+            </View>
+          )}
+
+          {!!order?.customer?.internal_number && (
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.internal_number}
+            </OText>
+          )}
+
+          {!!order?.customer?.address_notes && (
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.address_notes}
+            </OText>
+          )}
+
+          {!!order?.customer.zipcode && (
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.zipcode}
+            </OText>
+          )}
+        </OrderCustomer>
+
+        <OrderProducts>
+          <OText style={{ marginBottom: 5 }} size={16} weight="600">
+            {t('ORDER_DETAILS', 'Order Details')}
+          </OText>
+
+          {order?.products?.length &&
+            order?.products.map((product: any, i: number) => (
+              <ProductItemAccordion
+                key={product?.id || i}
+                product={product}
+              />
+            ))}
+        </OrderProducts>
+
+        <OrderBill>
+          <Table>
+            <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
+            <OText mBottom={4}>
+              {parsePrice(
+                order.tax_type === 1
+                  ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+                  : order?.summary?.subtotal ?? 0,
+              )}
+            </OText>
+          </Table>
+
+          {order?.tax_type !== 1 && (
+            <Table>
+              <OText mBottom={4}>
+                {t('TAX', 'Tax')}
+                {`(${verifyDecimals(
+                  order?.summary?.tax_rate,
+                  parseNumber,
+                )}%)`}
+              </OText>
+
+              <OText mBottom={4}>
+                {parsePrice(order?.summary?.tax ?? 0)}
+              </OText>
+            </Table>
+          )}
+
+          {order?.summary?.discount > 0 && (
+            <Table>
+              {order?.offer_type === 1 ? (
+                <OText mBottom={4}>
+                  <OText>{t('DISCOUNT', 'Discount')}</OText>
+
+                  <OText>
+                    {`(${verifyDecimals(
+                      order?.offer_rate,
+                      parsePrice,
+                    )}%)`}
+                  </OText>
+                </OText>
+              ) : (
+                <OText mBottom={4}>{t('DISCOUNT', 'Discount')}</OText>
+              )}
+
+              <OText mBottom={4}>
+                - {parsePrice(order?.summary?.discount)}
+              </OText>
+            </Table>
+          )}
+
+          {order?.summary?.subtotal_with_discount > 0 &&
+            order?.summary?.discount > 0 &&
+            order?.summary?.total >= 0 && (
+              <Table>
+                <OText mBottom={4}>
+                  {t(
+                    'SUBTOTAL_WITH_DISCOUNT',
+                    'Subtotal with discount',
+                  )}
+                </OText>
+                {order?.tax_type === 1 ? (
+                  <OText mBottom={4}>
+                    {parsePrice(
+                      order?.summary?.subtotal_with_discount +
+                        order?.summary?.tax ?? 0,
+                    )}
+                  </OText>
+                ) : (
+                  <OText mBottom={4}>
+                    {parsePrice(
+                      order?.summary?.subtotal_with_discount ?? 0,
+                    )}
+                  </OText>
+                )}
+              </Table>
+            )}
+
+          {order?.summary?.delivery_price > 0 && (
+            <Table>
+              <OText mBottom={4}>
+                {t('DELIVERY_FEE', 'Delivery Fee')}
+              </OText>
+
+              <OText mBottom={4}>
+                {parsePrice(order?.summary?.delivery_price)}
+              </OText>
+            </Table>
+          )}
+
+          <Table>
+            <OText mBottom={4}>
+              {t('DRIVER_TIP', 'Driver tip')}{' '}
+              {order?.summary?.driver_tip > 0 &&
+                parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                `(${verifyDecimals(
+                  order?.summary?.driver_tip,
+                  parseNumber,
+                )}%)`}
+            </OText>
+
+            <OText mBottom={4}>
+              {parsePrice(order?.summary?.driver_tip ?? 0)}
+            </OText>
+          </Table>
+
+          {order?.summary?.service_fee > 0 && (
+            <Table>
+              <OText mBottom={4}>
+                {t('SERVICE_FEE', 'Service Fee')}{' '}
+                {`(${verifyDecimals(
+                  order?.summary?.service_fee,
+                  parseNumber,
+                )}%)`}
+              </OText>
+
+              <OText mBottom={4}>
+                {parsePrice(order?.summary?.service_fee)}
+              </OText>
+            </Table>
+          )}
+
+          <Total>
+            <Table>
+              <OText mBottom={4} style={styles.textBold}>
+                {t('TOTAL', 'Total')}
+              </OText>
+
+              <OText
+                mBottom={4}
+                style={styles.textBold}
+                color={theme.colors.primary}>
+                {parsePrice(order?.summary?.total ?? 0)}
+              </OText>
+            </Table>
+          </Total>
+        </OrderBill>
+      </OrderContent>
+    )
+}

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

@@ -0,0 +1,148 @@
+import React from 'react';
+
+//Styles
+import {
+  Actions,
+  Header,
+  OrderHeader,
+} from './styles';
+
+//Components
+import {
+  OIconButton,
+  OText,
+} from '../shared'
+
+import { useTheme } from 'styled-components/native';
+import { StyleSheet } from 'react-native';
+
+import {
+  useLanguage,
+  useUtils,
+} from 'ordering-components/native';
+
+interface OrderHeader {
+  order?: any,
+  handleArrowBack?: any,
+  handleOpenMapView?: any,
+  handleOpenMessagesForBusiness?: any,
+  getOrderStatus?: any
+}
+
+export const OrderHeaderComponent = (props: OrderHeader) => {
+  const { order, handleArrowBack, handleOpenMapView, handleOpenMessagesForBusiness, getOrderStatus  } = props
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate }] = useUtils();
+
+  const styles = StyleSheet.create({
+    icons: {
+      maxWidth: 40,
+      height: 25,
+      alignItems: 'flex-end',
+    },
+  })
+
+  const colors: any = {
+    //BLUE
+    0: theme.colors.statusOrderBlue,
+    3: theme.colors.statusOrderBlue,
+    4: theme.colors.statusOrderBlue,
+    7: theme.colors.statusOrderBlue,
+    8: theme.colors.statusOrderBlue,
+    9: theme.colors.statusOrderBlue,
+    13: theme.colors.statusOrderBlue,
+    14: theme.colors.statusOrderBlue,
+    18: theme.colors.statusOrderBlue,
+    19: theme.colors.statusOrderBlue,
+    20: theme.colors.statusOrderBlue,
+    21: theme.colors.statusOrderBlue,
+    //GREEN
+    1: theme.colors.statusOrderGreen,
+    11: theme.colors.statusOrderGreen,
+    15: theme.colors.statusOrderGreen,
+    //RED
+    2: theme.colors.statusOrderRed,
+    5: theme.colors.statusOrderRed,
+    6: theme.colors.statusOrderRed,
+    10: theme.colors.statusOrderRed,
+    12: theme.colors.statusOrderRed,
+    16: theme.colors.statusOrderRed,
+    17: theme.colors.statusOrderRed,
+  };
+
+  return (
+    <>
+    <Header>
+    <OIconButton
+      icon={theme.images.general.arrow_left}
+      iconStyle={{ width: 20, height: 20 }}
+      borderColor={theme.colors.clear}
+      style={{ ...styles.icons, justifyContent: 'flex-end' }}
+      onClick={() => handleArrowBack()}
+    />
+
+    <Actions>
+      <OIconButton
+        icon={theme.images.general.map}
+        iconStyle={{
+          width: 20,
+          height: 20,
+          tintColor: theme.colors.backArrow,
+        }}
+        borderColor={theme.colors.clear}
+        style={styles.icons}
+        onClick={() => handleOpenMapView()}
+      />
+
+      <OIconButton
+        icon={theme.images.general.messages}
+        iconStyle={{
+          width: 20,
+          height: 20,
+          tintColor: theme.colors.backArrow,
+        }}
+        borderColor={theme.colors.clear}
+        style={styles.icons}
+        onClick={() => handleOpenMessagesForBusiness()}
+      />
+    </Actions>
+  </Header>
+  <OrderHeader>
+    <OText size={13} style={{ marginBottom: 5 }}>
+      {order?.delivery_datetime_utc
+        ? parseDate(order?.delivery_datetime_utc)
+        : parseDate(order?.delivery_datetime, { utc: false })}
+    </OText>
+
+    <OText numberOfLines={2} size={20} weight="600">
+      <>
+        {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
+          'IS',
+          'is',
+        )} `}
+        <OText
+          size={20}
+          weight="600"
+          color={colors[order?.status] || theme.colors.primary}>
+          {getOrderStatus(order?.status, t)?.value}
+        </OText>
+      </>
+    </OText>
+    <OText size={13}>
+      {`${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')
+      }`}
+    </OText>
+  </OrderHeader>
+  </>
+  )
+}

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

@@ -2,31 +2,16 @@ import styled from 'styled-components/native';
 
 export const OrderDetailsContainer = styled.ScrollView`
   flex: 1;
-  padding-horizontal: 20px;
-  margin-bottom: 50px;
 `;
 
 export const Pickup = styled.View`
   padding-vertical: 10px;
-  margin-bottom: 5px;
+  margin-bottom: 20px;
 `;
 
-export const NavBack = styled.TouchableOpacity``;
-
 export const Header = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  padding-top: 10px;
-  padding-horizontal: 20px;
-`;
-
-export const DriverItem = styled.View`
-  padding: 15px;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  justify-content: ${(props: any) =>
-    props?.justifyContent ? props?.justifyContent : 'flex-start'};
 `;
 
 export const Actions = styled.View`
@@ -43,70 +28,25 @@ export const OrderContent = styled.View`
 `;
 
 export const OrderHeader = styled.View`
-  padding-vertical: 10px;
+  padding-vertical: 20px;
   border-bottom-width: 10px;
   border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-  padding-horizontal: 20px;
 `;
 
 export const OrderBusiness = styled.View`
+  position: relative;
   bottom: 10px;
-  padding-vertical: 10px;
+  padding-vertical: 20px;
   flex-direction: column;
-`;
-export const Icons = styled.View`
-  margin-top: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const OrderInfo = styled.View`
-  padding: 20px;
-  flex: 1;
-`;
-
-export const OrderData = styled.View`
-  flex: 1;
-`;
-
-export const OrderStatus = styled.View`
-  padding: 20px;
-  align-items: center;
-  width: 35%;
-  flex-wrap: wrap;
+  border-bottom-width: 10px;
+  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
+  align-items: flex-start;
 `;
 
-export const StaturBar = styled.View``;
-
-export const StatusImage = styled.View``;
-
-export const SectionTitle = styled.View``;
-
 export const OrderCustomer = styled.View`
-  padding-vertical: 10px;
   border-bottom-width: 10px;
   border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-`;
-
-export const OrderDriver = styled(OrderCustomer)``;
-
-export const Customer = styled.View`
-  flex-direction: row;
-  align-items: center;
-`;
-
-export const CustomerPhoto = styled.View`
-  margin-right: 20px;
-`;
-
-export const InfoBlock = styled.View`
-  width: 70%;
-`;
-
-export const HeaderInfo = styled.View`
-  flex: 1;
-  width: 80%;
+  padding-vertical: 20px;
 `;
 
 export const OrderProducts = styled(OrderCustomer)``;
@@ -119,7 +59,7 @@ export const Table = styled.View`
 `;
 
 export const OrderBill = styled.View`
-  padding-vertical: 10px;
+  padding-vertical: 20px;
   flex: 1;
 `;
 
@@ -129,11 +69,13 @@ export const Total = styled.View`
   padding-vertical: 10px;
 `;
 
-export const Map = styled.View`
-  width: 100%;
-  height: 90%;
-  margin-top: 20px;
-  border-radius: 20px;
+export const DriverItem = styled.View`
+  padding: 15px;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  justify-content: ${(props: any) =>
+    props?.justifyContent ? props?.justifyContent : 'flex-start'};
 `;
 
 export const AssignDriver = styled.View`

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

@@ -14,6 +14,7 @@ import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
 import Alert from '../../providers/AlertProvider';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const OrderMessageUI = (props: OrderDetailsParams) => {
   const {
@@ -33,6 +34,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
+  const { top } = useSafeAreaInsets();
   const [{ user }] = useSession();
   const { order, loading } = props.order;
   const [alertState, setAlertState] = useState<{
@@ -110,8 +112,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 20,
-      height: 45,
+      paddingHorizontal: 30,
+      paddingTop: 30,
+      paddingBottom: 25,
       borderBottomWidth: 2,
       borderBottomColor: '#e6e6e6',
     },