semantic-ui-react#Popup JavaScript Examples

render() {
    const { author } = this.props;
    return (
      <>
        {' '}
        <Popup
          content={this.renderPopupContent(author)}
          position="top center"
          flowing
          trigger={<Icon name="info circle" />}
        />
      </>
    );
  }

render() {
    const { loan } = this.props;
    const { isLoading } = this.state;
    const validation = this.validate(loan);
    const isDisabled = !validation.isValid;

    return (
      <>
        {isDisabled && (
          <Popup
            content={validation.msg}
            trigger={<Icon name="info" />}
            position="top right"
          />
        )}
        <Button
          color="blue"
          size="small"
          content="Request extension"
          disabled={isDisabled || isLoading}
          loading={isLoading}
          onClick={this.triggerExtension}
        />
      </>
    );
  }

validateLoanExtension = (brwReqLoan) => {
  let isValid = true;
  let msg = null;
  const { loanWillExpireDays } = invenioConfig.CIRCULATION;
  const isTooEarly =
    Math.floor(
      DateTime.fromISO(brwReqLoan.metadata.end_date).diffNow('days').days
    ) > loanWillExpireDays;
  if (isTooEarly) {
    isValid = false;
    msg = INFO_MESSAGES.IS_TOO_EARLY(
      DateTime.fromISO(brwReqLoan.metadata.end_date)
    );
  }

  const maxExtensionsReached =
    _get(brwReqLoan, 'metadata.extension_count', 0) >
    invenioConfig.CIRCULATION.extensionsMaxCount;
  if (maxExtensionsReached) {
    isValid = false;
    msg = INFO_MESSAGES.MAX_EXTENSIONS;
  }

  return {
    isValid: isValid,
    cmp: msg ? (
      <Popup
        content={msg}
        trigger={<Icon name="info" />}
        position="top right"
      />
    ) : null,
  };
}

render() {
    const { docReqPid, docReqTitle } = this.props;
    const {
      isLoading,
      cancelModalIsOpened,
      cancelModalData,
      errorMsgOpened,
      errorMsg,
    } = this.state;
    return (
      <>
        <Popup
          trigger={
            <Button
              size="small"
              content="Cancel request"
              loading={isLoading}
              disabled={isLoading}
              onClick={() => this.openModal(docReqPid, docReqTitle)}
            />
          }
          content={errorMsg}
          position="top center"
          open={errorMsgOpened}
          wide
          onClick={this.hideError}
        />
        <PatronCancelModal
          isOpened={cancelModalIsOpened}
          data={cancelModalData}
          headerContent="Are you sure you want to cancel your request?"
          documentTitle={cancelModalData.docReqTitle || ''}
          onClose={this.closeCancelModal}
          onConfirm={this.triggerCancelRequest}
        />
      </>
    );
  }

DepositStatusBoxComponent = ({ depositReview, depositStatus }) => {
  const status = STATUSES[depositStatus];
  if (!status) {
    throw new Error('Status is undefined');
  }
  const isReviewStatus = depositStatus === DepositStatus.IN_REVIEW;

  return (
    <Grid verticalAlign="middle">
      <Grid.Row centered className={`pt-5 pb-5 ${status.color}`}>
        <Grid.Column
          width={isReviewStatus ? 8 : 16}
          textAlign={isReviewStatus ? 'left' : 'center'}
        >
          <span>{status.title}</span>
          <Popup
            trigger={<Icon className="ml-10" name="info circle" />}
            content={status.message}
          />
        </Grid.Column>
        {isReviewStatus && (
          <Grid.Column width={8} textAlign="right">
            <Button
              href={`/me/requests/${depositReview.id}`}
              target="_blank"
              icon="external alternate"
              content={i18next.t('View request')}
              size="mini"
              className="transparent"
              title={i18next.t('Opens in new tab')}
            />
          </Grid.Column>
        )}
      </Grid.Row>
    </Grid>
  );
}

