ordering-ui-react-native 0.21.0-release → 0.21.1-release

package/package.json

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

package/themes/original/src/components/GiftCard/GiftCardOrdersList/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View } from 'react-native';
+import { OText } from '../../shared'
+import { VerticalGiftCardOrdersLayout } from '../VerticalGiftCardOrdersLayout'
+
+import {
+  Container,
+  NoOrdersWrapper
+} from './styles'
+
+export const GiftCardOrdersList = (props: any) => {
+  const {
+    onNavigationRedirect
+  } = props;
+
+	const theme = useTheme();
+  const [, t] = useLanguage();
+  const [isEmptyPending, setIsEmptyPending] = useState(false);
+  const [isEmptySent, setIsEmptySent] = useState(false);
+  const [isEmptyRedeemed, setIsEmptyRedeemed] = useState(false);
+
+  return (
+    <Container>
+      <VerticalGiftCardOrdersLayout
+        title={t('PENDING', 'Pending')}
+        defaultStatus='pending'
+        setIsEmpty={setIsEmptyPending}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {!isEmptyPending && (
+        <View
+          style={{
+            height: 8,
+            backgroundColor: theme.colors.backgroundGray100,
+            marginHorizontal: -40,
+          }}
+        />
+      )}
+
+      <VerticalGiftCardOrdersLayout
+        title={t('SENT', 'Sent')}
+        defaultStatus='sent'
+        setIsEmpty={setIsEmptySent}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      <VerticalGiftCardOrdersLayout
+        title={t('REDEEMED', 'Redeemed')}
+        defaultStatus='activated'
+        setIsEmpty={setIsEmptyRedeemed}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <NoOrdersWrapper>
+          <OText size={16} color={theme.colors.textNormal}>{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}</OText>
+        </NoOrdersWrapper>
+      )}
+    </Container>
+  )
+}

