Untitled

import React from 'react';
import styles from 'events/styles';
import {View, Text} from 'react-native';
import PropTypes from 'prop-types';
import {Card, WebViewAutoHeight} from 'common-components';
import {feedContentStyles} from 'theme';
import PriceRow from './PriceRow';
import {moderateScale} from 'react-native-size-matters';

const propTypes = {
  event: PropTypes.object.isRequired,
  handleSelectPrice: PropTypes.func.isRequired,
  individualPrices: PropTypes.arrayOf(PropTypes.object),
  selectedPrice: PropTypes.object,
  tablePrices: PropTypes.arrayOf(PropTypes.object),
};

//prettier-ignore
const getHTML = event => `<body style="font-family: -apple-system, Roboto, sans-serif; font-size: ${moderateScale(14, 0.2)}px;">${event.LongDescription}</body>`;

const PhoneEventDescription = props => {
  console.log(props);
  const {
    event,
    handleSelectPrice,
    individualPrices,
    selectedPrice,
    tablePrices,
  } = props;

  const displayPrices =
    !event.IsRestricted &&
    !event.IsFree &&
    (individualPrices.length > 0 || tablePrices.length > 0);

  return (
    <View style={{flex: 1}}>
      <Card style={styles.cardStyles} tappable={false}>
        <Text style={styles.contentTitle}>{'Description'}</Text>
        {event.LongDescription ? (
          <WebViewAutoHeight
            source={{
              html: getHTML(event),
            }}
          />
        ) : (
          <Text style={feedContentStyles.parragraph}>
            {event.ShortDescription}
          </Text>
        )}
      </Card>
      {displayPrices && (
        <Card style={styles.cardStyles} tappable={false}>
          <Text style={styles.contentTitle}>{'Event Pricing'}</Text>
          {individualPrices.length > 0 && (
            <View style={styles.table}>
              <Text style={styles.subtitle}>{'Individual'}</Text>
              {individualPrices.map(item => {
                const isSelected =
                  selectedPrice && item.Key === selectedPrice.Key;
                return (
                  <PriceRow
                    key={item.Key}
                    isSelected={isSelected}
                    name={item.Name}
                    price={item.Price}
                    onPress={() => handleSelectPrice(item)}
                    endDate={item.EndDate}
                    isMemberPrice={item.IsMemberPrice}
                    guestPrice={item.guestPrice}
                    isEarly={item.IsEarly}
                  />
                );
              })}
            </View>
          )}
          {tablePrices.length > 0 && (
            <View style={[styles.table, {marginTop: 16}]}>
              <Text style={styles.subtitle}>{'Table'}</Text>
              {tablePrices.map(item => {
                const isSelected =
                  selectedPrice && item.Key === selectedPrice.Key;
                return (
                  <PriceRow
                    key={item.Key}
                    isSelected={isSelected}
                    name={item.TableName}
                    price={item.Price}
                    onPress={() => handleSelectPrice(item)}
                    endDate={item.EndDate}
                    isMemberPrice={item.IsMemberPrice}
                    isTable={true}
                    isEarly={item.IsEarly}
                  />
                );
              })}
            </View>
          )}
        </Card>
      )}
    </View>
  );
};

PhoneEventDescription.propTypes = propTypes;
export default PhoneEventDescription;

<Text style={styles.contentTitle}>{'Event Pricing'}</Text>
          {individualPrices.length > 0 && (
            <View style={styles.table}>
              <Text style={styles.subtitle}>{'Individual'}</Text>

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {Divider} from 'common-components';
import styles from 'events/styles';
import PropTypes from 'prop-types';
import {format, compareAsc} from 'date-fns';

const PriceRow = ({
  name,
  price,
  isSelected,
  onPress,
  endDate,
  guestPrice,
  isEarly,
  isMemberPrice,
  isTable,
}) => {
  const selectedPriceStyle = isSelected ? styles.selectedOuterCircle : null;
  const text =
    isEarly && endDate
      ? `${name} - Early pricing ends ${format(endDate, 'MM/DD/YYYY')}`
      : name;

  const now = new Date();
  const visible =
    endDate === null ||
    (isEarly && compareAsc(now, endDate) < 0) ||
    (!isEarly && compareAsc(now, endDate) >= 0);

  if (visible) {
    return (
      <View>
        <TouchableOpacity style={styles.tableRow} onPress={onPress}>
          <View style={styles.radioButton}>
            <View style={[styles.outerRadioCircle, selectedPriceStyle]}>
              {isSelected && <View style={styles.innerRadioCircle} />}
            </View>
            <View style={styles.priceLabelWrapper}>
              {!isTable && (
                <Text style={styles.priceLabel} numberOfLines={3}>
                  {text}
                </Text>
              )}
              {guestPrice && (
                <Text style={styles.priceSubLabel} numberOfLines={3}>
                  {guestPrice.Name}
                </Text>
              )}
              {isTable && (
                <Text style={styles.priceLabel} numberOfLines={3}>
                  {`${text} - ${isMemberPrice ? '' : 'Non '}Member`}
                </Text>
              )}
            </View>
          </View>
          <View style={styles.priceContent}>
            <Text style={styles.blackText}>{`$${price}`}</Text>
            {guestPrice && (
              <Text style={styles.priceSubLabelTotal}>{`$${
                guestPrice.Price
              }`}</Text>
            )}
          </View>
        </TouchableOpacity>
        <Divider />
      </View>
    );
  }
  return <View />;
};

PriceRow.propTypes = {
  endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
  guestPrice: PropTypes.object,
  isEarly: PropTypes.bool,
  isMemberPrice: PropTypes.bool,
  isSelected: PropTypes.bool,
  isTable: PropTypes.bool,
  name: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  price: PropTypes.number.isRequired,
};

export default PriceRow;

const PhoneEventDescription = props => {
  console.log(props);
  const {
    event,
    handleSelectPrice,
    individualPrices,
    selectedPrice,
    tablePrices,
  } = props;