aretherecookies-mobile/js/components/QuantityTile.js

import React from 'react';
import { View, Text, Button } from 'react-native';
import RouterButton from 'react-router-native-button';
import { SubText } from './ItemTile';
import { getQuantityLabelText } from '../helpers/QuantityHelpers';
import { loginWithBackto } from '../helpers/RouteHelpers';
import moment from 'moment';
import theme from '../ui-theme';

const QuantityPanel = ({ style, isAuthed, product, onUpdatePress }) => (
	<View
		style={{
			...style,
			flexBasis: 50,
			flexGrow: 1,
			flexDirection: 'column',
			justifyContent: 'space-between',
		}}>
		{product.quantity ? (
			<>
				<Text style={{ fontSize: 42, color: 'black' }}>
					{getQuantityLabelText(product.quantity)}
				</Text>
				<SubText>
					Last updated at {moment(product.lastupdated).format('h:mm A on MMM D, YYYY')}
				</SubText>
			</>
		) : (
			<Text style={{ fontSize: 24, color: 'black', flex: 1, flexWrap: 'wrap' }}>
				Be the first to update the amount of this product.
			</Text>
		)}
		{isAuthed && (
			<Button title="Update amount" onPress={onUpdatePress} color={theme.palette.primaryColor} />
		)}
		{!isAuthed && (
			<RouterButton
				title="Update Amount"
				to={loginWithBackto(`/product/${product.id}?loginAction=open-quantity-modal`)}
				color={theme.actionButton.speedDialActionIcon.backgroundColor}
				style={{ fontSize: 20, fontWeight: 500 }}
			/>
		)}
	</View>
);

export default QuantityPanel;