diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx index f74249244..7da30d2e8 100644 --- a/apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx +++ b/apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx @@ -15,30 +15,51 @@ import { Avatar, ComboboxItem } from "@probo/ui"; import type { PreloadedQuery } from "react-relay"; import { graphql, usePreloadedQuery } from "react-relay"; +import { readInlineData } from "relay-runtime"; import type { - CommonThirdPartyComboboxQuery$data, - CommonThirdPartyComboboxQuery, -} from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql"; + CommonThirdPartyCombobox_commonThirdParty$data, + CommonThirdPartyCombobox_commonThirdParty$key, +} from "#/__generated__/core/CommonThirdPartyCombobox_commonThirdParty.graphql"; +import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql"; +import type { CreateVendorInput } from "#/__generated__/core/VendorGraphCreateMutation.graphql"; export type CommonThirdPartyRef - = CommonThirdPartyComboboxQuery$data["commonThirdParties"][number]; + = CommonThirdPartyCombobox_commonThirdParty$data; + +const commonThirdPartyFragment = graphql` + fragment CommonThirdPartyCombobox_commonThirdParty on CommonThirdParty @inline { + name + logoUrl + category + websiteUrl + headquarterAddress + legalName + privacyPolicyUrl + serviceLevelAgreementUrl + dataProcessingAgreementUrl + certifications + securityPageUrl + trustPageUrl + statusPageUrl + termsOfServiceUrl + } +`; export const commonThirdPartiesQuery = graphql` query CommonThirdPartyComboboxQuery($name: String!) { commonThirdParties(name: $name) { id name - websiteUrl logoUrl - ...CreateVendorDialog_commonThirdParty + ...CommonThirdPartyCombobox_commonThirdParty } } `; interface CommonThirdPartyComboboxProps { queryRef: PreloadedQuery; - onSelect: (thirdPartyRef: CommonThirdPartyRef) => void; + onSelect: (thridParty: Omit) => void; } export function CommonThirdPartyCombobox({ @@ -52,7 +73,27 @@ export function CommonThirdPartyCombobox({ {data.commonThirdParties.map(thirdParty => ( onSelect(thirdParty)} + onClick={() => { + const tp = readInlineData( + commonThirdPartyFragment, + thirdParty, + ); + onSelect({ + name: tp.name, + headquarterAddress: tp.headquarterAddress, + legalName: tp.legalName, + websiteUrl: tp.websiteUrl, + category: tp.category, + privacyPolicyUrl: tp.privacyPolicyUrl, + serviceLevelAgreementUrl: tp.serviceLevelAgreementUrl, + dataProcessingAgreementUrl: tp.dataProcessingAgreementUrl, + certifications: tp.certifications, + securityPageUrl: tp.securityPageUrl, + trustPageUrl: tp.trustPageUrl, + statusPageUrl: tp.statusPageUrl, + termsOfServiceUrl: tp.termsOfServiceUrl, + }); + }} > (commonThirdPartiesQuery); - const onSelect = async (thirdPartyRef: CommonThirdPartyRef | string) => { + const onSelect = async (thirdParty: Omit | string) => { const input - = typeof thirdPartyRef === "string" + = typeof thirdParty === "string" ? { organizationId, - name: thirdPartyRef, + name: thirdParty, category: null, } - : (() => { - const tp = readInlineData( - commonThirdPartyFragment, - thirdPartyRef, - ); - return { - organizationId, - name: tp.name, - headquarterAddress: tp.headquarterAddress || null, - legalName: tp.legalName || null, - websiteUrl: tp.websiteUrl || null, - category: tp.category || null, - privacyPolicyUrl: tp.privacyPolicyUrl || null, - serviceLevelAgreementUrl: - tp.serviceLevelAgreementUrl || null, - dataProcessingAgreementUrl: - tp.dataProcessingAgreementUrl || null, - certifications: tp.certifications, - securityPageUrl: tp.securityPageUrl || null, - trustPageUrl: tp.trustPageUrl || null, - statusPageUrl: tp.statusPageUrl || null, - termsOfServiceUrl: tp.termsOfServiceUrl || null, - }; - })(); + : { + ...thirdParty, + organizationId, + }; await createVendor({ variables: { input,