/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineCardUnauthorizedView = void 0;
require("./index.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _reactMagneticDi = require("react-magnetic-di");
var _css = require("@atlaskit/css");
var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
var _messages = require("../../../messages");
var _personalization = require("../../../state/services/personalization");
var _HoverCard = require("../../HoverCard");
var _actionButton = require("../common/action-button");
var _Frame = require("../Frame");
var _IconAndTitleLayout = require("../IconAndTitleLayout");
var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
  return /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
    color: "var(--ds-icon-danger, #C9372C)",
    label: "error"
  });
};

/**
 * When persisted personalization adoption from {@link getCachedProviderPctMapAndRefresh} is strictly below this value,
 * the pill uses exploratory "previewing" copy instead of a percentage headline.
 */
var SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
var SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
var socialProofPillStyles = {
  strong: "_k48pwu06",
  root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66 _irr3plhp _1di61gdz",
  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
  wrappingLabel: "_1reoewfl _18m9ewfl _1btozryt _o5721btx _1nmz9jpi",
  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t",
  pressableContents: "_1e0c1bgi",
  inlineGroup: "_1e0c1nu9"
};

/**
 * Renders the social-proof pill and Connect button using persisted percentages only ({@link getCachedProviderPctMapAndRefresh}) — no
 * loading skeleton; either the cached percentage is shown or the legacy long connect label is used.
 *
 * Only mounted when the parent has passed the killswitch and
 * `platform_sl_3p_preauth_social_proof_inline_cta`. See platform docs: `rules-of-hooks.md` "Should §1".
 */
var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialProof(_ref) {
  var _context$trim;
  var context = _ref.context,
    extensionKey = _ref.extensionKey,
    testId = _ref.testId,
    onConnectClick = _ref.onConnectClick;
  var providerPctMap = (0, _personalization.getCachedProviderPctMapAndRefresh)(SOCIAL_PROOF_TRAIT_NAME);

  // Will be false if this is the first render, when we fetch traits and store to local storage,
  // or if there wasn't our trait for it.
  var isProviderPctMapLoaded = providerPctMap !== null;

  // Percent of current user team (same tenant users) who are connected to this extension.
  var connectedPct = extensionKey && isProviderPctMapLoaded ? providerPctMap[extensionKey] : undefined;
  var trimmedProviderDisplayName = (_context$trim = context === null || context === void 0 ? void 0 : context.trim()) !== null && _context$trim !== void 0 ? _context$trim : '';
  var hasProviderDisplayName = trimmedProviderDisplayName.length > 0;
  var isSocialProofUsageHighEnough = connectedPct !== undefined && connectedPct >= SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD;

  /**
   * As long as trait is loaded we show the pill/lozange.
   */
  var showSocialProofPill = providerPctMap !== null && (0, _expValEquals.expValEquals)('platform_sl_3p_preauth_social_proof_inline_cta', 'isEnabled', true);
  var bold = function bold(chunks) {
    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
      as: "strong",
      xcss: socialProofPillStyles.strong
    }, chunks);
  };

  // As long as pill is shown it will be one of four messages depending on percent and provider presence:
  // - 45% of your team sees Figma previews
  // - 45% of your team sees richer previews
  // - Your team sees richer Figma previews
  // - Your team sees richer previews
  var socialProofPillContent = isSocialProofUsageHighEnough ? hasProviderDisplayName ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages.social_proof_inline_cta_tag_high_with_context, {
    values: {
      connectedPct: connectedPct,
      context: trimmedProviderDisplayName,
      b: bold
    }
  })) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages.social_proof_inline_cta_tag_high_no_context, {
    values: {
      connectedPct: connectedPct,
      b: bold
    }
  })) : hasProviderDisplayName ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages.social_proof_inline_cta_tag_low_with_context, {
    values: {
      context: trimmedProviderDisplayName
    }
  })) :
  /*#__PURE__*/
  // Unlikely case, but possible from TS standpoint.
  _react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.social_proof_inline_cta_tag_low_no_context);
  var buttonContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSocialProofPill ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    xcss: socialProofPillStyles.root,
    testId: "".concat(testId, "-social-proof-tag")
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    xcss: (0, _css.cx)(socialProofPillStyles.label, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.wrappingLabel)
  }, socialProofPillContent)) : null, /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
    onClick: onConnectClick,
    viewType: "unauthorised",
    testId: "button-connect-account",
    isSlimDesign: showSocialProofPill
  }, showSocialProofPill ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.connect_inline_social_proof) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
    values: {
      context: context
    }
  }))));
  return showSocialProofPill ? /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
    onClick: onConnectClick,
    style: {
      font: "inherit"
    },
    xcss: (0, _css.cx)(socialProofPillStyles.button, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.pressableContents)
  }, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    xcss: socialProofPillStyles.inlineGroup
  }, buttonContent) : buttonContent) : buttonContent;
};
var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref2) {
  var url = _ref2.url,
    id = _ref2.id,
    icon = _ref2.icon,
    onAuthorise = _ref2.onAuthorise,
    onClick = _ref2.onClick,
    isSelected = _ref2.isSelected,
    _ref2$testId = _ref2.testId,
    testId = _ref2$testId === void 0 ? 'inline-card-unauthorized-view' : _ref2$testId,
    _ref2$showHoverPrevie = _ref2.showHoverPreview,
    showHoverPreview = _ref2$showHoverPrevie === void 0 ? false : _ref2$showHoverPrevie,
    truncateInline = _ref2.truncateInline,
    context = _ref2.context,
    extensionKey = _ref2.extensionKey;
  var frameRef = _react.default.useRef(null);
  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
    fireEvent = _useAnalyticsEvents.fireEvent;
  var handleConnectAccount = _react.default.useCallback(function (event) {
    event.preventDefault();
    event.stopPropagation();
    if (onAuthorise) {
      fireEvent('track.applicationAccount.authStarted', {});
      onAuthorise();
    }
  }, [fireEvent, onAuthorise]);
  var renderActionButton = _react.default.useCallback(function () {
    return /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
      onClick: handleConnectAccount,
      viewType: 'unauthorised',
      testId: "button-connect-account"
    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
      values: {
        context: context
      }
    })));
  }, [handleConnectAccount, context]);
  var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
    testId: testId,
    isSelected: isSelected,
    ref: frameRef,
    truncateInline: truncateInline,
    viewType: "unauthorised"
  }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
    icon: icon ? icon : fallbackUnauthorizedIcon(),
    title: url,
    link: url,
    onClick: onClick,
    titleColor: "var(--ds-text-subtle, #505258)"
  }), onAuthorise && ((0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_soc_proof_inline_killswitch') ? /*#__PURE__*/_react.default.createElement(UnauthorisedConnectWithSocialProof, {
    context: context,
    extensionKey: extensionKey,
    testId: testId,
    onConnectClick: handleConnectAccount
  }) : renderActionButton()));
  if (onAuthorise && showHoverPreview) {
    return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
      url: url,
      id: id
    }, inlineCardUnauthenticatedView);
  }
  return inlineCardUnauthenticatedView;
};