ordering-ui-react-native 0.21.21 → 0.21.22-release

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

@@ -113,3 +113,20 @@ export const CartHeader = styled.View`
   justify-content: space-between;
   margin-bottom: 10px;
 `
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 40px;
+  padding: 0 20px;
   justify-content: space-between;
   padding-bottom: 12px;
 

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import DatePicker from 'react-native-date-picker'
+import { DateContainer } from './styles';
+import { useLanguage } from 'ordering-components/native';
+
+export const DatePickerUI = (props: any) => {
+	const {
+		birthdate,
+		onConfirm,
+		onCancel,
+		open,
+	} = props;
+
+	const [, t] = useLanguage();
+
+	return (
+		<DateContainer>
+			<DatePicker
+				modal
+				mode="date"
+				open={open}
+				title={t('SELECT_A_DATE', 'Select a date')}
+				confirmText={t('CONFIRM', 'Confirm')}
+				cancelText={t('CANCEL', 'Cancel')}
+				date={birthdate ? new Date(birthdate) : new Date()}
+				onConfirm={date => onConfirm(date)}
+				onCancel={onCancel}
+				maximumDate={new Date()}
+			/>
+		</DateContainer>
+	);
+};
+

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+
+export const DateContainer = styled.View`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+`

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

@@ -14,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -35,15 +34,14 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container
-      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
-    >
+    <Container>
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
         btnStyle={{ paddingLeft: 0 }}
       />
       <TabContainer>
@@ -73,7 +71,6 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -82,7 +79,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -91,7 +87,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -16,7 +16,5 @@ export const Tab = styled.TouchableOpacity`
 `
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -5,7 +5,7 @@ export const Container = styled.View`
   bottom: 0px;
   left: 0;
   right: 0;
-  padding: 12px 40px;
+  padding: 12px 20px;
   flex-direction: row;
   border-top-width: 1px;
   border-color: ${(props: any) => props.theme.colors.border};

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

@@ -61,7 +61,7 @@ export const GPSButton = (props: any) => {
     if (trackingStatus === 'not-determined') {
       trackingStatus = await requestTrackingPermission()
     }
-    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+    if ( trackingStatus === 'authorized' || trackingStatus === 'denied' || trackingStatus === 'unavailable') {
       setLoading(true)
       Geolocation.getCurrentPosition((pos) => {
         geoCodePosition(pos.coords)

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/GiftCardUI/index.tsx

@@ -56,7 +56,7 @@ export const GiftCardUI =  React.memo((props: any) => {
       <View style={style.actionWrapper}>
         <OButton
           onClick={() => setOpenModal('purchase')}
-          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          text={t('PURCHASE', 'Purchase')}
           bgColor={theme.colors.primary}
           borderColor={theme.colors.primary}
           textStyle={{ color: 'white', fontSize: 13 }}
@@ -66,7 +66,7 @@ export const GiftCardUI =  React.memo((props: any) => {
 
         <OButton
           onClick={() => setOpenModal('redeem')}
-          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          text={t('REDEEM', 'Redeem')}
           bgColor={theme.colors.lightPrimary}
           borderColor={theme.colors.lightPrimary}
           textStyle={{ color: theme.colors.primary, fontSize: 13 }}
@@ -79,13 +79,18 @@ export const GiftCardUI =  React.memo((props: any) => {
 				open={openModal === 'purchase'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
-				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+				<PurchaseGiftCard
+          handleCustomGoToCheckout={handleCustomGoToCheckout}
+          onClose={() => setOpenModal(null)}
+        />
 			</OModal>
       <OModal
 				open={openModal === 'redeem'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
 				<RedeemGiftCard
           onClose={() => setOpenModal(null)}

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

@@ -3,10 +3,11 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView, Platform } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container
@@ -17,7 +18,8 @@ const PurchaseGiftCardUI = (props: any) => {
     productsListState,
     selectedProduct,
     setSelectedProduct,
-    handleAccept
+    handleAccept,
+    onClose
   } = props
 
   const theme = useTheme()
@@ -42,7 +44,38 @@ const PurchaseGiftCardUI = (props: any) => {
 
   return (
     <Container>
-      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <View style={{
+        marginBottom: 40,
+        marginTop: Platform.OS === 'ios' ? 30 : 50,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}>
+        <OButton
+          imgLeftStyle={{ width: 18 }}
+          imgRightSrc={null}
+          style={{
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: '#FFF',
+            borderColor: '#FFF',
+            shadowColor: '#FFF',
+            paddingLeft: 0,
+            paddingRight: 0,
+          }}
+          onClick={onClose}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26,
+            style: {
+              color: theme.colors.textNormal
+            }
+          }}
+        />
+        <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      </View>
       <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
       <ScrollView
         contentContainerStyle={{

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

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const Container = styled.View`
   width: 100%;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   flex: 1;
   padding-bottom: 30px;
 `

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

@@ -3,9 +3,10 @@ import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
-import { StyleSheet, View, Alert } from 'react-native';
+import { StyleSheet, View, Alert, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -93,7 +94,38 @@ const RedeemGiftCardUI = (props: any) => {
     <Container>
       {!redeemedGiftCard ? (
         <View>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
@@ -106,7 +138,7 @@ const RedeemGiftCardUI = (props: any) => {
                   onChange(val)
                   handleChangeCode(val)
                 }}
-                autoCapitalize='none'
+                autoCapitalize='characters'
                 autoCorrect={false}
                 blurOnSubmit={false}
                 style={style.inputStyle}
@@ -156,7 +188,38 @@ const RedeemGiftCardUI = (props: any) => {
         </View>
       ) : (
         <>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+          </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 export const FormController = styled.View`
   margin-bottom: 25px;

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

@@ -84,12 +84,12 @@ const SendGiftCardUI = (props: any) => {
         />
       </FormController>
       <FormController>
-        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('FROM', 'From')}</OText>
+        <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('NAME', 'Name')}</OText>
         <Controller
           control={control}
           render={({ onChange, value }: any) => (
             <OInput
-              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+              placeholder={t('WRITE_A_NAME', 'Write a name')}
               value={value}
               onChange={(val: any) => onChange(val)}
               autoCapitalize='none'

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-bottom: 30px;
 `
 export const FormController = styled.View`

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} />
+}