FileTableHeader = ({ isDraftRecord }) => (
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>
        {i18next.t('Preview')}{' '}
        <Popup
          content="Set the default preview"
          trigger={<Icon fitted name="help circle" size="small" />}
        />
      </Table.HeaderCell>
      <Table.HeaderCell>
        {i18next.t('Filename')}
      </Table.HeaderCell>
      <Table.HeaderCell>
        {i18next.t('Size')}
      </Table.HeaderCell>
      {isDraftRecord && (
        <Table.HeaderCell textAlign="center">
          {i18next.t('Progress')}
        </Table.HeaderCell>
      )}
      {isDraftRecord && <Table.HeaderCell />}
    </Table.Row>
  </Table.Header>
)

OrderLineMiddleColumn = ({ line }) => {
  return (
    <>
      <Item.Description>
        <label>Copies ordered: </label>
        {line.copies_ordered}
      </Item.Description>
      <Item.Description>
        <label>Copies received: </label>
        {line.copies_received || '-'}
      </Item.Description>
      <Item.Description>
        <label>Payment mode: </label>
        {line.payment_mode || '-'}
      </Item.Description>
      <Item.Description>
        <label>IDT ID: </label>
        {line.inter_departmental_transaction_id || '-'}{' '}
        <Popup
          content="Inter departmental transaction ID"
          trigger={<Icon name="info circle" />}
        />
      </Item.Description>
    </>
  );
}

render() {
    const { disabled, handleDiscardPID, label, loading } = this.props;
    return (
      <Popup
        content={label}
        trigger={
          <Field>
            {({ form: formik }) => (
              <Form.Button
                disabled={disabled || loading}
                loading={loading}
                icon="close"
                onClick={(e) => handleDiscardPID(e, formik)}
                size="mini"
              />
            )}
          </Field>
        }
      />
    );
  }

render() {
    const { document, disabled, description } = this.props;
    return (
      <div
        key={document.metadata.pid}
        className={disabled ? 'select-disabled' : ''}
      >
        <div className="price">PID #{document.metadata.pid}</div>
        <div className="title">
          {disabled && (
            <Popup
              content="This document was already selected."
              trigger={<Icon name="info circle" />}
            />
          )}
          <LiteratureTitle
            title={document.metadata.title}
            edition={document.metadata.edition}
            publicationYear={document.metadata.publication_year}
          />
        </div>
        <div className="description">
          {description ? (
            description
          ) : (
            <DocumentAuthors
              authors={document.metadata.authors}
              hasOtherAuthors={document.metadata.other_authors}
            />
          )}
        </div>
      </div>
    );
  }

render() {
    const { onClick, dataPid, popup } = this.props;
    const button = (
      <Button
        icon="close"
        size="mini"
        attached="left"
        negative
        onClick={() => onClick(dataPid)}
        className="bo-remove-item"
      />
    );

    if (popup) {
      return <Popup content={popup} trigger={button} />;
    }
    return button;
  }

NewVersionButton = ({ onError, record, disabled, ...uiProps }) => {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);

    try {
      const response = await axiosWithconfig.post(record.links.versions);
      window.location = response.data.links.self_html;
    } catch (error) {
      console.error(error);
      setLoading(false);
      onError(error.response.data.message);
    }
  };

  return (
    <Popup
      content={i18next.t("You don't have permissions to create a new version.")}
      disabled={!disabled}
      trigger={
        <Button
          type="button"
          positive
          size="mini"
          onClick={handleClick}
          loading={loading}
          icon
          labelPosition="left"
          {...uiProps}
        >
          <Icon name="tag" />
          {i18next.t('New version')}
        </Button>
      }
    />
  );
}

InfoPopup = ({ children, message }) => {
  return (
    <Popup
      content={message}
      wide="very"
      trigger={
        <span className="info-popup">
          {children}
          <Icon color="grey" name="question circle outline" />
        </span>
      }
    />
  );
}

