Make it work

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

@@ -14,6 +14,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 
 interface StaffPasswordResetDialogFormData {
   password: string;
@@ -38,6 +39,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
   onSubmit
 }) => {
   const intl = useIntl();
+  const dialogErrors = useModalDialogErrors(apiErrors, open);
 
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
@@ -47,7 +49,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
           description="dialog header"
         />
       </DialogTitle>
-      <Form errors={apiErrors} initial={initialForm} onSubmit={onSubmit}>
+      <Form errors={dialogErrors} initial={initialForm} onSubmit={onSubmit}>
         {({ change, data, errors, submit }) => (
           <>
             <DialogContent>

src/staff/views/StaffDetails.tsx

@@ -15,7 +15,8 @@ import {
   TypedStaffAvatarDeleteMutation,
   TypedStaffAvatarUpdateMutation,
   TypedStaffMemberDeleteMutation,
-  TypedStaffMemberUpdateMutation
+  TypedStaffMemberUpdateMutation,
+  useChangeStaffPassword
 } from "../mutations";
 import { TypedStaffMemberDetailsQuery } from "../queries";
 import { StaffAvatarDelete } from "../types/StaffAvatarDelete";
@@ -28,6 +29,7 @@ import {
   StaffMemberDetailsUrlQueryParams
 } from "../urls";
 import StaffPasswordResetDialog from "../components/StaffPasswordResetDialog";
+import { ChangeStaffPassword } from "../types/ChangeStaffPassword";
 
 interface OrderListProps {
   id: string;
@@ -49,6 +51,24 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
       })
     );
 
+  const handleChangePassword = (data: ChangeStaffPassword) => {
+    if (data.passwordChange.errors.length === 0) {
+      notify({
+        text: intl.formatMessage(commonMessages.savedChanges)
+      });
+      closeModal();
+    }
+  };
+  const [changePassword, changePasswordOpts] = useChangeStaffPassword({
+    onCompleted: handleChangePassword
+  });
+
+  const changePasswordTransitionState = getMutationState(
+    changePasswordOpts.called,
+    changePasswordOpts.loading,
+    maybe(() => changePasswordOpts.data.passwordChange.errors)
+  );
+
   return (
     <TypedStaffMemberDetailsQuery
       displayLoader
@@ -228,11 +248,25 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
                                 </DialogContentText>
                               </ActionDialog>
                               <StaffPasswordResetDialog
-                                confirmButtonState="default"
+                                confirmButtonState={
-                                errors={[]}
+                                  changePasswordTransitionState
+                                }
+                                errors={maybe(
+                                  () =>
+                                    changePasswordOpts.data.passwordChange
+                                      .errors,
+                                  []
+                                )}
                                 open={params.action === "change-password"}
                                 onClose={closeModal}
-                                onSubmit={() => undefined}
+                                onSubmit={data =>
+                                  changePassword({
+                                    variables: {
+                                      newPassword: data.password,
+                                      oldPassword: data.previousPassword
+                                    }
+                                  })
+                                }
                               />
                             </>
                           );