'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
var Dropdown = require('@bigbinary/neetoui/Dropdown');
var Pane = require('@bigbinary/neetoui/Pane');
var Typography = require('@bigbinary/neetoui/Typography');
var reactI18next = require('react-i18next');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var neetoTimeZones = require('@bigbinary/neeto-time-zones');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var constants$1 = require('@bigbinary/neeto-commons-frontend/constants');
var hooks = require('@bigbinary/neeto-image-uploader-frontend/hooks');
var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
var Label = require('@bigbinary/neetoui/Label');
var Spinner = require('@bigbinary/neetoui/Spinner');
var Toastr = require('@bigbinary/neetoui/Toastr');
var Input = require('@bigbinary/neetoui/formik/Input');
var Select = require('@bigbinary/neetoui/formik/Select');
var Form = require('@bigbinary/neetoui/formik/Form');
var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
var ramda = require('ramda');
var constants = require('../constants-D_H6M1Pm.js');
var useProfileApi = require('../useProfileApi-BcuLCyms.js');
var ProfileImage = require('../ProfileImage-DN5IzFz7.js');
var jsxRuntime = require('react/jsx-runtime');
var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
var zustand = require('zustand');
var shallow = require('zustand/shallow');
var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
var Crown = require('@bigbinary/neeto-icons/Crown');
var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
var Avatar = require('@bigbinary/neetoui/Avatar');
var Button = require('@bigbinary/neetoui/Button');
var injectCss = require('../inject-css-B6qYtOJe.js');
require('i18next');
require('@tanstack/react-query');
require('@bigbinary/neeto-commons-frontend/react-utils');
require('../useCountriesApi-CjhrbnjK.js');
require('axios');
require('formik');
require('@bigbinary/neeto-icons/Edit');
require('yup');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var MenuHorizontal__default = /*#__PURE__*/_interopDefault(MenuHorizontal);
var Dropdown__default = /*#__PURE__*/_interopDefault(Dropdown);
var Pane__default = /*#__PURE__*/_interopDefault(Pane);
var Typography__default = /*#__PURE__*/_interopDefault(Typography);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var Label__default = /*#__PURE__*/_interopDefault(Label);
var Spinner__default = /*#__PURE__*/_interopDefault(Spinner);
var Toastr__default = /*#__PURE__*/_interopDefault(Toastr);
var Input__default = /*#__PURE__*/_interopDefault(Input);
var Select__default = /*#__PURE__*/_interopDefault(Select);
var Form__default = /*#__PURE__*/_interopDefault(Form);
var ActionBlock__default = /*#__PURE__*/_interopDefault(ActionBlock);
var withImmutableActions__default = /*#__PURE__*/_interopDefault(withImmutableActions);
var Crown__default = /*#__PURE__*/_interopDefault(Crown);
var CopyToClipboardButton__default = /*#__PURE__*/_interopDefault(CopyToClipboardButton);
var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
var Button__default = /*#__PURE__*/_interopDefault(Button);

