Update public apps for dedicated host routing
Stop relying on the /trust/{id} path prefix in the public trust app and
serve it from the host root, reading contact and profile data from the
trust center instead of the organization. Mirror the same fragment
ownership change in the compliance portal hero.
Signed-off-by: Bryan Frimin <bryan@probo.com>
This commit is contained in:
@@ -24,29 +24,29 @@ import { graphql, useFragment } from "react-relay";
|
||||
|
||||
import { externalHref, hostnameOf } from "#/lib/url/hostname";
|
||||
|
||||
import type { OrganizationContactInfo_organization$key } from "./__generated__/OrganizationContactInfo_organization.graphql";
|
||||
import type { TrustCenterContactInfo_trustCenter$key } from "./__generated__/TrustCenterContactInfo_trustCenter.graphql";
|
||||
import { organizationContactInfo } from "./variants";
|
||||
|
||||
const organizationContactInfoFragment = graphql`
|
||||
fragment OrganizationContactInfo_organization on Organization {
|
||||
const trustCenterContactInfoFragment = graphql`
|
||||
fragment TrustCenterContactInfo_trustCenter on TrustCenter {
|
||||
websiteUrl
|
||||
email
|
||||
headquarterAddress
|
||||
}
|
||||
`;
|
||||
|
||||
interface OrganizationContactInfoProps {
|
||||
organizationKey: OrganizationContactInfo_organization$key;
|
||||
interface TrustCenterContactInfoProps {
|
||||
trustCenterKey: TrustCenterContactInfo_trustCenter$key;
|
||||
}
|
||||
|
||||
// Organization contact details (website, email, HQ) rendered as an icon + label
|
||||
// row. Owns its fragment so it can be reused wherever the org is in scope.
|
||||
export function OrganizationContactInfo({ organizationKey }: OrganizationContactInfoProps) {
|
||||
const organization = useFragment(organizationContactInfoFragment, organizationKey);
|
||||
// Trust center contact details (website, email, HQ) rendered as an icon + label
|
||||
// row. Owns its fragment so it can be reused wherever the trust center is in scope.
|
||||
export function TrustCenterContactInfo({ trustCenterKey }: TrustCenterContactInfoProps) {
|
||||
const trustCenter = useFragment(trustCenterContactInfoFragment, trustCenterKey);
|
||||
|
||||
const hasWebsite = organization.websiteUrl != null && organization.websiteUrl !== "";
|
||||
const hasEmail = organization.email != null && organization.email !== "";
|
||||
const hasAddress = organization.headquarterAddress != null && organization.headquarterAddress !== "";
|
||||
const hasWebsite = trustCenter.websiteUrl != null && trustCenter.websiteUrl !== "";
|
||||
const hasEmail = trustCenter.email != null && trustCenter.email !== "";
|
||||
const hasAddress = trustCenter.headquarterAddress != null && trustCenter.headquarterAddress !== "";
|
||||
|
||||
// Nothing to show — render no row (and therefore no divider) at all.
|
||||
if (!hasWebsite && !hasEmail && !hasAddress) {
|
||||
@@ -60,21 +60,21 @@ export function OrganizationContactInfo({ organizationKey }: OrganizationContact
|
||||
{hasWebsite && (
|
||||
<a
|
||||
className={link()}
|
||||
href={externalHref(organization.websiteUrl)}
|
||||
href={externalHref(trustCenter.websiteUrl)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<GlobeSimpleIcon />
|
||||
<Text size={2} color="neutral">
|
||||
{hostnameOf(organization.websiteUrl)}
|
||||
{hostnameOf(trustCenter.websiteUrl)}
|
||||
</Text>
|
||||
</a>
|
||||
)}
|
||||
{hasEmail && (
|
||||
<a className={link()} href={`mailto:${organization.email}`}>
|
||||
<a className={link()} href={`mailto:${trustCenter.email}`}>
|
||||
<EnvelopeIcon />
|
||||
<Text size={2} color="neutral">
|
||||
{organization.email}
|
||||
{trustCenter.email}
|
||||
</Text>
|
||||
</a>
|
||||
)}
|
||||
@@ -82,7 +82,7 @@ export function OrganizationContactInfo({ organizationKey }: OrganizationContact
|
||||
<div className={item()}>
|
||||
<MapPinSimpleIcon />
|
||||
<Text size={2} color="neutral">
|
||||
{organization.headquarterAddress}
|
||||
{trustCenter.headquarterAddress}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
@@ -24,7 +24,7 @@ import { graphql, usePreloadedQuery } from "react-relay";
|
||||
|
||||
import { ComplianceFrameworksSection } from "#/components/ComplianceFrameworks/ComplianceFrameworksSection";
|
||||
import { Hero } from "#/components/Hero/Hero";
|
||||
import { OrganizationContactInfo } from "#/components/Hero/OrganizationContactInfo";
|
||||
import { TrustCenterContactInfo } from "#/components/Hero/TrustCenterContactInfo";
|
||||
import { RecentUpdatesSection } from "#/components/RecentUpdates/RecentUpdatesSection";
|
||||
import { SecurityCommitmentsSection } from "#/components/SecurityCommitments/SecurityCommitmentsSection";
|
||||
import { TrustedBySection } from "#/components/TrustedBy/TrustedBySection";
|
||||
@@ -36,8 +36,8 @@ export const homePageQuery = graphql`
|
||||
currentTrustCenter @required(action: THROW) {
|
||||
organization {
|
||||
name
|
||||
...OrganizationContactInfo_organization
|
||||
}
|
||||
...TrustCenterContactInfo_trustCenter
|
||||
...ComplianceFrameworksSection_trustCenter
|
||||
...SecurityCommitmentsSection_trustCenter
|
||||
...TrustedBySection_trustCenter
|
||||
@@ -62,7 +62,7 @@ export function HomePage({ queryRef }: HomePageProps) {
|
||||
title={t("home.heroTitle", { name: organization.name })}
|
||||
description={t("home.heroDescription")}
|
||||
>
|
||||
<OrganizationContactInfo organizationKey={organization} />
|
||||
<TrustCenterContactInfo trustCenterKey={currentTrustCenter} />
|
||||
</Hero>
|
||||
<div className="flex w-full flex-col items-center px-8 max-md:px-4">
|
||||
<div className="flex w-full max-w-5xl flex-col">
|
||||
|
||||
Reference in New Issue
Block a user