diff --git a/src/Components/Artwork/Details/Details.tsx b/src/Components/Artwork/Details/Details.tsx index 9ac80834fb9..2e83f295fad 100644 --- a/src/Components/Artwork/Details/Details.tsx +++ b/src/Components/Artwork/Details/Details.tsx @@ -16,6 +16,7 @@ import HighDemandIcon from "@artsy/icons/HighDemandIcon" import { BidTimerLine } from "./BidTimerLine" import { PrimaryLabelLine } from "Components/Artwork/Details/PrimaryLabelLine" import { PartnerOfferLineQueryRenderer } from "./PartnerOfferLine" +import { PartnerOfferedPriceQueryRenderer } from "./PartnerOfferedPrice" export interface DetailsProps { artwork: Details_artwork$data @@ -194,7 +195,11 @@ const SaleInfoLine: React.FC = props => { fontWeight="bold" overflowEllipsis > - + {" "} + ) @@ -218,7 +223,7 @@ const HighDemandInfo = () => { const NBSP = " " -const SaleMessage: React.FC = props => { +export const SaleMessage: React.FC = props => { const { artwork: { sale, sale_message, sale_artwork }, } = props diff --git a/src/Components/Artwork/Details/PartnerOfferedPrice.tsx b/src/Components/Artwork/Details/PartnerOfferedPrice.tsx new file mode 100644 index 00000000000..e23572f69cb --- /dev/null +++ b/src/Components/Artwork/Details/PartnerOfferedPrice.tsx @@ -0,0 +1,80 @@ +import { FC } from "react" +import { createFragmentContainer, graphql } from "react-relay" +import { Flex, Text } from "@artsy/palette" +import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer" +import { SaleMessage } from "./Details" +import { PartnerOfferedPriceQuery } from "__generated__/PartnerOfferedPriceQuery.graphql" +import { PartnerOfferedPrice_artwork$data } from "__generated__/PartnerOfferedPrice_artwork.graphql" +import { Details_artwork$data } from "__generated__/Details_artwork.graphql" + +interface PartnerOfferedPriceProps { + artwork: PartnerOfferedPrice_artwork$data + fallback: object +} + +const PartnerOfferedPrice: React.FC = ({ + artwork, + fallback, +}) => { + const partnerOffer = artwork?.collectorSignals?.partnerOffer + const offeredPrice = partnerOffer?.priceWithDiscount?.display + + return partnerOffer ? {offeredPrice} : fallback +} + +const PartnerOfferedPriceFragmentContainer = createFragmentContainer( + PartnerOfferedPrice, + { + artwork: graphql` + fragment PartnerOfferedPrice_artwork on Artwork { + collectorSignals { + partnerOffer { + endAt + priceWithDiscount { + display + } + } + } + } + `, + } +) + +interface PartnerOfferedPriceQueryRendererProps { + id: string + artwork: Details_artwork$data +} + +export const PartnerOfferedPriceQueryRenderer: FC = ({ + id, + artwork, +}) => { + return ( + + lazyLoad + query={graphql` + query PartnerOfferedPriceQuery($id: String!) { + artwork(id: $id) { + ...PartnerOfferedPrice_artwork + } + } + `} + placeholder={} + variables={{ id }} + render={({ error, props }) => { + const publicPrice = + + if (error || !props?.artwork) { + return publicPrice + } + + return ( + + ) + }} + /> + ) +} diff --git a/src/__generated__/PartnerOfferedPriceQuery.graphql.ts b/src/__generated__/PartnerOfferedPriceQuery.graphql.ts new file mode 100644 index 00000000000..ed7e8089fb4 --- /dev/null +++ b/src/__generated__/PartnerOfferedPriceQuery.graphql.ts @@ -0,0 +1,156 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest, Query } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type PartnerOfferedPriceQuery$variables = { + id: string; +}; +export type PartnerOfferedPriceQuery$data = { + readonly artwork: { + readonly " $fragmentSpreads": FragmentRefs<"PartnerOfferedPrice_artwork">; + } | null | undefined; +}; +export type PartnerOfferedPriceQuery = { + response: PartnerOfferedPriceQuery$data; + variables: PartnerOfferedPriceQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "id" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "id" + } +], +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "PartnerOfferedPriceQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": "Artwork", + "kind": "LinkedField", + "name": "artwork", + "plural": false, + "selections": [ + { + "args": null, + "kind": "FragmentSpread", + "name": "PartnerOfferedPrice_artwork" + } + ], + "storageKey": null + } + ], + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Operation", + "name": "PartnerOfferedPriceQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": "Artwork", + "kind": "LinkedField", + "name": "artwork", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CollectorSignals", + "kind": "LinkedField", + "name": "collectorSignals", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "PartnerOfferToCollector", + "kind": "LinkedField", + "name": "partnerOffer", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "endAt", + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "Money", + "kind": "LinkedField", + "name": "priceWithDiscount", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "display", + "storageKey": null + } + ], + "storageKey": null + }, + (v2/*: any*/) + ], + "storageKey": null + } + ], + "storageKey": null + }, + (v2/*: any*/) + ], + "storageKey": null + } + ] + }, + "params": { + "cacheID": "94df35b04390a18848aba366c104f4cf", + "id": null, + "metadata": {}, + "name": "PartnerOfferedPriceQuery", + "operationKind": "query", + "text": "query PartnerOfferedPriceQuery(\n $id: String!\n) {\n artwork(id: $id) {\n ...PartnerOfferedPrice_artwork\n id\n }\n}\n\nfragment PartnerOfferedPrice_artwork on Artwork {\n collectorSignals {\n partnerOffer {\n endAt\n priceWithDiscount {\n display\n }\n id\n }\n }\n}\n" + } +}; +})(); + +(node as any).hash = "f6ab5ba13662f712cb9ffb1e19f786af"; + +export default node; diff --git a/src/__generated__/PartnerOfferedPrice_artwork.graphql.ts b/src/__generated__/PartnerOfferedPrice_artwork.graphql.ts new file mode 100644 index 00000000000..f7447c86cc9 --- /dev/null +++ b/src/__generated__/PartnerOfferedPrice_artwork.graphql.ts @@ -0,0 +1,89 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type PartnerOfferedPrice_artwork$data = { + readonly collectorSignals: { + readonly partnerOffer: { + readonly endAt: string | null | undefined; + readonly priceWithDiscount: { + readonly display: string | null | undefined; + } | null | undefined; + } | null | undefined; + } | null | undefined; + readonly " $fragmentType": "PartnerOfferedPrice_artwork"; +}; +export type PartnerOfferedPrice_artwork$key = { + readonly " $data"?: PartnerOfferedPrice_artwork$data; + readonly " $fragmentSpreads": FragmentRefs<"PartnerOfferedPrice_artwork">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "PartnerOfferedPrice_artwork", + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CollectorSignals", + "kind": "LinkedField", + "name": "collectorSignals", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "PartnerOfferToCollector", + "kind": "LinkedField", + "name": "partnerOffer", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "endAt", + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "Money", + "kind": "LinkedField", + "name": "priceWithDiscount", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "display", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } + ], + "type": "Artwork", + "abstractKey": null +}; + +(node as any).hash = "e183115990f16ae59970028abac82ac8"; + +export default node;