ordering-ui-react-native 0.16.79 → 0.16.80-release

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
@@ -45,8 +46,16 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'original'
-	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+	const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+	const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+	const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+	const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+	const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+	const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+	const hideHeader = theme?.business_view?.components?.header?.hidden
 
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
@@ -55,12 +64,12 @@ export const BusinessBasicInformation = (
 		headerStyle: {
 			height: isChewLayout ? 170 : 260,
 		},
-		businessLogo: {
+		logoStyle: {
 			width: 72,
 			height: 72,
 			borderRadius: 7.6,
 			justifyContent: 'flex-start',
-			alignItems: 'flex-start',
+			alignItems: 'flex-start'
 		},
 		businessInfo: {
 			paddingHorizontal: 40,
@@ -103,7 +112,10 @@ export const BusinessBasicInformation = (
 			height: 12,
 			width: 12,
 			margin: 0,
-			padding: 0
+			padding: 0,
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center'
 		},
 		headerChewStyle: {
 			paddingHorizontal: 30,
@@ -221,7 +233,8 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: '100%', height: '100%' }}
+										style={{ width: 10, height: 12 }}
+										cover
 									/>
 								</View>
 							</Pressable>
@@ -244,9 +257,13 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
-						{isChewLayout && (
+						{isChewLayout && !hideInfoIcon && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
+								<OText
+									color={theme.colors.primary}
+									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+									size={12}
+								>
 									{t('SEE_MORE_DESCRIPTION', 'See more')}
 								</OText>
 							</TouchableOpacity>
@@ -258,53 +275,63 @@ export const BusinessBasicInformation = (
 	}
 
 	return (
-		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
-			<BusinessHeader
-				isChewLayout={isChewLayout}
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}
-				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
-			>
-				{!isBusinessInfoShow && !isChewLayout && (
-					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-				{isChewLayout && (
-					<View style={styles.headerChewStyle}>
-						<OText size={24} weight={'600'} mBottom={-5}>
-							{business?.name}
-						</OText>
-						{business?.city?.name && (
-							<OText>
-								{business?.city?.name}
+		<BusinessContainer isChewLayout={isChewLayout && hideLogo}>
+			{!hideHeader && (
+				<BusinessHeader
+					isChewLayout={isChewLayout}
+					style={
+						isBusinessInfoShow
+							? styles.businesInfoheaderStyle
+							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
+					}
+					{...(!loading && {
+						source: (header || businessState?.business?.header) ? {
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header
+						} : theme?.images?.dummies?.businessHeader
+					})}
+					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+				>
+					{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+						<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
+							<OIcon src={theme.images.general.info} width={24} />
+						</WrapBusinessInfo>
+					)}
+					{isChewLayout && !loading && (
+						<View style={styles.headerChewStyle}>
+							<OText size={24} weight={'600'} mBottom={-5}>
+								{business?.name}
 							</OText>
-						)}
-						<View style={styles.socialIconsChewContainer}>
-							<SocialIcons />
+							{business?.city?.name && !hideCity && (
+								<OText>
+									{business?.city?.name}
+								</OText>
+							)}
+							<View style={styles.socialIconsChewContainer}>
+								<SocialIcons />
+							</View>
 						</View>
-					</View>
-				)}
-			</BusinessHeader>
+					)}
+				</BusinessHeader>
+			)}
 			<BusinessInfo style={styles.businessInfo}>
-				{showLogo && (
+				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							<OIcon
-								url={
-									logo ||
-									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-								}
-								style={styles.businessLogo}
-							/>
+							logo || businessState?.business?.logo ?
+								<FastImage
+									style={styles.logoStyle}
+									source={{
+										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
+										priority: FastImage.priority.high,
+										cache: FastImage.cacheControl.web
+									}}
+									resizeMode={FastImage.resizeMode.contain}
+								/>
+								:
+								<OIcon
+									src={theme?.images?.dummies?.businessLogo}
+									style={styles.logoStyle}
+								/>
 						)}
 					</BusinessLogo>
 				)}
@@ -367,34 +394,43 @@ export const BusinessBasicInformation = (
 									</Placeholder>
 								)}
 								<View style={styles.bullet}>
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
-									</OText>
-									{orderState?.options?.type === 1 ? (
+									{!hideDeliveryFee && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
 										</OText>
-									) : (
+									)}
+									{!hideTime && (
+										<>
+											{orderState?.options?.type === 1 ? (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+												</OText>
+											) : (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+												</OText>
+											)}
+										</>
+									)}
+									{!hideDistance && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+											{parseDistance(business?.distance || 0) + `  \u2022 `}
 										</OText>
 									)}
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{parseDistance(business?.distance || 0) + `  \u2022 `}
-									</OText>
-								</View>
-
-								<View style={styles.reviewStyle}>
-									<OIcon
-										src={theme.images.general.star}
-										width={14}
-										color={theme.colors.textSecondary}
-										style={{ marginTop: -2, marginEnd: 2 }}
-									/>
-									<OText size={12} color={theme.colors.textSecondary}>
-										{business?.reviews?.total}
-									</OText>
 								</View>
+								{!hideReviews && (
+									<View style={styles.reviewStyle}>
+										<OIcon
+											src={theme.images.general.star}
+											width={14}
+											color={theme.colors.textSecondary}
+											style={{ marginTop: -2, marginEnd: 2 }}
+										/>
+										<OText size={12} color={theme.colors.textSecondary}>
+											{business?.reviews?.total}
+										</OText>
+									</View>
+								)}
 							</BusinessInfoItem>
 						</View>
 						<WrapReviews>
@@ -403,18 +439,28 @@ export const BusinessBasicInformation = (
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>
 											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-												<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+												<OText
+													color={theme.colors.primary}
+													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+													size={12}
+												>
 													{t('PREORDER', 'Preorder')}
 												</OText>
 											</TouchableOpacity>
 											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 										</>
 									)}
-									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-											{t('REVIEWS', 'Reviews')}
-										</OText>
-									</TouchableOpacity>
+									{!hideReviewsPopup && (
+										<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+											<OText
+												color={theme.colors.primary}
+												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+												size={12}
+											>
+												{t('REVIEWS', 'Reviews')}
+											</OText>
+										</TouchableOpacity>
+									)}
 								</>
 							)}
 						</WrapReviews>

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -11,27 +11,28 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
+import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+
 import {
-	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
 	BusinessState,
 	BusinessLogo,
 	Reviews,
 	RibbonBox,
-	ReviewAndFavorite
+	ReviewAndFavorite,
+	OfferBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const {
@@ -40,6 +41,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		navigation,
 		isBusinessOpen,
 		style,
+		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -49,19 +51,31 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessPickupTime,
 		businessDistance,
 		handleFavoriteBusiness,
-		enableIntersection
+		enableIntersection,
+		getBusinessOffer
 	} = props;
+
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
-	const [ { auth }] = useSession()
+	const [{ auth }] = useSession()
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
-	const fadeAnim = useRef(new Animated.Value(0)).current;
+
+	const textSize = isCustomLayout ? 12 : 10
+	const cardHeight = windowHeight * 0.3
 
 	const styles = StyleSheet.create({
+		container: {
+			marginVertical: 20,
+			borderRadius: 7.6,
+			width: '100%',
+			position: 'relative',
+			height: cardHeight
+		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
 			borderTopRightRadius: 7.6,
@@ -111,7 +125,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'flex-start',
-		},
+		}
 	});
 
 	const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -128,6 +142,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	};
 
 	const handleBusinessClick = (selectedBusiness: any) => {
+		Vibration.vibrate()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {
@@ -146,27 +161,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
-	const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 500,
-			useNativeDriver: true
-    }).start();
-  };
-
 	const handleChangeInterSection = (inView: boolean) => {
 		setIsIntersectionObserver(inView)
-		fadeIn()
 	}
 
