ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,391 +0,0 @@
-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',
-        },
-        textLink: {
-          color: '#365CC7'
-        }
-    })
-    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}
-                TextStyle={styles.textLink}
-              />
-            </View>
-          )}
-
-          {!!order?.business?.cellphone && (
-            <View style={styles.linkWithIcons}>
-              <OLink
-                PressStyle={styles.linkWithIcons}
-                url={`tel:${order?.business?.cellphone}`}
-                shorcut={`${order?.business?.cellphone}`}
-                TextStyle={styles.textLink}
-              />
-            </View>
-          )}
-
-          {!!order?.business?.phone && (
-            <View style={styles.linkWithIcons}>
-              <OLink
-                PressStyle={styles.linkWithIcons}
-                url={`tel:${order?.business?.phone}`}
-                shorcut={order?.business?.phone}
-                TextStyle={styles.textLink}
-              />
-            </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}
-                TextStyle={styles.textLink}
-              />
-            </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}
-                TextStyle={styles.textLink}
-              />
-            </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}
-                TextStyle={styles.textLink}
-
-              />
-            </View>
-          )}
-
-          {!!order?.customer?.cellphone && (
-            <View style={styles.linkWithIcons}>
-              <OLink
-                PressStyle={styles.linkWithIcons}
-                url={`tel:${order?.customer?.cellphone}`}
-                shorcut={order?.customer?.cellphone}
-                TextStyle={styles.textLink}
-              />
-            </View>
-          )}
-
-          {!!order?.customer?.phone && (
-            <View style={styles.linkWithIcons}>
-              <OLink
-                PressStyle={styles.linkWithIcons}
-                url={`tel:${order?.customer?.phone}`}
-                shorcut={order?.customer?.phone}
-                TextStyle={styles.textLink}
-              />
-            </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}
-                TextStyle={styles.textLink}
-              />
-            </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 > 0 &&
-            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 2/OrderDetails/OrderHeaderComponent.tsx

@@ -1,148 +0,0 @@
-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 2/OrderDetails/styles.tsx

@@ -1,84 +0,0 @@
-import styled from 'styled-components/native';
-
-export const OrderDetailsContainer = styled.ScrollView`
-  flex: 1;
-`;
-
-export const Pickup = styled.View`
-  padding-vertical: 10px;
-  margin-bottom: 20px;
-`;
-
-export const Header = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const Actions = styled.View`
-  flex-direction: row;
-  justify-content: flex-end;
-`;
-
-export const Logo = styled.View`
-  margin-right: 20px;
-`;
-
-export const OrderContent = styled.View`
-  flex: 1;
-`;
-
-export const OrderHeader = styled.View`
-  padding-vertical: 20px;
-  border-bottom-width: 10px;
-  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-`;
-
-export const OrderBusiness = styled.View`
-  position: relative;
-  bottom: 10px;
-  padding-vertical: 20px;
-  flex-direction: column;
-  border-bottom-width: 10px;
-  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-  align-items: flex-start;
-`;
-
-export const OrderCustomer = styled.View`
-  border-bottom-width: 10px;
-  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
-  padding-vertical: 20px;
-`;
-
-export const OrderProducts = styled(OrderCustomer)``;
-
-export const Table = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  align-items: center;
-`;
-
-export const OrderBill = styled.View`
-  padding-vertical: 20px;
-  flex: 1;
-`;
-
-export const Total = styled.View`
-  border-top-width: 1px;
-  border-top-color: ${(props: any) => props.theme.colors.borderTops};
-  padding-vertical: 10px;
-`;
-
-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`
-  padding-vertical: 10px;
-  margin-bottom: 10px;
-`;