var _excluded = ["countryId"];
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__default.default(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 ChangeProfile = function ChangeProfile(_ref) {
  var onClose = _ref.onClose;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var _useProfileImageUploa = hooks.useProfileImageUpload({
      uploadConfig: {
        folder: "Auth",
        customMetadata: {
          appName: "neetoAuth"
        }
      }
    }),
    uploadImage = _useProfileImageUploa.uploadImage,
    isUploading = _useProfileImageUploa.isUploading;
  var handleUploadImage = function handleUploadImage(image) {
    return new Promise(function (resolve) {
      uploadImage(image, function (uploadedImageData) {
        resolve(uploadedImageData);
      });
    });
  };
  var _useFetchProfile = useProfileApi.useFetchProfile(),
    _useFetchProfile$data = _useFetchProfile.data,
    _useFetchProfile$data2 = _useFetchProfile$data === void 0 ? {} : _useFetchProfile$data,
    _useFetchProfile$data3 = _useFetchProfile$data2.user,
    user = _useFetchProfile$data3 === void 0 ? {} : _useFetchProfile$data3,
    isFetchingUserDetails = _useFetchProfile.isFetching;
  var _user$firstName = user.firstName,
    firstName = _user$firstName === void 0 ? "" : _user$firstName,
    _user$lastName = user.lastName,
    lastName = _user$lastName === void 0 ? "" : _user$lastName,
    _user$phonenumber = user.phonenumber,
    phonenumber = _user$phonenumber === void 0 ? "" : _user$phonenumber,
    _user$dateFormat = user.dateFormat,
    dateFormat = _user$dateFormat === void 0 ? constants.DATE_FORMAT_OPTIONS[0].value : _user$dateFormat,
    _user$timeZone = user.timeZone,
    timeZone = _user$timeZone === void 0 ? "" : _user$timeZone,
    _user$profileImageUrl = user.profileImageUrl,
    profileImageUrl = _user$profileImageUrl === void 0 ? "" : _user$profileImageUrl,
    _user$countryId = user.countryId,
    countryId = _user$countryId === void 0 ? "" : _user$countryId,
    _user$timeFormat = user.timeFormat,
    timeFormat = _user$timeFormat === void 0 ? constants.TIME_FORMAT_OPTIONS[0].value : _user$timeFormat,
    _user$isOwner = user.isOwner,
    isOwner = _user$isOwner === void 0 ? false : _user$isOwner,
    _user$timezoneChangeE = user.timezoneChangeEnabled,
    timezoneChangeEnabled = _user$timezoneChangeE === void 0 ? true : _user$timezoneChangeE,
    _user$language = user.language,
    language = _user$language === void 0 ? "" : _user$language;
  var isTimezoneFieldDisabled = !isOwner && !timezoneChangeEnabled;
  var setFieldValueRef = React.useRef(null);
  var _useCountries = ProfileImage.useCountries(),
    countryDropdownOptions = _useCountries.countryDropdownOptions,
    selectedCountryOption = _useCountries.selectedCountryOption,
    isFetchingCountriesList = _useCountries.isFetchingCountriesList,
    _useCountries$handleC = _useCountries.handleCountryChange,
    handleCountryChange = _useCountries$handleC === void 0 ? neetoCist.noop : _useCountries$handleC;
  var _useUpdateProfileMuta = useProfileApi.useUpdateProfileMutation(),
    updateProfile = _useUpdateProfileMuta.mutate,
    isUpdatingProfile = _useUpdateProfileMuta.isPending;
  var timezoneRef = React.useCallback(function (node) {
    if (ramda.isNotNil(node)) {
      new neetoTimeZones.NeetoTimezoneSelector(node, {
        isTimeFormat24H: timeFormat === "24h",
        className: "w-full z-10",
        position: "bottom",
        initialValue: timeZone,
        onChange: function onChange(_ref2) {
          var main = _ref2.main;
          return setFieldValueRef.current("timeZone", main);
        },
        disabled: isTimezoneFieldDisabled
      });
    }
  }, [timeZone, timeFormat, isTimezoneFieldDisabled]);
  var initialFormValues = {
    firstName: firstName,
    lastName: lastName,
    phonenumber: phonenumber,
    timeZone: timeZone,
    dateFormat: dateFormat,
    timeFormat: timeFormat,
    language: language,
    avatar: {
      imageUrl: profileImageUrl,
      file: null
    }
  };
  var handleSubmit = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee(values) {
      var avatar, _yield$handleUploadIm, fileId, filePath, url, updatedCountryId, rest, payload;
      return _regeneratorRuntime__default.default.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            avatar = {};
            if (!(values.avatar.file === "_destroy")) {
              _context.next = 6;
              break;
            }
            avatar = {
              fileId: "_destroy",
              filePath: "",
              url: ""
            };
            _context.next = 14;
            break;
          case 6:
            if (!values.avatar.file) {
              _context.next = 14;
              break;
            }
            _context.next = 9;
            return handleUploadImage(values.avatar.file);
          case 9:
            _yield$handleUploadIm = _context.sent;
            fileId = _yield$handleUploadIm.fileId;
            filePath = _yield$handleUploadIm.filePath;
            url = _yield$handleUploadIm.url;
            avatar = {
              fileId: fileId,
              filePath: filePath,
              url: url
            };
          case 14:
            updatedCountryId = values.countryId, rest = _objectWithoutProperties__default.default(values, _excluded);
            payload = _objectSpread(_objectSpread({}, rest), {}, {
              avatar: avatar,
              countryIdentifier: updatedCountryId !== countryId ? updatedCountryId : undefined
            });
            updateProfile({
              id: user.id,
              payload: payload
            });
            _context.next = 22;
            break;
          case 19:
            _context.prev = 19;
            _context.t0 = _context["catch"](0);
            Toastr__default.default.error(_context.t0.message);
          case 22:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 19]]);
    }));
    return function handleSubmit(_x) {
      return _ref3.apply(this, arguments);
    };
  }();
  React.useEffect(function () {
    var country = neetoCist.findBy({
      value: countryId
    }, countryDropdownOptions);
    if (country) {
      handleCountryChange(country);
    }
  }, [countryId, countryDropdownOptions, handleCountryChange]);
  if (isUpdatingProfile || isFetchingCountriesList || isFetchingUserDetails) {
    return /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "flex h-full w-full items-center justify-center",
      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default.default, {})
    });
  }
  return /*#__PURE__*/jsxRuntime.jsx(Form__default.default, {
    formProps: {
      "data-testid": "ntm-profile-form"
    },
    formikProps: {
      initialValues: initialFormValues,
      validationSchema: ProfileImage.PROFILE_VALIDATION_SCHEMA,
      onSubmit: handleSubmit
    },
    children: function children(_ref4) {
      var setFieldValue = _ref4.setFieldValue,
        errors = _ref4.errors,
        touched = _ref4.touched;
      setFieldValueRef.current = setFieldValue;
      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default.default.Body, {
          className: "w-full",
          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "w-full pb-6",
            children: [/*#__PURE__*/jsxRuntime.jsx(ProfileImage.ProfileImage, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
              className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
              children: [/*#__PURE__*/jsxRuntime.jsx(Input__default.default, {
                autoFocus: true,
                required: true,
                "data-testid": "profile-first-name-text-field",
                label: t("neetoTeamMembers.profile.inputs.label.firstName"),
                name: "firstName",
                type: "text",
                placeholder: t("neetoTeamMembers.profile.inputs.placeholder.firstName")
              }), /*#__PURE__*/jsxRuntime.jsx(Input__default.default, {
                required: true,
                "data-testid": "profile-last-name-text-field",
                label: t("neetoTeamMembers.profile.inputs.label.lastName"),
                name: "lastName",
                type: "text",
                placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
              }), /*#__PURE__*/jsxRuntime.jsx(PhoneNumber.FormikPhoneNumberInput, {
                "data-testid": "profile-phonenumber-text-field",
                name: "phonenumber",
                label: t("neetoTeamMembers.profile.inputs.label.phonenumber")
              })]
            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
              className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
              children: [/*#__PURE__*/jsxRuntime.jsx(Select__default.default, {
                required: true,
                "data-testid": "ntm-profile-country-select",
                label: t("neetoTeamMembers.profile.inputs.label.country"),
                name: "countryId",
                options: countryDropdownOptions,
                value: selectedCountryOption,
                onChange: function onChange(option) {
                  var dependentFields = handleCountryChange(option);
                  setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
                  setFieldValue("countryId", option === null || option === void 0 ? void 0 : option.value);
                }
              }), /*#__PURE__*/jsxRuntime.jsx("div", {
                className: "space-y-2",
                children: /*#__PURE__*/jsxRuntime.jsx(Select__default.default, {
                  required: true,
                  "data-testid": "ntm-language-select",
                  name: "language",
                  options: constants$1.LANGUAGE_OPTIONS,
                  label: t("neetoTeamMembers.profile.inputs.label.language"),
                  onChange: function onChange(option) {
                    setFieldValue("language", option.value);
                  }
                })
              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                className: "space-y-2",
                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                  className: "space-y-2",
                  children: [/*#__PURE__*/jsxRuntime.jsx(Label__default.default, {
                    required: true,
                    children: t("neetoTeamMembers.profile.inputs.label.timeZone")
                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
                    "data-testid": "ntm-profile-time-zone-select",
                    ref: timezoneRef,
                    className: classnames__default.default("w-full grow", {
                      "neeto-ui-bg-gray-100 pointer-events-none": isTimezoneFieldDisabled
                    })
                  })]
                }), touched.timeZone && errors.timeZone && /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
                  className: "neeto-ui-text-error-800",
                  lineHeight: "none",
                  style: "body3",
                  children: errors.timeZone
                })]
              }), /*#__PURE__*/jsxRuntime.jsx(Select__default.default, {
                required: true,
                "data-testid": "ntm-time-format-select",
                name: "timeFormat",
                options: constants.TIME_FORMAT_OPTIONS,
                label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
                onChange: function onChange(option) {
                  setFieldValue("timeFormat", option.value);
                }
              }), /*#__PURE__*/jsxRuntime.jsx("div", {
                className: "space-y-2",
                children: /*#__PURE__*/jsxRuntime.jsx(Select__default.default, {
                  required: true,
                  "data-testid": "ntm-date-format-select",
                  name: "dateFormat",
                  options: constants.DATE_FORMAT_OPTIONS,
                  label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
                  onChange: function onChange(option) {
                    setFieldValue("dateFormat", option.value);
                  }
                })
              })]
            })]
          })
        }), /*#__PURE__*/jsxRuntime.jsx(Pane__default.default.Footer, {
          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default.default, {
            isSubmitting: isUpdatingProfile || isUploading,
            cancelButtonProps: {
              "data-testid": "ntm-profile-cancel-button",
              onClick: onClose
            },
            submitButtonProps: {
              "data-testid": "ntm-profile-submit-button"
            }
          })
        })]
      });
    }
  });
};

