import { Link, LockIcon } from "@artsy/palette"
import { SecurePayment_artwork } from "__generated__/SecurePayment_artwork.graphql"
import React from "react"
import { createFragmentContainer } from "react-relay"
import { graphql } from "react-relay"
import { TrustSignal, TrustSignalProps } from "./TrustSignal"

interface SecurePaymentProps
  extends Omit<TrustSignalProps, "Icon" | "label" | "description"> {
  artwork: SecurePayment_artwork
}

export const SecurePayment: React.FC<SecurePaymentProps> = ({
  artwork,
  ...other
}) => {
  return (
    (artwork.is_acquireable || artwork.is_offerable) && (
      <TrustSignal
        Icon={<LockIcon />}
        label="Secure payment"
        description={
          <>
            {"Secure transactions by credit card through Stripe."}
            <br />
            <Link
              href="https://stripe.com/docs/security/stripe"
              target="_blank"
            >
              Learn more
            </Link>
            {"."}
          </>
        }
        {...other}
      />
    )
  )
}

export const SecurePaymentFragmentContainer = createFragmentContainer(
  SecurePayment,
  {
    artwork: graphql`
      fragment SecurePayment_artwork on Artwork {
        is_acquireable
        is_offerable
      }
    `,
  }
)

import { Link, LockIcon } from "@artsy/palette"
import { SecurePayment_artwork } from "__generated__/SecurePayment_artwork.graphql"
import React from "react"
import { createFragmentContainer } from "react-relay"
import { graphql } from "react-relay"
import { TrustSignal, TrustSignalProps } from "./TrustSignal"

interface SecurePaymentProps
  extends Omit<TrustSignalProps, "Icon" | "label" | "description"> {
  artwork: SecurePayment_artwork
}

export const SecurePayment: React.FC<SecurePaymentProps> = ({
  artwork,
  ...other
}) => {
  return (
    (artwork.is_acquireable || artwork.is_offerable) && (
      <TrustSignal
        Icon={<LockIcon />}
        label="Secure payment"
        description={
          <>
            {"Secure transactions by credit card through Stripe."}
            <br />
            <Link
              href="https://stripe.com/docs/security/stripe"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn more
            </Link>
            {"."}
          </>
        }
        {...other}
      />
    )
  )
}

export const SecurePaymentFragmentContainer = createFragmentContainer(
  SecurePayment,
  {
    artwork: graphql`
      fragment SecurePayment_artwork on Artwork {
        is_acquireable
        is_offerable
      }
    `,
  }
)

Add `noopener` to `_blank` link
Add `noopener` to `_blank` link

Co-Authored-By: Justin Bennett <58ba8ffe929f528f9120a120df59c1b15bf62d9d@gmail.com>