ordering-ui-react-native 0.12.24 → 0.12.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.24",
+  "version": "0.12.25",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/single-business/index.tsx

@@ -45,6 +45,8 @@ import { OrderDetails } from './src/components/OrderDetails';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderSummary } from './src/components/OrderSummary';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { OrdersListing } from './src/components/OrdersListing';
+import { OrderListOption } from './src/components/OrderListOption';
 import { PaymentOptionCash } from './src/components/PaymentOptionCash';
 import { PaymentOptions } from './src/components/PaymentOptions';
 import { PaymentOptionStripe } from './src/components/PaymentOptionStripe';
@@ -125,6 +127,8 @@ export {
 	HelpOrder,
 	HelpAccountAndPayment,
 	OrderTypeSelector,
+	OrdersListing,
+	OrderListOption,
 	Notifications,
   BottomWrapper,
   BusinessBasicInformation,

package/themes/single-business/src/components/OrderListOption/index.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+import {
+  OrdersContainer,
+  Card,
+  Information,
+  OrderInformation,
+  BusinessInformation,
+  Price,
+  OptionTitle,
+  Status,
+} from './styles';
+
+import { useTheme } from 'styled-components/native';
+import { getTextOrderStatus } from '../../utils';
+import { OButton, OText } from '../shared'
+
+export const OrderListOption = (props: any) => {
+  const {
+    orders,
+    titleContent,
+    typeStyle,
+    allowedOrderStatus,
+    isLoadingReorder,
+    handleReorder,
+    onNavigationRedirect,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ parseDate, parsePrice }] = useUtils();
+
+  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])
+
+  const handleClickCard = (uuid: string) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  };
+
+  const handleReviewState = (orderId: any) => {
+    if (!orderId || isReviewedOrders.includes(orderId)) return
+    setIsReviewedOrders([...isReviewedOrders, orderId])
+  }
+
+  const handleClickOrderReview = (order: any) => {
+    onNavigationRedirect &&
+      onNavigationRedirect('ReviewOrder', {
+        order: {
+          id: order?.id,
+          business_id: order?.business_id,
+          logo: order.business?.logo,
+          driver: order?.driver,
+          products: order?.products,
+          review: order?.review,
+          user_review: order?.user_review
+        },
+        handleReviewState: handleReviewState
+      });
+  };
+
+  const handleReorderClick = (id: number) => {
+    setReorderSelected(id);
+    handleReorder(id);
+  };
+
+  const styles = StyleSheet.create({
+    reorderbutton: {
+      height: 23,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primaryContrast,
+      borderWidth: 0,
+      width: 80
+    },
+    reorderLoading: {
+      width: 80,
+      height: 23,
+      borderRadius: 23,
+      paddingHorizontal: 10,
+    },
+    reviewButton: {
+      width: 80,
+      height: 23,
+      maxHeight: 23,
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 10,
+      borderRadius: 23,
+      borderWidth: 1,
+      borderColor: theme.colors.primaryContrast,
+    },
+    buttonText: {
+      color: theme.colors.primary,
+      fontSize: 10,
+      marginLeft: 2,
+      marginRight: 2,
+    },
+  });
+
+  const OrderStyleOne = ({ order }: any) => (
+    <Card
+      activeOpacity={1}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      <Information>
+        <OrderInformation>
+          <BusinessInformation>
+            <OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
+              {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+            </OText>
+            <OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+            <OText
+              color={theme.colors.primary}
+              size={10}
+              lineHeight={15}
+              weight={400}
+              numberOfLines={2}>
+              {getTextOrderStatus(order.status, t)?.value}
+            </OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={12} lineHeight={18}>
+              {parsePrice(order?.summary?.total || order?.total)}
+            </OText>
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
+  );
+
+  const OrderStyleTwo = ({ order }: any) => (
+    <TouchableOpacity
+      onPress={() => handleClickCard(order?.uuid)}
+      activeOpacity={1}
+      style={{ flexDirection: 'row' }}
+    >
+      <Card themetwo>
+        <Information themetwo>
+          <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+            {`${t('ORDER_NO', 'Order No')}.${order.id}`}
+          </OText>
+          <OText
+            size={10}
+            lineHeight={21}
+            color={theme.colors.textSecondary}
+            style={{ marginVertical: 3 }}
+            numberOfLines={1}>
+            {order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}
+          </OText>
+          <OText
+            color={theme.colors.primary}
+            size={10}
+            lineHeight={15}
+            numberOfLines={1}>
+            {getTextOrderStatus(order.status, t)?.value}
+          </OText>
+        </Information>
+        <Status>
+          <OButton
+            text={t('REORDER', 'Reorder')}
+            imgRightSrc={''}
+            textStyle={styles.buttonText}
+            style={
+              isLoadingReorder && order.id === reorderSelected
+                ? styles.reorderLoading
+                : styles.reorderbutton
+            }
+            onClick={() => handleReorderClick(order.id)}
+            isLoading={isLoadingReorder && order.id === reorderSelected}
+          />
+          {allowedOrderStatus.includes(parseInt(order?.status)) &&
+            !order.review && !isReviewedOrders.includes(order?.id) &&
+            (
+              <TouchableOpacity
+                onPress={() => handleClickOrderReview(order)}
+                style={styles.reviewButton}>
+                <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                  {t('REVIEW', 'Review')}
+                </OText>
+              </TouchableOpacity>
+            )}
+        </Status>
+      </Card>
+    </TouchableOpacity>
+  )
+
+  return (
+    <>
+      <OptionTitle>
+        <OText
+          size={16}
+          color={theme.colors.textPrimary}
+          mBottom={10}
+        >
+          {titleContent}
+        </OText>
+      </OptionTitle>
+      <OrdersContainer>
+        {orders.length > 0 &&
+          orders.map((order: any, index: any) => (
+            <React.Fragment key={order?.id || order?.uuid}>
+              {typeStyle === 1 && (
+                <OrderStyleOne order={order} />
+              )}
+              {typeStyle === 2 && (
+                <OrderStyleTwo order={order} />
+              )}
+            </React.Fragment>
+          ))}
+      </OrdersContainer>
+      <View
+        style={{
+          height: 8,
+          backgroundColor: theme.colors.backgroundGray100,
+          marginBottom: 10
+        }}
+      />
+    </>
+  );
+};

