market/src/components/Publish/Pricing/index.tsx

import React, { ReactElement, useCallback, useEffect, useState } from 'react'
import { useFormikContext } from 'formik'
import Tabs from '@shared/atoms/Tabs'
import { FormPublishData } from '../_types'
import Fixed from './Fixed'
import Free from './Free'
import content from '../../../../content/price.json'
import styles from './index.module.css'
import { useMarketMetadata } from '@context/MarketMetadata'
import { useNetwork } from 'wagmi'

export default function PricingFields(): ReactElement {
  const { appConfig } = useMarketMetadata()
  const { chain } = useNetwork()
  const { approvedBaseTokens } = useMarketMetadata()

  // Connect with main publish form
  const { values, setFieldValue } = useFormikContext<FormPublishData>()
  const { pricing } = values
  const { type } = pricing

  const defaultBaseToken =
    approvedBaseTokens?.find((token) =>
      token.name.toLowerCase().includes('ocean')
    ) || approvedBaseTokens?.[0]

  const isBaseTokenSet = !!approvedBaseTokens?.find(
    (token) => token?.address === values?.pricing?.baseToken?.address
  )

  useEffect(() => {
    if (!approvedBaseTokens?.length) return
    if (isBaseTokenSet) return
    setFieldValue('pricing.baseToken', defaultBaseToken)
  }, [
    approvedBaseTokens,
    chain?.id,
    defaultBaseToken,
    isBaseTokenSet,
    setFieldValue,
    values.pricing.baseToken
  ])

  // Switch type value upon tab change
  function handleTabChange(tabName: string) {
    const type = tabName.toLowerCase()
    setFieldValue('pricing.type', type)
    setFieldValue('pricing.price', 0)
    setFieldValue('pricing.freeAgreement', false)
    setFieldValue('pricing.baseToken', defaultBaseToken)
    type !== 'free' && setFieldValue('pricing.amountDataToken', 1000)
  }

  const updateTabs = useCallback(() => {
    return [
      appConfig.allowFixedPricing === 'true'
        ? {
            title: content.create.fixed.title,
            content: (
              <Fixed
                approvedBaseTokens={approvedBaseTokens}
                content={content.create.fixed}
              />
            )
          }
        : undefined,

      appConfig.allowFreePricing === 'true'
        ? {
            title: content.create.free.title,
            content: <Free content={content.create.free} />
          }
        : undefined
    ].filter((tab) => tab !== undefined)
  }, [
    appConfig.allowFixedPricing,
    appConfig.allowFreePricing,
    approvedBaseTokens
  ])

  const [tabs, setTabs] = useState(updateTabs())

  useEffect(() => {
    setTabs(updateTabs())
  }, [updateTabs])

  return (
    <Tabs
      items={tabs}
      handleTabChange={handleTabChange}
      defaultIndex={type === 'free' ? 1 : 0}
      className={styles.pricing}
      showRadio
    />
  )
}