/* eslint-disable @bigbinary/neeto/ensure-zustand-stores-are-type-annotated */
var useProfileUpdateStore = zustand.create(withImmutableActions__default.default(function (set) {
  return {
    isOpen: false,
    setIsOpen: function setIsOpen(arg) {
      if (typeof arg === "function") {
        set(function (state) {
          return {
            isOpen: arg(state.isOpen)
          };
        });
      } else {
        set({
          isOpen: arg
        });
      }
    }
  };
}));
var useProfileUpdatePaneState = function useProfileUpdatePaneState() {
  return useProfileUpdateStore(function (_ref) {
    var isOpen = _ref.isOpen,
      setIsOpen = _ref.setIsOpen;
    return [isOpen, setIsOpen];
  }, shallow.shallow);
};

var sanitizeValue = function sanitizeValue(value, defaultValue) {
  return ramda.isNil(value) || ramda.is(String, value) && ramda.trim(value) === "" ? defaultValue : value;
};

var Preview = function Preview() {
  var _globalProps$user, _Intl$DateTimeFormat$, _findBy2, _findBy3, _findBy4;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var _useFetchProfile = useProfileApi.useFetchProfile(),
    _useFetchProfile$data = _useFetchProfile.data,
    _useFetchProfile$data2 = _useFetchProfile$data === void 0 ? {} : _useFetchProfile$data,
    _useFetchProfile$data3 = _useFetchProfile$data2.user,
    user = _useFetchProfile$data3 === void 0 ? {} : _useFetchProfile$data3,
    isFetchingUserDetails = _useFetchProfile.isFetching;
  var sanitizedUser = {
    countryName: sanitizeValue(user.countryName, "-"),
    dateFormat: sanitizeValue(user.dateFormat, ""),
    email: sanitizeValue(user.email, "-"),
    firstName: sanitizeValue(user.firstName, "-"),
    lastName: sanitizeValue(user.lastName, "-"),
    language: sanitizeValue(user.language, "-"),
    phonenumber: sanitizeValue(user.phonenumber, "-"),
    profileImageUrl: sanitizeValue(user.profileImageUrl, ""),
    timeFormat: sanitizeValue(user.timeFormat, ""),
    timeZone: sanitizeValue(user.timeZone, "Etc/UTC")
  };
  var countryName = sanitizedUser.countryName,
    dateFormat = sanitizedUser.dateFormat,
    email = sanitizedUser.email,
    firstName = sanitizedUser.firstName,
    lastName = sanitizedUser.lastName,
    language = sanitizedUser.language,
    phonenumber = sanitizedUser.phonenumber,
    profileImageUrl = sanitizedUser.profileImageUrl,
    timeFormat = sanitizedUser.timeFormat,
    timeZone = sanitizedUser.timeZone;
  var name = "".concat(firstName, " ").concat(lastName).trim();
  var subscription = sanitizeValue((_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.subscriptionPlan, t("neetoTeamMembers.common.free"));
  var isHour12 = (timeFormat || constants.TIME_FORMAT_OPTIONS[0].value) === "12h";
  var time = new Intl.DateTimeFormat("en-US", {
    timeZone: timeZone,
    hour: "2-digit",
    minute: "2-digit",
    hour12: isHour12
  }).format(new Date());
  var timeZoneAbbreviation = (_Intl$DateTimeFormat$ = new Intl.DateTimeFormat("en-US", {
    timeZone: timeZone,
    timeZoneName: "short"
  }).formatToParts(new Date()).find(function (part) {
    return part.type === "timeZoneName";
  })) === null || _Intl$DateTimeFormat$ === void 0 ? void 0 : _Intl$DateTimeFormat$.value;
  if (isFetchingUserDetails) {
    return /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "flex h-full w-full items-center justify-center",
      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default.default, {})
    });
  }
  return /*#__PURE__*/jsxRuntime.jsx(Pane__default.default.Body, {
    className: "neeto-ui-bg-gray-50 w-full",
    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "flex w-full flex-col gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
        className: "neeto-ui-bg-white neeto-ui-rounded-md p-3",
        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex items-center gap-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Avatar__default.default, {
            size: "large",
            user: {
              name: name,
              imageUrl: profileImageUrl
            }
          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "flex flex-col",
            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
              "data-testid": "profile-full-name-field",
              style: "h4",
              weight: "semibold",
              children: name
            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
              className: "flex items-center gap-1",
              children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
                className: "neeto-ui-text-gray-600",
                "data-testid": "profile-email-field",
                style: "body3",
                children: email
              }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default.default, {
                size: "small",
                style: "text",
                value: email
              })]
            })]
          })]
        })
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "neeto-ui-bg-white neeto-ui-rounded-md p-3 divide-y divide-gray-100",
        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 pb-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.firstName")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-first-name-field",
            style: "body2",
            children: firstName
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.lastName")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-last-name-field",
            style: "body2",
            children: lastName
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.profile.inputs.label.phonenumber")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-phonenumber-field",
            style: "body2",
            children: phonenumber
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.country")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-country-field",
            style: "body2",
            children: countryName
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.language")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-preferred-language-field",
            style: "body2",
            children: ((_findBy2 = neetoCist._findBy({
              value: language
            }, constants$1.LANGUAGE_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.timeZone")
          }), /*#__PURE__*/jsxRuntime.jsxs(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-time-zone-field",
            style: "body2",
            children: [neetoTimeZones.ianaTimezoneToHumanReadable(timeZone), timeZoneAbbreviation ? " (".concat(timeZoneAbbreviation, ")") : "", " ", time]
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 py-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.preferredTimeFormat")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-preferred-time-format-field",
            style: "body2",
            children: ((_findBy3 = neetoCist._findBy({
              value: timeFormat
            }, constants.TIME_FORMAT_OPTIONS)) === null || _findBy3 === void 0 ? void 0 : _findBy3.label) || "-"
          })]
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-1 pt-3",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-gray-500",
            style: "body3",
            weight: "medium",
            children: t("neetoTeamMembers.labels.preferredDateFormat")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            className: "neeto-ui-text-black profile-preview-value",
            "data-testid": "profile-preferred-date-format-field",
            style: "body2",
            children: ((_findBy4 = neetoCist._findBy({
              value: dateFormat
            }, constants.DATE_FORMAT_OPTIONS)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label) || "-"
          })]
        })]
      }), /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "neeto-ui-bg-white neeto-ui-rounded-md p-3",
        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex items-center justify-between",
          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "flex flex-col gap-1",
            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
              className: "neeto-ui-text-gray-500",
              style: "body3",
              weight: "medium",
              children: t("neetoTeamMembers.labels.currentPlan")
            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
              className: "neeto-ui-text-black profile-preview-value",
              "data-testid": "profile-subscription-type",
              style: "body2",
              children: t("neetoTeamMembers.common.subscriptionType", {
                subscription: subscription
              })
            })]
          }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
            className: "neeto-ui-rounded-full",
            "data-testid": "profile-upgrade-button",
            href: ProfileImage.MANAGE_BILLING_PATH,
            icon: Crown__default.default,
            iconPosition: "left",
            label: t("neetoTeamMembers.buttons.upgrade"),
            size: "small",
            style: "primary"
          })]
        })
      })]
    })
  });
};
var Preview$1 = /*#__PURE__*/React.memo(Preview);