render() {
    const { text, popUpPosition } = this.props;
    const { confirmationPopupMsg, confirmationPopupIsOpen } = this.state;
    return text ? (
      <>
        <Popup
          content={confirmationPopupMsg}
          context={this.contextRef}
          inverted
          open={confirmationPopupIsOpen}
          position={popUpPosition}
          size="mini"
        />
        <Popup
          content="Copy to clipboard"
          position={popUpPosition}
          size="mini"
          trigger={
            <span ref={this.contextRef}>
              <SimpleCopyButton text={text} onCopy={this.onCopy} />
            </span>
          }
        />
      </>
    ) : null;
  }

Alert = styled(Popup).attrs(() => ({
  on: "click",
  basic: true,
  position: "bottom center",
  content: "copied to clipboard"
}))`
  &&& {
    margin: 0;
    color: #2185d0;
    border: none;
    background-color: #dff0ff;
    box-shadow: 0 0 0 1px #2185d0 inset, 0 0 0 0 transparent;
  }
`

notImplementedPopup = (
  <Popup
    content="Not implemented yet!"
    trigger={
      <Link className="disabled" to="#">
        here
      </Link>
    }
  />
)

renderLabel(item) {
    return (
      <Popup
        key={item['id']}
        content={
          <>
            <Icon name={homeSVG} size="18px" />
            {item['id']}
          </>
        }
        trigger={<Label>{item['title']}</Label>}
      />
    );
  }

function Explanation({ text }) {
  return (
    <Popup
      content={text}
      trigger={
        <span>
          <ExplanationIcon name="question circle" />
        </span>
      }
    />
  );
}

