@bigbinary/neeto-team-members-frontend 5.0.62 → 5.0.64

package/dist/v2/ManageMember.js

@@ -1,52 +1,1052 @@
-import '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/regenerator';
-import 'react';
-import '@bigbinary/neeto-atoms';
-import 'classnames';
-import 'lucide-react';
-import '@bigbinary/neeto-commons-frontend/v2/initializers';
-import '@bigbinary/neeto-commons-frontend/v2/utils';
-import '@bigbinary/neeto-image-uploader-frontend/v2/hooks';
-import 'ramda';
-import 'react-i18next';
-import 'sonner';
-import '../useRolesApi-93OoRU1s.js';
-import '../useTeamsApi-DkgWqw-g.js';
-export { M as default } from '../index-BFScwOib.js';
-import '../RolesRadioGroup-CsTenjqQ.js';
-import '../ActionBlock-jgw1N-As.js';
-import '../Select-DZ56UG-l.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import 'formik';
-import 'react/jsx-runtime';
-import '../index-CKQDhbTA.js';
-import '../ProfileImage-V240yfTY.js';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Switch, Label, cn, Checkbox, Typography, Button, Tooltip, Spinner, DropdownMenu, Alert } from '@bigbinary/neeto-atoms';
+import classnames from 'classnames';
+import { Mail, EllipsisVertical, Check, ArrowLeft, Info } from 'lucide-react';
+import { globalProps, taxonomies } from '@bigbinary/neeto-commons-frontend/v2/initializers';
+import { showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/v2/utils';
+import { useProfileImageUpload } from '@bigbinary/neeto-image-uploader-frontend/v2/hooks';
+import { pluck, not, isEmpty, head, isNotNil, reverse, groupBy, prop } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
+import { toast } from 'sonner';
+import { u as useFetchRoles, a as useFetchGlobalRoles } from '../useRolesApi-93OoRU1s.js';
+import { u as useFetchMembers, c as useFetchMember, d as useCreateMember, e as useMembersCreationStatus, r as refetchMembers, f as useUpdateMember } from '../useTeamsApi-DkgWqw-g.js';
+import { useField, useFormikContext } from 'formik';
+import { toLabelAndValue, filterBy, findBy } from '@bigbinary/neeto-cist';
+import { N as NEETO_AUTH_MANAGE_PRODUCT_URL, g as getSingleInvitationTranslationProps, a as getInviteURL, r as remainingExpiryDays, F as FEEDBACK_DURATION_MS, b as FORM_PAGES, c as FILTER_INVALID_EMAILS, C as COUNTER_PROPS, E as EMAIL_REGEX, D as DEFAULT_COMPONENT_CONFIG, M as MEMBERS_FORM_COMPONENT_MAPPER, d as renderInitialValues, e as buildValidationSchema, f as renderPayload, R as RolesRadioGroup } from '../RolesRadioGroup-CsTenjqQ.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { b as FormikSelect, a as FormikForm } from '../Select-DZ56UG-l.js';
+import { Card, CardContent } from '@bigbinary/neeto-atoms/primitives/Card';
+import { SINGULAR, PLURAL, LANGUAGE_OPTIONS } from '@bigbinary/neeto-commons-frontend/v2/constants';
+import { withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
+import { u as useCreateInviteLinks, a as useRegenerateInviteLink, b as useFetchInviteLinks } from '../useInviteLinksApi-gn-AP0Yx.js';
+import { Input, MultiEmailInput } from '@bigbinary/neeto-atoms/formik';
+import { isNeetoAuthApp } from '../utils.js';
+import { NeetoTimezoneSelector } from '@bigbinary/neeto-time-zones';
+import { FormikPhoneNumberInput } from '@bigbinary/neeto-molecules/v2/PhoneNumber';
+import { T as TIME_FORMAT_OPTIONS, D as DATE_FORMAT_OPTIONS } from '../constants-CXdiW8NZ.js';
+import { u as useCountries, P as ProfileImage } from '../ProfileImage-Ca02-i_d.js';
+import { F as FormikActionBlock } from '../ActionBlock-jgw1N-As.js';
+import { S as ScrollToErrorField } from '../index-CKQDhbTA.js';
+import { g as getFilteredRoles } from '../utils-DEOuQRcK.js';
 import '@tanstack/react-query';
-import '@bigbinary/neeto-cist';
 import '@bigbinary/neeto-commons-frontend/react-utils';
 import 'axios';
-import '../constants-CXdiW8NZ.js';
-import 'i18next';
-import '@bigbinary/neeto-commons-frontend/constants';
 import '@bigbinary/neeto-commons-frontend/initializers';
 import 'qs';
 import '../queryClient-Dsu-gu4Y.js';
-import '@bigbinary/neeto-atoms/primitives/Card';
-import '@bigbinary/neeto-commons-frontend/v2/constants';
-import '@bigbinary/neeto-commons-frontend/v2/react-utils';
-import '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
-import '../useInviteLinksApi-gn-AP0Yx.js';
-import '@bigbinary/neeto-atoms/formik';
-import '../utils.js';
-import '../_commonjsHelpers-BFTU3MAI.js';
-import '@bigbinary/neeto-time-zones';
-import '@bigbinary/neeto-molecules/v2/PhoneNumber';
-import '@bigbinary/neeto-atoms/primitives';
-import '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import '@bigbinary/neeto-commons-frontend/constants';
 import '@babel/runtime/helpers/toConsumableArray';
+import 'i18next';
 import 'yup';
+import '../_commonjsHelpers-BFTU3MAI.js';
 import '../inject-css-C2dztUxs.js';
 import '../useCountriesApi-DK00167T.js';
+import '@bigbinary/neeto-atoms/primitives';
+import '@bigbinary/neeto-molecules/v2/MoreDropdown';
+
+var _excluded = ["name", "label", "className", "checked", "disabled", "onChange"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FormikSwitch = function FormikSwitch(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    className = _ref.className,
+    checkedProp = _ref.checked,
+    disabled = _ref.disabled,
+    onChangeProp = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    helpers = _useField2[2];
+  var isChecked = checkedProp !== undefined ? checkedProp : field.value;
+  return /*#__PURE__*/jsxs("div", {
+    className: cn("flex items-center gap-2", className),
+    children: [/*#__PURE__*/jsx(Switch, _objectSpread$1({
+      disabled: disabled,
+      checked: isChecked,
+      id: name,
+      onCheckedChange: function onCheckedChange(val) {
+        helpers.setValue(val);
+        onChangeProp === null || onChangeProp === void 0 || onChangeProp({
+          target: {
+            checked: val
+          }
+        });
+      }
+    }, rest)), label && /*#__PURE__*/jsx(Label, {
+      htmlFor: name,
+      children: label
+    })]
+  });
+};
+
+var AppList = function AppList(_ref) {
+  var _globalProps$user;
+  var globalRoles = _ref.globalRoles,
+    savedStateRef = _ref.savedStateRef;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(savedStateRef.current.isAppListEnabled),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAppListEnabled = _useState2[0],
+    setIsAppListEnabled = _useState2[1];
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    _useFormikContext$val2 = _useFormikContext$val.emails,
+    emails = _useFormikContext$val2 === void 0 ? [] : _useFormikContext$val2,
+    _useFormikContext$val3 = _useFormikContext$val.appRoles,
+    appRoles = _useFormikContext$val3 === void 0 ? [] : _useFormikContext$val3,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var selectedEmail = pluck("value", emails);
+  var isManageProductsLinkEnabled = ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.isOwner) && Object.keys(globalRoles).length >= 3;
+  useEffect(function () {
+    if (savedStateRef.current.isAppListEnabled !== isAppListEnabled) {
+      appRoles === null || appRoles === void 0 || appRoles.forEach(function (appRole, index) {
+        var _globalProps$appName;
+        if ((appRole === null || appRole === void 0 ? void 0 : appRole.appName) === ((_globalProps$appName = globalProps.appName) === null || _globalProps$appName === void 0 ? void 0 : _globalProps$appName.substring(5))) {
+          setFieldValue("appRoles[".concat(index, "].isEnabled"), true);
+          return;
+        }
+        setFieldValue("appRoles[".concat(index, "].isEnabled"), isAppListEnabled);
+      });
+    }
+    savedStateRef.current.isAppListEnabled = isAppListEnabled;
+  }, [isAppListEnabled]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var buildRoleOptions = function buildRoleOptions(roles) {
+    return roles.map(function (role) {
+      return toLabelAndValue(role.name);
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-6",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "w-full space-y-3",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-start gap-2",
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          checked: isAppListEnabled,
+          "data-testid": "ntm-manage-members-app-list-checkbox",
+          id: "app-list-toggle",
+          onCheckedChange: function onCheckedChange() {
+            return setIsAppListEnabled(not);
+          }
+        }), /*#__PURE__*/jsx(Label, {
+          className: "leading-relaxed",
+          htmlFor: "app-list-toggle",
+          children: /*#__PURE__*/jsx(Typography, {
+            className: "leading-relaxed",
+            variant: "body3",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoTeamMembers.helpers.addMembersToNeetoProducts",
+              values: {
+                emails: selectedEmail
+              }
+            })
+          })
+        })]
+      }), isManageProductsLinkEnabled && /*#__PURE__*/jsx(Typography, {
+        variant: "body3",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoTeamMembers.helpers.manageProducts",
+          components: {
+            button: /*#__PURE__*/jsx(Button, {
+              asChild: true,
+              variant: "link",
+              children: /*#__PURE__*/jsx("a", {
+                href: NEETO_AUTH_MANAGE_PRODUCT_URL,
+                children: "manage"
+              })
+            })
+          }
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-full",
+      children: appRoles.map(function (_ref2, index) {
+        var _globalProps$appName2;
+        var appName = _ref2.appName,
+          isEnabled = _ref2.isEnabled;
+        var isCurrentApp = appName === ((_globalProps$appName2 = globalProps.appName) === null || _globalProps$appName2 === void 0 ? void 0 : _globalProps$appName2.substring(5));
+        var isAppRoleSelectionChecked = isCurrentApp || isEnabled;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex w-full items-center justify-between py-2",
+          children: [/*#__PURE__*/jsx(Tooltip, {
+            content: isCurrentApp ? t("neetoTeamMembers.tooltips.hostAppIsRequired") : null,
+            children: /*#__PURE__*/jsx("span", {
+              children: /*#__PURE__*/jsx(FormikSwitch, {
+                checked: isAppRoleSelectionChecked,
+                disabled: isCurrentApp,
+                name: "appsRoles[".concat(index, "].isEnabled"),
+                label: t("neetoTeamMembers.labels.neeto_", {
+                  product: appName
+                }),
+                onChange: function onChange(_ref3) {
+                  var target = _ref3.target;
+                  setFieldValue("appRoles[".concat(index, "].isEnabled"), target.checked);
+                }
+              })
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            content: isCurrentApp ? t("neetoTeamMembers.tooltips.goBackToChangeRole") : null,
+            children: /*#__PURE__*/jsx("span", {
+              className: "w-1/2 max-w-[250px]",
+              children: /*#__PURE__*/jsx(FormikSelect, {
+                isDisabled: isCurrentApp || !isEnabled,
+                name: "appRoles[".concat(index, "].activeRole"),
+                options: buildRoleOptions(globalRoles[appName])
+              })
+            })
+          })]
+        }, appName);
+      })
+    })]
+  });
+};
+
+var Confirmation = function Confirmation() {
+  var _globalProps$organiza;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    emails = _useFormikContext$val.emails,
+    role = _useFormikContext$val.role,
+    appRoles = _useFormikContext$val.appRoles;
+  var selectedEmail = pluck("value", emails);
+  var activeAppRoles = filterBy({
+    isEnabled: true
+  }, appRoles);
+  var isMultipleProduct = activeAppRoles.length > 1;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Card, {
+      className: "w-full shrink-0 bg-muted/40 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxs(CardContent, {
+        className: "flex items-start gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "bg-primary/10 mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full",
+          children: /*#__PURE__*/jsx(Mail, {
+            className: "size-4 text-primary"
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 flex-1 leading-relaxed",
+          variant: "body3",
+          children: isMultipleProduct ? /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoTeamMembers.helpers.multipleProductInvitation",
+            values: {
+              count: selectedEmail.length,
+              emails: selectedEmail,
+              orgName: (_globalProps$organiza = globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
+            }
+          }) : /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoTeamMembers.helpers.singleProductInvitation",
+            values: getSingleInvitationTranslationProps({
+              activeAppRoles: activeAppRoles,
+              role: role,
+              selectedEmail: selectedEmail
+            })
+          })
+        })]
+      })
+    }), isMultipleProduct && /*#__PURE__*/jsx(Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsx(CardContent, {
+        className: "overflow-hidden rounded-md border border-border p-0",
+        children: /*#__PURE__*/jsxs("table", {
+          className: "w-full border-collapse",
+          children: [/*#__PURE__*/jsx("thead", {
+            className: "bg-muted/40",
+            children: /*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("th", {
+                className: "px-3 py-2 text-start text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: t("neetoTeamMembers.common.productName")
+              }), /*#__PURE__*/jsx("th", {
+                className: "px-3 py-2 text-start text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: t("neetoTeamMembers.common.role", SINGULAR)
+              })]
+            })
+          }), /*#__PURE__*/jsx("tbody", {
+            className: "divide-y divide-border",
+            children: activeAppRoles.map(function (_ref) {
+              var appName = _ref.appName,
+                activeRole = _ref.activeRole;
+              return /*#__PURE__*/jsxs("tr", {
+                children: [/*#__PURE__*/jsx("td", {
+                  className: "px-3 py-2",
+                  children: /*#__PURE__*/jsx(Typography, {
+                    variant: "body3",
+                    children: t("neetoTeamMembers.labels.neeto_", {
+                      product: appName
+                    })
+                  })
+                }), /*#__PURE__*/jsx("td", {
+                  className: "px-3 py-2",
+                  children: /*#__PURE__*/jsx(Typography, {
+                    variant: "body3",
+                    children: activeRole
+                  })
+                })]
+              }, appName);
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+var InviteLink$1 = function InviteLink(_ref) {
+  var _inviteLinks$, _inviteLinks$2, _inviteLinks$3, _inviteLinks$4, _inviteLinks$5, _inviteLinks$6, _inviteLinks$7;
+  var t = _ref.t,
+    roles = _ref.roles;
+  var _useCreateInviteLinks = useCreateInviteLinks(),
+    createInviteLink = _useCreateInviteLinks.mutate,
+    isCreateLinkPending = _useCreateInviteLinks.isPending;
+  var _useRegenerateInviteL = useRegenerateInviteLink(),
+    regenerateLink = _useRegenerateInviteL.mutate;
+  var _useFetchInviteLinks = useFetchInviteLinks(),
+    _useFetchInviteLinks$ = _useFetchInviteLinks.data,
+    _useFetchInviteLinks$2 = _useFetchInviteLinks$ === void 0 ? {} : _useFetchInviteLinks$,
+    _useFetchInviteLinks$3 = _useFetchInviteLinks$2.inviteLinks,
+    inviteLinks = _useFetchInviteLinks$3 === void 0 ? [] : _useFetchInviteLinks$3,
+    isFetchLinkLoading = _useFetchInviteLinks.isLoading;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    feedbackMessage = _useState2[0],
+    setFeedbackMessage = _useState2[1];
+  var feedbackTimerRef = useRef();
+  var showFeedback = function showFeedback(message) {
+    setFeedbackMessage(message);
+    clearTimeout(feedbackTimerRef.current);
+    feedbackTimerRef.current = setTimeout(function () {
+      return setFeedbackMessage("");
+    }, FEEDBACK_DURATION_MS);
+  };
+  useEffect(function () {
+    return function () {
+      return clearTimeout(feedbackTimerRef.current);
+    };
+  }, []);
+  var isInviteLinkEmpty = !isFetchLinkLoading && isEmpty(inviteLinks);
+  var handleRegenerate = function handleRegenerate() {
+    var _findBy = findBy({
+        name: values.role
+      }, roles),
+      roleId = _findBy.id;
+    if (isEmpty(inviteLinks)) {
+      createInviteLink({
+        organizationRoleId: roleId
+      }, {
+        onSuccess: function onSuccess() {
+          return showFeedback(t("neetoTeamMembers.alerts.success.inviteLinkGenerated"));
+        }
+      });
+      return;
+    }
+    regenerateLink({
+      inviteLinkId: inviteLinks[0].id,
+      payload: {
+        organizationRoleId: roleId
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        return showFeedback(t("neetoTeamMembers.alerts.success.inviteLinkRegenerated"));
+      }
+    });
+  };
+  if (isFetchLinkLoading || isCreateLinkPending) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-2",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2 pt-1",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "relative flex min-w-0 grow items-center truncate rounded-md border border-border bg-muted/50 leading-none",
+        children: [isInviteLinkEmpty ? /*#__PURE__*/jsx("div", {
+          className: "relative min-w-0 grow truncate p-2 leading-none"
+        }) : /*#__PURE__*/jsx(Button, {
+          asChild: true,
+          className: "relative block h-auto min-w-0 shrink grow truncate p-2 font-normal leading-none no-underline hover:underline",
+          variant: "link",
+          children: /*#__PURE__*/jsx("a", {
+            href: getInviteURL(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$ = inviteLinks[0]) === null || _inviteLinks$ === void 0 ? void 0 : _inviteLinks$.token),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: getInviteURL(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$2 = inviteLinks[0]) === null || _inviteLinks$2 === void 0 ? void 0 : _inviteLinks$2.token)
+          })
+        }), isInviteLinkEmpty ? /*#__PURE__*/jsx(Button, {
+          className: "rounded-s-none",
+          onClick: handleRegenerate,
+          children: t("neetoTeamMembers.buttons.generateLink")
+        }) : /*#__PURE__*/jsx(CopyToClipboardButton, {
+          className: "rounded-s-none border-s",
+          value: getInviteURL(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$3 = inviteLinks[0]) === null || _inviteLinks$3 === void 0 ? void 0 : _inviteLinks$3.token),
+          variant: "ghost"
+        })]
+      }), !isInviteLinkEmpty && /*#__PURE__*/jsx(DropdownMenu, {
+        customTarget: /*#__PURE__*/jsx(Button, {
+          "aria-label": t("neetoTeamMembers.buttons.regenerateLink"),
+          className: "shrink-0",
+          icon: EllipsisVertical,
+          size: "icon",
+          variant: "ghost"
+        }),
+        children: /*#__PURE__*/jsx(DropdownMenu.Menu, {
+          children: /*#__PURE__*/jsx(DropdownMenu.MenuItem, {
+            onClick: handleRegenerate,
+            children: t("neetoTeamMembers.buttons.regenerateLink")
+          })
+        })
+      })]
+    }), feedbackMessage && /*#__PURE__*/jsxs("div", {
+      "aria-live": "polite",
+      className: "flex w-fit items-center gap-1.5 rounded-md bg-success-solid px-2 py-1 text-success-solid-foreground animate-in fade-in slide-in-from-top-1 duration-200",
+      children: [/*#__PURE__*/jsx(Check, {
+        className: "size-3.5 shrink-0"
+      }), /*#__PURE__*/jsx(Typography, {
+        color: "inherit",
+        variant: "caption",
+        weight: "medium",
+        children: feedbackMessage
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      children: !isInviteLinkEmpty && /*#__PURE__*/jsx(Typography, {
+        className: "leading-relaxed",
+        color: "muted",
+        variant: "body3",
+        children: /*#__PURE__*/jsx(Trans, {
+          components: {
+            strong: /*#__PURE__*/jsx("strong", {})
+          },
+          i18nKey: "neetoTeamMembers.alerts.messages.inviteLink",
+          values: {
+            expiryDays: remainingExpiryDays(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$4 = inviteLinks[0]) === null || _inviteLinks$4 === void 0 ? void 0 : _inviteLinks$4.expiresAt),
+            role: inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$5 = inviteLinks[0]) === null || _inviteLinks$5 === void 0 || (_inviteLinks$5 = _inviteLinks$5.organizationRole) === null || _inviteLinks$5 === void 0 ? void 0 : _inviteLinks$5.name,
+            inviteLimit: inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$6 = inviteLinks[0]) === null || _inviteLinks$6 === void 0 ? void 0 : _inviteLinks$6.inviteLimit,
+            appName: globalProps.appName,
+            emailDomain: inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$7 = inviteLinks[0]) === null || _inviteLinks$7 === void 0 ? void 0 : _inviteLinks$7.domain
+          }
+        })
+      })
+    })]
+  });
+};
+var InviteLink = withT(InviteLink$1);
+
+var MultipleEmailInput = function MultipleEmailInput(_ref) {
+  var _head;
+  var _ref$emails = _ref.emails,
+    emails = _ref$emails === void 0 ? [] : _ref$emails,
+    innerRef = _ref.innerRef,
+    _ref$selectedMember = _ref.selectedMember,
+    selectedMember = _ref$selectedMember === void 0 ? null : _ref$selectedMember,
+    setCurrentPage = _ref.setCurrentPage;
+  var isInviteLinkFeatureEnabled = !isNeetoAuthApp();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleInputChange = function handleInputChange(event) {
+    var email = event.target.value;
+    var emailList = [{
+      label: email,
+      value: email,
+      valid: EMAIL_REGEX.test(email)
+    }];
+    setFieldValue("emails", emailList);
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full",
+    children: selectedMember ? /*#__PURE__*/jsx(Input, {
+      "data-testid": "ntm-manage-member-email-input",
+      name: "emails",
+      type: "email",
+      value: (_head = head(emails)) === null || _head === void 0 ? void 0 : _head.value,
+      label: /*#__PURE__*/jsx("span", {
+        className: "flex w-full justify-between",
+        children: /*#__PURE__*/jsx(Typography, {
+          variant: "body3",
+          children: t("neetoTeamMembers.common.email", SINGULAR)
+        })
+      }),
+      onChange: handleInputChange
+    }) : /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between pb-2",
+        children: [/*#__PURE__*/jsxs(Label, {
+          children: [t("neetoTeamMembers.common.email", PLURAL), /*#__PURE__*/jsx("span", {
+            className: "text-destructive",
+            children: " *"
+          })]
+        }), isInviteLinkFeatureEnabled && /*#__PURE__*/jsx(Button, {
+          variant: "link",
+          onClick: function onClick() {
+            return setCurrentPage(FORM_PAGES.INVITE_LINK);
+          },
+          children: t("neetoTeamMembers.buttons.inviteLink")
+        })]
+      }), /*#__PURE__*/jsx(MultiEmailInput, {
+        required: true,
+        counter: COUNTER_PROPS,
+        "data-testid": "ntm-manage-member-email-input",
+        filterInvalidEmails: FILTER_INVALID_EMAILS,
+        helpText: t("neetoTeamMembers.helpers.enterMultipleEmails"),
+        label: "",
+        name: "emails",
+        placeholder: t("neetoTeamMembers.placeholders.email"),
+        ref: innerRef
+      })]
+    })
+  });
+};
+
+var NameInputs = withT(function (_ref) {
+  var t = _ref.t,
+    innerRef = _ref.innerRef;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full gap-4",
+    children: [/*#__PURE__*/jsx(Input, {
+      "data-testid": "ntm-edit-member-first-name-text-field",
+      label: t("neetoTeamMembers.labels.firstName"),
+      name: "firstName",
+      ref: innerRef
+    }), /*#__PURE__*/jsx(Input, {
+      "data-testid": "ntm-edit-member-last-name-text-field",
+      label: t("neetoTeamMembers.labels.lastName"),
+      name: "lastName"
+    })]
+  });
+});
+
+var ProfileSettings = function ProfileSettings(_ref) {
+  var member = _ref.member,
+    setFieldValue = _ref.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var setFieldValueRef = useRef(setFieldValue);
+  useEffect(function () {
+    setFieldValueRef.current = setFieldValue;
+  }, [setFieldValue]);
+  var _useCountries = useCountries(),
+    countryDropdownOptions = _useCountries.countryDropdownOptions,
+    isFetchingCountriesList = _useCountries.isFetchingCountriesList,
+    handleCountryChange = _useCountries.handleCountryChange;
+  var timezoneContainerRef = useCallback(function (node) {
+    if (isNotNil(node)) {
+      new NeetoTimezoneSelector(node, {
+        isTimeFormat24H: member.timeFormat === "24h",
+        className: "w-full z-10",
+        position: "bottom",
+        initialValue: member.timeZone,
+        onChange: function onChange(_ref2) {
+          var main = _ref2.main;
+          return setFieldValueRef.current("timeZone", main);
+        }
+      });
+    }
+  }, [member.timeZone, member.timeFormat]);
+  useEffect(function () {
+    var country = findBy({
+      value: member.countryIdentifier
+    }, countryDropdownOptions);
+    if (country) handleCountryChange(country);
+  }, [member.countryIdentifier, countryDropdownOptions, handleCountryChange]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-6",
+    "data-cy": "ntm-profile-settings",
+    children: [/*#__PURE__*/jsx(FormikPhoneNumberInput, {
+      "data-cy": "ntm-edit-member-phonenumber-field",
+      label: t("neetoTeamMembers.profile.inputs.label.phonenumber"),
+      name: "phonenumber"
+    }), /*#__PURE__*/jsx(FormikSelect, {
+      "data-cy": "ntm-edit-member-country-select",
+      isLoading: isFetchingCountriesList,
+      label: t("neetoTeamMembers.profile.inputs.label.country"),
+      name: "countryId",
+      options: countryDropdownOptions,
+      onChange: function onChange(value) {
+        var option = countryDropdownOptions.find(function (o) {
+          return o.value === value;
+        });
+        var dependentFields = handleCountryChange(option);
+        setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
+      }
+    }), /*#__PURE__*/jsx(FormikSelect, {
+      "data-cy": "ntm-edit-member-language-select",
+      label: t("neetoTeamMembers.profile.inputs.label.language"),
+      name: "language",
+      options: LANGUAGE_OPTIONS
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        children: t("neetoTeamMembers.profile.inputs.label.timeZone")
+      }), /*#__PURE__*/jsx("div", {
+        className: "w-full grow",
+        "data-cy": "ntm-edit-member-timezone-select",
+        ref: timezoneContainerRef
+      })]
+    }), /*#__PURE__*/jsx(FormikSelect, {
+      "data-cy": "ntm-edit-member-time-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
+      name: "timeFormat",
+      options: TIME_FORMAT_OPTIONS
+    }), /*#__PURE__*/jsx(FormikSelect, {
+      "data-cy": "ntm-edit-member-date-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
+      name: "dateFormat",
+      options: DATE_FORMAT_OPTIONS
+    })]
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ManageMember = function ManageMember(_ref) {
+  var _config$additionalFie, _manageMemberComponen;
+  var config = _ref.config,
+    onComplete = _ref.onComplete,
+    _ref$roles = _ref.roles,
+    roles = _ref$roles === void 0 ? [] : _ref$roles,
+    _ref$selectedMember = _ref.selectedMember,
+    selectedMember = _ref$selectedMember === void 0 ? null : _ref$selectedMember,
+    _ref$componentConfig = _ref.componentConfig,
+    componentConfig = _ref$componentConfig === void 0 ? {} : _ref$componentConfig;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCreationStatusPollingEnabled = _useState2[0],
+    setIsCreationStatusPollingEnabled = _useState2[1];
+  var isViewPermissionGranted = config.permissions.view;
+  var isNotDevelopment = globalProps.railsEnv !== "development";
+  var _useFetchMembers = useFetchMembers({
+      enabled: isViewPermissionGranted
+    }),
+    team = _useFetchMembers.data;
+  var isManageMemberOpen = !!componentConfig.isOpen;
+  var _useFetchMember = useFetchMember(selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.id, {
+      enabled: !!selectedMember && isManageMemberOpen
+    }),
+    memberShowData = _useFetchMember.data,
+    isMemberDetailLoading = _useFetchMember.isLoading;
+  var _useState3 = useState(FORM_PAGES.MAIN),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var formReference = useRef(null);
+  var inputReference = useRef(null);
+  var appListSavedStateReference = useRef({
+    isAppListEnabled: true
+  });
+  var shouldSkipAppListPage = useRef(false);
+  var formikValues = useRef(null);
+  var manageMemberComponentConfig = _objectSpread(_objectSpread({}, DEFAULT_COMPONENT_CONFIG), {}, {
+    initialFocusRef: inputReference
+  }, componentConfig);
+  var Component = MEMBERS_FORM_COMPONENT_MAPPER[manageMemberComponentConfig.type || "pane"];
+  var haveToFetchRoles = isEmpty(roles) && isViewPermissionGranted;
+  var isEditForm = !!selectedMember;
+  var isLastPage = currentPage === FORM_PAGES.CONFIRMATION || isEditForm;
+  var _useFetchRoles = useFetchRoles({
+      select: function select(response) {
+        var _response$organizatio;
+        return reverse((_response$organizatio = response.organizationRoles) !== null && _response$organizatio !== void 0 ? _response$organizatio : []);
+      },
+      enabled: haveToFetchRoles
+    }),
+    _useFetchRoles$data = _useFetchRoles.data,
+    rolesList = _useFetchRoles$data === void 0 ? roles : _useFetchRoles$data,
+    isRolesLoading = _useFetchRoles.isLoading;
+  var _useFetchGlobalRoles = useFetchGlobalRoles({
+      select: function select(response) {
+        return groupBy(prop("appName"), response !== null && response !== void 0 ? response : []);
+      },
+      enabled: isNotDevelopment && !selectedMember && isViewPermissionGranted
+    }),
+    _useFetchGlobalRoles$ = _useFetchGlobalRoles.data,
+    globalRoles = _useFetchGlobalRoles$ === void 0 ? {} : _useFetchGlobalRoles$,
+    isGlobalRolesLoading = _useFetchGlobalRoles.isLoading;
+  var filteredRoles = getFilteredRoles(rolesList, config);
+  var initialFormValues = renderInitialValues({
+    additionalFieldsInitialValues: (_config$additionalFie = config.additionalFields) === null || _config$additionalFie === void 0 ? void 0 : _config$additionalFie.initialValues,
+    globalRoles: globalRoles,
+    memberShowData: memberShowData,
+    roles: filteredRoles,
+    selectedMember: selectedMember
+  });
+  var _useCreateMember = useCreateMember({
+      onSuccess: function onSuccess() {
+        return setIsCreationStatusPollingEnabled(true);
+      }
+    }),
+    _useCreateMember$data = _useCreateMember.data,
+    _useCreateMember$data2 = _useCreateMember$data === void 0 ? {} : _useCreateMember$data,
+    jobId = _useCreateMember$data2.jobId,
+    createMember = _useCreateMember.mutate,
+    isCreatingMember = _useCreateMember.isPending;
+  var refetchInterval = function refetchInterval(query) {
+    var _ref2 = query.state.data || {},
+      isCompleted = _ref2.isCompleted;
+    if (isCompleted) {
+      setIsCreationStatusPollingEnabled(false);
+      return false;
+    }
+    return 2000;
+  };
+  var _useMembersCreationSt = useMembersCreationStatus(jobId, {
+      refetchInterval: refetchInterval,
+      enabled: isCreationStatusPollingEnabled && !!jobId
+    }),
+    creationStatus = _useMembersCreationSt.data;
+  useEffect(function () {
+    var _config$createMember;
+    var _ref3 = creationStatus || {},
+      isCompleted = _ref3.isCompleted,
+      isSuccessful = _ref3.isSuccessful,
+      users = _ref3.users,
+      error = _ref3.error;
+    if (!isCompleted) return;
+    handleClose();
+    config === null || config === void 0 || (_config$createMember = config.createMember) === null || _config$createMember === void 0 || (_config$createMember = _config$createMember.onSuccess) === null || _config$createMember === void 0 || _config$createMember.callback({
+      users: users
+    });
+    if (isSuccessful) {
+      showThumbsUpToastr();
+    } else {
+      toast.error(error);
+    }
+    refetchMembers();
+  }, [creationStatus]);
+  var _useUpdateMember = useUpdateMember({
+      onSuccess: function onSuccess() {
+        var _config$updateMember, _globalProps$user;
+        handleClose(true);
+        config === null || config === void 0 || (_config$updateMember = config.updateMember) === null || _config$updateMember === void 0 || (_config$updateMember = _config$updateMember.onSuccess) === null || _config$updateMember === void 0 || _config$updateMember.callback();
+        if ((selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.id) === ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id)) {
+          window.location.reload();
+        }
+      }
+    }),
+    updateMember = _useUpdateMember.mutate,
+    isUpdatingMember = _useUpdateMember.isPending;
+  var hasRoleChanged = function hasRoleChanged(_ref4) {
+    var submitted = _ref4.submitted,
+      values = _ref4.values;
+    return submitted && (values === null || values === void 0 ? void 0 : values.role) !== (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.role);
+  };
+  var handleClose = function handleClose() {
+    var submitted = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    onComplete({
+      submitted: hasRoleChanged({
+        submitted: submitted,
+        values: formikValues.current
+      })
+    });
+    setCurrentPage(FORM_PAGES.MAIN);
+    appListSavedStateReference.current = {
+      isAppListEnabled: true
+    };
+    setIsCreationStatusPollingEnabled(false);
+  };
+  var _useProfileImageUploa = useProfileImageUpload({
+      uploadConfig: {
+        folder: "Auth",
+        customMetadata: {
+          appName: "neetoAuth"
+        }
+      }
+    }),
+    uploadImage = _useProfileImageUploa.uploadImage,
+    isUploading = _useProfileImageUploa.isUploading;
+  var handleUploadImage = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return uploadImage(image, function (uploadedImageData) {
+              result = uploadedImageData;
+            });
+          case 2:
+            return _context.abrupt("return", result);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleUploadImage(_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var isProcessing = isCreatingMember || isUpdatingMember || isUploading || isRolesLoading || isGlobalRolesLoading || isMemberDetailLoading;
+  var handleAddMember = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values) {
+      var _values$avatar, payload, _yield$handleUploadIm, fileId, filePath, url;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!selectedMember) {
+              _context2.next = 25;
+              break;
+            }
+            payload = renderPayload(values, selectedMember, initialFormValues);
+            if (!((_values$avatar = values.avatar) !== null && _values$avatar !== void 0 && _values$avatar.file)) {
+              _context2.next = 22;
+              break;
+            }
+            if (!payload.profile) payload.profile = {};
+            if (!(values.avatar.file === "_destroy")) {
+              _context2.next = 8;
+              break;
+            }
+            payload.profile.avatar = {
+              fileId: "_destroy",
+              filePath: "",
+              url: ""
+            };
+            _context2.next = 22;
+            break;
+          case 8:
+            _context2.prev = 8;
+            _context2.next = 11;
+            return handleUploadImage(values.avatar.file);
+          case 11:
+            _yield$handleUploadIm = _context2.sent;
+            fileId = _yield$handleUploadIm.fileId;
+            filePath = _yield$handleUploadIm.filePath;
+            url = _yield$handleUploadIm.url;
+            payload.profile.avatar = {
+              fileId: fileId,
+              filePath: filePath,
+              url: url
+            };
+            _context2.next = 22;
+            break;
+          case 18:
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](8);
+            toast.error(_context2.t0.message);
+            return _context2.abrupt("return");
+          case 22:
+            updateMember({
+              id: selectedMember.id,
+              payload: payload
+            });
+            _context2.next = 26;
+            break;
+          case 25:
+            createMember(renderPayload(values));
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[8, 18]]);
+    }));
+    return function handleAddMember(_x2) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var handleOnSubmit = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(values, _ref7) {
+      var setSubmitting;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setSubmitting = _ref7.setSubmitting;
+            shouldSkipAppListPage.current = isEmpty(values.appRoles);
+            if (!isLastPage) {
+              _context3.next = 7;
+              break;
+            }
+            _context3.next = 5;
+            return handleAddMember(values);
+          case 5:
+            _context3.next = 8;
+            break;
+          case 7:
+            if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
+              setCurrentPage(FORM_PAGES.CONFIRMATION);
+              setSubmitting(false);
+            } else if (currentPage === FORM_PAGES.MAIN) {
+              setCurrentPage(FORM_PAGES.APP_LIST);
+              setSubmitting(false);
+            }
+          case 8:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function handleOnSubmit(_x3, _x4) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var handleBackButton = function handleBackButton() {
+    if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current || currentPage === FORM_PAGES.INVITE_LINK) {
+      setCurrentPage(FORM_PAGES.MAIN);
+    } else if (currentPage === FORM_PAGES.CONFIRMATION) {
+      setCurrentPage(FORM_PAGES.APP_LIST);
+    }
+  };
+  var getTitle = function getTitle() {
+    var memberLabel = taxonomies.member.singular;
+    if (selectedMember) {
+      return t("neetoTeamMembers.common.edit_", {
+        what: memberLabel
+      });
+    }
+    return currentPage === FORM_PAGES.INVITE_LINK ? t("neetoTeamMembers.common.inviteViaLink") : t("neetoTeamMembers.common.addNew_", {
+      what: memberLabel
+    });
+  };
+  var renderRolesRadioGroup = function renderRolesRadioGroup(role) {
+    return /*#__PURE__*/jsx("div", {
+      className: "w-full pt-2",
+      children: /*#__PURE__*/jsx(RolesRadioGroup, {
+        config: config,
+        globalRoles: globalRoles,
+        role: role,
+        isEdit: !!selectedMember,
+        roles: filteredRoles
+      })
+    });
+  };
+  var renderFormPage = function renderFormPage(page, emails, role, setFieldValue) {
+    var _memberShowData$membe, _memberShowData$membe2, _config$additionalFie2;
+    switch (page) {
+      case FORM_PAGES.MAIN:
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [selectedMember && /*#__PURE__*/jsx(ProfileImage, {}), selectedMember && /*#__PURE__*/jsx(NameInputs, {
+            innerRef: inputReference
+          }), /*#__PURE__*/jsx(MultipleEmailInput, {
+            emails: emails,
+            selectedMember: selectedMember,
+            setCurrentPage: setCurrentPage,
+            innerRef: inputReference
+          }), selectedMember && /*#__PURE__*/jsx(ProfileSettings, {
+            setFieldValue: setFieldValue,
+            member: _objectSpread(_objectSpread({}, selectedMember), {}, {
+              countryIdentifier: (_memberShowData$membe = memberShowData === null || memberShowData === void 0 || (_memberShowData$membe2 = memberShowData.member) === null || _memberShowData$membe2 === void 0 ? void 0 : _memberShowData$membe2.countryIdentifier) !== null && _memberShowData$membe !== void 0 ? _memberShowData$membe : selectedMember.countryIdentifier
+            })
+          }), renderRolesRadioGroup(role), (_config$additionalFie2 = config.additionalFields) === null || _config$additionalFie2 === void 0 ? void 0 : _config$additionalFie2.component]
+        });
+      case FORM_PAGES.APP_LIST:
+        return /*#__PURE__*/jsx(AppList, {
+          globalRoles: globalRoles,
+          savedStateRef: appListSavedStateReference
+        });
+      case FORM_PAGES.CONFIRMATION:
+        return /*#__PURE__*/jsx(Confirmation, {});
+      case FORM_PAGES.INVITE_LINK:
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(InviteLink, {
+            roles: filteredRoles
+          }), renderRolesRadioGroup(role)]
+        });
+      default:
+        return null;
+    }
+  };
+  var isSheet = manageMemberComponentConfig.type !== "modal";
+  return /*#__PURE__*/jsxs(Component, {
+    "data-testid": "ntm-manage-members-pane-wrapper",
+    isOpen: manageMemberComponentConfig.isOpen,
+    className: classnames("ntm-timezone-shadcn-overrides", manageMemberComponentConfig.className),
+    onClose: function onClose() {
+      return handleClose(false);
+    },
+    children: [/*#__PURE__*/jsxs(Component.Header, _objectSpread(_objectSpread({}, isSheet ? manageMemberComponentConfig.headerProps : {}), {}, {
+      className: cn(isSheet && currentPage !== FORM_PAGES.MAIN && "flex flex-row items-center gap-2", isSheet && ((_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className)),
+      children: [isSheet && currentPage !== FORM_PAGES.MAIN && /*#__PURE__*/jsx(Button, {
+        "aria-label": t("neetoTeamMembers.buttons.back"),
+        icon: ArrowLeft,
+        size: "icon-sm",
+        variant: "ghost",
+        onClick: handleBackButton
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx(Component.Title, {
+          "data-testid": "ntm-manage-members-pane-header",
+          children: getTitle()
+        }), selectedMember && Component.Description && /*#__PURE__*/jsx(Component.Description, {
+          children: t("neetoTeamMembers.helpers.editPaneSubtitle")
+        })]
+      })]
+    })), /*#__PURE__*/jsx(FormikForm, {
+      ref: formReference,
+      className: classnames({
+        "flex flex-1 flex-col overflow-hidden": isSheet
+      }),
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: initialFormValues,
+        onSubmit: handleOnSubmit,
+        validationSchema: buildValidationSchema(_objectSpread({
+          selectedMember: selectedMember
+        }, team))
+      },
+      children: function children(_ref9) {
+        var _manageMemberComponen2, _manageMemberComponen3;
+        var values = _ref9.values,
+          isValid = _ref9.isValid,
+          dirty = _ref9.dirty,
+          setFieldValue = _ref9.setFieldValue;
+        var emails = values.emails,
+          role = values.role;
+        formikValues.current = values;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(ScrollToErrorField, {
+            formRef: formReference
+          }), /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, isSheet ? manageMemberComponentConfig.bodyProps : {}), {}, {
+            className: cn(isSheet ? "w-full flex-1 space-y-6 overflow-y-auto px-6 pb-4" : "w-full space-y-6 pb-4", isSheet && ((_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className)),
+            children: [isSheet && isCreationStatusPollingEnabled && /*#__PURE__*/jsxs(Alert, {
+              children: [/*#__PURE__*/jsx(Info, {
+                className: "size-4"
+              }), /*#__PURE__*/jsxs(Alert.Title, {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsx(Spinner, {}), t("neetoTeamMembers.helpers.memberCreationStatus", {
+                  count: emails.length
+                })]
+              })]
+            }), renderFormPage(currentPage, emails, role, setFieldValue)]
+          })), currentPage !== FORM_PAGES.INVITE_LINK && /*#__PURE__*/jsx(Component.Footer, _objectSpread(_objectSpread({}, isSheet ? manageMemberComponentConfig.footerProps : {}), {}, {
+            className: cn("flex gap-2", isSheet && ((_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className)),
+            children: /*#__PURE__*/jsx(FormikActionBlock, {
+              cancelButtonProps: {
+                "data-testid": "ntm-manage-member-cancel-button",
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
+              },
+              isSubmitting: isProcessing || isCreationStatusPollingEnabled,
+              submitButtonProps: {
+                "data-testid": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
+                label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue"),
+                disabled: !isValid || isProcessing || !dirty || isCreationStatusPollingEnabled
+              }
+            })
+          }))]
+        });
+      }
+    })]
+  });
+};
+
+export { ManageMember as default };
 //# sourceMappingURL=ManageMember.js.map