var css = ".neeto-time-zones__wrapper{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important;line-height:1.5}.neeto-time-zones__wrapper button,.neeto-time-zones__wrapper input{font-feature-settings:inherit;box-sizing:border-box;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}.neeto-time-zones__wrapper button{text-transform:none}.neeto-time-zones__wrapper [type=button],.neeto-time-zones__wrapper [type=reset],.neeto-time-zones__wrapper [type=submit],.neeto-time-zones__wrapper button{-webkit-appearance:button;background-color:transparent;background-image:none}.neeto-time-zones__wrapper :-moz-ui-invalid{box-shadow:none}.neeto-time-zones__wrapper input::-moz-placeholder{opacity:1}.neeto-time-zones__wrapper input::placeholder{opacity:1}.neeto-time-zones__wrapper [role=button],.neeto-time-zones__wrapper button{cursor:pointer}.neeto-ui-theme--light,:root{--neeto-time-zones-white:255,255,255;--neeto-time-zones-black:18,18,18;--neeto-time-zones-gray-800:16,24,40;--neeto-time-zones-gray-700:29,41,57;--neeto-time-zones-gray-600:52,64,84;--neeto-time-zones-gray-500:135,146,157;--neeto-time-zones-gray-400:194,200,204;--neeto-time-zones-gray-300:216,220,222;--neeto-time-zones-gray-200:233,235,237;--neeto-time-zones-gray-100:246,247,248;--neeto-time-zones-gray-50:250,250,250;--neeto-time-zones-primary-600:0,122,100;--neeto-time-zones-primary-500:0,128,104;--neeto-time-zones-text-sm:14px;--neeto-time-zones-text-base:16px;--neeto-time-zones-font-semibold:600;--neeto-time-zones-font-bold:700;--neeto-time-zones-leading-tight:1.25;--neeto-time-zones-rounded:5px;--neeto-time-zones-rounded-full:9999px;--neeto-time-zones-shadow-sm:rgba(0,0,0,.2) 0px 5px 5px -3px,rgba(0,0,0,.14) 0px 8px 10px 1px,rgba(0,0,0,.12) 0px 3px 14px 2px;--neeto-time-zones-transition:all .3s linear;--neeto-time-zones-dropdown-border-width:1px;--neeto-time-zones-dropdown-border-color:rgb(var(--neeto-time-zones-gray-400));--neeto-time-zones-dropdown-border-radius:var(--neeto-time-zones-rounded);--neeto-time-zones-input-wrapper-flex-grow:1;--neeto-time-zones-input-placeholder-color:rgb(var(--neeto-time-zones-gray-400));--neeto-time-zones-input-focus-outline-color:transparent;--neeto-time-zones-input-hover-border-color:rgb(var(--neeto-time-zones-gray-700));--neeto-time-zones-input-focus-within-border-color:rgb(var(--neeto-time-zones-primary-500));--neeto-time-zones-input-focus-within-box-shadow:0 0 0 3px rgba(var(--neeto-time-zones-primary-500),15%);--neeto-time-zones-input-padding-x:12px;--neeto-time-zones-input-padding-y:8px;--neeto-time-zones-input-min-height:38px;--neeto-time-zones-input-font-size:var(--neeto-time-zones-text-base);--neeto-time-zones-input-border-width:1px;--neeto-time-zones-input-border-color:rgb(var(--neeto-time-zones-gray-300));--neeto-time-zones-input-border-radius:var(--neeto-time-zones-rounded);--neeto-time-zones-input-color:rgb(var(--neeto-time-zones-gray-800));--neeto-time-zones-input-bg-color:rgb(var(--neeto-time-zones-white));--neeto-time-zones-input-line-height:var(--neeto-time-zones-leading-tight)}.neeto-ui-theme--dark{--neeto-time-zones-white:18,18,18;--neeto-time-zones-black:244,244,244;--neeto-time-zones-gray-50:10,10,10;--neeto-time-zones-gray-100:30,30,30;--neeto-time-zones-gray-200:44,44,44;--neeto-time-zones-gray-300:57,57,57;--neeto-time-zones-gray-400:73,73,73;--neeto-time-zones-gray-500:92,92,92;--neeto-time-zones-gray-600:124,124,124;--neeto-time-zones-gray-700:162,162,162;--neeto-time-zones-gray-800:200,200,200;--neeto-time-zones-dropdown-border-color:rgb(var(--neeto-time-zones-gray-400));--neeto-time-zones-input-placeholder-color:rgb(var(--neeto-time-zones-gray-400));--neeto-time-zones-input-hover-border-color:rgb(var(--neeto-time-zones-gray-700));--neeto-time-zones-input-focus-within-border-color:rgb(var(--neeto-time-zones-primary-500));--neeto-time-zones-input-focus-within-box-shadow:0 0 0 3px rgba(var(--neeto-time-zones-primary-500),15%);--neeto-time-zones-input-border-color:rgb(var(--neeto-time-zones-gray-300));--neeto-time-zones-input-color:rgb(var(--neeto-time-zones-gray-800));--neeto-time-zones-input-bg-color:rgb(var(--neeto-time-zones-white))}.neeto-time-zones-input__wrapper{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;flex-grow:var(--neeto-time-zones-input-wrapper-flex-grow);justify-content:flex-start}.neeto-time-zones-input{align-items:center;background-color:#fff;background-color:var(--neeto-time-zones-input-bg-color);border:1px solid #d8dcde;border:var(--neeto-time-zones-input-border-width) solid var(--neeto-time-zones-input-border-color);border-radius:5px;border-radius:var(--neeto-time-zones-input-border-radius);color:#101828;color:var(--neeto-time-zones-input-color);display:flex;flex-direction:row;font-size:16px;font-size:var(--neeto-time-zones-input-font-size);justify-content:flex-start;overflow:hidden;transition:all .3s linear;transition:var(--neeto-time-zones-transition);width:100%}.neeto-time-zones-input>input{background-color:transparent;border:none;box-shadow:none;color:inherit;font-size:inherit;line-height:1.25;line-height:var(--neeto-time-zones-input-line-height);min-height:38px;min-height:var(--neeto-time-zones-input-min-height);outline:none;padding-block:8px;padding-block:var(--neeto-time-zones-input-padding-y);padding-inline:12px;padding-inline:var(--neeto-time-zones-input-padding-x);width:100%}.neeto-time-zones-input>input::-moz-placeholder{color:#c2c8cc;color:var(--neeto-time-zones-input-placeholder-color)}.neeto-time-zones-input>input::placeholder{color:#c2c8cc;color:var(--neeto-time-zones-input-placeholder-color)}.neeto-time-zones-input>input:focus{outline-color:transparent;outline-color:var(--neeto-time-zones-input-focus-outline-color)}.neeto-time-zones-input:hover{border-color:#1d2939;border-color:var(--neeto-time-zones-input-hover-border-color)}.neeto-time-zones-input:focus-within{border-color:#008068;border-color:var(--neeto-time-zones-input-focus-within-border-color);box-shadow:0 0 0 3px #00806826;box-shadow:0 0 0 3px rgba(0,128,104,.15);box-shadow:var(--neeto-time-zones-input-focus-within-box-shadow)}:root{--neeto-time-zones-button-font-size:var(--neeto-time-zones-text-base)}.neeto-time-zones-button{align-items:center;display:flex;font-size:16px;font-size:var(--neeto-time-zones-button-font-size);gap:8px;padding:8px 0;position:relative}.neeto-time-zones-button>.neeto-time-zones-button--label{-moz-column-gap:4px;column-gap:4px;flex-grow:1;min-width:0;overflow-wrap:break-word;text-align:start}.neeto-time-zones-button>.neeto-time-zones-button--time{align-items:center;display:flex;flex-shrink:0}.neeto-time-zones-button>.neeto-time-zones-button--icon{flex-shrink:0}.neeto-time-zones-button--icon>svg{color:inherit;display:block;height:16px;pointer-events:none;width:16px}.neeto-time-zones-button--icon>svg>path{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.neeto-time-zones-button.neeto-time-zones-dropdown{background-color:#fff;background-color:rgb(var(--neeto-time-zones-white));border:1px solid #c2c8cc;border:1px solid rgb(var(--neeto-time-zones-gray-400));border-radius:5px;border-radius:var(--neeto-time-zones-rounded);height:32px;overflow:hidden;padding-block:4px;padding-inline:10px;transition:all .3s linear;transition:var(--neeto-time-zones-transition)}.neeto-time-zones-button.neeto-time-zones-dropdown:hover{border-color:#1d2939;border-color:rgb(var(--neeto-time-zones-gray-700))}.neeto-time-zones-button.neeto-time-zones-dropdown:focus,.neeto-time-zones-button.neeto-time-zones-dropdown:focus-visible{border-color:#008068;border-color:rgb(var(--neeto-time-zones-primary-500));box-shadow:0 0 0 3px #00806826;box-shadow:0 0 0 3px rgba(0,128,104,.15);box-shadow:0 0 0 3px rgba(var(--neeto-time-zones-primary-500),15%);outline:none}.neeto-time-zones-button.neeto-time-zones-list-item{background-color:transparent;border-radius:5px;border-width:0;color:#101828;color:rgb(var(--neeto-time-zones-gray-800));cursor:pointer;padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-time-zones-button.neeto-time-zones-list-item:hover{background-color:#e9ebed;background-color:rgb(var(--neeto-time-zones-gray-200))}.neeto-time-zones-list-item.neeto-time-zones-list-item--active{background-color:#008068;background-color:rgb(var(--neeto-time-zones-primary-500));color:#fff;color:rgb(var(--neeto-time-zones-white))}.neeto-time-zones-list-item.neeto-time-zones-list-item--active:hover{background-color:#007a64;background-color:rgb(var(--neeto-time-zones-primary-600));color:#fff;color:rgb(var(--neeto-time-zones-white))}.neeto-time-zones-button__disabled{background-color:#f6f7f8!important;background-color:rgb(var(--neeto-time-zones-gray-100))!important;cursor:not-allowed!important}.neeto-time-zones-button__disabled:hover{border:1px solid #c2c8cc!important;border:1px solid rgb(var(--neeto-time-zones-gray-400))!important}.neeto-time-zones-button--label{position:relative}.neeto-time-zones-button__dst{font-size:80%}.neeto-time-zones-dropdown-list__wrapper{background-color:#fff;background-color:rgb(var(--neeto-time-zones-white));border:1px solid #c2c8cc;border:var(--neeto-time-zones-dropdown-border-width) solid var(--neeto-time-zones-dropdown-border-color);border-radius:5px;border-radius:var(--neeto-time-zones-dropdown-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:var(--neeto-time-zones-shadow-sm);box-sizing:border-box;display:flex;flex-direction:column;position:absolute;width:100%}.neeto-time-zones-dropdown-list__wrapper.dropdown-position-top{top:40px}.neeto-time-zones-dropdown-list__wrapper.dropdown-position-bottom{bottom:40px}.neeto-time-zones-dropdown-list__header{border-bottom:1px solid #c2c8cc;border-bottom:var(--neeto-time-zones-dropdown-border-width) solid var(--neeto-time-zones-dropdown-border-color);box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:8px;width:100%}.neeto-time-zones-dropdown-list__body{display:flex;flex-direction:column;height:320px;overflow-y:auto}.neeto-time-zones-list__container{display:flex;flex-direction:column;padding:8px;row-gap:4px}.neeto-time-zones-list--title{color:#121212;color:rgb(var(--neeto-time-zones-black));font-size:14px;font-size:var(--neeto-time-zones-text-sm);font-weight:700;font-weight:var(--neeto-time-zones-font-bold);margin-bottom:4px;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-time-zones__container{display:flex;flex-direction:column;position:relative}.neeto-time-zones-switch__wrapper{display:flex;justify-content:flex-end;width:100%}.neeto-time-zones-switch__container{align-items:center;-moz-column-gap:8px;column-gap:8px;cursor:pointer;display:flex}.neeto-time-zones-switch-label{color:#344054;color:rgb(var(--neeto-time-zones-gray-600));font-size:14px;font-size:var(--neeto-time-zones-text-sm);font-weight:600;font-weight:var(--neeto-time-zones-font-semibold);transition:all}.neeto-time-zones-switch-label.neeto-time-zones-switch-label--active{color:#101828;color:rgb(var(--neeto-time-zones-gray-800))}.neeto-time-zones-switch{position:relative}.neeto-time-zones-switch>input{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.neeto-time-zones-switch>input:checked~.neeto-time-zones-switch-block{transform:translate(100%)}[rtl] .neeto-time-zones-switch>input:checked~.neeto-time-zones-switch-block{transform:translate(-100%)}.neeto-time-zones-switch-block{background-color:#fff;background-color:rgb(var(--neeto-time-zones-white));height:16px;inset-inline-start:4px;position:absolute;top:4px;transition:all;width:16px}.neeto-time-zones-switch-bg,.neeto-time-zones-switch-block{border-radius:9999px;border-radius:var(--neeto-time-zones-rounded-full)}.neeto-time-zones-switch-bg{background-color:#008068;background-color:rgb(var(--neeto-time-zones-primary-500));display:block;height:24px;width:40px}.profile-preview-value{font-size:15px}\n/*# sourceMappingURL=data:application/json;base64,  */";
injectCss.n(css,{});

var Menu = Dropdown__default.default.Menu,
  MenuItem = Dropdown__default.default.MenuItem;
var Profile = function Profile() {
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var _useProfileUpdatePane = useProfileUpdatePaneState(),
    _useProfileUpdatePane2 = _slicedToArray__default.default(_useProfileUpdatePane, 2),
    isOpen = _useProfileUpdatePane2[0],
    setIsOpen = _useProfileUpdatePane2[1];
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isEditMode = _useState2[0],
    setIsEditMode = _useState2[1];
  var onClose = function onClose() {
    setIsOpen(false);
    setIsEditMode(false);
  };
  var enableEditMode = function enableEditMode() {
    return setIsEditMode(true);
  };
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: "w-full",
    children: /*#__PURE__*/jsxRuntime.jsxs(Pane__default.default, {
      isOpen: isOpen,
      onClose: onClose,
      className: "neeto-ui-bg-gray-50 max-w-96",
      children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default.default.Header, {
        className: "neeto-ui-bg-gray-50",
        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex justify-between",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
            style: "h2",
            weight: "semibold",
            children: t("neetoTeamMembers.profile.common.myProfile")
          }), !isEditMode && /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
            buttonStyle: "text",
            icon: MenuHorizontal__default.default,
            children: /*#__PURE__*/jsxRuntime.jsxs(Menu, {
              children: [/*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
                "data-testid": "edit-basic-info-menu-button",
                onClick: enableEditMode,
                children: t("neetoTeamMembers.buttons.editBasicInfo")
              }), /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
                "data-testid": "update-email-menu-button",
                href: ProfileImage.UPDATE_EMAIL_PATH,
                children: t("neetoTeamMembers.buttons.updateEmail")
              }), /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
                "data-testid": "manage-billing-subscriptions-menu-button",
                href: ProfileImage.MANAGE_BILLING_PATH,
                children: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions")
              })]
            })
          })]
        })
      }), isEditMode ? /*#__PURE__*/jsxRuntime.jsx(ChangeProfile, {
        onClose: onClose
      }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {})]
    })
  });
};
var index = {
  Pane: Profile,
  usePaneState: useProfileUpdatePaneState
};

module.exports = index;
//# sourceMappingURL=Profile.js.map
