DynamicActionButtons.tsx

const DynamicActionButtons = ({
  payment,
  isBuyer,
  isSeller,
  isNewlyCreated,
}: DynamicPaymentComponentProp) => {
  const { loadingAuth, signIn } = useAuth()
  const buttonsToBeDisplayed: JSX.Element[] = []

  if (payment.status.claimed) {
    return <></>
  }

  // TODO: No need for checking loading here. This entarely component is not displayed if current status is loading
  if (!isSeller && !isNewlyCreated && !loadingAuth) {
    if (PaymentState.UNPAID === payment.status.state) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          color="primary"
          type="submit"
          onClick={() => onPayClick(payment, signIn)}
        >
          Pay with Unicrow
        </Button>
      )
    }
  }

  if (isBuyer) {
    if (PaymentState.PAID === payment.status.state) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onReleaseClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Release
        </Button>,
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onChallengeClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Challenge
        </Button>
      )
    }

    if (
      PaymentState.CHALLENGED === payment.status.state &&
      payment.status.lastChallenge === LastChallengeBy.BUYER
    ) {
      buttonsToBeDisplayed.push(
        <Button fullWidth disabled color="primary" type="submit">
          Waiting for release
        </Button>
      )
    }

    if (
      PaymentState.CHALLENGED === payment.status.state ||
      (PaymentState.SETTLEMENT === payment.status.state &&
        payment.status.lastChallenge === LastChallengeBy.SELLER)
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onChallengeClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Re-challenge
        </Button>,

        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onReleaseClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Release
        </Button>,

        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onViewSettlementClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Settle
        </Button>
      )
    }

    if (
      PaymentState.SETTLEMENT === payment.status.state &&
      payment.status.lastChallenge === LastChallengeBy.BUYER
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onViewSettlementClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          View Offer
        </Button>
      )
    }

    if (
      (PaymentState.RELEASED === payment.status.state &&
        payment.status.lastChallenge === LastChallengeBy.SELLER) ||
      payment.status.state === PaymentState.SETTLED
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onClaimClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Claim
        </Button>
      )
    }
  }

  if (isSeller) {
    if (PaymentState.PAID === payment.status.state) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onRefundClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have Escrow Id")
            }
          }}
        >
          Refund
        </Button>
      )
    }

    if (
      PaymentState.CHALLENGED === payment.status.state &&
      payment.status.lastChallenge === LastChallengeBy.BUYER
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onChallengeClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Re-challenge
        </Button>,
        <Button
          fullWidth
          variant="outlined"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onReleaseClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Release
        </Button>,
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onSettlementClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Settle
        </Button>
      )
    }

    if (
      PaymentState.SETTLEMENT === payment.status.state &&
      payment.status.lastChallenge === LastChallengeBy.BUYER
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onViewSettlementClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          View Offer
        </Button>
      )
    }

    if (
      PaymentState.CHALLENGED === payment.status.state &&
      payment.status.lastChallenge === LastChallengeBy.SELLER
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          disabled
          variant="contained"
          color="primary"
          type="submit"
        >
          Waiting for release
        </Button>
      )
    }

    if (
      (PaymentState.RELEASED === payment.status.state &&
        payment.status.lastChallenge === LastChallengeBy.BUYER) ||
      (PaymentState.RELEASED === payment.status.state &&
        !payment.status.lastChallenge) ||
      payment.status.state === PaymentState.SETTLED ||
      payment.status.state === PaymentState.PERIOD_EXPIRED
    ) {
      buttonsToBeDisplayed.push(
        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          onClick={() => {
            if (payment.escrowId) {
              onClaimClick(payment.escrowId)
            } else {
              throw new Error("Payment doesn't have escrowId")
            }
          }}
        >
          Claim
        </Button>
      )
    }
  }

  return (
    <Grid container spacing={4}>
      {buttonsToBeDisplayed.map((button, index, arr) => {
        return (
          <Grid
            item
            xs={index !== 2 && arr.length > 1 ? 6 : 12}
            key={`${index}-action-button`}
          >
            {button}
          </Grid>
        )
      })}
    </Grid>
  )
}

export default DynamicActionButtons