package/themes/original/src/components/GiftCard/GiftCardOrdersList/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+`
+
+export const NoOrdersWrapper = styled.View`
+  margin-vertical: 20px;
+`

package/themes/original/src/components/GiftCard/SingleGiftCard/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useLanguage, useUtils, useEvent } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View, StyleSheet } from 'react-native';
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from 'rn-placeholder';
+import FastImage from 'react-native-fast-image';
+import { OText } from '../../shared'
+
+import {
+  CardContainer
+} from './styles'
+
+export const SingleGiftCard = (props: any) => {
+  const {
+    card,
+    isSkeleton,
+    onNavigationRedirect
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+
+  const styles = StyleSheet.create({
+    logo: {
+      borderRadius: 8,
+      width: 64,
+      height: 64
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      marginBottom: 24
+    }
+  });
+
+  const getGiftCardStatus = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending')
+      case 'activated':
+        return t('REDEEMED', 'Redeemed')
+      default:
+        return status
+    }
+  }
+
+  const handleClickGiftCardOrder = (card: any) => {
+    onNavigationRedirect?.('OrderDetails', { orderId: card.order_product?.order_id });
+  }
+
+  return (
+    <CardContainer
+      activeOpacity={0.8}
+      onPress={() => handleClickGiftCardOrder(card)}
+    >
+      {isSkeleton ? (
+        <Placeholder style={{ marginBottom: 10 }} Animation={Fade}>
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ width: 64, marginRight: 14 }}>
+              <PlaceholderLine
+                width={100}
+                height={64}
+                style={{ marginRight: 10, marginBottom: 10 }}
+              />
+            </View>
+            <Placeholder style={{ paddingTop: 5 }}>
+              <PlaceholderLine width={60} style={{ marginBottom: 6}} />
+              <PlaceholderLine width={40} style={{ marginBottom: 6 }} />
+              <PlaceholderLine width={20} style={{ marginBottom: 0 }} />
+            </Placeholder>
+          </View>
+        </Placeholder>
+      ) : (
+        <View style={styles.innerContainer}>
+          <View>
+            <FastImage
+              style={styles.logo}
+              source={card?.order_product?.images ? {
+                uri: optimizeImage(card?.order_product?.images, 'h_86,c_limit')
+              } : theme?.images?.dummies?.businessLogo}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          </View>
+        <View style={{ flex: 1, marginLeft: 14 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between'  }}>
+            <OText size={12} lineHeight={18}>{card?.order_product?.name}</OText>
+            <OText size={12} lineHeight={18}>{parsePrice(card?.order_product?.price)}</OText>
+          </View>
+          <OText size={10} color={theme.colors.textSecondary} lineHeight={15}>{parseDate(card?.created_at)}</OText>
+          <OText size={10} color={theme.colors.primary}>{getGiftCardStatus(card?.status)}</OText>
+        </View>
+        </View>
+      )}
+    </CardContainer>
+  )
+}

package/themes/original/src/components/GiftCard/SingleGiftCard/styles.tsx

@@ -0,0 +1,4 @@
+import styled from 'styled-components/native';
+
+export const CardContainer = styled.TouchableOpacity`  
+`

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from 'rn-placeholder';
+import { SingleGiftCard } from '../SingleGiftCard';
+import { OButton, OText } from '../../shared';
+import {
+  ProductsListContainer,
+  SingleGiftCardWrapper,
+  WrappButton
+} from './styles'
+
+const VerticalGiftCardOrdersLayoutUI = (props: any) => {
+  const {
+    giftCards,
+    paginationProps,
+    loadMoreOrders,
+    title,
+    setIsEmpty,
+    onNavigationRedirect
+  } = props
+
+	const theme = useTheme();
+  const [, t] = useLanguage()
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <ProductsListContainer>
+      {
+        giftCards.loading ? (
+          <Placeholder Animation={Fade} style={{ marginVertical: 16 }}>
+            <PlaceholderLine width={30} height={16} />
+          </Placeholder>
+        ) : giftCards.list?.length > 0 && (
+        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
+      )}
+      {giftCards.list.map(card => (
+        <SingleGiftCardWrapper key={card.id}>
+          <SingleGiftCard
+            card={card}
+            onNavigationRedirect={onNavigationRedirect}
+          />
+        </SingleGiftCardWrapper>
+      ))}
+      {giftCards.loading && (
+        [...Array(10).keys()].map(i => (
+          <SingleGiftCardWrapper key={i}>
+            <SingleGiftCard
+              isSkeleton
+            />
+          </SingleGiftCardWrapper>
+        ))
+      )}
+      {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
+        <WrappButton>
+          <OButton
+						onClick={loadMoreOrders}
+						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+						imgRightSrc={null}
+						textStyle={{ color: theme.colors.white }}
+						style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+					/>
+        </WrappButton>
+      )}
+    </ProductsListContainer>
+  )
+}
+
+export const VerticalGiftCardOrdersLayout = (props: any) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: VerticalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native';
+
+export const ProductsListContainer = styled.View`  
+`
+export const WrappButton = styled.View`
+  margin-bottom: 24px;
+`
+export const SingleGiftCardWrapper = styled.View`  
+`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components/native';
 import { View, StyleSheet, RefreshControl, Platform } from 'react-native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-
+import { GiftCardOrdersList } from '../GiftCard/GiftCardOrdersList'
 import { OrdersOption } from '../OrdersOption'
 import { HeaderTitle, OButton, OText } from '../shared'
 import { ScrollView } from 'react-native-gesture-handler';
@@ -41,7 +41,8 @@ export const MyOrders = (props: any) => {
   const MyOrdersMenu = [
     { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
     { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
-    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab },
+    { key: 'giftCards', value: t('GIFT_CARD', 'Gift card'), disabled: false }
   ]
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -202,7 +203,14 @@ export const MyOrders = (props: any) => {
           setOrdersLength={setOrdersLength}
         />
       )}
+      
+      {selectedOption === 'giftCards' && (
+        <View style={{ paddingHorizontal: 20  }}>
+          <GiftCardOrdersList
+            onNavigationRedirect={props?.onNavigationRedirect}
+          />
+        </View>
+      )}
     </Container>
-
   )
 }

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

@@ -220,7 +220,13 @@ export const OrderProgress = (props: any) => {
       'delivery_type',
       'delivery_datetime_utc',
       'delivery_datetime',
-      'reporting_data'
+      'reporting_data',
+      'eta_current_status_time',
+      'eta_previous_status_times',
+      'eta_time',
+      'delivered_in',
+      'prepared_in',
+      'eta_drive_time'
     ],
     noGiftCardOrders: true
   }

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

@@ -350,6 +350,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 	const MyOrdersProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
+		noGiftCardOrders: true,
 		orderStatus: getAllOrders
 			? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
 			: props.preOrders ? [13] : props.activeOrders

package/themes/original/src/components/shared/OButton.tsx

@@ -27,9 +27,9 @@ const StyledButton = styled.View<Props>`
 	padding-left: 20px;
 	padding-right: 20px;
 	position: relative;
-	${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
-  `}
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `
 const StyledButtonDisabled = styled(StyledButton)`
 	background-color: ${(props: any) => props.theme.colors.disabled};
@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: theme?.general?.components?.buttons?.color ?? props.bgColor, borderColor: theme?.general?.components?.buttons?.color ?? props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: theme?.general?.components?.buttons?.buttonTextColor ?? props?.textStyle?.color }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />