ordering-ui-react-native 0.16.60 → 0.16.61-release

package/themes/original/src/components/SingleOrderCard/index.tsx

@@ -2,16 +2,16 @@ import React, { useState } from 'react';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
+  useOrder,
   useLanguage
 } from 'ordering-components/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { SingleOrderCardParams } from '../../types';
+import { OAlert } from '../../../../../src/components/shared'
 
 import {
-  Container,
   InnerContainer,
   Logo,
   CardInfoWrapper,
@@ -19,8 +19,11 @@ import {
   ButtonWrapper,
   ContentFooter,
   UnreadMessageCounter,
-  Price
+  Price,
+  MultiLogosContainer
 } from './styles';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const {
@@ -32,23 +35,38 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     onNavigationRedirect,
     pastOrders,
     isMessageView,
-    handleClickOrder
+    handleClickOrder,
+    handleRemoveCart,
+    cartState
   } = props;
 
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
+  const [{ carts }] = useOrder()
   const theme = useTheme();
 
   const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const [isPressed, setIsPressed] = useState(false)
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
 
   const styles = StyleSheet.create({
+    container: {
+      borderRadius: 7.6,
+      marginBottom: 10,
+      paddingVertical: 5,
+    },
     logo: {
       borderRadius: 8,
       width: 64,
       height: 64
     },
+    minilogo: {
+      borderRadius: 8,
+      width: 40,
+      height: 40
+    },
     logoWrapper: {
       overflow: 'hidden',
       backgroundColor: 'white',
@@ -66,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -94,12 +116,32 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     infoText: {
       flexDirection: 'row',
       alignItems: 'center'
+    },
+    cardAnimation: {
+      elevation: isPressed ? 2 : 0,
+      shadowColor: '#888',
+      shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
+      shadowRadius: 18,
+      shadowOpacity: isPressed ? 0.8 : 0,
+      borderRadius: 12,
     }
   });
 
-  const handleReorderClick = (id: number) => {
-    setReorderSelected(id);
-    handleReorder && handleReorder(id);
+  const handleReorderClick = (order: any) => {
+    if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
+      setConfirm({
+        open: true,
+        content: [t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?')],
+        title: t('ORDER', 'Order'),
+        handleOnAccept: async () => {
+          handleRemoveCart()
+          setConfirm({ ...confirm, open: false })
+        }
+      })
+    } else {
+      setReorderSelected(order?.id);
+      handleReorder && handleReorder(order?.id);
+    }
   };
 
   const handleClickOrderReview = (order: any) => {
@@ -109,11 +151,12 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
-            user_review: order?.user_review
+            user_review: order?.user_review,
+            business: order?.business
           },
         });
       return
@@ -126,143 +169,210 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
   };
 
-  const handleClickViewOrder = (uuid: string) => {
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  const handleClickViewOrder = (order: any) => {
+    if (isMessageView) {
+      handleClickOrder(order?.uuid)
+      return
+    }
+    if (order?.cart_group_id) {
+      onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
+    } else {
+      onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
+    }
   };
 
   const handleChangeFavorite = () => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
   };
 
