{"version":3,"file":"MemberDetailsSection.mjs","sources":["../../../../../../../../web/src/adminPortal/memberManagement/MemberDetailsSection.tsx"],"sourcesContent":["import { B2BOrganizationsMembersUpdateOptions, Member } from '@stytch/core/public';\nimport React, { SetStateAction, useCallback, useMemo } from 'react';\n\nimport { Alert } from '../components/Alert';\nimport { FlexBox } from '../components/FlexBox';\nimport { Input } from '../components/Input';\nimport { SettingsContainer, useSettingsContainer } from '../components/SettingsContainer';\nimport { SettingsList } from '../components/SettingsList';\nimport { SettingsListItem } from '../components/SettingsListItem';\nimport { Typography } from '../components/Typography';\nimport { NO_VALUE } from '../utils/noValue';\nimport { useFormState } from '../utils/useFormState';\nimport { useMutateMember } from '../utils/useMutateMember';\nimport { useRbac } from '../utils/useRbac';\nimport { useSelf } from '../utils/useSelf';\nimport { useStateSliceSetter } from '../utils/useStateSliceSetter';\nimport { useMemberManagementRouterController } from './MemberManagementRouter';\n\ninterface MemberDetailsFormState {\n  name: string;\n  emailAddress: string;\n}\n\nconst MemberDetailsSectionBody = ({\n  localState,\n  setLocalState,\n  remoteState,\n  isSelf,\n}: {\n  localState: MemberDetailsFormState;\n  setLocalState: (state: SetStateAction<MemberDetailsFormState>) => void;\n  remoteState: MemberDetailsFormState;\n  isSelf: boolean;\n}) => {\n  const { editing } = useSettingsContainer();\n\n  const { emailAddress, name } = editing ? localState : remoteState;\n\n  const handleNameChange = useStateSliceSetter(setLocalState, 'name');\n  const handleEmailChange = useStateSliceSetter(setLocalState, 'emailAddress');\n\n  const { data: canUpdateMemberNamePerm } = useRbac('stytch.member', 'update.info.name');\n  const { data: canUpdateMemberEmailPerm } = useRbac('stytch.member', 'update.info.email');\n\n  const { data: canUpdateSelfNamePerm } = useRbac('stytch.self', 'update.info.name');\n\n  const canUpdateName = canUpdateMemberNamePerm || (canUpdateSelfNamePerm && isSelf);\n  const canUpdateEmail = canUpdateMemberEmailPerm && !isSelf;\n\n  const showCannotEditOwnEmailAlert = editing && canUpdateMemberEmailPerm && isSelf;\n\n  return (\n    <FlexBox flexDirection=\"column\" gap={2}>\n      {showCannotEditOwnEmailAlert && <Alert>You cannot edit your own email address.</Alert>}\n      <SettingsList>\n        <SettingsListItem title=\"Name\">\n          {editing && canUpdateName ? (\n            <Input value={name} onChange={handleNameChange} />\n          ) : (\n            <Typography variant=\"body2\">{name || NO_VALUE}</Typography>\n          )}\n        </SettingsListItem>\n        <SettingsListItem title=\"Email\">\n          {editing && canUpdateEmail ? (\n            <Input\n              value={emailAddress}\n              onChange={handleEmailChange}\n              caption=\"Updating will revoke any current sessions, force a password reset, and delete SSO/OAuth registrations.\"\n            />\n          ) : (\n            <Typography variant=\"body2\">{emailAddress || NO_VALUE}</Typography>\n          )}\n        </SettingsListItem>\n      </SettingsList>\n    </FlexBox>\n  );\n};\n\nexport const MemberDetailsSection = ({ member }: { member: Member }) => {\n  const { isSelf } = useSelf();\n  const isMemberSelf = isSelf(member.member_id);\n  const { data: canUpdateMemberNamePerm } = useRbac('stytch.member', 'update.info.name');\n  const { data: canUpdateMemberEmailPerm } = useRbac('stytch.member', 'update.info.email');\n\n  const { data: canUpdateSelfNamePerm } = useRbac('stytch.self', 'update.info.name');\n\n  const canUpdateName = canUpdateMemberNamePerm || (canUpdateSelfNamePerm && isMemberSelf);\n  const canUpdateEmail = canUpdateMemberEmailPerm && !isMemberSelf;\n\n  const isMemberDeleted = member.status === 'deleted';\n\n  const canEditSection = !isMemberDeleted && (canUpdateEmail || canUpdateName);\n\n  const remoteState = useMemo<MemberDetailsFormState>(\n    () => ({\n      emailAddress: member.email_address,\n      name: member.name,\n    }),\n    [member.email_address, member.name],\n  );\n\n  const { localState, setLocalState, editing, handleSetEditing } = useFormState({ remoteState });\n\n  const { mutate } = useMutateMember();\n\n  const handleSave = useCallback(async () => {\n    const memberOptions: B2BOrganizationsMembersUpdateOptions = {\n      member_id: member.member_id,\n    };\n\n    let shouldUpdate = false;\n    const setOption = <T extends keyof B2BOrganizationsMembersUpdateOptions>(\n      key: T,\n      value: B2BOrganizationsMembersUpdateOptions[T],\n    ) => {\n      memberOptions[key] = value;\n      shouldUpdate = true;\n    };\n\n    if (localState.name !== remoteState.name) {\n      setOption('name', localState.name);\n    }\n    if (localState.emailAddress !== remoteState.emailAddress) {\n      setOption('email_address', localState.emailAddress);\n    }\n\n    if (shouldUpdate) {\n      await mutate(memberOptions);\n    }\n  }, [localState.emailAddress, localState.name, member.member_id, mutate, remoteState.emailAddress, remoteState.name]);\n\n  const { useBlockNavigation } = useMemberManagementRouterController();\n\n  return (\n    <SettingsContainer\n      title=\"Details\"\n      hasCTA={canEditSection}\n      onSave={handleSave}\n      useBlockNavigation={useBlockNavigation}\n      editing={editing}\n      setEditing={handleSetEditing}\n    >\n      <MemberDetailsSectionBody\n        remoteState={remoteState}\n        localState={localState}\n        setLocalState={setLocalState}\n        isSelf={isMemberSelf}\n      />\n    </SettingsContainer>\n  );\n};\n"],"names":["MemberDetailsSectionBody","localState","setLocalState","remoteState","isSelf","editing","useSettingsContainer","emailAddress","name","handleNameChange","useStateSliceSetter","handleEmailChange","data","canUpdateMemberNamePerm","useRbac","canUpdateMemberEmailPerm","canUpdateSelfNamePerm","canUpdateName","canUpdateEmail","showCannotEditOwnEmailAlert","React","FlexBox","flexDirection","gap","Alert","SettingsList","SettingsListItem","title","Input","value","onChange","Typography","variant","NO_VALUE","caption","MemberDetailsSection","member","useSelf","isMemberSelf","member_id","isMemberDeleted","status","canEditSection","useMemo","email_address","handleSetEditing","useFormState","mutate","useMutateMember","handleSave","useCallback","memberOptions","shouldUpdate","setOption","key","useBlockNavigation","useMemberManagementRouterController","SettingsContainer","hasCTA","onSave","setEditing"],"mappings":"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"}