ordering-ui-react-native 0.15.35 → 0.15.38-test

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

@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useState } from 'react';
-
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
 				if (img?.video) {
 					const keys = img?.video.split('/')
 					let _videoId = keys[keys.length - 1]
+
 					if (_videoId.includes('watch')) {
-						const __url = _videoId.split('=')[1]
-						_videoId = __url
+					  const __url = _videoId.split('=')[1]
+					  _videoId = __url
+					} else if (_videoId.includes('?')) {
+					  const __url = _videoId.split('?')[0]
+					  _videoId = __url
+					}
+
+					if (_videoId.search(/&/i) >= 0) {
+					  _videoId = _videoId.split('&')[0]
+					} else if (_videoId.search(/\?/i) >= 0) {
+					  _videoId = _videoId.split('?')[0]
 					}
-					if (_videoId.includes('?')) {
-						const __url = _videoId.split('?')[0]
-						_videoId = __url
+					if ((_videoId.length === 11)) {
+					  videoList.push(_videoId)
 					}
-					videoList.push(_videoId)
 				}
 			}
 		}
@@ -338,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
 					</OText>
 				</TouchableOpacity>
 			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}
@@ -688,7 +695,7 @@ export const ProductOptionsUI = (props: any) => {
 												</View>
 											)}
 											{product?.extras.map((extra: any) =>
-												extra.options.map((option: any) => {
+												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 													const currentState =
 														productCart.options[`id:${option.id}`] || {};
 													return (
@@ -704,7 +711,7 @@ export const ProductOptionsUI = (props: any) => {
 																				backgroundColor: isError(option.id),
 																				borderRadius: 7.6
 																			}}>
-																			{option.suboptions.map(
+																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																				(suboption: any) => {
 																					const currentState =
 																						productCart.options[
@@ -772,7 +779,7 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													{product?.extras.map((extra: any) =>
-														extra.options.map((option: any) => {
+														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 															if (
 																option.id == selOpt ||
 																(hasRespected(
@@ -797,7 +804,7 @@ export const ProductOptionsUI = (props: any) => {
 																								option.id,
 																							),
 																						}}>
-																						{option.suboptions.map(
+																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																							(suboption: any) => {
 																								const currentState =
 																									productCart.options[

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

@@ -0,0 +1,232 @@
+import React, { useState } from 'react'
+import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import {
+    PromotionsContainer,
+    SingleOfferContainer,
+    OfferInformation,
+    SearchBarContainer,
+    SingleBusinessOffer,
+    AvailableBusinesses,
+    OfferData,
+    Code,
+    BusinessInfo
+} from './styles'
+import { SearchBar } from '../SearchBar'
+import NavBar from '../NavBar'
+import { useTheme } from 'styled-components/native';
+import { OButton, OIcon, OModal, OText } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { NotFoundSource } from '../NotFoundSource'
+import { View, StyleSheet, ScrollView } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { PromotionParams } from '../../types'
+const PromotionsUI = (props : PromotionParams) => {
+    const {
+        navigation,
+        offersState,
+        handleSearchValue,
+        searchValue,
+        offerSelected,
+        setOfferSelected
+    } = props
+
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        productStyle: {
+            width: 75,
+            height: 75,
+            borderRadius: 7.6
+        },
+        buttonStyle: {
+            width: 55,
+            height: 25,
+            paddingLeft: 0,
+            paddingRight: 0
+        },
+        offerTitle: {
+            fontSize: 12
+        },
+        offerDescription: {
+            color: '#909BA9',
+            fontSize: 10
+        },
+        offerExtraInfo: {
+            fontSize: 10
+        },
+        modalButtonStyle: {
+            width: 100,
+            height: 35,
+            paddingLeft: 0,
+            paddingRight: 0,
+            borderRadius: 7.6
+        }
+    });
+
+    const [, t] = useLanguage()
+    const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
+    const [events] = useEvent()
+    const [openModal, setOpenModal] = useState(false)
+
+    const handleClickOffer = (offer : any) => {
+        setOpenModal(true)
+        setOfferSelected(offer)
+    }
+
+    const handleBusinessClick = (business : any) => {
+        events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
+    }
+
+    const filteredOffers = offersState?.offers?.filter((offer : any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+
+    const targetString = offerSelected?.target === 1
+        ? t('SUBTOTAL', 'Subtotal')
+        : offerSelected?.target === 2
+            ? t('DELIVERY_FEE', 'Delivery fee')
+            : t('SERVICE_FEE', 'Service fee')
+
+    return (
+        <PromotionsContainer>
+            <NavBar
+                onActionLeft={() => navigation.goBack()}
+                btnStyle={{ paddingLeft: 0 }}
+                paddingTop={20}
+                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+                title={t('PROMOTIONS', 'Promotions')}
+                titleAlign={'center'}
+                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
+                titleWrapStyle={{ paddingHorizontal: 0 }}
+            />
+            <SearchBarContainer>
+                <SearchBar
+                    placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                    onSearch={handleSearchValue}
+                />
+            </SearchBarContainer>
+
+            {offersState?.loading && (
+                <>
+                    {[...Array(5).keys()].map((key, i) => (
+                        <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                            <PlaceholderLine height={10} width={45} />
+                            <PlaceholderLine height={10} width={60} />
+                            <PlaceholderLine height={10} width={75} />
+                        </Placeholder>
+                    ))}
+                </>
+            )}
+            {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                <NotFoundSource
+                    content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                />
+            )}
+            <ScrollView>
+                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer : any) => (
+                    <SingleOfferContainer key={offer.id}>
+                        <OfferInformation>
+                            <OText style={styles.offerTitle}>{offer?.name}</OText>
+                            {offer?.description && (
+                                <OText style={styles.offerDescription}>{offer?.description}</OText>
+                            )}
+                            <OText style={styles.offerExtraInfo}>
+                                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+                            </OText>
+                            <AvailableBusinesses>
+                                <OText style={styles.offerExtraInfo}>{t('APPLY_FOR', 'Apply for')}:</OText>
+                                {offer.businesses.map((business: any, i: number) => (
+                                    <OText style={styles.offerExtraInfo} key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</OText>
+                                ))}
+                            </AvailableBusinesses>
+                        </OfferInformation>
+                        <OButton
+                            onClick={() => handleClickOffer(offer)}
+                            text={t('VIEW', 'View')}
+                            style={styles.buttonStyle}
+                            textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                        />
+                    </SingleOfferContainer>
+                ))}
+            </ScrollView>
+            <OModal
+                open={openModal}
+                onClose={() => setOpenModal(false)}
+                entireModal
+
+                title={``}
+            >
+                <View style={{ padding: 20 }}>
+                    <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                        {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                    </OText>
+                    <OfferData>
+                        {offerSelected?.type === 2 && (
+                            <Code>
+                                <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                            </Code>
+                        )}
+                        <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                        {offerSelected?.auto && (
+                            <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                        )}
+                        {offerSelected?.minimum && (
+                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purshase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                        )}
+                        {offerSelected?.max_discount && (
+                            <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                        )}
+                        {offerSelected?.description && (
+                            <OText>{offerSelected?.description}</OText>
+                        )}
+                    </OfferData>
+                    <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                        {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                    </OText>
+                    <ScrollView style={{height: '75%'}}>
+                        {offerSelected?.businesses?.map((business : any) => {
+                            return (
+                                <SingleBusinessOffer key={business.id}>
+                                    {business?.logo ? (
+                                        <FastImage
+                                            style={styles.productStyle}
+                                            source={{
+                                                uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                priority: FastImage.priority.normal,
+                                            }}
+                                            resizeMode={FastImage.resizeMode.cover}
+                                        />
+                                    ) : (
+                                        <OIcon
+                                            src={theme?.images?.dummies?.product}
+                                            style={styles.productStyle}
+                                        />
+                                    )}
+                                    <BusinessInfo>
+                                        <OText>{business.name}</OText>
+                                        <OButton
+                                            onClick={() => handleBusinessClick(business)}
+                                            text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                            style={styles.modalButtonStyle}
+                                            textStyle={{ fontSize: 10, color: '#fff' }}
+                                        />
+                                    </BusinessInfo>
+                                </SingleBusinessOffer>
+                            )
+                        })}
+                    </ScrollView>
+                </View>
+            </OModal>
+        </PromotionsContainer>
+    )
+}
+
+export const Promotions = (props : PromotionParams) => {
+    const PromotionsProps = {
+        ...props,
+        UIComponent: PromotionsUI
+    }
+
+    return (
+        <PromotionsController {...PromotionsProps} />
+    )
+}

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

@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components/native'
+
+export const PromotionsContainer = styled.View`
+  width: 100%;
+`
+
+export const SingleOfferContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+  height: 80px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+`
+
+export const OfferInformation = styled.View`
+  justify-content: space-between;
+  max-width: 75%;
+`
+
+export const SearchBarContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+  .search-bar {
+    justify-content: flex-start;
+    input {
+      width: 100%;
+    }
+  }
+  .clear {
+    right: 0;
+  }
+`
+
+export const SingleBusinessOffer = styled.View`
+  flex-direction: row;
+`
+
+export const AvailableBusinesses = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+`
+
+export const OfferData = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  p{
+    color: #909BA9;
+    margin: 3px;
+    font-size: 14px;
+  }
+`
+
+export const Code = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+`
+
+export const ValueOfOffer = styled.View`
+  p{
+    font-size: 16px;
+  }
+  span{
+    font-size: 20px;
+  }
+`
+
+export const BusinessInfo = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 10px;
+`

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
 	SignupForm as SignUpController,
@@ -23,6 +24,7 @@ import {
 	LoginWith as SignupWith,
 	OTab,
 	OTabs,
+	RecaptchaButton
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
@@ -63,7 +65,9 @@ const SignupFormUI = (props: SignupParams) => {
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
 		notificationState,
-		handleChangePromotions
+		handleChangePromotions,
+		enableReCaptcha,
+		handleReCaptcha
 	} = props;
 
 	const theme = useTheme();
@@ -115,8 +119,11 @@ const SignupFormUI = (props: SignupParams) => {
 		phone: {
 			country_phone_code: null,
 			cellphone: null,
+			country_code: null
 		},
 	});
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const nameRef = useRef<any>(null);
 	const lastnameRef = useRef<any>(null);
@@ -125,8 +132,9 @@ const SignupFormUI = (props: SignupParams) => {
 	const emailRef = useRef<any>(null);
 	const phoneRef = useRef<any>(null);
 	const passwordRef = useRef<any>(null);
+	const recaptchaRef = useRef<any>({});
 
-  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 handleRefs = (ref: any, code: string) => {
 		switch (code) {
@@ -209,8 +217,8 @@ const SignupFormUI = (props: SignupParams) => {
 			!phoneInputData.phone.country_phone_code &&
 			!phoneInputData.phone.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
-        configs?.verification_phone_required?.value === '1')
+				validationFields?.fields?.checkout?.cellphone?.required) ||
+				configs?.verification_phone_required?.value === '1')
 		) {
 			showToast(
 				ToastType.Error,
@@ -225,7 +233,8 @@ const SignupFormUI = (props: SignupParams) => {
 			handleButtonSignupClick &&
 				handleButtonSignupClick({
 					...values,
-					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && {...phoneInputData.phone}),
+					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+					country_code: phoneInputData.phone.country_code
 				});
 			if (
 				!formState.loading &&
@@ -286,6 +295,33 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	}
 
+	const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+		if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result &&
@@ -301,12 +337,12 @@ const SignupFormUI = (props: SignupParams) => {
 	}, [errors]);
 
 	useEffect(() => {
-    register('cellphone', {
-      required: isRequiredField('cellphone')
-        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-        : null
-    })
-  }, [register])
+		register('cellphone', {
+			required: isRequiredField('cellphone')
+				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+				: null
+		})
+	}, [register])
 
 	useEffect(() => {
 		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
@@ -333,6 +369,16 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	}, [verifyPhoneState]);
 
+	useEffect(() => {
+		setPhoneInputData({
+			...phoneInputData,
+			phone: {
+				...phoneInputData.phone,
+				country_code: configs?.default_country_code?.value
+			}
+		})
+	}, [configs])
+
 	return (
 		<View>
 			<NavBar
@@ -456,8 +502,24 @@ const SignupFormUI = (props: SignupParams) => {
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
-										handleData={(val: any) => setPhoneInputData(val)}
+										handleData={(val: any) => setPhoneInputData({
+											...phoneInputData,
+											...val,
+											phone: {
+												...phoneInputData.phone,
+												...val.phone,
+												country_code: phoneInputData.phone.country_code
+											}
+										})}
 										forwardRef={phoneRef}
+										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
+										changeCountry={(val: any) => setPhoneInputData({
+											...phoneInputData,
+											phone: {
+												...phoneInputData.phone,
+												country_code: val.cca2
+											}
+										})}
 										textInputProps={{
 											returnKeyType: 'next',
 											onSubmitEditing: () => passwordRef?.current?.focus?.(),
@@ -467,6 +529,39 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							{enableReCaptcha && (
+								<>
+									<TouchableOpacity
+										onPress={handleOpenRecaptcha}
+										style={{ marginHorizontal: 4, marginBottom: 10 }}
+									>
+										<RecaptchaButton>
+											{recaptchaVerified ? (
+												<MaterialCommunityIcons
+													name="checkbox-marked"
+													size={23}
+													color={theme.colors.primary}
+												/>
+											) : (
+												<MaterialCommunityIcons
+													name="checkbox-blank-outline"
+													size={23}
+													color={theme.colors.disabled}
+												/>
+											)}
+											<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+										</RecaptchaButton>
+									</TouchableOpacity>
+									<Recaptcha
+										ref={recaptchaRef}
+										siteKey={recaptchaConfig?.siteKey}
+										baseUrl={recaptchaConfig?.baseUrl}
+										onVerify={onRecaptchaVerify}
+										onExpire={() => setRecaptchaVerified(false)}
+									/>
+								</>
+							)}
+
 							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
 								<Controller
 									control={control}
@@ -736,6 +831,7 @@ const SignupFormUI = (props: SignupParams) => {
 export const SignupForm = (props: any) => {
 	const signupProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: SignupFormUI,
 	};
 	return <SignUpController {...signupProps} />;

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

@@ -7,10 +7,11 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import { shape } from '../../utils';
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
 	const {
@@ -46,8 +47,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		productStyle: {
 			width: 75,
 			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
+			borderRadius: 7.6
 		},
 		quantityContainer: {
 			position: 'absolute',
@@ -136,21 +136,42 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			{product?.images ? (
-				<FastImage
-					style={styles.productStyle}
-					source={{
-						uri: optimizeImage(product?.images, 'h_250,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-			) : (
-				<OIcon
-					src={theme?.images?.dummies?.product}
-					style={styles.productStyle}
-				/>
-			)}
+			<LogoWrapper>
+				{product?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={product?.ribbon?.color}
+						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+					>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+              ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{product?.ribbon?.text}
+						</OText>
+					</RibbonBox>
+				)}
+				{product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
+			</LogoWrapper>
+
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>