render() {
    const { brwReq } = this.props;
    const payment = brwReq.payment;
    const leftTable = [
      {
        name: `Total (${invenioConfig.APP.DEFAULT_CURRENCY})`,
        value: formatPrice(brwReq.total_main_currency),
      },
      {
        name:
          brwReq.total && brwReq.total.currency
            ? `Total (${brwReq.total.currency})`
            : 'Total',
        value: formatPrice(brwReq.total),
      },
      { name: 'Payment mode', value: payment.mode },
      {
        name: (
          <>
            IPR ID{' '}
            <Popup
              content="Internal purchase requisition ID"
              trigger={<Icon name="info circle" size="large" />}
            />
          </>
        ),
        value: payment.internal_purchase_requisition_id,
      },
      { name: 'Note', value: payment.debit_note },
    ];
    const rightTable = [
      {
        name: `Debit cost (${invenioConfig.APP.DEFAULT_CURRENCY})`,
        value: formatPrice(payment.debit_cost_main_currency) || '-',
      },
      {
        name:
          payment.debit_cost && payment.debit_cost.currency
            ? `Debit cost (${payment.debit_cost.currency})`
            : 'Debit cost',
        value: formatPrice(payment.debit_cost) || '-',
      },
      {
        name: 'Debit date',
        value: payment.debit_date ? payment.debit_date : '-',
      },
      { name: 'Budget code', value: payment.budget_code },
    ];
    return (
      <Grid columns={2}>
        <Grid.Row>
          <Grid.Column>
            <MetadataTable labelWidth={5} rows={leftTable} />
          </Grid.Column>
          <Grid.Column>
            <MetadataTable labelWidth={5} rows={rightTable} />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

FileUploaderToolbar = ({
  config,
  filesList,
  filesSize,
  filesEnabled,
  quota,
  decimalSizeDisplay,
}) => {
  const { setFieldValue } = useFormikContext();

  const handleOnChangeMetadataOnly = () => {
    setFieldValue('files.enabled', !filesEnabled)
    setFieldValue('access.files', 'public')
  }

  return (
    <>
      <Grid.Column verticalAlign="middle" floated="left" mobile={16} tablet={6} computer={6}>
        {config.canHaveMetadataOnlyRecords && (
          <List horizontal>
            <List.Item>
              <Checkbox
                label={i18next.t('Metadata-only record')}
                onChange={handleOnChangeMetadataOnly}
                disabled={filesList.length > 0}
                checked={!filesEnabled}
              />
            </List.Item>
            <List.Item>
              <Popup
                trigger={<Icon name="question circle outline" className="neutral" />}
                content={i18next.t('Disable files for this record')}
                position="top center"
              />
            </List.Item>
          </List>
        )}
      </Grid.Column>
      {filesEnabled && (
        <Grid.Column mobile={16} tablet={10} computer={10} className="storage-col">
          <Header size="tiny" className="mr-10">{i18next.t('Storage available')}</Header>
          <List horizontal floated="right">
            <List.Item>
              <Label
                {...(filesList.length === quota.maxFiles
                  ? { color: 'blue' }
                  : {})}
              >
                {i18next.t(`{{length}} out of {{maxfiles}} files`, {
                  length: filesList.length,
                  maxfiles: quota.maxFiles,
                })}
              </Label>
            </List.Item>
            <List.Item>
              <Label
                {...(humanReadableBytes(filesSize, decimalSizeDisplay) ===
                humanReadableBytes(quota.maxStorage, decimalSizeDisplay)
                  ? { color: 'blue' }
                  : {})}
              >
                {humanReadableBytes(filesSize, decimalSizeDisplay)}{' '}
                {i18next.t('out of')}{' '}
                {humanReadableBytes(quota.maxStorage, decimalSizeDisplay)}
              </Label>
            </List.Item>
          </List>
        </Grid.Column>
      )}
    </>
  );
}

render() {
    const { currentRoom, content, userId, profilePicture } = this.props;

    const loadedMessages = currentRoom.messages - content.messages.length;
    const messages = content.messages.map(message => (
      <MessengerMessages
        key={message._id || message.uuid}
        currentRoom={currentRoom}
        message={message}
        userId={userId}
        profilePicture={profilePicture}
      ></MessengerMessages>
    ));

    return (
      <div className="content">
        {content.initialMessagesFetchig ? (
          <Dimmer active>
            <Loader />
          </Dimmer>
        ) : null}
        <div className="contact-profile">
          <img
            src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
            alt=""
          />
          <p>{currentRoom.user.firstName + " " + currentRoom.user.lastName}</p>
          <div className="social-media">
            <Popup
              content="Scroll to bottom."
              trigger={
                <i
                  onClick={this.handleScrollToBottom}
                  className="fa fa-arrow-down"
                  aria-hidden="true"
                ></i>
              }
            />

            <CallingModal></CallingModal>
            <Label basic color="red" pointing="left">
              This isn't working.
            </Label>
          </div>
        </div>
        <div
          className="messages"
          id="ContainerElementID"
          ref={this.messagesContainer}
        >
          {loadedMessages ? (
            <Button
              fluid
              disabled={content.messageFetching}
              loading={content.messageFetching}
              onClick={this.fetchMessages}
            >
              Load {currentRoom.messages - content.messages.length} more
            </Button>
          ) : null}

          <ul>
            {messages}
            {content.isTyping ? (
              <li className="sent" key={currentRoom.user._id}>
                <img
                  src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
                  alt=""
                />
                <p>typing...</p>
              </li>
            ) : null}
          </ul>
        </div>
        <MessengerInput></MessengerInput>
      </div>
    );
  }

render() {
    const { cancelUrl, patronPid, documentPid, documentTitle } = this.props;
    const {
      isLoading,
      cancelModalIsOpened,
      cancelModalData,
      errorMsgOpened,
      errorMsg,
    } = this.state;
    return (
      <>
        <Popup
          trigger={
            <Button
              size="small"
              content="Cancel request"
              loading={isLoading}
              disabled={isLoading}
              onClick={() =>
                this.openModal(cancelUrl, patronPid, documentPid, documentTitle)
              }
            />
          }
          content={errorMsg}
          position="top center"
          open={errorMsgOpened}
          wide
          onClick={this.hideError}
        />
        <PatronCancelModal
          isOpened={cancelModalIsOpened}
          data={cancelModalData}
          headerContent="Are you sure you want to cancel your loan request?"
          documentTitle={cancelModalData.documentTitle || ''}
          onClose={this.closeCancelModal}
          onConfirm={this.triggerCancelRequest}
        />
      </>
    );
  }

render() {
    const { loan } = this.props;
    const { actionMsg, actionMsgOpened } = this.state;
    const isLoanOverdue = loan.metadata.is_overdue;

    const isIllBrwReq = loan.metadata.item_pid.type === 'illbid';
    const extraActionsCmp = isIllBrwReq ? (
      <BrwReqLoanExtendButton
        brwReqLoan={loan}
        onSuccess={this.showSuccess}
        onError={this.showError}
      />
    ) : (
      <LoanExtendButton
        loan={loan}
        onSuccess={this.showSuccess}
        onError={this.showError}
      />
    );

    return (
      <LoansListItem
        loan={loan}
        extraItemProps={{
          itemClass: isLoanOverdue ? 'bkg-danger' : null,
          itemMetaCmp: this.getOngoingLabel(
            loan.metadata.start_date,
            isIllBrwReq
          ),
          itemDescriptionCmp: isLoanOverdue
            ? this.getOverdueLabel()
            : this.getReturnLabel(loan.metadata.end_date),
          itemExtraCmp: (
            <Popup
              trigger={extraActionsCmp}
              content={actionMsg}
              position="top center"
              open={actionMsgOpened}
              wide
              onClick={this.hideError}
            />
          ),
        }}
      />
    );
  }

NotificationPopup = ({
  dispatch,
  isOpen,
  children,
  notifications,
  allNotificationsCount
}) => {
  const notificationsFeed = notifications.map(notification => {
    if (notification.type === "like_post") {
      return postLikeNotification(notification);
    } else if (notification.type === "follow") {
      return followNotification(notification);
    } else if (notification.type === "post_comment") {
      return addCommentNotification(notification);
    } else if (notification.type === "comment_reply") {
      return commentReplyNotification(notification);
    } else if (notification.type === "comment_tagged") {
      return commentTaggedNotification(notification);
    } else if (notification.type === "post_tagged") {
      return postTaggedNotification(notification);
    } else if (notification.type === "like_commentReply") {
      return likeCommentReplyNotification(notification);
    } else {
      return commentLikeNotification(notification);
    }
  });
  const fetchData = () => {
    const lastId = notifications[notifications.length - 1]._id;
    dispatch(
      notificationActions.fetchNotifications({ initialFetch: false, lastId })
    );
  };
  return (
    <Popup
      trigger={children}
      on="click"
      position="top center"
      style={{ border: "none" }}
      open={isOpen}
    >
      <Grid centered divided columns="equal">
        <Card
          id="scrollableDiv"
          style={{ overflow: "auto", maxHeight: "300px" }}
        >
          <Card.Content>
            {" "}
            <InfiniteScroll
              dataLength={notificationsFeed.length} //This is important field to render the next data
              next={fetchData}
              scrollableTarget="scrollableDiv"
              hasMore={
                allNotificationsCount === notifications.length ? false : true
              }
              loader={<h4>Loading...</h4>}
              endMessage={
                <Divider horizontal>
                  <Header as="h5">Yay! You have seen it all</Header>
                </Divider>
              }
            >
              <Feed>{notificationsFeed} </Feed>
            </InfiniteScroll>
          </Card.Content>
        </Card>
      </Grid>
    </Popup>
  );
}

function ResultCard({
  fields: {
    id,
    title,
    timestamp,
    journal,
    doi,
    abstract,
    abstract_t5,
    body_text,
    authors,
    source,
    citations_count_total,
  },
  onSearchSimilar,
  isFieldSetAll,
}) {
  const content = formatText(abstract);
  const body = formatText(body_text);
  const plainTitle = title.replace(highlightRegex, '$1');
  return (
    <StyledCard>
      <Card.Header>
        <Link to={`/article/${id}`}>{plainTitle}</Link>
      </Card.Header>
      <Card.Meta>
        <JournalAndDate {...{ journal, timestamp }} />
        <DoiLink doi={doi} />
        <SourceAndCitations {...{ source, citations_count_total }} />
        <AuthorsList authors={authors} />
      </Card.Meta>
      {(content || onSearchSimilar) && (
        <Card.Content>
          {content && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the abstract of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Abstract</Label>}
              />
              {content}
            </div>
          )}
          {body && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the body of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Full Text</Label>}
              />
              {body}
            </div>
          )}
          {abstract_t5 && (
            <div>
              <Label horizontal>
                Machine Generated Summary
                <Explanation text="This is a short summary of the abstract, generated using a Natural Language Processing Model (T5)." />
              </Label>
              {formatText(abstract_t5)}
            </div>
          )}
          {onSearchSimilar && (
            <FunctionLink onClick={onSearchSimilar}>
              Search for similar articles
            </FunctionLink>
          )}
        </Card.Content>
      )}
    </StyledCard>
  );
}

