<commit_before>import 'babel-polyfill'; // Needed to support Promises on legacy browsers
import React from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import Cookies from 'js-cookie';
import { Button, Icon, InputText, Modal, StatusAlert } from '@edx/paragon';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import trackEvent from './Analytics';
import StringUtils from './Utils';

class ShareProgramRecordModal extends React.Component {
  constructor(props) {
    super(props);

    this.setProgramRecordUrl = this.setProgramRecordUrl.bind(this);
    this.setUrlError = this.setUrlError.bind(this);
    this.setUrlAsCopied = this.setUrlAsCopied.bind(this);
    this.state = {
      urlReturned: false,
      urlCopied: false,
      urlError: false,
    };
  }

  componentDidMount() {
    this.getRecordUrl();
  }

  getRecordUrl() {
    const { username, uuid } = this.props;

    const headers = {
      withCredentials: true,
      headers: {
        'X-CSRFToken': Cookies.get('credentials_csrftoken'),
      },
    };

    axios.post(`/records/programs/${uuid}/share`, {
      username,
    }, headers)
      .then(this.setProgramRecordUrl)
      .catch(this.setUrlError);
  }

  setProgramRecordUrl(response) {
    this.setState({
      programRecordUrl: response.data.url,
      urlReturned: true,
      urlError: false,
    });
  }

  setUrlAsCopied(text, result) {
    if (result) {
      this.setState({ urlCopied: true });
    }
  }

  setUrlError() {
    this.setState({ urlError: true });
  }

  // This logic is a bit complicated, so we separate it out
  renderSwitchToSendParagraph() {
    let text = gettext('Instead of sharing a link, you can also {start_anchor}directly send your program record to {platform} partners{end_anchor} for credit or application purposes.');
    text = StringUtils.interpolate(text, { platform: this.props.platformName });

    // Because we are inserting a complicated link with javascript logic into a gettext sentence,
    // we have to be a little crazy here.
    const startOpen = text.indexOf('{start_anchor}');
    const endOpen = text.indexOf('{end_anchor}', startOpen);
    if (startOpen >= 0 && endOpen >= 0 && this.props.onSwitchToSend) {
      const startClose = text.indexOf('}', startOpen) + 1;
      const endClose = text.indexOf('}', endOpen) + 1;
      // We use a link-that-acts-like-a-button rather than a Button because a Button won't wrap
      return (
        <p>
          {text.slice(0, startOpen)}
          <a
            className="switch-to-send"
            tabIndex={0}
            onClick={this.props.onSwitchToSend}
            onKeyPress={this.props.onSwitchToSend}
            role="button"
          >
            {text.slice(startClose, endOpen)}
          </a>
          {text.slice(endClose)}
        </p>
      );
    }

    return (<p>{text}</p>);
  }

