WIP

Author: cammiida

src/layout/SigneeList/api.ts

@@ -33,10 +33,17 @@ export type SigneeState = z.infer<typeof signeeStateSchema>;
 
 export const signingQueries = {
   all: ['signing'] as const,
-  signeeList: (partyId: string | undefined, instanceGuid: string | undefined, taskId: string | undefined) =>
+  signeeList: (
+    instanceOwnerPartyId: string | undefined,
+    instanceGuid: string | undefined,
+    taskId: string | undefined,
+  ) =>
     queryOptions({
-      queryKey: [...signingQueries.all, 'signeeList', partyId, instanceGuid, taskId],
-      queryFn: partyId && instanceGuid && taskId ? () => fetchSigneeList(partyId, instanceGuid) : skipToken,
+      queryKey: [...signingQueries.all, 'signeeList', instanceOwnerPartyId, instanceGuid, taskId],
+      queryFn:
+        instanceOwnerPartyId && instanceGuid && taskId
+          ? () => fetchSigneeList(instanceOwnerPartyId, instanceGuid)
+          : skipToken,
       refetchInterval: 1000 * 60, // 1 minute
       refetchOnMount: 'always',
     }),

src/layout/SigningActions/OnBehalfOfChooser.tsx

@@ -9,20 +9,20 @@ import { RequiredIndicator } from 'src/components/form/RequiredIndicator';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { type SigneeState } from 'src/layout/SigneeList/api';
-import type { AuthorizedOrganizationDetails } from 'src/layout/SigningActions/api';
+import type { AuthorizedOrganizationDetails, OnBehalfOf } from 'src/layout/SigningActions/api';
 
 interface OnBehalfOfChooserProps {
   currentUserSignee: SigneeState | undefined;
   authorizedOrganizationDetails: AuthorizedOrganizationDetails['organizations'];
-  onBehalfOfOrg: string | null;
+  onBehalfOf: OnBehalfOf | null;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   error: boolean;
 }
 
 export const OnBehalfOfChooser = ({
   currentUserSignee,
   authorizedOrganizationDetails,
-  onBehalfOfOrg,
+  onBehalfOf,
   onChange,
   error = false,
 }: Readonly<OnBehalfOfChooserProps>) => {
@@ -42,18 +42,18 @@ export const OnBehalfOfChooser = ({
           name='onBehalfOf'
           key={currentUserSignee.partyId}
           onChange={onChange}
-          checked={onBehalfOfOrg === ''}
+          checked={onBehalfOf?.orgNoOrSsn === ''}
         />
       )}
 
       {authorizedOrganizationDetails.map((org) => (
         <RadioButton
-          value={org.orgNumber}
+          value={org.partyId}
           label={org.orgName}
           name='onBehalfOf'
           key={org.partyId}
           onChange={onChange}
-          checked={onBehalfOfOrg === org.orgNumber}
+          checked={onBehalfOf?.orgNoOrSsn === org.orgNumber}
         />
       ))}
       {error && (

src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx

@@ -20,6 +20,7 @@ import { SigningPanel } from 'src/layout/SigningActions/PanelSigning';
 import classes from 'src/layout/SigningActions/SigningActions.module.css';
 import { SubmitSigningButton } from 'src/layout/SigningActions/SubmitSigningButton';
 import { useItemWhenType } from 'src/utils/layout/useNodeItem';
+import type { OnBehalfOf } from 'src/layout/SigningActions/api';
 
 type AwaitingCurrentUserSignaturePanelProps = {
   baseComponentId: string;
@@ -47,7 +48,7 @@ export function AwaitingCurrentUserSignaturePanel({
   const signingButtonText = textResourceBindings?.signingButton ?? 'signing.sign_button';
 
   const [confirmReadDocuments, setConfirmReadDocuments] = useState(false);
-  const [onBehalfOf, setOnBehalfOf] = useState<string | null>(null);
+  const [onBehalfOf, setOnBehalfOf] = useState<OnBehalfOf | null>(null);
   const [onBehalfOfError, setOnBehalfOfError] = useState(false);
   const [confirmReadDocumentsError, setConfirmReadDocumentsError] = useState(false);
 
@@ -95,7 +96,10 @@ export function AwaitingCurrentUserSignaturePanel({
       unsignedUserSigneeParties.length === 1 &&
       unsignedUserSigneeParties[0].partyId === unsignedAuthorizedOrgSignees.at(0)?.partyId
     ) {
-      setOnBehalfOf(unsignedAuthorizedOrgSignees[0].orgNumber);
+      setOnBehalfOf({
+        orgNoOrSsn: unsignedAuthorizedOrgSignees[0].orgNumber,
+        partyId: unsignedAuthorizedOrgSignees[0].partyId.toString(),
+      });
     }
   }, [unsignedUserSigneeParties, unsignedAuthorizedOrgSignees]);
 
@@ -142,10 +146,10 @@ export function AwaitingCurrentUserSignaturePanel({
         <OnBehalfOfChooser
           currentUserSignee={unsignedUserSigneeParties.find((s) => s.partyId === currentUserPartyId)}
           authorizedOrganizationDetails={unsignedAuthorizedOrgSignees}
-          onBehalfOfOrg={onBehalfOf}
+          onBehalfOf={onBehalfOf}
           error={onBehalfOfError}
           onChange={(e) => {
-            setOnBehalfOf(e.target.value);
+            setOnBehalfOf(JSON.parse(e.target.value));
             setOnBehalfOfError(false);
           }}
         />

src/layout/SigningActions/api.ts

@@ -11,6 +11,7 @@ import { doPerformAction } from 'src/queries/queries';
 import { httpGet } from 'src/utils/network/sharedNetworking';
 import { capitalizeName } from 'src/utils/stringHelper';
 import { appPath } from 'src/utils/urls/appUrlHelper';
+import type { SigneeState } from 'src/layout/SigneeList/api';
 
 const authorizedOrganizationDetailsSchema = z.object({
   organizations: z.array(
@@ -81,24 +82,38 @@ export function useUserSigneeParties() {
   return signeeList.filter((signee) => authorizedPartyIds.includes(signee.partyId));
 }
 
+export type OnBehalfOf = { orgNoOrSsn: string; partyId: string };
+
 export function useSigningMutation() {
-  const { instanceOwnerPartyId, instanceGuid } = useParams();
+  const { instanceOwnerPartyId, instanceGuid, taskId } = useParams();
   const selectedLanguage = useCurrentLanguage();
   const queryClient = useQueryClient();
+  const currentUserPartyId = useProfile()?.partyId.toString();
 
   return useMutation({
-    mutationFn: async (onBehalfOf: string | null) => {
+    mutationFn: async (onBehalfOf: OnBehalfOf | null) => {
       if (instanceOwnerPartyId && instanceGuid) {
         return doPerformAction(
           instanceOwnerPartyId,
           instanceGuid,
-          { action: 'sign', ...(onBehalfOf ? { onBehalfOf } : {}) },
+          { action: 'sign', ...(onBehalfOf ? { onBehalfOf: onBehalfOf.orgNoOrSsn } : {}) },
           selectedLanguage,
           queryClient,
         );
       }
     },
-    onSuccess: () => {
+    onSuccess: (_data, onBehalfOf) => {
+      // optimistically update data in cache
+      const signeeListQueryKey = signingQueries.signeeList(instanceOwnerPartyId, instanceGuid, taskId).queryKey;
+      queryClient.setQueryData<SigneeState[]>(signeeListQueryKey, (signeeList) => {
+        const partyId = onBehalfOf?.partyId ?? currentUserPartyId;
+        if (!signeeList || !partyId) {
+          return undefined;
+        }
+
+        return signeeList.map((signee) => ({ ...signee, hasSigned: signee.partyId.toString() === partyId }));
+      });
+
       // Refetch all queries related to signing to ensure we have the latest data
       queryClient.invalidateQueries({ queryKey: signingQueries.all });
     },