+  const handleOriginalReorder = () => {
+    setConfirm({ ...confirm, open: false, title: null })
+  }
+
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
-    <Container
-      onPress={() => handleClickViewOrder(order?.uuid)}
-      activeOpacity={0.7}
-    >
-      <InnerContainer>
-        {!!order.business?.logo && (
-          <Logo style={styles.logoWrapper}>
-            <OIcon
-              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-              style={styles.logo}
-            />
-          </Logo>
-        )}
-        <CardInfoWrapper>
-          <ContentHeader>
-            <View style={{ flex: 1 }}>
-              <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                {order.business?.name}
-              </OText>
-            </View>
-            {!!!pastOrders && (
-              <>
-                {isMessageView ? (
-                  <>
-                    {order?.unread_count > 0 && (
-                      <UnreadMessageCounter>
-                        <OText size={12} color={theme.colors.primary} lineHeight={18} >
-                          {order?.unread_count}
+    <>
+      <CardAnimation
+        onClick={() => handleClickViewOrder(order)}
+        style={[styles.container]}
+      >
+        <InnerContainer>
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+            <>
+              {order?.business?.length > 1 ? (
+                <MultiLogosContainer>
+                  {order?.business?.map((business: any, i: number) => i < 2 && (
+                    <Logo
+                      isMulti
+                      key={business?.id}
+                      style={styles.logoWrapper}
+                    >
+                      <OIcon
+                        url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                        src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                        style={styles.minilogo}
+                      />
+                    </Logo>
+                  ))}
+                  {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                    <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                  )}
+                </MultiLogosContainer>
+              ) : (
+                <Logo style={styles.logoWrapper}>
+                  <OIcon
+                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                    style={styles.logo}
+                  />
+                </Logo>
+              )}
+            </>
+          )}
+          <CardInfoWrapper>
+            <ContentHeader>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
+              {!!!pastOrders && (
+                <>
+                  {isMessageView ? (
+                    <>
+                      {order?.unread_count > 0 && (
+                        <UnreadMessageCounter>
+                          <OText size={12} color={theme.colors.primary} lineHeight={18} >
+                            {order?.unread_count}
+                          </OText>
+                        </UnreadMessageCounter>
+                      )}
+                    </>
+                  ) : (
+                    <Price>
+                      <OText size={12} lineHeight={18}>
+                        {parsePrice(order?.summary?.total || order?.total)}
+                      </OText>
+                    </Price>
+                  )}
+                </>
+              )}
+              {!!pastOrders && (
+                <ButtonWrapper>
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
+                    !order.review && (
+                      <TouchableOpacity
+                        onPress={() => handleClickOrderReview(order)}
+                        style={styles.reviewButton}>
+                        <OText size={10} color={theme.colors.primary} numberOfLines={1}>
+                          {t('REVIEW', 'Review')}
                         </OText>
-                      </UnreadMessageCounter>
+                      </TouchableOpacity>
                     )}
-                  </>
-                ) : (
-                  <Price>
-                    <OText size={12} lineHeight={18}>
-                      {parsePrice(order?.summary?.total || order?.total)}
-                    </OText>
-                  </Price>
-                )}
-              </>
-            )}
-            {!!pastOrders && (
-              <ButtonWrapper>
-                {allowedOrderStatus.includes(parseInt(order?.status)) &&
-                  !order.review && (
-                    <TouchableOpacity
-                      onPress={() => handleClickOrderReview(order)}
-                      style={styles.reviewButton}>
-                      <OText size={10} color={theme.colors.primary} numberOfLines={1}>
-                        {t('REVIEW', 'Review')}
+                  {order.cart && !hideReorderButton && (
+                    <OButton
+                      text={t('REORDER', 'Reorder')}
+                      imgRightSrc={''}
+                      textStyle={styles.buttonText}
+                      style={
+                        ((reorderLoading && order.id === reorderSelected) || cartState?.loading)
+                          ? styles.reorderLoading
+                          : styles.reorderbutton
+                      }
+                      onClick={() => handleReorderClick(order)}
+                      isLoading={(reorderLoading && order.id === reorderSelected) || cartState?.loading}
+                    />
+                  )}
+                </ButtonWrapper>
+              )}
+            </ContentHeader>
+            <ContentFooter>
+              <View style={{ flex: 1 }}>
+                <View style={styles.infoText}>
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
+                    <>
+                      <OText
+                        size={10}
+                        space
+                        color={theme.colors.textSecondary}
+                        style={{ marginVertical: 3 }}
+                        lineHeight={15}
+                        numberOfLines={1}
+                      >
+                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
+                      </OText>
+                      <OText
+                        size={10}
+                        color={theme.colors.textSecondary}
+                        style={{ marginVertical: 3 }}
+                        lineHeight={15}
+                        numberOfLines={1}
+                      >
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
                       </OText>
-                    </TouchableOpacity>
+                    </>
                   )}
