ordering-ui-react-native 0.15.31 → 0.15.33-release

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

@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     logoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   }
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('order')
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     return found
   }
 
-  const handleContinueClick  = () => {
+  const handleContinueClick = () => {
     if (!order?.review) {
       onSubmit()
     } else {
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       comments.map(comment => _comments += comment.content + '. ')
     }
     let _comment
-    _comment = _comments  + extraComment
+    _comment = _comments + extraComment
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
           </View>
         ) : (
-          <View style={{flex: 1, justifyContent: 'flex-end'}}>
+          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
             <FormReviews>
               <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
               <RatingBarContainer>
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
                     style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
                     imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
                     imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                    onClick={() => handleChangeComment(commentItem) }
+                    onClick={() => handleChangeComment(commentItem)}
                   />
                 ))}
               </CommentsButtonGroup>
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
-			      imgRightSrc={theme.images.general.arrow_right}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             onClick={handleSubmit(handleContinueClick)}
           />
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
-    UIComponent: ReviewOrderUI
+    UIComponent: ReviewOrderUI,
+    defaultStar: 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products.map((product: any) => (
+        {order?.products?.map((product: any) => (
           <SingleProductReview
             key={product.id}
             product={product}

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

@@ -20,7 +20,9 @@ export const SearchBar = (props: any) => {
 		inputStyle,
 		onPress,
 		isDisabled,
-		iconCustomRight
+		iconCustomRight,
+		onSubmitEditing,
+		blurOnSubmit
 	} = props
 
 	const theme = useTheme();
@@ -88,6 +90,7 @@ export const SearchBar = (props: any) => {
 				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
+				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}
 			/>
 			{isCancelButtonShow && (
 				<OButton

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

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
+import NavBar from '../NavBar'
+import { SessionsParams } from '../../types'
+import { OAlert } from '../../../../../src/components/shared'
+import { OButton, OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+
+import {
+  SessionsWrapper,
+  SessionItem,
+  DurationWrapper
+} from './styles'
+
+export const SessionsUI = (props: SessionsParams) => {
+  const {
+    navigation,
+    sessionsList,
+    actionState,
+    handleDeleteSession,
+    handleDeleteAllSessions
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ parseDate }] = useUtils()
+	const theme = useTheme()
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onDeleteSession = (session: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content: [t('QUESTION_DELETE_SESSION', 'Are you sure to delete this session?')],
+      handleOnAccept: () => {
+        handleDeleteSession(session)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const onDeleteAllSessions = (isOldUser: any, deleteCurrent: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content:
+        isOldUser
+          ? [t('QUESTION_ENABLE_ALL_SESSIONS', 'Are you sure to enable all sessions?')]
+          : deleteCurrent
+            ? [t('QUESTION_DELETE_ALL_SESSIONS', 'Are you sure that you want to delete all sessions?')]
+            : [t('QUESTION_DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Are you sure that you want to delete all sessions except current?')],
+      handleOnAccept: () => {
+        handleDeleteAllSessions(deleteCurrent)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  return (
+    <>
+      <NavBar
+        title={t('SESSIONS', 'Sessions')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {user?.session_strategy === 'jwt_session' ? (
+        <>
+          {sessionsList.loading ? (
+            [...Array(5).keys()].map(i => (
+              <SessionItem key={i}>
+                <Placeholder Animation={Fade}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={{ flex: 1}}>
+                      <PlaceholderLine width={40} />
+                      <PlaceholderLine width={40} />
+                    </View>
+                    <PlaceholderLine width={5}/>
+                  </View>
+                </Placeholder>
+              </SessionItem>
+            ))
+          ) : (
+            sessionsList.sessions.length > 0 ? (
+              <SessionsWrapper>
+                {sessionsList.sessions.map((session: any) => (
+                  <SessionItem key={session.id}>
+                    <DurationWrapper>
+                      <OText>{parseDate(session.created_at)}</OText>
+                      <OText>{parseDate(session.valid_thru)}</OText>
+                    </DurationWrapper>
+                    {session.current && (
+                      <OText mLeft={15} style={{ flex: 1 }}>({t('CURRENT', 'Current')})</OText>
+                    )}
+                    <TouchableOpacity
+                      onPress={() => onDeleteSession(session)}
+                    >
+                      <AntIcon name='close' size={16} color={theme.colors.red} />
+                    </TouchableOpacity>
+                  </SessionItem>
+                ))}
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, true)}
+                  style={{ borderRadius: 7.6, marginTop: 30 }}
+                />
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, false)}
+                  style={{ borderRadius: 7.6, marginTop: 20 }}
+                />
+              </SessionsWrapper>
+             ) : (
+              <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
+            )
+          )}
+        </>
+      ) : (
+        <View>
+          <OText>
+            {t('YOU_DONT_HAVE_ENABLED_THE_SESSIONS', 'You don\'t have enabled the sessions, please active them to have a better control of your sessions.')}
+          </OText>
+          <OButton
+            text={t('ACTIVE_SESSIONS', 'Active sessions')}
+            isDisabled={actionState.loading}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => onDeleteAllSessions(true, false)}
+            style={{ borderRadius: 7.6, marginTop: 20 }}
+          />
+        </View>
+      )}
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
+    </>
+  )
+}
+
+export const Sessions = (props: SessionsParams) => {
+  const sessionsProps = {
+    ...props,
+    UIComponent: SessionsUI
+  }
+  return <SessionsController {...sessionsProps} />
+}

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native'
+
+export const SessionsWrapper = styled.View`
+`
+export const SessionItem = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-vertical: 15px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  border-bottom-width: 1px;
+`
+export const DurationWrapper = styled.View`
+  /* flex-direction: row; */
+`

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

@@ -126,7 +126,10 @@ const SignupFormUI = (props: SignupParams) => {
 	const phoneRef = useRef<any>(null);
 	const passwordRef = useRef<any>(null);
 
-  const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
+  	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
@@ -684,7 +687,9 @@ const SignupFormUI = (props: SignupParams) => {
 						<ButtonsWrapper>
 							<SocialButtons>
 								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-									configs?.facebook_id?.value && (
+									configs?.facebook_id?.value && 
+									facebookLoginEnabled &&
+									(
 										<FacebookLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -692,7 +697,7 @@ const SignupFormUI = (props: SignupParams) => {
 											handleSuccessFacebookLogin={handleSuccessFacebook}
 										/>
 									)}
-								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
 									<GoogleLogin
 										notificationState={notificationState}
 										webClientId={configs?.google_login_client_id?.value}
@@ -701,7 +706,7 @@ const SignupFormUI = (props: SignupParams) => {
 										handleSuccessGoogleLogin={handleSuccessFacebook}
 									/>
 								)}
-								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
+								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 									<AppleLogin
 										notificationState={notificationState}
 										handleErrors={(err: any) => showToast(ToastType.Error, err)}

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

@@ -0,0 +1,282 @@
+import React, { useState } from 'react';
+import moment from 'moment';
+import {
+  SingleOrderCard as SingleOrderCardController,
+  useUtils,
+  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 {
+  Container,
+  InnerContainer,
+  Logo,
+  CardInfoWrapper,
+  ContentHeader,
+  ButtonWrapper,
+  ContentFooter,
+  UnreadMessageCounter,
+  Price
+} from './styles';
+
+const SingleOrderCardUI = (props: SingleOrderCardParams) => {
+  const {
+    order,
+    reorderLoading,
+    handleReorder,
+    getOrderStatus,
+    handleFavoriteOrder,
+    onNavigationRedirect,
+    pastOrders,
+    isMessageView,
+    handleClickOrder
+  } = props;
+
+  const [{ parsePrice, optimizeImage }] = useUtils();
+  const [, t] = useLanguage();
+	const theme = useTheme();
+
+	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+
+	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+
+  const styles = StyleSheet.create({
+		logo: {
+			borderRadius: 8,
+			width: 64,
+			height: 64
+		},
+    logoWrapper: {
+      overflow: 'hidden',
+      backgroundColor: 'white',
+      borderRadius: 8,
+      shadowColor: '#000000',
+      shadowOffset: { width: 1, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 3
+    },
+    buttonText: {
+      color: theme.colors.primary,
+			fontSize: 10,
+			marginLeft: 2,
+			marginRight: 2,
+    },
+    reorderLoading: {
+      width: 80,
+			height: 40,
+			borderRadius: 10,
+    },
+    reorderbutton: {
+			height: 23,
+			paddingLeft: 10,
+			paddingRight: 10,
+			borderRadius: 23,
+			shadowOpacity: 0,
+			backgroundColor: theme.colors.primaryContrast,
+			borderWidth: 0,
+		},
+    reviewButton: {
+			height: 23,
+			maxHeight: 23,
+			backgroundColor: theme.colors.white,
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingHorizontal: 10,
+			borderRadius: 23,
+			borderWidth: 1,
+			borderColor: theme.colors.primaryContrast,
+      marginRight: 2
+		},
+    infoText: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+	});
+
+  const handleReorderClick = (id: number) => {
+		setReorderSelected(id);
+		handleReorder && handleReorder(id);
+	};
+
+  const handleClickOrderReview = (order: any) => {
+    if (pastOrders) {
+      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
+        },
+      });
+      return
+    }
+    if (isMessageView) {
+			handleClickOrder(order?.uuid)
+			return
+		}
+		onNavigationRedirect &&
+			onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
+	};
+
+  const handleClickViewOrder = (uuid: string) => {
+		onNavigationRedirect &&
+			onNavigationRedirect('OrderDetails', { orderId: uuid });
+	};
+
+  const formatDate = (date: string, option?: any) => {
+		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
+	};
+
+  const handleChangeFavorite = () => {
+    handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
+  };
+
+  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}
+                      </OText>
+                    </UnreadMessageCounter>
+                  )}
+                </>
+              ) : (
+                <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')}
+                      </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 && (
+                  <>
+                    <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 `}
+                    </OText>
+                  </>
+                )}
+                <OText
+                  size={10}
+                  lineHeight={15}
+                  color={theme.colors.textSecondary}
+                  style={{ marginVertical: 3 }}
+                  numberOfLines={1}>
+                  {order?.delivery_datetime_utc
+                    ? formatDate(order?.delivery_datetime_utc)
+                    : formatDate(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>
+  )
+}
+
+export const SingleOrderCard = (props: any) => {
+  const singleOrderCardProps = {
+    ...props,
+    UIComponent: SingleOrderCardUI
+  }
+  return <SingleOrderCardController {...singleOrderCardProps} />
+}

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

@@ -0,0 +1,54 @@
+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;
+`
+
+export const InnerContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+`
+
+export const Logo = styled.View`
+	border-radius: 7.6px;
+  margin-right: 12px;
+`
+
+export const CardInfoWrapper = styled.View`
+  flex: 1;
+`
+
+export const ContentHeader = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const ButtonWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const ContentFooter = styled.View`
+  flex-direction: row;
+  width: 100%;
+`
+
+export const UnreadMessageCounter = styled.View`
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 7.6px;
+  background-color: ${(props: any) => props.theme.colors.primaryContrast};
+`
+
+export const Price = styled.View`
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-left: 10px;
+  width: 30%;
+`