render() {
    const { circulation } = this.props;
    if (circulation.available_items_for_loan_count > 0) {
      return (
        <Overridable id="LoanAvailability.AvailableNow">
          <List.Item>
            <Popup
              content="Calculated based on current library stock"
              trigger={<List.Icon name="info circle" />}
            />
            <List.Content
              className={
                circulation.available_items_for_loan_count > 0
                  ? 'text-success'
                  : 'text-danger'
              }
            >
              Available for loan <span className="success">now</span>
            </List.Content>
          </List.Item>
        </Overridable>
      );
    } else if (circulation.next_available_date) {
      return (
        <Overridable id="LoanAvailability.AvailableFrom">
          <List.Item>
            <List.Icon name="info circle" />
            <List.Content>
              Available for loan from{' '}
              <b>
                {DateTime.fromISO(
                  circulation.next_available_date
                ).toLocaleString({
                  locale: 'en-GB',
                  month: 'long',
                  day: 'numeric',
                })}
              </b>
            </List.Content>
          </List.Item>
        </Overridable>
      );
    } else {
      return (
        <Overridable id="LoanAvailability.NotAvailable">
          <List.Item>
            <List.Icon name="info" />
            <List.Content>
              There are no physical copies for this literature currently
              available at the library. If you would like to loan it, please
              place a request. The library staff will evaluate it.
            </List.Content>
          </List.Item>
        </Overridable>
      );
    }
  }