-	useEffect(() => {
-		if (!enableIntersection) fadeIn()
-	}, [enableIntersection])
-
 	return (
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
-				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+				<CardAnimation
+					style={[style, styles.container]}
+					onClick={() => handleBusinessClick(business)}
+				>
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
@@ -186,27 +191,31 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
-					<Animated.View
-						style={[
-							{
-								opacity: fadeAnim
-							}
-						]}
-					>
 						<FastImage
-							style={{ height: 120 }}
-							source={{
+							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
+							source={(businessHeader || business?.header) ? {
 								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
-							}}
+							} : theme.images.dummies.businessHeader}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
+						{(!isCustomLayout) && (
+							getBusinessOffer((business?.offers)) &&
+							<OfferBox>
+								<OText
+									size={10}
+									weight={'400'}
+									numberOfLines={2}
+									ellipsizeMode='tail'
+									lineHeight={13}
+								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+							</OfferBox>
+						)}
 						<BusinessState>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
@@ -221,49 +230,71 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo>
+						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
-									source={{
+									source={(businessLogo || business?.logo) ? {
 										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
 										priority: FastImage.priority.normal,
-									}}
+									} : theme.images.dummies.businessLogo}
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							</BusinessLogo>
-							<ReviewAndFavorite>
-								{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-									<Reviews>
-										<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-										<OText size={10} style={{ lineHeight: 15 }}>
-											{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-										</OText>
-									</Reviews>
-								)}
-								<TouchableOpacity
-									onPress={handleChangeFavorite}
-								>
-									<IconAntDesign
-										name={business?.favorite ? 'heart' : 'hearto'}
-										color={theme.colors.danger5}
-										size={18}
+							{!isCustomLayout && (
+								<ReviewAndFavorite>
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+										<Reviews>
+											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+											<OText size={10} style={{ lineHeight: 15 }}>
+												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
 									/>
-								</TouchableOpacity>
-							</ReviewAndFavorite>
+								</ReviewAndFavorite>
+							)}
 						</BusinessInfo>
-						<OText
-							size={12}
-							style={{ lineHeight: 18, marginBottom: 6 }}
-							weight={'500'}>
-							{business?.name}
-						</OText>
-						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+							<OText
+								size={textSize + 2}
+								style={{ lineHeight: 18, marginBottom: 6 }}
+								weight={'500'}>
+								{business?.name}
+							</OText>
+							{isCustomLayout && (
+								<ReviewAndFavorite>
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+										<Reviews>
+											<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+											<OText size={10} style={{ lineHeight: 15 }}>
+												{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
+						</View>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
 							{business?.address}
 						</OText>
-						{/* <BusinessCategory>
-          <OText>{getBusinessType()}</OText>
-        </BusinessCategory> */}
 						<Metadata>
 							{!isBusinessOpen ? (
 								<View style={styles.closed}>
@@ -274,21 +305,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							) : (
 								<View style={styles.bullet}>
 									{orderState?.options?.type === 1 && (
-										<OText size={10} color={theme.colors.textSecondary}>
+										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
-									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 										orderState?.options?.type === 1
 											? (businessDeliveryTime ?? business?.delivery_time)
 											: (businessPickupTime ?? business?.pickup_time),
 									)} \u2022 `}</OText>
-									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 								</View>
 							)}
 						</Metadata>
 					</BusinessContent>
-				</Card>
+				</CardAnimation>
 			) : (
 				<Placeholder
 					Animation={Fade}

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

@@ -1,12 +1,5 @@
 import styled, { css } from 'styled-components/native';
 
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 20px;
-  border-radius: 7.6px;
-  width: 100%;
-  position: relative;
-`
-
 export const BusinessHero = styled.View`
   position: relative;
   border-top-right-radius: 7.6px;
@@ -16,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;
@@ -46,7 +39,7 @@ export const BusinessState = styled.View`
 `
 
 export const BusinessLogo = styled.View`
-   
+
 `
 
 export const ReviewAndFavorite = styled.View`
@@ -80,3 +73,15 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const OfferBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: 10px;
+  border-radius: 50px;
+  color: ${(props: any) => props.theme.colors.textThird};
+  background: ${(props: any) => props.theme.colors.inputBorderColor};
+  padding: 3px 8px;
+  max-width: 180px;
+`