Commit fd75efa7 authored by Neosoulink's avatar Neosoulink
Browse files

refactor: use ProductHistoryItem components

parent b634884e

packages/shop-mobile-expo/src/components/Common/OrderHistoryItem.tsx

+5 −104
Original line number Diff line number Diff line 
/* eslint-disable max-len */

import React from 'react';

import { StyleSheet, Image, View } from 'react-native';

import { StyleSheet, View } from 'react-native';

import { Card, Avatar, Title } from 'react-native-paper';



// COMPONENTS

import { PaperText, TouchableCard } from '../../components/Common';

import { PaperText } from '../../components/Common';



// STYLES

import {
@@ -11,10 +12,10 @@ import { 
	CONSTANT_SIZE as CS,

	CONSTANT_COLOR as CC,

} from '../../assets/ts/styles';

import ProductHistoryItem from './ProductHistoryItem';



const OrderHistoryItem = () => {

	// DATA

	const PRODUCT_HEIGHT = CS.SPACE_XLG * 2;



	const STYLES = StyleSheet.create({

		container: {
@@ -57,42 +58,6 @@ const OrderHistoryItem = () => { 
			borderWidth: 0.5,

			borderColor: CC.primaryHightLight,

		},

		productCard: {

			...GS.noShadow,

			borderWidth: 0,

			borderRadius: 0,

			overflow: 'hidden',

		},

		productCardContent: {

			...GS.px0,

		},

		productContentContainer: { ...GS.w100, ...GS.pr2, ...GS.inlineItems },

		productContentImageContainer: {

			overflow: 'hidden',

			borderTopEndRadius: CS.SPACE_SM,

			borderBottomEndRadius: CS.SPACE_SM,

		},

		productContentImage: {

			height: PRODUCT_HEIGHT,

			width: PRODUCT_HEIGHT,

		},

		productContent: {

			...GS.pl4,

			flex: 1,

		},

		productContentTitle: { ...GS.txtPrimary },

		productContentDescription: {

			fontSize: CS.FONT_SIZE_MD,

			color: CC.gray,

		},

		productAmount: {

			...GS.centered,

			width: CS.FONT_SIZE_XLG * 2.5,

		},

		productAmountText: {

			...GS.txtPrimaryLight,

			...GS.FF_NunitoSemiBold,

		},

	});



	return (
@@ -122,71 +87,7 @@ const OrderHistoryItem = () => { 
			</View>

			<View style={STYLES.separator} />

			<View>

				<TouchableCard

					onPress={() => {}}

					height={PRODUCT_HEIGHT}

					cardStyle={STYLES.productCard}

					cardStyleContent={STYLES.productCardContent}

					rippleColor={CC.primary + '33'}>

					<View style={STYLES.productContentContainer}>

						<View style={STYLES.productContentImageContainer}>

							<Image

								resizeMode='cover'

								source={{

									uri: 'https://worthstart.com/wp-content/uploads/2021/07/Fast-Food-Restaurant-Names-Ideas-1200x800.jpg',

								}}

								style={STYLES.productContentImage}

							/>

						</View>

						<View style={STYLES.productContent}>

							<Title style={STYLES.productContentTitle}>

								Product title

							</Title>

							<PaperText style={STYLES.productContentDescription}>

								Product description

							</PaperText>

						</View>



						<View style={STYLES.productAmount}>

							<PaperText style={STYLES.productAmountText}>

								$00

							</PaperText>

						</View>

					</View>

				</TouchableCard>



				<TouchableCard

					onPress={() => {}}

					height={PRODUCT_HEIGHT}

					cardStyle={STYLES.productCard}

					cardStyleContent={STYLES.productCardContent}

					rippleColor={CC.primary + '33'}>

					<View style={STYLES.productContentContainer}>

						<View style={STYLES.productContentImageContainer}>

							<Image

								resizeMode='cover'

								source={{

									uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSX5N1ZkNQVLEQCAe3hnOwr6OmZCsHRjF0Lwg&usqp=CAU',

								}}

								style={STYLES.productContentImage}

							/>

						</View>

						<View style={STYLES.productContent}>

							<Title style={STYLES.productContentTitle}>

								Product title

							</Title>

							<PaperText style={STYLES.productContentDescription}>

								Product description

							</PaperText>

						</View>



						<View style={STYLES.productAmount}>

							<PaperText style={STYLES.productAmountText}>

								$00

							</PaperText>

						</View>

					</View>

				</TouchableCard>

				<ProductHistoryItem image='' title={''} onPress={() => {}} />

			</View>

		</Card>

	);