  render() {
    const {
      programRecordUrl,
      urlCopied,
      urlError,
      urlReturned,
    } = this.state;
    const { onClose, parentSelector } = this.props;

    return (
      <Modal
        title={gettext('Share Link to Record')}
        {...(parentSelector && { parentSelector })}
        onClose={onClose}
        body={(
          <div>
            {urlError &&
              <StatusAlert
                alertType="danger"
                open
                dismissible={false}
                dialog={(
                  <div>
                    <span className="hd-5">{ gettext('We were unable to create your record link.') }</span>
                    <p className="alert-body">{ gettext('You can close this window and try again.') }</p>
                  </div>
                )}
              />
            }
            {urlCopied &&
              <StatusAlert
                alertType="success"
                open
                dismissible={false}
                dialog={gettext('Successfully copied program record link.')}
              />
            }
            <p>{ gettext('Copy this link to share your record with a university, employer, or anyone else of you choosing. Anyone you share this link with will have access to your record forever.') }</p>
            {this.renderSwitchToSendParagraph()}
            {urlReturned &&
              <div>
                <InputText
                  value={programRecordUrl}
                  name="program-record-share-url"
                  className={['program-record-share-url']}
                  label={<span className="sr-only">{gettext('Program Record URL')}</span>}
                  disabled
                />
                <CopyToClipboard
                  text={programRecordUrl}
                  onCopy={this.setUrlAsCopied}
                >
                  <Button
                    label={gettext('Copy Link')}
                    className={['btn-primary']}
                    onClick={trackEvent('edx.bi.credential.program_record.share_url_copied', {
                      category: 'records',
                      'program-uuid': this.props.uuid,<commit_msg>Fix records share analytics event name<commit_after>import 'babel-polyfill'; // Needed to support Promises on legacy browsers
import React from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import Cookies from 'js-cookie';
import { Button, Icon, InputText, Modal, StatusAlert } from '@edx/paragon';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import trackEvent from './Analytics';
import StringUtils from './Utils';

class ShareProgramRecordModal extends React.Component {
  constructor(props) {
    super(props);

    this.setProgramRecordUrl = this.setProgramRecordUrl.bind(this);
    this.setUrlError = this.setUrlError.bind(this);
    this.setUrlAsCopied = this.setUrlAsCopied.bind(this);
    this.state = {
      urlReturned: false,
      urlCopied: false,
      urlError: false,
    };
  }

  componentDidMount() {
    this.getRecordUrl();
  }

  getRecordUrl() {
    const { username, uuid } = this.props;

    const headers = {
      withCredentials: true,
      headers: {
        'X-CSRFToken': Cookies.get('credentials_csrftoken'),
      },
    };

    axios.post(`/records/programs/${uuid}/share`, {
      username,
    }, headers)
      .then(this.setProgramRecordUrl)
      .catch(this.setUrlError);
  }

  setProgramRecordUrl(response) {
    this.setState({
      programRecordUrl: response.data.url,
      urlReturned: true,
      urlError: false,
    });
  }

  setUrlAsCopied(text, result) {
    if (result) {
      this.setState({ urlCopied: true });
    }
  }

  setUrlError() {
    this.setState({ urlError: true });
  }

  // This logic is a bit complicated, so we separate it out
  renderSwitchToSendParagraph() {
    let text = gettext('Instead of sharing a link, you can also {start_anchor}directly send your program record to {platform} partners{end_anchor} for credit or application purposes.');
    text = StringUtils.interpolate(text, { platform: this.props.platformName });

    // Because we are inserting a complicated link with javascript logic into a gettext sentence,
    // we have to be a little crazy here.
    const startOpen = text.indexOf('{start_anchor}');
    const endOpen = text.indexOf('{end_anchor}', startOpen);
    if (startOpen >= 0 && endOpen >= 0 && this.props.onSwitchToSend) {
      const startClose = text.indexOf('}', startOpen) + 1;
      const endClose = text.indexOf('}', endOpen) + 1;
      // We use a link-that-acts-like-a-button rather than a Button because a Button won't wrap
      return (
        <p>
          {text.slice(0, startOpen)}
          <a
            className="switch-to-send"
            tabIndex={0}
            onClick={this.props.onSwitchToSend}
            onKeyPress={this.props.onSwitchToSend}
            role="button"
          >
            {text.slice(startClose, endOpen)}
          </a>
          {text.slice(endClose)}
        </p>
      );
    }

    return (<p>{text}</p>);
  }

  render() {
    const {
      programRecordUrl,
      urlCopied,
      urlError,
      urlReturned,
    } = this.state;
    const { onClose, parentSelector } = this.props;

    return (
      <Modal
        title={gettext('Share Link to Record')}
        {...(parentSelector && { parentSelector })}
        onClose={onClose}
        body={(
          <div>
            {urlError &&
              <StatusAlert
                alertType="danger"
                open
                dismissible={false}
                dialog={(
                  <div>
                    <span className="hd-5">{ gettext('We were unable to create your record link.') }</span>
                    <p className="alert-body">{ gettext('You can close this window and try again.') }</p>
                  </div>
                )}
              />
            }
            {urlCopied &&
              <StatusAlert
                alertType="success"
                open
                dismissible={false}
                dialog={gettext('Successfully copied program record link.')}
              />
            }
            <p>{ gettext('Copy this link to share your record with a university, employer, or anyone else of you choosing. Anyone you share this link with will have access to your record forever.') }</p>
            {this.renderSwitchToSendParagraph()}
            {urlReturned &&
              <div>
                <InputText
                  value={programRecordUrl}
                  name="program-record-share-url"
                  className={['program-record-share-url']}
                  label={<span className="sr-only">{gettext('Program Record URL')}</span>}
                  disabled
                />
                <CopyToClipboard
                  text={programRecordUrl}
                  onCopy={this.setUrlAsCopied}
                >
                  <Button
                    label={gettext('Copy Link')}
                    className={['btn-primary']}
                    onClick={trackEvent('edx.bi.credentials.program_record.share_url_copied', {
                      category: 'records',
                      'program-uuid': this.props.uuid,
{'fraction_non_alphanumeric': 0.11753105896272925, 'fraction_numerical': 0.0013803983435219877, 'mean_word_length': 1.957142857142857, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3399075', 'n_tokens_mistral': 2858, 'n_tokens_neox': 2769, 'n_words': 672}