renderStats() {
    const { isLoading, error, documentStats, documentDetails } = this.props;
    const renewalCount = sumBy(
      documentStats.hits,
      (loan) => loan.metadata.extension_count
    );
    const pastLoans = documentStats.total || 0;
    const itemsCount =
      documentDetails.metadata.circulation.can_circulate_items_count;
    const avgLoans = itemsCount ? (pastLoans / itemsCount).toFixed(1) : '-';

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Table basic="very" textAlign="right">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>past loans</Table.HeaderCell>
                <Table.HeaderCell>renewals</Table.HeaderCell>
                <Table.HeaderCell>
                  average{' '}
                  <Popup
                    position="top right"
                    content={`This average is computed with the number of past
                    loans on the selected range of dates, and the current number
                    of items (${itemsCount}) of the document.`}
                    trigger={<Icon name="info circle" size="small" />}
                  />
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell>{pastLoans}</Table.Cell>
                <Table.Cell>{renewalCount}</Table.Cell>
                <Table.Cell data-test="cell-average">{avgLoans}</Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </Error>
      </Loader>
    );
  }

render() {
    const { activePage } = this.state;
    const { relations, showMaxRows, isLoading, error } = this.props;
    /* there will be always only one MM */
    const multipartMonograph = relations[this.relationType] || [];

    const columns = [
      { title: 'PID', field: 'pid_value' },
      { title: 'Title', field: '', formatter: this.viewDetails },
      { title: 'Volume', field: 'volume' },
      { title: 'Actions', field: '', formatter: this.removeHandler },
    ];

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          {!_isEmpty(multipartMonograph) && (
            <Popup
              content="A document can be attached only to one multipart monograph. Remove the existing relation to add a new one."
              trigger={
                <Button floated="left" circular icon="question circle" />
              }
            />
          )}
          <RelationMultipartModal
            relationType={this.relationType}
            disabled={!_isEmpty(multipartMonograph)}
          />

          <ResultsTable
            data={multipartMonograph}
            columns={columns}
            totalHitsCount={multipartMonograph.length}
            showMaxRows={showMaxRows}
            currentPage={activePage}
            renderEmptyResultsElement={() => (
              <InfoMessage
                header="No multipart attached"
                content="Use the button above to attach this document to a multipart monograph."
              />
            )}
          />
        </Error>
      </Loader>
    );
  }

