<commit_before>import { SaleInfo_me } from "__generated__/SaleInfo_me.graphql"
import { SaleInfo_sale } from "__generated__/SaleInfo_sale.graphql"
import { SaleInfoQueryRendererQuery } from "__generated__/SaleInfoQueryRendererQuery.graphql"
import { MenuItem } from "lib/Components/MenuItem"
import { defaultEnvironment } from "lib/relay/createEnvironment"
import { PlaceholderText } from "lib/utils/placeholders"
import { renderWithPlaceholder } from "lib/utils/renderWithPlaceholder"
import moment from "moment"
import { Flex, Join, Sans, Separator, Text } from "palette"
import React, { useEffect, useRef } from "react"
import { PanResponder, ScrollView, View } from "react-native"
import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"

import { ContextModule, OwnerType } from "@artsy/cohesion"
import { StyledWebView } from "lib/Components/StyledWebView"
import { sendEmail } from "lib/utils/sendEmail"
import { ProvideScreenTracking, Schema } from "lib/utils/track"
import { navigate } from "../../navigation/navigate"
import { PlaceholderBox } from "../../utils/placeholders"
import { RegisterToBidButtonContainer } from "../Sale/Components/RegisterToBidButton"
import { saleStatus } from "../Sale/helpers"

interface Props {
  sale: SaleInfo_sale
  me: SaleInfo_me
}

const AuctionSupport = () => {
  return (
    <Flex mt={1}>
      <Text variant="subtitle" px={2} mb={15}>
        Auction support
      </Text>
      <MenuItem
        title="Auction FAQs"
        onPress={() => {
          navigate("/auction-faq")
        }}
      />
      <MenuItem
        title="Contact us for help"
        onPress={() => {
          sendEmail("<EMAIL>")
        }}
      />
    </Flex>
  )
}

const AuctionIsLive = () => (
  <Flex px={2} data-test-id="live-auction">
    <Sans size="5t" mb={2} mt={1}>
      This is a live auction
    </Sans>
    <Text variant="text" color="black" fontSize="size4">
      Participating in a live auction means you’ll be competing against bidders in real time on an auction room floor.
      You can place max bids which will be represented by Artsy in the auction room or you can bid live when the auction
      opens.
    </Text>
  </Flex>
)

export const SaleInfo: React.FC<Props> = ({ sale, me }) => {
  const panResponder = useRef<any>(null)
  useEffect(() => {
    panResponder.current = PanResponder.create({
      onStartShouldSetPanResponderCapture: () => true,
    })
  }, [])

  const renderLiveBiddingOpening = () => {
    if (!sale.liveStartAt || !moment().isSameOrBefore(moment(sale.liveStartAt)) || !sale.timeZone) {
      return null
    }

    return (
      <Flex mb={1}>
        <Text variant="text" color="black" fontSize="size4" mt={25} fontWeight="500">
          Live bidding opens on
        </Text>
        <Text variant="text" color="black" fontSize="size4">
          {`${moment(sale.liveStartAt).format("dddd, MMMM, D, YYYY")} at ${moment(sale.liveStartAt).format(
            "h:mma"
          )} ${moment.tz(sale.timeZone).zoneAbbr()}`}
        </Text>
      </Flex>
    )
  }

  return (
    <ProvideScreenTracking info={tracks.screen(sale.internalID, sale.slug)}><commit_msg>fix:use correct time zone for start of bidding on Auction More Info screen (#4477)<commit_after>import { SaleInfo_me } from "__generated__/SaleInfo_me.graphql"
import { SaleInfo_sale } from "__generated__/SaleInfo_sale.graphql"
import { SaleInfoQueryRendererQuery } from "__generated__/SaleInfoQueryRendererQuery.graphql"
import { MenuItem } from "lib/Components/MenuItem"
import { defaultEnvironment } from "lib/relay/createEnvironment"
import { PlaceholderText } from "lib/utils/placeholders"
import { renderWithPlaceholder } from "lib/utils/renderWithPlaceholder"
import moment from "moment"
import { Flex, Join, Sans, Separator, Text } from "palette"
import React, { useEffect, useRef } from "react"
import { PanResponder, ScrollView, View } from "react-native"
import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"

import { ContextModule, OwnerType } from "@artsy/cohesion"
import { StyledWebView } from "lib/Components/StyledWebView"
import { sendEmail } from "lib/utils/sendEmail"
import { ProvideScreenTracking, Schema } from "lib/utils/track"
import { navigate } from "../../navigation/navigate"
import { PlaceholderBox } from "../../utils/placeholders"
import { RegisterToBidButtonContainer } from "../Sale/Components/RegisterToBidButton"
import { saleStatus } from "../Sale/helpers"

interface Props {
  sale: SaleInfo_sale
  me: SaleInfo_me
}

const AuctionSupport = () => {
  return (
    <Flex mt={1}>
      <Text variant="subtitle" px={2} mb={15}>
        Auction support
      </Text>
      <MenuItem
        title="Auction FAQs"
        onPress={() => {
          navigate("/auction-faq")
        }}
      />
      <MenuItem
        title="Contact us for help"
        onPress={() => {
          sendEmail("<EMAIL>")
        }}
      />
    </Flex>
  )
}

const AuctionIsLive = () => (
  <Flex px={2} data-test-id="live-auction">
    <Sans size="5t" mb={2} mt={1}>
      This is a live auction
    </Sans>
    <Text variant="text" color="black" fontSize="size4">
      Participating in a live auction means you’ll be competing against bidders in real time on an auction room floor.
      You can place max bids which will be represented by Artsy in the auction room or you can bid live when the auction
      opens.
    </Text>
  </Flex>
)

export const SaleInfo: React.FC<Props> = ({ sale, me }) => {
  const panResponder = useRef<any>(null)
  useEffect(() => {
    panResponder.current = PanResponder.create({
      onStartShouldSetPanResponderCapture: () => true,
    })
  }, [])

  const renderLiveBiddingOpening = () => {
    if (!sale.liveStartAt || !moment().isSameOrBefore(moment(sale.liveStartAt)) || !sale.timeZone) {
      return null
    }

    const tz = moment.tz.guess(true)

    return (
      <Flex mb={1}>
        <Text variant="text" color="black" fontSize="size4" mt={25} fontWeight="500">
          Live bidding opens on
        </Text>
        <Text variant="text" color="black" fontSize="size4">
          {`${moment(sale.liveStartAt).format("dddd, MMMM, D, YYYY")} at ${moment(sale.liveStartAt)
            .tz(tz)
            .format("h:mma z")}`}
        </Text>
      </Flex>
    )
  }

  return (
    <ProvideScreenTracking info={tracks.screen(sale.internalID, sale.slug)}>
{'fraction_non_alphanumeric': 0.13610113937880444, 'fraction_numerical': 0.005931012954580927, 'mean_word_length': 3.344406779661017, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '804937', 'n_tokens_mistral': 2038, 'n_tokens_neox': 1984, 'n_words': 498}