Untitled

import React, { useContext, useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import LanguageContext from 'language-context';
import { activityHelper, agileHelper, dealHelper, miscHelper } from 'helpers';
import moment from 'moment';
import {
  getColumnsData,
  getPreviewData,
  moveItem,
  setPreviewId,
} from 'store/agile/tasks';
import { completeEvent, removeEvent } from 'store/events/tasks';
import { toggleConsent } from 'store/person/tasks';
import { showFlashMessage } from 'store/flash_messages/tasks';
import history from 'router-history';
import companyHelper from 'shared_helpers/company_helper';
import { Dropdown, DropdownItem } from 'components/dropdown';
import ActionButton from 'components/action_button';
import Icon from 'components/icon';
import Loading from 'components/loading';
import Popup from 'components/popup';
import Print from 'components/print';
import Tooltip from 'components/tooltip';
import WidgetFooter from 'components/widget_footer';
import WidgetHeader from 'components/widget_header';
import ScriptView from '../script_view/script_view';
import AgileBoardPopupEvents from './agile_board_popup_events';
import AgileBoardPopupActiveDeal from './agile_board_popup_active_deal';
import AgileBoardPopupContacts from './agile_board_popup_contacts';
import AgileBoardPopupDealInfo from './agile_board_popup_deal_info';
import AgileBoardPopupCompleteDeal from './agile_board_popup_complete_deal';
import AgileBoardPopupActivities from './agile_board_popup_activities';
import AgileBoardPopupProspectInfo from './agile_board_popup_prospect_info';
import AgileBoardPopupVehicleInfo from './agile_board_popup_vehicle_info';
import AgileBoardPopupLeadsInfo from './agile_board_popup_leads_info';
import AgileBoardPopupDealType from './agile_board_popup_dealtype';
import AgileBoardPreviewDealType from '../agile_board_preview_deal_type';

/**
 * Render preview for a deal or a prospect.
 *
 * No real functionality here, just a lot of divs.
 *
 * @param state.props.id - string/ number - Deal id or prospect id.
 * @param state.previewData - string/ number - Deal id or prospect id.
 * @param state.setPreviewData- string/ number - Deal id or prospect id.
 */
const AgileBoardPopup = (state) => {
  const [comment, setComment] = useState('');
  const [editMaturity, setEditMaturity] = useState(false);
  const [editPotential, setEditPotential] = useState(false);
  const [hideBlocks, setHideBlocks] = useState([]);
  const [lostReason, setLostReason] = useState('');
  const [previewData, setPreviewData] = useState(null);
  const [selectedMaturity, setSelectedMaturity] = useState(null);
  const [selectedPotential, setSelectedPotential] = useState(null);
  const [showLostDeal, setShowLostDeal] = useState(false);
  const [showRemoveItem, setShowRemoveItem] = useState(false);
  const [showWonDeal, setShowWonDeal] = useState(false);
  const [showScriptView, setShowScriptView] = useState(false);
  const [visibleVehicles, setVisibleVehicles] = useState({});
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  const agilePreviewRef = useRef(null);
  const removeDealInputRef = useRef(null);
  const lostDealInputRef = useRef(null);
  const wonDealInputRef = useRef(null);
  const tc = useContext(LanguageContext);
  useEffect(() => {
    // Function to check screen size and update state
    const checkScreenSize = () => {
      setIsSmallScreen(window.matchMedia('(max-width: 768px)').matches);
    };

    // Initial check when component mounts
    checkScreenSize();

    // Add event listener for screen size changes
    window.addEventListener('resize', checkScreenSize);

    // Clean up event listener when component unmounts
    return () => {
      window.removeEventListener('resize', checkScreenSize);
    };
  }, []);
  useEffect(() => {
    /**
     * Close preview when clicking outside.
     */
    const _closePreview = async (e) => {
      if (miscHelper.clickUnmount(e, agilePreviewRef, false)) {
        const navigation = document.querySelector('.navigationWrapper');
        const breadCrumbs = document.querySelector(
          '.pageHeaderWrapper__pageHeader__left__breadcrumbs'
        );
        if (
          !(navigation?.contains(e.target) || breadCrumbs?.contains(e.target))
        ) {
          // When user navigates to another page, keep item in preview.

          setPreviewId(null);
        }
      }
    };

    window.addEventListener('mousedown', _closePreview);
    return () => window.removeEventListener('mousedown', _closePreview);
  }, []);
  /*
  useEffect(() => {
    if (state.props.id) {
      getPreviewData({
        id: state.props.id,
      });
    }
  }, [state.props.id]);
*/

  useEffect(() => {
    const fetchData = async () => {
      try {
        if (state.props.id) {
          await getPreviewData({
            id: state.props.id,
          });
        }
      } catch (error) {
        console.error('Error fetching preview data:', error);
        // Handle error (e.g., show error message to user)
      }
    };

    fetchData();
  }, [state.props.id]);
  useEffect(() => {
    let data = JSON.parse(JSON.stringify(state.agile.previewData));

    if (data) {
      if (data.item) {
        setSelectedMaturity(data.item.maturity);
      }

      if (data.item) {
        setSelectedPotential(data.item.potential ? data.item.potential : '');
      }
    }

    setPreviewData(data);
  }, [state.agile.previewData]);

  useEffect(() => {
    removeDealInputRef &&
      removeDealInputRef.current &&
      removeDealInputRef.current.focus();
  }, [showRemoveItem]);

  useEffect(() => {
    lostDealInputRef &&
      lostDealInputRef.current &&
      lostDealInputRef.current.focus();
  }, [showLostDeal]);

  useEffect(() => {
    wonDealInputRef &&
      wonDealInputRef.current &&
      wonDealInputRef.current.focus();
  }, [showWonDeal]);

  const _markDealAsLost = async () => {
    let listId = null;
    if (previewData.item.meta && previewData.item.meta.moved_from_list) {
      listId = previewData.item.meta.moved_from_list;
    }

    let prospectIds;
    if (
      previewData.item.prospects &&
      Array.isArray(previewData.item.prospects)
    ) {
      prospectIds = previewData.item.prospects.join(',');
    }

    setPreviewId(null);

    await moveItem({
      comment: comment,
      id: previewData.item._id,
      listId: listId,
      prospectIds: prospectIds,
      reason: lostReason,
      target: 'lost',
      source: previewData.item.phase,
    });

    setComment('');
    setLostReason('');
    showFlashMessage(tc.dealLostMessage, 'info');
  };

  const _markDealAsWon = async () => {
    let listId = null;
    if (previewData.item.meta && previewData.item.meta.moved_from_list) {
      listId = previewData.item.meta.moved_from_list;
    }

    let prospectIds;
    if (
      previewData.item.prospects &&
      Array.isArray(previewData.item.prospects)
    ) {
      prospectIds = previewData.item.prospects.join(',');
    }

    setPreviewId(null);

    await moveItem({
      comment: comment,
      id: previewData.item._id,
      listId: listId,
      prospectIds: prospectIds,
      target: 'won',
      source: previewData.item.phase,
    });

    setComment('');
    showFlashMessage(tc.dealWonMessage, 'success');
  };

  const _removeItem = async () => {
    let listId = null;
    if (previewData.item.listId) {
      listId = previewData.item.listId;
    } else if (previewData.item.meta && previewData.item.meta.moved_from_list) {
      listId = previewData.item.meta.moved_from_list;
    }

    let prospectIds;
    if (
      previewData.item.prospects &&
      Array.isArray(previewData.item.prospects)
    ) {
      prospectIds = previewData.item.prospects.join(',');
    }

    setPreviewId(null);

    await moveItem({
      id: previewData.item._id
        ? previewData.item._id
        : previewData.item.prospectId.toString(),
      comment: comment,
      listId: listId,
      prospectIds: prospectIds,
      target: 'trash',
      source: previewData.item.phase ? previewData.item.phase : 'prospect',
    });

    setComment('');
    showFlashMessage(tc.dealRemovedMessage, 'success');
  };

  const _renderFleetRows = (prospect) => {
    const loadMore = (type) => {
      setVisibleVehicles((prevVisibleVehicles) => ({
        ...prevVisibleVehicles,
        [type]: prospect.fleet[type].total,
      }));
    };
    const hideCars = (type) => {
      setVisibleVehicles((prevVisibleVehicles) => ({
        ...prevVisibleVehicles,
        [type]: 0,
      }));
    };
    if (
      !prospect.fleet ||
      (typeof prospect.fleet === 'object' &&
        !Object.keys(prospect.fleet).length)
    ) {
      return null;
    }

    let typesArray = [];
    for (const prop in prospect.fleet) {
      const visibleCount = visibleVehicles[prop] || 2;

      typesArray.push(
        <div
          className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder__type"
          key={prop}
        >
          <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder__type__header">
            <span className="listBullet">&#8226;</span>
            <p>{tc[prop.toLowerCase()]}</p>
          </div>
          <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder__type__content">
            {Array.isArray(prospect?.fleet[prop]?.hits)
              ? prospect.fleet[prop].hits.map((vehicle, i) => {
                  if (i >= visibleCount) {
                    return null;
                  } else {
                    const dateAcquired = vehicle.date_acquired.toString();
                    const acquiredDateString =
                      dateAcquired.substring(0, 4) +
                      '-' +
                      dateAcquired.substring(4, 6) +
                      '-' +
                      dateAcquired.substring(6, 8);

                    return (
                      <div
                        className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder__type__content__vehicle"
                        key={vehicle.chassi}
                      >
                        <Tooltip tooltipContent={tc.navigateToCar}>
                          <span
                            className="highlight regNumber"
                            onClick={() => {
                              history.push('/fordon/' + vehicle.reg_number);
                            }}
                          >
                            {vehicle.reg_number}
                          </span>
                        </Tooltip>
                        <span className="capitalize marginRight smallerFont">{`${vehicle.brand.toLowerCase()} (${vehicle.model.toLowerCase()})`}</span>
                        <span className=" smallerFont">{`${moment(
                          new Date(),
                          'DD/MM/YYYY'
                        ).diff(
                          moment(new Date(acquiredDateString), 'DD/MM/YYYY'),
                          'months'
                        )} ${tc.monthsShort.toLowerCase()}`}</span>
                      </div>
                    );
                  }
                })
              : null}
            {prospect.fleet[prop].total > visibleCount ? (
              <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder__type__content__info">
                {/*`...${
                  prospect.fleet[prop].total - 5
                } ${tc.moreVehicles.toLowerCase()}`*/}
                {`...${
                  prospect.fleet[prop].total - visibleCount
                } ${tc.moreVehicles.toLowerCase()}`}
              </div>
            ) : null}
            <div className="agileBoardPopupWrapper__agilePopup__content__block__buttonContainer">
              {prospect.fleet[prop].total > visibleCount && (
                <ActionButton
                  key={JSON.stringify(visibleVehicles)}
                  class="agileBoardPopupWrapper__agilePopup__content__block__button"
                  onClick={() => loadMore(prop)}
                  icon="reset"
                  label={tc.getMore}
                  type="regular"
                />
              )}
              {prospect.fleet[prop].total === visibleCount &&
                prospect.fleet[prop].total >= 5 && (
                  <ActionButton
                    key={JSON.stringify(visibleVehicles)}
                    class="agileBoardPopupWrapper__agilePopup__content__block__button"
                    onClick={() => hideCars(prop)}
                    icon="maximizeUp"
                    label={tc.hide}
                    type="regular"
                  />
                )}
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__content__fleetHolder">
        {typesArray}
      </div>
    );
  };

  const _renderIcons = () => {
    return (
      <div className="agileBoardPopupWrapper__agilePopup__header__bottom">
        <div
          className={
            previewData.item &&
            previewData.prospectInformation &&
            previewData.contacts &&
            (state.activities.activitiesByTarget = !null)
              ? //state.activities.activitiesByTarget
                'agileBoardPopupWrapper__agilePopup__header__bottom__item'
              : 'agileBoardPopupWrapper__agilePopup__header__bottom__item__disabled'
          }
        >
          {previewData.item &&
          previewData.prospectInformation &&
          previewData.contacts &&
          state.activities.activitiesByTarget !== null ? (
            <Tooltip tooltipContent={tc.print}>
              <Icon
                onClick={() => {
                  miscHelper.openPrint(previewData.item.name);
                }}
                val="print"
              />
            </Tooltip>
          ) : (
            <Loading small={true} />
          )}
        </div>
        <div
          className={
            previewData.item &&
            previewData.prospectInformation &&
            previewData.contacts &&
            state.activities.activitiesByTarget
              ? 'agileBoardPopupWrapper__agilePopup__header__bottom__item'
              : 'agileBoardPopupWrapper__agilePopup__header__bottom__item__disabled'
          }
        >
          {previewData.item &&
          previewData.prospectInformation &&
          previewData.contacts &&
          state.activities.activitiesByTarget !== null ? (
            <Tooltip
              tooltipContent={
                previewData.item.type === 'prospect'
                  ? tc.removeProspect
                  : tc.removeDeal
              }
            >
              <Icon
                onClick={() => {
                  setComment('');
                  setShowRemoveItem(true);
                }}
                val="remove"
              />
            </Tooltip>
          ) : (
            <Loading small={true} />
          )}
        </div>
        {/*<div className="agileBoardPreviewWrapper__agileBoardPreview__header__bottom__item">
          <button className="agileBoard__sub__icons__buttons">
            <Icon
              val="corporation"
              class="agileBoard__sub__icons__buttons__icon"
            />
            <p>{tc.fleet}</p>
          </button>
          </div>*/}
        <div className="agileBoardPopupWrapper__agilePopup__header__bottom__item">
          {showScriptView ? null : (
            <Tooltip tooltipContent="Visa Manus" placement="top">
              <Icon val="script" onClick={() => setShowScriptView(true)} />
            </Tooltip>
          )}
        </div>
        {showScriptView ? (
          <ScriptView setShowScriptView={setShowScriptView} />
        ) : null}
      </div>
    );
  };

  const _renderMaturityList = () => {
    return (
      <div className="agileBoardPopupWrapper__agilePopup__content__block__content__input">
        <Dropdown
          displayValue={dealHelper.getMaturityName(selectedMaturity)}
          transparent={true}
        >
          {dealHelper.getMaturityList().map((num) => {
            return (
              <DropdownItem
                active={num.id === selectedMaturity}
                key={num.id}
                label={num.name}
                onClick={() => {
                  setSelectedMaturity(num.id);
                }}
              />
            );
          })}
        </Dropdown>
      </div>
    );
  };
  let prospectName = '';
  if (
    previewData &&
    previewData.prospectInformation &&
    previewData.prospectInformation.length > 0
  ) {
    prospectName = previewData.prospectInformation[0].name;
  }

  const _stateCheck = () => {
    return !!(previewData && previewData.item);
  };

  return (
    <div className="agileBoardPopupWrapper" ref={agilePreviewRef}>
      {_stateCheck() ? (
        <div className="agileBoardPopupWrapper__agilePopup">
          <div className="agileBoardPopupWrapper__agilePopup__header">
            <div className="agileBoardPopupWrapper__agilePopup__header__top">
              <div className="agileBoardPopupWrapper__agilePopup__header__top__left">
                <WidgetHeader
                  middleContentActive={true}
                  headline={
                    <Tooltip
                      inline={false}
                      followCursor={true}
                      tooltipContent={tc.navigateToDeal}
                      placement={'top-start'}
                    >
                      <div
                        className="agileBoardPopupWrapper__agilePopup__header__subHeadline"
                        onClick={() => {
                          if (previewData.item.type === 'deal') {
                            history.push('/affar/' + state.props.id);
                          } else if (
                            companyHelper.isValidOrgNr(state.props.id)
                          ) {
                            history.push('/foretag/' + state.props.id);
                          } else {
                            history.push('/person/' + state.props.id);
                          }
                        }}
                      >
                        <h2>{previewData.item.name}</h2>
                      </div>
                    </Tooltip>
                  }
                  headlineSub={
                    <div>
                      {prospectName ? (
                        <div className="agileBoardPopupWrapper__agilePopup__header__subText">
                          <div className="agileBoardPopupWrapper__agilePopup__header__subText__inlineFlex">
                            <p>
                              {previewData.item.user?.name
                                ? previewData.item.user.name
                                : tc.unknown}
                            </p>
                          </div>
                          <div className="agileBoardPopupWrapper__agilePopup__header__subText__inlineFlex">
                            {previewData.item.type === 'deal'
                              ? tc.deal
                              : tc.oneProspect}
                            {prospectName ? ' - ' : ' '}
                            {prospectName ? prospectName : ''}
                          </div>

                          <div className="agileBoardPopupWrapper__agilePopup__header__subText__inlineFlex">
                            <p>
                              {tc.phase + ': '}
                              {agileHelper.buildPhaseToColumnTitle(
                                previewData.item.phase
                              )}
                            </p>
                          </div>
                        </div>
                      ) : // <div className="agileBoardPopupWrapper__agilePopup__content">
                      //   <Loading small={true} />
                      // </div>
                      null}

                      <div className="agileBoardPopupWrapper__agilePopup__content__deal__container">
                        <AgileBoardPopupCompleteDeal
                          setComment={setComment}
                          previewData={previewData}
                          setShowWonDeal={setShowWonDeal}
                          setShowLostDeal={setShowLostDeal}
                        />
                      </div>
                      {previewData.item.contractData?.length > 0 ? (
                        <div className="contractInfoWrapper">
                          <Icon val="infoOutlined" /> {tc.connectedContracts}
                          {previewData.item.contractData
                            .map((c) => c.contract_customer_id)
                            .join(', ')}
                        </div>
                      ) : null}
                      <div className="agileBoardPopupwrapper__agilePopup__content__center">
                        {previewData.item.type === 'deal' ? (
                          <AgileBoardPopupDealType
                            dealId={previewData.item._id}
                          />
                        ) : null}
                        {/*previewData.item.type === 'deal' ? (
                          <AgileBoardPreviewDealType
                            dealId={previewData.item._id}
                            hideBlocks={hideBlocks}
                            setHideBlocks={setHideBlocks}
                          />
                        ) : null*/}
                      </div>
                    </div>
                  }
                />
              </div>

              <div
                className="agileBoardPopupWrapper__agilePopup__header__top__right"
                onClick={() => {
                  setPreviewId(null);
                }}
              >
                <Tooltip tooltipContent={tc.close} placement={'right-end'}>
                  <Icon val="clear" />
                </Tooltip>
              </div>
            </div>
            <div className="agileBoardPopupWrapper__agilePopup__content__icons__buttons">
              {_renderIcons()}
              {isSmallScreen ? (
                <Dropdown
                  headerElement={
                    <div className="agileBoardPopupWrapper__agilePopup__content__icons__buttons__iconContainer">
                      <Icon
                        val="menu"
                        class="agileBoardPopupWrapper__agilePopup__content__icons__buttons__hamburgerIcon"
                      />
                    </div>
                  }
                  closeOnItemClick={true}
                  source="menu"
                  adjustToHeader={true}
                >
                  {previewData.prospectInformation &&
                    previewData.prospectInformation.map((prospect) => {
                      if (!prospect || !prospect?.type) {
                        return null;
                      }

                      return (
                        <div
                          className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar"
                          key={prospect.user_id}
                        >
                          <div className="">
                            <Tooltip
                              tooltipContent={tc.navigateToProspect}
                              inline={false}
                            >
                              <div
                                className="agileBoardPopupWrapper__agilePopup__header__buttons__hamburgerMenuItems"
                                onClick={() => {
                                  if (prospect.type === 'company') {
                                    history.push(
                                      '/foretag/' + prospect.user_id
                                    );
                                  } else {
                                    history.push('/person/' + prospect.user_id);
                                  }
                                }}
                              >
                                <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__left">
                                  {prospect.type === 'company' ? (
                                    <Icon val="company" />
                                  ) : (
                                    <Icon val="person" />
                                  )}
                                  <h5 className="capitalize">
                                    {prospect.name.toLowerCase()}
                                  </h5>
                                </div>
                                <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__right">
                                  <Icon val="navigateNext" />
                                </div>
                              </div>
                            </Tooltip>
                            {prospect.type === 'company' ? (
                              <div>
                                <Tooltip
                                  tooltipContent={tc.fleet}
                                  inline={false}
                                >
                                  <div
                                    className="agileBoardPopupWrapper__agilePopup__header__buttons__hamburgerMenuItems"
                                    onClick={() =>
                                      history.push(
                                        '/vagnpark/' +
                                          previewData.item.prospects
                                      )
                                    }
                                  >
                                    <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__left">
                                      <Icon val="article" />
                                      <h5 className="agileBoardPopupWrapper__agilePopup__header__buttons__text">
                                        {tc.fleetReport.toLowerCase()}
                                      </h5>
                                    </div>
                                    <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__right">
                                      <Icon val="navigateNext" />
                                    </div>
                                  </div>
                                </Tooltip>
                              </div>
                            ) : null}
                          </div>
                        </div>
                      );
                    })}
                </Dropdown>
              ) : (
                <>
                  {previewData.prospectInformation &&
                    previewData.prospectInformation.map((prospect) => {
                      if (!prospect || !prospect?.type) {
                        return null;
                      }

                      return (
                        <div
                          className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar"
                          key={prospect.user_id}
                        >
                          <div className="agileBoardPopupWrapper__agilePopup__content__block__content__flexContainer">
                            <Tooltip
                              tooltipContent={tc.navigateToProspect}
                              inline={true}
                            >
                              <div
                                className="agileBoardPopupWrapper__agilePopup__header__buttons"
                                onClick={() => {
                                  if (prospect.type === 'company') {
                                    history.push(
                                      '/foretag/' + prospect.user_id
                                    );
                                  } else {
                                    history.push('/person/' + prospect.user_id);
                                  }
                                }}
                              >
                                <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__left">
                                  {prospect.type === 'company' ? (
                                    <Icon val="company" />
                                  ) : (
                                    <Icon val="person" />
                                  )}
                                  <h5 className="capitalize">
                                    {prospect.name.toLowerCase()}
                                  </h5>
                                </div>
                                <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__right">
                                  <Icon val="navigateNext" />
                                </div>
                              </div>
                            </Tooltip>
                            {prospect.type === 'company' ? (
                              <div>
                                <Tooltip
                                  tooltipContent={tc.fleet}
                                  inline={true}
                                >
                                  <div
                                    className="agileBoardPopupWrapper__agilePopup__header__buttons"
                                    onClick={() =>
                                      history.push(
                                        '/vagnpark/' +
                                          previewData.item.prospects
                                      )
                                    }
                                  >
                                    <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__left">
                                      <Icon val="article" />
                                      <h5 className="agileBoardPopupWrapper__agilePopup__header__buttons__text">
                                        {tc.fleetReport.toLowerCase()}
                                      </h5>
                                    </div>

                                    <div className="agileBoardPopupWrapper__agilePopup__content__block__content__prospectOrCar__header__right">
                                      <Icon val="navigateNext" />
                                    </div>
                                  </div>
                                </Tooltip>
                              </div>
                            ) : null}
                          </div>
                        </div>
                      );
                    })}
                </>
              )}
            </div>
          </div>
          <div className="agileBoardPopupWrapper__agilePopup__content">
            {/*_renderCompleteDealBlock()*/}
            {/*<AgileBoardCompleteDeal
              setComment={setComment}
              previewData={previewData}
              setShowWonDeal={setShowWonDeal}
              setShowLostDeal={setShowLostDeal}
              />*/}
            {/*previewData.item.type === 'deal' ? (
              <AgileBoardPreviewDealType
                dealId={previewData.item._id}
                hideBlocks={hideBlocks}
                setHideBlocks={setHideBlocks}
              />
            ) : null*/}
            <AgileBoardPopupContacts
              previewData={previewData}
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
            />
            <AgileBoardPopupEvents
              hideBlocks={hideBlocks}
              previewData={previewData}
              setHideBlocks={setHideBlocks}
              getColumnsData={getColumnsData}
              completeEvent={completeEvent}
              removeEvent={removeEvent}
              setPreviewData={setPreviewData}
            />
            <AgileBoardPopupActiveDeal
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
              previewData={previewData}
            />
            <AgileBoardPopupDealInfo
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
              getColumnsData={getColumnsData}
              getPreviewData={getPreviewData}
              previewData={previewData}
              setPreviewData={setPreviewData}
              selectedMaturity={selectedMaturity}
              setSelectedMaturity={setSelectedMaturity}
              _renderMaturityList={_renderMaturityList}
              editPotential={editPotential}
              setEditPotential={setEditPotential}
              selectedPotential={selectedPotential}
              setSelectedPotential={setSelectedPotential}
              editMaturity={editMaturity}
              setEditMaturity={setEditMaturity}
            />

            <AgileBoardPopupProspectInfo
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
              previewData={previewData}
              toggleConsent={toggleConsent}
              getPreviewData={getPreviewData}
              _renderFleetRows={_renderFleetRows}
            />
            <AgileBoardPopupVehicleInfo
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
              previewData={previewData}
            />
            <AgileBoardPopupLeadsInfo
              hideBlocks={hideBlocks}
              previewData={previewData}
            />
            <AgileBoardPopupActivities
              hideBlocks={hideBlocks}
              setHideBlocks={setHideBlocks}
              previewData={previewData}
              //id={state.props.id}
            />

            {/*_renderEventsBlock()}
            {_renderActiveDealsBlock()}
            {_renderDealInfoBlock()}
            {_renderContactsBlock()}
            {_renderProspectInformationBlock()}
            {_renderVehicleInfoBlock()}
            {_renderLeadsInformationBlock()}
            {_renderActivitiesBlock()*/}
          </div>
          {showRemoveItem ? (
            <Popup
              close={() => {
                setShowRemoveItem(false);
                //test
                setPreviewId(null);
              }}
              size="small"
            >
              <div className="agilePopupWrapper">
                <div className="agilePopupWrapper__agilePopup">
                  <div className="agilePopupWrapper__agilePopup__header">
                    <WidgetHeader headline={tc.removeDeal} />
                  </div>
                  <div className="agilePopupWrapper__agilePopup__content">
                    <h4>{tc.addComment}:</h4>
                    <textarea
                      placeholder={tc.comment}
                      onChange={(e) => {
                        setComment(e.target.value);
                      }}
                      ref={removeDealInputRef}
                      value={comment}
                    />
                  </div>
                </div>
                <div className="agilePopupWrapper__agilePopup__footer">
                  <WidgetFooter
                    buttonOneFunc={_removeItem}
                    buttonOneText={tc.remove}
                    buttonTwoFunc={() => {
                      setShowRemoveItem(false);
                    }}
                    buttonTwoText={tc.cancel}
                    noBorder={true}
                  />
                </div>
              </div>
            </Popup>
          ) : null}
          {showLostDeal ? (
            <Popup
              close={() => {
                setShowLostDeal(false);
                setLostReason('');
              }}
              size="small"
            >
              <div className="agilePopupWrapper">
                <div className="agilePopupWrapper__agilePopup">
                  <div className="agilePopupWrapper__agilePopup__header">
                    <WidgetHeader headline={tc.markDealAsLost} />
                  </div>
                  <div className="agilePopupWrapper__agilePopup__content">
                    <div className="agilePopupWrapper__agilePopup__content__row">
                      <h4>{tc.reason}:</h4>
                      <div className="agilePopupWrapper__agilePopup__content__row__items">
                        {agileHelper.getLostDealReasons.map((num) => {
                          return (
                            <ActionButton
                              active={lostReason === num}
                              key={num}
                              icon={num}
                              label={agileHelper.getLostDealReasonsReadable(
                                num
                              )}
                              onClick={() => {
                                setLostReason(num);
                              }}
                              type="regular"
                            />
                          );
                        })}
                      </div>
                    </div>
                    <div className="agilePopupWrapper__agilePopup__content__row">
                      <h4>{tc.addComment}:</h4>
                      <textarea
                        placeholder={tc.comment}
                        onChange={(e) => {
                          setComment(e.target.value);
                        }}
                        ref={lostDealInputRef}
                        value={comment}
                      />
                    </div>
                  </div>
                  <div className="agilePopupWrapper__agilePopup__footer">
                    <WidgetFooter
                      buttonOneFunc={_markDealAsLost}
                      buttonTwoFunc={() => {
                        setShowLostDeal(false);
                        setLostReason('');
                      }}
                      buttonTwoText={tc.cancel}
                      disableButtonOne={
                        !(
                          comment &&
                          comment.length > 2 &&
                          lostReason &&
                          lostReason.length
                        )
                      }
                      noBorder={true}
                    />
                  </div>
                </div>
              </div>
            </Popup>
          ) : null}
          {showWonDeal ? (
            <Popup
              close={() => {
                setShowWonDeal(false);
              }}
              size="small"
            >
              <div className="agilePopupWrapper">
                <div className="agilePopupWrapper__agilePopup">
                  <div className="agilePopupWrapper__agilePopup__header">
                    <WidgetHeader headline={tc.markDealAsWon} />
                  </div>
                  <div className="agilePopupWrapper__agilePopup__content">
                    <h4>{tc.addComment}:</h4>
                    <textarea
                      placeholder={tc.comment}
                      onChange={(e) => {
                        setComment(e.target.value);
                      }}
                      ref={wonDealInputRef}
                      value={comment}
                    />
                  </div>
                  <div className="agilePopupWrapper__agilePopup__footer">
                    <WidgetFooter
                      buttonOneFunc={_markDealAsWon}
                      buttonTwoFunc={() => {
                        setShowWonDeal(false);
                      }}
                      buttonTwoText={tc.cancel}
                      noBorder={true}
                    />
                  </div>
                </div>
              </div>
            </Popup>
          ) : null}
          {state.props.id && previewData ? (
            <Print
              activities={state.activities.activitiesByTarget}
              data={previewData}
              target={state.props.id}
              type="agileBoardPreview"
            />
          ) : null}
        </div>
      ) : (
        <Loading />
      )}
    </div>
  );
};

const MapStateToProps = (state, props) => {
  return {
    activities: state.activities,
    agile: state.agile,
    props: props,
  };
};

export default connect(MapStateToProps)(AgileBoardPopup);