render() {
    const { order } = this.props;
    const { payment } = order;

    if (payment === undefined)
      return <InfoMessage title="There is no payment information" />;

    const leftTable = [
      {
        name: `Total (${invenioConfig.APP.DEFAULT_CURRENCY})`,
        value: formatPrice(order.grand_total_main_currency) || '-',
      },
      {
        name:
          order.grand_total && order.grand_total.currency
            ? `Total (${order.grand_total.currency})`
            : 'Total',
        value: formatPrice(order.grand_total) || '-',
      },
      { name: 'Mode', value: payment.mode },
      {
        name: (
          <>
            IPR ID{' '}
            <Popup
              content="Internal purchase requisition ID"
              trigger={<Icon name="info circle" size="large" />}
            />
          </>
        ),
        value: payment.internal_purchase_requisition_id || '-',
      },
      { name: 'Notes', value: payment.debit_note || '-' },
    ];
    const rightTable = [
      {
        name: `Debit cost (${invenioConfig.APP.DEFAULT_CURRENCY})`,
        value: formatPrice(payment.debit_cost_main_currency) || '-',
      },
      {
        name:
          payment.debit_cost && payment.debit_cost.currency
            ? `Debit cost (${payment.debit_cost.currency})`
            : 'Debit cost',
        value: formatPrice(payment.debit_cost) || '-',
      },
      {
        name: 'Debit date',
        value: payment.debit_date ? payment.debit_date : '-',
      },
      { name: 'Funds', value: order.funds ? order.funds.join(', ') : '-' },
    ];
    return (
      <Grid columns={2} id="payment-info">
        <Grid.Row>
          <Grid.Column>
            <MetadataTable labelWidth={5} rows={leftTable} />
          </Grid.Column>
          <Grid.Column>
            <MetadataTable labelWidth={5} rows={rightTable} />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

render() {
    const {
      children,
      disabled,
      triggerButtonContent,
      disabledContent,
      modalHeader,
      isLoading: externalLoading,
      selections,
      extraRelationField,
    } = this.props;
    const { visible, isLoading } = this.state;
    const hasSelectedRelations = !_isEmpty(selections);
    const extraFieldIsValid =
      _isEmpty(extraRelationField) ||
      _get(extraRelationField, 'options.isValid', true);
    const isSelectionValid = hasSelectedRelations && extraFieldIsValid;

    return (
      <Modal
        id="es-selector-modal"
        size="large"
        closeIcon
        trigger={
          <div>
            <Button
              disabled={disabled}
              className="edit-related"
              icon
              labelPosition="left"
              positive
              onClick={this.toggle}
            >
              <Icon name="add" />
              {triggerButtonContent}
            </Button>
            {disabled && disabledContent && (
              <Popup
                content={disabledContent}
                trigger={<Icon size="large" name="info circle" color="grey" />}
              />
            )}
          </div>
        }
        open={visible}
        centered
        onClose={this.toggle}
      >
        <Modal.Header>{modalHeader}</Modal.Header>

        {children}

        <Modal.Actions>
          <Button onClick={() => this.toggle()}>Cancel</Button>
          <Button
            positive
            loading={isLoading}
            disabled={!isSelectionValid || isLoading || externalLoading}
            icon="checkmark"
            labelPosition="left"
            content="Confirm and save"
            onClick={this.onSave}
          />
        </Modal.Actions>
      </Modal>
    );
  }