ordering-ui-react-native 0.21.2 → 0.21.3-release

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, Polygon, Circle } from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -19,7 +19,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     setSaveLocation,
     handleToggleMap,
     locations,
-    isIntGeoCoder
+    isIntGeoCoder,
+    businessZones,
+    delta
   } = props
 
   const [, t] = useLanguage()
@@ -30,8 +32,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
+    latitudeDelta: delta ?? 0.0010,
+    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -44,6 +46,19 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
+  const units: any = {
+    mi: 1609,
+    km: 1000
+  }
+
+  const types: any = [1, 2, 5]
+
+  const fillStyles = {
+    fillColor: 'rgba(44, 123, 229, 0.3)',
+    strokeColor: 'rgba(44, 123, 229, 1)',
+    strokeWidth: 2
+  }
+
   const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -69,7 +84,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        if(!isMovingRegion){ 
+        if(!isMovingRegion){
           handleToggleMap && handleToggleMap()
         }
       } else {
@@ -230,6 +245,36 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
           />
         )}
+        {businessZones?.length > 0 && businessZones.filter((item: any) => types.includes(item?.type)).map((businessZone: any, i: number) => (
+          <React.Fragment key={i}>
+            {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
+              <Polygon
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.radio * 1000}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 5 && businessZone?.data?.distance) && (
+              <Circle
+                center={{ latitude: center.lat, longitude: center.lng}}
+                radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </MapView>
       <Alert
         open={alertState.open}

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

@@ -56,7 +56,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
             showsHorizontalScrollIndicator={false}
             nestedScrollEnabled
             horizontal
-            style={{ height: 300, paddingHorizontal: 40 }}
+            style={{ height: 325, paddingHorizontal: 20 }}
           >
             {[
               ...Array(10).keys()
@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

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

@@ -2,6 +2,6 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
   padding-top: 30px;
 `;

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

@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'space-between',
-		paddingHorizontal: 40,
+		paddingHorizontal: 20,
 	},
 	logo: {
 		marginTop: 64,

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

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />

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

@@ -117,7 +117,8 @@ export const LastOrders = (props: any) => {
       initialPage: 1,
       pageSize: 3,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
   return <OrderListController {...helpProps} />
 }