-                {order.cart && (
-                  <OButton
-                    text={t('REORDER', 'Reorder')}
-                    imgRightSrc={''}
-                    textStyle={styles.buttonText}
-                    style={
-                      reorderLoading && order.id === reorderSelected
-                        ? styles.reorderLoading
-                        : styles.reorderbutton
-                    }
-                    onClick={() => handleReorderClick(order.id)}
-                    isLoading={reorderLoading && order.id === reorderSelected}
-                  />
-                )}
-              </ButtonWrapper>
-            )}
-          </ContentHeader>
-          <ContentFooter>
-            <View style={{ flex: 1 }}>
-              <View style={styles.infoText}>
-                {!!!pastOrders && (
-                  <>
+                  {!hideDate && (
                     <OText
                       size={10}
-                      space
-                      color={theme.colors.textSecondary}
-                      style={{ marginVertical: 3 }}
                       lineHeight={15}
-                      numberOfLines={1}
-                    >
-                      {t('ORDER_NO', 'Order No') + '.'}
-                    </OText>
-                    <OText
-                      size={10}
                       color={theme.colors.textSecondary}
                       style={{ marginVertical: 3 }}
-                      lineHeight={15}
-                      numberOfLines={1}
-                    >
-                      {order.id + ` \u2022 `}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : order?.eta_time + 'min'
+                      }
                     </OText>
-                  </>
+                  )}
+                </View>
+                {!hideOrderStatus && (
+                  <OText
+                    color={theme.colors.primary}
+                    size={10}
+                    lineHeight={15}
+                    numberOfLines={1}>
+                    {getOrderStatus(order.status)?.value}
+                  </OText>
                 )}
-                <OText
-                  size={10}
-                  lineHeight={15}
-                  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>
               </View>
-              <OText
-                color={theme.colors.primary}
-                size={10}
-                lineHeight={15}
-                numberOfLines={1}>
-                {getOrderStatus(order.status)?.value}
-              </OText>
-            </View>
-            <TouchableOpacity
-              onPress={handleChangeFavorite}
-              style={{ marginTop: 5 }}
-            >
-              <IconAntDesign
-                name={order?.favorite ? 'heart' : 'hearto'}
-                color={theme.colors.danger5}
-                size={16}
-              />
-            </TouchableOpacity>
-          </ContentFooter>
-        </CardInfoWrapper>
-      </InnerContainer>
-    </Container>
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
+                <LottieAnimation
+                  type='favorite'
+                  onClick={handleChangeFavorite}
+                  initialValue={order?.favorite ? 0.75 : 0}
+                  toValue={order?.favorite ? 0 : 0.75}
+                  style={{ marginBottom: 5 }}
+                  iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
+                  isActive={order?.favorite}
+                />
+              )}
+            </ContentFooter>
+          </CardInfoWrapper>
+        </InnerContainer>
+      </CardAnimation>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => handleOriginalReorder()}
+        onClose={() => handleOriginalReorder()}
+      />
+    </>
+
   )
 }
 

package/themes/original/src/components/SingleOrderCard/styles.tsx

@@ -1,11 +1,4 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.TouchableOpacity`
-  border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-  margin-bottom: 10px;
-  padding-vertical: 5px;
-`
+import styled, { css } from 'styled-components/native'
 
 export const InnerContainer = styled.View`
   flex-direction: row;
@@ -15,6 +8,9 @@ export const InnerContainer = styled.View`
 export const Logo = styled.View`
 	border-radius: 7.6px;
   margin-right: 12px;
+  ${({ isMulti } : any) => isMulti && css`
+      margin-right: 5px;
+    `}
 `
 
 export const CardInfoWrapper = styled.View`
@@ -52,3 +48,9 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`