package/themes/single-business/src/components/OrderListOption/styles.tsx

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components/native'
+
+export const OrdersContainer = styled.View`
+  margin-bottom: 10px;
+`
+
+export const Card = styled.TouchableOpacity`
+  ${(props: any) => props.themetwo ? css`
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+    flex-direction: row;
+    width: 100%;
+  ` : css`
+    flex: 1;
+  `};
+`
+
+export const Map = styled.View`
+  flex: 1;
+  height: 125px;
+  margin-bottom: 22px;
+`
+
+export const Information = styled.View`
+  ${(props: any) => props.themetwo ? css`
+    justify-content: center;
+    align-items: flex-start;
+    margin-end: 7px;
+    flex: 1;
+  ` : css`
+    flex-direction: row;
+    align-items: center;
+    padding-vertical: 5px;
+    margin-bottom: 12px;
+  `};
+`
+
+export const OrderInformation = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+`
+
+export const BusinessInformation = styled.View`
+	flex-basis: 65%;
+`
+
+export const Price = styled.View`
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin-left: 10px;
+  width: 30%;
+`
+
+export const OptionTitle = styled.View`
+  margin-top: 10px;
+`
+
+export const Status = styled.View`
+  align-items: center;
+  justify-content: space-between;
+`

package/themes/single-business/src/components/OrdersListing/index.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { View, useWindowDimensions } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { useLanguage, OrderVerticalList } from 'ordering-components/native'
+import { Placeholder, PlaceholderLine, Fade } from "rn-placeholder";
+import { OButton, OText } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { OrderListOption } from '../OrderListOption'
+
+const OrdersListingUI = (props: any) => {
+  const {
+    ordersGroup,
+    reorderLoading,
+    loadMoreOrders,
+    handleReorder,
+    onNavigationRedirect,
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { height } = useWindowDimensions()
+
+  const imageFails = theme.images.general.emptyActiveOrders
+
+  return (
+    <>
+      <OText size={20} style={{ marginTop: 20 }}>
+        {t('MY_ORDERS', 'My Orders')}
+      </OText>
+
+      {!ordersGroup.error && ordersGroup.all?.orders?.length > 0 && (
+        <>
+          {ordersGroup.upcoming?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('UPCOMING', 'Upcoming')}
+              typeStyle={1}
+              orders={ordersGroup.upcoming?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.active?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('ACTIVE', 'Active')}
+              typeStyle={1}
+              orders={ordersGroup.active?.orders}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {ordersGroup.past?.orders?.length > 0 && (
+            <OrderListOption
+              titleContent={t('PAST', 'Past')}
+              typeStyle={2}
+              orders={ordersGroup.past?.orders}
+              allowedOrderStatus={[1, 2, 5, 6, 10, 11, 12]}
+              isLoadingReorder={reorderLoading}
+              handleReorder={handleReorder}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+          {!ordersGroup.loading &&
+            ordersGroup?.pagination?.totalPages &&
+            ordersGroup?.pagination?.currentPage < ordersGroup?.pagination?.totalPages &&
+          (
+            <View>
+              <OButton
+                text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                imgRightSrc={null}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, shadowOpacity: 0, marginTop: 20 }}
+                onClick={loadMoreOrders}
+              />
+            </View>
+          )}
+        </>
+      )}
+
+      {ordersGroup.loading && (
+        <View style={{ marginTop: 20 }}>
+          {[...Array(6)].map((_, i) => (
+            <Placeholder key={i} Animation={Fade}>
+              <View style={{ width: '100%', flexDirection: 'row' }}>
+                <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+                <Placeholder>
+                  <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                  <PlaceholderLine width={50} />
+                  <PlaceholderLine width={20} />
+                </Placeholder>
+              </View>
+            </Placeholder>
+          ))}
+        </View>
+      )}
+
+      {!ordersGroup.loading && ordersGroup.all?.orders?.length === 0 && (
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={imageFails}
+          />
+        </View>
+      )}
+    </>
+  )
+}
+
+export const OrdersListing = (props: any) => {
+  const ordersProps = {
+    ...props,
+    UIComponent: OrdersListingUI,
+  }
+  return <OrderVerticalList {...ordersProps} />
+}

package/themes/single-business/src/components/UserProfile/index.tsx

@@ -123,6 +123,12 @@ const ProfileListUI = (props: ProfileParams) => {
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
 	}
 
+  const getName = () => {
+    return user?.lastname
+      ? `${user?.name} ${user?.lastname}`
+      : user?.name
+  }
+
 	return (
 		<View style={{ flex: 1, height: height - top - bottom - 62 }}>
 			<OText size={24} color={theme.colors.textNormal} lineHeight={36} weight={Platform.OS === 'ios' ? '600' : 'bold'} style={{ marginTop: 14, marginBottom: 24, ...styles.pagePadding }}>{t('PROFILE', 'Profile')}</OText>
@@ -136,7 +142,7 @@ const ProfileListUI = (props: ProfileParams) => {
 					/>
 				</View>
 				<View style={{ flexBasis: '70%' }}>
-					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{`${user?.name} ${user?.lastname}`}</OText>
+					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{getName()}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
 						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>

package/themes/single-business/src/utils/index.tsx

@@ -219,4 +219,35 @@ export const getOrderStatus = (status: number) => {
     default:
       return status
   }
-}
+}
+
+export const getTextOrderStatus = (s: string, t: any) => {
+  const status = parseInt(s)
+  const orderStatus = [
+    { key: 0, value: t('PENDING', 'Pending') },
+    { key: 1, value: t('COMPLETED', 'Completed') },
+    { key: 2, value: t('REJECTED', 'Rejected') },
+    { key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
+    { key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+    { key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+    { key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
+    { key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+    { key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+    { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+    { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+    { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+    { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+    { key: 13, value: t('PREORDER', 'PreOrder') },
+    { key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+    { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
+    { key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
+    { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
+    { key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
+    { key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
+    { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
+    { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+  ]
+
+  const objectStatus = orderStatus.find((o) => o.key === status)
+  return objectStatus && objectStatus
+}