Add mutations and inputs to manage brand logos
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<be7955648260f44b4b42a2b342db2b05>>
|
||||
* @generated SignedSource<<6ae7a5c203ff61690408ec2753fe2f11>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -14,10 +14,17 @@ export type CompliancePageBrandPageQuery$variables = {
|
||||
};
|
||||
export type CompliancePageBrandPageQuery$data = {
|
||||
readonly organization: {
|
||||
readonly compliancePage?: {
|
||||
readonly __typename: "Organization";
|
||||
readonly compliancePage: {
|
||||
readonly canUpdate: boolean;
|
||||
readonly darkLogoFileUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoFileUrl: string | null | undefined;
|
||||
} | null | undefined;
|
||||
};
|
||||
} | {
|
||||
// This will never be '%other', but we need some
|
||||
// value in case none of the concrete values match.
|
||||
readonly __typename: "%other";
|
||||
};
|
||||
};
|
||||
export type CompliancePageBrandPageQuery = {
|
||||
@@ -44,21 +51,53 @@ v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoFileUrl",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "darkLogoFileUrl",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"alias": "compliancePage",
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "trustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoFileUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "darkLogoFileUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": "canUpdate",
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "action",
|
||||
"value": "core:trust-center:update"
|
||||
}
|
||||
],
|
||||
"kind": "ScalarField",
|
||||
"name": "permission",
|
||||
"storageKey": "permission(action:\"core:trust-center:update\")"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
@@ -76,21 +115,14 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "compliancePage",
|
||||
"args": null,
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "trustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
"kind": "RequiredField",
|
||||
"field": (v4/*: any*/),
|
||||
"action": "THROW"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
@@ -117,51 +149,32 @@ return {
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "compliancePage",
|
||||
"args": null,
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "trustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
},
|
||||
(v4/*: any*/)
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "17e4be042ed0e09a4b299d38f33dff32",
|
||||
"cacheID": "a0e24c6bb927ff34274492952df0346b",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "CompliancePageBrandPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query CompliancePageBrandPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n compliancePage: trustCenter {\n logoFileUrl\n darkLogoFileUrl\n id\n }\n }\n id\n }\n}\n"
|
||||
"text": "query CompliancePageBrandPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n compliancePage: trustCenter {\n id\n logoFileUrl\n darkLogoFileUrl\n canUpdate: permission(action: \"core:trust-center:update\")\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "3364d36a8dd77d39d00d50f451a027a7";
|
||||
(node as any).hash = "3d2d6ef82bb9cf232aad738c906b8a54";
|
||||
|
||||
export default node;
|
||||
|
||||
123
apps/console/src/__generated__/core/CompliancePageBrandPage_updateMutation.graphql.ts
generated
Normal file
123
apps/console/src/__generated__/core/CompliancePageBrandPage_updateMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* @generated SignedSource<<b0dc20be7382cf67a0906b4f06e713e0>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type UpdateTrustCenterBrandInput = {
|
||||
darkLogoFile?: any | null | undefined;
|
||||
logoFile?: any | null | undefined;
|
||||
trustCenterId: string;
|
||||
};
|
||||
export type CompliancePageBrandPage_updateMutation$variables = {
|
||||
input: UpdateTrustCenterBrandInput;
|
||||
};
|
||||
export type CompliancePageBrandPage_updateMutation$data = {
|
||||
readonly updateTrustCenterBrand: {
|
||||
readonly trustCenter: {
|
||||
readonly darkLogoFileUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoFileUrl: string | null | undefined;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type CompliancePageBrandPage_updateMutation = {
|
||||
response: CompliancePageBrandPage_updateMutation$data;
|
||||
variables: CompliancePageBrandPage_updateMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "UpdateTrustCenterBrandPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "updateTrustCenterBrand",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "trustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoFileUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "darkLogoFileUrl",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "CompliancePageBrandPage_updateMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "CompliancePageBrandPage_updateMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "fb398aa8a46a93ca7b68e4ef9841a4d6",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "CompliancePageBrandPage_updateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation CompliancePageBrandPage_updateMutation(\n $input: UpdateTrustCenterBrandInput!\n) {\n updateTrustCenterBrand(input: $input) {\n trustCenter {\n id\n logoFileUrl\n darkLogoFileUrl\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "cb158c24dbd3824e6fa9cc3e4632dc81";
|
||||
|
||||
export default node;
|
||||
@@ -1,25 +1,312 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Dropzone,
|
||||
FileButton,
|
||||
IconTrashCan,
|
||||
Label,
|
||||
Spinner,
|
||||
} from "@probo/ui";
|
||||
import { type ChangeEventHandler, useState } from "react";
|
||||
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
|
||||
import { graphql } from "relay-runtime";
|
||||
|
||||
import type { CompliancePageBrandPage_updateMutation } from "#/__generated__/core/CompliancePageBrandPage_updateMutation.graphql";
|
||||
import type { CompliancePageBrandPageQuery } from "#/__generated__/core/CompliancePageBrandPageQuery.graphql";
|
||||
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
|
||||
|
||||
export const compliancePageBrandPageQuery = graphql`
|
||||
query CompliancePageBrandPageQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) {
|
||||
__typename
|
||||
... on Organization {
|
||||
compliancePage: trustCenter {
|
||||
compliancePage: trustCenter @required(action: THROW) {
|
||||
id
|
||||
logoFileUrl
|
||||
darkLogoFileUrl
|
||||
canUpdate: permission(action: "core:trust-center:update")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const updateTrustCenterBrandMutation = graphql`
|
||||
mutation CompliancePageBrandPage_updateMutation($input: UpdateTrustCenterBrandInput!) {
|
||||
updateTrustCenterBrand(input: $input) {
|
||||
trustCenter {
|
||||
id
|
||||
logoFileUrl
|
||||
darkLogoFileUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function CompliancePageBrandPage(props: { queryRef: PreloadedQuery<CompliancePageBrandPageQuery> }) {
|
||||
const { queryRef } = props;
|
||||
const { __ } = useTranslate();
|
||||
|
||||
const { organization } = usePreloadedQuery<CompliancePageBrandPageQuery>(compliancePageBrandPageQuery, queryRef);
|
||||
if (organization.__typename !== "Organization") {
|
||||
throw new Error("invalid type for node");
|
||||
}
|
||||
|
||||
return <pre>{JSON.stringify(organization, null, 2)}</pre>;
|
||||
const trustCenterId = organization.compliancePage.id;
|
||||
const logoFileUrl = organization.compliancePage.logoFileUrl;
|
||||
const darkLogoFileUrl = organization.compliancePage.darkLogoFileUrl;
|
||||
|
||||
const [logoPreview, setLogoPreview] = useState<string | null>(null);
|
||||
const [darkLogoPreview, setDarkLogoPreview] = useState<string | null>(null);
|
||||
|
||||
const [updateBrand, isUpdating] = useMutationWithToasts<CompliancePageBrandPage_updateMutation>(
|
||||
updateTrustCenterBrandMutation,
|
||||
{
|
||||
successMessage: __("Compliance page branding updated successfully"),
|
||||
errorMessage: __("Failed to update compliance page branding"),
|
||||
},
|
||||
);
|
||||
const disabled = isUpdating || !organization.compliancePage.canUpdate;
|
||||
|
||||
const processLogoFile = (file: File, setPreview: (url: string) => void) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setPreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleLogoChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
processLogoFile(file, setLogoPreview);
|
||||
|
||||
void updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
logoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.logoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDarkLogoChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
processLogoFile(file, setDarkLogoPreview);
|
||||
|
||||
void updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
darkLogoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.darkLogoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setDarkLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogoDrop = (files: File[]) => {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
|
||||
processLogoFile(file, setLogoPreview);
|
||||
|
||||
void updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
logoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.logoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDarkLogoDrop = (files: File[]) => {
|
||||
const file = files[0];
|
||||
if (!file) return;
|
||||
|
||||
processLogoFile(file, setDarkLogoPreview);
|
||||
|
||||
void updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
darkLogoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.darkLogoFile": file,
|
||||
},
|
||||
onCompleted: () => {
|
||||
setDarkLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveLogo = async () => {
|
||||
await updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
logoFile: null,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveDarkLogo = async () => {
|
||||
await updateBrand({
|
||||
variables: {
|
||||
input: {
|
||||
trustCenterId,
|
||||
darkLogoFile: null,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setDarkLogoPreview(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const currentLogoUrl = logoPreview || logoFileUrl;
|
||||
const currentDarkLogoUrl = darkLogoPreview || darkLogoFileUrl;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-medium">{__("Branding")}</h2>
|
||||
{isUpdating && <Spinner />}
|
||||
</div>
|
||||
|
||||
<Card padded className="space-y-4">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="flex-1">
|
||||
<Label>{__("Logo")}</Label>
|
||||
<p className="text-sm text-txt-tertiary mb-3">
|
||||
{__("This logo will be displayed on your public compliance page.")}
|
||||
</p>
|
||||
|
||||
{currentLogoUrl
|
||||
? (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="border border-border-solid rounded-md p-4 bg-surface-secondary">
|
||||
<img
|
||||
src={currentLogoUrl}
|
||||
alt={__("Compliance page logo")}
|
||||
className="h-16 max-w-xs object-contain"
|
||||
/>
|
||||
</div>
|
||||
<FileButton
|
||||
disabled={disabled}
|
||||
onChange={handleLogoChange}
|
||||
variant="secondary"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml,image/webp"
|
||||
>
|
||||
{isUpdating ? __("Uploading...") : __("Change logo")}
|
||||
</FileButton>
|
||||
<Button
|
||||
type="button"
|
||||
variant="quaternary"
|
||||
icon={IconTrashCan}
|
||||
onClick={() => void handleRemoveLogo()}
|
||||
disabled={disabled}
|
||||
aria-label={__("Remove logo")}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<Dropzone
|
||||
description={__("Upload logo image (PNG, JPG, SVG, WEBP up to 5MB)")}
|
||||
isUploading={isUpdating}
|
||||
onDrop={handleLogoDrop}
|
||||
accept={{
|
||||
"image/png": [".png"],
|
||||
"image/jpeg": [".jpg", ".jpeg"],
|
||||
"image/svg+xml": [".svg"],
|
||||
"image/webp": [".webp"],
|
||||
}}
|
||||
maxSize={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Label>{__("Dark mode logo")}</Label>
|
||||
<p className="text-sm text-txt-tertiary mb-3">
|
||||
{__("This logo will be used when dark mode is enabled.")}
|
||||
</p>
|
||||
|
||||
{currentDarkLogoUrl
|
||||
? (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="border border-border-solid rounded-md p-4 bg-gray-900">
|
||||
<img
|
||||
src={currentDarkLogoUrl}
|
||||
alt={__("Compliance page dark logo")}
|
||||
className="h-16 max-w-xs object-contain"
|
||||
/>
|
||||
</div>
|
||||
<FileButton
|
||||
disabled={disabled}
|
||||
onChange={handleDarkLogoChange}
|
||||
variant="secondary"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml,image/webp"
|
||||
>
|
||||
{isUpdating ? __("Uploading...") : __("Change dark logo")}
|
||||
</FileButton>
|
||||
<Button
|
||||
type="button"
|
||||
variant="quaternary"
|
||||
icon={IconTrashCan}
|
||||
onClick={() => void handleRemoveDarkLogo()}
|
||||
disabled={disabled}
|
||||
aria-label={__("Remove dark logo")}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<Dropzone
|
||||
description={__("Upload dark logo image (PNG, JPG, SVG, WEBP up to 5MB)")}
|
||||
isUploading={isUpdating}
|
||||
onDrop={handleDarkLogoDrop}
|
||||
accept={{
|
||||
"image/png": [".png"],
|
||||
"image/jpeg": [".jpg", ".jpeg"],
|
||||
"image/svg+xml": [".svg"],
|
||||
"image/webp": [".webp"],
|
||||
}}
|
||||
maxSize={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user